@yuebai008/cli/dist/cli-server/client/front_end/panels/browser_debugger/DOMBreakpointsSidebarPane.js

Command line interface for rapid qg-minigame development

import*as Common from"../../core/common/common.js";import*as i18n from"../../core/i18n/i18n.js";import*as SDK from"../../core/sdk/sdk.js";import*as UI from"../../ui/legacy/legacy.js";import*as Sources from"../sources/sources.js";import domBreakpointsSidebarPaneStyles from"./domBreakpointsSidebarPane.css.js";const UIStrings={noBreakpoints:"No breakpoints",domBreakpointsList:"DOM Breakpoints list",sS:"{PH1}: {PH2}",sSS:"{PH1}: {PH2}, {PH3}",checked:"checked",unchecked:"unchecked",sBreakpointHit:"{PH1} breakpoint hit",breakpointHit:"breakpoint hit",revealDomNodeInElementsPanel:"Reveal DOM node in Elements panel",removeBreakpoint:"Remove breakpoint",removeAllDomBreakpoints:"Remove all DOM breakpoints",subtreeModified:"Subtree modified",attributeModified:"Attribute modified",nodeRemoved:"Node removed",breakOn:"Break on",breakpointRemoved:"Breakpoint removed",breakpointSet:"Breakpoint set"},str_=i18n.i18n.registerUIStrings("panels/browser_debugger/DOMBreakpointsSidebarPane.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_),i18nLazyString=i18n.i18n.getLazilyComputedLocalizedString.bind(void 0,str_);let domBreakpointsSidebarPaneInstance;export class DOMBreakpointsSidebarPane extends UI.Widget.VBox{elementToCheckboxes;#e;#t;#i;#n;constructor(){super(!0),this.elementToCheckboxes=new WeakMap,this.#e=this.contentElement.createChild("div","gray-info-message"),this.#e.textContent=i18nString(UIStrings.noBreakpoints),this.#t=new UI.ListModel.ListModel,this.#i=new UI.ListControl.ListControl(this.#t,this,UI.ListControl.ListMode.NonViewport),this.contentElement.appendChild(this.#i.element),this.#i.element.classList.add("breakpoint-list","hidden"),UI.ARIAUtils.markAsList(this.#i.element),UI.ARIAUtils.setLabel(this.#i.element,i18nString(UIStrings.domBreakpointsList)),this.#e.tabIndex=-1,SDK.TargetManager.TargetManager.instance().addModelListener(SDK.DOMDebuggerModel.DOMDebuggerModel,SDK.DOMDebuggerModel.Events.DOMBreakpointAdded,this.breakpointAdded,this),SDK.TargetManager.TargetManager.instance().addModelListener(SDK.DOMDebuggerModel.DOMDebuggerModel,SDK.DOMDebuggerModel.Events.DOMBreakpointToggled,this.breakpointToggled,this),SDK.TargetManager.TargetManager.instance().addModelListener(SDK.DOMDebuggerModel.DOMDebuggerModel,SDK.DOMDebuggerModel.Events.DOMBreakpointsRemoved,this.breakpointsRemoved,this);for(const e of SDK.TargetManager.TargetManager.instance().models(SDK.DOMDebuggerModel.DOMDebuggerModel)){e.retrieveDOMBreakpoints();for(const t of e.domBreakpoints())this.addBreakpoint(t)}this.#n=null,this.update()}static instance(){return domBreakpointsSidebarPaneInstance||(domBreakpointsSidebarPaneInstance=new DOMBreakpointsSidebarPane),domBreakpointsSidebarPaneInstance}createElementForItem(e){const t=document.createElement("div");t.classList.add("breakpoint-entry"),t.addEventListener("contextmenu",this.contextMenu.bind(this,e),!0),UI.ARIAUtils.markAsListitem(t),t.tabIndex=-1;const i=UI.UIUtils.CheckboxLabel.create(void 0,e.enabled),n=i.checkboxElement;n.addEventListener("click",this.checkboxClicked.bind(this,e),!1),n.tabIndex=-1,this.elementToCheckboxes.set(t,n),t.appendChild(i),t.addEventListener("keydown",(e=>{" "===e.key&&(i.checkboxElement.click(),e.consume(!0))}));const o=document.createElement("div");o.classList.add("dom-breakpoint"),t.appendChild(o);const s=document.createElement("div"),r=BreakpointTypeLabels.get(e.type);s.textContent=r?r():null;const a=r?r():"";UI.ARIAUtils.setLabel(n,a);const d=e.enabled?i18nString(UIStrings.checked):i18nString(UIStrings.unchecked),l=document.createElement("monospace");return l.style.display="block",o.appendChild(l),Common.Linkifier.Linkifier.linkify(e.node,{preventKeyboardFocus:!0,tooltip:void 0}).then((e=>{l.appendChild(e),UI.ARIAUtils.setLabel(n,i18nString(UIStrings.sS,{PH1:a,PH2:e.deepTextContent()})),UI.ARIAUtils.setLabel(t,i18nString(UIStrings.sSS,{PH1:a,PH2:e.deepTextContent(),PH3:d}))})),o.appendChild(s),e===this.#n?(t.classList.add("breakpoint-hit"),UI.ARIAUtils.setDescription(t,i18nString(UIStrings.sBreakpointHit,{PH1:d})),UI.ARIAUtils.setDescription(n,i18nString(UIStrings.breakpointHit))):UI.ARIAUtils.setDescription(t,d),this.#e.classList.add("hidden"),this.#i.element.classList.remove("hidden"),t}heightForItem(e){return 0}isItemSelectable(e){return!0}updateSelectedItemARIA(e,t){return!0}selectedItemChanged(e,t,i,n){i&&(i.tabIndex=-1),n&&(this.setDefaultFocusedElement(n),n.tabIndex=0,this.hasFocus()&&n.focus())}breakpointAdded(e){this.addBreakpoint(e.data)}breakpointToggled(e){const t=this.hasFocus(),i=e.data;this.#i.refreshItem(i),t&&this.focus()}breakpointsRemoved(e){const t=this.hasFocus(),i=e.data;let n=-1;for(const e of i){const t=this.#t.indexOf(e);t>=0&&(this.#t.remove(t),n=t)}if(0===this.#t.length)this.#e.classList.remove("hidden"),this.setDefaultFocusedElement(this.#e),this.#i.element.classList.add("hidden");else if(n>=0){const e=this.#t.at(n);e&&this.#i.selectItem(e)}t&&this.focus()}addBreakpoint(e){this.#t.insertWithComparator(e,((e,t)=>e.type>t.type?-1:e.type<t.type?1:0)),this.#i.selectedItem()&&this.hasFocus()||this.#i.selectItem(this.#t.at(0))}contextMenu(e,t){const i=new UI.ContextMenu.ContextMenu(t);i.defaultSection().appendItem(i18nString(UIStrings.revealDomNodeInElementsPanel),(()=>Common.Revealer.reveal(e.node))),i.defaultSection().appendItem(i18nString(UIStrings.removeBreakpoint),(()=>{e.domDebuggerModel.removeDOMBreakpoint(e.node,e.type)})),i.defaultSection().appendItem(i18nString(UIStrings.removeAllDomBreakpoints),(()=>{e.domDebuggerModel.removeAllDOMBreakpoints()})),i.show()}checkboxClicked(e,t){e.domDebuggerModel.toggleDOMBreakpoint(e,!!t.target&&t.target.checked)}flavorChanged(e){this.update()}update(){const e=UI.Context.Context.instance().flavor(SDK.DebuggerModel.DebuggerPausedDetails);if(this.#n){const e=this.#n;this.#n=null,this.#i.refreshItem(e)}if(!e||!e.auxData||"DOM"!==e.reason)return;const t=e.debuggerModel.target().model(SDK.DOMDebuggerModel.DOMDebuggerModel);if(!t)return;const i=t.resolveDOMBreakpointData(e.auxData);if(i){for(const e of this.#t)e.node===i.node&&e.type===i.type&&(this.#n=e);this.#n&&this.#i.refreshItem(this.#n),UI.ViewManager.ViewManager.instance().showView("sources.domBreakpoints")}}wasShown(){super.wasShown(),this.registerCSSFiles([domBreakpointsSidebarPaneStyles])}}const BreakpointTypeLabels=new Map([["subtree-modified",i18nLazyString(UIStrings.subtreeModified)],["attribute-modified",i18nLazyString(UIStrings.attributeModified)],["node-removed",i18nLazyString(UIStrings.nodeRemoved)]]);let contextMenuProviderInstance;export class ContextMenuProvider{static instance(e={forceNew:null}){const{forceNew:t}=e;return contextMenuProviderInstance&&!t||(contextMenuProviderInstance=new ContextMenuProvider),contextMenuProviderInstance}appendApplicableItems(e,t,i){const n=i;if(n.pseudoType())return;const o=n.domModel().target().model(SDK.DOMDebuggerModel.DOMDebuggerModel);if(!o)return;function s(e){if(!o)return;const t=Sources.DebuggerPausedMessage.BreakpointTypeNouns.get(e),i=t?t():"";o.hasDOMBreakpoint(n,e)?(o.removeDOMBreakpoint(n,e),UI.ARIAUtils.alert(`${i18nString(UIStrings.breakpointRemoved)}: ${i}`)):(o.setDOMBreakpoint(n,e),UI.ARIAUtils.alert(`${i18nString(UIStrings.breakpointSet)}: ${i}`))}const r=t.debugSection().appendSubMenuItem(i18nString(UIStrings.breakOn)),a={SubtreeModified:"subtree-modified",AttributeModified:"attribute-modified",NodeRemoved:"node-removed"};for(const e of Object.values(a)){const t=Sources.DebuggerPausedMessage.BreakpointTypeNouns.get(e);t&&r.defaultSection().appendCheckboxItem(t(),s.bind(null,e),o.hasDOMBreakpoint(n,e))}}}