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

Command line interface for rapid qg-minigame development

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 xhrBreakpointsSidebarPaneStyles from"./xhrBreakpointsSidebarPane.css.js";const UIStrings={xhrfetchBreakpoints:"XHR/fetch Breakpoints",noBreakpoints:"No breakpoints",addXhrfetchBreakpoint:"Add XHR/fetch breakpoint",addBreakpoint:"Add breakpoint",breakWhenUrlContains:"Break when URL contains:",urlBreakpoint:"URL Breakpoint",urlContainsS:'URL contains "{PH1}"',anyXhrOrFetch:"Any XHR or fetch",breakpointHit:"breakpoint hit",removeAllBreakpoints:"Remove all breakpoints",removeBreakpoint:"Remove breakpoint"},str_=i18n.i18n.registerUIStrings("panels/browser_debugger/XHRBreakpointsSidebarPane.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_),containerToBreakpointEntry=new WeakMap,breakpointEntryToCheckbox=new WeakMap;let xhrBreakpointsSidebarPaneInstance;export class XHRBreakpointsSidebarPane extends UI.Widget.VBox{#e;#t;#n;#i;#s;#r;constructor(){super(!0),this.#e=new UI.ListModel.ListModel,this.#t=new UI.ListControl.ListControl(this.#e,this,UI.ListControl.ListMode.NonViewport),this.contentElement.appendChild(this.#t.element),this.#t.element.classList.add("breakpoint-list","hidden"),UI.ARIAUtils.markAsList(this.#t.element),UI.ARIAUtils.setLabel(this.#t.element,i18nString(UIStrings.xhrfetchBreakpoints)),this.#n=this.contentElement.createChild("div","gray-info-message"),this.#n.textContent=i18nString(UIStrings.noBreakpoints),this.#i=new Map,this.#s=new UI.Toolbar.ToolbarButton(i18nString(UIStrings.addXhrfetchBreakpoint),"plus"),this.#s.addEventListener(UI.Toolbar.ToolbarButton.Events.Click,(()=>{this.addButtonClicked()})),this.#n.addEventListener("contextmenu",this.emptyElementContextMenu.bind(this),!0),this.#n.tabIndex=-1,this.restoreBreakpoints(),this.update()}static instance(){return xhrBreakpointsSidebarPaneInstance||(xhrBreakpointsSidebarPaneInstance=new XHRBreakpointsSidebarPane),xhrBreakpointsSidebarPaneInstance}toolbarItems(){return[this.#s]}emptyElementContextMenu(e){const t=new UI.ContextMenu.ContextMenu(e);t.defaultSection().appendItem(i18nString(UIStrings.addBreakpoint),this.addButtonClicked.bind(this)),t.show()}async addButtonClicked(){await UI.ViewManager.ViewManager.instance().showView("sources.xhrBreakpoints");const e=document.createElement("p");e.classList.add("breakpoint-condition"),e.textContent=i18nString(UIStrings.breakWhenUrlContains);const t=e.createChild("span","breakpoint-condition-input");function n(t,n,i){this.removeListElement(e),t&&(SDK.DOMDebuggerModel.DOMDebuggerManager.instance().addXHRBreakpoint(i,!0),this.setBreakpoint(i)),this.update()}UI.ARIAUtils.setLabel(t,i18nString(UIStrings.urlBreakpoint)),this.addListElement(e,this.#t.element.firstChild);const i=new UI.InplaceEditor.Config(n.bind(this,!0),n.bind(this,!1));UI.InplaceEditor.InplaceEditor.startEditing(t,i)}heightForItem(e){return 0}isItemSelectable(e){return!0}setBreakpoint(e){-1!==this.#e.indexOf(e)?this.#t.refreshItem(e):this.#e.insertWithComparator(e,((e,t)=>e>t?1:e<t?-1:0)),this.#t.selectedItem()&&this.hasFocus()||this.#t.selectItem(this.#e.at(0))}createElementForItem(e){const t=document.createElement("div");UI.ARIAUtils.markAsListitem(t);const n=t.createChild("div","breakpoint-entry");containerToBreakpointEntry.set(t,n);const i=SDK.DOMDebuggerModel.DOMDebuggerManager.instance().xhrBreakpoints().get(e)||!1;UI.ARIAUtils.markAsCheckbox(n),UI.ARIAUtils.setChecked(n,i),n.addEventListener("contextmenu",this.contextMenu.bind(this,e),!0);const s=e?i18nString(UIStrings.urlContainsS,{PH1:e}):i18nString(UIStrings.anyXhrOrFetch),r=UI.UIUtils.CheckboxLabel.create(s,i);return UI.ARIAUtils.markAsHidden(r),UI.ARIAUtils.setLabel(n,s),n.appendChild(r),r.checkboxElement.addEventListener("click",this.checkboxClicked.bind(this,e,i),!1),n.addEventListener("click",(t=>{t.target===n&&this.checkboxClicked(e,i)}),!1),breakpointEntryToCheckbox.set(n,r.checkboxElement),r.checkboxElement.tabIndex=-1,n.tabIndex=-1,e===this.#t.selectedItem()&&(n.tabIndex=0,this.setDefaultFocusedElement(n)),n.addEventListener("keydown",(t=>{let n=!1;" "===t.key?(this.checkboxClicked(e,i),n=!0):"Enter"===t.key&&(this.labelClicked(e),n=!0),n&&t.consume(!0)})),e===this.#r&&(n.classList.add("breakpoint-hit"),UI.ARIAUtils.setDescription(n,i18nString(UIStrings.breakpointHit))),r.classList.add("cursor-auto"),r.textElement.addEventListener("dblclick",this.labelClicked.bind(this,e),!1),this.#i.set(e,t),t}selectedItemChanged(e,t,n,i){if(n){const e=containerToBreakpointEntry.get(n);if(!e)throw new Error("Expected breakpoint entry to be found for an element");e.tabIndex=-1}if(i){const e=containerToBreakpointEntry.get(i);if(!e)throw new Error("Expected breakpoint entry to be found for an element");this.setDefaultFocusedElement(e),e.tabIndex=0,this.hasFocus()&&e.focus()}}updateSelectedItemARIA(e,t){return!0}removeBreakpoint(e){const t=this.#e.indexOf(e);t>=0&&this.#e.remove(t),this.#i.delete(e),this.update()}addListElement(e,t){this.#t.element.insertBefore(e,t),this.#n.classList.add("hidden"),this.#t.element.classList.remove("hidden")}removeListElement(e){this.#t.element.removeChild(e),this.#t.element.firstElementChild||(this.#n.classList.remove("hidden"),this.#t.element.classList.add("hidden"))}contextMenu(e,t){const n=new UI.ContextMenu.ContextMenu(t);const i=i18nString(UIStrings.removeAllBreakpoints);n.defaultSection().appendItem(i18nString(UIStrings.addBreakpoint),this.addButtonClicked.bind(this)),n.defaultSection().appendItem(i18nString(UIStrings.removeBreakpoint),function(){SDK.DOMDebuggerModel.DOMDebuggerManager.instance().removeXHRBreakpoint(e),this.removeBreakpoint(e)}.bind(this)),n.defaultSection().appendItem(i,function(){for(const e of this.#i.keys())SDK.DOMDebuggerModel.DOMDebuggerManager.instance().removeXHRBreakpoint(e),this.removeBreakpoint(e);this.update()}.bind(this)),n.show()}checkboxClicked(e,t){const n=this.hasFocus();SDK.DOMDebuggerModel.DOMDebuggerManager.instance().toggleXHRBreakpoint(e,!t),this.#t.refreshItem(e),this.#t.selectItem(e),n&&this.focus()}labelClicked(e){const t=this.#i.get(e),n=document.createElement("span");function i(i,s,r){if(this.removeListElement(n),i){SDK.DOMDebuggerModel.DOMDebuggerManager.instance().removeXHRBreakpoint(e),this.removeBreakpoint(e);let n=!0;if(t){const e=containerToBreakpointEntry.get(t),i=e?breakpointEntryToCheckbox.get(e):void 0;i&&(n=i.checked)}SDK.DOMDebuggerModel.DOMDebuggerManager.instance().addXHRBreakpoint(r,n),this.setBreakpoint(r),this.#t.selectItem(r)}else t&&t.classList.remove("hidden");this.focus()}n.classList.add("breakpoint-condition"),n.textContent=e,t&&(this.#t.element.insertBefore(n,t),t.classList.add("hidden"));const s=new UI.InplaceEditor.Config(i.bind(this,!0),i.bind(this,!1));UI.InplaceEditor.InplaceEditor.startEditing(n,s)}flavorChanged(e){this.update()}update(){const e=0===this.#e.length;this.#t.element.classList.toggle("hidden",e),this.#n.classList.toggle("hidden",!e);const t=UI.Context.Context.instance().flavor(SDK.DebuggerModel.DebuggerPausedDetails);if(!t||"XHR"!==t.reason){if(this.#r){const e=this.#r;this.#r=void 0,this.#e.indexOf(e)>=0&&this.#t.refreshItem(e)}return}const n=t.auxData&&t.auxData.breakpointURL;this.#r=n,this.#e.indexOf(n)<0||(this.#t.refreshItem(n),UI.ViewManager.ViewManager.instance().showView("sources.xhrBreakpoints"))}restoreBreakpoints(){const e=SDK.DOMDebuggerModel.DOMDebuggerManager.instance().xhrBreakpoints();for(const t of e.keys())this.setBreakpoint(t)}wasShown(){super.wasShown(),this.registerCSSFiles([xhrBreakpointsSidebarPaneStyles])}}