@browserless.io/browserless 2.2.0-beta-8 → 2.3.0-beta-1

package/static/devtools/elements/elements.js

@@ -0,0 +1,469 @@
+import{ObjectWrapper as e,EventTarget as t,UIString as i,Revealer as n,Color as s,Throttler as o,Settings as r,Linkifier as l,ParsedURL as a,ls as d,Console as h}from"../common/common.js";import{Runtime as c}from"../root/root.js";import{AccessibilityModel as u,DOMModel as p,ResourceTreeModel as m,CSSModel as _,CSSMetadata as g,OverlayModel as f,CSSMatchedStyles as y,CSSPropertyParser as E,CSSRule as v,CSSStyleDeclaration as b,CSSMedia as S,ConsoleModel as C,RuntimeModel as w,SDKModel as x,RemoteObject as T}from"../sdk/sdk.js";import{Widget as N,Context as M,PopoverHelper as O,ThrottledWidget as P,Tooltip as L,Geometry as I,UIUtils as k,Utils as D,ARIAUtils as R,TreeOutline as A,Fragment as F,Icon as B,KeyboardShortcut as H,ContextMenu as U,TextPrompt as V,Toolbar as W,InplaceEditor as z,ShortcutRegistry as $,TextEditor as j,XLink as G,SyntaxHighlighter as K,ActionRegistry as q,Panel as X,SplitWidget as Y,SearchableView as Q,ViewManager as J,View as Z,TabbedPane as ee,InspectorView as te}from"../ui/ui.js";import{ImagePreview as ie,Linkifier as ne,JSPresentationUtils as se}from"../components/components.js";import{ExtensionServer as oe}from"../extensions/extensions.js";import{userMetrics as re,UserMetrics as le,InspectorFrontendHost as ae,Platform as de}from"../host/host.js";import{ls as he,StringUtilities as ce,NumberUtilities as ue}from"../platform/platform.js";import*as pe from"../third_party/lit-html/lit-html.js";import{html as me,render as _e,Directives as ge}from"../third_party/lit-html/lit-html.js";import{BezierEditor as fe,CSSShadowEditor as ye,FontEditor as Ee,ColorSwatch as ve,CSSVarSwatch as be,Swatches as Se,CSSShadowModel as Ce,CSSAngle as we,SwatchPopoverHelper as xe,CSSAngleUtils as Te,FontEditorUtils as Ne}from"../inline_editor/inline_editor.js";import{CSSWorkspaceBinding as Me,ResourceUtils as Oe}from"../bindings/bindings.js";import{TextUtils as Pe,TextRange as Le}from"../text_utils/text_utils.js";import{Icon as Ie}from"../ui/components/components.js";import{Spectrum as ke,ContrastInfo as De}from"../color_picker/color_picker.js";import{DeviceModeWrapper as Re}from"../emulation/emulation.js";import{EventListenersView as Ae}from"../event_listeners/event_listeners.js";import{ObjectPropertiesSection as Fe}from"../object_ui/object_ui.js";import{GetStylesheet as Be}from"../component_helpers/component_helpers.js";function He(e,t){const i=[],n={id:t.id(),role:t.role()?.value,name:t.name()?.value,ignored:t.ignored(),parent:e,children:i,numChildren:t.numChildren(),hasOnlyUnloadedChildren:t.hasOnlyUnloadedChildren(),loadChildren:async()=>{const n=await t.accessibilityModel().requestAXChildren(t.id());if(n)for(const t of n)i.push(He(e,t))}};for(const e of t.children())n.children.push(He(n,e));return n}var Ue=Object.freeze({__proto__:null,SDKNodeToAXNode:He});class Ve extends HTMLElement{constructor(){super(...arguments),this.shadow=this.attachShadow({mode:"open"}),this.node=null}set data(e){this.node=e.node,this.shadow.host.setAttribute("role","tree"),this.render()}async refreshAccessibilityTree(){if(!this.node)return null;const e=this.node.domModel().target().model(u.AccessibilityModel);if(!e)return null;return await e.requestRootNode()||null}render(){this.refreshAccessibilityTree().then((e=>{if(!e)return;const t=me`
+        <devtools-accessibility-node .data=${{axNode:He(null,e)}}>
+        </devtools-accessibility-node>
+      `;_e(t,this.shadow)}))}}customElements.get("devtools-accessibility-tree")||customElements.define("devtools-accessibility-tree",Ve);var We=Object.freeze({__proto__:null,AccessibilityTree:Ve});class ze extends N.VBox{constructor(e){super(),this.accessibilityTreeComponent=new Ve,this.toggleButton=e,this.contentElement.appendChild(this.toggleButton),this.contentElement.appendChild(this.accessibilityTreeComponent)}setNode(e){this.accessibilityTreeComponent.data={node:e}}}class $e extends e.ObjectWrapper{constructor(){super(),this._node=M.Context.instance().flavor(p.DOMNode),this._cssModel=null,this._eventListeners=[],M.Context.instance().addFlavorChangeListener(p.DOMNode,this._onNodeChanged,this)}node(){return this._node}cssModel(){return this._cssModel&&this._cssModel.isEnabled()?this._cssModel:null}_onNodeChanged(e){this._node=e.data,this._updateModel(this._node?this._node.domModel().cssModel():null),this._onComputedStyleChanged(null)}_updateModel(e){if(this._cssModel===e)return;t.EventTarget.removeEventListeners(this._eventListeners),this._cssModel=e;const i=e?e.domModel():null,n=e?e.target().model(m.ResourceTreeModel):null;e&&i&&n&&(this._eventListeners=[e.addEventListener(_.Events.StyleSheetAdded,this._onComputedStyleChanged,this),e.addEventListener(_.Events.StyleSheetRemoved,this._onComputedStyleChanged,this),e.addEventListener(_.Events.StyleSheetChanged,this._onComputedStyleChanged,this),e.addEventListener(_.Events.FontsUpdated,this._onComputedStyleChanged,this),e.addEventListener(_.Events.MediaQueryResultChanged,this._onComputedStyleChanged,this),e.addEventListener(_.Events.PseudoStateForced,this._onComputedStyleChanged,this),e.addEventListener(_.Events.ModelWasEnabled,this._onComputedStyleChanged,this),i.addEventListener(p.Events.DOMMutated,this._onDOMModelChanged,this),n.addEventListener(m.Events.FrameResized,this._onFrameResized,this)])}_onComputedStyleChanged(e){delete this._computedStylePromise,this.dispatchEventToListeners(je.ComputedStyleChanged,e?e.data:null)}_onDOMModelChanged(e){const t=e.data;this._node&&(this._node===t||t.parentNode===this._node.parentNode||t.isAncestor(this._node))&&this._onComputedStyleChanged(null)}_onFrameResized(e){this._frameResizedTimer&&clearTimeout(this._frameResizedTimer),this._frameResizedTimer=setTimeout(function(){this._onComputedStyleChanged(null),delete this._frameResizedTimer}.bind(this),100)}_elementNode(){const e=this.node();return e?e.enclosingElementOrSelf():null}async fetchComputedStyle(){const e=this._elementNode(),t=this.cssModel();if(!e||!t)return null;const i=e.id;return i?(this._computedStylePromise||(this._computedStylePromise=t.computedStylePromise(i).then(function(e,t){return e===this._elementNode()&&t?new Ge(e,t):null}.bind(this,e))),this._computedStylePromise):null}}const je={ComputedStyleChanged:Symbol("ComputedStyleChanged")};class Ge{constructor(e,t){this.node=e,this.computedStyle=t}}var Ke=Object.freeze({__proto__:null,ComputedStyleModel:$e,Events:je,ComputedStyle:Ge});const{render:qe,html:Xe}=pe;class Ye extends HTMLElement{constructor(){super(...arguments),this.shadow=this.attachShadow({mode:"open"}),this.inherited=!1,this.traceable=!1,this.onNavigateToSource=()=>{}}set data(e){this.inherited=e.inherited,this.traceable=e.traceable,this.onNavigateToSource=e.onNavigateToSource,this.render()}render(){qe(Xe`
+      <style>
+        :host {
+          position: relative;
+          overflow: hidden;
+          flex: auto;
+          text-overflow: ellipsis;
+        }
+
+        .computed-style-property {
+          min-height: 16px;
+          box-sizing: border-box;
+          padding-top: 2px;
+          white-space: nowrap;
+        }
+
+        .computed-style-property.inherited {
+          opacity: 50%;
+        }
+
+        slot[name="property-name"],
+        slot[name="property-value"] {
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        slot[name="property-name"] {
+          width: 16em;
+          max-width: 52%;
+          display: inline-block;
+          vertical-align: text-top;
+        }
+
+        slot[name="property-value"] {
+          margin-left: 2em;
+        }
+
+        .goto {
+          --size: 16px;
+
+          display: none;
+          position: absolute;
+          width: var(--size);
+          height: var(--size);
+          margin: -1px 0 0 calc(-1 * var(--size));
+          -webkit-mask-image: url(Images/mediumIcons.svg);
+          -webkit-mask-position: -32px 48px;
+          background-color: var(--active-control-bg-color);
+        }
+
+        .computed-style-property:hover .goto {
+          display: inline-block;
+        }
+
+        .hidden {
+          display: none;
+        }
+
+        /* narrowed styles */
+        :host-context(.computed-narrow) .computed-style-property {
+          white-space: normal;
+        }
+
+        :host-context(.computed-narrow) slot[name="property-name"],
+        :host-context(.computed-narrow) slot[name="property-value"] {
+          display: inline-block;
+          width: 100%;
+          max-width: 100%;
+          margin-left: 0;
+          white-space: nowrap;
+        }
+
+        :host-context(.computed-narrow) .goto {
+          display: none;
+        }
+
+        /* high-contrast styles */
+        @media (forced-colors: active) {
+          .computed-style-property.inherited {
+            opacity: 100%;
+          }
+
+          :host-context(.monospace.computed-properties) .computed-style-property:hover {
+            forced-color-adjust: none;
+            background-color: Highlight;
+          }
+
+          :host-context(.monospace.computed-properties) .computed-style-property:hover * {
+            color: HighlightText;
+          }
+
+          :host-context(.monospace.computed-properties) .goto {
+            background-color: HighlightText;
+          }
+        }
+      </style>
+
+      <div class="computed-style-property ${this.inherited?"inherited":""}">
+        <slot name="property-name"></slot>
+        <span class="hidden" aria-hidden="false">: </span>
+        ${this.traceable?Xe`<span class="goto" @click=${this.onNavigateToSource}></span>`:null}
+        <slot name="property-value"></slot>
+        <span class="hidden" aria-hidden="false">;</span>
+      </div>
+    `,this.shadow,{eventContext:this})}}customElements.define("devtools-computed-style-property",Ye);var Qe=Object.freeze({__proto__:null,ComputedStyleProperty:Ye});const{render:Je,html:Ze}=pe;class et extends HTMLElement{constructor(){super(...arguments),this.shadow=this.attachShadow({mode:"open"}),this.selector="",this.active=!1,this.onNavigateToSource=()=>{}}set data(e){this.selector=e.selector,this.active=e.active,this.onNavigateToSource=e.onNavigateToSource,this.render()}render(){Je(Ze`
+      <style>
+        :host {
+          text-overflow: ellipsis;
+          overflow: hidden;
+          flex-grow: 1;
+        }
+
+        .computed-style-trace {
+          margin-left: 16px;
+        }
+
+        .computed-style-trace:hover {
+          background-color: var(--focus-bg-color);
+          cursor: pointer;
+        }
+
+        .goto {
+          /* TODO: reuse with ComputedStyleProperty */
+          --size: 16px;
+
+          display: none;
+          position: absolute;
+          width: var(--size);
+          height: var(--size);
+          margin: -1px 0 0 calc(-1 * var(--size));
+          -webkit-mask-image: url(Images/mediumIcons.svg);
+          -webkit-mask-position: -32px 48px;
+          background-color: var(--active-control-bg-color);
+        }
+
+        .computed-style-trace:hover .goto {
+          display: inline-block;
+        }
+
+        .trace-value {
+          margin-left: 16px;
+        }
+
+        .computed-style-trace.inactive slot[name="trace-value"] {
+          text-decoration: line-through;
+        }
+
+        .trace-selector {
+          color: gray;
+          padding-left: 2em;
+        }
+
+        ::slotted([slot="trace-link"]) {
+          user-select: none;
+          float: right;
+          padding-left: 1em;
+          position: relative;
+          z-index: 1;
+        }
+
+        /* high-contrast styles */
+        @media (forced-colors: active) {
+          :host-context(.monospace.computed-properties) .computed-style-trace:hover {
+            forced-color-adjust: none;
+            background-color: Highlight;
+          }
+
+          :host-context(.monospace.computed-properties) .goto {
+            background-color: HighlightText;
+          }
+
+          :host-context(.monospace.computed-properties) .computed-style-trace:hover * {
+            color: HighlightText;
+          }
+        }
+      </style>
+
+      <div class="computed-style-trace ${this.active?"active":"inactive"}">
+        <span class="goto" @click=${this.onNavigateToSource}></span>
+        <slot name="trace-value" @click=${this.onNavigateToSource}></slot>
+        <span class="trace-selector">${this.selector}</span>
+        <slot name="trace-link"></slot>
+      </div>
+    `,this.shadow,{eventContext:this})}}customElements.define("devtools-computed-style-trace",et);var tt=Object.freeze({__proto__:null,ComputedStyleTrace:et});class it{constructor(e,t,i){this._getLinkElement=t,this._getDOMNode=i,this._popover=new O.PopoverHelper(e,this._handleRequest.bind(this)),this._popover.setHasPadding(!0),this._popover.setTimeout(0,100)}_handleRequest(e){const t=this._getLinkElement(e);if(!t)return null;const i=nt.get(t);return i?{box:t.boxInWindow(),hide:void 0,show:async e=>{const n=this._getDOMNode(t);if(!n)return!1;const s=await ie.ImagePreview.loadDimensionsForNode(n),o=await ie.ImagePreview.build(n.domModel().target(),i,!0,{imageAltText:void 0,precomputedFeatures:s});return o&&e.contentElement.appendChild(o),Boolean(o)}}:null}hide(){this._popover.hidePopover()}static setImageUrl(e,t){return nt.set(e,t),e}static getImageURL(e){return nt.get(e)}}const nt=new WeakMap;class st extends P.ThrottledWidget{constructor(e){super(!0),this.registerRequiredCSS("elements/platformFontsWidget.css",{enableLegacyPatching:!0}),this._sharedModel=e,this._sharedModel.addEventListener(je.ComputedStyleChanged,this.update,this),this._sectionTitle=document.createElement("div"),this._sectionTitle.classList.add("title"),this.contentElement.classList.add("platform-fonts"),this.contentElement.appendChild(this._sectionTitle),this._sectionTitle.textContent=i.UIString("Rendered Fonts"),this._fontStatsSection=this.contentElement.createChild("div","stats-section")}doUpdate(){const e=this._sharedModel.cssModel(),t=this._sharedModel.node();return t&&e?e.platformFontsPromise(t.id).then(this._refreshUI.bind(this,t)):Promise.resolve()}_refreshUI(e,t){if(this._sharedModel.node()!==e)return;this._fontStatsSection.removeChildren();const n=!t||!t.length;if(this._sectionTitle.classList.toggle("hidden",n),!n&&t){t.sort((function(e,t){return t.glyphCount-e.glyphCount}));for(let e=0;e<t.length;++e){const n=this._fontStatsSection.createChild("div","font-stats-item");n.createChild("span","font-name").textContent=t[e].familyName;n.createChild("span","font-delimeter").textContent="—";n.createChild("span").textContent=t[e].isCustomFont?i.UIString("Network resource"):i.UIString("Local file");const s=n.createChild("span","font-usage"),o=t[e].glyphCount;s.textContent=1===o?i.UIString("(%d glyph)",o):i.UIString("(%d glyphs)",o)}}}}var ot=Object.freeze({__proto__:null,PlatformFontsWidget:st});const rt="Layout",lt="Text",at="Appearance",dt="Animation",ht="Grid",ct="Flex",ut="Table",pt="CSS Variables",mt="Generated Content",_t="Other",gt=[rt,lt,at,dt,pt,ht,ct,ut,mt,_t],ft=new Map([[rt,["display","margin","padding","height","width","position","top","right","bottom","left","z-index","float","clear","overflow","resize","clip","visibility","box-sizing","align-content","align-items","align-self","flex","flex-basis","flex-direction","flex-flow","flex-grow","flex-shrink","flex-wrap","justify-content","order","inline-size","block-size","min-inline-size","min-block-size","max-inline-size","max-block-size","min-width","max-width","min-height","max-height"]],[lt,["font","font-family","font-size","font-size-adjust","font-stretch","font-style","font-variant","font-weight","font-smoothing","direction","tab-size","text-align","text-align-last","text-decoration","text-decoration-color","text-decoration-line","text-decoration-style","text-indent","text-justify","text-overflow","text-shadow","text-transform","text-size-adjust","line-height","vertical-align","letter-spacing","word-spacing","white-space","word-break","word-wrap"]],[at,["color","outline","outline-color","outline-offset","outline-style","Outline-width","border","border-image","background","cursor","box-shadow","≈","tap-highlight-color"]],[dt,["animation","animation-delay","animation-direction","animation-duration","animation-fill-mode","animation-iteration-count","animation-name","animation-play-state","animation-timing-function","transition","transition-delay","transition-duration","transition-property","transition-timing-function"]],[ht,["grid","grid-column","grid-row","order","place-items","place-content","place-self"]],[ct,["flex","order","place-items","place-content","place-self"]],[ut,["border-collapse","border-spacing","caption-side","empty-cells","table-layout"]],[mt,["content","quotes","counter-reset","counter-increment"]]]),yt=new Map;for(const[e,t]of ft)for(const i of t){yt.has(i)||yt.set(i,[]);yt.get(i).push(e)}const Et=e=>yt.has(e)?yt.get(e):e.startsWith("--")?[pt]:[],vt=e=>{const t=g.cssMetadata(),i=t.canonicalPropertyName(e),n=Et(i);if(n.length>0)return n;const s=t.shorthands(i);if(s)for(const e of s){const t=Et(e);if(t.length>0)return t}return[_t]};class bt{constructor(e,t,n){this._treeElement=e,this._swatchPopoverHelper=t,this._swatch=n,L.Tooltip.install(this._swatch.iconElement(),i.UIString("Open cubic bezier editor.")),this._swatch.iconElement().addEventListener("click",this._iconClick.bind(this),!1),this._swatch.iconElement().addEventListener("mousedown",(e=>e.consume()),!1),this._boundBezierChanged=this._bezierChanged.bind(this),this._boundOnScroll=this._onScroll.bind(this)}_iconClick(e){if(c.experiments.isEnabled("fontEditor")&&re.cssEditorOpened("bezierEditor"),e.consume(!0),this._swatchPopoverHelper.isShowing())return void this._swatchPopoverHelper.hide(!0);const t=I.CubicBezier.parse(this._swatch.bezierText())||I.CubicBezier.parse("linear");this._bezierEditor=new fe.BezierEditor(t),this._bezierEditor.setBezier(t),this._bezierEditor.addEventListener(fe.Events.BezierChanged,this._boundBezierChanged),this._swatchPopoverHelper.show(this._bezierEditor,this._swatch.iconElement(),this._onPopoverHidden.bind(this)),this._scrollerElement=this._swatch.enclosingNodeOrSelfWithClass("style-panes-wrapper"),this._scrollerElement&&this._scrollerElement.addEventListener("scroll",this._boundOnScroll,!1),this._originalPropertyText=this._treeElement.property.propertyText,this._treeElement.parentPane().setEditingStyle(!0);const i=Me.CSSWorkspaceBinding.instance().propertyUILocation(this._treeElement.property,!1);i&&n.reveal(i,!0)}_bezierChanged(e){this._swatch.setBezierText(e.data),this._treeElement.applyStyleText(this._treeElement.renderedPropertyText(),!1)}_onScroll(e){this._swatchPopoverHelper.hide(!0)}_onPopoverHidden(e){this._scrollerElement&&this._scrollerElement.removeEventListener("scroll",this._boundOnScroll,!1),this._bezierEditor&&this._bezierEditor.removeEventListener(fe.Events.BezierChanged,this._boundBezierChanged),this._bezierEditor=void 0;const t=e?this._treeElement.renderedPropertyText():this._originalPropertyText||"";this._treeElement.applyStyleText(t,!0),this._treeElement.parentPane().setEditingStyle(!1),delete this._originalPropertyText}}class St{constructor(e,t,i){this._treeElement=e,this._swatchPopoverHelper=t,this._swatch=i,this._swatch.addEventListener("swatch-click",this._iconClick.bind(this)),this._contrastInfo=null,this._boundSpectrumChanged=this._spectrumChanged.bind(this),this._boundOnScroll=this._onScroll.bind(this)}_generateCSSVariablesPalette(){const e=this._treeElement.matchedStyles(),t=this._treeElement.property.ownerStyle,i=e.availableCSSVariables(t),n=[],o=[];for(const r of i){if(r===this._treeElement.property.name)continue;const i=e.computeCSSVariable(t,r);if(!i)continue;s.Color.parse(i)&&(n.push(i),o.push(r))}return{title:"CSS Variables",mutable:!1,matchUserFormat:!0,colors:n,colorNames:o}}setContrastInfo(e){this._contrastInfo=e}_iconClick(e){c.experiments.isEnabled("fontEditor")&&re.cssEditorOpened("colorPicker"),e.consume(!0),this.showPopover()}showPopover(){if(this._swatchPopoverHelper.isShowing())return void this._swatchPopoverHelper.hide(!0);const e=this._swatch.color;let t=this._swatch.format;if(!e||!t)return;t===s.Format.Original&&(t=e.format()),this._spectrum=new ke.Spectrum(this._contrastInfo),this._spectrum.setColor(e,t),this._spectrum.addPalette(this._generateCSSVariablesPalette()),this._spectrum.addEventListener(ke.Events.SizeChanged,this._spectrumResized,this),this._spectrum.addEventListener(ke.Events.ColorChanged,this._boundSpectrumChanged),this._swatchPopoverHelper.show(this._spectrum,this._swatch,this._onPopoverHidden.bind(this)),this._scrollerElement=this._swatch.enclosingNodeOrSelfWithClass("style-panes-wrapper"),this._scrollerElement&&this._scrollerElement.addEventListener("scroll",this._boundOnScroll,!1),this._originalPropertyText=this._treeElement.property.propertyText,this._treeElement.parentPane().setEditingStyle(!0);const i=Me.CSSWorkspaceBinding.instance().propertyUILocation(this._treeElement.property,!1);i&&n.reveal(i,!0)}_spectrumResized(e){this._swatchPopoverHelper.reposition()}_spectrumChanged(e){const t=s.Color.parse(e.data);if(!t)return;const i=this._spectrum?this._spectrum.colorName():void 0,n=i&&i.startsWith("--")?`var(${i})`:t.asString();this._swatch.renderColor(t);const o=this._swatch.firstElementChild;o&&(o.remove(),this._swatch.createChild("span").textContent=n),this._treeElement.applyStyleText(this._treeElement.renderedPropertyText(),!1)}_onScroll(e){this._swatchPopoverHelper.hide(!0)}_onPopoverHidden(e){this._scrollerElement&&this._scrollerElement.removeEventListener("scroll",this._boundOnScroll,!1),this._spectrum&&this._spectrum.removeEventListener(ke.Events.ColorChanged,this._boundSpectrumChanged),this._spectrum=void 0;const t=e?this._treeElement.renderedPropertyText():this._originalPropertyText||"";this._treeElement.applyStyleText(t,!0),this._treeElement.parentPane().setEditingStyle(!1),delete this._originalPropertyText}}class Ct{constructor(e,t,n){this._treeElement=e,this._swatchPopoverHelper=t,this._shadowSwatch=n,this._iconElement=n.iconElement(),L.Tooltip.install(this._iconElement,i.UIString("Open shadow editor.")),this._iconElement.addEventListener("click",this._iconClick.bind(this),!1),this._iconElement.addEventListener("mousedown",(e=>e.consume()),!1),this._boundShadowChanged=this._shadowChanged.bind(this),this._boundOnScroll=this._onScroll.bind(this)}_iconClick(e){c.experiments.isEnabled("fontEditor")&&re.cssEditorOpened("shadowEditor"),e.consume(!0),this.showPopover()}showPopover(){if(this._swatchPopoverHelper.isShowing())return void this._swatchPopoverHelper.hide(!0);this._cssShadowEditor=new ye.CSSShadowEditor,this._cssShadowEditor.setModel(this._shadowSwatch.model()),this._cssShadowEditor.addEventListener(ye.Events.ShadowChanged,this._boundShadowChanged),this._swatchPopoverHelper.show(this._cssShadowEditor,this._iconElement,this._onPopoverHidden.bind(this)),this._scrollerElement=this._iconElement.enclosingNodeOrSelfWithClass("style-panes-wrapper"),this._scrollerElement&&this._scrollerElement.addEventListener("scroll",this._boundOnScroll,!1),this._originalPropertyText=this._treeElement.property.propertyText,this._treeElement.parentPane().setEditingStyle(!0);const e=Me.CSSWorkspaceBinding.instance().propertyUILocation(this._treeElement.property,!1);e&&n.reveal(e,!0)}_shadowChanged(e){this._shadowSwatch.setCSSShadow(e.data),this._treeElement.applyStyleText(this._treeElement.renderedPropertyText(),!1)}_onScroll(e){this._swatchPopoverHelper.hide(!0)}_onPopoverHidden(e){this._scrollerElement&&this._scrollerElement.removeEventListener("scroll",this._boundOnScroll,!1),this._cssShadowEditor&&this._cssShadowEditor.removeEventListener(ye.Events.ShadowChanged,this._boundShadowChanged),this._cssShadowEditor=void 0;const t=e?this._treeElement.renderedPropertyText():this._originalPropertyText||"";this._treeElement.applyStyleText(t,!0),this._treeElement.parentPane().setEditingStyle(!1),delete this._originalPropertyText}}class wt{constructor(e,t){this._treeElementMap=new Map,this._swatchPopoverHelper=e,this._section=t,this._parentPane=null,this._fontEditor=null,this._scrollerElement=null,this._boundFontChanged=this._fontChanged.bind(this),this._boundOnScroll=this._onScroll.bind(this),this._boundResized=this._fontEditorResized.bind(this)}_fontChanged(e){const{propertyName:t,value:i}=e.data,n=this._treeElementMap.get(t);this._updateFontProperty(t,i,n)}async _updateFontProperty(e,t,i){if(i&&i.treeOutline&&i.valueElement&&i.property.parsedOk&&i.property.range){let e,n=!1;i.valueElement.textContent=t,i.property.value=t;const s=i.property.name;t.length?e=i.renderedPropertyText():(e="",n=!0,this._fixIndex(i.property.index)),this._treeElementMap.set(s,i),await i.applyStyleText(e,!0),n&&this._treeElementMap.delete(s)}else if(t.length){const i=this._section.addNewBlankProperty();i&&(i.property.name=e,i.property.value=t,i.updateTitle(),await i.applyStyleText(i.renderedPropertyText(),!0),this._treeElementMap.set(i.property.name,i))}this._section.onpopulate(),this._swatchPopoverHelper.reposition()}_fontEditorResized(){this._swatchPopoverHelper.reposition()}_fixIndex(e){for(const t of this._treeElementMap.values())t.property.index>e&&(t.property.index-=1)}_createPropertyValueMap(){const e=new Map;for(const t of this._treeElementMap){const i=t[0],n=t[1];n.property.value.length?e.set(i,n.property.value):this._treeElementMap.delete(i)}return e}registerFontProperty(e){const t=e.property.name;if(this._treeElementMap.has(t)){const i=this._treeElementMap.get(t);(!e.overloaded()||i&&i.overloaded())&&this._treeElementMap.set(t,e)}else this._treeElementMap.set(t,e)}async showPopover(e,t){if(this._swatchPopoverHelper.isShowing())return void this._swatchPopoverHelper.hide(!0);this._parentPane=t;const i=this._createPropertyValueMap();this._fontEditor=new Ee.FontEditor(i),this._fontEditor.addEventListener(Ee.Events.FontChanged,this._boundFontChanged),this._fontEditor.addEventListener(Ee.Events.FontEditorResized,this._boundResized),this._swatchPopoverHelper.show(this._fontEditor,e,this._onPopoverHidden.bind(this)),this._scrollerElement=e.enclosingNodeOrSelfWithClass("style-panes-wrapper"),this._scrollerElement&&this._scrollerElement.addEventListener("scroll",this._boundOnScroll,!1),this._parentPane.setEditingStyle(!0)}_onScroll(){this._swatchPopoverHelper.hide(!0)}_onPopoverHidden(){this._scrollerElement&&this._scrollerElement.removeEventListener("scroll",this._boundOnScroll,!1),this._section.onpopulate(),this._fontEditor&&this._fontEditor.removeEventListener(Ee.Events.FontChanged,this._boundFontChanged),this._fontEditor=null,this._parentPane&&this._parentPane.setEditingStyle(!1),this._section.resetToolbars(),this._section.onpopulate()}}wt._treeElementSymbol=Symbol("FontEditorSectionManager._treeElementSymbol");var xt=Object.freeze({__proto__:null,BezierPopoverIcon:bt,ColorSwatchPopoverIcon:St,ShadowSwatchPopoverHelper:Ct,FontEditorSectionManager:wt});const Tt=new Set(["tb","tb-rl","vertical-lr","vertical-rl"]),Nt={LEFT_TO_RIGHT:"left-to-right",RIGHT_TO_LEFT:"right-to-left",BOTTOM_TO_TOP:"bottom-to-top",TOP_TO_BOTTOM:"top-to-bottom"};function Mt(e){if(e===Nt.LEFT_TO_RIGHT)return Nt.RIGHT_TO_LEFT;if(e===Nt.RIGHT_TO_LEFT)return Nt.LEFT_TO_RIGHT;if(e===Nt.TOP_TO_BOTTOM)return Nt.BOTTOM_TO_TOP;if(e===Nt.BOTTOM_TO_TOP)return Nt.TOP_TO_BOTTOM;throw new Error("Unknown PhysicalFlexDirection")}function Ot(e){return{...e,"row-reverse":Mt(e.row),"column-reverse":Mt(e.column)}}function Pt(e){const t="rtl"===e.get("direction"),i=e.get("writing-mode");return Ot(i&&Tt.has(i)?{row:t?Nt.BOTTOM_TO_TOP:Nt.TOP_TO_BOTTOM,column:"vertical-lr"===i?Nt.LEFT_TO_RIGHT:Nt.RIGHT_TO_LEFT}:{row:t?Nt.RIGHT_TO_LEFT:Nt.LEFT_TO_RIGHT,column:Nt.TOP_TO_BOTTOM})}function Lt(e){let t=!0,i=!1,n=-90;return e===Nt.RIGHT_TO_LEFT?(n=90,i=!1,t=!1):e===Nt.TOP_TO_BOTTOM?(n=0,t=!1,i=!1):e===Nt.BOTTOM_TO_TOP&&(n=0,t=!1,i=!0),{iconName:"flex-direction-icon",rotate:n,scaleX:t?-1:1,scaleY:i?-1:1}}function It(e,t){return{iconName:e,rotate:t===Nt.RIGHT_TO_LEFT?90:t===Nt.LEFT_TO_RIGHT?-90:0,scaleX:1,scaleY:1}}function kt(e,t){return{iconName:e,rotate:t===Nt.TOP_TO_BOTTOM?90:t===Nt.BOTTOM_TO_TOP?-90:0,scaleX:t===Nt.RIGHT_TO_LEFT?-1:1,scaleY:1}}function Dt(e,t){return{iconName:e,rotate:t===Nt.RIGHT_TO_LEFT?90:t===Nt.LEFT_TO_RIGHT?-90:0,scaleX:1,scaleY:1}}function Rt(e){return function(t){return Lt(Pt(t)[e])}}function At(e){return function(t){const i=Pt(t),n=new Map([["column",i.row],["row",i.column],["column-reverse",i.row],["row-reverse",i.column]]),s=t.get("flex-direction")||"row",o=n.get(s);if(!o)throw new Error("Unknown direction for flex-align icon");return It(e,o)}}function Ft(e){return function(t){const i=Pt(t);return kt(e,i[t.get("flex-direction")||"row"])}}function Bt(e){return function(t){const i=Pt(t),n=new Map([["column",i.row],["row",i.column],["column-reverse",i.row],["row-reverse",i.column]]),s=t.get("flex-direction")||"row",o=n.get(s);if(!o)throw new Error("Unknown direction for flex-align icon");return Dt(e,o)}}function Ht(){return{iconName:"baseline-icon",rotate:0,scaleX:1,scaleY:1}}function Ut(e){return function(t,i){return Bt(e)(i)}}const Vt=new Map([["flex-direction: row",Rt("row")],["flex-direction: column",Rt("column")],["flex-direction: column-reverse",Rt("column-reverse")],["flex-direction: row-reverse",Rt("row-reverse")],["flex-direction: initial",Rt("row")],["flex-direction: unset",Rt("row")],["flex-direction: revert",Rt("row")],["align-content: center",At("flex-align-content-center-icon")],["align-content: space-around",At("flex-align-content-space-around-icon")],["align-content: space-between",At("flex-align-content-space-between-icon")],["align-content: stretch",At("flex-align-content-stretch-icon")],["align-content: space-evenly",At("flex-align-content-space-evenly-icon")],["align-content: flex-end",At("flex-align-content-end-icon")],["align-content: flex-start",At("flex-align-content-start-icon")],["align-content: normal",At("flex-align-content-stretch-icon")],["align-content: revert",At("flex-align-content-stretch-icon")],["align-content: unset",At("flex-align-content-stretch-icon")],["align-content: initial",At("flex-align-content-stretch-icon")],["justify-content: center",Ft("flex-justify-content-center-icon")],["justify-content: space-around",Ft("flex-justify-content-space-around-icon")],["justify-content: space-between",Ft("flex-justify-content-space-between-icon")],["justify-content: space-evenly",Ft("flex-justify-content-space-evenly-icon")],["justify-content: flex-end",Ft("flex-justify-content-flex-end-icon")],["justify-content: flex-start",Ft("flex-justify-content-flex-start-icon")],["align-items: stretch",Bt("flex-align-items-stretch-icon")],["align-items: flex-end",Bt("flex-align-items-flex-end-icon")],["align-items: flex-start",Bt("flex-align-items-flex-start-icon")],["align-items: center",Bt("flex-align-items-center-icon")],["align-items: baseline",Ht],["align-content: baseline",Ht],["align-self: baseline",Ht],["align-self: center",Ut("flex-align-self-center-icon")],["align-self: flex-start",Ut("flex-align-self-flex-start-icon")],["align-self: flex-end",Ut("flex-align-self-flex-end-icon")],["align-self: stretch",Ut("flex-align-self-stretch-icon")]]);function Wt(e,t,i){const n=Vt.get(e);return n?n(t||new Map,i||new Map):null}var zt=Object.freeze({__proto__:null,PhysicalFlexDirection:Nt,reverseDirection:Mt,getPhysicalFlexDirections:Pt,rotateFlexDirectionIcon:Lt,rotateAlignContentIcon:It,rotateJustifyContentIcon:kt,rotateAlignItemsIcon:Dt,findIcon:Wt,IconInfo:undefined});const $t=function(e,t,i){const n=e,s=e.nodeType()===Node.ELEMENT_NODE&&e.pseudoType();s&&e.parentNode&&(e=e.parentNode);let o=e.nodeNameInCorrectCase();const r=t.createChild("span","node-label-name");r.textContent=o;const l=e.getAttribute("id");if(l){const e=t.createChild("span","node-label-id"),i="#"+l;o+=i,k.createTextChild(e,i),r.classList.add("extra")}const a=e.getAttribute("class");if(a){const e=a.split(/\s+/);if(e.length){const i=new Set,n=t.createChild("span","extra node-label-class");for(let t=0;t<e.length;++t){const s=e[t];if(s&&!i.has(s)){const e="."+s;o+=e,k.createTextChild(n,e),i.add(s)}}}}if(s){const e=t.createChild("span","extra node-label-pseudo"),i="::"+n.pseudoType();k.createTextChild(e,i),o+=i}L.Tooltip.install(t,i||o)},jt=function(e,t={tooltip:void 0,preventKeyboardFocus:void 0}){if(!e)return document.createTextNode(i.UIString("<node>"));const s=document.createElement("span");s.classList.add("monospace");const o=D.createShadowRootWithCoreStyles(s,{cssFile:"elements/domLinkifier.css",enableLegacyPatching:!1,delegatesFocus:void 0}).createChild("div","node-link");return $t(e,o,t.tooltip),o.addEventListener("click",(()=>n.reveal(e,!1)&&!1),!1),o.addEventListener("mouseover",e.highlight.bind(e,void 0),!1),o.addEventListener("mouseleave",(()=>f.OverlayModel.hideDOMNodeHighlight()),!1),t.preventKeyboardFocus||(o.addEventListener("keydown",(t=>"Enter"===t.key&&n.reveal(e,!1)&&!1)),o.tabIndex=0,R.markAsLink(o)),s},Gt=function(e,t={tooltip:void 0,preventKeyboardFocus:void 0}){const i=document.createElement("div"),s=D.createShadowRootWithCoreStyles(i,{cssFile:"elements/domLinkifier.css",enableLegacyPatching:!1,delegatesFocus:void 0}).createChild("div","node-link");function o(e){n.reveal(e)}return s.createChild("slot"),s.addEventListener("click",e.resolve.bind(e,o),!1),s.addEventListener("mousedown",(e=>e.consume()),!1),t.preventKeyboardFocus||(s.addEventListener("keydown",(t=>"Enter"===t.key&&e.resolve(o))),s.tabIndex=0,R.markAsLink(s)),i};var Kt=Object.freeze({__proto__:null,decorateNodeLabel:$t,linkifyNodeReference:jt,linkifyDeferredNodeReference:Gt,Linkifier:class{linkify(e,t){if(e instanceof p.DOMNode)return jt(e,t);if(e instanceof p.DeferredDOMNode)return Gt(e,t);throw new Error("Can't linkify non-node")}}});class qt extends N.VBox{constructor(e){super(!0,e),this.element.classList.add("flex-none"),this._computedStyleModel=new $e,this._computedStyleModel.addEventListener(je.ComputedStyleChanged,this.onCSSModelChanged,this),this._updateThrottler=new o.Throttler(100),this._updateWhenVisible=!1}node(){return this._computedStyleModel.node()}cssModel(){return this._computedStyleModel.cssModel()}computedStyleModel(){return this._computedStyleModel}async doUpdate(){}update(){this._updateWhenVisible=!this.isShowing(),this._updateWhenVisible||this._updateThrottler.schedule(function(){return this.isShowing()?this.doUpdate():Promise.resolve()}.bind(this))}wasShown(){super.wasShown(),this._updateWhenVisible&&this.update()}onCSSModelChanged(e){}}var Xt=Object.freeze({__proto__:null,ElementsSidebarPane:qt});const Yt=new WeakMap;class Qt extends A.TreeElement{constructor(e,t,i,n,s,r,l){super("",n),this._style=i.ownerStyle,this._matchedStyles=t,this.property=i,this._inherited=s,this._overloaded=r,this.selectable=!1,this._parentPane=e,this.isShorthand=n,this._applyStyleThrottler=new o.Throttler(0),this._newProperty=l,this._newProperty&&(this.listItemElement.textContent=""),this._expandedDueToFilter=!1,this.valueElement=null,this.nameElement=null,this._expandElement=null,this._originalPropertyText="",this._hasBeenEditedIncrementally=!1,this._prompt=null,this._lastComputedValue=null,this._contextForTest}matchedStyles(){return this._matchedStyles}_editable(){return Boolean(this._style.styleSheetId&&this._style.range)}inherited(){return this._inherited}overloaded(){return this._overloaded}setOverloaded(e){e!==this._overloaded&&(this._overloaded=e,this._updateState())}get name(){return this.property.name}get value(){return this.property.value}updateFilter(){const e=this._parentPane.filterRegex(),t=null!==e&&(e.test(this.property.name)||e.test(this.property.value));this.listItemElement.classList.toggle("filter-match",t),this.onpopulate();let i=!1;for(let e=0;e<this.childCount();++e){const t=this.childAt(e);!t||t&&!t.updateFilter()||(i=!0)}return e?i&&!this.expanded?(this.expand(),this._expandedDueToFilter=!0):!i&&this.expanded&&this._expandedDueToFilter&&(this.collapse(),this._expandedDueToFilter=!1):(this._expandedDueToFilter&&this.collapse(),this._expandedDueToFilter=!1),t}_processColor(e,t){const n=this._editable(),s=i.UIString("Shift + Click to change color format."),o=this._editable()?i.UIString("Open color picker. %s",s):s,r=new ve.ColorSwatch;r.renderColor(e,n,o),t||((t=r.createChild("span")).textContent=r.color?r.color.asString(r.format):e),r.appendChild(t);return r.addEventListener("format-changed",(e=>{const{data:t}=e;r.firstElementChild&&r.firstElementChild.remove(),r.createChild("span").textContent=t.text})),this._editable()&&this._addColorContrastInfo(r),r}_processVar(e){const t=this._matchedStyles.computeSingleVariableValue(this._style,e);if(!t)throw new Error("Unable to compute single value");const{computedValue:i,fromFallback:n}=t,o=new be.CSSVarSwatch;return k.createTextChild(o,e),o.data={text:e,computedValue:i,fromFallback:n,onLinkClick:this._handleVarDefinitionClick.bind(this)},i&&s.Color.parse(i)?this._processColor(i,o):o}_handleVarDefinitionClick(e,t){0===t.button&&(re.actionTaken(le.Action.CustomPropertyLinkClicked),this._parentPane.jumpToProperty(e),t.consume(!0))}async _addColorContrastInfo(e){const t=this._parentPane.swatchPopoverHelper(),i=new St(this,t,e);if("color"!==this.property.name||!this._parentPane.cssModel()||!this.node())return;const n=this._parentPane.cssModel(),s=this.node();if(n&&s&&void 0!==s.id){const e=new De.ContrastInfo(await n.backgroundColorsPromise(s.id));i.setContrastInfo(e)}}renderedPropertyText(){return this.nameElement&&this.valueElement?this.nameElement.textContent+": "+this.valueElement.textContent:""}_processBezier(e){if(!this._editable()||!I.CubicBezier.parse(e))return document.createTextNode(e);const t=this._parentPane.swatchPopoverHelper(),i=Se.BezierSwatch.create();return i.setBezierText(e),new bt(this,t,i),i}_processFont(e){const t=this.section();return t&&t.registerFontProperty(this),document.createTextNode(e)}_processShadow(e,t){if(!this._editable())return document.createTextNode(e);let i;if(i="text-shadow"===t?Ce.CSSShadowModel.parseTextShadow(e):Ce.CSSShadowModel.parseBoxShadow(e),!i.length)return document.createTextNode(e);const n=document.createDocumentFragment(),s=this._parentPane.swatchPopoverHelper();for(let e=0;e<i.length;e++){0!==e&&n.appendChild(document.createTextNode(", "));const t=Se.CSSShadowSwatch.create();t.setCSSShadow(i[e]),new Ct(this,s,t);const o=t.colorSwatch();o&&new St(this,s,o),n.appendChild(t)}return n}_processGrid(e,t){const i=Pe.Utils.splitStringByRegexes(e,[g.GridAreaRowRegex]);if(i.length<=1)return document.createTextNode(e);const n=r.Settings.instance().moduleSetting("textEditorIndent").get(),s=document.createDocumentFragment();for(const e of i){const t=e.value.trim(),i=F.html`<br /><span class='styles-clipboard-only'>${n.repeat(2)}</span>${t}`;s.appendChild(i)}return s}_processAngle(e){if(!this._editable())return document.createTextNode(e);const t=new we.CSSAngle,i=document.createElement("span");i.textContent=e;const n=this._matchedStyles.computeValue(this.property.ownerStyle,this.property.value)||"";t.data={propertyName:this.property.name,propertyValue:n,angleText:e,containingPane:this._parentPane.element.enclosingNodeOrSelfWithClass("style-panes-wrapper")},t.append(i);return t.addEventListener("popover-toggled",(e=>{const i=this.section();if(!i)return;const{data:n}=e;n.open&&(this._parentPane.hideAllPopovers(),this._parentPane.activeCSSAngle=t),i.element.classList.toggle("has-open-popover",n.open),this._parentPane.setEditingStyle(n.open)})),t.addEventListener("value-changed",(async e=>{const{data:n}=e;i.textContent=n.value,await this.applyStyleText(this.renderedPropertyText(),!1);const s=this._matchedStyles.computeValue(this.property.ownerStyle,this.property.value)||"";t.updateProperty(this.property.name,s)})),t.addEventListener("unit-changed",(async e=>{const{data:t}=e;i.textContent=t.value})),t}_updateState(){if(!this.listItemElement)return;this._style.isPropertyImplicit(this.name)?this.listItemElement.classList.add("implicit"):this.listItemElement.classList.remove("implicit");!this.property.parsedOk&&ni.ignoreErrorsForProperty(this.property)?this.listItemElement.classList.add("has-ignorable-error"):this.listItemElement.classList.remove("has-ignorable-error"),this.inherited()?this.listItemElement.classList.add("inherited"):this.listItemElement.classList.remove("inherited"),this.overloaded()?this.listItemElement.classList.add("overloaded"):this.listItemElement.classList.remove("overloaded"),this.property.disabled?this.listItemElement.classList.add("disabled"):this.listItemElement.classList.remove("disabled")}node(){return this._parentPane.node()}parentPane(){return this._parentPane}section(){return this.treeOutline?this.treeOutline.section:null}_updatePane(){const e=this.section();e&&e.refreshUpdate(this)}async _toggleDisabled(e){if(!this._style.range)return;this._parentPane.setUserOperation(!0);const t=await this.property.setDisabled(e);this._parentPane.setUserOperation(!1),t&&(this._matchedStyles.resetActiveProperties(),this._updatePane(),this.styleTextAppliedForTest())}async onpopulate(){if(this.childCount()||!this.isShorthand)return;const e=this._style.longhandProperties(this.name),t=this._style.leadingProperties();for(let i=0;i<e.length;++i){const n=e[i].name;let s=!1,o=!1;const r=this.section();r&&(s=r.isPropertyInherited(n),o=this._matchedStyles.propertyState(e[i])===y.PropertyState.Overloaded);t.find((e=>e.name===n&&e.activeInStyle()))&&(o=!0);const l=new Qt(this._parentPane,this._matchedStyles,e[i],!1,s,o,!1);this.appendChild(l)}}onattach(){this.updateTitle(),this.listItemElement.addEventListener("mousedown",(e=>{0===e.button&&Yt.set(this._parentPane,this)}),!1),this.listItemElement.addEventListener("mouseup",this._mouseUp.bind(this)),this.listItemElement.addEventListener("click",(e=>{if(!e.target)return;e.target.hasSelection()||e.target===this.listItemElement||e.consume(!0)})),this.listItemElement.addEventListener("contextmenu",this._handleCopyContextMenuEvent.bind(this))}onexpand(){this._updateExpandElement()}oncollapse(){this._updateExpandElement()}_updateExpandElement(){this._expandElement&&(this.expanded?this._expandElement.setIconType("smallicon-triangle-down"):this._expandElement.setIconType("smallicon-triangle-right"))}updateTitleIfComputedValueChanged(){const e=this._matchedStyles.computeValue(this.property.ownerStyle,this.property.value);e!==this._lastComputedValue&&(this._lastComputedValue=e,this._innerUpdateTitle())}updateTitle(){this._lastComputedValue=this._matchedStyles.computeValue(this.property.ownerStyle,this.property.value),this._innerUpdateTitle()}_innerUpdateTitle(){this._updateState(),this.isExpandable()?this._expandElement=B.Icon.create("smallicon-triangle-right","expand-icon"):this._expandElement=null;const e=new mi(this._style.parentRule,this.node(),this.name,this.value);if(this.property.parsedOk&&(e.setVarHandler(this._processVar.bind(this)),e.setColorHandler(this._processColor.bind(this)),e.setBezierHandler(this._processBezier.bind(this)),e.setFontHandler(this._processFont.bind(this)),e.setShadowHandler(this._processShadow.bind(this)),e.setGridHandler(this._processGrid.bind(this)),e.setAngleHandler(this._processAngle.bind(this))),this.listItemElement.removeChildren(),this.nameElement=e.renderName(),this.property.name.startsWith("--")&&this.nameElement&&L.Tooltip.install(this.nameElement,this._matchedStyles.computeCSSVariable(this._style,this.property.name)||""),this.valueElement=e.renderValue(),!this.treeOutline)return;const t=r.Settings.instance().moduleSetting("textEditorIndent").get();if(k.createTextChild(this.listItemElement.createChild("span","styles-clipboard-only"),t+(this.property.disabled?"/* ":"")),this.nameElement&&this.listItemElement.appendChild(this.nameElement),this.valueElement){const e=this.valueElement.firstElementChild&&"BR"===this.valueElement.firstElementChild.tagName?":":": ";this.listItemElement.createChild("span","styles-name-value-separator").textContent=e,this._expandElement&&this.listItemElement.appendChild(this._expandElement),this.listItemElement.appendChild(this.valueElement),k.createTextChild(this.listItemElement,";"),this.property.disabled&&k.createTextChild(this.listItemElement.createChild("span","styles-clipboard-only")," */")}if(this.property.parsedOk?this._updateFontVariationSettingsWarning():(this.listItemElement.classList.add("not-parsed-ok"),this.listItemElement.insertBefore(ni.createExclamationMark(this.property,null),this.listItemElement.firstChild)),this.property.activeInStyle()||this.listItemElement.classList.add("inactive"),this.updateFilter(),this.property.parsedOk&&this.section()&&this.parent&&this.parent.root){const e=document.createElement("input");e.className="enabled-button",e.type="checkbox",e.checked=!this.property.disabled,e.addEventListener("mousedown",(e=>e.consume()),!1),e.addEventListener("click",(e=>{this._toggleDisabled(!this.property.disabled),e.consume()}),!1),this.nameElement&&this.valueElement&&R.setAccessibleName(e,`${this.nameElement.textContent} ${this.valueElement.textContent}`),this.listItemElement.insertBefore(e,this.listItemElement.firstChild)}}async _updateFontVariationSettingsWarning(){if("font-variation-settings"!==this.property.name)return;const e=this.property.value,t=this._parentPane.cssModel();if(!t)return;const i=this._parentPane.computedStyleModel(),n=await i.fetchComputedStyle();if(!n)return;const s=n.computedStyle.get("font-family");if(!s)return;const o=new Set(E.parseFontFamily(s)),r=t.fontFaces().filter((e=>o.has(e.getFontFamily()))),l=E.parseFontVariationSettings(e),a=[];for(const e of l)for(const t of r){const i=t.getVariationAxisByTag(e.tag);i&&((e.value<i.minValue||e.value>i.maxValue)&&a.push(he`Value for setting “${e.tag}” ${e.value} is outside the supported range [${i.minValue}, ${i.maxValue}] for font-family “${t.getFontFamily()}”.`))}a.length&&(this.listItemElement.classList.add("has-warning"),this.listItemElement.insertBefore(ni.createExclamationMark(this.property,a.join(" ")),this.listItemElement.firstChild))}_mouseUp(e){const t=Yt.get(this._parentPane);if(Yt.delete(this._parentPane),!t)return;if(this.listItemElement.hasSelection())return;if(k.isBeingEdited(e.target))return;if(e.consume(!0),e.target===this.listItemElement)return;const i=this.section();H.KeyboardShortcut.eventHasCtrlOrMeta(e)&&i&&i.navigable?this._navigateToSource(e.target):this.startEditing(e.target)}_handleContextMenuEvent(e,t){const i=new U.ContextMenu(t);this.property.parsedOk&&this.section()&&this.parent&&this.parent.root&&i.defaultSection().appendCheckboxItem(he`Toggle property and continue editing`,(async()=>{const i=this._parentPane.focusedSectionIndex();if(this.treeOutline){const n=this.treeOutline.rootElement().indexOfChild(this);this.editingCancelled(null,e),await this._toggleDisabled(!this.property.disabled),t.consume(),this._parentPane.continueEditingElement(i,n)}}),!this.property.disabled);const n=this._navigateToSource.bind(this);i.defaultSection().appendItem(he`Reveal in Sources panel`,n),i.show()}_handleCopyContextMenuEvent(e){if(!e.target)return;const t=new U.ContextMenu(e);t.clipboardSection().appendItem(he`Copy declaration`,(()=>{const e=`${this.property.name}: ${this.property.value};`;ae.InspectorFrontendHostInstance.copyText(e)})),t.clipboardSection().appendItem(he`Copy property`,(()=>{ae.InspectorFrontendHostInstance.copyText(this.property.name)})),t.clipboardSection().appendItem(he`Copy value`,(()=>{ae.InspectorFrontendHostInstance.copyText(this.property.value)})),t.defaultSection().appendItem(he`Copy rule`,(()=>{const e=this.section(),t=ni.formatLeadingProperties(e).ruleText;ae.InspectorFrontendHostInstance.copyText(t)})),t.defaultSection().appendItem(he`Copy all declarations`,(()=>{const e=this.section(),t=ni.formatLeadingProperties(e).allDeclarationText;ae.InspectorFrontendHostInstance.copyText(t)})),t.show()}_navigateToSource(e,t){const i=this.section();if(!i||!i.navigable)return;const s=e===this.nameElement,o=Me.CSSWorkspaceBinding.instance().propertyUILocation(this.property,s);o&&n.reveal(o,t)}startEditing(e){if(this.parent instanceof Qt&&this.parent.isShorthand)return;if(this._expandElement&&e===this._expandElement)return;const t=this.section();if(t&&!t.editable)return;if(e&&(e=e.enclosingNodeOrSelfWithClass("webkit-css-property")||e.enclosingNodeOrSelfWithClass("value")),e||(e=this.nameElement),k.isBeingEdited(e))return;const i=e===this.nameElement;var n;!i&&this.valueElement&&(g.cssMetadata().isGridAreaDefiningProperty(this.name)&&(this.valueElement.textContent=(n=this.value,Pe.Utils.splitStringByRegexes(n,[g.GridAreaRowRegex]).map((e=>e.value.trim())).join("\n"))),this.valueElement.textContent=function(e,t){const i=e.split(g.URLRegex);if(1===i.length)return e;const n=new RegExp(g.URLRegex);for(let e=1;e<i.length;e+=2){const s=n.exec(t);s&&(i[e]=s[0])}return i.join("")}(this.valueElement.textContent||"",this.value));const s=e&&e.textContent||"",o={expanded:this.expanded,hasChildren:this.isExpandable(),isEditingName:i,originalProperty:this.property,previousContent:s,originalName:void 0,originalValue:void 0};if(this._contextForTest=o,this.setExpandable(!1),e&&(e.parentElement&&e.parentElement.classList.add("child-editing"),e.textContent=e.textContent),this._originalPropertyText=this.property.propertyText||"",this._parentPane.setEditingStyle(!0,this),e&&e.parentElement&&e.parentElement.scrollIntoViewIfNeeded(!1),this._prompt=new ui(this,i),this._prompt.setAutocompletionTimeout(0),this._prompt.addEventListener(V.Events.TextChanged,(e=>{this._applyFreeFlowStyleTextEdit(o)})),e){const t=this._prompt.attachAndStartEditing(e,function(e,t){let i=t.target.textContent;e.isEditingName||(i=this.value||i),this._editingCommitted(i||"",e,"")}.bind(this,o));this._navigateToSource(e,!0),t.addEventListener("keydown",this._editingNameValueKeyDown.bind(this,o),!1),t.addEventListener("keypress",this._editingNameValueKeyPress.bind(this,o),!1),i&&(t.addEventListener("paste",function(e,t){const i=t.clipboardData;if(!i)return;const n=i.getData("Text");if(!n)return;const s=n.indexOf(":");if(s<0)return;const o=n.substring(0,s).trim(),r=n.substring(s+1).trim();t.preventDefault(),void 0===e.originalName&&(this.nameElement&&(e.originalName=this.nameElement.textContent||""),this.valueElement&&(e.originalValue=this.valueElement.textContent||"")),this.property.name=o,this.property.value=r,this.nameElement&&(this.nameElement.textContent=o,this.nameElement.normalize()),this.valueElement&&(this.valueElement.textContent=r,this.valueElement.normalize());const l=t.target;this._editingCommitted(l.textContent||"",e,"forward")}.bind(this,o),!1),t.addEventListener("contextmenu",this._handleContextMenuEvent.bind(this,o),!1));const n=e.getComponentSelection();n&&n.selectAllChildren(e)}}_editingNameValueKeyDown(e,t){if(t.handled)return;const i=t,n=i.target;let s;if("Enter"!==i.key||i.shiftKey)if(i.keyCode===H.Keys.Esc.code||"Escape"===i.key)s="cancel";else if(!e.isEditingName&&this._newProperty&&i.keyCode===H.Keys.Backspace.code){const e=n.getComponentSelection();e&&e.isCollapsed&&!e.focusOffset&&(t.preventDefault(),s="backward")}else"Tab"===i.key&&(s=i.shiftKey?"backward":"forward",t.preventDefault());else s="forward";if(s){switch(s){case"cancel":this.editingCancelled(null,e);break;case"forward":case"backward":this._editingCommitted(n.textContent||"",e,s)}t.consume()}else;}_editingNameValueKeyPress(e,t){const i=t,n=i.target,s=String.fromCharCode(i.charCode),o=n.selectionLeftOffset();if(e.isEditingName?":"===s:";"===s&&null!==o&&function(e,t){let i="";for(let n=0;n<t;++n){const t=e[n];"\\"===t&&""!==i?++n:i||'"'!==t&&"'"!==t?i===t&&(i=""):i=t}return!i}(n.textContent||"",o))return t.consume(!0),void this._editingCommitted(n.textContent||"",e,"forward")}async _applyFreeFlowStyleTextEdit(e){if(!this._prompt||!this._parentPane.node())return;const t=this._prompt.text();if(e.isEditingName&&t.includes(":"))return void this._editingCommitted(t,e,"forward");const i=this._prompt.textWithCurrentSuggestion();if(i.includes(";"))return;const n=this._parentPane.node();if(n){if(Boolean(n.pseudoType())){if("content"===this.name.toLowerCase())return;const e=i.trim().toLowerCase();if(e.startsWith("content:")||"display: none"===e)return}}e.isEditingName?i.includes(":")?await this.applyStyleText(i,!1):this._hasBeenEditedIncrementally&&await this._applyOriginalStyle(e):this.nameElement&&await this.applyStyleText(`${this.nameElement.textContent}: ${i}`,!1)}kickFreeFlowStyleEditForTest(){const e=this._contextForTest;return this._applyFreeFlowStyleTextEdit(e)}editingEnded(e){this.setExpandable(e.hasChildren),e.expanded&&this.expand();const t=e.isEditingName?this.nameElement:this.valueElement;t&&t.parentElement&&t.parentElement.classList.remove("child-editing"),this._parentPane.setEditingStyle(!1)}editingCancelled(e,t){this._removePrompt(),this._hasBeenEditedIncrementally?this._applyOriginalStyle(t):this._newProperty&&this.treeOutline&&this.treeOutline.removeChild(this),this.updateTitle(),this.editingEnded(t)}async _applyOriginalStyle(e){await this.applyStyleText(this._originalPropertyText,!1,e.originalProperty)}_findSibling(e){let t=this;do{const i="forward"===e?t.nextSibling:t.previousSibling;t=i instanceof Qt?i:null}while(t&&t.inherited());return t}async _editingCommitted(e,t,i){this._removePrompt(),this.editingEnded(t);const n=t.isEditingName;if(!this.nameElement||!this.valueElement)return;const s=this.nameElement.textContent||"",o=n&&s.includes(":")||!this.property;let r=!1,l=!1;const a=void 0!==t.originalName,d=a&&(this.nameElement.textContent!==t.originalName||this.valueElement.textContent!==t.originalValue),h=a&&n&&this.valueElement.textContent!==t.originalValue;let c=this;const u=n!==("forward"===i),p=this._newProperty&&!e&&(u||n);("forward"===i&&(!n||h)||"backward"===i&&n)&&(c=c._findSibling(i),c||("forward"!==i||this._newProperty&&!e?"backward"===i&&(l=!0):r=!0));let m=-1;null!==c&&this.treeOutline&&(m=this.treeOutline.rootElement().indexOfChild(c));const _=ce.isWhitespace(e),g=this._newProperty&&(h||u||!i&&!n||n&&_||o),f=this.section();if((e!==t.previousContent||d)&&!this._newProperty||g){let t;t=o?this.nameElement.textContent:_||this._newProperty&&ce.isWhitespace(this.valueElement.textContent||"")?"":n?e+": "+this.property.value:this.property.name+": "+e,await this.applyStyleText(t||"",!0),y.call(this,this._newProperty,!_,f)}else n?this.property.name=e:this.property.value=e,a||this._newProperty||this.updateTitle(),y.call(this,this._newProperty,!1,f);function y(e,t,s){if(i)if(c&&c.parent)c.startEditing(n?c.valueElement:c.nameElement);else{if(c&&!c.parent){const t=s.propertiesTreeOutline.rootElement();if("forward"===i&&_&&!n&&--m,m>=t.childCount()&&!this._newProperty)r=!0;else{const s=m>=0?t.childAt(m):null;if(s){let t=!n||h?s.nameElement:s.valueElement;return e&&_&&(t="forward"===i?s.nameElement:s.valueElement),void s.startEditing(t)}e||(l=!0)}}if(r){if(e&&!t&&n!==("backward"===i))return;s.addNewBlankProperty().startEditing()}else if(p){c=this._findSibling(i);const e=c||"backward"===i?s:s.nextEditableSibling();e&&(e.style().parentRule?e.startEditingSelector():e.moveEditorFromSelector(i))}else l&&(s.style().parentRule?s.startEditingSelector():s.moveEditorFromSelector(i))}else this._parentPane.resetFocus()}}_removePrompt(){this._prompt&&(this._prompt.detach(),this._prompt=null)}styleTextAppliedForTest(){}applyStyleText(e,t,i){return this._applyStyleThrottler.schedule(this._innerApplyStyleText.bind(this,e,t,i))}async _innerApplyStyleText(e,t,i){if(!this.treeOutline||!this.property)return;if(!this._style.range)return;const n=this._hasBeenEditedIncrementally;if(!(e=e.replace(/[\xA0\t]/g," ").trim()).length&&t&&this._newProperty&&!n)return void(this.parent&&this.parent.removeChild(this));const s=this._parentPane.node();this._parentPane.setUserOperation(!0),e.length&&!/;\s*$/.test(e)&&(e+=";");const o=!this._newProperty||n;let r=await this.property.setText(e,t,o);n&&t&&!r&&(t=!1,r=await this.property.setText(this._originalPropertyText,t,o)),this._parentPane.setUserOperation(!1);const l=i||this._style.propertyAt(this.property.index),a=this.property.index<this._style.allProperties().length;if(!r||!l&&a)return t&&(this._newProperty?this.treeOutline.removeChild(this):this.updateTitle()),void this.styleTextAppliedForTest();this._matchedStyles.resetActiveProperties(),this._hasBeenEditedIncrementally=!0;const d=t&&!e.length,h=this.section();d&&h?h.resetToolbars():!d&&l&&(this.property=l),s===this.node()&&this._updatePane(),this.styleTextAppliedForTest()}ondblclick(){return!0}isEventWithinDisclosureTriangle(e){return e.target===this._expandElement}}var Jt=Object.freeze({__proto__:null,StylePropertyTreeElement:Qt,Context:undefined});class Zt{constructor(e){this._styleSidebarPane=e}highlightProperty(e){for(const e of this._styleSidebarPane.allSections())for(let t=e.propertiesTreeOutline.firstChild();t;t=t.nextSibling)t.onpopulate();const t=this._findTreeElement((t=>t.property===e));t&&(t.parent&&t.parent.expand(),this._scrollAndHighlightTreeElement(t))}findAndHighlightPropertyName(e){const t=this._findTreeElement((t=>t.property.name===e));t&&this._scrollAndHighlightTreeElement(t)}_findTreeElement(e){let t=null;for(const i of this._styleSidebarPane.allSections()){let n=i.propertiesTreeOutline.firstChild();for(;n&&!t&&n instanceof Qt;){if(e(n)){t=n;break}n=n.traverseNextTreeElement(!1,null,!0)}if(t)break}return t}_scrollAndHighlightTreeElement(e){e.listItemElement.scrollIntoViewIfNeeded(),e.listItemElement.animate([{offset:0,backgroundColor:"rgba(255, 255, 0, 0.2)"},{offset:.1,backgroundColor:"rgba(255, 255, 0, 0.7)"},{offset:1,backgroundColor:"transparent"}],{duration:2e3,easing:"cubic-bezier(0, 0, 0.2, 1)"})}}var ei=Object.freeze({__proto__:null,StylePropertyHighlighter:Zt});const ti=[{mode:"padding",properties:["padding"]},{mode:"border",properties:["border"]},{mode:"margin",properties:["margin"]},{mode:"gap",properties:["gap","grid-gap"]},{mode:"column-gap",properties:["column-gap","grid-column-gap"]},{mode:"row-gap",properties:["row-gap","grid-row-gap"]},{mode:"grid-template-columns",properties:["grid-template-columns"]},{mode:"grid-template-rows",properties:["grid-template-rows"]},{mode:"grid-template-areas",properties:["grid-areas"]},{mode:"justify-content",properties:["justify-content"]},{mode:"align-content",properties:["align-content"]},{mode:"align-items",properties:["align-items"]}];let ii;class ni extends qt{static instance(){return ii||(ii=new ni),ii}constructor(){super(!0),this.setMinimumSize(96,26),this.registerRequiredCSS("elements/stylesSidebarPane.css",{enableLegacyPatching:!0}),r.Settings.instance().moduleSetting("colorFormat").addChangeListener(this.update.bind(this)),r.Settings.instance().moduleSetting("textEditorIndent").addChangeListener(this.update.bind(this)),this._currentToolbarPane=null,this._animatedToolbarPane=null,this._pendingWidget=null,this._pendingWidgetToggle=null,this._toolbar=null,this._toolbarPaneElement=this._createStylesSidebarToolbar(),this._computedStyleModel=new $e,this._noMatchesElement=this.contentElement.createChild("div","gray-info-message hidden"),this._noMatchesElement.textContent=he`No matching selector or style`,this._sectionsContainer=this.contentElement.createChild("div"),R.markAsTree(this._sectionsContainer),this._sectionsContainer.addEventListener("keydown",this._sectionsContainerKeyDown.bind(this),!1),this._sectionsContainer.addEventListener("focusin",this._sectionsContainerFocusChanged.bind(this),!1),this._sectionsContainer.addEventListener("focusout",this._sectionsContainerFocusChanged.bind(this),!1),this.sectionByElement=new WeakMap,this._swatchPopoverHelper=new xe.SwatchPopoverHelper,this._swatchPopoverHelper.addEventListener(xe.Events.WillShowPopover,this.hideAllPopovers,this),this._linkifier=new ne.Linkifier(oi,!0),this._decorator=new Zt(this),this._lastRevealedProperty=null,this._userOperation=!1,this._isEditingStyle=!1,this._filterRegex=null,this._isActivePropertyHighlighted=!1,this._initialUpdateCompleted=!1,this.hasMatchedStyles=!1,this.contentElement.classList.add("styles-pane"),this._sectionBlocks=[],this._idleCallbackManager=null,this._needsForceUpdate=!1,ii=this,M.Context.instance().addFlavorChangeListener(p.DOMNode,this.forceUpdate,this),this.contentElement.addEventListener("copy",this._clipboardCopy.bind(this)),this._resizeThrottler=new o.Throttler(100),this._imagePreviewPopover=new it(this.contentElement,(e=>{const t=e.composedPath()[0];return t instanceof Element?t:null}),(()=>this.node())),this.activeCSSAngle=null}swatchPopoverHelper(){return this._swatchPopoverHelper}setUserOperation(e){this._userOperation=e}static createExclamationMark(e,t){const n=document.createElement("span",{is:"dt-icon-label"});return n.className="exclamation-mark",ni.ignoreErrorsForProperty(e)||(n.type="smallicon-warning"),t?L.Tooltip.install(n,t):L.Tooltip.install(n,g.cssMetadata().isCSSPropertyName(e.name)?i.UIString("Invalid property value"):i.UIString("Unknown property name")),n}static ignoreErrorsForProperty(e){function t(e){return!e.startsWith("-webkit-")&&/^[-_][\w\d]+-\w/.test(e)}const i=e.name.toLowerCase();if("_"===i.charAt(0))return!0;if("filter"===i)return!0;if(i.startsWith("scrollbar-"))return!0;if(t(i))return!0;const n=e.value.toLowerCase();return!!n.endsWith("\\9")||!!t(n)}static createPropertyFilterElement(e,t,i){const n=document.createElement("input");function s(){const e=n.value?new RegExp(ce.escapeForRegExp(n.value),"i"):null;i(e)}return n.type="search",n.classList.add("custom-search-input"),n.placeholder=e,n.addEventListener("input",s,!1),n.addEventListener("keydown",(function(e){const t=e;"Escape"===t.key&&n.value&&(t.consume(!0),n.value="",s())}),!1),n}static formatLeadingProperties(e){const t=e._headerText(),i=r.Settings.instance().moduleSetting("textEditorIndent").get(),n=e._style,s=[];for(const e of n.leadingProperties())e.disabled?s.push(`${i}/* ${e.name}: ${e.value}; */`):s.push(`${i}${e.name}: ${e.value};`);const o=s.join("\n");return{allDeclarationText:o,ruleText:`${t} {\n${o}\n}`}}revealProperty(e){this._decorator.highlightProperty(e),this._lastRevealedProperty=e,this.update()}jumpToProperty(e){this._decorator.findAndHighlightPropertyName(e)}forceUpdate(){this._needsForceUpdate=!0,this._swatchPopoverHelper.hide(),this._resetCache(),this.update()}_sectionsContainerKeyDown(e){const t=this._sectionsContainer.ownerDocument.deepActiveElement();if(!t)return;const i=this.sectionByElement.get(t);if(i)switch(e.key){case"ArrowUp":case"ArrowLeft":{const t=i.previousSibling()||i.lastSibling();t&&(t.element.focus(),e.consume(!0));break}case"ArrowDown":case"ArrowRight":{const t=i.nextSibling()||i.firstSibling();t&&(t.element.focus(),e.consume(!0));break}case"Home":{const t=i.firstSibling();t&&(t.element.focus(),e.consume(!0));break}case"End":{const t=i.lastSibling();t&&(t.element.focus(),e.consume(!0));break}}}_sectionsContainerFocusChanged(){this.resetFocus()}resetFocus(){this._sectionBlocks[0]&&this._sectionBlocks[0].sections[0]&&(this._sectionBlocks[0].sections[0].element.tabIndex=this._sectionsContainer.hasFocus()?-1:0)}_onAddButtonLongClick(e){const t=this.cssModel();if(!t)return;const i=t.styleSheetHeaders().filter((function(e){return!e.isViaInspector()&&!e.isInline&&Boolean(e.resourceURL())})),n=[];for(let e=0;e<i.length;++e){const t=i[e],s=this._createNewRuleInStyleSheet.bind(this,t);n.push({text:Oe.displayNameForURL(t.resourceURL()),handler:s})}n.sort((function(e,t){return ce.naturalOrderComparator(e.text,t.text)}));const s=new U.ContextMenu(e);for(let e=0;e<n.length;++e){const t=n[e];s.defaultSection().appendItem(t.text,t.handler)}s.footerSection().appendItem("inspector-stylesheet",this._createNewRuleInViaInspectorStyleSheet.bind(this)),s.show()}_onFilterChanged(e){this._filterRegex=e,this._updateFilter()}_refreshUpdate(e,t){if(t)for(const e of this.allSections())e instanceof di&&e.isBlank||e._updateVarFunctions(t);if(this._isEditingStyle)return;const i=this.node();if(i){for(const t of this.allSections())t instanceof di&&t.isBlank||t.update(t===e);this._filterRegex&&this._updateFilter(),this._nodeStylesUpdatedForTest(i,!1)}}async doUpdate(){this._initialUpdateCompleted||setTimeout((()=>{this._initialUpdateCompleted||this._sectionsContainer.createChild("span","spinner")}),200);const e=await this._fetchMatchedCascade();await this._innerRebuildUpdate(e),this._initialUpdateCompleted||(this._initialUpdateCompleted=!0,this.dispatchEventToListeners(si.InitialUpdateCompleted)),this.dispatchEventToListeners(si.StylesUpdateCompleted,{hasMatchedStyles:this.hasMatchedStyles})}onResize(){this._resizeThrottler.schedule(this._innerResize.bind(this))}_innerResize(){const e=this.contentElement.getBoundingClientRect().width+"px";return this.allSections().forEach((t=>{t.propertiesTreeOutline.element.style.width=e})),Promise.resolve()}_resetCache(){const e=this.cssModel();e&&e.discardCachedMatchedCascade()}_fetchMatchedCascade(){const e=this.node();if(!e||!this.cssModel())return Promise.resolve(null);const t=this.cssModel();return t?t.cachedMatchedCascadeForNode(e).then(function(e){return e&&e.node()===this.node()?e:null}.bind(this)):Promise.resolve(null)}setEditingStyle(e,t){this._isEditingStyle!==e&&(this.contentElement.classList.toggle("is-editing-style",e),this._isEditingStyle=e,this._setActiveProperty(null))}_setActiveProperty(e){if(this._isActivePropertyHighlighted&&f.OverlayModel.hideDOMNodeHighlight(),this._isActivePropertyHighlighted=!1,!this.node())return;if(!e||e.overloaded()||e.inherited())return;const t=e.property.ownerStyle.parentRule,i=t instanceof v.CSSStyleRule?t.selectorText():void 0;for(const{properties:t,mode:n}of ti){if(!t.includes(e.name))continue;const s=this.node();if(s){s.domModel().overlayModel().highlightInOverlay({node:this.node(),selectorList:i},n),this._isActivePropertyHighlighted=!0;break}}}onCSSModelChanged(e){const t=e&&e.data?e.data.edit:null;if(t)for(const e of this.allSections())e._styleSheetEdited(t);else this._userOperation||this._isEditingStyle||(this._resetCache(),this.update())}focusedSectionIndex(){let e=0;for(const t of this._sectionBlocks)for(const i of t.sections){if(i.element.hasFocus())return e;e++}return-1}continueEditingElement(e,t){const i=this.allSections()[e];if(i){const e=i.closestPropertyForEditing(t);if(!e)return void i.element.focus();e.startEditing()}}async _innerRebuildUpdate(e){if(this._needsForceUpdate)this._needsForceUpdate=!1;else if(this._isEditingStyle||this._userOperation)return;const t=this.focusedSectionIndex();this._linkifier.reset(),this._sectionBlocks=[];const i=this.node();if(this.hasMatchedStyles=null!==e&&null!==i,!this.hasMatchedStyles)return this._sectionsContainer.removeChildren(),void this._noMatchesElement.classList.remove("hidden");this._sectionBlocks=await this._rebuildSectionsForMatchedStyleRules(e),this._sectionsContainer.removeChildren();const n=document.createDocumentFragment();let s=0,o=null;for(const e of this._sectionBlocks){const i=e.titleElement();i&&n.appendChild(i);for(const i of e.sections)n.appendChild(i.element),s===t&&(o=i.element),s++}this._sectionsContainer.appendChild(n),o&&o.focus(),t>=s&&this._sectionBlocks[0].sections[0].element.focus(),this._sectionsContainerFocusChanged(),this._filterRegex?this._updateFilter():this._noMatchesElement.classList.toggle("hidden",this._sectionBlocks.length>0),this._nodeStylesUpdatedForTest(i,!0),this._lastRevealedProperty&&(this._decorator.highlightProperty(this._lastRevealedProperty),this._lastRevealedProperty=null),re.panelLoaded("elements","DevTools.Launch.Elements"),this.dispatchEventToListeners(si.StylesUpdateCompleted,{hasStyle:!0})}_nodeStylesUpdatedForTest(e,t){}async _rebuildSectionsForMatchedStyleRules(e){this._idleCallbackManager&&this._idleCallbackManager.discard(),this._idleCallbackManager=new li;const t=[new ri(null)];let i=null;for(const n of e.nodeStyles()){const s=e.isInherited(n)?e.nodeForStyle(n):null;if(s&&s!==i){i=s;const e=await ri._createInheritedNodeBlock(i);t.push(e)}const o=t[t.length-1];o&&this._idleCallbackManager.schedule((()=>{const t=new ai(this,e,n);o.sections.push(t)}))}let n=[];const s=e.pseudoTypes();s.delete(Protocol.DOM.PseudoType.Before)&&n.push(Protocol.DOM.PseudoType.Before),n=n.concat([...s].sort());for(const i of n){const n=ri.createPseudoTypeBlock(i);for(const t of e.pseudoStyles(i))this._idleCallbackManager.schedule((()=>{const i=new ai(this,e,t);n.sections.push(i)}));t.push(n)}for(const i of e.keyframes()){const n=ri.createKeyframesBlock(i.name().text);for(const t of i.keyframes())this._idleCallbackManager.schedule((()=>{n.sections.push(new hi(this,e,t.style))}));t.push(n)}return await this._idleCallbackManager.awaitDone(),t}async _createNewRuleInViaInspectorStyleSheet(){const e=this.cssModel(),t=this.node();if(!e||!t)return;this.setUserOperation(!0);const i=await e.requestViaInspectorStylesheet(t);this.setUserOperation(!1),await this._createNewRuleInStyleSheet(i)}async _createNewRuleInStyleSheet(e){if(!e)return;const t=((await e.requestContent()).content||"").split("\n"),i=Le.TextRange.createFromLocation(t.length-1,t[t.length-1].length);this._sectionBlocks&&this._sectionBlocks.length>0&&this._addBlankSection(this._sectionBlocks[0].sections[0],e.id,i)}_addBlankSection(e,t,i){const n=this.node(),s=new di(this,e._matchedStyles,n?n.simpleSelector():"",t,i,e._style);this._sectionsContainer.insertBefore(s.element,e.element.nextSibling);for(const t of this._sectionBlocks){const i=t.sections.indexOf(e);-1!==i&&(t.sections.splice(i+1,0,s),s.startEditingSelector())}}removeSection(e){for(const t of this._sectionBlocks){const i=t.sections.indexOf(e);-1!==i&&(t.sections.splice(i,1),e.element.remove())}}filterRegex(){return this._filterRegex}_updateFilter(){let e=!1;for(const t of this._sectionBlocks)e=t.updateFilter()||e;this._noMatchesElement.classList.toggle("hidden",Boolean(e))}willHide(){this.hideAllPopovers(),super.willHide()}hideAllPopovers(){this._swatchPopoverHelper.hide(),this._imagePreviewPopover.hide(),this.activeCSSAngle&&(this.activeCSSAngle.minify(),this.activeCSSAngle=null)}allSections(){let e=[];for(const t of this._sectionBlocks)e=e.concat(t.sections);return e}_clipboardCopy(e){re.actionTaken(le.Action.StyleRuleCopied)}_createStylesSidebarToolbar(){const e=this.contentElement.createChild("div","styles-sidebar-pane-toolbar-container"),t=e.createChild("div","hbox styles-sidebar-pane-toolbar"),n=t.createChild("div","styles-sidebar-pane-filter-box"),s=ni.createPropertyFilterElement(he`Filter`,t,this._onFilterChanged.bind(this));R.setAccessibleName(s,i.UIString("Filter Styles")),n.appendChild(s);const o=new W.Toolbar("styles-pane-toolbar",t);o.makeToggledGray(),o.appendItemsAtLocation("styles-sidebarpane-toolbar"),this._toolbar=o;return e.createChild("div","styles-sidebar-toolbar-pane-container").createChild("div","styles-sidebar-toolbar-pane")}showToolbarPane(e,t){this._pendingWidgetToggle&&this._pendingWidgetToggle.setToggled(!1),this._pendingWidgetToggle=t,this._animatedToolbarPane?this._pendingWidget=e:this._startToolbarPaneAnimation(e),e&&t&&t.setToggled(!0)}appendToolbarItem(e){this._toolbar&&this._toolbar.appendToolbarItem(e)}_startToolbarPaneAnimation(e){if(e===this._currentToolbarPane)return;if(e&&this._currentToolbarPane)return this._currentToolbarPane.detach(),e.show(this._toolbarPaneElement),this._currentToolbarPane=e,void this._currentToolbarPane.focus();this._animatedToolbarPane=e,this._currentToolbarPane?this._toolbarPaneElement.style.animationName="styles-element-state-pane-slideout":e&&(this._toolbarPaneElement.style.animationName="styles-element-state-pane-slidein"),e&&e.show(this._toolbarPaneElement);const t=function(){this._toolbarPaneElement.style.removeProperty("animation-name"),this._toolbarPaneElement.removeEventListener("animationend",t,!1),this._currentToolbarPane&&this._currentToolbarPane.detach();this._currentToolbarPane=this._animatedToolbarPane,this._currentToolbarPane&&this._currentToolbarPane.focus();this._animatedToolbarPane=null,this._pendingWidget&&(this._startToolbarPaneAnimation(this._pendingWidget),this._pendingWidget=null)}.bind(this);this._toolbarPaneElement.addEventListener("animationend",t,!1)}}const si={InitialUpdateCompleted:Symbol("InitialUpdateCompleted"),StylesUpdateCompleted:Symbol("StylesUpdateCompleted")},oi=23;class ri{constructor(e){this._titleElement=e,this.sections=[]}static createPseudoTypeBlock(e){const t=document.createElement("div");return t.className="sidebar-separator",t.textContent=i.UIString("Pseudo ::%s element",e),new ri(t)}static createKeyframesBlock(e){const t=document.createElement("div");return t.className="sidebar-separator",t.textContent="@keyframes "+e,new ri(t)}static async _createInheritedNodeBlock(e){const t=document.createElement("div");t.className="sidebar-separator",k.createTextChild(t,he`Inherited from${" "}`);const i=await l.Linkifier.linkify(e,{preventKeyboardFocus:!0,tooltip:void 0});return t.appendChild(i),new ri(t)}updateFilter(){let e=!1;for(const t of this.sections)e=t._updateFilter()||e;return this._titleElement&&this._titleElement.classList.toggle("hidden",!e),Boolean(e)}titleElement(){return this._titleElement}}class li{constructor(){this._discarded=!1,this._promises=[]}discard(){this._discarded=!0}schedule(e,t=100){this._discarded||this._promises.push(new Promise(((i,n)=>{window.requestIdleCallback((()=>{if(this._discarded)return i();(()=>{try{e(),i()}catch(e){n(e)}})()}),{timeout:t})})))}awaitDone(){return Promise.all(this._promises)}}class ai{constructor(e,t,n){this._parentPane=e,this._style=n,this._matchedStyles=t,this.editable=Boolean(n.styleSheetId&&n.range),this._hoverTimer=null,this._willCauseCancelEditing=!1,this._forceShowAll=!1,this._originalPropertiesCount=n.leadingProperties().length;const s=n.parentRule;this.element=document.createElement("div"),this.element.classList.add("styles-section"),this.element.classList.add("matched-styles"),this.element.classList.add("monospace"),R.setAccessibleName(this.element,this._headerText()+", css selector"),this.element.tabIndex=-1,R.markAsTreeitem(this.element),this.element.addEventListener("keydown",this._onKeyDown.bind(this),!1),e.sectionByElement.set(this.element,this),this._innerElement=this.element.createChild("div"),this._titleElement=this._innerElement.createChild("div","styles-section-title "+(s?"styles-selector":"")),this.propertiesTreeOutline=new A.TreeOutlineInShadow,this.propertiesTreeOutline.setFocusable(!1),this.propertiesTreeOutline.registerRequiredCSS("elements/stylesSectionTree.css",{enableLegacyPatching:!0}),this.propertiesTreeOutline.element.classList.add("style-properties","matched-styles","monospace"),this.propertiesTreeOutline.section=this,this._innerElement.appendChild(this.propertiesTreeOutline.element),this._showAllButton=k.createTextButton("",this._showAllItems.bind(this),"styles-show-all"),this._innerElement.appendChild(this._showAllButton);const o=document.createElement("div");this._selectorElement=document.createElement("span"),this._selectorElement.classList.add("selector"),this._selectorElement.textContent=this._headerText(),o.appendChild(this._selectorElement),this._selectorElement.addEventListener("mouseenter",this._onMouseEnterSelector.bind(this),!1),this._selectorElement.addEventListener("mousemove",(e=>e.consume()),!1),this._selectorElement.addEventListener("mouseleave",this._onMouseOutSelector.bind(this),!1);o.createChild("span","sidebar-pane-open-brace").textContent=" {",o.addEventListener("mousedown",this._handleEmptySpaceMouseDown.bind(this),!1),o.addEventListener("click",this._handleSelectorContainerClick.bind(this),!1);if(this._innerElement.createChild("div","sidebar-pane-closing-brace").textContent="}",this._style.parentRule){const e=new W.ToolbarButton(i.UIString("Insert Style Rule Below"),"largeicon-add");e.addEventListener(W.ToolbarButton.Events.Click,this._onNewRuleClick,this),e.element.tabIndex=-1,this._newStyleRuleToolbar||(this._newStyleRuleToolbar=new W.Toolbar("sidebar-pane-section-toolbar new-rule-toolbar",this._innerElement)),this._newStyleRuleToolbar.appendToolbarItem(e),R.markAsHidden(this._newStyleRuleToolbar.element)}if(c.experiments.isEnabled("fontEditor")&&this.editable&&(this._fontEditorToolbar=new W.Toolbar("sidebar-pane-section-toolbar",this._innerElement),this._fontEditorSectionManager=new wt(this._parentPane.swatchPopoverHelper(),this),this._fontEditorButton=new W.ToolbarButton("Font Editor","largeicon-font-editor"),this._fontEditorButton.addEventListener(W.ToolbarButton.Events.Click,(()=>{this._onFontEditorButtonClicked()}),this),this._fontEditorButton.element.addEventListener("keydown",(e=>{isEnterOrSpaceKey(e)&&(e.consume(!0),this._onFontEditorButtonClicked())}),!1),this._fontEditorToolbar.appendToolbarItem(this._fontEditorButton),this._style.type===b.Type.Inline?this._newStyleRuleToolbar&&this._newStyleRuleToolbar.element.classList.add("shifted-toolbar"):this._fontEditorToolbar.element.classList.add("font-toolbar-hidden")),this._selectorElement.addEventListener("click",this._handleSelectorClick.bind(this),!1),this.element.addEventListener("contextmenu",this._handleContextMenuEvent.bind(this),!1),this.element.addEventListener("mousedown",this._handleEmptySpaceMouseDown.bind(this),!1),this.element.addEventListener("click",this._handleEmptySpaceClick.bind(this),!1),this.element.addEventListener("mousemove",this._onMouseMove.bind(this),!1),this.element.addEventListener("mouseleave",this._onMouseLeave.bind(this),!1),this._selectedSinceMouseDown=!1,this._elementToSelectorIndex=new WeakMap,s)if(s.isUserAgent()||s.isInjected())this.editable=!1;else if(s.styleSheetId){const e=s.cssModel().styleSheetHeaderForId(s.styleSheetId);this.navigable=e&&!e.isAnonymousInlineStyleSheet()}this._mediaListElement=this._titleElement.createChild("div","media-list media-matches"),this._selectorRefElement=this._titleElement.createChild("div","styles-section-subtitle"),this._updateMediaList(),this._updateRuleOrigin(),this._titleElement.appendChild(o),this._selectorContainer=o,this.navigable&&this.element.classList.add("navigable"),this.editable||(this.element.classList.add("read-only"),this.propertiesTreeOutline.element.classList.add("read-only")),this._fontPopoverIcon=null,this._hoverableSelectorsMode=!1,this._markSelectorMatches(),this.onpopulate()}registerFontProperty(e){this._fontEditorSectionManager&&this._fontEditorSectionManager.registerFontProperty(e),this._fontEditorToolbar&&(this._fontEditorToolbar.element.classList.remove("font-toolbar-hidden"),this._newStyleRuleToolbar&&this._newStyleRuleToolbar.element.classList.add("shifted-toolbar"))}resetToolbars(){this._parentPane.swatchPopoverHelper().isShowing()||this._style.type===b.Type.Inline||(this._fontEditorToolbar&&this._fontEditorToolbar.element.classList.add("font-toolbar-hidden"),this._newStyleRuleToolbar&&this._newStyleRuleToolbar.element.classList.remove("shifted-toolbar"))}static createRuleOriginNode(e,t,n){if(!n)return document.createTextNode("");const s=this._getRuleLocationFromCSSRule(n),o=n.styleSheetId?e.cssModel().styleSheetHeaderForId(n.styleSheetId):null;if(o&&o.isMutable&&!o.isViaInspector()){const e=o.isConstructed?i.UIString("constructed stylesheet"):"<style>";if(o.ownerNode){const t=Gt(o.ownerNode);return t.textContent=e,t}return document.createTextNode(e)}if(s&&n.styleSheetId&&o&&!o.isAnonymousInlineStyleSheet())return ai._linkifyRuleLocation(e.cssModel(),t,n.styleSheetId,s);if(n.isUserAgent())return document.createTextNode(i.UIString("user agent stylesheet"));if(n.isInjected())return document.createTextNode(i.UIString("injected stylesheet"));if(n.isViaInspector())return document.createTextNode(i.UIString("via inspector"));if(o&&o.ownerNode){const e=Gt(o.ownerNode,{preventKeyboardFocus:!0,tooltip:void 0});return e.textContent="<style>",e}return document.createTextNode("")}static _getRuleLocationFromCSSRule(e){let t;return e instanceof v.CSSStyleRule?t=e.style.range:e instanceof v.CSSKeyframeRule&&(t=e.key().range),t}static tryNavigateToRuleLocation(e,t){if(!t)return;const i=this._getRuleLocationFromCSSRule(t),n=t.styleSheetId?e.cssModel().styleSheetHeaderForId(t.styleSheetId):null;if(i&&t.styleSheetId&&n&&!n.isAnonymousInlineStyleSheet()){const n=this._getCSSSelectorLocation(e.cssModel(),t.styleSheetId,i);this._revealSelectorSource(n,!0)}}static _linkifyRuleLocation(e,t,i,n){const s=this._getCSSSelectorLocation(e,i,n);return t.linkifyCSSLocation(s)}static _getCSSSelectorLocation(e,t,i){const n=e.styleSheetHeaderForId(t),s=n.lineNumberInSource(i.startLine),o=n.columnNumberInSource(i.startLine,i.startColumn);return new _.CSSLocation(n,s,o)}_onKeyDown(e){const t=e;if(!(k.isEditing()||!this.editable||t.altKey||t.ctrlKey||t.metaKey))switch(t.key){case"Enter":case" ":this._startEditingAtFirstPosition(),t.consume(!0);break;default:1===t.key.length&&this.addNewBlankProperty(0).startEditing()}}_setSectionHovered(e){this.element.classList.toggle("styles-panel-hovered",e),this.propertiesTreeOutline.element.classList.toggle("styles-panel-hovered",e),this._hoverableSelectorsMode!==e&&(this._hoverableSelectorsMode=e,this._markSelectorMatches())}_onMouseLeave(e){this._setSectionHovered(!1),this._parentPane._setActiveProperty(null)}_onMouseMove(e){const t=H.KeyboardShortcut.eventHasCtrlOrMeta(e);this._setSectionHovered(t);const i=this.propertiesTreeOutline.treeElementFromEvent(e);i instanceof Qt?this._parentPane._setActiveProperty(i):this._parentPane._setActiveProperty(null);const n=this.element.getComponentSelection();!this._selectedSinceMouseDown&&n&&n.toString()&&(this._selectedSinceMouseDown=!0)}_onFontEditorButtonClicked(){this._fontEditorSectionManager&&this._fontEditorButton&&(re.cssEditorOpened("fontEditor"),this._fontEditorSectionManager.showPopover(this._fontEditorButton.element,this._parentPane))}style(){return this._style}_headerText(){const e=this._matchedStyles.nodeForStyle(this._style);return this._style.type===b.Type.Inline?this._matchedStyles.isInherited(this._style)?i.UIString("Style Attribute"):"element.style":e&&this._style.type===b.Type.Attributes?he`${e.nodeNameInCorrectCase()}[Attributes Style]`:this._style.parentRule instanceof v.CSSStyleRule?this._style.parentRule.selectorText():""}_onMouseOutSelector(){this._hoverTimer&&clearTimeout(this._hoverTimer),f.OverlayModel.hideDOMNodeHighlight()}_onMouseEnterSelector(){this._hoverTimer&&clearTimeout(this._hoverTimer),this._hoverTimer=setTimeout(this._highlight.bind(this),300)}_highlight(e="all"){f.OverlayModel.hideDOMNodeHighlight();const t=this._parentPane.node();if(!t)return;const i=this._style.parentRule&&this._style.parentRule instanceof v.CSSStyleRule?this._style.parentRule.selectorText():void 0;t.domModel().overlayModel().highlightInOverlay({node:t,selectorList:i},e)}firstSibling(){const e=this.element.parentElement;if(!e)return null;let t=e.firstChild;for(;t;){const e=this._parentPane.sectionByElement.get(t);if(e)return e;t=t.nextSibling}return null}lastSibling(){const e=this.element.parentElement;if(!e)return null;let t=e.lastChild;for(;t;){const e=this._parentPane.sectionByElement.get(t);if(e)return e;t=t.previousSibling}return null}nextSibling(){let e=this.element;do{e=e.nextSibling}while(e&&!this._parentPane.sectionByElement.has(e));if(e)return this._parentPane.sectionByElement.get(e)}previousSibling(){let e=this.element;do{e=e.previousSibling}while(e&&!this._parentPane.sectionByElement.has(e));if(e)return this._parentPane.sectionByElement.get(e)}_onNewRuleClick(e){e.data.consume();const t=this._style.parentRule;if(!t||!t.style.range)return;const i=Le.TextRange.createFromLocation(t.style.range.endLine,t.style.range.endColumn+1);this._parentPane._addBlankSection(this,t.styleSheetId,i)}_styleSheetEdited(e){const t=this._style.parentRule;t?t.rebase(e):this._style.rebase(e),this._updateMediaList(),this._updateRuleOrigin()}_createMediaList(e){for(let t=e.length-1;t>=0;--t){const i=e[t];if(!i.text||!i.text.includes("(")&&"print"!==i.text)continue;const n=this._mediaListElement.createChild("div","media"),s=n.createChild("span"),o=s.createChild("span","media-text");switch(i.source){case S.Source.LINKED_SHEET:case S.Source.INLINE_SHEET:o.textContent=`media="${i.text}"`;break;case S.Source.MEDIA_RULE:{const e=s.createChild("span");s.insertBefore(e,o),e.textContent="@media ",o.textContent=i.text,i.styleSheetId&&(n.classList.add("editable-media"),o.addEventListener("click",this._handleMediaRuleClick.bind(this,i,o),!1));break}case S.Source.IMPORT_RULE:o.textContent="@import "+i.text}}}_updateMediaList(){this._mediaListElement.removeChildren(),this._style.parentRule&&this._style.parentRule instanceof v.CSSStyleRule&&this._createMediaList(this._style.parentRule.media)}isPropertyInherited(e){return!!this._matchedStyles.isInherited(this._style)&&!g.cssMetadata().isPropertyInherited(e)}nextEditableSibling(){let e=this;do{e=e.nextSibling()}while(e&&!e.editable);if(!e)for(e=this.firstSibling();e&&!e.editable;)e=e.nextSibling();return e&&e.editable?e:null}previousEditableSibling(){let e=this;do{e=e.previousSibling()}while(e&&!e.editable);if(!e)for(e=this.lastSibling();e&&!e.editable;)e=e.previousSibling();return e&&e.editable?e:null}refreshUpdate(e){this._parentPane._refreshUpdate(this,e)}_updateVarFunctions(e){let t=this.propertiesTreeOutline.firstChild();for(;t;)t!==e&&t instanceof Qt&&t.updateTitleIfComputedValueChanged(),t=t.traverseNextTreeElement(!1,null,!0)}update(e){if(this._selectorElement.textContent=this._headerText(),this._markSelectorMatches(),e)this.onpopulate();else{let e=this.propertiesTreeOutline.firstChild();for(;e&&e instanceof Qt;)e.setOverloaded(this._isPropertyOverloaded(e.property)),e=e.traverseNextTreeElement(!1,null,!0)}}_showAllItems(e){e&&e.consume(),this._forceShowAll||(this._forceShowAll=!0,this.onpopulate())}onpopulate(){this._parentPane._setActiveProperty(null),this.propertiesTreeOutline.removeChildren();const e=this._style;let t=0;const i=e.leadingProperties(),n=ai.MaxProperties+i.length-this._originalPropertiesCount;for(const s of i){if(!this._forceShowAll&&t>=n)break;t++;const i=Boolean(e.longhandProperties(s.name).length),o=this.isPropertyInherited(s.name),r=this._isPropertyOverloaded(s);if(e.parentRule&&e.parentRule.isUserAgent()&&o)continue;const l=new Qt(this._parentPane,this._matchedStyles,s,i,o,r,!1);this.propertiesTreeOutline.appendChild(l)}t<i.length?(this._showAllButton.classList.remove("hidden"),this._showAllButton.textContent=he`Show All Properties (${i.length-t} more)`):this._showAllButton.classList.add("hidden")}_isPropertyOverloaded(e){return this._matchedStyles.propertyState(e)===y.PropertyState.Overloaded}_updateFilter(){let e=!1;this._showAllItems();for(const t of this.propertiesTreeOutline.rootElement().children())if(t instanceof Qt){const i=t.updateFilter();e=e||i}const t=this._parentPane.filterRegex(),i=!e&&null!==t&&!t.test(this.element.deepTextContent());return this.element.classList.toggle("hidden",i),!i&&this._style.parentRule&&this._markSelectorHighlights(),!i}_markSelectorMatches(){const e=this._style.parentRule;if(!(e&&e instanceof v.CSSStyleRule))return;this._mediaListElement.classList.toggle("media-matches",this._matchedStyles.mediaMatches(this._style));const t=e.selectors.map((e=>e.text)),i=this._matchedStyles.matchingSelectors(e),n=new Array(t.length).fill(!1);for(const e of i)n[e]=!0;if(this._parentPane._isEditingStyle)return;const s=this._hoverableSelectorsMode?this._renderHoverableSelectors(t,n):this._renderSimplifiedSelectors(t,n);this._selectorElement.removeChildren(),this._selectorElement.appendChild(s),this._markSelectorHighlights()}_renderHoverableSelectors(e,t){const i=document.createDocumentFragment();for(let n=0;n<e.length;++n)n&&k.createTextChild(i,", "),i.appendChild(this._createSelectorElement(e[n],t[n],n));return i}_createSelectorElement(e,t,i){const n=document.createElement("span");return n.classList.add("simple-selector"),n.classList.toggle("selector-matches",t),"number"==typeof i&&this._elementToSelectorIndex.set(n,i),n.textContent=e,n}_renderSimplifiedSelectors(e,t){const i=document.createDocumentFragment();let n=!1,s="";for(let o=0;o<e.length;++o)n!==t[o]&&s&&(i.appendChild(this._createSelectorElement(s,n)),s=""),n=t[o],s+=e[o]+(o===e.length-1?"":", ");return s&&i.appendChild(this._createSelectorElement(s,n)),i}_markSelectorHighlights(){const e=this._selectorElement.getElementsByClassName("simple-selector"),t=this._parentPane.filterRegex();for(let i=0;i<e.length;++i){const n=null!==t&&t.test(e[i].textContent||"");e[i].classList.toggle("filter-match",n)}}_checkWillCancelEditing(){const e=this._willCauseCancelEditing;return this._willCauseCancelEditing=!1,e}_handleSelectorContainerClick(e){!this._checkWillCancelEditing()&&this.editable&&e.target===this._selectorContainer&&(this.addNewBlankProperty(0).startEditing(),e.consume(!0))}addNewBlankProperty(e=this.propertiesTreeOutline.rootElement().childCount()){const t=this._style.newBlankProperty(e),i=new Qt(this._parentPane,this._matchedStyles,t,!1,!1,!1,!0);return this.propertiesTreeOutline.insertChild(i,t.index),i}_handleEmptySpaceMouseDown(){this._willCauseCancelEditing=this._parentPane._isEditingStyle,this._selectedSinceMouseDown=!1}_handleEmptySpaceClick(e){if(!this.editable||this.element.hasSelection()||this._checkWillCancelEditing()||this._selectedSinceMouseDown)return;const t=e.target;if(t.classList.contains("header")||this.element.classList.contains("read-only")||t.enclosingNodeOrSelfWithClass("media"))return void e.consume();const i=k.deepElementFromEvent(e),n=i&&A.TreeElement.getTreeElementBylistItemNode(i);n&&n instanceof Qt?this.addNewBlankProperty(n.property.index+1).startEditing():this.addNewBlankProperty().startEditing(),e.consume(!0)}_handleMediaRuleClick(e,t,i){if(k.isBeingEdited(t))return;if(H.KeyboardShortcut.eventHasCtrlOrMeta(i)&&this.navigable){const t=e.rawLocation();if(!t)return void i.consume(!0);const s=Me.CSSWorkspaceBinding.instance().rawLocationToUILocation(t);return s&&n.reveal(s),void i.consume(!0)}if(!this.editable)return;const s=new z.Config(this._editingMediaCommitted.bind(this,e),this._editingMediaCancelled.bind(this,t),void 0,this._editingMediaBlurHandler.bind(this));z.InplaceEditor.startEditing(t,s);const o=t.getComponentSelection();o&&o.selectAllChildren(t),this._parentPane.setEditingStyle(!0);t.enclosingNodeOrSelfWithClass("media").classList.add("editing-media"),i.consume(!0)}_editingMediaFinished(e){this._parentPane.setEditingStyle(!1);e.enclosingNodeOrSelfWithClass("media").classList.remove("editing-media")}_editingMediaCancelled(e){this._editingMediaFinished(e),this._markSelectorMatches();const t=e.getComponentSelection();t&&t.collapse(e,0)}_editingMediaBlurHandler(){return!0}_editingMediaCommitted(e,t,i,n,s,o){this._parentPane.setEditingStyle(!1),this._editingMediaFinished(t),i&&(i=i.trim()),this._parentPane.setUserOperation(!0);const r=this._parentPane.cssModel();r&&e.styleSheetId&&r.setMediaText(e.styleSheetId,e.range,i).then(function(e){e&&(this._matchedStyles.resetActiveProperties(),this._parentPane._refreshUpdate(this)),this._parentPane.setUserOperation(!1),this._editingMediaTextCommittedForTest()}.bind(this))}_editingMediaTextCommittedForTest(){}_handleSelectorClick(e){const t=e.target;if(t){if(H.KeyboardShortcut.eventHasCtrlOrMeta(e)&&this.navigable&&t.classList.contains("simple-selector")){const i=this._elementToSelectorIndex.get(t);return i&&this._navigateToSelectorSource(i,!0),void e.consume(!0)}this.element.hasSelection()||(this._startEditingAtFirstPosition(),e.consume(!0))}}_handleContextMenuEvent(e){if(!e.target)return;const t=new U.ContextMenu(e);t.clipboardSection().appendItem(he`Copy selector`,(()=>{const e=this._headerText();ae.InspectorFrontendHostInstance.copyText(e)})),t.clipboardSection().appendItem(he`Copy rule`,(()=>{const e=ni.formatLeadingProperties(this).ruleText;ae.InspectorFrontendHostInstance.copyText(e)})),t.clipboardSection().appendItem(he`Copy all declarations`,(()=>{const e=ni.formatLeadingProperties(this).allDeclarationText;ae.InspectorFrontendHostInstance.copyText(e)})),t.show()}_navigateToSelectorSource(e,t){const i=this._parentPane.cssModel();if(!i)return;const n=this._style.parentRule;if(!n)return;const s=i.styleSheetHeaderForId(n.styleSheetId);if(!s)return;const o=new _.CSSLocation(s,n.lineNumberInSource(e),n.columnNumberInSource(e));ai._revealSelectorSource(o,t)}static _revealSelectorSource(e,t){const i=Me.CSSWorkspaceBinding.instance().rawLocationToUILocation(e);i&&n.reveal(i,!t)}_startEditingAtFirstPosition(){this.editable&&(this._style.parentRule?this.startEditingSelector():this.moveEditorFromSelector("forward"))}startEditingSelector(){const e=this._selectorElement;if(k.isBeingEdited(e))return;e.scrollIntoViewIfNeeded(!1);const t=e.textContent;null!==t&&(e.textContent=t.replace(/\s+/g," ").trim());const i=new z.Config(this.editingSelectorCommitted.bind(this),this.editingSelectorCancelled.bind(this));z.InplaceEditor.startEditing(this._selectorElement,i);const n=e.getComponentSelection();n&&n.selectAllChildren(e),this._parentPane.setEditingStyle(!0),e.classList.contains("simple-selector")&&this._navigateToSelectorSource(0,!1)}moveEditorFromSelector(e){if(this._markSelectorMatches(),e)if("forward"===e){let e=this.propertiesTreeOutline.firstChild();for(;e&&e.inherited();){const t=e.nextSibling;e=t instanceof Qt?t:null}e?e.startEditing(e.nameElement):this.addNewBlankProperty().startEditing()}else{const e=this.previousEditableSibling();if(!e)return;e.addNewBlankProperty().startEditing()}}editingSelectorCommitted(e,t,i,n,s){if(this._editingSelectorEnded(),t&&(t=t.trim()),t===i)return this._selectorElement.textContent=t,void this.moveEditorFromSelector(s);const o=this._style.parentRule;o&&(this._parentPane.setUserOperation(!0),this._setHeaderText(o,t).then(function(){this._parentPane.setUserOperation(!1),this.moveEditorFromSelector(s),this._editingSelectorCommittedForTest()}.bind(this)))}_setHeaderText(e,t){function i(e){const t=this._matchedStyles.matchingSelectors(e).length>0;this.propertiesTreeOutline.element.classList.toggle("no-affect",!t),this._matchedStyles.resetActiveProperties(),this._parentPane._refreshUpdate(this)}if(!(e instanceof v.CSSStyleRule))return Promise.resolve();const n=e.selectorRange();return n?e.setSelectorText(t).then(function(e,t){return t?this._matchedStyles.recomputeMatchingSelectors(e).then(i.bind(this,e)):Promise.resolve()}.bind(this,e,Boolean(n))):Promise.resolve()}_editingSelectorCommittedForTest(){}_updateRuleOrigin(){this._selectorRefElement.removeChildren(),this._selectorRefElement.appendChild(ai.createRuleOriginNode(this._matchedStyles,this._parentPane._linkifier,this._style.parentRule))}_editingSelectorEnded(){this._parentPane.setEditingStyle(!1)}editingSelectorCancelled(){this._editingSelectorEnded(),this._markSelectorMatches()}closestPropertyForEditing(e){const t=this.propertiesTreeOutline.rootElement();return e>=t.childCount()?t.lastChild():t.childAt(e)}}ai.MaxProperties=50;class di extends ai{constructor(e,t,i,n,s,o){const r=e.cssModel();super(e,t,v.CSSStyleRule.createDummyRule(r,i).style),this._normal=!1,this._ruleLocation=s,this._styleSheetId=n,this._selectorRefElement.removeChildren(),this._selectorRefElement.appendChild(ai._linkifyRuleLocation(r,this._parentPane._linkifier,n,this._actualRuleLocation())),o&&o.parentRule&&o.parentRule instanceof v.CSSStyleRule&&this._createMediaList(o.parentRule.media),this.element.classList.add("blank-section")}_actualRuleLocation(){const e=this._rulePrefix().split("\n"),t=e[e.length-1],i=new Le.TextRange(0,0,e.length-1,t?t.length:0);return this._ruleLocation.rebaseAfterTextEdit(Le.TextRange.createFromLocation(0,0),i)}_rulePrefix(){return 0===this._ruleLocation.startLine&&0===this._ruleLocation.startColumn?"":"\n\n"}get isBlank(){return!this._normal}editingSelectorCommitted(e,t,i,n,s){if(!this.isBlank)return void super.editingSelectorCommitted(e,t,i,n,s);function o(e){const t=this._matchedStyles.matchingSelectors(e).length>0;this._makeNormal(e),t||this.propertiesTreeOutline.element.classList.add("no-affect"),this._updateRuleOrigin(),this._parentPane.setUserOperation(!1),this._editingSelectorEnded(),this.element.parentElement&&this.moveEditorFromSelector(s),this._markSelectorMatches(),this._editingSelectorCommittedForTest()}t&&(t=t.trim()),this._parentPane.setUserOperation(!0);const r=this._parentPane.cssModel(),l=this._rulePrefix()+t+" {}";r&&r.addRule(this._styleSheetId,l,this._ruleLocation).then(function(e){return e?this._matchedStyles.addNewRule(e,this._matchedStyles.node()).then(o.bind(this,e)):(this.editingSelectorCancelled(),this._editingSelectorCommittedForTest(),Promise.resolve())}.bind(this))}editingSelectorCancelled(){this._parentPane.setUserOperation(!1),this.isBlank?(this._editingSelectorEnded(),this._parentPane.removeSection(this)):super.editingSelectorCancelled()}_makeNormal(e){this.element.classList.remove("blank-section"),this._style=e.style,this._normal=!0}}class hi extends ai{constructor(e,t,i){super(e,t,i),this._selectorElement.className="keyframe-key"}_headerText(){return this._style.parentRule instanceof v.CSSKeyframeRule?this._style.parentRule.key().text:""}_setHeaderText(e,t){if(!(e instanceof v.CSSKeyframeRule))return Promise.resolve();return e.key().range?e.setKeyText(t).then(function(e){e&&this._parentPane._refreshUpdate(this)}.bind(this)):Promise.resolve()}isPropertyInherited(e){return!1}_isPropertyOverloaded(e){return!1}_markSelectorHighlights(){}_markSelectorMatches(){this._style.parentRule instanceof v.CSSKeyframeRule&&(this._selectorElement.textContent=this._style.parentRule.key().text)}_highlight(){}}function ci(e){return`'${e.replaceAll("'","\\'")}'`}class ui extends V.TextPrompt{constructor(e,t){super(),this.initialize(this._buildPropertyCompletions.bind(this),k.StyleValueDelimiters);const i=g.cssMetadata();this._isColorAware=g.cssMetadata().isColorAwareProperty(e.property.name),this._cssCompletions=[];const n=e.node();if(t)this._cssCompletions=i.allProperties(),n&&!n.isSVGNode()&&(this._cssCompletions=this._cssCompletions.filter((e=>!i.isSVGProperty(e))));else if(this._cssCompletions=i.propertyValues(e.property.name),n&&i.isFontFamilyProperty(e.property.name)){const e=n.domModel().cssModel().fontFaces().map((e=>ci(e.getFontFamily())));this._cssCompletions.unshift(...e)}if(this._selectedNodeComputedStyles=null,this._parentNodeComputedStyles=null,this._treeElement=e,this._isEditingName=t,this._cssVariables=e.matchedStyles().availableCSSVariables(e.property.ownerStyle),this._cssVariables.length<1e3?this._cssVariables.sort(ce.naturalOrderComparator):this._cssVariables.sort(),!t&&(this.disableDefaultSuggestionForEmptyInput(),e&&e.valueElement)){const t=e.valueElement.textContent,i=de.isMac()?"Cmd":"Ctrl";null!==t&&(t.match(/#[\da-f]{3,6}$/i)?this.setTitle(he`Increment/decrement with mousewheel or up/down keys. ${i}: R ±1, Shift: G ±1, Alt: B ±1`):t.match(/\d+/)&&this.setTitle(he`Increment/decrement with mousewheel or up/down keys. ${i}: ±100, Shift: ±10, Alt: ±0.1`))}}onKeyDown(e){const t=e;switch(t.key){case"ArrowUp":case"ArrowDown":case"PageUp":case"PageDown":if(!this.isSuggestBoxVisible()&&this._handleNameOrValueUpDown(t))return void t.preventDefault();break;case"Enter":if(t.shiftKey)return;return this.tabKeyPressed(),void t.preventDefault()}super.onKeyDown(t)}onMouseWheel(e){this._handleNameOrValueUpDown(e)?e.consume(!0):super.onMouseWheel(e)}tabKeyPressed(){return this.acceptAutoComplete(),!1}_handleNameOrValueUpDown(e){return!(this._isEditingName||!this._treeElement.valueElement||!k.handleElementValueModifications(e,this._treeElement.valueElement,function(e,t){this._treeElement.nameElement&&this._treeElement.valueElement&&this._treeElement.applyStyleText(this._treeElement.nameElement.textContent+": "+this._treeElement.valueElement.textContent,!1)}.bind(this),this._isValueSuggestion.bind(this),function(e,t,i){return 0===t||i.length||!g.cssMetadata().isLengthProperty(this._treeElement.property.name)||this._treeElement.property.value.toLowerCase().startsWith("calc(")||(i="px"),e+t+i}.bind(this)))}_isValueSuggestion(e){return!!e&&(e=e.toLowerCase(),-1!==this._cssCompletions.indexOf(e)||e.startsWith("--"))}async _buildPropertyCompletions(e,t,i){const n=t.toLowerCase(),o=!this._isEditingName&&e.trim().endsWith("var(");if(!t&&!i&&!o&&(this._isEditingName||e))return Promise.resolve([]);const r=[],l=[];o||this._cssCompletions.forEach((e=>u.call(this,e,!1)));const a=this._treeElement.node();if(this._isEditingName&&a){g.cssMetadata().nameValuePresets(a.isSVGNode()).forEach((e=>u.call(this,e,!1,!0)))}(this._isEditingName||o)&&this._cssVariables.forEach((e=>u.call(this,e,!0)));const d=r.concat(l);!this._isEditingName&&!d.length&&t.length>1&&"!important".startsWith(n)&&d.push({text:"!important",title:void 0,subtitle:void 0,iconType:void 0,priority:void 0,isSecondary:void 0,subtitleRenderer:void 0,selectionRange:void 0,hideGhostText:void 0,iconElement:void 0});const h=t.replace("-","");if(h&&h===h.toUpperCase())for(let e=0;e<d.length;++e)d[e].text.startsWith("--")||(d[e].text=d[e].text.toUpperCase());for(const e of d){if(o){e.title=e.text,e.text+=")";continue}const t=g.cssMetadata().getValuePreset(this._treeElement.name,e.text);!this._isEditingName&&t&&(e.title=e.text,e.text=t.text,e.selectionRange={startColumn:t.startColumn,endColumn:t.endColumn})}if(c.experiments.isEnabled("cssFlexboxFeatures")){const e=this._treeElement.node(),t=async()=>{if(!e||this._selectedNodeComputedStyles)return;this._selectedNodeComputedStyles=await e.domModel().cssModel().computedStylePromise(e.id);const t=e.parentNode;t&&(this._parentNodeComputedStyles=await t.domModel().cssModel().computedStylePromise(e.id))};for(const e of d){await t();const i=Wt(this._isEditingName?e.text:`${this._treeElement.property.name}: ${e.text}`,this._selectedNodeComputedStyles,this._parentNodeComputedStyles);if(!i)continue;const n=new Ie.Icon,s="12.5px",o="12.5px";n.data={iconName:i.iconName,width:s,height:o,color:"black"},n.style.transform=`rotate(${i.rotate}deg) scale(${1.1*i.scaleX}, ${1.1*i.scaleY})`,n.style.maxHeight=o,n.style.maxWidth=s,e.iconElement=n}}return this._isColorAware&&!this._isEditingName&&d.sort(((e,t)=>Boolean(e.subtitleRenderer)===Boolean(t.subtitleRenderer)?0:e.subtitleRenderer?-1:1)),Promise.resolve(d);function u(e,t,i){const o=e.toLowerCase().indexOf(n),a={text:e,title:void 0,subtitle:void 0,iconType:void 0,priority:void 0,isSecondary:void 0,subtitleRenderer:void 0,selectionRange:void 0,hideGhostText:void 0,iconElement:void 0};if(t){const t=this._treeElement.matchedStyles().computeCSSVariable(this._treeElement.property.ownerStyle,e);if(t){const e=s.Color.parse(t);e&&(a.subtitleRenderer=p.bind(null,e))}}i&&(a.hideGhostText=!0),0===o?(a.priority=this._isEditingName?g.cssMetadata().propertyUsageWeight(e):1,r.push(a)):o>-1&&l.push(a)}function p(e){const t=new ve.ColorSwatch;return t.renderColor(e),t.style.pointerEvents="none",t}}}function pi(e){return e.replace(/(?<!\\)\\(?:([a-fA-F0-9]{1,6})|(.))[\n\t\x20]?/gs,((e,t,i)=>{if(i)return i;const n=parseInt(t,16);return 55296<=n&&n<=57343||0===n||n>1114111?"�":String.fromCodePoint(n)}))}class mi{constructor(e,t,i,n){this._rule=e,this._node=t,this._propertyName=i,this._propertyValue=n,this._colorHandler=null,this._bezierHandler=null,this._fontHandler=null,this._shadowHandler=null,this._gridHandler=null,this._varHandler=document.createTextNode.bind(document),this._angleHandler=null}setColorHandler(e){this._colorHandler=e}setBezierHandler(e){this._bezierHandler=e}setFontHandler(e){this._fontHandler=e}setShadowHandler(e){this._shadowHandler=e}setGridHandler(e){this._gridHandler=e}setVarHandler(e){this._varHandler=e}setAngleHandler(e){this._angleHandler=e}renderName(){const e=document.createElement("span");return e.className="webkit-css-property",e.textContent=this._propertyName,e.normalize(),e}renderValue(){const e=document.createElement("span");if(e.className="value",!this._propertyValue)return e;const t=g.cssMetadata();if(this._shadowHandler&&t.isShadowProperty(this._propertyName)&&!g.VariableRegex.test(this._propertyValue))return e.appendChild(this._shadowHandler(this._propertyValue,this._propertyName)),e.normalize(),e;if(this._gridHandler&&t.isGridAreaDefiningProperty(this._propertyName))return e.appendChild(this._gridHandler(this._propertyValue,this._propertyName)),e.normalize(),e;t.isStringProperty(this._propertyName)&&L.Tooltip.install(e,pi(this._propertyValue));const i=[g.VariableRegex,g.URLRegex],n=[this._varHandler,this._processURL.bind(this)];this._bezierHandler&&t.isBezierAwareProperty(this._propertyName)&&(i.push(I.CubicBezier.Regex),n.push(this._bezierHandler)),this._colorHandler&&t.isColorAwareProperty(this._propertyName)&&(i.push(s.Regex),n.push(this._colorHandler)),this._angleHandler&&t.isAngleAwareProperty(this._propertyName)&&(i.push(Te.CSSAngleRegex),n.push(this._angleHandler)),this._fontHandler&&t.isFontAwareProperty(this._propertyName)&&("font-family"===this._propertyName?i.push(Ne.FontFamilyRegex):i.push(Ne.FontPropertiesRegex),n.push(this._fontHandler));const o=Pe.Utils.splitStringByRegexes(this._propertyValue,i);for(let t=0;t<o.length;t++){const i=o[t],s=-1===i.regexIndex?document.createTextNode.bind(document):n[i.regexIndex];s&&e.appendChild(s(i.value))}return e.normalize(),e}_processURL(e){let t=e.substring(4,e.length-1).trim();(/^'.*'$/s.test(t)||/^".*"$/s.test(t))&&(t=t.substring(1,t.length-1));const i=document.createDocumentFragment();k.createTextChild(i,"url(");let n=null;this._rule&&this._rule.resourceURL()?n=a.ParsedURL.completeURL(this._rule.resourceURL(),t):this._node&&(n=this._node.resolveURL(t));const s=it.setImageUrl(ne.Linkifier.linkifyURL(n||t,{text:t,preventClick:!0,bypassURLTrimming:!0,className:void 0,lineNumber:void 0,columnNumber:void 0,maxLength:void 0,tabStop:void 0}),n||t);return i.appendChild(s),k.createTextChild(i,")"),i}}var _i=Object.freeze({__proto__:null,StylesSidebarPane:ni,Events:si,_maxLinkLength:oi,SectionBlock:ri,IdleCallbackManager:li,StylePropertiesSection:ai,BlankStylePropertiesSection:di,KeyframePropertiesSection:hi,quoteFamilyName:ci,CSSPropertyPrompt:ui,unescapeCssString:pi,StylesSidebarPropertyRenderer:mi,ButtonProvider:class{constructor(){this._button=new W.ToolbarButton(i.UIString("New Style Rule"),"largeicon-add"),this._button.addEventListener(W.ToolbarButton.Events.Click,this._clicked,this);const e=B.Icon.create("largeicon-longclick-triangle","long-click-glyph");function t(){let e=M.Context.instance().flavor(p.DOMNode);e=e?e.enclosingElementOrSelf():null,this._button.setEnabled(Boolean(e))}this._button.element.appendChild(e),new k.LongClickController(this._button.element,this._longClicked.bind(this)),M.Context.instance().addFlavorChangeListener(p.DOMNode,t.bind(this)),t.call(this)}_clicked(e){ni.instance()._createNewRuleInViaInspectorStyleSheet()}_longClicked(e){ni.instance()._onAddButtonLongClick(e)}item(){return this._button}}});const gi=(e,t,i,n,s)=>{const o=new et,r=new mi(null,e,t.name,t.value);r.setColorHandler(fi);const l=r.renderValue();l.slot="trace-value",o.appendChild(l);const a=t.ownerStyle.parentRule;if(a){const e=document.createElement("span");e.appendChild(ai.createRuleOriginNode(n,s,a)),e.slot="trace-link",o.appendChild(e)}return o.data={selector:a?a.selectorText():"element.style",active:!i,onNavigateToSource:Ei.bind(null,t)},o},fi=e=>{const t=new ve.ColorSwatch;return t.renderColor(e,!0),t.createChild("span").textContent=e,t},yi=e=>{const t=new ve.ColorSwatch;return t.renderColor(e,s.Format.RGB),t.createChild("span").textContent=e,t},Ei=(e,t)=>{n.reveal(e),t.consume(!0)},vi=(e,t)=>{if(e.startsWith("--")!==t.startsWith("--"))return e.startsWith("--")?1:-1;if(e.startsWith("-webkit")!==t.startsWith("-webkit"))return e.startsWith("-webkit")?1:-1;const i=g.cssMetadata().canonicalPropertyName(e),n=g.cssMetadata().canonicalPropertyName(t);return ce.compare(i,n)};class bi extends P.ThrottledWidget{constructor(){super(!0),this.registerRequiredCSS("elements/computedStyleSidebarPane.css",{enableLegacyPatching:!0}),this._computedStyleModel=new $e,this._computedStyleModel.addEventListener(je.ComputedStyleChanged,this.update,this),this._showInheritedComputedStylePropertiesSetting=r.Settings.instance().createSetting("showInheritedComputedStyleProperties",!1),this._showInheritedComputedStylePropertiesSetting.addChangeListener(this.update.bind(this)),this._groupComputedStylesSetting=r.Settings.instance().createSetting("groupComputedStyles",!1),this._groupComputedStylesSetting.addChangeListener((()=>{this.update()}));const e=this.contentElement.createChild("div","hbox styles-sidebar-pane-toolbar"),t=e.createChild("div","styles-sidebar-pane-filter-box"),n=ni.createPropertyFilterElement(he`Filter`,e,function(e){this._filterRegex=e,this._groupComputedStylesSetting.get()?this._filterGroupLists():this._filterAlphabeticalList()}.bind(this));R.setAccessibleName(n,i.UIString("Filter Computed Styles")),t.appendChild(n),this._filterRegex=null;const s=new W.Toolbar("styles-pane-toolbar",e);s.appendToolbarItem(new W.ToolbarSettingCheckbox(this._showInheritedComputedStylePropertiesSetting,void 0,i.UIString("Show all"))),s.appendToolbarItem(new W.ToolbarSettingCheckbox(this._groupComputedStylesSetting,void 0,i.UIString("Group"))),this._noMatchesElement=this.contentElement.createChild("div","gray-info-message"),this._noMatchesElement.textContent=he`No matching property`,this._propertiesOutline=new A.TreeOutlineInShadow,this._propertiesOutline.hideOverflow(),this._propertiesOutline.setShowSelectionOnKeyboardFocus(!0),this._propertiesOutline.setFocusable(!0),this._propertiesOutline.registerRequiredCSS("elements/computedStyleWidgetTree.css",{enableLegacyPatching:!0}),this._propertiesOutline.element.classList.add("monospace","computed-properties"),this._propertiesOutline.addEventListener(A.Events.ElementExpanded,this._onTreeElementToggled,this),this._propertiesOutline.addEventListener(A.Events.ElementCollapsed,this._onTreeElementToggled,this),this.contentElement.appendChild(this._propertiesOutline.element),this._propertyByTreeElement=new WeakMap,this._categoryByTreeElement=new WeakMap,this._expandedProperties=new Set,this._expandedGroups=new Set(gt),this._linkifier=new ne.Linkifier(Si),this._imagePreviewPopover=new it(this.contentElement,(e=>{const t=e.composedPath()[0];return t instanceof Element?t:null}),(()=>this._computedStyleModel.node()));new st(this._computedStyleModel).show(this.contentElement),this._idleCallbackManager=new li}onResize(){const e=this.contentElement.offsetWidth<260;this._propertiesOutline.contentElement.classList.toggle("computed-narrow",e)}_showInheritedComputedStyleChanged(){this.update()}update(){this._idleCallbackManager&&this._idleCallbackManager.discard(),this._idleCallbackManager=new li,super.update()}async doUpdate(){const[e,t]=await Promise.all([this._computedStyleModel.fetchComputedStyle(),this._fetchMatchedCascade()]),i=this._groupComputedStylesSetting.get();this._propertiesOutline.contentElement.classList.toggle("grouped-list",i),this._propertiesOutline.contentElement.classList.toggle("alphabetical-list",!i),i?await this._rebuildGroupedList(e,t):await this._rebuildAlphabeticalList(e,t)}async _fetchMatchedCascade(){const e=this._computedStyleModel.node();if(!e||!this._computedStyleModel.cssModel())return null;const t=this._computedStyleModel.cssModel();return t?t.cachedMatchedCascadeForNode(e).then(function(e){return e&&e.node()===this._computedStyleModel.node()?e:null}.bind(this)):null}async _rebuildAlphabeticalList(e,t){const i=this._propertiesOutline.element.hasFocus();this._imagePreviewPopover.hide(),this._propertiesOutline.removeChildren(),this._linkifier.reset();const n=this._computedStyleModel.cssModel();if(!e||!t||!n)return void this._noMatchesElement.classList.remove("hidden");const s=[...e.computedStyle.keys()];s.sort(vi);const o=e.node,r=this._computePropertyTraces(t),l=this._computeNonInheritedProperties(t),a=this._showInheritedComputedStylePropertiesSetting.get(),d=[];for(const t of s){const i=e.computedStyle.get(t)||"",n=g.cssMetadata().canonicalPropertyName(t),s=!l.has(n);(a||!s||Ci.has(t))&&(!a&&t.startsWith("--")||t!==n&&i===e.computedStyle.get(n)||d.push({propertyName:t,propertyValue:i,isInherited:s}))}this._propertiesOutline.contentElement.classList.add("render-flash");let h=100;for(;d.length>0;){const e=d.splice(0,20);this._idleCallbackManager.schedule((()=>{for(const{propertyName:n,propertyValue:s,isInherited:l}of e){const e=this._buildPropertyTreeElement(r,o,t,n,s,l,i);this._propertiesOutline.appendChild(e)}this._filterAlphabeticalList()}),h),h+=100}await this._idleCallbackManager.awaitDone(),this._propertiesOutline.contentElement.classList.remove("render-flash")}async _rebuildGroupedList(e,t){const i=this._propertiesOutline.element.hasFocus();this._imagePreviewPopover.hide(),this._propertiesOutline.removeChildren(),this._linkifier.reset();const n=this._computedStyleModel.cssModel();if(!e||!t||!n)return void this._noMatchesElement.classList.remove("hidden");const s=e.node,o=this._computePropertyTraces(t),r=this._computeNonInheritedProperties(t),l=this._showInheritedComputedStylePropertiesSetting.get(),a=new Map;for(const[n,d]of e.computedStyle){const h=g.cssMetadata().canonicalPropertyName(n),c=!r.has(h);if(!l&&c&&!Ci.has(n))continue;if(!l&&n.startsWith("--"))continue;if(n!==h&&d===e.computedStyle.get(h))continue;const u=vt(n);for(const e of u){const r=this._buildPropertyTreeElement(o,s,t,n,d,c,i);a.has(e)||a.set(e,[]),a.get(e).push(r)}}for(const e of gt){const t=a.get(e);if(t&&t.length>0){const i=document.createElement("h1");i.textContent=e;const n=new A.TreeElement(i);n.listItemElement.classList.add("group-title"),n.toggleOnClick=!0;for(const e of t)n.appendChild(e);this._propertiesOutline.appendChild(n),this._expandedGroups.has(e)&&n.expand(),this._categoryByTreeElement.set(n,e)}}this._filterGroupLists()}_onTreeElementToggled(e){const t=e.data,i=this._propertyByTreeElement.get(t);if(i)t.expanded?this._expandedProperties.add(i.name):this._expandedProperties.delete(i.name);else{const e=this._categoryByTreeElement.get(t);e&&(t.expanded?this._expandedGroups.add(e):this._expandedGroups.delete(e))}}_buildPropertyTreeElement(e,t,i,n,s,o,r){const l=new A.TreeElement,a=e.get(n);let d=()=>{};if(a){const e=this._renderPropertyTrace(i,t,l,a);l.setExpandable(!0),l.listItemElement.addEventListener("click",(e=>{l.expanded?l.collapse():l.expand(),e.consume()}),!1),d=Ei.bind(this,e)}const h=((e,t,i)=>{const n=new Ye,s=new mi(null,e,t,i);s.setColorHandler(yi);const o=s.renderName();o.slot="property-name",n.appendChild(o);const r=s.renderValue();return r.slot="property-value",n.appendChild(r),n})(t,n,s);return h.data={traceable:e.has(n),inherited:o,onNavigateToSource:d},l.title=h,this._propertyByTreeElement.set(l,{name:n,value:s}),this._propertiesOutline.selectedTreeElement||l.select(!r),this._expandedProperties.has(n)&&l.expand(),l}_renderPropertyTrace(e,t,i,n){let s=null;for(const o of n){const n=e.propertyState(o)===y.PropertyState.Overloaded;n||(s=o,i.listItemElement.addEventListener("contextmenu",this._handleContextMenuEvent.bind(this,e,o)));const r=gi(t,o,n,e,this._linkifier),l=new A.TreeElement;l.title=r,l.listItemElement.addEventListener("contextmenu",this._handleContextMenuEvent.bind(this,e,o)),i.appendChild(l)}return s}_handleContextMenuEvent(e,t,i){const s=new U.ContextMenu(i),o=t.ownerStyle.parentRule;if(o){const t=o.styleSheetId?e.cssModel().styleSheetHeaderForId(o.styleSheetId):null;t&&!t.isAnonymousInlineStyleSheet()&&s.defaultSection().appendItem(he`Navigate to selector source`,(()=>{ai.tryNavigateToRuleLocation(e,o)}))}s.defaultSection().appendItem(he`Navigate to style`,(()=>n.reveal(t))),s.show()}_computePropertyTraces(e){const t=new Map;for(const i of e.nodeStyles()){const n=i.allProperties();for(const i of n)i.activeInStyle()&&e.propertyState(i)&&(t.has(i.name)||t.set(i.name,[]),t.get(i.name).push(i))}return t}_computeNonInheritedProperties(e){const t=new Set;for(const i of e.nodeStyles())for(const n of i.allProperties())e.propertyState(n)&&t.add(g.cssMetadata().canonicalPropertyName(n.name));return t}_filterAlphabeticalList(){const e=this._filterRegex,t=this._propertiesOutline.rootElement().children();let i=!1;for(const n of t){const t=this._propertyByTreeElement.get(n);if(!t)continue;const s=!e||e.test(t.name)||e.test(t.value);n.hidden=!s,i=i||s}this._noMatchesElement.classList.toggle("hidden",Boolean(i))}_filterGroupLists(){const e=this._filterRegex,t=this._propertiesOutline.rootElement().children();let i=!1,n=!1;for(const s of t){let t=!1;const o=s.children();for(const n of o){const s=this._propertyByTreeElement.get(n);if(!s)continue;const o=!e||e.test(s.name)||e.test(s.value);n.hidden=!o,i=i||o,t=t||o}s.hidden=!t,s.listItemElement.classList.toggle("first-group",t&&!n),n=n||t}this._noMatchesElement.classList.toggle("hidden",i)}}const Si=30,Ci=new Set(["display","height","width"]);var wi=Object.freeze({__proto__:null,ComputedStyleWidget:bi});const{render:xi,html:Ti}=pe;class Ni extends HTMLElement{constructor(){super(...arguments),this.shadow=this.attachShadow({mode:"open"}),this.nodeTitle="",this.nodeId="",this.nodeClasses=[]}set data(e){this.nodeTitle=e.nodeTitle,this.nodeId=e.nodeId,this.nodeClasses=e.nodeClasses,this.render()}render(){const e=Boolean(this.nodeId),t=Boolean(this.nodeClasses&&this.nodeClasses.length>0),i=[Ti`<span class="node-label-name">${this.nodeTitle}</span>`];if(this.nodeId){const e=ge.classMap({"node-label-id":!0,"node-multiple-descriptors":t});i.push(Ti`<span class=${e}>#${CSS.escape(this.nodeId)}</span>`)}if(this.nodeClasses&&this.nodeClasses.length>0){const t=this.nodeClasses.map((e=>"."+CSS.escape(e))).join(""),n=ge.classMap({"node-label-class":!0,"node-multiple-descriptors":e});i.push(Ti`<span class=${n}>${t}</span>`)}xi(Ti`
+      <style>
+        .node-label-name {
+          color: var(--node-text-label-color, --dom-tag-name-color);
+        }
+
+        .node-label-class {
+          color: var(--node-text-class-color, --dom-attribute-name-color);
+        }
+
+        .node-label-id {
+          color: var(--node-text-id-color);
+        }
+
+        .node-label-class.node-multiple-descriptors {
+          color: var(--node-text-multiple-descriptors-class, var(--node-text-class-color, --dom-attribute-name-color));
+        }
+
+        .node-label-id.node-multiple-descriptors {
+          color: var(--node-text-multiple-descriptors-id, var(--node-text-id-color, --dom-attribute-name-color));
+        }
+      </style>
+      ${i}
+    `,this.shadow,{eventContext:this})}}customElements.get("devtools-node-text")||customElements.define("devtools-node-text",Ni);var Mi=Object.freeze({__proto__:null,NodeText:Ni});const Oi=(e,t)=>t?e.filter((e=>e.nodeType!==Node.DOCUMENT_NODE)).map((e=>({title:Ii(e),selected:e.id===t.id,node:e,originalNode:e.legacyDomNode}))).reverse():[],Pi=(e,t={})=>({main:e,extras:t});class Li extends Event{constructor(e){super("node-selected",{}),this.data=e.legacyDomNode}}const Ii=e=>{switch(e.nodeType){case Node.ELEMENT_NODE:{if(e.pseudoType)return Pi("::"+e.pseudoType);const t=Pi(e.nodeNameNicelyCased),i=e.getAttribute("id");i&&(t.extras.id=i);const n=e.getAttribute("class");if(n){const e=new Set(n.split(/\s+/));t.extras.classes=Array.from(e)}return t}case Node.TEXT_NODE:return Pi(he`(text)`);case Node.COMMENT_NODE:return Pi("\x3c!--\x3e");case Node.DOCUMENT_TYPE_NODE:return Pi("<!doctype>");case Node.DOCUMENT_FRAGMENT_NODE:return Pi(e.shadowRootType?"#shadow-root":e.nodeNameNicelyCased);default:return Pi(e.nodeNameNicelyCased)}};var ki=Object.freeze({__proto__:null,crumbsToRender:Oi,NodeSelectedEvent:Li,determineElementTitle:Ii});class Di extends HTMLElement{constructor(){super(...arguments),this.shadow=this.attachShadow({mode:"open"}),this.resizeObserver=new ResizeObserver((()=>this.checkForOverflowOnResize())),this.crumbsData=[],this.selectedDOMNode=null,this.overflowing=!1,this.userScrollPosition="start",this.isObservingResize=!1,this.userHasManuallyScrolled=!1}set data(e){this.selectedDOMNode=e.selectedNode,this.crumbsData=e.crumbs,this.userHasManuallyScrolled=!1,this.update()}disconnectedCallback(){this.isObservingResize=!1,this.resizeObserver.disconnect()}onCrumbClick(e){return t=>{t.preventDefault(),this.dispatchEvent(new Li(e))}}checkForOverflowOnResize(){const e=this.shadow.querySelector(".crumbs"),t=this.shadow.querySelector(".crumbs-scroll-container");if(!e||!t)return;const i=e.clientWidth,n=t.clientWidth;n>=i&&!1===this.overflowing?(this.overflowing=!0,this.userScrollPosition="start",this.render()):n<i&&!0===this.overflowing&&(this.overflowing=!1,this.userScrollPosition="start",this.render())}update(){this.render(),this.engageResizeObserver(),this.ensureSelectedNodeIsVisible()}onCrumbMouseMove(e){return()=>e.highlightNode()}onCrumbMouseLeave(e){return()=>e.clearHighlight()}onCrumbFocus(e){return()=>e.highlightNode()}onCrumbBlur(e){return()=>e.clearHighlight()}engageResizeObserver(){if(!this.resizeObserver||!0===this.isObservingResize)return;const e=this.shadow.querySelector(".crumbs");e&&(this.resizeObserver.observe(e),this.isObservingResize=!0)}checkForOverflow(){if(this.overflowing)return;const e=this.shadow.querySelector(".crumbs-scroll-container"),t=this.shadow.querySelector(".crumbs-window");if(!e||!t)return;const i=t.clientWidth-20;e.clientWidth<i||(this.overflowing=!0,this.render())}onCrumbsWindowScroll(e){if(!e.target)return;const t=e.target;this.updateScrollState(t)}updateScrollState(e){const t=e.scrollWidth-e.clientWidth,i=e.scrollLeft;this.userScrollPosition=i<10?"start":i>=t-10?"end":"middle",this.render()}onOverflowClick(e){return()=>{this.userHasManuallyScrolled=!0;const t=this.shadow.querySelector(".crumbs-window");if(!t)return;const i=t.clientWidth/2,n="left"===e?Math.max(Math.floor(t.scrollLeft-i),0):t.scrollLeft+i;t.scrollTo({behavior:"smooth",left:n})}}renderOverflowButton(e,t){const i=ge.classMap({overflow:!0,[e]:!0,hidden:!1===this.overflowing});return me`
+      <button
+        class=${i}
+        @click=${this.onOverflowClick(e)}
+        ?disabled=${t}
+        aria-label="Scroll ${e}"
+      >&hellip;</button>
+      `}render(){const e=Oi(this.crumbsData,this.selectedDOMNode);_e(me`
+      <style>
+        :host {
+          --node-text-label-color: var(--color-syntax-2);
+          --node-text-class-color: var(--color-syntax-4);
+          --node-text-id-color: var(--color-syntax-4);
+          --node-text-multiple-descriptors-id: var(--color-syntax-7);
+        }
+
+        .crumbs {
+          display: inline-flex;
+          align-items: stretch;
+          width: 100%;
+          overflow: hidden;
+          pointer-events: auto;
+          cursor: default;
+          white-space: nowrap;
+          position: relative;
+          background: var(--color-background);
+        }
+
+        .crumbs-window {
+          flex-grow: 2;
+          overflow: hidden;
+        }
+
+        .crumbs-scroll-container {
+          display: inline-flex;
+          margin: 0;
+          padding: 0;
+        }
+
+        .crumb {
+          display: block;
+          padding: 0 7px;
+          line-height: 23px;
+          white-space: nowrap;
+        }
+
+        .overflow {
+          padding: 0 7px;
+          font-weight: bold;
+          display: block;
+          border: none;
+          flex-grow: 0;
+          flex-shrink: 0;
+          text-align: center;
+          background-color: var(--color-background-elevation-1);
+          color: var(--color-text-secondary);
+        }
+
+        .overflow.hidden {
+          display: none;
+        }
+
+        .overflow:disabled {
+          opacity: 50%;
+        }
+
+        .overflow:focus {
+          outline: var(--color-primary) auto 1px;
+        }
+
+        .overflow:not(:disabled):hover {
+          background-color: var(--color-background-elevation-2);
+          color: var(--color-text-primary);
+          cursor: pointer;
+        }
+
+        .crumb-link {
+          text-decoration: none;
+          color: inherit;
+        }
+
+        .crumb:hover {
+          background: var(--color-background-elevation-2);
+        }
+
+        .crumb.selected {
+          background: var(--color-background-elevation-1);
+        }
+
+        .crumb:focus {
+          outline: var(--color-primary) auto 1px;
+        }
+      </style>
+
+      <nav class="crumbs">
+        ${this.renderOverflowButton("left","start"===this.userScrollPosition)}
+
+        <div class="crumbs-window" @scroll=${this.onCrumbsWindowScroll}>
+          <ul class="crumbs-scroll-container">
+            ${e.map((e=>{const t={crumb:!0,selected:e.selected};return me`
+                <li class=${ge.classMap(t)}
+                  data-node-id=${e.node.id}
+                  data-crumb="true"
+                >
+                  <a href="#"
+                    draggable=false
+                    class="crumb-link"
+                    @click=${this.onCrumbClick(e.node)}
+                    @mousemove=${this.onCrumbMouseMove(e.node)}
+                    @mouseleave=${this.onCrumbMouseLeave(e.node)}
+                    @focus=${this.onCrumbFocus(e.node)}
+                    @blur=${this.onCrumbBlur(e.node)}
+                  ><devtools-node-text data-node-title=${e.title.main} .data=${{nodeTitle:e.title.main,nodeId:e.title.extras.id,nodeClasses:e.title.extras.classes}}></devtools-node-text></a>
+                </li>`}))}
+          </ul>
+        </div>
+        ${this.renderOverflowButton("right","end"===this.userScrollPosition)}
+      </nav>
+    `,this.shadow,{eventContext:this}),this.checkForOverflow()}ensureSelectedNodeIsVisible(){if(!this.selectedDOMNode||!this.shadow||!this.overflowing||this.userHasManuallyScrolled)return;const e=this.selectedDOMNode.id,t=this.shadow.querySelector(`.crumb[data-node-id="${e}"]`);t&&t.scrollIntoView({behavior:"smooth"})}}customElements.get("devtools-elements-breadcrumbs")||customElements.define("devtools-elements-breadcrumbs",Di);var Ri=Object.freeze({__proto__:null,ElementsBreadcrumbs:Di});const Ai=d,Fi={Security:"Security",Layout:"Layout",Default:"Default"};Object.freeze(Fi);const Bi=document.createElement("template");Bi.innerHTML='\n  <style>\n    :host {\n      display: inline-flex;\n    }\n\n    :host(.hidden) {\n      display: none;\n    }\n\n    :host(.clickable) {\n      cursor: pointer;\n    }\n\n    :host(:focus) slot {\n      border: var(--adorner-border-focus, 1px solid #1a73e8);\n    }\n\n    :host([aria-pressed=true]) slot {\n      color: var(--adorner-text-color-active, #ffffff);\n      background-color: var(--adorner-background-color-active, #1a73e8);\n    }\n\n    slot {\n      display: inline-flex;\n      box-sizing: border-box;\n      height: 13px;\n      line-height: 13px;\n      padding: 0 6px;\n      font-size: 8.5px;\n      color: var(--adorner-text-color, #3c4043);\n      background-color: var(--adorner-background-color, #f1f3f4);\n      border: var(--adorner-border, 1px solid #dadce0);\n      border-radius: var(--adorner-border-radius, 10px);\n    }\n\n    ::slotted(*) {\n      height: 10px;\n    }\n  </style>\n  <slot name="content"></slot>\n';class Hi extends HTMLElement{static create(e,t,i={}){const{category:n=Fi.Default}=i,s=document.createElement("devtools-adorner");return e.slot="content",s.append(e),s.name=t,s.category=n,s}constructor(){super();this.attachShadow({mode:"open"}).appendChild(Bi.content.cloneNode(!0)),this.name="",this.category=Fi.Default,this._isToggle=!1,this._ariaLabelDefault=Ai`adorner`,this._ariaLabelActive=Ai`adorner active`}connectedCallback(){this.getAttribute("aria-label")||R.setAccessibleName(this,Ai`${this.name} adorner`)}isActive(){return"true"===this.getAttribute("aria-pressed")}toggle(e){if(!this._isToggle)return;const t=void 0===e?!this.isActive():e;R.setPressed(this,t),R.setAccessibleName(this,t?this._ariaLabelActive:this._ariaLabelDefault)}show(){this.classList.remove("hidden")}hide(){this.classList.add("hidden")}addInteraction(e,t={}){const{isToggle:i=!1,shouldPropagateOnKeydown:n=!1,ariaLabelDefault:s,ariaLabelActive:o}=t;this._isToggle=i,s&&(this._ariaLabelDefault=s,R.setAccessibleName(this,s)),i&&(this.addEventListener("click",(()=>{this.toggle()})),o&&(this._ariaLabelActive=o),this.toggle(!1)),this.addEventListener("click",e),this.classList.add("clickable"),R.markAsButton(this),this.tabIndex=0,this.addEventListener("keydown",(e=>{"Enter"!==e.code&&"Space"!==e.code||(this.click(),n||e.stopPropagation())}))}}self.customElements.define("devtools-adorner",Hi);var Ui=Object.freeze({__proto__:null,AdornerCategories:Fi,Adorner:Hi});const Vi=function(e,t){if(e.nodeType()!==Node.ELEMENT_NODE)return"";const i=[];let n=e;for(;n;){const s=$i(n,Boolean(t),n===e);if(!s)break;if(i.push(s),s.optimized)break;n=n.parentNode}return i.reverse(),i.join(" > ")},Wi=function(e){let t=e;for(;t;){const e=t.ancestorShadowRoot();if(e&&e.shadowRootType()!==p.DOMNode.ShadowRootTypes.Open)return!1;t=t.ancestorShadowHost()}return!0},zi=function(e,t){if(e.nodeType()!==Node.ELEMENT_NODE)return"";const i=[];let n=e;for(;n;)i.push(Vi(n,t)),n=n.ancestorShadowHost();i.reverse();let s="";for(let e=0;e<i.length;++e){const t=JSON.stringify(i[e]);s+=e?`.shadowRoot.querySelector(${t})`:`document.querySelector(${t})`}return s},$i=function(e,t,i){if(e.nodeType()!==Node.ELEMENT_NODE)return null;const n=e.getAttribute("id");if(t){if(n)return new qi(l(n),!0);const t=e.nodeName().toLowerCase();if("body"===t||"head"===t||"html"===t)return new qi(e.nodeNameInCorrectCase(),!0)}const s=e.nodeNameInCorrectCase();if(n)return new qi(s+l(n),!0);const o=e.parentNode;if(!o||o.nodeType()===Node.DOCUMENT_NODE)return new qi(s,!0);function r(e){const t=e.getAttribute("class");return t?t.split(/\s+/g).filter(Boolean).map((function(e){return"$"+e})):[]}function l(e){return"#"+CSS.escape(e)}const a=r(e);let d=!1,h=!1,c=-1,u=-1;const p=o.children();for(let t=0;p&&(-1===c||!h)&&t<p.length;++t){const i=p[t];if(i.nodeType()!==Node.ELEMENT_NODE)continue;if(u+=1,i===e){c=u;continue}if(h)continue;if(i.nodeNameInCorrectCase()!==s)continue;d=!0;const n=new Set(a);if(!n.size){h=!0;continue}const o=r(i);for(let e=0;e<o.length;++e){const t=o[e];if(n.has(t)&&(n.delete(t),!n.size)){h=!0;break}}}let m=s;if(i&&"input"===s.toLowerCase()&&e.getAttribute("type")&&!e.getAttribute("id")&&!e.getAttribute("class")&&(m+="[type="+CSS.escape(e.getAttribute("type")||"")+"]"),h)m+=":nth-child("+(c+1)+")";else if(d)for(const e of a)m+="."+CSS.escape(e.slice(1));return new qi(m,!1)},ji=function(e,t){if(e.nodeType()===Node.DOCUMENT_NODE)return"/";const i=[];let n=e;for(;n;){const e=Gi(n,t);if(!e)break;if(i.push(e),e.optimized)break;n=n.parentNode}return i.reverse(),(i.length&&i[0].optimized?"":"/")+i.join("/")},Gi=function(e,t){let i;const n=Ki(e);if(-1===n)return null;switch(e.nodeType()){case Node.ELEMENT_NODE:if(t&&e.getAttribute("id"))return new qi('//*[@id="'+e.getAttribute("id")+'"]',!0);i=e.localName();break;case Node.ATTRIBUTE_NODE:i="@"+e.nodeName();break;case Node.TEXT_NODE:case Node.CDATA_SECTION_NODE:i="text()";break;case Node.PROCESSING_INSTRUCTION_NODE:i="processing-instruction()";break;case Node.COMMENT_NODE:i="comment()";break;case Node.DOCUMENT_NODE:default:i=""}return n>0&&(i+="["+n+"]"),new qi(i,e.nodeType()===Node.DOCUMENT_NODE)},Ki=function(e){function t(e,t){if(e===t)return!0;if(e.nodeType()===Node.ELEMENT_NODE&&t.nodeType()===Node.ELEMENT_NODE)return e.localName()===t.localName();if(e.nodeType()===t.nodeType())return!0;return(e.nodeType()===Node.CDATA_SECTION_NODE?Node.TEXT_NODE:e.nodeType())===(t.nodeType()===Node.CDATA_SECTION_NODE?Node.TEXT_NODE:t.nodeType())}const i=e.parentNode?e.parentNode.children():null;if(!i)return 0;let n;for(let s=0;s<i.length;++s)if(t(e,i[s])&&i[s]!==e){n=!0;break}if(!n)return 0;let s=1;for(let n=0;n<i.length;++n)if(t(e,i[n])){if(i[n]===e)return s;++s}return-1};class qi{constructor(e,t){this.value=e,this.optimized=t||!1}toString(){return this.value}}var Xi=Object.freeze({__proto__:null,fullQualifiedSelector:function(e,t){return e.nodeType()!==Node.ELEMENT_NODE?e.localName()||e.nodeName().toLowerCase():Vi(e,t)},cssPath:Vi,canGetJSPath:Wi,jsPath:zi,_cssPathStep:$i,xPath:ji,_xPathValue:Gi,_xPathIndex:Ki,Step:qi});const Yi=new WeakMap,Qi=new Set;class Ji extends A.TreeOutline{constructor(e,t,n){super(),this.treeElementByNode=new WeakMap;const s=document.createElement("div");this._shadowRoot=D.createShadowRootWithCoreStyles(s,{cssFile:"elements/elementsTreeOutline.css",enableLegacyPatching:!0,delegatesFocus:void 0});const o=this._shadowRoot.createChild("div","elements-disclosure");this._element=this.element,this._element.classList.add("elements-tree-outline","source-code"),n&&this._element.classList.add("elements-hide-gutter"),R.setAccessibleName(this._element,i.UIString("Page DOM")),this._element.addEventListener("focusout",this._onfocusout.bind(this),!1),this._element.addEventListener("mousedown",this._onmousedown.bind(this),!1),this._element.addEventListener("mousemove",this._onmousemove.bind(this),!1),this._element.addEventListener("mouseleave",this._onmouseleave.bind(this),!1),this._element.addEventListener("dragstart",this._ondragstart.bind(this),!1),this._element.addEventListener("dragover",this._ondragover.bind(this),!1),this._element.addEventListener("dragleave",this._ondragleave.bind(this),!1),this._element.addEventListener("drop",this._ondrop.bind(this),!1),this._element.addEventListener("dragend",this._ondragend.bind(this),!1),this._element.addEventListener("contextmenu",this._contextMenuEventFired.bind(this),!1),this._element.addEventListener("clipboard-beforecopy",this._onBeforeCopy.bind(this),!1),this._element.addEventListener("clipboard-copy",this._onCopyOrCut.bind(this,!1),!1),this._element.addEventListener("clipboard-cut",this._onCopyOrCut.bind(this,!0),!1),this._element.addEventListener("clipboard-paste",this._onPaste.bind(this),!1),this._element.addEventListener("keydown",this._onKeyDown.bind(this),!1),o.appendChild(this._element),this.element=s,this._includeRootDOMNode=!e,this._selectEnabled=t,this._rootDOMNode=null,this._selectedDOMNode=null,this._visible=!1,this._imagePreviewPopover=new it(this.contentElement,(e=>{let t=e.target;for(;t&&!it.getImageURL(t);)t=t.parentElementOrShadowHost();return t}),(e=>{const t=k.enclosingNodeOrSelfWithNodeName(e,"li");if(!t)return null;const i=A.TreeElement.getTreeElementBylistItemNode(t);return i?i.node():null})),this._updateRecords=new Map,this._treeElementsBeingUpdated=new Set,this.decoratorExtensions=null,this._showHTMLCommentsSetting=r.Settings.instance().moduleSetting("showHTMLComments"),this._showHTMLCommentsSetting.addChangeListener(this._onShowHTMLCommentsChange.bind(this)),this.useLightSelectionColor()}static forDOMModel(e){return Yi.get(e)||null}_onShowHTMLCommentsChange(){const e=this.selectedDOMNode();e&&e.nodeType()===Node.COMMENT_NODE&&!this._showHTMLCommentsSetting.get()&&this.selectDOMNode(e.parentNode),this.update()}setWordWrap(e){this._element.classList.toggle("elements-tree-nowrap",!e)}setMultilineEditing(e){this._multilineEditing=e}visibleWidth(){return this._visibleWidth||0}setVisibleWidth(e){this._visibleWidth=e,this._multilineEditing&&this._multilineEditing.resize()}_setClipboardData(e){if(this._clipboardNodeData){const e=this.findTreeElement(this._clipboardNodeData.node);e&&e.setInClipboard(!1),delete this._clipboardNodeData}if(e){const t=this.findTreeElement(e.node);t&&t.setInClipboard(!0),this._clipboardNodeData=e}}resetClipboardIfNeeded(e){this._clipboardNodeData&&this._clipboardNodeData.node===e&&this._setClipboardData(null)}_onBeforeCopy(e){e.handled=!0}_onCopyOrCut(e,t){this._setClipboardData(null);const i=t.original;if(!i||!i.target)return;if(i.target instanceof Node&&i.target.hasSelection())return;if(k.isEditing())return;const n=this.selectedDOMNode();n&&i.clipboardData&&(i.clipboardData.clearData(),t.handled=!0,this.performCopyOrCut(e,n))}performCopyOrCut(e,t){t&&(e&&(t.isShadowRoot()||t.ancestorUserAgentShadowRoot())||(t.copyNode(),this._setClipboardData({node:t,isCut:e})))}canPaste(e){if(e.isShadowRoot()||e.ancestorUserAgentShadowRoot())return!1;if(!this._clipboardNodeData)return!1;const t=this._clipboardNodeData.node;return(!this._clipboardNodeData.isCut||t!==e&&!t.isAncestor(e))&&e.domModel()===t.domModel()}pasteNode(e){this.canPaste(e)&&this._performPaste(e)}duplicateNode(e){this._performDuplicate(e)}_onPaste(e){if(k.isEditing())return;const t=this.selectedDOMNode();t&&this.canPaste(t)&&(e.handled=!0,this._performPaste(t))}_performPaste(e){function t(e,t){!e&&t&&this.selectDOMNode(t)}this._clipboardNodeData&&(this._clipboardNodeData.isCut?(this._clipboardNodeData.node.moveTo(e,null,t.bind(this)),this._setClipboardData(null)):this._clipboardNodeData.node.copyTo(e,null,t.bind(this)))}_performDuplicate(e){if(e.isInShadowTree())return;const t=e.parentNode?e.parentNode:e;"#document"!==t.nodeName()&&e.copyTo(t,e.nextSibling)}setVisible(e){if(e!==this._visible){if(this._visible=e,!this._visible)return this._imagePreviewPopover.hide(),void(this._multilineEditing&&this._multilineEditing.cancel());this.runPendingUpdates(),this._selectedDOMNode&&this._revealAndSelectNode(this._selectedDOMNode,!1)}}get rootDOMNode(){return this._rootDOMNode}set rootDOMNode(e){this._rootDOMNode!==e&&(this._rootDOMNode=e,this._isXMLMimeType=e&&e.isXMLNode(),this.update())}get isXMLMimeType(){return this._isXMLMimeType}selectedDOMNode(){return this._selectedDOMNode}selectDOMNode(e,t){this._selectedDOMNode!==e?(this._selectedDOMNode=e,this._revealAndSelectNode(e,!t),this._selectedDOMNode===e&&this._selectedNodeChanged(Boolean(t))):this._revealAndSelectNode(e,!t)}editing(){const e=this.selectedDOMNode();if(!e)return!1;const t=this.findTreeElement(e);return t&&t.isEditing()||!1}update(){const e=this.selectedDOMNode();if(this.removeChildren(),this.rootDOMNode){if(this._includeRootDOMNode){const e=this._createElementTreeElement(this.rootDOMNode);this.appendChild(e)}else{const e=this._visibleChildren(this.rootDOMNode);for(const t of e){const e=this._createElementTreeElement(t);this.appendChild(e)}}e&&this._revealAndSelectNode(e,!0)}}_selectedNodeChanged(e){this.dispatchEventToListeners(Ji.Events.SelectedNodeChanged,{node:this._selectedDOMNode,focus:e})}_fireElementsTreeUpdated(e){this.dispatchEventToListeners(Ji.Events.ElementsTreeUpdated,e)}findTreeElement(e){let t=this._lookUpTreeElement(e);return t||e.nodeType()!==Node.TEXT_NODE||(t=this._lookUpTreeElement(e.parentNode)),t}_lookUpTreeElement(e){if(!e)return null;const t=this.treeElementByNode.get(e);if(t)return t;const i=[];let n;for(n=e.parentNode;n&&(i.push(n),!this.treeElementByNode.has(n));n=n.parentNode);if(!n)return null;for(let t=i.length-1;t>=0;--t){const n=i[t-1]||e,s=this.treeElementByNode.get(i[t]);s&&(s.onpopulate(),n.index&&n.index>=s.expandedChildrenLimit()&&this.setExpandedChildrenLimit(s,n.index+1))}return this.treeElementByNode.get(e)||null}createTreeElementFor(e){let t=this.findTreeElement(e);return t||(e.parentNode?(t=this.createTreeElementFor(e.parentNode),t?this._showChild(t,e):null):null)}set suppressRevealAndSelect(e){this._suppressRevealAndSelect!==e&&(this._suppressRevealAndSelect=e)}_revealAndSelectNode(e,t){if(this._suppressRevealAndSelect)return;if(!this._includeRootDOMNode&&e===this.rootDOMNode&&this.rootDOMNode&&(e=this.rootDOMNode.firstChild),!e)return;const i=this.createTreeElementFor(e);i&&i.revealAndSelect(t)}_treeElementFromEvent(e){const t=this.element.parentElement;if(!t)return null;const i=t.totalOffsetLeft()+t.offsetWidth-36,n=e.pageY,s=this.treeElementFromPoint(i,n);let o;return o=s===this.treeElementFromPoint(i,n-2)?s:this.treeElementFromPoint(i,n+2),o}_onfocusout(e){f.OverlayModel.hideDOMNodeHighlight()}_onmousedown(e){const t=this._treeElementFromEvent(e);t&&!t.isEventWithinDisclosureTriangle(e)&&t.select()}setHoverEffect(e){this._previousHoveredElement!==e&&(this._previousHoveredElement instanceof rn&&(this._previousHoveredElement.hovered=!1,delete this._previousHoveredElement),e instanceof rn&&(e.hovered=!0,this._previousHoveredElement=e))}_onmousemove(e){const t=this._treeElementFromEvent(e);t&&this._previousHoveredElement===t||(this.setHoverEffect(t),this._highlightTreeElement(t,!H.KeyboardShortcut.eventHasCtrlOrMeta(e)))}_highlightTreeElement(e,t){e instanceof rn?e.node().domModel().overlayModel().highlightInOverlay({node:e.node(),selectorList:void 0},"all",t):e instanceof tn&&e.domModel().overlayModel().highlightInOverlay({deferredNode:e.deferredNode(),selectorList:void 0},"all",t)}_onmouseleave(e){this.setHoverEffect(null),f.OverlayModel.hideDOMNodeHighlight()}_ondragstart(e){const t=e.target;if(!t||t.hasSelection())return!1;if("A"===t.nodeName)return!1;const i=this._validDragSourceOrTarget(this._treeElementFromEvent(e));return!!i&&("BODY"!==i.node().nodeName()&&"HEAD"!==i.node().nodeName()&&(e.dataTransfer&&i.listItemElement.textContent?(e.dataTransfer.setData("text/plain",i.listItemElement.textContent.replace(/\u200b/g,"")),e.dataTransfer.effectAllowed="copyMove",this._treeElementBeingDragged=i,f.OverlayModel.hideDOMNodeHighlight(),!0):void 0))}_ondragover(e){if(!this._treeElementBeingDragged)return!1;const t=this._validDragSourceOrTarget(this._treeElementFromEvent(e));if(!t)return!1;let i=t.node();for(;i;){if(i===this._treeElementBeingDragged._node)return!1;i=i.parentNode}return t.listItemElement.classList.add("elements-drag-over"),this._dragOverTreeElement=t,e.preventDefault(),e.dataTransfer&&(e.dataTransfer.dropEffect="move"),!1}_ondragleave(e){return this._clearDragOverTreeElementMarker(),e.preventDefault(),!1}_validDragSourceOrTarget(e){if(!e)return null;if(!(e instanceof rn))return null;const t=e,i=t.node();return i.parentNode&&i.parentNode.nodeType()===Node.ELEMENT_NODE?t:null}_ondrop(e){e.preventDefault();const t=this._treeElementFromEvent(e);t instanceof rn&&this._doMove(t)}_doMove(e){if(!this._treeElementBeingDragged)return;let t,i;if(e.isClosingTag())t=e.node();else{const n=e.node();t=n.parentNode,i=n}if(!t||!i)return;const n=this._treeElementBeingDragged.expanded;this._treeElementBeingDragged._node.moveTo(t,i,this.selectNodeAfterEdit.bind(this,n)),delete this._treeElementBeingDragged}_ondragend(e){e.preventDefault(),this._clearDragOverTreeElementMarker(),delete this._treeElementBeingDragged}_clearDragOverTreeElementMarker(){this._dragOverTreeElement&&(this._dragOverTreeElement.listItemElement.classList.remove("elements-drag-over"),delete this._dragOverTreeElement)}_contextMenuEventFired(e){const t=this._treeElementFromEvent(e);t instanceof rn&&this.showContextMenu(t,e)}showContextMenu(e,t){if(k.isEditing())return;const i=new U.ContextMenu(t),n=Boolean(e.node().pseudoType()),s=e.node().nodeType()===Node.ELEMENT_NODE&&!n,o=t.target;if(!o)return;let r=o.enclosingNodeOrSelfWithClass("webkit-html-text-node");r&&r.classList.contains("bogus")&&(r=null);const l=o.enclosingNodeOrSelfWithClass("webkit-html-comment");i.saveSection().appendItem(he`Store as global variable`,this._saveNodeToTempVariable.bind(this,e.node())),r?e.populateTextContextMenu(i,r):s?e.populateTagContextMenu(i,t):l?e.populateNodeContextMenu(i):n&&e.populateScrollIntoView(i),i.appendApplicableItems(e.node()),i.show()}async _saveNodeToTempVariable(e){const t=await e.resolveToObject();await C.ConsoleModel.instance().saveToTempVariable(M.Context.instance().flavor(w.ExecutionContext),t)}runPendingUpdates(){this._updateModifiedNodes()}_onKeyDown(e){const t=e;if(k.isEditing())return;const i=this.selectedDOMNode();if(!i)return;const n=this.treeElementByNode.get(i);if(n&&H.KeyboardShortcut.eventHasCtrlOrMeta(t)&&i.parentNode){if("ArrowUp"===t.key&&i.previousSibling)return i.moveTo(i.parentNode,i.previousSibling,this.selectNodeAfterEdit.bind(this,n.expanded)),void t.consume(!0);if("ArrowDown"===t.key&&i.nextSibling)return i.moveTo(i.parentNode,i.nextSibling.nextSibling,this.selectNodeAfterEdit.bind(this,n.expanded)),void t.consume(!0)}}toggleEditAsHTML(e,t,i){const n=this.treeElementByNode.get(e);if(!n||!n.hasEditableNode())return;if(e.pseudoType())return;const s=e.parentNode,o=e.index,r=n.expanded;n.toggleEditAsHTML(function(e){i&&i();if(!e)return;if(this.runPendingUpdates(),!o)return;const t=s&&s.children(),n=t&&t[o]||s;if(!n)return;if(this.selectDOMNode(n,!0),r){const e=this.findTreeElement(n);e&&e.expand()}}.bind(this),t)}selectNodeAfterEdit(e,t,i){if(t)return null;if(this.runPendingUpdates(),!i)return null;this.selectDOMNode(i,!0);const n=this.findTreeElement(i);return e&&n&&n.expand(),n}async toggleHideElement(e){const t=e.pseudoType(),i=t?e.parentNode:e;if(!i)return;const n=e.marker("hidden-marker"),s=await i.resolveToObject("");s&&(await s.callFunction((function(e,t){const i="__web-inspector-hide-shortcut-style__",n=[];n.push(".__web-inspector-hide-shortcut__"),n.push(".__web-inspector-hide-shortcut__ *"),n.push(".__web-inspector-hidebefore-shortcut__::before"),n.push(".__web-inspector-hideafter-shortcut__::after");const s=n.join(", "),o="\n"+s+"\n{\n    visibility: hidden !important;\n}\n",r="__web-inspector-hide"+(e||"")+"-shortcut__";this.classList.toggle(r,t);let l=this;for(;l.parentNode;)l=l.parentNode;l.nodeType===Node.DOCUMENT_NODE&&(l=document.head);let a=l.querySelector("style#"+i);if(a)return;a=document.createElement("style"),a.id=i,a.textContent=o,l.appendChild(a)}),[{value:t},{value:!n}]),s.release(),e.setMarker("hidden-marker",!n||null))}isToggledToHidden(e){return Boolean(e.marker("hidden-marker"))}_reset(){this.rootDOMNode=null,this.selectDOMNode(null,!1),this._imagePreviewPopover.hide(),delete this._clipboardNodeData,f.OverlayModel.hideDOMNodeHighlight(),this._updateRecords.clear()}wireToDOMModel(e){Yi.set(e,this),e.addEventListener(p.Events.MarkersChanged,this._markersChanged,this),e.addEventListener(p.Events.NodeInserted,this._nodeInserted,this),e.addEventListener(p.Events.NodeRemoved,this._nodeRemoved,this),e.addEventListener(p.Events.AttrModified,this._attributeModified,this),e.addEventListener(p.Events.AttrRemoved,this._attributeRemoved,this),e.addEventListener(p.Events.CharacterDataModified,this._characterDataModified,this),e.addEventListener(p.Events.DocumentUpdated,this._documentUpdated,this),e.addEventListener(p.Events.ChildNodeCountUpdated,this._childNodeCountUpdated,this),e.addEventListener(p.Events.DistributedNodesChanged,this._distributedNodesChanged,this)}unwireFromDOMModel(e){e.removeEventListener(p.Events.MarkersChanged,this._markersChanged,this),e.removeEventListener(p.Events.NodeInserted,this._nodeInserted,this),e.removeEventListener(p.Events.NodeRemoved,this._nodeRemoved,this),e.removeEventListener(p.Events.AttrModified,this._attributeModified,this),e.removeEventListener(p.Events.AttrRemoved,this._attributeRemoved,this),e.removeEventListener(p.Events.CharacterDataModified,this._characterDataModified,this),e.removeEventListener(p.Events.DocumentUpdated,this._documentUpdated,this),e.removeEventListener(p.Events.ChildNodeCountUpdated,this._childNodeCountUpdated,this),e.removeEventListener(p.Events.DistributedNodesChanged,this._distributedNodesChanged,this),Yi.delete(e)}_addUpdateRecord(e){let t=this._updateRecords.get(e);return t||(t=new en,this._updateRecords.set(e,t)),t}_updateRecordForHighlight(e){return this._visible&&this._updateRecords.get(e)||null}_documentUpdated(e){const t=e.data;this._reset(),t.existingDocument()&&(this.rootDOMNode=t.existingDocument())}_attributeModified(e){const t=e.data.node;this._addUpdateRecord(t).attributeModified(e.data.name),this._updateModifiedNodesSoon()}_attributeRemoved(e){const t=e.data.node;this._addUpdateRecord(t).attributeRemoved(e.data.name),this._updateModifiedNodesSoon()}_characterDataModified(e){const t=e.data;this._addUpdateRecord(t).charDataModified(),t.parentNode&&t.parentNode.firstChild===t.parentNode.lastChild&&this._addUpdateRecord(t.parentNode).childrenModified(),this._updateModifiedNodesSoon()}_nodeInserted(e){const t=e.data;this._addUpdateRecord(t.parentNode).nodeInserted(t),this._updateModifiedNodesSoon()}_nodeRemoved(e){const t=e.data.node,i=e.data.parent;this.resetClipboardIfNeeded(t),this._addUpdateRecord(i).nodeRemoved(t),this._updateModifiedNodesSoon()}_childNodeCountUpdated(e){const t=e.data;this._addUpdateRecord(t).childrenModified(),this._updateModifiedNodesSoon()}_distributedNodesChanged(e){const t=e.data;this._addUpdateRecord(t).childrenModified(),this._updateModifiedNodesSoon()}_updateModifiedNodesSoon(){this._updateRecords.size&&(this._updateModifiedNodesTimeout||(this._updateModifiedNodesTimeout=setTimeout(this._updateModifiedNodes.bind(this),50)))}_updateModifiedNodes(){this._updateModifiedNodesTimeout&&(clearTimeout(this._updateModifiedNodesTimeout),delete this._updateModifiedNodesTimeout);const e=[...this._updateRecords.keys()],t=e.length>10;let i,n;t&&(i=this.element.parentNode,n=i?i.scrollTop:0,this._element.classList.add("hidden"));const s=this._rootDOMNode&&this._updateRecords.get(this._rootDOMNode);if(s&&s.hasChangedChildren())this.update();else for(const[e,t]of this._updateRecords)t.hasChangedChildren()?this._updateModifiedParentNode(e):this._updateModifiedNode(e);t&&(this._element.classList.remove("hidden"),i&&n&&(i.scrollTop=n)),this._updateRecords.clear(),this._fireElementsTreeUpdated(e)}_updateModifiedNode(e){const t=this.findTreeElement(e);t&&t.updateTitle(this._updateRecordForHighlight(e))}_updateModifiedParentNode(e){const t=this.findTreeElement(e);t&&(t.setExpandable(this._hasVisibleChildren(e)),t.updateTitle(this._updateRecordForHighlight(e)),Qi.has(t)&&this._updateChildren(t))}populateTreeElement(e){return e.childCount()||!e.isExpandable()?Promise.resolve():new Promise((t=>{e.node().getChildNodes((()=>{Qi.add(e),this._updateModifiedParentNode(e.node()),t()}))}))}_createElementTreeElement(e,t){const i=new rn(e,t);return i.setExpandable(!t&&this._hasVisibleChildren(e)),e.nodeType()===Node.ELEMENT_NODE&&e.parentNode&&e.parentNode.nodeType()===Node.DOCUMENT_NODE&&!e.parentNode.parentNode&&i.setCollapsible(!1),i.selectable=Boolean(this._selectEnabled),i}_showChild(e,t){if(e.isClosingTag())return null;const i=this._visibleChildren(e.node()).indexOf(t);return-1===i?null:(i>=e.expandedChildrenLimit()&&this.setExpandedChildrenLimit(e,i+1),e.childAt(i))}_visibleChildren(e){let t=rn.visibleShadowRoots(e);const i=e.contentDocument();i&&t.push(i);const n=e.importedDocument();n&&t.push(n);const s=e.templateContent();s&&t.push(s);const o=e.markerPseudoElement();o&&t.push(o);const r=e.beforePseudoElement();if(r&&t.push(r),e.childNodeCount()){let i=e.children()||[];this._showHTMLCommentsSetting.get()||(i=i.filter((e=>e.nodeType()!==Node.COMMENT_NODE))),t=t.concat(i)}const l=e.afterPseudoElement();return l&&t.push(l),t}_hasVisibleChildren(e){return!!e.isIframe()||(!!e.isPortal()||(!!e.contentDocument()||(!!e.importedDocument()||(!!e.templateContent()||(!!rn.visibleShadowRoots(e).length||(!!e.hasPseudoElements()||(!!e.isInsertionPoint()||Boolean(e.childNodeCount())&&!rn.canShowInlineText(e))))))))}_createExpandAllButtonTreeElement(e){const t=k.createTextButton("",function(t){const i=this._visibleChildren(e.node()).length;this.setExpandedChildrenLimit(e,Math.max(i,e.expandedChildrenLimit()+ln)),t.consume()}.bind(this));t.value="";const i=new A.TreeElement(t);return i.selectable=!1,i.button=t,i}setExpandedChildrenLimit(e,t){e.expandedChildrenLimit()!==t&&(e.setExpandedChildrenLimit(t),e.treeOutline&&!this._treeElementsBeingUpdated.has(e)&&this._updateModifiedParentNode(e.node()))}_updateChildren(e){if(!e.isExpandable()){if(!e.treeOutline)return;const t=e.treeOutline.selectedTreeElement;return t&&t.hasAncestor(e)&&e.select(!0),void e.removeChildren()}console.assert(!e.isClosingTag()),this._innerUpdateChildren(e)}insertChildElement(e,t,i,n){const s=this._createElementTreeElement(t,n);return e.insertChild(s,i),s}_moveChild(e,t,i){if(e.indexOfChild(t)===i)return;const n=t.selected;t.parent&&t.parent.removeChild(t),e.insertChild(t,i),n&&t.select()}_innerUpdateChildren(e){if(this._treeElementsBeingUpdated.has(e))return;this._treeElementsBeingUpdated.add(e);const t=e.node(),n=this._visibleChildren(t),s=new Set(n),o=new Map;for(let t=e.childCount()-1;t>=0;--t){const i=e.childAt(t);if(!(i instanceof rn)){e.removeChildAtIndex(t);continue}const n=i.node();s.has(n)?o.set(n,i):e.removeChildAtIndex(t)}for(let i=0;i<n.length&&i<e.expandedChildrenLimit();++i){const s=n[i],r=o.get(s)||this.findTreeElement(s);if(r&&r!==e)this._moveChild(e,r,i);else{const n=this.insertChildElement(e,s,i);this._updateRecordForHighlight(t)&&e.expanded&&rn.animateOnDOMUpdate(n),e.childCount()>e.expandedChildrenLimit()&&this.setExpandedChildrenLimit(e,e.expandedChildrenLimit()+1)}}const r=e.childCount();if(n.length>r){const t=r;e.expandAllButtonElement||(e.expandAllButtonElement=this._createExpandAllButtonTreeElement(e)),e.insertChild(e.expandAllButtonElement,t),e.expandAllButtonElement.title=i.UIString("Show All Nodes (%d More)",n.length-r)}else e.expandAllButtonElement&&(e.expandAllButtonElement=null);if(t.isInsertionPoint())for(const i of t.distributedNodes())e.appendChild(new tn(i));t.nodeType()===Node.ELEMENT_NODE&&!t.pseudoType()&&e.isExpandable()&&this.insertChildElement(e,t,e.childCount(),!0),this._treeElementsBeingUpdated.delete(e)}_markersChanged(e){const t=e.data,i=this.treeElementByNode.get(t);i&&i.updateDecorations()}}Ji._treeOutlineSymbol=Symbol("treeOutline"),Ji.Events={SelectedNodeChanged:Symbol("SelectedNodeChanged"),ElementsTreeUpdated:Symbol("ElementsTreeUpdated")};const Zi={" ":"nbsp","“":"#147","­":"shy"," ":"ensp"," ":"emsp"," ":"thinsp"," ":"#8202","​":"#8203","‌":"zwnj","‍":"zwj","‎":"lrm","‏":"rlm","‪":"#8234","‫":"#8235","‬":"#8236","‭":"#8237","‮":"#8238","\ufeff":"#65279"};class en{attributeModified(e){this._removedAttributes&&this._removedAttributes.has(e)&&this._removedAttributes.delete(e),this._modifiedAttributes||(this._modifiedAttributes=new Set),this._modifiedAttributes.add(e)}attributeRemoved(e){this._modifiedAttributes&&this._modifiedAttributes.has(e)&&this._modifiedAttributes.delete(e),this._removedAttributes||(this._removedAttributes=new Set),this._removedAttributes.add(e)}nodeInserted(e){this._hasChangedChildren=!0}nodeRemoved(e){this._hasChangedChildren=!0,this._hasRemovedChildren=!0}charDataModified(){this._charDataModified=!0}childrenModified(){this._hasChangedChildren=!0}isAttributeModified(e){return null!==this._modifiedAttributes&&void 0!==this._modifiedAttributes&&this._modifiedAttributes.has(e)}hasRemovedAttributes(){return null!==this._removedAttributes&&void 0!==this._removedAttributes&&Boolean(this._removedAttributes.size)}isCharDataModified(){return Boolean(this._charDataModified)}hasChangedChildren(){return Boolean(this._hasChangedChildren)}hasRemovedChildren(){return Boolean(this._hasRemovedChildren)}}class tn extends A.TreeElement{constructor(e){super(""),this.listItemElement.createChild("div","selection fill");const t=this.listItemElement.createChild("span","elements-tree-shortcut-title");let n=e.nodeName.toLowerCase();e.nodeType===Node.ELEMENT_NODE&&(n="<"+n+">"),t.textContent="↪ "+n;const s=Gt(e.deferredNode);k.createTextChild(this.listItemElement," "),s.classList.add("elements-tree-shortcut-link"),s.textContent=i.UIString("reveal"),this.listItemElement.appendChild(s),this._nodeShortcut=e}get hovered(){return Boolean(this._hovered)}set hovered(e){this._hovered!==e&&(this._hovered=e,this.listItemElement.classList.toggle("hovered",e))}deferredNode(){return this._nodeShortcut.deferredNode}domModel(){return this._nodeShortcut.deferredNode.domModel()}onselect(e){if(!e)return!0;return this._nodeShortcut.deferredNode.highlight(),this._nodeShortcut.deferredNode.resolve(function(e){e&&this.treeOutline instanceof Ji&&(this.treeOutline._selectedDOMNode=e,this.treeOutline._selectedNodeChanged(!1))}.bind(this)),!0}}var nn=Object.freeze({__proto__:null,ElementsTreeOutline:Ji,MappedCharToEntity:Zi,UpdateRecord:en,Renderer:class{async render(e){let t=null;if(e instanceof p.DOMNode?t=e:e instanceof p.DeferredDOMNode&&(t=await e.resolvePromise()),!t)return null;const i=new Ji(!1,!0,!0);i.rootDOMNode=t;const n=i.firstChild();return n&&!n.isExpandable()&&i._element.classList.add("single-node"),i.setVisible(!0),i.element.treeElementForTest=n,i.setShowSelectionOnKeyboardFocus(!0,!0),{node:i.element,tree:i}}},ShortcutTreeElement:tn,MultilineEditorController:undefined,ClipboardData:undefined});class sn{decorate(e){throw new Error("Not implemented yet")}}var on=Object.freeze({__proto__:null,MarkerDecorator:sn,GenericDecorator:class{constructor(e){this._title=i.UIString(e.title()),this._color=e.descriptor().color}decorate(e){return{title:this._title,color:this._color}}}});class rn extends A.TreeElement{constructor(e,t){super(),this._node=e,this.treeOutline=null,this._gutterContainer=this.listItemElement.createChild("div","gutter-container"),this._gutterContainer.addEventListener("click",this._showContextMenu.bind(this));const i=B.Icon.create("largeicon-menu","gutter-menu-icon");if(this._gutterContainer.appendChild(i),this._decorationsElement=this._gutterContainer.createChild("div","hidden"),this._isClosingTag=t,this._node.nodeType()!==Node.ELEMENT_NODE||t||(this._canAddAttributes=!0),this._searchQuery=null,this._expandedChildrenLimit=ln,this._decorationsThrottler=new o.Throttler(100),this._inClipboard=!1,this._hovered=!1,this._editing=null,this._highlightResult=[],!t&&(this._adornerContainer=this.listItemElement.createChild("div","adorner-container hidden"),this._adorners=[],this._styleAdorners=[],this._adornersThrottler=new o.Throttler(100),this.updateStyleAdorners(),e.isAdFrameNode())){const e=this.adornText("Ad",Fi.Security);L.Tooltip.install(e,he`This frame was identified as an ad frame`)}this._htmlEditElement,this.expandAllButtonElement=null}static animateOnDOMUpdate(e){const t=e.listItemElement.querySelector(".webkit-html-tag-name");k.runCSSAnimationOnce(t||e.listItemElement,"dom-update-highlight")}static visibleShadowRoots(e){let t=e.shadowRoots();return t.length&&!r.Settings.instance().moduleSetting("showUAShadowDOM").get()&&(t=t.filter((function(e){return e.shadowRootType()!==p.DOMNode.ShadowRootTypes.UserAgent}))),t}static canShowInlineText(e){if(e.contentDocument()||e.importedDocument()||e.templateContent()||rn.visibleShadowRoots(e).length||e.hasPseudoElements())return!1;if(e.nodeType()!==Node.ELEMENT_NODE)return!1;if(!e.firstChild||e.firstChild!==e.lastChild||e.firstChild.nodeType()!==Node.TEXT_NODE)return!1;return e.firstChild.nodeValue().length<80}static populateForcedPseudoStateItems(e,t){const n=["active","hover","focus","visited","focus-within","focus-visible"],s=t.domModel().cssModel().pseudoState(t),o=e.debugSection().appendSubMenuItem(i.UIString("Force state"));for(const e of n){const t=!!s&&s.indexOf(e)>=0;o.defaultSection().appendCheckboxItem(":"+e,r.bind(null,e,!t),t,!1)}function r(e,i){t.domModel().cssModel().forcePseudoState(t,e,i)}}isClosingTag(){return Boolean(this._isClosingTag)}node(){return this._node}isEditing(){return Boolean(this._editing)}highlightSearchResults(e){this._searchQuery!==e&&this._hideSearchHighlight(),this._searchQuery=e,this._searchHighlightsVisible=!0,this.updateTitle(null,!0)}hideSearchHighlights(){delete this._searchHighlightsVisible,this._hideSearchHighlight()}_hideSearchHighlight(){if(0!==this._highlightResult.length){for(let e=this._highlightResult.length-1;e>=0;--e){const t=this._highlightResult[e];switch(t.type){case"added":t.node.remove();break;case"changed":t.node.textContent=t.oldText||null}}this._highlightResult=[]}}setInClipboard(e){this._inClipboard!==e&&(this._inClipboard=e,this.listItemElement.classList.toggle("in-clipboard",e))}get hovered(){return this._hovered}set hovered(e){this._hovered!==e&&(this._hovered=e,this.listItemElement&&(e?(this._createSelection(),this.listItemElement.classList.add("hovered")):this.listItemElement.classList.remove("hovered")))}expandedChildrenLimit(){return this._expandedChildrenLimit}setExpandedChildrenLimit(e){this._expandedChildrenLimit=e}_createSelection(){const e=this.listItemElement;e&&(this.selectionElement||(this.selectionElement=document.createElement("div"),this.selectionElement.className="selection fill",this.selectionElement.style.setProperty("margin-left",-this._computeLeftIndent()+"px"),e.insertBefore(this.selectionElement,e.firstChild)))}_createHint(){if(this.listItemElement&&!this._hintElement){this._hintElement=this.listItemElement.createChild("span","selected-hint");const e="$0";L.Tooltip.install(this._hintElement,he`Use ${e} in the console to refer to this element.`),R.markAsHidden(this._hintElement)}}onbind(){this.treeOutline&&!this._isClosingTag&&this.treeOutline.treeElementByNode.set(this._node,this)}onunbind(){this._editing&&this._editing.cancel(),this.treeOutline&&this.treeOutline.treeElementByNode.get(this._node)===this&&this.treeOutline.treeElementByNode.delete(this._node)}onattach(){this._hovered&&(this._createSelection(),this.listItemElement.classList.add("hovered")),this.updateTitle(),this.listItemElement.draggable=!0}async onpopulate(){if(this.treeOutline)return this.treeOutline.populateTreeElement(this)}async expandRecursively(){await this._node.getSubtree(-1,!0),await super.expandRecursively(Number.MAX_VALUE)}onexpand(){this._isClosingTag||this.updateTitle()}oncollapse(){this._isClosingTag||this.updateTitle()}select(e,t){return!this._editing&&super.select(e,t)}onselect(e){return!!this.treeOutline&&(this.treeOutline.suppressRevealAndSelect=!0,this.treeOutline.selectDOMNode(this._node,e),e&&(this._node.highlight(),re.actionTaken(le.Action.ChangeInspectedNodeInElementsPanel)),this._createSelection(),this._createHint(),this.treeOutline.suppressRevealAndSelect=!1,!0)}ondelete(){if(!this.treeOutline)return!1;const e=this.treeOutline.findTreeElement(this._node);return e?e.remove():this.remove(),!0}onenter(){return!this._editing&&(this._startEditing(),!0)}selectOnMouseDown(e){super.selectOnMouseDown(e),this._editing||e.detail>=2&&e.preventDefault()}ondblclick(e){return this._editing||this._isClosingTag||this._startEditingTarget(e.target)||this.isExpandable()&&!this.expanded&&this.expand(),!1}hasEditableNode(){return!this._node.isShadowRoot()&&!this._node.ancestorUserAgentShadowRoot()}_insertInLastAttributePosition(e,t){if(e.getElementsByClassName("webkit-html-attribute").length>0)e.insertBefore(t,e.lastChild);else if(null!==e.textContent){const i=e.textContent.match(/^<(.*?)>$/);if(!i)return;const n=i[1];e.textContent="",k.createTextChild(e,"<"+n),e.appendChild(t),k.createTextChild(e,">")}}_startEditingTarget(e){if(!this.treeOutline||this.treeOutline.selectedDOMNode()!==this._node)return!1;if(this._node.nodeType()!==Node.ELEMENT_NODE&&this._node.nodeType()!==Node.TEXT_NODE)return!1;const t=e.enclosingNodeOrSelfWithClass("webkit-html-text-node");if(t)return this._startEditingTextNode(t);const i=e.enclosingNodeOrSelfWithClass("webkit-html-attribute");if(i)return this._startEditingAttribute(i,e);const n=e.enclosingNodeOrSelfWithClass("webkit-html-tag-name");if(n)return this._startEditingTagName(n);return!!e.enclosingNodeOrSelfWithClass("add-attribute")&&this._addNewAttribute()}_showContextMenu(e){this.treeOutline&&this.treeOutline.showContextMenu(this,e)}populateTagContextMenu(e,t){const n=this._isClosingTag&&this.treeOutline?this.treeOutline.findTreeElement(this._node):this;if(!n)return;e.editSection().appendItem(i.UIString("Add attribute"),n._addNewAttribute.bind(n));const s=t.target,o=s.enclosingNodeOrSelfWithClass("webkit-html-attribute"),r=s.enclosingNodeOrSelfWithClass("add-attribute");o&&!r&&e.editSection().appendItem(i.UIString("Edit attribute"),this._startEditingAttribute.bind(this,o,s)),this.populateNodeContextMenu(e),rn.populateForcedPseudoStateItems(e,n.node()),this.populateScrollIntoView(e),e.viewSection().appendItem(i.UIString("Focus"),(async()=>{await this._node.focus()}))}populateScrollIntoView(e){e.viewSection().appendItem(i.UIString("Scroll into view"),(()=>this._node.scrollIntoView()))}populateTextContextMenu(e,t){this._editing||e.editSection().appendItem(i.UIString("Edit text"),this._startEditingTextNode.bind(this,t)),this.populateNodeContextMenu(e)}populateNodeContextMenu(e){const t=this.hasEditableNode();t&&!this._editing&&e.editSection().appendItem(i.UIString("Edit as HTML"),this._editAsHTML.bind(this));const n=this._node.isShadowRoot(),s=e.clipboardSection().appendSubMenuItem(i.UIString("Copy")),o=H.KeyboardShortcut.shortcutToString.bind(null),r=H.Modifiers.CtrlOrMeta,l=this.treeOutline;if(!l)return;let a;const d=s.section();if(n||(a=d.appendItem(i.UIString("Copy outerHTML"),l.performCopyOrCut.bind(l,!1,this._node)),a.setShortcut(o("V",r))),this._node.nodeType()===Node.ELEMENT_NODE&&(d.appendItem(i.UIString("Copy selector"),this._copyCSSPath.bind(this)),d.appendItem(i.UIString("Copy JS path"),this._copyJSPath.bind(this),!Wi(this._node)),d.appendItem(he`Copy styles`,this._copyStyles.bind(this))),n||(d.appendItem(i.UIString("Copy XPath"),this._copyXPath.bind(this)),d.appendItem(he`Copy full XPath`,this._copyFullXPath.bind(this))),!n){a=s.clipboardSection().appendItem(i.UIString("Cut element"),l.performCopyOrCut.bind(l,!0,this._node),!this.hasEditableNode()),a.setShortcut(o("X",r)),a=s.clipboardSection().appendItem(i.UIString("Copy element"),l.performCopyOrCut.bind(l,!1,this._node)),a.setShortcut(o("C",r)),a=s.clipboardSection().appendItem(i.UIString("Paste element"),l.pasteNode.bind(l,this._node),!l.canPaste(this._node)),a.setShortcut(o("V",r));const t=!this._node.parentNode||"#document"===this._node.parentNode.nodeName();a=e.editSection().appendItem(i.UIString("Duplicate element"),l.duplicateNode.bind(l,this._node),this._node.isInShadowTree()||t)}a=e.debugSection().appendCheckboxItem(i.UIString("Hide element"),l.toggleHideElement.bind(l,this._node),l.isToggledToHidden(this._node)),a.setShortcut($.ShortcutRegistry.instance().shortcutTitleForAction("elements.hide-element")||""),t&&e.editSection().appendItem(i.UIString("Delete element"),this.remove.bind(this)),e.viewSection().appendItem(he`Expand recursively`,this.expandRecursively.bind(this)),e.viewSection().appendItem(he`Collapse children`,this.collapseChildren.bind(this));const h=new Re.ActionDelegate;e.viewSection().appendItem(he`Capture node screenshot`,h.handleAction.bind(null,M.Context.instance(),"emulation.capture-node-screenshot"))}_startEditing(){if(!this.treeOutline||this.treeOutline.selectedDOMNode()!==this._node)return;const e=this.listItemElement;if(this._canAddAttributes){const t=e.getElementsByClassName("webkit-html-attribute")[0];return t?this._startEditingAttribute(t,t.getElementsByClassName("webkit-html-attribute-value")[0]):this._addNewAttribute()}if(this._node.nodeType()===Node.TEXT_NODE){const t=e.getElementsByClassName("webkit-html-text-node")[0];if(t)return this._startEditingTextNode(t)}}_addNewAttribute(){const e=document.createElement("span"),t=this._buildAttributeDOM(e," ","",null);t.style.marginLeft="2px",t.style.marginRight="2px";const i=this.listItemElement.getElementsByClassName("webkit-html-tag")[0];return this._insertInLastAttributePosition(i,t),t.scrollIntoViewIfNeeded(!0),this._startEditingAttribute(t,t)}_triggerEditAttribute(e){const t=this.listItemElement.getElementsByClassName("webkit-html-attribute-name");for(let i=0,n=t.length;i<n;++i)if(t[i].textContent===e)for(let e=t[i].nextSibling;e;e=e.nextSibling)if(e.nodeType===Node.ELEMENT_NODE&&e.classList.contains("webkit-html-attribute-value"))return this._startEditingAttribute(e.parentElement,e)}_startEditingAttribute(e,t){if(console.assert(this.listItemElement.isAncestor(e)),k.isBeingEdited(e))return!0;const n=e.getElementsByClassName("webkit-html-attribute-name")[0];if(!n)return!1;const s=n.textContent,o=e.getElementsByClassName("webkit-html-attribute-value")[0];t=o.isAncestor(t)?o:t;const r=s&&o?this._node.getAttribute(s):void 0;void 0!==r&&o.setTextContentTruncatedIfNeeded(r,i.UIString("<value is too large to edit>")),function e(t){if(t.nodeType!==Node.TEXT_NODE){if(t.nodeType===Node.ELEMENT_NODE)for(let i=t.firstChild;i;i=i.nextSibling)e(i)}else t.nodeValue=t.nodeValue?t.nodeValue.replace(/\u200B/g,""):""}(e);const l=new z.Config(this._attributeEditingCommitted.bind(this),this._editingCancelled.bind(this),s||void 0);a.ParsedURL.fromString(o.textContent||"")||l.setPostKeydownFinishHandler((function(t){return k.handleElementValueModifications(t,e),""})),this._updateEditorHandles(e,l);const d=this.listItemElement.getComponentSelection();return d&&d.selectAllChildren(t),!0}_startEditingTextNode(e){if(k.isBeingEdited(e))return!0;let t=this._node;t.nodeType()===Node.ELEMENT_NODE&&t.firstChild&&(t=t.firstChild);const i=e.enclosingNodeOrSelfWithClass("webkit-html-text-node");i&&(i.textContent=t.nodeValue());const n=new z.Config(this._textNodeEditingCommitted.bind(this,t),this._editingCancelled.bind(this));this._updateEditorHandles(e,n);const s=this.listItemElement.getComponentSelection();return s&&s.selectAllChildren(e),!0}_startEditingTagName(e){if(!e&&!(e=this.listItemElement.getElementsByClassName("webkit-html-tag-name")[0]))return!1;const t=e.textContent;if(null!==t&&dn.has(t.toLowerCase()))return!1;if(k.isBeingEdited(e))return!0;const i=this._distinctClosingTagElement();function n(){i&&e&&(i.textContent="</"+e.textContent+">")}const s=e=>{" "===e.key&&(this._editing&&this._editing.commit(),e.consume(!0))};e.addEventListener("keyup",n,!1),e.addEventListener("keydown",s,!1);const o=new z.Config(function(t,i,o,r,l){e&&(e.removeEventListener("keyup",n,!1),e.removeEventListener("keydown",s,!1),this._tagNameEditingCommitted(t,i,o,r,l))}.bind(this),function(t,i){e&&(e.removeEventListener("keyup",n,!1),e.removeEventListener("keydown",s,!1),this._editingCancelled(t,i))}.bind(this),t);this._updateEditorHandles(e,o);const r=this.listItemElement.getComponentSelection();return r&&r.selectAllChildren(e),!0}_updateEditorHandles(e,t){const i=z.InplaceEditor.startEditing(e,t);this._editing=i?{commit:i.commit,cancel:i.cancel,editor:void 0,resize:()=>{}}:null}_startEditingAsHTML(e,t,i){if(null===i)return;let n=i;if(this._editing)return;n=this._convertWhitespaceToEntities(n).text,this._htmlEditElement=document.createElement("div"),this._htmlEditElement.className="source-code elements-tree-editor";let s=this.listItemElement.firstChild;for(;s;)s.style.display="none",s=s.nextSibling;this.childrenListElement&&(this.childrenListElement.style.display="none"),this.listItemElement.appendChild(this._htmlEditElement);const o=c.Runtime.instance().extension(j.TextEditorFactory);function l(e){const t=e.createEditor({lineNumbers:!1,lineWrapping:r.Settings.instance().moduleSetting("domWordWrap").get(),mimeType:"text/html",autoHeight:!1,padBottom:!1,bracketMatchingSetting:void 0,devtoolsAccessibleName:void 0,maxHighlightLength:void 0,placeholder:void 0,lineWiseCopyCut:void 0,inputStyle:void 0});this._editing={commit:d.bind(this),cancel:h.bind(this),editor:t,resize:a.bind(this)},a.call(this),t.widget().show(this._htmlEditElement),t.setText(n),t.widget().focus(),t.widget().element.addEventListener("focusout",(e=>{const i=e.relatedTarget;i&&!i.isSelfOrDescendant(t.widget().element)&&this._editing&&this._editing.commit()}),!1),t.widget().element.addEventListener("keydown",u.bind(this),!0),this.treeOutline&&this.treeOutline.setMultilineEditing(this._editing)}function a(){this.treeOutline&&this._htmlEditElement&&(this._htmlEditElement.style.width=this.treeOutline.visibleWidth()-this._computeLeftIndent()-30+"px"),this._editing&&this._editing.editor&&this._editing.editor.onResize()}function d(){this._editing&&this._editing.editor&&e(n,this._editing.editor.text()),h.call(this)}function h(){if(!this._editing||!this._editing.editor)return;this._editing.editor.widget().element.removeEventListener("blur",this._editing.commit,!0),this._editing.editor.widget().detach(),this._editing=null,this._htmlEditElement&&this.listItemElement.removeChild(this._htmlEditElement),this._htmlEditElement=void 0,this.childrenListElement&&this.childrenListElement.style.removeProperty("display");let e=this.listItemElement.firstChild;for(;e;)e.style.removeProperty("display"),e=e.nextSibling;this.treeOutline&&(this.treeOutline.setMultilineEditing(null),this.treeOutline.focus()),t()}function u(e){const t=e,i=H.KeyboardShortcut.eventHasCtrlOrMeta(t)&&!t.altKey&&!t.shiftKey;"Enter"===t.key&&(i||t.isMetaOrCtrlForTest)?(t.consume(!0),this._editing&&this._editing.commit()):t.keyCode!==H.Keys.Esc.code&&"Escape"!==t.key||(t.consume(!0),this._editing&&this._editing.cancel())}o&&o.instance().then((e=>{l.call(this,e)}))}_attributeEditingCommitted(e,t,i,n,s){this._editing=null;const o=this.treeOutline;function r(i){if(i&&this._editingCancelled(e,n),!s)return;o&&(o.runPendingUpdates(),o.focus());const r=this._node.attributes();for(let e=0;e<r.length;++e)if(r[e].name===n)return void("backward"===s?0===e?this._startEditingTagName():this._triggerEditAttribute(r[e-1].name):e===r.length-1?this._addNewAttribute():this._triggerEditAttribute(r[e+1].name));"backward"===s?" "===t?r.length>0&&this._triggerEditAttribute(r[r.length-1].name):r.length>1&&this._triggerEditAttribute(r[r.length-2].name):"forward"===s&&(ce.isWhitespace(t)?this._startEditingTagName():this._addNewAttribute())}!n.trim()&&!t.trim()||i===t?(this.updateTitle(),r.call(this)):this._node.setAttribute(n,t,r.bind(this))}_tagNameEditingCommitted(e,t,i,n,s){this._editing=null;const o=this;function r(){const t=o._distinctClosingTagElement();t&&(t.textContent="</"+n+">"),o._editingCancelled(e,n),l.call(o)}function l(){if("forward"!==s)return void this._addNewAttribute();const e=this._node.attributes();e.length>0?this._triggerEditAttribute(e[0].name):this._addNewAttribute()}if((t=t.trim())===i)return void r();const a=this.treeOutline,d=this.expanded;this._node.setNodeName(t,((e,t)=>{if(e||!t)return void r();if(!a)return;const i=a.selectNodeAfterEdit(d,e,t);l.call(i)}))}_textNodeEditingCommitted(e,t,i){this._editing=null,e.setNodeValue(i,function(){this.updateTitle()}.bind(this))}_editingCancelled(e,t){this._editing=null,this.updateTitle()}_distinctClosingTagElement(){if(this.expanded){const e=this.childrenListElement.querySelectorAll(".close");return e[e.length-1]}const e=this.listItemElement.getElementsByClassName("webkit-html-tag");return 1===e.length?null:e[e.length-1]}updateTitle(e,t){if(!this._editing){if(t)this._hideSearchHighlight();else{const t=this._nodeTitleInfo(e||null);if(this._node.nodeType()===Node.DOCUMENT_FRAGMENT_NODE&&this._node.isInShadowTree()&&this._node.shadowRootType()){this.childrenListElement.classList.add("shadow-root");let e=4;for(let t=this._node;e&&t;t=t.parentNode)t.nodeType()===Node.DOCUMENT_FRAGMENT_NODE&&e--;e?this.childrenListElement.classList.add("shadow-root-depth-"+e):this.childrenListElement.classList.add("shadow-root-deep")}const i=document.createElement("span");i.className="highlight",i.appendChild(t),this.title=i,this.updateDecorations(),this.listItemElement.insertBefore(this._gutterContainer,this.listItemElement.firstChild),!this._isClosingTag&&this._adornerContainer&&this.listItemElement.appendChild(this._adornerContainer),this._highlightResult=[],delete this.selectionElement,delete this._hintElement,this.selected&&(this._createSelection(),this._createHint())}this._highlightSearchResults()}}_computeLeftIndent(){let e=this.parent,t=0;for(;null!==e;)t++,e=e.parent;return 12*(t-2)+(this.isExpandable()?1:12)}updateDecorations(){this._gutterContainer.style.left=-this._computeLeftIndent()+"px",this.isClosingTag()||this._node.nodeType()===Node.ELEMENT_NODE&&this._decorationsThrottler.schedule(this._updateDecorationsInternal.bind(this))}_updateDecorationsInternal(){if(!this.treeOutline)return Promise.resolve();const e=this._node;this.treeOutline.decoratorExtensions||(this.treeOutline.decoratorExtensions=c.Runtime.instance().extensions(sn));const t=new Map;for(const e of this.treeOutline.decoratorExtensions){const i=e.descriptor();"marker"in i&&t.set(i.marker,e)}const n=[],s=[],o=[];function r(t,i){const n=i.decorate(t);n&&(t===e?s:o).push(n)}return e.traverseMarkers((function(e,i){const s=t.get(i);if(!s)return;n.push(s.instance().then(r.bind(null,e)))})),Promise.all(n).then(function(){if(this._decorationsElement.removeChildren(),this._decorationsElement.classList.add("hidden"),this._gutterContainer.classList.toggle("has-decorations",Boolean(s.length||o.length)),R.setAccessibleName(this._decorationsElement,""),!s.length&&!o.length)return;const e=new Set,t=document.createElement("div");for(const i of s){t.createChild("div").textContent=i.title,e.add(i.color)}if(this.expanded&&!s.length)return;const n=new Set;if(o.length){let e=t.createChild("div");e.textContent=i.UIString("Children:");for(const i of o)e=t.createChild("div"),e.style.marginLeft="15px",e.textContent=i.title,n.add(i.color)}let r=0;l.call(this,e,"elements-gutter-decoration"),this.expanded||l.call(this,n,"elements-gutter-decoration elements-has-decorated-children");function l(e,t){for(const i of e){const e=this._decorationsElement.createChild("div",t);this._decorationsElement.classList.remove("hidden"),e.style.backgroundColor=i,e.style.borderColor=i,r&&(e.style.marginLeft=r+"px"),r+=3}}L.Tooltip.install(this._decorationsElement,t),R.setAccessibleName(this._decorationsElement,t.textContent||"")}.bind(this))}_buildAttributeDOM(e,t,i,n,s,o){const r=/[\/;:\)\]\}]/g;let l=0,a=0,d=0;function h(e,t){const i=this._convertWhitespaceToEntities(t);for(a=i.entityRanges.length,t=i.text.replace(r,((e,t)=>{for(;l<a&&i.entityRanges[l].offset<t;)i.entityRanges[l].offset+=d,++l;return d+=1,e+"​"}));l<a;)i.entityRanges[l].offset+=d,++l;e.setTextContentTruncatedIfNeeded(t),k.highlightRangesWithStyleClass(e,i.entityRanges,"webkit-html-entity-value")}const c=s||i.length>0,u=e.createChild("span","webkit-html-attribute"),p=u.createChild("span","webkit-html-attribute-name");p.textContent=t,c&&k.createTextChild(u,'=​"');const m=u.createChild("span","webkit-html-attribute-value");function _(e){const t=o?o.resolveURL(e):null;if(null===t){const t=document.createElement("span");return h.call(this,t,e),t}(e=e.replace(r,"$&​")).startsWith("data:")&&(e=ce.trimMiddle(e,60));const i=o&&"a"===o.nodeName().toLowerCase()?G.XLink.create(t,e,"",!0):ne.Linkifier.linkifyURL(t,{text:e,preventClick:!0,className:void 0,lineNumber:void 0,columnNumber:void 0,maxLength:void 0,tabStop:void 0,bypassURLTrimming:void 0});return it.setImageUrl(i,t)}n&&n.isAttributeModified(t)&&k.runCSSAnimationOnce(c?m:p,"dom-update-highlight");const g=o?o.nodeName().toLowerCase():"";function f(e){const t=document.createDocumentFragment();let i=0;for(;e.length;){i++>0&&k.createTextChild(t," ");let n="",s="";const o=(e=e.trim()).search(/\s/);if(-1===o)n=e;else if(o>0&&","===e[o-1])n=e.substring(0,o);else{n=e.substring(0,o);const t=e.indexOf(",",o);s=-1!==t?e.substring(o,t+1):e.substring(o)}n&&(n.endsWith(",")?(t.appendChild(_.call(this,n.substring(0,n.length-1))),k.createTextChild(t,",")):t.appendChild(_.call(this,n))),s&&k.createTextChild(t,s),e=e.substring(n.length+s.length)}return t}return!g||"src"!==t&&"href"!==t?("img"!==g&&"source"!==g||"srcset"!==t)&&("image"!==g||"xlink:href"!==t&&"href"!==t)?h.call(this,m,i):m.appendChild(f.call(this,i)):m.appendChild(_.call(this,i)),c&&k.createTextChild(u,'"'),u}_buildPseudoElementDOM(e,t){e.createChild("span","webkit-html-pseudo-element").textContent="::"+t,k.createTextChild(e,"​")}_buildTagDOM(e,t,i,n,s){const o=this._node,r=["webkit-html-tag"];i&&n&&r.push("close");const l=e.createChild("span",r.join(" "));k.createTextChild(l,"<");const a=l.createChild("span",i?"webkit-html-close-tag-name":"webkit-html-tag-name");if(a.textContent=(i?"/":"")+t,R.setAccessibleName(a,t),!i){if(o.hasAttributes()){const e=o.attributes();for(let t=0;t<e.length;++t){const i=e[t];k.createTextChild(l," "),this._buildAttributeDOM(l,i.name,i.value,s,!1,o)}}if(s){let e=s.hasRemovedAttributes()||s.hasRemovedChildren();e=e||!this.expanded&&s.hasChangedChildren(),e&&k.runCSSAnimationOnce(a,"dom-update-highlight")}}k.createTextChild(l,">"),k.createTextChild(e,"​")}_convertWhitespaceToEntities(e){let t="",i=0;const n=[],s=Zi;for(let o=0,r=e.length;o<r;++o){const r=e.charAt(o);if(s[r]){t+=e.substring(i,o);const l="&"+s[r]+";";n.push({offset:t.length,length:l.length}),t+=l,i=o+1}}return t&&(t+=e.substring(i)),{text:t||e,entityRanges:n}}_nodeTitleInfo(e){const t=this._node,i=document.createDocumentFragment(),n=()=>{this._highlightResult=[],this._highlightSearchResults()};switch(t.nodeType()){case Node.ATTRIBUTE_NODE:this._buildAttributeDOM(i,t.name,t.value,e,!0);break;case Node.ELEMENT_NODE:{const n=t.pseudoType();if(n){this._buildPseudoElementDOM(i,n);break}const s=t.nodeNameInCorrectCase();if(this._isClosingTag){this._buildTagDOM(i,s,!0,!0,e);break}if(this._buildTagDOM(i,s,!1,!1,e),this.isExpandable()){if(!this.expanded){i.createChild("span","webkit-html-text-node bogus").textContent="…",k.createTextChild(i,"​"),this._buildTagDOM(i,s,!0,!1,e)}break}if(rn.canShowInlineText(t)){const n=i.createChild("span","webkit-html-text-node"),o=t.firstChild;if(!o)throw new Error("ElementsTreeElement._nodeTitleInfo expects node.firstChild to be defined.");const r=this._convertWhitespaceToEntities(o.nodeValue());n.textContent=r.text,k.highlightRangesWithStyleClass(n,r.entityRanges,"webkit-html-entity-value"),k.createTextChild(i,"​"),this._buildTagDOM(i,s,!0,!1,e),e&&e.hasChangedChildren()&&k.runCSSAnimationOnce(n,"dom-update-highlight"),e&&e.isCharDataModified()&&k.runCSSAnimationOnce(n,"dom-update-highlight");break}(this.treeOutline&&this.treeOutline.isXMLMimeType||!an.has(s))&&this._buildTagDOM(i,s,!0,!1,e);break}case Node.TEXT_NODE:if(t.parentNode&&"script"===t.parentNode.nodeName().toLowerCase()){const e=i.createChild("span","webkit-html-text-node webkit-html-js-node"),s=t.nodeValue();e.textContent=s.startsWith("\n")?s.substring(1):s;new K.SyntaxHighlighter("text/javascript",!0).syntaxHighlightNode(e).then(n)}else if(t.parentNode&&"style"===t.parentNode.nodeName().toLowerCase()){const e=i.createChild("span","webkit-html-text-node webkit-html-css-node"),s=t.nodeValue();e.textContent=s.startsWith("\n")?s.substring(1):s;new K.SyntaxHighlighter("text/css",!0).syntaxHighlightNode(e).then(n)}else{k.createTextChild(i,'"');const n=i.createChild("span","webkit-html-text-node"),s=this._convertWhitespaceToEntities(t.nodeValue());n.textContent=s.text,k.highlightRangesWithStyleClass(n,s.entityRanges,"webkit-html-entity-value"),k.createTextChild(i,'"'),e&&e.isCharDataModified()&&k.runCSSAnimationOnce(n,"dom-update-highlight")}break;case Node.COMMENT_NODE:{const e=i.createChild("span","webkit-html-comment");k.createTextChild(e,"\x3c!--"+t.nodeValue()+"--\x3e");break}case Node.DOCUMENT_TYPE_NODE:{const e=i.createChild("span","webkit-html-doctype");k.createTextChild(e,"<!DOCTYPE "+t.nodeName()),t.publicId?(k.createTextChild(e,' PUBLIC "'+t.publicId+'"'),t.systemId&&k.createTextChild(e,' "'+t.systemId+'"')):t.systemId&&k.createTextChild(e,' SYSTEM "'+t.systemId+'"'),t.internalSubset&&k.createTextChild(e," ["+t.internalSubset+"]"),k.createTextChild(e,">");break}case Node.CDATA_SECTION_NODE:{const e=i.createChild("span","webkit-html-text-node");k.createTextChild(e,"<![CDATA["+t.nodeValue()+"]]>");break}case Node.DOCUMENT_FRAGMENT_NODE:i.createChild("span","webkit-html-fragment").textContent=ce.collapseWhitespace(t.nodeNameInCorrectCase());break;default:{const e=ce.collapseWhitespace(t.nodeNameInCorrectCase());k.createTextChild(i,e)}}return i}remove(){if(this._node.pseudoType())return;this.parent&&this._node.parentNode&&this._node.parentNode.nodeType()!==Node.DOCUMENT_NODE&&this._node.removeNode()}toggleEditAsHTML(e,t){if(this._editing&&this._htmlEditElement)return void this._editing.commit();if(!1===t)return;function i(t){e&&e(!t)}const n=this._node;n.getOuterHTML().then(this._startEditingAsHTML.bind(this,(function(e,t){e!==t&&n.setOuterHTML(t,i)}),(function(){e&&e(!1)})))}_copyCSSPath(){ae.InspectorFrontendHostInstance.copyText(Vi(this._node,!0))}_copyJSPath(){ae.InspectorFrontendHostInstance.copyText(zi(this._node,!0))}_copyXPath(){ae.InspectorFrontendHostInstance.copyText(ji(this._node,!0))}_copyFullXPath(){ae.InspectorFrontendHostInstance.copyText(ji(this._node,!1))}async _copyStyles(){const e=this._node,t=e.domModel().cssModel(),i=await t.cachedMatchedCascadeForNode(e);if(!i)return;const n=r.Settings.instance().moduleSetting("textEditorIndent").get(),s=[];for(const e of i.nodeStyles().reverse())for(const t of e.leadingProperties())t.parsedOk&&!t.disabled&&t.activeInStyle()&&!t.implicit&&(i.isInherited(e)&&!g.cssMetadata().isPropertyInherited(t.name)||e.parentRule&&e.parentRule.isUserAgent()||i.propertyState(t)===y.PropertyState.Active&&s.push(`${n}${t.name}: ${t.value};`));ae.InspectorFrontendHostInstance.copyText(s.join("\n"))}_highlightSearchResults(){if(!this._searchQuery||!this._searchHighlightsVisible)return;this._hideSearchHighlight();const e=this.listItemElement.textContent||"",t=createPlainTextSearchRegex(this._searchQuery,"gi");let i=t.exec(e);const n=[];for(;i;)n.push(new Le.SourceRange(i.index,i[0].length)),i=t.exec(e);n.length||n.push(new Le.SourceRange(0,e.length)),this._highlightResult=[],k.highlightSearchResults(this.listItemElement,n,this._highlightResult)}_editAsHTML(){n.reveal(this.node()).then((()=>{const e=q.ActionRegistry.instance().action("elements.edit-as-html");if(e)return e.execute()}))}adornText(e,t){const i=document.createElement("span");i.textContent=e;const n={category:t},s=Hi.create(i,e,n);return this._adorners.push(s),this._updateAdorners(),s}removeAdorner(e){const t=this._adorners;e.remove();for(let i=0;i<t.length;++i)if(t[i]===e)return t.splice(i,1),void this._updateAdorners()}removeAllAdorners(){for(const e of this._adorners)e.remove();this._adorners=[],this._updateAdorners()}_updateAdorners(){this._adornersThrottler.schedule(this._updateAdornersInternal.bind(this))}_updateAdornersInternal(){const e=this._adornerContainer;if(!e)return Promise.resolve();const t=this._adorners;if(0===t.length)return e.classList.add("hidden"),Promise.resolve();t.sort(un),e.removeChildren();for(const i of t)e.appendChild(i);return e.classList.remove("hidden"),Promise.resolve()}async updateStyleAdorners(){if(this._isClosingTag)return;const e=this.node(),t=e.id;if(e.nodeType()===Node.COMMENT_NODE||e.nodeType()===Node.DOCUMENT_FRAGMENT_NODE||void 0===t)return;const i=await e.domModel().cssModel().computedStylePromise(t);for(const e of this._styleAdorners)this.removeAdorner(e);if(this._styleAdorners=[],!i)return;const n=i.get("display"),s="grid"===n||"inline-grid"===n,o=c.experiments.isEnabled("cssFlexboxFeatures")&&("flex"===n||"inline-flex"===n);let r;s&&(r=this.createGridAdorner()),o&&(r=this.createFlexAdorner()),r&&this._styleAdorners.push(r)}createGridAdorner(){const e=this.node(),t=e.id;if(!t)return null;const i=this.adornText("grid",Fi.Layout);i.classList.add("grid");return i.addInteraction((()=>{i.isActive()?e.domModel().overlayModel().highlightGridInPersistentOverlay(t):e.domModel().overlayModel().hideGridInPersistentOverlay(t)}),{isToggle:!0,shouldPropagateOnKeydown:!1,ariaLabelDefault:he`Enable grid mode`,ariaLabelActive:he`Disable grid mode`}),e.domModel().overlayModel().addEventListener(f.Events.PersistentGridOverlayStateChanged,(e=>{const{nodeId:n,enabled:s}=e.data;n===t&&i.toggle(s)})),i}createFlexAdorner(){const e=this.node(),t=e.id;if(!t)return null;const i=this.adornText("flex",Fi.Layout);i.classList.add("flex");return i.addInteraction((()=>{const n=e.domModel().overlayModel();i.isActive()?n.highlightFlexContainerInPersistentOverlay(t):n.hideFlexContainerInPersistentOverlay(t)}),{isToggle:!0,shouldPropagateOnKeydown:!1,ariaLabelDefault:he`Enable flex mode`,ariaLabelActive:he`Disable flex mode`}),e.domModel().overlayModel().addEventListener(f.Events.PersistentFlexContainerOverlayStateChanged,(e=>{const{nodeId:n,enabled:s}=e.data;n===t&&i.toggle(s)})),i}}const ln=500,an=new Set(["area","base","basefont","br","canvas","col","command","embed","frame","hr","img","input","keygen","link","menuitem","meta","param","source","track","wbr"]),dn=new Set(["html","head","body"]),hn=[Fi.Security,Fi.Layout,Fi.Default],cn=new Map(hn.map(((e,t)=>[e,t+1])));function un(e,t){const i=cn.get(e.category)||Number.POSITIVE_INFINITY,n=cn.get(t.category)||Number.POSITIVE_INFINITY;return i===n?e.name.localeCompare(t.name):i-n}var pn=Object.freeze({__proto__:null,ElementsTreeElement:rn,InitialChildrenLimit:ln,ForbiddenClosingTagElements:an,EditTagBlocklist:dn,EditorHandles:undefined});class mn{constructor(e){this._throttler=new o.Throttler(100),this._treeOutline=e,this._treeOutline.addEventListener(A.Events.ElementExpanded,this._clearState,this),this._treeOutline.addEventListener(A.Events.ElementCollapsed,this._clearState,this),this._treeOutline.addEventListener(Ji.Events.SelectedNodeChanged,this._clearState,this),x.TargetManager.instance().addModelListener(f.OverlayModel,f.Events.HighlightNodeRequested,this._highlightNode,this),x.TargetManager.instance().addModelListener(f.OverlayModel,f.Events.InspectModeWillBeToggled,this._clearState,this),this._currentHighlightedElement=null,this._alreadyExpandedParentElement=null,this._pendingHighlightNode=null,this._isModifyingTreeOutline=!1}_highlightNode(e){if(!r.Settings.instance().moduleSetting("highlightNodeOnHoverInOverlay").get())return;const t=e.data;this._throttler.schedule((async()=>{this._highlightNodeInternal(this._pendingHighlightNode),this._pendingHighlightNode=null})),this._pendingHighlightNode=this._treeOutline===Ji.forDOMModel(t.domModel())?t:null}_highlightNodeInternal(e){this._isModifyingTreeOutline=!0;let t=null;if(this._currentHighlightedElement){let e=this._currentHighlightedElement;for(;e&&e!==this._alreadyExpandedParentElement;){e.expanded&&e.collapse();const t=e.parent;e=t instanceof rn?t:null}}if(this._currentHighlightedElement=null,this._alreadyExpandedParentElement=null,e){let i=e;const n=this._treeOutline.treeElementByNode,s=e=>{const t=n.get(e);return!t||!t.expanded};for(;i&&s(i);)i=i.parentNode;this._alreadyExpandedParentElement=i?n.get(i):this._treeOutline.rootElement(),t=this._treeOutline.createTreeElementFor(e)}this._currentHighlightedElement=t,this._treeOutline.setHoverEffect(t),t&&t.reveal(!0),this._isModifyingTreeOutline=!1}_clearState(){this._isModifyingTreeOutline||(this._currentHighlightedElement=null,this._alreadyExpandedParentElement=null,this._pendingHighlightNode=null)}}var _n=Object.freeze({__proto__:null,ElementsTreeElementHighlighter:mn});class gn extends qt{constructor(){super(),this.registerRequiredCSS("elements/metricsSidebarPane.css",{enableLegacyPatching:!0}),this.originalPropertyData=null,this.previousPropertyDataCandidate=null,this._inlineStyle=null,this._highlightMode="",this._boxElements=[]}doUpdate(){if(this._isEditingMetrics)return Promise.resolve();const e=this.node(),t=this.cssModel();if(!e||e.nodeType()!==Node.ELEMENT_NODE||!t)return this.contentElement.removeChildren(),this.element.classList.add("collapsed"),Promise.resolve();if(!e.id)return Promise.resolve();const i=[t.computedStylePromise(e.id).then(function(t){t&&this.node()===e&&this._updateMetrics(t)}.bind(this)),t.inlineStylesPromise(e.id).then((t=>{t&&this.node()===e&&(this._inlineStyle=t.inlineStyle)}))];return Promise.all(i)}onCSSModelChanged(){this.update()}toggleVisibility(e){this.element.classList.toggle("invisible",!e)}_getPropertyValueAsPx(e,t){const i=e.get(t);return i?Number(i.replace(/px$/,"")||0):0}_getBox(e,t){const i="border"===t?"-width":"";return{left:this._getPropertyValueAsPx(e,t+"-left"+i),top:this._getPropertyValueAsPx(e,t+"-top"+i),right:this._getPropertyValueAsPx(e,t+"-right"+i),bottom:this._getPropertyValueAsPx(e,t+"-bottom"+i)}}_highlightDOMNode(e,t,i){i.consume();const n=this.node();if(e&&n){if(this._highlightMode===t)return;this._highlightMode=t,n.highlight(t)}else this._highlightMode="",f.OverlayModel.hideDOMNodeHighlight();for(const{element:e,name:i,backgroundColor:s}of this._boxElements)e.style.backgroundColor=n&&"all"!==t&&i!==t?"":s}_updateMetrics(e){const t=document.createElement("div");t.className="metrics";const n=this;function o(e,t,i,n){const s=document.createElement("div");s.className=i;const o=("position"!==t?t+"-":"")+i+n;let r=e.get(o);return void 0===r||((""===r||"position"!==t&&"0px"===r||"position"===t&&"auto"===r)&&(r="‒"),r=r.replace(/px$/,""),r=ue.toFixedIfFloating(r),s.textContent=r,s.addEventListener("dblclick",this.startEditing.bind(this,s,t,o,e),!1)),s}function r(e){let t=e.get("width");if(!t)return"";t=t.replace(/px$/,"");const i=Number(t);if(!isNaN(i)&&"border-box"===e.get("box-sizing")){const s=n._getBox(e,"border"),o=n._getBox(e,"padding");t=(i-s.left-s.right-o.left-o.right).toString()}return ue.toFixedIfFloating(t)}function l(e){let t=e.get("height");if(!t)return"";t=t.replace(/px$/,"");const i=Number(t);if(!isNaN(i)&&"border-box"===e.get("box-sizing")){const s=n._getBox(e,"border"),o=n._getBox(e,"padding");t=(i-s.top-s.bottom-o.top-o.bottom).toString()}return ue.toFixedIfFloating(t)}const a=new Set(["table-cell","table-column","table-column-group","table-footer-group","table-header-group","table-row","table-row-group"]),d=new Set(["table-column","table-column-group","table-footer-group","table-header-group","table-row","table-row-group"]),h=new Set(["static"]),c=["content","padding","border","margin","position"],u=[s.PageHighlight.Content,s.PageHighlight.Padding,s.PageHighlight.Border,s.PageHighlight.Margin,s.Color.fromRGBA([0,0,0,0])],p=[i.UIString("content"),i.UIString("padding"),i.UIString("border"),i.UIString("margin"),i.UIString("position")];let m=null;this._boxElements=[];for(let t=0;t<c.length;++t){const i=c[t],n=e.get("display"),_=e.get("position");if(!n||!_)continue;if("margin"===i&&a.has(n))continue;if("padding"===i&&d.has(n))continue;if("position"===i&&h.has(_))continue;const g=document.createElement("div");g.className=i;const f=u[t].asString(s.Format.RGBA)||"";if(g.style.backgroundColor=f,g.addEventListener("mouseover",this._highlightDOMNode.bind(this,!0,"position"===i?"all":i),!1),this._boxElements.push({element:g,name:i,backgroundColor:f}),"content"===i){const t=document.createElement("span");t.textContent=r(e),t.addEventListener("dblclick",this.startEditing.bind(this,t,"width","width",e),!1);const i=document.createElement("span");i.textContent=l(e),i.addEventListener("dblclick",this.startEditing.bind(this,i,"height","height",e),!1),g.appendChild(t),k.createTextChild(g," × "),g.appendChild(i)}else{const n="border"===i?"-width":"",s=document.createElement("div");s.className="label",s.textContent=p[t],g.appendChild(s),g.appendChild(o.call(this,e,i,"top",n)),g.appendChild(document.createElement("br")),g.appendChild(o.call(this,e,i,"left",n)),m&&g.appendChild(m),g.appendChild(o.call(this,e,i,"right",n)),g.appendChild(document.createElement("br")),g.appendChild(o.call(this,e,i,"bottom",n))}m=g}t.appendChild(m),t.addEventListener("mouseover",this._highlightDOMNode.bind(this,!1,"all"),!1),t.addEventListener("mouseleave",this._highlightDOMNode.bind(this,!1,"all"),!1),this.contentElement.removeChildren(),this.contentElement.appendChild(t),this.element.classList.remove("collapsed")}startEditing(e,t,i,n){if(k.isBeingEdited(e))return;const s={box:t,styleProperty:i,computedStyle:n,keyDownHandler:()=>{}},o=this._handleKeyDown.bind(this,s);s.keyDownHandler=o,e.addEventListener("keydown",o,!1),this._isEditingMetrics=!0;const r=new z.Config(this._editingCommitted.bind(this),this.editingCancelled.bind(this),s);z.InplaceEditor.startEditing(e,r);const l=e.getComponentSelection();l&&l.selectAllChildren(e)}_handleKeyDown(e,t){const i=t.currentTarget;k.handleElementValueModifications(t,i,function(t,n){this._applyUserInput(i,n,t,e,!1)}.bind(this),void 0,(function(t,i,n){return"margin"!==e.styleProperty&&i<0&&(i=0),t+i+n}))}editingEnded(e,t){this.originalPropertyData=null,this.previousPropertyDataCandidate=null,e.removeEventListener("keydown",t.keyDownHandler,!1),delete this._isEditingMetrics}editingCancelled(e,t){if(this._inlineStyle)if(this.originalPropertyData)this._inlineStyle.allProperties()[this.originalPropertyData.index].setText(this.originalPropertyData.propertyText||"",!1);else{const e=this._inlineStyle.pastLastSourcePropertyIndex();e&&this._inlineStyle.allProperties()[e-1].setText("",!1)}this.editingEnded(e,t),this.update()}_applyUserInput(e,t,i,n,s){if(!this._inlineStyle)return this.editingCancelled(e,n);if(s&&t===i)return this.editingCancelled(e,n);"position"===n.box||t&&"‒"!==t?"position"!==n.box||t&&"‒"!==t||(t="auto"):t="0px",t=t.toLowerCase(),/^\d+$/.test(t)&&(t+="px");const o=n.styleProperty,r=n.computedStyle;if("border-box"===r.get("box-sizing")&&("width"===o||"height"===o)){if(!t.match(/px$/))return void h.Console.instance().error("For elements with box-sizing: border-box, only absolute content area dimensions can be applied");const e=this._getBox(r,"border"),i=this._getBox(r,"padding");let n=Number(t.replace(/px$/,""));if(isNaN(n))return;n+="width"===o?e.left+e.right+i.left+i.right:e.top+e.bottom+i.top+i.bottom,t=n+"px"}this.previousPropertyDataCandidate=null;const l=this._inlineStyle.allProperties();for(let e=0;e<l.length;++e){const i=l[e];if(i.name===n.styleProperty&&i.activeInStyle())return this.previousPropertyDataCandidate=i,void i.setValue(t,s,!0,a.bind(this))}function a(e){if(e){if(this.originalPropertyData||(this.originalPropertyData=this.previousPropertyDataCandidate),this._highlightMode){const e=this.node();if(!e)return;e.highlight(this._highlightMode)}s&&this.update()}}this._inlineStyle.appendProperty(n.styleProperty,t,a.bind(this))}_editingCommitted(e,t,i,n){this.editingEnded(e,n),this._applyUserInput(e,t,i,n,!0)}}var fn=Object.freeze({__proto__:null,MetricsSidebarPane:gn});const yn=e=>({parentNode:e.parentNode?yn(e.parentNode):null,id:e.id,nodeType:e.nodeType(),pseudoType:e.pseudoType(),shadowRootType:e.shadowRootType(),nodeName:e.nodeName(),nodeNameNicelyCased:e.nodeNameInCorrectCase(),legacyDomNode:e,highlightNode:()=>e.highlight(),clearHighlight:()=>f.OverlayModel.hideDOMNodeHighlight(),getAttribute:e.getAttribute.bind(e)});let En;class vn extends X.Panel{constructor(){super("elements"),this.registerRequiredCSS("elements/elementsPanel.css",{enableLegacyPatching:!0}),this._splitWidget=new Y.SplitWidget(!0,!0,"elementsPanelSplitViewState",325,325),this._splitWidget.addEventListener(Y.Events.SidebarSizeChanged,this._updateTreeOutlineVisibleWidth.bind(this)),this._splitWidget.show(this.element),this._searchableView=new Q.SearchableView(this,null),this._searchableView.setMinimumSize(25,28),this._searchableView.setPlaceholder(i.UIString("Find by string, selector, or XPath"));const e=this._searchableView.element;this._contentElement=document.createElement("div");const t=document.createElement("div");c.experiments.isEnabled("fullAccessibilityTree")&&this._initializeFullAccessibilityTreeView(e),e.appendChild(this._contentElement),e.appendChild(t),this._splitWidget.setMainWidget(this._searchableView),this._splitMode=null,this._contentElement.id="elements-content",r.Settings.instance().moduleSetting("domWordWrap").get()&&this._contentElement.classList.add("elements-wrap"),r.Settings.instance().moduleSetting("domWordWrap").addChangeListener(this._domWordWrapSettingChanged.bind(this)),t.id="elements-crumbs",this.domTreeButton&&(this._accessibilityTreeView=new ze(this.domTreeButton)),this._breadcrumbs=new Di,this._breadcrumbs.addEventListener("node-selected",(e=>{this._crumbNodeSelected(e)})),t.appendChild(this._breadcrumbs),this._stylesWidget=ni.instance(),this._computedStyleWidget=new bi,this._metricsWidget=new gn,r.Settings.instance().moduleSetting("sidebarPosition").addChangeListener(this._updateSidebarPosition.bind(this)),this._updateSidebarPosition(),this._treeOutlines=new Set,this._treeOutlineHeaders=new Map,this._gridStyleTrackerByCSSModel=new Map,x.TargetManager.instance().observeModels(p.DOMModel,this),x.TargetManager.instance().addEventListener(x.Events.NameChanged,(e=>this._targetNameChanged(e.data))),r.Settings.instance().moduleSetting("showUAShadowDOM").addChangeListener(this._showUAShadowDOMChanged.bind(this)),x.TargetManager.instance().addModelListener(p.DOMModel,p.Events.DocumentUpdated,this._documentUpdatedEvent,this),oe.ExtensionServer.instance().addEventListener(oe.Events.SidebarPaneAdded,this._extensionSidebarPaneAdded,this),this._searchResults,this._currentSearchResultIndex=-1,this._pendingNodeReveal=!1}_initializeFullAccessibilityTreeView(e){this._accessibilityTreeButton=document.createElement("button"),this._accessibilityTreeButton.textContent=he`Switch to Accessibility Tree view`,this._accessibilityTreeButton.addEventListener("click",this._showAccessibilityTree.bind(this)),this.domTreeButton=document.createElement("button"),this.domTreeButton.textContent=he`Switch to DOM Tree view`,this.domTreeButton.addEventListener("click",this._showDOMTree.bind(this)),e.appendChild(this._accessibilityTreeButton)}_showAccessibilityTree(){this._accessibilityTreeView&&this._splitWidget.setMainWidget(this._accessibilityTreeView)}_showDOMTree(){this._splitWidget.setMainWidget(this._searchableView)}static instance(e={forceNew:null}){const{forceNew:t}=e;return En&&!t||(En=new vn),En}_revealProperty(e){return this.sidebarPaneView&&this._stylesViewToReveal?this.sidebarPaneView.showView(this._stylesViewToReveal).then((()=>{this._stylesWidget.revealProperty(e)})):Promise.resolve()}resolveLocation(e){return this.sidebarPaneView||null}showToolbarPane(e,t){this._stylesWidget.showToolbarPane(e,t)}modelAdded(e){const t=e.parentModel();let i=t?Ji.forDOMModel(t):null;if(!i&&(i=new Ji(!0,!0),i.setWordWrap(r.Settings.instance().moduleSetting("domWordWrap").get()),i.addEventListener(Ji.Events.SelectedNodeChanged,this._selectedNodeChanged,this),i.addEventListener(Ji.Events.ElementsTreeUpdated,this._updateBreadcrumbIfNeeded,this),new mn(i),this._treeOutlines.add(i),e.target().parentTarget())){const t=document.createElement("div");t.classList.add("elements-tree-header"),this._treeOutlineHeaders.set(i,t),this._targetNameChanged(e.target())}i.wireToDOMModel(e),this._setupStyleTracking(e.cssModel()),this.isShowing()&&this.wasShown()}modelRemoved(e){const t=Ji.forDOMModel(e);if(!t)return;if(t.unwireFromDOMModel(e),e.parentModel())return;this._treeOutlines.delete(t);const i=this._treeOutlineHeaders.get(t);i&&i.remove(),this._treeOutlineHeaders.delete(t),t.element.remove(),this._removeStyleTracking(e.cssModel())}_targetNameChanged(e){const t=e.model(p.DOMModel);if(!t)return;const n=Ji.forDOMModel(t);if(!n)return;const s=this._treeOutlineHeaders.get(n);s&&(s.removeChildren(),s.createChild("div","elements-tree-header-frame").textContent=i.UIString("Frame"),s.appendChild(ne.Linkifier.linkifyURL(e.inspectedURL(),{text:e.name()})))}_updateTreeOutlineVisibleWidth(){if(!this._treeOutlines.size)return;let e=this._splitWidget.element.offsetWidth;this._splitWidget.isVertical()&&(e-=this._splitWidget.sidebarSize());for(const t of this._treeOutlines)t.setVisibleWidth(e)}focus(){this._treeOutlines.size&&this._treeOutlines.values().next().value.focus()}searchableView(){return this._searchableView}wasShown(){M.Context.instance().setFlavor(vn,this);for(const e of this._treeOutlines)if(e.element.parentElement!==this._contentElement){const t=this._treeOutlineHeaders.get(e);t&&this._contentElement.appendChild(t),this._contentElement.appendChild(e.element)}super.wasShown();const e=x.TargetManager.instance().models(p.DOMModel);for(const t of e){if(t.parentModel())continue;const e=Ji.forDOMModel(t);e&&(e.setVisible(!0),e.rootDOMNode||(t.existingDocument()?(e.rootDOMNode=t.existingDocument(),this._documentUpdated(t)):t.requestDocument()))}}willHide(){f.OverlayModel.hideDOMNodeHighlight();for(const e of this._treeOutlines){e.setVisible(!1),this._contentElement.removeChild(e.element);const t=this._treeOutlineHeaders.get(e);t&&this._contentElement.removeChild(t)}super.willHide(),M.Context.instance().setFlavor(vn,null)}onResize(){this.element.window().requestAnimationFrame(this._updateSidebarPosition.bind(this)),this._updateTreeOutlineVisibleWidth()}_selectedNodeChanged(e){let t=e.data.node;t&&t.pseudoType()&&!t.parentNode&&(t=null);const i=e.data.focus;for(const e of this._treeOutlines)t&&Ji.forDOMModel(t.domModel())===e||e.selectDOMNode(null);if(t){const e=[yn(t)];for(let i=t.parentNode;i;i=i.parentNode)e.push(yn(i));this._breadcrumbs.data={crumbs:e,selectedNode:yn(t)}}else this._breadcrumbs.data={crumbs:[],selectedNode:null};if(M.Context.instance().setFlavor(p.DOMNode,t),!t)return;t.setAsInspectedNode(),this._accessibilityTreeView&&this._accessibilityTreeView.setNode(t),i&&(this._selectedNodeOnReset=t,this._hasNonDefaultSelectedNode=!0);const n=t.domModel().runtimeModel().executionContexts(),s=t.frameId();for(const e of n)if(e.frameId===s){M.Context.instance().setFlavor(w.ExecutionContext,e);break}}_documentUpdatedEvent(e){const t=e.data;this._documentUpdated(t),this._removeStyleTracking(t.cssModel()),this._setupStyleTracking(t.cssModel())}_documentUpdated(e){if(this._searchableView.resetSearch(),!e.existingDocument())return void(this.isShowing()&&e.requestDocument());if(this._hasNonDefaultSelectedNode=!1,this._omitDefaultSelection)return;const t=this._selectedNodeOnReset;(async function(e,i){const n=i?i.path():null,s=n?await e.pushNodeByPathToFrontend(n):null;if(t!==this._selectedNodeOnReset)return;let o=s?e.nodeForId(s):null;if(!o){const t=e.existingDocument();o=t?t.body||t.documentElement:null}o&&(this._setDefaultSelectedNode(o),this._lastSelectedNodeSelectedForTest())}).call(this,e,this._selectedNodeOnReset||null)}_lastSelectedNodeSelectedForTest(){}_setDefaultSelectedNode(e){if(!e||this._hasNonDefaultSelectedNode||this._pendingNodeReveal)return;const t=Ji.forDOMModel(e.domModel());t&&(this.selectDOMNode(e),t.selectedTreeElement&&t.selectedTreeElement.expand())}searchCanceled(){this._searchConfig=void 0,this._hideSearchHighlights(),this._searchableView.updateSearchMatchesCount(0),this._currentSearchResultIndex=-1,delete this._searchResults,p.DOMModel.cancelSearch()}performSearch(e,t,i){const n=e.query,s=n.trim();if(!s.length)return;this._searchConfig&&this._searchConfig.query===n?this._hideSearchHighlights():this.searchCanceled(),this._searchConfig=e;const o=r.Settings.instance().moduleSetting("showUAShadowDOM").get(),l=x.TargetManager.instance().models(p.DOMModel),a=l.map((e=>e.performSearch(s,o)));Promise.all(a).then((e=>{this._searchResults=[];for(let t=0;t<e.length;++t){const i=e[t];for(let e=0;e<i;++e)this._searchResults.push({domModel:l[t],index:e,node:void 0})}if(this._searchableView.updateSearchMatchesCount(this._searchResults.length),!this._searchResults.length)return;this._currentSearchResultIndex>=this._searchResults.length&&(this._currentSearchResultIndex=-1);let n=this._currentSearchResultIndex;t&&(n=-1===this._currentSearchResultIndex?i?-1:0:i?n-1:n+1,this._jumpToSearchResult(n))}))}_domWordWrapSettingChanged(e){this._contentElement.classList.toggle("elements-wrap",e.data);for(const t of this._treeOutlines)t.setWordWrap(e.data)}switchToAndFocus(e){this._searchableView.cancelSearch(),J.ViewManager.instance().showView("elements").then((()=>this.selectDOMNode(e,!0)))}_jumpToSearchResult(e){this._searchResults&&(this._currentSearchResultIndex=(e+this._searchResults.length)%this._searchResults.length,this._highlightCurrentSearchResult())}jumpToNextSearchResult(){this._searchResults&&this._searchConfig&&this.performSearch(this._searchConfig,!0)}jumpToPreviousSearchResult(){this._searchResults&&this._searchConfig&&this.performSearch(this._searchConfig,!0,!0)}supportsCaseSensitiveSearch(){return!1}supportsRegexSearch(){return!1}_highlightCurrentSearchResult(){const e=this._currentSearchResultIndex,t=this._searchResults;if(!t)return;const i=t[e];if(this._searchableView.updateCurrentMatchIndex(e),null===i.node)return;if(void 0===i.node)return void i.domModel.searchResult(i.index).then((e=>{i.node=e;this._searchConfig&&this._searchResults&&-1!==this._currentSearchResultIndex&&this._highlightCurrentSearchResult()}));const n=this._treeElementForNode(i.node);if(i.node.scrollIntoView(),n){this._searchConfig&&n.highlightSearchResults(this._searchConfig.query),n.reveal();const e=n.listItemElement.getElementsByClassName(k.highlightedSearchResultClassName);e.length&&e[0].scrollIntoViewIfNeeded(!1)}}_hideSearchHighlights(){if(!this._searchResults||!this._searchResults.length||-1===this._currentSearchResultIndex)return;const e=this._searchResults[this._currentSearchResultIndex];if(!e.node)return;const t=this._treeElementForNode(e.node);t&&t.hideSearchHighlights()}selectedDOMNode(){for(const e of this._treeOutlines)if(e.selectedDOMNode())return e.selectedDOMNode();return null}selectDOMNode(e,t){for(const i of this._treeOutlines){Ji.forDOMModel(e.domModel())===i?i.selectDOMNode(e,t):i.selectDOMNode(null)}}_updateBreadcrumbIfNeeded(e){const t=e.data,i=this.selectedDOMNode();if(!i)return void(this._breadcrumbs.data={crumbs:[],selectedNode:null});const n=yn(i),s=[n];for(let e=i.parentNode;e;e=e.parentNode)s.push(yn(e));const o=t.map(yn),r=new Map;o.forEach((e=>r.set(e.id,e)));const l=s.map((e=>r.get(e.id)||e));this._breadcrumbs.data={crumbs:l,selectedNode:n}}_crumbNodeSelected(e){const t=e.data;this.selectDOMNode(t,!0)}_treeOutlineForNode(e){return e?Ji.forDOMModel(e.domModel()):null}_treeElementForNode(e){const t=this._treeOutlineForNode(e);return t?t.findTreeElement(e):null}_leaveUserAgentShadowDOM(e){let t;for(;(t=e.ancestorUserAgentShadowRoot())&&t.parentNode;)e=t.parentNode;return e}revealAndSelectNode(e,t,i){return this._omitDefaultSelection=!0,e=r.Settings.instance().moduleSetting("showUAShadowDOM").get()?e:this._leaveUserAgentShadowDOM(e),i||e.highlightForTwoSeconds(),J.ViewManager.instance().showView("elements",!1,!t).then((()=>{this.selectDOMNode(e,t),delete this._omitDefaultSelection,this._notFirstInspectElement||(vn._firstInspectElementNodeNameForTest=e.nodeName(),vn._firstInspectElementCompletedForTest(),ae.InspectorFrontendHostInstance.inspectElementCompleted()),this._notFirstInspectElement=!0}))}_showUAShadowDOMChanged(){for(const e of this._treeOutlines)e.update()}_setupTextSelectionHack(e){const t=n.bind(this),i=e=>{0===e.buttons&&n.call(this)};function n(){this._splitWidget.element.classList.remove("disable-resizer-for-elements-hack"),e.style.removeProperty("left"),e.style.removeProperty("padding-left"),e.style.removeProperty("width"),e.style.removeProperty("position"),e.window().removeEventListener("blur",t),e.window().removeEventListener("contextmenu",t,!0),e.window().removeEventListener("dragstart",t,!0),e.window().removeEventListener("mousemove",i,!0),e.window().removeEventListener("mouseup",t,!0),e.window().removeEventListener("visibilitychange",t)}e.addEventListener("mousedown",(n=>{if(0!==n.button)return;this._splitWidget.element.classList.add("disable-resizer-for-elements-hack"),e.style.setProperty("height",e.offsetHeight+"px");e.style.setProperty("left","-1000000px"),e.style.setProperty("padding-left","1000000px"),e.style.setProperty("width","calc(100% + 1000000px)"),e.style.setProperty("position","fixed"),e.window().addEventListener("blur",t),e.window().addEventListener("contextmenu",t,!0),e.window().addEventListener("dragstart",t,!0),e.window().addEventListener("mousemove",i,!0),e.window().addEventListener("mouseup",t,!0),e.window().addEventListener("visibilitychange",t)}),!0)}_initializeSidebarPanes(e){this._splitWidget.setVertical(e===bn.Vertical),this.showToolbarPane(null,null);const t=new N.VBox;t.element.classList.add("style-panes-wrapper"),this._stylesWidget.show(t.element),this._setupTextSelectionHack(t.element);const n=new N.VBox;n.element.classList.add("style-panes-wrapper"),this._computedStyleWidget.show(n.element);const s=new Y.SplitWidget(!0,!0,"elements.styles.sidebar.width",100);s.setMainWidget(t),s.hideSidebar(),s.enableShowModeSaving(),s.addEventListener(Y.Events.ShowModeChanged,(()=>{r()})),this._stylesWidget.addEventListener(si.InitialUpdateCompleted,(()=>{this._stylesWidget.appendToolbarItem(s.createShowHideSidebarButton(he`Computed Styles sidebar`))}));const o=()=>{this._metricsWidget.show(n.element,this._computedStyleWidget.element),this._metricsWidget.toggleVisibility(!0),this._stylesWidget.removeEventListener(si.StylesUpdateCompleted,a)},r=()=>{s.showMode()===Y.ShowMode.Both?o():(this._metricsWidget.show(t.element),this._stylesWidget.hasMatchedStyles||this._metricsWidget.toggleVisibility(!1),this._stylesWidget.addEventListener(si.StylesUpdateCompleted,a))};let l=!1;const a=e=>{this._metricsWidget.toggleVisibility(e.data.hasMatchedStyles)};this.sidebarPaneView=J.ViewManager.instance().createTabbedLocation((()=>J.ViewManager.instance().showView("elements")));const d=this.sidebarPaneView.tabbedPane();this._splitMode!==bn.Vertical&&this._splitWidget.installResizer(d.headerElement());const h=new Z.SimpleView(i.UIString("Styles"));this.sidebarPaneView.appendView(h),h.element.classList.add("flex-auto"),s.show(h.element);const c=new Z.SimpleView(i.UIString("Computed"));c.element.classList.add("composite","fill"),d.addEventListener(ee.Events.TabSelected,(e=>{const t=e.data.tabId;t===i.UIString("Computed")?(n.show(c.element),o()):t===i.UIString("Styles")&&(s.setSidebarWidget(n),r()),l?re.sidebarPaneShown(t):l=!0}),this),this.sidebarPaneView.appendView(c),this._stylesViewToReveal=h,this.sidebarPaneView.appendApplicableItems("elements-sidebar");const u=oe.ExtensionServer.instance().sidebarPanes();for(let e=0;e<u.length;++e)this._addExtensionSidebarPane(u[e]);this._splitWidget.setSidebarWidget(this.sidebarPaneView.tabbedPane())}_updateSidebarPosition(){if(this.sidebarPaneView&&this.sidebarPaneView.tabbedPane().shouldHideOnDetach())return;const e=r.Settings.instance().moduleSetting("sidebarPosition").get();let t=bn.Horizontal;if(("right"===e||"auto"===e&&te.InspectorView.instance().element.offsetWidth>680)&&(t=bn.Vertical),!this.sidebarPaneView)return void this._initializeSidebarPanes(t);if(t===this._splitMode)return;this._splitMode=t;const i=this.sidebarPaneView.tabbedPane();this._splitWidget.uninstallResizer(i.headerElement()),this._splitWidget.setVertical(this._splitMode===bn.Vertical),this.showToolbarPane(null,null),this._splitMode!==bn.Vertical&&this._splitWidget.installResizer(i.headerElement())}_extensionSidebarPaneAdded(e){const t=e.data;this._addExtensionSidebarPane(t)}_addExtensionSidebarPane(e){this.sidebarPaneView&&e.panelName()===this.name&&this.sidebarPaneView.appendView(e)}_setupStyleTracking(e){const t=e.createCSSPropertyTracker(Sn);t.start(),this._gridStyleTrackerByCSSModel.set(e,t),t.addEventListener(_.CSSPropertyTrackerEvents.TrackedCSSPropertiesUpdated,this._trackedCSSPropertiesUpdated,this)}_removeStyleTracking(e){const t=this._gridStyleTrackerByCSSModel.get(e);t&&(t.stop(),this._gridStyleTrackerByCSSModel.delete(e),t.removeEventListener(_.CSSPropertyTrackerEvents.TrackedCSSPropertiesUpdated,this._trackedCSSPropertiesUpdated,this))}_trackedCSSPropertiesUpdated(e){const t=e.data.domNodes;for(const e of t){if(!e)continue;const t=this._treeElementForNode(e);t&&t.updateStyleAdorners()}}}vn._firstInspectElementCompletedForTest=function(){},vn._firstInspectElementNodeNameForTest="";const bn={Vertical:Symbol("Vertical"),Horizontal:Symbol("Horizontal")},Sn=[{name:"display",value:"grid"},{name:"display",value:"inline-grid"},{name:"display",value:"flex"},{name:"display",value:"inline-flex"}];let Cn,wn;class xn{appendApplicableItems(e,t,s){if(!(s instanceof T.RemoteObject&&s.isNode()||s instanceof p.DOMNode||s instanceof p.DeferredDOMNode))return;if(vn.instance().element.isAncestor(e.target))return;const o=n.reveal.bind(n.Revealer,s);t.revealSection().appendItem(i.UIString("Reveal in Elements panel"),o)}static instance(){return Cn||(Cn=new xn),Cn}}class Tn{handleAction(e,t){const i=M.Context.instance().flavor(p.DOMNode);if(!i)return!0;const n=Ji.forDOMModel(i.domModel());if(!n)return!0;switch(t){case"elements.hide-element":return n.toggleHideElement(i),!0;case"elements.edit-as-html":return n.toggleEditAsHTML(i),!0;case"elements.duplicate-element":return n.duplicateNode(i),!0;case"elements.undo":return p.DOMModelUndoStack.instance().undo(),vn.instance()._stylesWidget.forceUpdate(),!0;case"elements.redo":return p.DOMModelUndoStack.instance().redo(),vn.instance()._stylesWidget.forceUpdate(),!0}return!1}static instance(e={forceNew:null}){const{forceNew:t}=e;return wn&&!t||(wn=new Tn),wn}}var Nn=Object.freeze({__proto__:null,ElementsPanel:vn,_splitMode:bn,ContextMenuProvider:xn,DOMNodeRevealer:class{reveal(e,t){const i=vn.instance();return i._pendingNodeReveal=!0,new Promise((function(n,s){if(e instanceof p.DOMNode)o(e);else if(e instanceof p.DeferredDOMNode)e.resolve((function(e){if(!e){const e=he`The deferred DOM Node could not be resolved into a valid node.`;return h.Console.instance().warn(e),void s(new Error(e))}o(e)}));else if(e instanceof T.RemoteObject){const t=e.runtimeModel().target().model(p.DOMModel);t?t.pushObjectAsNodeToFrontend(e).then((function(e){if(!e){const e=he`The remote object could not be resolved into a valid node.`;return h.Console.instance().warn(e),void s(new Error(e))}o(e)})):s(new Error("Could not resolve a node to reveal."))}else s(new Error("Can't reveal a non-node.")),i._pendingNodeReveal=!1;function o(o){i._pendingNodeReveal=!1;let r=o;for(;r.parentNode;)r=r.parentNode;const l=!(r instanceof p.DOMDocument);if(!(e instanceof p.DOMDocument)&&l){const e=he`Node cannot be found in the current page.`;return h.Console.instance().warn(e),void s(new Error(e))}o?i.revealAndSelectNode(o,!t).then(n):s(new Error("Could not resolve node to reveal."))}}))}},CSSPropertyRevealer:class{reveal(e){return vn.instance()._revealProperty(e)}},ElementsActionDelegate:Tn,PseudoStateMarkerDecorator:class{decorate(e){const t=e.domModel().cssModel().pseudoState(e);return t?{color:"orange",title:i.UIString("Element state: %s",":"+t.join(", :"))}:null}}});let Mn,On;class Pn{constructor(){this._toggleSearchAction=q.ActionRegistry.instance().action("elements.toggle-element-search"),this._mode=Protocol.Overlay.InspectMode.None,x.TargetManager.instance().addEventListener(x.Events.SuspendStateChanged,this._suspendStateChanged,this),x.TargetManager.instance().addModelListener(f.OverlayModel,f.Events.ExitedInspectMode,(()=>this._setMode(Protocol.Overlay.InspectMode.None))),f.OverlayModel.setInspectNodeHandler(this._inspectNode.bind(this)),x.TargetManager.instance().observeModels(f.OverlayModel,this),this._showDetailedInspectTooltipSetting=r.Settings.instance().moduleSetting("showDetailedInspectTooltip"),this._showDetailedInspectTooltipSetting.addChangeListener(this._showDetailedInspectTooltipChanged.bind(this)),document.addEventListener("keydown",(e=>{e.keyCode===H.Keys.Esc.code&&this._isInInspectElementMode()&&(this._setMode(Protocol.Overlay.InspectMode.None),e.consume(!0))}),!0)}static instance({forceNew:e}={forceNew:!1}){return Mn&&!e||(Mn=new Pn),Mn}modelAdded(e){this._mode!==Protocol.Overlay.InspectMode.None&&e.setInspectMode(this._mode,this._showDetailedInspectTooltipSetting.get())}modelRemoved(e){}_isInInspectElementMode(){return this._mode!==Protocol.Overlay.InspectMode.None}_toggleInspectMode(){let e;e=this._isInInspectElementMode()?Protocol.Overlay.InspectMode.None:r.Settings.instance().moduleSetting("showUAShadowDOM").get()?Protocol.Overlay.InspectMode.SearchForUAShadowDOM:Protocol.Overlay.InspectMode.SearchForNode,this._setMode(e)}_captureScreenshotMode(){this._setMode(Protocol.Overlay.InspectMode.CaptureAreaScreenshot)}_setMode(e){if(!x.TargetManager.instance().allTargetsSuspended()){this._mode=e;for(const t of x.TargetManager.instance().models(f.OverlayModel))t.setInspectMode(e,this._showDetailedInspectTooltipSetting.get());this._toggleSearchAction&&this._toggleSearchAction.setToggled(this._isInInspectElementMode())}}_suspendStateChanged(){x.TargetManager.instance().allTargetsSuspended()&&(this._mode=Protocol.Overlay.InspectMode.None,this._toggleSearchAction&&this._toggleSearchAction.setToggled(!1))}_inspectNode(e){vn.instance().revealAndSelectNode(e,!0,!0)}_showDetailedInspectTooltipChanged(){this._setMode(this._mode)}}class Ln{handleAction(e,t){return!c.Runtime.queryParam("isSharedWorker")&&(Mn=Pn.instance(),!!Mn&&("elements.toggle-element-search"===t?Mn._toggleInspectMode():"elements.capture-area-screenshot"===t&&Mn._captureScreenshotMode(),!0))}static instance(e={forceNew:null}){const{forceNew:t}=e;return On&&!t||(On=new Ln),On}}var In=Object.freeze({__proto__:null,InspectElementModeController:Pn,ToggleSearchActionDelegate:Ln});let kn;class Dn extends P.ThrottledWidget{constructor(){super(),this._toolbarItems=[],this._showForAncestorsSetting=r.Settings.instance().moduleSetting("showEventListenersForAncestors"),this._showForAncestorsSetting.addChangeListener(this.update.bind(this)),this._dispatchFilterBySetting=r.Settings.instance().createSetting("eventListenerDispatchFilterType",Rn.All),this._dispatchFilterBySetting.addChangeListener(this.update.bind(this)),this._showFrameworkListenersSetting=r.Settings.instance().createSetting("showFrameowkrListeners",!0),this._showFrameworkListenersSetting.setTitle(i.UIString("Framework listeners")),this._showFrameworkListenersSetting.addChangeListener(this._showFrameworkListenersChanged.bind(this)),this._eventListenersView=new Ae.EventListenersView(this.update.bind(this)),this._eventListenersView.show(this.element);const e=new W.ToolbarButton(i.UIString("Refresh"),"largeicon-refresh");e.addEventListener(W.ToolbarButton.Events.Click,this.update.bind(this)),this._toolbarItems.push(e),this._toolbarItems.push(new W.ToolbarSettingCheckbox(this._showForAncestorsSetting,i.UIString("Show listeners on the ancestors"),i.UIString("Ancestors")));const t=new W.ToolbarComboBox(this._onDispatchFilterTypeChanged.bind(this),he`Event listeners category`);function n(e,i){const n=t.createOption(e,i);i===this._dispatchFilterBySetting.get()&&t.select(n)}n.call(this,i.UIString("All"),Rn.All),n.call(this,i.UIString("Passive"),Rn.Passive),n.call(this,i.UIString("Blocking"),Rn.Blocking),t.setMaxWidth(200),this._toolbarItems.push(t),this._toolbarItems.push(new W.ToolbarSettingCheckbox(this._showFrameworkListenersSetting,i.UIString("Resolve event listeners bound with framework"))),M.Context.instance().addFlavorChangeListener(p.DOMNode,this.update,this),this.update()}static instance(e={forceNew:null}){const{forceNew:t}=e;return kn&&!t||(kn=new Dn),kn}doUpdate(){this._lastRequestedNode&&(this._lastRequestedNode.domModel().runtimeModel().releaseObjectGroup(An),delete this._lastRequestedNode);const e=M.Context.instance().flavor(p.DOMNode);if(!e)return this._eventListenersView.reset(),this._eventListenersView.addEmptyHolderIfNeeded(),Promise.resolve();this._lastRequestedNode=e;const t=!this._showForAncestorsSetting.get(),i=[];if(i.push(e.resolveToObject(An)),!t){let t=e.parentNode;for(;t;)i.push(t.resolveToObject(An)),t=t.parentNode;i.push(this._windowObjectInNodeContext(e))}return Promise.all(i).then(this._eventListenersView.addObjects.bind(this._eventListenersView)).then(this._showFrameworkListenersChanged.bind(this))}toolbarItems(){return this._toolbarItems}_onDispatchFilterTypeChanged(e){const t=e.target;this._dispatchFilterBySetting.set(t.value)}_showFrameworkListenersChanged(){const e=this._dispatchFilterBySetting.get(),t=e===Rn.All||e===Rn.Passive,i=e===Rn.All||e===Rn.Blocking;this._eventListenersView.showFrameworkListeners(this._showFrameworkListenersSetting.get(),t,i)}_windowObjectInNodeContext(e){const t=e.domModel().runtimeModel().executionContexts();let i=t[0];if(e.frameId())for(let n=0;n<t.length;++n){const s=t[n];s.frameId===e.frameId()&&s.isDefault&&(i=s)}return i.evaluate({expression:"self",objectGroup:An,includeCommandLineAPI:!1,silent:!0,returnByValue:!1,generatePreview:!1,throwOnSideEffect:void 0,timeout:void 0,disableBreaks:void 0,replMode:void 0,allowUnsafeEvalBlockedByCSP:void 0},!1,!1).then((e=>"object"in e?e.object:null))}_eventListenersArrivedForTest(){}}const Rn={All:"All",Blocking:"Blocking",Passive:"Passive"},An="event-listeners-panel";var Fn=Object.freeze({__proto__:null,EventListenersWidget:Dn,DispatchFilterBy:Rn,_objectGroupName:An});let Bn;class Hn extends P.ThrottledWidget{constructor(){super(!0),this.registerRequiredCSS("elements/propertiesWidget.css",{enableLegacyPatching:!1}),x.TargetManager.instance().addModelListener(p.DOMModel,p.Events.AttrModified,this._onNodeChange,this),x.TargetManager.instance().addModelListener(p.DOMModel,p.Events.AttrRemoved,this._onNodeChange,this),x.TargetManager.instance().addModelListener(p.DOMModel,p.Events.CharacterDataModified,this._onNodeChange,this),x.TargetManager.instance().addModelListener(p.DOMModel,p.Events.ChildNodeCountUpdated,this._onNodeChange,this),M.Context.instance().addFlavorChangeListener(p.DOMNode,this._setNode,this),this._node=M.Context.instance().flavor(p.DOMNode),this._treeOutline=new Fe.ObjectPropertiesSectionsTreeOutline({readOnly:!0}),this._treeOutline.setShowSelectionOnKeyboardFocus(!0,!1),this._expandController=new Fe.ObjectPropertiesSectionsTreeExpandController(this._treeOutline),this.contentElement.appendChild(this._treeOutline.element),this._treeOutline.addEventListener(A.Events.ElementExpanded,(()=>{re.actionTaken(le.Action.DOMPropertiesExpanded)})),this.update()}static instance(e={forceNew:null}){const{forceNew:t}=e;return Bn&&!t||(Bn=new Hn),Bn}_setNode(e){this._node=e.data,this.update()}async doUpdate(){if(this._lastRequestedNode&&(this._lastRequestedNode.domModel().runtimeModel().releaseObjectGroup(Un),delete this._lastRequestedNode),!this._node)return void this._treeOutline.removeChildren();this._lastRequestedNode=this._node;const e=await this._node.resolveToObject(Un);if(!e)return;const t=await e.callFunction((function(){let e=this;const t={__proto__:null};let i=1;for(;e;)t[i++]=e,e=e.__proto__;return t}));if(e.release(),!t.object||t.wasThrown)return;const i=await t.object.getOwnProperties(!1);if(t.object.release(),!i||!i.properties)return;const n=i.properties;this._treeOutline.removeChildren();let s=!1;for(let e=0;e<n.length;++e){if(!parseInt(n[e].name,10))continue;const t=n[e].value;if(!t)continue;let i=t.description;if(!i)continue;i=i.replace(/Prototype$/,"");const o=this._createSectionTreeElement(t,i);this._treeOutline.appendChild(o),s||(o.select(!0,!1),s=!0)}}_createSectionTreeElement(e,t){const i=document.createElement("span");i.classList.add("tree-element-title"),i.textContent=t;const n=new Fe.RootElement(e);return n.title=i,this._expandController.watchSection(t,n),n}_onNodeChange(e){if(!this._node)return;const t=e.data,i=t instanceof p.DOMNode?t:t.node;this._node===i&&this.update()}}const Un="properties-sidebar-pane";var Vn=Object.freeze({__proto__:null,PropertiesWidget:Hn,_objectGroupName:Un});let Wn;class zn extends P.ThrottledWidget{constructor(){super(!0),this.registerRequiredCSS("elements/nodeStackTraceWidget.css",{enableLegacyPatching:!1}),this._noStackTraceElement=this.contentElement.createChild("div","gray-info-message"),this._noStackTraceElement.textContent=he`No stack trace available`,this._creationStackTraceElement=this.contentElement.createChild("div","stack-trace"),this._linkifier=new ne.Linkifier($n)}static instance(e={forceNew:null}){const{forceNew:t}=e;return Wn&&!t||(Wn=new zn),Wn}wasShown(){M.Context.instance().addFlavorChangeListener(p.DOMNode,this.update,this),this.update()}willHide(){M.Context.instance().removeFlavorChangeListener(p.DOMNode,this.update,this)}async doUpdate(){const e=M.Context.instance().flavor(p.DOMNode);if(!e)return this._noStackTraceElement.classList.remove("hidden"),void this._creationStackTraceElement.classList.add("hidden");const t=await e.creationStackTrace();if(t){this._noStackTraceElement.classList.add("hidden"),this._creationStackTraceElement.classList.remove("hidden");const i=se.buildStackTracePreviewContents(e.domModel().target(),this._linkifier,{stackTrace:t,contentUpdated:void 0,tabStops:void 0});this._creationStackTraceElement.removeChildren(),this._creationStackTraceElement.appendChild(i.element)}else this._noStackTraceElement.classList.remove("hidden"),this._creationStackTraceElement.classList.add("hidden")}}const $n=40;var jn=Object.freeze({__proto__:null,NodeStackTraceWidget:zn,MaxLengthForLinks:$n});class Gn extends N.Widget{constructor(){super(!0),this.registerRequiredCSS("elements/classesPaneWidget.css",{enableLegacyPatching:!0}),this.contentElement.className="styles-element-classes-pane";const e=this.contentElement.createChild("div","title-container");this._input=e.createChild("div","new-class-input monospace"),this.setDefaultFocusedElement(this._input),this._classesContainer=this.contentElement.createChild("div","source-code"),this._classesContainer.classList.add("styles-element-classes-container"),this._prompt=new qn(this._nodeClasses.bind(this)),this._prompt.setAutocompletionTimeout(0),this._prompt.renderAsBlock();const t=this._prompt.attach(this._input);this._prompt.setPlaceholder(i.UIString("Add new class")),this._prompt.addEventListener(V.Events.TextChanged,this._onTextChanged,this),t.addEventListener("keydown",this._onKeyDown.bind(this),!1),x.TargetManager.instance().addModelListener(p.DOMModel,p.Events.DOMMutated,this._onDOMMutated,this),this._mutatingNodes=new Set,this._pendingNodeClasses=new Map,this._updateNodeThrottler=new o.Throttler(0),this._previousTarget=null,M.Context.instance().addFlavorChangeListener(p.DOMNode,this._onSelectedNodeChanged,this)}_splitTextIntoClasses(e){return e.split(/[,\s]/).map((e=>e.trim())).filter((e=>e.length))}_onKeyDown(e){if("Enter"!==e.key&&!isEscKey(e))return;if("Enter"===e.key&&(e.consume(),this._prompt.acceptAutoComplete()))return;const t=e.target;let i=t.textContent;isEscKey(e)&&(ce.isWhitespace(i)||e.consume(!0),i=""),this._prompt.clearAutocomplete(),t.textContent="";const n=M.Context.instance().flavor(p.DOMNode);if(!n)return;const s=this._splitTextIntoClasses(i);if(!s.length)return void this._installNodeClasses(n);for(const e of s)this._toggleClass(n,e,!0);const o=s.join(" "),r=s.length>1?he`Classes ${o} added.`:he`Class ${o} added.`;R.alert(r,this.contentElement),this._installNodeClasses(n),this._update()}_onTextChanged(){const e=M.Context.instance().flavor(p.DOMNode);e&&this._installNodeClasses(e)}_onDOMMutated(e){const t=e.data;this._mutatingNodes.has(t)||(Kn.delete(t),this._update())}_onSelectedNodeChanged(e){this._previousTarget&&this._prompt.text()&&(this._input.textContent="",this._installNodeClasses(this._previousTarget)),this._previousTarget=e.data,this._update()}wasShown(){this._update()}_update(){if(!this.isShowing())return;let e=M.Context.instance().flavor(p.DOMNode);if(e&&(e=e.enclosingElementOrSelf()),this._classesContainer.removeChildren(),this._input.disabled=!e,!e)return;const t=this._nodeClasses(e),i=[...t.keys()];i.sort(ce.caseInsensetiveComparator);for(const e of i){const i=k.CheckboxLabel.create(e,t.get(e));i.classList.add("monospace"),i.checkboxElement.addEventListener("click",this._onClick.bind(this,e),!1),this._classesContainer.appendChild(i)}}_onClick(e,t){const i=M.Context.instance().flavor(p.DOMNode);if(!i)return;const n=t.target.checked;this._toggleClass(i,e,n),this._installNodeClasses(i)}_nodeClasses(e){let t=Kn.get(e);if(!t){const i=(e.getAttribute("class")||"").split(/\s/);t=new Map;for(let e=0;e<i.length;++e){const n=i[e].trim();n.length&&t.set(n,!0)}Kn.set(e,t)}return t}_toggleClass(e,t,i){this._nodeClasses(e).set(t,i)}_installNodeClasses(e){const t=this._nodeClasses(e),i=new Set;for(const e of t.keys())t.get(e)&&i.add(e);const n=this._splitTextIntoClasses(this._prompt.textWithCurrentSuggestion());for(const e of n)i.add(e);const s=[...i.values()].sort();this._pendingNodeClasses.set(e,s.join(" ")),this._updateNodeThrottler.schedule(this._flushPendingClasses.bind(this))}async _flushPendingClasses(){const e=[];for(const i of this._pendingNodeClasses.keys()){this._mutatingNodes.add(i);const n=i.setAttributeValuePromise("class",this._pendingNodeClasses.get(i)).then(t.bind(this,i));e.push(n)}function t(e){this._mutatingNodes.delete(e)}this._pendingNodeClasses.clear(),await Promise.all(e)}}const Kn=new WeakMap;class qn extends V.TextPrompt{constructor(e){super(),this._nodeClasses=e,this.initialize(this._buildClassNameCompletions.bind(this)," "),this.disableDefaultSuggestionForEmptyInput(),this._selectedFrameId="",this._classNamesPromise=null}async _getClassNames(e){const t=[],i=new Set;this._selectedFrameId=e.frameId();const n=e.domModel().cssModel(),s=n.allStyleSheets();for(const e of s){if(e.frameId!==this._selectedFrameId)continue;const s=n.classNamesPromise(e.id).then((e=>{for(const t of e)i.add(t)}));t.push(s)}const o=e.ownerDocument.id,r=e.domModel().classNamesPromise(o).then((e=>{for(const t of e)i.add(t)}));return t.push(r),await Promise.all(t),[...i]}async _buildClassNameCompletions(e,t,i){t&&!i||(this._classNamesPromise=null);const n=M.Context.instance().flavor(p.DOMNode);if(!n||!t&&!i&&!e.trim())return[];this._classNamesPromise&&this._selectedFrameId===n.frameId()||(this._classNamesPromise=this._getClassNames(n));let s=await this._classNamesPromise;const o=this._nodeClasses(n);return s=s.filter((e=>!o.get(e))),"."===t[0]&&(s=s.map((e=>"."+e))),s.filter((e=>e.startsWith(t))).sort().map((e=>({text:e,title:void 0,subtitle:void 0,iconType:void 0,priority:void 0,isSecondary:void 0,subtitleRenderer:void 0,selectionRange:void 0,hideGhostText:void 0,iconElement:void 0})))}}var Xn=Object.freeze({__proto__:null,ClassesPaneWidget:Gn,ButtonProvider:class{constructor(){this._button=new W.ToolbarToggle(i.UIString("Element Classes"),""),this._button.setText(".cls"),this._button.element.classList.add("monospace"),this._button.addEventListener(W.ToolbarButton.Events.Click,this._clicked,this),this._view=new Gn}_clicked(){vn.instance().showToolbarPane(this._view.isShowing()?null:this._view,this._button)}item(){return this._button}},ClassNamePrompt:qn});class Yn extends N.Widget{constructor(){super(!0),this.registerRequiredCSS("elements/elementStatePaneWidget.css",{enableLegacyPatching:!0}),this.contentElement.className="styles-element-state-pane",k.createTextChild(this.contentElement.createChild("div"),i.UIString("Force element state"));const e=document.createElement("table");e.classList.add("source-code"),R.markAsPresentation(e);const t=[];this._inputs=t,this._inputStates=new WeakMap;const n=e=>{const t=M.Context.instance().flavor(p.DOMNode);if(!(t&&e.target instanceof HTMLInputElement))return;const i=this._inputStates.get(e.target);i&&t.domModel().cssModel().forcePseudoState(t,i,e.target.checked)},s=e=>{const i=document.createElement("td"),s=k.CheckboxLabel.create(":"+e),o=s.checkboxElement;return this._inputStates.set(o,e),o.addEventListener("click",n,!1),t.push(o),i.appendChild(s),i};let o=e.createChild("tr");o.appendChild(s("active")),o.appendChild(s("hover")),o=e.createChild("tr"),o.appendChild(s("focus")),o.appendChild(s("visited")),o=e.createChild("tr"),o.appendChild(s("focus-within")),o.appendChild(s("focus-visible")),o=e.createChild("tr"),o.appendChild(s("target")),this.contentElement.appendChild(e),M.Context.instance().addFlavorChangeListener(p.DOMNode,this._update,this)}_updateModel(e){this._cssModel!==e&&(this._cssModel&&this._cssModel.removeEventListener(_.Events.PseudoStateForced,this._update,this),this._cssModel=e,this._cssModel&&this._cssModel.addEventListener(_.Events.PseudoStateForced,this._update,this))}wasShown(){this._update()}_update(){if(!this.isShowing())return;let e=M.Context.instance().flavor(p.DOMNode);if(e&&(e=e.enclosingElementOrSelf()),this._updateModel(e?e.domModel().cssModel():null),e){const t=e.domModel().cssModel().pseudoState(e);for(const i of this._inputs){i.disabled=Boolean(e.pseudoType());const n=this._inputStates.get(i);i.checked=!(!t||void 0===n)&&t.indexOf(n)>=0}}else for(const e of this._inputs)e.disabled=!0,e.checked=!1}}var Qn=Object.freeze({__proto__:null,ElementStatePaneWidget:Yn,ButtonProvider:class{constructor(){this._button=new W.ToolbarToggle(i.UIString("Toggle Element State"),""),this._button.setText(i.UIString(":hov")),this._button.addEventListener(W.ToolbarButton.Events.Click,this._clicked,this),this._button.element.classList.add("monospace"),this._view=new Yn}_clicked(){vn.instance().showToolbarPane(this._view.isShowing()?null:this._view,this._button)}item(){return this._button}}});class Jn extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"}),this.axNode=null,this.expanded=!0,this.loadedChildren=!1,this.addEventListener("click",this.onClick.bind(this))}set data(e){this.axNode=e.axNode,this.shadow.host.setAttribute("role","treeitem"),this.render()}onClick(e){e.stopPropagation(),this.toggleChildren()}toggleChildren(){this.axNode&&this.axNode.children&&(this.expanded=!this.expanded,this.classList.toggle("expanded",this.expanded),this.axNode.hasOnlyUnloadedChildren&&!this.loadedChildren&&this.getChildAXNodes())}async getChildAXNodes(){this.axNode&&(await this.axNode.loadChildren(),this.loadedChildren=!0,this.render())}renderChildren(e){if(!e)return me``;const t=[];for(const i of e.children){const e=me`
+        <devtools-accessibility-node .data=${{axNode:i}}>
+        </devtools-accessibility-node>
+      `;t.push(e)}return me`<div role='group' class='children'>${t}</div>`}truncateTextIfNeeded(e){return e.length>1e4?ce.trimMiddle(e,1e4):e}renderNodeContent(){const e=[];if(!this.axNode)return e;const t=this.axNode.role;if(!t)return e;const i=me`<span class='monospace'>${this.truncateTextIfNeeded(t||"")}</span>`;e.push(me`${i}`);const n=this.axNode.name;return n&&(e.push(me`<span class='separator'>\xA0</span>`),e.push(me`<span class='ax-readable-string'>"${n}"</span>`)),e}render(){if(!this.axNode)return;const e=[];if(this.axNode.ignored)e.push(me`<span class='monospace ignored-node'>${he`Ignored`}</span>`);else{const t=this.renderNodeContent();this.axNode.hasOnlyUnloadedChildren?(this.shadow.host.classList.add("parent"),this.loadedChildren||(this.expanded=!1)):this.axNode.numChildren?this.shadow.host.classList.add("parent","expanded"):this.shadow.host.classList.add("no-children"),e.push(me`${t}`)}const t=this.renderChildren(this.axNode);e.push(t);const i=me`
+      <style>
+          .ax-readable-string {
+            font-style: italic;
+          }
+
+          .monospace {
+            font-family: var(--monospace-font-family);
+            font-size: var(--monospace-font-size);
+          }
+
+          .ignored-node {
+            font-style: italic;
+            opacity: 70%;
+          }
+
+          :host {
+            align-items: center;
+            display: block;
+            margin: 0;
+            min-height: 16px;
+            overflow-x: hidden;
+            padding-left: 4px;
+            padding-right: 4px;
+            position: relative;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          span {
+            flex-shrink: 0;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .children {
+            padding-inline-start: 12px;
+          }
+
+          :host(:not(.expanded)) .children {
+            display: none;
+          }
+
+          :host(.no-children) {
+            margin-left: 16px;
+          }
+
+          :host(.parent)::before {
+            box-sizing: border-box;
+            user-select: none;
+            -webkit-mask-image: url(Images/treeoutlineTriangles.svg);
+            -webkit-mask-size: 32px 24px;
+            content: '\A0';
+            color: transparent;
+            text-shadow: none;
+            margin-right: -3px;
+            -webkit-mask-position: 0 0;
+            background-color: var(--color-syntax-7);
+          }
+
+          :host(.parent.expanded)::before {
+            -webkit-mask-position: -16px 0;
+          }
+
+      </style>
+      ${e}
+      `;_e(i,this.shadow)}}customElements.get("devtools-accessibility-node")||customElements.define("devtools-accessibility-node",Jn);var Zn=Object.freeze({__proto__:null,AccessibilityNode:Jn});class es extends HTMLElement{constructor(){super(...arguments),this.shadow=this.attachShadow({mode:"open"}),this.onElementRevealIconClick=()=>{},this.onElementRevealIconMouseEnter=()=>{},this.onElementRevealIconMouseLeave=()=>{}}set data(e){this.onElementRevealIconClick=e.onElementRevealIconClick,this.onElementRevealIconMouseEnter=e.onElementRevealIconMouseEnter,this.onElementRevealIconMouseLeave=e.onElementRevealIconMouseLeave,this.update()}update(){this.render()}render(){_e(me`
+      <style>
+        .element-reveal-icon {
+          display: inline-block;
+          width: 28px;
+          height: 24px;
+          -webkit-mask-position: -140px 96px;
+          -webkit-mask-image: url(Images/largeIcons.svg);
+          background-color: rgb(110 110 110);
+        }
+      </style>
+      <span
+        class="element-reveal-icon"
+        @click=${this.onElementRevealIconClick}
+        @mouseenter=${this.onElementRevealIconMouseEnter}
+        @mouseleave=${this.onElementRevealIconMouseLeave}></span>
+      `,this.shadow)}}customElements.define("devtools-elements-panel-link",es);var ts=Object.freeze({__proto__:null,ElementsPanelLink:es});const{render:is,html:ns}=pe,ss=d,os=Be.getStyleSheets,rs=ss`Show element in the Elements panel`;class ls extends Event{constructor(e,t){super("setting-changed",{}),this.data={setting:e,value:t}}}function as(e){return"enum"===e.type}function ds(e){return"boolean"===e.type}class hs extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"}),this.settings=[],this.gridElements=[],this.flexContainerElements=[],this.shadow.adoptedStyleSheets=[...os("ui/inspectorCommon.css",{enableLegacyPatching:!0}),...os("ui/inspectorSyntaxHighlight.css",{enableLegacyPatching:!0}),...os("elements/layoutPane.css",{enableLegacyPatching:!1})],this.onSummaryKeyDown=this.onSummaryKeyDown.bind(this)}set data(e){this.settings=e.settings,this.gridElements=e.gridElements,this.flexContainerElements=e.flexContainerElements,this.render()}onSummaryKeyDown(e){if(!e.target)return;const t=e.target.parentElement;if(!t)throw new Error("<details> element is not found for a <summary> element");switch(e.key){case"ArrowLeft":t.open=!1;break;case"ArrowRight":t.open=!0}}render(){is(ns`
+      <details open>
+        <summary class="header" @keydown=${this.onSummaryKeyDown}>
+          ${ss`Grid`}
+        </summary>
+        <div class="content-section">
+          <h3 class="content-section-title">${ss`Overlay display settings`}</h3>
+          <div class="select-settings">
+            ${this.getEnumSettings().map((e=>this.renderEnumSetting(e)))}
+          </div>
+          <div class="checkbox-settings">
+            ${this.getBooleanSettings().map((e=>this.renderBooleanSetting(e)))}
+          </div>
+        </div>
+        ${this.gridElements?ns`<div class="content-section">
+            <h3 class="content-section-title">
+              ${this.gridElements.length?ss`Grid overlays`:ss`No grid layouts found on this page`}
+            </h3>
+            ${this.gridElements.length?ns`<div class="elements">
+                ${this.gridElements.map((e=>this.renderElement(e)))}
+              </div>`:""}
+          </div>`:""}
+      </details>
+      ${void 0!==this.flexContainerElements?ns`
+        <details open>
+          <summary class="header" @keydown=${this.onSummaryKeyDown}>
+            ${ss`Flexbox`}
+          </summary>
+          ${this.flexContainerElements?ns`<div class="content-section">
+              <h3 class="content-section-title">
+                ${this.flexContainerElements.length?ss`Flexbox overlays`:ss`No flexbox layouts found on this page`}
+              </h3>
+              ${this.flexContainerElements.length?ns`<div class="elements">
+                  ${this.flexContainerElements.map((e=>this.renderElement(e)))}
+                </div>`:""}
+            </div>`:""}
+        </details>
+        `:""}
+    `,this.shadow,{eventContext:this})}getEnumSettings(){return this.settings.filter(as)}getBooleanSettings(){return this.settings.filter(ds)}onBooleanSettingChange(e,t){t.preventDefault(),this.dispatchEvent(new ls(e.name,t.target.checked))}onEnumSettingChange(e,t){t.preventDefault(),this.dispatchEvent(new ls(e.name,t.target.value))}onElementToggle(e,t){t.preventDefault(),e.toggle(t.target.checked)}onElementClick(e,t){t.preventDefault(),e.reveal()}onColorChange(e,t){t.preventDefault(),e.setColor(t.target.value),this.render()}onElementMouseEnter(e,t){t.preventDefault(),e.highlight()}onElementMouseLeave(e,t){t.preventDefault(),e.hideHighlight()}renderElement(e){const t=this.onElementToggle.bind(this,e),i=this.onElementClick.bind(this,e),n=this.onColorChange.bind(this,e),s=this.onElementMouseEnter.bind(this,e),o=this.onElementMouseLeave.bind(this,e);return ns`<div class="element">
+      <label data-element="true" class="checkbox-label" title=${e.name}>
+        <input data-input="true" type="checkbox" .checked=${e.enabled} @change=${t} />
+        <span class="node-text-container" data-label="true" @mouseenter=${s} @mouseleave=${o}>
+          <devtools-node-text .data=${{nodeId:e.domId,nodeTitle:e.name,nodeClasses:e.domClasses}}></devtools-node-text>
+        </span>
+      </label>
+      <label @keyup=${e=>{if("Enter"!==e.key&&" "!==e.key)return;e.target.querySelector("input").click(),e.preventDefault()}} tabindex="0" class="color-picker-label" style="background: ${e.color};">
+        <input @change=${n} @input=${n} class="color-picker" type="color" value=${e.color} />
+      </label>
+      <button tabindex="0" @click=${i} title=${rs} class="show-element"></button>
+    </div>`}renderBooleanSetting(e){const t=this.onBooleanSettingChange.bind(this,e);return ns`<label data-boolean-setting="true" class="checkbox-label" title=${e.title}>
+      <input data-input="true" type="checkbox" .checked=${e.value} @change=${t} />
+      <span data-label="true">${e.title}</span>
+    </label>`}renderEnumSetting(e){const t=this.onEnumSettingChange.bind(this,e);return ns`<label data-enum-setting="true" class="select-label" title=${e.title}>
+      <select class="chrome-select" data-input="true" @change=${t}>
+        ${e.options.map((t=>ns`<option value=${t.value} .selected=${e.value===t.value}>${t.title}</option>`))}
+      </select>
+    </label>`}}customElements.define("devtools-layout-pane",hs);var cs=Object.freeze({__proto__:null,SettingChangedEvent:ls,LayoutPane:hs}),us=Object.freeze({__proto__:null});const ps=e=>{const t=e.getAttribute("class");return{id:e.id,color:"#000",name:e.localName(),domId:e.getAttribute("id"),domClasses:t?t.split(/\s+/).filter((e=>Boolean(e))):void 0,enabled:!1,reveal:()=>{vn.instance().revealAndSelectNode(e,!0,!0),e.scrollIntoView()},highlight:()=>{e.highlight()},hideHighlight:()=>{f.OverlayModel.hideDOMNodeHighlight()},toggle:e=>{throw new Error("Not implemented")},setColor(e){throw new Error("Not implemented")}}},ms=e=>e.map((e=>{const t=ps(e),i=e.id;return{...t,color:e.domModel().overlayModel().colorOfGridInPersistentOverlay(i)||"#000",enabled:e.domModel().overlayModel().isHighlightedGridInPersistentOverlay(i),toggle:t=>{t?e.domModel().overlayModel().highlightGridInPersistentOverlay(i):e.domModel().overlayModel().hideGridInPersistentOverlay(i)},setColor(t){this.color=t,e.domModel().overlayModel().setColorOfGridInPersistentOverlay(i,t)}}}));let _s;const gs=e=>e.map((e=>{const t=ps(e),i=e.id;return{...t,color:e.domModel().overlayModel().colorOfFlexInPersistentOverlay(i)||"#000",enabled:e.domModel().overlayModel().isHighlightedFlexContainerInPersistentOverlay(i),toggle:t=>{t?e.domModel().overlayModel().highlightFlexContainerInPersistentOverlay(i):e.domModel().overlayModel().hideFlexContainerInPersistentOverlay(i)},setColor(t){this.color=t,e.domModel().overlayModel().setColorOfFlexInPersistentOverlay(i,t)}}}));class fs extends P.ThrottledWidget{constructor(){super(!0),this._layoutPane=new hs,this.contentElement.appendChild(this._layoutPane),this._settings=["showGridLineLabels","showGridTrackSizes","showGridAreas","extendGridLines"],this._uaShadowDOMSetting=r.Settings.instance().moduleSetting("showUAShadowDOM"),this._boundOnSettingChanged=this.onSettingChanged.bind(this),this._domModels=[]}static instance(e={forceNew:null}){const{forceNew:t}=e;return _s&&!t||(_s=new fs),_s}modelAdded(e){const t=e.overlayModel();t.addEventListener(f.Events.PersistentGridOverlayStateChanged,this.update,this),t.addEventListener(f.Events.PersistentFlexContainerOverlayStateChanged,this.update,this),this._domModels.push(e)}modelRemoved(e){const t=e.overlayModel();t.removeEventListener(f.Events.PersistentGridOverlayStateChanged,this.update,this),t.removeEventListener(f.Events.PersistentFlexContainerOverlayStateChanged,this.update,this),this._domModels=this._domModels.filter((t=>t!==e))}async _fetchNodesByStyle(e){const t=this._uaShadowDOMSetting.get(),i=[];for(const n of this._domModels)try{const s=await n.getNodesByStyle(e,!0);for(const e of s){const s=n.nodeForId(e);null===s||!t&&s.ancestorUserAgentShadowRoot()||i.push(s)}}catch(e){console.warn(e)}return i}async _fetchGridNodes(){return await this._fetchNodesByStyle([{name:"display",value:"grid"},{name:"display",value:"inline-grid"}])}async _fetchFlexContainerNodes(){return await this._fetchNodesByStyle([{name:"display",value:"flex"},{name:"display",value:"inline-flex"}])}_mapSettings(){const e=[];for(const t of this._settings){const i=r.Settings.instance().moduleSetting(t),n=i.get(),s={type:i.type(),name:i.name,title:i.title()};("boolean"==typeof n||"string"==typeof n)&&e.push({...s,value:n,options:i.options().map((e=>({...e,value:e.value})))})}return e}async doUpdate(){this._layoutPane.data={gridElements:ms(await this._fetchGridNodes()),flexContainerElements:c.experiments.isEnabled("cssFlexboxFeatures")?gs(await this._fetchFlexContainerNodes()):void 0,settings:this._mapSettings()}}onSettingChanged(e){r.Settings.instance().moduleSetting(e.data.setting).set(e.data.value)}wasShown(){for(const e of this._settings)r.Settings.instance().moduleSetting(e).addChangeListener(this.update,this);this._layoutPane.addEventListener("setting-changed",this._boundOnSettingChanged);for(const e of this._domModels)this.modelRemoved(e);this._domModels=[],x.TargetManager.instance().observeModels(p.DOMModel,this),M.Context.instance().addFlavorChangeListener(p.DOMNode,this.update,this),this._uaShadowDOMSetting.addChangeListener(this.update,this),this.update()}willHide(){for(const e of this._settings)r.Settings.instance().moduleSetting(e).removeChangeListener(this.update,this);this._layoutPane.removeEventListener("setting-changed",this._boundOnSettingChanged),x.TargetManager.instance().unobserveModels(p.DOMModel,this),M.Context.instance().removeFlavorChangeListener(p.DOMNode,this.update,this),this._uaShadowDOMSetting.removeChangeListener(this.update,this)}}var ys=Object.freeze({__proto__:null,LayoutSidebarPane:fs});export{Zn as AccessibilityNode,We as AccessibilityTree,Ue as AccessibilityTreeUtils,Ui as Adorner,zt as CSSPropertyIconResolver,Xn as ClassesPaneWidget,xt as ColorSwatchPopoverIcon,Ke as ComputedStyleModel,Qe as ComputedStyleProperty,tt as ComputedStyleTrace,wi as ComputedStyleWidget,Kt as DOMLinkifier,Xi as DOMPath,Qn as ElementStatePaneWidget,Ri as ElementsBreadcrumbs,ki as ElementsBreadcrumbsUtils,Nn as ElementsPanel,ts as ElementsPanelLink,Xt as ElementsSidebarPane,pn as ElementsTreeElement,_n as ElementsTreeElementHighlighter,nn as ElementsTreeOutline,Fn as EventListenersWidget,In as InspectElementModeController,cs as LayoutPane,us as LayoutPaneUtils,ys as LayoutSidebarPane,on as MarkerDecorator,fn as MetricsSidebarPane,jn as NodeStackTraceWidget,Mi as NodeText,ot as PlatformFontsWidget,Vn as PropertiesWidget,ei as StylePropertyHighlighter,Jt as StylePropertyTreeElement,_i as StylesSidebarPane};