@yuebai008/cli/dist/cli-server/client/front_end/panels/profiler/ProfilesPanel.js

Command line interface for rapid qg-minigame development

import*as Common from"../../core/common/common.js";import*as Host from"../../core/host/host.js";import*as i18n from"../../core/i18n/i18n.js";import*as Platform from"../../core/platform/platform.js";import*as Root from"../../core/root/root.js";import*as SDK from"../../core/sdk/sdk.js";import objectValueStyles from"../../ui/legacy/components/object_ui/objectValue.css.js";import*as UI from"../../ui/legacy/legacy.js";import heapProfilerStyles from"./heapProfiler.css.js";import profilesPanelStyles from"./profilesPanel.css.js";import profilesSidebarTreeStyles from"./profilesSidebarTree.css.js";import{ProfileEvents as ProfileTypeEvents}from"./ProfileHeader.js";import{Events as ProfileLauncherEvents,ProfileLauncherView}from"./ProfileLauncherView.js";import{ProfileSidebarTreeElement,setSharedFileSelectorElement}from"./ProfileSidebarTreeElement.js";import{instance}from"./ProfileTypeRegistry.js";const UIStrings={clearAllProfiles:"Clear all profiles",cantLoadFileSupportedFile:"Can’t load file. Supported file extensions: ''{PH1}''.",cantLoadProfileWhileAnother:"Can’t load profile while another profile is being recorded.",profileLoadingFailedS:"Profile loading failed: {PH1}.",load:"Load…",runD:"Run {PH1}",profiles:"Profiles",deprecationWarnMsg:"This panel will be deprecated in the upcoming version. Use the Performance panel to record JavaScript CPU profiles.",learnMore:"Learn more",feedback:"Feedback",goToPerformancePanel:"Go to Performance Panel",enableThisPanelTemporarily:"Enable this panel temporarily"},str_=i18n.i18n.registerUIStrings("panels/profiler/ProfilesPanel.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class ProfilesPanel extends UI.Panel.PanelWithSidebar{profileTypes;profilesItemTreeElement;sidebarTree;profileViews;toolbarElement;toggleRecordAction;toggleRecordButton;clearResultsButton;profileViewToolbar;profileGroups;launcherView;visibleView;profileToView;typeIdToSidebarSection;fileSelectorElement;selectedProfileType;constructor(e,t,i){super(e),this.profileTypes=t;const r=new UI.Widget.VBox;this.splitWidget().setMainWidget(r),this.profilesItemTreeElement=new ProfilesSidebarTreeElement(this),this.sidebarTree=new UI.TreeOutline.TreeOutlineInShadow,this.sidebarTree.element.classList.add("profiles-sidebar-tree-box"),this.panelSidebarElement().appendChild(this.sidebarTree.element),this.sidebarTree.appendChild(this.profilesItemTreeElement),this.sidebarTree.element.addEventListener("keydown",this.onKeyDown.bind(this),!1),this.profileViews=document.createElement("div"),this.profileViews.id="profile-views",this.profileViews.classList.add("vbox"),r.element.appendChild(this.profileViews),this.toolbarElement=document.createElement("div"),this.toolbarElement.classList.add("profiles-toolbar"),r.element.insertBefore(this.toolbarElement,r.element.firstChild),this.panelSidebarElement().classList.add("profiles-tree-sidebar");const o=document.createElement("div");o.classList.add("profiles-toolbar"),this.panelSidebarElement().insertBefore(o,this.panelSidebarElement().firstChild);const l=new UI.Toolbar.Toolbar("",o);this.toggleRecordAction=UI.ActionRegistry.ActionRegistry.instance().action(i),this.toggleRecordButton=UI.Toolbar.Toolbar.createActionButton(this.toggleRecordAction),l.appendToolbarItem(this.toggleRecordButton),this.clearResultsButton=new UI.Toolbar.ToolbarButton(i18nString(UIStrings.clearAllProfiles),"clear"),this.clearResultsButton.addEventListener(UI.Toolbar.ToolbarButton.Events.Click,this.reset,this),l.appendToolbarItem(this.clearResultsButton),l.appendSeparator(),l.appendToolbarItem(UI.Toolbar.Toolbar.createActionButtonForId("components.collect-garbage")),this.profileViewToolbar=new UI.Toolbar.Toolbar("",this.toolbarElement),this.profileViewToolbar.makeWrappable(!0),this.profileGroups={},this.launcherView=new ProfileLauncherView(this),this.launcherView.addEventListener(ProfileLauncherEvents.ProfileTypeSelected,this.onProfileTypeSelected,this),this.profileToView=[],this.typeIdToSidebarSection={};const n=this.profileTypes;for(let e=0;e<n.length;e++)this.registerProfileType(n[e]);this.launcherView.restoreSelectedProfileType(),this.profilesItemTreeElement.select(),this.showLauncherView(),this.createFileSelectorElement(),this.element.addEventListener("contextmenu",this.handleContextMenuEvent.bind(this),!1),SDK.TargetManager.TargetManager.instance().addEventListener(SDK.TargetManager.Events.SuspendStateChanged,this.onSuspendStateChanged,this),UI.Context.Context.instance().addFlavorChangeListener(SDK.CPUProfilerModel.CPUProfilerModel,this.updateProfileTypeSpecificUI,this),UI.Context.Context.instance().addFlavorChangeListener(SDK.HeapProfilerModel.HeapProfilerModel,this.updateProfileTypeSpecificUI,this)}onKeyDown(e){const t=e;let i=!1;"ArrowDown"!==t.key||t.altKey?"ArrowUp"!==t.key||t.altKey||(i=this.sidebarTree.selectPrevious()):i=this.sidebarTree.selectNext(),i&&t.consume(!0)}searchableView(){const e=this.visibleView;return e&&e.searchableView?e.searchableView():null}createFileSelectorElement(){this.fileSelectorElement&&this.element.removeChild(this.fileSelectorElement),this.fileSelectorElement=UI.UIUtils.createFileSelectorElement(this.loadFromFile.bind(this)),setSharedFileSelectorElement(this.fileSelectorElement),this.element.appendChild(this.fileSelectorElement)}findProfileTypeByExtension(e){return this.profileTypes.find((t=>Boolean(t.fileExtension())&&e.endsWith(t.fileExtension()||"")))||null}async loadFromFile(e){this.createFileSelectorElement();const t=this.findProfileTypeByExtension(e.name);if(!t){const e=new Set(this.profileTypes.map((e=>e.fileExtension())).filter((e=>e)));return void Common.Console.Console.instance().error(i18nString(UIStrings.cantLoadFileSupportedFile,{PH1:Array.from(e).join("', '")}))}if(Boolean(t.profileBeingRecorded()))return void Common.Console.Console.instance().error(i18nString(UIStrings.cantLoadProfileWhileAnother));const i=await t.loadFromFile(e);i&&"message"in i&&UI.UIUtils.MessageDialog.show(i18nString(UIStrings.profileLoadingFailedS,{PH1:i.message}))}toggleRecord(){if(!this.toggleRecordAction.enabled())return!0;const e=Platform.DOMUtilities.deepActiveElement(this.element.ownerDocument),t=this.selectedProfileType;if(!t)return!0;const i=t.buttonClicked();return this.updateToggleRecordAction(i),i?(this.launcherView.profileStarted(),t.hasTemporaryView()&&this.showProfile(t.profileBeingRecorded())):this.launcherView.profileFinished(),e&&e.focus(),!0}onSuspendStateChanged(){this.updateToggleRecordAction(this.toggleRecordAction.toggled())}updateToggleRecordAction(e){const t=Boolean(UI.Context.Context.instance().flavor(SDK.CPUProfilerModel.CPUProfilerModel)||UI.Context.Context.instance().flavor(SDK.HeapProfilerModel.HeapProfilerModel)),i=e||!SDK.TargetManager.TargetManager.instance().allTargetsSuspended()&&t;this.toggleRecordAction.setEnabled(i),this.toggleRecordAction.setToggled(e),i?this.toggleRecordButton.setTitle(this.selectedProfileType?this.selectedProfileType.buttonTooltip:""):this.toggleRecordButton.setTitle(UI.UIUtils.anotherProfilerActiveLabel()),this.selectedProfileType&&this.launcherView.updateProfileType(this.selectedProfileType,i)}profileBeingRecordedRemoved(){this.updateToggleRecordAction(!1),this.launcherView.profileFinished()}onProfileTypeSelected(e){this.selectedProfileType=e.data,this.updateProfileTypeSpecificUI()}updateProfileTypeSpecificUI(){this.updateToggleRecordAction(this.toggleRecordAction.toggled())}reset(){this.profileTypes.forEach((e=>e.reset())),delete this.visibleView,this.profileGroups={},this.updateToggleRecordAction(!1),this.launcherView.profileFinished(),this.sidebarTree.element.classList.remove("some-expandable"),this.launcherView.detach(),this.profileViews.removeChildren(),this.profileViewToolbar.removeToolbarItems(),this.clearResultsButton.element.classList.remove("hidden"),this.profilesItemTreeElement.select(),this.showLauncherView()}showLauncherView(){this.closeVisibleView(),this.profileViewToolbar.removeToolbarItems(),this.launcherView.show(this.profileViews),this.visibleView=this.launcherView,this.toolbarElement.classList.add("hidden")}registerProfileType(e){this.launcherView.addProfileType(e);const t=new ProfileTypeSidebarSection(this,e);this.typeIdToSidebarSection[e.id]=t,this.sidebarTree.appendChild(t),t.childrenListElement.addEventListener("contextmenu",this.handleContextMenuEvent.bind(this),!1),e.addEventListener(ProfileTypeEvents.ViewUpdated,this.updateProfileTypeSpecificUI,this),e.addEventListener(ProfileTypeEvents.AddProfileHeader,(function(e){this.addProfileHeader(e.data)}),this),e.addEventListener(ProfileTypeEvents.RemoveProfileHeader,(function(e){this.removeProfileHeader(e.data)}),this),e.addEventListener(ProfileTypeEvents.ProfileComplete,(function(e){this.showProfile(e.data)}),this);const i=e.getProfiles();for(let e=0;e<i.length;e++)this.addProfileHeader(i[e])}handleContextMenuEvent(e){const t=new UI.ContextMenu.ContextMenu(e);this.panelSidebarElement().isSelfOrAncestor(e.target)&&t.defaultSection().appendItem(i18nString(UIStrings.load),this.fileSelectorElement.click.bind(this.fileSelectorElement)),t.show()}showLoadFromFileDialog(){this.fileSelectorElement.click()}addProfileHeader(e){const t=e.profileType().id;this.typeIdToSidebarSection[t].addProfileHeader(e),this.visibleView&&this.visibleView!==this.launcherView||this.showProfile(e)}removeProfileHeader(e){e.profileType().profileBeingRecorded()===e&&this.profileBeingRecordedRemoved();const t=this.indexOfViewForProfile(e);-1!==t&&this.profileToView.splice(t,1);const i=e.profileType().id;this.typeIdToSidebarSection[i].removeProfileHeader(e)&&(this.profilesItemTreeElement.select(),this.showLauncherView())}showProfile(e){if(!e||e.profileType().profileBeingRecorded()===e&&!e.profileType().hasTemporaryView())return null;const t=this.viewForProfile(e);if(t===this.visibleView)return t;this.closeVisibleView(),t.show(this.profileViews),this.toolbarElement.classList.remove("hidden"),this.visibleView=t;const i=this.typeIdToSidebarSection[e.profileType().id].sidebarElementForProfile(e);return i&&i.revealAndSelect(),this.profileViewToolbar.removeToolbarItems(),t.toolbarItems().then((e=>{e.map((e=>this.profileViewToolbar.appendToolbarItem(e)))})),t}showObject(e,t){}async linkifyObject(e){return null}viewForProfile(e){const t=this.indexOfViewForProfile(e);if(-1!==t)return this.profileToView[t].view;const i=e.createView(this);return i.element.classList.add("profile-view"),this.profileToView.push({profile:e,view:i}),i}indexOfViewForProfile(e){return this.profileToView.findIndex((t=>t.profile===e))}closeVisibleView(){this.visibleView&&this.visibleView.detach(),delete this.visibleView}focus(){this.sidebarTree.focus()}wasShown(){super.wasShown(),this.registerCSSFiles([objectValueStyles,profilesPanelStyles,heapProfilerStyles]),this.sidebarTree.registerCSSFiles([profilesSidebarTreeStyles])}}export class ProfileTypeSidebarSection extends UI.TreeOutline.TreeElement{dataDisplayDelegate;profileTreeElements;profileGroups;constructor(e,t){super(t.treeItemTitle,!0),this.selectable=!1,this.dataDisplayDelegate=e,this.profileTreeElements=[],this.profileGroups={},this.expand(),this.hidden=!0,this.setCollapsible(!1)}addProfileHeader(e){this.hidden=!1;const t=e.profileType();let i=this;const r=e.createSidebarTreeElement(this.dataDisplayDelegate);if(this.profileTreeElements.push(r),!e.fromFile()&&t.profileBeingRecorded()!==e){const t=e.title;let o=this.profileGroups[t];o||(o=new ProfileGroup,this.profileGroups[t]=o),o.profileSidebarTreeElements.push(r);const l=o.profileSidebarTreeElements.length;if(2===l){o.sidebarTreeElement=new ProfileGroupSidebarTreeElement(this.dataDisplayDelegate,e.title);const t=o.profileSidebarTreeElements[0],i=this.children().indexOf(t);this.insertChild(o.sidebarTreeElement,i);const r=t.selected;this.removeChild(t),o.sidebarTreeElement.appendChild(t),r&&t.revealAndSelect(),t.setSmall(!0),t.setMainTitle(i18nString(UIStrings.runD,{PH1:1})),this.treeOutline&&this.treeOutline.element.classList.add("some-expandable")}l>=2&&(i=o.sidebarTreeElement,r.setSmall(!0),r.setMainTitle(i18nString(UIStrings.runD,{PH1:l})))}i&&i.appendChild(r)}removeProfileHeader(e){const t=this.sidebarElementIndex(e);if(-1===t)return!1;const i=this.profileTreeElements[t];this.profileTreeElements.splice(t,1);let r=this;const o=this.profileGroups[e.title];if(o){const t=o.profileSidebarTreeElements;if(t.splice(t.indexOf(i),1),1===t.length){const i=r.children().indexOf(o.sidebarTreeElement);o.sidebarTreeElement&&o.sidebarTreeElement.removeChild(t[0]),this.insertChild(t[0],i),t[0].setSmall(!1),t[0].setMainTitle(e.title),o.sidebarTreeElement&&this.removeChild(o.sidebarTreeElement)}0!==t.length&&(r=o.sidebarTreeElement)}return r&&r.removeChild(i),i.dispose(),!this.childCount()&&(this.hidden=!0,!0)}sidebarElementForProfile(e){const t=this.sidebarElementIndex(e);return-1===t?null:this.profileTreeElements[t]}sidebarElementIndex(e){const t=this.profileTreeElements;for(let i=0;i<t.length;i++)if(t[i].profile===e)return i;return-1}onattach(){this.listItemElement.classList.add("profiles-tree-section")}}export class ProfileGroup{profileSidebarTreeElements;sidebarTreeElement;constructor(){this.profileSidebarTreeElements=[],this.sidebarTreeElement=null}}export class ProfileGroupSidebarTreeElement extends UI.TreeOutline.TreeElement{dataDisplayDelegate;profileTitle;toggleOnClick;constructor(e,t){super("",!0),this.selectable=!1,this.dataDisplayDelegate=e,this.profileTitle=t,this.expand(),this.toggleOnClick=!0}onselect(){const e=this.childCount()>0;if(e){const e=this.lastChild();e instanceof ProfileSidebarTreeElement&&this.dataDisplayDelegate.showProfile(e.profile)}return e}onattach(){this.listItemElement.classList.add("profile-group-sidebar-tree-item"),this.listItemElement.createChild("div","icon"),this.listItemElement.createChild("div","titles no-subtitle").createChild("span","title-container").createChild("span","title").textContent=this.profileTitle}}export class ProfilesSidebarTreeElement extends UI.TreeOutline.TreeElement{panel;constructor(e){super("",!1),this.selectable=!0,this.panel=e}onselect(){return this.panel.showLauncherView(),!0}onattach(){this.listItemElement.classList.add("profile-launcher-view-tree-item"),this.listItemElement.createChild("div","icon"),this.listItemElement.createChild("div","titles no-subtitle").createChild("span","title-container").createChild("span","title").textContent=i18nString(UIStrings.profiles)}}let jsProfilerPanelInstance;export class JSProfilerPanel extends ProfilesPanel{constructor(){super("js_profiler",[instance.cpuProfileType],"profiler.js-toggle-recording"),this.splitWidget().mainWidget()?.setMinimumSize(350,0),Root.Runtime.experiments.isEnabled("jsProfilerTemporarilyEnable")?this.#e():this.#t()}static instance(e={forceNew:null}){const{forceNew:t}=e;return jsProfilerPanelInstance&&!t||(jsProfilerPanelInstance=new JSProfilerPanel),jsProfilerPanelInstance}#e(){function e(){Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab("https://github.com/ChromeDevTools/rfcs/discussions/2")}const t=new UI.Infobar.Infobar(UI.Infobar.Type.Warning,i18nString(UIStrings.deprecationWarnMsg),[{text:i18nString(UIStrings.learnMore),highlight:!1,delegate:e,dismiss:!1},{text:i18nString(UIStrings.feedback),highlight:!1,delegate:e,dismiss:!1},{text:i18nString(UIStrings.goToPerformancePanel),highlight:!0,delegate:async function(){await UI.InspectorView.InspectorView.instance().showPanel("timeline")},dismiss:!1}],void 0);t.setParentView(this),this.splitWidget().mainWidget()?.element.prepend(t.element)}#t(){const e=this.splitWidget().mainWidget();if(e?.detachChildWidgets(),e){const t=new UI.Widget.VBox;t.contentElement.classList.add("empty-landing-page","fill");const i=t.contentElement.createChild("div");i.createChild("p").textContent="This panel is deprecated and will be removed in the next version. Use the Performance panel to record JavaScript CPU profiles.",i.createChild("p").textContent="You can temporarily enable this panel with Settings > Experiments > Enable JavaScript Profiler.",i.appendChild(UI.UIUtils.createTextButton(i18nString(UIStrings.goToPerformancePanel),(async function(){await UI.InspectorView.InspectorView.instance().showPanel("timeline")}),"infobar-button primary-button")),i.appendChild(UI.UIUtils.createTextButton(i18nString(UIStrings.learnMore),(function(){Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab("https://developer.chrome.com/blog/js-profiler-deprecation/")}))),i.appendChild(UI.UIUtils.createTextButton(i18nString(UIStrings.feedback),(function(){Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab("https://bugs.chromium.org/p/chromium/issues/detail?id=1354548")}))),i.appendChild(UI.UIUtils.createTextButton(i18nString(UIStrings.enableThisPanelTemporarily),(async function(){await UI.ViewManager.ViewManager.instance().showView("experiments");(await UI.ViewManager.ViewManager.instance().view("experiments").widget()).setFilter("Enable JavaScript Profiler temporarily")}))),t.show(e.element)}}wasShown(){super.wasShown(),UI.Context.Context.instance().setFlavor(JSProfilerPanel,this)}willHide(){UI.Context.Context.instance().setFlavor(JSProfilerPanel,null)}handleAction(e,t){const i=UI.Context.Context.instance().flavor(JSProfilerPanel);if(!(i instanceof JSProfilerPanel))throw new Error("non-null JSProfilerPanel expected!");return i.toggleRecord(),!0}}