@yuebai008/cli/dist/cli-server/client/front_end/panels/sources/WatchExpressionsSidebarPane.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*as Formatter from"../../models/formatter/formatter.js";import*as SourceMapScopes from"../../models/source_map_scopes/source_map_scopes.js";import*as ObjectUI from"../../ui/legacy/components/object_ui/object_ui.js";import objectValueStyles from"../../ui/legacy/components/object_ui/objectValue.css.js";import*as Components from"../../ui/legacy/components/utils/utils.js";import*as UI from"../../ui/legacy/legacy.js";import watchExpressionsSidebarPaneStyles from"./watchExpressionsSidebarPane.css.js";import{UISourceCodeFrame}from"./UISourceCodeFrame.js";const UIStrings={addWatchExpression:"Add watch expression",refreshWatchExpressions:"Refresh watch expressions",noWatchExpressions:"No watch expressions",deleteAllWatchExpressions:"Delete all watch expressions",addPropertyPathToWatch:"Add property path to watch",deleteWatchExpression:"Delete watch expression",notAvailable:"<not available>",copyValue:"Copy value"},str_=i18n.i18n.registerUIStrings("panels/sources/WatchExpressionsSidebarPane.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);let watchExpressionsSidebarPaneInstance;export class WatchExpressionsSidebarPane extends UI.ThrottledWidget.ThrottledWidget{watchExpressions;emptyElement;watchExpressionsSetting;addButton;refreshButton;treeOutline;expandController;linkifier;constructor(){super(!0),this.watchExpressions=[],this.watchExpressionsSetting=Common.Settings.Settings.instance().createLocalSetting("watchExpressions",[]),this.addButton=new UI.Toolbar.ToolbarButton(i18nString(UIStrings.addWatchExpression),"plus"),this.addButton.addEventListener(UI.Toolbar.ToolbarButton.Events.Click,(e=>{this.addButtonClicked()})),this.refreshButton=new UI.Toolbar.ToolbarButton(i18nString(UIStrings.refreshWatchExpressions),"refresh"),this.refreshButton.addEventListener(UI.Toolbar.ToolbarButton.Events.Click,this.update,this),this.contentElement.classList.add("watch-expressions"),this.contentElement.addEventListener("contextmenu",this.contextMenu.bind(this),!1),this.treeOutline=new ObjectUI.ObjectPropertiesSection.ObjectPropertiesSectionsTreeOutline,this.treeOutline.setShowSelectionOnKeyboardFocus(!0),this.expandController=new ObjectUI.ObjectPropertiesSection.ObjectPropertiesSectionsTreeExpandController(this.treeOutline),UI.Context.Context.instance().addFlavorChangeListener(SDK.RuntimeModel.ExecutionContext,this.update,this),UI.Context.Context.instance().addFlavorChangeListener(SDK.DebuggerModel.CallFrame,this.update,this),this.linkifier=new Components.Linkifier.Linkifier,this.update()}static instance(){return watchExpressionsSidebarPaneInstance||(watchExpressionsSidebarPaneInstance=new WatchExpressionsSidebarPane),watchExpressionsSidebarPaneInstance}toolbarItems(){return[this.addButton,this.refreshButton]}focus(){this.hasFocus()||this.watchExpressions.length>0&&this.treeOutline.forceSelect()}hasExpressions(){return Boolean(this.watchExpressionsSetting.get().length)}saveExpressions(){const e=[];for(let t=0;t<this.watchExpressions.length;t++){const s=this.watchExpressions[t].expression();s&&e.push(s)}this.watchExpressionsSetting.set(e)}async addButtonClicked(){await UI.ViewManager.ViewManager.instance().showView("sources.watch"),this.emptyElement.classList.add("hidden"),this.createWatchExpression(null).startEditing()}async doUpdate(){this.linkifier.reset(),this.contentElement.removeChildren(),this.treeOutline.removeChildren(),this.watchExpressions=[],this.emptyElement=this.contentElement.createChild("div","gray-info-message"),this.emptyElement.textContent=i18nString(UIStrings.noWatchExpressions),this.emptyElement.tabIndex=-1;const e=this.watchExpressionsSetting.get();e.length&&this.emptyElement.classList.add("hidden");for(let t=0;t<e.length;++t){const s=e[t];s&&this.createWatchExpression(s)}}createWatchExpression(e){this.contentElement.appendChild(this.treeOutline.element);const t=new WatchExpression(e,this.expandController,this.linkifier);return t.addEventListener("ExpressionUpdated",this.watchExpressionUpdated,this),this.treeOutline.appendChild(t.treeElement()),this.watchExpressions.push(t),t}watchExpressionUpdated({data:e}){e.expression()||(Platform.ArrayUtilities.removeElement(this.watchExpressions,e),this.treeOutline.removeChild(e.treeElement()),this.emptyElement.classList.toggle("hidden",Boolean(this.watchExpressions.length)),0===this.watchExpressions.length&&this.treeOutline.element.remove()),this.saveExpressions()}contextMenu(e){const t=new UI.ContextMenu.ContextMenu(e);this.populateContextMenu(t,e),t.show()}populateContextMenu(e,t){let s=!1;for(const e of this.watchExpressions)s=s||e.isEditing();s||e.debugSection().appendItem(i18nString(UIStrings.addWatchExpression),this.addButtonClicked.bind(this)),this.watchExpressions.length>1&&e.debugSection().appendItem(i18nString(UIStrings.deleteAllWatchExpressions),this.deleteAllButtonClicked.bind(this));const n=this.treeOutline.treeElementFromEvent(t);if(!n)return;const i=this.watchExpressions.find((e=>n.hasAncestorOrSelf(e.treeElement())));i&&i.populateContextMenu(e,t)}deleteAllButtonClicked(){this.watchExpressions=[],this.saveExpressions(),this.update()}async focusAndAddExpressionToWatch(e){await UI.ViewManager.ViewManager.instance().showView("sources.watch"),this.createWatchExpression(e),this.saveExpressions(),this.update()}handleAction(e,t){const s=UI.Context.Context.instance().flavor(UISourceCodeFrame);if(!s)return!1;const{state:n}=s.textEditor,i=n.sliceDoc(n.selection.main.from,n.selection.main.to);return this.focusAndAddExpressionToWatch(i),!0}appendApplicableItems(e,t,s){s instanceof ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement&&!s.property.synthetic&&t.debugSection().appendItem(i18nString(UIStrings.addPropertyPathToWatch),(()=>this.focusAndAddExpressionToWatch(s.path())));const n=UI.Context.Context.instance().flavor(UISourceCodeFrame);n&&!n.textEditor.state.selection.main.empty&&t.debugSection().appendAction("sources.add-to-watch")}wasShown(){super.wasShown(),this.treeOutline.registerCSSFiles([watchExpressionsSidebarPaneStyles]),this.registerCSSFiles([watchExpressionsSidebarPaneStyles,objectValueStyles])}}export class WatchExpression extends Common.ObjectWrapper.ObjectWrapper{treeElementInternal;nameElement;valueElement;expressionInternal;expandController;element;editing;linkifier;textPrompt;result;preventClickTimeout;resizeObserver;constructor(e,t,s){super(),this.expressionInternal=e,this.expandController=t,this.element=document.createElement("div"),this.element.classList.add("watch-expression"),this.element.classList.add("monospace"),this.editing=!1,this.linkifier=s,this.createWatchExpression(),this.update()}treeElement(){return this.treeElementInternal}expression(){return this.expressionInternal}async#e(e,t){if(Root.Runtime.experiments.isEnabled("evaluateExpressionsWithSourceMaps")){const s=e.debuggerModel.selectedCallFrame();if(s){const e=await SourceMapScopes.NamesResolver.allVariablesInCallFrame(s);try{t=await Formatter.FormatterWorkerPool.formatterWorkerPool().javaScriptSubstitute(t,e)}catch{}}}return e.evaluate({expression:t,objectGroup:WatchExpression.watchObjectGroupId,includeCommandLineAPI:!1,silent:!0,returnByValue:!1,generatePreview:!1},!1,!1)}update(){const e=UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext);e&&this.expressionInternal?this.#e(e,this.expressionInternal).then((e=>{"object"in e?this.createWatchExpression(e.object,e.exceptionDetails):this.createWatchExpression()})):this.createWatchExpression()}startEditing(){this.editing=!0,this.treeElementInternal.setDisableSelectFocus(!0),this.element.removeChildren();const e=this.element.createChild("div");e.textContent=this.nameElement.textContent,this.textPrompt=new ObjectUI.ObjectPropertiesSection.ObjectPropertyPrompt,this.textPrompt.renderAsBlock();const t=this.textPrompt.attachAndStartEditing(e,this.finishEditing.bind(this));this.treeElementInternal.listItemElement.classList.add("watch-expression-editing"),this.treeElementInternal.collapse(),t.classList.add("watch-expression-text-prompt-proxy"),t.addEventListener("keydown",this.promptKeyDown.bind(this),!1);const s=this.element.getComponentSelection();s&&s.selectAllChildren(e)}isEditing(){return Boolean(this.editing)}finishEditing(e,t){if(e&&e.consume(t),this.editing=!1,this.treeElementInternal.setDisableSelectFocus(!1),this.treeElementInternal.listItemElement.classList.remove("watch-expression-editing"),this.textPrompt){this.textPrompt.detach();const e=t?this.expressionInternal:this.textPrompt.text();this.textPrompt=void 0,this.element.removeChildren(),this.updateExpression(e)}}dblClickOnWatchExpression(e){e.consume(),this.isEditing()||this.startEditing()}updateExpression(e){this.expressionInternal&&this.expandController.stopWatchSectionsWithId(this.expressionInternal),this.resizeObserver?.disconnect(),this.expressionInternal=e,this.update(),this.dispatchEventToListeners("ExpressionUpdated",this)}deleteWatchExpression(e){e.consume(!0),this.updateExpression(null)}createWatchExpression(e,t){this.result=e||null,this.element.removeChildren();const s=this.treeElementInternal;if(this.createWatchExpressionTreeElement(e,t),s&&s.parent){const e=s.parent,t=e.indexOfChild(s);e.removeChild(s),e.insertChild(this.treeElementInternal,t)}this.treeElementInternal.select()}createWatchExpressionHeader(e,t){const s=this.element.createChild("div","watch-expression-header"),n=UI.Icon.Icon.create("cross","watch-expression-delete-button");this.resizeObserver=new ResizeObserver((e=>{e.forEach((e=>{e.contentRect.width<55?(n.classList.remove("right-aligned"),n.classList.add("left-aligned")):(n.classList.remove("left-aligned"),n.classList.add("right-aligned"))}))})),this.resizeObserver.observe(s),UI.Tooltip.Tooltip.install(n,i18nString(UIStrings.deleteWatchExpression)),n.addEventListener("click",this.deleteWatchExpression.bind(this),!1);const i=s.createChild("div","watch-expression-title tree-element-title");if(i.appendChild(n),this.nameElement=ObjectUI.ObjectPropertiesSection.ObjectPropertiesSection.createNameElement(this.expressionInternal),Boolean(t)||!e)this.valueElement=document.createElement("span"),this.valueElement.classList.add("watch-expression-error"),this.valueElement.classList.add("value"),i.classList.add("dimmed"),this.valueElement.textContent=i18nString(UIStrings.notAvailable),void 0!==t&&void 0!==t.exception&&void 0!==t.exception.description&&UI.Tooltip.Tooltip.install(this.valueElement,t.exception.description);else{const s=ObjectUI.ObjectPropertiesSection.ObjectPropertiesSection.createPropertyValueWithCustomSupport(e,Boolean(t),!1,i,this.linkifier);this.valueElement=s.element}const r=document.createElement("span");return r.classList.add("watch-expressions-separator"),r.textContent=": ",i.append(this.nameElement,r,this.valueElement),s}createWatchExpressionTreeElement(e,t){const s=this.createWatchExpressionHeader(e,t);!t&&e&&e.hasChildren&&!e.customPreview()?(s.classList.add("watch-expression-object-header"),this.treeElementInternal=new ObjectUI.ObjectPropertiesSection.RootElement(e,this.linkifier),this.expandController.watchSection(this.expressionInternal,this.treeElementInternal),this.treeElementInternal.toggleOnClick=!1,this.treeElementInternal.listItemElement.addEventListener("click",this.onSectionClick.bind(this),!1),this.treeElementInternal.listItemElement.addEventListener("dblclick",this.dblClickOnWatchExpression.bind(this))):(s.addEventListener("dblclick",this.dblClickOnWatchExpression.bind(this)),this.treeElementInternal=new UI.TreeOutline.TreeElement),this.treeElementInternal.title=this.element,this.treeElementInternal.listItemElement.classList.add("watch-expression-tree-item"),this.treeElementInternal.listItemElement.addEventListener("keydown",(e=>{"Enter"!==e.key||this.isEditing()?"Delete"!==e.key||this.isEditing()||this.deleteWatchExpression(e):(this.startEditing(),e.consume(!0))}))}onSectionClick(e){e.consume(!0);1===e.detail?this.preventClickTimeout=window.setTimeout(function(){if(!this.treeElementInternal)return;this.treeElementInternal.expanded?this.treeElementInternal.collapse():this.editing||this.treeElementInternal.expand()}.bind(this),333):void 0!==this.preventClickTimeout&&(window.clearTimeout(this.preventClickTimeout),this.preventClickTimeout=void 0)}promptKeyDown(e){const t=Platform.KeyboardUtilities.isEscKey(e);("Enter"===e.key||t)&&this.finishEditing(e,t)}populateContextMenu(e,t){this.isEditing()||e.editSection().appendItem(i18nString(UIStrings.deleteWatchExpression),this.updateExpression.bind(this,null)),this.isEditing()||!this.result||"number"!==this.result.type&&"string"!==this.result.type||e.clipboardSection().appendItem(i18nString(UIStrings.copyValue),this.copyValueButtonClicked.bind(this));const s=UI.UIUtils.deepElementFromEvent(t);s&&this.valueElement.isSelfOrAncestor(s)&&this.result&&e.appendApplicableItems(this.result)}copyValueButtonClicked(){Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(this.valueElement.textContent)}static watchObjectGroupId="watch-group"}