var Rd=Object.defineProperty;var F=(r,e)=>{for(var t in e)Rd(r,t,{get:e[t],enumerable:!0})};var nd={};F(nd,{InspectElementModeController:()=>Ps,ToggleSearchActionDelegate:()=>pr});import*as hi from"./../../core/common/common.js";import*as td from"./../../core/root/root.js";import*as He from"./../../core/sdk/sdk.js";import*as gt from"./../../ui/legacy/legacy.js";import*as id from"./../../ui/visual_logging/visual_logging.js";var ed={};F(ed,{CSSPropertyRevealer:()=>dr,ContextMenuProvider:()=>ar,DEFAULT_COMPUTED_STYLES_DEBOUNCE_MS:()=>Mh,DOMNodeRevealer:()=>lr,ElementsActionDelegate:()=>cr,ElementsPanel:()=>D,NodeComputedStyles:()=>As,PseudoStateMarkerDecorator:()=>qi});import*as Ft from"./../../core/common/common.js";import*as Xl from"./../../core/host/host.js";import*as hr from"./../../core/i18n/i18n.js";import*as Yt from"./../../core/platform/platform.js";import*as Jl from"./../../core/root/root.js";import*as V from"./../../core/sdk/sdk.js";import*as Zl from"./../../models/computed_style/computed_style.js";import*as rr from"./../common/common.js";import*as k from"./../../ui/legacy/legacy.js";import*as rn from"./../../ui/visual_logging/visual_logging.js";var Or={};F(Or,{AccessibilityTreeView:()=>fi,DEFAULT_VIEW:()=>Lr});import*as Ys from"./../../core/i18n/i18n.js";import*as Ue from"./../../core/sdk/sdk.js";import"./../../ui/components/tree_outline/tree_outline.js";import*as hn from"./../../ui/legacy/legacy.js";import*as Fd from"./../../ui/lit/lit.js";import*as Dr from"./../../ui/visual_logging/visual_logging.js";var Gs={};F(Gs,{accessibilityNodeRenderer:()=>zs,sdkNodeToAXTreeNodes:()=>dn});import"./components/components.js";import*as kd from"./../../ui/lit/lit.js";var{html:Ud}=kd;async function dn(r){let e=r;return r.isLeafNode()?[{treeNodeData:e,id:r.getNodeId()}]:[{treeNodeData:e,children:async()=>{let t=await r.getChildren();return(await Promise.all(t.map(n=>dn(n)))).flat(1)},id:r.getNodeId()}]}function zs(r){let e=r.treeNodeData,t=e.name()?.value||"",i=e.role()?.value||"",n=e.properties()||[],s=e.ignored(),o=e.getNodeId();return Ud`<devtools-accessibility-tree-node .data=${{name:t,role:i,ignored:s,properties:n,id:o}}></devtools-accessibility-tree-node>`}var Pr=`.accessibility-tree-view-container{height:100%;overflow:auto}
/*# sourceURL=${import.meta.resolve("./accessibilityTreeView.css")} */`;var{html:Vd,render:$d,Directives:{ref:Bd}}=Fd,cn={copy:"Copy",scrollIntoView:"Scroll into view",switchToDomTree:"Switch to DOM tree"},Hd=Ys.i18n.registerUIStrings("panels/elements/AccessibilityTreeView.ts",cn),qs=Ys.i18n.getLocalizedString.bind(void 0,Hd),Lr=(r,e,t)=>{let i={defaultRenderer:zs,tree:r.nodes,filter:c=>c.ignored()||c.role()?.value==="generic"&&!c.name()?.value?"FLATTEN":"SHOW"},n=c=>{let p=c;p?(e.expandRoots=()=>p.expandRecursively(1),e.revealNode=(u,g)=>p.expandNodeIds(u).then(()=>p.focusNodeId(g))):(e.expandRoots=void 0,e.revealNode=void 0)},s=null,o=c=>{s=c.data.node.treeNodeData,r.onNodeSelected(s)},a=c=>{r.onNodeHighlight(c.data.node.treeNodeData)},l=()=>{r.onNodeClearHighlight()},d=c=>{let p=c.createContextMenu(),u=c.data.node.treeNodeData;p.clipboardSection().appendItem(qs(cn.copy),()=>r.onCopy(u),{jslogContext:"copy"}),u.isDOMNode()&&p.viewSection().appendItem(qs(cn.scrollIntoView),()=>r.onScrollIntoView(u),{jslogContext:"scroll-into-view"}),p.viewSection().appendItem(qs(cn.switchToDomTree),()=>r.onSwitchToDomTree(),{jslogContext:"switch-to-dom-tree"}),p.show()},h=c=>{c.preventDefault(),c.stopPropagation(),s&&r.onCopy(s)};$d(Vd`
    <div class="accessibility-tree-view-container" jslog=${Dr.tree("full-accessibility")} @copy=${h}>
      <devtools-tree-outline .data=${i}
                             @itemselected=${o}
                             @itemmouseover=${a}
                             @itemmouseout=${l}
                             @itemcontextmenu=${d}
                             ${Bd(n)}></devtools-tree-outline>
    </div>
  `,t)},fi=class extends hn.Widget.VBox{inspectedDOMNode=null;root=null;#e;#n;#i={};constructor(e=Lr,t=Ue.FrameManager.FrameManager.instance()){super(),this.#e=e,this.registerRequiredCSS(Pr),this.#n=t,Ue.TargetManager.TargetManager.instance().observeModels(Ue.AccessibilityModel.AccessibilityModel,this,{scoped:!0})}#t=e=>{if(!e.isDOMNode())return;let t=e.deferredDOMNode();t&&t.resolve(i=>{i&&(this.inspectedDOMNode=i,D.instance().revealAndSelectNode(i,{showPanel:!0,focusNode:!0,highlightInOverlay:!0}))})};#s=e=>{e.highlightDOMNode()};#o=()=>{Ue.OverlayModel.OverlayModel.hideDOMNodeHighlight(Ue.TargetManager.TargetManager.instance())};#r=async e=>{let t=await e.axNodeToText();hn.UIUtils.copyTextToClipboard(t)};#l=e=>{let t=e.deferredDOMNode();t&&t.resolve(i=>{i&&i.scrollIntoView()})};#c=async()=>{D.instance().toggleAccessibilityTree()};async wasShown(){super.wasShown(),this.requestUpdate(),await this.refreshAccessibilityTree(),this.inspectedDOMNode&&await this.loadSubTreeIntoAccessibilityModel(this.inspectedDOMNode)}async performUpdate(){let e=[];if(!this.root){let i=this.#n.getOutermostFrame()?.id;i&&(this.root=await Ue.AccessibilityModel.getRootNode(i,this.#n))}this.root&&(e=await dn(this.root));let t={nodes:e,onNodeSelected:this.#t,onNodeHighlight:this.#s,onNodeClearHighlight:this.#o,onCopy:this.#r,onScrollIntoView:this.#l,onSwitchToDomTree:this.#c};this.#e(t,this.#i,this.contentElement)}async refreshAccessibilityTree(){if(!this.root){let e=this.#n.getOutermostFrame()?.id;if(!e)throw new Error("No top frame");if(this.root=await Ue.AccessibilityModel.getRootNode(e,this.#n),!this.root)throw new Error("No root")}this.requestUpdate(),await this.updateComplete,await this.#i.expandRoots?.()}async loadSubTreeIntoAccessibilityModel(e){let t=await Ue.AccessibilityModel.getNodeAndAncestorsFromDOMNode(e),i=t.find(n=>n.backendDOMNodeId()===e.backendNodeId());i&&(this.requestUpdate(),await this.updateComplete,await this.#i.revealNode?.(t.map(n=>n.getFrameId()+"#"+n.id()),i.getNodeId()))}async revealAndSelectNode(e){e!==this.inspectedDOMNode&&(this.inspectedDOMNode=e,this.isShowing()&&await this.loadSubTreeIntoAccessibilityModel(e))}async selectedNodeChanged(e){this.isShowing()||e===this.inspectedDOMNode||(e.ownerDocument&&(e.nodeName()==="HTML"||e.nodeName()==="BODY")?this.inspectedDOMNode=e.ownerDocument:this.inspectedDOMNode=e)}treeUpdated({data:e}){if(e.root&&(this.root=e.root),!this.isShowing())return;if(!e.root){this.root=null,this.requestUpdate();return}let t=this.#n.getOutermostFrame()?.id;if(e.root?.getFrameId()!==t){this.requestUpdate();return}this.root=e.root,this.refreshAccessibilityTree()}modelAdded(e){e.addEventListener("TreeUpdated",this.treeUpdated,this)}modelRemoved(e){e.removeEventListener("TreeUpdated",this.treeUpdated,this)}};var Ur={};F(Ur,{BezierPopoverIcon:()=>yi,ColorSwatchPopoverIcon:()=>Vt,ShadowSwatchPopoverHelper:()=>Si});import*as ce from"./../../core/common/common.js";import*as Qs from"./../../core/i18n/i18n.js";import*as Xs from"./../../core/platform/platform.js";import*as pn from"./../../models/bindings/bindings.js";import*as Rr from"./../../ui/legacy/components/color_picker/color_picker.js";import*as nt from"./../../ui/legacy/components/inline_editor/inline_editor.js";import*as ei from"./../../ui/legacy/legacy.js";var Js={openCubicBezierEditor:"Open cubic bezier editor",openShadowEditor:"Open shadow editor"},_d=Qs.i18n.registerUIStrings("panels/elements/ColorSwatchPopoverIcon.ts",Js),kr=Qs.i18n.getLocalizedString.bind(void 0,_d),yi=class{treeElement;swatchPopoverHelper;swatch;bezierText;boundBezierChanged;boundOnScroll;bezierEditor;scrollerElement;originalPropertyText;constructor({treeElement:e,swatchPopoverHelper:t,swatch:i,bezierText:n}){this.treeElement=e,this.swatchPopoverHelper=t,this.swatch=i,this.bezierText=n,ei.Tooltip.Tooltip.install(this.swatch,kr(Js.openCubicBezierEditor)),this.swatch.addEventListener("click",this.iconClick.bind(this),!1),this.swatch.addEventListener("keydown",this.iconClick.bind(this),!1),this.swatch.addEventListener("mousedown",s=>s.consume(),!1),this.boundBezierChanged=this.bezierChanged.bind(this),this.boundOnScroll=this.onScroll.bind(this)}iconClick(e){if(e instanceof KeyboardEvent&&!Xs.KeyboardUtilities.isEnterOrSpaceKey(e))return;if(e.consume(!0),this.swatchPopoverHelper.isShowing()){this.swatchPopoverHelper.hide(!0);return}let t=nt.AnimationTimingModel.AnimationTimingModel.parse(this.bezierText.innerText)||nt.AnimationTimingModel.LINEAR_BEZIER;this.bezierEditor=new nt.BezierEditor.BezierEditor(t),this.bezierEditor.addEventListener("BezierChanged",this.boundBezierChanged),this.swatchPopoverHelper.show(this.bezierEditor,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.stylesContainer().setEditingStyle(!0);let i=pn.CSSWorkspaceBinding.CSSWorkspaceBinding.instance().propertyUILocation(this.treeElement.property,!1);i&&ce.Revealer.reveal(i,!0)}bezierChanged(e){this.bezierText.textContent=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("BezierChanged",this.boundBezierChanged),this.bezierEditor=void 0;let t=e?this.treeElement.renderedPropertyText():this.originalPropertyText||"";this.treeElement.applyStyleText(t,!0),this.treeElement.stylesContainer().setEditingStyle(!1),delete this.originalPropertyText}},Vt=class r extends ce.ObjectWrapper.ObjectWrapper{treeElement;swatchPopoverHelper;swatch;contrastInfo;boundSpectrumChanged;boundOnScroll;spectrum;scrollerElement;originalPropertyText;constructor(e,t,i){super(),this.treeElement=e,this.swatchPopoverHelper=t,this.swatch=i,this.swatch.addEventListener(nt.ColorSwatch.ClickEvent.eventName,this.iconClick.bind(this)),this.contrastInfo=null,this.boundSpectrumChanged=this.spectrumChanged.bind(this),this.boundOnScroll=this.onScroll.bind(this)}generateCSSVariablesPalette(){let e=this.treeElement.matchedStyles(),t=this.treeElement.property.ownerStyle,i=e.availableCSSVariables(t),n=[],s=[];for(let o of i){if(o===this.treeElement.property.name)continue;let a=e.computeCSSVariable(t,o);!a||!ce.Color.parse(a.value)||(n.push(a.value),s.push(o))}return{title:"CSS Variables",mutable:!1,matchUserFormat:!0,colors:n,colorNames:s}}setContrastInfo(e){this.contrastInfo=e}iconClick(e){e.consume(!0),this.showPopover()}async toggleEyeDropper(){await this.spectrum?.toggleColorPicker()}showPopover(){if(this.swatchPopoverHelper.isShowing()){this.swatchPopoverHelper.hide(!0);return}let e=this.swatch.color;if(!e)return;this.spectrum=new Rr.Spectrum.Spectrum(this.contrastInfo),this.spectrum.setColor(e),this.spectrum.addPalette(this.generateCSSVariablesPalette()),this.spectrum.addEventListener("SizeChanged",this.spectrumResized,this),this.spectrum.addEventListener("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.stylesContainer().setEditingStyle(!0);let t=pn.CSSWorkspaceBinding.CSSWorkspaceBinding.instance().propertyUILocation(this.treeElement.property,!1);t&&ce.Revealer.reveal(t,!0),ei.Context.Context.instance().setFlavor(r,this)}spectrumResized(){this.swatchPopoverHelper.reposition()}async spectrumChanged(e){let i=(n=>{let s=ce.Color.parse(n),o=this.spectrum?.colorName()?.startsWith("--")&&`var(${this.spectrum.colorName()})`;if(!s||!o)return s;if(s.is("hex")||s.is("hexa")||s.is("rgb")||s.is("rgba"))return new ce.Color.Legacy(s.rgba(),s.format(),o);if(s.is("hsl"))return new ce.Color.HSL(s.h,s.s,s.l,s.alpha,o);if(s.is("hwb"))return new ce.Color.HWB(s.h,s.w,s.b,s.alpha,o);if(s.is("lch"))return new ce.Color.LCH(s.l,s.c,s.h,s.alpha,o);if(s.is("oklch"))return new ce.Color.Oklch(s.l,s.c,s.h,s.alpha,o);if(s.is("lab"))return new ce.Color.Lab(s.l,s.a,s.b,s.alpha,o);if(s.is("oklab"))return new ce.Color.Oklab(s.l,s.a,s.b,s.alpha,o);if(s.is("srgb")||s.is("srgb-linear")||s.is("display-p3")||s.is("a98-rgb")||s.is("prophoto-rgb")||s.is("rec2020")||s.is("xyz")||s.is("xyz-d50")||s.is("xyz-d65"))return new ce.Color.ColorFunction(s.colorSpace,s.p0,s.p1,s.p2,s.alpha,o);throw new Error(`Forgot to handle color format ${s.format()}`)})(e.data);i&&(this.swatch.renderColor(i),this.dispatchEventToListeners("colorchanged",i))}onScroll(e){this.swatchPopoverHelper.hide(!0)}onPopoverHidden(e){this.scrollerElement&&this.scrollerElement.removeEventListener("scroll",this.boundOnScroll,!1),this.spectrum&&this.spectrum.removeEventListener("ColorChanged",this.boundSpectrumChanged),this.spectrum=void 0;let t=e?this.treeElement.renderedPropertyText():this.originalPropertyText||"";this.treeElement.applyStyleText(t,!0),this.treeElement.stylesContainer().setEditingStyle(!1),delete this.originalPropertyText,ei.Context.Context.instance().setFlavor(r,null)}},Si=class extends ce.ObjectWrapper.ObjectWrapper{treeElement;swatchPopoverHelper;shadowSwatch;iconElement;boundShadowChanged;boundOnScroll;cssShadowEditor;scrollerElement;originalPropertyText;constructor(e,t,i){super(),this.treeElement=e,this.swatchPopoverHelper=t,this.shadowSwatch=i,this.iconElement=i.iconElement(),ei.Tooltip.Tooltip.install(this.iconElement,kr(Js.openShadowEditor)),this.iconElement.addEventListener("click",this.iconClick.bind(this),!1),this.iconElement.addEventListener("keydown",this.keyDown.bind(this),!1),this.iconElement.addEventListener("mousedown",n=>n.consume(),!1),this.boundShadowChanged=this.shadowChanged.bind(this),this.boundOnScroll=this.onScroll.bind(this)}keyDown(e){Xs.KeyboardUtilities.isEnterOrSpaceKey(e)&&(e.consume(!0),this.showPopover())}iconClick(e){e.consume(!0),this.showPopover()}showPopover(){if(this.swatchPopoverHelper.isShowing()){this.swatchPopoverHelper.hide(!0);return}this.cssShadowEditor=new nt.CSSShadowEditor.CSSShadowEditor,this.cssShadowEditor.element.classList.toggle("with-padding",!0),this.cssShadowEditor.setModel(this.shadowSwatch.model()),this.cssShadowEditor.addEventListener("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.stylesContainer().setEditingStyle(!0);let e=pn.CSSWorkspaceBinding.CSSWorkspaceBinding.instance().propertyUILocation(this.treeElement.property,!1);e&&ce.Revealer.reveal(e,!0)}shadowChanged(e){this.dispatchEventToListeners("shadowChanged",e.data)}onScroll(e){this.swatchPopoverHelper.hide(!0)}onPopoverHidden(e){this.scrollerElement&&this.scrollerElement.removeEventListener("scroll",this.boundOnScroll,!1),this.cssShadowEditor&&this.cssShadowEditor.removeEventListener("ShadowChanged",this.boundShadowChanged),this.cssShadowEditor=void 0;let t=e?this.treeElement.renderedPropertyText():this.originalPropertyText||"";this.treeElement.applyStyleText(t,!0),this.treeElement.stylesContainer().setEditingStyle(!1),delete this.originalPropertyText}};import*as Ns from"./components/components.js";var Xa={};F(Xa,{ComputedStyleWidget:()=>Wi,DEFAULT_VIEW:()=>Qa});import"./../../ui/legacy/legacy.js";import*as Pt from"./../../core/common/common.js";import*as Do from"./../../core/i18n/i18n.js";import*as Lo from"./../../core/platform/platform.js";import*as me from"./../../core/sdk/sdk.js";import*as za from"./../../ui/components/tree_outline/tree_outline.js";import*as Po from"./../../ui/legacy/components/inline_editor/inline_editor.js";import*as Ki from"./../../ui/legacy/components/utils/utils.js";import*as Dt from"./../../ui/legacy/legacy.js";import*as Oo from"./../../ui/lit/lit.js";import*as Ga from"./components/components.js";var Fr=`@scope to (devtools-widget > *){.styles-sidebar-pane-toolbar{border-bottom:1px solid var(--sys-color-divider);flex-shrink:0}.styles-pane-toolbar{width:100%}devtools-tree-outline{flex-shrink:0}devtools-toolbar-input[type="filter"]{flex-grow:1;flex-shrink:1}}
/*# sourceURL=${import.meta.resolve("./computedStyleWidget.css")} */`;var Br={};F(Br,{ImagePreviewPopover:()=>Me});import*as Vr from"./../../ui/legacy/components/utils/utils.js";import*as $r from"./../../ui/legacy/legacy.js";var Me=class{getLinkElement;popover;#e;constructor(e,t,i){this.getLinkElement=t,this.#e=i,this.popover=new $r.PopoverHelper.PopoverHelper(e,this.handleRequest.bind(this),"elements.image-preview"),this.popover.setTimeout(0,100)}handleRequest(e){let t=this.getLinkElement(e);if(!t)return null;let i=Zs.get(t);return i?{box:t.boxInWindow(),show:async n=>{let s=await this.#e(t),o=await Vr.ImagePreview.ImagePreview.build(i,!0,{precomputedFeatures:s,align:"center"});return o&&n.contentElement.appendChild(o),!!o}}:null}hide(){this.popover.hidePopover()}static setImageUrl(e,t){return Zs.set(e,t),e}static getImageURL(e){return Zs.get(e)}},Zs=new WeakMap;import*as _r from"./../../core/sdk/sdk.js";var Kr=["Layout","Text","Appearance","Animation","CSS Variables","Grid","Flex","Table","Generated Content","Other"],Kd=new Map([["Layout",["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"]],["Text",["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"]],["Appearance",["color","outline","outline-color","outline-offset","outline-style","Outline-width","border","border-image","background","cursor","box-shadow","\u2248","tap-highlight-color"]],["Animation",["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"]],["Grid",["grid","grid-column","grid-row","order","place-items","place-content","place-self"]],["Flex",["flex","order","place-items","place-content","place-self"]],["Table",["border-collapse","border-spacing","caption-side","empty-cells","table-layout"]],["Generated Content",["content","quotes","counter-reset","counter-increment"]]]),Ci=new Map;for(let[r,e]of Kd)for(let t of e)Ci.has(t)||Ci.set(t,[]),Ci.get(t).push(r);var Hr=r=>Ci.has(r)?Ci.get(r):r.startsWith("--")?["CSS Variables"]:[],Wr=r=>{let e=_r.CSSMetadata.cssMetadata(),t=e.canonicalPropertyName(r),i=Hr(t);if(i.length>0)return i;let n=e.getShorthands(t);if(n)for(let s of n){let o=Hr(s);if(o.length>0)return o}return["Other"]};var Ka={};F(Ka,{BinOpRenderer:()=>Pi,Highlighting:()=>vi,Renderer:()=>A,RenderingContext:()=>Fe,StringRenderer:()=>xt,TracingContext:()=>bi,URLRenderer:()=>wt,rendererBase:()=>W});import*as Ha from"./../../core/common/common.js";import*as No from"./../../core/i18n/i18n.js";import*as ae from"./../../core/sdk/sdk.js";import*as _a from"./../../ui/legacy/components/utils/utils.js";import*as At from"./../../ui/legacy/legacy.js";import*as Ss from"./../../ui/visual_logging/visual_logging.js";var Va={};F(Va,{ActionDelegate:()=>To,ButtonProvider:()=>Io,CSSPropertyPrompt:()=>Ni,FUNCTION_SECTION_NAME:()=>Mo,IdleCallbackManager:()=>us,REGISTERED_PROPERTY_SECTION_NAME:()=>_t,SectionBlock:()=>Re,StylesSidebarPane:()=>Mt,escapeUrlAsCssComment:()=>Lc,quoteFamilyName:()=>Fa,unescapeCssString:()=>ys});import"./../../ui/legacy/legacy.js";import*as Ce from"./../../core/common/common.js";import*as _e from"./../../core/host/host.js";import*as ms from"./../../core/i18n/i18n.js";import*as ps from"./../../core/platform/platform.js";import{assertNotNullOrUndefined as vc}from"./../../core/platform/platform.js";import*as La from"./../../core/root/root.js";import*as _ from"./../../core/sdk/sdk.js";import*as ii from"./../../core/text_utils/text_utils.js";import*as Oa from"./../../models/ai_code_completion/ai_code_completion.js";import*as Ra from"./../../models/bindings/bindings.js";import*as ka from"./../../third_party/codemirror.next/codemirror.next.js";import*as Ua from"./../../ui/components/text_editor/text_editor.js";import{createIcon as bc,Icon as wc}from"./../../ui/kit/kit.js";import*as gs from"./../../ui/legacy/components/inline_editor/inline_editor.js";import*as fs from"./../../ui/legacy/components/utils/utils.js";import*as U from"./../../ui/legacy/legacy.js";import{render as Pa}from"./../../ui/lit/lit.js";import*as lt from"./../../ui/visual_logging/visual_logging.js";import*as Hi from"./../common/common.js";import*as _i from"./components/components.js";var zr={};F(zr,{ElementsSidebarPane:()=>$t});import"./../../models/computed_style/computed_style.js";import*as jr from"./../../ui/legacy/legacy.js";var $t=class extends jr.Widget.VBox{computedStyleModelInternal;constructor(e,t){super(t),this.computedStyleModelInternal=e,this.computedStyleModelInternal.addEventListener("CSSModelChanged",this.onCSSModelChanged,this),this.computedStyleModelInternal.addEventListener("ComputedStyleChanged",this.onComputedStyleChanged,this)}node(){return this.computedStyleModelInternal.node}cssModel(){return this.computedStyleModelInternal.cssModel()}computedStyleModel(){return this.computedStyleModelInternal}async performUpdate(){}onCSSModelChanged(e){}onComputedStyleChanged(){}};var so={};F(so,{ButtonProvider:()=>Et,LayersWidget:()=>Bt});import*as io from"./../../core/i18n/i18n.js";import*as St from"./../../core/sdk/sdk.js";import*as qr from"./../../ui/components/tree_outline/tree_outline.js";import*as Ct from"./../../ui/legacy/legacy.js";import*as Wd from"./../../ui/lit/lit.js";import*as un from"./../../ui/visual_logging/visual_logging.js";var Gr=`.layers-widget{overflow:hidden;padding-left:2px;background-color:var(--sys-color-cdt-base-container);border-bottom:1px solid var(--sys-color-divider);margin-top:0;padding-bottom:2px}.layers-widget > .layers-widget-title{font-weight:bold;margin:8px 4px 6px}
/*# sourceURL=${import.meta.resolve("./layersWidget.css")} */`;var{render:jd,html:zd,Directives:{ref:Gd}}=Wd,no={cssLayersTitle:"CSS layers",toggleCSSLayers:"Toggle CSS Layers view"},qd=io.i18n.registerUIStrings("panels/elements/LayersWidget.ts",no),Yd=io.i18n.getLocalizedString.bind(void 0,qd),Qd=(r,e,t)=>{let i=d=>h=>{let c=h.subLayers,p=St.CSSModel.CSSModel.readableLayerName(h.name),u=h.order+": "+p,g=d?d+"."+p:p;return c?{treeNodeData:u,id:g,children:async()=>c.sort((m,f)=>m.order-f.order).map(i(g))}:{treeNodeData:u,id:g}},{defaultRenderer:n}=qr.TreeOutline,s=[i("")(r.rootLayer)],o={defaultRenderer:n,tree:s},a=d=>{e.treeOutline=d},l=zd`
  <style>${Gr}</style>
  <div class="layers-widget">
    <div class="layers-widget-title">${no.cssLayersTitle}</div>
    <devtools-tree-outline ${Gd(a)}
                           .data=${o}></devtools-tree-outline>
  </div>
  `;jd(l,t,{container:{attributes:{jslog:`${un.pane("css-layers")}`}}})},eo,Bt=class r extends Ct.Widget.Widget{#e=null;#n;#i=null;constructor(e=Qd){super(),this.#n=e}wasShown(){super.wasShown(),Ct.Context.Context.instance().addFlavorChangeListener(St.DOMModel.DOMNode,this.#t,this),this.#t({data:Ct.Context.Context.instance().flavor(St.DOMModel.DOMNode)})}wasHidden(){Ct.Context.Context.instance().addFlavorChangeListener(St.DOMModel.DOMNode,this.#t,this),this.#t({data:null}),super.wasHidden()}#t(e){let t=e.data?.enclosingElementOrSelf();this.#e!==t&&(this.#e&&this.#e.domModel().cssModel().removeEventListener(St.CSSModel.Events.StyleSheetChanged,this.requestUpdate,this),this.#e=e.data,this.#e&&this.#e.domModel().cssModel().addEventListener(St.CSSModel.Events.StyleSheetChanged,this.requestUpdate,this),this.isShowing()&&this.requestUpdate())}async performUpdate(){if(!this.#e)return;let t={rootLayer:await this.#e.domModel().cssModel().getRootLayer(this.#e.id)},i={treeOutline:void 0};this.#n(t,i,this.contentElement),i.treeOutline&&(await i.treeOutline.expandRecursively(5),this.#i&&(await i.treeOutline.expandToAndSelectTreeNodeId(this.#i),this.#i=null))}async revealLayer(e){this.isShowing()||D.instance().showToolbarPane(this,Et.instance().item()),this.#i=`implicit outer layer.${e}`,this.requestUpdate(),await this.updateComplete}static instance(e={forceNew:null}){let{forceNew:t}=e;return(!eo||t)&&(eo=new r),eo}},to,Et=class r{button;constructor(){this.button=new Ct.Toolbar.ToolbarToggle(Yd(no.toggleCSSLayers),"layers","layers-filled"),this.button.setVisible(!1),this.button.addEventListener("Click",this.clicked,this),this.button.element.classList.add("monospace"),this.button.element.setAttribute("jslog",`${un.toggleSubpane("css-layers").track({click:!0})}`)}static instance(e={forceNew:null}){let{forceNew:t}=e;return(!to||t)&&(to=new r),to}clicked(){let e=Bt.instance();D.instance().showToolbarPane(e.isShowing()?null:e,this.button)}item(){return this.button}};var ga={};F(ga,{StyleEditorWidget:()=>at});import{createIcon as uc}from"./../../ui/kit/kit.js";import*as ma from"./../../ui/legacy/legacy.js";var pa={};F(pa,{AnchorFunctionRenderer:()=>Ti,AngleRenderer:()=>Kn,AttributeRenderer:()=>Fn,AutoBaseRenderer:()=>zn,BaseFunctionRenderer:()=>xi,BezierRenderer:()=>jn,CSSWideKeywordRenderer:()=>Rn,ColorMixRenderer:()=>Hn,ColorRenderer:()=>Qe,ContrastColorRenderer:()=>_n,CustomFunctionRenderer:()=>Zn,EnvFunctionRenderer:()=>Ln,FlexGridRenderer:()=>On,GhostStylePropertyTreeElement:()=>Mi,GridTemplateRenderer:()=>Yn,LengthRenderer:()=>Xn,LightDarkColorRenderer:()=>Bn,LinearGradientRenderer:()=>Vn,LinkableNameRenderer:()=>Wn,MathFunctionRenderer:()=>Jn,PositionAnchorRenderer:()=>es,PositionTryRenderer:()=>ts,RelativeColorChannelRenderer:()=>$n,SHORTHANDS_FOR_PERCENTAGES:()=>ha,ShadowModel:()=>Gn,ShadowRenderer:()=>qn,StylePropertyTreeElement:()=>re,VariableNameRenderer:()=>Un,VariableRenderer:()=>kn,getPropertyRenderers:()=>Ii,handleVarDefinitionActivate:()=>Ai});import*as X from"./../../core/common/common.js";import*as ie from"./../../core/host/host.js";import*as co from"./../../core/i18n/i18n.js";import*as vt from"./../../core/platform/platform.js";import*as v from"./../../core/sdk/sdk.js";import*as la from"./../../core/text_utils/text_utils.js";import*as is from"./../../models/badges/badges.js";import*as da from"./../../models/bindings/bindings.js";import*as Ye from"./../../ui/components/tooltips/tooltips.js";import{createIcon as ho,Icon as ra}from"./../../ui/kit/kit.js";import*as ca from"./../../ui/legacy/components/color_picker/color_picker.js";import*as $ from"./../../ui/legacy/components/inline_editor/inline_editor.js";import*as z from"./../../ui/legacy/legacy.js";import*as ac from"./../../ui/lit/lit.js";import*as pe from"./../../ui/visual_logging/visual_logging.js";import*as bt from"./components/components.js";var ta={};F(ta,{AlignContentValidator:()=>gn,CSSRuleValidator:()=>ye,FlexContainerValidator:()=>yn,FlexGridValidator:()=>vn,FlexItemValidator:()=>fn,FlexOrGridItemValidator:()=>En,FontVariationSettingsValidator:()=>An,GridContainerValidator:()=>Sn,GridItemValidator:()=>Cn,Hint:()=>se,MulticolFlexGridValidator:()=>bn,PaddingValidator:()=>wn,PositionAnchorValidator:()=>In,PositionValidator:()=>xn,SizingValidator:()=>Mn,ZIndexValidator:()=>Tn,cssRuleValidatorsMap:()=>Nn});import*as ao from"./../../core/i18n/i18n.js";import*as ro from"./../../core/sdk/sdk.js";import*as Zr from"./../../ui/i18n/i18n.js";import{html as Zd}from"./../../ui/lit/lit.js";import{html as oo}from"./../../ui/lit/lit.js";var te=(r,e)=>e===void 0?J(r):oo`<code class="unbreakable-text"><span class="property">${r}</span>: ${e}</code>`,J=r=>oo`<code class="unbreakable-text"><span class="property">${r}</span></code>`,st=r=>oo`<code class="unbreakable-text">${r}</code>`,ot=r=>{if(!r)return!1;let e=r.get("display");return e==="flex"||e==="inline-flex"},Xd=new Set(["block","flow-root","inline-block","list-item","table-caption","table-cell"]),Yr=r=>{if(!r)return!1;let e=r.get("display");if(!e)return!1;let t=e.split(" ");return t.length>3?!1:t.length===3?t[2]==="list-item":t.length===2?t[1]==="list-item"&&t[0]!=="inline":Xd.has(t[0])},Qr=r=>r?r.get("display")==="inline":!1,Jd=new Set(["audio","canvas","embed","iframe","img","input","object","video"]),Xr=r=>r?Jd.has(r):!1,rt=r=>{if(!r)return!1;let e=r.get("display");return e==="grid"||e==="inline-grid"},Ht=r=>{if(!r)return!1;let e=r.get("display");return e==="grid-lanes"||e==="inline-grid-lanes"},Jr=r=>{if(!r)return!1;let e=r.get("column-width"),t=r.get("column-count");return e!=="auto"||t!=="auto"};var H={ruleViolatedBySameElementRuleReason:"The {REASON_PROPERTY_DECLARATION_CODE} property prevents {AFFECTED_PROPERTY_DECLARATION_CODE} from having an effect.",ruleViolatedBySameElementRuleFix:"Try setting {PROPERTY_NAME} to something other than {PROPERTY_VALUE}.",ruleViolatedBySameElementRuleChangeFlexOrGrid:"Try adding {DISPLAY_GRID_RULE} or {DISPLAY_FLEX_RULE} to make this element into a container.",ruleViolatedBySameElementRuleChangeSuggestion:"Try setting the {EXISTING_PROPERTY_DECLARATION} property to {TARGET_PROPERTY_DECLARATION}.",ruleViolatedByParentElementRuleReason:"The {REASON_PROPERTY_DECLARATION_CODE} property on the parent element prevents {AFFECTED_PROPERTY_DECLARATION_CODE} from having an effect.",ruleViolatedByParentElementRuleFix:"Try setting the {EXISTING_PARENT_ELEMENT_RULE} property on the parent to {TARGET_PARENT_ELEMENT_RULE}.",fontVariationSettingsWarning:'Value for setting "{PH1}" {PH2} is outside the supported range [{PH3}, {PH4}] for font-family "{PH5}".',flexGridContainerPropertyRuleReason:"This element is a {CONTAINER_DISPLAY_NAME} item, i.e. a child of a {CONTAINER_DISPLAY_NAME} container, but {PROPERTY_NAME} only applies to containers.",flexGridContainerPropertyRuleFix:"Try setting the {PROPERTY_NAME} on the container element or use {ALTERNATIVE_PROPERTY_NAME} instead.",invalidAnchorPositioning:'An anchor was defined but the element was not anchor-positioned but positioned "{POSITION}".',invalidAnchorPositioningFix:'Set position to either "fixed" or "absolute".',unusedAnchorPositioning:"An anchor was defined but the element is hidden."},ea=ao.i18n.registerUIStrings("panels/elements/CSSRuleValidator.ts",H),mn=ao.i18n.getLocalizedString.bind(void 0,ea),q=Zr.getFormatLocalizedStringTemplate.bind(void 0,ea),se=class{#e;#n;#i;constructor(e,t,i){this.#e=e,this.#n=t,this.#i=i}getMessage(){return this.#e}getPossibleFixMessage(){return this.#n}getLearnMoreLink(){return this.#i}},ye=class{#e;constructor(e){this.#e=e}getApplicableProperties(){return this.#e}},gn=class extends ye{constructor(){super(["align-content","place-content"])}getHint(e,t){if(!t)return;let i=ot(t);if(!i&&!Yr(t)&&!rt(t)&&!Ht(t)){let o=te("display",t?.get("display")),a=J("align-content");return new se(q(H.ruleViolatedBySameElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:o,AFFECTED_PROPERTY_DECLARATION_CODE:a}),q(H.ruleViolatedBySameElementRuleFix,{PROPERTY_NAME:J("display"),PROPERTY_VALUE:st(t?.get("display"))}))}if(!i||t.get("flex-wrap")!=="nowrap")return;let n=te("flex-wrap","nowrap"),s=J("align-content");return new se(q(H.ruleViolatedBySameElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:n,AFFECTED_PROPERTY_DECLARATION_CODE:s}),q(H.ruleViolatedBySameElementRuleFix,{PROPERTY_NAME:J("flex-wrap"),PROPERTY_VALUE:st("nowrap")}))}},fn=class extends ye{constructor(){super(["flex","flex-basis","flex-grow","flex-shrink"])}getHint(e,t,i){if(!i||ot(i))return;let n=te("display",i?.get("display")),s=J(e),o=te("display","flex");return new se(q(H.ruleViolatedByParentElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:n,AFFECTED_PROPERTY_DECLARATION_CODE:s}),q(H.ruleViolatedByParentElementRuleFix,{EXISTING_PARENT_ELEMENT_RULE:n,TARGET_PARENT_ELEMENT_RULE:o}))}},yn=class extends ye{constructor(){super(["flex-direction","flex-flow","flex-wrap"])}getHint(e,t){if(!t||ot(t))return;let i=te("display",t?.get("display")),n=te("display","flex"),s=J(e);return new se(q(H.ruleViolatedBySameElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:i,AFFECTED_PROPERTY_DECLARATION_CODE:s}),q(H.ruleViolatedBySameElementRuleChangeSuggestion,{EXISTING_PROPERTY_DECLARATION:i,TARGET_PROPERTY_DECLARATION:n}))}},Sn=class extends ye{constructor(){super(["grid","grid-auto-columns","grid-auto-flow","grid-auto-rows","grid-template","grid-template-areas","grid-template-columns","grid-template-rows"])}getHint(e,t){if(rt(t)||Ht(t))return;let i=te("display",t?.get("display")),n=te("display","grid"),s=J(e);return new se(q(H.ruleViolatedBySameElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:i,AFFECTED_PROPERTY_DECLARATION_CODE:s}),q(H.ruleViolatedBySameElementRuleChangeSuggestion,{EXISTING_PROPERTY_DECLARATION:i,TARGET_PROPERTY_DECLARATION:n}))}},Cn=class extends ye{constructor(){super(["grid-area","grid-column","grid-row","grid-row-end","grid-row-start"])}getHint(e,t,i){if(!i||rt(i)||Ht(i))return;let n=te("display",i?.get("display")),s=te("display","grid"),o=J(e);return new se(q(H.ruleViolatedByParentElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:n,AFFECTED_PROPERTY_DECLARATION_CODE:o}),q(H.ruleViolatedByParentElementRuleFix,{EXISTING_PARENT_ELEMENT_RULE:n,TARGET_PARENT_ELEMENT_RULE:s}))}},En=class extends ye{constructor(){super(["order"])}getHint(e,t,i){if(!i||ot(i)||rt(i))return;let n=te("display",i?.get("display")),s=Zd`${te("display","flex")} or ${te("display","grid")}`,o=J(e);return new se(q(H.ruleViolatedByParentElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:n,AFFECTED_PROPERTY_DECLARATION_CODE:o}),q(H.ruleViolatedByParentElementRuleFix,{EXISTING_PARENT_ELEMENT_RULE:n,TARGET_PARENT_ELEMENT_RULE:s}))}},vn=class extends ye{constructor(){super(["justify-content"])}getHint(e,t,i){if(!t||ot(t)||rt(t)||Ht(t))return;if(i&&(ot(i)||rt(i)||Ht(i))){let o=st(i.get("display")),a=J(e),l=J("justify-self");return new se(q(H.flexGridContainerPropertyRuleReason,{CONTAINER_DISPLAY_NAME:o,PROPERTY_NAME:a}),q(H.flexGridContainerPropertyRuleFix,{PROPERTY_NAME:a,ALTERNATIVE_PROPERTY_NAME:l}))}let n=te("display",t.get("display")),s=J(e);return new se(q(H.ruleViolatedBySameElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:n,AFFECTED_PROPERTY_DECLARATION_CODE:s}),q(H.ruleViolatedBySameElementRuleChangeFlexOrGrid,{DISPLAY_GRID_RULE:te("display","grid"),DISPLAY_FLEX_RULE:te("display","flex")}))}},bn=class extends ye{constructor(){super(["gap","column-gap","row-gap","grid-gap","grid-column-gap","grid-row-gap"])}getHint(e,t){if(!t||Jr(t)||ot(t)||rt(t)||Ht(t))return;let i=te("display",t?.get("display")),n=J(e);return new se(q(H.ruleViolatedBySameElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:i,AFFECTED_PROPERTY_DECLARATION_CODE:n}),q(H.ruleViolatedBySameElementRuleFix,{PROPERTY_NAME:J("display"),PROPERTY_VALUE:st(t?.get("display"))}))}},wn=class extends ye{constructor(){super(["padding","padding-top","padding-right","padding-bottom","padding-left"])}getHint(e,t){let i=t?.get("display");if(!i||!["table-row-group","table-header-group","table-footer-group","table-row","table-column-group","table-column"].includes(i))return;let s=te("display",t?.get("display")),o=J(e);return new se(q(H.ruleViolatedBySameElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:s,AFFECTED_PROPERTY_DECLARATION_CODE:o}),q(H.ruleViolatedBySameElementRuleFix,{PROPERTY_NAME:J("display"),PROPERTY_VALUE:st(t?.get("display"))}))}},xn=class extends ye{constructor(){super(["top","right","bottom","left"])}getHint(e,t){let i=t?.get("position");if(!i||i!=="static")return;let n=te("position",t?.get("position")),s=J(e);return new se(q(H.ruleViolatedBySameElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:n,AFFECTED_PROPERTY_DECLARATION_CODE:s}),q(H.ruleViolatedBySameElementRuleFix,{PROPERTY_NAME:J("position"),PROPERTY_VALUE:st(t?.get("position"))}))}},Tn=class extends ye{constructor(){super(["z-index"])}getHint(e,t,i){let n=t?.get("position");if(!n||["absolute","relative","fixed","sticky"].includes(n)||ot(i)||rt(i))return;let s=te("position",t?.get("position")),o=J(e);return new se(q(H.ruleViolatedBySameElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:s,AFFECTED_PROPERTY_DECLARATION_CODE:o}),q(H.ruleViolatedBySameElementRuleFix,{PROPERTY_NAME:J("position"),PROPERTY_VALUE:st(t?.get("position"))}))}},In=class extends ye{constructor(){super(["position-anchor"])}getHint(e,t){let i=t?.get("position")??"static",n=t?.get("display");if(i!=="absolute"&&i!=="fixed")return new se(mn(H.invalidAnchorPositioning,{POSITION:i}),mn(H.invalidAnchorPositioningFix));if(n==="none")return new se(mn(H.unusedAnchorPositioning,{POSITION:i}),null)}},Mn=class extends ye{constructor(){super(["width","height"])}getHint(e,t,i,n){if(!t||!n||!Qr(t)||Xr(n))return;let s=te("display",t?.get("display")),o=J(e);return new se(q(H.ruleViolatedBySameElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:s,AFFECTED_PROPERTY_DECLARATION_CODE:o}),q(H.ruleViolatedBySameElementRuleFix,{PROPERTY_NAME:J("display"),PROPERTY_VALUE:st(t?.get("display"))}))}},An=class extends ye{constructor(){super(["font-variation-settings"])}getHint(e,t,i,n,s){if(!t)return;let o=t.get("font-variation-settings");if(!o)return;let a=t.get("font-family");if(!a)return;let l=new Set(ro.CSSPropertyParser.parseFontFamily(a)),d=(s||[]).filter(p=>l.has(p.getFontFamily())),h=ro.CSSPropertyParser.parseFontVariationSettings(o),c=[];for(let p of h)for(let u of d){let g=u.getVariationAxisByTag(p.tag);g&&(p.value<g.minValue||p.value>g.maxValue)&&c.push(mn(H.fontVariationSettingsWarning,{PH1:p.tag,PH2:p.value,PH3:g.minValue,PH4:g.maxValue,PH5:u.getFontFamily()}))}if(c.length)return new se(c.join(" "),"")}},ec=[gn,yn,vn,fn,En,An,Sn,Cn,bn,wn,xn,In,Mn,Tn],tc=()=>{let r=new Map;for(let e of ec){let t=new e,i=t.getApplicableProperties();for(let n of i){let s=r.get(n);s===void 0&&(s=[]),s.push(t),r.set(n,s)}}return r},Nn=tc();var sa={};F(sa,{CSSValueTraceView:()=>Ei});import*as na from"./../../ui/legacy/legacy.js";import*as ic from"./../../ui/lit/lit.js";var ia=`:host(:focus-within){outline:none!important}.css-value-trace{--cell-width:1.5em;--padding:var(--sys-size-3);--padding-left:var(--sys-size-4);display:grid;grid-template-columns:var(--cell-width) 1fr;margin:calc(-1 * var(--padding));margin-left:calc(-1 * var(--padding-left));& .trace-line-icon{grid-column-start:1;width:var(--sys-size-9);height:var(--sys-size-9);text-align:center;color:var(--icon-default);padding-top:var(--sys-size-2)}:focus{border-radius:var(--sys-size-2);outline:var(--sys-size-2) solid var(--sys-color-state-focus-ring)}details{height:min-content;grid-column:1/4;summary{display:grid;grid-template-columns:var(--cell-width) var(--cell-width) 1fr;&::marker{display:none;content:""}}div{devtools-icon, .trace-line-icon{grid-column-start:2}display:grid;grid-template-columns:var(--cell-width) var(--cell-width) 1fr}.trace-line{grid-column:3/4}.marker{grid-column-start:2;--icon-url:var(--image-file-triangle-right);padding-top:var(--sys-size-3)}&[open] .marker{--icon-url:var(--image-file-triangle-down)}}& .trace-line{place-self:center start;padding:var(--padding);grid-column:2/3;margin:0;padding-left:var(--padding-left)}.full-row{grid-column-start:1}}:host::highlight(css-value-tracing){background-color:var(--sys-color-tonal-container)}
/*# sourceURL=${import.meta.resolve("./cssValueTraceView.css")} */`;var Pn=`.has-ignorable-error .webkit-css-property{color:inherit}.inactive-value:not(:hover,:focus,:focus-within){text-decoration:line-through}.tree-outline{padding:0}.tree-outline li{margin-left:12px;padding-left:22px;white-space:normal;text-overflow:ellipsis;overflow-wrap:break-word;cursor:auto;display:block;&::before{display:none}.webkit-css-property{margin-left:-22px}&.not-parsed-ok{margin-left:0;.exclamation-mark{display:inline-block;position:relative;width:11px;height:10px;margin:0 7px 0 0;top:1px;left:-36px;user-select:none;cursor:default;z-index:1;mask:var(--image-file-warning-filled) center /14px no-repeat;background-color:var(--icon-warning)}&.has-ignorable-error .exclamation-mark{background-color:unset}}&.filter-match{background-color:var(--sys-color-tonal-container)}&.editing{margin-left:10px;text-overflow:clip}&.editing-sub-part{padding:3px 6px 8px 18px;margin:-1px -6px -8px;text-overflow:clip}&.child-editing{overflow-wrap:break-word!important;white-space:normal!important;padding-left:0;> span:has(> .text-prompt-root){max-width:100%}}.info{padding-top:4px;padding-bottom:3px}&.ghost-row, .ghost-value-prediction{.webkit-css-property{opacity:50%}color:var(--sys-color-token-subtle);font-style:italic;pointer-events:none}&.ghost-row{padding-left:56px}}.tree-outline > li{padding-left:38px;clear:both;min-height:14px;.webkit-css-property{margin-left:-38px}&.child-editing{.text-prompt{white-space:pre-wrap}.webkit-css-property{margin-left:0}}}ol:not(.tree-outline){display:none;margin:0;list-style:none}.tree-outline > ol{padding-inline-start:16px;ol{padding-left:0}}ol.expanded{display:block}.enabled-button{visibility:hidden;float:left;font-size:10px;margin:0;vertical-align:top;position:relative;z-index:1;width:18px;left:-40px;top:0.5px;height:13px}input.enabled-button.small{&:hover::after,
  &:active::before{left:3px}}devtools-icon.icon-link{color:var(--text-link);width:13px;height:13px;&:hover{cursor:pointer}}.overloaded:not(.has-ignorable-error, .invalid-property-value),
.inactive:not(.invalid-property-value),
.disabled,
.not-parsed-ok:not(.has-ignorable-error, .invalid-property-value),
.not-parsed-ok.invalid-property-value .value{text-decoration:line-through}.implicit,
.inherited,
.inactive-property{opacity:50%}.animation-override-hint{max-width:232px}.hint-wrapper{align-items:center;display:inline-block;margin-left:3px;max-height:13px;max-width:13px;vertical-align:middle}.hint{cursor:pointer;display:block;position:relative;left:-1.5px;top:-1.5px}.has-ignorable-error{color:var(--sys-color-state-disabled)}:host-context(.no-affect) .tree-outline li{opacity:50%;&.editing{opacity:100%}}:host-context(.styles-panel-hovered:not(.read-only)) .webkit-css-property:hover,
:host-context(.styles-panel-hovered:not(.read-only)) .value:hover{text-decoration:underline;cursor:default}.styles-name-value-separator{display:inline-block;width:14px;text-decoration:inherit;white-space:pre}.styles-clipboard-only{display:inline-block;width:0;opacity:0%;pointer-events:none;white-space:pre;.tree-outline li.child-editing &{display:none}}.styles-pane-button{width:var(--sys-size-8);height:var(--sys-size-8);margin-left:var(--sys-size-4);position:absolute;display:inline-flex;align-items:center;justify-content:center;user-select:none}:host-context(.matched-styles) .tree-outline li{margin-left:0!important}.expand-icon{user-select:none;margin-left:-6px;margin-right:2px;margin-bottom:-4px;.tree-outline li:not(.parent) &{display:none}}:host-context(.matched-styles:not(.read-only):hover) li:not(.child-editing) .enabled-button,
:host-context(.matched-styles:not(.read-only)) .tree-outline li.disabled:not(.child-editing) .enabled-button{visibility:visible}:host-context(.matched-styles){ol.expanded{margin-left:16px}:focus-visible{border-radius:var(--sys-size-2);outline:var(--sys-size-2) solid var(--sys-color-state-focus-ring)}}.devtools-link-styled-trim{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:80%;vertical-align:bottom}devtools-css-angle,
devtools-css-length{display:inline-block}devtools-css-length{margin-left:1px}devtools-icon.open-in-animations-panel{position:relative;transform:scale(0.7);margin:-5px -2px -3px -4px;user-select:none;color:var(--icon-css);cursor:default;&:hover{color:var(--icon-css-hover)}}.css-function-inline-block{display:inline-block;padding-left:18px;margin-left:-38px;color:var(--app-color-element-sidebar-subtitle)}.tracing-anchor{text-decoration:underline dotted var(--sys-color-token-meta)}devtools-icon.bezier-swatch-icon{position:relative;transform:scale(0.7);margin:-5px -2px -3px -4px;user-select:none;color:var(--icon-css);cursor:default;&:hover{color:var(--icon-css-hover)}}span.bezier-icon-and-text{white-space:nowrap}
/*# sourceURL=${import.meta.resolve("./stylePropertiesTreeOutline.css")} */`;var{html:ti,render:nc,Directives:{classMap:sc,ifDefined:oc}}=ic;function rc(r,e,t){let i=[...r.substitutions],n=[...r.evaluations],s=n.pop()??i.pop(),[o,...a]=n,l=!o||a.length===0,d=l?void 0:0,h=n.length===0&&i.length===0;nc(ti`
      <div role=dialog class="css-value-trace monospace" @keydown=${c}>
        ${i.map(p=>ti`
          <span class="trace-line-icon" aria-label="is equal to">↳</span>
          <span class="trace-line">${p}</span>`)}
        ${o&&a.length===0?ti`
          <span class="trace-line-icon" aria-label="is equal to">↳</span>
          <span class="trace-line">${o}</span>`:ti`
          <details @toggle=${r.onToggle} ?hidden=${l}>
            <summary tabindex=${oc(d)}>
              <span class="trace-line-icon" aria-label="is equal to">↳</span>
              <devtools-icon class="marker"></devtools-icon>
              <span class="trace-line">${o}</span>
            </summary>
            <div>
              ${a.map(p=>ti`
                  <span class="trace-line-icon" aria-label="is equal to" >↳</span>
                  <span class="trace-line">${p}</span>`)}
            </div>
          </details>`}
        ${s?ti`
          <span class="trace-line-icon" aria-label="is equal to" ?hidden=${h}>↳</span>
          <span class=${sc({"trace-line":!0,"full-row":h})}>
            ${s}
          </span>`:""}
      </div>`,t);function c(p){if(p.altKey||(p.key.startsWith("Arrow")||p.key===" "||p.key==="Enter")&&p.consume(),p.key==="Tab"){let u=this.querySelectorAll("[tabindex]")??[],g=u[0],m=u[u.length-1];p.target===m&&!p.shiftKey&&(p.consume(!0),g instanceof HTMLElement&&g.focus()),p.target===g&&p.shiftKey&&(p.consume(!0),m instanceof HTMLElement&&m.focus())}}}var Ei=class extends na.Widget.VBox{#e;#n;#i=[];#t=[];#s=!1;constructor(e,t=rc){super(e,{useShadowDom:!0}),this.registerRequiredCSS(ia,Pn),this.#n=t,this.requestUpdate()}async showTrace(e,t,i,n,s,o,a,l,d){let h=t===null?e.parseValue(i,n):e.parseExpression(t,i,n);if(h)return await this.#o(e,h,s,o,a,l,d)}async#o(e,t,i,n,s,o,a){this.#e=new vi;let l=new Map(i.map(u=>[u.matchType,u])),d=[],h=[],c=new bi(this.#e,n,s,t);for(;c.nextSubstitution();){let u=new Fe(t.ast,e,l,t,void 0,{},c,a);d.push(A.render(t.ast.tree,u).nodes)}let p=[];for(;c.nextEvaluation();){let u=new Fe(t.ast,e,l,t,void 0,{},c,a);h.push(A.render(t.ast.tree,u).nodes),p.push(c.runAsyncEvaluations())}this.#t=d,this.#i=[];for(let[u,g]of(await Promise.all(p)).entries())g&&this.#i.push(h[u]);if(this.#t.length===0&&this.#i.length===0){let u=new Fe(t.ast,e,l,t,void 0,{},void 0,a);this.#i.push(A.render(t.ast.tree,u).nodes)}this.#s=o,this.requestUpdate()}performUpdate(){let e={substitutions:this.#t,evaluations:this.#i,onToggle:()=>this.onResize()};this.#n(e,{},this.contentElement);let t=this.contentElement.querySelector("[tabindex]");this.setDefaultFocusedElement(t),t&&this.#s&&(this.focus(),this.resetPendingFocus())}resetPendingFocus(){this.#s=!1}};var oa={};F(oa,{getCssDeclarationAsJavascriptProperty:()=>Dn});function Dn(r){let{name:e,value:t}=r,i=e.startsWith("--")?`'${e}'`:e.replace(/-([a-z])/gi,(s,o)=>o.toUpperCase()),n=`'${t.replaceAll("'","\\'")}'`;return`${i}: ${n}`}var{html:ee,nothing:wi,render:Ve,Directives:{classMap:aa}}=ac,he=v.CSSPropertyParser.ASTUtils,lc=bt.StylePropertyEditor.FlexboxEditor,dc=bt.StylePropertyEditor.GridEditor,cc=bt.StylePropertyEditor.GridLanesEditor,{widget:hc}=z.Widget,Y={shiftClickToChangeColorFormat:"Shift + Click to change color format.",openColorPickerS:"Open color picker. {PH1}",togglePropertyAndContinueEditing:"Toggle property and continue editing",openInSourcesPanel:"Open in Sources panel",copyDeclaration:"Copy declaration",copyProperty:"Copy property",copyValue:"Copy value",copyRule:"Copy rule",copyAllDeclarations:"Copy all declarations",viewComputedValue:"View computed value",overriddenByAnimation:"Overridden by animation styles.",openAnimationsPanel:"Open Animations panel",flexboxEditorButton:"Open `flexbox` editor",gridEditorButton:"Open `grid` editor",gridLanesEditorButton:"Open `grid-lanes` editor",copyCssDeclarationAsJs:"Copy declaration as JS",copyAllCssDeclarationsAsJs:"Copy all declarations as JS",jumpToAnimationsPanel:"Jump to Animations panel",sIsNotDefined:"{PH1} is not defined",invalidPropertyValue:"Invalid property value",unknownPropertyName:"Unknown property name",invalidString:"{PH1}, property name: {PH2}, property value: {PH3}",jumpToAnchorNode:"Jump to anchor node"},pc=co.i18n.registerUIStrings("panels/elements/StylePropertyTreeElement.ts",Y),Q=co.i18n.getLocalizedString.bind(void 0,pc),lo=new WeakMap,Ln=class extends W(v.CSSPropertyParserMatchers.EnvFunctionMatch){treeElement;matchedStyles;computedStyles;computedStyleExtraFields;constructor(e,t,i,n){super(),this.treeElement=e,this.matchedStyles=t,this.computedStyles=i,this.computedStyleExtraFields=n}render(e,t){let[,i]=he.callArgs(e.node);if(e.value){let l=t.tracing?.substitution();if(l)return e.varNameIsValid?[document.createTextNode(e.value)]:A.render(i,l.renderingContext(t)).nodes}let n=document.createElement("span"),s=this.treeElement?.getTracingTooltip("env",e.node,this.matchedStyles,this.computedStyles,this.computedStyleExtraFields,t)??"env",o=aa({"inactive-value":!e.varNameIsValid}),a=aa({"inactive-value":e.varNameIsValid});return Ve(ee`${s}(<span class=${o}>${e.varName}</span>${i?ee`, <span class=${a}>${A.render(i,t).nodes}</span>`:wi})`,n,{host:n}),[n]}},On=class extends W(v.CSSPropertyParserMatchers.FlexGridGridLanesMatch){#e;#n;constructor(e,t){super(),this.#e=t,this.#n=e}render(e,t){let i=A.render(he.siblings(he.declValue(e.node)),t).nodes;if(!this.#e?.editable())return i;let n=`${this.#e.section().getSectionIdx()}_${this.#e.section().nextEditorTriggerButtonIdx}`;function s(h){switch(h){case"flex":return lc;case"grid":return dc;case"grid-lanes":return cc}}function o(h){switch(h){case"flex":return Q(Y.flexboxEditorButton);case"grid":return Q(Y.gridEditorButton);case"grid-lanes":return Q(Y.gridLanesEditorButton)}}function a(h){switch(h){case"flex":return 6;case"grid":return 5;case"grid-lanes":return 12}}let l=at.createTriggerButton(this.#n,this.#e.section(),s(e.layoutType),o(e.layoutType),n);l.tabIndex=-1,l.setAttribute("jslog",`${pe.showStyleEditor().track({click:!0}).context(e.layoutType)}`),this.#e.section().nextEditorTriggerButtonIdx++,l.addEventListener("click",()=>{ie.userMetrics.swatchActivated(a(e.layoutType))});let d=this.#n.swatchPopoverHelper();return d.isShowing(at.instance())&&at.instance().getTriggerKey()===n&&d.setAnchorElement(l),[...i,l]}},Rn=class extends W(v.CSSPropertyParserMatchers.CSSWideKeywordMatch){#e;#n;constructor(e,t){super(),this.#e=t,this.#n=e}render(e,t){let i=e.resolveProperty();if(!i)return[document.createTextNode(e.text)];let n=new $.LinkSwatch.LinkSwatch;if(n.data={text:e.text,tooltip:i?void 0:{title:Q(Y.sIsNotDefined,{PH1:e.text})},isDefined:!!i,onLinkActivate:()=>i&&this.#n.jumpToDeclaration(i),jslogContext:"css-wide-keyword-link"},v.CSSMetadata.cssMetadata().isColorAwareProperty(i.name)||v.CSSMetadata.cssMetadata().isCustomProperty(i.name)){let s=X.Color.parse(t.matchedResult.getComputedText(e.node));if(s)return[new Qe(this.#n,this.#e).renderColorSwatch(s,n),n]}return[n]}};function Ai(r,e){ie.userMetrics.actionTaken(ie.UserMetrics.Action.CustomPropertyLinkClicked),ie.userMetrics.swatchActivated(0),typeof r=="string"?e.jumpToProperty(r)||e.jumpToProperty("initial-value",r,_t):r.declaration instanceof v.CSSProperty.CSSProperty?e.revealProperty(r.declaration):r.declaration instanceof v.CSSMatchedStyles.CSSRegisteredProperty&&e.jumpToProperty("initial-value",r.name,_t)}var kn=class extends W(v.CSSPropertyParserMatchers.VariableMatch){#e;#n;#i;#t;#s;constructor(e,t,i,n,s){super(),this.#n=t,this.#e=e,this.#i=i,this.#t=n,this.#s=s}render(e,t){if(this.#n?.property.ownerStyle.parentRule instanceof v.CSSRule.CSSFunctionRule)return A.render(he.children(e.node),t).nodes;let{declaration:i,value:n}=e.resolveVariable()??{},s=n===void 0,o=n??e.fallbackValue(),a=T=>Ai(i??T,this.#e),l=document.createElement("span"),d=t.tracing?.substitution({match:e,context:t});if(d){if(i?.declaration){let{nodes:T,cssControls:w}=A.renderValueNodes({name:i.name,value:i.value??""},d.cachedParsedValue(i.declaration,this.#i,this.#t),Ii(i.name,i.style,this.#e,this.#i,null,this.#t,this.#s),d);return w.forEach((b,y)=>b.forEach(x=>t.addControl(y,x))),T}if(!i&&e.fallback)return A.render(e.fallback,d.renderingContext(t)).nodes}let h=e.fallback?A.render(e.fallback,t):void 0,c=this.#n?.getTracingTooltip("var",e.node,this.#i,this.#t,this.#s,t),p=this.#e.getVariablePopoverContents(this.#i,e.name,n??null),u=this.#n?.getTooltipId("custom-property-var"),g=u?{tooltipId:u}:void 0;Ve(ee`
        <span data-title=${o||""}
              jslog=${pe.link("css-variable").track({click:!0,hover:!0})}>
          ${c??"var"}(
          <devtools-link-swatch class=css-var-link .data=${{tooltip:g,text:e.name,isDefined:o!==null&&!s,onLinkActivate:a}}>
           </devtools-link-swatch>
           ${h?ee`, ${h.nodes}`:wi})
        </span>
        ${u?ee`
          <devtools-tooltip
            id=${u}
            variant=rich
            jslogContext=elements.css-var
          >
            ${p}
          </devtools-tooltip>
        `:""}
    `,l);let m=o&&X.Color.parse(o);if(!m)return[l];let f=new Qe(this.#e,this.#n).renderColorSwatch(m,l);return t.addControl("color",f),s&&h?.cssControls.get("color")?.forEach(T=>T.addEventListener($.ColorSwatch.ColorChangedEvent.eventName,w=>{f.setColor(w.data.color)})),[f,l]}},Un=class extends W(v.CSSPropertyParserMatchers.VariableNameMatch){#e;#n;#i;constructor(e,t,i){super(),this.#n=t,this.#e=e,this.#i=i}render(e,t){let i=document.createElement("span");if(this.#n?.property.ownerStyle.parentRule instanceof v.CSSRule.CSSFunctionRule)return Ve(ee`${e.text}`,i),[i];let{declaration:n,value:s}=e.resolveVariable()??{},o=s!==void 0,a=c=>Ai(n??c,this.#e),l=this.#e.getVariablePopoverContents(this.#i,e.text,s??null),d=this.#n?.getTooltipId("custom-property-var");return Ve(ee`
        <devtools-link-swatch class=css-var-link .data=${{tooltip:d?{tooltipId:d}:void 0,text:e.text,isDefined:o,onLinkActivate:a}}>
        </devtools-link-swatch>
        ${d?ee`
          <devtools-tooltip
            id=${d}
            variant=rich
            jslogContext=elements.css-var
          >
            ${l}
          </devtools-tooltip>
        `:""}
    `,i),[i]}},Fn=class extends W(v.CSSPropertyParserMatchers.AttributeMatch){#e;#n;#i;#t;#s;constructor(e,t,i,n,s){super(),this.#n=t,this.#e=e,this.#i=i,this.#t=n,this.#s=s}render(e,t){if(this.#n?.property.ownerStyle.parentRule instanceof v.CSSRule.CSSFunctionRule)return A.render(he.children(e.node),t).nodes;let i=e.rawAttributeValue(),n=e.resolveAttributeValue(),s=n===null,o=i===null,a=s&&!o,l=o?"inactive":"",d=a?"inactive":"",h=s?"":"inactive",c=n??e.fallbackValue(),p=document.createElement("span"),u=t.tracing?.substitution({match:e,context:t});if(u){if(s){if(e.fallback)return A.render(e.fallback,u.renderingContext(t)).nodes}else if(e.substitutionText!==null){let y=v.CSSPropertyParser.matchDeclaration("--property",e.substitutionText,this.#i.propertyMatchers(e.style,this.#t));return A.renderValueNodes({name:"--property",value:e.substitutionText},y,Ii("--property",e.style,this.#e,this.#i,null,this.#t,this.#s),u).nodes}}let g=e.fallback?A.render(e.fallback,t):void 0,m=this.#n?.getTracingTooltip("attr",e.node,this.#i,this.#t,this.#s,t),f=o?void 0:this.#n?.getTooltipId("custom-attribute"),T=f?{tooltipId:f}:void 0;Ve(ee`
        <span data-title=${c||""}
              jslog=${pe.link("css-variable").track({click:!0,hover:!0})}
        >${m??"attr"}(<devtools-link-swatch class=${l} .data=${{tooltip:T,text:e.name,isDefined:!0,onLinkActivate:()=>this.#o(this.#i.originatingNodeForStyle(e.style),e.name)}}></devtools-link-swatch>${f?ee`
          <devtools-tooltip
            id=${f}
            variant=rich
            jslogContext=elements.css-var
          >${JSON.stringify(i)}</devtools-tooltip>`:wi}${e.type?ee` <span class=${d}>${e.type}</span>`:wi}${g?ee`, <span class=${h}>${g.nodes}</span>`:wi})</span>`,p);let w=c&&X.Color.parse(c);if(!w)return[p];let b=new Qe(this.#e,this.#n).renderColorSwatch(w,p);return t.addControl("color",b),s&&g?.cssControls.get("color")?.forEach(y=>y.addEventListener($.ColorSwatch.ColorChangedEvent.eventName,x=>{b.setColor(x.data.color)})),[b,p]}#o(e,t){e&&(ie.userMetrics.actionTaken(ie.UserMetrics.Action.AttributeLinkClicked),ie.userMetrics.swatchActivated(11),D.instance().highlightNodeAttribute(e,t))}},Vn=class extends W(v.CSSPropertyParserMatchers.LinearGradientMatch){render(e,t){let i=he.children(e.node),{nodes:n,cssControls:s}=A.render(i,t),o=s.get("angle"),a=o?.length===1?o[0]:null;if(a instanceof $.CSSAngle.CSSAngle){a.updateProperty(t.matchedResult.getComputedText(e.node));let d=he.callArgs(e.node)[0]?.find(c=>t.matchedResult.getMatch(c)instanceof v.CSSPropertyParserMatchers.AngleMatch),h=d&&t.matchedResult.getMatch(d);h&&a.addEventListener($.InlineEditorUtils.ValueChangedEvent.eventName,c=>{a.updateProperty(t.matchedResult.getComputedText(e.node,p=>p===h?c.data.value:null))})}return n}},$n=class extends W(v.CSSPropertyParserMatchers.RelativeColorChannelMatch){#e;constructor(e){super(),this.#e=e}render(e,t){let i=t.findParent(e.node,v.CSSPropertyParserMatchers.ColorMatch);if(!i?.relativeColor)return[document.createTextNode(e.text)];let n=e.getColorChannelValue(i.relativeColor);if(n===null)return[document.createTextNode(e.text)];let s=t.tracing?.applyEvaluation([],()=>({placeholder:[document.createTextNode(n.toFixed(3))]}));if(s)return s;let o=document.createElement("span");o.append(e.text);let a=this.#e?.getTooltipId("relative-color-channel");if(!a)return[o];o.setAttribute("aria-details",a);let l=new Ye.Tooltip.Tooltip({id:a,variant:"rich",anchor:o,jslogContext:"elements.relative-color-channel"});return l.append(n.toFixed(3)),[o,l]}},Qe=class r extends W(v.CSSPropertyParserMatchers.ColorMatch){#e;#n;constructor(e,t){super(),this.#e=t,this.#n=e}#i(e,t){let i=document.createElement("span");if(e.node.name!=="CallExpression")return i.appendChild(document.createTextNode(e.text)),{valueChild:i};let n=t.matchedResult.ast.text(e.node.getChild("Callee")),s=he.siblings(e.node.getChild("ArgList")),o=t.tracing?.evaluation([s],{match:e,context:t})??void 0,a=o?.at(0)?.renderingContext(t)??t,{nodes:l,cssControls:d}=A.renderInto(s,a,i);return Ve(ee`${this.#e?.getTracingTooltip(n,e.node,this.#e.matchedStyles(),this.#e.getComputedStyles()??new Map,this.#e.getComputedStyleExtraFields(),a)??n}${l}`,i),{valueChild:i,cssControls:d,childTracingContexts:o}}render(e,t){let{valueChild:i,cssControls:n,childTracingContexts:s}=this.#i(e,t),o=t.matchedResult.getComputedText(e.node);if(e.relativeColor){let d=document.body.appendChild(document.createElement("span"));d.style.backgroundColor=o,o=window.getComputedStyle(d).backgroundColor?.toString()||o,d.remove()}let a=X.Color.parse(o);if(!a)return e.node.name==="CallExpression"?A.render(he.children(e.node),t).nodes:[document.createTextNode(o)];if(e.node.name==="CallExpression"&&s){let d=t.tracing?.applyEvaluation(s,()=>{let h=a.as((a.alpha??1)!==1?"hexa":"hex"),c=document.createElement("span");c.textContent=h.asString();let p=new r(this.#n,null).renderColorSwatch(h.isGamutClipped()?a:h.nickname()??h,c);return p.addEventListener($.ColorSwatch.ColorChangedEvent.eventName,u=>{c.textContent=u.data.color.asString()}),t.addControl("color",p),{placeholder:[p,c]}});if(d)return d}let l=this.renderColorSwatch(a,i);if(t.addControl("color",l),n&&e.node.name==="CallExpression"&&t.ast.text(e.node.getChild("Callee")).match(/^(hsla?|hwba?)/)){let[d]=n.get("angle")??[];d instanceof $.CSSAngle.CSSAngle&&(d.updateProperty(l.color?.asString()??""),d.addEventListener($.InlineEditorUtils.ValueChangedEvent.eventName,h=>{let c=X.Color.parseHueNumeric(h.data.value),p=l.color;!c||!p||(p.is("hsl")||p.is("hsla")?l.setColor(new X.Color.HSL(c,p.s,p.l,p.alpha)):(p.is("hwb")||p.is("hwba"))&&l.setColor(new X.Color.HWB(c,p.w,p.b,p.alpha)),d.updateProperty(l.color?.asString()??""))}))}return[l,i]}renderColorSwatch(e,t){let i=this.#e?.editable(),n=Q(Y.shiftClickToChangeColorFormat),s=i?Q(Y.openColorPickerS,{PH1:n}):"",o=new $.ColorSwatch.ColorSwatch(s);if(o.setReadonly(!i),e&&o.renderColor(e),this.#e?.editable()){let a=this.#e,l=()=>{a.applyStyleText(a.renderedPropertyText(),!1)},d=c=>{t.textContent=c.data.color.getAuthoredText()??c.data.color.asString(),a.applyStyleText(a.renderedPropertyText(),!1)};o.addEventListener($.ColorSwatch.ClickEvent.eventName,()=>{ie.userMetrics.swatchActivated(2)}),o.addEventListener($.ColorSwatch.ColorChangedEvent.eventName,l),o.addEventListener($.ColorSwatch.ColorFormatChangedEvent.eventName,d);let h=new Vt(a,a.stylesContainer().swatchPopoverHelper(),o);h.addEventListener("colorchanged",c=>{t.textContent=c.data.getAuthoredText()??c.data.asString(),o.setColor(c.data)}),a.property.name==="color"&&this.#t(h)}return o}async#t(e){let t=this.#n.cssModel(),i=this.#n.node();if(!t||typeof i?.id>"u")return;let n=new ca.ContrastInfo.ContrastInfo(await t.getBackgroundColors(i.id));e.setContrastInfo(n)}},Bn=class extends W(v.CSSPropertyParserMatchers.LightDarkColorMatch){#e;#n;#i;constructor(e,t,i){super(),this.#e=i,this.#n=e,this.#i=t}render(e,t){let i=document.createElement("span");i.appendChild(document.createTextNode("light-dark("));let n=i.appendChild(document.createElement("span"));i.appendChild(document.createTextNode(", "));let s=i.appendChild(document.createElement("span"));i.appendChild(document.createTextNode(")"));let{cssControls:o}=A.renderInto(e.light,t,n),{cssControls:a}=A.renderInto(e.dark,t,s);if(t.matchedResult.hasUnresolvedSubstitutions(e.node))return[i];if(!X.Color.parse(t.matchedResult.getComputedTextRange(e.light[0],e.light[e.light.length-1])))return[i];let d=new Qe(this.#n,this.#e).renderColorSwatch(void 0,i);return t.addControl("color",d),this.applyColorScheme(e,t,d,n,s,o,a),[d,i]}async applyColorScheme(e,t,i,n,s,o,a){let l=await this.#t(e);if(t.signal?.aborted||!l)return;(l===e.light?o:a).get("color")?.forEach(u=>u.addEventListener($.ColorSwatch.ColorChangedEvent.eventName,g=>i.setColor(g.data.color)));let h=l===e.light?s:n,c=t.matchedResult.getComputedTextRange(l[0],l[l.length-1]),p=c&&X.Color.parse(c);h.classList.add("inactive-value"),p&&i.renderColor(p)}async#t(e){let t=this.#i.resolveProperty("color-scheme",e.style)?.parseValue(this.#i,new Map)?.getComputedPropertyValueText().split(" ")??[],i=t.includes("light"),n=t.includes("dark");if(!n&&!i)return e.light;if(!i)return e.dark;if(!n)return e.light;switch(await this.#n.cssModel()?.colorScheme()){case"dark":return e.dark;case"light":return e.light;default:return}}},Hn=class extends W(v.CSSPropertyParserMatchers.ColorMixMatch){#e;#n;#i;#t;#s;constructor(e,t,i,n,s){super(),this.#e=e,this.#n=t,this.#i=i,this.#t=n,this.#s=s}render(e,t){let i=(y,x)=>{if(y instanceof $.ColorMixSwatch.ColorMixSwatch||y instanceof $.ColorSwatch.ColorSwatch){y instanceof $.ColorSwatch.ColorSwatch?y.addEventListener($.ColorSwatch.ColorChangedEvent.eventName,L=>x(L.data.color.getAuthoredText()??L.data.color.asString())):y.addEventListener($.ColorMixSwatch.ColorMixChangedEvent.eventName,L=>x(L.data.text));let I=y.getText();if(I)return x(I),!0}return!1},n=t.tracing?.evaluation([e.space,e.color1,e.color2],{match:e,context:t}),s=n?.map(y=>y.renderingContext(t))??[t,t,t],o=document.createElement("span"),a=A.renderInto(e.color1,s[1],o),l=A.renderInto(e.color2,s[2],o);Ve(ee`${this.#s?.getTracingTooltip("color-mix",e.node,this.#n,this.#i,this.#t,t)??"color-mix"}(${A.render(e.space,s[0]).nodes}, ${a.nodes}, ${l.nodes})`,o);let d=a.cssControls.get("color")??[],h=l.cssControls.get("color")??[];if(t.matchedResult.hasUnresolvedSubstitutions(e.node)||d.length!==1||h.length!==1)return[o];let c=e.space.map(y=>t.matchedResult.getComputedText(y)).join(" "),p=e.color1.map(y=>t.matchedResult.getComputedText(y)).join(" "),u=e.color2.map(y=>t.matchedResult.getComputedText(y)).join(" "),g=`color-mix(${c}, ${p}, ${u})`,m=this.#e.node()?.id;if(m!==void 0&&n){let y=t.tracing?.applyEvaluation(n,()=>{let x=X.Color.parse("#000"),I=document.createElement("span");I.textContent=x.asString();let L=new Qe(this.#e,null).renderColorSwatch(x,I);return L.addEventListener($.ColorSwatch.ColorChangedEvent.eventName,Ie=>{I.textContent=Ie.data.color.asString()}),t.addControl("color",L),{placeholder:[L,I],asyncEvalCallback:async()=>{let Ie=await this.#e.cssModel()?.resolveValues(void 0,m,g);if(t.signal?.aborted)return!1;if(Ie){let ke=X.Color.parse(Ie[0]);if(ke)return L.setColor(ke.as("hexa")),!0}return!1}}});if(y)return y}let f=new $.ColorMixSwatch.ColorMixSwatch;if(!i(d[0],y=>f.setFirstColor(y))||!i(h[0],y=>f.setSecondColor(y)))return[o];if(f.tabIndex=-1,f.setColorMixText(g),z.ARIAUtils.setLabel(f,g),t.addControl("color",f),t.tracing)return[f,o];let T=this.#s?.getTooltipId("color-mix");if(!T)return[f,o];f.setAttribute("aria-details",T);let w=new Ye.Tooltip.Tooltip({id:T,variant:"rich",anchor:f,jslogContext:"elements.css-color-mix"}),b=w.appendChild(document.createElement("span"));return w.onbeforetoggle=y=>{if(y.newState!=="open")return;let x=f.mixedColor();if(!x)return;let I=x.as("hex");b.textContent=I.isGamutClipped()?x.asString():I.asString()},[f,o,w]}},_n=class extends W(v.CSSPropertyParserMatchers.ContrastColorMatch){#e;#n;constructor(e,t){super(),this.#e=t,this.#n=e}render(e,t){let i=document.createElement("span");i.appendChild(document.createTextNode("contrast-color("));let n=i.appendChild(document.createElement("span"));if(i.appendChild(document.createTextNode(")")),A.renderInto(e.color,t,n),t.matchedResult.hasUnresolvedSubstitutions(e.node))return[i];let s=t.matchedResult.getComputedText(e.node),o=document.body.appendChild(document.createElement("span"));o.style.color=s;let a=window.getComputedStyle(o).color;o.remove();let l=X.Color.parse(a);if(!l)return[i];let d=new Qe(this.#n,this.#e).renderColorSwatch(l,i);return t.addControl("color",d),[d,i]}},Kn=class extends W(v.CSSPropertyParserMatchers.AngleMatch){#e;constructor(e){super(),this.#e=e}render(e,t){let i=e.text;if(!this.#e?.editable())return[document.createTextNode(i)];let n=new $.CSSAngle.CSSAngle;n.setAttribute("jslog",`${pe.showStyleEditor().track({click:!0}).context("css-angle")}`);let s=document.createElement("span");s.textContent=i,n.data={angleText:i,containingPane:this.#e.stylesContainer().element.enclosingNodeOrSelfWithClass("style-panes-wrapper")},n.append(s);let o=this.#e;return n.addEventListener("popovertoggled",({data:a})=>{let l=o.section();l&&(a.open&&(o.stylesContainer().hideAllPopovers(),o.stylesContainer().activeCSSAngle=n,ie.userMetrics.swatchActivated(7)),l.element.classList.toggle("has-open-popover",a.open),o.stylesContainer().setEditingStyle(a.open),a.open||o.applyStyleText(o.renderedPropertyText(),!0))}),n.addEventListener("valuechanged",async({data:a})=>{s.textContent=a.value,await o.applyStyleText(o.renderedPropertyText(),!1)}),n.addEventListener("unitchanged",({data:a})=>{s.textContent=a.value}),t.addControl("angle",n),[n]}},Wn=class extends W(v.CSSPropertyParserMatchers.LinkableNameMatch){#e;#n;constructor(e,t){super(),this.#e=e,this.#n=t}#i(e){switch(e.propertyName){case"animation":case"animation-name":return{jslogContext:"css-animation-name",metric:1,ruleBlock:"@keyframes",isDefined:!!this.#e.keyframes().find(t=>t.name().text===e.text)};case"font-palette":return{jslogContext:"css-font-palette",metric:null,ruleBlock:"",isDefined:!!this.#e.atRules().find(t=>t.type()==="font-palette-values"&&t.name()?.text===e.text)};case"list-style":case"list-style-type":return{jslogContext:"css-list-style-type",metric:null,ruleBlock:"",isDefined:!!this.#e.atRules().find(t=>t.type()==="counter-style"&&t.name()?.text===e.text)};case"position-try":case"position-try-fallbacks":return{jslogContext:"css-position-try",metric:10,ruleBlock:"@position-try",isDefined:!!this.#e.positionTryRules().find(t=>t.name().text===e.text)}}}render(e){let t=new $.LinkSwatch.LinkSwatch,{metric:i,jslogContext:n,ruleBlock:s,isDefined:o}=this.#i(e);if(t.data={text:e.text,tooltip:o?void 0:{title:Q(Y.sIsNotDefined,{PH1:e.text})},isDefined:o,onLinkActivate:()=>{i&&ie.userMetrics.swatchActivated(i),e.propertyName==="font-palette"?this.#n.jumpToFontPaletteDefinition(e.text):e.propertyName==="list-style"||e.propertyName==="list-style-type"?this.#n.jumpToCounterStyleDefinition(e.text):this.#n.jumpToSectionBlock(`${s} ${e.text}`)},jslogContext:n},e.propertyName==="animation"||e.propertyName==="animation-name"){let a=document.createElement("span");a.appendChild(t);let l=this.#n.node();return l&&l.domModel().target().model(v.AnimationModel.AnimationModel)?.getAnimationGroupForAnimation(e.text,l.id).then(h=>{if(!h)return;let c=ho("animation","open-in-animations-panel");c.setAttribute("jslog",`${pe.link("open-in-animations-panel").track({click:!0})}`),c.setAttribute("role","button"),c.setAttribute("title",Q(Y.jumpToAnimationsPanel)),c.addEventListener("mouseup",p=>{p.consume(!0),X.Revealer.reveal(h)}),a.insertBefore(c,t)}),[a]}return[t]}},jn=class extends W(v.CSSPropertyParserMatchers.BezierMatch){#e;constructor(e){super(),this.#e=e}render(e,t){let i=e.node.name==="CallExpression"?A.render(he.children(e.node),t).nodes:[document.createTextNode(e.text)];if(!this.#e?.editable()||!$.AnimationTimingModel.AnimationTimingModel.parse(t.matchedResult.getComputedText(e.node)))return i;let n=this.#e.stylesContainer().swatchPopoverHelper(),s=ho("bezier-curve-filled","bezier-swatch-icon");s.setAttribute("jslog",`${pe.showStyleEditor("bezier")}`),s.tabIndex=-1,s.addEventListener("click",()=>{ie.userMetrics.swatchActivated(3)});let o=document.createElement("span");o.append(...i),new yi({treeElement:this.#e,swatchPopoverHelper:n,swatch:s,bezierText:o});let a=document.createElement("span");return a.classList.add("bezier-icon-and-text"),a.append(s),a.append(o),[a]}},zn=class extends W(v.CSSPropertyParserMatchers.AutoBaseMatch){#e;constructor(e,t){super(),this.#e=t}render(e,t){let i=document.createElement("span");i.appendChild(document.createTextNode("-internal-auto-base("));let n=i.appendChild(document.createElement("span"));i.appendChild(document.createTextNode(", "));let s=i.appendChild(document.createElement("span"));return i.appendChild(document.createTextNode(")")),A.renderInto(e.auto,t,n),A.renderInto(e.base,t,s),this.#e?.isAppearanceBase?n.classList.add("inactive-value"):s.classList.add("inactive-value"),[i]}},Gn=class{#e;#n;#i;constructor(e,t,i){this.#n=e,this.#e=t,this.#i=i}isBoxShadow(){return this.#n==="boxShadow"}inset(){return!!this.#e.find(e=>e.propertyType==="inset")}#t(e){return this.#e.find(t=>t.propertyType===e)?.length??$.CSSShadowEditor.CSSLength.zero()}offsetX(){return this.#t("x")}offsetY(){return this.#t("y")}blurRadius(){return this.#t("blur")}spreadRadius(){return this.#t("spread")}#s(e){return!!(e.expansionContext&&e.source)}#o(e){if(this.#s(e)){let t=e.source;this.#e.filter(i=>i.source===t).forEach(i=>{i.source=null})}}#r(e){let t=this.#e.findIndex(n=>n.propertyType===e),i=t>=0?this.#e[t]:void 0;return i&&this.#o(i),{property:i,index:t}}setInset(e){if(!this.isBoxShadow())return;let{property:t,index:i}=this.#r("inset");t?e||this.#e.splice(i,1):this.#e.unshift({value:"inset",source:null,expansionContext:null,propertyType:"inset"})}#l(e,t){let{property:i}=this.#r(t);if(i)i.value=e.asCSSText(),i.length=e,i.source=null;else{let n=1+this.#e.findLastIndex(s=>s.propertyType==="y"||t==="spread"&&s.propertyType==="blur");n>0&&n<this.#e.length&&this.#s(this.#e[n])&&this.#e[n-1].source===this.#e[n].source&&this.#o(this.#e[n]),this.#e.splice(n,0,{value:e.asCSSText(),length:e,source:null,expansionContext:null,propertyType:t})}}setOffsetX(e){this.#l(e,"x")}setOffsetY(e){this.#l(e,"y")}setBlurRadius(e){this.#l(e,"blur")}setSpreadRadius(e){this.isBoxShadow()&&this.#l(e,"spread")}renderContents(e){e.removeChildren();let t=null;for(let i of this.#e)(!i.source||i.source!==t)&&(i!==this.#e[0]&&e.append(" "),i.source?e.append(...A.render(i.source,this.#i).nodes):typeof i.value=="string"?e.append(i.value):e.append(...A.render(i.value,i.expansionContext??this.#i).nodes)),t=i.source}},qn=class extends W(v.CSSPropertyParserMatchers.ShadowMatch){#e;constructor(e){super(),this.#e=e}shadowModel(e,t,i){let n=[],s=["spread","blur","y","x"],o=!0,a=e.map(l=>({value:l,source:l,match:i.matchedResult.getMatch(l),expansionContext:null}));for(let l=a.shift();l;l=a.shift()){let{value:d,source:h,match:c,expansionContext:p}=l,u=(p??i).ast.text(d);if(d.name==="NumberLiteral"){if(!o)return null;let g=s.pop();if(g===void 0||g==="spread"&&t==="textShadow")return null;let m=$.CSSShadowEditor.CSSLength.parse(u);if(!m)return null;n.push({value:d,source:h,length:m,propertyType:g,expansionContext:p})}else if(c instanceof v.CSSPropertyParserMatchers.VariableMatch){let g=i.matchedResult.getComputedText(d),m=v.CSSPropertyParser.tokenizeDeclaration("--property",g);if(!m)return null;let f=v.CSSPropertyParser.BottomUpTreeMatching.walkExcludingSuccessors(m,[new v.CSSPropertyParserMatchers.ColorMatcher]);if(f.hasUnresolvedSubstitutions(f.ast.tree))return null;a.unshift(...he.siblings(he.declValue(f.ast.tree)).map(T=>({value:T,source:d,match:f.getMatch(T),expansionContext:new Fe(m,null,i.renderers,f)})))}else if(o=s.length===4,d.name==="ValueName"&&u.toLowerCase()==="inset"){if(t==="textShadow"||n.find(({propertyType:g})=>g==="inset"))return null;n.push({value:d,source:h,propertyType:"inset",expansionContext:p})}else if(c instanceof v.CSSPropertyParserMatchers.ColorMatch||c instanceof v.CSSPropertyParserMatchers.ColorMixMatch||c instanceof v.CSSPropertyParserMatchers.ContrastColorMatch){if(n.find(({propertyType:g})=>g==="color"))return null;n.push({value:d,source:h,propertyType:"color",expansionContext:p})}else if(d.name!=="Comment"&&d.name!=="Important")return null}return s.length>2?null:new Gn(t,n,i)}render(e,t){let i=he.split(he.siblings(he.declValue(e.node))),n=[];for(let s of i){let o=this.shadowModel(s,e.shadowType,t),a=s.find(p=>p.name==="Important");if(s!==i[0]&&n.push(document.createTextNode(", ")),!o||!this.#e?.editable()){let{nodes:p}=A.render(s,t);n.push(...p);continue}let l=new $.Swatches.CSSShadowSwatch(o);l.setAttribute("jslog",`${pe.showStyleEditor("css-shadow").track({click:!0})}`),l.iconElement().addEventListener("click",()=>{ie.userMetrics.swatchActivated(4)});let d=document.createElement("span");o.renderContents(d);let h=new Si(this.#e,this.#e.stylesContainer().swatchPopoverHelper(),l),c=this.#e;h.addEventListener("shadowChanged",()=>{o.renderContents(d),c.applyStyleText(c.renderedPropertyText(),!1)}),n.push(l,d),a&&n.push(document.createTextNode(" "),...A.render(a,t).nodes)}return n}},Yn=class extends W(v.CSSPropertyParserMatchers.GridTemplateMatch){render(e,t){if(e.lines.length<=1)return A.render(he.siblings(he.declValue(e.node)),t).nodes;let i=X.Settings.Settings.instance().moduleSetting("text-editor-indent").get(),n=document.createDocumentFragment(),s=ee`
      ${e.lines.map(o=>{let a=A.render(o,t).nodes;return ee`
        <span class='styles-clipboard-only'>${i.repeat(2)}</span>
        ${a}`})}
    `;return Ve(s,n),[n]}},ha=new Set(["inset","inset-block","inset-inline","margin","margin-block","margin-inline","padding","padding-block","padding-inline"]);async function Qn(r,e,t,i,...n){e=i.tracing?.propertyName??i.matchedResult.ast.propertyName??e,ha.has(e)&&(i.tracing?.expandPercentagesInShorthands??i.matchedResult.getLonghandValuesCount()>1)&&(e=i.getComputedLonghandName(t.node)??e);let s=r.node()?.id;return s===void 0?null:await r.cssModel()?.resolveValues(e,s,...n)??await r.cssModel()?.resolveValues(void 0,s,...n)}var Xn=class extends W(v.CSSPropertyParserMatchers.LengthMatch){#e;#n;#i;constructor(e,t,i){super(),this.#e=e,this.#n=i,this.#i=t}render(e,t){let i=document.createElement("span");i.tabIndex=-1,i.textContent=e.text;let n=this.#s(i,e,t),s=t.tracing?.applyEvaluation([],()=>({placeholder:[i],asyncEvalCallback:()=>this.#t(i,e,t)}));return s||(n?[i,n]:[i])}async#t(e,t,i){let n=await Qn(this.#e,this.#i,t,i,t.text);return i.signal?.aborted?!1:n?.[0]&&n?.[0]!==t.text?(e.textContent=n[0],!0):!1}#s(e,t,i){let n=this.#n?.getTooltipId("length");if(!n)return;e.setAttribute("aria-details",n);let s=new Ye.Tooltip.Tooltip({anchor:e,variant:"rich",id:n,jslogContext:"length-popover"});return s.addEventListener("beforetoggle",()=>this.getTooltipValue(s,t,i),{once:!0}),s}async getTooltipValue(e,t,i){let n=await Qn(this.#e,this.#i,t,i,t.text);i.signal?.aborted||n&&e.appendChild(document.createTextNode(n[0]))}},xi=class extends W(v.CSSPropertyParserMatchers.BaseFunctionMatch){#e;#n;#i;#t;#s;#o;constructor(e,t,i,n,s,o){super(),this.#n=t,this.#i=i,this.#t=n,this.#e=e,this.#s=o,this.#o=s}render(e,t){let i=t.tracing?.evaluation(e.args,{match:e,context:t}),n=e.args.map((o,a)=>{let l=document.createElement("span");return A.renderInto(o,i?i[a].renderingContext(t):t,l),l}),s=document.createElement("span");if(Ve(ee`${this.#s?.getTracingTooltip(e.func,e.node,this.#n,this.#i,this.#t,t)??e.func}(${n.map((o,a)=>a===0?[o]:[ee`, `,o]).flat()})`,s),i){let o=t.tracing?.applyEvaluation(i,()=>({placeholder:[s],asyncEvalCallback:()=>this.applyEvaluation(s,e,t)}));if(o)return o}else e instanceof v.CSSPropertyParserMatchers.MathFunctionMatch&&!e.isArithmeticFunctionCall()&&this.applyMathFunction(n,e,t);return[s]}async applyEvaluation(e,t,i){let n=i.matchedResult.getComputedText(t.node,o=>{if(o instanceof v.CSSPropertyParserMatchers.RelativeColorChannelMatch){let a=i.findParent(o.node,v.CSSPropertyParserMatchers.ColorMatch)?.relativeColor??null;return(a&&o.getColorChannelValue(a)?.toFixed(3))??null}return null}),s=await Qn(this.#e,this.#o,t,i,n);return i.signal?.aborted||!s?.[0]||s[0]===n?!1:(e.textContent=s[0],!0)}async applyMathFunction(e,t,i){let n=t.args.map(a=>`calc(${i.matchedResult.getComputedTextRange(a[0],a[a.length-1])})`);n.unshift(i.matchedResult.getComputedText(t.node));let s=await Qn(this.#e,this.#o,t,i,...n);if(i.signal?.aborted||!s)return;let o=s.shift();if(o)for(let a=0;a<e.length;++a)s[a]!==o&&e[a].classList.add("inactive-value")}},Jn=class extends xi{matchType=v.CSSPropertyParserMatchers.MathFunctionMatch},Zn=class extends xi{matchType=v.CSSPropertyParserMatchers.CustomFunctionMatch},Ti=class r extends W(v.CSSPropertyParserMatchers.AnchorFunctionMatch){#e;static async decorateAnchorForAnchorLink(e,t,{identifier:i,needsSpace:n}){i&&Ve(ee`${i}`,t,{host:t});let s=await e.node()?.getAnchorBySpecifier(i)??void 0;if(!i&&!s)return;let o=()=>{s&&X.Revealer.reveal(s,!1)},a=h=>{h.stopPropagation(),o()},l=()=>{s?.highlight()},d=()=>{v.OverlayModel.OverlayModel.hideDOMNodeHighlight(v.TargetManager.TargetManager.instance())};i?Ve(ee`<devtools-link-swatch
                @mouseenter=${l}
                @mouseleave=${d}
                .data=${{text:i,tooltip:s?void 0:{title:Q(Y.sIsNotDefined,{PH1:i})},isDefined:!!s,jslogContext:"anchor-link",onLinkActivate:o}}
                ></devtools-link-swatch>${n?" ":""}`,t,{host:t}):Ve(ee`<devtools-icon
                   role='button'
                   title=${Q(Y.jumpToAnchorNode)}
                   class='icon-link'
                   name='open-externally'
                   jslog=${pe.action("jump-to-anchor-node").track({click:!0})}
                   @mouseenter=${l}
                   @mouseleave=${d}
                   @mousedown=${h=>h.stopPropagation()}
                   @click=${a}
                  ></devtools-icon>${n?" ":""}`,t,{host:t})}constructor(e){super(),this.#e=e}render(e,t){let i=document.createElement("span");if(e.node.name==="VariableName")r.decorateAnchorForAnchorLink(this.#e,i,{identifier:e.text});else{i.appendChild(document.createTextNode(`${e.functionName}(`));let n=document.createElement("span");i.appendChild(n);let o=he.children(e.node.getChild("ArgList")).splice(1);r.decorateAnchorForAnchorLink(this.#e,n,{needsSpace:o.length>1}),A.renderInto(o,t,i)}return[i]}},es=class extends W(v.CSSPropertyParserMatchers.PositionAnchorMatch){#e;constructor(e){super(),this.#e=e}render(e){let t=document.createElement("span");return Ti.decorateAnchorForAnchorLink(this.#e,t,{identifier:e.text}),[t]}},ts=class extends W(v.CSSPropertyParserMatchers.PositionTryMatch){#e;constructor(e){super(),this.#e=e}render(e,t){let i=[];if(e.preamble.length>0){let{nodes:n}=A.render(e.preamble,t);i.push(...n)}for(let[n,s]of e.fallbacks.entries()){let o=document.createElement("span");n>0&&o.appendChild(document.createTextNode(", ")),n!==this.#e.activePositionFallbackIndex()&&o.classList.add("inactive-value"),A.renderInto(s,t,o),i.push(o)}return i}};function Ii(r,e,t,i,n,s,o){return[new kn(t,n,i,s,o),new Un(t,n,i),new Qe(t,n),new Hn(t,i,s,o,n),new _n(t,n),new wt(e.parentRule,t.node()),new Kn(n),new Wn(i,t),new jn(n),new xt,new qn(n),new Rn(t,n),new Bn(t,i,n),new Yn,new Vn,new Ti(t),new es(t),new On(t,n),new Ln(n,i,s,o),new ts(i),new Xn(t,r,n),new Jn(t,i,s,o,r,n),new Zn(t,i,s,o,r,n),new zn(s,o),new Pi,new $n(n),new Fn(t,n,i,s,o)]}var re=class r extends z.TreeOutline.TreeElement{style;#e;property;#n;#i;#t;#s;isShorthand;applyStyleThrottler=new X.Throttler.Throttler(0);newProperty;expandedDueToFilter=!1;valueElement=null;nameElement=null;expandElement=null;originalPropertyText="";hasBeenEditedIncrementally=!1;prompt=null;lastComputedValue=null;computedStyles=null;parentsComputedStyles=null;computedStyleExtraFields=null;contextForTest;#o=void 0;#r=new Map;#l;constructor({stylesContainer:e,section:t,matchedStyles:i,property:n,isShorthand:s,inherited:o,overloaded:a,newProperty:l}){let d=n.name.startsWith("--")?"custom-property":n.name;super("",s,d),this.style=n.ownerStyle,this.#e=i,this.property=n,this.#n=o,this.#i=a,this.selectable=!1,this.#t=e,this.#s=t,this.isShorthand=s,this.newProperty=l,this.#l=!this.newProperty&&e.shouldRenderLazily(),this.newProperty&&(this.listItemElement.textContent=""),this.property.addEventListener("localValueUpdated",this.updateTitle,this)}onunbind(){this.#t.untrackForLazyRendering(this.listItemElement),this.#l=!1,this.property.removeEventListener("localValueUpdated",this.updateTitle,this),super.onunbind()}async gridNames(){if(!v.CSSMetadata.cssMetadata().isGridNameAwareProperty(this.name))return new Set;for(let e=this.#t.node()?.parentNode;e;e=e?.parentNode){let t=await this.#t.cssModel()?.getComputedStyle(e.id),i=t?.get("display");if(!(i==="grid"||i==="inline-grid"))continue;let s=(o,a)=>{let l=t?.get(o);if(!l)return[];let d=v.CSSPropertyParser.tokenizeDeclaration(o,l);return d?v.CSSPropertyParser.TreeSearch.findAll(d,a).map(h=>d.text(h)):[]};return v.CSSMetadata.cssMetadata().isGridAreaNameAwareProperty(this.name)?new Set(s("grid-template-areas",o=>o.name==="StringLiteral")?.flatMap(o=>o.substring(1,o.length-1).split(/\s+/).filter(a=>!a.match(/^\.*$/)))):v.CSSMetadata.cssMetadata().isGridColumnNameAwareProperty(this.name)?new Set(s("grid-template-columns",o=>o.name==="ValueName"&&o.parent?.name==="BracketedValue")):new Set(s("grid-template-rows",o=>o.name==="ValueName"&&o.parent?.name==="BracketedValue"))}return new Set}matchedStyles(){return this.#e}getLonghand(){return this.parent instanceof r&&this.parent.isShorthand?this.parent:null}editable(){let e=!!(this.style.styleSheetId&&this.style.range);return!this.getLonghand()&&e}inherited(){return this.#n}overloaded(){return this.#i}setOverloaded(e){e!==this.#i&&(this.#i=e,this.updateState())}setComputedStyles(e){this.computedStyles=e}getComputedStyle(e){return this.computedStyles?.get(e)??null}getComputedStyles(){return this.computedStyles}setComputedStyleExtraFields(e){this.computedStyleExtraFields=e}getComputedStyleExtraFields(){return this.computedStyleExtraFields}setParentsComputedStyles(e){this.parentsComputedStyles=e}get name(){return this.property.name}get value(){return this.property.value}updateFilter(){let e=this.#t.filterRegex(),t=e!==null&&(e.test(this.property.name)||e.test(this.property.value));this.listItemElement.classList.toggle("filter-match",t),this.onpopulate();let i=!1;for(let n=0;n<this.childCount();++n){let s=this.childAt(n);!s||s&&!s.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}renderedPropertyText(){return!this.#g()||!this.nameElement||!this.valueElement?"":this.nameElement.innerText+": "+this.valueElement.innerText}updateState(){if(!this.listItemElement)return;this.style.isPropertyImplicit(this.name)?this.listItemElement.classList.add("implicit"):this.listItemElement.classList.remove("implicit"),!this.property.parsedOk&&this.property.ignoreErrors()?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.#t.node()}stylesContainer(){return this.#t}section(){return this.#s}updatePane(){this.#s.refreshUpdate(this)}async toggleDisabled(e){if(!this.style.range)return;this.#t.setUserOperation(!0);let i=await this.property.setDisabled(e);this.#t.setUserOperation(!1),i&&(this.#e.resetActiveProperties(),this.updatePane(),this.styleTextAppliedForTest())}async#c(){let e=this.property.getLonghandProperties();if(e.some(n=>n.value!==""))return e;let t=this.#p(this.style,this.property.value);if(!t||t===this.property.value)return e;let i=await this.#t.cssModel()?.agent.invoke_getLonghandProperties({shorthandName:this.property.name,value:t});return!i||i.getError()?e:i.longhandProperties.map(n=>v.CSSProperty.CSSProperty.parsePayload(this.style,-1,n))}async onpopulate(){if(this.#o||(this.#o=await this.gridNames()),this.childCount()||!this.isShorthand)return;let e=await this.#c(),t=this.style.leadingProperties();if(!this.childCount())for(let i of e){let n=i.name,s=!1,o=!1;s=this.#s.isPropertyInherited(n),o=this.#e.propertyState(i)==="Overloaded",t.find(d=>d.name===n&&d.activeInStyle())&&(o=!0);let l=new r({stylesContainer:this.#t,section:this.#s,matchedStyles:this.#e,property:i,isShorthand:!1,inherited:s,overloaded:o,newProperty:!1});l.setComputedStyles(this.computedStyles),l.setParentsComputedStyles(this.parentsComputedStyles),this.appendChild(l)}}onattach(){if(this.#l){if(this.nameElement=A.renderNameElement(this.name),this.valueElement=A.renderValueElement(this.property,null,[]).valueElement,this.parent?.root||!this.property.parsedOk){let t=document.createElement("span");t.classList.add("enabled-button"),this.listItemElement.appendChild(t)}this.listItemElement.classList.toggle("inactive",!this.property.activeInStyle()),this.listItemElement.appendChild(this.nameElement);let e=this.valueElement.firstElementChild?.tagName==="BR";this.listItemElement.createChild("span","styles-name-value-separator").textContent=e?":":": ",this.listItemElement.appendChild(this.valueElement),this.listItemElement.createChild("span","styles-semicolon").textContent=";",this.#t.trackForLazyRendering(this.listItemElement,()=>{this.#l=!1,this.updateTitle()})}else this.updateTitle();this.listItemElement.addEventListener("mousedown",e=>{e.button===0&&lo.set(this.#t,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.name="triangle-down":this.expandElement.name="triangle-right")}#p(e,t){let i=v.CSSPropertyParser.tokenizeDeclaration("--unused",t);if(!i)return null;let n=v.CSSPropertyParser.BottomUpTreeMatching.walk(i,[new v.CSSPropertyParserMatchers.VariableMatcher(this.#e,e),new v.CSSPropertyParserMatchers.AttributeMatcher(this.#e,e),new v.CSSPropertyParserMatchers.EnvFunctionMatcher(this.#e)]),s=v.CSSPropertyParser.ASTUtils.siblings(v.CSSPropertyParser.ASTUtils.declValue(n.ast.tree));return s.length>0?n.getComputedTextRange(s[0],s[s.length-1]):""}refreshIfComputedValueChanged(){this.#o=void 0;let e=this.#p(this.property.ownerStyle,this.property.value);e!==this.lastComputedValue&&(this.lastComputedValue=e,this.#d())}updateTitle(){this.lastComputedValue=this.#p(this.property.ownerStyle,this.property.value),this.#d()}#d(){this.#r.clear(),this.updateState(),this.isExpandable()&&(this.expandElement=ho("triangle-right","expand-icon"),this.expandElement.setAttribute("jslog",`${pe.expand().track({click:!0})}`));let e=this.property.parsedOk?Ii(this.name,this.style,this.#t,this.#e,this,this.getComputedStyles()??new Map,this.getComputedStyleExtraFields()):[];this.listItemElement.removeChildren();let t=this.property.parseValue(this.matchedStyles(),this.computedStyles);if(this.valueElement=A.renderValueElement(this.property,t,e).valueElement,this.nameElement=A.renderNameElement(this.name),!this.treeOutline)return;let i=X.Settings.Settings.instance().moduleSetting("text-editor-indent").get();if(z.UIUtils.createTextChild(this.listItemElement.createChild("span","styles-clipboard-only"),i.repeat(this.section().nestingLevel+1)+(this.property.disabled?"/* ":"")),this.listItemElement.appendChild(this.nameElement),this.property.name.startsWith("--")&&!(this.property.ownerStyle.parentRule instanceof v.CSSRule.CSSFunctionRule)){let o=this.#t.getVariablePopoverContents(this.matchedStyles(),this.property.name,this.#e.computeCSSVariable(this.style,this.property.name)?.value??null),a=this.getTooltipId("custom-property-decl");this.nameElement.setAttribute("aria-details",a);let l=new Ye.Tooltip.Tooltip({anchor:this.nameElement,variant:"rich",id:a,jslogContext:"elements.css-var"});l.appendChild(o),l.onbeforetoggle=d=>{d.newState==="open"&&(o.value=this.#e.computeCSSVariable(this.style,this.property.name)?.value)},this.listItemElement.appendChild(l)}else if(X.Settings.Settings.instance().moduleSetting("show-css-property-documentation-on-hover").get()){let o=this.getTooltipId("property-doc");this.nameElement.setAttribute("aria-details",o);let a=new Ye.Tooltip.Tooltip({anchor:this.nameElement,variant:"rich",padding:"large",id:o,jslogContext:"elements.css-property-doc"});a.onbeforetoggle=l=>{if(l.newState!=="open")return;if(!X.Settings.Settings.instance().moduleSetting("show-css-property-documentation-on-hover").get()){l.consume(!0);return}let d=this.#t.webCustomData?.findCssProperty(this.name);if(!d){l.consume(!0);return}a.removeChildren(),a.appendChild(new bt.CSSPropertyDocsView.CSSPropertyDocsView(d))},this.listItemElement.appendChild(a)}if(this.valueElement){let a=this.valueElement.firstElementChild?.tagName==="BR"?":":": ";this.listItemElement.createChild("span","styles-name-value-separator").textContent=a,this.expandElement&&(this.listItemElement.appendChild(this.expandElement),this.updateExpandElement()),this.listItemElement.appendChild(this.valueElement);let l=this.listItemElement.createChild("span","styles-semicolon");l.textContent=";",l.onmouseup=this.mouseUp.bind(this),this.property.disabled&&z.UIUtils.createTextChild(this.listItemElement.createChild("span","styles-clipboard-only")," */")}if(this.property.parsedOk?(this.updateAuthoringHint(),this.updateAnimationOverrideHint()):(this.listItemElement.classList.add("not-parsed-ok"),this.listItemElement.insertBefore(this.createExclamationMark(this.property,this.#t.getVariableParserError(this.matchedStyles(),this.property.name)),this.listItemElement.firstChild),v.CSSMetadata.cssMetadata().isCSSPropertyName(this.property.name)&&this.listItemElement.classList.add("invalid-property-value")),this.property.activeInStyle()||this.listItemElement.classList.add("inactive"),this.updateFilter(),this.property.parsedOk&&this.parent?.root){let o=document.createElement("input");o.classList.add("enabled-button","small"),o.type="checkbox",o.checked=!this.property.disabled,o.setAttribute("jslog",`${pe.toggle().track({click:!0})}`),o.addEventListener("mousedown",a=>a.consume(),!1),o.addEventListener("click",a=>{this.toggleDisabled(!this.property.disabled),a.consume()},!1),this.nameElement&&this.valueElement&&z.ARIAUtils.setLabel(o,`${this.name} ${this.value}`),this.listItemElement.insertBefore(o,this.listItemElement.firstChild)}let n=this;this.valueElement.addEventListener("keydown",s),this.nameElement.addEventListener("keydown",s);function s(o){z.UIUtils.isBeingEdited(this)||o.key!==vt.KeyboardUtilities.ENTER_KEY&&o.key!==" "||(this===n.valueElement?(n.startEditingValue(),o.consume(!0)):this===n.nameElement&&(n.startEditingName(),o.consume(!0)))}}createExclamationMark(e,t){let i=document.createElement("span"),n=i.createChild("span");n.tabIndex=-1,n.classList.add("exclamation-mark");let s=v.CSSMetadata.cssMetadata().isCSSPropertyName(e.name)?Q(Y.invalidPropertyValue):Q(Y.unknownPropertyName);if(t===null)z.Tooltip.Tooltip.install(n,s);else{let a=this.getTooltipId("property-warning");n.setAttribute("aria-describedby",a);let l=new Ye.Tooltip.Tooltip({anchor:n,variant:"simple",id:a,jslogContext:"elements.invalid-property-decl-popover"});l.appendChild(t),i.appendChild(l)}let o=Q(Y.invalidString,{PH1:s,PH2:e.name,PH3:e.value});return e.setDisplayedStringForInvalidProperty(o),i}#h(e,t,i){let n=new $.LinkSwatch.LinkSwatch,{registeredFunction:s,treeScopeDistance:o}=t.getRegisteredFunction(e,i),a=!!s;return n.data={jslogContext:"css-function",text:e,tooltip:a?void 0:{title:Q(Y.sIsNotDefined,{PH1:e})},isDefined:a,onLinkActivate:()=>{s&&this.#t.jumpToFunctionDefinition(s,o)}},n}getTracingTooltip(e,t,i,n,s,o){if(o.tracing||!o.property)return ee`${e}`;let a=o.ast.text(t),l=o.matchedResult.getLonghandValuesCount()>1,d=o.matchedResult.getComputedLonghandName(t),{property:h}=o,c=this.stylesContainer(),p=this.getTooltipId(`${e}-trace`);return ee`
        <span tabIndex=-1 class=tracing-anchor aria-details=${p}>${e.startsWith("--")?this.#h(e,i,o.property):e}</span>
        <devtools-tooltip
            id=${p}
            use-hotkey
            variant=rich
            jslogContext=elements.css-value-trace
            @beforetoggle=${function(u){u.newState==="open"&&this.querySelector("devtools-widget")?.getWidget()?.showTrace(h,a,i,n,Ii(h.name,h.ownerStyle,c,i,null,n,s),l,d,this.openedViaHotkey)}}
            @toggle=${function(u){u.newState!=="open"&&this.querySelector("devtools-widget")?.getWidget()?.resetPendingFocus()}}>
          <devtools-widget
            @keydown=${u=>{let g=u.target.parentElement;g instanceof Ye.Tooltip.Tooltip&&(u.key==="Escape"||u.altKey&&u.key==="ArrowDown")&&(g.hideTooltip(),g.anchor?.focus(),u.consume(!0))}}
            ${hc(Ei)}>
          </devtools-widget>
        </devtools-tooltip>`}getTooltipId(e){let t=this.section().sectionTooltipIdPrefix,i=this.#r.get(e)??0;this.#r.set(e,i+1);let n=this.getLonghand()?.name??this.name,s=this.style.allProperties().indexOf(this.property),o=this.style.allProperties().reduce((a,l,d)=>d<s&&(l.name===this.name||l.name===n)?a+1:a,0);return`swatch-tooltip-${t}-${this.name}-${o}-${e}-${i}`}updateAuthoringHint(){this.listItemElement.classList.remove("inactive-property");let e=this.listItemElement.querySelector(".hint");e&&e?.closest(".hint-wrapper")?.remove();let t=this.property.name;if(!Nn.has(t)||this.node()?.isSVGNode())return;let n=this.#t.cssModel()?.fontFaces()||[],s=this.node()?.localName();for(let o of Nn.get(t)||[]){let a=o.getHint(t,this.computedStyles||void 0,this.parentsComputedStyles||void 0,s?.toLowerCase(),n);if(a){let l=document.createElement("span");l.classList.add("hint-wrapper");let d=new ra;d.name="info",d.classList.add("hint","small"),d.tabIndex=-1,l.append(d),this.listItemElement.append(l),this.listItemElement.classList.add("inactive-property");let h=this.getTooltipId("css-hint");d.setAttribute("aria-details",h);let c=new Ye.Tooltip.Tooltip({anchor:d,variant:"rich",padding:"large",id:h,jslogContext:"elements.css-hint"});c.appendChild(new bt.CSSHintDetailsView.CSSHintDetailsView(a)),this.listItemElement.appendChild(c);break}}}updateAnimationOverrideHint(){let e=this.listItemElement.querySelector(".animation-override-hint-wrapper");if(e&&e?.remove(),!this.overriddenByAnimation()||z.ViewManager.ViewManager.instance().isViewVisible("animations")||!X.Settings.Settings.instance().moduleSetting("css-animations-only-when-animations-tab-open").get())return;let t=document.createElement("span");t.classList.add("animation-override-hint-wrapper","hint-wrapper");let i=new ra;i.name="info",i.classList.add("hint","small"),i.tabIndex=-1,t.append(i),this.listItemElement.append(t);let n=this.getTooltipId("animation-override-hint");i.setAttribute("aria-details",n);let s=new Ye.Tooltip.Tooltip({anchor:i,variant:"rich",padding:"large",id:n,jslogContext:"elements.css-animation-hint"}),o=Q(Y.overriddenByAnimation),a=document.createElement("div");a.classList.add("animation-override-hint"),a.textContent=o;let l=document.createElement("devtools-link");l.textContent=Q(Y.openAnimationsPanel),l.jslogContext="open-in-animations-panel",l.addEventListener("click",d=>{d.preventDefault(),z.ViewManager.ViewManager.instance().showView("animations")}),a.appendChild(document.createTextNode(" ")),a.appendChild(l),s.appendChild(a),this.listItemElement.appendChild(s)}overriddenByAnimation(){return this.#e.isPropertyOverriddenByAnimation(this.property)}mouseUp(e){let t=lo.get(this.#t);if(lo.delete(this.#t),!t||this.listItemElement.hasSelection()||z.UIUtils.isBeingEdited(e.target)||e.composedPath()[0]instanceof HTMLButtonElement||(e.consume(!0),e.target===this.listItemElement))return;let i=e.target;if(z.KeyboardShortcut.KeyboardShortcut.eventHasCtrlEquivalentKey(e)&&this.#s.navigable){this.navigateToSource(i);return}this.expandElement&&i===this.expandElement||this.#s.editable&&(i=i.enclosingNodeOrSelfWithClass("webkit-css-property")||i.enclosingNodeOrSelfWithClass("value")||i.enclosingNodeOrSelfWithClass("styles-semicolon"),!i||i===this.nameElement?(pe.logClick(this.nameElement,e),this.startEditingName()):(pe.logClick(this.valueElement,e),this.startEditingValue()))}handleContextMenuEvent(e,t){let i=new z.ContextMenu.ContextMenu(t);if(this.property.parsedOk&&this.parent?.root){let s=this.#t.focusedSectionIndex();i.defaultSection().appendCheckboxItem(Q(Y.togglePropertyAndContinueEditing),async()=>{if(this.treeOutline){let o=this.treeOutline.rootElement().indexOfChild(this);this.editingCancelled(e),await this.toggleDisabled(!this.property.disabled),t.consume(),this.#t.continueEditingElement(s,o)}},{checked:!this.property.disabled,jslogContext:"toggle-property-and-continue-editing"})}let n=this.navigateToSource.bind(this);i.defaultSection().appendItem(Q(Y.openInSourcesPanel),n,{jslogContext:"reveal-in-sources-panel"}),i.show()}handleCopyContextMenuEvent(e){if(!e.target)return;this.createCopyContextMenu(e).show()}createCopyContextMenu(e){let t=new z.ContextMenu.ContextMenu(e);return t.headerSection().appendItem(Q(Y.copyDeclaration),()=>{let i=`${this.property.name}: ${this.property.value};`;ie.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(i)},{jslogContext:"copy-declaration"}),t.headerSection().appendItem(Q(Y.copyProperty),()=>{ie.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(this.property.name)},{jslogContext:"copy-property"}),t.headerSection().appendItem(Q(Y.copyValue),()=>{ie.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(this.property.value)},{jslogContext:"copy-value"}),t.headerSection().appendItem(Q(Y.copyRule),()=>{let i=this.#s.formatLeadingProperties().ruleText;ie.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(i)},{jslogContext:"copy-rule"}),t.headerSection().appendItem(Q(Y.copyCssDeclarationAsJs),this.copyCssDeclarationAsJs.bind(this),{jslogContext:"copy-css-declaration-as-js"}),t.clipboardSection().appendItem(Q(Y.copyAllDeclarations),()=>{let i=this.#s.formatLeadingProperties().allDeclarationText;ie.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(i)},{jslogContext:"copy-all-declarations"}),t.clipboardSection().appendItem(Q(Y.copyAllCssDeclarationsAsJs),this.copyAllCssDeclarationAsJs.bind(this),{jslogContext:"copy-all-css-declarations-as-js"}),t.footerSection().appendItem(Q(Y.viewComputedValue),()=>{this.viewComputedValue()},{jslogContext:"view-computed-value"}),t}async viewComputedValue(){let e=D.instance().getComputedStyleWidget();e.isShowing()||await z.ViewManager.ViewManager.instance().showView("computed");let t="";this.isShorthand?t="^"+this.property.name+"-":t="^"+this.property.name+"$";let i=new RegExp(t,"i");await e.filterComputedStyles(i),e.filterText=this.property.name}copyCssDeclarationAsJs(){let e=Dn(this.property);ie.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(e)}copyAllCssDeclarationAsJs(){let t=this.#s.style().leadingProperties().filter(i=>!i.disabled).map(Dn);ie.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(t.join(`,
`))}navigateToSource(e,t){if(!this.#s.navigable)return;let i=e===this.nameElement,n=da.CSSWorkspaceBinding.CSSWorkspaceBinding.instance().propertyUILocation(this.property,i);n&&X.Revealer.reveal(n,t)}startEditingValue(){let e={expanded:this.expanded,hasChildren:this.isExpandable(),isEditingName:!1,originalProperty:this.property,previousContent:this.value};if(v.CSSMetadata.cssMetadata().isGridAreaDefiningProperty(this.name)){let t=la.TextUtils.Utils.splitStringByRegexes(this.value,[v.CSSMetadata.GridAreaRowRegex]);e.previousContent=t.map(i=>i.value.trim()).join(`
`)}this.#a(e)}startEditingName(){let e={expanded:this.expanded,hasChildren:this.isExpandable(),isEditingName:!0,originalProperty:this.property,previousContent:this.name.split(`
`).map(t=>t.trim()).join(`
`)};this.#a(e)}#a(e){if(this.contextForTest=e,this.parent instanceof r&&this.parent.isShorthand)return;let t=e.isEditingName?this.nameElement:this.valueElement;if(!t||z.UIUtils.isBeingEdited(t))return;this.setExpandable(!1),t.parentElement?.classList.add("child-editing"),t.textContent=e.previousContent;function i(a,l){let h=l.clipboardData;if(!h)return;let c=h.getData("Text");if(!c)return;let p=c.indexOf(":");if(p<0)return;let u=c.substring(0,p).trim(),g=c.substring(p+1).trim();l.preventDefault(),typeof a.originalName>"u"&&(this.nameElement&&(a.originalName=this.nameElement.textContent||""),this.valueElement&&(a.originalValue=this.valueElement.textContent||"")),this.property.name=u,this.property.value=g,this.nameElement&&(this.nameElement.textContent=u,this.nameElement.normalize()),this.valueElement&&(this.valueElement.textContent=g,this.valueElement.normalize());let m=l.target;this.editingCommitted(m.textContent||"",a,"forward")}function n(a,l){let h=l.target.textContent;a.isEditingName||(h=this.value||h),this.editingCommitted(h||"",a,"")}this.originalPropertyText=this.property.propertyText||"",this.#t.setEditingStyle(!0),t.parentElement?.scrollIntoViewIfNeeded(!1),this.prompt=new Ni(this,e.isEditingName,Array.from(this.#o??[])),this.prompt.setAutocompletionTimeout(0),this.prompt.addEventListener("TextChanged",()=>{this.applyFreeFlowStyleTextEdit(e)});let s=this.property.getInvalidStringForInvalidProperty();s&&z.ARIAUtils.LiveAnnouncer.alert(s);let o=this.prompt.attachAndStartEditing(t,n.bind(this,e));this.navigateToSource(t,!0),o.addEventListener("keydown",this.editingNameValueKeyDown.bind(this,e),!1),o.addEventListener("keypress",this.editingNameValueKeyPress.bind(this,e),!1),e.isEditingName&&(o.addEventListener("paste",i.bind(this,e),!1),o.addEventListener("contextmenu",this.handleContextMenuEvent.bind(this,e),!1)),t.getComponentSelection()?.selectAllChildren(t)}editingNameValueKeyDown(e,t){if(t.handled)return;let i=t,n=i.target,s;if(i.key==="Enter"&&!i.shiftKey||e.isEditingName&&i.key===" ")s="forward";else if(i.keyCode===z.KeyboardShortcut.Keys.Esc.code||i.key===vt.KeyboardUtilities.ESCAPE_KEY)s="cancel";else if(!e.isEditingName&&this.newProperty&&i.keyCode===z.KeyboardShortcut.Keys.Backspace.code){let o=n.getComponentSelection();o&&o.isCollapsed&&!o.focusOffset&&(t.preventDefault(),s="backward")}else i.key==="Tab"&&(s=i.shiftKey?"backward":"forward",t.preventDefault());if(s){switch(s){case"cancel":this.editingCancelled(e),e.isEditingName?this.nameElement?.focus():this.valueElement?.focus();break;case"forward":case"backward":this.editingCommitted(n.textContent||"",e,s);break}t.consume();return}}static shouldCommitValueSemicolon(e,t){let i="",n=[];for(let s=0;s<t;++s){let o=e[s];o==="\\"&&i!==""?++s:!i&&(o==='"'||o==="'")?i=o:o==="["?n.push("]"):o==="{"?n.push("}"):o==="("?n.push(")"):i===o?i="":n.at(-1)===o&&!i&&n.pop()}return!i&&n.length===0}editingNameValueKeyPress(e,t){let i=t,n=i.target,s=String.fromCharCode(i.charCode),o=this.#m(n);if(e.isEditingName?s===":":s===";"&&o!==null&&r.shouldCommitValueSemicolon(n.textContent||"",o)){t.consume(!0),this.editingCommitted(n.textContent||"",e,"forward");return}}#m(e){let t=e.getComponentSelection();if(!t?.containsNode(e,!0))return null;let i=t.anchorOffset,n=t.anchorNode;for(;n!==e;){for(;n?.previousSibling;)n=n.previousSibling,i+=n.textContent?.length??0;n=n?.parentNodeOrShadowHost()??null}return i}async applyFreeFlowStyleTextEdit(e){if(!this.prompt||!this.#t.node())return;let t=this.prompt.text();if(e.isEditingName&&t.includes(":")){this.editingCommitted(t,e,"forward");return}let i=this.prompt.textWithCurrentSuggestion();if(i.includes(";"))return;let n=this.#t.node();if(n&&!!n.pseudoType()){if(this.name.toLowerCase()==="content")return;let o=i.trim().toLowerCase();if(o.startsWith("content:")||o==="display: none")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(){let e=this.contextForTest;return this.applyFreeFlowStyleTextEdit(e)}editingEnded(e){this.setExpandable(e.hasChildren),e.expanded&&this.expand();let t=e.isEditingName?this.nameElement:this.valueElement;t?.parentElement&&t.parentElement.classList.remove("child-editing"),this.#t.setEditingStyle(!1)}editingCancelled(e){this.removePrompt(),this.hasBeenEditedIncrementally?this.applyOriginalStyle(e):this.newProperty&&this.treeOutline&&this.treeOutline.removeChild(this),this.updateTitle(),this.editingEnded(e)}async commitAiSuggestion(e){let t=z.UIUtils.isBeingEdited(this.nameElement),i={expanded:this.expanded,hasChildren:this.isExpandable(),isEditingName:t,originalProperty:this.property,previousContent:t?this.name:this.value};this.removePrompt(),this.editingEnded(i),await this.applyStyleText(e,!0)}async applyOriginalStyle(e){await this.applyStyleText(this.originalPropertyText,!1,e.originalProperty)}findSibling(e){let t=this;do{let i=e==="forward"?t.nextSibling:t.previousSibling;t=i instanceof r?i:null}while(t?.inherited());return t}async editingCommitted(e,t,i){this.removePrompt(),this.editingEnded(t);let n=t.isEditingName;if(!this.nameElement||!this.valueElement)return;let s=this.nameElement.textContent||"",o=n&&s.includes(":")||!this.property,a=!1,l=!1,d=typeof t.originalName<"u",h=d&&(this.nameElement.textContent!==t.originalName||this.valueElement.textContent!==t.originalValue),c=d&&n&&this.valueElement.textContent!==t.originalValue,p=this,u=n!==(i==="forward"),g=this.newProperty&&!e&&(u||n);(i==="forward"&&(!n||c)||i==="backward"&&n)&&(p=p.findSibling(i),p||(i==="forward"&&(!this.newProperty||e)?a=!0:i==="backward"&&(l=!0)));let m=-1;p!==null&&this.treeOutline&&(m=this.treeOutline.rootElement().indexOfChild(p));let f=vt.StringUtilities.isWhitespace(e),T=this.newProperty&&(c||u||!i&&!n||n&&f||o);if((e!==t.previousContent||h)&&!this.newProperty||T){let b;o?b=this.nameElement.textContent:f||this.newProperty&&vt.StringUtilities.isWhitespace(this.valueElement.textContent||"")?b="":n?b=e+": "+this.property.value:b=this.property.name+": "+e,await this.applyStyleText(b||"",!0),w.call(this,this.newProperty,!f,this.#s)}else n?this.property.name=e:this.property.value=e,!d&&!this.newProperty&&this.updateTitle(),w.call(this,this.newProperty,!1,this.#s);function w(b,y,x){if(!i){this.#t.resetFocus();return}if(p&&p.parent){n?p.startEditingValue():p.startEditingName();return}if(p&&!p.parent){let I=x.propertiesTreeOutline.rootElement();if(i==="forward"&&f&&!n&&--m,m>=I.childCount()&&!this.newProperty)a=!0;else{let L=m>=0?I.childAt(m):null;if(L){b&&f?i==="forward"?L.startEditingName():L.startEditingValue():!n||c?L.startEditingName():L.startEditingValue();return}b||(l=!0)}}if(a){if(b&&!y&&n!==(i==="backward"))return;x.addNewBlankProperty().startEditingName();return}if(g){p=this.findSibling(i);let I=p||i==="backward"?x:x.nextEditableSibling();I&&(I.style().parentRule?I.startEditingSelector():I.moveEditorFromSelector(i));return}l&&(x.style().parentRule?x.startEditingSelector():x.moveEditorFromSelector(i))}}removePrompt(){this.prompt&&(this.prompt.detach(),this.prompt=null,this.section().activeAiSuggestion=void 0)}styleTextAppliedForTest(){}#g(){return this.listItemElement.isConnected}applyStyleText(e,t,i){return this.#g()?this.applyStyleThrottler.schedule(this.innerApplyStyleText.bind(this,e,t,i)):Promise.resolve()}async innerApplyStyleText(e,t,i){if(!this.treeOutline||!this.property||!this.#g()||!this.style.range)return;let s=this.hasBeenEditedIncrementally;if(e=e.replace(/[\xA0\t]/g," ").trim(),!e.length&&t&&this.newProperty&&!s){this.parent?.removeChild(this);return}let o=this.#t.node();this.#t.setUserOperation(!0),e+=vt.StringUtilities.findUnclosedCssQuote(e),e+=")".repeat(vt.StringUtilities.countUnmatchedLeftParentheses(e)),e.length&&!/;\s*$/.test(e)&&(e+=";");let a=!this.newProperty||s,l=await this.property.setText(e,t,a);l&&t&&is.UserBadges.instance().recordAction(is.BadgeAction.CSS_RULE_MODIFIED),s&&t&&!l&&(t=!1,l=await this.property.setText(this.originalPropertyText,t,a)),this.#t.setUserOperation(!1);let d=i||this.style.propertyAt(this.property.index),h=this.property.index<this.style.allProperties().length;if(!l||!d&&h){t&&(this.newProperty?this.treeOutline.removeChild(this):this.updateTitle()),this.styleTextAppliedForTest();return}this.#e.resetActiveProperties(),this.hasBeenEditedIncrementally=!0,!(t&&!e.length)&&d&&(this.property=d),o===this.node()&&this.updatePane(),this.styleTextAppliedForTest()}ondblclick(){return!0}isEventWithinDisclosureTriangle(e){return e.target===this.expandElement}renderActiveAiSuggestion(e){if(!this.prompt)return;let t=z.UIUtils.isBeingEdited(this.nameElement);if(t)this.prompt.applySuggestion({text:e.name,disableAcceptSuggestionOnStopCharacters:!0},!0),this.#f(e.value);else{let i=t?e.name:e.value;this.prompt.applySuggestion({text:i,disableAcceptSuggestionOnStopCharacters:!0},!0)}}clearActiveAiSuggestion(){this.#u()}#f(e){if(!this.valueElement||(this.#u(),this.value===e))return;this.value&&this.listItemElement.classList.add("not-parsed-ok","invalid-property-value");let t=document.createElement("span");t.classList.add("ghost-value-prediction"),t.textContent=e,this.valueElement.insertAdjacentElement("afterend",t)}#u(){let e=this.listItemElement.querySelector(".ghost-value-prediction");e&&(e.remove(),this.value&&(this.property.parsedOk?this.listItemElement.classList.remove("not-parsed-ok","invalid-property-value"):v.CSSMetadata.cssMetadata().isCSSPropertyName(this.property.name)||this.listItemElement.classList.remove("invalid-property-value")))}},Mi=class extends re{constructor(e,t,i,n){super({stylesContainer:e,section:t,matchedStyles:i,property:n,isShorthand:!1,inherited:!1,overloaded:!1,newProperty:!1})}onattach(){this.listItemElement.classList.add("ghost-row"),this.updateTitle()}updateTitle(){this.listItemElement.removeChildren(),this.nameElement=A.renderNameElement(this.name),this.listItemElement.appendChild(this.nameElement),this.listItemElement.createChild("span","styles-name-value-separator").textContent=": ",this.valueElement=this.listItemElement.createChild("span"),this.valueElement.textContent=this.value,this.listItemElement.createChild("span","styles-semicolon").textContent=";"}};var po=null,at=class r extends ma.Widget.VBox{editor;stylesContainer;section;editorContainer;#e;constructor(){super({useShadowDom:!0}),this.contentElement.tabIndex=0,this.setDefaultFocusedElement(this.contentElement),this.editorContainer=document.createElement("div"),this.contentElement.appendChild(this.editorContainer),this.onPropertySelected=this.onPropertySelected.bind(this),this.onPropertyDeselected=this.onPropertyDeselected.bind(this)}getSection(){return this.section}async onPropertySelected(e){if(!this.section)return;let t=ua(this.section,e.data.name);t.property.value=e.data.value,t.updateTitle(),await t.applyStyleText(t.renderedPropertyText(),!1),this.requestUpdate()}async onPropertyDeselected(e){if(!this.section)return;await ua(this.section,e.data.name).applyStyleText("",!1),this.requestUpdate()}bindContext(e,t){this.stylesContainer=e,this.section=t,this.editor?.addEventListener("propertyselected",this.onPropertySelected),this.editor?.addEventListener("propertydeselected",this.onPropertyDeselected)}setTriggerKey(e){this.#e=e}getTriggerKey(){return this.#e}unbindContext(){this.stylesContainer=void 0,this.section=void 0,this.editor?.removeEventListener("propertyselected",this.onPropertySelected),this.editor?.removeEventListener("propertydeselected",this.onPropertyDeselected)}async render(){this.editor&&(this.editor.data={authoredProperties:this.section?gc(this.section,this.editor.getEditableProperties()):new Map,computedProperties:this.stylesContainer?await mc(this.stylesContainer):new Map})}async performUpdate(){await super.performUpdate(),await this.render()}static instance(){return po||(po=new r),po}setEditor(e){this.editor instanceof e||(this.contentElement.removeChildren(),this.editor=new e,this.contentElement.appendChild(this.editor))}static createTriggerButton(e,t,i,n,s){let o=uc("flex-wrap","styles-pane-button");return o.title=n,o.role="button",o.onclick=async a=>{a.stopPropagation();let l=e.swatchPopoverHelper(),d=r.instance();d.element.classList.toggle("with-padding",!0),d.setEditor(i),d.bindContext(e,t),d.setTriggerKey(s),await d.render(),d.focus();let h=o.enclosingNodeOrSelfWithClass("style-panes-wrapper"),c=()=>{l.hide(!0)},p=d.requestUpdate.bind(d);e.addStyleUpdateListener(p),l.show(d,o,()=>{d.unbindContext(),h&&h.removeEventListener("scroll",c),e.removeStyleUpdateListener(p)}),h&&h.addEventListener("scroll",c)},o.onmouseup=a=>{a.stopPropagation()},o}};function ua(r,e){let t=r.propertiesTreeOutline.rootElement().children().find(n=>n instanceof re&&n.property.name===e);if(t)return t;let i=r.addNewBlankProperty();return i.property.name=e,i}async function mc(r){let t=await r.computedStyleModel().fetchComputedStyle();return t?t.computedStyle:new Map}function gc(r,e){let t=new Map,i=new Set(e.map(n=>n.propertyName));for(let n of r.style().leadingProperties())i.has(n.name)&&t.set(n.name,n.value);return t}var wa={};F(wa,{AtRuleSection:()=>ki,BlankStylePropertiesSection:()=>Kt,FunctionRuleSection:()=>Ri,HighlightPseudoStylePropertiesSection:()=>Vi,KeyframePropertiesSection:()=>Fi,PositionTryRuleSection:()=>Ui,RegisteredPropertiesSection:()=>Oi,StylePropertiesSection:()=>ue,constructResolvedSelector:()=>Co});import"./../../ui/legacy/legacy.js";import*as Tt from"./../../core/common/common.js";import*as rs from"./../../core/host/host.js";import*as So from"./../../core/i18n/i18n.js";import*as va from"./../../core/platform/platform.js";import*as M from"./../../core/sdk/sdk.js";import*as as from"./../../core/text_utils/text_utils.js";import*as ls from"./../../models/badges/badges.js";import*as go from"./../../models/bindings/bindings.js";import"./../../ui/components/buttons/buttons.js";import*as ba from"./../../ui/components/tooltips/tooltips.js";import{createIcon as Sc}from"./../../ui/kit/kit.js";import*as B from"./../../ui/legacy/legacy.js";import{html as Oe,nothing as Sa,render as fo}from"./../../ui/lit/lit.js";import*as ds from"./../../ui/visual_logging/visual_logging.js";import*as yo from"./../common/common.js";import*as Xe from"./components/components.js";var ya={};F(ya,{formatSpecificitySummary:()=>ss,formatSpecificityTooltip:()=>yc,getSpecificityBreakdown:()=>fa,getSpecificityBreakdownLines:()=>os});import*as Li from"./../../core/i18n/i18n.js";var Di={specificity:"Specificity: ({PH1},{PH2},{PH3})",idLikeSpecificity:"(a) ID-like: {PH1}",classLikeSpecificity:"(b) Class-like: {PH1}",typeLikeSpecificity:"(c) Type-like: {PH1}"},fc=Li.i18n.registerUIStrings("panels/elements/CSSSpecificityBreakdown.ts",Di),ns=Li.i18n.getLocalizedString.bind(void 0,fc);function uo(r,e){return e>1?`${r} x${e}`:r}function mo(r){return new Intl.ListFormat(Li.DevToolsLocale.DevToolsLocale.instance().locale,{style:"long",type:"conjunction"}).format(r)}function fa(r){let e=[],t=[],i=[];for(let n of r.components??[])n.a>0&&e.push(uo(n.text,n.a)),n.b>0&&t.push(uo(n.text,n.b)),n.c>0&&i.push(uo(n.text,n.c));return{ids:e,classes:t,types:i}}function ss(r){return ns(Di.specificity,{PH1:r.a,PH2:r.b,PH3:r.c})}function os(r){let e=fa(r),t=[];return e.ids.length>0&&t.push(ns(Di.idLikeSpecificity,{PH1:mo(e.ids)})),e.classes.length>0&&t.push(ns(Di.classLikeSpecificity,{PH1:mo(e.classes)})),e.types.length>0&&t.push(ns(Di.typeLikeSpecificity,{PH1:mo(e.types)})),t}function yc(r){return[ss(r),...os(r)].join(`
`)}var Ae={insertStyleRuleBelow:"Insert style rule below",constructedStylesheet:"constructed stylesheet",userAgentStylesheet:"user agent stylesheet",injectedStylesheet:"injected stylesheet",viaInspector:"via inspector",styleAttribute:"`style` attribute",sattributesStyle:"{PH1}[Attributes Style]",showAllPropertiesSMore:"Show all properties ({PH1} more)",copySelector:"Copy `selector`",copyRule:"Copy rule",copyAllDeclarations:"Copy all declarations",cssSelector:"`CSS` selector",expandCollapsedRule:"Expand collapsed rule",collapseExpandedRule:"Collapse expanded rule"},Cc=So.i18n.registerUIStrings("panels/elements/StylePropertiesSection.ts",Ae),Ne=So.i18n.getLocalizedString.bind(void 0,Cc),{widget:Ca}=B.Widget,Ea="<style>",Ec=50,ue=class r{stylesContainer;styleInternal;matchedStyles;computedStyles;parentsComputedStyles;computedStyleExtraFields;editable;hoverTimer=null;willCauseCancelEditing=!1;forceShowAll=!1;originalPropertiesCount;element;#e;titleElement;propertiesTreeOutline=new B.TreeOutline.TreeOutlineInShadow;showAllButton;selectorElement;newStyleRuleToolbar;selectedSinceMouseDown;elementToSelectorIndex=new WeakMap;navigable;selectorRefElement;hoverableSelectorsMode;#n;#i;#t=null;customPopulateCallback;nestingLevel=0;#s;#o;nextEditorTriggerButtonIdx=1;sectionIdx=0;#r;#l;static#c=0;static#p=0;sectionTooltipIdPrefix=r.#p++;ghostStyleTreeElements=[];#d;constructor(e,t,i,n,s,o,a,l){this.#r=l,this.stylesContainer=e,this.sectionIdx=n,this.styleInternal=i,this.matchedStyles=t,this.computedStyles=s,this.parentsComputedStyles=o,this.computedStyleExtraFields=a,this.editable=!!(i.styleSheetId&&i.range),this.originalPropertiesCount=i.leadingProperties().length,this.customPopulateCallback=()=>this.populateStyle(this.styleInternal,this.propertiesTreeOutline);let d=i.parentRule,h=this.headerText();this.element=document.createElement("div"),this.element.classList.add("styles-section"),this.element.classList.add("matched-styles"),this.element.classList.add("monospace"),this.element.setAttribute("jslog",`${ds.section("style-properties").track({keydown:"ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Enter|Space"})}`),B.ARIAUtils.setLabel(this.element,`${h}, css selector`),this.element.tabIndex=-1,B.ARIAUtils.markAsListitem(this.element),this.element.addEventListener("keydown",this.onKeyDown.bind(this),!1),e.sectionByElement.set(this.element,this),this.#e=this.element.createChild("div","style-rule"),this.#s=document.createElement("div"),this.#s.classList.add("ancestor-rule-list"),this.element.prepend(this.#s),this.#o=document.createElement("div"),this.#o.classList.add("ancestor-closing-braces"),this.element.append(this.#o),this.updateAncestorRuleList(),this.titleElement=this.#e.createChild("div","styles-section-title "+(d?"styles-selector":"")),this.propertiesTreeOutline.setFocusable(!1),this.propertiesTreeOutline.registerRequiredCSS(Pn),this.propertiesTreeOutline.element.classList.add("style-properties","matched-styles","monospace"),this.#e.appendChild(this.propertiesTreeOutline.element),this.showAllButton=B.UIUtils.createTextButton("",this.showAllItems.bind(this),{className:"styles-show-all",jslogContext:"elements.show-all-style-properties"}),this.#e.appendChild(this.showAllButton);let c=Tt.Settings.Settings.instance().moduleSetting("text-editor-indent").get(),p=document.createElement("div");if(p.createChild("span","styles-clipboard-only").textContent=c.repeat(this.nestingLevel),p.classList.add("selector-container"),this.#t=Sc("triangle-right","section-collapse-icon"),B.ARIAUtils.markAsButton(this.#t),B.ARIAUtils.setControls(this.#t,this.propertiesTreeOutline.element),this.#t.tabIndex=0,this.#t.addEventListener("click",u=>{u.consume(!0),this.#u()}),this.#t.addEventListener("keydown",u=>{va.KeyboardUtilities.isEnterOrSpaceKey(u)&&(u.consume(!0),this.#u())}),p.appendChild(this.#t),this.selectorElement=document.createElement("span"),B.ARIAUtils.setLabel(this.selectorElement,Ne(Ae.cssSelector)),this.selectorElement.classList.add("selector"),this.selectorElement.textContent=h,p.appendChild(this.selectorElement),this.selectorElement.addEventListener("mouseenter",()=>{this.styleInternal.parentRule instanceof M.CSSRule.CSSStyleRule&&this.onMouseEnterSelector(this.styleInternal.parentRule)},!1),this.selectorElement.addEventListener("mouseleave",this.onMouseOutSelector.bind(this),!1),this.#l=p.createChild("span"),h.length>0||!(d instanceof M.CSSRule.CSSStyleRule)){let u=p.createChild("span","sidebar-pane-open-brace");u.textContent=h.length>0?" {":"{";let g=this.#e.createChild("div","sidebar-pane-closing-brace");g.createChild("span","styles-clipboard-only").textContent=c.repeat(this.nestingLevel),g.createChild("span").textContent="}"}else this.titleElement.classList.add("hidden");if(d){let u=new B.Toolbar.ToolbarButton(Ne(Ae.insertStyleRuleBelow),"plus",void 0,"elements.new-style-rule");u.addEventListener("Click",this.onNewRuleClick,this),u.setSize("MICRO"),u.element.tabIndex=-1,this.newStyleRuleToolbar||(this.newStyleRuleToolbar=this.element.createChild("devtools-toolbar","sidebar-pane-section-toolbar new-rule-toolbar")),this.newStyleRuleToolbar.appendToolbarItem(u),B.ARIAUtils.setHidden(this.newStyleRuleToolbar,!0)}this.selectorElement.addEventListener("click",this.handleSelectorClick.bind(this),!1),this.selectorElement.setAttribute("jslog",`${ds.cssRuleHeader("selector").track({click:!0,change:!0})}`),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,d&&(d.isUserAgent()||d.isInjected()?this.editable=!1:d.header&&(this.navigable=!d.header.isAnonymousInlineStyleSheet())),this.selectorRefElement=document.createElement("div"),this.selectorRefElement.classList.add("styles-section-subtitle"),this.element.prepend(this.selectorRefElement),this.updateRuleOrigin(),this.titleElement.appendChild(p),this.navigable&&this.element.classList.add("navigable"),this.editable||(this.element.classList.add("read-only"),this.propertiesTreeOutline.element.classList.add("read-only")),this.hoverableSelectorsMode=!1,this.#n=!1,this.#i=!1,this.markSelectorMatches(),this.onpopulate(),this.updateCollapsedState()}setComputedStyles(e){this.computedStyles=e}setParentsComputedStyles(e){this.parentsComputedStyles=e}setComputedStyleExtraFields(e){this.computedStyleExtraFields=e}updateAuthoringHint(){let e=this.propertiesTreeOutline.firstChild();for(;e;)e instanceof re&&(e.setComputedStyles(this.computedStyles),e.setParentsComputedStyles(this.parentsComputedStyles),e.updateAuthoringHint()),e=e.nextSibling}setSectionIdx(e){this.sectionIdx=e,this.onpopulate()}getSectionIdx(){return this.sectionIdx}treeScopeDistance(){let e=this.styleInternal.parentRule?.treeScope;return e?M.CSSMatchedStyles.distanceToTreeScope(this.matchedStyles.node(),e):-1}static createRuleOriginNode(e,t,i){if(!i)return Sa;let n=r.getRuleLocationFromCSSRule(i),s=i.header;function o(){return i&&n&&s&&(!s.isAnonymousInlineStyleSheet()||e.cssModel().sourceMapManager().sourceMapForClient(s))?r.linkifyRuleLocation(e.cssModel(),t,i.header,n):null}function a(h){if(s?.ownerNode)return Oe`<devtools-widget ${Ca(c=>new yo.DOMLinkifier.DeferredDOMNodeLink(c,s.ownerNode))}>
          ${h}
        </devtools-widget>`;if(i&&i.style.styleSheetId&&i.treeScope){let c=new M.DOMModel.DeferredDOMNode(i.cssModelInternal.target(),i.treeScope);return Oe`<devtools-widget ${Ca(p=>new yo.DOMLinkifier.DeferredDOMNodeLink(p,c,void 0,i.style.styleSheetId))}>
          ${h}
        </devtools-widget>`}return null}if(s?.isMutable&&!s.isViaInspector()){let h=s.isConstructedByNew()&&!s.sourceMapURL?null:o();if(h)return Oe`${h}`;let c=s.isConstructedByNew()?Ne(Ae.constructedStylesheet):Ea,p=a(c);return p||Oe`${c}`}let l=o();if(l)return Oe`${l}`;if(i.isUserAgent())return Oe`${Ne(Ae.userAgentStylesheet)}`;if(i.isInjected())return Oe`${Ne(Ae.injectedStylesheet)}`;if(i.isViaInspector())return Oe`${Ne(Ae.viaInspector)}`;let d=a(Ea);return d||Sa}createRuleOriginNode(e,t,i){return r.createRuleOriginNode(e,t,i)}static getRuleLocationFromCSSRule(e){let t;return e instanceof M.CSSRule.CSSStyleRule?t=e.style.range:e instanceof M.CSSRule.CSSKeyframeRule&&(t=e.key().range),t}static tryNavigateToRuleLocation(e,t){if(!t)return;let i=this.getRuleLocationFromCSSRule(t),n=t.header;if(i&&n&&!n.isAnonymousInlineStyleSheet()){let s=this.getCSSSelectorLocation(e.cssModel(),t.header,i);this.revealSelectorSource(s,!0)}}static linkifyRuleLocation(e,t,i,n){let s=this.getCSSSelectorLocation(e,i,n);return t.linkifyCSSLocation(s)}static getCSSSelectorLocation(e,t,i){let n=t.lineNumberInSource(i.startLine),s=t.columnNumberInSource(i.startLine,i.startColumn);return new M.CSSModel.CSSLocation(t,n,s)}getFocused(){return this.propertiesTreeOutline.shadowRoot.activeElement||null}focusNext(e){let t=this.getFocused();t&&(t.tabIndex=-1),e.focus(),this.propertiesTreeOutline.shadowRoot.contains(e)&&(e.tabIndex=0)}ruleNavigation(e){if(e.altKey||e.ctrlKey||e.metaKey||e.shiftKey)return;let t=this.getFocused(),i=null,n=Array.from(this.propertiesTreeOutline.shadowRoot.querySelectorAll("[tabindex]")).filter(o=>o.checkVisibility());if(n.length===0)return;let s=t?n.indexOf(t):-1;if(e.key==="ArrowLeft")i=n[s-1]||this.element;else if(e.key==="ArrowRight")i=n[s+1]||this.element;else if(e.key==="ArrowUp"||e.key==="ArrowDown"){this.focusNext(this.element);return}i&&(this.focusNext(i),e.consume(!0))}onKeyDown(e){let t=e;if(B.UIUtils.isEditing()||!this.editable||t.altKey||t.ctrlKey||t.metaKey)return;let i=t.target===this.element;switch(t.key){case"Enter":case" ":if(!i)return;this.startEditingAtFirstPosition(),t.consume(!0);break;case"ArrowLeft":case"ArrowRight":case"ArrowUp":case"ArrowDown":this.ruleNavigation(t);break;default:i&&t.key.length===1&&this.addNewBlankProperty(0).startEditingName();break}}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.stylesContainer.setActiveProperty(null)}onMouseMove(e){let t=B.KeyboardShortcut.KeyboardShortcut.eventHasCtrlEquivalentKey(e);this.setSectionHovered(t);let i=this.propertiesTreeOutline.treeElementFromEvent(e);i instanceof re?this.stylesContainer.setActiveProperty(i):this.stylesContainer.setActiveProperty(null);let n=this.element.getComponentSelection();!this.selectedSinceMouseDown&&n?.toString()&&(this.selectedSinceMouseDown=!0)}style(){return this.styleInternal}headerText(){if(this.#r)return this.#r;let e=this.matchedStyles.nodeForStyle(this.styleInternal);if(this.styleInternal.type===M.CSSStyleDeclaration.Type.Inline)return this.matchedStyles.isInherited(this.styleInternal)?Ne(Ae.styleAttribute):"element.style";if(this.styleInternal.type===M.CSSStyleDeclaration.Type.Transition)return"transitions style";if(this.styleInternal.type===M.CSSStyleDeclaration.Type.Animation)return this.styleInternal.animationName()?`${this.styleInternal.animationName()} animation`:"animation style";if(e&&this.styleInternal.type===M.CSSStyleDeclaration.Type.Attributes)return Ne(Ae.sattributesStyle,{PH1:e.nodeNameInCorrectCase()});if(this.styleInternal.parentRule instanceof M.CSSRule.CSSStyleRule)return this.styleInternal.parentRule.selectorText();if(this.styleInternal.parentRule instanceof M.CSSRule.CSSAtRule){if(this.styleInternal.parentRule.subsection())return"@"+this.styleInternal.parentRule.subsection();let t="@"+this.styleInternal.parentRule.type(),i=this.styleInternal.parentRule.name();return i?t+" "+i.text:t}return""}onMouseOutSelector(){this.hoverTimer&&clearTimeout(this.hoverTimer),M.OverlayModel.OverlayModel.hideDOMNodeHighlight(M.TargetManager.TargetManager.instance())}onMouseEnterSelector(e,t){this.hoverTimer&&clearTimeout(this.hoverTimer);let i=Co(e,t);i&&(this.hoverTimer=setTimeout(this.highlight.bind(this,void 0,i),300))}highlight(e="all",t){M.OverlayModel.OverlayModel.hideDOMNodeHighlight(M.TargetManager.TargetManager.instance());let i=this.stylesContainer.node();i&&i.domModel().overlayModel().highlightInOverlay({node:i,selectorList:t},e)}firstSibling(){let e=this.element.parentElement;if(!e)return null;let t=e.firstChild;for(;t;){let i=this.stylesContainer.sectionByElement.get(t);if(i)return i;t=t.nextSibling}return null}findCurrentOrNextVisible(e,t){if(!this.isHidden())return this;if(this===t)return null;t||(t=this);let i=null,n=e?this.nextSibling():this.previousSibling();if(n)i=n.findCurrentOrNextVisible(e,t);else{let s=e?this.firstSibling():this.lastSibling();s&&(i=s.findCurrentOrNextVisible(e,t))}return i}lastSibling(){let e=this.element.parentElement;if(!e)return null;let t=e.lastChild;for(;t;){let i=this.stylesContainer.sectionByElement.get(t);if(i)return i;t=t.previousSibling}return null}nextSibling(){let e=this.element;do e=e.nextSibling;while(e&&!this.stylesContainer.sectionByElement.has(e));if(e)return this.stylesContainer.sectionByElement.get(e)}previousSibling(){let e=this.element;do e=e.previousSibling;while(e&&!this.stylesContainer.sectionByElement.has(e));if(e)return this.stylesContainer.sectionByElement.get(e)}set activeAiSuggestion(e){this.#h(),this.#d=e,this.#d&&this.#a()}get activeAiSuggestion(){return this.#d}async commitActiveAiSuggestion(){if(!this.#d)return;await this.#m()?.commitAiSuggestion(this.#d.text)}#h(){this.#m()?.clearActiveAiSuggestion();for(let e of this.ghostStyleTreeElements)this.propertiesTreeOutline.removeChild(e);this.ghostStyleTreeElements=[]}#a(){if(!this.#d)return;let e=this.#m();if(!e||!this.#d.properties.length||(e.renderActiveAiSuggestion(this.#d.properties[0]),this.#d.properties.length<=1))return;let t=this.propertiesTreeOutline.rootElement().children().indexOf(e),i=this.#d.properties.slice(1);for(let n=0;n<i.length;n++){let s=i[n],o=new M.CSSProperty.CSSProperty(this.styleInternal,this.styleInternal.allProperties().length,s.name,s.value,!1,!1,!0,!1),a=new Mi(this.stylesContainer,this,this.matchedStyles,o);this.propertiesTreeOutline.insertChild(a,t+n+1),this.ghostStyleTreeElements.push(a)}}#m(){if(!this.#d)return;let e=this.closestPropertyForEditing(this.#d.cssProperty.index);if(e instanceof re)return e}onNewRuleClick(e){e.data.consume();let t=this.styleInternal.parentRule;if(!t?.style.range||!t.header)return;let i=as.TextRange.TextRange.createFromLocation(t.style.range.endLine,t.style.range.endColumn+1);this.stylesContainer.addBlankSection(this,t.header,i)}styleSheetEdited(e){let t=this.styleInternal.parentRule;t?t.rebase(e):this.styleInternal.rebase(e),this.updateAncestorRuleList(),this.updateRuleOrigin()}createAncestorRules(e){let t=0,i=0,n=0,s=0,o=0,a=0;this.nestingLevel=0;for(let l of e.ruleTypes){let d;switch(l){case"MediaRule":d=this.createMediaElement(e.media[t++]);break;case"ContainerRule":d=this.createContainerQueryElement(e.containerQueries[i++],e.style);break;case"ScopeRule":d=this.createScopeElement(e.scopes[n++]);break;case"SupportsRule":d=this.createSupportsElement(e.supports[s++]);break;case"StyleRule":d=this.createNestingElement(e,o++);break;case"StartingStyleRule":d=this.createStartingStyleElement();break;case"NavigationRule":d=this.createNavigationElement(e.navigations[a++]);break}d&&(this.#s.prepend(d),this.#o.prepend(this.indentElement(this.createClosingBrace(),this.nestingLevel)),this.nestingLevel++)}this.headerText().length===0&&this.nestingLevel--}createAtRuleAncestor(e){if(e.subsection()){let t=new Xe.CSSQuery.CSSQuery;t.data={queryPrefix:"@"+e.type(),queryText:e.name()?.text??"",jslogContext:"at-rule-"+e.type()},this.#s.prepend(t),this.#o.prepend(this.indentElement(this.createClosingBrace(),0)),this.nestingLevel=1}}maybeCreateAncestorRules(e){if(e.parentRule){e.parentRule instanceof M.CSSRule.CSSStyleRule?this.createAncestorRules(e.parentRule):e.parentRule instanceof M.CSSRule.CSSAtRule&&this.createAtRuleAncestor(e.parentRule);let t=0;for(let i of this.#s.children)this.indentElement(i,t),t++}}createClosingBrace(){let e=document.createElement("div");return e.append("}"),e}indentElement(e,t,i){let n=Tt.Settings.Settings.instance().moduleSetting("text-editor-indent").get(),s=document.createElement("span");return s.classList.add("styles-clipboard-only"),s.setAttribute("slot","indent"),s.textContent=n.repeat(t),e.prepend(s),i||(e.style.paddingLeft=`${t}ch`),e}createMediaElement(e){if(!e.text||!e.text.includes("(")&&e.text!=="print")return;let i="",n="",s;switch(e.source){case M.CSSMedia.Source.LINKED_SHEET:case M.CSSMedia.Source.INLINE_SHEET:{n=`media="${e.text}"`;break}case M.CSSMedia.Source.MEDIA_RULE:{i="@media",n=e.text,e.styleSheetId&&(s=this.handleQueryRuleClick.bind(this,e));break}case M.CSSMedia.Source.IMPORT_RULE:{n=`@import ${e.text}`;break}}let o=new Xe.CSSQuery.CSSQuery;return o.data={queryPrefix:i,queryText:n,onQueryTextClick:s,jslogContext:"media-query"},o}createContainerQueryElement(e,t){let i;e.styleSheetId&&(i=this.handleQueryRuleClick.bind(this,e));let n=new Xe.CSSQuery.CSSQuery;if(n.data={queryPrefix:"@container",queryName:e.textIsConditionText?void 0:e.name,queryText:e.text,onQueryTextClick:i,onLinkActivate:async s=>{Ai(s,this.stylesContainer)},getPopoverContents:(s,o)=>this.stylesContainer.getVariablePopoverContents(this.matchedStyles,s,o),jslogContext:"container-query"},t){let s=`container-${this.sectionTooltipIdPrefix}-${this.nestingLevel}`;e.getContainerForNode(this.matchedStyles.node().id).then(o=>{o&&n.parseStyleQueries(this.matchedStyles,t,o.containerNode,s)}),this.addContainerForContainerQuery(e)}return n}createScopeElement(e){let t;e.styleSheetId&&(t=this.handleQueryRuleClick.bind(this,e));let i=new Xe.CSSQuery.CSSQuery;return i.data={queryPrefix:"@scope",queryText:e.text,onQueryTextClick:t,jslogContext:"scope"},i}createStartingStyleElement(){let e=new Xe.CSSQuery.CSSQuery;return e.data={queryPrefix:"@starting-style",queryText:"",jslogContext:"starting-style"},e}createSupportsElement(e){if(!e.text)return;let t;e.styleSheetId&&(t=this.handleQueryRuleClick.bind(this,e));let i=new Xe.CSSQuery.CSSQuery;return i.data={queryPrefix:"@supports",queryText:e.text,onQueryTextClick:t,jslogContext:"supports"},i}createNavigationElement(e){if(!e.text)return;let t;e.styleSheetId&&(t=this.handleQueryRuleClick.bind(this,e));let i=new Xe.CSSQuery.CSSQuery;return i.data={queryPrefix:"@navigation",queryText:e.text,onQueryTextClick:t,jslogContext:"navigation"},i}createNestingElement(e,t){let i=e.nestingSelectors?.[t];if(!i)return;let n=this.matchedStyles.findParentRule(e,t);if(n){let o=document.createElement("div"),a=this.matchedStyles.getMatchingSelectors(n),l=new Array(n.selectors.length).fill(!1);for(let p of a)l[p]=!0;let d=o.createChild("span","selector");d.addEventListener("mouseenter",()=>this.onMouseEnterSelector(n),!1),d.addEventListener("mouseleave",this.onMouseOutSelector.bind(this),!1);let h=o.createChild("span");this.renderSelectorsToElement(n.selectors,l,this.elementToSelectorIndex,d,h);let c=o.createChild("span","sidebar-pane-open-brace");return c.textContent=" {",o}let s=document.createElement("div");return s.addEventListener("mouseenter",()=>this.onMouseEnterSelector(e,t),!1),s.addEventListener("mouseleave",this.onMouseOutSelector.bind(this),!1),s.textContent=`${i} {`,s}async addContainerForContainerQuery(e){let t=await e.getContainerForNode(this.matchedStyles.node().id);if(!t)return;let i=new Xe.QueryContainer.QueryContainer;i.data={container:t.containerNode,queryName:e.name,onContainerLinkClick:n=>{n.preventDefault(),D.instance().revealAndSelectNode(t.containerNode,{showPanel:!0,focusNode:!0,highlightInOverlay:!1}),t.containerNode.scrollIntoView()}},i.addEventListener("queriedsizerequested",async()=>{let n=await t.getContainerSizeDetails();n&&i.updateContainerQueriedSizeDetails(n)}),this.#s.prepend(i)}updateAncestorRuleList(){this.#s.removeChildren(),this.#o.removeChildren(),this.maybeCreateAncestorRules(this.styleInternal),this.#e.style.paddingLeft=`${this.nestingLevel}ch`}isPropertyInherited(e){return this.matchedStyles.isInherited(this.styleInternal)?!M.CSSMetadata.cssMetadata().isPropertyInherited(e):!1}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?.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?.editable?e:null}refreshUpdate(e){this.stylesContainer.refreshUpdate(this,e)}updateVarFunctions(e){if(!e.property.name.startsWith("--"))return;let t=this.propertiesTreeOutline.firstChild();for(;t;)t!==e&&t instanceof re&&t.refreshIfComputedValueChanged(),t=t.traverseNextTreeElement(!1,null,!0)}update(e){let t=this.headerText();if(this.selectorElement.textContent=t,this.titleElement.classList.toggle("hidden",t.length===0),this.markSelectorMatches(),e)this.onpopulate();else{let i=this.propertiesTreeOutline.firstChild();for(;i&&i instanceof re;)i.setOverloaded(this.isPropertyOverloaded(i.property)),i=i.traverseNextTreeElement(!1,null,!0)}}showAllItems(e){e&&e.consume(),!this.forceShowAll&&(this.forceShowAll=!0,this.onpopulate())}onpopulate(){this.stylesContainer.setActiveProperty(null),this.nextEditorTriggerButtonIdx=1,this.propertiesTreeOutline.removeChildren(),this.customPopulateCallback()}populateStyle(e,t){let i=0,n=e.leadingProperties(),s=Ec+n.length-this.originalPropertiesCount;for(let o of n){if(!this.forceShowAll&&i>=s)break;i++;let a=o.getLonghandProperties().length>0,l=this.isPropertyInherited(o.name),d=this.isPropertyOverloaded(o);if(e.parentRule&&e.parentRule.isUserAgent()&&l)continue;let h=new re({stylesContainer:this.stylesContainer,section:this,matchedStyles:this.matchedStyles,property:o,isShorthand:a,inherited:l,overloaded:d,newProperty:!1});h.setComputedStyles(this.computedStyles),h.setParentsComputedStyles(this.parentsComputedStyles),h.setComputedStyleExtraFields(this.computedStyleExtraFields),t.appendChild(h)}i<n.length?(this.showAllButton.classList.remove("hidden"),this.showAllButton.textContent=Ne(Ae.showAllPropertiesSMore,{PH1:n.length-i})):this.showAllButton.classList.add("hidden")}isPropertyOverloaded(e){return this.matchedStyles.propertyState(e)==="Overloaded"}updateFilter(){let e=!1;this.showAllItems();for(let n of this.propertiesTreeOutline.rootElement().children())if(n instanceof re){let s=n.updateFilter();e=e||s}let t=this.stylesContainer.filterRegex(),i=!e&&t!==null&&!t.test(this.element.deepTextContent());return this.#n=i,this.element.classList.toggle("hidden",i),!i&&this.styleInternal.parentRule&&this.markSelectorHighlights(),!i}isHidden(){return this.#n}#g(){if(!Tt.Settings.Settings.instance().moduleSetting("collapse-non-contributing-css-rules").get())return!1;let e=this.styleInternal,t=e.leadingProperties();return e.type===M.CSSStyleDeclaration.Type.Inline?!1:t.length===0?!0:t.some(s=>s.disabled)?!1:t.every(s=>this.matchedStyles.propertyState(s)==="Overloaded")}updateCollapsedState(){let e=this.#g();this.element.classList.toggle("collapsible",e),this.#f(e)}#f(e){this.#i=e,this.element.classList.toggle("collapsed",e),this.propertiesTreeOutline.element.classList.toggle("hidden",e),this.#t&&(this.#t.name=e?"triangle-right":"triangle-down",B.ARIAUtils.setExpanded(this.#t,!e),B.ARIAUtils.setLabel(this.#t,Ne(e?Ae.expandCollapsedRule:Ae.collapseExpandedRule)))}#u(){this.#f(!this.#i)}expand(){this.#i&&this.#f(!1)}isCollapsed(){return this.#i}markSelectorMatches(){let e=this.styleInternal.parentRule;if(!e||!(e instanceof M.CSSRule.CSSStyleRule))return;let t=this.matchedStyles.getMatchingSelectors(e),i=new Array(e.selectors.length).fill(!1);for(let n of t)i[n]=!0;this.stylesContainer.isEditingStyle||(this.renderSelectors(e.selectors,i,this.elementToSelectorIndex),this.markSelectorHighlights())}static getNextSpecificityTooltipId(){return`specificity-tooltip-${this.#c++}`}renderSelectors(e,t,i){this.selectorElement.removeChildren(),this.#l.removeChildren(),this.renderSelectorsToElement(e,t,i,this.selectorElement,this.#l)}renderSelectorsToElement(e,t,i,n,s){for(let[o,a]of e.entries()){o>0&&n.append(", ");let l=a.specificity?r.getNextSpecificityTooltipId():null,d=n.createChild("span","simple-selector");if(d.classList.toggle("selector-matches",t[o]),i.set(d,o),d.textContent=e[o].text,l&&a.specificity){d.setAttribute("aria-details",l);let h=s.appendChild(new ba.Tooltip.Tooltip({id:l,anchor:d,variant:"rich",jslogContext:"elements.css-selector-specificity"}));h.hoverDelay=500;let c=ss(a.specificity),p=os(a.specificity),u=p.length>0?Oe`
          <details class="selector-specificity-tooltip-disclosure">
            <summary>${c}</summary>
            <ul class="selector-specificity-tooltip-list">
              ${p.map(g=>Oe`<li>${g}</li>`)}
            </ul>
          </details>`:Oe`
          <div class="selector-specificity-tooltip-summary">${c}</div>`;fo(u,h,{host:this})}}}markSelectorHighlights(){let e=this.element.getElementsByClassName("simple-selector"),t=this.stylesContainer.filterRegex();for(let i=0;i<e.length;++i){let n=t?.test(e[i].textContent||"");e[i].classList.toggle("filter-match",n)}}addNewBlankProperty(e=this.propertiesTreeOutline.rootElement().childCount()){this.#i&&this.expand();let t=this.styleInternal.newBlankProperty(e),i=new re({stylesContainer:this.stylesContainer,section:this,matchedStyles:this.matchedStyles,property:t,isShorthand:!1,inherited:!1,overloaded:!1,newProperty:!0});return this.propertiesTreeOutline.insertChild(i,t.index),i}handleEmptySpaceMouseDown(){this.willCauseCancelEditing=this.stylesContainer.isEditingStyle,this.selectedSinceMouseDown=!1}handleEmptySpaceClick(e){if(this.#i){this.#u(),e.consume(!0);return}if(!this.editable||this.element.hasSelection()||this.willCauseCancelEditing||this.selectedSinceMouseDown)return;let t=e.target;if(t.classList.contains("header")||this.element.classList.contains("read-only")||t.enclosingNodeOrSelfWithClass("ancestor-rule-list")){e.consume();return}let i=B.UIUtils.deepElementFromEvent(e),n=i&&B.TreeOutline.TreeElement.getTreeElementBylistItemNode(i);n&&n instanceof re?this.addNewBlankProperty(n.property.index+1).startEditingName():t.classList.contains("selector-container")||t.classList.contains("styles-section-subtitle")?this.addNewBlankProperty(0).startEditingName():this.addNewBlankProperty().startEditingName(),e.consume(!0)}handleQueryRuleClick(e,t){let i=t.currentTarget;if(B.UIUtils.isBeingEdited(i))return;if(B.KeyboardShortcut.KeyboardShortcut.eventHasCtrlEquivalentKey(t)&&this.navigable){let a=e.rawLocation();if(!a){t.consume(!0);return}let l=go.CSSWorkspaceBinding.CSSWorkspaceBinding.instance().rawLocationToUILocation(a);l&&Tt.Revealer.reveal(l),t.consume(!0);return}if(!this.editable)return;let n=new B.InplaceEditor.Config(this.editingMediaCommitted.bind(this,e),this.editingMediaCancelled.bind(this,i),void 0,this.editingMediaBlurHandler.bind(this));B.InplaceEditor.InplaceEditor.startEditing(i,n);let s=i.getComponentSelection();s&&s.selectAllChildren(i),this.stylesContainer.setEditingStyle(!0),i.enclosingNodeOrSelfWithClass("query").classList.add("editing-query"),t.consume(!0)}editingMediaFinished(e){this.stylesContainer.setEditingStyle(!1),e.enclosingNodeOrSelfWithClass("query").classList.remove("editing-query")}editingMediaCancelled(e){this.editingMediaFinished(e),this.markSelectorMatches();let t=e.getComponentSelection();t&&t.collapse(e,0)}editingMediaBlurHandler(){return!0}async editingMediaCommitted(e,t,i,n,s,o){this.stylesContainer.setEditingStyle(!1),this.editingMediaFinished(t),i&&(i=i.trim()),this.stylesContainer.setUserOperation(!0);let a=this.stylesContainer.cssModel();if(a&&e.styleSheetId){let l=e.range,d=!1;e instanceof M.CSSContainerQuery.CSSContainerQuery?e.textIsConditionText?d=await a.setContainerQueryConditionText(e.styleSheetId,l,i):d=await a.setContainerQueryText(e.styleSheetId,l,i):e instanceof M.CSSSupports.CSSSupports?d=await a.setSupportsText(e.styleSheetId,l,i):e instanceof M.CSSScope.CSSScope?d=await a.setScopeText(e.styleSheetId,l,i):e instanceof M.CSSNavigation.CSSNavigation?d=await a.setNavigationText(e.styleSheetId,l,i):d=await a.setMediaText(e.styleSheetId,l,i),d&&(this.matchedStyles.resetActiveProperties(),this.stylesContainer.refreshUpdate(this)),this.stylesContainer.setUserOperation(!1),this.editingMediaTextCommittedForTest()}}editingMediaTextCommittedForTest(){}handleSelectorClick(e){let t=e.target;if(t){if(B.KeyboardShortcut.KeyboardShortcut.eventHasCtrlEquivalentKey(e)&&this.navigable&&t.classList.contains("simple-selector")){let i=this.elementToSelectorIndex.get(t);i&&this.navigateToSelectorSource(i,!0),e.consume(!0);return}this.element.hasSelection()||(this.startEditingAtFirstPosition(),e.consume(!0))}}handleContextMenuEvent(e){if(!e.target)return;let i=new B.ContextMenu.ContextMenu(e);i.clipboardSection().appendItem(Ne(Ae.copySelector),()=>{let n=this.headerText();rs.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(n)},{jslogContext:"copy-selector"}),i.clipboardSection().appendItem(Ne(Ae.copyRule),()=>{let n=this.formatLeadingProperties().ruleText;rs.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(n)},{jslogContext:"copy-rule"}),i.clipboardSection().appendItem(Ne(Ae.copyAllDeclarations),()=>{let n=this.formatLeadingProperties().allDeclarationText;rs.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(n)},{jslogContext:"copy-all-declarations"}),i.show()}formatLeadingProperties(){let e=this.headerText(),t=Tt.Settings.Settings.instance().moduleSetting("text-editor-indent").get(),i=this.style(),n=[];for(let a of i.leadingProperties())a.disabled?n.push(`${t}/* ${a.name}: ${a.value}; */`):n.push(`${t}${a.name}: ${a.value};`);let s=n.join(`
`),o=`${e} {
${s}
}`;return{allDeclarationText:s,ruleText:o}}navigateToSelectorSource(e,t){let i=this.stylesContainer.cssModel();if(!i)return;let n=this.styleInternal.parentRule;if(!n?.header)return;let s=i.styleSheetHeaderForId(n.header.id);if(!s)return;let o=new M.CSSModel.CSSLocation(s,n.lineNumberInSource(e),n.columnNumberInSource(e));r.revealSelectorSource(o,t)}static revealSelectorSource(e,t){let i=go.CSSWorkspaceBinding.CSSWorkspaceBinding.instance().rawLocationToUILocation(e);i&&Tt.Revealer.reveal(i,!t)}startEditingAtFirstPosition(){if(this.editable){if(!this.styleInternal.parentRule){this.moveEditorFromSelector("forward");return}this.startEditingSelector()}}startEditingSelector(){let e=this.selectorElement;if(B.UIUtils.isBeingEdited(e)||this.titleElement.classList.contains("hidden"))return;e.scrollIntoViewIfNeeded(!1);let t=e.textContent;t!==null&&(this.#l.querySelectorAll("devtools-tooltip")?.forEach(s=>s.hidePopover()),e.textContent=t.replace(/\s+/g," ").trim());let i=new B.InplaceEditor.Config(this.editingSelectorCommitted.bind(this),this.editingSelectorCancelled.bind(this),void 0);B.InplaceEditor.InplaceEditor.startEditing(this.selectorElement,i);let n=e.getComponentSelection();n&&n.selectAllChildren(e),this.stylesContainer.setEditingStyle(!0),e.classList.contains("simple-selector")&&this.navigateToSelectorSource(0,!1)}moveEditorFromSelector(e){if(this.markSelectorMatches(),!!e)if(e==="forward"){let i=this.propertiesTreeOutline.firstChild();for(;i?.inherited();){let n=i.nextSibling;i=n instanceof re?n:null}i?i.startEditingName():this.addNewBlankProperty().startEditingName()}else{let t=this.previousEditableSibling();if(!t)return;t.addNewBlankProperty().startEditingName()}}editingSelectorCommitted(e,t,i,n,s){if(this.editingSelectorEnded(),t&&(t=t.trim()),t===i){this.selectorElement.textContent=t,this.moveEditorFromSelector(s);return}let o=this.styleInternal.parentRule;if(!o)return;function a(){this.stylesContainer.setUserOperation(!1),this.moveEditorFromSelector(s),this.editingSelectorCommittedForTest()}this.stylesContainer.setUserOperation(!0),this.setHeaderText(o,t).then(a.bind(this))}setHeaderText(e,t){function i(o,a){return a?(ls.UserBadges.instance().recordAction(ls.BadgeAction.CSS_RULE_MODIFIED),this.matchedStyles.recomputeMatchingSelectors(o).then(n.bind(this,o))):Promise.resolve()}function n(o){let a=this.matchedStyles.getMatchingSelectors(o).length>0;this.propertiesTreeOutline.element.classList.toggle("no-affect",!a),this.matchedStyles.resetActiveProperties(),this.stylesContainer.refreshUpdate(this)}if(!(e instanceof M.CSSRule.CSSStyleRule))return Promise.resolve();let s=e.selectorRange();return s?(this.#r=void 0,e.setSelectorText(t).then(i.bind(this,e,!!s))):Promise.resolve()}editingSelectorCommittedForTest(){}updateRuleOrigin(){let e=this.createRuleOriginNode(this.matchedStyles,this.stylesContainer.linkifier,this.styleInternal.parentRule);fo(e,this.selectorRefElement,{host:this})}editingSelectorEnded(){this.stylesContainer.setEditingStyle(!1)}editingSelectorCancelled(){this.editingSelectorEnded(),this.markSelectorMatches()}closestPropertyForEditing(e){let t=this.propertiesTreeOutline.rootElement();return e>=t.childCount()?t.lastChild():t.childAt(e)}},Kt=class extends ue{normal;ruleLocation;styleSheetHeader;constructor(e,t,i,n,s,o,a){let l=e.cssModel(),d=M.CSSRule.CSSStyleRule.createDummyRule(l,i);super(e,t,d.style,a,null,null,null),this.normal=!1,this.ruleLocation=s,this.styleSheetHeader=n;let h=ue.linkifyRuleLocation(l,this.stylesContainer.linkifier,n,this.actualRuleLocation());fo(Oe`${h}`,this.selectorRefElement,{host:this}),this.maybeCreateAncestorRules(o),this.element.classList.add("blank-section")}actualRuleLocation(){let t=this.rulePrefix().split(`
`),i=t[t.length-1],n=new as.TextRange.TextRange(0,0,t.length-1,i?i.length:0);return this.ruleLocation.rebaseAfterTextEdit(as.TextRange.TextRange.createFromLocation(0,0),n)}rulePrefix(){return this.ruleLocation.startLine===0&&this.ruleLocation.startColumn===0?"":`

`}get isBlank(){return!this.normal}editingSelectorCommitted(e,t,i,n,s){if(!this.isBlank){super.editingSelectorCommitted(e,t,i,n,s);return}function o(h){return h?this.matchedStyles.addNewRule(h,this.matchedStyles.node()).then(a.bind(this,h)):(this.editingSelectorCancelled(),this.editingSelectorCommittedForTest(),Promise.resolve())}function a(h){let c=this.matchedStyles.getMatchingSelectors(h).length>0;this.makeNormal(h),c||this.propertiesTreeOutline.element.classList.add("no-affect"),this.updateRuleOrigin(),this.stylesContainer.setUserOperation(!1),this.editingSelectorEnded(),this.element.parentElement&&this.moveEditorFromSelector(s),this.markSelectorMatches(),this.editingSelectorCommittedForTest()}t&&(t=t.trim()),this.stylesContainer.setUserOperation(!0);let l=this.stylesContainer.cssModel(),d=this.rulePrefix()+t+" {}";l&&l.addRule(this.styleSheetHeader.id,d,this.ruleLocation).then(o.bind(this))}editingSelectorCancelled(){if(this.stylesContainer.setUserOperation(!1),!this.isBlank){super.editingSelectorCancelled();return}this.editingSelectorEnded(),this.stylesContainer.removeSection(this)}makeNormal(e){this.element.classList.remove("blank-section"),this.styleInternal=e.style,this.normal=!0}},Oi=class extends ue{constructor(e,t,i,n,s,o){super(e,t,i,n,null,null,null,s),o||this.element.classList.add("hidden"),this.selectorElement.className="property-registration-key"}async setHeaderText(e,t){!(e instanceof M.CSSRule.CSSPropertyRule)||!e.propertyName().range||await e.setPropertyName(t)&&this.stylesContainer.forceUpdate()}createRuleOriginNode(e,t,i){return i?super.createRuleOriginNode(e,t,i):Oe`CSS.registerProperty`}},Ri=class extends ue{constructor(e,t,i,n,s,o,a){super(e,t,i,s,null,null,null,o),a||this.element.classList.add("hidden"),this.selectorElement.className="function-key",this.customPopulateCallback=()=>this.addChildren(n,this.propertiesTreeOutline),this.onpopulate()}createConditionElement(e){if("media"in e)return this.createMediaElement(e.media);if("container"in e)return this.createContainerQueryElement(e.container);if("supports"in e)return this.createSupportsElement(e.supports);if("navigation"in e)return this.createNavigationElement(e.navigation)}positionNestingElement(e){return e.classList.add("css-function-inline-block"),this.indentElement(e,this.nestingLevel,!0)}addChildren(e,t){for(let i of e)if("style"in i)this.populateStyle(i.style,t);else if("children"in i){let n=this.createConditionElement(i),s=t;if(this.nestingLevel++,n){let o=new B.TreeOutline.TreeElement;o.listItemElement.appendChild(this.positionNestingElement(n)),o.setExpandable(!0),o.setCollapsible(!1),t.appendChild(o),s=o}if(this.addChildren(i.children,s),n){let o=new B.TreeOutline.TreeElement;o.listItemElement.appendChild(this.positionNestingElement(this.createClosingBrace())),t.appendChild(o)}this.nestingLevel--}}},ki=class extends ue{constructor(e,t,i,n,s){super(e,t,i,n,null,null,null),this.selectorElement.className="font-palette-values-key",s||this.element.classList.add("hidden")}},Ui=class extends ue{constructor(e,t,i,n,s){super(e,t,i,n,null,null,null),this.selectorElement.className="position-try-values-key",this.propertiesTreeOutline.element.classList.toggle("no-affect",!s)}},Fi=class extends ue{constructor(e,t,i,n){super(e,t,i,n,null,null,null),this.selectorElement.className="keyframe-key"}headerText(){return this.styleInternal.parentRule instanceof M.CSSRule.CSSKeyframeRule?this.styleInternal.parentRule.key().text:""}setHeaderText(e,t){function i(s){s&&this.stylesContainer.refreshUpdate(this)}return!(e instanceof M.CSSRule.CSSKeyframeRule)||!e.key().range?Promise.resolve():e.setKeyText(t).then(i.bind(this))}isPropertyInherited(e){return!1}isPropertyOverloaded(e){return!1}markSelectorHighlights(){}markSelectorMatches(){this.styleInternal.parentRule instanceof M.CSSRule.CSSKeyframeRule&&(this.selectorElement.textContent=this.styleInternal.parentRule.key().text)}highlight(){}},Vi=class extends ue{isPropertyInherited(e){return!1}};function Co(r,e){if(!(r instanceof M.CSSRule.CSSStyleRule))return;let t=r.nestingSelectors;if(!t)return e===void 0?r.selectorText():void 0;if(e!==void 0&&(e<0||e>=t.length))return;let i=e!==void 0?t[e]:r.selectorText(),n=e!==void 0?e+1:0,s=Co(r,n);if(!s)return i;let o=s.replace(/::[a-zA-Z-]+/g,"").trim();return i.includes("&")?i.replaceAll("&",`:is(${o})`):`:is(${o}) ${i.trim()}`}var xa={};F(xa,{StylePropertyHighlighter:()=>$i});import{PanelUtils as Eo}from"./../utils/utils.js";var $i=class{styleSidebarPane;constructor(e){this.styleSidebarPane=e}async highlightProperty(e){let t=this.styleSidebarPane.allSections().find(s=>s.style().allProperties().includes(e));if(!t)return;t.expand(),t.showAllItems();let i=[];for(let s=t.propertiesTreeOutline.firstChild();s;s=s.nextSibling)i.push(s.onpopulate());await Promise.all(i);let n=this.findTreeElementFromSection(s=>s.property===e,t);n&&(n.parent?.expand(),this.scrollAndHighlightTreeElement(n),t.element.focus())}findAndHighlightSectionBlock(e){let t=this.styleSidebarPane.getSectionBlockByName(e);if(!t||t.sections.length===0)return;let[i]=t.sections;i.showAllItems(),Eo.highlightElement(t.titleElement())}findAndHighlightSection(e,t,i=-1){let n=this.styleSidebarPane.getSectionBlockByName(t),s=n?.sections.find(o=>o.headerText()===e&&(i===-1||o.treeScopeDistance()===i));!s||!n||(n.expand(!0),s.expand(),s.showAllItems(),Eo.highlightElement(s.element))}findAndHighlightPropertyName(e,t,i){let n=i?this.styleSidebarPane.getSectionBlockByName(i):void 0,s=n?.sections??this.styleSidebarPane.allSections();if(!s)return!1;for(let o of s){if(t&&o.headerText()!==t||!o.style().hasActiveProperty(e))continue;n?.expand(!0),o.expand(),o.showAllItems();let a=this.findTreeElementFromSection(l=>l.property.name===e&&!l.overloaded(),o);if(a)return this.scrollAndHighlightTreeElement(a),o.element.focus(),!0}return!1}findTreeElementFromSection(e,t){let i=t.propertiesTreeOutline.firstChild();for(;i&&i instanceof re;){if(e(i))return i;i=i.traverseNextTreeElement(!1,null,!0)}return null}scrollAndHighlightTreeElement(e){Eo.highlightElement(e.listItemElement)}};var bo={};F(bo,{StylesAiCodeCompletionProvider:()=>Bi});import*as Ta from"./../../core/common/common.js";import*as Pe from"./../../core/host/host.js";import*as Ia from"./../../core/i18n/i18n.js";import*as Ma from"./../../core/root/root.js";import*as cs from"./../../core/text_utils/text_utils.js";import*as It from"./../../models/ai_code_completion/ai_code_completion.js";import*as vo from"./../../ui/components/text_editor/text_editor.js";var Bi=class r{#e=new Pe.AidaClient.AidaClient;#n=Ta.Settings.Settings.instance().createSetting("ai-code-completion-enabled",!1);#i;#t;getCompletionHint;setAiAutoCompletion;#s=e=>{this.#c(e.data)};#o=()=>{let e=Pe.AidaClient.HostConfigTracker.instance().aidaAvailability;e!==void 0&&this.#c(e)};constructor(e){if(!It.AiCodeCompletion.AiCodeCompletion.isAiCodeCompletionStylesAvailable())throw new Error("AI code completion feature in Styles is not available.");this.#t=e,Pe.AidaClient.HostConfigTracker.instance().addEventListener("aidaAvailabilityChanged",this.#s),this.#n.addChangeListener(this.#o);let t=Pe.AidaClient.HostConfigTracker.instance().aidaAvailability;t!==void 0&&this.#c(t)}static createInstance(e){return new r(e)}#r(){if(!this.#t||this.#i)return;let e=["}"];this.#t.completionContext.stopSequences&&e.push(...this.#t.completionContext.stopSequences),this.#i=new It.AiCodeCompletion.AiCodeCompletion({aidaClient:this.#e,serverSideLoggingEnabled:!Ma.Runtime.hostConfig.aidaAvailability?.disallowLogging},this.#t.panel,void 0,e),this.#t.onFeatureEnabled()}#l(){this.#i&&(this.#i=void 0,this.#t?.onFeatureDisabled())}#c(e){let t=e==="available",i=Ia.DevToolsLocale.DevToolsLocale.instance().locale,n=It.AiCodeCompletion.AiCodeCompletion.isAiCodeCompletionStylesEnabled(i)&&this.#n.get();t&&n?this.#r():this.#l()}async triggerAiCodeCompletion(e,t,i,n,s){if(!this.#i){It.debugLog("Ai Code Completion is not initialized");return}let o=n.ownerStyle.styleSheetId;if(!o)return;let a=s.styleSheetHeaderForId(o);if(!a)return;let l=await a.requestContentData();if(cs.ContentData.ContentData.isError(l)){It.debugLog("Error while fetching content from stylesheet",l.error);return}let d=l.text,h=n.range;if(!d||!h)return;let c=new cs.Text.Text(d),p="",u=c.offsetFromPosition(h.startLine,h.startColumn),g=c.offsetFromPosition(h.endLine,h.endColumn),m=d.substring(0,u);if(!i){let y=n.nameRange();if(y){let x=c.offsetFromPosition(y.endLine,y.endColumn);m=m+d.substring(u,x)+": ",p=d.substring(u,x)+": "}}p=p+e,m=m+e;let f=d.substring(g),T=vo.AiCodeCompletionProvider.MAX_PREFIX_SUFFIX_LENGTH;m.length>T&&(m=m.substring(m.length-T)),f.length>T&&(f=f.substring(0,T));let w=performance.now(),b=await this.#p(m,f,t);b&&this.setAiAutoCompletion?.({text:p+b.suggestionText,from:t,rpcGlobalId:b.rpcGlobalId,sampleId:b.sampleId,startTime:w,clearCachedRequest:this.clearCache.bind(this),onImpression:this.#i.registerUserImpression.bind(this.#i),citations:b.citations})}async#p(e,t,i){this.#t?.onRequestTriggered(),Pe.userMetrics.actionTaken(Pe.UserMetrics.Action.AiCodeCompletionRequestTriggeredFromStyles);try{let n=await this.#i?.completeCode(e,t,i,"CSS");if(this.#t?.onResponseReceived(),!n)return null;let{response:s,fromCache:o}=n;if(!s)return null;let a=await this.#d(s,t);return a&&o&&Pe.userMetrics.actionTaken(Pe.UserMetrics.Action.AiCodeCompletionResponseServedFromCache),a}catch(n){It.debugLog("Error while fetching code completion suggestions from AIDA",n),this.#t?.onResponseReceived(),Pe.userMetrics.actionTaken(Pe.UserMetrics.Action.AiCodeCompletionError)}return null}async#d(e,t){let i=this.#h(e);if(!i||i.attributionMetadata?.attributionAction===Pe.AidaClient.RecitationAction.BLOCK)return null;let s=vo.AiCodeCompletionProvider.AiCodeCompletionProvider.trimSuggestionOverlap(i.generationString,t);return s.length===0?null:{suggestionText:s,sampleId:i.sampleId,citations:i.attributionMetadata?.citations??[],rpcGlobalId:e.metadata.rpcGlobalId}}#h(e){if(!e.generatedSamples.length)return null;let t=this.getCompletionHint?.();return t?e.generatedSamples.find(i=>i.generationString.startsWith(t))??null:e.generatedSamples[0]}clearCache(){this.#i?.clearCachedRequest()}onSuggestionAccepted(e,t,i){this.#t?.onSuggestionAccepted(e),t&&this.#i?.registerUserAcceptance(t,i)}};var hs=`.styles-section{min-height:18px;white-space:nowrap;user-select:text;border-bottom:1px solid var(--sys-color-divider);position:relative;overflow:hidden;padding:2px 2px 4px 4px;&:last-child{border-bottom:none}&.has-open-popover{z-index:1}&.read-only{background-color:var(--sys-color-cdt-base-container);font-style:italic}&:focus-visible,
  &.read-only:focus-visible{background-color:var(--sys-color-state-focus-highlight)}.simple-selector.filter-match{background-color:var(--sys-color-tonal-container);color:var(--sys-color-on-surface)}.devtools-link{user-select:none}.styles-section-subtitle devtools-icon{margin-bottom:-4px}.styles-section-subtitle .devtools-link{color:var(--sys-color-on-surface);text-decoration-color:var(--sys-color-neutral-bright);outline-offset:0}.selector,
  .try-rule-selector-element,
  .ancestor-rule-list,
  .ancestor-closing-braces{color:var(--app-color-element-sidebar-subtitle)}.ancestor-rule-list,
  .styles-section-title{overflow-wrap:break-word;white-space:normal}.ancestor-rule-list devtools-css-query{display:block}.simple-selector.selector-matches,
  &.keyframe-key{color:var(--sys-color-on-surface)}.style-properties{margin:0;padding:2px 4px 0 0;list-style:none;clear:both;display:flex}&.matched-styles .style-properties{padding-left:0}& span.simple-selector:hover{text-decoration:var(--override-styles-section-text-hover-text-decoration);cursor:var(--override-styles-section-text-hover-cursor)}&.styles-panel-hovered:not(.read-only),
  &.styles-panel-hovered:not(.read-only) devtools-css-query{--override-styles-section-text-hover-text-decoration:underline;--override-styles-section-text-hover-cursor:default}& .section-collapse-icon{width:12px;height:12px;margin-right:2px;margin-left:-2px;vertical-align:middle;cursor:pointer;display:none}&.collapsible .section-collapse-icon{display:inline-block}&.collapsed{opacity:60%;& .style-properties{display:none}& .styles-section-subtitle{display:none}& .sidebar-pane-closing-brace{display:none}& .sidebar-pane-open-brace::after{content:"}"}}}.sidebar-pane-closing-brace{clear:both}.styles-section-subtitle{color:var(--sys-color-on-surface-subtle);float:right;padding:var(--sys-size-2) var(--sys-size-2) 0 var(--sys-size-8);max-width:100%;height:15px;margin-bottom:-1px}.styles-section-subtitle *{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:100%}.sidebar-pane-open-brace,
.sidebar-pane-closing-brace{color:var(--sys-color-on-surface)}@keyframes styles-element-state-pane-slidein{from{margin-top:-60px}to{margin-top:0}}@keyframes styles-element-state-pane-slideout{from{margin-top:0}to{margin-top:-60px}}.styles-sidebar-toolbar-pane{position:relative;animation-duration:0.1s;animation-direction:normal}.styles-sidebar-toolbar-pane-container{position:relative;overflow:hidden;flex-shrink:0}.styles-selector{cursor:text}.styles-clipboard-only{display:inline-block;width:0;opacity:0%;pointer-events:none;white-space:pre}.styles-sidebar-pane-toolbar-container{flex-shrink:0;overflow:hidden;position:sticky;top:0;background-color:var(--sys-color-cdt-base-container);z-index:2}.styles-sidebar-pane-toolbar{border-bottom:1px solid var(--sys-color-divider)}.styles-pane-toolbar{width:100%}.sidebar-separator{background-color:var(--sys-color-surface2);padding:0 5px;border-bottom:1px solid var(--sys-color-divider);color:var(--sys-color-on-surface-subtle);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;line-height:22px;> span.monospace{max-width:180px;display:inline-block;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;margin-left:2px}&.layer-separator{display:flex;align-items:baseline}&.empty-section{border-bottom:none}}.sidebar-pane-section-toolbar{position:absolute;right:0;bottom:-1px;z-index:0;&.new-rule-toolbar{visibility:hidden;margin-bottom:5px;--toolbar-height:16px}}.styles-pane:not(.is-editing-style)
  .styles-section.matched-styles:not(.read-only):hover
  .sidebar-pane-section-toolbar.new-rule-toolbar{visibility:visible}.styles-show-all{padding:4px;margin-left:16px;text-overflow:ellipsis;overflow:hidden;max-width:-webkit-fill-available}@media (forced-colors: active){.sidebar-pane-section-toolbar{forced-color-adjust:none;border:1px solid ButtonText;background-color:ButtonFace}.styles-section{&:focus-visible,
    &.read-only:focus-visible{forced-color-adjust:none;background-color:Highlight}.styles-section-subtitle{.devtools-link{color:linktext;text-decoration-color:linktext;&:focus-visible{color:HighlightText}}}&:focus-visible *,
    &.read-only:focus-visible *,
    &:focus-visible .styles-section-subtitle .devtools-link{color:HighlightText;text-decoration-color:HighlightText}&:focus-visible .sidebar-pane-section-toolbar{background-color:ButtonFace}&:focus-visible{--webkit-css-property-color:HighlightText}}}.spinner::before{--dimension:24px;margin-top:2em;left:calc(50% - var(--dimension) / 2)}.section-block-expand-icon{margin-bottom:-4px}.selector-specificity-tooltip-summary{white-space:nowrap}.selector-specificity-tooltip-disclosure{> summary{cursor:pointer;white-space:nowrap}}.selector-specificity-tooltip-list{margin:var(--sys-size-3) 0 0;padding:0;list-style:none;> li{display:flex;align-items:center;gap:var(--sys-size-3);&::before{content:"";flex:none;width:var(--sys-size-3);height:var(--sys-size-3);border-radius:50%;background-color:currentcolor;margin-left:var(--sys-size-2)}}}
/*# sourceURL=${import.meta.resolve("./stylesSidebarPane.css")} */`;var Na={};F(Na,{WebCustomData:()=>Wt});import*as Aa from"./../../core/root/root.js";var Wt=class r{#e=new Map;fetchPromiseForTest;constructor(e){if(!e){this.fetchPromiseForTest=Promise.resolve();return}this.fetchPromiseForTest=fetch(`${e}third_party/vscode.web-custom-data/browsers.css-data.json`).then(t=>t.json()).then(t=>{for(let i of t.properties)this.#e.set(i.name,i)}).catch()}static create(){let e=Aa.Runtime.getRemoteBase();return new r(e?.base??"")}findCssProperty(e){return this.#e.get(e)}};var Se={noMatchingSelectorOrStyle:"No matching selector or style",visibleSelectors:"{n, plural, =1 {# visible selector listed below} other {# visible selectors listed below}}",pseudoSElement:"Pseudo ::{PH1} element",inheritedFroms:"Inherited from ",inheritedFromSPseudoOf:"Inherited from ::{PH1} pseudo of ",incrementdecrementWithMousewheelOne:"Increment/decrement with mousewheel or up/down keys. {PH1}: R \xB11, Shift: G \xB11, {PH2}: B \xB11",incrementdecrementWithMousewheelHundred:"Increment/decrement with mousewheel or up/down keys. {PH1}: \xB1100, Shift: \xB110, {PH2}: \xB10.1",toggleRenderingEmulations:"Toggle common rendering emulations",automaticDarkMode:"Automatic dark mode",layer:"Layer",clickToRevealLayer:"Click to reveal layer in layer tree",aiSuggestionAccepted:"{PH1} Suggestion accepted.",atRuleSection:"Other @rules"},xc=ms.i18n.registerUIStrings("panels/elements/StylesSidebarPane.ts",Se),xe=ms.i18n.getLocalizedString.bind(void 0,xc),Tc=ms.i18n.lockedString,Da=500,wo=5,Ic=200,_t="@property",Mo="@function",Mc=[{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"]},{mode:"flexibility",properties:["flex","flex-basis","flex-grow","flex-shrink"]}],Ac="styles-ai-code-completion-disclaimer-tooltip",Nc="styles-ai-code-completion-spinner-tooltip",Pc="styles-ai-code-completion-citations-tooltip",Mt=class r extends Ce.ObjectWrapper.eventMixin($t){matchedStyles=null;currentToolbarPane=null;animatedToolbarPane=null;pendingWidget=null;pendingWidgetToggle=null;toolbar=null;toolbarPaneElement;lastFilterChange=null;visibleSections=null;noMatchesElement;sectionsContainer;sectionByElement=new WeakMap;#e=new gs.SwatchPopoverHelper.SwatchPopoverHelper;linkifier=new fs.Linkifier.Linkifier(Dc,!0);decorator;lastRevealedProperty=null;userOperation=!1;isEditingStyle=!1;#n=null;#i=!1;#t="";isActivePropertyHighlighted=!1;initialUpdateCompleted=!1;hasMatchedStyles=!1;sectionBlocks=[];idleCallbackManager=null;needsForceUpdate=!1;resizeThrottler=new Ce.Throttler.Throttler(100);resetUpdateThrottler=new Ce.Throttler.Throttler(500);computedStyleUpdateThrottler=new Ce.Throttler.Throttler(500);scrollerElement;boundOnScroll;imagePreviewPopover;#s;activeCSSAngle=null;#o;#r;aiCodeCompletionConfig;aiCodeCompletionProvider;#l;#c;#p=!1;#d;#h=new WeakMap;#a=[];#m=0;constructor(e){super(e,{delegatesFocus:!0,useShadowDom:!0,classes:["flex-none"]}),this.setMinimumSize(96,26),this.registerRequiredCSS(hs),Ce.Settings.Settings.instance().moduleSetting("text-editor-indent").addChangeListener(this.requestUpdate,this),Ce.Settings.Settings.instance().moduleSetting("collapse-non-contributing-css-rules").addChangeListener(this.updateCollapsedSectionsSetting,this),this.toolbarPaneElement=this.createStylesSidebarToolbar(),this.noMatchesElement=this.contentElement.createChild("div","gray-info-message hidden"),this.noMatchesElement.textContent=xe(Se.noMatchingSelectorOrStyle),this.sectionsContainer=new U.Widget.VBox,this.sectionsContainer.show(this.contentElement),U.ARIAUtils.markAsList(this.sectionsContainer.contentElement),this.sectionsContainer.contentElement.addEventListener("keydown",this.sectionsContainerKeyDown.bind(this),!1),this.sectionsContainer.contentElement.addEventListener("focusin",this.sectionsContainerFocusChanged.bind(this),!1),this.sectionsContainer.contentElement.addEventListener("focusout",this.sectionsContainerFocusChanged.bind(this),!1),this.#e.addEventListener("WillShowPopover",this.hideAllPopovers,this),this.decorator=new $i(this),this.contentElement.classList.add("styles-pane"),U.Context.Context.instance().addFlavorChangeListener(_.DOMModel.DOMNode,this.forceUpdate,this),this.contentElement.addEventListener("copy",this.clipboardCopy.bind(this)),this.boundOnScroll=this.onScroll.bind(this),this.imagePreviewPopover=new Me(this.contentElement,t=>{let i=t.composedPath()[0];return i instanceof Element?i:null},async()=>await fs.ImagePreview.loadPrecomputedFeatures(this.node())),U.ViewManager.ViewManager.instance().addEventListener("ViewVisibilityChanged",t=>{(t.data.revealedViewId==="animations"||t.data.hiddenViewId==="animations")&&this.#y()}),Oa.AiCodeCompletion.AiCodeCompletion.isAiCodeCompletionStylesAvailable()&&(this.aiCodeCompletionConfig={completionContext:{},generationContext:{},onFeatureEnabled:()=>{this.#I()},onFeatureDisabled:()=>{this.#v()},onSuggestionAccepted:this.#M.bind(this),onRequestTriggered:this.#A.bind(this),onResponseReceived:this.#N.bind(this),panel:"styles"},this.aiCodeCompletionProvider=Bi.createInstance(this.aiCodeCompletionConfig))}get webCustomData(){return!this.#s&&Ce.Settings.Settings.instance().moduleSetting("show-css-property-documentation-on-hover").get()&&(this.#s=Wt.create()),this.#s}onScroll(e){this.hideAllPopovers()}swatchPopoverHelper(){return this.#e}setUserOperation(e){this.userOperation=e}revealProperty(e){this.decorator.highlightProperty(e),this.lastRevealedProperty=e,this.requestUpdate()}jumpToProperty(e,t,i){return this.decorator.findAndHighlightPropertyName(e,t,i)}jumpToDeclaration(e){e.declaration instanceof _.CSSProperty.CSSProperty?this.revealProperty(e.declaration):this.jumpToProperty("initial-value",e.name,_t)}jumpToSection(e,t,i){this.decorator.findAndHighlightSection(e,t,i)}jumpToSectionBlock(e){this.decorator.findAndHighlightSectionBlock(e)}jumpToFunctionDefinition(e,t){this.jumpToSection(e,Mo,t)}jumpToFontPaletteDefinition(e){this.jumpToSection(`@font-palette-values ${e}`,xe(Se.atRuleSection))}jumpToCounterStyleDefinition(e){this.jumpToSection(`@counter-style ${e}`,xe(Se.atRuleSection))}forceUpdate(){this.needsForceUpdate=!0,this.#e.hide(),this.resetCache(),this.requestUpdate()}updateCollapsedSectionsSetting(){for(let e of this.allSections())e.updateCollapsedState()}sectionsContainerKeyDown(e){let t=U.DOMUtilities.deepActiveElement(this.sectionsContainer.contentElement.ownerDocument);if(!t)return;let i=this.sectionByElement.get(t);if(!i)return;let n=null,s=!1;switch(e.key){case"ArrowUp":case"ArrowLeft":{n=i.previousSibling()||i.lastSibling(),s=!1;break}case"ArrowDown":case"ArrowRight":{n=i.nextSibling()||i.firstSibling(),s=!0;break}case"Home":{n=i.firstSibling(),s=!0;break}case"End":{n=i.lastSibling(),s=!1;break}}n&&this.#n&&(n=n.findCurrentOrNextVisible(s)),n&&(n.element.focus(),e.consume(!0))}sectionsContainerFocusChanged(){this.resetFocus()}resetFocus(){if(this.noMatchesElement.classList.contains("hidden")&&this.sectionBlocks[0]?.sections[0]){let e=this.sectionBlocks[0].sections[0].findCurrentOrNextVisible(!0);e&&(e.element.tabIndex=this.sectionsContainer.hasFocus()?-1:0)}}onAddButtonLongClick(e){let t=this.cssModel();if(!t)return;let i=t.styleSheetHeaders().filter(a),n=[];for(let l=0;l<i.length;++l){let d=i[l],h=this.createNewRuleInStyleSheet.bind(this,d);n.push({text:Ra.ResourceUtils.displayNameForURL(d.resourceURL()),handler:h})}n.sort(o);let s=new U.ContextMenu.ContextMenu(e);for(let l=0;l<n.length;++l){let d=n[l];s.defaultSection().appendItem(d.text,d.handler,{jslogContext:"style-sheet-header"})}s.footerSection().appendItem("inspector-stylesheet",this.createNewRuleInViaInspectorStyleSheet.bind(this),{jslogContext:"inspector-stylesheet"}),s.show();function o(l,d){return ps.StringUtilities.naturalOrderComparator(l.text,d.text)}function a(l){return!l.isViaInspector()&&!l.isInline&&!!l.resourceURL()}}#g(e){if(!e)return null;if(this.#i)try{return new RegExp(e,"i")}catch{}return new RegExp(ps.StringUtilities.escapeForRegExp(e),"i")}onFilterChanged(e){this.#t=e.data,this.setFilter(this.#g(e.data))}onRegexToggled(){this.#i=!this.#i,this.setFilter(this.#g(this.#t))}setFilter(e){this.lastFilterChange=Date.now(),this.#n=e,this.updateFilter(),this.resetFocus(),setTimeout(()=>{this.lastFilterChange&&(Date.now()-this.lastFilterChange<Da||U.ARIAUtils.LiveAnnouncer.alert(this.visibleSections?xe(Se.visibleSelectors,{n:this.visibleSections}):xe(Se.noMatchingSelectorOrStyle)))},Da)}refreshUpdate(e,t){if(t)for(let n of this.allSections())n instanceof Kt&&n.isBlank||n.updateVarFunctions(t);if(this.isEditingStyle)return;let i=this.node();if(i){for(let n of this.allSections())n instanceof Kt&&n.isBlank||n.update(n===e);this.#n&&this.updateFilter(),this.swatchPopoverHelper().reposition(),this.nodeStylesUpdatedForTest(i,!1)}}async performUpdate(e){await this.#f(e);let t=this?.contentElement?.enclosingNodeOrSelfWithClass("style-panes-wrapper")?.parentElement?.querySelectorAll(".style-panes-wrapper");if(t&&t.length>0)for(let i of t)this.scrollerElement=i,this.scrollerElement.addEventListener("scroll",this.boundOnScroll,!1)}async#f(e){this.initialUpdateCompleted||window.setTimeout(()=>{e?.aborted||this.initialUpdateCompleted||this.sectionsContainer.contentElement.createChild("span","spinner")},200);let t=await this.fetchMatchedCascade();e?.throwIfAborted(),this.matchedStyles=t;let i=this.node()?.id,n=this.matchedStyles?.getParentLayoutNodeId(),[s,o,a]=await Promise.all([this.fetchComputedStylesFor(i),this.fetchComputedStylesFor(n),this.fetchComputedStyleExtraFieldsFor(i)]);e?.throwIfAborted(),await this.innerRebuildUpdate(e,this.matchedStyles,s,o,a),e?.throwIfAborted(),this.initialUpdateCompleted||(this.initialUpdateCompleted=!0,this.appendToolbarItem(this.createRenderingShortcuts()),this.dispatchEventToListeners("InitialUpdateCompleted")),this.#m+=1;let l=this.#m;U.Widget.Widget.allUpdatesComplete.then(()=>{this.#m===l&&(this.nodeStylesUpdatedForTest(this.node(),!0),this.dispatchEventToListeners("StylesUpdateCompleted",{hasMatchedStyles:this.hasMatchedStyles}))})}#u(e,t){let i=e.getRegisteredProperty(t);return i?{registration:i,goToDefinition:()=>this.jumpToSection(t,_t)}:void 0}getVariableParserError(e,t){let i=this.#u(e,t);return i?new _i.CSSVariableValueView.CSSVariableParserError(i):null}getVariablePopoverContents(e,t,i){return new _i.CSSVariableValueView.CSSVariableValueView({variableName:t,value:i??void 0,details:this.#u(e,t)})}async fetchComputedStylesFor(e){let t=this.node();return t===null||e===void 0?null:await t.domModel().cssModel().getComputedStyle(e)}async fetchComputedStyleExtraFieldsFor(e){let t=this.node();return t===null||e===void 0?null:await t.domModel().cssModel().getComputedStyleExtraFields(e)}onResize(){this.resizeThrottler.schedule(this.#C.bind(this))}#C(){let e=this.contentElement.getBoundingClientRect().width+"px";return this.allSections().forEach(t=>{t.propertiesTreeOutline.element.style.width=e}),this.hideAllPopovers(),Promise.resolve()}resetCache(){let e=this.cssModel();e&&e.discardCachedMatchedCascade()}fetchMatchedCascade(){let e=this.node();if(!e||!this.cssModel())return Promise.resolve(null);let t=this.cssModel();if(!t)return Promise.resolve(null);return t.cachedMatchedCascadeForNode(e).then(i.bind(this));function i(n){return n&&n.node()===this.node()?n:null}}setEditingStyle(e){this.isEditingStyle!==e&&(this.contentElement.classList.toggle("is-editing-style",e),this.isEditingStyle=e,this.setActiveProperty(null))}setActiveProperty(e){if(this.isActivePropertyHighlighted&&_.OverlayModel.OverlayModel.hideDOMNodeHighlight(_.TargetManager.TargetManager.instance()),this.isActivePropertyHighlighted=!1,!this.node()||!e||e.overloaded()||e.inherited())return;let t=e.property.ownerStyle.parentRule,i=t instanceof _.CSSRule.CSSStyleRule?t.selectorText():void 0;for(let{properties:n,mode:s}of Mc){if(!n.includes(e.name))continue;let o=this.node();if(o){o.domModel().overlayModel().highlightInOverlay({node:this.node(),selectorList:i},s),this.isActivePropertyHighlighted=!0;break}}}onCSSModelChanged(e){let t=e?.data&&"edit"in e.data?e.data.edit:null;if(t){for(let i of this.allSections())i.styleSheetEdited(t);this.#S();return}this.#E()}onComputedStyleChanged(){La.Runtime.hostConfig.devToolsAnimationStylesInStylesTab?.enabled&&this.computedStyleUpdateThrottler.schedule(async()=>{await this.#T(),this.handledComputedStyleChangedForTest()})}handledComputedStyleChangedForTest(){}#E(){if(this.userOperation||this.isEditingStyle){this.#S();return}this.resetCache(),this.requestUpdate()}#y(){this.scheduleResetUpdateIfNotEditingCalledForTest(),!(this.userOperation||this.isEditingStyle)&&this.resetUpdateThrottler.schedule(async()=>{this.#E()})}scheduleResetUpdateIfNotEditingCalledForTest(){}#x(e){return!!(e.animationStyles?.length||e.transitionsStyle?.cssProperties.length||e.inherited?.some(t=>t.animationStyles?.length||t.transitionsStyle?.cssProperties.length))}async#T(){if(!this.matchedStyles)return;let e=this.node()?.id;if(!e)return;let t=await this.cssModel()?.getAnimatedStylesForNode(e);if(!t)return;if(!this.#x(t)){this.#y();return}if(!U.ViewManager.ViewManager.instance().isViewVisible("animations"))return;let i=(c,p)=>{if(p){if(c?.allProperties().length!==p.cssProperties.length){this.#y();return}c.allProperties().forEach((u,g)=>{let m=p.cssProperties[g];m&&u.setLocalValue(m.value)})}else if(c){this.#y();return}};i(this.matchedStyles.transitionsStyle()??null,t.transitionsStyle??null);let n=this.matchedStyles.animationStyles()??[],s=t.animationStyles??[];if(n.length!==s.length){this.#y();return}for(let c=0;c<n.length;c++){let p=n[c],u=s[c].style;i(p??null,u)}let o=this.matchedStyles.inheritedStyles()??[],a=o.filter(c=>c.type===_.CSSStyleDeclaration.Type.Transition),l=t.inherited?.map(c=>c.transitionsStyle).filter(c=>c?.cssProperties.some(p=>_.CSSMetadata.cssMetadata().isPropertyInherited(p.name)))??[];if(a.length!==l.length){this.#y();return}for(let c=0;c<a.length;c++){let p=a[c],u=l[c];i(p,u??null)}let d=o.filter(c=>c.type===_.CSSStyleDeclaration.Type.Animation),h=t.inherited?.flatMap(c=>c.animationStyles).filter(c=>c?.style.cssProperties.some(p=>_.CSSMetadata.cssMetadata().isPropertyInherited(p.name)))??[];if(d.length!==h.length){this.#y();return}for(let c=0;c<d.length;c++){let p=d[c],u=h[c]?.style;i(p,u??null)}}async#S(){this.#r?.abort(),this.#o=new AbortController;let e=this.#o.signal,t=await this.fetchMatchedCascade(),i=this.node()?.id,n=t?.getParentLayoutNodeId(),[s,o]=await Promise.all([this.fetchComputedStylesFor(i),this.fetchComputedStylesFor(n)]);if(!e.aborted)for(let a of this.allSections())a.setComputedStyles(s),a.setParentsComputedStyles(o),a.updateAuthoringHint()}focusedSectionIndex(){let e=0;for(let t of this.sectionBlocks)for(let i of t.sections){if(i.element.hasFocus())return e;e++}return-1}continueEditingElement(e,t){let i=this.allSections()[e];if(i){let n=i.closestPropertyForEditing(t);if(!n){i.element.focus();return}n.startEditingName()}}async innerRebuildUpdate(e,t,i,n,s){if(this.needsForceUpdate)this.needsForceUpdate=!1;else if(this.isEditingStyle||this.userOperation)return;let o=this.focusedSectionIndex();this.#a=[],this.linkifier.reset();let a=this.sectionBlocks.map(f=>f.sections).flat(),l=this.node();if(this.hasMatchedStyles=t!==null&&l!==null,!this.hasMatchedStyles){this.sectionBlocks=[],this.sectionsContainer.contentElement.removeChildren(),this.sectionsContainer.detachChildWidgets(),this.noMatchesElement.classList.remove("hidden");return}let d=await this.rebuildSectionsForMatchedStyleRules(e,t,i,n,s);e?.throwIfAborted(),this.sectionBlocks=d;let h=this.sectionBlocks.map(f=>f.sections).flat(),c=at.instance(),p=c.getSection();if(p){c.unbindContext();for(let[f,T]of a.entries())p===T&&f<h.length&&c.bindContext(this,h[f])}this.sectionsContainer.contentElement.removeChildren(),this.sectionsContainer.detachChildWidgets();let u=document.createDocumentFragment(),g=0,m=null;for(let f of this.sectionBlocks){let T=f.titleElement();T&&u.appendChild(T);for(let w of f.sections)u.appendChild(w.element),g===o&&(m=w.element),g++}this.sectionsContainer.contentElement.appendChild(u),this.#b(),m&&m.focus(),o>=g&&this.sectionBlocks[0].sections[0].element.focus(),this.sectionsContainerFocusChanged(),this.#n?this.updateFilter():this.noMatchesElement.classList.toggle("hidden",this.sectionBlocks.length>0),this.lastRevealedProperty&&(this.decorator.highlightProperty(this.lastRevealedProperty),this.lastRevealedProperty=null),this.swatchPopoverHelper().reposition(),U.UIUserMetrics.UIUserMetrics.instance().panelLoaded("elements","DevTools.Launch.Elements"),this.dispatchEventToListeners("StylesUpdateCompleted",{hasMatchedStyles:!1})}nodeStylesUpdatedForTest(e,t){}setMatchedStylesForTest(e){this.matchedStyles=e}rebuildSectionsForMatchedStyleRulesForTest(e,t,i,n){return this.rebuildSectionsForMatchedStyleRules(void 0,e,t,i,n)}async rebuildSectionsForMatchedStyleRules(e,t,i,n,s){this.idleCallbackManager&&this.idleCallbackManager.discard(),this.idleCallbackManager=new us;let o=[new Re(null)],a=0,l=null,d,h=null,c=!1,p=y=>{let x=y.parentRule;if(x instanceof _.CSSRule.CSSStyleRule){let I=x.layers;if((I.length||h)&&h!==I){let L=Re.createLayerBlock(x);o.push(L),d?.childBlocks.push(L),c=!0,h=I}}};Et.instance().item().setVisible(!1);let u=U.ViewManager.ViewManager.instance().isViewVisible("animations"),g=Ce.Settings.Settings.instance().moduleSetting("css-animations-only-when-animations-tab-open").get(),m=0;for(let y of t.nodeStyles())m+=y.leadingProperties().length;this.#p=!_e.InspectorFrontendHost.isUnderTest()&&m>Ic;for(let y of t.nodeStyles()){let x=y.type===_.CSSStyleDeclaration.Type.Transition||y.type===_.CSSStyleDeclaration.Type.Animation;if(x&&g&&!u)continue;let I=t.isInherited(y)?t.nodeForStyle(y):null;if(I&&I!==l){l=I;let fe=await Re.createInheritedNodeBlock(l);d=fe,o.push(fe)}p(y);let L=o[o.length-1];L&&(!x||y.allProperties().length>0)&&this.idleCallbackManager.schedule(()=>{if(e?.aborted)return;let fe=new ue(this,t,y,a,i,n,s);a++,L.sections.push(fe)})}d=void 0;let f=Array.from(t.customHighlightPseudoNames()).map(y=>({highlightName:y,pseudoType:"highlight",pseudoStyles:t.customHighlightPseudoStyles(y)})),T=[...t.pseudoTypes()].map(y=>({highlightName:null,pseudoType:y,pseudoStyles:t.pseudoStyles(y)})),w=f.concat(T).sort((y,x)=>y.pseudoType==="before"&&x.pseudoType!=="before"?-1:y.pseudoType!=="before"&&x.pseudoType==="before"?1:y.pseudoType<x.pseudoType?-1:y.pseudoType>x.pseudoType?1:0);for(let y of w){l=null;for(let x=0;x<y.pseudoStyles.length;++x){let I=y.pseudoStyles[x],L=t.isInherited(I)?t.nodeForStyle(I):null;if(x===0||L!==l)if(h=null,L){let Ie=await Re.createInheritedPseudoTypeBlock(y.pseudoType,y.highlightName,L);d=Ie,o.push(Ie)}else{let Ie=Re.createPseudoTypeBlock(y.pseudoType,y.highlightName);d=Ie,o.push(Ie)}l=L,p(I);let fe=o[o.length-1];this.idleCallbackManager.schedule(()=>{if(e?.aborted)return;let Ie=new Vi(this,t,I,a,i,n,s);a++,fe.sections.push(Ie)})}}for(let y of t.keyframes()){let x=Re.createKeyframesBlock(y.name().text);for(let I of y.keyframes())this.idleCallbackManager.schedule(()=>{e?.aborted||(x.sections.push(new Fi(this,t,I.style,a)),a++)});o.push(x)}let b=t.atRules();if(b.length>0){let y=b.length<=wo,x=Re.createAtRuleBlock(y);for(let I of b)this.idleCallbackManager.schedule(()=>{e?.aborted||(x.sections.push(new ki(this,t,I.style,a,y)),a++)});o.push(x)}for(let y of t.positionTryRules()){let x=Re.createPositionTryBlock(y.name().text);this.idleCallbackManager.schedule(()=>{e?.aborted||(x.sections.push(new Ui(this,t,y.style,a,y.active())),a++)}),o.push(x)}if(t.registeredProperties().length>0){let y=t.registeredProperties().length<=wo,x=Re.createRegisteredPropertiesBlock(y);for(let I of t.registeredProperties())this.idleCallbackManager.schedule(()=>{e?.aborted||(x.sections.push(new Oi(this,t,I.style(),a,I.propertyName(),y)),a++)});o.push(x)}if(t.functionRules().length>0){let y=t.functionRules().length<=wo,x=Re.createFunctionBlock(y);for(let I of t.functionRules())this.idleCallbackManager.schedule(()=>{e?.aborted||(x.sections.push(new Ri(this,t,I.style,I.children(),a,I.nameWithParameters(),y)),a++)});o.push(x)}return c?Et.instance().item().setVisible(!0):Bt.instance().isShowing()&&D.instance().showToolbarPane(null,Et.instance().item()),await this.idleCallbackManager.awaitDone(),o}async createNewRuleInViaInspectorStyleSheet(){let e=this.cssModel(),t=this.node();if(!e||!t)return;this.setUserOperation(!0);let i=await e.requestViaInspectorStylesheet(t.frameId());this.setUserOperation(!1),await this.createNewRuleInStyleSheet(i)}async createNewRuleInStyleSheet(e){if(!e)return;let t=await e.requestContentData(),i=ii.ContentData.ContentData.textOr(t,"").split(`
`),n=ii.TextRange.TextRange.createFromLocation(i.length-1,i[i.length-1].length);this.sectionBlocks&&this.sectionBlocks.length>0&&this.addBlankSection(this.sectionBlocks[0].sections[0],e,n)}addBlankSection(e,t,i){let n=this.node(),s=new Kt(this,e.matchedStyles,n?n.simpleSelector():"",t,i,e.style(),0);this.sectionsContainer.contentElement.insertBefore(s.element,e.element.nextSibling);for(let a of this.sectionBlocks){let l=a.sections.indexOf(e);l!==-1&&(a.sections.splice(l+1,0,s),s.startEditingSelector())}let o=0;for(let a of this.sectionBlocks)for(let l of a.sections)l.setSectionIdx(o),o++}removeSection(e){for(let t of this.sectionBlocks){let i=t.sections.indexOf(e);i!==-1&&(t.sections.splice(i,1),e.element.remove())}}filterRegex(){return this.#n}updateFilter(){let e=!1,t=0;for(let i of this.sectionBlocks)t+=i.updateFilter(),e=!!t||e;this.noMatchesElement.classList.toggle("hidden",!!e),this.visibleSections=t}wasShown(){U.Context.Context.instance().setFlavor(r,this),super.wasShown()}willHide(){this.hideAllPopovers(),super.willHide(),U.Context.Context.instance().setFlavor(r,null)}hideAllPopovers(){this.#e.hide(),this.imagePreviewPopover.hide(),this.activeCSSAngle&&(this.activeCSSAngle.minify(),this.activeCSSAngle=null)}getSectionBlockByName(e){return this.sectionBlocks.find(t=>t.titleElement()?.textContent===e)}allSections(){let e=[];for(let t of this.sectionBlocks)e=e.concat(t.sections);return e}clipboardCopy(e){_e.userMetrics.actionTaken(_e.UserMetrics.Action.StyleRuleCopied)}createStylesSidebarToolbar(){let e=this.contentElement.createChild("div","styles-sidebar-pane-toolbar-container");e.role="toolbar";let i=e.createChild("div","hbox styles-sidebar-pane-toolbar").createChild("devtools-toolbar","styles-pane-toolbar");i.role="presentation";let n=new U.Toolbar.ToolbarFilter(void 0,1,1,void 0,void 0,!1,void 0,void 0,!0,this.onRegexToggled.bind(this));return n.addEventListener("TextChanged",this.onFilterChanged,this),i.appendToolbarItem(n),i.appendItemsAtLocation("styles-sidebarpane-toolbar"),this.toolbar=i,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)}addStyleUpdateListener(e){this.addEventListener("StylesUpdateCompleted",e)}removeStyleUpdateListener(e){this.removeEventListener("StylesUpdateCompleted",e)}startToolbarPaneAnimation(e){if(e===this.currentToolbarPane)return;if(e&&this.currentToolbarPane){this.currentToolbarPane.detach(),e.show(this.toolbarPaneElement),this.currentToolbarPane=e,this.currentToolbarPane.focus();return}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);let t=i.bind(this);this.toolbarPaneElement.addEventListener("animationend",t,!1);function i(){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)}}createRenderingShortcuts(){let e=Ce.Settings.Settings.instance().moduleSetting("emulated-css-media-feature-prefers-color-scheme"),t=Ce.Settings.Settings.instance().moduleSetting("emulate-auto-dark-mode"),i=(s,o)=>`${s?"\u2713 ":""}${o}`,n=new U.Toolbar.ToolbarToggle(xe(Se.toggleRenderingEmulations),"brush","brush-filled",void 0,!1);return n.element.setAttribute("jslog",`${lt.dropDown("rendering-emulations").track({click:!0})}`),n.element.addEventListener("click",s=>{let o=n.element.getBoundingClientRect(),a=new U.ContextMenu.ContextMenu(s,{x:o.left,y:o.bottom}),l=e.get(),d=l==="light",h=l==="dark",c=t.get(),p=i(d,"prefers-color-scheme: light"),u=i(h,"prefers-color-scheme: dark"),g=i(c,xe(Se.automaticDarkMode));a.defaultSection().appendItem(p,()=>{t.set(!1),e.set(d?"":"light"),n.setToggled(!!e.get())},{jslogContext:"prefer-light-color-scheme"}),a.defaultSection().appendItem(u,()=>{t.set(!1),e.set(h?"":"dark"),n.setToggled(!!e.get())},{jslogContext:"prefer-dark-color-scheme"}),a.defaultSection().appendItem(g,()=>{t.set(!c),n.setToggled(!!e.get())},{jslogContext:"emulate-auto-dark-mode"}),a.show(),s.stopPropagation()},{capture:!0}),n}#v(){this.#l?.remove(),this.#l=void 0,this.#c=void 0}#I(){if(this.#c)return;this.#c=new Hi.AiCodeCompletionSummaryToolbar.AiCodeCompletionSummaryToolbar({citationsTooltipId:Pc,disclaimerTooltipId:Ac,spinnerTooltipId:Nc,panel:"styles"});let e=this.contentElement.enclosingNodeOrSelfWithClass("style-panes-wrapper");this.#l=e.createChild("div","ai-code-completion-summary-toolbar-container"),this.#l.role="toolbar",this.#c.show(this.#l,void 0,!0)}#M(e){if(!this.#c||e.length===0)return;let t=e.map(i=>i.uri).filter(i=>!!i);this.#c.updateCitations(t)}#A(){this.#c?.setLoading(!0)}#N(){this.#c?.setLoading(!1)}trackForLazyRendering(e,t){this.#d||(this.#d=new IntersectionObserver(i=>{for(let n of i)if(n.isIntersecting){let s=this.#h.get(n.target);s&&(s(),this.untrackForLazyRendering(n.target))}},{rootMargin:"100px"})),this.#h.set(e,t),this.#a.push(e),this.#d.observe(e)}#b(){if(!this.#p||this.#a.length===0){this.#a=[];return}let e=this.contentElement.parentElement;if(!e){this.#a=[];return}let{top:t,bottom:i}=e.getBoundingClientRect();if(i===t){this.#a=[];return}let n=t-100,s=i+100,o=[];for(let a of this.#a){if(!a.isConnected||!this.#h.has(a))continue;let l=a.getBoundingClientRect();if(l.top>s)break;l.bottom>=n&&o.push(a)}this.#a=[];for(let a of o){let l=this.#h.get(a);l&&(l(),this.untrackForLazyRendering(a))}}shouldRenderLazily(){return this.#p}untrackForLazyRendering(e){this.#d&&this.#d.unobserve(e),this.#h.delete(e)}},Dc=23,Re=class r{#e;sections;childBlocks=[];#n=!1;#i;constructor(e,t,i){this.#e=e,this.sections=[],this.#n=i??!1,t&&e instanceof HTMLElement&&(this.#i=bc(this.#n?"triangle-down":"triangle-right","section-block-expand-icon"),e.classList.toggle("empty-section",!this.#n),U.ARIAUtils.setExpanded(e,this.#n),e.appendChild(this.#i),e.tabIndex=-1,e.addEventListener("click",()=>this.expand(!this.#n),!1))}expand(e){!this.#e||!this.#i||(this.#e.classList.toggle("empty-section",!e),this.#i.name=e?"triangle-down":"triangle-right",U.ARIAUtils.setExpanded(this.#e,e),this.#n=e,this.sections.forEach(t=>t.element.classList.toggle("hidden",!e)))}static createPseudoTypeBlock(e,t){let i=document.createElement("div");i.className="sidebar-separator",i.setAttribute("jslog",`${lt.sectionHeader("pseudotype")}`);let n=t?`(${t})`:"",s=`${e}${n}`;return i.textContent=xe(Se.pseudoSElement,{PH1:s}),new r(i)}static async createInheritedPseudoTypeBlock(e,t,i){let n=document.createElement("div");n.className="sidebar-separator",n.setAttribute("jslog",`${lt.sectionHeader("inherited-pseudotype")}`);let s=t?`(${t})`:"",o=`${e}${s}`;U.UIUtils.createTextChild(n,xe(Se.inheritedFromSPseudoOf,{PH1:o}));let a=Hi.DOMLinkifier.Linkifier.instance().linkify(i,{preventKeyboardFocus:!0});return Pa(a,n),new r(n)}static createRegisteredPropertiesBlock(e){let t=document.createElement("div"),i=new r(t,!0,e);return t.className="sidebar-separator",t.appendChild(document.createTextNode(_t)),i}static createFunctionBlock(e){let t=document.createElement("div"),i=new r(t,!0,e);return t.className="sidebar-separator",t.appendChild(document.createTextNode(Mo)),i}static createKeyframesBlock(e){let t=document.createElement("div");return t.className="sidebar-separator",t.setAttribute("jslog",`${lt.sectionHeader("keyframes")}`),t.textContent=`@keyframes ${e}`,new r(t)}static createAtRuleBlock(e){let t=document.createElement("div"),i=new r(t,!0,e);return t.className="sidebar-separator",t.appendChild(document.createTextNode(xe(Se.atRuleSection))),i}static createPositionTryBlock(e){let t=document.createElement("div");return t.className="sidebar-separator",t.setAttribute("jslog",`${lt.sectionHeader("position-try")}`),t.textContent=`@position-try ${e}`,new r(t)}static async createInheritedNodeBlock(e){let t=document.createElement("div");t.className="sidebar-separator",t.setAttribute("jslog",`${lt.sectionHeader("inherited")}`),U.UIUtils.createTextChild(t,xe(Se.inheritedFroms));let i=Hi.DOMLinkifier.Linkifier.instance().linkify(e,{preventKeyboardFocus:!0});return Pa(i,t),new r(t)}static createLayerBlock(e){let t=document.createElement("div");t.className="sidebar-separator layer-separator",t.setAttribute("jslog",`${lt.sectionHeader("layer")}`),U.UIUtils.createTextChild(t.createChild("div"),xe(Se.layer));let i=e.layers;if(!i.length&&e.origin==="user-agent"){let o=e.origin==="user-agent"?"\xA0user\xA0agent\xA0stylesheet":"\xA0implicit\xA0outer\xA0layer";return U.UIUtils.createTextChild(t.createChild("div"),o),new r(t)}let n=t.createChild("button");n.className="link",n.title=xe(Se.clickToRevealLayer);let s=i.map(o=>_.CSSModel.CSSModel.readableLayerName(o.text)).join(".");return n.textContent=s,n.onclick=()=>Bt.instance().revealLayer(s),new r(t)}updateFilter(){let e=0;for(let t of this.childBlocks)e+=t.updateFilter();for(let t of this.sections)e+=t.updateFilter()?1:0;return this.#e&&this.#e.classList.toggle("hidden",e===0),e}titleElement(){return this.#e}},us=class{discarded;promises;queue;constructor(){this.discarded=!1,this.promises=[],this.queue=[]}discard(){this.discarded=!0}schedule(e){if(this.discarded)return;let t=new Promise((i,n)=>{this.queue.push({fn:e,resolve:i,reject:n})});this.promises.push(t),this.scheduleIdleCallback(100)}scheduleIdleCallback(e){window.requestIdleCallback(()=>{let t=this.queue.shift();vc(t);try{this.discarded||t.fn(),t.resolve()}catch(i){t.reject(i)}},{timeout:e})}awaitDone(){return Promise.all(this.promises)}};function Fa(r){return`'${r.replaceAll("'","\\'")}'`}var Ni=class extends U.TextPrompt.TextPrompt{isColorAware;cssCompletions;selectedNodeComputedStyles;parentNodeComputedStyles;treeElement;isEditingName;cssVariables;aiCodeCompletionProvider;activeAiSuggestionInfo;#e=Ce.Debouncer.debounce(()=>{this.triggerAiCodeCompletion()},Ua.AiCodeCompletionProvider.AIDA_REQUEST_DEBOUNCE_TIMEOUT_MS);constructor(e,t,i=[]){super(),this.initialize(this.buildPropertyCompletions.bind(this),U.UIUtils.StyleValueDelimiters);let n=_.CSSMetadata.cssMetadata();this.isColorAware=_.CSSMetadata.cssMetadata().isColorAwareProperty(e.property.name),this.cssCompletions=[];let s=e.node();if(t)this.cssCompletions=n.allProperties(),s&&!s.isSVGNode()&&(this.cssCompletions=this.cssCompletions.filter(a=>!n.isSVGProperty(a)));else if(this.cssCompletions=[...i,...n.getPropertyValues(e.property.name)],s&&n.isFontFamilyProperty(e.property.name)){let a=s.domModel().cssModel().fontFaces().map(l=>Fa(l.getFontFamily()));this.cssCompletions.unshift(...a)}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(ps.StringUtilities.naturalOrderComparator):this.cssVariables.sort(),!t&&(this.disableDefaultSuggestionForEmptyInput(),e?.valueElement)){let a=e.valueElement.textContent,l=_e.Platform.isMac()?"Cmd":"Ctrl",d=_e.Platform.isMac()?"Option":"Alt";a!==null&&(a.match(/#[\da-f]{3,6}$/i)?this.setTitle(xe(Se.incrementdecrementWithMousewheelOne,{PH1:l,PH2:d})):a.match(/\d+/)&&this.setTitle(xe(Se.incrementdecrementWithMousewheelHundred,{PH1:l,PH2:d})))}let o=this.treeElement.stylesContainer();o instanceof Mt&&(this.aiCodeCompletionProvider=o.aiCodeCompletionProvider,this.aiCodeCompletionProvider&&(this.aiCodeCompletionProvider.getCompletionHint=this.getCompletionHint.bind(this),this.aiCodeCompletionProvider.setAiAutoCompletion=this.setAiAutoCompletion.bind(this)))}onKeyDown(e){let t=e;switch(t.key){case"ArrowUp":case"ArrowDown":case"PageUp":case"PageDown":if(this.aiCodeCompletionProvider&&this.treeElement.section().activeAiSuggestion&&this.setAiAutoCompletion(null),!this.isSuggestBoxVisible()&&this.handleNameOrValueUpDown(t)){t.preventDefault();return}break;case"Enter":{if(t.shiftKey)return;let i=this.tabKeyPressed();this.aiCodeCompletionProvider&&i&&e.consume(!0),t.preventDefault();return}case"Escape":if(this.#n(t))return;break;case" ":if(this.isEditingName){this.tabKeyPressed(),t.preventDefault();return}}super.onKeyDown(t)}onMouseWheel(e){if(this.handleNameOrValueUpDown(e)){e.consume(!0);return}super.onMouseWheel(e)}tabKeyPressed(){return this.aiCodeCompletionProvider?this.acceptCodeComplete():(this.acceptAutoComplete(),!1)}onInput(e){super.onInput(e),this.aiCodeCompletionProvider&&(e.inputType?.startsWith("delete")?(this.#e.cancel(),this.setAiAutoCompletion(null)):(this.#i(),this.#e()))}detach(){this.#e.cancel(),super.detach()}#n(e){return!this.aiCodeCompletionProvider||!this.treeElement.section().activeAiSuggestion?!1:(e.preventDefault(),this.isSuggestBoxVisible()?this.suggestBox?.hide():this.setAiAutoCompletion(null),e.consume(!0),!0)}handleNameOrValueUpDown(e){function t(n,s){this.treeElement.nameElement&&this.treeElement.valueElement&&this.treeElement.applyStyleText(this.treeElement.nameElement.textContent+": "+this.treeElement.valueElement.textContent,!1)}function i(n,s,o){return s!==0&&!o.length&&_.CSSMetadata.cssMetadata().isLengthProperty(this.treeElement.property.name)&&!this.treeElement.property.value.toLowerCase().startsWith("calc(")&&(o="px"),n+s+o}return!!(!this.isEditingName&&this.treeElement.valueElement&&U.UIUtils.handleElementValueModifications(e,this.treeElement.valueElement,t.bind(this),this.isValueSuggestion.bind(this),i.bind(this)))}isValueSuggestion(e){return e?(e=e.toLowerCase(),this.cssCompletions.indexOf(e)!==-1||e.startsWith("--")):!1}async buildPropertyCompletions(e,t,i){let n=t.toLowerCase(),s=!this.isEditingName&&e.trim().endsWith("var(");if(this.isEditingName&&e&&/["':;,\s()]/.test(e))return await Promise.resolve([]);if(!t&&!i&&!s&&(this.isEditingName||e))return await Promise.resolve([]);let o=[],a=[];s||(this.cssCompletions.forEach(m=>p.call(this,m,!1)),this.isEditingName&&_.CSSMetadata.cssMetadata().aliasesFor().forEach((m,f)=>{if(f.toLowerCase().indexOf(n)!==0)return;let w={text:f,priority:_.CSSMetadata.cssMetadata().propertyUsageWeight(f),isCSSVariableColor:!1},b={text:m,priority:_.CSSMetadata.cssMetadata().propertyUsageWeight(m),subtitle:`= ${f}`,isCSSVariableColor:!1};o.push(w,b)}));let l=this.treeElement.node();this.isEditingName&&l&&_.CSSMetadata.cssMetadata().nameValuePresets(l.isSVGNode()).forEach(f=>p.call(this,f,!1,!0)),(this.isEditingName||s)&&this.cssVariables.forEach(m=>p.call(this,m,!0));let d=o.concat(a);!this.isEditingName&&!d.length&&t.length>1&&"!important".startsWith(n)&&d.push({text:"!important"});let h=t.replace("-","");if(h&&h===h.toUpperCase())for(let m=0;m<d.length;++m)d[m].text.startsWith("--")||(d[m].text=d[m].text.toUpperCase());for(let m of d){if(s){m.title=m.text,m.text+=")";continue}let f=_.CSSMetadata.cssMetadata().getValuePreset(this.treeElement.name,m.text);!this.isEditingName&&f&&(m.title=m.text,m.text=f.text,m.selectionRange={startColumn:f.startColumn,endColumn:f.endColumn})}let c=async()=>{if(!l||this.selectedNodeComputedStyles)return;this.selectedNodeComputedStyles=await l.domModel().cssModel().getComputedStyle(l.id);let m=l.parentNode;m&&(this.parentNodeComputedStyles=await m.domModel().cssModel().getComputedStyle(m.id))};for(let m of d){await c();let f=_i.CSSPropertyIconResolver.findIcon(this.isEditingName?m.text:`${this.treeElement.property.name}: ${m.text}`,this.selectedNodeComputedStyles,this.parentNodeComputedStyles);if(!f)continue;let T=new wc;T.name=f.iconName,T.classList.add("extra-small"),T.style.transform=`rotate(${f.rotate}deg) scale(${f.scaleX*1.1}, ${f.scaleY*1.1})`,T.style.maxHeight="var(--sys-size-6)",T.style.maxWidth="var(--sys-size-6)",m.iconElement=T}return this.isColorAware&&!this.isEditingName&&d.sort((m,f)=>m.isCSSVariableColor&&f.isCSSVariableColor?0:m.isCSSVariableColor?-1:1),await Promise.resolve(d);function p(m,f,T){let w=m.toLowerCase().indexOf(n),b={text:m,isCSSVariableColor:!1};if(f){let y=this.treeElement.matchedStyles().computeCSSVariable(this.treeElement.property.ownerStyle,m);if(y){let x=Ce.Color.parse(y.value);x?(b.subtitleRenderer=u.bind(null,x),b.isCSSVariableColor=!0):b.subtitleRenderer=g.bind(null,y.value)}}T&&(b.hideGhostText=!0),w===0?(b.priority=this.isEditingName?_.CSSMetadata.cssMetadata().propertyUsageWeight(m):1,o.push(b)):w>-1&&a.push(b)}function u(m){let f=new gs.ColorSwatch.ColorSwatch;return f.renderColor(m),f.style.pointerEvents="none",f}function g(m){let f=document.createElement("span");return f.className="suggestion-subtitle",f.textContent=`${m}`,f.style.maxWidth="100px",f.title=`${m}`,f}}#i(){let e=this.treeElement.section().activeAiSuggestion;if(!e)return;let t=this.text(),i=this.element().getComponentSelection();if(!i||i.rangeCount===0)return;let s=i.getRangeAt(0).endOffset,o=this.#s();if(!o?.startsWith(t)||s<e.cursorPosition){this.setAiAutoCompletion(null);return}let a=this.getCompletionHint();if(!a)return;let l=t+a;if(l&&!o.startsWith(l)){this.setAiAutoCompletion(null);return}}async triggerAiCodeCompletion(){let e=this.element().getComponentSelection();if(!this.aiCodeCompletionProvider||!e||e.rangeCount===0)return;let t=e.getRangeAt(0),i=this.text();if(t.endOffset<i.length)return;let n=this.treeElement.stylesContainer().cssModel();n&&await this.aiCodeCompletionProvider.triggerAiCodeCompletion(i,t.endOffset,this.isEditingName,this.treeElement.property,n)}setAiAutoCompletion(e){if(!e){this.treeElement.section().activeAiSuggestion=void 0,this.activeAiSuggestionInfo=void 0,this.applySuggestion(null);return}this.queryRange||(this.queryRange=new ii.TextRange.TextRange(0,0,0,this.text().length));let t=this.#t(e.text);if(t.length===0){this.treeElement.section().activeAiSuggestion=void 0,this.activeAiSuggestionInfo=void 0;return}let i=t.map(s=>`${s.name}: ${s.value};`).join(" ");this.treeElement.section().activeAiSuggestion={text:i,properties:t,cursorPosition:e.from,clearCachedRequest:e.clearCachedRequest,cssProperty:this.treeElement.property},this.activeAiSuggestionInfo={citations:e.citations,rpcGlobalId:e.rpcGlobalId,sampleId:e.sampleId};let n=performance.now()-e.startTime;e.rpcGlobalId&&e.onImpression(e.rpcGlobalId,n,e.sampleId),U.ARIAUtils.LiveAnnouncer.status(Tc(i))}#t(e){let i=ka.css.cssLanguage.parser.configure({top:"Styles"}).parse(e),n=[];return i.iterate({enter:s=>{if(s.name==="Declaration"){let o="",a="",l=s.node.cursor();if(l.firstChild())do l.name===":"&&(o=e.slice(s.from,l.from),a=e.slice(l.to,s.to));while(l.nextSibling());o&&a&&n.push({name:o.trim(),value:a.trim()})}}}),n}getCompletionHint(){let t=(this.isSuggestBoxVisible()?this.suggestBox?.completion():null)?.text;if(!t)return null;let i=this.text(),n=t;for(let s=Math.min(i.length,t.length);s>0;s--){let o=t.substring(0,s);if(i.endsWith(o)){n=t.slice(s);break}}return n}acceptCodeComplete(){if(this.isSuggestBoxVisible()||this.currentSuggestion()){this.acceptAutoComplete();let e=this.text();if(!this.treeElement.section().activeAiSuggestion?.properties.length)return this.setAiAutoCompletion(null),!1;let t=this.#s();return t?.startsWith(e)?(t!==e&&(this.queryRange=new ii.TextRange.TextRange(0,0,0,e.length),this.applySuggestion({text:t,disableAcceptSuggestionOnStopCharacters:!0},!0)),!0):(this.setAiAutoCompletion(null),!1)}return this.treeElement.section().activeAiSuggestion?(this.commitAiSuggestion(),!0):!1}async commitAiSuggestion(){let e=this.treeElement.section().activeAiSuggestion?.text;await this.treeElement.section().commitActiveAiSuggestion(),this.activeAiSuggestionInfo&&this.aiCodeCompletionProvider?.onSuggestionAccepted(this.activeAiSuggestionInfo.citations,this.activeAiSuggestionInfo.rpcGlobalId,this.activeAiSuggestionInfo.sampleId),e&&U.ARIAUtils.LiveAnnouncer.status(xe(Se.aiSuggestionAccepted,{PH1:e})),this.setAiAutoCompletion(null)}#s(){let e=this.treeElement.section().activeAiSuggestion?.properties[0];return e?this.isEditingName?e.name:e.value:void 0}};function ys(r){let e=/(?<!\\)\\(?:([a-fA-F0-9]{1,6})|(.))[\n\t\x20]?/gs;return r.replace(e,(t,i,n)=>{if(n)return n;let s=parseInt(i,16);return 55296<=s&&s<=57343||s===0||s>1114111?"\uFFFD":String.fromCodePoint(s)})}function Lc(r){let e=new URL(r);return e.search?`${e.origin}${e.pathname}${e.search.replaceAll("*/","*%2F")}${e.hash}`:e.toString()}var To=class{handleAction(e,t){return t==="elements.new-style-rule"?(_e.userMetrics.actionTaken(_e.UserMetrics.Action.NewStyleRuleAdded),D.instance().stylesWidget.createNewRuleInViaInspectorStyleSheet(),!0):!1}},xo,Io=class r{button;constructor(){this.button=U.Toolbar.Toolbar.createActionButton("elements.new-style-rule"),this.button.setLongClickable(!0),new U.UIUtils.LongClickController(this.button.element,this.longClicked.bind(this)),U.Context.Context.instance().addFlavorChangeListener(_.DOMModel.DOMNode,e.bind(this)),e.call(this);function e(){let t=U.Context.Context.instance().flavor(_.DOMModel.DOMNode);t=t?t.enclosingElementOrSelf():null,this.button.setEnabled(!!t)}}static instance(e={forceNew:null}){let{forceNew:t}=e;return(!xo||t)&&(xo=new r),xo}longClicked(e){D.instance().stylesWidget.onAddButtonLongClick(e)}item(){return this.button}};var Ao={cssPropertyName:"`CSS` property name: {PH1}",cssPropertyValue:"`CSS` property value: {PH1}"},Oc=No.i18n.registerUIStrings("panels/elements/PropertyRenderer.ts",Ao),$a=No.i18n.getLocalizedString.bind(void 0,Oc);function Ba(r,e){let t=[...r];return ae.CSSPropertyParser.requiresSpace(r,e)&&t.push(document.createTextNode(" ")),t.push(...e),t}function W(r){class e{matchType=r;render(i,n){return[]}}return e}var vi=class r{static REGISTRY_NAME="css-value-tracing";#e=[];#n=new Map;#i=new Map;#t;#s;#o;constructor(){let e=CSS.highlights.get(r.REGISTRY_NAME);this.#t=e??new Highlight,e||CSS.highlights.set(r.REGISTRY_NAME,this.#t),this.#o=this.#c.bind(this),this.#s=this.#l.bind(this)}addMatch(e,t){if(t.length>0){let i=this.#n.get(e);i?i.push(t):this.#n.set(e,[t])}for(let i of t){let n=this.#i.get(i);n?n.push(e):this.#i.set(i,[e]),i instanceof HTMLElement&&(i.onmouseenter=this.#s,i.onmouseleave=this.#o,i.onfocus=this.#s,i.onblur=this.#o,i.tabIndex=0)}}*#r(e){for(let t of e.composedPath()){let i=this.#i.get(t);if(i){for(let n of i)yield*this.#n.get(n)??[];break}}}#l(e){this.#t.clear(),this.#e.push([]);for(let t of this.#r(e)){let i=new Range,n=t[0],s=t[t.length-1];n.parentNode&&s.parentNode&&(i.setStartBefore(n),i.setEndAfter(s),this.#e[this.#e.length-1].push(i),this.#t.add(i))}}#c(){this.#t.clear(),this.#e.pop(),this.#e.length>0&&this.#e[this.#e.length-1].forEach(e=>this.#t.add(e))}},bi=class r{#e=0;#n;#i=null;#t=0;#s=0;#o=!0;#r;#l;#c=new Map;#p=null;#d;#h=[];expandPercentagesInShorthands;constructor(e,t,i=0,n){this.#l=e,this.#n=n?.hasMatches(ae.CSSPropertyParserMatchers.VariableMatch,ae.CSSPropertyParserMatchers.BaseVariableMatch,ae.CSSPropertyParserMatchers.AttributeMatch,ae.CSSPropertyParserMatchers.EnvFunctionMatch)??!1,this.#d=n?.ast.propertyName??null,this.#r=i,this.expandPercentagesInShorthands=t}get highlighting(){return this.#l}get root(){return this.#p}get propertyName(){return this.#d}get longhandOffset(){return this.#r}renderingContext(e){return new Fe(e.ast,e.property,e.renderers,e.matchedResult,e.cssControls,e.options,this)}nextSubstitution(){return this.#n?(this.#e++,this.#n=!1,this.#h=[],!0):!1}nextEvaluation(){if(this.#n)throw new Error("Need to apply substitutions first");return this.#o?(this.#s=0,this.#o=!1,this.#t++,this.#h=[],!0):!1}#a(e){this.#i&&this.#i.#a(e),this.#o=e}evaluation(e,t=null){return e.map(()=>{let n=new r(this.#l,this.expandPercentagesInShorthands);return n.#i=this,n.#e=this.#e,n.#t=this.#t,n.#n=this.#n,n.#c=this.#c,n.#p=t,n.#d=this.propertyName,n})}#m(e){this.#i&&this.#i.#m(e),this.#s=Math.max(this.#s,e)}applyEvaluation(e,t){if(this.#t===0||e.some(s=>s.#s>=this.#t))return this.#a(!0),e.forEach(s=>this.#h.push(...s.#h)),null;this.#m(e.map(s=>s.#s).reduce((s,o)=>Math.max(s,o),0)+1);let{placeholder:i,asyncEvalCallback:n}=t();return this.#h.push(n),i}#g(){this.#i&&this.#i.#g(),this.#n=!0}substitution(e=null){if(this.#e<=0)return this.#g(),null;let t=new r(this.#l,this.expandPercentagesInShorthands);return t.#i=this,t.#e=this.#e-1,t.#t=this.#t,t.#n=!1,t.#c=this.#c,t.#p=e,t.#h=this.#h,t.#r=this.#r+(e?.context.matchedResult.getComputedLonghandName(e?.match.node)??0),t.#d=this.propertyName,t}cachedParsedValue(e,t,i){let n=this.#c.get(e);if(n?.matchedStyles===t&&n?.computedStyles===i)return n.parsedValue;let s=e.parseValue(t,i);return this.#c.set(e,{matchedStyles:t,computedStyles:i,parsedValue:s}),s}async runAsyncEvaluations(){return(await Promise.all(this.#h.map(t=>t?.()))).some(t=>t!==!1)}},Fe=class{ast;property;renderers;matchedResult;cssControls;options;tracing;signal;constructor(e,t,i,n,s,o={},a,l){this.ast=e,this.property=t,this.renderers=i,this.matchedResult=n,this.cssControls=s,this.options=o,this.tracing=a,this.signal=l}addControl(e,t){if(this.cssControls){let i=this.cssControls.get(e);i?i.push(t):this.cssControls.set(e,[t])}}getComputedLonghandName(e){if(!this.matchedResult.ast.propertyName)return null;let t=ae.CSSMetadata.cssMetadata().getLonghands(this.tracing?.propertyName??this.matchedResult.ast.propertyName);if(!t)return null;let i=this.matchedResult.getComputedLonghandName(e);return t[i+(this.tracing?.longhandOffset??0)]??null}findParent(e,t){for(;e;){let i=this.matchedResult.getMatch(e);if(i instanceof t)return i;e=e.parent}return this.tracing?.root?this.tracing.root.context.findParent(this.tracing.root.match.node,t):null}},A=class r extends ae.CSSPropertyParser.TreeWalker{#e;#n=[];#i;constructor(e,t,i,n,s,o,a,l){super(e),this.#e=n,this.#i=new Fe(this.ast,t,i,this.#e,s,o,a,l)}static render(e,t){if(!Array.isArray(e))return this.render([e],t);let i=new ae.CSSPropertyParser.CSSControlMap;return{nodes:e.map(o=>this.walkExcludingSuccessors(t.ast.subtree(o),t.property,t.renderers,t.matchedResult,i,t.options,t.tracing,t.signal)).map(o=>o.#n).reduce(Ba,[]),cssControls:i}}static renderInto(e,t,i){let{nodes:n,cssControls:s}=this.render(e,t);return i.lastChild&&ae.CSSPropertyParser.requiresSpace([i.lastChild],n)&&i.appendChild(document.createTextNode(" ")),n.map(o=>i.appendChild(o)),{nodes:n,cssControls:s}}renderedMatchForTest(e,t){}enter({node:e}){let t=this.#e.getMatch(e),i=t&&this.#i.renderers.get(t.constructor);if(i||t instanceof ae.CSSPropertyParserMatchers.TextMatch){let n=i?i.render(t,this.#i):t.render();return this.#i.tracing?.highlighting.addMatch(t,n),this.renderedMatchForTest(n,t),this.#n=Ba(this.#n,n),!1}return!0}static renderNameElement(e){let t=document.createElement("span");return t.setAttribute("jslog",`${Ss.key().track({change:!0,keydown:"ArrowLeft|ArrowUp|PageUp|Home|PageDown|ArrowRight|ArrowDown|End|Space|Tab|Enter|Escape"})}`),At.ARIAUtils.setLabel(t,$a(Ao.cssPropertyName,{PH1:e})),t.className="webkit-css-property",t.textContent=e,t.normalize(),t.tabIndex=-1,t}static renderValueElement(e,t,i,n,s){let o=document.createElement("span");o.setAttribute("jslog",`${Ss.value().track({change:!0,keydown:"ArrowLeft|ArrowUp|PageUp|Home|PageDown|ArrowRight|ArrowDown|End|Space|Tab|Enter|Escape"})}`),At.ARIAUtils.setLabel(o,$a(Ao.cssPropertyValue,{PH1:e.value})),o.className="value",o.tabIndex=-1;let{nodes:a,cssControls:l}=this.renderValueNodes(e,t,i,n,s);return a.forEach(d=>o.appendChild(d)),o.normalize(),{valueElement:o,cssControls:l}}static renderValueNodes(e,t,i,n,s){if(!t)return{nodes:[document.createTextNode(e.value)],cssControls:new Map};let o=new Map;for(let l of i)o.set(l.matchType,l);let a=new Fe(t.ast,e instanceof ae.CSSProperty.CSSProperty?e:null,o,t,void 0,{},n,s);return r.render([t.ast.tree,...t.ast.trailingNodes],a)}},wt=class extends W(ae.CSSPropertyParserMatchers.URLMatch){rule;node;constructor(e,t){super(),this.rule=e,this.node=t}render(e){let t=ys(e.url),i=document.createDocumentFragment();At.UIUtils.createTextChild(i,"url(");let n=null;this.rule?.resourceURL()?n=Ha.ParsedURL.ParsedURL.completeURL(this.rule.resourceURL(),t):this.node&&(n=this.node.resolveURL(t));let s=Me.setImageUrl(_a.Linkifier.Linkifier.linkifyURL(n||t,{text:t,preventClick:!1,bypassURLTrimming:!0,showColumnNumber:!1}),n||t);return i.appendChild(s),At.UIUtils.createTextChild(i,")"),[i]}},xt=class extends W(ae.CSSPropertyParserMatchers.StringMatch){render(e){let t=document.createElement("span");return t.innerText=e.text,At.Tooltip.Tooltip.install(t,ys(e.text)),[t]}},Pi=class extends W(ae.CSSPropertyParserMatchers.BinOpMatch){render(e,t){let[i,n,s]=ae.CSSPropertyParser.ASTUtils.children(e.node).map(o=>{let a=document.createElement("span");return A.renderInto(o,t,a),a});return[i,document.createTextNode(" "),n,document.createTextNode(" "),s]}};var{html:ni,render:Rc}=Oo,{bindToSetting:Wa}=Dt.UIUtils,dt={showAll:"Show all",group:"Group",noMatchingProperty:"No matching property",navigateToSelectorSource:"Navigate to selector source",navigateToStyle:"Navigate to styles",filterUpdateAriaText:"Filter applied: {PH1}. Total Results: {PH2}"},kc=Do.i18n.registerUIStrings("panels/elements/ComputedStyleWidget.ts",dt),Nt=Do.i18n.getLocalizedString.bind(void 0,kc);function qa(r,e){return me.CSSPropertyParser.matchDeclaration(r,e,[new me.CSSPropertyParserMatchers.ColorMatcher,new me.CSSPropertyParserMatchers.URLMatcher,new me.CSSPropertyParserMatchers.StringMatcher])}function Uc(r,e,t,i){let n=t+":"+i,s=e.get(n);if(s)return s;let o=A.renderNameElement(t);o.slot="name";let a=A.renderValueElement({name:t,value:i},qa(t,i),[new Cs,new wt(null,r),new xt]).valueElement;return a.slot="value",e.set(n,{name:o,value:a}),{name:o,value:a}}var Fc=(r,e,t,i,n,s,o,a)=>{let{name:l,value:d}=Uc(r,e,t,i);return ni`<devtools-computed-style-property
        .traceable=${n}
        .inherited=${s}
        @oncontextmenu=${a}
        @onnavigatetosource=${h=>{o&&Ya(o,h)}}>
          ${l}
          ${d}
      </devtools-computed-style-property>`},Vc=(r,e,t,i,n)=>{let s=new Ga.ComputedStyleTrace.ComputedStyleTrace,{valueElement:o}=A.renderValueElement(e,qa(e.name,e.value),[new Cs,new wt(null,r),new xt]);o.slot="trace-value",s.appendChild(o);let a=e.ownerStyle.parentRule,l;a&&(l=ue.createRuleOriginNode(i,n,a));let d="element.style";return a?d=a.selectorText():e.ownerStyle.type===me.CSSStyleDeclaration.Type.Animation?d=e.ownerStyle.animationName()?`${e.ownerStyle.animationName()} animation`:"animation style":e.ownerStyle.type===me.CSSStyleDeclaration.Type.Transition&&(d="transitions style"),s.data={selector:d,active:!t,onNavigateToSource:Ya.bind(null,e),ruleOriginNode:l},s},Cs=class extends W(me.CSSPropertyParserMatchers.ColorMatch){render(e,t){let i=Pt.Color.parse(e.text);if(!i)return[document.createTextNode(e.text)];let n=new Po.ColorSwatch.ColorSwatch;n.setReadonly(!0),n.renderColor(i);let s=document.createElement("span");return s.textContent=e.text,n.addEventListener(Po.ColorSwatch.ColorChangedEvent.eventName,o=>{let{data:{color:a}}=o;s.textContent=a.getAuthoredText()??a.asString()}),t.addControl("color",n),[n,s]}matcher(){return new me.CSSPropertyParserMatchers.ColorMatcher}},Ya=(r,e)=>{e&&(Pt.Revealer.reveal(r),e.consume(!0))},$c=(r,e)=>{if(r.startsWith("--")!==e.startsWith("--"))return r.startsWith("--")?1:-1;if(r.startsWith("-webkit")!==e.startsWith("-webkit"))return r.startsWith("-webkit")?1:-1;let t=me.CSSMetadata.cssMetadata().canonicalPropertyName(r),i=me.CSSMetadata.cssMetadata().canonicalPropertyName(e);return Lo.StringUtilities.compare(t,i)},Qa=(r,e,t)=>{Rc(ni`
    <style>${Fr}</style>
    ${r.includeToolbar?ni`
      <div class="styles-sidebar-pane-toolbar">
        <devtools-toolbar class="styles-pane-toolbar" role="presentation">
          <devtools-toolbar-input
            type="filter"
            autofocus
            ?regex=${!0}
            value=${r.filterText}
            @change=${r.onFilterChanged}
            @regextoggle=${r.onRegexToggled}
          ></devtools-toolbar-input>
          <devtools-checkbox
            title=${Nt(dt.showAll)}
            ${Wa(r.showInheritedComputedStylePropertiesSetting)}
          >${Nt(dt.showAll)}</devtools-checkbox>
          <devtools-checkbox
            title=${Nt(dt.group)}
            ${Wa(r.groupComputedStylesSetting)}
          >${Nt(dt.group)}</devtools-checkbox>
        </devtools-toolbar>
      </div>
      `:Oo.nothing}
    ${r.computedStylesTree}
    ${r.hasMatches?"":ni`<div class="gray-info-message">${Nt(dt.noMatchingProperty)}</div>`}
  `,t)},Wi=class extends Dt.Widget.VBox{#e=null;#n=null;#i=null;#t=null;showInheritedComputedStylePropertiesSetting;groupComputedStylesSetting;filterRegex=null;linkifier;imagePreviewPopover;#s=new Map;#o=new za.TreeOutline.TreeOutline;#r;#l=!0;#c;#p="";#d=!1;#h=!0;constructor(e,t=Qa){super(e,{useShadowDom:!0}),this.#c=t,this.contentElement.classList.add("styles-sidebar-computed-style-widget"),this.showInheritedComputedStylePropertiesSetting=Pt.Settings.Settings.instance().createSetting("show-inherited-computed-style-properties",!1),this.showInheritedComputedStylePropertiesSetting.addChangeListener(this.requestUpdate.bind(this)),this.groupComputedStylesSetting=Pt.Settings.Settings.instance().createSetting("group-computed-styles",!1),this.groupComputedStylesSetting.addChangeListener(()=>{this.requestUpdate()}),this.filterRegex=null,this.linkifier=new Ki.Linkifier.Linkifier(Bc),this.imagePreviewPopover=new Me(this.contentElement,i=>{let n=i.composedPath()[0];return n instanceof Element?n:null},async()=>await Ki.ImagePreview.loadPrecomputedFeatures(this.#n?.node)??this.#e??void 0),this.#a({hasMatches:!0})}onResize(){let e=this.#l&&this.contentElement.offsetWidth<260;this.#o.classList.toggle("computed-narrow",e)}get enableNarrowViewResizing(){return this.#l}set enableNarrowViewResizing(e){this.#l=e,this.onResize()}get filterText(){return this.#d?new RegExp(this.#p):this.#p}get filterIsRegex(){return this.#d}set filterText(e){typeof e=="string"?(this.#p=e,this.#d=!1):(this.#p=e.source,this.#d=!0),this.filterRegex=this.#u(this.#p),this.requestUpdate()}get allowUserControl(){return this.#h}set allowUserControl(e){this.#h=e,this.requestUpdate()}#a({hasMatches:e}){this.#c({computedStylesTree:this.#o,includeToolbar:this.#h,hasMatches:e,showInheritedComputedStylePropertiesSetting:this.showInheritedComputedStylePropertiesSetting,groupComputedStylesSetting:this.groupComputedStylesSetting,onFilterChanged:this.onFilterChanged.bind(this),filterText:this.#p,onRegexToggled:this.onRegexToggled.bind(this)},null,this.contentElement)}get nodeStyle(){return this.#n}set nodeStyle(e){this.#n=e,e?this.#m(e.node).then(()=>this.requestUpdate()):this.requestUpdate()}get matchedStyles(){return this.#i}set matchedStyles(e){this.#i=e,this.requestUpdate()}set propertyTraces(e){this.#t=e,this.requestUpdate()}async#m(e){if(e){let t=await Ki.ImagePreview.loadPrecomputedFeatures(e);this.#e=t??null}else this.#e=null}#g(){return this.#h&&this.groupComputedStylesSetting.get()}#f(){return this.#h&&this.showInheritedComputedStylePropertiesSetting.get()}async performUpdate(){let e=this.#n,t=this.#i;if(!e||!t){this.#a({hasMatches:!1});return}this.#g()?await this.rebuildGroupedList(e,t):await this.rebuildAlphabeticalList(e,t)}async rebuildAlphabeticalList(e,t){this.imagePreviewPopover.hide(),this.linkifier.reset();let i=[...e.computedStyle.keys()];i.sort($c);let n=e.node,s=this.#t||new Map,o=this.computeNonInheritedProperties(t),a=this.#f(),l=[];for(let h of i){let c=e.computedStyle.get(h)||"",p=me.CSSMetadata.cssMetadata().canonicalPropertyName(h),u=!o.has(p);!a&&u&&!ja.has(h)||!a&&h.startsWith("--")||h!==p&&c===e.computedStyle.get(p)||l.push(this.buildTreeNode(s,h,c,u))}let d=this.createTreeNodeRenderer(s,n,t);this.#r={tree:l,compact:!0,defaultRenderer:d},this.filterAlphabeticalList()}async rebuildGroupedList(e,t){if(this.imagePreviewPopover.hide(),this.linkifier.reset(),!e||!t){this.#a({hasMatches:!1});return}let i=e.node,n=this.#t||new Map,s=this.computeNonInheritedProperties(t),o=this.showInheritedComputedStylePropertiesSetting.get(),a=new Map,l=[];for(let[h,c]of e.computedStyle){let p=me.CSSMetadata.cssMetadata().canonicalPropertyName(h),u=!s.has(p);if(!o&&u&&!ja.has(h)||!o&&h.startsWith("--")||h!==p&&c===e.computedStyle.get(p))continue;let g=Wr(h);for(let m of g)a.has(m)||a.set(m,[]),a.get(m)?.push(h)}this.#o.removeChildren();for(let h of Kr){let c=a.get(h);if(c&&c.length>0){let p=[];for(let u of c){let g=e.computedStyle.get(u)||"",m=me.CSSMetadata.cssMetadata().canonicalPropertyName(u),f=!s.has(m);p.push(this.buildTreeNode(n,u,g,f))}l.push({id:h,treeNodeData:{tag:"category",name:h},children:async()=>p})}}let d=this.createTreeNodeRenderer(n,i,t);return this.#r={tree:l,compact:!0,defaultRenderer:d},await this.filterGroupLists()}buildTraceNode(e){let t=e.ownerStyle.parentRule;return{treeNodeData:{tag:"traceElement",property:e,rule:t},id:(t?.origin||"")+": "+e.ownerStyle.styleSheetId+(e.range||e.name)}}createTreeNodeRenderer(e,t,i){return n=>{let s=n.treeNodeData;if(s.tag==="property"){let a=e.get(s.propertyName)?.find(d=>i.propertyState(d)==="Active");return Fc(t,this.#s,s.propertyName,s.propertyValue,e.has(s.propertyName),s.inherited,a,d=>{a&&this.handleContextMenuEvent(i,a,d)})}if(s.tag==="traceElement"){let o=i.propertyState(s.property)==="Overloaded",a=Vc(t,s.property,o,i,this.linkifier);return a.addEventListener("contextmenu",this.handleContextMenuEvent.bind(this,i,s.property)),ni`${a}`}return ni`<span style="cursor: text; color: var(--sys-color-on-surface-subtle);">${s.name}</span>`}}buildTreeNode(e,t,i,n){let s={tag:"property",propertyName:t,propertyValue:i,inherited:n},o=e.get(t),a=t.startsWith("--")?"custom-property":t;return o?{treeNodeData:s,jslogContext:a,id:t,children:async()=>o.map(this.buildTraceNode)}:{treeNodeData:s,jslogContext:a,id:t}}handleContextMenuEvent(e,t,i){let n=new Dt.ContextMenu.ContextMenu(i),s=t.ownerStyle.parentRule;if(s){let o=s.header;o&&!o.isAnonymousInlineStyleSheet()&&n.defaultSection().appendItem(Nt(dt.navigateToSelectorSource),()=>{ue.tryNavigateToRuleLocation(e,s)},{jslogContext:"navigate-to-selector-source"})}n.defaultSection().appendItem(Nt(dt.navigateToStyle),()=>Pt.Revealer.reveal(t),{jslogContext:"navigate-to-style"}),n.show()}computeNonInheritedProperties(e){let t=new Set;for(let i of e.nodeStyles())for(let n of i.allProperties())e.propertyState(n)&&t.add(me.CSSMetadata.cssMetadata().canonicalPropertyName(n.name));return t}#u(e){if(!e)return null;if(this.#d)try{return new RegExp(e,"i")}catch{}return new RegExp(Lo.StringUtilities.escapeForRegExp(e),"i")}async onRegexToggled(){this.#d=!this.#d,await this.filterComputedStyles(this.#u(this.#p))}async onFilterChanged(e){this.#p=e.detail,await this.filterComputedStyles(this.#u(e.detail)),e.detail&&this.#o.data&&this.#o.data.tree&&Dt.ARIAUtils.LiveAnnouncer.alert(Nt(dt.filterUpdateAriaText,{PH1:e.detail,PH2:this.#o.data.tree.length}))}async filterComputedStyles(e){return this.filterRegex=e,this.groupComputedStylesSetting.get()?await this.filterGroupLists():this.filterAlphabeticalList()}nodeFilter(e){let t=this.filterRegex,i=e.treeNodeData;return i.tag==="property"?!t||t.test(i.propertyName)||t.test(i.propertyValue):!0}filterAlphabeticalList(){if(!this.#r)return;let e=this.#r.tree.filter(this.nodeFilter.bind(this));this.#o.data={tree:e,defaultRenderer:this.#r.defaultRenderer,compact:this.#r.compact},this.#a({hasMatches:!!e.length})}async filterGroupLists(){if(!this.#r)return;let e=[];for(let t of this.#r.tree){let i=t.treeNodeData;if(i.tag!=="category"||!t.children)continue;let s=(await t.children()).filter(this.nodeFilter.bind(this));s.length&&e.push({id:i.name,treeNodeData:{tag:"category",name:i.name},children:async()=>s})}this.#o.data={tree:e,defaultRenderer:this.#r.defaultRenderer,compact:this.#r.compact},await this.#o.expandRecursively(0),this.#a({hasMatches:!!e.length})}},Bc=30,ja=new Set(["display","height","width"]);var Ja=`#main-content{position:relative;flex:1 1}#elements-content{overflow:auto;padding:2px 0 0;height:100%}.style-panes-wrapper{overflow:hidden scroll;background-color:var(--sys-color-cdt-base-container)}.style-panes-wrapper:not(.computed-styles-pane-wrapper) > div:not(:last-child){border-bottom:1px solid var(--sys-color-divider)}.style-panes-wrapper > div:has(+ .ai-code-completion-summary-toolbar-container){border-bottom:0}.style-panes-wrapper .ai-code-completion-summary-toolbar-container{container-type:inline-size;flex-shrink:0;overflow:hidden;position:fixed;bottom:0;background-color:var(--sys-color-cdt-base-container);width:100%}#elements-content:not(.elements-wrap) > div{display:inline-block;min-width:100%}#elements-crumbs{background-color:var(--sys-color-cdt-base-container);border-top:1px solid var(--sys-color-divider);overflow:hidden;width:100%}devtools-adorner-settings-pane{margin-bottom:10px;border-bottom:1px solid var(--sys-color-divider);overflow:auto}devtools-tree-outline{overflow:auto}.computed-styles-wrapper{flex-shrink:0}
/*# sourceURL=${import.meta.resolve("./elementsPanel.css")} */`;var Bl={};F(Bl,{DEFAULT_VIEW:()=>$l,DOMTreeWidget:()=>en,ElementsTreeOutline:()=>Le,MappedCharToEntity:()=>zo,elementsTreeOutlineStyles:()=>Go});import*as ut from"./../../core/common/common.js";import*as Xo from"./../../core/i18n/i18n.js";import*as P from"./../../core/sdk/sdk.js";import*as Is from"./../../models/badges/badges.js";import*as Ll from"./../../models/elements/elements.js";import*as Ol from"./../../models/issues_manager/issues_manager.js";import*as Rl from"./../../ui/components/code_highlighter/code_highlighter.js";import*as kl from"./../../ui/components/highlighting/highlighting.js";import*as Ul from"./../../ui/components/issue_counter/issue_counter.js";import*as Fl from"./../../ui/legacy/components/utils/utils.js";import*as j from"./../../ui/legacy/legacy.js";import{html as Pl,nothing as dh,render as ch}from"./../../ui/lit/lit.js";import*as Vl from"./../../ui/visual_logging/visual_logging.js";var il={};F(il,{AdoptedStyleSheetContentsTreeElement:()=>Es,AdoptedStyleSheetSetTreeElement:()=>si,AdoptedStyleSheetTreeElement:()=>oi});import*as ji from"./../../core/sdk/sdk.js";import*as Ro from"./../../core/text_utils/text_utils.js";import*as Za from"./../../ui/components/code_highlighter/code_highlighter.js";import*as el from"./../../ui/legacy/components/utils/utils.js";import*as $e from"./../../ui/legacy/legacy.js";import*as tl from"./../../ui/visual_logging/visual_logging.js";import{PanelUtils as Hc}from"./../utils/utils.js";var si=class extends $e.TreeOutline.TreeElement{adoptedStyleSheets;constructor(e){super(""),this.adoptedStyleSheets=e;let t=this.listItemElement.createChild("span");$e.UIUtils.createTextChild(t,"#adopted-style-sheets");for(let i of e)this.appendChild(new oi(i))}},oi=class r extends $e.TreeOutline.TreeElement{adoptedStyleSheet;eventListener=null;constructor(e){super(""),this.adoptedStyleSheet=e;let t=e.cssModel.styleSheetHeaderForId(e.id);t?r.createContents(t,this):this.eventListener=e.cssModel.addEventListener(ji.CSSModel.Events.StyleSheetAdded,this.onStyleSheetAdded,this)}onStyleSheetAdded({data:e}){e.id===this.adoptedStyleSheet.id&&(r.createContents(e,this),this.adoptedStyleSheet.cssModel.removeEventListener(ji.CSSModel.Events.StyleSheetAdded,this.onStyleSheetAdded,this),this.eventListener=null)}static createContents(e,t){let i=t.listItemElement.createChild("span"),n=e.sourceURL;$e.UIUtils.createTextChild(i,"#adopted-style-sheet"+(n?" (":"")),n&&(i.appendChild(el.Linkifier.Linkifier.linkifyURL(n,{text:n,preventClick:!0,showColumnNumber:!1})),$e.UIUtils.createTextChild(i,")")),t.appendChild(new Es(e))}highlight(){Hc.highlightElement(this.listItemElement)}},Es=class extends $e.TreeOutline.TreeElement{styleSheetHeader;editing=null;constructor(e){super(""),this.styleSheetHeader=e}onbind(){this.styleSheetHeader.cssModel().addEventListener(ji.CSSModel.Events.StyleSheetChanged,this.onStyleSheetChanged,this),this.onpopulate()}onunbind(){this.editing&&this.editing.cancel(),this.styleSheetHeader.cssModel().removeEventListener(ji.CSSModel.Events.StyleSheetChanged,this.onStyleSheetChanged,this)}async onpopulate(){let e=await this.styleSheetHeader.requestContentData();if(!Ro.ContentData.ContentData.isError(e)&&e.isTextContent){this.listItemElement.removeChildren();let t=this.listItemElement.createChild("span","webkit-html-text-node webkit-html-css-node");t.setAttribute("jslog",`${tl.value("css-text-node").track({change:!0,dblclick:!0})}`);let i=e.text;t.textContent=i.replace(/^[\n\r]+|\s+$/g,""),Za.CodeHighlighter.highlightNode(t,"text/css")}}onStyleSheetChanged({data:{styleSheetId:e}}){e===this.styleSheetHeader.id&&this.onpopulate()}ondblclick(e){return this.editing||this.startEditing(e.target),!1}onenter(){if(this.editing)return!1;let e=this.listItemElement.querySelector(".webkit-html-text-node");return e?(this.startEditing(e),!0):!1}async startEditing(e){if(this.editing||$e.UIUtils.isBeingEdited(e))return;let t=e.enclosingNodeOrSelfWithClass("webkit-html-text-node");if(!t)return;let i=await this.styleSheetHeader.requestContentData();t.textContent=Ro.ContentData.ContentData.isError(i)||!i.isTextContent?"":i.text;let n=new $e.InplaceEditor.Config(this.editingCommitted.bind(this),()=>this.editingCancelled(),void 0),s=$e.InplaceEditor.InplaceEditor.startEditing(t,n);if(!s)return;this.editing={commit:s.commit,cancel:s.cancel,resize:()=>{}},this.listItemElement.getComponentSelection()?.selectAllChildren(t)}async editingCommitted(e,t,i){this.editing=null,t!==i&&await this.styleSheetHeader.cssModel().setStyleSheetText(this.styleSheetHeader.id,t,!1),this.editingCancelled()}editingCancelled(){this.editing=null,this.onpopulate()}isEditing(){return this.editing!==null}};import*as ko from"./../../core/i18n/i18n.js";import*as vs from"./../../models/issues_manager/issues_manager.js";var ge={formLabelForNameError:"Incorrect use of <label for=FORM_ELEMENT>",formDuplicateIdForInputError:"Duplicate form field id in the same form",formInputWithNoLabelError:"Form field without valid aria-labelledby attribute or associated label",formAutocompleteAttributeEmptyError:"Incorrect use of autocomplete attribute",formEmptyIdAndNameAttributesForInputError:"A form field element should have an id or name attribute",formAriaLabelledByToNonExistingId:"An aria-labelledby attribute doesn\u2019t match any element id",formInputAssignedAutocompleteValueToIdOrNameAttributeError:"An element doesn\u2019t have an autocomplete attribute",formLabelHasNeitherForNorNestedInput:"No label associated with a form field",formLabelForMatchesNonExistingIdError:"Incorrect use of <label for=FORM_ELEMENT>",formInputHasWrongButWellIntendedAutocompleteValueError:"Non-standard autocomplete attribute value",disallowedSelectChild:"Invalid element or text node within <select>",disallowedOptGroupChild:"Invalid element or text node within <optgroup>",nonPhrasingContentOptionChild:"Non-phrasing content used within an <option> element",interactiveContentOptionChild:"Interactive element inside of an <option> element",interactiveContentLegendChild:"Interactive element inside of a <legend> element",interactiveContentAttributesSelectDescendant:"Element with invalid attributes within a <select> element",interactiveContentSummaryDescendant:"Interactive element inside of a <summary> element"},_c=ko.i18n.registerUIStrings("panels/elements/ElementIssueUtils.ts",ge),Ee=ko.i18n.getLocalizedString.bind(void 0,_c);function jt(r){if(r instanceof vs.GenericIssue.GenericIssue){let e=r.details();return{tooltip:Kc(e.errorType),nodeId:e.violatingNodeId,attribute:e.violatingNodeAttribute}}if(r instanceof vs.ElementAccessibilityIssue.ElementAccessibilityIssue){let e=r.details();return r.isInteractiveContentAttributesSelectDescendantIssue()?{tooltip:Ee(ge.interactiveContentAttributesSelectDescendant),nodeId:e.nodeId}:{tooltip:Wc(e.elementAccessibilityIssueReason),nodeId:e.nodeId}}}function Kc(r){switch(r){case"FormLabelForNameError":return Ee(ge.formLabelForNameError);case"FormDuplicateIdForInputError":return Ee(ge.formDuplicateIdForInputError);case"FormInputWithNoLabelError":return Ee(ge.formInputWithNoLabelError);case"FormAutocompleteAttributeEmptyError":return Ee(ge.formAutocompleteAttributeEmptyError);case"FormEmptyIdAndNameAttributesForInputError":return Ee(ge.formEmptyIdAndNameAttributesForInputError);case"FormAriaLabelledByToNonExistingIdError":return Ee(ge.formAriaLabelledByToNonExistingId);case"FormInputAssignedAutocompleteValueToIdOrNameAttributeError":return Ee(ge.formInputAssignedAutocompleteValueToIdOrNameAttributeError);case"FormLabelHasNeitherForNorNestedInputError":return Ee(ge.formLabelHasNeitherForNorNestedInput);case"FormLabelForMatchesNonExistingIdError":return Ee(ge.formLabelForMatchesNonExistingIdError);case"FormInputHasWrongButWellIntendedAutocompleteValueError":return Ee(ge.formInputHasWrongButWellIntendedAutocompleteValueError);default:return""}}function Wc(r){switch(r){case"DisallowedSelectChild":return Ee(ge.disallowedSelectChild);case"DisallowedOptGroupChild":return Ee(ge.disallowedOptGroupChild);case"NonPhrasingContentOptionChild":return Ee(ge.nonPhrasingContentOptionChild);case"InteractiveContentOptionChild":return Ee(ge.interactiveContentOptionChild);case"InteractiveContentLegendChild":return Ee(ge.interactiveContentLegendChild);case"InteractiveContentSummaryDescendant":return Ee(ge.interactiveContentSummaryDescendant);default:return""}}var bl={};F(bl,{DEFAULT_VIEW:()=>Ko,EditTagBlocklist:()=>vl,ElementsTreeElement:()=>ne,ForbiddenClosingTagElements:()=>El,InitialChildrenLimit:()=>Ts,adornerRef:()=>ve,convertUnicodeCharsToHTMLEntities:()=>Ji,isOpeningTag:()=>ri});import"./../../ui/components/adorners/adorners.js";import"./../../ui/components/buttons/buttons.js";import*as Te from"./../../core/common/common.js";import*as Ke from"./../../core/host/host.js";import*as Wo from"./../../core/i18n/i18n.js";import*as ct from"./../../core/platform/platform.js";import*as cl from"./../../core/root/root.js";import*as Z from"./../../core/sdk/sdk.js";import*as ws from"./../../core/text_utils/text_utils.js";import*as hl from"./../../models/ai_assistance/ai_assistance.js";import*as De from"./../../models/badges/badges.js";import*as pl from"./../../models/bindings/bindings.js";import*as ul from"./../../models/workspace/workspace.js";import*as ht from"./../../third_party/codemirror.next/codemirror.next.js";import*as Ho from"./../../ui/components/code_highlighter/code_highlighter.js";import*as zt from"./../../ui/components/highlighting/highlighting.js";import*as Qi from"./../../ui/components/text_editor/text_editor.js";import*as xs from"./../../ui/legacy/components/utils/utils.js";import*as R from"./../../ui/legacy/legacy.js";import*as Lt from"./../../ui/lit/lit.js";import*as G from"./../../ui/visual_logging/visual_logging.js";import*as ml from"./../common/common.js";import*as gl from"./../emulation/emulation.js";import*as fl from"./../media/media.js";import*as O from"./components/components.js";var sl={};F(sl,{Step:()=>Je,canGetJSPath:()=>Uo,cssPath:()=>zi,fullQualifiedSelector:()=>jc,jsPath:()=>Fo,xPath:()=>bs});import*as nl from"./../../core/sdk/sdk.js";var jc=function(r,e){return r.nodeType()!==Node.ELEMENT_NODE?r.localName()||r.nodeName().toLowerCase():zi(r,e)},zi=function(r,e){if(r.nodeType()!==Node.ELEMENT_NODE)return"";let t=[],i=r;for(;i;){let n=zc(i,!!e,i===r);if(!n||(t.push(n),n.optimized))break;i=i.parentNode}return t.reverse(),t.join(" > ")},Uo=function(r){let e=r;for(;e;){let t=e.ancestorShadowRoot();if(t&&t.shadowRootType()!==nl.DOMModel.DOMNode.ShadowRootTypes.Open)return!1;e=e.ancestorShadowHost()}return!0},Fo=function(r,e){if(r.nodeType()!==Node.ELEMENT_NODE)return"";let t=[],i=r;for(;i;)t.push(zi(i,e)),i=i.ancestorShadowHost();t.reverse();let n="";for(let s=0;s<t.length;++s){let o=JSON.stringify(t[s]);s?n+=`.shadowRoot.querySelector(${o})`:n+=`document.querySelector(${o})`}return n},zc=function(r,e,t){if(r.nodeType()!==Node.ELEMENT_NODE)return null;let i=r.getAttribute("id");if(e){if(i)return new Je(a(i),!0);let m=r.nodeName().toLowerCase();if(m==="body"||m==="head"||m==="html")return new Je(r.nodeNameInCorrectCase(),!0)}let n=r.nodeNameInCorrectCase();if(i)return new Je(n+a(i),!0);let s=r.parentNode;if(!s||s.nodeType()===Node.DOCUMENT_NODE)return new Je(n,!0);function o(m){let f=m.getAttribute("class");return f?f.split(/\s+/g).filter(Boolean).map(function(T){return"$"+T}):[]}function a(m){return"#"+CSS.escape(m)}let l=o(r),d=!1,h=!1,c=-1,p=-1,u=s.children();for(let m=0;u&&(c===-1||!h)&&m<u.length;++m){let f=u[m];if(f.nodeType()!==Node.ELEMENT_NODE)continue;if(p+=1,f===r){c=p;continue}if(h||f.nodeNameInCorrectCase()!==n)continue;d=!0;let T=new Set(l);if(!T.size){h=!0;continue}let w=o(f);for(let b=0;b<w.length;++b){let y=w[b];if(T.has(y)&&(T.delete(y),!T.size)){h=!0;break}}}let g=n;if(t&&n.toLowerCase()==="input"&&r.getAttribute("type")&&!r.getAttribute("id")&&!r.getAttribute("class")&&(g+="[type="+CSS.escape(r.getAttribute("type")||"")+"]"),h)g+=":nth-child("+(c+1)+")";else if(d)for(let m of l)g+="."+CSS.escape(m.slice(1));return new Je(g,!1)},bs=function(r,e){if(r.nodeType()===Node.DOCUMENT_NODE)return"/";let t=[],i=r;for(;i;){let n=Gc(i,e);if(!n||(t.push(n),n.optimized))break;i=i.parentNode}return t.reverse(),(t.length&&t[0].optimized?"":"/")+t.join("/")},Gc=function(r,e){let t,i=qc(r);if(i===-1)return null;switch(r.nodeType()){case Node.ELEMENT_NODE:if(e&&r.getAttribute("id"))return new Je('//*[@id="'+r.getAttribute("id")+'"]',!0);t=r.localName();break;case Node.ATTRIBUTE_NODE:t="@"+r.nodeName();break;case Node.TEXT_NODE:case Node.CDATA_SECTION_NODE:t="text()";break;case Node.PROCESSING_INSTRUCTION_NODE:t="processing-instruction()";break;case Node.COMMENT_NODE:t="comment()";break;case Node.DOCUMENT_NODE:t="";break;default:t="";break}return i>0&&(t+="["+i+"]"),new Je(t,r.nodeType()===Node.DOCUMENT_NODE)},qc=function(r){function e(s,o){if(s===o)return!0;if(s.nodeType()===Node.ELEMENT_NODE&&o.nodeType()===Node.ELEMENT_NODE)return s.localName()===o.localName();if(s.nodeType()===o.nodeType())return!0;let a=s.nodeType()===Node.CDATA_SECTION_NODE?Node.TEXT_NODE:s.nodeType(),l=o.nodeType()===Node.CDATA_SECTION_NODE?Node.TEXT_NODE:o.nodeType();return a===l}let t=r.parentNode?r.parentNode.children():null;if(!t)return 0;let i;for(let s=0;s<t.length;++s)if(e(r,t[s])&&t[s]!==r){i=!0;break}if(!i)return 0;let n=1;for(let s=0;s<t.length;++s)if(e(r,t[s])){if(t[s]===r)return n;++n}return-1},Je=class{value;optimized;constructor(e,t){this.value=e,this.optimized=t||!1}toString(){return this.value}};var ll={};F(ll,{GenericDecorator:()=>Gi,getRegisteredDecorators:()=>Bo});import*as Vo from"./../../core/i18n/i18n.js";var $o={domBreakpoint:"DOM Breakpoint",elementIsHidden:"Element is hidden"},Yc=Vo.i18n.registerUIStrings("panels/elements/MarkerDecorator.ts",$o),al=Vo.i18n.getLazilyComputedLocalizedString.bind(void 0,Yc),Gi=class{title;color;constructor(e){if(!e.title||!e.color)throw new Error(`Generic decorator requires a color and a title: ${e.marker}`);this.title=e.title(),this.color=e.color}decorate(e){return{title:this.title,color:this.color}}},ol={marker:"breakpoint-marker",title:al($o.domBreakpoint),color:"var(--sys-color-primary-bright)"},rl={marker:"hidden-marker",title:al($o.elementIsHidden),color:"var(--sys-color-neutral-bright)"};function Bo(){return[{...ol,decorator:()=>new Gi(ol)},{...rl,decorator:()=>new Gi(rl)},{decorator:qi.instance,marker:"pseudo-state-marker"}]}var{html:N,nothing:K,render:Qc,Directives:{ref:We,repeat:Xc}}=Lt,{animateOn:Xi}=R.UIUtils,C={thisElementWasIdentifiedAsAnAd:"This element was identified as an ad",creatorAdScriptAncestry:"Creator ad script ancestry",rootScriptFilterListRule:"Root script filter list rule",filterListRule:"Filter list rule",noProvenanceAvailable:"No provenance data is available",forceState:"Force state",useSInTheConsoleToReferToThis:"Use {PH1} in the console to refer to this element.",addAttribute:"Add attribute",editAttribute:"Edit attribute",focus:"Focus",scrollIntoView:"Scroll into view",switchToAccessibilityTree:"Switch to accessibility tree",editText:"Edit text",editAsHtml:"Edit as HTML",editData:"Edit data",cut:"Cut",copy:"Copy",paste:"Paste",selectAll:"Select all",copyOuterhtml:"Copy outerHTML",copySelector:"Copy `selector`",copyJsPath:"Copy JS path",copyStyles:"Copy styles",copyXpath:"Copy XPath",copyFullXpath:"Copy full XPath",copyElement:"Copy element",duplicateElement:"Duplicate element",hideElement:"Hide element",deleteElement:"Delete element",expandRecursively:"Expand recursively",collapseChildren:"Collapse children",captureNodeScreenshot:"Capture node screenshot",showFrameDetails:"Show `iframe` details",valueIsTooLargeToEdit:"<value is too large to edit>",children:"Children:",enableGridMode:"Enable grid mode",disableGridMode:"Disable grid mode",enableGridLanesMode:"Enable grid-lanes mode",disableGridLanesMode:"Disable grid-lanes mode",forceOpenPopover:"Keep this popover open",stopForceOpenPopover:"Stop keeping this popover open",enableFlexMode:"Enable flex mode",disableFlexMode:"Disable flex mode",enableScrollSnap:"Enable scroll-snap overlay",disableScrollSnap:"Disable scroll-snap overlay",enableContainer:"Enable container overlay",disableContainer:"Disable container overlay",enableStartingStyle:"Enable @starting-style mode",disableStartingStyle:"Disable @starting-style mode",openMediaPanel:"Jump to Media panel",showPopoverTarget:"Show element associated with the `popovertarget` attribute",showInterestTarget:"Show element associated with the `interesttarget` attribute",showCommandForTarget:"Show element associated with the `commandfor` attribute",elementHasScrollableOverflow:"This element has a scrollable overflow",startAChat:"Start a chat",viewSourceCode:"View source code",showCustomElementDefinition:"Show custom element definition",assessVisibility:"Assess visibility",centerElement:"Center element",wrapTheseItems:"Wrap these items",distributeItemsEvenly:"Distribute items evenly",explainFlexbox:"Explain flexbox",alignItems:"Align items",addPadding:"Add padding",explainGridLayout:"Explain grid layout",findGridDefinition:"Find grid definition",changeParentProperties:"Change parent properties",explainSubgrids:"Explain subgrids",removeScrollbars:"Remove scrollbars",styleScrollbars:"Style scrollbars",explainScrollbars:"Explain scrollbars",explainContainerQueries:"Explain container queries",explainContainerTypes:"Explain container types",explainContainerContext:"Explain container context",reveal:"reveal"},Jc=Wo.i18n.registerUIStrings("panels/elements/ElementsTreeElement.ts",C),E=Wo.i18n.getLocalizedString.bind(void 0,Jc);function ri(r){return r.tagType==="OPENING_TAG"}function ve(){let r;return We(e=>{r&&D.instance().deregisterAdorner(r),r=e,r&&(D.instance().isAdornerEnabled(r.name)?r.show():r.hide(),D.instance().registerAdorner(r))})}var Gt="dom-update-highlight";function Ze(r){return e=>{(e.code==="Enter"||e.code==="Space")&&(r(e),e.preventDefault(),e.stopPropagation())}}function Zc(r,e,t,i,n,s,o,a){switch(r.nodeType()){case Node.ATTRIBUTE_NODE:return jo({name:r.name,value:r.value},s,!0,r);case Node.ELEMENT_NODE:{if(r.pseudoType()){let h=r.nodeName(),c=r.pseudoIdentifier();return c&&(h+=`(${c})`),N`<span class="webkit-html-pseudo-element">${h}</span>\u200B`}let l=r.nodeNameInCorrectCase();if(e)return Yi(r,l,!0,t,!0,s);let d=Yi(r,l,!1,t,!1,s);if(i)return t?d:N`${d}<devtools-elements-tree-expand-button .data=${{clickHandler:a}}></devtools-elements-tree-expand-button><span style="font-size: 0;"
                  >…</span>\u200B${Yi(r,l,!0,t,!1,s)}`;if(ne.canShowInlineText(r)){let h=r.firstChild;if(!h)throw new Error("ElementsTreeElement._nodeTitleInfo expects node.firstChild to be defined.");let c=Ji(h.nodeValue()),p=ct.StringUtilities.collapseWhitespace(c.text),u=We(g=>{g&&(g.textContent=p,zt.highlightRangesWithStyleClass(g,c.entityRanges,"webkit-html-entity-value"))});return N`${d}<span class="webkit-html-text-node" jslog=${G.value("text-node").track({change:!0,dblclick:!0})} ${Xi(!!(s?.hasChangedChildren()||s?.isCharDataModified()),Gt)} ${u}></span>\u200B${Yi(r,l,!0,t,!1,s)}`}return n||!El.has(l)?N`${d}${Yi(r,l,!0,t,!1,s)}`:d}case Node.TEXT_NODE:{if(r.parentNode&&r.parentNode.nodeName().toLowerCase()==="script"){let c=r.nodeValue(),p=We(u=>{u&&(u.textContent=c.replace(/^[\n\r]+|\s+$/g,""),Ho.CodeHighlighter.highlightNode(u,"text/javascript").then(o))});return N`<span class="webkit-html-text-node webkit-html-js-node" jslog=${G.value("script-text-node").track({change:!0,dblclick:!0})} ${p}></span>`}if(r.parentNode&&r.parentNode.nodeName().toLowerCase()==="style"){let c=r.nodeValue(),p=We(u=>{u&&(u.textContent=c.replace(/^[\n\r]+|\s+$/g,""),Ho.CodeHighlighter.highlightNode(u,"text/css").then(o))});return N`<span class="webkit-html-text-node webkit-html-css-node" jslog=${G.value("css-text-node").track({change:!0,dblclick:!0})} ${p}></span>`}let l=Ji(r.nodeValue()),d=ct.StringUtilities.collapseWhitespace(l.text),h=We(c=>{c&&(c.textContent=d,zt.highlightRangesWithStyleClass(c,l.entityRanges,"webkit-html-entity-value"))});return N`"<span class="webkit-html-text-node" jslog=${G.value("text-node").track({change:!0,dblclick:!0})} ${Xi(!!s?.isCharDataModified(),Gt)} ${h}></span>"`}case Node.COMMENT_NODE:return N`<span class="webkit-html-comment">&lt;!--${r.nodeValue()}--&gt;</span>`;case Node.DOCUMENT_TYPE_NODE:{let l="<!DOCTYPE "+r.nodeName();return r.publicId?(l+=' PUBLIC "'+r.publicId+'"',r.systemId&&(l+=' "'+r.systemId+'"')):r.systemId&&(l+=' SYSTEM "'+r.systemId+'"'),r.internalSubset&&(l+=" ["+r.internalSubset+"]"),l+=">",N`<span class="webkit-html-doctype">${l}</span>`}case Node.CDATA_SECTION_NODE:return N`<span class="webkit-html-text-node">&lt;![CDATA[${r.nodeValue()}]]&gt;</span>`;case Node.DOCUMENT_NODE:{let l=r.documentURL;return N`<span>#document (<span>${xs.Linkifier.Linkifier.renderLinkifiedUrl(l,{text:l,preventClick:!0,showColumnNumber:!1})}</span>)</span>`}case Node.DOCUMENT_FRAGMENT_NODE:return N`<span class="webkit-html-fragment">${ct.StringUtilities.collapseWhitespace(r.nodeNameInCorrectCase())}</span>`;case Node.PROCESSING_INSTRUCTION_NODE:{let l=r.nodeValue(),d=l?" ":"";return N`<span class="webkit-html-processing-instruction">&lt;?<span
          class="webkit-html-tag-name" jslog=${G.value("tag-name").track({change:!0,dblclick:!0})}>${r.nodeName()}</span>${d}<span class="webkit-html-processing-instruction-value" jslog=${G.value("processing-instruction-value").track({change:!0,dblclick:!0})}>${l}</span>?&gt;</span>`}default:return N`${ct.StringUtilities.collapseWhitespace(r.nodeNameInCorrectCase())}`}}function eh(r,e){return N`${Xc(r,t=>{switch(t.type){case 1:return Cl(t.value,e);case 0:return t.value}})}`}var yl=/[\/;:\)\]\}]/g;function Sl(r,e){let t=0,i=0,n=0,s=Ji(e);i=s.entityRanges.length;let o=s.text.replace(yl,(a,l)=>{for(;t<i&&s.entityRanges[t].offset<l;)s.entityRanges[t].offset+=n,++t;return n+=1,a+"\u200B"});for(;t<i;)s.entityRanges[t].offset+=n,++t;r.setTextContentTruncatedIfNeeded(o),zt.highlightRangesWithStyleClass(r,s.entityRanges,"webkit-html-entity-value")}function Cl(r,e){let t=e?e.resolveURL(r):null;return t===null?N`<span ${We(n=>{n&&Sl(n,r)})}}></span>`:(r=r.replace(yl,"$&\u200B"),r.startsWith("data:")&&(r=ct.StringUtilities.trimMiddle(r,60)),e&&e.nodeName().toLowerCase()==="a"?N`<devtools-link class="devtools-link image-url" href=${t} ${We(n=>{n&&Me.setImageUrl(n,t)})}>${ct.StringUtilities.trimMiddle(r,150)}</devtools-link>`:xs.Linkifier.Linkifier.renderLinkifiedUrl(t,{text:r,preventClick:!0,showColumnNumber:!1,onRef:n=>{Me.setImageUrl(n,t)}}))}var dl=new WeakMap,_o=new WeakMap;function jo(r,e,t,i){let n=r.name,s=r.value||"",o=t,a=n==="popovertarget"||n==="interesttarget"||n==="commandfor",l=o||s.length>0,d=a&&s.length===0,h=a&&s.length>0,c,p="";a&&(n==="popovertarget"?(c="PopoverTarget",p=E(C.showPopoverTarget)):n==="interesttarget"?(c="InterestTarget",p=E(C.showInterestTarget)):n==="commandfor"&&(c="CommandFor",p=E(C.showCommandForTarget)));let u;if(a&&c){let w=dl.get(i);w||(w=new Map,dl.set(i,w));let b=`${c}:${s}`;u=w.get(b);let y=c;u||(u=(async()=>{try{let x=await i.domModel().getElementByRelation(i.id,y),I=i.domModel().nodeForId(x),L=_o.get(i);L||(L=new Map,_o.set(i,L)),L.set(`${n}:${s}`,I||null);let fe=s.length===0,Ie=fe?n:s;if(!I)return Ie;let ke={preventKeyboardFocus:!0,tooltip:p,isDynamicLink:!0};if(fe)ke.textContent=n;else{let Nr=I.getAttribute("id");Nr&&(ke.textContent=Nr)}return ml.DOMLinkifier.Linkifier.instance().linkify(I,ke)}catch{return s.length===0?n:s}})(),w.set(b,u))}let g=i?i.nodeName().toLowerCase():"",m=0;g&&(n==="src"||n==="href")&&s?m=1:((g==="img"||g==="source")&&n==="srcset"||g==="image"&&(n==="xlink:href"||n==="href"))&&(m=2);let f=m===0&&!a?We(w=>{w&&Sl(w,s)}):K,T=G.value(n==="style"?"style-attribute":"attribute").track({change:!0,dblclick:!0});return N`<span class="webkit-html-attribute" jslog=${T}><span class="webkit-html-attribute-name"
      ${Xi(!!(e?.isAttributeModified(n)&&!l),Gt)}>${d&&u?Lt.Directives.until(u,n):n}</span>${l?N`=\u200B"<span class="webkit-html-attribute-value" ${Xi(!!(e?.isAttributeModified(n)&&l),Gt)} ${f}>
                        ${m===1?Cl(s,i):K}
                        ${m===2?eh(Te.Srcset.parseSrcset(s),i):K}
                        ${h&&u?Lt.Directives.until(u,s):K}
                </span>"`:K}</span>`}function Yi(r,e,t,i,n,s){let o={"webkit-html-tag":!0,close:t&&n},a=!1,l=!t&&r.hasAttributes()?r.attributes():[];!t&&s&&(a=s.hasRemovedAttributes()||s.hasRemovedChildren(),a=a||!i&&s.hasChangedChildren());let d=We(u=>{u?.textContent&&R.ARIAUtils.setLabel(u,u.textContent)}),h=t?"webkit-html-close-tag-name":"webkit-html-tag-name",c=(t?"/":"")+e,p=t?"":G.value("tag-name").track({change:!0,dblclick:!0});return N`<span
      class=${Lt.Directives.classMap(o)} ${d}
      >&lt;<span class=${h} jslog=${p||K} ${Xi(a,Gt)}>${c}</span>${l.map(u=>N` ${jo(u,s,!1,r)}`)}&gt;</span>\u200B`}function th(r){return r.adProvenance?N`
    <devtools-adorner
      aria-details=${r.adTooltipId}
      aria-label=${E(C.thisElementWasIdentifiedAsAnAd)}
      .name=${O.AdornerManager.RegisteredAdorners.AD}
      jslog=${G.adorner(O.AdornerManager.RegisteredAdorners.AD)}
      ${ve()}>
      <span>${O.AdornerManager.RegisteredAdorners.AD}</span>
    </devtools-adorner>

    <!--
      Prevent the copy event from bubbling up to the Elements tree outline. Otherwise, DevTools
      copies the underlying DOM node's HTML instead of the user's highlighted text.
    -->
    <devtools-tooltip id=${r.adTooltipId} variant=rich @copy=${e=>e.stopPropagation()}>
      <div class="ad-provenance-tooltip">
        ${r.adProvenance.filterlistRule?N`
          <div class="ad-provenance-tooltip-title">${E(C.filterListRule)}</div>
          <div class="ad-provenance-tooltip-content">${r.adProvenance.filterlistRule}</div>
        `:K}

        ${r.adProvenance.adScriptAncestry&&r.target?N`
          <div class="ad-provenance-tooltip-title">${E(C.creatorAdScriptAncestry)}</div>
          <div class="ad-provenance-tooltip-content">
            ${r.adProvenance.adScriptAncestry.ancestryChain.map(e=>N`
              <div>
                ${R.Widget.widget(xs.Linkifier.ScriptLocationLink,{target:r.target,scriptId:e.scriptId,options:{jslogContext:"ad-script"}})}
              </div>
            `)}
          </div>

          ${r.adProvenance.adScriptAncestry.rootScriptFilterlistRule?N`
            <div class="ad-provenance-tooltip-title">${E(C.rootScriptFilterListRule)}</div>
            <div class="ad-provenance-tooltip-content">
              ${r.adProvenance.adScriptAncestry.rootScriptFilterlistRule}
            </div>
          `:K}
        `:K}

        ${!r.adProvenance.adScriptAncestry&&!r.adProvenance.filterlistRule?N`
            <div class="ad-provenance-tooltip-title">${E(C.noProvenanceAvailable)}</div>
          `:K}
      </div>
    </devtools-tooltip>
  `:K}var Ko=(r,e,t)=>{let i=!!r.adProvenance||r.showContainerAdorner||r.showFlexAdorner||r.showGridAdorner||r.showGridLanesAdorner||r.showMediaAdorner||r.showPopoverAdorner||r.showTopLayerAdorner||r.showViewSourceAdorner||r.showScrollAdorner||r.showScrollSnapAdorner||r.showSlotAdorner||r.showStartingStyleAdorner||r.showCustomElementAdorner,n={"has-decorations":r.decorations.length||r.descendantDecorations.length,"gutter-container":!0,hidden:!!r.editorState};Qc(N`
    <div ${We(s=>{e.contentElement=s})}>
      ${r.node?N`<span class="highlight ${r.editorState?"hidden":""}">${Zc(r.node,r.isClosingTag,r.expanded,r.isExpandable,r.isXMLMimeType,r.updateRecord,r.onHighlightSearchResults,r.onExpand)}</span>`:K}
      ${r.isHovered||r.isSelected?N`
        <div class="selection fill ${r.editorState?"hidden":""}" style=${`margin-left: ${-r.indent}px`}></div>
      `:K}
      <div class=${Lt.Directives.classMap(n)}
           style="left: ${-r.indent}px"
           @click=${r.onGutterClick}>
        <devtools-icon name="dots-horizontal"></devtools-icon>
        ${r.decorations.length||r.descendantDecorations.length?N`
        <div class="elements-gutter-decoration-container"
             title=${r.decorationsTooltip}>
             ${r.decorations.map(s=>N`<div class="elements-gutter-decoration" style="--decoration-color: ${s.color}"></div>`)}
             ${r.descendantDecorations.map(s=>N`<div class="elements-gutter-decoration elements-has-decorated-children" style="--decoration-color: ${s.color}"></div>`)}
        </div>`:K}
      </div>
      ${i?N`<div class="adorner-container ${r.editorState?"hidden":""}">
        ${th(r)}
        ${r.showViewSourceAdorner?N`<devtools-adorner
          .name=${O.AdornerManager.RegisteredAdorners.VIEW_SOURCE}
          jslog=${G.adorner(O.AdornerManager.RegisteredAdorners.VIEW_SOURCE)}
          aria-label=${E(C.viewSourceCode)}
          @click=${r.onViewSourceAdornerClick}
          ${ve()}>
          <span>${O.AdornerManager.RegisteredAdorners.VIEW_SOURCE}</span>
        </devtools-adorner>`:K}
        ${r.showCustomElementAdorner?N`<devtools-adorner
          class="custom-element clickable"
          role=button
          tabindex=0
          .name=${O.AdornerManager.RegisteredAdorners.CUSTOM_ELEMENT}
          jslog=${G.adorner(O.AdornerManager.RegisteredAdorners.CUSTOM_ELEMENT).track({click:!0})}
          aria-label=${E(C.showCustomElementDefinition)}
          @click=${r.onCustomElementAdornerClick}
          @keydown=${Ze(r.onCustomElementAdornerClick)}
          ${ve()}>
          <span>${O.AdornerManager.RegisteredAdorners.CUSTOM_ELEMENT}</span>
        </devtools-adorner>`:K}
        ${r.showContainerAdorner?N`<devtools-adorner
          class=clickable
          role=button
          toggleable=true
          tabindex=0
          .name=${O.AdornerManager.RegisteredAdorners.CONTAINER}
          jslog=${G.adorner(O.AdornerManager.RegisteredAdorners.CONTAINER).track({click:!0})}
          active=${r.containerAdornerActive}
          aria-label=${r.containerAdornerActive?E(C.enableContainer):E(C.disableContainer)}
          @click=${r.onContainerAdornerClick}
          @keydown=${Ze(r.onContainerAdornerClick)}
          ${ve()}>
          <span class="adorner-with-icon">
            <devtools-icon name="container"></devtools-icon>
            <span>${r.containerType}</span>
          </span>
        </devtools-adorner>`:K}
        ${r.showFlexAdorner?N`<devtools-adorner
          class=clickable
          role=button
          toggleable=true
          tabindex=0
          .name=${O.AdornerManager.RegisteredAdorners.FLEX}
          jslog=${G.adorner(O.AdornerManager.RegisteredAdorners.FLEX).track({click:!0})}
          active=${r.flexAdornerActive}
          aria-label=${r.flexAdornerActive?E(C.disableFlexMode):E(C.enableFlexMode)}
          @click=${r.onFlexAdornerClick}
          @keydown=${Ze(r.onFlexAdornerClick)}
          ${ve()}>
          <span>${O.AdornerManager.RegisteredAdorners.FLEX}</span>
        </devtools-adorner>`:K}
        ${r.showGridAdorner?N`<devtools-adorner
          class=clickable
          role=button
          toggleable=true
          tabindex=0
          .name=${r.isSubgrid?O.AdornerManager.RegisteredAdorners.SUBGRID:O.AdornerManager.RegisteredAdorners.GRID}
          jslog=${G.adorner(r.isSubgrid?O.AdornerManager.RegisteredAdorners.SUBGRID:O.AdornerManager.RegisteredAdorners.GRID).track({click:!0})}
          active=${r.gridAdornerActive}
          aria-label=${r.gridAdornerActive?E(C.disableGridMode):E(C.enableGridMode)}
          @click=${r.onGridAdornerClick}
          @keydown=${Ze(r.onGridAdornerClick)}
          ${ve()}>
          <span>${r.isSubgrid?O.AdornerManager.RegisteredAdorners.SUBGRID:O.AdornerManager.RegisteredAdorners.GRID}</span>
        </devtools-adorner>`:K}
        ${r.showGridLanesAdorner?N`<devtools-adorner
          class=clickable
          role=button
          toggleable=true
          tabindex=0
          .name=${O.AdornerManager.RegisteredAdorners.GRID_LANES}
          jslog=${G.adorner(O.AdornerManager.RegisteredAdorners.GRID_LANES).track({click:!0})}
          active=${r.gridAdornerActive}
          aria-label=${r.gridAdornerActive?E(C.disableGridLanesMode):E(C.enableGridLanesMode)}
          @click=${r.onGridAdornerClick}
          @keydown=${Ze(r.onGridAdornerClick)}
          ${ve()}>
          <span>${O.AdornerManager.RegisteredAdorners.GRID_LANES}</span>
        </devtools-adorner>`:K}
        ${r.showMediaAdorner?N`<devtools-adorner
          class=clickable
          role=button
          tabindex=0
          .name=${O.AdornerManager.RegisteredAdorners.MEDIA}
          jslog=${G.adorner(O.AdornerManager.RegisteredAdorners.MEDIA).track({click:!0})}
          aria-label=${E(C.openMediaPanel)}
          @click=${r.onMediaAdornerClick}
          @keydown=${Ze(r.onMediaAdornerClick)}
          ${ve()}>
          <span class="adorner-with-icon">
            ${O.AdornerManager.RegisteredAdorners.MEDIA}<devtools-icon name="select-element"></devtools-icon>
          </span>
        </devtools-adorner>`:K}
        ${r.showPopoverAdorner?N`<devtools-adorner
          class=clickable
          role=button
          toggleable=true
          tabindex=0
          .name=${O.AdornerManager.RegisteredAdorners.POPOVER}
          jslog=${G.adorner(O.AdornerManager.RegisteredAdorners.POPOVER).track({click:!0})}
          active=${r.popoverAdornerActive}
          aria-label=${r.popoverAdornerActive?E(C.stopForceOpenPopover):E(C.forceOpenPopover)}
          @click=${r.onPopoverAdornerClick}
          @keydown=${Ze(r.onPopoverAdornerClick)}
          ${ve()}>
          <span>${O.AdornerManager.RegisteredAdorners.POPOVER}</span>
        </devtools-adorner>`:K}
        ${r.showTopLayerAdorner?N`<devtools-adorner
          class=clickable
          role=button
          tabindex=0
          .name=${O.AdornerManager.RegisteredAdorners.TOP_LAYER}
          jslog=${G.adorner(O.AdornerManager.RegisteredAdorners.TOP_LAYER).track({click:!0})}
          aria-label=${E(C.reveal)}
          @click=${r.onTopLayerAdornerClick}
          @keydown=${Ze(r.onTopLayerAdornerClick)}
          ${ve()}>
          <span class="adorner-with-icon">
            ${`top-layer (${r.topLayerIndex})`}<devtools-icon name="select-element"></devtools-icon>
          </span>
        </devtools-adorner>`:K}
        ${r.showStartingStyleAdorner?N`<devtools-adorner
          class="starting-style"
          .name=${O.AdornerManager.RegisteredAdorners.STARTING_STYLE}
          jslog=${G.adorner(O.AdornerManager.RegisteredAdorners.STARTING_STYLE).track({click:!0})}
          active=${r.startingStyleAdornerActive}
          toggleable=true
          aria-label=${r.startingStyleAdornerActive?E(C.disableStartingStyle):E(C.enableStartingStyle)}
          @click=${r.onStartingStyleAdornerClick}
          @keydown=${Ze(r.onStartingStyleAdornerClick)}
          ${ve()}>
          <span>${O.AdornerManager.RegisteredAdorners.STARTING_STYLE}</span>
        </devtools-adorner>`:K}
        ${r.showScrollAdorner?N`<devtools-adorner
          class="scroll"
          .name=${O.AdornerManager.RegisteredAdorners.SCROLL}
          jslog=${G.adorner(O.AdornerManager.RegisteredAdorners.SCROLL).track({click:!0})}
          aria-label=${E(C.elementHasScrollableOverflow)}
          ${ve()}>
          <span>${O.AdornerManager.RegisteredAdorners.SCROLL}</span>
        </devtools-adorner>`:K}
        ${r.showSlotAdorner?N`<devtools-adorner
          class=clickable
          role=button
          tabindex=0
          .name=${O.AdornerManager.RegisteredAdorners.SLOT}
          jslog=${G.adorner(O.AdornerManager.RegisteredAdorners.SLOT).track({click:!0})}
          @click=${r.onSlotAdornerClick}
          @mousedown=${s=>s.stopPropagation()}
          ${ve()}>
          <span class="adorner-with-icon">
            <devtools-icon name="select-element"></devtools-icon>
            <span>${O.AdornerManager.RegisteredAdorners.SLOT}</span>
          </span>
        </devtools-adorner>`:K}
        ${r.showScrollSnapAdorner?N`<devtools-adorner
          class="scroll-snap"
          .name=${O.AdornerManager.RegisteredAdorners.SCROLL_SNAP}
          jslog=${G.adorner(O.AdornerManager.RegisteredAdorners.SCROLL_SNAP).track({click:!0})}
          active=${r.scrollSnapAdornerActive}
          toggleable=true
          aria-label=${r.scrollSnapAdornerActive?E(C.disableScrollSnap):E(C.enableScrollSnap)}
          @click=${r.onScrollSnapAdornerClick}
          @keydown=${Ze(r.onScrollSnapAdornerClick)}
          ${ve()}>
          <span>${O.AdornerManager.RegisteredAdorners.SCROLL_SNAP}</span>
        </devtools-adorner>`:K}
      </div>`:K}
      ${r.isSelected&&r.canInspect?N`
        <span class="selected-hint ${r.editorState?"hidden":""}" title=${E(C.useSInTheConsoleToReferToThis,{PH1:"$0"})} aria-hidden="true"></span>
      `:K}
      ${r.showAiButton?N`
        <span class="ai-button-container ${r.editorState?"hidden":""}">
          <devtools-floating-button
            icon-name=${hl.AiUtils.getIconName()}
            title=${r.aiButtonTitle||""}
            jslogcontext="ask-ai"
            @click=${r.onAiButtonClick}
            @mousedown=${s=>s.stopPropagation()}>
          </devtools-floating-button>
        </span>
      `:K}
      ${r.editorState?N`<div @keydown=${s=>{s.key==="Escape"&&s.consume(!0)}} class="source-code elements-tree-editor" style="width: ${r.editorWidth??0}px;">
        <devtools-text-editor .state=${r.editorState} ${We(s=>{e.editorRef=s})}></devtools-text-editor>
      </div>`:K}
    </div>
  `,t)},ne=class r extends R.TreeOutline.TreeElement{nodeInternal;treeOutline;searchQuery;#e;decorationsThrottler;inClipboard;#n;editing;#i;#t=!1;#s=null;#o=null;expandAllButtonElement;#r=new Map;#l=new Map;#c=[];tagTypeContext;#p=new Te.Throttler.Throttler(100);#d=!1;#h=!1;#a=!1;#m=!1;#g=!1;#f=!1;#u=null;#C=[];#E=[];#y="";static#x=0;#T=`ad-tooltip-${++r.#x}`;#S=null;#v;constructor(e,t){super(),this.nodeInternal=e,this.treeOutline=null,this.listItemElement.setAttribute("jslog",`${G.treeItem().parent("elementsTreeOutline").track({keydown:"ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Backspace|Delete|Enter|Space|Home|End",resize:!0,drag:!0,click:!0})}`),this.searchQuery=null,this.#e=Ts,this.decorationsThrottler=new Te.Throttler.Throttler(100),this.inClipboard=!1,this.#n=!1,this.editing=null,t?this.tagTypeContext={tagType:"CLOSING_TAG"}:(this.tagTypeContext={tagType:"OPENING_TAG",canAddAttributes:this.nodeInternal.nodeType()===Node.ELEMENT_NODE},this.#w()),this.expandAllButtonElement=null,this.performUpdate(),this.nodeInternal.retained&&!this.isClosingTag()&&(this.setLeadingIcons([N`<devtools-icon class="extra-small" name="small-status-dot" style="color:var(--icon-error); vertical-align:middle"></devtools-icon>`]),this.listItemNode.classList.add("detached-elements-detached-node"),this.listItemNode.style.setProperty("display","-webkit-box"),this.listItemNode.setAttribute("title","Retained Node")),this.nodeInternal.detached&&!this.isClosingTag()&&this.listItemNode.setAttribute("title","Detached Tree Node")}static animateOnDOMUpdate(e){let t=e.listItemElement.querySelector(".webkit-html-tag-name");R.UIUtils.runCSSAnimationOnce(t||e.listItemElement,Gt)}static visibleShadowRoots(e){let t=e.shadowRoots();t.length&&!Te.Settings.Settings.instance().moduleSetting("show-ua-shadow-dom").get()&&(t=t.filter(i));function i(n){return n.shadowRootType()!==Z.DOMModel.DOMNode.ShadowRootTypes.UserAgent}return t}static canShowInlineText(e){return e.contentDocument()||e.templateContent()||r.visibleShadowRoots(e).length||e.hasPseudoElements()||e.nodeType()!==Node.ELEMENT_NODE||!e.firstChild||e.firstChild!==e.lastChild||e.firstChild.nodeType()!==Node.TEXT_NODE?!1:e.firstChild.nodeValue().length<80}static populateForcedPseudoStateItems(e,t){let i=["active","hover","focus","visited","focus-within","focus-visible"],n=t.domModel().cssModel().pseudoState(t),s=e.debugSection().appendSubMenuItem(E(C.forceState),!1,"force-state");for(let a of i){let l=n?n.indexOf(a)>=0:!1;s.defaultSection().appendCheckboxItem(":"+a,o.bind(null,a,!l),{checked:l,jslogContext:a})}function o(a,l){t.domModel().cssModel().forcePseudoState(t,a,l)}}performUpdate(e=!1){if(this.editing&&!this.#s)return;let t={};Ko({node:e?null:this.nodeInternal,isClosingTag:this.isClosingTag(),expanded:this.expanded,isExpandable:this.isExpandable(),isXMLMimeType:!!this.treeOutline?.isXMLMimeType,updateRecord:this.#S,onHighlightSearchResults:()=>this.#P(),onExpand:()=>this.expand(),containerAdornerActive:this.#d,adProvenance:this.nodeInternal.adProvenance(),adTooltipId:this.#T,target:this.nodeInternal.domModel().target(),showContainerAdorner:!!this.#u?.containerType&&!this.isClosingTag(),containerType:this.#u?.containerType,showFlexAdorner:!!this.#u?.isFlex&&!this.isClosingTag(),flexAdornerActive:this.#h,showGridAdorner:!!this.#u?.isGrid&&!this.isClosingTag(),showGridLanesAdorner:!!this.#u?.isGridLanes&&!this.isClosingTag(),showMediaAdorner:this.node().isMediaNode()&&!this.isClosingTag(),showPopoverAdorner:!!cl.Runtime.hostConfig.devToolsAllowPopoverForcing?.enabled&&!!this.node().attributes().find(i=>i.name==="popover")&&!this.isClosingTag(),showTopLayerAdorner:this.node().topLayerIndex()!==-1&&!this.isClosingTag(),gridAdornerActive:this.#a,popoverAdornerActive:this.#m,isSubgrid:!!this.#u?.isSubgrid,showViewSourceAdorner:this.nodeInternal.isRootNode()&&ri(this.tagTypeContext),showScrollAdorner:(this.node().nodeName()==="HTML"&&this.node().ownerDocument?.isScrollable()||this.node().nodeName()!=="#document"&&this.node().isScrollable())&&!this.isClosingTag(),decorations:this.#C,descendantDecorations:this.expanded?[]:this.#E,decorationsTooltip:this.#y,indent:this.computeLeftIndent(),showScrollSnapAdorner:!!this.#u?.hasScroll&&!this.isClosingTag(),scrollSnapAdornerActive:this.#g,showSlotAdorner:!!this.nodeInternal.assignedSlot&&!this.isClosingTag(),showCustomElementAdorner:this.node().isCustomElement()&&!this.isClosingTag(),onCustomElementAdornerClick:this.treeOutline?.disableEdits?()=>{}:i=>{this.#q(i)},showStartingStyleAdorner:this.nodeInternal.affectedByStartingStyles()&&!this.isClosingTag(),startingStyleAdornerActive:this.#f,onStartingStyleAdornerClick:this.treeOutline?.disableEdits?()=>{}:i=>this.#G(i),onSlotAdornerClick:()=>{this.nodeInternal.assignedSlot&&this.nodeInternal.assignedSlot.deferredNode.resolve(n=>{Te.Revealer.reveal(n)})},topLayerIndex:this.node().topLayerIndex(),onViewSourceAdornerClick:this.treeOutline?.disableEdits?()=>{}:this.revealHTMLInSources.bind(this),onGutterClick:this.showContextMenu.bind(this),onContainerAdornerClick:this.treeOutline?.disableEdits?()=>{}:i=>this.#I(i),onFlexAdornerClick:this.treeOutline?.disableEdits?()=>{}:i=>this.#M(i),onGridAdornerClick:this.treeOutline?.disableEdits?()=>{}:i=>this.#A(i),onMediaAdornerClick:this.treeOutline?.disableEdits?()=>{}:i=>this.#N(i),onPopoverAdornerClick:this.treeOutline?.disableEdits?()=>{}:i=>this.#z(i),onScrollSnapAdornerClick:this.treeOutline?.disableEdits?()=>{}:i=>this.#W(i),onTopLayerAdornerClick:this.treeOutline?.disableEdits?()=>{}:()=>{this.treeOutline&&this.treeOutline.revealInTopLayer(this.node())},isHovered:this.#n,isSelected:this.selected,canInspect:this.node().canInspectNode(),showAiButton:!!(this.#n||this.selected)&&this.node().nodeType()===Node.ELEMENT_NODE&&this.isAiButtonEnabled()&&this.treeOutline?.showAIButton,aiButtonTitle:this.isAiButtonEnabled()?R.ActionRegistry.ActionRegistry.instance().getAction("freestyler.elements-floating-button").title():void 0,onAiButtonClick:i=>{i.stopPropagation(),this.select(!0,!1);let n=R.ActionRegistry.ActionRegistry.instance().getAction("freestyler.elements-floating-button");n&&n.execute()},editorState:this.#s,editorWidth:this.#o},t,this.listItemElement),this.#v=t.contentElement,this.#i=t.editorRef,this.#S&&(this.#S=null)}#I(e){e.stopPropagation();let t=this.node(),i=t.id;if(!i)return;let n=t.domModel().overlayModel();n.isHighlightedContainerQueryInPersistentOverlay(i)?(n.hideContainerQueryInPersistentOverlay(i),this.#d=!1):(n.highlightContainerQueryInPersistentOverlay(i),this.#d=!0,De.UserBadges.instance().recordAction(De.BadgeAction.MODERN_DOM_BADGE_CLICKED)),this.updateAdorners()}#M(e){e.stopPropagation();let t=this.node(),i=t.id;if(!i)return;let n=t.domModel().overlayModel();n.isHighlightedFlexContainerInPersistentOverlay(i)?(n.hideFlexContainerInPersistentOverlay(i),this.#h=!1):(n.highlightFlexContainerInPersistentOverlay(i),this.#h=!0,De.UserBadges.instance().recordAction(De.BadgeAction.MODERN_DOM_BADGE_CLICKED)),this.updateAdorners()}#A(e){e.stopPropagation();let t=this.node(),i=t.id;if(!i)return;let n=t.domModel().overlayModel();n.isHighlightedGridInPersistentOverlay(i)?(n.hideGridInPersistentOverlay(i),this.#a=!1):(n.highlightGridInPersistentOverlay(i),this.#a=!0,this.#u?.isSubgrid&&De.UserBadges.instance().recordAction(De.BadgeAction.MODERN_DOM_BADGE_CLICKED)),this.updateAdorners()}async#N(e){e.stopPropagation(),await R.ViewManager.ViewManager.instance().showView("medias");let t=R.ViewManager.ViewManager.instance().view("medias");if(t){let i=await t.widget();i instanceof fl.MainView.MainView&&(await i.waitForInitialPlayers(),i.selectPlayerByDOMNodeId(this.node().backendNodeId()))}}highlightAttribute(e){let t=this.listItemElement.querySelector(".webkit-html-tag-name")??this.listItemElement;if(this.nodeInternal.getAttribute(e)!==void 0){let n=this.listItemElement.getElementsByClassName("webkit-html-tag")[0].getElementsByClassName("webkit-html-attribute");for(let s of n){let o=s.getElementsByClassName("webkit-html-attribute-name")[0];if(o.textContent===e){t=o;break}}}R.UIUtils.runCSSAnimationOnce(t,Gt)}isClosingTag(){return!ri(this.tagTypeContext)}isDisplayContents(){return!!this.#u?.isContents}node(){return this.nodeInternal}isEditing(){return!!this.editing}highlightSearchResults(e){this.searchQuery=e,this.editing||this.#P()}hideSearchHighlights(){zt.HighlightManager.HighlightManager.instance().removeHighlights(this.#c),this.#c=[]}setInClipboard(e){this.inClipboard!==e&&(this.inClipboard=e,this.listItemElement.classList.toggle("in-clipboard",e))}get hovered(){return this.#n}set hovered(e){this.#n!==e&&(this.#n=e,this.listItemElement&&(e?this.listItemElement.classList.add("hovered"):this.listItemElement.classList.remove("hovered"),this.performUpdate()))}addIssue(e){this.#r.has(e.primaryKey())||(this.#r.set(e.primaryKey(),e),this.#b(e))}#b(e){let t=jt(e);t&&(t.attribute?this.#$(t.attribute,e):this.#B(e))}get issuesByNodeElement(){return this.#l}#$(e,t){let n=this.listItemElement.getElementsByClassName("webkit-html-tag")[0].getElementsByClassName("webkit-html-attribute");for(let s of n)if(s.getElementsByClassName("webkit-html-attribute-name")[0].textContent===e){let o=s.getElementsByClassName("webkit-html-attribute-name")[0];o.classList.add("violating-element"),this.#D(o,t)}}#B(e){let t=this.listItemElement.getElementsByClassName("webkit-html-tag-name")[0];t.classList.add("violating-element"),this.#D(t,e)}#D(e,t){let i=this.#l.get(e);i||(i=[],this.#l.set(e,i)),i.push(t),this.treeOutline?.updateNodeElementToIssue(e,i)}removeIssue(e){this.#r.has(e.primaryKey())&&(this.#H(e),this.#r.delete(e.primaryKey()))}#H(e){let t=jt(e);t&&(t.attribute?this.#_(t.attribute,e):this.#K(e))}#_(e,t){let i=this.listItemElement.querySelectorAll(".webkit-html-attribute-name.violating-element");for(let n of i)n.textContent===e&&(this.#L(n,t),this.#l.has(n)||n.classList.remove("violating-element"))}#K(e){let t=this.listItemElement.getElementsByClassName("webkit-html-tag-name")[0];t&&(this.#L(t,e),this.#l.has(t)||t.classList.remove("violating-element"))}#L(e,t){let i=this.#l.get(e);i&&(i=i.filter(n=>n!==t),i.length===0?this.#l.delete(e):this.#l.set(e,i),this.treeOutline?.updateNodeElementToIssue(e,i))}expandedChildrenLimit(){return this.#e}setExpandedChildrenLimit(e){this.#e=e}onTopLayerIndexChanged(){this.performUpdate()}onbind(){this.performUpdate(),this.treeOutline&&!this.isClosingTag()&&(this.treeOutline.treeElementByNode.set(this.nodeInternal,this),this.nodeInternal.addEventListener(Z.DOMModel.DOMNodeEvents.TOP_LAYER_INDEX_CHANGED,this.onTopLayerIndexChanged,this),this.nodeInternal.addEventListener(Z.DOMModel.DOMNodeEvents.SCROLLABLE_FLAG_UPDATED,this.#O,this),this.nodeInternal.addEventListener(Z.DOMModel.DOMNodeEvents.AD_RELATED_STATE_UPDATED,this.#R,this),this.nodeInternal.addEventListener(Z.DOMModel.DOMNodeEvents.CONTAINER_QUERY_OVERLAY_STATE_CHANGED,this.#k,this),this.nodeInternal.addEventListener(Z.DOMModel.DOMNodeEvents.FLEX_CONTAINER_OVERLAY_STATE_CHANGED,this.#U,this),this.nodeInternal.addEventListener(Z.DOMModel.DOMNodeEvents.GRID_OVERLAY_STATE_CHANGED,this.#F,this),this.nodeInternal.addEventListener(Z.DOMModel.DOMNodeEvents.SCROLL_SNAP_OVERLAY_STATE_CHANGED,this.#V,this))}clearView(){Ko({node:null,isClosingTag:!1,expanded:!1,isExpandable:!1,isXMLMimeType:!1,updateRecord:null,onHighlightSearchResults:()=>{},onExpand:()=>{},containerAdornerActive:!1,adProvenance:void 0,target:void 0,adTooltipId:"",showContainerAdorner:!1,containerType:this.#u?.containerType,showFlexAdorner:!1,flexAdornerActive:!1,showGridAdorner:!1,showGridLanesAdorner:!1,showMediaAdorner:!1,showPopoverAdorner:!1,showTopLayerAdorner:!1,gridAdornerActive:!1,popoverAdornerActive:!1,isSubgrid:!1,showViewSourceAdorner:!1,showScrollAdorner:!1,showScrollSnapAdorner:!1,scrollSnapAdornerActive:!1,showSlotAdorner:!1,showCustomElementAdorner:!1,showStartingStyleAdorner:!1,startingStyleAdornerActive:!1,onStartingStyleAdornerClick:()=>{},onSlotAdornerClick:()=>{},onCustomElementAdornerClick:()=>{},topLayerIndex:-1,onViewSourceAdornerClick:()=>{},onGutterClick:()=>{},onContainerAdornerClick:()=>{},onFlexAdornerClick:()=>{},onGridAdornerClick:()=>{},onMediaAdornerClick:()=>{},onPopoverAdornerClick:()=>{},onScrollSnapAdornerClick:()=>{},onTopLayerAdornerClick:()=>{},isHovered:!1,isSelected:!1,canInspect:!1,showAiButton:!1,onAiButtonClick:()=>{},decorations:[],descendantDecorations:[],decorationsTooltip:"",indent:0,editorState:null,editorWidth:null},{},this.listItemElement)}onunbind(){this.editing&&this.editing.cancel(),this.clearView(),this.treeOutline&&this.treeOutline.treeElementByNode.get(this.nodeInternal)===this&&this.treeOutline.treeElementByNode.delete(this.nodeInternal),this.nodeInternal.removeEventListener(Z.DOMModel.DOMNodeEvents.TOP_LAYER_INDEX_CHANGED,this.onTopLayerIndexChanged,this),this.nodeInternal.removeEventListener(Z.DOMModel.DOMNodeEvents.SCROLLABLE_FLAG_UPDATED,this.#O,this),this.nodeInternal.removeEventListener(Z.DOMModel.DOMNodeEvents.AD_RELATED_STATE_UPDATED,this.#R,this),this.nodeInternal.removeEventListener(Z.DOMModel.DOMNodeEvents.CONTAINER_QUERY_OVERLAY_STATE_CHANGED,this.#k,this),this.nodeInternal.removeEventListener(Z.DOMModel.DOMNodeEvents.FLEX_CONTAINER_OVERLAY_STATE_CHANGED,this.#U,this),this.nodeInternal.removeEventListener(Z.DOMModel.DOMNodeEvents.GRID_OVERLAY_STATE_CHANGED,this.#F,this),this.nodeInternal.removeEventListener(Z.DOMModel.DOMNodeEvents.SCROLL_SNAP_OVERLAY_STATE_CHANGED,this.#V,this)}#O(){this.#w()}#R(){this.#w()}#k(e){this.#d=e.data.enabled,this.performUpdate()}#U(e){this.#h=e.data.enabled,this.performUpdate()}#F(e){this.#a=e.data.enabled,this.performUpdate()}#V(e){this.#g=e.data.enabled,this.performUpdate()}#W(e){e.stopPropagation();let t=this.node(),i=t.id;if(!i)return;let n=t.domModel().overlayModel();this.#g?n.hideScrollSnapInPersistentOverlay(i):n.highlightScrollSnapInPersistentOverlay(i)}onattach(){this.#n&&(this.listItemElement.classList.add("hovered"),this.performUpdate()),this.updateTitle(),this.listItemElement.draggable=!0}async onpopulate(){if(this.treeOutline)return await this.treeOutline.populateTreeElement(this)}async expandRecursively(){await this.nodeInternal.getSubtree(100,!0),await super.expandRecursively(Number.MAX_VALUE)}onexpand(){this.isClosingTag()||this.updateTitle()}oncollapse(){this.isClosingTag()||this.updateTitle()}select(e,t){return this.editing?!1:super.select(e,t)}onselect(e){return this.treeOutline?(this.treeOutline.suppressRevealAndSelect=!0,this.treeOutline.selectDOMNode(this.nodeInternal,e),e&&(this.nodeInternal.highlight(),Ke.userMetrics.actionTaken(Ke.UserMetrics.Action.ChangeInspectedNodeInElementsPanel)),this.performUpdate(),this.treeOutline.suppressRevealAndSelect=!1,!0):!1}ondelete(){if(!this.treeOutline)return!1;let e=this.treeOutline.findTreeElement(this.nodeInternal);return e?e.remove():this.remove(),!0}onenter(){return this.editing?!1:(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.nodeInternal.isShadowRoot()&&!this.nodeInternal.ancestorUserAgentShadowRoot()}insertInLastAttributePosition(e,t){if(e.getElementsByClassName("webkit-html-attribute").length>0)e.insertBefore(t,e.lastChild);else if(e.textContent!==null){let i=e.textContent.match(/^<(.*?)>$/);if(!i)return;let n=i[1];e.textContent="",R.UIUtils.createTextChild(e,"<"+n),e.appendChild(t),R.UIUtils.createTextChild(e,">")}}startEditingTarget(e){if(!this.treeOutline||this.treeOutline.selectedDOMNode()!==this.nodeInternal||this.nodeInternal.nodeType()!==Node.ELEMENT_NODE&&this.nodeInternal.nodeType()!==Node.TEXT_NODE&&this.nodeInternal.nodeType()!==Node.PROCESSING_INSTRUCTION_NODE)return!1;let t=e.enclosingNodeOrSelfWithClass("webkit-html-text-node")??e.enclosingNodeOrSelfWithClass("webkit-html-processing-instruction-value");if(t)return this.startEditingTextNode(t);let i=e.enclosingNodeOrSelfWithClass("webkit-html-attribute");if(i)return this.startEditingAttribute(i,e);let n=e.enclosingNodeOrSelfWithClass("webkit-html-tag-name");return n?this.startEditingTagName(n):e.enclosingNodeOrSelfWithClass("add-attribute")?this.addNewAttribute():!1}showContextMenu(e){this.treeOutline&&this.treeOutline.showContextMenu(this,e)}revealHTMLInSources(){let e=this.nodeInternal.frameOwnerFrameId();if(e){let t=Z.FrameManager.FrameManager.instance().getFrame(e);if(t){let i=ul.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(t.url);Te.Revealer.reveal(i)}}}async populateTagContextMenu(e,t){let i=this.isClosingTag()&&this.treeOutline?this.treeOutline.findTreeElement(this.nodeInternal):this;if(!i)return;e.editSection().appendItem(E(C.addAttribute),i.addNewAttribute.bind(i),{jslogContext:"add-attribute"});let n=t.target,s=n.enclosingNodeOrSelfWithClass("webkit-html-attribute"),o=n.enclosingNodeOrSelfWithClass("add-attribute");s&&!o&&e.editSection().appendItem(E(C.editAttribute),this.startEditingAttribute.bind(this,s,n),{jslogContext:"edit-attribute"}),await this.populateNodeContextMenu(e),r.populateForcedPseudoStateItems(e,i.node()),this.populateScrollIntoView(e),e.viewSection().appendItem(E(C.focus),async()=>{await this.nodeInternal.focus()},{jslogContext:"focus"})}populatePseudoElementContextMenu(e){this.childCount()!==0&&this.populateExpandRecursively(e),this.populateScrollIntoView(e)}populateExpandRecursively(e){e.viewSection().appendItem(E(C.expandRecursively),this.expandRecursively.bind(this),{jslogContext:"expand-recursively"})}populateScrollIntoView(e){e.viewSection().appendItem(E(C.scrollIntoView),()=>this.nodeInternal.scrollIntoView(),{jslogContext:"scroll-into-view"})}isAiButtonEnabled(){return R.ActionRegistry.ActionRegistry.instance().hasAction("freestyler.elements-floating-button")}async populateTextContextMenu(e,t){return this.editing||e.editSection().appendItem(E(C.editText),this.startEditingTextNode.bind(this,t),{jslogContext:"edit-text"}),await this.populateNodeContextMenu(e)}async populateNodeContextMenu(e){let t=this.hasEditableNode();t&&!this.editing&&e.editSection().appendItem(E(C.editAsHtml),this.editAsHTML.bind(this),{jslogContext:"elements.edit-as-html"});let i=this.nodeInternal.isShadowRoot(),n=R.KeyboardShortcut.KeyboardShortcut.shortcutToString.bind(null),s=R.KeyboardShortcut.Modifiers.CtrlOrMeta.value,o=this.treeOutline;if(!o)return;let a,l="freestyler.element-panel-context";if(R.ActionRegistry.ActionRegistry.instance().hasAction(l)){let p=function(w,b,y,x,I){w.defaultSection().appendItem(y,()=>{b.execute({prompt:x}),R.UIUtils.PromotionManager.instance().recordFeatureInteraction(l)},{disabled:!b.enabled(),jslogContext:I})};R.Context.Context.instance().setFlavor(Z.DOMModel.DOMNode,this.nodeInternal);let u=R.ActionRegistry.ActionRegistry.instance().getAction(l),g=e.footerSection().appendSubMenuItem(u.title(),!1,l);g.defaultSection().appendAction(l,E(C.startAChat));let m=[{condition:w=>!!w?.isFlex,items:[{label:E(C.wrapTheseItems),prompt:"How can I make flex items wrap?",jslogContextSuffix:".flex-wrap"},{label:E(C.distributeItemsEvenly),prompt:"How do I distribute flex items evenly?",jslogContextSuffix:".flex-distribute"},{label:E(C.explainFlexbox),prompt:"What is flexbox?",jslogContextSuffix:".flex-what"}]},{condition:w=>!!(w?.isGrid&&!w?.isSubgrid),items:[{label:E(C.alignItems),prompt:"How do I align items in a grid?",jslogContextSuffix:".grid-align"},{label:E(C.addPadding),prompt:"How to add spacing between grid items?",jslogContextSuffix:".grid-gap"},{label:E(C.explainGridLayout),prompt:"How does grid layout work?",jslogContextSuffix:".grid-how"}]},{condition:w=>!!w?.isSubgrid,items:[{label:E(C.findGridDefinition),prompt:"Where is this grid defined?",jslogContextSuffix:".subgrid-where"},{label:E(C.changeParentProperties),prompt:"How to overwrite parent grid properties?",jslogContextSuffix:".subgrid-override"},{label:E(C.explainSubgrids),prompt:"How do subgrids work?",jslogContextSuffix:".subgrid-how"}]},{condition:w=>!!w?.hasScroll,items:[{label:E(C.removeScrollbars),prompt:"How do I remove scrollbars for this element?",jslogContextSuffix:".scroll-remove"},{label:E(C.styleScrollbars),prompt:"How can I style a scrollbar?",jslogContextSuffix:".scroll-style"},{label:E(C.explainScrollbars),prompt:"Why does this element scroll?",jslogContextSuffix:".scroll-why"}]},{condition:w=>!!w?.containerType,items:[{label:E(C.explainContainerQueries),prompt:"What are container queries?",jslogContextSuffix:".container-what"},{label:E(C.explainContainerTypes),prompt:"How do I use container-type?",jslogContextSuffix:".container-how"},{label:E(C.explainContainerContext),prompt:"What's the container context for this element?",jslogContextSuffix:".container-context"}]},{condition:()=>!0,items:[{label:E(C.assessVisibility),prompt:"Why isn\u2019t this element visible?",jslogContextSuffix:".visibility"},{label:E(C.centerElement),prompt:"How do I center this element?",jslogContextSuffix:".center"}]}],f=await this.nodeInternal.domModel().cssModel().getLayoutPropertiesFromComputedStyle(this.nodeInternal.id),T=m.find(w=>w.condition(f));if(T)for(let w of T.items)p(g,u,w.label,w.prompt,l+w.jslogContextSuffix)}a=e.clipboardSection().appendItem(E(C.cut),o.performCopyOrCut.bind(o,!0,this.nodeInternal),{disabled:!this.hasEditableNode(),jslogContext:"cut"}),a.setShortcut(n("X",s));let d=e.clipboardSection().appendSubMenuItem(E(C.copy),!1,"copy"),h=d.section();if(i||(a=h.appendItem(E(C.copyOuterhtml),o.performCopyOrCut.bind(o,!1,this.nodeInternal),{jslogContext:"copy-outer-html"}),a.setShortcut(n("V",s))),this.nodeInternal.nodeType()===Node.ELEMENT_NODE&&(h.appendItem(E(C.copySelector),this.copyCSSPath.bind(this),{jslogContext:"copy-selector"}),h.appendItem(E(C.copyJsPath),this.copyJSPath.bind(this),{disabled:!Uo(this.nodeInternal),jslogContext:"copy-js-path"}),h.appendItem(E(C.copyStyles),this.copyStyles.bind(this),{jslogContext:"elements.copy-styles"})),i||(h.appendItem(E(C.copyXpath),this.copyXPath.bind(this),{jslogContext:"copy-xpath"}),h.appendItem(E(C.copyFullXpath),this.copyFullXPath.bind(this),{jslogContext:"copy-full-xpath"})),a=d.clipboardSection().appendItem(E(C.copyElement),o.performCopyOrCut.bind(o,!1,this.nodeInternal,!0),{jslogContext:"copy-element"}),a.setShortcut(n("C",s)),!i){let p=!this.nodeInternal.parentNode||this.nodeInternal.parentNode.nodeName()==="#document";a=e.editSection().appendItem(E(C.duplicateElement),o.duplicateNode.bind(o,this.nodeInternal),{disabled:this.nodeInternal.isInShadowTree()||p,jslogContext:"elements.duplicate-element"})}a=e.clipboardSection().appendItem(E(C.paste),o.pasteNode.bind(o,this.nodeInternal),{disabled:!o.canPaste(this.nodeInternal),jslogContext:"paste"}),a.setShortcut(n("V",s)),a=e.debugSection().appendCheckboxItem(E(C.hideElement),o.toggleHideElement.bind(o,this.nodeInternal),{checked:o.isToggledToHidden(this.nodeInternal),jslogContext:"elements.hide-element"}),a.setShortcut(R.ShortcutRegistry.ShortcutRegistry.instance().shortcutTitleForAction("elements.hide-element")||""),t&&e.editSection().appendItem(E(C.deleteElement),this.remove.bind(this),{jslogContext:"delete-element"}),this.populateExpandRecursively(e),e.viewSection().appendItem(E(C.collapseChildren),this.collapseChildren.bind(this),{jslogContext:"collapse-children"}),e.viewSection().appendItem(E(C.switchToAccessibilityTree),()=>D.instance().toggleAccessibilityTree(),{jslogContext:"switch-to-accessibility-tree"});let c=new gl.DeviceModeWrapper.ActionDelegate;e.viewSection().appendItem(E(C.captureNodeScreenshot),c.handleAction.bind(null,R.Context.Context.instance(),"emulation.capture-node-screenshot"),{jslogContext:"emulation.capture-node-screenshot"}),this.nodeInternal.frameOwnerFrameId()&&e.viewSection().appendItem(E(C.showFrameDetails),()=>{let p=this.nodeInternal.frameOwnerFrameId();if(p){let u=Z.FrameManager.FrameManager.instance().getFrame(p);Te.Revealer.reveal(u)}},{jslogContext:"show-frame-details"})}async populateProcessingElementContextMenu(e){let t=this.treeOutline;t&&(e.editSection().appendItem(E(C.editData),this.startEditingProcessingInstructionValue.bind(this),{jslogContext:"elements.edit-data"}),e.editSection().appendItem(E(C.duplicateElement),t.duplicateNode.bind(t,this.nodeInternal),{disabled:this.nodeInternal.isInShadowTree(),jslogContext:"elements.duplicate-element"}),e.editSection().appendItem(E(C.deleteElement),this.remove.bind(this),{jslogContext:"delete-element"}))}startEditing(){if(!this.treeOutline||this.treeOutline.selectedDOMNode()!==this.nodeInternal)return;let e=this.listItemElement;if(ri(this.tagTypeContext)&&this.tagTypeContext.canAddAttributes){let t=e.getElementsByClassName("webkit-html-attribute")[0];return t?this.startEditingAttribute(t,t.getElementsByClassName("webkit-html-attribute-value")[0]):this.addNewAttribute()}if(this.nodeInternal.nodeType()===Node.TEXT_NODE){let t=e.getElementsByClassName("webkit-html-text-node")[0];if(t)return this.startEditingTextNode(t)}if(this.nodeInternal.nodeType()===Node.PROCESSING_INSTRUCTION_NODE)return this.startEditingProcessingInstructionValue()}startEditingProcessingInstructionValue(){let e=this.listItemElement.getElementsByClassName("webkit-html-processing-instruction-value")[0];if(e)return this.startEditingTextNode(e)}addNewAttribute(){let e=document.createDocumentFragment();Lt.render(jo({name:" ",value:""},null,!1,this.nodeInternal),e);let t=e.firstElementChild;t.style.marginLeft="2px",t.style.marginRight="2px",t.setAttribute("jslog",`${G.value("new-attribute").track({change:!0,resize:!0})}`);let i=this.listItemElement.getElementsByClassName("webkit-html-tag")[0];return this.insertInLastAttributePosition(i,t),t.scrollIntoViewIfNeeded(!0),this.startEditingAttribute(t,t)}triggerEditAttribute(e){let 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 s=t[i].nextSibling;s;s=s.nextSibling)if(s.nodeType===Node.ELEMENT_NODE&&s.classList.contains("webkit-html-attribute-value"))return this.startEditingAttribute(s.parentElement,s)}}startEditingAttribute(e,t){if(console.assert(this.listItemElement.isAncestor(e)),R.UIUtils.isBeingEdited(e))return!0;let i=e.getElementsByClassName("webkit-html-attribute-name")[0];if(!i)return!1;let n=i.textContent,s=e.getElementsByClassName("webkit-html-attribute-value")[0];t=s?.isAncestor(t)?s:t;function o(p){if(p.nodeType===Node.TEXT_NODE){p.nodeValue=p.nodeValue?p.nodeValue.replace(/\u200B/g,""):"";return}if(p.nodeType===Node.ELEMENT_NODE)for(let u=p.firstChild;u;u=u.nextSibling)o(u)}let a=n&&s?this.nodeInternal.getAttribute(n)?.replaceAll('"',"&quot;"):void 0;if((n==="popovertarget"||n==="interesttarget"||n==="commandfor")&&n&&s){let p=this.nodeInternal.getAttribute(n)||"",u=_o.get(this.nodeInternal)?.get(`${n}:${p}`);u&&(a=u.getAttribute("id")||"")}a!==void 0&&s.setTextContentTruncatedIfNeeded(a,E(C.valueIsTooLargeToEdit)),o(e);let d=new R.InplaceEditor.Config(this.attributeEditingCommitted.bind(this),this.editingCancelled.bind(this),n);function h(p){return R.UIUtils.handleElementValueModifications(p,e),""}return Te.ParsedURL.ParsedURL.fromString(s?.textContent||"")||d.setPostKeydownFinishHandler(h),this.updateEditorHandles(e,d),this.listItemElement.getComponentSelection()?.selectAllChildren(t),!0}startEditingTextNode(e){if(R.UIUtils.isBeingEdited(e))return!0;let t=this.nodeInternal;t.nodeType()===Node.ELEMENT_NODE&&t.firstChild&&(t=t.firstChild);let i=e.enclosingNodeOrSelfWithClass("webkit-html-text-node");i&&(i.textContent=t.nodeValue());let n=new R.InplaceEditor.Config(this.textNodeEditingCommitted.bind(this,t),this.editingCancelled.bind(this),null);return this.updateEditorHandles(e,n),this.listItemElement.getComponentSelection()?.selectAllChildren(e),!0}startEditingTagName(e){if(!e&&(e=this.listItemElement.getElementsByClassName("webkit-html-tag-name")[0],!e))return!1;let t=e.textContent;if(t!==null&&vl.has(t.toLowerCase()))return!1;if(R.UIUtils.isBeingEdited(e))return!0;let i=this.distinctClosingTagElement();function n(){i&&e&&(i.textContent="</"+e.textContent+">")}let s=h=>{h.key===" "&&(this.editing?.commit(),h.consume(!0))};function o(h,c,p,u,g){e&&(e.removeEventListener("keyup",n,!1),e.removeEventListener("keydown",s,!1),this.tagNameEditingCommitted(h,c,p,u,g))}function a(h,c){e&&(e.removeEventListener("keyup",n,!1),e.removeEventListener("keydown",s,!1),this.editingCancelled(h,c))}e.addEventListener("keyup",n,!1),e.addEventListener("keydown",s,!1);let l=new R.InplaceEditor.Config(o.bind(this),a.bind(this),t);return this.updateEditorHandles(e,l),this.listItemElement.getComponentSelection()?.selectAllChildren(e),!0}updateEditorHandles(e,t){let i=R.InplaceEditor.InplaceEditor.startEditing(e,t);i?this.editing={commit:i.commit,cancel:i.cancel,resize:()=>{}}:this.editing=null}async startEditingAsHTML(e,t,i){if(i===null||this.editing)return;this.childrenListElement&&(this.childrenListElement.style.display="none");let n=Ji(i).text;this.#s=ht.EditorState.create({doc:n,extensions:[ht.keymap.of([{key:"Mod-Enter",run:()=>(this.editing?.commit(),!0)},{key:"Escape",run:()=>(this.editing?.cancel(),!0)}]),Qi.Config.baseConfiguration(n),Qi.Config.closeBrackets.instance(),Qi.Config.autocompletion.instance(),ht.html.html({autoCloseTags:!1,selfClosingTags:!0}),Qi.Config.domWordWrap.instance(),ht.EditorView.theme({"&.cm-editor":{maxHeight:"300px"},".cm-scroller":{overflowY:"auto"}}),ht.EditorView.domEventHandlers({focusout:l=>{if(!this.#i||this.#t)return;let d=l.relatedTarget;d&&!d.isSelfOrDescendant(this.#i)&&this.editing?.commit()},contextmenu:(l,d)=>{l.consume(!0);let{from:h,to:c,empty:p}=d.state.selection.main,u=()=>Ke.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(d.state.sliceDoc(h,c)),g=new R.ContextMenu.ContextMenu(l,{onSoftMenuClosed:()=>{this.#t=!1}});return g.clipboardSection().appendItem(E(C.cut),()=>{u(),d.dispatch({changes:{from:h,to:c,insert:""}}),d.focus()},{disabled:p,jslogContext:"cut"}),g.clipboardSection().appendItem(E(C.copy),()=>{u(),d.focus()},{disabled:p,jslogContext:"copy"}),g.clipboardSection().appendItem(E(C.paste),()=>{navigator.clipboard.readText().then(m=>{d.dispatch(d.state.replaceSelection(m)),d.focus()})},{jslogContext:"paste"}),g.editSection().appendItem(E(C.selectAll),()=>{d.dispatch({selection:{anchor:0,head:d.state.doc.length}}),d.focus()},{jslogContext:"select-all"}),this.#t=!0,g.show(),!0}})]}),this.performUpdate(),s.call(this),this.#i?.focus(),this.editing={commit:o.bind(this),cancel:a.bind(this),resize:s.bind(this)},this.treeOutline?.setMultilineEditing(this.editing);function s(){this.treeOutline&&(this.#o=this.treeOutline.visibleWidth()-this.computeLeftIndent()-30,this.performUpdate())}function o(){this.#i&&e(n,this.#i.editor.state.doc.toString()),a.call(this)}function a(){this.#i&&(this.editing=null,this.#s=null,this.performUpdate(),this.childrenListElement&&this.childrenListElement.style.removeProperty("display"),this.treeOutline&&(this.treeOutline.setMultilineEditing(null),this.treeOutline.focus()),t())}}attributeEditingCommitted(e,t,i,n,s){this.editing=null;let o=this.treeOutline;function a(l){if(l&&this.editingCancelled(e,n),!s)return;o&&(o.runPendingUpdates(),o.focus());let d=this.nodeInternal.attributes();for(let h=0;h<d.length;++h)if(d[h].name===n){s==="backward"?h===0?this.startEditingTagName():this.triggerEditAttribute(d[h-1].name):h===d.length-1?this.addNewAttribute():this.triggerEditAttribute(d[h+1].name);return}s==="backward"?t===" "?d.length>0&&this.triggerEditAttribute(d[d.length-1].name):d.length>1&&this.triggerEditAttribute(d[d.length-2].name):s==="forward"&&(ct.StringUtilities.isWhitespace(t)?this.startEditingTagName():this.addNewAttribute())}if(n!==null&&(n.trim()||t.trim())&&i!==t){this.nodeInternal.setAttribute(n,t,a.bind(this)),De.UserBadges.instance().recordAction(De.BadgeAction.DOM_ELEMENT_OR_ATTRIBUTE_EDITED);return}this.updateTitle(),a.call(this)}tagNameEditingCommitted(e,t,i,n,s){this.editing=null;let o=this;function a(){let c=o.distinctClosingTagElement();c&&(c.textContent="</"+n+">"),o.editingCancelled(e,n),l.call(o)}function l(){if(this.nodeInternal.nodeType()===Node.PROCESSING_INSTRUCTION_NODE){this.startEditingProcessingInstructionValue();return}if(s!=="forward"){this.addNewAttribute();return}let c=this.nodeInternal.attributes();c.length>0?this.triggerEditAttribute(c[0].name):this.addNewAttribute()}if(t=t.trim(),t===i){a();return}let d=this.treeOutline,h=this.expanded;this.nodeInternal.setNodeName(t,(c,p)=>{if(c||!p){a();return}if(!d)return;De.UserBadges.instance().recordAction(De.BadgeAction.DOM_ELEMENT_OR_ATTRIBUTE_EDITED);let u=d.selectNodeAfterEdit(h,c,p);l.call(u)})}textNodeEditingCommitted(e,t,i){this.editing=null;function n(){this.updateTitle()}e.setNodeValue(i,n.bind(this))}editingCancelled(e,t){this.editing=null,this.updateTitle()}distinctClosingTagElement(){if(this.expanded){let t=this.childrenListElement.querySelectorAll(".close");return t[t.length-1]}let e=this.listItemElement.getElementsByClassName("webkit-html-tag");return e.length===1?null:e[e.length-1]}updateTitle(e){if(!this.editing){if(this.performUpdate(!0),this.#S=e??null,this.nodeInternal.nodeType()===Node.DOCUMENT_FRAGMENT_NODE&&this.nodeInternal.isInShadowTree()&&this.nodeInternal.shadowRootType()){this.childrenListElement.classList.add("shadow-root");let t=4;for(let i=this.nodeInternal;t&&i;i=i.parentNode)i.nodeType()===Node.DOCUMENT_FRAGMENT_NODE&&t--;t?this.childrenListElement.classList.add("shadow-root-depth-"+t):this.childrenListElement.classList.add("shadow-root-deep")}this.performUpdate(),this.#v&&(this.title=this.#v),this.updateDecorations();for(let t of this.#r.values())this.#b(t);this.#P()}}computeLeftIndent(){let e=this.parent,t=0;for(;e!==null;)t++,e=e.parent;return 12*(t-2)+(this.isExpandable()&&this.isCollapsible()?1:12)}updateDecorations(){this.listItemElement.style.setProperty("--indent",this.computeLeftIndent()+"px"),!this.isClosingTag()&&this.nodeInternal.nodeType()===Node.ELEMENT_NODE&&this.decorationsThrottler.schedule(this.#j.bind(this))}#j(){if(!this.treeOutline)return Promise.resolve();let e=this.nodeInternal;this.treeOutline.decoratorExtensions||(this.treeOutline.decoratorExtensions=Bo());let t=new Map;for(let d of this.treeOutline.decoratorExtensions)t.set(d.marker,d);let i=[],n=[],s=[];e.traverseMarkers(o);function o(d,h){let c=t.get(h);c&&i.push(Promise.resolve(c.decorator()).then(a.bind(null,d)))}function a(d,h){let c=h.decorate(d);c&&(d===e?n:s).push(c)}return Promise.all(i).then(l.bind(this));function l(){if(this.#C=n,this.#E=s,!n.length&&!s.length){this.#y="",this.performUpdate();return}let d=[];for(let h of n)d.push(h.title);if(!this.expanded&&s.length){d.push(E(C.children));for(let h of s)d.push(h.title)}this.#y=d.join(`
`),this.performUpdate()}}async remove(){this.treeOutline?.isToggledToHidden(this.nodeInternal)&&await this.treeOutline.toggleHideElement(this.nodeInternal),!(this.nodeInternal.pseudoType()||!this.parent)&&(!this.nodeInternal.parentNode||this.nodeInternal.parentNode.nodeType()===Node.DOCUMENT_NODE||this.nodeInternal.removeNode())}toggleEditAsHTML(e,t){if(this.editing&&this.#s){this.editing.commit();return}if(t===!1)return;function i(a){e&&e(!a)}function n(a,l){a!==l&&o.setOuterHTML(l,i)}function s(){e&&e(!1)}let o=this.nodeInternal;o.getOuterHTML().then(this.startEditingAsHTML.bind(this,n,s))}copyCSSPath(){Ke.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(zi(this.nodeInternal,!0))}copyJSPath(){Ke.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(Fo(this.nodeInternal,!0))}copyXPath(){Ke.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(bs(this.nodeInternal,!0))}copyFullXPath(){Ke.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(bs(this.nodeInternal,!1))}async copyStyles(){let e=this.nodeInternal,i=await e.domModel().cssModel().cachedMatchedCascadeForNode(e);if(!i)return;let n=Te.Settings.Settings.instance().moduleSetting("text-editor-indent").get(),s=[];for(let o of i.nodeStyles().reverse())for(let a of o.leadingProperties())!a.parsedOk||a.disabled||!a.activeInStyle()||a.implicit||i.isInherited(o)&&!Z.CSSMetadata.cssMetadata().isPropertyInherited(a.name)||o.parentRule?.isUserAgent()||i.propertyState(a)==="Active"&&s.push(`${n}${a.name}: ${a.value};`);Ke.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(s.join(`
`))}#P(){if(this.hideSearchHighlights(),!this.searchQuery)return;let e=this.listItemElement.textContent||"",t=ct.StringUtilities.createPlainTextSearchRegex(this.searchQuery,"gi"),i=[],n=t.exec(e);for(;n;)i.push(new ws.TextRange.SourceRange(n.index,n[0].length)),n=t.exec(e);i.length||i.push(new ws.TextRange.SourceRange(0,e.length)),this.#c=zt.HighlightManager.HighlightManager.instance().highlightOrderedTextRanges(this.listItemElement,i)}editAsHTML(){Te.Revealer.reveal(this.node()).then(()=>R.ActionRegistry.ActionRegistry.instance().getAction("elements.edit-as-html").execute())}updateAdorners(){this.#p.schedule(this.#w.bind(this))}async#w(){if(this.isClosingTag())return;let e=this.node(),t=e.id;e.nodeType()!==Node.COMMENT_NODE&&e.nodeType()!==Node.DOCUMENT_FRAGMENT_NODE&&e.nodeType()!==Node.TEXT_NODE&&t!==void 0?this.#u=await e.domModel().cssModel().getLayoutPropertiesFromComputedStyle(t):this.#u=null,this.performUpdate()}async#z(e){e.stopPropagation();let t=this.node(),i=t.id;i&&(await t.domModel().agent.invoke_forceShowPopover({nodeId:i,enable:!this.#m}),this.#m=!this.#m,this.#m&&De.UserBadges.instance().recordAction(De.BadgeAction.MODERN_DOM_BADGE_CLICKED),this.performUpdate())}#G(e){e.stopPropagation();let t=this.node();if(!t.id)return;let n=t.domModel().cssModel();this.#f?n.forceStartingStyle(t,!1):n.forceStartingStyle(t,!0),this.#f=!this.#f,this.performUpdate()}async#q(e){e.stopPropagation();let i=await this.node().resolveToObject("");if(!i)return;let n=null;try{n=(await i.callFunction(function(){let o=this.getAttribute("is")||this.tagName.toLowerCase();return typeof customElements<"u"&&customElements.get(o)||this.constructor})).object}finally{i.release()}if(n)try{if(n.type==="function"){let s=await Z.RemoteObject.RemoteFunction.objectAsFunction(n).targetFunctionDetails();if(s?.location){let o=await pl.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().rawLocationToUILocation(s.location);o&&Te.Revealer.reveal(o)}}}finally{n.release()}}},Ts=500,El=new Set(["area","base","basefont","br","canvas","col","command","embed","frame","hr","img","input","keygen","link","menuitem","meta","param","source","track","wbr"]),vl=new Set(["html","head","body"]);function Ji(r){let e="",t=0,i=[],n=zo;for(let s=0,o=r.length;s<o;++s){let a=r.charAt(s);if(n.has(a)){e+=r.substring(t,s);let l="&"+n.get(a)+";";i.push(new ws.TextRange.SourceRange(e.length,l.length)),e+=l,t=s+1}}return e&&(e+=r.substring(t)),{text:e||r,entityRanges:i}}function ih(r){return R.TreeOutline.TreeElement.getTreeElementBylistItemNode(r)?.treeOutline?.contentElement}G.registerParentProvider("elementsTreeOutline",ih);var Go=`.editing{box-shadow:var(--drop-shadow);background-color:var(--sys-color-cdt-base-container);text-overflow:clip!important;padding-left:2px;margin-left:-2px;padding-right:2px;margin-right:-2px;margin-bottom:-1px;padding-bottom:1px;opacity:100%!important}.editing,
.editing *{color:var(--sys-color-on-surface)!important;text-decoration:none!important}.editing br{display:none}.adorner-reveal{vertical-align:middle;margin:0 3px}.adorner-with-icon{display:flex;justify-content:center;align-items:center;overflow:hidden;height:100%;devtools-icon{width:var(--sys-size-6);height:var(--sys-size-6);color:var(--icon-primary)}}.adorner-with-icon *:not(:last-child){margin-right:2px}.elements-disclosure{width:100%;display:inline-block;line-height:normal}.elements-disclosure li{padding:1px 0 0 14px;margin-left:-2px;word-break:normal;position:relative;min-height:15px;line-height:1.36;min-width:200px}.elements-disclosure li::after{content:"";position:absolute;inset:0;left:calc(var(--indent) * -1);width:var(--indent)}.elements-disclosure li.parent{display:flex}.elements-disclosure li.parent:not(.always-parent){margin-left:-12px}.elements-disclosure li .ai-button-container{display:none;margin-left:1ch;overflow:visible;max-height:var(--sys-size-6);vertical-align:top;margin-top:-1px;position:absolute;right:var(--sys-size-3);bottom:5px;z-index:999}.elements-disclosure .elements-tree-outline:not(.hide-selection-when-blurred) li.hovered .ai-button-container{display:inline-flex}.elements-disclosure li .selected-hint::before{font-style:italic;content:" == $0";opacity:0%;position:absolute;white-space:pre}.elements-disclosure .elements-tree-outline:not(.hide-selection-when-blurred) li.selected .selected-hint::before{position:static;opacity:60%}.elements-disclosure li.parent:not(.always-parent)::before{box-sizing:border-box;user-select:none;mask-image:var(--image-file-arrow-collapse);height:14px;width:14px;content:"\\A0\\A0";color:transparent;text-shadow:none;margin:-3px var(--sys-size-2) 0 -3px;background-color:var(--icon-default)}.elements-disclosure li.parent.expanded::before{mask-image:var(--image-file-arrow-drop-down)}.elements-disclosure li .selection{display:none;z-index:-1}.elements-disclosure li.selected .selection{display:block}.elements-disclosure li.elements-drag-over .selection{display:block;margin-top:-2px;border-top:2px solid var(--sys-color-primary)}.elements-disclosure .elements-tree-outline:not(.hide-selection-when-blurred) .selection{background-color:var(--sys-color-neutral-container)}.elements-disclosure li.hovered:not(.selected) .selection{display:block;left:3px;right:3px;background-color:var(--sys-color-state-hover-on-subtle);border-radius:5px}.elements-disclosure li .webkit-html-tag.close{margin-left:-12px}.elements-disclosure .elements-tree-outline.hide-selection-when-blurred .selected:focus-visible .highlight > *{background:var(--sys-color-state-focus-highlight);border-radius:2px;outline:2px solid var(--sys-color-state-focus-ring)}.elements-disclosure .elements-tree-outline:not(.hide-selection-when-blurred) li.selected:focus .selection{background-color:var(--sys-color-tonal-container)}.elements-disclosure ol{list-style-type:none;padding-inline-start:12px;margin:0}.elements-disclosure ol.children{display:none;min-width:100%}.elements-disclosure ol.children.expanded{display:inline-block}.elements-disclosure > ol{position:relative;margin:0;min-width:100%;min-height:100%;padding-left:2px}.elements-disclosure li.in-clipboard .highlight{outline:1px dotted var(--sys-color-divider)}.elements-tree-outline ol.shadow-root-deep{background-color:transparent}.elements-tree-editor{box-shadow:var(--drop-shadow);margin-right:4px}button,
input,
select{font-family:inherit;font-size:inherit}.elements-gutter-decoration{height:9px;width:9px;border-radius:5px;border:1px solid var(--decoration-color);background-color:var(--decoration-color)}.elements-gutter-decoration-container{display:flex;position:absolute;top:0;left:1px;width:15px;height:15px;align-items:center}.elements-gutter-decoration + .elements-gutter-decoration{margin-left:-6px}.elements-gutter-decoration.elements-has-decorated-children{opacity:50%}.add-attribute{margin-left:1px;margin-right:1px;white-space:nowrap}.elements-tree-nowrap,
.elements-tree-nowrap .li{white-space:pre!important}.elements-disclosure .elements-tree-nowrap li{overflow-wrap:normal}@keyframes dom-update-highlight-animation{0%{background-color:var(--sys-color-token-tag);color:var(--sys-color-cdt-base-container)}80%{background-color:var(--sys-color-token-meta)}100%{background-color:inherit}}@keyframes dom-update-highlight-animation-dark{0%{background-color:var(--sys-color-token-tag);color:var(--sys-color-cdt-base-container)}80%{background-color:var(--sys-color-cdt-base-container);color:inherit}100%{background-color:inherit}}.dom-update-highlight{animation:dom-update-highlight-animation 1.4s 1 cubic-bezier(0,0,0.2,1);border-radius:2px}:host-context(.theme-with-dark-background) .dom-update-highlight{animation:dom-update-highlight-animation-dark 1.4s 1 cubic-bezier(0,0,0.2,1)}.elements-disclosure.single-node li{padding-left:2px}.elements-tree-shortcut-title,
.elements-tree-shortcut-link{color:var(--sys-color-token-subtle)}.elements-disclosure .gutter-container{position:absolute;top:0;left:0;width:15px;height:15px;z-index:1}.elements-hide-gutter .gutter-container{display:none}.gutter-container > devtools-icon{display:block;visibility:hidden;position:relative;left:-1px;width:16px;height:16px}.elements-disclosure li.selected .gutter-container:not(.has-decorations) > devtools-icon{visibility:visible}li.hovered:not(.always-parent) + ol.children,
.elements-tree-outline ol.shadow-root,
li.selected:not(.always-parent) + ol.children{background:linear-gradient(to right,var(--override-indentation-level-border-color),var(--override-indentation-level-border-color) 0.5px,transparent 0);background-position-x:5px;background-size:0.5px 100%;background-repeat:no-repeat}li.selected:not(.always-parent) + ol.children{--override-indentation-level-border-color:var(--sys-color-divider)!important}li.hovered:not(.always-parent) + ol.children:not(.shadow-root){--override-indentation-level-border-color:color-mix(in srgb,var(--ref-palette-neutral0) 10%,transparent)}.elements-tree-outline ol.shadow-root{--override-indentation-level-border-color:var(--ref-palette-orange95)}@media (forced-colors: active){.elements-disclosure li.parent::before{forced-color-adjust:none;background-color:ButtonText!important}.elements-disclosure .elements-tree-outline:not(.hide-selection-when-blurred) li.selected .selected-hint::before{opacity:unset}.elements-disclosure .elements-tree-outline:not(.hide-selection-when-blurred) .selection,
  .elements-disclosure li.hovered:not(.selected) .selection,
  .elements-disclosure .elements-tree-outline:not(.hide-selection-when-blurred) li.selected:focus .selection{forced-color-adjust:none;background:canvas!important;border:1px solid Highlight!important}.gutter-container > devtools-icon{forced-color-adjust:none}}.violating-element{background-image:var(--image-file-errorWave);background-repeat:repeat-x;background-position:bottom;padding-bottom:1px}.ad-provenance-tooltip{user-select:text}.ad-provenance-tooltip-title{color:var(--sys-color-on-surface-subtle);margin-top:4px}.ad-provenance-tooltip-title:first-child{margin-top:0}.ad-provenance-tooltip-content{padding-left:16px}.elements-disclosure.elements-tree-truncated{max-height:calc(var(--max-rows) * 1.36em + 5px);overflow:hidden}.elements-tree-show-all{border:none;color:var(--sys-color-primary);cursor:pointer;display:block;font-size:12px;padding:4px 12px;text-align:center;width:100%}.elements-tree-show-all.hidden{display:none}
/*# sourceURL=${import.meta.resolve("./elementsTreeOutline.css")} */`;import*as wl from"./../../core/common/common.js";import*as Yo from"./../../core/i18n/i18n.js";import*as xl from"./../../ui/legacy/legacy.js";import*as nh from"./../../ui/lit/lit.js";import*as Tl from"./../../ui/visual_logging/visual_logging.js";import*as qo from"./components/components.js";var{html:sh,render:oh}=nh,Il={reveal:"reveal"},rh=Yo.i18n.registerUIStrings("panels/elements/ShortcutTreeElement.ts",Il),ah=Yo.i18n.getLocalizedString.bind(void 0,rh),lh=(r,e,t)=>{oh(sh`
    <div class="selection fill"></div>
    <span class="elements-tree-shortcut-title">\u21AA ${r.title}</span>
    <devtools-adorner
      .name=${qo.AdornerManager.RegisteredAdorners.REVEAL}
      class="adorner-reveal"
      jslog=${Tl.adorner("reveal")}
      aria-label=${ah(Il.reveal)}
      @click=${r.onRevealAdornerClick}
      @mousedown=${i=>i.consume()}
      ${ve()}>
      <span class="adorner-with-icon">
        <devtools-icon name="select-element"></devtools-icon>
        <span>${qo.AdornerManager.RegisteredAdorners.REVEAL}</span>
      </span>
    </devtools-adorner>
  `,t)},pt=class extends xl.TreeOutline.TreeElement{nodeShortcut;#e;#n;constructor(e,t=lh){super(""),this.nodeShortcut=e,this.#n=t,this.performUpdate()}get hovered(){return!!this.#e}set hovered(e){this.#e!==e&&(this.#e=e,this.listItemElement.classList.toggle("hovered",e))}deferredNode(){return this.nodeShortcut.deferredNode}domModel(){return this.nodeShortcut.deferredNode.domModel()}setLeftIndentOverlay(){let e=24;if(this.parent&&this.parent instanceof ne){let t=parseFloat(this.parent.listItemElement.style.getPropertyValue("--indent"))||0;e+=t}this.listItemElement.style.setProperty("--indent",e+"px")}onattach(){this.setLeftIndentOverlay()}onselect(e){if(!e)return!0;this.nodeShortcut.deferredNode.highlight(),this.nodeShortcut.deferredNode.resolve(t.bind(this));function t(i){i&&this.treeOutline instanceof Le&&(this.treeOutline.selectedDOMNodeInternal=i,this.treeOutline.selectedNodeChanged(!1))}return!0}onRevealAdornerClick(e){e.stopPropagation(),this.nodeShortcut.deferredNode.resolve(t=>{wl.Revealer.reveal(t)})}performUpdate(){let e=this.nodeShortcut.nodeName.toLowerCase();this.nodeShortcut.nodeType===Node.ELEMENT_NODE&&(e="<"+e+">"),this.#n({title:e,onRevealAdornerClick:this.onRevealAdornerClick.bind(this)},void 0,this.listItemElement)}};var Nl={};F(Nl,{TopLayerContainer:()=>ai});import*as Ml from"./../../core/sdk/sdk.js";import*as Al from"./../../ui/legacy/legacy.js";var ai=class extends Al.TreeOutline.TreeElement{tree;document;constructor(e,t){super("#top-layer"),this.tree=e,this.document=t,this.document.domModel().addEventListener(Ml.DOMModel.Events.TopLayerElementsChanged,this.topLayerElementsChanged,this),this.topLayerElementsChanged({data:{document:t,documentShortcuts:[]}})}topLayerElementsChanged(e){if(this.document!==e.data.document)return;this.removeChildren();let t=e.data.documentShortcuts;this.hidden=t.length===0;for(let i of t){let n=new pt(i);this.appendChild(n);for(let s of i.childShortcuts)n.appendChild(new pt(s))}}revealInTopLayer(e){this.children().forEach(t=>{t instanceof pt&&t.deferredNode().backendNodeId()===e.backendNodeId()&&t.revealAndSelect()})}};var li={pageDom:"Page DOM",storeAsGlobalVariable:"Store as global variable",showAllNodesDMore:"Show all nodes ({PH1} more)",showAllLines:"Show all ({PH1} lines)",viewIssue:"View Issue:"},hh=Xo.i18n.registerUIStrings("panels/elements/ElementsTreeOutline.ts",li),Zi=Xo.i18n.getLocalizedString.bind(void 0,hh),Qo=new WeakMap,Dl=new WeakSet;var $l=(r,e,t)=>{if(e.elementsTreeOutline||(e.elementsTreeOutline=new Le(r.omitRootDOMNode,r.selectEnabled,r.hideGutter,r.maxTreeDepth,r.enableContextMenu,r.showComments,r.showAIButton,r.disableEdits,r.expandRoot),e.elementsTreeOutline.addEventListener(Le.Events.SelectedNodeChanged,r.onSelectedNodeChanged,void 0),e.elementsTreeOutline.addEventListener(Le.Events.ElementsTreeUpdated,r.onElementsTreeUpdated,void 0),e.elementsTreeOutline.addEventListener(j.TreeOutline.Events.ElementExpanded,r.onElementExpanded,void 0),e.elementsTreeOutline.addEventListener(j.TreeOutline.Events.ElementCollapsed,r.onElementCollapsed,void 0),e.elementsTreeOutline.addEventListener(Le.Events.ShowAllRows,()=>{e.elementsTreeOutline?.maxRowsShown&&(e.elementsTreeOutline.maxRowsShown=void 0)},void 0),t.appendChild(e.elementsTreeOutline.element)),e.elementsTreeOutline.maxTreeDepth=r.maxTreeDepth,e.elementsTreeOutline.enableContextMenu=r.enableContextMenu??!0,e.elementsTreeOutline.showComments=r.showComments??!0,e.elementsTreeOutline.showAIButton=r.showAIButton??!0,e.elementsTreeOutline.disableEdits=r.disableEdits??!1,e.elementsTreeOutline.expandRoot=r.expandRoot??!1,r.visibleWidth!==void 0&&e.elementsTreeOutline.setVisibleWidth(r.visibleWidth),r.visible!==void 0&&e.elementsTreeOutline.setVisible(r.visible),e.elementsTreeOutline.maxRowsShown=r.maxRowsShown,e.elementsTreeOutline.setWordWrap(r.wrap),e.elementsTreeOutline.setShowSelectionOnKeyboardFocus(r.showSelectionOnKeyboardFocus,r.preventTabOrder),r.deindentSingleNode&&e.elementsTreeOutline.deindentSingleNode(),(e.highlightedTreeElement?.node()??null)!==r.currentHighlightedNode){e.isUpdatingHighlights=!0;let n=null;if(e.highlightedTreeElement){let s=e.highlightedTreeElement;for(;s&&s!==e.alreadyExpandedParentTreeElement;){s.expanded&&s.collapse();let o=s.parent;s=o instanceof ne?o:null}}if(e.highlightedTreeElement=null,e.alreadyExpandedParentTreeElement=null,r.currentHighlightedNode){let s=r.currentHighlightedNode,o=e.elementsTreeOutline.treeElementByNode,a=l=>{let d=o.get(l);return d?!d.expanded:!0};for(;s&&a(s);)s=s.parentNode;e.alreadyExpandedParentTreeElement=s?o.get(s):e.elementsTreeOutline.rootElement(),n=e.elementsTreeOutline.createTreeElementFor(r.currentHighlightedNode)}r.selectedNode&&e.elementsTreeOutline.selectDOMNode(r.selectedNode),e.highlightedTreeElement=n,e.elementsTreeOutline.setHoverEffect(n),n?.reveal(!0),e.isUpdatingHighlights=!1}},en=class extends j.Widget.Widget{omitRootDOMNode=!1;selectEnabled=!1;hideGutter=!1;showSelectionOnKeyboardFocus=!1;preventTabOrder=!1;deindentSingleNode=!1;onSelectedNodeChanged=()=>{};onElementsTreeUpdated=()=>{};onDocumentUpdated=()=>{};#e;#n=!0;#i=!0;#t=!0;#s=!1;#o=!1;#r=!1;#l;#c=!1;#p;set maxRows(e){this.#p=e,this.requestUpdate()}get maxRows(){return this.#p}set visibleWidth(e){this.#l=e,this.performUpdate()}set rootDOMNode(e){if(this.performUpdate(),!this.#a.elementsTreeOutline)throw new Error("Unexpected: missing elementsTreeOutline");this.#a.elementsTreeOutline.rootDOMNode=e,this.performUpdate()}get rootDOMNode(){return this.#a.elementsTreeOutline?.rootDOMNode??null}get maxTreeDepth(){return this.#e}set maxTreeDepth(e){this.#e=e,this.performUpdate()}get enableContextMenu(){return this.#n}set enableContextMenu(e){this.#n=e,this.performUpdate()}get showComments(){return this.#i}set showComments(e){this.#i=e,this.performUpdate()}get showAIButton(){return this.#t}set showAIButton(e){this.#t=e,this.performUpdate()}get disableEdits(){return this.#s}set disableEdits(e){this.#s=e,this.performUpdate()}get expandRoot(){return this.#o}set expandRoot(e){this.#o=e,this.performUpdate()}#d=null;#h;#a={highlightedTreeElement:null,alreadyExpandedParentTreeElement:null,isUpdatingHighlights:!1};#m=new ut.Throttler.Throttler(100);constructor(e,t){super(e,{useShadowDom:!1,delegatesFocus:!1}),this.#h=t??$l,ut.Settings.Settings.instance().moduleSetting("highlight-node-on-hover-in-overlay").get()&&(P.TargetManager.TargetManager.instance().addModelListener(P.OverlayModel.OverlayModel,"HighlightNodeRequested",this.#g,this,{scoped:!0}),P.TargetManager.TargetManager.instance().addModelListener(P.OverlayModel.OverlayModel,"InspectModeWillBeToggled",this.#f,this,{scoped:!0}))}#g(e){this.#m.schedule(()=>{this.#d=e.data,this.requestUpdate()})}#f(){this.#a.isUpdatingHighlights||(this.#d=null,this.performUpdate())}selectDOMNode(e,t){e instanceof P.DOMModel.AdoptedStyleSheet?this.#a?.elementsTreeOutline?.highlightAdoptedStyleSheet(e):this.#a?.elementsTreeOutline?.selectDOMNode(e,t)}highlightNodeAttribute(e,t){this.#a?.elementsTreeOutline?.highlightNodeAttribute(e,t)}get wrap(){return this.#c}set wrap(e){this.#c=e,this.performUpdate()}setWordWrap(e){this.wrap=e}selectedDOMNode(){return this.#a.elementsTreeOutline?.selectedDOMNode()??null}reload(){this.#a.elementsTreeOutline?.update()}getTreeOutlineForTesting(){return this.#a.elementsTreeOutline}treeElementForNode(e){return this.#a.elementsTreeOutline?.findTreeElement(e)||null}performUpdate(){let e=!this.#a.elementsTreeOutline;this.#h({omitRootDOMNode:this.omitRootDOMNode,selectEnabled:this.selectEnabled,hideGutter:this.hideGutter,maxTreeDepth:this.#e,enableContextMenu:this.#n,showComments:this.#i,showAIButton:this.#t,disableEdits:this.#s,expandRoot:this.#o,visibleWidth:this.#l,visible:this.#r,wrap:this.#c,maxRowsShown:this.#p,showSelectionOnKeyboardFocus:this.showSelectionOnKeyboardFocus,preventTabOrder:this.preventTabOrder,deindentSingleNode:this.deindentSingleNode,currentHighlightedNode:this.#d,selectedNode:this.selectedDOMNode(),onElementsTreeUpdated:this.onElementsTreeUpdated.bind(this),onSelectedNodeChanged:t=>{this.#f(),this.onSelectedNodeChanged(t)},onElementCollapsed:()=>{this.#f()},onElementExpanded:()=>{this.#f()}},this.#a,this.contentElement),e&&this.#a.elementsTreeOutline&&this.#a.elementsTreeOutline.addEventListener(Le.Events.ShowAllRows,()=>{this.maxRows=void 0})}modelAdded(e){if(this.performUpdate(),!this.#a.elementsTreeOutline)throw new Error("Unexpected: missing elementsTreeOutline");this.#a.elementsTreeOutline.wireToDOMModel(e),this.performUpdate()}modelRemoved(e){this.#a.elementsTreeOutline?.unwireFromDOMModel(e),this.performUpdate()}expand(){this.#a.elementsTreeOutline?.selectedTreeElement&&this.#a.elementsTreeOutline.selectedTreeElement.expand()}selectDOMNodeWithoutReveal(e){this.#a.elementsTreeOutline?.findTreeElement(e)?.select()}updateNodeAdorners(e){this.#a.elementsTreeOutline?.findTreeElement(e)?.updateAdorners()}highlightMatch(e,t){let i=this.#a.elementsTreeOutline?.findTreeElement(e);if(!i)return;t&&i.highlightSearchResults(t),i.reveal();let n=i.listItemElement.getElementsByClassName(kl.highlightedSearchResultClassName);n.length&&n[0].scrollIntoViewIfNeeded(!1),i.select(!0)}hideMatchHighlights(e){let t=this.#a.elementsTreeOutline?.findTreeElement(e);t&&t.hideSearchHighlights()}toggleHideElement(e){this.#a.elementsTreeOutline?.toggleHideElement(e)}toggleEditAsHTML(e){this.#a.elementsTreeOutline?.toggleEditAsHTML(e)}duplicateNode(e){this.#a.elementsTreeOutline?.duplicateNode(e)}copyStyles(e){this.#a.elementsTreeOutline?.findTreeElement(e)?.copyStyles()}empty(){return!this.#a.elementsTreeOutline}focus(){super.focus(),this.#a.elementsTreeOutline?.focus()}wasShown(){super.wasShown(),this.#r=!0,this.performUpdate()}detach(e){super.detach(e),this.#r=!1,this.performUpdate()}show(e,t,i=!1){this.performUpdate();let n=P.TargetManager.TargetManager.instance().models(P.DOMModel.DOMModel,{scoped:!0});for(let s of n)s.parentModel()||(!this.rootDOMNode||this.rootDOMNode.domModel()!==s)&&(s.existingDocument()?(this.rootDOMNode=s.existingDocument(),this.onDocumentUpdated(s)):s.requestDocument());super.show(e,t,i)}},Le=class r extends ut.ObjectWrapper.eventMixin(j.TreeOutline.TreeOutline){treeElementByNode;shadowRoot;elementInternal;includeRootDOMNode;selectEnabled;rootDOMNodeInternal;selectedDOMNodeInternal;visible;imagePreviewPopover;updateRecords;treeElementsBeingUpdated;decoratorExtensions;showHTMLCommentsSetting;multilineEditing;visibleWidthInternal;clipboardNodeData;isXMLMimeTypeInternal;suppressRevealAndSelect=!1;previousHoveredElement;treeElementBeingDragged;dragOverTreeElement;updateModifiedNodesTimeout;#e=new WeakMap;#n;#i;#t=new Map;maxTreeDepth;enableContextMenu;showComments;showAIButton;disableEdits;expandRoot;#s;#o;constructor(e,t,i,n,s,o,a,l,d){super(),this.#n=Ol.IssuesManager.IssuesManager.instance(),this.#n.addEventListener("IssueAdded",this.#r,this),this.#n.addEventListener("IssueHiddenStatusUpdated",this.#l,this),this.treeElementByNode=new WeakMap;let h=document.createElement("div");this.shadowRoot=j.UIUtils.createShadowRootWithCoreStyles(h,{cssFile:[Go,Rl.codeHighlighterStyles]});let c=this.shadowRoot.createChild("div","elements-disclosure");this.elementInternal=this.element,this.elementInternal.classList.add("elements-tree-outline","source-code"),this.maxTreeDepth=n,this.enableContextMenu=s??!0,this.showComments=o??!0,this.showAIButton=a??!0,this.disableEdits=l??!1,this.expandRoot=d??!1,this.elementInternal.classList.toggle("elements-hide-gutter",i),j.ARIAUtils.setLabel(this.elementInternal,Zi(li.pageDom)),this.elementInternal.addEventListener("focusout",this.onfocusout.bind(this),!1),this.elementInternal.addEventListener("mousedown",this.onmousedown.bind(this),!1),this.elementInternal.addEventListener("mousemove",this.onmousemove.bind(this),!1),this.elementInternal.addEventListener("mouseleave",this.onmouseleave.bind(this),!1),this.elementInternal.addEventListener("keydown",this.onKeyDown.bind(this),!1),this.disableEdits||(this.elementInternal.addEventListener("dragstart",this.ondragstart.bind(this),!1),this.elementInternal.addEventListener("dragover",this.ondragover.bind(this),!1),this.elementInternal.addEventListener("dragleave",this.ondragleave.bind(this),!1),this.elementInternal.addEventListener("drop",this.ondrop.bind(this),!1),this.elementInternal.addEventListener("dragend",this.ondragend.bind(this),!1),this.elementInternal.addEventListener("clipboard-beforecopy",this.onBeforeCopy.bind(this),!1),this.elementInternal.addEventListener("clipboard-copy",this.onCopyOrCut.bind(this,!1),!1),this.elementInternal.addEventListener("clipboard-cut",this.onCopyOrCut.bind(this,!0),!1),this.elementInternal.addEventListener("clipboard-paste",this.onPaste.bind(this),!1)),this.enableContextMenu&&this.elementInternal.addEventListener("contextmenu",this.contextMenuEventFired.bind(this),!1),c.appendChild(this.elementInternal),this.element=h,this.contentElement.setAttribute("jslog",`${Vl.tree("elements")}`),this.includeRootDOMNode=!e,this.selectEnabled=t,this.rootDOMNodeInternal=null,this.selectedDOMNodeInternal=null,this.visible=!1,this.imagePreviewPopover=new Me(this.contentElement,p=>{let u=p.target;for(;u&&!Me.getImageURL(u);)u=u.parentElementOrShadowHost();return u},async p=>{let u=j.UIUtils.enclosingNodeOrSelfWithNodeName(p,"li");if(!u)return;let g=j.TreeOutline.TreeElement.getTreeElementBylistItemNode(u);return await Fl.ImagePreview.loadPrecomputedFeatures(g?.node())}),this.updateRecords=new Map,this.treeElementsBeingUpdated=new Set,this.decoratorExtensions=null,this.showComments?(this.showHTMLCommentsSetting=ut.Settings.Settings.instance().moduleSetting("show-html-comments"),this.showHTMLCommentsSetting.addChangeListener(this.onShowHTMLCommentsChange.bind(this))):this.showHTMLCommentsSetting={get:()=>!1,addChangeListener:()=>{},removeChangeListener:()=>{}},this.setUseLightSelectionColor(!0),this.#i=new j.PopoverHelper.PopoverHelper(this.elementInternal,p=>{let u=p.composedPath()[0];if(!u?.matches(".violating-element"))return null;let g=this.#t.get(u);return g?{box:u.boxInWindow(),show:async m=>(m.setIgnoreLeftMargin(!0),ch(Pl`
            <div class="squiggles-content">
              ${g.map(f=>{let T=jt(f);if(!T)return dh;let w=Ul.IssueCounter.getIssueKindIconName(f.getKind()),b=()=>ut.Revealer.reveal(f);return Pl`
                  <div class="squiggles-content-item">
                  <devtools-icon .name=${w} @click=${b}></devtools-icon>
                  <devtools-link class="link" @click=${b}>${Zi(li.viewIssue)}</devtools-link>
                  <span>${T.tooltip}</span>
                  </div>`})}
            </div>`,m.contentElement),!0)}:null},"elements.issue"),this.#i.setTimeout(300)}static forDOMModel(e){return Qo.get(e)||null}#r(e){this.#p(e.data.issue)}#l(e){let t=e.data.issue;if(t){if(t.isHidden()){this.#d(t);return}this.#p(t)}}#c(){if(this.#n)for(let e of this.#n.issues())this.#p(e)}async#p(e){if(e.isHidden())return;let t=jt(e);if(!t)return;let{nodeId:i}=t;if(!this.rootDOMNode||!i)return;let s=await new P.DOMModel.DeferredDOMNode(this.rootDOMNode.domModel().target(),i).resolvePromise();if(!s)return;let o=this.findTreeElement(s);if(o){o.addIssue(e);let a=o.issuesByNodeElement;for(let[l,d]of a)this.#t.set(l,d)}}async#d(e){let t=jt(e);if(!t)return;let{nodeId:i}=t;if(!this.rootDOMNode||!i)return;let s=await new P.DOMModel.DeferredDOMNode(this.rootDOMNode.domModel().target(),i).resolvePromise();if(!s)return;let o=this.findTreeElement(s);o&&o.removeIssue(e)}deindentSingleNode(){let e=this.firstChild();(!e||e&&!e.isExpandable())&&this.shadowRoot.querySelector(".elements-disclosure")?.classList.add("single-node")}updateNodeElementToIssue(e,t){if(!t||t.length===0){this.#t.delete(e);return}this.#t.set(e,t)}onShowHTMLCommentsChange(){let e=this.selectedDOMNode();e&&e.nodeType()===Node.COMMENT_NODE&&!this.showHTMLCommentsSetting.get()&&this.selectDOMNode(e.parentNode),this.update()}setWordWrap(e){this.elementInternal.classList.toggle("elements-tree-nowrap",!e)}setMultilineEditing(e){this.multilineEditing=e}visibleWidth(){return this.visibleWidthInternal||0}setVisibleWidth(e){this.visibleWidthInternal=e,this.multilineEditing&&this.multilineEditing.resize()}setClipboardData(e){if(this.clipboardNodeData){let t=this.findTreeElement(this.clipboardNodeData.node);t&&t.setInClipboard(!1),delete this.clipboardNodeData}if(e){let t=this.findTreeElement(e.node);t&&t.setInClipboard(!0),this.clipboardNodeData=e}}resetClipboardIfNeeded(e){this.clipboardNodeData?.node===e&&this.setClipboardData(null)}onBeforeCopy(e){e.handled=!0}onCopyOrCut(e,t){this.setClipboardData(null);let i=t.original;if(!i?.target||i.target instanceof Node&&i.target.hasSelection()||j.UIUtils.isEditing())return;let n=this.selectedDOMNode();n&&i.clipboardData&&(i.clipboardData.clearData(),t.handled=!0,this.performCopyOrCut(e,n))}performCopyOrCut(e,t,i=!1){t&&(e&&(t.isShadowRoot()||t.ancestorUserAgentShadowRoot())||(t.getOuterHTML(i).then(n=>{n!==null&&j.UIUtils.copyTextToClipboard(n)}),this.setClipboardData({node:t,isCut:e})))}canPaste(e){if(e.isShadowRoot()||e.ancestorUserAgentShadowRoot()||!this.clipboardNodeData)return!1;let 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(j.UIUtils.isEditing())return;let t=this.selectedDOMNode();!t||!this.canPaste(t)||(e.handled=!0,this.performPaste(t))}performPaste(e){if(!this.clipboardNodeData)return;this.clipboardNodeData.isCut?(this.clipboardNodeData.node.moveTo(e,null,t.bind(this)),this.setClipboardData(null)):this.clipboardNodeData.node.copyTo(e,null,t.bind(this));function t(i,n){i||!n||this.selectDOMNode(n)}}performDuplicate(e){if(e.isInShadowTree())return;let t=e.parentNode?e.parentNode:e;t.nodeName()!=="#document"&&e.copyTo(t,e.nextSibling)}setVisible(e){if(e!==this.visible){if(this.visible=e,!this.visible){this.imagePreviewPopover.hide(),this.multilineEditing&&this.multilineEditing.cancel();return}this.runPendingUpdates(),this.selectedDOMNodeInternal&&this.revealAndSelectNode(this.selectedDOMNodeInternal,!1)}}get rootDOMNode(){return this.rootDOMNodeInternal}set rootDOMNode(e){this.rootDOMNodeInternal!==e&&(this.rootDOMNodeInternal=e,this.isXMLMimeTypeInternal=e?.isXMLNode(),this.update())}get isXMLMimeType(){return!!this.isXMLMimeTypeInternal}selectedDOMNode(){return this.selectedDOMNodeInternal}selectDOMNode(e,t){if(this.selectedDOMNodeInternal===e){this.revealAndSelectNode(e,!t);return}this.selectedDOMNodeInternal=e,this.revealAndSelectNode(e,!t),this.selectedDOMNodeInternal===e&&this.selectedNodeChanged(!!t)}set maxRowsShown(e){this.#s=e,this.#h()}#h(){let e=this.shadowRoot.querySelector(".elements-disclosure");if(e){if(!this.#s){this.#o?.classList.add("hidden"),e.style.removeProperty("--max-rows"),e.classList.remove("elements-tree-truncated");return}e.style.setProperty("--max-rows",String(this.#s)),e.classList.add("elements-tree-truncated"),window.requestAnimationFrame(()=>{if(!(e.scrollHeight>e.clientHeight))return;this.#o||(this.#o=j.UIUtils.createTextButton("",()=>{this.dispatchEventToListeners(r.Events.ShowAllRows),this.dispatchEventToListeners(j.TreeOutline.Events.ElementExpanded,this.rootElement())},{jslogContext:"show-all-nodes"}),this.#o.classList.add("elements-tree-show-all"),this.shadowRoot.appendChild(this.#o)),this.#o.classList.remove("hidden");let i=window.getComputedStyle(e),n=parseFloat(i.lineHeight)||16,s=Math.round((e.scrollHeight-e.clientHeight)/n);s>0?this.#o.textContent=Zi(li.showAllLines,{PH1:s}):this.#o?.classList.add("hidden")})}}highlightAdoptedStyleSheet(e){let t=!this.includeRootDOMNode&&e.parent===this.rootDOMNode&&this.rootDOMNode?this.rootElement():this.createTreeElementFor(e.parent);if(!t)return;let i=t.firstChild();if(i&&i instanceof si){for(let n of i.children())if(n instanceof oi&&n.adoptedStyleSheet===e){i.expand(),n.highlight();return}}}editing(){let e=this.selectedDOMNode();if(!e)return!1;let t=this.findTreeElement(e);return t&&t.isEditing()||!1}update(){let e=this.selectedDOMNode();if(this.removeChildren(),!!this.rootDOMNode){if(this.includeRootDOMNode){let t=this.createElementTreeElement(this.rootDOMNode);this.appendChild(t),this.expandRoot&&t.expand()}else{let t=this.visibleChildren(this.rootDOMNode);for(let i of t){let n=this.createElementTreeElement(i);this.appendChild(n)}}this.rootDOMNode instanceof P.DOMModel.DOMDocument&&this.createTopLayerContainer(this.rootElement(),this.rootDOMNode),e&&this.revealAndSelectNode(e,!0)}}selectedNodeChanged(e){this.dispatchEventToListeners(r.Events.SelectedNodeChanged,{node:this.selectedDOMNodeInternal,focus:e})}fireElementsTreeUpdated(e){this.dispatchEventToListeners(r.Events.ElementsTreeUpdated,e)}findTreeElement(e){if(e instanceof Array)return null;let t=this.lookUpTreeElement(e);return!t&&e.nodeType()===Node.TEXT_NODE&&(t=this.lookUpTreeElement(e.parentNode)),t}lookUpTreeElement(e){if(!e)return null;let t=this.treeElementByNode.get(e);if(t)return t;let i=[],n;for(n=e.parentNode;n&&(i.push(n),!this.treeElementByNode.has(n));n=n.parentNode);if(!n)return null;for(let s=i.length-1;s>=0;--s){let o=i[s-1]||e,a=this.treeElementByNode.get(i[s]);a&&(a.onpopulate(),o.index&&o.index>=a.expandedChildrenLimit()&&this.setExpandedChildrenLimit(a,o.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)}revealAndSelectNode(e,t){if(this.suppressRevealAndSelect||(!this.includeRootDOMNode&&e===this.rootDOMNode&&this.rootDOMNode&&(e=this.rootDOMNode.firstChild),!e))return;let i=this.createTreeElementFor(e);i&&i.revealAndSelect(t)}highlightNodeAttribute(e,t){let i=this.findTreeElement(e);i&&(i.reveal(),i.highlightAttribute(t))}treeElementFromEventInternal(e){if(!this.element.parentElement)return null;let i=e.pageX,n=e.pageY,s=this.treeElementFromPoint(i,n),o=this.treeElementFromPoint(i,n-2),a;return s===o?a=s:a=this.treeElementFromPoint(i,n+2),a}onfocusout(e){P.OverlayModel.OverlayModel.hideDOMNodeHighlight(P.TargetManager.TargetManager.instance())}onmousedown(e){let t=this.treeElementFromEventInternal(e);t&&t.select()}setHoverEffect(e){this.previousHoveredElement!==e&&(this.previousHoveredElement instanceof ne&&(this.previousHoveredElement.hovered=!1,delete this.previousHoveredElement),e instanceof ne&&(e.hovered=!0,this.previousHoveredElement=e))}onmousemove(e){let t=this.treeElementFromEventInternal(e);t&&this.previousHoveredElement===t||(this.setHoverEffect(t),this.highlightTreeElement(t,!j.KeyboardShortcut.KeyboardShortcut.eventHasEitherCtrlOrMeta(e)))}highlightTreeElement(e,t){if(e instanceof ne){let i=e.isDisplayContents()?"*":void 0;e.node().domModel().overlayModel().highlightInOverlay({node:e.node(),selectorList:i},"all",t);return}e instanceof pt&&e.domModel().overlayModel().highlightInOverlay({deferredNode:e.deferredNode(),selectorList:void 0},"all",t)}onmouseleave(e){this.setHoverEffect(null),P.OverlayModel.OverlayModel.hideDOMNodeHighlight(P.TargetManager.TargetManager.instance())}ondragstart(e){let t=e.target;if(!t||t.hasSelection()||t.nodeName==="A")return!1;let i=this.validDragSourceOrTarget(this.treeElementFromEventInternal(e));if(!i||i.node().nodeName()==="BODY"||i.node().nodeName()==="HEAD")return!1;if(!(!e.dataTransfer||!i.listItemElement.textContent))return e.dataTransfer.setData("text/plain",i.listItemElement.textContent.replace(/\u200b/g,"")),e.dataTransfer.effectAllowed="copyMove",this.treeElementBeingDragged=i,P.OverlayModel.OverlayModel.hideDOMNodeHighlight(P.TargetManager.TargetManager.instance()),!0}ondragover(e){if(!this.treeElementBeingDragged)return!1;let t=this.validDragSourceOrTarget(this.treeElementFromEventInternal(e));if(!t)return!1;let i=t.node();for(;i;){if(i===this.treeElementBeingDragged.nodeInternal)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||!(e instanceof ne))return null;let t=e,i=t.node();return!i.parentNode||i.parentNode.nodeType()!==Node.ELEMENT_NODE?null:t}ondrop(e){e.preventDefault();let t=this.treeElementFromEventInternal(e);t instanceof ne&&this.doMove(t)}doMove(e){if(!this.treeElementBeingDragged)return;let t,i;if(e.isClosingTag())t=e.node(),i=null;else{let s=e.node();t=s.parentNode,i=s}if(!t)return;let n=this.treeElementBeingDragged.expanded;this.treeElementBeingDragged.nodeInternal.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){let t=this.treeElementFromEventInternal(e);t instanceof ne&&this.showContextMenu(t,e)}async showContextMenu(e,t){if(j.UIUtils.isEditing()||!this.enableContextMenu)return;let i=t.target;if(!i)return;t.stopPropagation(),t.preventDefault();let n=new j.ContextMenu.ContextMenu(t),s=!!e.node().pseudoType(),o=e.node().nodeType()===Node.ELEMENT_NODE&&!s,a=i.enclosingNodeOrSelfWithClass("webkit-html-text-node");a?.classList.contains("bogus")&&(a=null);let l=i.enclosingNodeOrSelfWithClass("webkit-html-comment");n.saveSection().appendItem(Zi(li.storeAsGlobalVariable),this.saveNodeToTempVariable.bind(this,e.node()),{jslogContext:"store-as-global-variable"}),a?await e.populateTextContextMenu(n,a):o?await e.populateTagContextMenu(n,t):l?await e.populateNodeContextMenu(n):s?e.populatePseudoElementContextMenu(n):e.node().nodeType()===Node.PROCESSING_INSTRUCTION_NODE&&await e.populateProcessingElementContextMenu(n),D.instance().populateAdornerSettingsContextMenu(n),n.appendApplicableItems(e.node()),n.show()}async saveNodeToTempVariable(e){let t=await e.resolveToObject();await t?.runtimeModel().target()?.model(P.ConsoleModel.ConsoleModel)?.saveToTempVariable(j.Context.Context.instance().flavor(P.RuntimeModel.ExecutionContext),t)}runPendingUpdates(){this.updateModifiedNodes()}onKeyDown(e){let t=e;if(j.UIUtils.isEditing())return;let i=this.selectedDOMNode();if(!i)return;let n=this.treeElementByNode.get(i);if(n&&j.KeyboardShortcut.KeyboardShortcut.eventHasCtrlEquivalentKey(t)&&i.parentNode){if(t.key==="ArrowUp"&&i.previousSibling){i.moveTo(i.parentNode,i.previousSibling,this.selectNodeAfterEdit.bind(this,n.expanded)),t.consume(!0);return}if(t.key==="ArrowDown"&&i.nextSibling){i.moveTo(i.parentNode,i.nextSibling.nextSibling,this.selectNodeAfterEdit.bind(this,n.expanded)),t.consume(!0);return}}}toggleEditAsHTML(e,t,i){let n=this.treeElementByNode.get(e);if(!n?.hasEditableNode()||e.pseudoType())return;let s=e.parentNode,o=e.index,a=n.expanded;n.toggleEditAsHTML(l.bind(this),t);function l(d){if(i&&i(),!d||(Is.UserBadges.instance().recordAction(Is.BadgeAction.DOM_ELEMENT_OR_ATTRIBUTE_EDITED),this.runPendingUpdates(),!o))return;let h=s?.children(),c=h&&h[o]||s;if(c&&(this.selectDOMNode(c,!0),a)){let p=this.findTreeElement(c);p&&p.expand()}}}selectNodeAfterEdit(e,t,i){if(t||(this.runPendingUpdates(),!i))return null;this.selectDOMNode(i,!0);let n=this.findTreeElement(i);return e&&n&&n.expand(),n}async toggleHideElement(e){let t=e.pseudoType()?e.nodeName():null;t&&e.pseudoIdentifier()&&(t+=`(${e.pseudoIdentifier()})`);let i=e;for(;i?.pseudoType();)i!==e&&i.pseudoType()==="column"&&(t="::column"+t),i=i.parentNode;if(!i)return;let n=e.marker("hidden-marker"),s=await i.resolveToObject("");if(!s)return;await s.callFunction(o,[{value:t},{value:!n}]),s.release(),e.setMarker("hidden-marker",n?null:!0);function o(a,l){let d="__web-inspector-hide",h="-shortcut__",c="__web-inspector-hide-shortcut-style__",p=a?a.replace(/[\(\)\:]/g,"_"):"",u=d+p+h;this.classList.toggle(u,l);let g=this;for(;g.parentNode;)g=g.parentNode;g.nodeType===Node.DOCUMENT_NODE&&(g=document.head);let m=g.querySelector("style#"+c);if(!m){let f=[];f.push(".__web-inspector-hide-shortcut__"),f.push(".__web-inspector-hide-shortcut__ *");let b=`
`+f.join(", ")+`
{
`+"    visibility: hidden !important;"+`
}
`;m=document.createElement("style"),m.id=c,m.textContent=b,g.appendChild(m)}a&&!m.classList.contains(u)&&(m.classList.add(u),m.textContent=`.${u}${a}, ${m.textContent}`)}}isToggledToHidden(e){return!!e.marker("hidden-marker")}reset(){this.rootDOMNode=null,this.selectDOMNode(null,!1),this.imagePreviewPopover.hide(),delete this.clipboardNodeData,P.OverlayModel.OverlayModel.hideDOMNodeHighlight(P.TargetManager.TargetManager.instance()),this.updateRecords.clear()}wireToDOMModel(e){Qo.set(e,this),e.addEventListener(P.DOMModel.Events.MarkersChanged,this.markersChanged,this),e.addEventListener(P.DOMModel.Events.NodeInserted,this.nodeInserted,this),e.addEventListener(P.DOMModel.Events.NodeRemoved,this.nodeRemoved,this),e.addEventListener(P.DOMModel.Events.AttrModified,this.attributeModified,this),e.addEventListener(P.DOMModel.Events.AttrRemoved,this.attributeRemoved,this),e.addEventListener(P.DOMModel.Events.CharacterDataModified,this.characterDataModified,this),e.addEventListener(P.DOMModel.Events.DocumentUpdated,this.documentUpdated,this),e.addEventListener(P.DOMModel.Events.DocumentURLChanged,this.documentURLChanged,this),e.addEventListener(P.DOMModel.Events.ChildNodeCountUpdated,this.childNodeCountUpdated,this),e.addEventListener(P.DOMModel.Events.DistributedNodesChanged,this.distributedNodesChanged,this),e.addEventListener(P.DOMModel.Events.AffectedByStartingStylesFlagUpdated,this.affectedByStartingStylesFlagUpdated,this),e.addEventListener(P.DOMModel.Events.AdoptedStyleSheetsModified,this.adoptedStyleSheetsModified,this)}unwireFromDOMModel(e){e.removeEventListener(P.DOMModel.Events.MarkersChanged,this.markersChanged,this),e.removeEventListener(P.DOMModel.Events.NodeInserted,this.nodeInserted,this),e.removeEventListener(P.DOMModel.Events.NodeRemoved,this.nodeRemoved,this),e.removeEventListener(P.DOMModel.Events.AttrModified,this.attributeModified,this),e.removeEventListener(P.DOMModel.Events.AttrRemoved,this.attributeRemoved,this),e.removeEventListener(P.DOMModel.Events.CharacterDataModified,this.characterDataModified,this),e.removeEventListener(P.DOMModel.Events.DocumentUpdated,this.documentUpdated,this),e.removeEventListener(P.DOMModel.Events.DocumentURLChanged,this.documentURLChanged,this),e.removeEventListener(P.DOMModel.Events.ChildNodeCountUpdated,this.childNodeCountUpdated,this),e.removeEventListener(P.DOMModel.Events.DistributedNodesChanged,this.distributedNodesChanged,this),e.removeEventListener(P.DOMModel.Events.AffectedByStartingStylesFlagUpdated,this.affectedByStartingStylesFlagUpdated,this),e.removeEventListener(P.DOMModel.Events.AdoptedStyleSheetsModified,this.adoptedStyleSheetsModified,this),Qo.delete(e)}addUpdateRecord(e){let t=this.updateRecords.get(e);return t||(t=new Ll.ElementUpdateRecord.ElementUpdateRecord,this.updateRecords.set(e,t)),t}updateRecordForHighlight(e){return this.visible&&this.updateRecords.get(e)||null}documentUpdated(e){let t=e.data;this.reset(),t.existingDocument()&&(this.rootDOMNode=t.existingDocument(),this.#c())}attributeModified(e){let{node:t}=e.data;this.addUpdateRecord(t).attributeModified(e.data.name),this.updateModifiedNodesSoon()}attributeRemoved(e){let{node:t}=e.data;this.addUpdateRecord(t).attributeRemoved(e.data.name),this.updateModifiedNodesSoon()}characterDataModified(e){let t=e.data;this.addUpdateRecord(t).charDataModified(),t.parentNode&&t.parentNode.firstChild===t.parentNode.lastChild&&this.addUpdateRecord(t.parentNode).childrenModified(),this.updateModifiedNodesSoon()}documentURLChanged(e){this.addUpdateRecord(e.data).charDataModified(),this.updateModifiedNodesSoon()}nodeInserted(e){let t=e.data;this.addUpdateRecord(t.parentNode).nodeInserted(t),this.updateModifiedNodesSoon()}nodeRemoved(e){let{node:t,parent:i}=e.data;this.resetClipboardIfNeeded(t),this.addUpdateRecord(i).nodeRemoved(t),this.updateModifiedNodesSoon()}childNodeCountUpdated(e){let t=e.data;this.addUpdateRecord(t).childrenModified(),this.updateModifiedNodesSoon()}distributedNodesChanged(e){let t=e.data;this.addUpdateRecord(t).childrenModified(),this.updateModifiedNodesSoon()}adoptedStyleSheetsModified(e){let t=e.data;this.addUpdateRecord(t).childrenModified(),this.updateModifiedNodesSoon()}updateModifiedNodesSoon(){this.updateRecords.size&&(this.updateModifiedNodesTimeout||(this.updateModifiedNodesTimeout=window.setTimeout(this.updateModifiedNodes.bind(this),50)))}updateModifiedNodes(){this.updateModifiedNodesTimeout&&(clearTimeout(this.updateModifiedNodesTimeout),delete this.updateModifiedNodesTimeout);let e=[...this.updateRecords.keys()],t=e.length>10,i,n;if(t&&(i=this.element.parentNode,n=i?i.scrollTop:0,this.elementInternal.classList.add("hidden")),(this.rootDOMNodeInternal&&this.updateRecords.get(this.rootDOMNodeInternal))?.hasChangedChildren())this.update();else for(let[o,a]of this.updateRecords)a.hasChangedChildren()?this.updateModifiedParentNode(o):this.updateModifiedNode(o);t&&(this.elementInternal.classList.remove("hidden"),i&&n&&(i.scrollTop=n)),this.updateRecords.clear(),this.fireElementsTreeUpdated(e)}updateModifiedNode(e){let t=this.findTreeElement(e);t&&t.updateTitle(this.updateRecordForHighlight(e))}updateModifiedParentNode(e){let t=this.findTreeElement(e);t&&(t.setExpandable(this.hasVisibleChildren(e)),t.updateTitle(this.updateRecordForHighlight(e)),Dl.has(t)&&this.updateChildren(t))}populateTreeElement(e){return e.childCount()||!e.isExpandable()?Promise.resolve():new Promise(t=>{e.node().getChildNodes(()=>{Dl.add(e),this.updateModifiedParentNode(e.node()),t()})})}createTopLayerContainer(e,t){if(!e.treeOutline||!(e.treeOutline instanceof r))return;let i=new ai(e.treeOutline,t);this.#e.set(t,i),e.appendChild(i)}revealInTopLayer(e){let t=e.ownerDocument;if(!t)return;let i=this.#e.get(t);i&&i.revealInTopLayer(e)}isMaxDepthReached(e){if(this.maxTreeDepth===void 0||this.maxTreeDepth===1/0||e.nodeType()===Node.DOCUMENT_NODE||e.isShadowRoot())return!1;let t=this.maxTreeDepth,i=0,n=e,s=this.rootDOMNode;for(;n&&n!==s;)i++,n=n.parentNode;return this.includeRootDOMNode&&i++,i>=t}createElementTreeElement(e,t){if(e instanceof Array)return new si(e);let i=new ne(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=!!this.selectEnabled,i}showChild(e,t){if(e.isClosingTag())return null;let i=this.visibleChildren(e.node()).indexOf(t);return i===-1?null:(i>=e.expandedChildrenLimit()&&this.setExpandedChildrenLimit(e,i+1),e.childAt(i))}visibleChildren(e){let t=[];e.adoptedStyleSheetsForNode.length&&t.push(e.adoptedStyleSheetsForNode),t.push(...ne.visibleShadowRoots(e));let i=e.contentDocument();i&&t.push(i);let n=e.templateContent();n&&t.push(n),t.push(...e.viewTransitionPseudoElements());let s=e.markerPseudoElement();s&&t.push(s);let o=e.checkmarkPseudoElement();o&&t.push(o);let a=e.beforePseudoElement();if(a&&t.push(a),t.push(...e.carouselPseudoElements()),e.childNodeCount()){let p=e.children()||[];this.showHTMLCommentsSetting.get()||(p=p.filter(u=>u.nodeType()!==Node.COMMENT_NODE)),t.push(...p)}let l=e.afterPseudoElement();l&&t.push(l);let d=e.pickerIconPseudoElement();d&&t.push(d);let h=e.interestButtonPseudoElement();h&&t.push(h);let c=e.backdropPseudoElement();return c&&t.push(c),t}hasVisibleChildren(e){return this.isMaxDepthReached(e)?!1:e.isIframe()||e.contentDocument()||e.templateContent()||ne.visibleShadowRoots(e).length||e.hasPseudoElements()||e.isInsertionPoint()?!0:!!e.childNodeCount()&&!ne.canShowInlineText(e)}createExpandAllButtonTreeElement(e){let t=j.UIUtils.createTextButton("",n.bind(this));t.value="";let i=new j.TreeOutline.TreeElement(t);return i.selectable=!1,i.button=t,i;function n(s){let o=this.visibleChildren(e.node()).length;this.setExpandedChildrenLimit(e,Math.max(o,e.expandedChildrenLimit()+Ts)),s.consume()}}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;e.treeOutline.selectedTreeElement?.hasAncestor(e)&&e.select(!0),e.removeChildren();return}console.assert(!e.isClosingTag()),this.#a(e)}insertChildElement(e,t,i,n){let s=this.createElementTreeElement(t,n);return e.insertChild(s,i),s}moveChild(e,t,i){if(e.indexOfChild(t)===i)return;let n=t.selected;t.parent&&t.parent.removeChild(t),e.insertChild(t,i),n&&t.select()}#a(e){if(this.treeElementsBeingUpdated.has(e))return;this.treeElementsBeingUpdated.add(e);let t=e.node(),i=this.visibleChildren(t),n=new Set(i),s=new Map;for(let a=e.childCount()-1;a>=0;--a){let l=e.childAt(a);if(!(l instanceof ne)){e.removeChildAtIndex(a);continue}let h=l.node();if(n.has(h)){s.set(h,l);continue}e.removeChildAtIndex(a)}for(let a=0;a<i.length&&a<e.expandedChildrenLimit();++a){let l=i[a],d=s.get(l)||this.findTreeElement(l);if(d&&d!==e)this.moveChild(e,d,a);else{let h=this.insertChildElement(e,l,a);this.updateRecordForHighlight(t)&&e.expanded&&h instanceof ne&&ne.animateOnDOMUpdate(h),e.childCount()>e.expandedChildrenLimit()&&this.setExpandedChildrenLimit(e,e.expandedChildrenLimit()+1)}}let o=e.childCount();if(i.length>o){let a=o;e.expandAllButtonElement||(e.expandAllButtonElement=this.createExpandAllButtonTreeElement(e)),e.insertChild(e.expandAllButtonElement,a),e.expandAllButtonElement.title=Zi(li.showAllNodesDMore,{PH1:i.length-o})}else e.expandAllButtonElement&&(e.expandAllButtonElement=null);if(t.isInsertionPoint())for(let a of t.distributedNodes())e.appendChild(new pt(a));if(t.nodeType()===Node.ELEMENT_NODE&&!t.pseudoType()&&e.isExpandable()&&this.insertChildElement(e,t,e.childCount(),!0),t instanceof P.DOMModel.DOMDocument&&!this.isXMLMimeType){let a=this.#e.get(t);a||(a=new ai(this,t),this.#e.set(t,a)),e.appendChild(a)}this.treeElementsBeingUpdated.delete(e)}markersChanged(e){let t=e.data,i=this.treeElementByNode.get(t);i&&i.updateDecorations()}affectedByStartingStylesFlagUpdated(e){let{node:t}=e.data,i=this.treeElementByNode.get(t);i&&ri(i.tagTypeContext)&&i.updateAdorners()}};(function(r){let e;(function(t){t.SelectedNodeChanged="SelectedNodeChanged",t.ElementsTreeUpdated="ElementsTreeUpdated",t.ShowAllRows="ShowAllRows"})(e=r.Events||(r.Events={}))})(Le||(Le={}));var zo=new Map([["\xA0","nbsp"],["\xAD","shy"],["\u2002","ensp"],["\u2003","emsp"],["\u2009","thinsp"],["\u200A","hairsp"],["\u200B","ZeroWidthSpace"],["\u200C","zwnj"],["\u200D","zwj"],["\u200E","lrm"],["\u200F","rlm"],["\u202A","#x202A"],["\u202B","#x202B"],["\u202C","#x202C"],["\u202D","#x202D"],["\u202E","#x202E"],["\u2060","NoBreak"],["\uFEFF","#xFEFF"]]);var jl={};F(jl,{LayoutPane:()=>tn});import"./../../ui/components/node_text/node_text.js";import*as Ot from"./../../core/common/common.js";import*as Zo from"./../../core/i18n/i18n.js";import*as _l from"./../../core/platform/platform.js";import*as ze from"./../../core/sdk/sdk.js";import"./../../ui/components/buttons/buttons.js";import*as mt from"./../../ui/legacy/legacy.js";import*as ph from"./../../ui/lit/lit.js";import*as Kl from"./../../ui/settings/settings.js";import*as le from"./../../ui/visual_logging/visual_logging.js";var Hl=`@scope to (devtools-widget > *){*{box-sizing:border-box;font-size:12px}.header{background-color:var(--sys-color-surface2);border-bottom:1px solid var(--sys-color-divider);line-height:1.6;overflow:hidden;padding:0 5px;white-space:nowrap}.header::marker{color:var(--sys-color-on-surface-subtle);font-size:11px;line-height:1}.header:focus{background-color:var(--sys-color-tonal-container)}.content-section{padding:16px;border-bottom:1px solid var(--sys-color-divider);overflow-x:hidden}.content-section-title{font-size:12px;font-weight:500;line-height:1.1;margin:0;padding:0}.checkbox-settings{margin-top:var(--sys-size-5);display:grid;grid-template-columns:1fr;gap:var(--sys-size-4);> div{display:flex}}devtools-checkbox{flex-shrink:unset;margin:0 6px 0 0;padding:0}.select-settings{margin-top:16px;width:fit-content}.select-label{display:flex;flex-direction:column}.select-label span{margin-bottom:4px}.elements{margin-top:12px;color:var(--sys-color-token-tag);display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));gap:8px}.element{display:flex;flex-direction:row;align-items:center;gap:8px}.show-element{flex:none}select{min-width:0;max-width:150px}.color-picker{opacity:0%}.color-picker-label{border:1px solid var(--sys-color-neutral-outline);cursor:default;display:inline-block;flex:none;height:10px;width:10px;position:relative;&:focus-within{outline:2px solid var(--sys-color-state-focus-ring);outline-offset:2px;border-radius:2px}}.color-picker-label input[type="color"]{width:100%;height:100%;position:absolute}.color-picker-label:hover,
  .color-picker-label:focus{border:1px solid var(--sys-color-outline);transform:scale(1.2)}.node-text-container{line-height:16px;padding:0 0.5ex;border-radius:5px}}
/*# sourceURL=${import.meta.resolve("./layoutPane.css")} */`;var Be={chooseElementOverlayColor:"Choose the overlay color for this element",showElementInTheElementsPanel:"Show element in the Elements panel",gridOrGridLanes:"Grid / Grid Lanes",overlayDisplaySettings:"Overlay display settings",gridOrGridLanesOverlays:"Grid / Grid Lanes overlays",noGridOrGridLanesLayoutsFoundOnThisPage:"No grid or grid lanes layouts found on this page",flexbox:"Flexbox",flexboxOverlays:"Flexbox overlays",noFlexboxLayoutsFoundOnThisPage:"No flexbox layouts found on this page",colorPickerOpened:"Color picker opened."},uh=Zo.i18n.registerUIStrings("panels/elements/LayoutPane.ts",Be),je=Zo.i18n.getLocalizedString.bind(void 0,uh),{render:mh,html:et}=ph,Wl=r=>{let e=r.getAttribute("class");return{id:r.id,color:"var(--sys-color-inverse-surface)",name:r.localName(),domId:r.getAttribute("id"),domClasses:e?e.split(/\s+/).filter(i=>!!i):void 0,enabled:!1,reveal:()=>{Ot.Revealer.reveal(r),r.scrollIntoView()},highlight:()=>{r.highlight()},hideHighlight:()=>{ze.OverlayModel.OverlayModel.hideDOMNodeHighlight(ze.TargetManager.TargetManager.instance())},toggle:i=>{throw new Error("Not implemented")},setColor(i){throw new Error("Not implemented")}}},gh=r=>r.map(e=>{let t=Wl(e),i=e.id;return{...t,color:e.domModel().overlayModel().colorOfGridInPersistentOverlay(i)||"var(--sys-color-inverse-surface)",enabled:e.domModel().overlayModel().isHighlightedGridInPersistentOverlay(i),toggle:n=>{n?e.domModel().overlayModel().highlightGridInPersistentOverlay(i):e.domModel().overlayModel().hideGridInPersistentOverlay(i)},setColor(n){this.color=n,e.domModel().overlayModel().setColorOfGridInPersistentOverlay(i,n)}}}),fh=r=>r.map(e=>{let t=Wl(e),i=e.id;return{...t,color:e.domModel().overlayModel().colorOfFlexInPersistentOverlay(i)||"var(--sys-color-inverse-surface)",enabled:e.domModel().overlayModel().isHighlightedFlexContainerInPersistentOverlay(i),toggle:n=>{n?e.domModel().overlayModel().highlightFlexContainerInPersistentOverlay(i):e.domModel().overlayModel().hideFlexContainerInPersistentOverlay(i)},setColor(n){this.color=n,e.domModel().overlayModel().setColorOfFlexInPersistentOverlay(i,n)}}});function yh(r){return r.type==="enum"}function Sh(r){return r.type==="boolean"}var Jo,Ch=(r,e,t)=>{let i=o=>{if(o.key!=="Enter"&&o.key!==" ")return;o.target.querySelector("input").click(),mt.ARIAUtils.LiveAnnouncer.alert(je(Be.colorPickerOpened)),o.preventDefault()},n=o=>{o.key===" "&&o.preventDefault()},s=o=>et`<div
          class="element"
          jslog=${le.item().track({resize:!0})}>
        <devtools-checkbox
          data-element="true"
          class="checkbox-label"
          .checked=${o.enabled}
          @change=${a=>r.onElementToggle(o,a)}
          jslog=${le.toggle().track({click:!0,resize:!0})}>
          <span
              class="node-text-container"
              data-label="true"
              @mouseenter=${a=>r.onMouseEnter(o,a)}
              @mouseleave=${a=>r.onMouseLeave(o,a)}>
            <devtools-node-text .data=${{nodeId:o.domId,nodeTitle:o.name,nodeClasses:o.domClasses}}>
            </devtools-node-text>
          </span>
        </devtools-checkbox>
        <label
            @keyup=${i}
            @keydown=${n}
            class="color-picker-label"
            style="background: ${o.color};"
            jslog=${le.showStyleEditor("color").track({click:!0})}>
          <input
              @change=${a=>r.onColorChange(o,a)}
              @input=${a=>r.onColorChange(o,a)}
              title=${je(Be.chooseElementOverlayColor)}
              tabindex="0"
              class="color-picker"
              type="color"
              value=${o.color} />
        </label>
        <devtools-button class="show-element"
           .title=${je(Be.showElementInTheElementsPanel)}
           aria-label=${je(Be.showElementInTheElementsPanel)}
           .iconName=${"select-element"}
           .jslogContext=${"elements.select-element"}
           .size=${"SMALL"}
           .variant=${"icon"}
           @click=${a=>r.onElementClick(o,a)}
           ></devtools-button>
      </div>`;mh(et`
      <div style="min-width: min-content;" jslog=${le.pane("layout").track({resize:!0})}>
        <style>${Hl}</style>
        <style>@scope to (devtools-widget > *) { ${mt.inspectorCommonStyles} }</style>
        <details open>
          <summary class="header"
            @keydown=${r.onSummaryKeyDown}
            jslog=${le.sectionHeader("grid-settings").track({click:!0})}>
            ${je(Be.gridOrGridLanes)}
          </summary>
          <div class="content-section" jslog=${le.section("grid-settings")}>
            <h3 class="content-section-title">${je(Be.overlayDisplaySettings)}</h3>
            <div class="select-settings">
              ${r.enumSettings.map(o=>et`<label data-enum-setting="true" class="select-label" title=${o.title}>
                      <select
                        data-input="true"
                        jslog=${le.dropDown().track({change:!0}).context(o.name)}
                        @change=${a=>r.onEnumSettingChange(o,a)}>
                        ${o.options.map(a=>et`<option
                                value=${a.value}
                                .selected=${o.value===a.value}
                                jslog=${le.item(_l.StringUtilities.toKebabCase(a.value)).track({click:!0})}>${a.title}</option>`)}
                      </select>
                    </label>`)}
            </div>
            <div class="checkbox-settings">
              ${r.booleanSettings.map(o=>et`<div><devtools-checkbox
                      data-boolean-setting="true"
                      class="checkbox-label"
                      title=${o.title}
                      .checked=${o.value}
                      @change=${a=>r.onBooleanSettingChange(o,a)}
                      jslog=${le.toggle().track({click:!0}).context(o.name)}>
                    ${o.title}
                  </devtools-checkbox></div>`)}
            </div>
          </div>
          ${r.gridElements?et`<div class="content-section" jslog=${le.section("grid-overlays")}>
              <h3 class="content-section-title">
                ${r.gridElements.length?je(Be.gridOrGridLanesOverlays):je(Be.noGridOrGridLanesLayoutsFoundOnThisPage)}
              </h3>
              ${r.gridElements.length?et`<div class="elements">${r.gridElements.map(s)}</div>`:""}
            </div>`:""}
        </details>
        ${r.flexContainerElements!==void 0?et`
          <details open>
            <summary
                class="header"
                @keydown=${r.onSummaryKeyDown}
                jslog=${le.sectionHeader("flexbox-overlays").track({click:!0})}>
              ${je(Be.flexbox)}
            </summary>
            ${r.flexContainerElements?et`<div class="content-section" jslog=${le.section("flexbox-overlays")}>
                <h3 class="content-section-title">
                  ${r.flexContainerElements.length?je(Be.flexboxOverlays):je(Be.noFlexboxLayoutsFoundOnThisPage)}
                </h3>
                ${r.flexContainerElements.length?et`<div class="elements">${r.flexContainerElements.map(s)}</div>`:""}
              </div>`:""}
          </details>`:""}
      </div>`,t)},tn=class r extends mt.Widget.Widget{#e=[];#n;#i;#t;constructor(e,t=Ch){super(e),this.#e=this.#l(),this.#n=Ot.Settings.Settings.instance().moduleSetting("show-ua-shadow-dom"),this.#i=[],this.#t=t}static instance(){return Jo||(Jo=new r),Jo}modelAdded(e){let t=e.overlayModel();t.addEventListener("PersistentGridOverlayStateChanged",this.requestUpdate,this),t.addEventListener("PersistentFlexContainerOverlayStateChanged",this.requestUpdate,this),this.#i.push(e)}modelRemoved(e){let t=e.overlayModel();t.removeEventListener("PersistentGridOverlayStateChanged",this.requestUpdate,this),t.removeEventListener("PersistentFlexContainerOverlayStateChanged",this.requestUpdate,this),this.#i=this.#i.filter(i=>i!==e)}async#s(e){let t=this.#n.get(),i=[];for(let n of this.#i)try{let s=await n.getNodesByStyle(e,!0);for(let o of s){let a=n.nodeForId(o);a!==null&&(t||!a.ancestorUserAgentShadowRoot())&&i.push(a)}}catch(s){console.warn(s)}return i}async#o(){return await this.#s([{name:"display",value:"grid"},{name:"display",value:"inline-grid"},{name:"display",value:"grid-lanes"},{name:"display",value:"inline-grid-lanes"}])}async#r(){return await this.#s([{name:"display",value:"flex"},{name:"display",value:"inline-flex"}])}#l(){let e=[];for(let t of["show-grid-line-labels","show-grid-track-sizes","show-grid-areas","extend-grid-lines"]){let i=Ot.Settings.Settings.instance().moduleSetting(t),n=i.get(),s=i.type();if(!s)throw new Error("A setting provided to LayoutSidebarPane does not have a setting type");if(s!=="boolean"&&s!=="enum")throw new Error("A setting provided to LayoutSidebarPane does not have a supported setting type");let o=Kl.SettingUIRegistration.maybeResolve(i.descriptor()),a={type:s,name:i.name,title:o?.title?.()??i.title()},l=o?.options?.map(d=>({value:d.value,title:d.title(),text:typeof d.text=="function"?d.text():d.text,raw:d.raw}))??i.options();typeof n=="boolean"?e.push({...a,value:n,options:l.map(d=>({...d,value:d.value}))}):typeof n=="string"&&e.push({...a,value:n,options:l.map(d=>({...d,value:d.value}))})}return e}onSettingChanged(e,t){Ot.Settings.Settings.instance().moduleSetting(e).set(t)}wasShown(){super.wasShown();for(let e of this.#e)Ot.Settings.Settings.instance().moduleSetting(e.name).addChangeListener(this.requestUpdate,this);for(let e of this.#i)this.modelRemoved(e);this.#i=[],ze.TargetManager.TargetManager.instance().observeModels(ze.DOMModel.DOMModel,this,{scoped:!0}),mt.Context.Context.instance().addFlavorChangeListener(ze.DOMModel.DOMNode,this.requestUpdate,this),this.#n.addChangeListener(this.requestUpdate,this),this.requestUpdate()}willHide(){super.willHide();for(let e of this.#e)Ot.Settings.Settings.instance().moduleSetting(e.name).removeChangeListener(this.requestUpdate,this);ze.TargetManager.TargetManager.instance().unobserveModels(ze.DOMModel.DOMModel,this),mt.Context.Context.instance().removeFlavorChangeListener(ze.DOMModel.DOMNode,this.requestUpdate,this),this.#n.removeChangeListener(this.requestUpdate,this)}#c(e){if(!e.target)return;let i=e.target.parentElement;if(!i)throw new Error("<details> element is not found for a <summary> element");switch(e.key){case"ArrowLeft":i.open=!1;break;case"ArrowRight":i.open=!0;break}}async performUpdate(){let e={gridElements:gh(await this.#o()),flexContainerElements:fh(await this.#r()),onEnumSettingChange:this.#a.bind(this),onElementClick:this.#g.bind(this),onColorChange:this.#f.bind(this),onMouseLeave:this.#C.bind(this),onMouseEnter:this.#u.bind(this),onElementToggle:this.#m.bind(this),onBooleanSettingChange:this.#h.bind(this),enumSettings:this.#p(),booleanSettings:this.#d(),onSummaryKeyDown:this.#c.bind(this)};this.#t(e,{},this.contentElement)}#p(){return this.#e.filter(yh)}#d(){return this.#e.filter(Sh)}#h(e,t){t.preventDefault(),this.onSettingChanged(e.name,t.target.checked)}#a(e,t){t.preventDefault(),this.onSettingChanged(e.name,t.target.value)}#m(e,t){t.preventDefault(),e.toggle(t.target.checked)}#g(e,t){t.preventDefault(),e.reveal()}#f(e,t){t.preventDefault(),e.setColor(t.target.value),this.requestUpdate()}#u(e,t){t.preventDefault(),e.highlight()}#C(e,t){t.preventDefault(),e.hideHighlight()}};var Gl={};F(Gl,{MetricsSidebarPane:()=>sn});import*as Rt from"./../../core/common/common.js";import*as di from"./../../core/platform/platform.js";import*as Ms from"./../../core/sdk/sdk.js";import*as ci from"./../../ui/legacy/legacy.js";import{Directives as Eh,html as nn,nothing as vh,render as bh}from"./../../ui/lit/lit.js";import*as kt from"./../../ui/visual_logging/visual_logging.js";var zl=`.metrics{padding:8px;font-size:10px;text-align:center;white-space:nowrap;height:var(--metrics-height);display:flex;flex-direction:column;align-items:center;justify-content:center;--override-box-model-separator-color:var(--ref-palette-neutral0);--override-box-model-text-color:var(--ref-palette-neutral10)}:host{--metrics-height:190px}.metrics.collapsed{height:0;padding:0}:host-context(.platform-windows){--metrics-height:214px}.metrics .label{position:absolute;font-size:10px;left:4px}.metrics .position{border:1px var(--sys-color-token-subtle) dotted;background-color:var(--sys-color-cdt-base-container);display:inline-block;text-align:center;padding:3px;margin:3px;position:relative}.metrics .margin{border:1px dashed var(--override-box-model-separator-color);background-color:var(--sys-color-cdt-base-container);display:inline-block;text-align:center;vertical-align:middle;padding:3px 6px;margin:3px;position:relative}.metrics .border{border:1px solid var(--override-box-model-separator-color);background-color:var(--sys-color-cdt-base-container);display:inline-block;text-align:center;vertical-align:middle;padding:3px 6px;margin:3px;position:relative}.metrics .padding{border:1px dashed var(--override-box-model-separator-color);background-color:var(--sys-color-cdt-base-container);display:inline-block;text-align:center;vertical-align:middle;padding:3px 6px;margin:3px;position:relative;min-width:120px}.metrics .content{position:static;border:1px solid var(--override-box-model-separator-color);background-color:var(--sys-color-cdt-base-container);display:inline-block;text-align:center;vertical-align:middle;padding:3px;margin:3px;min-width:80px;overflow:visible}.metrics .content span{display:inline-block}.metrics .editing{position:relative;z-index:100;cursor:text}.metrics .left{display:inline-block;vertical-align:middle}.metrics .right{display:inline-block;vertical-align:middle}.metrics .top{display:inline-block}.metrics .bottom{display:inline-block}:host-context(.theme-with-dark-background) .margin:hover,
:host-context(.theme-with-dark-background) .margin:hover *{border-color:var(--sys-color-token-subtle)}.metrics .highlighted:not(.position) > *:not(.border, .padding, .content){color:var(--override-box-model-text-color)}
/*# sourceURL=${import.meta.resolve("./metricsSidebarPane.css")} */`;var{live:er}=Eh,wh=(r,e,t)=>{let{style:i,highlightedMode:n,node:s,contentWidth:o,contentHeight:a,onHighlightNode:l,onStartEditing:d}=r;function h(w,b,y,x){let I=(b!=="position"?b+"-":"")+y+x,L=w.get(I);return(L===""||b!=="position"&&L==="unset"||b==="position"&&L==="auto")&&(L="\u2012"),L=L?.replace(/px$/,""),L=L&&di.NumberUtilities.toFixedIfFloating(L),nn`<div class=${y} jslog=${kt.value(I).track({dblclick:!0,keydown:"Enter|Escape|ArrowUp|ArrowDown|PageUp|PageDown",change:!0})}
        @dblclick=${fe=>d(fe.currentTarget,b,I,w)}
        .innerText=${er(L??"")}>
    </div>`}let c=new Set(["table-cell","table-column","table-column-group","table-footer-group","table-header-group","table-row","table-row-group"]),p=new Set(["table-column","table-column-group","table-footer-group","table-header-group","table-row","table-row-group"]),u=new Set(["static"]),g=["content","padding","border","margin","position"],m=[Rt.Color.PageHighlight.Content,Rt.Color.PageHighlight.Padding,Rt.Color.PageHighlight.Border,Rt.Color.PageHighlight.Margin,Rt.Color.Legacy.fromRGBA([0,0,0,0])],f=["content","padding","border","margin","position"],T=vh;for(let w=0;w<g.length;++w){let b=g[w],y=i.get("display"),x=i.get("position");if(!y||!x||b==="margin"&&c.has(y)||b==="padding"&&p.has(y)||b==="position"&&u.has(x))continue;let I=!s||n==="all"||b===n,L=m[w].asString("rgba")||"",fe=b==="border"?"-width":"";T=nn`
      <div
          class="${b} ${I?"highlighted":""}"
          style="background-color: ${I?L:""}"
          jslog=${kt.metricsBox().context(b).track({hover:!0})}
          @mouseover=${ke=>{ke.consume(),l(!0,b==="position"?"all":b)}}>
      ${b==="content"?nn`
        <span jslog=${kt.value("width").track({dblclick:!0,keydown:"Enter|Escape|ArrowUp|ArrowDown|PageUp|PageDown",change:!0})}
            @dblclick=${ke=>d(ke.currentTarget,"width","width",i)}
            .innerText=${er(o)}>
        </span>
        <span> × </span>
        <span jslog=${kt.value("height").track({dblclick:!0,keydown:"Enter|Escape|ArrowUp|ArrowDown|PageUp|PageDown",change:!0})}
            @dblclick=${ke=>d(ke.currentTarget,"height","height",i)}
            .innerText=${er(a)}>
        </span>`:nn`
        <div class="label">${f[w]}</div>
          ${h(i,b,"top",fe)}
          <br>
          ${h(i,b,"left",fe)}
          ${T}
          ${h(i,b,"right",fe)}
          <br>
          ${h(i,b,"bottom",fe)}`}
        </div>`}bh(nn`
    <div class="metrics ${s?"":"collapsed"}" @mouseover=${w=>{w.consume(),l(!0,"all")}}
        @mouseleave=${w=>{w.consume(),l(!1,"all")}}>
      ${T}
    </div>`,t,{container:{classes:["flex-none"],attributes:{jslog:`${kt.section("styles-metrics")}`}}})},sn=class extends $t{originalPropertyData;previousPropertyDataCandidate;inlineStyle;highlightMode;computedStyle;boxModelInternal=null;isEditingMetrics;view;constructor(e,t=wh){super(e,{useShadowDom:"pure"}),this.registerRequiredCSS(zl),this.originalPropertyData=null,this.previousPropertyDataCandidate=null,this.inlineStyle=null,this.highlightMode="",this.computedStyle=null,this.boxModelInternal=null,this.view=t}async performUpdate(){if(this.isEditingMetrics)return await Promise.resolve();let e=this.node(),t=this.cssModel();if(!e||e.nodeType()!==Node.ELEMENT_NODE||!t)return this.view({style:new Map,highlightedMode:"",node:null,contentWidth:"",contentHeight:"",onHighlightNode:()=>{},onStartEditing:()=>{}},void 0,this.contentElement),await Promise.resolve();if(!e.id)return await Promise.resolve();let[i,n,s]=await Promise.all([t.getComputedStyle(e.id),e.boxModel().catch(()=>null),t.getInlineStyles(e.id)]);if(!i||this.node()!==e){this.computedStyle=null,this.boxModelInternal=null;return}this.computedStyle=i,this.boxModelInternal=n,s&&this.node()===e&&(this.inlineStyle=s.inlineStyle),this.updateMetrics(i,"all",n)}onCSSModelChanged(){this.requestUpdate()}getPropertyValueAsPx(e,t){let i=e.get(t);return i?Number(i.replace(/px$/,"")||0):0}getBox(e,t){let i=t==="border"?"-width":"",n=this.getPropertyValueAsPx(e,t+"-left"+i),s=this.getPropertyValueAsPx(e,t+"-top"+i),o=this.getPropertyValueAsPx(e,t+"-right"+i),a=this.getPropertyValueAsPx(e,t+"-bottom"+i);return{left:n,top:s,right:o,bottom:a}}highlightDOMNode(e,t){let i=this.node();if(e&&i){if(this.highlightMode===t)return;this.highlightMode=t,i.highlight(t)}else this.highlightMode="",Ms.OverlayModel.OverlayModel.hideDOMNodeHighlight(Ms.TargetManager.TargetManager.instance());this.computedStyle&&this.updateMetrics(this.computedStyle,t,this.boxModelInternal)}isDOMQuad(e){return!!(e&&e.length===8)}computeQuadWidth(e){let t=Math.hypot(e[2]-e[0],e[3]-e[1]),i=Math.hypot(e[4]-e[6],e[5]-e[7]);return(t+i)/2}computeQuadHeight(e){let t=Math.hypot(e[6]-e[0],e[7]-e[1]),i=Math.hypot(e[4]-e[2],e[5]-e[3]);return(t+i)/2}getContentAreaWidthPx(e,t){if(t&&this.isDOMQuad(t.content)){let s=this.computeQuadWidth(t.content);return di.NumberUtilities.toFixedIfFloating(s.toString())}let i=e.get("width");if(!i)return"";i=i.replace(/px$/,"");let n=Number(i);if(!isNaN(n)&&e.get("box-sizing")==="border-box"){let s=this.getBox(e,"border"),o=this.getBox(e,"padding");i=(n-s.left-s.right-o.left-o.right).toString()}return di.NumberUtilities.toFixedIfFloating(i)}getContentAreaHeightPx(e,t){if(t&&this.isDOMQuad(t.content)){let s=this.computeQuadHeight(t.content);return di.NumberUtilities.toFixedIfFloating(s.toString())}let i=e.get("height");if(!i)return"";i=i.replace(/px$/,"");let n=Number(i);if(!isNaN(n)&&e.get("box-sizing")==="border-box"){let s=this.getBox(e,"border"),o=this.getBox(e,"padding");i=(n-s.top-s.bottom-o.top-o.bottom).toString()}return di.NumberUtilities.toFixedIfFloating(i)}updateMetrics(e,t="all",i){let n=i??this.boxModelInternal;this.view({style:e,highlightedMode:t,node:this.node(),contentWidth:this.getContentAreaWidthPx(e,n),contentHeight:this.getContentAreaHeightPx(e,n),onHighlightNode:this.highlightDOMNode.bind(this),onStartEditing:this.startEditing.bind(this)},void 0,this.contentElement)}startEditing(e,t,i,n){if(ci.UIUtils.isBeingEdited(e))return;let 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;let a=new ci.InplaceEditor.Config(this.editingCommitted.bind(this),this.editingCancelled.bind(this),s);ci.InplaceEditor.InplaceEditor.startEditing(e,a),e.getComponentSelection()?.selectAllChildren(e)}handleKeyDown(e,t){let i=t.currentTarget;function n(o,a){this.applyUserInput(i,a,o,e,!1)}function s(o,a,l){return e.styleProperty!=="margin"&&a<0&&(a=0),o+a+l}ci.UIUtils.handleElementValueModifications(t,i,n.bind(this),void 0,s)}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{let i=this.inlineStyle.pastLastSourcePropertyIndex();i&&this.inlineStyle.allProperties()[i-1].setText("",!1)}this.editingEnded(e,t),this.requestUpdate()}applyUserInput(e,t,i,n,s){if(!this.inlineStyle)return this.editingCancelled(e,n);if(s&&t===i)return this.editingCancelled(e,n);n.box!=="position"&&(!t||t==="\u2012"||t==="-")?t="unset":n.box==="position"&&(!t||t==="\u2012"||t==="-")&&(t="auto"),t=t.toLowerCase(),/^\d+$/.test(t)&&(t+="px");let o=n.styleProperty,a=n.computedStyle;if(a.get("box-sizing")==="border-box"&&(o==="width"||o==="height")){if(!t.match(/px$/)){Rt.Console.Console.instance().error("For elements with box-sizing: border-box, only absolute content area dimensions can be applied");return}let h=this.getBox(a,"border"),c=this.getBox(a,"padding"),p=Number(t.replace(/px$/,""));if(isNaN(p))return;o==="width"?p+=h.left+h.right+c.left+c.right:p+=h.top+h.bottom+c.top+c.bottom,t=p+"px"}this.previousPropertyDataCandidate=null;let l=this.inlineStyle.allProperties();for(let h=0;h<l.length;++h){let c=l[h];if(!(c.name!==n.styleProperty||c.parsedOk&&!c.activeInStyle())){this.previousPropertyDataCandidate=c,c.setValue(t,s,!0,d.bind(this));return}}this.inlineStyle.appendProperty(n.styleProperty,t,d.bind(this));function d(h){if(h){if(this.originalPropertyData||(this.originalPropertyData=this.previousPropertyDataCandidate),this.highlightMode){let c=this.node();if(!c)return;c.highlight(this.highlightMode)}s&&this.requestUpdate()}}}editingCommitted(e,t,i,n){this.editingEnded(e,n),this.applyUserInput(e,t,i,n,!0)}};var Ql={};F(Ql,{DEFAULT_VIEW:()=>Yl,PlatformFontsWidget:()=>on});import*as nr from"./../../core/i18n/i18n.js";import"./../../models/computed_style/computed_style.js";import*as ql from"./../../ui/legacy/legacy.js";import{html as ir,render as xh}from"./../../ui/lit/lit.js";var tr=`@scope to (devtools-widget > *){:scope{user-select:text}.platform-fonts{flex-shrink:0}.font-usage{color:var(--sys-color-token-subtle);padding-left:3px}.title{padding:0 5px;border-top:1px solid;border-bottom:1px solid;border-color:var(--sys-color-divider);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;height:24px;background-color:var(--sys-color-surface2);display:flex;align-items:center}.font-stats-item{padding:5px 1em;div{margin-bottom:2px}&:not(:last-child){border-bottom:1px solid var(--sys-color-divider)}}}
/*# sourceURL=${import.meta.resolve("./platformFontsWidget.css")} */`;var Ut={renderedFonts:"Rendered Fonts",familyName:"Family name",postScriptName:"PostScript name",fontOrigin:"Font origin",networkResource:"Network resource",localFile:"Local file",dGlyphs:"{n, plural, =1 {(# glyph)} other {(# glyphs)}}"},Th=nr.i18n.registerUIStrings("panels/elements/PlatformFontsWidget.ts",Ut),qt=nr.i18n.getLocalizedString.bind(void 0,Th),Yl=(r,e,t)=>{let i=!r.platformFonts?.length;xh(ir`
    <style>${tr}</style>
    <div class="platform-fonts">
      ${i?"":ir`
        <div class="title">${qt(Ut.renderedFonts)}</div>
        <div class="stats-section">
          ${r.platformFonts?.map(n=>{let s=n.isCustomFont?qt(Ut.networkResource):qt(Ut.localFile),o=n.glyphCount;return ir`
              <div class="font-stats-item">
                <div><span class="font-property-name">${qt(Ut.familyName)}</span>: ${n.familyName}</div>
                <div><span class="font-property-name">${qt(Ut.postScriptName)}</span>: ${n.postScriptName}</div>
                <div><span class="font-property-name">${qt(Ut.fontOrigin)}</span>: ${s}<span class="font-usage">${qt(Ut.dGlyphs,{n:o})}</span></div>
              </div>
            `})}
        </div>
      `}
    </div>`,t)},on=class extends ql.Widget.VBox{#e;#n=null;constructor(e,t=Yl){super(e,{useShadowDom:!0}),this.#e=t,this.registerRequiredCSS(tr)}get sharedModel(){return this.#n}set sharedModel(e){e!==this.sharedModel&&(this.sharedModel?.removeEventListener("CSSModelChanged",this.requestUpdate,this),this.sharedModel?.removeEventListener("ComputedStyleChanged",this.requestUpdate,this),e.addEventListener("CSSModelChanged",this.requestUpdate,this),e.addEventListener("ComputedStyleChanged",this.requestUpdate,this)),this.#n=e,this.requestUpdate()}async performUpdate(){let e=this.#n?.cssModel(),t=this.#n?.node;if(!t||!e){this.#e({platformFonts:null},{},this.contentElement);return}let n=(await e.getPlatformFonts(t.id))?.sort((s,o)=>o.glyphCount-s.glyphCount)||null;this.#e({platformFonts:n},{},this.contentElement)}};var oe={findByStringSelectorOrXpath:"Find by string, selector, or `XPath`",showComputedStylesSidebar:"Show Computed Styles sidebar",hideComputedStylesSidebar:"Hide Computed Styles sidebar",computedStylesShown:"Computed Styles sidebar shown",computedStylesHidden:"Computed Styles sidebar hidden",computed:"Computed",styles:"Styles",openInElementsPanel:"Open in Elements panel",nodeCannotBeFoundInTheCurrent:"Node cannot be found in the current page.",theRemoteObjectCouldNotBe:"The remote object could not be resolved to a valid node.",theDeferredDomNodeCouldNotBe:"The deferred `DOM` Node could not be resolved to a valid node.",elementStateS:"Element state: {PH1}",sidePanelToolbar:"Side panel toolbar",sidePanelContent:"Side panel content",domTreeExplorer:"DOM tree explorer",adornerSettings:"Badge settings"},Ih=hr.i18n.registerUIStrings("panels/elements/ElementsPanel.ts",oe),de=hr.i18n.getLocalizedString.bind(void 0,Ih),sr,Mh=100,D=class r extends k.Panel.Panel{splitWidget;#e;mainContainer;domTreeContainer;splitMode;accessibilityTreeView;breadcrumbs;stylesWidget;#n;metricsWidget;searchResults;currentSearchResultIndex;pendingNodeReveal;adornerManager;adornersByName;accessibilityTreeButton;domTreeButton;selectedNodeOnReset;hasNonDefaultSelectedNode;#i=0;searchConfig;omitDefaultSelection;notFirstInspectElement;sidebarPaneView;stylesViewToReveal;nodeInsertedTaskRunner={queue:Promise.resolve(),run(e){this.queue=this.queue.then(e)}};cssStyleTrackerByCSSModel;#t;#s;#o;#r;get settings(){return this.#r}get targetManager(){return this.#o}getTreeOutlineForTesting(){return this.#t.getTreeOutlineForTesting()}constructor(e,t){super("elements"),this.#o=e??V.TargetManager.TargetManager.instance(),this.#r=t??Ft.Settings.Settings.instance(),this.registerRequiredCSS(Ja),this.splitWidget=new k.SplitWidget.SplitWidget(!0,!0,"elements-panel-split-view-state",325,325),this.splitWidget.addEventListener("SidebarSizeChanged",this.updateTreeOutlineVisibleWidth.bind(this)),this.splitWidget.show(this.element),this.#e=new k.SearchableView.SearchableView(this,null),this.#e.setMinimalSearchQuerySize(0),this.#e.setMinimumSize(25,28),this.#e.setPlaceholder(de(oe.findByStringSelectorOrXpath));let i=this.#e.element;this.mainContainer=document.createElement("div"),this.domTreeContainer=document.createElement("div");let n=document.createElement("div");this.mainContainer.appendChild(this.domTreeContainer),i.appendChild(this.mainContainer),i.appendChild(n),k.ARIAUtils.markAsMain(this.domTreeContainer),k.ARIAUtils.setLabel(this.domTreeContainer,de(oe.domTreeExplorer)),this.splitWidget.setMainWidget(this.#e),this.splitMode=null,this.mainContainer.id="main-content",this.domTreeContainer.id="elements-content",this.domTreeContainer.tabIndex=-1,this.#r.moduleSetting("dom-word-wrap").get()&&this.domTreeContainer.classList.add("elements-wrap"),this.#r.moduleSetting("dom-word-wrap").addChangeListener(this.domWordWrapSettingChanged.bind(this)),n.id="elements-crumbs",this.accessibilityTreeView=new fi,this.breadcrumbs=new Ns.ElementsBreadcrumbs.ElementsBreadcrumbs,this.breadcrumbs.addEventListener("breadcrumbsnodeselected",s=>{this.crumbNodeSelected(s)}),n.appendChild(this.breadcrumbs),this.#s=new Zl.ComputedStyleModel.ComputedStyleModel(k.Context.Context.instance().flavor(V.DOMModel.DOMNode)),k.Context.Context.instance().addFlavorChangeListener(V.DOMModel.DOMNode,s=>{this.#s.node=s.data,this.evaluateTrackingComputedStyleUpdatesForNode()}),k.Context.Context.instance().addFlavorChangeListener(Mt,this.evaluateTrackingComputedStyleUpdatesForNode,this),this.stylesWidget=new Mt(this.#s),this.#n=new Wi,this.#s.addEventListener("ComputedStyleChanged",this.#l,this),this.#s.addEventListener("CSSModelChanged",this.#l,this),this.metricsWidget=new sn(this.#s),this.#r.moduleSetting("sidebar-position").addChangeListener(this.updateSidebarPosition.bind(this)),this.updateSidebarPosition(),this.cssStyleTrackerByCSSModel=new Map,this.currentSearchResultIndex=-1,this.pendingNodeReveal=!1,this.adornerManager=new Ns.AdornerManager.AdornerManager(this.#r.moduleSetting("adorner-settings")),this.adornersByName=new Map,this.#t=new en,this.#t.omitRootDOMNode=!0,this.#t.selectEnabled=!0,this.#t.onSelectedNodeChanged=this.selectedNodeChanged.bind(this),this.#t.onElementsTreeUpdated=this.updateBreadcrumbIfNeeded.bind(this),this.#t.onDocumentUpdated=this.documentUpdated.bind(this),this.#t.setWordWrap(this.#r.moduleSetting("dom-word-wrap").get()),this.#o.observeModels(V.DOMModel.DOMModel,this,{scoped:!0}),this.#o.addModelListener(V.ResourceTreeModel.ResourceTreeModel,V.ResourceTreeModel.Events.PrimaryPageChanged,this.onPrimaryPageChanged,this,{scoped:!0}),this.#r.moduleSetting("show-ua-shadow-dom").addChangeListener(this.showUAShadowDOMChanged.bind(this)),rr.ExtensionServer.ExtensionServer.instance().addEventListener("SidebarPaneAdded",this.extensionSidebarPaneAdded,this)}evaluateTrackingComputedStyleUpdatesForNode=Ft.Debouncer.debounce(()=>{let e=k.Context.Context.instance().flavor(V.DOMModel.DOMNode);if(!e)return;let t=this.#n.isShowing(),i=!!k.Context.Context.instance().flavor(Mt),n=t||i&&Jl.Runtime.hostConfig.devToolsAnimationStylesInStylesTab?.enabled;e.domModel()?.cssModel()?.trackComputedStyleUpdatesForNode(n?e.id:void 0)},100);async#l(){let e=await this.#s.fetchComputedStyle(),t=await this.#s.fetchMatchedCascade();this.#n.nodeStyle=e,this.#n.matchedStyles=t,t&&(this.#n.propertyTraces=this.#s.computePropertyTraces(t))}showAccessibilityTree(){if(this.accessibilityTreeView){this.splitWidget.setMainWidget(this.accessibilityTreeView);let e=k.ActionRegistry.ActionRegistry.instance().getAction("elements.toggle-a11y-tree");e&&e.setToggled(!0)}}showDOMTree(){this.splitWidget.setMainWidget(this.#e);let e=k.ActionRegistry.ActionRegistry.instance().getAction("elements.toggle-a11y-tree");e&&e.setToggled(!1);let t=this.selectedDOMNode();t&&this.#t.selectDOMNodeWithoutReveal(t)}toggleAccessibilityTree(){this.splitWidget.mainWidget()===this.accessibilityTreeView?this.showDOMTree():this.showAccessibilityTree()}static instance(e={forceNew:null}){let{forceNew:t,targetManager:i,settings:n}=e||{};return(!sr||t)&&(sr=new r(i,n)),sr}revealProperty(e){return!this.sidebarPaneView||!this.stylesViewToReveal?Promise.resolve():this.sidebarPaneView.showView(this.stylesViewToReveal).then(()=>{this.stylesWidget.revealProperty(e)})}resolveLocation(e){return this.sidebarPaneView||null}showToolbarPane(e,t){this.stylesWidget.showToolbarPane(e,t)}modelAdded(e){this.setupStyleTracking(e.cssModel()),this.#t.modelAdded(e),this.isShowing()&&this.wasShown(),this.domTreeContainer.hasFocus()&&this.#t.focus(),e.addEventListener(V.DOMModel.Events.DocumentUpdated,this.documentUpdatedEvent,this),e.addEventListener(V.DOMModel.Events.NodeInserted,this.handleNodeInserted,this)}modelRemoved(e){e.removeEventListener(V.DOMModel.Events.DocumentUpdated,this.documentUpdatedEvent,this),e.removeEventListener(V.DOMModel.Events.NodeInserted,this.handleNodeInserted,this),this.#t.modelRemoved(e),e.parentModel()||this.#t.detach(),this.removeStyleTracking(e.cssModel())}handleNodeInserted(e){this.nodeInsertedTaskRunner.run(async()=>{let t=e.data;if(!t.isViewTransitionPseudoNode())return;let i=t.domModel().cssModel(),n=await i.requestViaInspectorStylesheet(t.frameId());if(!n)return;let s=await i.getStyleSheetText(n.id);s?.includes(`${t.simpleSelector()} {`)||await i.setStyleSheetText(n.id,`${s}
${t.simpleSelector()} {}`,!1)})}onPrimaryPageChanged(e){let{frame:t,type:i}=e.data;if(i==="Activation"){let n=t.resourceTreeModel().target().model(V.DOMModel.DOMModel);n&&!n.parentModel()&&this.#t.show(this.domTreeContainer)}}updateTreeOutlineVisibleWidth(){let e=this.splitWidget.element.offsetWidth;this.splitWidget.isVertical()&&(e-=this.splitWidget.sidebarSize()),this.#t.visibleWidth=e}focus(){this.#t.empty()?this.domTreeContainer.focus():this.#t.focus()}searchableView(){return this.#e}wasShown(){super.wasShown(),k.Context.Context.instance().setFlavor(r,this),this.#t.show(this.domTreeContainer),this.evaluateTrackingComputedStyleUpdatesForNode()}willHide(){V.OverlayModel.OverlayModel.hideDOMNodeHighlight(V.TargetManager.TargetManager.instance()),this.evaluateTrackingComputedStyleUpdatesForNode(),this.#t.detach(),super.willHide(),k.Context.Context.instance().setFlavor(r,null)}onResize(){this.element.window().requestAnimationFrame(this.updateSidebarPosition.bind(this)),this.updateTreeOutlineVisibleWidth()}selectedNodeChanged(e){let t=e.data.node;t?.pseudoType()&&!t.parentNode&&(t=null);let{focus:i}=e.data;if(t||this.#t.selectDOMNode(null),t){let o=[t];for(let a=t.parentNode;a;a=a.parentNode)o.push(a);this.breadcrumbs.data={crumbs:o,selectedNode:t},this.accessibilityTreeView&&this.accessibilityTreeView.selectedNodeChanged(t)}else this.breadcrumbs.data={crumbs:[],selectedNode:null};if(k.Context.Context.instance().setFlavor(V.DOMModel.DOMNode,t),!t)return;t.canInspectNode()&&t.setAsInspectedNode(),i&&(this.selectedNodeOnReset=t,this.hasNonDefaultSelectedNode=!0,this.#i++);let n=t.domModel().runtimeModel().executionContexts(),s=t.frameId();for(let o of n)if(o.frameId===s){k.Context.Context.instance().setFlavor(V.RuntimeModel.ExecutionContext,o);break}}documentUpdatedEvent(e){let t=e.data;this.documentUpdated(t),this.removeStyleTracking(t.cssModel()),this.setupStyleTracking(t.cssModel())}documentUpdated(e){if(this.#e.cancelSearch(),!e.existingDocument()){this.isShowing()&&e.requestDocument();return}if(this.hasNonDefaultSelectedNode=!1,this.omitDefaultSelection)return;let t=this.selectedNodeOnReset;this.restoreSelectedNodeAfterUpdate(e,this.selectedNodeOnReset||null,t)}async restoreSelectedNodeAfterUpdate(e,t,i){if(!t){this.trySetFallbackSelection(e);return}let n=t.path(),s=!1,o=[0,250,500,1e3,1500],a=this.#i;for(let l=0;l<o.length;++l){if(i!==this.selectedNodeOnReset||this.hasNonDefaultSelectedNode||this.pendingNodeReveal||a!==this.#i||(o[l]&&await new Promise(h=>window.setTimeout(h,o[l])),i!==this.selectedNodeOnReset)||this.hasNonDefaultSelectedNode||this.pendingNodeReveal||a!==this.#i)return;let d=await this.resolveNodeForRestoration(e,n);if(d){this.setDefaultSelectedNode(d),this.lastSelectedNodeSelectedForTest();return}if(!s){if(!this.trySetFallbackSelection(e))return;s=!0}}}async resolveNodeForRestoration(e,t){try{if(t){let i=await e.pushNodeByPathToFrontend(t),n=e.nodeForId(i);if(n)return n}}catch{}return null}trySetFallbackSelection(e){let t=e.existingDocument(),i=t?t.body||t.documentElement:null;return i?(this.setDefaultSelectedNode(i),this.lastSelectedNodeSelectedForTest(),!0):!1}cancelPendingRestoration(){this.#i++}lastSelectedNodeSelectedForTest(){}setDefaultSelectedNode(e){!e||this.hasNonDefaultSelectedNode||this.pendingNodeReveal||(this.selectDOMNode(e),this.#t.expand())}onSearchClosed(){let e=this.selectedDOMNode();e&&this.#t.selectDOMNodeWithoutReveal(e)}onSearchCanceled(){this.searchConfig=void 0,this.hideSearchHighlights(),this.#e.updateSearchMatchesCount(0),this.currentSearchResultIndex=-1,delete this.searchResults,V.DOMModel.DOMModel.cancelSearch(this.#o)}performSearch(e,t,i){let n=e.query,s=n.trim();if(!s.length)return;this.searchConfig?.query!==n?this.onSearchCanceled():this.hideSearchHighlights(),this.searchConfig=e;let o=this.#r.moduleSetting("show-ua-shadow-dom").get(),a=this.#o.models(V.DOMModel.DOMModel,{scoped:!0}),l=a.map(d=>d.performSearch(s,o));Promise.all(l).then(d=>{this.searchResults=[];for(let c=0;c<d.length;++c){let p=d[c];for(let u=0;u<p;++u)this.searchResults.push({domModel:a[c],index:u,node:void 0})}if(this.#e.updateSearchMatchesCount(this.searchResults.length),!this.searchResults.length)return;this.currentSearchResultIndex>=this.searchResults.length&&(this.currentSearchResultIndex=-1);let h=this.currentSearchResultIndex;t&&(this.currentSearchResultIndex===-1?h=i?-1:0:h=i?h-1:h+1,this.jumpToSearchResult(h))})}domWordWrapSettingChanged(e){this.domTreeContainer.classList.toggle("elements-wrap",e.data),this.#t.setWordWrap(e.data)}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}supportsWholeWordSearch(){return!1}supportsRegexSearch(){return!1}highlightCurrentSearchResult(){let e=this.currentSearchResultIndex,t=this.searchResults;if(!t)return;let i=t[e];if(this.#e.updateCurrentMatchIndex(e),i.node!==null){if(typeof i.node>"u"){i.domModel.searchResult(i.index).then(n=>{i.node=n,this.searchConfig&&this.searchResults&&this.currentSearchResultIndex!==-1&&this.highlightCurrentSearchResult()});return}i.node.scrollIntoView(),i.node&&this.#t.highlightMatch(i.node,this.searchConfig?.query)}}hideSearchHighlights(){if(!this.searchResults?.length||this.currentSearchResultIndex===-1)return;let e=this.searchResults[this.currentSearchResultIndex];e.node&&this.#t.hideMatchHighlights(e.node)}selectedDOMNode(){return this.#t.selectedDOMNode()}selectDOMNode(e,t){this.#t.selectDOMNode(e,t)}highlightNodeAttribute(e,t){this.#t.highlightNodeAttribute(e,t)}selectAndShowSidebarTab(e){this.sidebarPaneView&&(this.sidebarPaneView.tabbedPane().selectTab(e),this.isShowing()||k.ViewManager.ViewManager.instance().showView("elements"))}updateBreadcrumbIfNeeded(e){let t=e.data,i=this.selectedDOMNode();if(!i){this.breadcrumbs.data={crumbs:[],selectedNode:null};return}let n=[i];for(let a=i.parentNode;a;a=a.parentNode)n.push(a);let s=new Map;t.forEach(a=>s.set(a.id,a));let o=n.map(a=>s.get(a.id)||a);this.breadcrumbs.data={crumbs:o,selectedNode:i}}crumbNodeSelected(e){this.selectDOMNode(e.node,!0)}leaveUserAgentShadowDOM(e){let t;for(;(t=e.ancestorUserAgentShadowRoot())&&t.parentNode;)e=t.parentNode;return e}async revealAndSelectNode(e,t){let{showPanel:i=!0,focusNode:n=!1,highlightInOverlay:s=!0}=t??{};this.omitDefaultSelection=!0;let o=this.#r.moduleSetting("show-ua-shadow-dom").get()?e:this.leaveUserAgentShadowDOM(e);s&&o.highlightForTwoSeconds(),this.accessibilityTreeView&&this.accessibilityTreeView.revealAndSelectNode(e),i&&await k.ViewManager.ViewManager.instance().showView("elements",!1,!n),this.selectDOMNode(o,n),delete this.omitDefaultSelection,this.notFirstInspectElement||(r.firstInspectElementNodeNameForTest=o.nodeName(),r.firstInspectElementCompletedForTest(),Xl.InspectorFrontendHost.InspectorFrontendHostInstance.inspectElementCompleted()),this.notFirstInspectElement=!0}async revealAndSelectAdoptedStyleSheet(e,t){let{showPanel:i=!0,focusNode:n=!1}=t??{};this.omitDefaultSelection=!0,i&&await k.ViewManager.ViewManager.instance().showView("elements",!1,!n),this.selectDOMNode(e,n),delete this.omitDefaultSelection}showUAShadowDOMChanged(){this.#t.reload()}setupTextSelectionHack(e){let t=n.bind(this),i=s=>{s.buttons===0&&n.call(this)};e.addEventListener("mousedown",s=>{if(s.button!==0)return;this.splitWidget.element.classList.add("disable-resizer-for-elements-hack"),e.style.setProperty("height",`${e.offsetHeight}px`);let o=1e6;e.style.setProperty("left",`${-1*o}px`),e.style.setProperty("padding-left",`${o}px`),e.style.setProperty("width",`calc(100% + ${o}px)`),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);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)}}initializeSidebarPanes(e){this.splitWidget.setVertical(e==="Vertical"),this.showToolbarPane(null,null);let t=new k.Widget.VBox;t.element.classList.add("style-panes-wrapper"),t.element.setAttribute("jslog",`${rn.pane("styles").track({resize:!0})}`),this.stylesWidget.show(t.element),this.setupTextSelectionHack(t.element);let i=new k.Widget.VBox;i.element.classList.add("style-panes-wrapper","computed-styles-pane-wrapper"),i.element.setAttribute("jslog",`${rn.pane("computed").track({resize:!0})}`),this.#n.element.classList.add("computed-styles-wrapper"),this.#n.show(i.element);let n=new on;n.element.classList.add("platform-fonts-wrapper"),n.sharedModel=this.#s,n.show(i.element);let s=new k.SplitWidget.SplitWidget(!0,!0,"elements.styles.sidebar.width",100);s.setMainWidget(t),s.hideSidebar(),s.enableShowModeSaving(),s.addEventListener("ShowModeChanged",()=>{a()}),this.stylesWidget.addEventListener("InitialUpdateCompleted",()=>{this.stylesWidget.appendToolbarItem(s.createShowHideSidebarButton(de(oe.showComputedStylesSidebar),de(oe.hideComputedStylesSidebar),de(oe.computedStylesShown),de(oe.computedStylesHidden),"computed-styles"))});let o=()=>{this.metricsWidget.show(i.element,this.#n.element),this.stylesWidget.removeEventListener("StylesUpdateCompleted",l)},a=()=>{s.showMode()==="Both"?o():(this.metricsWidget.show(t.element),this.stylesWidget.hasMatchedStyles||this.metricsWidget.hideWidget(),this.stylesWidget.addEventListener("StylesUpdateCompleted",l))},l=f=>{f.data.hasMatchedStyles?this.metricsWidget.showWidget():this.metricsWidget.hideWidget()},d=f=>{let{tabId:T}=f.data;this.evaluateTrackingComputedStyleUpdatesForNode(),T==="computed"?(i.show(g.element),o()):T==="styles"&&(s.setSidebarWidget(i),a())};this.sidebarPaneView=k.ViewManager.ViewManager.instance().createTabbedLocation(()=>k.ViewManager.ViewManager.instance().showView("elements"),"styles-pane-sidebar",!0,!0);let h=this.sidebarPaneView.tabbedPane();h.headerElement().setAttribute("jslog",`${rn.toolbar("sidebar").track({keydown:"ArrowUp|ArrowLeft|ArrowDown|ArrowRight|Enter|Space"})}`),this.splitMode!=="Vertical"&&this.splitWidget.installResizer(h.headerElement());let c=h.headerElement();k.ARIAUtils.markAsNavigation(c),k.ARIAUtils.setLabel(c,de(oe.sidePanelToolbar));let p=h.tabbedPaneContentElement();k.ARIAUtils.markAsComplementary(p),k.ARIAUtils.setLabel(p,de(oe.sidePanelContent));let u=new k.View.SimpleView({title:de(oe.styles),viewId:"styles"});this.sidebarPaneView.appendView(u),u.element.classList.add("flex-auto"),s.show(u.element);let g=new k.View.SimpleView({title:de(oe.computed),viewId:"computed"});g.element.classList.add("composite","fill"),h.addEventListener(k.TabbedPane.Events.TabSelected,d,this),this.sidebarPaneView.appendView(g),this.stylesViewToReveal=u,this.sidebarPaneView.appendApplicableItems("elements-sidebar");let m=rr.ExtensionServer.ExtensionServer.instance().sidebarPanes();for(let f=0;f<m.length;++f)this.addExtensionSidebarPane(m[f]);this.splitWidget.setSidebarWidget(this.sidebarPaneView.tabbedPane())}revealComputedStylesPane(){this.sidebarPaneView?.tabbedPane().selectTab("computed")}updateSidebarPosition(){if(this.sidebarPaneView?.tabbedPane().shouldHideOnDetach())return;let e=this.#r.moduleSetting("sidebar-position").get(),t="Horizontal";if((e==="right"||e==="auto"&&this.splitWidget.element.offsetWidth>680)&&(t="Vertical"),!this.sidebarPaneView){this.initializeSidebarPanes(t);return}if(t===this.splitMode)return;this.splitMode=t;let i=this.sidebarPaneView.tabbedPane();this.splitWidget.uninstallResizer(i.headerElement()),this.splitWidget.setVertical(this.splitMode==="Vertical"),this.showToolbarPane(null,null),this.splitMode!=="Vertical"&&this.splitWidget.installResizer(i.headerElement())}extensionSidebarPaneAdded(e){this.addExtensionSidebarPane(e.data)}addExtensionSidebarPane(e){this.sidebarPaneView&&e.panelName()===this.name&&this.sidebarPaneView.appendView(e)}getComputedStyleWidget(){return this.#n}setupStyleTracking(e){let t=e.createCSSPropertyTracker(Ah);t.start(),this.cssStyleTrackerByCSSModel.set(e,t),t.addEventListener("TrackedCSSPropertiesUpdated",this.trackedCSSPropertiesUpdated,this)}removeStyleTracking(e){let t=this.cssStyleTrackerByCSSModel.get(e);t&&(t.stop(),this.cssStyleTrackerByCSSModel.delete(e),t.removeEventListener("TrackedCSSPropertiesUpdated",this.trackedCSSPropertiesUpdated,this))}trackedCSSPropertiesUpdated({data:e}){for(let t of e)t&&this.#t.updateNodeAdorners(t);tn.instance().requestUpdate()}populateAdornerSettingsContextMenu(e){let t=e.viewSection().appendSubMenuItem(de(oe.adornerSettings),!1,"show-adorner-settings"),i=this.adornerManager.getSettings();for(let[n,s]of i)t.defaultSection().appendCheckboxItem(n,()=>{let o=!s,a=this.adornersByName.get(n);if(a)for(let l of a)o?l.show():l.hide();this.adornerManager.getSettings().set(n,o),this.adornerManager.updateSettings(i)},{checked:s,jslogContext:n})}isAdornerEnabled(e){return this.adornerManager.isAdornerEnabled(e)}registerAdorner(e){let t=this.adornersByName.get(e.name);t||(t=new Set,this.adornersByName.set(e.name,t)),t.add(e),this.isAdornerEnabled(e.name)||e.hide()}deregisterAdorner(e){let t=this.adornersByName.get(e.name);t&&t.delete(e)}toggleHideElement(e){this.#t.toggleHideElement(e)}toggleEditAsHTML(e){this.#t.toggleEditAsHTML(e)}duplicateNode(e){this.#t.duplicateNode(e)}copyStyles(e){this.#t.copyStyles(e)}static firstInspectElementCompletedForTest=function(){};static firstInspectElementNodeNameForTest=""};globalThis.Elements=globalThis.Elements||{};globalThis.Elements.ElementsPanel=D;var Ah=[{name:"display",value:"grid"},{name:"display",value:"inline-grid"},{name:"display",value:"flex"},{name:"display",value:"inline-flex"},{name:"container-type",value:"inline-size"},{name:"container-type",value:"block-size"},{name:"container-type",value:"size"}],ar=class{appendApplicableItems(e,t,i){i instanceof V.RemoteObject.RemoteObject&&!i.isNode()||D.instance().element.isAncestor(e.target)||t.revealSection().appendItem(de(oe.openInElementsPanel),()=>Ft.Revealer.reveal(i),{jslogContext:"elements.reveal-node"})}},As=class{node;constructor(e){this.node=e}},lr=class{reveal(e,t){let i=D.instance();return i.pendingNodeReveal=!0,i.cancelPendingRestoration(),new Promise(n).catch(s=>{let o;throw Yt.UserVisibleError.isUserVisibleError(s)?o=s.message:o=de(oe.nodeCannotBeFoundInTheCurrent),Ft.Console.Console.instance().warn(o),s});function n(s,o){if(e instanceof V.DOMModel.DOMNode||e instanceof V.DOMModel.AdoptedStyleSheet)a(e);else if(e instanceof V.DOMModel.DeferredDOMNode)e.resolve(d);else if(e instanceof As)D.instance().revealComputedStylesPane(),a(e.node);else{let h=e.runtimeModel().target().model(V.DOMModel.DOMModel);if(h)h.pushObjectAsNodeToFrontend(e).then(l);else{let c=de(oe.nodeCannotBeFoundInTheCurrent);o(new Yt.UserVisibleError.UserVisibleError(c))}}function a(h){i.pendingNodeReveal=!1;let c=h instanceof V.DOMModel.AdoptedStyleSheet?h.parent:h;for(;c.parentNode;)c=c.parentNode;let p=!(c instanceof V.DOMModel.DOMDocument);if(!(e instanceof V.DOMModel.DOMDocument)&&p){let m=de(oe.nodeCannotBeFoundInTheCurrent);o(new Yt.UserVisibleError.UserVisibleError(m));return}if(h){let m=t?{showPanel:!1}:{showPanel:!0,focusNode:!0};(h instanceof V.DOMModel.AdoptedStyleSheet?i.revealAndSelectAdoptedStyleSheet(h,m):i.revealAndSelectNode(h,m)).then(s);return}let g=de(oe.nodeCannotBeFoundInTheCurrent);o(new Yt.UserVisibleError.UserVisibleError(g))}function l(h){if(!h){let c=de(oe.theRemoteObjectCouldNotBe);o(new Yt.UserVisibleError.UserVisibleError(c));return}a(h)}function d(h){if(!h){let c=de(oe.theDeferredDomNodeCouldNotBe);o(new Yt.UserVisibleError.UserVisibleError(c));return}a(h)}}}},dr=class{reveal(e){return D.instance().revealProperty(e)}},cr=class{handleAction(e,t){let i=e.flavor(V.DOMModel.DOMNode);if(!i)return!0;switch(t){case"elements.hide-element":return D.instance().toggleHideElement(i),!0;case"elements.edit-as-html":return D.instance().toggleEditAsHTML(i),!0;case"elements.duplicate-element":return D.instance().duplicateNode(i),!0;case"elements.copy-styles":return D.instance().copyStyles(i),!0;case"elements.undo":return V.DOMModel.DOMModelUndoStack.instance().undo(),D.instance().stylesWidget.forceUpdate(),!0;case"elements.redo":return V.DOMModel.DOMModelUndoStack.instance().redo(),D.instance().stylesWidget.forceUpdate(),!0;case"elements.toggle-a11y-tree":return D.instance().toggleAccessibilityTree(),!0;case"elements.toggle-word-wrap":{let n=D.instance().settings.moduleSetting("dom-word-wrap");return n.set(!n.get()),!0}case"elements.show-styles":return D.instance().selectAndShowSidebarTab("styles"),!0;case"elements.show-computed":return D.instance().selectAndShowSidebarTab("computed"),!0;case"elements.toggle-eye-dropper":{let n=k.Context.Context.instance().flavor(Vt);if(!n)return!1;n.toggleEyeDropper()}}return!1}},or,qi=class r{static instance(e={forceNew:null}){let{forceNew:t}=e;return(!or||t)&&(or=new r),or}decorate(e){let t=e.domModel().cssModel().pseudoState(e);return t?{color:"var(--sys-color-orange-bright)",title:de(oe.elementStateS,{PH1:":"+t.join(", :")})}:null}};var Qt,Ps=class r{toggleSearchAction;mode;showDetailedInspectTooltipSetting;constructor(){this.toggleSearchAction=gt.ActionRegistry.ActionRegistry.instance().getAction("elements.toggle-element-search"),this.mode="none",He.TargetManager.TargetManager.instance().addEventListener("SuspendStateChanged",this.suspendStateChanged,this),He.TargetManager.TargetManager.instance().addModelListener(He.OverlayModel.OverlayModel,"InspectModeExited",()=>this.setMode("none"),void 0,{scoped:!0}),He.OverlayModel.OverlayModel.setInspectNodeHandler(this.inspectNode.bind(this)),He.TargetManager.TargetManager.instance().observeModels(He.OverlayModel.OverlayModel,this,{scoped:!0}),this.showDetailedInspectTooltipSetting=hi.Settings.Settings.instance().moduleSetting("show-detailed-inspect-tooltip"),this.showDetailedInspectTooltipSetting.addChangeListener(this.showDetailedInspectTooltipChanged.bind(this)),document.addEventListener("keydown",e=>{e.keyCode===gt.KeyboardShortcut.Keys.Esc.code&&this.isInInspectElementMode()&&(this.setMode("none"),e.consume(!0),id.logKeyDown(null,e,"cancel-inspect-mode"))},!0)}static instance({forceNew:e}={forceNew:!1}){return(!Qt||e)&&(Qt=new r),Qt}modelAdded(e){this.mode!=="none"&&e.setInspectMode(this.mode,this.showDetailedInspectTooltipSetting.get())}modelRemoved(e){}isInInspectElementMode(){return this.mode!=="none"}toggleInspectMode(){let e;this.isInInspectElementMode()?e="none":e=hi.Settings.Settings.instance().moduleSetting("show-ua-shadow-dom").get()?"searchForUAShadowDOM":"searchForNode",this.setMode(e)}captureScreenshotMode(){this.setMode("captureAreaScreenshot")}setMode(e){if(!He.TargetManager.TargetManager.instance().allTargetsSuspended()){this.mode=e;for(let t of He.TargetManager.TargetManager.instance().models(He.OverlayModel.OverlayModel,{scoped:!0}))t.setInspectMode(e,this.showDetailedInspectTooltipSetting.get());this.toggleSearchAction.setToggled(this.isInInspectElementMode())}}suspendStateChanged(){He.TargetManager.TargetManager.instance().allTargetsSuspended()&&(this.mode="none",this.toggleSearchAction.setToggled(!1))}inspectNode(e){let t=gt.Context.Context.instance().flavor(hi.ReturnToPanel.ReturnToPanelFlavor);return gt.Context.Context.instance().setFlavor(hi.ReturnToPanel.ReturnToPanelFlavor,null),t?D.instance().revealAndSelectNode(e,{showPanel:!1,highlightInOverlay:!1}).then(()=>{gt.ViewManager.ViewManager.instance().showView(t.viewId,!1,!1)}):D.instance().revealAndSelectNode(e,{showPanel:!0,focusNode:!0,highlightInOverlay:!1})}showDetailedInspectTooltipChanged(){this.setMode(this.mode)}},pr=class{handleAction(e,t){return td.Runtime.Runtime.queryParam("isSharedWorker")||(Qt=Ps.instance(),!Qt)?!1:(t==="elements.toggle-element-search"?Qt.toggleInspectMode():t==="elements.capture-area-screenshot"&&Qt.captureScreenshotMode(),!0)}};var ld={};F(ld,{ActionDelegate:()=>gr,DEFAULT_VIEW:()=>ad,DispatchFilterBy:()=>ft,EventListenersWidget:()=>Os});import*as Ls from"./../../core/common/common.js";import*as fr from"./../../core/i18n/i18n.js";import*as mr from"./../../core/sdk/sdk.js";import*as it from"./../../ui/legacy/legacy.js";import{html as sd,render as Nh}from"./../../ui/lit/lit.js";import*as Rs from"./../../ui/visual_logging/visual_logging.js";import*as rd from"./../event_listeners/event_listeners.js";var{bindToAction:Ph,bindToSetting:od}=it.UIUtils,tt={frameworkListeners:"Resolve `Framework` listeners",showListenersOnTheAncestors:"Show listeners on the ancestors",ancestors:"Ancestors",eventListenersCategory:"Event listeners category",all:"All",passive:"Passive",blocking:"Blocking",resolveEventListenersBoundWith:"Resolve event listeners bound with framework"},Dh=fr.i18n.registerUIStrings("panels/elements/EventListenersWidget.ts",tt),yt=fr.i18n.getLocalizedString.bind(void 0,Dh),{widget:Lh}=it.Widget,ur,ad=(r,e,t)=>{Nh(sd`
    <div jslog=${Rs.pane("elements.event-listeners").track({resize:!0})}>
      <devtools-toolbar class="event-listener-toolbar" role="presentation">
        <devtools-button ${Ph(r.refreshEventListenersActionName)}></devtools-button>
        <devtools-checkbox title=${yt(tt.showListenersOnTheAncestors)}
          ${od(r.showForAncestorsSetting)}>
          ${yt(tt.ancestors)}
        </devtools-checkbox>
        <select class="dispatch-filter"
          title=${yt(tt.eventListenersCategory)}
          aria-label=${yt(tt.eventListenersCategory)}
          jslog=${Rs.filterDropdown().track({change:!0})}
          @change=${i=>r.onDispatchFilterTypeChange(i.target.value)}>
          ${r.dispatchFilters.map(i=>sd`
            <option value=${i.value} ?selected=${i.value===r.selectedDispatchFilter}>
              ${i.name}
            </option>`)}
        </select>
        <devtools-checkbox title=${yt(tt.resolveEventListenersBoundWith)}
          ${od(r.showFrameworkListenersSetting)}>
          ${yt(tt.frameworkListeners)}
        </devtools-checkbox>
      </devtools-toolbar>
      ${Lh(rd.EventListenersView.EventListenersView,{changeCallback:r.onEventListenersViewChange,objects:r.eventListenerObjects,filter:r.filter})}
    </div>`,t)},Os=class r extends it.Widget.VBox{showForAncestorsSetting;dispatchFilterBySetting;showFrameworkListenersSetting;lastRequestedNode;#e;constructor(e=ad){super(),this.#e=e,this.showForAncestorsSetting=Ls.Settings.Settings.instance().moduleSetting("show-event-listeners-for-ancestors"),this.showForAncestorsSetting.addChangeListener(this.requestUpdate.bind(this)),this.dispatchFilterBySetting=Ls.Settings.Settings.instance().createSetting("event-listener-dispatch-filter-type",ft.All),this.dispatchFilterBySetting.addChangeListener(this.requestUpdate.bind(this)),this.showFrameworkListenersSetting=Ls.Settings.Settings.instance().moduleSetting("show-frameowkr-listeners"),this.showFrameworkListenersSetting.addChangeListener(this.requestUpdate.bind(this)),it.Context.Context.instance().addFlavorChangeListener(mr.DOMModel.DOMNode,this.requestUpdate.bind(this)),this.requestUpdate()}static instance(e={forceNew:null}){let{forceNew:t}=e;return(!ur||t)&&(ur=new r),ur}async performUpdate(){let e=this.dispatchFilterBySetting.get(),t=e===ft.All||e===ft.Passive,i=e===ft.All||e===ft.Blocking,n={refreshEventListenersActionName:"elements.refresh-event-listeners",showForAncestorsSetting:this.showForAncestorsSetting,dispatchFilterBySetting:this.dispatchFilterBySetting,showFrameworkListenersSetting:this.showFrameworkListenersSetting,onDispatchFilterTypeChange:o=>{this.dispatchFilterBySetting.set(o)},onEventListenersViewChange:this.requestUpdate.bind(this),dispatchFilters:[{name:yt(tt.all),value:ft.All},{name:yt(tt.passive),value:ft.Passive},{name:yt(tt.blocking),value:ft.Blocking}],selectedDispatchFilter:e,eventListenerObjects:[],filter:{showFramework:this.showFrameworkListenersSetting.get(),showPassive:t,showBlocking:i}};this.lastRequestedNode&&(this.lastRequestedNode.domModel().runtimeModel().releaseObjectGroup(Ds),delete this.lastRequestedNode);let s=it.Context.Context.instance().flavor(mr.DOMModel.DOMNode);if(s){this.lastRequestedNode=s;let o=!this.showForAncestorsSetting.get(),a=[];if(a.push(s.resolveToObject(Ds)),!o){let l=s.parentNode;for(;l;)a.push(l.resolveToObject(Ds)),l=l.parentNode;a.push(this.windowObjectInNodeContext(s))}n.eventListenerObjects=await Promise.all(a)}this.#e(n,{},this.contentElement)}wasShown(){it.Context.Context.instance().setFlavor(r,this),super.wasShown()}willHide(){super.willHide(),it.Context.Context.instance().setFlavor(r,null)}windowObjectInNodeContext(e){let t=e.domModel().runtimeModel().executionContexts(),i=t[0];if(e.frameId())for(let n=0;n<t.length;++n){let s=t[n];s.frameId===e.frameId()&&s.isDefault&&(i=s)}return i.evaluate({expression:"self",objectGroup:Ds,includeCommandLineAPI:!1,silent:!0,returnByValue:!1,generatePreview:!1},!1,!1).then(n=>"object"in n?n.object:null)}eventListenersArrivedForTest(){}},ft={All:"All",Blocking:"Blocking",Passive:"Passive"},Ds="event-listeners-panel",gr=class{handleAction(e,t){return t==="elements.refresh-event-listeners"?(Os.instance().requestUpdate(),!0):!1}};var fd={};F(fd,{DEFAULT_VIEW:()=>md,PropertiesWidget:()=>Sr});import"./../../ui/legacy/legacy.js";import*as hd from"./../../core/common/common.js";import*as Fs from"./../../core/host/host.js";import*as Cr from"./../../core/i18n/i18n.js";import*as pd from"./../../core/platform/platform.js";import*as be from"./../../core/sdk/sdk.js";import*as an from"./../../ui/legacy/components/object_ui/object_ui.js";import*as Xt from"./../../ui/legacy/legacy.js";import{Directives as Oh,html as ks,nothing as Rh,render as kh}from"./../../ui/lit/lit.js";import*as ud from"./../../ui/visual_logging/visual_logging.js";var dd=`.properties-widget-section{padding:2px 0 2px 5px;flex:none}.properties-widget-toolbar{border-bottom:1px solid var(--sys-color-divider);flex-shrink:0}.styles-pane-toolbar{width:100%}
/*# sourceURL=${import.meta.resolve("./propertiesWidget.css")} */`;var cd="properties-sidebar-pane",{bindToSetting:Uh}=Xt.UIUtils,{repeat:Fh}=Oh,Us={showAll:"Show all",showAllTooltip:"When unchecked, only properties whose values are neither null nor undefined will be shown",noMatchingProperty:"No matching property"},Vh=Cr.i18n.registerUIStrings("panels/elements/PropertiesWidget.ts",Us),yr=Cr.i18n.getLocalizedString.bind(void 0,Vh),md=(r,e,t)=>{kh(ks`
    <div jslog=${ud.pane("element-properties").track({resize:!0})}>
      <div class="hbox properties-widget-toolbar">
        <devtools-toolbar class="styles-pane-toolbar" role="presentation">
          <devtools-toolbar-input
            type="filter"
            ?regex=${!0}
            @change=${r.onFilterChanged}
            @regextoggle=${r.onRegexToggled}
            style="flex-grow:1; flex-shrink:1"
          ></devtools-toolbar-input>
          <devtools-checkbox title=${yr(Us.showAllTooltip)} ${Uh(gd())}>
            ${yr(Us.showAll)}
          </devtools-checkbox>
        </devtools-toolbar>
      </div>
      ${r.objectTree&&r.allChildrenFiltered?ks`
        <div class="gray-info-message">${yr(Us.noMatchingProperty)}</div>
      `:Rh}
      <devtools-tree show-selection-on-keyboard-focus @treeelementexpand=${$h} .template=${ks`
        <ul role=tree class="source-code object-properties-section">
          <style>${an.ObjectPropertiesSection.objectValueStyles}</style>;
          <style>${an.ObjectPropertiesSection.objectPropertiesSectionStyles}</style>;
          ${Fh(an.ObjectPropertiesSection.ObjectPropertyTreeElement.createPropertyNodes(r.objectTree?.children??{},!0,!0),i=>ks`<devtools-tree-wrapper .treeElement=${i}></devtools-tree-wrapper>`)}
        </ul>
      `}></devtools-tree>
    </div>`,t)},gd=()=>hd.Settings.Settings.instance().createSetting("show-all-properties",!1);function $h(r){r.detail.expanded&&Fs.userMetrics.actionTaken(Fs.UserMetrics.Action.DOMPropertiesExpanded)}var Sr=class extends Xt.Widget.VBox{showAllPropertiesSetting;filterRegex=null;#e=null;#n;#i=!0;#t=null;#s=!1;#o="";constructor(e=md){super({useShadowDom:!0}),this.registerRequiredCSS(dd),this.showAllPropertiesSetting=gd(),this.showAllPropertiesSetting.addChangeListener(this.onFilterChanged.bind(this)),be.TargetManager.TargetManager.instance().addModelListener(be.DOMModel.DOMModel,be.DOMModel.Events.AttrModified,this.onNodeChange,this,{scoped:!0}),be.TargetManager.TargetManager.instance().addModelListener(be.DOMModel.DOMModel,be.DOMModel.Events.AttrRemoved,this.onNodeChange,this,{scoped:!0}),be.TargetManager.TargetManager.instance().addModelListener(be.DOMModel.DOMModel,be.DOMModel.Events.CharacterDataModified,this.onNodeChange,this,{scoped:!0}),be.TargetManager.TargetManager.instance().addModelListener(be.DOMModel.DOMModel,be.DOMModel.Events.ChildNodeCountUpdated,this.onNodeChange,this,{scoped:!0}),Xt.Context.Context.instance().addFlavorChangeListener(be.DOMModel.DOMNode,this.setNode,this),this.#n=e,this.requestUpdate()}#r(e){if(!e)return null;if(this.#s)try{return new RegExp(e,"i")}catch{}return new RegExp(pd.StringUtilities.escapeForRegExp(e),"i")}onFilterChanged(e){"detail"in e&&(this.#o=e.detail,this.filterRegex=this.#r(e.detail)),this.#l(),this.requestUpdate()}onRegexToggled(){this.#s=!this.#s,this.filterRegex=this.#r(this.#o),this.#l(),this.requestUpdate()}#l(){this.#t?.setFilter({includeNullOrUndefinedValues:this.showAllPropertiesSetting.get(),regex:this.filterRegex})}setNode(){this.#i=!0,this.requestUpdate()}async#c(){if(!this.#i)return;if(this.#i=!1,this.#e?.domModel().runtimeModel().releaseObjectGroup(cd),this.#e=Xt.Context.Context.instance().flavor(be.DOMModel.DOMNode),!this.#e){this.#t=null;return}let e=await this.#e.resolveToObject(cd);e&&(this.#t=new an.ObjectPropertiesSection.ObjectTree(e,{propertiesMode:1,readOnly:!0}),this.#l())}async performUpdate(){await this.#c(),await this.#t?.populateChildrenIfNeeded();let e=!(this.#t?.children?.accessors?.some(t=>!t.isFiltered)||this.#t?.children?.arrayRanges?.some(()=>!0)||this.#t?.children?.internalProperties?.some(t=>!t.isFiltered)||this.#t?.children?.properties?.some(t=>!t.isFiltered));this.#n({onFilterChanged:this.onFilterChanged.bind(this),onRegexToggled:this.onRegexToggled.bind(this),isRegex:this.#s,allChildrenFiltered:e,objectTree:this.#t},{},this.contentElement)}onNodeChange(e){if(!this.#e)return;let t=e.data,i=t instanceof be.DOMModel.DOMNode?t:t.node;this.#e===i&&(this.#i=!0,this.requestUpdate())}};var Cd={};F(Cd,{ButtonProvider:()=>Bs,ClassNamePrompt:()=>Hs,ClassesPaneWidget:()=>$s});import*as Sd from"./../../core/common/common.js";import*as br from"./../../core/i18n/i18n.js";import*as pi from"./../../core/platform/platform.js";import*as Ge from"./../../core/sdk/sdk.js";import*as we from"./../../ui/legacy/legacy.js";import*as _s from"./../../ui/visual_logging/visual_logging.js";var yd=`.styles-element-classes-pane{background-color:var(--sys-color-cdt-base-container);border-bottom:1px solid var(--sys-color-divider);padding:6px 2px 2px}.styles-element-classes-container{display:flex;flex-wrap:wrap;justify-content:flex-start}.styles-element-classes-pane devtools-checkbox{margin-right:15px}.styles-element-classes-pane .title-container{padding-bottom:2px}.styles-element-classes-pane .new-class-input{padding-left:3px;padding-right:3px;overflow:hidden;border:1px solid var(--sys-color-neutral-outline);border-radius:4px;line-height:15px;margin-left:3px;width:calc(100% - 7px);background-color:var(--sys-color-cdt-base-container);cursor:text;&:hover{box-shadow:0 0 0 1px var(--ref-palette-neutral90)}}
/*# sourceURL=${import.meta.resolve("./classesPaneWidget.css")} */`;var ln={addNewClass:"Add new class",classesSAdded:"Classes {PH1} added",classSAdded:"Class {PH1} added",elementClasses:"Element Classes"},Bh=br.i18n.registerUIStrings("panels/elements/ClassesPaneWidget.ts",ln),Vs=br.i18n.getLocalizedString.bind(void 0,Bh),$s=class extends we.Widget.Widget{input;classesContainer;prompt;mutatingNodes;pendingNodeClasses;updateNodeThrottler;previousTarget;constructor(){super({jslog:`${_s.pane("elements-classes")}`,useShadowDom:!0}),this.registerRequiredCSS(yd),this.contentElement.className="styles-element-classes-pane";let 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 Hs(this.nodeClasses.bind(this)),this.prompt.setAutocompletionTimeout(0),this.prompt.renderAsBlock();let t=this.prompt.attach(this.input);this.prompt.setPlaceholder(Vs(ln.addNewClass)),this.prompt.addEventListener("TextChanged",this.onTextChanged,this),t.addEventListener("keydown",this.onKeyDown.bind(this),!1),Ge.TargetManager.TargetManager.instance().addModelListener(Ge.DOMModel.DOMModel,Ge.DOMModel.Events.DOMMutated,this.onDOMMutated,this,{scoped:!0}),this.mutatingNodes=new Set,this.pendingNodeClasses=new Map,this.updateNodeThrottler=new Sd.Throttler.Throttler(0),this.previousTarget=null,we.Context.Context.instance().addFlavorChangeListener(Ge.DOMModel.DOMNode,this.onSelectedNodeChanged,this)}splitTextIntoClasses(e){return e.split(/[,\s]/).map(t=>t.trim()).filter(t=>t.length)}onKeyDown(e){if(e.key!=="Enter"&&!pi.KeyboardUtilities.isEscKey(e)||e.key==="Enter"&&(e.consume(),this.prompt.acceptAutoComplete()))return;let t=e.target,i=t.textContent;pi.KeyboardUtilities.isEscKey(e)&&(pi.StringUtilities.isWhitespace(i)||e.consume(!0),i=""),this.prompt.clearAutocomplete(),t.textContent="";let n=we.Context.Context.instance().flavor(Ge.DOMModel.DOMNode);if(!n)return;let s=this.splitTextIntoClasses(i);if(!s.length){this.installNodeClasses(n);return}for(let l of s)this.toggleClass(n,l,!0);let o=s.join(" "),a=s.length>1?Vs(ln.classesSAdded,{PH1:o}):Vs(ln.classSAdded,{PH1:o});we.ARIAUtils.LiveAnnouncer.alert(a),this.installNodeClasses(n),this.update()}onTextChanged(){let e=we.Context.Context.instance().flavor(Ge.DOMModel.DOMNode);e&&this.installNodeClasses(e)}onDOMMutated(e){let t=e.data;this.mutatingNodes.has(t)||(Er.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(){super.wasShown(),this.update()}update(){if(!this.isShowing())return;let e=we.Context.Context.instance().flavor(Ge.DOMModel.DOMNode);if(e&&(e=e.enclosingElementOrSelf()),this.classesContainer.removeChildren(),this.input.disabled=!e,!e)return;let t=this.nodeClasses(e),i=[...t.keys()];i.sort(pi.StringUtilities.caseInsensetiveComparator);for(let n of i){let s=we.UIUtils.CheckboxLabel.createWithStringLiteral(n,t.get(n),"element-class",!0);s.classList.add("monospace"),s.addEventListener("click",this.onClick.bind(this,n),!1),this.classesContainer.appendChild(s)}}onClick(e,t){let i=we.Context.Context.instance().flavor(Ge.DOMModel.DOMNode);if(!i)return;let n=t.target.checked;this.toggleClass(i,e,n),this.installNodeClasses(i)}nodeClasses(e){let t=Er.get(e);if(!t){let n=(e.getAttribute("class")||"").split(/\s/);t=new Map;for(let s=0;s<n.length;++s){let o=n[s].trim();o.length&&t.set(o,!0)}Er.set(e,t)}return t}toggleClass(e,t,i){let n=this.nodeClasses(e);n.set(t,i),Bs.instance().item().setChecked([...n.values()].includes(!0))}installNodeClasses(e){let t=this.nodeClasses(e),i=new Set;for(let o of t.keys())t.get(o)&&i.add(o);let n=this.splitTextIntoClasses(this.prompt.textWithCurrentSuggestion());for(let o of n)i.add(o);let s=[...i.values()].sort();this.pendingNodeClasses.set(e,s.join(" ")),this.updateNodeThrottler.schedule(this.flushPendingClasses.bind(this))}async flushPendingClasses(){let e=[];for(let i of this.pendingNodeClasses.keys()){this.mutatingNodes.add(i);let n=i.setAttributeValuePromise("class",this.pendingNodeClasses.get(i)).then(t.bind(this,i));e.push(n)}this.pendingNodeClasses.clear(),await Promise.all(e);function t(i){this.mutatingNodes.delete(i)}}},Er=new WeakMap,vr,Bs=class r{button;view;constructor(){this.button=new we.Toolbar.ToolbarToggle(Vs(ln.elementClasses),"class"),this.button.element.style.setProperty("--dot-toggle-top","12px"),this.button.element.style.setProperty("--dot-toggle-left","18px"),this.button.element.setAttribute("jslog",`${_s.toggleSubpane("elements-classes").track({click:!0})}`),this.button.addEventListener("Click",this.clicked,this),this.view=new $s}static instance(e={forceNew:null}){let{forceNew:t}=e;return(!vr||t)&&(vr=new r),vr}clicked(){D.instance().showToolbarPane(this.view.isShowing()?null:this.view,this.button)}item(){return this.button}},Hs=class extends we.TextPrompt.TextPrompt{nodeClasses;selectedFrameId;classNamesPromise;constructor(e){super(),this.nodeClasses=e,this.initialize(this.buildClassNameCompletions.bind(this)," "),this.disableDefaultSuggestionForEmptyInput(),this.selectedFrameId="",this.classNamesPromise=null}async getClassNames(e){let t=[],i=new Set;this.selectedFrameId=e.frameId();let n=e.domModel().cssModel(),s=n.allStyleSheets();for(let l of s){if(l.frameId!==this.selectedFrameId)continue;let d=n.getClassNames(l.id).then(h=>{for(let c of h)i.add(c)});t.push(d)}let o=e.ownerDocument.id,a=e.domModel().classNamesPromise(o).then(l=>{for(let d of l)i.add(d)});return t.push(a),await Promise.all(t),[...i]}async buildClassNameCompletions(e,t,i){(!t||i)&&(this.classNamesPromise=null);let n=we.Context.Context.instance().flavor(Ge.DOMModel.DOMNode);if(!n||!t&&!i&&!e.trim())return[];(!this.classNamesPromise||this.selectedFrameId!==n.frameId())&&(this.classNamesPromise=this.getClassNames(n));let s=await this.classNamesPromise,o=this.nodeClasses(n);return s=s.filter(a=>!o.get(a)),t[0]==="."&&(s=s.map(a=>"."+a)),s.filter(a=>a.startsWith(t)).sort().map(a=>({text:a,title:void 0,subtitle:void 0,priority:void 0,isSecondary:void 0,subtitleRenderer:void 0,selectionRange:void 0,hideGhostText:void 0,iconElement:void 0}))}};var xd={};F(xd,{ButtonProvider:()=>Ws,DEFAULT_VIEW:()=>wd,ElementStatePaneWidget:()=>Ks});import*as xr from"./../../core/i18n/i18n.js";import*as Zt from"./../../core/sdk/sdk.js";import"./../../ui/components/buttons/buttons.js";import*as bd from"./../../ui/helpers/helpers.js";import*as qe from"./../../ui/legacy/legacy.js";import{html as vd,render as Hh}from"./../../ui/lit/lit.js";import*as mi from"./../../ui/visual_logging/visual_logging.js";var Ed=`@scope to (devtools-widget > *){.styles-element-state-pane{overflow:hidden;padding-left:2px;background-color:var(--sys-color-cdt-base-container);border-bottom:1px solid var(--sys-color-divider);margin-top:0;padding-bottom:2px}.styles-element-state-pane > .page-state-checkbox{margin-block:6px;display:flex;align-items:center;gap:2px}.styles-element-state-pane .section-header{margin:8px 4px 6px;color:var(--color-text-secondary)}.styles-element-state-pane > table{width:100%;border-spacing:0}.styles-element-state-pane td{padding:0}.pseudo-states-container{display:grid;column-gap:12px;grid-template-columns:repeat(2,1fr);grid-auto-flow:row}.pseudo-states-container.specific-pseudo-states{grid-template-columns:repeat(2,1fr);margin-bottom:4px}.force-specific-element-header:focus{background-color:var(--sys-color-state-hover-on-subtle)}}
/*# sourceURL=${import.meta.resolve("./elementStatePaneWidget.css")} */`;var{bindToSetting:_h}=qe.UIUtils,Jt={forceElementState:"Force element state",toggleElementState:"Toggle Element State",emulateFocusedPage:"Emulate a focused page",emulatesAFocusedPage:"Keep page focused. Commonly used for debugging disappearing elements.",forceElementSpecificStates:"Force specific element state",learnMore:"Learn more"},Kh=xr.i18n.registerUIStrings("panels/elements/ElementStatePaneWidget.ts",Jt),ui=xr.i18n.getLocalizedString.bind(void 0,Kh),S;(function(r){r.ENABLED="enabled",r.DISABLED="disabled",r.VALID="valid",r.INVALID="invalid",r.USER_VALID="user-valid",r.USER_INVALID="user-invalid",r.REQUIRED="required",r.OPTIONAL="optional",r.READ_ONLY="read-only",r.READ_WRITE="read-write",r.IN_RANGE="in-range",r.OUT_OF_RANGE="out-of-range",r.VISITED="visited",r.LINK="link",r.CHECKED="checked",r.INDETERMINATE="indeterminate",r.PLACEHOLDER_SHOWN="placeholder-shown",r.AUTOFILL="autofill",r.OPEN="open",r.TARGET_CURRENT="target-current"})(S||(S={}));var wd=(r,e,t)=>{let i=n=>vd`
        <div id=${n.state}>
          <devtools-checkbox class="small" @click=${r.onStateCheckboxClicked}
              jslog=${mi.toggle(n.state).track({change:!0})} ?checked=${n.checked} ?disabled=${n.disabled}
              title=${":"+n.state}>
          <span class="source-code">${":"+n.state}</span>
        </devtools-checkbox>
        </div>`;Hh(vd`
    <style>${Ed}</style>
    <div class="styles-element-state-pane"
        jslog=${mi.pane("element-states")}>
      <div class="page-state-checkbox">
        <devtools-checkbox class="small" title=${ui(Jt.emulatesAFocusedPage)}
            ${_h("emulate-page-focus")}>${ui(Jt.emulateFocusedPage)}</devtools-checkbox>
        <devtools-button
            @click=${()=>bd.openInNewTab("https://developer.chrome.com/docs/devtools/rendering/apply-effects#emulate_a_focused_page")}
           .data=${{variant:"icon",iconName:"help",size:"SMALL",jslogContext:"learn-more",title:ui(Jt.learnMore)}}></devtools-button>
      </div>
      <div class="section-header">
        <span>${ui(Jt.forceElementState)}</span>
      </div>
      <div class="pseudo-states-container" role="presentation">
        ${r.states.filter(({type:n})=>n==="persistent").map(n=>i(n))}
      </div>
      <details class="specific-details" ?hidden=${r.states.filter(({type:n})=>n==="specific").every(n=>n.hidden)}>
        <summary class="force-specific-element-header section-header">
          <span>${ui(Jt.forceElementSpecificStates)}</span>
        </summary>
        <div class="pseudo-states-container specific-pseudo-states" role="presentation">
          ${r.states.filter(({type:n,hidden:s})=>n==="specific"&&!s).map(n=>i(n))}
        </div>
      </details>
    </div>`,t)},Ks=class extends qe.Widget.Widget{#e;#n;#i=new Map;#t;constructor(e=wd){super({useShadowDom:!0}),this.#t=e,this.#e=new Map;let t=(i,n)=>{this.#e.set(i,n),this.#e.set(n,i)};this.#i.set("active",{state:"active",type:"persistent"}),this.#i.set("hover",{state:"hover",type:"persistent"}),this.#i.set("focus",{state:"focus",type:"persistent"}),this.#i.set("focus-within",{state:"focus-within",type:"persistent"}),this.#i.set("focus-visible",{state:"focus-visible",type:"persistent"}),this.#i.set("target",{state:"target",type:"persistent"}),this.#i.set(S.ENABLED,{state:S.ENABLED,type:"specific"}),this.#i.set(S.DISABLED,{state:S.DISABLED,type:"specific"}),this.#i.set(S.VALID,{state:S.VALID,type:"specific"}),this.#i.set(S.INVALID,{state:S.INVALID,type:"specific"}),this.#i.set(S.USER_VALID,{state:S.USER_VALID,type:"specific"}),this.#i.set(S.USER_INVALID,{state:S.USER_INVALID,type:"specific"}),this.#i.set(S.REQUIRED,{state:S.REQUIRED,type:"specific"}),this.#i.set(S.OPTIONAL,{state:S.OPTIONAL,type:"specific"}),this.#i.set(S.READ_ONLY,{state:S.READ_ONLY,type:"specific"}),this.#i.set(S.READ_WRITE,{state:S.READ_WRITE,type:"specific"}),this.#i.set(S.IN_RANGE,{state:S.IN_RANGE,type:"specific"}),this.#i.set(S.OUT_OF_RANGE,{state:S.OUT_OF_RANGE,type:"specific"}),this.#i.set(S.VISITED,{state:S.VISITED,type:"specific"}),this.#i.set(S.LINK,{state:S.LINK,type:"specific"}),this.#i.set(S.CHECKED,{state:S.CHECKED,type:"specific"}),this.#i.set(S.INDETERMINATE,{state:S.INDETERMINATE,type:"specific"}),this.#i.set(S.PLACEHOLDER_SHOWN,{state:S.PLACEHOLDER_SHOWN,type:"specific"}),this.#i.set(S.AUTOFILL,{state:S.AUTOFILL,type:"specific"}),this.#i.set(S.OPEN,{state:S.OPEN,type:"specific"}),this.#i.set(S.TARGET_CURRENT,{state:S.TARGET_CURRENT,type:"specific"}),t(S.VALID,S.INVALID),t(S.USER_VALID,S.USER_INVALID),t(S.READ_ONLY,S.READ_WRITE),t(S.IN_RANGE,S.OUT_OF_RANGE),t(S.ENABLED,S.DISABLED),t(S.VISITED,S.LINK),qe.Context.Context.instance().addFlavorChangeListener(Zt.DOMModel.DOMNode,this.requestUpdate,this)}onStateCheckboxClicked(e){let t=qe.Context.Context.instance().flavor(Zt.DOMModel.DOMNode);if(!t||!(e.target instanceof qe.UIUtils.CheckboxLabel))return;let i=e.target.title.slice(1);if(!i)return;let n=e.target.checked,s=this.#e.get(i);n&&s&&t.domModel().cssModel().forcePseudoState(t,s,!1),t.domModel().cssModel().forcePseudoState(t,i,n)}updateModel(e){this.#n!==e&&(this.#n&&this.#n.removeEventListener(Zt.CSSModel.Events.PseudoStateForced,this.requestUpdate,this),this.#n=e,this.#n&&this.#n.addEventListener(Zt.CSSModel.Events.PseudoStateForced,this.requestUpdate,this))}wasShown(){super.wasShown(),this.requestUpdate()}async performUpdate(){let e=qe.Context.Context.instance().flavor(Zt.DOMModel.DOMNode);if(e&&(e=e.enclosingElementOrSelf()),this.updateModel(e?e.domModel().cssModel():null),e){let i=e.domModel().cssModel().pseudoState(e);for(let n of this.#i.values())n.disabled=!!e.pseudoType(),n.checked=!!(i&&i.indexOf(n.state)>=0)}else for(let i of this.#i.values())i.disabled=!0,i.checked=!1;await this.#s(e),Ws.instance().item().setToggled([...this.#i.values()].some(i=>i.checked));let t={states:[...this.#i.values()],onStateCheckboxClicked:this.onStateCheckboxClicked.bind(this)};this.#t(t,{},this.contentElement)}async#s(e=null){if(!e||e.nodeType()!==Node.ELEMENT_NODE){[...this.#i.values()].filter(({type:c})=>c==="specific").forEach(c=>{c.hidden=!0});return}let t=(c,p)=>{let u=this.#i.get(c);u&&(u.hidden=p)},i=(c,p)=>p.includes(c.nodeName()?.toLowerCase()),n=c=>i(c,["a"])&&c.getAttribute("href")!==void 0,s=c=>i(c,["input"])&&(c.getAttribute("type")==="checkbox"||c.getAttribute("type")==="radio"),o=c=>c.getAttribute("contenteditable")!==void 0||!!(c.parentNode&&o(c.parentNode)),a=c=>c.getAttribute("disabled")!==void 0,l=c=>i(c,["input","textarea"])?c.getAttribute("readonly")===void 0&&!a(c):o(c),h=await(async c=>{function p(){return"formAssociated"in this.constructor&&this.constructor.formAssociated===!0}let u=await c.callFunction(p);return u?u.value:!1})(e);i(e,["button","input","select","textarea","optgroup","option","fieldset"])||h?(t(S.ENABLED,!a(e)),t(S.DISABLED,a(e))):(t(S.ENABLED,!0),t(S.DISABLED,!0)),i(e,["button","fieldset","input","object","output","select","textarea","img"])||h?(t(S.VALID,!1),t(S.INVALID,!1)):(t(S.VALID,!0),t(S.INVALID,!0)),i(e,["input","select","textarea"])?(t(S.USER_VALID,!1),t(S.USER_INVALID,!1),e.getAttribute("required")===void 0?(t(S.REQUIRED,!1),t(S.OPTIONAL,!0)):(t(S.REQUIRED,!0),t(S.OPTIONAL,!1))):(t(S.USER_VALID,!0),t(S.USER_INVALID,!0),t(S.REQUIRED,!0),t(S.OPTIONAL,!0)),l(e)?(t(S.READ_WRITE,!0),t(S.READ_ONLY,!1)):(t(S.READ_WRITE,!1),t(S.READ_ONLY,!0)),i(e,["input"])&&(e.getAttribute("min")!==void 0||e.getAttribute("max")!==void 0)?(t(S.IN_RANGE,!1),t(S.OUT_OF_RANGE,!1)):(t(S.IN_RANGE,!0),t(S.OUT_OF_RANGE,!0)),i(e,["a","area"])&&e.getAttribute("href")!==void 0?(t(S.VISITED,!1),t(S.LINK,!1)):(t(S.VISITED,!0),t(S.LINK,!0)),s(e)||i(e,["option"])?t(S.CHECKED,!1):t(S.CHECKED,!0),s(e)||i(e,["progress"])?t(S.INDETERMINATE,!1):t(S.INDETERMINATE,!0),i(e,["input","textarea"])?t(S.PLACEHOLDER_SHOWN,!1):t(S.PLACEHOLDER_SHOWN,!0),i(e,["input"])?t(S.AUTOFILL,!1):t(S.AUTOFILL,!0),i(e,["input","select","dialog","details"])?t(S.OPEN,!1):t(S.OPEN,!0),n(e)||e.pseudoType()==="scroll-marker"?t(S.TARGET_CURRENT,!1):t(S.TARGET_CURRENT,!0)}},wr,Ws=class r{button;view;constructor(){this.button=new qe.Toolbar.ToolbarToggle(ui(Jt.toggleElementState),"hover"),this.button.addEventListener("Click",this.clicked,this),this.button.element.classList.add("element-state"),this.button.element.setAttribute("jslog",`${mi.toggleSubpane("element-states").track({click:!0})}`),this.button.element.style.setProperty("--dot-toggle-top","12px"),this.button.element.style.setProperty("--dot-toggle-left","18px"),this.view=new Ks}static instance(e={forceNew:null}){let{forceNew:t}=e;return(!wr||t)&&(wr=new r),wr}clicked(){D.instance().showToolbarPane(this.view.isShowing()?null:this.view,this.button)}item(){return this.button}};var Td={};F(Td,{Renderer:()=>Mr});import*as Ir from"./../../core/sdk/sdk.js";import*as js from"./../../ui/legacy/legacy.js";var Tr,Mr=class r{static instance(e={forceNew:null}){let{forceNew:t}=e;return(!Tr||t)&&(Tr=new r),Tr}async render(e,t){let i=null;if(e instanceof Ir.DOMModel.DOMNode?i=e:e instanceof Ir.DOMModel.DeferredDOMNode&&(i=await e.resolvePromise()),!i)return null;let n=new Le(!1,!0,!0);n.rootDOMNode=i,n.deindentSingleNode(),n.setVisible(!0),n.element.treeElementForTest=n.firstChild(),n.setShowSelectionOnKeyboardFocus(!0,!0),t?.expand&&n.firstChild()?.expand();let s=()=>{n.element.dispatchEvent(new CustomEvent("dimensionschanged"))};return n.addEventListener(js.TreeOutline.Events.ElementAttached,s),n.addEventListener(js.TreeOutline.Events.ElementExpanded,s),n.addEventListener(js.TreeOutline.Events.ElementCollapsed,s),{element:n.element,forceSelect:n.forceSelect.bind(n)}}};var Od={};F(Od,{DEFAULT_VIEW:()=>Ld,StandaloneStylesContainer:()=>Ar});import*as gi from"./../../core/common/common.js";import*as Id from"./../../models/computed_style/computed_style.js";import*as Md from"./../../ui/legacy/components/inline_editor/inline_editor.js";import*as Ad from"./../../ui/legacy/components/utils/utils.js";import*as Nd from"./../../ui/legacy/legacy.js";import{html as Wh,render as jh}from"./../../ui/lit/lit.js";import*as Pd from"./../../ui/visual_logging/visual_logging.js";import*as Dd from"./components/components.js";var Ld=(r,e,t)=>{jh(Wh`
    <style>${hs}</style>
    <div class="style-panes-wrapper" jslog=${Pd.section("standalone-styles").track({resize:!0})}>
      <div class="styles-pane">
        ${r.sections.map(i=>i.element)}
      </div>
    </div>
  `,t)},Ar=class extends gi.ObjectWrapper.eventMixin(Nd.Widget.VBox){activeCSSAngle=null;isEditingStyle=!1;sectionByElement=new WeakMap;linkifier=new Ad.Linkifier.Linkifier(23,!0);#e;userOperation=!1;#n=[];#i=new Md.SwatchPopoverHelper.SwatchPopoverHelper;#t=new Id.ComputedStyleModel.ComputedStyleModel;#s;#o=null;#r=new gi.Throttler.Throttler(200);constructor(e,t=Ld){super(e,{useShadowDom:!0}),this.#s=t,this.#t.addEventListener("CSSModelChanged",this.#p,this),this.#t.addEventListener("ComputedStyleChanged",this.#l,this)}#l(){this.isEditingStyle||this.userOperation||this.#c()}#c(){this.#r.schedule(async()=>{this.node()?.domModel().cssModel().discardCachedMatchedCascade(),await this.#d(),this.requestUpdate()})}async#p(e){e?.data&&"edit"in e.data&&e?.data.edit||this.isEditingStyle||this.userOperation||this.#c()}get webCustomData(){return!this.#e&&gi.Settings.Settings.instance().moduleSetting("show-css-property-documentation-on-hover").get()&&(this.#e=Wt.create()),this.#e}async#d(e){let t=this.node();if(!t){this.#n=[];return}let i=t.domModel().cssModel(),n=await i.cachedMatchedCascadeForNode(t);if(e?.aborted)return;let s=n?.getParentLayoutNodeId(),[o,a,l]=await Promise.all([s?i.getComputedStyle(s):null,i.getComputedStyle(t.id),i.getComputedStyleExtraFields(t.id)]);if(e?.aborted||!n)return;let d=[],h=0;for(let c of n.nodeStyles()){let p=new ue(this,n,c,h++,a,o,l);p.update(!0),d.push(p),this.sectionByElement.set(p.element,p)}this.#n=d,this.#a(),this.swatchPopoverHelper().reposition()}async performUpdate(e){await this.#d(e),e?.throwIfAborted();let t={sections:this.#n.filter(i=>!i.isHidden())};this.#s(t,void 0,this.contentElement),this.#h()}#h(){this.dispatchEventToListeners("StylesUpdateCompleted")}#a(){for(let e of this.#n)e.updateFilter()}swatchPopoverHelper(){return this.#i}set domNode(e){this.#t.node!==e&&(this.#t.node=e,this.forceUpdate())}set filter(e){this.#o=e,this.#a(),this.requestUpdate()}node(){return this.#t.node}cssModel(){return this.#t.cssModel()}computedStyleModel(){return this.#t}setActiveProperty(e){}refreshUpdate(e,t){if(t)for(let i of this.#n)i.updateVarFunctions(t);if(this.isEditingStyle){this.#h();return}for(let i of this.#n)i.update(i===e);this.swatchPopoverHelper().reposition(),this.#h()}filterRegex(){return this.#o}setEditingStyle(e){this.isEditingStyle=e}setUserOperation(e){this.userOperation=e}forceUpdate(){this.hideAllPopovers(),this.#c()}hideAllPopovers(){this.#i.hide(),this.activeCSSAngle&&(this.activeCSSAngle.minify(),this.activeCSSAngle=null)}allSections(){return this.#n}getVariablePopoverContents(e,t,i){let n=e.getRegisteredProperty(t);return new Dd.CSSVariableValueView.CSSVariableValueView({variableName:t,value:i??void 0,details:n?{registration:n,goToDefinition:()=>{}}:void 0})}getVariableParserError(e,t){return null}jumpToFunctionDefinition(e,t){}continueEditingElement(e,t){}revealProperty(e){}resetFocus(){let e=this.#n[0]?.findCurrentOrNextVisible(!0);e&&(e.element.tabIndex=this.hasFocus()?-1:0)}removeSection(e){}focusedSectionIndex(){return this.#n.findIndex(e=>e.element.hasFocus())}addBlankSection(e,t,i){}jumpToProperty(e,t,i){return!1}jumpToSectionBlock(e){}jumpToFontPaletteDefinition(e){}jumpToCounterStyleDefinition(e){}jumpToDeclaration(e){}addStyleUpdateListener(e){this.addEventListener("StylesUpdateCompleted",e)}removeStyleUpdateListener(e){this.removeEventListener("StylesUpdateCompleted",e)}trackForLazyRendering(e,t){}shouldRenderLazily(){return!1}untrackForLazyRendering(e){}};export{Gs as AccessibilityTreeUtils,Or as AccessibilityTreeView,il as AdoptedStyleSheetTreeElement,ta as CSSRuleValidator,ya as CSSSpecificityBreakdown,sa as CSSValueTraceView,Cd as ClassesPaneWidget,Ur as ColorSwatchPopoverIcon,Xa as ComputedStyleWidget,sl as DOMPath,xd as ElementStatePaneWidget,ed as ElementsPanel,zr as ElementsSidebarPane,bl as ElementsTreeElement,Bl as ElementsTreeOutline,Td as ElementsTreeOutlineRenderer,ld as EventListenersWidget,Br as ImagePreviewPopover,nd as InspectElementModeController,so as LayersWidget,jl as LayoutPane,ll as MarkerDecorator,Gl as MetricsSidebarPane,Ql as PlatformFontsWidget,fd as PropertiesWidget,Ka as PropertyRenderer,Od as StandaloneStylesContainer,ga as StyleEditorWidget,wa as StylePropertiesSection,xa as StylePropertyHighlighter,pa as StylePropertyTreeElement,oa as StylePropertyUtils,bo as StylesAiCodeCompletionProvider,Va as StylesSidebarPane,Nl as TopLayerContainer,Na as WebCustomData};
//# sourceMappingURL=elements.js.map
