simdeck 0.1.4 → 0.1.5

package/client/dist/chrome-devtools-ui/panels/elements/elements.js

@@ -0,0 +1,67 @@
+import*as e from"../../core/common/common.js";import*as t from"../../core/root/root.js";import*as n from"../../core/sdk/sdk.js";import*as i from"../../ui/legacy/legacy.js";import*as s from"../../ui/visual_logging/visual_logging.js";import*as o from"../../core/host/host.js";import*as r from"../../core/i18n/i18n.js";import*as a from"../../core/platform/platform.js";import{assertNotNullOrUndefined as l}from"../../core/platform/platform.js";import*as d from"../../models/extensions/extensions.js";import*as c from"../../ui/components/buttons/buttons.js";import*as h from"../../ui/components/tree_outline/tree_outline.js";import*as p from"./components/components.js";import*as u from"../../ui/lit/lit.js";import{render as m,html as g,nothing as y}from"../../ui/lit/lit.js";import*as f from"../../models/bindings/bindings.js";import*as S from"../../ui/legacy/components/color_picker/color_picker.js";import*as E from"../../ui/legacy/components/inline_editor/inline_editor.js";import*as C from"../../ui/legacy/components/utils/utils.js";import*as v from"../../models/text_utils/text_utils.js";import*as b from"../../models/workspace_diff/workspace_diff.js";import{PanelUtils as w}from"../utils/utils.js";import*as x from"../../ui/components/icon_button/icon_button.js";import*as T from"../../ui/components/tooltips/tooltips.js";import*as M from"../../third_party/lit/lit.js";import*as N from"../../third_party/codemirror.next/codemirror.next.js";import*as I from"../../ui/components/adorners/adorners.js";import*as P from"../../ui/components/code_highlighter/code_highlighter.js";import*as A from"../../ui/components/floating_button/floating_button.js";import*as L from"../../ui/components/highlighting/highlighting.js";import*as O from"../../ui/components/text_editor/text_editor.js";import*as R from"../emulation/emulation.js";import*as D from"../../models/issues_manager/issues_manager.js";import*as k from"../../ui/components/issue_counter/issue_counter.js";import*as F from"../event_listeners/event_listeners.js";import*as U from"../../ui/legacy/components/object_ui/object_ui.js";const{html:_}=u;function B(e){const t=n.FrameManager.FrameManager.instance().getFrame(e),i=t?.resourceTreeModel().target().model(n.AccessibilityModel.AccessibilityModel);if(!i)throw new Error("Could not instantiate model for frameId");return i}async function V(e){const t=B(e),n=await t.requestRootNode(e);if(!n)throw new Error("No accessibility root for frame");return n}function H(e){let t;if(t=e instanceof n.DOMModel.DOMDocument?e.body?.frameId():e.frameId(),!t)throw new Error("No frameId for DOM node");return t}async function W(e){let t=H(e);const i=B(t),s=await i.requestAndLoadSubTreeToNode(e);if(!s)throw new Error("Could not retrieve accessibility node for inspected DOM node");const o=n.FrameManager.FrameManager.instance().getOutermostFrame()?.id;if(!o)return s;for(;t!==o;){const e=await(n.FrameManager.FrameManager.instance().getFrame(t)?.getOwnerDOMNodeOrDocument());if(!e)break;t=H(e);const i=B(t),o=await i.requestAndLoadSubTreeToNode(e);s.push(...o||[])}return s}async function j(e){const t=e;return 0===(n=e).numChildren()&&"Iframe"!==n.role()?.value?[{treeNodeData:t,id:z(e)}]:[{treeNodeData:t,children:async()=>{const t=await async function(e){if("Iframe"===e.role()?.value){const t=await(e.deferredDOMNode()?.resolvePromise());if(!t)throw new Error("Could not find corresponding DOMNode");const n=t.frameOwnerFrameId();if(!n)throw new Error("No owner frameId on iframe node");return[await V(n)]}return await e.accessibilityModel().requestAXChildren(e.id(),e.getFrameId()||void 0)}(e);return(await Promise.all(t.map((e=>j(e))))).flat(1)},id:z(e)}];var n}function $(e){const t=e.treeNodeData,n=t.name()?.value||"",i=t.role()?.value||"",s=t.properties()||[],o=t.ignored(),r=z(t);return _`<devtools-accessibility-tree-node .data=${{name:n,role:i,ignored:o,properties:s,id:r}}></devtools-accessibility-tree-node>`}function z(e){return e.getFrameId()+"#"+e.id()}var K=Object.freeze({__proto__:null,accessibilityNodeRenderer:$,getNodeAndAncestorsFromDOMNode:W,getNodeId:z,getRootNode:V,sdkNodeToAXTreeNodes:j}),G={cssText:`.accessibility-tree-view-container{height:100%;overflow:auto}\n/*# sourceURL=${import.meta.resolve("./accessibilityTreeView.css")} */\n`};class q extends i.Widget.VBox{accessibilityTreeComponent;toggleButton;inspectedDOMNode=null;root=null;constructor(e,t){super(),this.registerRequiredCSS(G),this.toggleButton=e,this.accessibilityTreeComponent=t;const i=this.contentElement.createChild("div");i.classList.add("accessibility-tree-view-container"),i.setAttribute("jslog",`${s.tree("full-accessibility")}`),i.appendChild(this.toggleButton),i.appendChild(this.accessibilityTreeComponent),n.TargetManager.TargetManager.instance().observeModels(n.AccessibilityModel.AccessibilityModel,this,{scoped:!0}),this.accessibilityTreeComponent.addEventListener("itemselected",(e=>{const t=e.data.node.treeNodeData;if(!t.isDOMNode())return;const n=t.deferredDOMNode();n&&n.resolve((e=>{e&&(this.inspectedDOMNode=e,Ls.instance().revealAndSelectNode(e,!0,!1))}))})),this.accessibilityTreeComponent.addEventListener("itemmouseover",(e=>{e.data.node.treeNodeData.highlightDOMNode()})),this.accessibilityTreeComponent.addEventListener("itemmouseout",(()=>{n.OverlayModel.OverlayModel.hideDOMNodeHighlight()}))}async wasShown(){super.wasShown(),await this.refreshAccessibilityTree(),this.inspectedDOMNode&&await this.loadSubTreeIntoAccessibilityModel(this.inspectedDOMNode)}async refreshAccessibilityTree(){if(!this.root){const e=n.FrameManager.FrameManager.instance().getOutermostFrame()?.id;if(!e)throw new Error("No top frame");if(this.root=await V(e),!this.root)throw new Error("No root")}await this.renderTree(),await this.accessibilityTreeComponent.expandRecursively(1)}async renderTree(){if(!this.root)return;const e=await j(this.root);this.accessibilityTreeComponent.data={defaultRenderer:$,tree:e,filter:e=>e.ignored()||"generic"===e.role()?.value&&!e.name()?.value?"FLATTEN":"SHOW"}}async loadSubTreeIntoAccessibilityModel(e){const t=await W(e),n=t.find((t=>t.backendDOMNodeId()===e.backendNodeId()));n&&(await this.accessibilityTreeComponent.expandNodeIds(t.map((e=>e.getFrameId()+"#"+e.id()))),await this.accessibilityTreeComponent.focusNodeId(z(n)))}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||"HTML"!==e.nodeName()&&"BODY"!==e.nodeName()?this.inspectedDOMNode=e:this.inspectedDOMNode=e.ownerDocument)}treeUpdated({data:e}){if(!this.isShowing())return;if(!e.root)return void this.renderTree();const t=n.FrameManager.FrameManager.instance().getOutermostFrame()?.id;e.root?.getFrameId()===t?(this.root=e.root,this.accessibilityTreeComponent.collapseAllNodes(),this.refreshAccessibilityTree()):this.renderTree()}modelAdded(e){e.addEventListener("TreeUpdated",this.treeUpdated,this)}modelRemoved(e){e.removeEventListener("TreeUpdated",this.treeUpdated,this)}}var Y=Object.freeze({__proto__:null,AccessibilityTreeView:q});const X={openCubicBezierEditor:"Open cubic bezier editor",openShadowEditor:"Open shadow editor"},Q=r.i18n.registerUIStrings("panels/elements/ColorSwatchPopoverIcon.ts",X),J=r.i18n.getLocalizedString.bind(void 0,Q);class Z{treeElement;swatchPopoverHelper;swatch;boundBezierChanged;boundOnScroll;bezierEditor;scrollerElement;originalPropertyText;constructor({treeElement:e,swatchPopoverHelper:t,swatch:n}){this.treeElement=e,this.swatchPopoverHelper=t,this.swatch=n,i.Tooltip.Tooltip.install(this.swatch.iconElement(),J(X.openCubicBezierEditor)),this.swatch.iconElement().addEventListener("click",this.iconClick.bind(this),!1),this.swatch.iconElement().addEventListener("mousedown",(e=>e.consume()),!1),this.boundBezierChanged=this.bezierChanged.bind(this),this.boundOnScroll=this.onScroll.bind(this)}iconClick(t){if(t.consume(!0),this.swatchPopoverHelper.isShowing())return void this.swatchPopoverHelper.hide(!0);const n=E.AnimationTimingModel.AnimationTimingModel.parse(this.swatch.bezierText())||E.AnimationTimingModel.LINEAR_BEZIER;this.bezierEditor=new E.BezierEditor.BezierEditor(n),this.bezierEditor.addEventListener("BezierChanged",this.boundBezierChanged),this.swatchPopoverHelper.show(this.bezierEditor,this.swatch.iconElement(),this.onPopoverHidden.bind(this)),this.scrollerElement=this.swatch.enclosingNodeOrSelfWithClass("style-panes-wrapper"),this.scrollerElement&&this.scrollerElement.addEventListener("scroll",this.boundOnScroll,!1),this.originalPropertyText=this.treeElement.property.propertyText,this.treeElement.parentPane().setEditingStyle(!0);const i=f.CSSWorkspaceBinding.CSSWorkspaceBinding.instance().propertyUILocation(this.treeElement.property,!1);i&&e.Revealer.reveal(i,!0)}bezierChanged(e){this.swatch.setBezierText(e.data),this.treeElement.applyStyleText(this.treeElement.renderedPropertyText(),!1)}onScroll(e){this.swatchPopoverHelper.hide(!0)}onPopoverHidden(e){this.scrollerElement&&this.scrollerElement.removeEventListener("scroll",this.boundOnScroll,!1),this.bezierEditor&&this.bezierEditor.removeEventListener("BezierChanged",this.boundBezierChanged),this.bezierEditor=void 0;const t=e?this.treeElement.renderedPropertyText():this.originalPropertyText||"";this.treeElement.applyStyleText(t,!0),this.treeElement.parentPane().setEditingStyle(!1),delete this.originalPropertyText}}class ee extends e.ObjectWrapper.ObjectWrapper{treeElement;swatchPopoverHelper;swatch;contrastInfo;boundSpectrumChanged;boundOnScroll;spectrum;scrollerElement;originalPropertyText;constructor(e,t,n){super(),this.treeElement=e,this.swatchPopoverHelper=t,this.swatch=n,this.swatch.addEventListener(E.ColorSwatch.ClickEvent.eventName,this.iconClick.bind(this)),this.contrastInfo=null,this.boundSpectrumChanged=this.spectrumChanged.bind(this),this.boundOnScroll=this.onScroll.bind(this)}generateCSSVariablesPalette(){const t=this.treeElement.matchedStyles(),n=this.treeElement.property.ownerStyle,i=t.availableCSSVariables(n),s=[],o=[];for(const r of i){if(r===this.treeElement.property.name)continue;const i=t.computeCSSVariable(n,r);if(!i)continue;e.Color.parse(i.value)&&(s.push(i.value),o.push(r))}return{title:"CSS Variables",mutable:!1,matchUserFormat:!0,colors:s,colorNames:o}}setContrastInfo(e){this.contrastInfo=e}iconClick(e){e.consume(!0),this.showPopover()}async toggleEyeDropper(){await(this.spectrum?.toggleColorPicker())}showPopover(){if(this.swatchPopoverHelper.isShowing())return void this.swatchPopoverHelper.hide(!0);const t=this.swatch.getColor();if(!t)return;this.spectrum=new S.Spectrum.Spectrum(this.contrastInfo),this.spectrum.setColor(t),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.parentPane().setEditingStyle(!0);const n=f.CSSWorkspaceBinding.CSSWorkspaceBinding.instance().propertyUILocation(this.treeElement.property,!1);n&&e.Revealer.reveal(n,!0),i.Context.Context.instance().setFlavor(ee,this)}spectrumResized(){this.swatchPopoverHelper.reposition()}async spectrumChanged(t){const n=(t=>{const n=e.Color.parse(t),i=this.spectrum?.colorName()?.startsWith("--")&&`var(${this.spectrum.colorName()})`;if(!n||!i)return n;if(n.is("hex")||n.is("hexa")||n.is("rgb")||n.is("rgba"))return new e.Color.Legacy(n.rgba(),n.format(),i);if(n.is("hsl"))return new e.Color.HSL(n.h,n.s,n.l,n.alpha,i);if(n.is("hwb"))return new e.Color.HWB(n.h,n.w,n.b,n.alpha,i);if(n.is("lch"))return new e.Color.LCH(n.l,n.c,n.h,n.alpha,i);if(n.is("oklch"))return new e.Color.Oklch(n.l,n.c,n.h,n.alpha,i);if(n.is("lab"))return new e.Color.Lab(n.l,n.a,n.b,n.alpha,i);if(n.is("oklab"))return new e.Color.Oklab(n.l,n.a,n.b,n.alpha,i);if(n.is("srgb")||n.is("srgb-linear")||n.is("display-p3")||n.is("a98-rgb")||n.is("prophoto-rgb")||n.is("rec2020")||n.is("xyz")||n.is("xyz-d50")||n.is("xyz-d65"))return new e.Color.ColorFunction(n.colorSpace,n.p0,n.p1,n.p2,n.alpha,i);throw new Error(`Forgot to handle color format ${n.format()}`)})(t.data);n&&(this.swatch.renderColor(n),this.dispatchEventToListeners("colorchanged",n))}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;const t=e?this.treeElement.renderedPropertyText():this.originalPropertyText||"";this.treeElement.applyStyleText(t,!0),this.treeElement.parentPane().setEditingStyle(!1),delete this.originalPropertyText,i.Context.Context.instance().setFlavor(ee,null)}}class te extends e.ObjectWrapper.ObjectWrapper{treeElement;swatchPopoverHelper;shadowSwatch;iconElement;boundShadowChanged;boundOnScroll;cssShadowEditor;scrollerElement;originalPropertyText;constructor(e,t,n){super(),this.treeElement=e,this.swatchPopoverHelper=t,this.shadowSwatch=n,this.iconElement=n.iconElement(),i.Tooltip.Tooltip.install(this.iconElement,J(X.openShadowEditor)),this.iconElement.addEventListener("click",this.iconClick.bind(this),!1),this.iconElement.addEventListener("mousedown",(e=>e.consume()),!1),this.boundShadowChanged=this.shadowChanged.bind(this),this.boundOnScroll=this.onScroll.bind(this)}iconClick(e){e.consume(!0),this.showPopover()}showPopover(){if(this.swatchPopoverHelper.isShowing())return void this.swatchPopoverHelper.hide(!0);this.cssShadowEditor=new E.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.parentPane().setEditingStyle(!0);const t=f.CSSWorkspaceBinding.CSSWorkspaceBinding.instance().propertyUILocation(this.treeElement.property,!1);t&&e.Revealer.reveal(t,!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;const t=e?this.treeElement.renderedPropertyText():this.originalPropertyText||"";this.treeElement.applyStyleText(t,!0),this.treeElement.parentPane().setEditingStyle(!1),delete this.originalPropertyText}}class ne{treeElementMap;swatchPopoverHelper;section;parentPane;fontEditor;scrollerElement;boundFontChanged;boundOnScroll;boundResized;constructor(e,t){this.treeElementMap=new Map,this.swatchPopoverHelper=e,this.section=t,this.parentPane=null,this.fontEditor=null,this.scrollerElement=null,this.boundFontChanged=this.fontChanged.bind(this),this.boundOnScroll=this.onScroll.bind(this),this.boundResized=this.fontEditorResized.bind(this)}fontChanged(e){const{propertyName:t,value:n}=e.data,i=this.treeElementMap.get(t);this.updateFontProperty(t,n,i)}async updateFontProperty(e,t,n){if(n?.treeOutline&&n.valueElement&&n.property.parsedOk&&n.property.range){let e,i=!1;n.valueElement.textContent=t,n.property.value=t;const s=n.property.name;t.length?e=n.renderedPropertyText():(e="",i=!0,this.fixIndex(n.property.index)),this.treeElementMap.set(s,n),await n.applyStyleText(e,!0),i&&this.treeElementMap.delete(s)}else if(t.length){const n=this.section.addNewBlankProperty();n&&(n.property.name=e,n.property.value=t,n.updateTitle(),await n.applyStyleText(n.renderedPropertyText(),!0),this.treeElementMap.set(n.property.name,n))}this.section.onpopulate(),this.swatchPopoverHelper.reposition()}fontEditorResized(){this.swatchPopoverHelper.reposition()}fixIndex(e){for(const t of this.treeElementMap.values())t.property.index>e&&(t.property.index-=1)}createPropertyValueMap(){const e=new Map;for(const t of this.treeElementMap){const n=t[0],i=t[1];i.property.value.length?e.set(n,i.property.value):this.treeElementMap.delete(n)}return e}registerFontProperty(e){const t=e.property.name;if(this.treeElementMap.has(t)){const n=this.treeElementMap.get(t);e.overloaded()&&!n?.overloaded()||this.treeElementMap.set(t,e)}else this.treeElementMap.set(t,e)}async showPopover(e,t){if(this.swatchPopoverHelper.isShowing())return void this.swatchPopoverHelper.hide(!0);this.parentPane=t;const n=this.createPropertyValueMap();this.fontEditor=new E.FontEditor.FontEditor(n),this.fontEditor.addEventListener("FontChanged",this.boundFontChanged),this.fontEditor.addEventListener("FontEditorResized",this.boundResized),this.swatchPopoverHelper.show(this.fontEditor,e,this.onPopoverHidden.bind(this)),this.scrollerElement=e.enclosingNodeOrSelfWithClass("style-panes-wrapper"),this.scrollerElement&&this.scrollerElement.addEventListener("scroll",this.boundOnScroll,!1),this.parentPane.setEditingStyle(!0)}onScroll(){this.swatchPopoverHelper.hide(!0)}onPopoverHidden(){this.scrollerElement&&this.scrollerElement.removeEventListener("scroll",this.boundOnScroll,!1),this.section.onpopulate(),this.fontEditor&&this.fontEditor.removeEventListener("FontChanged",this.boundFontChanged),this.fontEditor=null,this.parentPane&&this.parentPane.setEditingStyle(!1),this.section.resetToolbars(),this.section.onpopulate()}}var ie=Object.freeze({__proto__:null,BezierPopoverIcon:Z,ColorSwatchPopoverIcon:ee,FontEditorSectionManager:ne,ShadowSwatchPopoverHelper:te}),se={cssText:`.styles-sidebar-pane-toolbar{border-bottom:1px solid var(--sys-color-divider);flex-shrink:0}.styles-sidebar-computed-style-widget{min-height:auto}.styles-pane-toolbar{width:100%}\n/*# sourceURL=${import.meta.resolve("./computedStyleSidebarPane.css")} */\n`};class oe{getLinkElement;getDOMNode;popover;constructor(e,t,n){this.getLinkElement=t,this.getDOMNode=n,this.popover=new i.PopoverHelper.PopoverHelper(e,this.handleRequest.bind(this),"elements.image-preview"),this.popover.setTimeout(0,100)}handleRequest(e){const t=this.getLinkElement(e);if(!t)return null;const n=re.get(t);return n?{box:t.boxInWindow(),hide:void 0,show:async e=>{const i=this.getDOMNode(t);if(!i)return!1;const s=await C.ImagePreview.ImagePreview.loadDimensionsForNode(i),o=await C.ImagePreview.ImagePreview.build(i.domModel().target(),n,!0,{imageAltText:void 0,precomputedFeatures:s,align:"center"});return o&&e.contentElement.appendChild(o),Boolean(o)}}:null}hide(){this.popover.hidePopover()}static setImageUrl(e,t){return re.set(e,t),e}static getImageURL(e){return re.get(e)}}const re=new WeakMap;var ae={cssText:`:host{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)}}\n/*# sourceURL=${import.meta.resolve("./platformFontsWidget.css")} */\n`};const le={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)}}"},de=r.i18n.registerUIStrings("panels/elements/PlatformFontsWidget.ts",le),ce=r.i18n.getLocalizedString.bind(void 0,de);class he extends i.ThrottledWidget.ThrottledWidget{sharedModel;sectionTitle;fontStatsSection;constructor(e){super(!0),this.registerRequiredCSS(ae),this.sharedModel=e,this.sharedModel.addEventListener("CSSModelChanged",this.update,this),this.sharedModel.addEventListener("ComputedStyleChanged",this.update,this),this.sectionTitle=document.createElement("div"),this.sectionTitle.classList.add("title"),this.contentElement.classList.add("platform-fonts"),this.contentElement.appendChild(this.sectionTitle),this.sectionTitle.textContent=ce(le.renderedFonts),this.fontStatsSection=this.contentElement.createChild("div","stats-section")}doUpdate(){const e=this.sharedModel.cssModel(),t=this.sharedModel.node();return t&&e?e.getPlatformFonts(t.id).then(this.refreshUI.bind(this,t)):Promise.resolve()}refreshUI(e,t){if(this.sharedModel.node()!==e)return;this.fontStatsSection.removeChildren();const n=!t?.length;if(this.sectionTitle.classList.toggle("hidden",n),!n&&t){t.sort((function(e,t){return t.glyphCount-e.glyphCount}));for(const e of t){const t=this.fontStatsSection.createChild("div","font-stats-item");t.createChild("div").textContent=`${le.familyName}: ${e.familyName}`;t.createChild("div").textContent=`${le.postScriptName}: ${e.postScriptName}`;const n=t.createChild("div"),i=e.isCustomFont?ce(le.networkResource):ce(le.localFile);n.textContent=`${le.fontOrigin}: ${i}`;const s=n.createChild("span","font-usage"),o=e.glyphCount;s.textContent=ce(le.dGlyphs,{n:o})}}}}var pe=Object.freeze({__proto__:null,PlatformFontsWidget:he});const ue=["Layout","Text","Appearance","Animation","CSS Variables","Grid","Flex","Table","Generated Content","Other"],me=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","≈","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"]]]),ge=new Map;for(const[e,t]of me)for(const n of t){ge.has(n)||ge.set(n,[]);ge.get(n).push(e)}const ye=e=>ge.has(e)?ge.get(e):e.startsWith("--")?["CSS Variables"]:[],fe=e=>{const t=n.CSSMetadata.cssMetadata(),i=t.canonicalPropertyName(e),s=ye(i);if(s.length>0)return s;const o=t.getShorthands(i);if(o)for(const e of o){const t=ye(e);if(t.length>0)return t}return["Other"]};class Se extends i.Widget.VBox{computedStyleModelInternal;updateThrottler;updateWhenVisible;constructor(t,n){super(!0,n),this.element.classList.add("flex-none"),this.computedStyleModelInternal=t,this.computedStyleModelInternal.addEventListener("CSSModelChanged",this.onCSSModelChanged,this),this.computedStyleModelInternal.addEventListener("ComputedStyleChanged",this.onComputedStyleChanged,this),this.updateThrottler=new e.Throttler.Throttler(100),this.updateWhenVisible=!1}node(){return this.computedStyleModelInternal.node()}cssModel(){return this.computedStyleModelInternal.cssModel()}computedStyleModel(){return this.computedStyleModelInternal}async doUpdate(){}update(){this.updateWhenVisible=!this.isShowing(),this.updateWhenVisible||this.updateThrottler.schedule(function(){return this.isShowing()?this.doUpdate():Promise.resolve()}.bind(this))}wasShown(){super.wasShown(),this.updateWhenVisible&&this.update()}onCSSModelChanged(e){}onComputedStyleChanged(){}}var Ee=Object.freeze({__proto__:null,ElementsSidebarPane:Se}),Ce={cssText:`.styles-layers-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-layers-pane > div{font-weight:bold;margin:8px 4px 6px}.styles-layers-pane > table{width:100%;border-spacing:0}.styles-layers-pane td{padding:0}\n/*# sourceURL=${import.meta.resolve("./layersWidget.css")} */\n`};const ve={cssLayersTitle:"CSS layers",toggleCSSLayers:"Toggle CSS Layers view"},be=r.i18n.registerUIStrings("panels/elements/LayersWidget.ts",ve),we=r.i18n.getLocalizedString.bind(void 0,be);let xe,Te;class Me extends i.Widget.Widget{cssModel;layerTreeComponent=new h.TreeOutline.TreeOutline;constructor(){super(!0),this.registerRequiredCSS(Ce),this.contentElement.className="styles-layers-pane",this.contentElement.setAttribute("jslog",`${s.pane("css-layers")}`),i.UIUtils.createTextChild(this.contentElement.createChild("div"),we(ve.cssLayersTitle)),this.contentElement.appendChild(this.layerTreeComponent),i.Context.Context.instance().addFlavorChangeListener(n.DOMModel.DOMNode,this.update,this)}updateModel(e){this.cssModel!==e&&(this.cssModel&&this.cssModel.removeEventListener(n.CSSModel.Events.StyleSheetChanged,this.update,this),this.cssModel=e,this.cssModel&&this.cssModel.addEventListener(n.CSSModel.Events.StyleSheetChanged,this.update,this))}wasShown(){return super.wasShown(),this.update()}async update(){if(!this.isShowing())return;let e=i.Context.Context.instance().flavor(n.DOMModel.DOMNode);if(e&&(e=e.enclosingElementOrSelf()),!e)return;if(this.updateModel(e.domModel().cssModel()),!this.cssModel)return;const t=e=>i=>{const s=i.subLayers,o=n.CSSModel.CSSModel.readableLayerName(i.name),r=i.order+": "+o,a=e?e+"."+o:o;return s?{treeNodeData:r,id:a,children:()=>Promise.resolve(s.sort(((e,t)=>e.order-t.order)).map(t(a)))}:{treeNodeData:r,id:a}},s=await this.cssModel.getRootLayer(e.id);this.layerTreeComponent.data={defaultRenderer:h.TreeOutline.defaultRenderer,tree:[t("")(s)]},await this.layerTreeComponent.expandRecursively(5)}async revealLayer(e){return this.isShowing()||Ls.instance().showToolbarPane(this,Ne.instance().item()),await this.update(),await this.layerTreeComponent.expandToAndSelectTreeNodeId("implicit outer layer."+e)}static instance(e={forceNew:null}){const{forceNew:t}=e;return xe&&!t||(xe=new Me),xe}}let Ne=class e{button;constructor(){this.button=new i.Toolbar.ToolbarToggle(we(ve.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",`${s.toggleSubpane("css-layers").track({click:!0})}`)}static instance(t={forceNew:null}){const{forceNew:n}=t;return Te&&!n||(Te=new e),Te}clicked(){const e=Me.instance();Ls.instance().showToolbarPane(e.isShowing()?null:e,this.button)}item(){return this.button}};var Ie=Object.freeze({__proto__:null,ButtonProvider:Ne,LayersWidget:Me});const Pe=(e,t)=>void 0===t?Ae(e):'<code class="unbreakable-text"><span class="property">'+e+"</span>: "+t+"</code>",Ae=e=>'<code class="unbreakable-text"><span class="property">'+e+"</span></code>",Le=e=>'<code class="unbreakable-text">'+e+"</code>",Oe=e=>{if(!e)return!1;const t=e.get("display");return"flex"===t||"inline-flex"===t},Re=new Set(["block","flow-root","inline-block","list-item","table-caption","table-cell"]),De=new Set(["audio","canvas","embed","iframe","img","input","object","video"]),ke=e=>{if(!e)return!1;const t=e.get("display");return"grid"===t||"inline-grid"===t},Fe={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."},Ue=r.i18n.registerUIStrings("panels/elements/CSSRuleValidator.ts",Fe),_e=r.i18n.getLocalizedString.bind(void 0,Ue);class Be{#e;#t;#n;constructor(e,t,n){this.#e=e,this.#t=t,this.#n=n}getMessage(){return this.#e}getPossibleFixMessage(){return this.#t}getLearnMoreLink(){return this.#n}}class Ve{getMetricType(){return 0}#i;constructor(e){this.#i=e}getApplicableProperties(){return this.#i}}class He extends Ve{constructor(){super(["align-content","place-content"])}getMetricType(){return 1}getHint(e,t){if(!t)return;const n=Oe(t);if(!n&&!(e=>{if(!e)return!1;const t=e.get("display");if(!t)return!1;const n=t.split(" ");return!(n.length>3)&&(3===n.length?"list-item"===n[2]:2===n.length?"list-item"===n[1]&&"inline"!==n[0]:Re.has(n[0]))})(t)&&!ke(t)){const e=Pe("display",t?.get("display")),n=Ae("align-content");return new Be(_e(Fe.ruleViolatedBySameElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:e,AFFECTED_PROPERTY_DECLARATION_CODE:n}),_e(Fe.ruleViolatedBySameElementRuleFix,{PROPERTY_NAME:Ae("display"),PROPERTY_VALUE:Le(t?.get("display"))}))}if(!n)return;if("nowrap"!==t.get("flex-wrap"))return;const i=Pe("flex-wrap","nowrap"),s=Ae("align-content");return new Be(_e(Fe.ruleViolatedBySameElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:i,AFFECTED_PROPERTY_DECLARATION_CODE:s}),_e(Fe.ruleViolatedBySameElementRuleFix,{PROPERTY_NAME:Ae("flex-wrap"),PROPERTY_VALUE:Le("nowrap")}))}}class We extends Ve{constructor(){super(["flex","flex-basis","flex-grow","flex-shrink"])}getMetricType(){return 2}getHint(e,t,n){if(!n)return;if(Oe(n))return;const i=Pe("display",n?.get("display")),s=Ae(e),o=Pe("display","flex");return new Be(_e(Fe.ruleViolatedByParentElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:i,AFFECTED_PROPERTY_DECLARATION_CODE:s}),_e(Fe.ruleViolatedByParentElementRuleFix,{EXISTING_PARENT_ELEMENT_RULE:i,TARGET_PARENT_ELEMENT_RULE:o}))}}class je extends Ve{constructor(){super(["flex-direction","flex-flow","flex-wrap"])}getMetricType(){return 3}getHint(e,t){if(!t)return;if(Oe(t))return;const n=Pe("display",t?.get("display")),i=Pe("display","flex"),s=Ae(e);return new Be(_e(Fe.ruleViolatedBySameElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:n,AFFECTED_PROPERTY_DECLARATION_CODE:s}),_e(Fe.ruleViolatedBySameElementRuleChangeSuggestion,{EXISTING_PROPERTY_DECLARATION:n,TARGET_PROPERTY_DECLARATION:i}))}}class $e extends Ve{constructor(){super(["grid","grid-auto-columns","grid-auto-flow","grid-auto-rows","grid-template","grid-template-areas","grid-template-columns","grid-template-rows"])}getMetricType(){return 4}getHint(e,t){if(ke(t))return;const n=Pe("display",t?.get("display")),i=Pe("display","grid"),s=Ae(e);return new Be(_e(Fe.ruleViolatedBySameElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:n,AFFECTED_PROPERTY_DECLARATION_CODE:s}),_e(Fe.ruleViolatedBySameElementRuleChangeSuggestion,{EXISTING_PROPERTY_DECLARATION:n,TARGET_PROPERTY_DECLARATION:i}))}}class ze extends Ve{constructor(){super(["grid-area","grid-column","grid-row","grid-row-end","grid-row-start"])}getMetricType(){return 5}getHint(e,t,n){if(!n)return;if(ke(n))return;const i=Pe("display",n?.get("display")),s=Pe("display","grid"),o=Ae(e);return new Be(_e(Fe.ruleViolatedByParentElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:i,AFFECTED_PROPERTY_DECLARATION_CODE:o}),_e(Fe.ruleViolatedByParentElementRuleFix,{EXISTING_PARENT_ELEMENT_RULE:i,TARGET_PARENT_ELEMENT_RULE:s}))}}class Ke extends Ve{constructor(){super(["order"])}getMetricType(){return 12}getHint(e,t,n){if(!n)return;if(Oe(n)||ke(n))return;const i=Pe("display",n?.get("display")),s=`${Pe("display","flex")} or ${Pe("display","grid")}`,o=Ae(e);return new Be(_e(Fe.ruleViolatedByParentElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:i,AFFECTED_PROPERTY_DECLARATION_CODE:o}),_e(Fe.ruleViolatedByParentElementRuleFix,{EXISTING_PARENT_ELEMENT_RULE:i,TARGET_PARENT_ELEMENT_RULE:s}))}}class Ge extends Ve{constructor(){super(["justify-content"])}getMetricType(){return 6}getHint(e,t,n){if(!t)return;if(Oe(t)||ke(t))return;if(n&&(Oe(n)||ke(n))){const t=Le(n.get("display")),i=Ae(e),s=Ae("justify-self");return new Be(_e(Fe.flexGridContainerPropertyRuleReason,{CONTAINER_DISPLAY_NAME:t,PROPERTY_NAME:i}),_e(Fe.flexGridContainerPropertyRuleFix,{PROPERTY_NAME:i,ALTERNATIVE_PROPERTY_NAME:s}))}const i=Pe("display",t.get("display")),s=Ae(e);return new Be(_e(Fe.ruleViolatedBySameElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:i,AFFECTED_PROPERTY_DECLARATION_CODE:s}),_e(Fe.ruleViolatedBySameElementRuleChangeFlexOrGrid,{DISPLAY_GRID_RULE:Pe("display","grid"),DISPLAY_FLEX_RULE:Pe("display","flex")}))}}class qe extends Ve{constructor(){super(["gap","column-gap","row-gap","grid-gap","grid-column-gap","grid-column-end","grid-row-gap"])}getMetricType(){return 7}getHint(e,t){if(!t)return;if((e=>{if(!e)return!1;const t=e.get("column-width"),n=e.get("column-count");return"auto"!==t||"auto"!==n})(t)||Oe(t)||ke(t))return;const n=Pe("display",t?.get("display")),i=Ae(e);return new Be(_e(Fe.ruleViolatedBySameElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:n,AFFECTED_PROPERTY_DECLARATION_CODE:i}),_e(Fe.ruleViolatedBySameElementRuleFix,{PROPERTY_NAME:Ae("display"),PROPERTY_VALUE:Le(t?.get("display"))}))}}class Ye extends Ve{constructor(){super(["padding","padding-top","padding-right","padding-bottom","padding-left"])}getMetricType(){return 8}getHint(e,t){const n=t?.get("display");if(!n)return;if(!["table-row-group","table-header-group","table-footer-group","table-row","table-column-group","table-column"].includes(n))return;const i=Pe("display",t?.get("display")),s=Ae(e);return new Be(_e(Fe.ruleViolatedBySameElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:i,AFFECTED_PROPERTY_DECLARATION_CODE:s}),_e(Fe.ruleViolatedBySameElementRuleFix,{PROPERTY_NAME:Ae("display"),PROPERTY_VALUE:Le(t?.get("display"))}))}}class Xe extends Ve{constructor(){super(["top","right","bottom","left"])}getMetricType(){return 9}getHint(e,t){const n=t?.get("position");if(!n)return;if("static"!==n)return;const i=Pe("position",t?.get("position")),s=Ae(e);return new Be(_e(Fe.ruleViolatedBySameElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:i,AFFECTED_PROPERTY_DECLARATION_CODE:s}),_e(Fe.ruleViolatedBySameElementRuleFix,{PROPERTY_NAME:Ae("position"),PROPERTY_VALUE:Le(t?.get("position"))}))}}class Qe extends Ve{constructor(){super(["z-index"])}getMetricType(){return 10}getHint(e,t,n){const i=t?.get("position");if(!i)return;if(["absolute","relative","fixed","sticky"].includes(i)||Oe(n)||ke(n))return;const s=Pe("position",t?.get("position")),o=Ae(e);return new Be(_e(Fe.ruleViolatedBySameElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:s,AFFECTED_PROPERTY_DECLARATION_CODE:o}),_e(Fe.ruleViolatedBySameElementRuleFix,{PROPERTY_NAME:Ae("position"),PROPERTY_VALUE:Le(t?.get("position"))}))}}class Je extends Ve{constructor(){super(["width","height"])}getMetricType(){return 11}getHint(e,t,n,i){if(!t||!i)return;if(!(e=>!!e&&"inline"===e.get("display"))(t))return;if((e=>!!e&&De.has(e))(i))return;const s=Pe("display",t?.get("display")),o=Ae(e);return new Be(_e(Fe.ruleViolatedBySameElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:s,AFFECTED_PROPERTY_DECLARATION_CODE:o}),_e(Fe.ruleViolatedBySameElementRuleFix,{PROPERTY_NAME:Ae("display"),PROPERTY_VALUE:Le(t?.get("display"))}))}}class Ze extends Ve{constructor(){super(["font-variation-settings"])}getMetricType(){return 13}getHint(e,t,i,s,o){if(!t)return;const r=t.get("font-variation-settings");if(!r)return;const a=t.get("font-family");if(!a)return;const l=new Set(n.CSSPropertyParser.parseFontFamily(a)),d=(o||[]).filter((e=>l.has(e.getFontFamily()))),c=n.CSSPropertyParser.parseFontVariationSettings(r),h=[];for(const e of c)for(const t of d){const n=t.getVariationAxisByTag(e.tag);n&&((e.value<n.minValue||e.value>n.maxValue)&&h.push(_e(Fe.fontVariationSettingsWarning,{PH1:e.tag,PH2:e.value,PH3:n.minValue,PH4:n.maxValue,PH5:t.getFontFamily()})))}return h.length?new Be(h.join(" "),""):void 0}}const et=[He,je,Ge,We,Ke,Ze,$e,ze,qe,Ye,Xe,Je,Qe],tt=(()=>{const e=new Map;for(const t of et){const n=new t,i=n.getApplicableProperties();for(const t of i){let i=e.get(t);void 0===i&&(i=[]),i.push(n),e.set(t,i)}}return e})();var nt=Object.freeze({__proto__:null,AlignContentValidator:He,CSSRuleValidator:Ve,FlexContainerValidator:je,FlexGridValidator:Ge,FlexItemValidator:We,FlexOrGridItemValidator:Ke,FontVariationSettingsValidator:Ze,GridContainerValidator:$e,GridItemValidator:ze,Hint:Be,MulticolFlexGridValidator:qe,PaddingValidator:Ye,PositionValidator:Xe,SizingValidator:Je,ZIndexValidator:Qe,cssRuleValidatorsMap:tt}),it={cssText:`:host(:focus-within){outline:none!important}.css-value-trace{--cell-width:1.5em;display:grid;grid-template-columns:var(--cell-width) 1fr;margin:0;& .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(--sys-size-3);grid-column:2/3;margin:0;padding-left:var(--sys-size-4)}.full-row{grid-column-start:1}}::highlight(css-value-tracing){background-color:var(--sys-color-tonal-container)}\n/*# sourceURL=${import.meta.resolve("./cssValueTraceView.css")} */\n`},st={cssText:`.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;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{word-wrap:break-word!important;white-space:normal!important;padding-left:0}.info{padding-top:4px;padding-bottom:3px}}.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;padding-inline-start:12px;list-style:none}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,\n  &:active::before{left:3px}}.overloaded:not(.has-ignorable-error, .invalid-property-value),\n.inactive:not(.invalid-property-value),\n.disabled,\n.not-parsed-ok:not(.has-ignorable-error, .invalid-property-value),\n.not-parsed-ok.invalid-property-value .value{text-decoration:line-through}.implicit,\n.inherited,\n.inactive-property{opacity:50%}.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,\n: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{height:15px;margin:0 0 0 6px;position:absolute;top:-1px;display:inline-flex;align-items:center;justify-content:center}: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,\n: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}.devtools-link-styled-trim{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:80%;vertical-align:bottom}devtools-css-angle,\ndevtools-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)}}.value :focus{border-radius:var(--sys-size-2);outline:var(--sys-size-2) solid var(--sys-color-state-focus-ring)}.css-function-inline-block{display:inline-block;padding-left:18px;margin-left:-38px;--webkit-css-property-color:var(--app-color-element-sidebar-subtitle)}\n/*# sourceURL=${import.meta.resolve("./stylePropertiesTreeOutline.css")} */\n`};const{html:ot,render:rt,Directives:{ref:at,classMap:lt,ifDefined:dt}}=M;function ct(e,t,n){const[i,...s]=e.evaluations,o=!i||0===s.length,r=o?void 0:0,a=0===e.evaluations.length&&0===e.substitutions.length;rt(ot`
+      <div
+       role=dialog
+       ${at((e=>{t.defaultFocusedElement=e?.querySelector("[tabindex]")??void 0}))}
+       class="css-value-trace monospace"
+       @keydown=${function(e){e.altKey||(e.key.startsWith("Arrow")||" "===e.key||"Enter"===e.key)&&e.consume();if("Tab"===e.key){const t=this.querySelectorAll("[tabindex]")??[],n=t[0],i=t[t.length-1];e.target!==i||e.shiftKey||(e.consume(!0),n instanceof HTMLElement&&n.focus()),e.target===n&&e.shiftKey&&(e.consume(!0),i instanceof HTMLElement&&i.focus())}}}
+       >
+        ${e.substitutions.map((e=>ot`<span class="trace-line-icon" aria-label="is equal to">↳</span
+              ><span class="trace-line">${e}</span>`))}
+        ${i&&0===s.length?ot`<span class="trace-line-icon" aria-label="is equal to">↳</span
+              ><span class="trace-line">${i}</span>`:ot`<details
+              @toggle=${e.onToggle}
+              ?hidden=${o}
+            >
+              <summary tabindex=${dt(r)}>
+                <span class="trace-line-icon" aria-label="is equal to">↳</span
+                ><devtools-icon class="marker"></devtools-icon
+                ><span class="trace-line">${i}</span>
+              </summary>
+              <div>
+                ${s.map((e=>ot`<span class="trace-line-icon" aria-label="is equal to"
+                        >↳</span
+                      ><span class="trace-line">${e}</span>`))}
+              </div>
+            </details>`}
+        ${e.finalResult?ot`<span
+                class="trace-line-icon"
+                aria-label="is equal to"
+                ?hidden=${a}
+              >↳</span
+              ><span class=${lt({"trace-line":!0,"full-row":a})}>${e.finalResult}</span>`:""}
+      </div>
+    `,n)}class ht extends i.Widget.VBox{#s;#o;#r=void 0;#a=[];#l=[];constructor(e,t=ct){super(!0,!1,e),this.registerRequiredCSS(it,st),this.#o=t,this.requestUpdate()}showTrace(e,t,n,i,s){const o=null===t?e.parseValue(n,i):e.parseExpression(t,n,i);if(o)return this.#d(e,o,n,i,s)}#d(e,t,n,i,s){this.#s=new Qn;const o=new Map(s.map((e=>[e.matchType,e]))),r=[],a=[],l=new Jn(this.#s,t);for(;l.nextSubstitution();){const n=new Zn(t.ast,e,o,t,void 0,{},l);r.push(ei.render(t.ast.tree,n).nodes)}for(;l.nextEvaluation();){const n=new Zn(t.ast,e,o,t,void 0,{},l);a.push(ei.render(t.ast.tree,n).nodes)}this.#l=r,this.#r=a.pop(),this.#a=a,0!==a.length||l.didApplyEvaluations()||this.#l.pop(),this.requestUpdate()}performUpdate(){const e={substitutions:this.#l,evaluations:this.#a,finalResult:this.#r,onToggle:()=>this.onResize()},t={};this.#o(e,t,this.contentElement),this.setDefaultFocusedElement(t.defaultFocusedElement??null)}}var pt=Object.freeze({__proto__:null,CSSValueTraceView:ht});function ut(e){const{name:t,value:n}=e;return`${t.startsWith("--")?`'${t}'`:t.replace(/-([a-z])/gi,((e,t)=>t.toUpperCase()))}: ${`'${n.replaceAll("'","\\'")}'`}`}var mt=Object.freeze({__proto__:null,getCssDeclarationAsJavascriptProperty:ut});const{html:gt,nothing:yt,render:ft}=u,St=n.CSSPropertyParser.ASTUtils,Et=p.StylePropertyEditor.FlexboxEditor,Ct=p.StylePropertyEditor.GridEditor,vt={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",copyAllCSSChanges:"Copy all CSS changes",viewComputedValue:"View computed value",flexboxEditorButton:"Open `flexbox` editor",gridEditorButton:"Open `grid` 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}"},bt=r.i18n.registerUIStrings("panels/elements/StylePropertyTreeElement.ts",vt),wt=r.i18n.getLocalizedString.bind(void 0,bt),xt=new WeakMap;class Tt extends(Xn(n.CSSPropertyParserMatchers.FlexGridMatch)){#c;#h;constructor(e,t){super(),this.#c=t,this.#h=e}render(e,t){const n=ei.render(St.siblings(St.declValue(e.node)),t).nodes;if(!this.#c?.editable())return n;const i=`${this.#c.section().getSectionIdx()}_${this.#c.section().nextEditorTriggerButtonIdx}`,r=Xt.createTriggerButton(this.#h,this.#c.section(),e.isFlex?Et:Ct,e.isFlex?wt(vt.flexboxEditorButton):wt(vt.gridEditorButton),i);r.setAttribute("jslog",`${s.showStyleEditor().track({click:!0}).context(e.isFlex?"flex":"grid")}`),this.#c.section().nextEditorTriggerButtonIdx++,r.addEventListener("click",(()=>{o.userMetrics.swatchActivated(e.isFlex?6:5)}));const a=this.#h.swatchPopoverHelper();return a.isShowing(Xt.instance())&&Xt.instance().getTriggerKey()===i&&a.setAnchorElement(r),[...n,r]}}class Mt extends(Xn(n.CSSPropertyParserMatchers.CSSWideKeywordMatch)){#c;#h;constructor(e,t){super(),this.#c=t,this.#h=e}render(t,i){const s=t.resolveProperty();if(!s)return[document.createTextNode(t.text)];const o=new E.LinkSwatch.LinkSwatch;if(o.data={text:t.text,tooltip:s?void 0:{title:wt(vt.sIsNotDefined,{PH1:t.text})},isDefined:Boolean(s),onLinkActivate:()=>s&&this.#h.jumpToDeclaration(s),jslogContext:"css-wide-keyword-link"},n.CSSMetadata.cssMetadata().isColorAwareProperty(s.name)||n.CSSMetadata.cssMetadata().isCustomProperty(s.name)){const n=e.Color.parse(i.matchedResult.getComputedText(t.node));if(n)return[new Pt(this.#h,this.#c).renderColorSwatch(n,o)]}return[o]}}class Nt extends(Xn(n.CSSPropertyParserMatchers.VariableMatch)){#h;#c;#p;#u;constructor(e,t,n,i){super(),this.#c=t,this.#h=e,this.#p=n,this.#u=i}render(t,n){const{declaration:i,value:o}=t.resolveVariable()??{},r=void 0===o,a=o??t.fallbackValue(),l=document.createElement("span"),d=n.tracing?.substitution();if(d){if(i?.declaration){const{nodes:e,cssControls:t}=ei.renderValueNodes({name:i.name,value:i.value??""},d.cachedParsedValue(i.declaration,this.#p,this.#u),Kt(i.style,this.#h,this.#p,null,this.#u),d);return t.forEach(((e,t)=>e.forEach((e=>n.addControl(t,e))))),e}if(!i&&t.fallback.length>0)return ei.render(t.fallback,d.renderingContext(n)).nodes}const c=t.fallback.length>0?ei.render(t.fallback,n):void 0,h=this.#c?.getTracingTooltip("var",t.text,this.#p,this.#u,n),p=this.#h.getVariablePopoverContents(this.#p,t.name,o??null),u=this.#c?.getTooltipId("custom-property-var"),m=u?{tooltipId:u}:void 0;ft(gt`<span
+          data-title=${a||""}
+          jslog=${s.link("css-variable").track({click:!0,hover:!0})}
+          >${h??"var"}(<devtools-link-swatch
+            class=css-var-link
+            .data=${{tooltip:m,text:t.name,isDefined:null!==a&&!r,onLinkActivate:e=>this.#m(i??e)}}
+            ></devtools-link-swatch>${c?.nodes.length?gt`, ${c.nodes}`:yt})</span>${u?gt`<devtools-tooltip
+                    variant=rich
+                    id=${u}
+                    jslogContext=elements.css-var
+                    >${p}</devtools-tooltip>`:""}`,l);const g=a&&e.Color.parse(a);if(!g)return[l];const y=new Pt(this.#h,this.#c).renderColorSwatch(g,l);return n.addControl("color",y),r&&c?.cssControls.get("color")?.forEach((e=>e.addEventListener(E.ColorSwatch.ColorChangedEvent.eventName,(e=>{y.setColor(e.data.color)})))),[y]}#m(e){o.userMetrics.actionTaken(o.UserMetrics.Action.CustomPropertyLinkClicked),o.userMetrics.swatchActivated(0),"string"==typeof e?this.#h.jumpToProperty(e)||this.#h.jumpToProperty("initial-value",e,Rn):e.declaration instanceof n.CSSProperty.CSSProperty?this.#h.revealProperty(e.declaration):e.declaration instanceof n.CSSMatchedStyles.CSSRegisteredProperty&&this.#h.jumpToProperty("initial-value",e.name,Rn)}}class It extends(Xn(n.CSSPropertyParserMatchers.LinearGradientMatch)){render(e,t){const i=St.children(e.node),{nodes:s,cssControls:o}=ei.render(i,t),r=o.get("angle"),a=1===r?.length?r[0]:null;if(a instanceof E.CSSAngle.CSSAngle){a.updateProperty(t.matchedResult.getComputedText(e.node));const i=St.callArgs(e.node),s=i[0]?.find((e=>t.matchedResult.getMatch(e)instanceof n.CSSPropertyParserMatchers.AngleMatch)),o=s&&t.matchedResult.getMatch(s);o&&a.addEventListener(E.InlineEditorUtils.ValueChangedEvent.eventName,(n=>{a.updateProperty(t.matchedResult.getComputedText(e.node,new Map([[o,n.data.value]])))}))}return s}}let Pt=class extends(Xn(n.CSSPropertyParserMatchers.ColorMatch)){#c;#h;constructor(e,t){super(),this.#c=t,this.#h=e}#g(e,t){const n=document.createElement("span");if("ColorLiteral"===e.node.name||"ValueName"===e.node.name)return n.appendChild(document.createTextNode(e.text)),{valueChild:n};const{cssControls:i}=ei.renderInto(St.children(e.node),t,n);return{valueChild:n,cssControls:i}}render(t,n){const{valueChild:i,cssControls:s}=this.#g(t,n);let o=n.matchedResult.getComputedText(t.node);if("CallExpression"===t.node.name&&o.match(/^[^)]*\(\W*from\W+/)&&!n.matchedResult.hasUnresolvedVars(t.node)&&CSS.supports("color",o)){const e=document.body.appendChild(document.createElement("span"));e.style.backgroundColor=o,o=window.getComputedStyle(e).backgroundColor?.toString()||o,e.remove()}const r=e.Color.parse(o);if(!r)return[document.createTextNode(o)];const a=this.renderColorSwatch(r,i);if(n.addControl("color",a),s&&"CallExpression"===t.node.name&&n.ast.text(t.node.getChild("Callee")).match(/^(hsla?|hwba?)/)){const[t]=s.get("angle")??[];t instanceof E.CSSAngle.CSSAngle&&(t.updateProperty(a.getColor()?.asString()??""),t.addEventListener(E.InlineEditorUtils.ValueChangedEvent.eventName,(n=>{const i=e.Color.parseHueNumeric(n.data.value),s=a.getColor();i&&s&&(s.is("hsl")||s.is("hsla")?a.setColor(new e.Color.HSL(i,s.s,s.l,s.alpha)):(s.is("hwb")||s.is("hwba"))&&a.setColor(new e.Color.HWB(i,s.w,s.b,s.alpha)),t.updateProperty(a.getColor()?.asString()??""))})))}return[a]}renderColorSwatch(e,t){const n=this.#c?.editable(),i=wt(vt.shiftClickToChangeColorFormat),s=n?wt(vt.openColorPickerS,{PH1:i}):"",r=new E.ColorSwatch.ColorSwatch(s);if(r.setReadonly(!n),e&&r.renderColor(e),t||(t=r.createChild("span"),e&&(t.textContent=e.getAuthoredText()??e.asString())),r.appendChild(t),this.#c?.editable()){const e=this.#c,t=()=>{e.applyStyleText(e.renderedPropertyText(),!1)};r.addEventListener(E.ColorSwatch.ClickEvent.eventName,(()=>{o.userMetrics.swatchActivated(2)})),r.addEventListener(E.ColorSwatch.ColorChangedEvent.eventName,t);const n=new ee(e,e.parentPane().swatchPopoverHelper(),r);n.addEventListener("colorchanged",(e=>{r.setColorText(e.data)})),"color"===e.property.name&&this.#y(n)}return r}async#y(e){const t=this.#h.cssModel(),n=this.#h.node();if(!t||void 0===n?.id)return;const i=new S.ContrastInfo.ContrastInfo(await t.getBackgroundColors(n.id));e.setContrastInfo(i)}};class At extends(Xn(n.CSSPropertyParserMatchers.LightDarkColorMatch)){#c;#h;#p;constructor(e,t,n){super(),this.#c=n,this.#h=e,this.#p=t}render(t,n){const i=document.createElement("span");i.appendChild(document.createTextNode("light-dark("));const s=i.appendChild(document.createElement("span"));i.appendChild(document.createTextNode(", "));const o=i.appendChild(document.createElement("span"));i.appendChild(document.createTextNode(")"));const{cssControls:r}=ei.renderInto(t.light,n,s),{cssControls:a}=ei.renderInto(t.dark,n,o);if(n.matchedResult.hasUnresolvedVars(t.node))return[i];if(!e.Color.parse(n.matchedResult.getComputedTextRange(t.light[0],t.light[t.light.length-1])))return[i];const l=new Pt(this.#h,this.#c).renderColorSwatch(void 0,i);return n.addControl("color",l),this.applyColorScheme(t,n,l,s,o,r,a),[l]}async applyColorScheme(t,n,i,s,o,r,a){const l=await this.#f(t);if(!l)return;const d=(l===t.light?r:a).get("color");d?.forEach((e=>e.addEventListener(E.ColorSwatch.ColorChangedEvent.eventName,(e=>i.setColor(e.data.color)))));const c=l===t.light?o:s,h=n.matchedResult.getComputedTextRange(l[0],l[l.length-1]),p=h&&e.Color.parse(h);c.classList.add("inactive-value"),p&&i.renderColor(p)}async#f(e){const t=this.#p.resolveProperty("color-scheme",e.style)?.parseValue(this.#p,new Map)?.getComputedPropertyValueText().split(" ")??[],n=t.includes("light"),i=t.includes("dark");if(!i&&!n)return e.light;if(!n)return e.dark;if(!i)return e.light;switch(await(this.#h.cssModel()?.colorScheme())){case"dark":return e.dark;case"light":return e.light;default:return}}}class Lt extends(Xn(n.CSSPropertyParserMatchers.ColorMixMatch)){#S;#p;#u;#c;constructor(e,t,n,i){super(),this.#S=e,this.#p=t,this.#u=n,this.#c=i}render(t,n){const i=(e,t)=>{if(e instanceof E.ColorMixSwatch.ColorMixSwatch||e instanceof E.ColorSwatch.ColorSwatch){e instanceof E.ColorSwatch.ColorSwatch?e.addEventListener(E.ColorSwatch.ColorChangedEvent.eventName,(e=>t(e.data.color.getAuthoredText()??e.data.color.asString()))):e.addEventListener(E.ColorMixSwatch.ColorMixChangedEvent.eventName,(e=>t(e.data.text)));const n=e.getText();if(n)return t(n),!0}return!1},s=n.tracing?.evaluation([t.space,t.color1,t.color2]),o=s?.map((e=>e.renderingContext(n)))??[n,n,n],r=document.createElement("span"),a=ei.renderInto(t.color1,o[1],r),l=ei.renderInto(t.color2,o[2],r);ft(gt`${this.#c?.getTracingTooltip("color-mix",t.text,this.#p,this.#u,n)??"color-mix"}(${ei.render(t.space,o[0]).nodes}, ${a.nodes}, ${l.nodes})`,r);const d=a.cssControls.get("color")??[],c=l.cssControls.get("color")??[];if(n.matchedResult.hasUnresolvedVars(t.node)||1!==d.length||1!==c.length)return[r];const h=`color-mix(${t.space.map((e=>n.matchedResult.getComputedText(e))).join(" ")}, ${t.color1.map((e=>n.matchedResult.getComputedText(e))).join(" ")}, ${t.color2.map((e=>n.matchedResult.getComputedText(e))).join(" ")})`;if(s&&n.tracing?.applyEvaluation(s)){const t=e.Color.parse("#000"),i=new Pt(this.#S,null).renderColorSwatch(t);n.addControl("color",i);const s=this.#S.node()?.id;if(void 0!==s)return this.#S.cssModel()?.resolveValues(s,h).then((t=>{if(t){const n=e.Color.parse(t[0]);n&&i.setColorText(n.as("hexa"))}})),[i]}const p=new E.ColorMixSwatch.ColorMixSwatch;if(!i(d[0],(e=>p.setFirstColor(e)))||!i(c[0],(e=>p.setSecondColor(e))))return[r];if(p.tabIndex=-1,p.setColorMixText(h),n.addControl("color",p),n.tracing)return[p,r];const u=this.#c?.getTooltipId("color-mix");if(!u)return[p,r];p.setAttribute("aria-details",u);const m=new T.Tooltip.Tooltip({id:u,variant:"rich",anchor:p,jslogContext:"elements.css-color-mix"}),g=m.appendChild(document.createElement("span"));return m.onbeforetoggle=e=>{if("open"!==e.newState)return;const t=p.mixedColor();if(!t)return;const n=t.as("hex");g.textContent=n.isGamutClipped()?t.asString():n.asString()},[p,r,m]}}class Ot extends(Xn(n.CSSPropertyParserMatchers.AngleMatch)){#c;constructor(e){super(),this.#c=e}render(e,t){const n=e.text;if(!this.#c?.editable())return[document.createTextNode(n)];const i=new E.CSSAngle.CSSAngle;i.setAttribute("jslog",`${s.showStyleEditor().track({click:!0}).context("css-angle")}`);const r=document.createElement("span");r.textContent=n,i.data={angleText:n,containingPane:this.#c.parentPane().element.enclosingNodeOrSelfWithClass("style-panes-wrapper")},i.append(r);const a=this.#c;return i.addEventListener("popovertoggled",(({data:e})=>{const t=a.section();t&&(e.open&&(a.parentPane().hideAllPopovers(),a.parentPane().activeCSSAngle=i,o.userMetrics.swatchActivated(7)),t.element.classList.toggle("has-open-popover",e.open),a.parentPane().setEditingStyle(e.open),e.open||a.applyStyleText(a.renderedPropertyText(),!0))})),i.addEventListener("valuechanged",(async({data:e})=>{r.textContent=e.value,await a.applyStyleText(a.renderedPropertyText(),!1)})),i.addEventListener("unitchanged",(({data:e})=>{r.textContent=e.value})),t.addControl("angle",i),[i]}}class Rt extends(Xn(n.CSSPropertyParserMatchers.LinkableNameMatch)){#p;#h;constructor(e,t){super(),this.#p=e,this.#h=t}#E(e){switch(e.propertyName){case"animation":case"animation-name":return{jslogContext:"css-animation-name",metric:1,ruleBlock:"@keyframes",isDefined:Boolean(this.#p.keyframes().find((t=>t.name().text===e.text)))};case"font-palette":return{jslogContext:"css-font-palette",metric:null,ruleBlock:"@font-palette-values",isDefined:this.#p.fontPaletteValuesRule()?.name().text===e.text};case"position-try":case"position-try-fallbacks":return{jslogContext:"css-position-try",metric:10,ruleBlock:"@position-try",isDefined:Boolean(this.#p.positionTryRules().find((t=>t.name().text===e.text)))}}}render(t){const i=new E.LinkSwatch.LinkSwatch,{metric:r,jslogContext:a,ruleBlock:l,isDefined:d}=this.#E(t);if(i.data={text:t.text,tooltip:d?void 0:{title:wt(vt.sIsNotDefined,{PH1:t.text})},isDefined:d,onLinkActivate:()=>{r&&o.userMetrics.swatchActivated(r),this.#h.jumpToSectionBlock(`${l} ${t.text}`)},jslogContext:a},"animation"===t.propertyName||"animation-name"===t.propertyName){const o=document.createElement("span");o.appendChild(i);const r=this.#h.node();if(r){const a=r.domModel().target().model(n.AnimationModel.AnimationModel);a?.getAnimationGroupForAnimation(t.text,r.id).then((t=>{if(!t)return;const n=x.Icon.create("animation","open-in-animations-panel");n.setAttribute("jslog",`${s.link("open-in-animations-panel").track({click:!0})}`),n.setAttribute("role","button"),n.setAttribute("title",wt(vt.jumpToAnimationsPanel)),n.addEventListener("mouseup",(n=>{n.consume(!0),e.Revealer.reveal(t)})),o.insertBefore(n,i)}))}return[o]}return[i]}}class Dt extends(Xn(n.CSSPropertyParserMatchers.BezierMatch)){#c;constructor(e){super(),this.#c=e}render(e){return[this.renderSwatch(e)]}renderSwatch(e){if(!this.#c?.editable()||!E.AnimationTimingModel.AnimationTimingModel.parse(e.text))return document.createTextNode(e.text);const t=this.#c.parentPane().swatchPopoverHelper(),n=E.Swatches.BezierSwatch.create();return n.iconElement().addEventListener("click",(()=>{o.userMetrics.swatchActivated(3)})),n.setBezierText(e.text),new Z({treeElement:this.#c,swatchPopoverHelper:t,swatch:n}),n}}class kt extends(Xn(n.CSSPropertyParserMatchers.AutoBaseMatch)){#C;constructor(e){super(),this.#C=e}render(e,t){const n=document.createElement("span");n.appendChild(document.createTextNode("-internal-auto-base("));const i=n.appendChild(document.createElement("span"));n.appendChild(document.createTextNode(", "));const s=n.appendChild(document.createElement("span"));n.appendChild(document.createTextNode(")")),ei.renderInto(e.auto,t,i),ei.renderInto(e.base,t,s);const o=this.#C.get("appearance");return o?.startsWith("base")?i.classList.add("inactive-value"):s.classList.add("inactive-value"),[n]}}class Ft{#v;#b;#w;constructor(e,t,n){this.#b=e,this.#v=t,this.#w=n}isBoxShadow(){return"boxShadow"===this.#b}inset(){return Boolean(this.#v.find((e=>"inset"===e.propertyType)))}#x(e){return this.#v.find((t=>t.propertyType===e))?.length??E.CSSShadowEditor.CSSLength.zero()}offsetX(){return this.#x("x")}offsetY(){return this.#x("y")}blurRadius(){return this.#x("blur")}spreadRadius(){return this.#x("spread")}#T(e){return Boolean(e.expansionContext&&e.source)}#M(e){if(this.#T(e)){const t=e.source;this.#v.filter((e=>e.source===t)).forEach((e=>{e.source=null}))}}#N(e){const t=this.#v.findIndex((t=>t.propertyType===e)),n=t>=0?this.#v[t]:void 0;return n&&this.#M(n),{property:n,index:t}}setInset(e){if(!this.isBoxShadow())return;const{property:t,index:n}=this.#N("inset");t?e||this.#v.splice(n,1):this.#v.unshift({value:"inset",source:null,expansionContext:null,propertyType:"inset"})}#I(e,t){const{property:n}=this.#N(t);if(n)n.value=e.asCSSText(),n.length=e,n.source=null;else{const n=1+this.#v.findLastIndex((e=>"y"===e.propertyType||"spread"===t&&"blur"===e.propertyType));n>0&&n<this.#v.length&&this.#T(this.#v[n])&&this.#v[n-1].source===this.#v[n].source&&this.#M(this.#v[n]),this.#v.splice(n,0,{value:e.asCSSText(),length:e,source:null,expansionContext:null,propertyType:t})}}setOffsetX(e){this.#I(e,"x")}setOffsetY(e){this.#I(e,"y")}setBlurRadius(e){this.#I(e,"blur")}setSpreadRadius(e){this.isBoxShadow()&&this.#I(e,"spread")}renderContents(e){e.removeChildren();const t=e.createChild("span");let n=null;for(const e of this.#v)e.source&&e.source===n||(e!==this.#v[0]&&t.append(" "),e.source?t.append(...ei.render(e.source,this.#w).nodes):"string"==typeof e.value?t.append(e.value):t.append(...ei.render(e.value,e.expansionContext??this.#w).nodes)),n=e.source}}class Ut extends(Xn(n.CSSPropertyParserMatchers.ShadowMatch)){#c;constructor(e){super(),this.#c=e}shadowModel(e,t,i){const s=[],o=["spread","blur","y","x"];let r=!0;const a=e.map((e=>({value:e,source:e,match:i.matchedResult.getMatch(e),expansionContext:null})));for(let e=a.shift();e;e=a.shift()){const{value:l,source:d,match:c,expansionContext:h}=e,p=(h??i).ast.text(l);if("NumberLiteral"===l.name){if(!r)return null;const e=o.pop();if(void 0===e||"spread"===e&&"textShadow"===t)return null;const n=E.CSSShadowEditor.CSSLength.parse(p);if(!n)return null;s.push({value:l,source:d,length:n,propertyType:e,expansionContext:h})}else if(c instanceof n.CSSPropertyParserMatchers.VariableMatch){const e=i.matchedResult.getComputedText(l),t=n.CSSPropertyParser.tokenizeDeclaration("--property",e);if(!t)return null;const s=n.CSSPropertyParser.BottomUpTreeMatching.walkExcludingSuccessors(t,[new n.CSSPropertyParserMatchers.ColorMatcher]);if(s.hasUnresolvedVars(s.ast.tree))return null;a.unshift(...St.siblings(St.declValue(s.ast.tree)).map((e=>({value:e,source:l,match:s.getMatch(e),expansionContext:new Zn(t,null,i.renderers,s)}))))}else if(r=4===o.length,"ValueName"===l.name&&"inset"===p.toLowerCase()){if("textShadow"===t||s.find((({propertyType:e})=>"inset"===e)))return null;s.push({value:l,source:d,propertyType:"inset",expansionContext:h})}else if(c instanceof n.CSSPropertyParserMatchers.ColorMatch||c instanceof n.CSSPropertyParserMatchers.ColorMixMatch){if(s.find((({propertyType:e})=>"color"===e)))return null;s.push({value:l,source:d,propertyType:"color",expansionContext:h})}else if("Comment"!==l.name&&"Important"!==l.name)return null}return o.length>2?null:new Ft(t,s,i)}render(e,t){const n=St.split(St.siblings(St.declValue(e.node))),i=[];for(const r of n){const a=this.shadowModel(r,e.shadowType,t),l=r.find((e=>"Important"===e.name));if(r!==n[0]&&i.push(document.createTextNode(", ")),!a||!this.#c?.editable()){const{nodes:e}=ei.render(r,t);i.push(...e);continue}const d=new E.Swatches.CSSShadowSwatch(a);d.setAttribute("jslog",`${s.showStyleEditor("css-shadow").track({click:!0})}`),d.iconElement().addEventListener("click",(()=>{o.userMetrics.swatchActivated(4)})),a.renderContents(d);const c=new te(this.#c,this.#c.parentPane().swatchPopoverHelper(),d),h=this.#c;c.addEventListener("shadowChanged",(()=>{a.renderContents(d),h.applyStyleText(h.renderedPropertyText(),!1)})),i.push(d),l&&i.push(document.createTextNode(" "),...ei.render(l,t).nodes)}return i}}class _t extends(Xn(n.CSSPropertyParserMatchers.FontMatch)){treeElement;constructor(e){super(),this.treeElement=e}render(e,t){this.treeElement.section().registerFontProperty(this.treeElement);const{nodes:n}=ei.render(St.siblings(St.declValue(e.node)),t);return n}}class Bt extends(Xn(n.CSSPropertyParserMatchers.GridTemplateMatch)){render(t,n){if(t.lines.length<=1)return ei.render(St.siblings(St.declValue(t.node)),n).nodes;const s=e.Settings.Settings.instance().moduleSetting("text-editor-indent").get(),o=document.createDocumentFragment();for(const e of t.lines){const t=ei.render(e,n),r=i.Fragment.html`<br /><span class='styles-clipboard-only'>${s.repeat(2)}</span>`;o.append(r,...t.nodes)}return[o]}}class Vt extends(Xn(n.CSSPropertyParserMatchers.LengthMatch)){#h;#c;constructor(e,t){super(),this.#h=e,this.#c=t}render(e,t){const n=document.createElement("span").createChild("span");return n.textContent=e.text,t.tracing?.applyEvaluation([])?this.#P(n,e.text):t.tracing||this.#A(n,e.text),[n]}async#P(e,t){const n=this.#h.node()?.id;if(void 0===n)return;const i=await(this.#h.cssModel()?.resolveValues(n,t));i&&(e.textContent=i[0])}async#A(e,t){const n=this.#h.node()?.id;if(void 0===n)return;const i=await(this.#h.cssModel()?.resolveValues(n,t));if(!i)return;const s=this.#c?.getTooltipId("length");if(s){e.setAttribute("aria-details",s);const t=new T.Tooltip.Tooltip({anchor:e,variant:"rich",id:s,jslogContext:"length-popover"});t.appendChild(document.createTextNode(i[0])),e.insertAdjacentElement("afterend",t)}this.popOverAttachedForTest()}popOverAttachedForTest(){}}class Ht extends(Xn(n.CSSPropertyParserMatchers.MathFunctionMatch)){#h;#p;#u;#c;constructor(e,t,n,i){super(),this.#p=t,this.#u=n,this.#h=e,this.#c=i}render(e,t){const n=t.tracing?.evaluation(e.args),i=e.args.map(((e,i)=>{const s=document.createElement("span");return ei.renderInto(e,n?n[i].renderingContext(t):t,s),s})),s=document.createElement("span");if(ft(gt`${this.#c?.getTracingTooltip(e.func,e.text,this.#p,this.#u,t)??e.func}(${i.map(((e,t)=>0===t?[e]:[gt`, `,e])).flat()})`,s),n&&t.tracing?.applyEvaluation(n))this.applyEvaluation(s,t.matchedResult.getComputedText(e.node));else if("calc"!==e.func){const n=e.args.map((e=>t.matchedResult.getComputedTextRange(e[0],e[e.length-1])));this.applyMathFunction(i,n,t.matchedResult.getComputedText(e.node))}return[s]}async applyEvaluation(e,t){const n=this.#h.node()?.id;if(void 0===n)return;const i=await(this.#h.cssModel()?.resolveValues(n,t));i?.[0]&&i[0]!==t&&(e.textContent=i[0])}async applyMathFunction(e,t,n){const i=this.#h.node()?.id;if(void 0===i)return;t.unshift(n);const s=await(this.#h.cssModel()?.resolveValues(i,...t));if(!s)return;const o=s.shift();if(o)for(let t=0;t<e.length;++t)s[t]!==o&&e[t].classList.add("inactive-value")}}async function Wt(t,i,s){const o=await(i.node()?.getAnchorBySpecifier(s.identifier))??void 0,r=new p.AnchorFunctionLinkSwatch.AnchorFunctionLinkSwatch({identifier:s.identifier,anchorNode:o,needsSpace:s.needsSpace,onLinkActivate:()=>{o&&e.Revealer.reveal(o,!1)},onMouseEnter:()=>{o?.highlight()},onMouseLeave:()=>{n.OverlayModel.OverlayModel.hideDOMNodeHighlight()}});t.removeChildren(),t.appendChild(r)}class jt extends(Xn(n.CSSPropertyParserMatchers.AnchorFunctionMatch)){#h;constructor(e){super(),this.#h=e}anchorDecoratedForTest(){}async#L(e,t,n){await Wt(e,this.#h,{identifier:n,needsSpace:t}),this.anchorDecoratedForTest()}render(e,t){const n=document.createElement("span");if("VariableName"===e.node.name)n.appendChild(document.createTextNode(e.text)),this.#L(n,!1,e.text);else{n.appendChild(document.createTextNode(`${e.functionName}(`));const i=document.createElement("span");n.appendChild(i);const s=St.children(e.node.getChild("ArgList")).splice(1);this.#L(i,s.length>1),ei.renderInto(s,t,n)}return[n]}}class $t extends(Xn(n.CSSPropertyParserMatchers.PositionAnchorMatch)){#h;constructor(e){super(),this.#h=e}anchorDecoratedForTest(){}render(e){const t=document.createElement("span");return t.appendChild(document.createTextNode(e.text)),Wt(t,this.#h,{identifier:e.text,needsSpace:!1}).then((()=>this.anchorDecoratedForTest())),[t]}}class zt extends(Xn(n.CSSPropertyParserMatchers.PositionTryMatch)){#p;constructor(e){super(),this.#p=e}render(e,t){const n=[];if(e.preamble.length>0){const{nodes:i}=ei.render(e.preamble,t);n.push(...i)}for(const[i,s]of e.fallbacks.entries()){const e=document.createElement("span");i>0&&e.appendChild(document.createTextNode(", ")),i!==this.#p.activePositionFallbackIndex()&&e.classList.add("inactive-value"),ei.renderInto(s,t,e),n.push(e)}return n}}function Kt(e,t,n,i,s){return[new Nt(t,i,n,s),new Pt(t,i),new Lt(t,n,s,i),new ti(e.parentRule,t.node()),new Ot(i),new Rt(n,t),new Dt(i),new ni,new Ut(i),new Mt(t,i),new At(t,n,i),new Bt,new It,new jt(t),new $t(t),new Tt(t,i),new zt(n),new Vt(t,i),new Ht(t,n,s,i),new kt(s),new ii]}class Gt extends i.TreeOutline.TreeElement{style;matchedStylesInternal;property;inheritedInternal;overloadedInternal;parentPaneInternal;#O;isShorthand;applyStyleThrottler=new e.Throttler.Throttler(0);newProperty;expandedDueToFilter=!1;valueElement=null;nameElement=null;expandElement=null;originalPropertyText="";hasBeenEditedIncrementally=!1;prompt=null;lastComputedValue=null;computedStyles=null;parentsComputedStyles=null;contextForTest;#R=void 0;#D=new Map;constructor({stylesPane:e,section:t,matchedStyles:n,property:i,isShorthand:s,inherited:o,overloaded:r,newProperty:a}){super("",s,i.name.startsWith("--")?"custom-property":i.name),this.style=i.ownerStyle,this.matchedStylesInternal=n,this.property=i,this.inheritedInternal=o,this.overloadedInternal=r,this.selectable=!1,this.parentPaneInternal=e,this.#O=t,this.isShorthand=s,this.newProperty=a,this.newProperty&&(this.listItemElement.textContent=""),this.property.addEventListener("localValueUpdated",(()=>{this.updateTitle()}))}async gridNames(){if(!n.CSSMetadata.cssMetadata().isGridNameAwareProperty(this.name))return new Set;for(let e=this.parentPaneInternal.node()?.parentNode;e;e=e?.parentNode){const t=await(this.parentPaneInternal.cssModel()?.getComputedStyle(e.id)),i=t?.get("display");if(!("grid"===i||"inline-grid"===i))continue;const s=(e,i)=>{const s=t?.get(e);if(!s)return[];const o=n.CSSPropertyParser.tokenizeDeclaration(e,s);return o?n.CSSPropertyParser.TreeSearch.findAll(o,(e=>e.name===i)).map((e=>o.text(e))):[]};return n.CSSMetadata.cssMetadata().isGridAreaNameAwareProperty(this.name)?new Set(s("grid-template-areas","StringLiteral")?.flatMap((e=>e.substring(1,e.length-1).split(/\s+/).filter((e=>!e.match(/^\.*$/)))))):n.CSSMetadata.cssMetadata().isGridColumnNameAwareProperty(this.name)?new Set(s("grid-template-columns","LineName")):new Set(s("grid-template-rows","LineName"))}return new Set}matchedStyles(){return this.matchedStylesInternal}getLonghand(){return this.parent instanceof Gt&&this.parent.isShorthand?this.parent:null}editable(){const e=Boolean(this.style.styleSheetId&&this.style.range);return!this.getLonghand()&&e}inherited(){return this.inheritedInternal}overloaded(){return this.overloadedInternal}setOverloaded(e){e!==this.overloadedInternal&&(this.overloadedInternal=e,this.updateState())}setComputedStyles(e){this.computedStyles=e}getComputedStyle(e){return this.computedStyles?.get(e)??null}getComputedStyles(){return this.computedStyles}setParentsComputedStyles(e){this.parentsComputedStyles=e}get name(){return this.property.name}get value(){return this.property.value}updateFilter(){const e=this.parentPaneInternal.filterRegex(),t=null!==e&&(e.test(this.property.name)||e.test(this.property.value));this.listItemElement.classList.toggle("filter-match",t),this.onpopulate();let n=!1;for(let e=0;e<this.childCount();++e){const t=this.childAt(e);!t||t&&!t.updateFilter()||(n=!0)}return e?n&&!this.expanded?(this.expand(),this.expandedDueToFilter=!0):!n&&this.expanded&&this.expandedDueToFilter&&(this.collapse(),this.expandedDueToFilter=!1):(this.expandedDueToFilter&&this.collapse(),this.expandedDueToFilter=!1),t}renderedPropertyText(){return 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&&Fn.ignoreErrorsForProperty(this.property)?this.listItemElement.classList.add("has-ignorable-error"):this.listItemElement.classList.remove("has-ignorable-error"),this.inherited()?this.listItemElement.classList.add("inherited"):this.listItemElement.classList.remove("inherited"),this.overloaded()?this.listItemElement.classList.add("overloaded"):this.listItemElement.classList.remove("overloaded"),this.property.disabled?this.listItemElement.classList.add("disabled"):this.listItemElement.classList.remove("disabled")}node(){return this.parentPaneInternal.node()}parentPane(){return this.parentPaneInternal}section(){return this.#O}updatePane(){this.#O.refreshUpdate(this)}async toggleDisabled(e){if(!this.style.range)return;this.parentPaneInternal.setUserOperation(!0);const t=await this.property.setDisabled(e);this.parentPaneInternal.setUserOperation(!1),t&&(this.matchedStylesInternal.resetActiveProperties(),this.updatePane(),this.styleTextAppliedForTest())}async#k(){const e=this.property.getLonghandProperties();if(e.some((e=>""!==e.value)))return e;const t=this.#F(this.style,this.property.value);if(!t||t===this.property.value)return e;const i=await(this.parentPaneInternal.cssModel()?.agent.invoke_getLonghandProperties({shorthandName:this.property.name,value:t}));return!i||i.getError()?e:i.longhandProperties.map((e=>n.CSSProperty.CSSProperty.parsePayload(this.style,-1,e)))}async onpopulate(){if(this.#R||(this.#R=await this.gridNames()),this.childCount()||!this.isShorthand)return;const e=await this.#k(),t=this.style.leadingProperties();if(!this.childCount())for(const n of e){const e=n.name;let i=!1,s=!1;i=this.#O.isPropertyInherited(e),s="Overloaded"===this.matchedStylesInternal.propertyState(n);const o=t.find((t=>t.name===e&&t.activeInStyle()));o&&(s=!0);const r=new Gt({stylesPane:this.parentPaneInternal,section:this.#O,matchedStyles:this.matchedStylesInternal,property:n,isShorthand:!1,inherited:i,overloaded:s,newProperty:!1});r.setComputedStyles(this.computedStyles),r.setParentsComputedStyles(this.parentsComputedStyles),this.appendChild(r)}}onattach(){this.updateTitle(),this.listItemElement.addEventListener("mousedown",(e=>{0===e.button&&xt.set(this.parentPaneInternal,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")}#F(e,t){const i=n.CSSPropertyParser.tokenizeDeclaration("--unused",t);if(!i)return null;const s=n.CSSPropertyParser.BottomUpTreeMatching.walk(i,[new n.CSSPropertyParserMatchers.VariableMatcher(this.matchedStylesInternal,e)]),o=n.CSSPropertyParser.ASTUtils.siblings(n.CSSPropertyParser.ASTUtils.declValue(s.ast.tree));return o.length>0?s.getComputedTextRange(o[0],o[o.length-1]):""}refreshIfComputedValueChanged(){this.#R=void 0;const e=this.#F(this.property.ownerStyle,this.property.value);e!==this.lastComputedValue&&(this.lastComputedValue=e,this.innerUpdateTitle())}updateTitle(){this.lastComputedValue=this.#F(this.property.ownerStyle,this.property.value),this.innerUpdateTitle()}innerUpdateTitle(){this.#D.clear(),this.updateState(),this.isExpandable()&&(this.expandElement=x.Icon.create("triangle-right","expand-icon"),this.expandElement.setAttribute("jslog",`${s.expand().track({click:!0})}`));const o=this.property.parsedOk?Kt(this.style,this.parentPaneInternal,this.matchedStylesInternal,this,this.getComputedStyles()??new Map):[];t.Runtime.experiments.isEnabled("font-editor")&&this.property.parsedOk&&o.push(new _t(this)),this.listItemElement.removeChildren();const r=this.property.parseValue(this.matchedStyles(),this.computedStyles);if(this.valueElement=ei.renderValueElement(this.property,r,o).valueElement,this.nameElement=ei.renderNameElement(this.name),!this.treeOutline)return;const a=e.Settings.Settings.instance().moduleSetting("text-editor-indent").get();if(i.UIUtils.createTextChild(this.listItemElement.createChild("span","styles-clipboard-only"),a.repeat(this.section().nestingLevel+1)+(this.property.disabled?"/* ":"")),this.listItemElement.appendChild(this.nameElement),this.property.name.startsWith("--")){const e=this.parentPaneInternal.getVariablePopoverContents(this.matchedStyles(),this.property.name,this.matchedStylesInternal.computeCSSVariable(this.style,this.property.name)?.value??null),t=this.getTooltipId("custom-property-decl");this.nameElement.setAttribute("aria-details",t);const n=new T.Tooltip.Tooltip({anchor:this.nameElement,variant:"rich",id:t,jslogContext:"elements.css-var"});n.appendChild(e),n.onbeforetoggle=t=>{"open"===t.newState&&(e.value=this.matchedStylesInternal.computeCSSVariable(this.style,this.property.name)?.value)},this.listItemElement.appendChild(n)}else if(e.Settings.Settings.instance().moduleSetting("show-css-property-documentation-on-hover").get()){const t=this.parentPaneInternal.webCustomData?.findCssProperty(this.name);if(t){const n=this.getTooltipId("property-doc");this.nameElement.setAttribute("aria-details",n);const i=new T.Tooltip.Tooltip({anchor:this.nameElement,variant:"rich",id:n,jslogContext:"elements.css-property-doc"});i.onbeforetoggle=n=>{"open"===n.newState&&(e.Settings.Settings.instance().moduleSetting("show-css-property-documentation-on-hover").get()?(i.removeChildren(),i.appendChild(new p.CSSPropertyDocsView.CSSPropertyDocsView(t))):n.consume(!0))},this.listItemElement.appendChild(i)}}if(this.valueElement){const e=this.valueElement.firstElementChild&&"BR"===this.valueElement.firstElementChild.tagName?":":": ";this.listItemElement.createChild("span","styles-name-value-separator").textContent=e,this.expandElement&&(this.listItemElement.appendChild(this.expandElement),this.updateExpandElement()),this.listItemElement.appendChild(this.valueElement);const t=this.listItemElement.createChild("span","styles-semicolon");t.textContent=";",t.onmouseup=this.mouseUp.bind(this),this.property.disabled&&i.UIUtils.createTextChild(this.listItemElement.createChild("span","styles-clipboard-only")," */")}if(this.property.parsedOk)this.updateAuthoringHint();else{this.listItemElement.classList.add("not-parsed-ok"),this.listItemElement.insertBefore(this.createExclamationMark(this.property,this.parentPaneInternal.getVariableParserError(this.matchedStyles(),this.property.name)),this.listItemElement.firstChild);n.CSSMetadata.cssMetadata().isCSSPropertyName(this.property.name)&&this.listItemElement.classList.add("invalid-property-value")}if(this.property.activeInStyle()||this.listItemElement.classList.add("inactive"),this.updateFilter(),this.property.parsedOk&&this.parent?.root){const e=document.createElement("input");e.classList.add("enabled-button","small"),e.type="checkbox",e.checked=!this.property.disabled,e.setAttribute("jslog",`${s.toggle().track({click:!0})}`),e.addEventListener("mousedown",(e=>e.consume()),!1),e.addEventListener("click",(e=>{this.toggleDisabled(!this.property.disabled),e.consume()}),!1),this.nameElement&&this.valueElement&&i.ARIAUtils.setLabel(e,`${this.nameElement.textContent} ${this.valueElement.textContent}`),this.listItemElement.insertBefore(e,this.listItemElement.firstChild)}}createExclamationMark(e,t){const s=document.createElement("span"),o=s.createChild("span");o.classList.add("exclamation-mark");const r=n.CSSMetadata.cssMetadata().isCSSPropertyName(e.name)?wt(vt.invalidPropertyValue):wt(vt.unknownPropertyName);if(null===t)i.Tooltip.Tooltip.install(o,r);else{const e=this.getTooltipId("property-warning");o.setAttribute("aria-details",e);const n=new T.Tooltip.Tooltip({anchor:o,variant:"rich",id:e,jslogContext:"elements.invalid-property-decl-popover"});n.appendChild(t),s.appendChild(n)}const a=wt(vt.invalidString,{PH1:r,PH2:e.name,PH3:e.value});return e.setDisplayedStringForInvalidProperty(a),s}getTracingTooltip(e,n,s,o,r){if(!t.Runtime.hostConfig.devToolsCssValueTracing?.enabled||r.tracing||!r.property)return gt`${e}`;const{property:a}=r,l=this.parentPane(),d=this.getTooltipId(`${e}-trace`);return gt`<span tabIndex=-1 aria-details=${d}>${e}</span><devtools-tooltip
+        id=${d}
+        use-hotkey
+        variant=rich
+        jslogContext=elements.css-value-trace
+        @beforetoggle=${function(e){"open"===e.newState&&this.querySelector("devtools-widget")?.getWidget()?.showTrace(a,n,s,o,Kt(a.ownerStyle,l,s,null,o))}}
+        ><devtools-widget
+          @keydown=${e=>{const t=e.target.parentElement;t instanceof T.Tooltip.Tooltip&&("Escape"===e.key||e.altKey&&"ArrowDown"===e.key)&&(t.hideTooltip(),t.anchor?.focus(),e.consume(!0))}}
+          .widgetConfig=${i.Widget.widgetConfig(ht,{})}
+          ></devtools-widget></devtools-tooltip>`}getTooltipId(e){const t=this.section().sectionTooltipIdPrefix,n=this.#D.get(e)??0;this.#D.set(e,n+1);const i=this.getLonghand()?.name??this.name,s=this.treeOutline?.rootElement().children().indexOf(this)??-1,o=this.treeOutline?.rootElement().children().reduce(((e,t,n)=>n<s&&t instanceof Gt&&t.name===i?e+1:e),0);return`swatch-tooltip-${t}-${this.name}-${o}-${e}-${n}`}updateAuthoringHint(){this.listItemElement.classList.remove("inactive-property");const e=this.listItemElement.querySelector(".hint");e&&e?.closest(".hint-wrapper")?.remove();const t=this.property.name;if(!tt.has(t))return;if(this.node()?.isSVGNode())return;const n=this.parentPaneInternal.cssModel(),i=n?.fontFaces()||[],s=this.node()?.localName();for(const e of tt.get(t)||[]){const n=e.getHint(t,this.computedStyles||void 0,this.parentsComputedStyles||void 0,s?.toLowerCase(),i);if(n){o.userMetrics.cssHintShown(e.getMetricType());const t=document.createElement("span");t.classList.add("hint-wrapper");const i=new x.Icon.Icon;i.data={iconName:"info",color:"var(--icon-default)",width:"14px",height:"14px"},i.classList.add("hint"),t.append(i),this.listItemElement.append(t),this.listItemElement.classList.add("inactive-property");const s=this.getTooltipId("css-hint");i.setAttribute("aria-details",s);const r=new T.Tooltip.Tooltip({anchor:i,variant:"rich",id:s,jslogContext:"elements.css-hint"});r.appendChild(new p.CSSHintDetailsView.CSSHintDetailsView(n)),this.listItemElement.appendChild(r);break}}}mouseUp(e){const t=xt.get(this.parentPaneInternal);if(xt.delete(this.parentPaneInternal),!t)return;if(this.listItemElement.hasSelection())return;if(i.UIUtils.isBeingEdited(e.target))return;if(e.composedPath()[0]instanceof HTMLButtonElement)return;if(e.consume(!0),e.target===this.listItemElement)return;let n=e.target;i.KeyboardShortcut.KeyboardShortcut.eventHasCtrlEquivalentKey(e)&&this.#O.navigable?this.navigateToSource(n):this.expandElement&&n===this.expandElement||this.#O.editable&&(n=n.enclosingNodeOrSelfWithClass("webkit-css-property")||n.enclosingNodeOrSelfWithClass("value")||n.enclosingNodeOrSelfWithClass("styles-semicolon"),n&&n!==this.nameElement?(s.logClick(this.valueElement,e),this.startEditingValue()):(s.logClick(this.nameElement,e),this.startEditingName()))}handleContextMenuEvent(e,t){const n=new i.ContextMenu.ContextMenu(t);if(this.property.parsedOk&&this.parent?.root){const i=this.parentPaneInternal.focusedSectionIndex();n.defaultSection().appendCheckboxItem(wt(vt.togglePropertyAndContinueEditing),(async()=>{if(this.treeOutline){const n=this.treeOutline.rootElement().indexOfChild(this);this.editingCancelled(null,e),await this.toggleDisabled(!this.property.disabled),t.consume(),this.parentPaneInternal.continueEditingElement(i,n)}}),{checked:!this.property.disabled,jslogContext:"toggle-property-and-continue-editing"})}const s=this.navigateToSource.bind(this);n.defaultSection().appendItem(wt(vt.openInSourcesPanel),s,{jslogContext:"reveal-in-sources-panel"}),n.show()}handleCopyContextMenuEvent(e){if(!e.target)return;this.createCopyContextMenu(e).show()}createCopyContextMenu(e){const t=new i.ContextMenu.ContextMenu(e);return t.headerSection().appendItem(wt(vt.copyDeclaration),(()=>{const e=`${this.property.name}: ${this.property.value};`;o.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(e)}),{jslogContext:"copy-declaration"}),t.headerSection().appendItem(wt(vt.copyProperty),(()=>{o.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(this.property.name)}),{jslogContext:"copy-property"}),t.headerSection().appendItem(wt(vt.copyValue),(()=>{o.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(this.property.value)}),{jslogContext:"copy-value"}),t.headerSection().appendItem(wt(vt.copyRule),(()=>{const e=Fn.formatLeadingProperties(this.#O).ruleText;o.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(e)}),{jslogContext:"copy-rule"}),t.headerSection().appendItem(wt(vt.copyCssDeclarationAsJs),this.copyCssDeclarationAsJs.bind(this),{jslogContext:"copy-css-declaration-as-js"}),t.clipboardSection().appendItem(wt(vt.copyAllDeclarations),(()=>{const e=Fn.formatLeadingProperties(this.#O).allDeclarationText;o.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(e)}),{jslogContext:"copy-all-declarations"}),t.clipboardSection().appendItem(wt(vt.copyAllCssDeclarationsAsJs),this.copyAllCssDeclarationAsJs.bind(this),{jslogContext:"copy-all-css-declarations-as-js"}),t.defaultSection().appendItem(wt(vt.copyAllCSSChanges),(async()=>{const e=await this.parentPane().getFormattedChanges();o.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(e)}),{jslogContext:"copy-all-css-changes"}),t.footerSection().appendItem(wt(vt.viewComputedValue),(()=>{this.viewComputedValue()}),{jslogContext:"view-computed-value"}),t}async viewComputedValue(){const e=Ls.instance().getComputedStyleWidget();e.isShowing()||await i.ViewManager.ViewManager.instance().showView("computed");let t="";t=this.isShorthand?"^"+this.property.name+"-":"^"+this.property.name+"$";const n=new RegExp(t,"i");await e.filterComputedStyles(n),e.input.setValue(this.property.name),e.input.element.focus()}copyCssDeclarationAsJs(){const e=ut(this.property);o.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(e)}copyAllCssDeclarationAsJs(){const e=this.#O.style().leadingProperties().filter((e=>!e.disabled)).map(ut);o.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(e.join(",\n"))}navigateToSource(t,n){if(!this.#O.navigable)return;const i=t===this.nameElement,s=f.CSSWorkspaceBinding.CSSWorkspaceBinding.instance().propertyUILocation(this.property,i);s&&e.Revealer.reveal(s,n)}startEditingValue(){const e={expanded:this.expanded,hasChildren:this.isExpandable(),isEditingName:!1,originalProperty:this.property,previousContent:this.value};if(n.CSSMetadata.cssMetadata().isGridAreaDefiningProperty(this.name)){const t=v.TextUtils.Utils.splitStringByRegexes(this.value,[n.CSSMetadata.GridAreaRowRegex]);e.previousContent=t.map((e=>e.value.trim())).join("\n")}this.#U(e)}startEditingName(){const e={expanded:this.expanded,hasChildren:this.isExpandable(),isEditingName:!0,originalProperty:this.property,previousContent:this.name.split("\n").map((e=>e.trim())).join("\n")};this.#U(e)}#U(e){if(this.contextForTest=e,this.parent instanceof Gt&&this.parent.isShorthand)return;const t=e.isEditingName?this.nameElement:this.valueElement;if(!t)return;if(i.UIUtils.isBeingEdited(t))return;this.setExpandable(!1),t.parentElement?.classList.add("child-editing"),t.textContent=e.previousContent,this.originalPropertyText=this.property.propertyText||"",this.parentPaneInternal.setEditingStyle(!0),t.parentElement?.scrollIntoViewIfNeeded(!1),this.prompt=new Hn(this,e.isEditingName,Array.from(this.#R??[])),this.prompt.setAutocompletionTimeout(0),this.prompt.addEventListener("TextChanged",(()=>{this.applyFreeFlowStyleTextEdit(e)}));const n=this.property.getInvalidStringForInvalidProperty();n&&i.ARIAUtils.alert(n);const s=this.prompt.attachAndStartEditing(t,function(e,t){let n=t.target.textContent;e.isEditingName||(n=this.value||n),this.editingCommitted(n||"",e,"")}.bind(this,e));this.navigateToSource(t,!0),s.addEventListener("keydown",this.editingNameValueKeyDown.bind(this,e),!1),s.addEventListener("keypress",this.editingNameValueKeyPress.bind(this,e),!1),e.isEditingName&&(s.addEventListener("paste",function(e,t){const n=t.clipboardData;if(!n)return;const i=n.getData("Text");if(!i)return;const s=i.indexOf(":");if(s<0)return;const o=i.substring(0,s).trim(),r=i.substring(s+1).trim();t.preventDefault(),void 0===e.originalName&&(this.nameElement&&(e.originalName=this.nameElement.textContent||""),this.valueElement&&(e.originalValue=this.valueElement.textContent||"")),this.property.name=o,this.property.value=r,this.nameElement&&(this.nameElement.textContent=o,this.nameElement.normalize()),this.valueElement&&(this.valueElement.textContent=r,this.valueElement.normalize());const a=t.target;this.editingCommitted(a.textContent||"",e,"forward")}.bind(this,e),!1),s.addEventListener("contextmenu",this.handleContextMenuEvent.bind(this,e),!1)),t.getComponentSelection()?.selectAllChildren(t)}editingNameValueKeyDown(e,t){if(t.handled)return;const n=t,s=n.target;let o;if("Enter"===n.key&&!n.shiftKey||e.isEditingName&&" "===n.key)o="forward";else if(n.keyCode===i.KeyboardShortcut.Keys.Esc.code||n.key===a.KeyboardUtilities.ESCAPE_KEY)o="cancel";else if(!e.isEditingName&&this.newProperty&&n.keyCode===i.KeyboardShortcut.Keys.Backspace.code){const e=s.getComponentSelection();e&&e.isCollapsed&&!e.focusOffset&&(t.preventDefault(),o="backward")}else"Tab"===n.key&&(o=n.shiftKey?"backward":"forward",t.preventDefault());if(o){switch(o){case"cancel":this.editingCancelled(null,e);break;case"forward":case"backward":this.editingCommitted(s.textContent||"",e,o)}t.consume()}else;}editingNameValueKeyPress(e,t){const n=t,i=n.target,s=String.fromCharCode(n.charCode),o=this.#_(i);if(e.isEditingName?":"===s:";"===s&&null!==o&&function(e,t){let n="";for(let i=0;i<t;++i){const t=e[i];"\\"===t&&""!==n?++i:n||'"'!==t&&"'"!==t?n===t&&(n=""):n=t}return!n}(i.textContent||"",o))return t.consume(!0),void this.editingCommitted(i.textContent||"",e,"forward")}#_(e){const t=e.getComponentSelection();if(!t?.containsNode(e,!0))return null;let n=t.anchorOffset,i=t.anchorNode;for(;i!==e;){for(;i?.previousSibling;)i=i.previousSibling,n+=i.textContent?.length??0;i=i?.parentNodeOrShadowHost()??null}return n}async applyFreeFlowStyleTextEdit(e){if(!this.prompt||!this.parentPaneInternal.node())return;const t=this.prompt.text();if(e.isEditingName&&t.includes(":"))return void this.editingCommitted(t,e,"forward");const n=this.prompt.textWithCurrentSuggestion();if(n.includes(";"))return;const i=this.parentPaneInternal.node();if(i){if(Boolean(i.pseudoType())){if("content"===this.name.toLowerCase())return;const e=n.trim().toLowerCase();if(e.startsWith("content:")||"display: none"===e)return}}e.isEditingName?n.includes(":")?await this.applyStyleText(n,!1):this.hasBeenEditedIncrementally&&await this.applyOriginalStyle(e):this.nameElement&&await this.applyStyleText(`${this.nameElement.textContent}: ${n}`,!1)}kickFreeFlowStyleEditForTest(){const e=this.contextForTest;return this.applyFreeFlowStyleTextEdit(e)}editingEnded(e){this.setExpandable(e.hasChildren),e.expanded&&this.expand();const t=e.isEditingName?this.nameElement:this.valueElement;t?.parentElement&&t.parentElement.classList.remove("child-editing"),this.parentPaneInternal.setEditingStyle(!1)}editingCancelled(e,t){this.removePrompt(),this.hasBeenEditedIncrementally?this.applyOriginalStyle(t):this.newProperty&&this.treeOutline&&this.treeOutline.removeChild(this),this.updateTitle(),this.editingEnded(t)}async applyOriginalStyle(e){await this.applyStyleText(this.originalPropertyText,!1,e.originalProperty)}findSibling(e){let t=this;do{const n="forward"===e?t.nextSibling:t.previousSibling;t=n instanceof Gt?n:null}while(t?.inherited());return t}async editingCommitted(e,t,n){this.removePrompt(),this.editingEnded(t);const i=t.isEditingName;if(!this.nameElement||!this.valueElement)return;const s=this.nameElement.textContent||"",o=i&&s.includes(":")||!this.property;let r=!1,l=!1;const d=void 0!==t.originalName,c=d&&(this.nameElement.textContent!==t.originalName||this.valueElement.textContent!==t.originalValue),h=d&&i&&this.valueElement.textContent!==t.originalValue;let p=this;const u=i!==("forward"===n),m=this.newProperty&&!e&&(u||i);("forward"===n&&(!i||h)||"backward"===n&&i)&&(p=p.findSibling(n),p||("forward"!==n||this.newProperty&&!e?"backward"===n&&(l=!0):r=!0));let g=-1;null!==p&&this.treeOutline&&(g=this.treeOutline.rootElement().indexOfChild(p));const y=a.StringUtilities.isWhitespace(e),f=this.newProperty&&(h||u||!n&&!i||i&&y||o);if((e!==t.previousContent||c)&&!this.newProperty||f){let t;t=o?this.nameElement.textContent:y||this.newProperty&&a.StringUtilities.isWhitespace(this.valueElement.textContent||"")?"":i?e+": "+this.property.value:this.property.name+": "+e,await this.applyStyleText(t||"",!0),S.call(this,this.newProperty,!y,this.#O)}else i?this.property.name=e:this.property.value=e,d||this.newProperty||this.updateTitle(),S.call(this,this.newProperty,!1,this.#O);function S(e,t,s){if(n)if(p&&p.parent)i?p.startEditingValue():p.startEditingName();else{if(p&&!p.parent){const t=s.propertiesTreeOutline.rootElement();if("forward"===n&&y&&!i&&--g,g>=t.childCount()&&!this.newProperty)r=!0;else{const s=g>=0?t.childAt(g):null;if(s)return void(e&&y?"forward"===n?s.startEditingName():s.startEditingValue():!i||h?s.startEditingName():s.startEditingValue());e||(l=!0)}}if(r){if(e&&!t&&i!==("backward"===n))return;s.addNewBlankProperty().startEditingName()}else if(m){p=this.findSibling(n);const e=p||"backward"===n?s:s.nextEditableSibling();e&&(e.style().parentRule?e.startEditingSelector():e.moveEditorFromSelector(n))}else l&&(s.style().parentRule?s.startEditingSelector():s.moveEditorFromSelector(n))}else this.parentPaneInternal.resetFocus()}}removePrompt(){this.prompt&&(this.prompt.detach(),this.prompt=null)}styleTextAppliedForTest(){}applyStyleText(e,t,n){return this.applyStyleThrottler.schedule(this.innerApplyStyleText.bind(this,e,t,n))}async innerApplyStyleText(e,t,n){if(!this.treeOutline||!this.property)return;if(!this.style.range)return;const i=this.hasBeenEditedIncrementally;if(!(e=e.replace(/[\xA0\t]/g," ").trim()).length&&t&&this.newProperty&&!i)return void(this.parent&&this.parent.removeChild(this));const s=this.parentPaneInternal.node();this.parentPaneInternal.setUserOperation(!0),e+=a.StringUtilities.findUnclosedCssQuote(e),(e+=")".repeat(a.StringUtilities.countUnmatchedLeftParentheses(e))).length&&!/;\s*$/.test(e)&&(e+=";");const o=!this.newProperty||i;let r=await this.property.setText(e,t,o);i&&t&&!r&&(t=!1,r=await this.property.setText(this.originalPropertyText,t,o)),this.parentPaneInternal.setUserOperation(!1);const l=n||this.style.propertyAt(this.property.index),d=this.property.index<this.style.allProperties().length;if(!r||!l&&d)return t&&(this.newProperty?this.treeOutline.removeChild(this):this.updateTitle()),void this.styleTextAppliedForTest();this.matchedStylesInternal.resetActiveProperties(),this.hasBeenEditedIncrementally=!0;const c=t&&!e.length;c?this.#O.resetToolbars():!c&&l&&(this.property=l),s===this.node()&&this.updatePane(),this.styleTextAppliedForTest()}ondblclick(){return!0}isEventWithinDisclosureTriangle(e){return e.target===this.expandElement}}var qt=Object.freeze({__proto__:null,AnchorFunctionRenderer:jt,AngleRenderer:Ot,AutoBaseRenderer:kt,BezierRenderer:Dt,CSSWideKeywordRenderer:Mt,ColorMixRenderer:Lt,ColorRenderer:Pt,FlexGridRenderer:Tt,FontRenderer:_t,GridTemplateRenderer:Bt,LengthRenderer:Vt,LightDarkColorRenderer:At,LinearGradientRenderer:It,LinkableNameRenderer:Rt,MathFunctionRenderer:Ht,PositionAnchorRenderer:$t,PositionTryRenderer:zt,ShadowModel:Ft,ShadowRenderer:Ut,StylePropertyTreeElement:Gt,VariableRenderer:Nt,getPropertyRenderers:Kt});let Yt=null;class Xt extends i.Widget.VBox{editor;pane;section;editorContainer;#B;constructor(){super(!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;const t=Qt(this.section,e.data.name);t.property.value=e.data.value,t.updateTitle(),await t.applyStyleText(t.renderedPropertyText(),!1),await this.render()}async onPropertyDeselected(e){if(!this.section)return;const t=Qt(this.section,e.data.name);await t.applyStyleText("",!1),await this.render()}bindContext(e,t){this.pane=e,this.section=t,this.editor?.addEventListener("propertyselected",this.onPropertySelected),this.editor?.addEventListener("propertydeselected",this.onPropertyDeselected)}setTriggerKey(e){this.#B=e}getTriggerKey(){return this.#B}unbindContext(){this.pane=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?Zt(this.section,this.editor.getEditableProperties()):new Map,computedProperties:this.pane?await Jt(this.pane):new Map})}static instance(){return Yt||(Yt=new Xt),Yt}setEditor(e){this.editor instanceof e||(this.contentElement.removeChildren(),this.editor=new e,this.contentElement.appendChild(this.editor))}static createTriggerButton(e,t,n,i,s){const o=function(e){const t=new c.Button.Button;return t.data={variant:"icon",size:"SMALL",iconName:"flex-wrap",title:e,jslogContext:"flex-wrap"},t.classList.add("styles-pane-button"),t.onmouseup=e=>{e.stopPropagation()},t}(i);return o.onclick=async i=>{i.stopPropagation();const r=e.swatchPopoverHelper(),a=Xt.instance();a.element.classList.toggle("with-padding",!0),a.setEditor(n),a.bindContext(e,t),a.setTriggerKey(s),await a.render();const l=o.enclosingNodeOrSelfWithClass("style-panes-wrapper"),d=()=>{r.hide(!0)};r.show(a,o,(()=>{a.unbindContext(),l&&l.removeEventListener("scroll",d)})),l&&l.addEventListener("scroll",d)},o}}function Qt(e,t){const n=e.propertiesTreeOutline.rootElement().children().find((e=>e instanceof Gt&&e.property.name===t));if(n)return n;const i=e.addNewBlankProperty();return i.property.name=t,i}async function Jt(e){const t=e.computedStyleModel(),n=await t.fetchComputedStyle();return n?n.computedStyle:new Map}function Zt(e,t){const n=new Map,i=new Set(t.map((e=>e.propertyName)));for(const t of e.style().leadingProperties())i.has(t.name)&&n.set(t.name,t.value);return n}var en=Object.freeze({__proto__:null,StyleEditorWidget:Xt}),tn={cssText:`:host{display:inline}.node-link{cursor:pointer;display:inline;pointer-events:auto;outline-offset:2px;text-overflow:ellipsis;overflow:hidden;max-width:min(100%,550px);&:focus-visible{outline-width:unset}&.dynamic-link:hover{text-decoration:underline}}.node-label-name{color:var(--sys-color-token-property-special);.dynamic-link &{color:var(--text-link)}}.node-label-class,\n.node-label-pseudo{color:var(--sys-color-token-attribute)}\n/*# sourceURL=${import.meta.resolve("./domLinkifier.css")} */\n`};const nn={node:"<node>"},sn=r.i18n.registerUIStrings("panels/elements/DOMLinkifier.ts",nn),on=r.i18n.getLocalizedString.bind(void 0,sn),rn=function(e,t,n){const s=e,o=e.nodeType()===Node.ELEMENT_NODE&&e.pseudoType();if(o&&e.parentNode&&(e=e.parentNode),e.isViewTransitionPseudoNode()){const e=t.createChild("span","extra node-label-pseudo"),o=`::${s.pseudoType()}(${s.pseudoIdentifier()})`;return i.UIUtils.createTextChild(e,o),void i.Tooltip.Tooltip.install(t,n.tooltip||o)}const r=t.createChild("span","node-label-name");if(n.textContent)return r.textContent=n.textContent,void i.Tooltip.Tooltip.install(t,n.tooltip||n.textContent);let a=e.nodeNameInCorrectCase();r.textContent=a;const l=e.getAttribute("id");if(l){const e=t.createChild("span","node-label-id"),n="#"+l;a+=n,i.UIUtils.createTextChild(e,n),r.classList.add("extra")}const d=e.getAttribute("class");if(d){const e=d.split(/\s+/);if(e.length){const s=new Set,o=t.createChild("span","extra node-label-class");for(let t=0;t<e.length;++t){const r=e[t];if(r&&!n.hiddenClassList?.includes(r)&&!s.has(r)){const e="."+r;a+=e,i.UIUtils.createTextChild(o,e),s.add(r)}}}}if(o){const e=s.pseudoIdentifier(),n=t.createChild("span","extra node-label-pseudo");let o="::"+s.pseudoType();e&&(o+=`(${e})`),i.UIUtils.createTextChild(n,o),a+=o}i.Tooltip.Tooltip.install(t,n.tooltip||a)},an=function(t,o={tooltip:void 0,preventKeyboardFocus:void 0,textContent:void 0,isDynamicLink:!1}){if(!t)return document.createTextNode(on(nn.node));const r=document.createElement("span");r.classList.add("monospace");const a=i.UIUtils.createShadowRootWithCoreStyles(r,{cssFile:tn}).createChild("button","node-link text-button link-style");return a.classList.toggle("dynamic-link",o.isDynamicLink),a.setAttribute("jslog",`${s.link("node").track({click:!0,keydown:"Enter"})}`),rn(t,a,o),a.addEventListener("click",(()=>(e.Revealer.reveal(t,!1),!1)),!1),a.addEventListener("mouseover",t.highlight.bind(t,void 0),!1),a.addEventListener("mouseleave",(()=>n.OverlayModel.OverlayModel.hideDOMNodeHighlight()),!1),o.preventKeyboardFocus&&(a.tabIndex=-1),r},ln=function(t,n={tooltip:void 0,preventKeyboardFocus:void 0}){const o=document.createElement("div"),r=i.UIUtils.createShadowRootWithCoreStyles(o,{cssFile:tn}).createChild("button","node-link text-button link-style");return r.setAttribute("jslog",`${s.link("node").track({click:!0})}`),r.createChild("slot"),r.addEventListener("click",t.resolve.bind(t,(function(t){e.Revealer.reveal(t)})),!1),r.addEventListener("mousedown",(e=>e.consume()),!1),n.preventKeyboardFocus&&(r.tabIndex=-1),o};let dn;class cn{static instance(e={forceNew:null}){const{forceNew:t}=e;return dn&&!t||(dn=new cn),dn}linkify(e,t){if(e instanceof n.DOMModel.DOMNode)return an(e,t);if(e instanceof n.DOMModel.DeferredDOMNode)return ln(e,t);throw new Error("Can't linkify non-node")}}var hn=Object.freeze({__proto__:null,Linkifier:cn,decorateNodeLabel:rn,linkifyDeferredNodeReference:ln,linkifyNodeReference:an});const pn={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",copyAllCSSChanges:"Copy all CSS changes",cssSelector:"`CSS` selector",specificity:"Specificity: {PH1}"},un=r.i18n.registerUIStrings("panels/elements/StylePropertiesSection.ts",pn),mn=r.i18n.getLocalizedString.bind(void 0,un),gn="<style>";class yn{parentPane;styleInternal;matchedStyles;computedStyles;parentsComputedStyles;editable;hoverTimer=null;willCauseCancelEditing=!1;forceShowAll=!1;originalPropertiesCount;element;#V;titleElement;propertiesTreeOutline=new i.TreeOutline.TreeOutlineInShadow;showAllButton;selectorElement;newStyleRuleToolbar;fontEditorToolbar;fontEditorSectionManager;fontEditorButton;selectedSinceMouseDown;elementToSelectorIndex=new WeakMap;navigable;selectorRefElement;hoverableSelectorsMode;isHiddenInternal;nestingLevel=0;#H;#W;nextEditorTriggerButtonIdx=1;sectionIdx=0;#j;#$;static#z=0;static#K=0;sectionTooltipIdPrefix=yn.#K++;constructor(o,r,l,d,c,h,p){this.#j=p,this.parentPane=o,this.sectionIdx=d,this.styleInternal=l,this.matchedStyles=r,this.computedStyles=c,this.parentsComputedStyles=h,this.editable=Boolean(l.styleSheetId&&l.range),this.originalPropertiesCount=l.leadingProperties().length;const u=l.parentRule,m=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",`${s.section("style-properties").track({keydown:"ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Enter|Space"})}`),i.ARIAUtils.setLabel(this.element,`${m}, css selector`),this.element.tabIndex=-1,i.ARIAUtils.markAsListitem(this.element),this.element.addEventListener("keydown",this.onKeyDown.bind(this),!1),o.sectionByElement.set(this.element,this),this.#V=this.element.createChild("div","style-rule"),this.#H=document.createElement("div"),this.#H.classList.add("ancestor-rule-list"),this.element.prepend(this.#H),this.#W=document.createElement("div"),this.#W.classList.add("ancestor-closing-braces"),this.element.append(this.#W),this.updateAncestorRuleList(),this.titleElement=this.#V.createChild("div","styles-section-title "+(u?"styles-selector":"")),this.propertiesTreeOutline.setFocusable(!1),this.propertiesTreeOutline.registerRequiredCSS(st),this.propertiesTreeOutline.element.classList.add("style-properties","matched-styles","monospace"),this.#V.appendChild(this.propertiesTreeOutline.element),this.showAllButton=i.UIUtils.createTextButton("",this.showAllItems.bind(this),{className:"styles-show-all",jslogContext:"elements.show-all-style-properties"}),this.#V.appendChild(this.showAllButton);const g=e.Settings.Settings.instance().moduleSetting("text-editor-indent").get(),y=document.createElement("div");if(y.createChild("span","styles-clipboard-only").textContent=g.repeat(this.nestingLevel),y.classList.add("selector-container"),this.selectorElement=document.createElement("span"),i.ARIAUtils.setLabel(this.selectorElement,mn(pn.cssSelector)),this.selectorElement.classList.add("selector"),this.selectorElement.textContent=m,y.appendChild(this.selectorElement),this.selectorElement.addEventListener("mouseenter",this.onMouseEnterSelector.bind(this),!1),this.selectorElement.addEventListener("mouseleave",this.onMouseOutSelector.bind(this),!1),this.#$=y.createChild("span"),m.length>0||!(u instanceof n.CSSRule.CSSStyleRule)){y.createChild("span","sidebar-pane-open-brace").textContent=m.length>0?" {":"{";const e=this.#V.createChild("div","sidebar-pane-closing-brace");e.createChild("span","styles-clipboard-only").textContent=g.repeat(this.nestingLevel),e.createChild("span").textContent="}"}else this.titleElement.classList.add("hidden");if(u){const e=new i.Toolbar.ToolbarButton(mn(pn.insertStyleRuleBelow),"plus",void 0,"elements.new-style-rule");e.addEventListener("Click",this.onNewRuleClick,this),e.setSize("SMALL"),e.element.tabIndex=-1,this.newStyleRuleToolbar||(this.newStyleRuleToolbar=this.element.createChild("devtools-toolbar","sidebar-pane-section-toolbar new-rule-toolbar")),this.newStyleRuleToolbar.appendToolbarItem(e),i.ARIAUtils.setHidden(this.newStyleRuleToolbar,!0)}if(t.Runtime.experiments.isEnabled("font-editor")&&this.editable&&(this.fontEditorToolbar=this.#V.createChild("devtools-toolbar","sidebar-pane-section-toolbar"),this.fontEditorSectionManager=new ne(this.parentPane.swatchPopoverHelper(),this),this.fontEditorButton=new i.Toolbar.ToolbarButton("Font Editor","custom-typography",void 0,"font-editor"),this.fontEditorButton.addEventListener("Click",(()=>{this.onFontEditorButtonClicked()}),this),this.fontEditorButton.element.addEventListener("keydown",(e=>{a.KeyboardUtilities.isEnterOrSpaceKey(e)&&(e.consume(!0),this.onFontEditorButtonClicked())}),!1),this.fontEditorToolbar.appendToolbarItem(this.fontEditorButton),this.styleInternal.type===n.CSSStyleDeclaration.Type.Inline?this.newStyleRuleToolbar&&this.newStyleRuleToolbar.classList.add("shifted-toolbar"):this.fontEditorToolbar.classList.add("font-toolbar-hidden")),this.selectorElement.addEventListener("click",this.handleSelectorClick.bind(this),!1),this.selectorElement.setAttribute("jslog",`${s.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,u)if(u.isUserAgent()||u.isInjected())this.editable=!1;else if(u.styleSheetId){const e=u.cssModel().styleSheetHeaderForId(u.styleSheetId);this.navigable=e&&!e.isAnonymousInlineStyleSheet()}this.selectorRefElement=document.createElement("div"),this.selectorRefElement.classList.add("styles-section-subtitle"),this.element.prepend(this.selectorRefElement),this.updateRuleOrigin(),this.titleElement.appendChild(y),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.isHiddenInternal=!1,this.markSelectorMatches(),this.onpopulate()}setComputedStyles(e){this.computedStyles=e}setParentsComputedStyles(e){this.parentsComputedStyles=e}updateAuthoringHint(){let e=this.propertiesTreeOutline.firstChild();for(;e;)e instanceof Gt&&(e.setComputedStyles(this.computedStyles),e.setParentsComputedStyles(this.parentsComputedStyles),e.updateAuthoringHint()),e=e.nextSibling}setSectionIdx(e){this.sectionIdx=e,this.onpopulate()}getSectionIdx(){return this.sectionIdx}registerFontProperty(e){this.fontEditorSectionManager&&this.fontEditorSectionManager.registerFontProperty(e),this.fontEditorToolbar&&(this.fontEditorToolbar.classList.remove("font-toolbar-hidden"),this.newStyleRuleToolbar&&this.newStyleRuleToolbar.classList.add("shifted-toolbar"))}resetToolbars(){this.parentPane.swatchPopoverHelper().isShowing()||this.styleInternal.type===n.CSSStyleDeclaration.Type.Inline||(this.fontEditorToolbar&&this.fontEditorToolbar.classList.add("font-toolbar-hidden"),this.newStyleRuleToolbar&&this.newStyleRuleToolbar.classList.remove("shifted-toolbar"))}static createRuleOriginNode(e,t,n){if(!n)return document.createTextNode("");const i=yn.getRuleLocationFromCSSRule(n),s=n.styleSheetId?e.cssModel().styleSheetHeaderForId(n.styleSheetId):null;function o(){return n&&i&&n.styleSheetId&&s&&(!s.isAnonymousInlineStyleSheet()||e.cssModel().sourceMapManager().sourceMapForClient(s))?yn.linkifyRuleLocation(e.cssModel(),t,n.styleSheetId,i):null}function r(e){if(s?.ownerNode){const t=ln(s.ownerNode,{preventKeyboardFocus:!1,tooltip:void 0});return t.textContent=e,t}return null}if(s?.isMutable&&!s.isViaInspector()){const e=s.isConstructedByNew()&&!s.sourceMapURL?null:o();if(e)return e;const t=s.isConstructedByNew()?mn(pn.constructedStylesheet):gn,n=r(t);return n||document.createTextNode(t)}const a=o();if(a)return a;if(n.isUserAgent())return document.createTextNode(mn(pn.userAgentStylesheet));if(n.isInjected())return document.createTextNode(mn(pn.injectedStylesheet));if(n.isViaInspector())return document.createTextNode(mn(pn.viaInspector));const l=r(gn);return l||document.createTextNode("")}createRuleOriginNode(e,t,n){return yn.createRuleOriginNode(e,t,n)}static getRuleLocationFromCSSRule(e){let t;return e instanceof n.CSSRule.CSSStyleRule?t=e.style.range:e instanceof n.CSSRule.CSSKeyframeRule&&(t=e.key().range),t}static tryNavigateToRuleLocation(e,t){if(!t)return;const n=this.getRuleLocationFromCSSRule(t),i=t.styleSheetId?e.cssModel().styleSheetHeaderForId(t.styleSheetId):null;if(n&&t.styleSheetId&&i&&!i.isAnonymousInlineStyleSheet()){const i=this.getCSSSelectorLocation(e.cssModel(),t.styleSheetId,n);this.revealSelectorSource(i,!0)}}static linkifyRuleLocation(e,t,n,i){const s=this.getCSSSelectorLocation(e,n,i);return t.linkifyCSSLocation(s)}static getCSSSelectorLocation(e,t,i){const s=e.styleSheetHeaderForId(t),o=s.lineNumberInSource(i.startLine),r=s.columnNumberInSource(i.startLine,i.startColumn);return new n.CSSModel.CSSLocation(s,o,r)}getFocused(){return this.propertiesTreeOutline.shadowRoot.activeElement||null}focusNext(e){const 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;const t=this.getFocused();let n=null;const i=Array.from(this.propertiesTreeOutline.shadowRoot.querySelectorAll("[tabindex]"));if(0===i.length)return;const s=t?i.indexOf(t):-1;if("ArrowLeft"===e.key)n=i[s-1]||this.element;else if("ArrowRight"===e.key)n=i[s+1]||this.element;else if("ArrowUp"===e.key||"ArrowDown"===e.key)return void this.focusNext(this.element);n&&(this.focusNext(n),e.consume(!0))}onKeyDown(e){const t=e;if(!(i.UIUtils.isEditing()||!this.editable||t.altKey||t.ctrlKey||t.metaKey))switch(t.key){case"Enter":case" ":this.startEditingAtFirstPosition(),t.consume(!0);break;case"ArrowLeft":case"ArrowRight":case"ArrowUp":case"ArrowDown":this.ruleNavigation(t);break;default:1===t.key.length&&this.addNewBlankProperty(0).startEditingName()}}setSectionHovered(e){this.element.classList.toggle("styles-panel-hovered",e),this.propertiesTreeOutline.element.classList.toggle("styles-panel-hovered",e),this.hoverableSelectorsMode!==e&&(this.hoverableSelectorsMode=e,this.markSelectorMatches())}onMouseLeave(e){this.setSectionHovered(!1),this.parentPane.setActiveProperty(null)}onMouseMove(e){const t=i.KeyboardShortcut.KeyboardShortcut.eventHasCtrlEquivalentKey(e);this.setSectionHovered(t);const n=this.propertiesTreeOutline.treeElementFromEvent(e);n instanceof Gt?this.parentPane.setActiveProperty(n):this.parentPane.setActiveProperty(null);const s=this.element.getComponentSelection();!this.selectedSinceMouseDown&&s?.toString()&&(this.selectedSinceMouseDown=!0)}onFontEditorButtonClicked(){this.fontEditorSectionManager&&this.fontEditorButton&&this.fontEditorSectionManager.showPopover(this.fontEditorButton.element,this.parentPane)}style(){return this.styleInternal}headerText(){if(this.#j)return this.#j;const e=this.matchedStyles.nodeForStyle(this.styleInternal);return this.styleInternal.type===n.CSSStyleDeclaration.Type.Inline?this.matchedStyles.isInherited(this.styleInternal)?mn(pn.styleAttribute):"element.style":this.styleInternal.type===n.CSSStyleDeclaration.Type.Transition?"transitions style":this.styleInternal.type===n.CSSStyleDeclaration.Type.Animation?this.styleInternal.animationName()?`${this.styleInternal.animationName()} animation`:"animation style":e&&this.styleInternal.type===n.CSSStyleDeclaration.Type.Attributes?mn(pn.sattributesStyle,{PH1:e.nodeNameInCorrectCase()}):this.styleInternal.parentRule instanceof n.CSSRule.CSSStyleRule?this.styleInternal.parentRule.selectorText():""}onMouseOutSelector(){this.hoverTimer&&clearTimeout(this.hoverTimer),n.OverlayModel.OverlayModel.hideDOMNodeHighlight()}onMouseEnterSelector(){this.hoverTimer&&clearTimeout(this.hoverTimer),this.hoverTimer=window.setTimeout(this.highlight.bind(this),300)}highlight(e="all"){n.OverlayModel.OverlayModel.hideDOMNodeHighlight();const t=this.parentPane.node();if(!t)return;const i=this.styleInternal.parentRule&&this.styleInternal.parentRule instanceof n.CSSRule.CSSStyleRule?this.styleInternal.parentRule.selectorText():void 0;t.domModel().overlayModel().highlightInOverlay({node:t,selectorList:i},e)}firstSibling(){const e=this.element.parentElement;if(!e)return null;let t=e.firstChild;for(;t;){const e=this.parentPane.sectionByElement.get(t);if(e)return e;t=t.nextSibling}return null}findCurrentOrNextVisible(e,t){if(!this.isHidden())return this;if(this===t)return null;t||(t=this);let n=null;const i=e?this.nextSibling():this.previousSibling();if(i)n=i.findCurrentOrNextVisible(e,t);else{const i=e?this.firstSibling():this.lastSibling();i&&(n=i.findCurrentOrNextVisible(e,t))}return n}lastSibling(){const e=this.element.parentElement;if(!e)return null;let t=e.lastChild;for(;t;){const e=this.parentPane.sectionByElement.get(t);if(e)return e;t=t.previousSibling}return null}nextSibling(){let e=this.element;do{e=e.nextSibling}while(e&&!this.parentPane.sectionByElement.has(e));if(e)return this.parentPane.sectionByElement.get(e)}previousSibling(){let e=this.element;do{e=e.previousSibling}while(e&&!this.parentPane.sectionByElement.has(e));if(e)return this.parentPane.sectionByElement.get(e)}onNewRuleClick(e){e.data.consume();const t=this.styleInternal.parentRule;if(!t?.style.range||void 0===t.styleSheetId)return;const n=v.TextRange.TextRange.createFromLocation(t.style.range.endLine,t.style.range.endColumn+1);this.parentPane.addBlankSection(this,t.styleSheetId,n)}styleSheetEdited(e){const t=this.styleInternal.parentRule;t?t.rebase(e):this.styleInternal.rebase(e),this.updateAncestorRuleList(),this.updateRuleOrigin()}createAncestorRules(e){let t=0,n=0,i=0,s=0,o=0;this.nestingLevel=0;for(const r of e.ruleTypes){let a;switch(r){case"MediaRule":a=this.createMediaElement(e.media[t++]);break;case"ContainerRule":a=this.createContainerQueryElement(e.containerQueries[n++]);break;case"ScopeRule":a=this.createScopeElement(e.scopes[i++]);break;case"SupportsRule":a=this.createSupportsElement(e.supports[s++]);break;case"StyleRule":a=this.createNestingElement(e.nestingSelectors?.[o++])}a&&(this.#H.prepend(a),this.#W.prepend(this.indentElement(this.createClosingBrace(),this.nestingLevel)),this.nestingLevel++)}0===this.headerText().length&&this.nestingLevel--;let r=0;for(const e of this.#H.children)this.indentElement(e,r),r++}createClosingBrace(){const e=document.createElement("div");return e.append("}"),e}indentElement(t,n,i){const s=e.Settings.Settings.instance().moduleSetting("text-editor-indent").get(),o=document.createElement("span");return o.classList.add("styles-clipboard-only"),o.setAttribute("slot","indent"),o.textContent=s.repeat(n),t.prepend(o),i||(t.style.paddingLeft=`${n}ch`),t}createMediaElement(e){if(!e.text||!e.text.includes("(")&&"print"!==e.text)return;let t,i="",s="";switch(e.source){case n.CSSMedia.Source.LINKED_SHEET:case n.CSSMedia.Source.INLINE_SHEET:s=`media="${e.text}"`;break;case n.CSSMedia.Source.MEDIA_RULE:i="@media",s=e.text,e.styleSheetId&&(t=this.handleQueryRuleClick.bind(this,e));break;case n.CSSMedia.Source.IMPORT_RULE:s=`@import ${e.text}`}const o=new p.CSSQuery.CSSQuery;return o.data={queryPrefix:i,queryText:s,onQueryTextClick:t,jslogContext:"media-query"},o}createContainerQueryElement(e){if(!e.text)return;let t;e.styleSheetId&&(t=this.handleQueryRuleClick.bind(this,e));const n=new p.CSSQuery.CSSQuery;return n.data={queryPrefix:"@container",queryName:e.name,queryText:e.text,onQueryTextClick:t,jslogContext:"container-query"},/^style\(.*\)/.test(e.text)||this.addContainerForContainerQuery(e),n}createScopeElement(e){let t;e.styleSheetId&&(t=this.handleQueryRuleClick.bind(this,e));const n=new p.CSSQuery.CSSQuery;return n.data={queryPrefix:"@scope",queryText:e.text,onQueryTextClick:t,jslogContext:"scope"},n}createSupportsElement(e){if(!e.text)return;let t;e.styleSheetId&&(t=this.handleQueryRuleClick.bind(this,e));const n=new p.CSSQuery.CSSQuery;return n.data={queryPrefix:"@supports",queryText:e.text,onQueryTextClick:t,jslogContext:"supports"},n}createNestingElement(e){if(!e)return;const t=document.createElement("div");return t.textContent=`${e} {`,t}async addContainerForContainerQuery(e){const t=await e.getContainerForNode(this.matchedStyles.node().id);if(!t)return;const n=new p.QueryContainer.QueryContainer;n.data={container:p.Helper.legacyNodeToElementsComponentsNode(t.containerNode),queryName:e.name,onContainerLinkClick:e=>{e.preventDefault(),Ls.instance().revealAndSelectNode(t.containerNode,!0,!0),t.containerNode.scrollIntoView()}},n.addEventListener("queriedsizerequested",(async()=>{const e=await t.getContainerSizeDetails();e&&n.updateContainerQueriedSizeDetails(e)})),this.#H.prepend(n)}updateAncestorRuleList(){this.#H.removeChildren(),this.#W.removeChildren(),this.styleInternal.parentRule&&this.styleInternal.parentRule instanceof n.CSSRule.CSSStyleRule&&this.createAncestorRules(this.styleInternal.parentRule),this.#V.style.paddingLeft=`${this.nestingLevel}ch`}isPropertyInherited(e){return!!this.matchedStyles.isInherited(this.styleInternal)&&!n.CSSMetadata.cssMetadata().isPropertyInherited(e)}nextEditableSibling(){let e=this;do{e=e.nextSibling()}while(e&&!e.editable);if(!e)for(e=this.firstSibling();e&&!e.editable;)e=e.nextSibling();return e?.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.parentPane.refreshUpdate(this,e)}updateVarFunctions(e){if(!e.property.name.startsWith("--"))return;let t=this.propertiesTreeOutline.firstChild();for(;t;)t!==e&&t instanceof Gt&&t.refreshIfComputedValueChanged(),t=t.traverseNextTreeElement(!1,null,!0)}update(e){const t=this.headerText();if(this.selectorElement.textContent=t,this.titleElement.classList.toggle("hidden",0===t.length),this.markSelectorMatches(),e)this.onpopulate();else{let e=this.propertiesTreeOutline.firstChild();for(;e&&e instanceof Gt;)e.setOverloaded(this.isPropertyOverloaded(e.property)),e=e.traverseNextTreeElement(!1,null,!0)}}showAllItems(e){e&&e.consume(),this.forceShowAll||(this.forceShowAll=!0,this.onpopulate())}onpopulate(){this.parentPane.setActiveProperty(null),this.nextEditorTriggerButtonIdx=1,this.propertiesTreeOutline.removeChildren(),this.populateStyle(this.styleInternal,this.propertiesTreeOutline)}populateStyle(e,t){let n=0;const i=e.leadingProperties(),s=50+i.length-this.originalPropertiesCount;for(const o of i){if(!this.forceShowAll&&n>=s)break;n++;const i=o.getLonghandProperties().length>0,r=this.isPropertyInherited(o.name),a=this.isPropertyOverloaded(o);if(e.parentRule&&e.parentRule.isUserAgent()&&r)continue;const l=new Gt({stylesPane:this.parentPane,section:this,matchedStyles:this.matchedStyles,property:o,isShorthand:i,inherited:r,overloaded:a,newProperty:!1});l.setComputedStyles(this.computedStyles),l.setParentsComputedStyles(this.parentsComputedStyles),t.appendChild(l)}n<i.length?(this.showAllButton.classList.remove("hidden"),this.showAllButton.textContent=mn(pn.showAllPropertiesSMore,{PH1:i.length-n})):this.showAllButton.classList.add("hidden")}isPropertyOverloaded(e){return"Overloaded"===this.matchedStyles.propertyState(e)}updateFilter(){let e=!1;this.showAllItems();for(const t of this.propertiesTreeOutline.rootElement().children())if(t instanceof Gt){const n=t.updateFilter();e=e||n}const t=this.parentPane.filterRegex(),n=!e&&null!==t&&!t.test(this.element.deepTextContent());return this.isHiddenInternal=n,this.element.classList.toggle("hidden",n),!n&&this.styleInternal.parentRule&&this.markSelectorHighlights(),!n}isHidden(){return this.isHiddenInternal}markSelectorMatches(){const e=this.styleInternal.parentRule;if(!(e&&e instanceof n.CSSRule.CSSStyleRule))return;const t=this.matchedStyles.getMatchingSelectors(e),i=new Array(e.selectors.length).fill(!1);for(const e of t)i[e]=!0;this.parentPane.isEditingStyle||(this.renderSelectors(e.selectors,i,this.elementToSelectorIndex),this.markSelectorHighlights())}static getNextSpecificityTooltipId(){return"specificity-tooltip-"+this.#z++}renderSelectors(e,t,n){this.selectorElement.removeChildren(),this.#$.removeChildren();for(const[i,s]of e.entries()){i>0&&this.selectorElement.append(", ");const o=s.specificity?yn.getNextSpecificityTooltipId():null,r=this.selectorElement.createChild("span","simple-selector");if(r.classList.toggle("selector-matches",t[i]),n.set(r,i),r.textContent=e[i].text,o&&s.specificity){r.setAttribute("aria-details",o);const e=`(${s.specificity.a},${s.specificity.b},${s.specificity.c})`;this.#$.appendChild(new T.Tooltip.Tooltip({id:o,anchor:r,variant:"rich",jslogContext:"elements.css-selector-specificity"})).textContent=mn(pn.specificity,{PH1:e})}}}markSelectorHighlights(){const e=this.selectorElement.getElementsByClassName("simple-selector"),t=this.parentPane.filterRegex();for(let n=0;n<e.length;++n){const i=t?.test(e[n].textContent||"");e[n].classList.toggle("filter-match",i)}}addNewBlankProperty(e=this.propertiesTreeOutline.rootElement().childCount()){const t=this.styleInternal.newBlankProperty(e),n=new Gt({stylesPane:this.parentPane,section:this,matchedStyles:this.matchedStyles,property:t,isShorthand:!1,inherited:!1,overloaded:!1,newProperty:!0});return this.propertiesTreeOutline.insertChild(n,t.index),n}handleEmptySpaceMouseDown(){this.willCauseCancelEditing=this.parentPane.isEditingStyle,this.selectedSinceMouseDown=!1}handleEmptySpaceClick(e){if(!this.editable||this.element.hasSelection()||this.willCauseCancelEditing||this.selectedSinceMouseDown)return;const t=e.target;if(t.classList.contains("header")||this.element.classList.contains("read-only")||t.enclosingNodeOrSelfWithClass("ancestor-rule-list"))return void e.consume();const n=i.UIUtils.deepElementFromEvent(e),s=n&&i.TreeOutline.TreeElement.getTreeElementBylistItemNode(n);s&&s instanceof Gt?this.addNewBlankProperty(s.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(t,n){const s=n.currentTarget;if(i.UIUtils.isBeingEdited(s))return;if(i.KeyboardShortcut.KeyboardShortcut.eventHasCtrlEquivalentKey(n)&&this.navigable){const i=t.rawLocation();if(!i)return void n.consume(!0);const s=f.CSSWorkspaceBinding.CSSWorkspaceBinding.instance().rawLocationToUILocation(i);return s&&e.Revealer.reveal(s),void n.consume(!0)}if(!this.editable)return;const o=new i.InplaceEditor.Config(this.editingMediaCommitted.bind(this,t),this.editingMediaCancelled.bind(this,s),void 0,this.editingMediaBlurHandler.bind(this));i.InplaceEditor.InplaceEditor.startEditing(s,o);const r=s.getComponentSelection();r&&r.selectAllChildren(s),this.parentPane.setEditingStyle(!0);s.enclosingNodeOrSelfWithClass("query").classList.add("editing-query"),n.consume(!0)}editingMediaFinished(e){this.parentPane.setEditingStyle(!1);e.enclosingNodeOrSelfWithClass("query").classList.remove("editing-query")}editingMediaCancelled(e){this.editingMediaFinished(e),this.markSelectorMatches();const t=e.getComponentSelection();t&&t.collapse(e,0)}editingMediaBlurHandler(){return!0}async editingMediaCommitted(e,t,i,s,o,r){this.parentPane.setEditingStyle(!1),this.editingMediaFinished(t),i&&(i=i.trim()),this.parentPane.setUserOperation(!0);const a=this.parentPane.cssModel();if(a&&e.styleSheetId){const t=e.range;let s=!1;s=e instanceof n.CSSContainerQuery.CSSContainerQuery?await a.setContainerQueryText(e.styleSheetId,t,i):e instanceof n.CSSSupports.CSSSupports?await a.setSupportsText(e.styleSheetId,t,i):e instanceof n.CSSScope.CSSScope?await a.setScopeText(e.styleSheetId,t,i):await a.setMediaText(e.styleSheetId,t,i),s&&(this.matchedStyles.resetActiveProperties(),this.parentPane.refreshUpdate(this)),this.parentPane.setUserOperation(!1),this.editingMediaTextCommittedForTest()}}editingMediaTextCommittedForTest(){}handleSelectorClick(e){const t=e.target;if(t){if(i.KeyboardShortcut.KeyboardShortcut.eventHasCtrlEquivalentKey(e)&&this.navigable&&t.classList.contains("simple-selector")){const n=this.elementToSelectorIndex.get(t);return n&&this.navigateToSelectorSource(n,!0),void e.consume(!0)}this.element.hasSelection()||(this.startEditingAtFirstPosition(),e.consume(!0))}}handleContextMenuEvent(e){if(!e.target)return;const t=new i.ContextMenu.ContextMenu(e);t.clipboardSection().appendItem(mn(pn.copySelector),(()=>{const e=this.headerText();o.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(e)}),{jslogContext:"copy-selector"}),t.clipboardSection().appendItem(mn(pn.copyRule),(()=>{const e=Fn.formatLeadingProperties(this).ruleText;o.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(e)}),{jslogContext:"copy-rule"}),t.clipboardSection().appendItem(mn(pn.copyAllDeclarations),(()=>{const e=Fn.formatLeadingProperties(this).allDeclarationText;o.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(e)}),{jslogContext:"copy-all-declarations"}),t.clipboardSection().appendItem(mn(pn.copyAllCSSChanges),(async()=>{const e=await this.parentPane.getFormattedChanges();o.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(e)}),{jslogContext:"copy-all-css-changes"}),t.show()}navigateToSelectorSource(e,t){const i=this.parentPane.cssModel();if(!i)return;const s=this.styleInternal.parentRule;if(void 0===s?.styleSheetId)return;const o=i.styleSheetHeaderForId(s.styleSheetId);if(!o)return;const r=new n.CSSModel.CSSLocation(o,s.lineNumberInSource(e),s.columnNumberInSource(e));yn.revealSelectorSource(r,t)}static revealSelectorSource(t,n){const i=f.CSSWorkspaceBinding.CSSWorkspaceBinding.instance().rawLocationToUILocation(t);i&&e.Revealer.reveal(i,!n)}startEditingAtFirstPosition(){this.editable&&(this.styleInternal.parentRule?this.startEditingSelector():this.moveEditorFromSelector("forward"))}startEditingSelector(){const e=this.selectorElement;if(i.UIUtils.isBeingEdited(e)||this.titleElement.classList.contains("hidden"))return;e.scrollIntoViewIfNeeded(!1);const t=e.textContent;null!==t&&(this.#$.querySelectorAll("devtools-tooltip")?.forEach((e=>e.hidePopover())),e.textContent=t.replace(/\s+/g," ").trim());const n=new i.InplaceEditor.Config(this.editingSelectorCommitted.bind(this),this.editingSelectorCancelled.bind(this),void 0);i.InplaceEditor.InplaceEditor.startEditing(this.selectorElement,n);const s=e.getComponentSelection();s&&s.selectAllChildren(e),this.parentPane.setEditingStyle(!0),e.classList.contains("simple-selector")&&this.navigateToSelectorSource(0,!1)}moveEditorFromSelector(e){if(this.markSelectorMatches(),e)if("forward"===e){let e=this.propertiesTreeOutline.firstChild();for(;e?.inherited();){const t=e.nextSibling;e=t instanceof Gt?t:null}e?e.startEditingName():this.addNewBlankProperty().startEditingName()}else{const e=this.previousEditableSibling();if(!e)return;e.addNewBlankProperty().startEditingName()}}editingSelectorCommitted(e,t,n,i,s){if(this.editingSelectorEnded(),t&&(t=t.trim()),t===n)return this.selectorElement.textContent=t,void this.moveEditorFromSelector(s);const o=this.styleInternal.parentRule;o&&(this.parentPane.setUserOperation(!0),this.setHeaderText(o,t).then(function(){this.parentPane.setUserOperation(!1),this.moveEditorFromSelector(s),this.editingSelectorCommittedForTest()}.bind(this)))}setHeaderText(e,t){function i(e){const t=this.matchedStyles.getMatchingSelectors(e).length>0;this.propertiesTreeOutline.element.classList.toggle("no-affect",!t),this.matchedStyles.resetActiveProperties(),this.parentPane.refreshUpdate(this)}if(!(e instanceof n.CSSRule.CSSStyleRule))return Promise.resolve();const s=e.selectorRange();return s?(this.#j=void 0,e.setSelectorText(t).then(function(e,t){return t?this.matchedStyles.recomputeMatchingSelectors(e).then(i.bind(this,e)):Promise.resolve()}.bind(this,e,Boolean(s)))):Promise.resolve()}editingSelectorCommittedForTest(){}updateRuleOrigin(){this.selectorRefElement.removeChildren(),this.selectorRefElement.appendChild(this.createRuleOriginNode(this.matchedStyles,this.parentPane.linkifier,this.styleInternal.parentRule))}editingSelectorEnded(){this.parentPane.setEditingStyle(!1)}editingSelectorCancelled(){this.editingSelectorEnded(),this.markSelectorMatches()}closestPropertyForEditing(e){const t=this.propertiesTreeOutline.rootElement();return e>=t.childCount()?t.lastChild():t.childAt(e)}}class fn extends yn{normal;ruleLocation;styleSheetId;constructor(e,t,i,s,o,r,a){const l=e.cssModel();super(e,t,n.CSSRule.CSSStyleRule.createDummyRule(l,i).style,a,null,null),this.normal=!1,this.ruleLocation=o,this.styleSheetId=s,this.selectorRefElement.removeChildren(),this.selectorRefElement.appendChild(yn.linkifyRuleLocation(l,this.parentPane.linkifier,s,this.actualRuleLocation())),r?.parentRule&&r.parentRule instanceof n.CSSRule.CSSStyleRule&&this.createAncestorRules(r.parentRule),this.element.classList.add("blank-section")}actualRuleLocation(){const e=this.rulePrefix().split("\n"),t=e[e.length-1],n=new v.TextRange.TextRange(0,0,e.length-1,t?t.length:0);return this.ruleLocation.rebaseAfterTextEdit(v.TextRange.TextRange.createFromLocation(0,0),n)}rulePrefix(){return 0===this.ruleLocation.startLine&&0===this.ruleLocation.startColumn?"":"\n\n"}get isBlank(){return!this.normal}editingSelectorCommitted(e,t,n,i,s){if(!this.isBlank)return void super.editingSelectorCommitted(e,t,n,i,s);function o(e){const t=this.matchedStyles.getMatchingSelectors(e).length>0;this.makeNormal(e),t||this.propertiesTreeOutline.element.classList.add("no-affect"),this.updateRuleOrigin(),this.parentPane.setUserOperation(!1),this.editingSelectorEnded(),this.element.parentElement&&this.moveEditorFromSelector(s),this.markSelectorMatches(),this.editingSelectorCommittedForTest()}t&&(t=t.trim()),this.parentPane.setUserOperation(!0);const r=this.parentPane.cssModel(),a=this.rulePrefix()+t+" {}";r&&r.addRule(this.styleSheetId,a,this.ruleLocation).then(function(e){return e?this.matchedStyles.addNewRule(e,this.matchedStyles.node()).then(o.bind(this,e)):(this.editingSelectorCancelled(),this.editingSelectorCommittedForTest(),Promise.resolve())}.bind(this))}editingSelectorCancelled(){this.parentPane.setUserOperation(!1),this.isBlank?(this.editingSelectorEnded(),this.parentPane.removeSection(this)):super.editingSelectorCancelled()}makeNormal(e){this.element.classList.remove("blank-section"),this.styleInternal=e.style,this.normal=!0}}class Sn extends yn{constructor(e,t,n,i,s,o){super(e,t,n,i,null,null,s),o||this.element.classList.add("hidden"),this.selectorElement.className="property-registration-key"}async setHeaderText(e,t){if(!(e instanceof n.CSSRule.CSSPropertyRule))return;e.propertyName().range&&await e.setPropertyName(t)&&this.parentPane.forceUpdate()}createRuleOriginNode(e,t,n){return n?super.createRuleOriginNode(e,t,n):document.createTextNode("CSS.registerProperty")}}class En extends yn{constructor(e,t,n,i,s,o,r,a){super(e,t,n,s,null,null,`${o}(${r.join(", ")})`),a||this.element.classList.add("hidden"),this.selectorElement.className="function-key",this.addChildren(i,this.propertiesTreeOutline)}createConditionElement(e){return"media"in e?this.createMediaElement(e.media):"container"in e?this.createContainerQueryElement(e.container):"supports"in e?this.createSupportsElement(e.supports):void 0}positionNestingElement(e){return e.classList.add("css-function-inline-block"),this.indentElement(e,this.nestingLevel,!0)}addChildren(e,t){for(const n of e)if("style"in n)this.populateStyle(n.style,t);else if("children"in n){const e=this.createConditionElement(n);let s=t;if(this.nestingLevel++,e){const n=new i.TreeOutline.TreeElement;n.listItemElement.appendChild(this.positionNestingElement(e)),n.setExpandable(!0),n.setCollapsible(!1),t.appendChild(n),s=n}if(this.addChildren(n.children,s),e){const e=new i.TreeOutline.TreeElement;e.listItemElement.appendChild(this.positionNestingElement(this.createClosingBrace())),t.appendChild(e)}this.nestingLevel--}}}class Cn extends yn{constructor(e,t,n,i){super(e,t,n,i,null,null),this.selectorElement.className="font-palette-values-key"}}class vn extends yn{constructor(e,t,n,i,s){super(e,t,n,i,null,null),this.selectorElement.className="position-try-values-key",this.propertiesTreeOutline.element.classList.toggle("no-affect",!s)}}class bn extends yn{constructor(e,t,n,i){super(e,t,n,i,null,null),this.selectorElement.className="keyframe-key"}headerText(){return this.styleInternal.parentRule instanceof n.CSSRule.CSSKeyframeRule?this.styleInternal.parentRule.key().text:""}setHeaderText(e,t){if(!(e instanceof n.CSSRule.CSSKeyframeRule))return Promise.resolve();return e.key().range?e.setKeyText(t).then(function(e){e&&this.parentPane.refreshUpdate(this)}.bind(this)):Promise.resolve()}isPropertyInherited(e){return!1}isPropertyOverloaded(e){return!1}markSelectorHighlights(){}markSelectorMatches(){this.styleInternal.parentRule instanceof n.CSSRule.CSSKeyframeRule&&(this.selectorElement.textContent=this.styleInternal.parentRule.key().text)}highlight(){}}class wn extends yn{isPropertyInherited(e){return!1}}var xn=Object.freeze({__proto__:null,BlankStylePropertiesSection:fn,FontPaletteValuesRuleSection:Cn,FunctionRuleSection:En,HighlightPseudoStylePropertiesSection:wn,KeyframePropertiesSection:bn,PositionTryRuleSection:vn,RegisteredPropertiesSection:Sn,StylePropertiesSection:yn});class Tn{styleSidebarPane;constructor(e){this.styleSidebarPane=e}highlightProperty(e){for(const e of this.styleSidebarPane.allSections())for(let t=e.propertiesTreeOutline.firstChild();t;t=t.nextSibling)t.onpopulate();const t=this.styleSidebarPane.allSections().find((t=>t.style().leadingProperties().includes(e)));if(!t)return;t.showAllItems();const n=this.findTreeElementFromSection((t=>t.property===e),t);n&&(n.parent&&n.parent.expand(),this.scrollAndHighlightTreeElement(n),t.element.focus())}findAndHighlightSectionBlock(e){const t=this.styleSidebarPane.getSectionBlockByName(e);if(!t||0===t.sections.length)return;const[n]=t.sections;n.showAllItems(),w.highlightElement(t.titleElement())}findAndHighlightSection(e,t){const n=this.styleSidebarPane.getSectionBlockByName(t),i=n?.sections.find((t=>t.headerText()===e));i&&n&&(n.expand(!0),i.showAllItems(),w.highlightElement(i.element))}findAndHighlightPropertyName(e,t,n){const i=n?this.styleSidebarPane.getSectionBlockByName(n):void 0,s=i?.sections??this.styleSidebarPane.allSections();if(!s)return!1;for(const n of s){if(t&&n.headerText()!==t)continue;if(!n.style().hasActiveProperty(e))continue;i?.expand(!0),n.showAllItems();const s=this.findTreeElementFromSection((t=>t.property.name===e&&!t.overloaded()),n);if(s)return this.scrollAndHighlightTreeElement(s),n.element.focus(),!0}return!1}findTreeElementFromSection(e,t){let n=t.propertiesTreeOutline.firstChild();for(;n&&n instanceof Gt;){if(e(n))return n;n=n.traverseNextTreeElement(!1,null,!0)}return null}scrollAndHighlightTreeElement(e){w.highlightElement(e.listItemElement)}}var Mn=Object.freeze({__proto__:null,StylePropertyHighlighter:Tn}),Nn={cssText:`.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,\n  &.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,\n  .try-rule-selector-element,\n  .ancestor-rule-list,\n  .ancestor-closing-braces{color:var(--app-color-element-sidebar-subtitle)}.ancestor-rule-list,\n  .styles-section-title{overflow-wrap:break-word;white-space:normal}.ancestor-rule-list devtools-css-query{display:block}.simple-selector.selector-matches,\n  &.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),\n  &.styles-panel-hovered:not(.read-only) devtools-css-query{--override-styles-section-text-hover-text-decoration:underline;--override-styles-section-text-hover-cursor:default}}.sidebar-pane-closing-brace{clear:both}.styles-section-subtitle{color:var(--sys-color-token-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,\n.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%}.font-toolbar-hidden{visibility:hidden}.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}&.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}&.shifted-toolbar{padding-right:32px}}.styles-pane:not(.is-editing-style)\n  .styles-section.matched-styles:not(.read-only):hover\n  .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,\n    &.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 *,\n    &.read-only:focus-visible *,\n    &: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}\n/*# sourceURL=${import.meta.resolve("./stylesSidebarPane.css")} */\n`};class In{#G=new Map;fetchPromiseForTest;constructor(e){this.fetchPromiseForTest=e?fetch(`${e}third_party/vscode.web-custom-data/browsers.css-data.json`).then((e=>e.json())).then((e=>{for(const t of e.properties)this.#G.set(t.name,t)})).catch():Promise.resolve()}static create(){const e=t.Runtime.getRemoteBase();return new In(e?.base??"")}findCssProperty(e){return this.#G.get(e)}}var Pn=Object.freeze({__proto__:null,WebCustomData:In});const An={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 ±1, Shift: G ±1, {PH2}: B ±1",incrementdecrementWithMousewheelHundred:"Increment/decrement with mousewheel or up/down keys. {PH1}: ±100, Shift: ±10, {PH2}: ±0.1",toggleRenderingEmulations:"Toggle common rendering emulations",automaticDarkMode:"Automatic dark mode",layer:"Layer",clickToRevealLayer:"Click to reveal layer in layer tree"},Ln=r.i18n.registerUIStrings("panels/elements/StylesSidebarPane.ts",An),On=r.i18n.getLocalizedString.bind(void 0,Ln),Rn="@property",Dn="@function",kn=[{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"]}];class Fn extends(e.ObjectWrapper.eventMixin(Se)){matchedStyles=null;currentToolbarPane=null;animatedToolbarPane=null;pendingWidget=null;pendingWidgetToggle=null;toolbar=null;toolbarPaneElement;lastFilterChange=null;visibleSections=null;noMatchesElement;sectionsContainer;sectionByElement=new WeakMap;swatchPopoverHelperInternal=new E.SwatchPopoverHelper.SwatchPopoverHelper;linkifier=new C.Linkifier.Linkifier(Un,!0);decorator;lastRevealedProperty=null;userOperation=!1;isEditingStyle=!1;filterRegexInternal=null;isActivePropertyHighlighted=!1;initialUpdateCompleted=!1;hasMatchedStyles=!1;sectionBlocks=[];idleCallbackManager=null;needsForceUpdate=!1;resizeThrottler=new e.Throttler.Throttler(100);resetUpdateThrottler=new e.Throttler.Throttler(500);computedStyleUpdateThrottler=new e.Throttler.Throttler(500);scrollerElement;boundOnScroll;imagePreviewPopover;#q;activeCSSAngle=null;#Y=new Map;#X;#Q;constructor(t){super(t,!0),this.setMinimumSize(96,26),this.registerRequiredCSS(Nn),e.Settings.Settings.instance().moduleSetting("text-editor-indent").addChangeListener(this.update.bind(this)),this.toolbarPaneElement=this.createStylesSidebarToolbar(),this.noMatchesElement=this.contentElement.createChild("div","gray-info-message hidden"),this.noMatchesElement.textContent=On(An.noMatchingSelectorOrStyle),this.sectionsContainer=this.contentElement.createChild("div"),i.ARIAUtils.markAsList(this.sectionsContainer),this.sectionsContainer.addEventListener("keydown",this.sectionsContainerKeyDown.bind(this),!1),this.sectionsContainer.addEventListener("focusin",this.sectionsContainerFocusChanged.bind(this),!1),this.sectionsContainer.addEventListener("focusout",this.sectionsContainerFocusChanged.bind(this),!1),this.swatchPopoverHelperInternal.addEventListener("WillShowPopover",this.hideAllPopovers,this),this.decorator=new Tn(this),this.contentElement.classList.add("styles-pane"),i.Context.Context.instance().addFlavorChangeListener(n.DOMModel.DOMNode,this.forceUpdate,this),this.contentElement.addEventListener("copy",this.clipboardCopy.bind(this)),e.Settings.Settings.instance().moduleSetting("show-css-property-documentation-on-hover")&&(this.#q=In.create()),this.boundOnScroll=this.onScroll.bind(this),this.imagePreviewPopover=new oe(this.contentElement,(e=>{const t=e.composedPath()[0];return t instanceof Element?t:null}),(()=>this.node()))}get webCustomData(){return this.#q}onScroll(e){this.hideAllPopovers()}swatchPopoverHelper(){return this.swatchPopoverHelperInternal}setUserOperation(e){this.userOperation=e}static ignoreErrorsForProperty(e){function t(e){return!e.startsWith("-webkit-")&&/^[-_][\w\d]+-\w/.test(e)}const n=e.name.toLowerCase();if("_"===n.charAt(0))return!0;if("filter"===n)return!0;if(n.startsWith("scrollbar-"))return!0;if(t(n))return!0;const i=e.value.toLowerCase();return!!i.endsWith("\\9")||!!t(i)}static formatLeadingProperties(t){const n=t.headerText(),i=e.Settings.Settings.instance().moduleSetting("text-editor-indent").get(),s=t.style(),o=[];for(const e of s.leadingProperties())e.disabled?o.push(`${i}/* ${e.name}: ${e.value}; */`):o.push(`${i}${e.name}: ${e.value};`);const r=o.join("\n");return{allDeclarationText:r,ruleText:`${n} {\n${r}\n}`}}revealProperty(e){this.decorator.highlightProperty(e),this.lastRevealedProperty=e,this.update()}jumpToProperty(e,t,n){return this.decorator.findAndHighlightPropertyName(e,t,n)}jumpToDeclaration(e){e.declaration instanceof n.CSSProperty.CSSProperty?this.revealProperty(e.declaration):this.jumpToProperty("initial-value",e.name,Rn)}jumpToSection(e,t){this.decorator.findAndHighlightSection(e,t)}jumpToSectionBlock(e){this.decorator.findAndHighlightSectionBlock(e)}forceUpdate(){this.needsForceUpdate=!0,this.swatchPopoverHelperInternal.hide(),this.#X?.abort(),this.resetCache(),this.update()}sectionsContainerKeyDown(e){const t=a.DOMUtilities.deepActiveElement(this.sectionsContainer.ownerDocument);if(!t)return;const n=this.sectionByElement.get(t);if(!n)return;let i=null,s=!1;switch(e.key){case"ArrowUp":case"ArrowLeft":i=n.previousSibling()||n.lastSibling(),s=!1;break;case"ArrowDown":case"ArrowRight":i=n.nextSibling()||n.firstSibling(),s=!0;break;case"Home":i=n.firstSibling(),s=!0;break;case"End":i=n.lastSibling(),s=!1}i&&this.filterRegexInternal&&(i=i.findCurrentOrNextVisible(s)),i&&(i.element.focus(),e.consume(!0))}sectionsContainerFocusChanged(){this.resetFocus()}resetFocus(){if(this.noMatchesElement.classList.contains("hidden")&&this.sectionBlocks[0]?.sections[0]){const e=this.sectionBlocks[0].sections[0].findCurrentOrNextVisible(!0);e&&(e.element.tabIndex=this.sectionsContainer.hasFocus()?-1:0)}}onAddButtonLongClick(e){const t=this.cssModel();if(!t)return;const n=t.styleSheetHeaders().filter((function(e){return!e.isViaInspector()&&!e.isInline&&Boolean(e.resourceURL())})),s=[];for(let e=0;e<n.length;++e){const t=n[e],i=this.createNewRuleInStyleSheet.bind(this,t);s.push({text:f.ResourceUtils.displayNameForURL(t.resourceURL()),handler:i})}s.sort((function(e,t){return a.StringUtilities.naturalOrderComparator(e.text,t.text)}));const o=new i.ContextMenu.ContextMenu(e);for(let e=0;e<s.length;++e){const t=s[e];o.defaultSection().appendItem(t.text,t.handler,{jslogContext:"style-sheet-header"})}o.footerSection().appendItem("inspector-stylesheet",this.createNewRuleInViaInspectorStyleSheet.bind(this),{jslogContext:"inspector-stylesheet"}),o.show()}onFilterChanged(e){const t=e.data?new RegExp(a.StringUtilities.escapeForRegExp(e.data),"i"):null;this.lastFilterChange=Date.now(),this.filterRegexInternal=t,this.updateFilter(),this.resetFocus(),setTimeout((()=>{if(this.lastFilterChange){Date.now()-this.lastFilterChange<500||i.ARIAUtils.alert(this.visibleSections?On(An.visibleSelectors,{n:this.visibleSections}):On(An.noMatchingSelectorOrStyle))}}),500)}refreshUpdate(e,t){if(t)for(const e of this.allSections())e instanceof fn&&e.isBlank||e.updateVarFunctions(t);if(this.isEditingStyle)return;const n=this.node();if(n){for(const t of this.allSections())t instanceof fn&&t.isBlank||t.update(t===e);this.filterRegexInternal&&this.updateFilter(),this.swatchPopoverHelper().reposition(),this.nodeStylesUpdatedForTest(n,!1)}}async doUpdate(){this.#X?.abort(),this.#X=new AbortController,await this.#J(this.#X.signal);const e=this?.contentElement?.enclosingNodeOrSelfWithClass("style-panes-wrapper")?.parentElement?.querySelectorAll(".style-panes-wrapper");if(e.length>0)for(const t of e)this.scrollerElement=t,this.scrollerElement.addEventListener("scroll",this.boundOnScroll,!1)}async#J(e){this.initialUpdateCompleted||window.setTimeout((()=>{e.aborted||this.initialUpdateCompleted||this.sectionsContainer.createChild("span","spinner")}),200);const t=await this.fetchMatchedCascade();if(e.aborted)return;this.matchedStyles=t;const n=this.node()?.id,i=this.matchedStyles?.getParentLayoutNodeId(),[s,o]=await Promise.all([this.fetchComputedStylesFor(n),this.fetchComputedStylesFor(i)]);e.aborted||(await this.innerRebuildUpdate(e,this.matchedStyles,s,o),e.aborted||(this.initialUpdateCompleted||(this.initialUpdateCompleted=!0,this.appendToolbarItem(this.createRenderingShortcuts()),this.dispatchEventToListeners("InitialUpdateCompleted")),this.nodeStylesUpdatedForTest(this.node(),!0),this.dispatchEventToListeners("StylesUpdateCompleted",{hasMatchedStyles:this.hasMatchedStyles})))}#Z(e,t){const n=e.getRegisteredProperty(t);return n?{registration:n,goToDefinition:()=>this.jumpToSection(t,Rn)}:void 0}getVariableParserError(e,t){const n=this.#Z(e,t);return n?new p.CSSVariableValueView.CSSVariableParserError(n):null}getVariablePopoverContents(e,t,n){return new p.CSSVariableValueView.CSSVariableValueView({variableName:t,value:n??void 0,details:this.#Z(e,t)})}async fetchComputedStylesFor(e){const t=this.node();return null===t||void 0===e?null:await t.domModel().cssModel().getComputedStyle(e)}onResize(){this.resizeThrottler.schedule(this.innerResize.bind(this))}innerResize(){const e=this.contentElement.getBoundingClientRect().width+"px";return this.allSections().forEach((t=>{t.propertiesTreeOutline.element.style.width=e})),this.hideAllPopovers(),Promise.resolve()}resetCache(){const e=this.cssModel();e&&e.discardCachedMatchedCascade()}fetchMatchedCascade(){const e=this.node();if(!e||!this.cssModel())return Promise.resolve(null);const t=this.cssModel();return t?t.cachedMatchedCascadeForNode(e).then(function(e){return e&&e.node()===this.node()?e:null}.bind(this)):Promise.resolve(null)}setEditingStyle(e){this.isEditingStyle!==e&&(this.contentElement.classList.toggle("is-editing-style",e),this.isEditingStyle=e,this.setActiveProperty(null))}setActiveProperty(e){if(this.isActivePropertyHighlighted&&n.OverlayModel.OverlayModel.hideDOMNodeHighlight(),this.isActivePropertyHighlighted=!1,!this.node())return;if(!e||e.overloaded()||e.inherited())return;const t=e.property.ownerStyle.parentRule,i=t instanceof n.CSSRule.CSSStyleRule?t.selectorText():void 0;for(const{properties:t,mode:n}of kn){if(!t.includes(e.name))continue;const s=this.node();if(s){s.domModel().overlayModel().highlightInOverlay({node:this.node(),selectorList:i},n),this.isActivePropertyHighlighted=!0;break}}}onCSSModelChanged(e){const t=e?.data&&"edit"in e.data?e.data.edit:null;if(t){for(const e of this.allSections())e.styleSheetEdited(t);this.#ee()}else this.#te()}onComputedStyleChanged(){t.Runtime.hostConfig.devToolsAnimationStylesInStylesTab?.enabled&&this.computedStyleUpdateThrottler.schedule((async()=>{await this.#ne(),this.handledComputedStyleChangedForTest()}))}handledComputedStyleChangedForTest(){}#te(){this.userOperation||this.isEditingStyle?this.#ee():(this.resetCache(),this.update())}#ie(){this.scheduleResetUpdateIfNotEditingCalledForTest(),this.resetUpdateThrottler.schedule((async()=>{this.#te()}))}scheduleResetUpdateIfNotEditingCalledForTest(){}async#ne(){if(!this.matchedStyles)return;const e=this.node()?.id;if(!e)return;const t=await(this.cssModel()?.getAnimatedStylesForNode(e));if(!t)return;const i=(e,t)=>{if(t){if(e?.allProperties().length!==t.cssProperties.length)return void this.#ie();e.allProperties().forEach(((e,n)=>{const i=t.cssProperties[n];i&&e.setLocalValue(i.value)}))}else if(e)return void this.#ie()};i(this.matchedStyles.transitionsStyle()??null,t.transitionsStyle??null);const s=this.matchedStyles.animationStyles()??[],o=t.animationStyles??[];if(s.length!==o.length)return void this.#ie();for(let e=0;e<s.length;e++){i(s[e]??null,o[e].style)}const r=this.matchedStyles.inheritedStyles()??[],a=r.filter((e=>e.type===n.CSSStyleDeclaration.Type.Transition)),l=t.inherited?.map((e=>e.transitionsStyle)).filter((e=>e?.cssProperties.some((e=>n.CSSMetadata.cssMetadata().isPropertyInherited(e.name)))))??[];if(a.length!==l.length)return void this.#ie();for(let e=0;e<a.length;e++){i(a[e],l[e]??null)}const d=r.filter((e=>e.type===n.CSSStyleDeclaration.Type.Animation)),c=t.inherited?.flatMap((e=>e.animationStyles)).filter((e=>e?.style.cssProperties.some((e=>n.CSSMetadata.cssMetadata().isPropertyInherited(e.name)))))??[];if(d.length===c.length)for(let e=0;e<d.length;e++){const t=d[e],n=c[e]?.style;i(t,n??null)}else this.#ie()}async#ee(){this.#Q?.abort(),this.#X=new AbortController;const e=this.#X.signal,t=await this.fetchMatchedCascade(),n=this.node()?.id,i=t?.getParentLayoutNodeId(),[s,o]=await Promise.all([this.fetchComputedStylesFor(n),this.fetchComputedStylesFor(i)]);if(!e.aborted)for(const e of this.allSections())e.setComputedStyles(s),e.setParentsComputedStyles(o),e.updateAuthoringHint()}focusedSectionIndex(){let e=0;for(const t of this.sectionBlocks)for(const n of t.sections){if(n.element.hasFocus())return e;e++}return-1}continueEditingElement(e,t){const n=this.allSections()[e];if(n){const e=n.closestPropertyForEditing(t);if(!e)return void n.element.focus();e.startEditingName()}}async innerRebuildUpdate(e,t,n,i){if(this.needsForceUpdate)this.needsForceUpdate=!1;else if(this.isEditingStyle||this.userOperation)return;const s=this.focusedSectionIndex();this.linkifier.reset();const r=this.sectionBlocks.map((e=>e.sections)).flat();this.sectionBlocks=[];const a=this.node();if(this.hasMatchedStyles=null!==t&&null!==a,!this.hasMatchedStyles)return this.sectionsContainer.removeChildren(),void this.noMatchesElement.classList.remove("hidden");const l=await this.rebuildSectionsForMatchedStyleRules(t,n,i);if(e.aborted)return;this.sectionBlocks=l;const d=this.sectionBlocks.map((e=>e.sections)).flat(),c=Xt.instance(),h=c.getSection();if(h){c.unbindContext();for(const[e,t]of r.entries())h===t&&e<d.length&&c.bindContext(this,d[e])}this.sectionsContainer.removeChildren();const p=document.createDocumentFragment();let u=0,m=null;for(const e of this.sectionBlocks){const t=e.titleElement();t&&p.appendChild(t);for(const t of e.sections)p.appendChild(t.element),u===s&&(m=t.element),u++}this.sectionsContainer.appendChild(p),m&&m.focus(),s>=u&&this.sectionBlocks[0].sections[0].element.focus(),this.sectionsContainerFocusChanged(),this.filterRegexInternal?this.updateFilter():this.noMatchesElement.classList.toggle("hidden",this.sectionBlocks.length>0),this.lastRevealedProperty&&(this.decorator.highlightProperty(this.lastRevealedProperty),this.lastRevealedProperty=null),this.swatchPopoverHelper().reposition(),o.userMetrics.panelLoaded("elements","DevTools.Launch.Elements"),this.dispatchEventToListeners("StylesUpdateCompleted",{hasMatchedStyles:!1})}nodeStylesUpdatedForTest(e,t){}setMatchedStylesForTest(e){this.matchedStyles=e}rebuildSectionsForMatchedStyleRulesForTest(e,t,n){return this.rebuildSectionsForMatchedStyleRules(e,t,n)}async rebuildSectionsForMatchedStyleRules(e,t,i){this.idleCallbackManager&&this.idleCallbackManager.discard(),this.idleCallbackManager=new Bn;const s=[new _n(null)];let o=0,r=null,a=null,l=!1;const d=e=>{const t=e.parentRule;if(t instanceof n.CSSRule.CSSStyleRule){const e=t.layers;if((e.length||a)&&a!==e){const n=_n.createLayerBlock(t);s.push(n),l=!0,a=e}}};Ne.instance().item().setVisible(!1);for(const a of e.nodeStyles()){const l=e.isInherited(a)?e.nodeForStyle(a):null;if(l&&l!==r){r=l;const e=await _n.createInheritedNodeBlock(r);s.push(e)}d(a);const c=s[s.length-1],h=a.type===n.CSSStyleDeclaration.Type.Transition||a.type===n.CSSStyleDeclaration.Type.Animation;c&&(!h||a.allProperties().length>0)&&this.idleCallbackManager.schedule((()=>{const n=new yn(this,e,a,o,t,i);o++,c.sections.push(n)}))}const c=Array.from(e.customHighlightPseudoNames()).map((t=>({highlightName:t,pseudoType:"highlight",pseudoStyles:e.customHighlightPseudoStyles(t)}))),h=[...e.pseudoTypes()].map((t=>({highlightName:null,pseudoType:t,pseudoStyles:e.pseudoStyles(t)}))),p=c.concat(h).sort(((e,t)=>"before"===e.pseudoType&&"before"!==t.pseudoType?-1:"before"!==e.pseudoType&&"before"===t.pseudoType?1:e.pseudoType<t.pseudoType?-1:e.pseudoType>t.pseudoType?1:0));for(const n of p){r=null;for(let l=0;l<n.pseudoStyles.length;++l){const c=n.pseudoStyles[l],h=e.isInherited(c)?e.nodeForStyle(c):null;if(0===l||h!==r)if(a=null,h){const e=await _n.createInheritedPseudoTypeBlock(n.pseudoType,n.highlightName,h);s.push(e)}else{const e=_n.createPseudoTypeBlock(n.pseudoType,n.highlightName);s.push(e)}r=h,d(c);const p=s[s.length-1];this.idleCallbackManager.schedule((()=>{const n=new wn(this,e,c,o,t,i);o++,p.sections.push(n)}))}}for(const t of e.keyframes()){const n=_n.createKeyframesBlock(t.name().text);for(const i of t.keyframes())this.idleCallbackManager.schedule((()=>{n.sections.push(new bn(this,e,i.style,o)),o++}));s.push(n)}const u=e.fontPaletteValuesRule();if(u){const t=_n.createFontPaletteValuesRuleBlock(u.name().text);this.idleCallbackManager.schedule((()=>{t.sections.push(new Cn(this,e,u.style,o)),o++})),s.push(t)}for(const t of e.positionTryRules()){const n=_n.createPositionTryBlock(t.name().text);this.idleCallbackManager.schedule((()=>{n.sections.push(new vn(this,e,t.style,o,t.active())),o++})),s.push(n)}if(e.registeredProperties().length>0){const t=e.registeredProperties().length<=5,n=_n.createRegisteredPropertiesBlock(t);for(const i of e.registeredProperties())this.idleCallbackManager.schedule((()=>{n.sections.push(new Sn(this,e,i.style(),o,i.propertyName(),t)),o++}));s.push(n)}if(e.functionRules().length>0){const t=e.functionRules().length<=5,n=_n.createFunctionBlock(t);for(const i of e.functionRules())this.idleCallbackManager.schedule((()=>{n.sections.push(new En(this,e,i.style,i.children(),o,i.functionName().text,i.parameters(),t)),o++}));s.push(n)}return l?Ne.instance().item().setVisible(!0):Me.instance().isShowing()&&Ls.instance().showToolbarPane(null,Ne.instance().item()),await this.idleCallbackManager.awaitDone(),s}async createNewRuleInViaInspectorStyleSheet(){const e=this.cssModel(),t=this.node();if(!e||!t)return;this.setUserOperation(!0);const n=await e.requestViaInspectorStylesheet(t.frameId());this.setUserOperation(!1),await this.createNewRuleInStyleSheet(n)}async createNewRuleInStyleSheet(e){if(!e)return;const t=((await e.requestContent()).content||"").split("\n"),n=v.TextRange.TextRange.createFromLocation(t.length-1,t[t.length-1].length);this.sectionBlocks&&this.sectionBlocks.length>0&&this.addBlankSection(this.sectionBlocks[0].sections[0],e.id,n)}addBlankSection(e,t,n){const i=this.node(),s=new fn(this,e.matchedStyles,i?i.simpleSelector():"",t,n,e.style(),0);this.sectionsContainer.insertBefore(s.element,e.element.nextSibling);for(const t of this.sectionBlocks){const n=t.sections.indexOf(e);-1!==n&&(t.sections.splice(n+1,0,s),s.startEditingSelector())}let o=0;for(const e of this.sectionBlocks)for(const t of e.sections)t.setSectionIdx(o),o++}removeSection(e){for(const t of this.sectionBlocks){const n=t.sections.indexOf(e);-1!==n&&(t.sections.splice(n,1),e.element.remove())}}filterRegex(){return this.filterRegexInternal}updateFilter(){let e=!1,t=0;for(const n of this.sectionBlocks)t+=n.updateFilter(),e=Boolean(t)||e;this.noMatchesElement.classList.toggle("hidden",Boolean(e)),this.visibleSections=t}wasShown(){i.Context.Context.instance().setFlavor(Fn,this),super.wasShown()}willHide(){this.hideAllPopovers(),super.willHide(),i.Context.Context.instance().setFlavor(Fn,null)}hideAllPopovers(){this.swatchPopoverHelperInternal.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(const t of this.sectionBlocks)e=e.concat(t.sections);return e}async getFormattedChanges(){let e="";for(const[t,{uiSourceCode:n}]of this.#Y){const i=await b.WorkspaceDiff.workspaceDiff().requestDiff(n);if(!i||i?.diff.length<2)continue;const s=await w.formatCSSChangesFromDiff(i.diff);s.length>0&&(e+=`/* ${jn(t)} */\n\n${s}\n\n`)}return e}clipboardCopy(e){o.userMetrics.actionTaken(o.UserMetrics.Action.StyleRuleCopied)}createStylesSidebarToolbar(){const e=this.contentElement.createChild("div","styles-sidebar-pane-toolbar-container");e.role="toolbar";const t=e.createChild("div","hbox styles-sidebar-pane-toolbar").createChild("devtools-toolbar","styles-pane-toolbar");t.role="presentation";const n=new i.Toolbar.ToolbarFilter(void 0,1,1,void 0,void 0,!1);n.addEventListener("TextChanged",this.onFilterChanged,this),t.appendToolbarItem(n),t.appendItemsAtLocation("styles-sidebarpane-toolbar"),this.toolbar=t;return e.createChild("div","styles-sidebar-toolbar-pane-container").createChild("div","styles-sidebar-toolbar-pane")}showToolbarPane(e,t){this.pendingWidgetToggle&&this.pendingWidgetToggle.setToggled(!1),this.pendingWidgetToggle=t,this.animatedToolbarPane?this.pendingWidget=e:this.startToolbarPaneAnimation(e),e&&t&&t.setToggled(!0)}appendToolbarItem(e){this.toolbar&&this.toolbar.appendToolbarItem(e)}startToolbarPaneAnimation(e){if(e===this.currentToolbarPane)return;if(e&&this.currentToolbarPane)return this.currentToolbarPane.detach(),e.show(this.toolbarPaneElement),this.currentToolbarPane=e,void this.currentToolbarPane.focus();this.animatedToolbarPane=e,this.currentToolbarPane?this.toolbarPaneElement.style.animationName="styles-element-state-pane-slideout":e&&(this.toolbarPaneElement.style.animationName="styles-element-state-pane-slidein"),e&&e.show(this.toolbarPaneElement);const t=function(){this.toolbarPaneElement.style.removeProperty("animation-name"),this.toolbarPaneElement.removeEventListener("animationend",t,!1),this.currentToolbarPane&&this.currentToolbarPane.detach();this.currentToolbarPane=this.animatedToolbarPane,this.currentToolbarPane&&this.currentToolbarPane.focus();this.animatedToolbarPane=null,this.pendingWidget&&(this.startToolbarPaneAnimation(this.pendingWidget),this.pendingWidget=null)}.bind(this);this.toolbarPaneElement.addEventListener("animationend",t,!1)}createRenderingShortcuts(){const t=e.Settings.Settings.instance().moduleSetting("emulated-css-media-feature-prefers-color-scheme"),n=e.Settings.Settings.instance().moduleSetting("emulate-auto-dark-mode"),o=(e,t)=>`${e?"✓ ":""}${t}`,r=new i.Toolbar.ToolbarToggle(On(An.toggleRenderingEmulations),"brush","brush-filled",void 0,!1);return r.element.setAttribute("jslog",`${s.dropDown("rendering-emulations").track({click:!0})}`),r.element.addEventListener("click",(e=>{const s=r.element.getBoundingClientRect(),a=new i.ContextMenu.ContextMenu(e,{x:s.left,y:s.bottom}),l=t.get(),d="light"===l,c="dark"===l,h=n.get(),p=o(d,"prefers-color-scheme: light"),u=o(c,"prefers-color-scheme: dark"),m=o(h,On(An.automaticDarkMode));a.defaultSection().appendItem(p,(()=>{n.set(!1),t.set(d?"":"light"),r.setToggled(Boolean(t.get()))}),{jslogContext:"prefer-light-color-scheme"}),a.defaultSection().appendItem(u,(()=>{n.set(!1),t.set(c?"":"dark"),r.setToggled(Boolean(t.get()))}),{jslogContext:"prefer-dark-color-scheme"}),a.defaultSection().appendItem(m,(()=>{n.set(!h),r.setToggled(Boolean(t.get()))}),{jslogContext:"emulate-auto-dark-mode"}),a.show(),e.stopPropagation()}),{capture:!0}),r}}const Un=23;class _n{titleElementInternal;sections;#se=!1;#oe;constructor(e,t,n){this.titleElementInternal=e,this.sections=[],this.#se=n??!1,t&&e instanceof HTMLElement&&(this.#oe=x.Icon.create(this.#se?"triangle-down":"triangle-right","section-block-expand-icon"),e.classList.toggle("empty-section",!this.#se),i.ARIAUtils.setExpanded(e,this.#se),e.appendChild(this.#oe),e.tabIndex=-1,e.addEventListener("click",(()=>this.expand(!this.#se)),!1))}expand(e){this.titleElementInternal&&this.#oe&&(this.titleElementInternal.classList.toggle("empty-section",!e),this.#oe.name=e?"triangle-down":"triangle-right",i.ARIAUtils.setExpanded(this.titleElementInternal,e),this.#se=e,this.sections.forEach((t=>t.element.classList.toggle("hidden",!e))))}static createPseudoTypeBlock(e,t){const n=document.createElement("div");n.className="sidebar-separator",n.setAttribute("jslog",`${s.sectionHeader("pseudotype")}`);const i=`${e}${t?`(${t})`:""}`;return n.textContent=On(An.pseudoSElement,{PH1:i}),new _n(n)}static async createInheritedPseudoTypeBlock(t,n,o){const r=document.createElement("div");r.className="sidebar-separator",r.setAttribute("jslog",`${s.sectionHeader("inherited-pseudotype")}`);const a=`${t}${n?`(${n})`:""}`;i.UIUtils.createTextChild(r,On(An.inheritedFromSPseudoOf,{PH1:a}));const l=await e.Linkifier.Linkifier.linkify(o,{preventKeyboardFocus:!0,tooltip:void 0});return r.appendChild(l),new _n(r)}static createRegisteredPropertiesBlock(e){const t=document.createElement("div"),n=new _n(t,!0,e);return t.className="sidebar-separator",t.appendChild(document.createTextNode(Rn)),n}static createFunctionBlock(e){const t=document.createElement("div"),n=new _n(t,!0,e);return t.className="sidebar-separator",t.appendChild(document.createTextNode(Dn)),n}static createKeyframesBlock(e){const t=document.createElement("div");return t.className="sidebar-separator",t.setAttribute("jslog",`${s.sectionHeader("keyframes")}`),t.textContent=`@keyframes ${e}`,new _n(t)}static createFontPaletteValuesRuleBlock(e){const t=document.createElement("div");return t.className="sidebar-separator",t.textContent=`@font-palette-values ${e}`,new _n(t)}static createPositionTryBlock(e){const t=document.createElement("div");return t.className="sidebar-separator",t.setAttribute("jslog",`${s.sectionHeader("position-try")}`),t.textContent=`@position-try ${e}`,new _n(t)}static async createInheritedNodeBlock(t){const n=document.createElement("div");n.className="sidebar-separator",n.setAttribute("jslog",`${s.sectionHeader("inherited")}`),i.UIUtils.createTextChild(n,On(An.inheritedFroms));const o=await e.Linkifier.Linkifier.linkify(t,{preventKeyboardFocus:!0,tooltip:void 0});return n.appendChild(o),new _n(n)}static createLayerBlock(e){const t=document.createElement("div");t.className="sidebar-separator layer-separator",t.setAttribute("jslog",`${s.sectionHeader("layer")}`),i.UIUtils.createTextChild(t.createChild("div"),On(An.layer));const o=e.layers;if(!o.length&&"user-agent"===e.origin){const n="user-agent"===e.origin?" user agent stylesheet":" implicit outer layer";return i.UIUtils.createTextChild(t.createChild("div"),n),new _n(t)}const r=t.createChild("button");r.className="link",r.title=On(An.clickToRevealLayer);const a=o.map((e=>n.CSSModel.CSSModel.readableLayerName(e.text))).join(".");return r.textContent=a,r.onclick=()=>Me.instance().revealLayer(a),new _n(t)}updateFilter(){let e=!1,t=0;for(const n of this.sections)t+=n.updateFilter()?1:0,e=n.updateFilter()||e;return this.titleElementInternal&&this.titleElementInternal.classList.toggle("hidden",!e),t}titleElement(){return this.titleElementInternal}}class Bn{discarded;promises;queue;constructor(){this.discarded=!1,this.promises=[],this.queue=[]}discard(){this.discarded=!0}schedule(e){if(this.discarded)return;const t=new Promise(((t,n)=>{this.queue.push({fn:e,resolve:t,reject:n})}));this.promises.push(t),this.scheduleIdleCallback(100)}scheduleIdleCallback(e){window.requestIdleCallback((()=>{const e=this.queue.shift();l(e);try{this.discarded||e.fn(),e.resolve()}catch(t){e.reject(t)}}),{timeout:e})}awaitDone(){return Promise.all(this.promises)}}function Vn(e){return`'${e.replaceAll("'","\\'")}'`}class Hn extends i.TextPrompt.TextPrompt{isColorAware;cssCompletions;selectedNodeComputedStyles;parentNodeComputedStyles;treeElement;isEditingName;cssVariables;constructor(e,t,s=[]){super(),this.initialize(this.buildPropertyCompletions.bind(this),i.UIUtils.StyleValueDelimiters);const r=n.CSSMetadata.cssMetadata();this.isColorAware=n.CSSMetadata.cssMetadata().isColorAwareProperty(e.property.name),this.cssCompletions=[];const l=e.node();if(t)this.cssCompletions=r.allProperties(),l&&!l.isSVGNode()&&(this.cssCompletions=this.cssCompletions.filter((e=>!r.isSVGProperty(e))));else if(this.cssCompletions=[...s,...r.getPropertyValues(e.property.name)],l&&r.isFontFamilyProperty(e.property.name)){const e=l.domModel().cssModel().fontFaces().map((e=>Vn(e.getFontFamily())));this.cssCompletions.unshift(...e)}if(this.selectedNodeComputedStyles=null,this.parentNodeComputedStyles=null,this.treeElement=e,this.isEditingName=t,this.cssVariables=e.matchedStyles().availableCSSVariables(e.property.ownerStyle),this.cssVariables.length<1e3?this.cssVariables.sort(a.StringUtilities.naturalOrderComparator):this.cssVariables.sort(),!t&&(this.disableDefaultSuggestionForEmptyInput(),e?.valueElement)){const t=e.valueElement.textContent,n=o.Platform.isMac()?"Cmd":"Ctrl",i=o.Platform.isMac()?"Option":"Alt";null!==t&&(t.match(/#[\da-f]{3,6}$/i)?this.setTitle(On(An.incrementdecrementWithMousewheelOne,{PH1:n,PH2:i})):t.match(/\d+/)&&this.setTitle(On(An.incrementdecrementWithMousewheelHundred,{PH1:n,PH2:i})))}}onKeyDown(e){const t=e;switch(t.key){case"ArrowUp":case"ArrowDown":case"PageUp":case"PageDown":if(!this.isSuggestBoxVisible()&&this.handleNameOrValueUpDown(t))return void t.preventDefault();break;case"Enter":if(t.shiftKey)return;return this.tabKeyPressed(),void t.preventDefault();case" ":if(this.isEditingName)return this.tabKeyPressed(),void t.preventDefault()}super.onKeyDown(t)}onMouseWheel(e){this.handleNameOrValueUpDown(e)?e.consume(!0):super.onMouseWheel(e)}tabKeyPressed(){return this.acceptAutoComplete(),!1}handleNameOrValueUpDown(e){return!(this.isEditingName||!this.treeElement.valueElement||!i.UIUtils.handleElementValueModifications(e,this.treeElement.valueElement,function(e,t){this.treeElement.nameElement&&this.treeElement.valueElement&&this.treeElement.applyStyleText(this.treeElement.nameElement.textContent+": "+this.treeElement.valueElement.textContent,!1)}.bind(this),this.isValueSuggestion.bind(this),function(e,t,i){return 0===t||i.length||!n.CSSMetadata.cssMetadata().isLengthProperty(this.treeElement.property.name)||this.treeElement.property.value.toLowerCase().startsWith("calc(")||(i="px"),e+t+i}.bind(this)))}isValueSuggestion(e){return!!e&&(e=e.toLowerCase(),-1!==this.cssCompletions.indexOf(e)||e.startsWith("--"))}async buildPropertyCompletions(t,i,s){const o=i.toLowerCase(),r=!this.isEditingName&&t.trim().endsWith("var(");if(!i&&!s&&!r&&(this.isEditingName||t))return await Promise.resolve([]);const a=[],l=[];r||(this.cssCompletions.forEach((e=>m.call(this,e,!1))),this.isEditingName&&n.CSSMetadata.cssMetadata().aliasesFor().forEach(((e,t)=>{if(0!==t.toLowerCase().indexOf(o))return;const i={text:t,priority:n.CSSMetadata.cssMetadata().propertyUsageWeight(t),isCSSVariableColor:!1},s={text:e,priority:n.CSSMetadata.cssMetadata().propertyUsageWeight(e),subtitle:`= ${t}`,isCSSVariableColor:!1};a.push(i,s)})));const d=this.treeElement.node();if(this.isEditingName&&d){n.CSSMetadata.cssMetadata().nameValuePresets(d.isSVGNode()).forEach((e=>m.call(this,e,!1,!0)))}(this.isEditingName||r)&&this.cssVariables.forEach((e=>m.call(this,e,!0)));const c=a.concat(l);!this.isEditingName&&!c.length&&i.length>1&&"!important".startsWith(o)&&c.push({text:"!important",title:void 0,subtitle:void 0,priority:void 0,isSecondary:void 0,subtitleRenderer:void 0,selectionRange:void 0,hideGhostText:void 0,iconElement:void 0});const h=i.replace("-","");if(h&&h===h.toUpperCase())for(let e=0;e<c.length;++e)c[e].text.startsWith("--")||(c[e].text=c[e].text.toUpperCase());for(const e of c){if(r){e.title=e.text,e.text+=")";continue}const t=n.CSSMetadata.cssMetadata().getValuePreset(this.treeElement.name,e.text);!this.isEditingName&&t&&(e.title=e.text,e.text=t.text,e.selectionRange={startColumn:t.startColumn,endColumn:t.endColumn})}const u=async()=>{if(!d||this.selectedNodeComputedStyles)return;this.selectedNodeComputedStyles=await d.domModel().cssModel().getComputedStyle(d.id);const e=d.parentNode;e&&(this.parentNodeComputedStyles=await e.domModel().cssModel().getComputedStyle(e.id))};for(const e of c){await u();const t=p.CSSPropertyIconResolver.findIcon(this.isEditingName?e.text:`${this.treeElement.property.name}: ${e.text}`,this.selectedNodeComputedStyles,this.parentNodeComputedStyles);if(!t)continue;const n=new x.Icon.Icon,i="12.5px",s="12.5px";n.data={iconName:t.iconName,width:i,height:s,color:"var(--icon-default)"},n.style.transform=`rotate(${t.rotate}deg) scale(${1.1*t.scaleX}, ${1.1*t.scaleY})`,n.style.maxHeight=s,n.style.maxWidth=i,e.iconElement=n}return this.isColorAware&&!this.isEditingName&&c.sort(((e,t)=>e.isCSSVariableColor&&t.isCSSVariableColor?0:e.isCSSVariableColor?-1:1)),await Promise.resolve(c);function m(t,i,s){const r=t.toLowerCase().indexOf(o),d={text:t,title:void 0,subtitle:void 0,priority:void 0,isSecondary:void 0,subtitleRenderer:void 0,selectionRange:void 0,hideGhostText:void 0,iconElement:void 0,isCSSVariableColor:!1};if(i){const n=this.treeElement.matchedStyles().computeCSSVariable(this.treeElement.property.ownerStyle,t);if(n){const t=e.Color.parse(n.value);t?(d.subtitleRenderer=g.bind(null,t),d.isCSSVariableColor=!0):d.subtitleRenderer=y.bind(null,n.value)}}s&&(d.hideGhostText=!0),0===r?(d.priority=this.isEditingName?n.CSSMetadata.cssMetadata().propertyUsageWeight(t):1,a.push(d)):r>-1&&l.push(d)}function g(e){const t=new E.ColorSwatch.ColorSwatch;return t.renderColor(e),t.style.pointerEvents="none",t}function y(e){const t=document.createElement("span");return t.className="suggestion-subtitle",t.textContent=`${e}`,t.style.maxWidth="100px",t.title=`${e}`,t}}}function Wn(e){return e.replace(/(?<!\\)\\(?:([a-fA-F0-9]{1,6})|(.))[\n\t\x20]?/gs,((e,t,n)=>{if(n)return n;const i=parseInt(t,16);return 55296<=i&&i<=57343||0===i||i>1114111?"�":String.fromCodePoint(i)}))}function jn(e){const t=new URL(e);return t.search?`${t.origin}${t.pathname}${t.search.replaceAll("*/","*%2F")}${t.hash}`:t.toString()}let $n;var zn=Object.freeze({__proto__:null,ActionDelegate:class{handleAction(e,t){return"elements.new-style-rule"===t&&(o.userMetrics.actionTaken(o.UserMetrics.Action.NewStyleRuleAdded),Ls.instance().stylesWidget.createNewRuleInViaInspectorStyleSheet(),!0)}},ButtonProvider:class e{button;constructor(){function e(){let e=i.Context.Context.instance().flavor(n.DOMModel.DOMNode);e=e?e.enclosingElementOrSelf():null,this.button.setEnabled(Boolean(e))}this.button=i.Toolbar.Toolbar.createActionButton("elements.new-style-rule"),this.button.setLongClickable(!0),new i.UIUtils.LongClickController(this.button.element,this.longClicked.bind(this)),i.Context.Context.instance().addFlavorChangeListener(n.DOMModel.DOMNode,e.bind(this)),e.call(this)}static instance(t={forceNew:null}){const{forceNew:n}=t;return $n&&!n||($n=new e),$n}longClicked(e){Ls.instance().stylesWidget.onAddButtonLongClick(e)}item(){return this.button}},CSSPropertyPrompt:Hn,FUNCTION_SECTION_NAME:Dn,IdleCallbackManager:Bn,REGISTERED_PROPERTY_SECTION_NAME:Rn,SectionBlock:_n,StylesSidebarPane:Fn,escapeUrlAsCssComment:jn,quoteFamilyName:Vn,unescapeCssString:Wn});const Kn={cssPropertyName:"`CSS` property name: {PH1}",cssPropertyValue:"`CSS` property value: {PH1}"},Gn=r.i18n.registerUIStrings("panels/elements/PropertyRenderer.ts",Kn),qn=r.i18n.getLocalizedString.bind(void 0,Gn);function Yn(e,t){const i=[...e];return n.CSSPropertyParser.requiresSpace(e,t)&&i.push(document.createTextNode(" ")),i.push(...t),i}function Xn(e){return class{matchType=e;render(e,t){return[]}}}class Qn{static REGISTRY_NAME="css-value-tracing";#re=[];#ae=new Map;#le=new Map;#de;#ce;#he;constructor(){const e=CSS.highlights.get(Qn.REGISTRY_NAME);this.#de=e??new Highlight,e||CSS.highlights.set(Qn.REGISTRY_NAME,this.#de),this.#he=this.#pe.bind(this),this.#ce=this.#ue.bind(this)}addMatch(e,t){if(t.length>0){const n=this.#ae.get(e);n?n.push(t):this.#ae.set(e,[t])}for(const n of t){const t=this.#le.get(n);t?t.push(e):this.#le.set(n,[e]),n instanceof HTMLElement&&(n.onmouseenter=this.#ce,n.onmouseleave=this.#he,n.onfocus=this.#ce,n.onblur=this.#he,n.tabIndex=0)}}*#me(e){for(const t of e.composedPath()){const e=this.#le.get(t);if(e){for(const t of e)yield*this.#ae.get(t)??[];break}}}#ue(e){this.#de.clear(),this.#re.push([]);for(const t of this.#me(e)){const e=new Range,n=t[0],i=t[t.length-1];n.parentNode&&i.parentNode&&(e.setStartBefore(n),e.setEndAfter(i),this.#re[this.#re.length-1].push(e),this.#de.add(e))}}#pe(){this.#de.clear(),this.#re.pop(),this.#re.length>0&&this.#re[this.#re.length-1].forEach((e=>this.#de.add(e)))}}class Jn{#ge=0;#ye;#fe=null;#Se=0;#Ee=0;#Ce=!0;#s;#ve=new Map;constructor(e,t){this.#s=e,this.#ye=t?.hasMatches(n.CSSPropertyParserMatchers.VariableMatch,n.CSSPropertyParserMatchers.BaseVariableMatch)??!1}get highlighting(){return this.#s}renderingContext(e){return new Zn(e.ast,e.property,e.renderers,e.matchedResult,e.cssControls,e.options,this)}nextSubstitution(){return!!this.#ye&&(this.#ge++,this.#ye=!1,!0)}nextEvaluation(){if(this.#ye)throw new Error("Need to apply substitutions first");return!!this.#Ce&&(this.#Ee=0,this.#Ce=!1,this.#Se++,!0)}didApplyEvaluations(){return this.#Ee>0}#be(e){this.#fe&&this.#fe.#be(e),this.#Ce=e}evaluation(e){return e.map((()=>{const e=new Jn(this.#s);return e.#fe=this,e.#ge=this.#ge,e.#Se=this.#Se,e.#ye=this.#ye,e.#ve=this.#ve,e}))}#we(e){this.#fe&&this.#fe.#we(e),this.#Ee=Math.max(this.#Ee,e)}applyEvaluation(e){return 0===this.#Se||e.some((e=>e.#Ee>=this.#Se))?(this.#be(!0),!1):(this.#we(e.map((e=>e.#Ee)).reduce(((e,t)=>Math.max(e,t)),0)+1),!0)}#xe(){this.#fe&&this.#fe.#xe(),this.#ye=!0}substitution(){if(this.#ge<=0)return this.#xe(),null;const e=new Jn(this.#s);return e.#fe=this,e.#ge=this.#ge-1,e.#Se=this.#Se,e.#ye=!1,e.#ve=this.#ve,e}cachedParsedValue(e,t,n){const i=this.#ve.get(e);if(i?.matchedStyles===t&&i?.computedStyles===n)return i.parsedValue;const s=e.parseValue(t,n);return this.#ve.set(e,{matchedStyles:t,computedStyles:n,parsedValue:s}),s}}class Zn{ast;property;renderers;matchedResult;cssControls;options;tracing;constructor(e,t,n,i,s,o={},r){this.ast=e,this.property=t,this.renderers=n,this.matchedResult=i,this.cssControls=s,this.options=o,this.tracing=r}addControl(e,t){if(this.cssControls){const n=this.cssControls.get(e);n?n.push(t):this.cssControls.set(e,[t])}}}let ei=class e extends n.CSSPropertyParser.TreeWalker{#Te;#Me=[];#w;constructor(e,t,n,i,s,o,r){super(e),this.#Te=i,this.#w=new Zn(this.ast,t,n,this.#Te,s,o,r)}static render(e,t){if(!Array.isArray(e))return this.render([e],t);const i=new n.CSSPropertyParser.CSSControlMap;return{nodes:e.map((e=>this.walkExcludingSuccessors(t.ast.subtree(e),t.property,t.renderers,t.matchedResult,i,t.options,t.tracing))).map((e=>e.#Me)).reduce(Yn),cssControls:i}}static renderInto(e,t,i){const{nodes:s,cssControls:o}=this.render(e,t);return i.lastChild&&n.CSSPropertyParser.requiresSpace([i.lastChild],s)&&i.appendChild(document.createTextNode(" ")),s.map((e=>i.appendChild(e))),{nodes:s,cssControls:o}}renderedMatchForTest(e,t){}enter({node:e}){const t=this.#Te.getMatch(e),i=t&&this.#w.renderers.get(t.constructor);if(i||t instanceof n.CSSPropertyParserMatchers.TextMatch){const e=i?i.render(t,this.#w):t.render();return this.#w.tracing?.highlighting.addMatch(t,e),this.renderedMatchForTest(e,t),this.#Me=Yn(this.#Me,e),!1}return!0}static renderNameElement(e){const t=document.createElement("span");return t.setAttribute("jslog",`${s.key().track({change:!0,keydown:"ArrowLeft|ArrowUp|PageUp|Home|PageDown|ArrowRight|ArrowDown|End|Space|Tab|Enter|Escape"})}`),i.ARIAUtils.setLabel(t,qn(Kn.cssPropertyName,{PH1:e})),t.className="webkit-css-property",t.textContent=e,t.normalize(),t}static renderValueElement(e,t,n,o){const r=document.createElement("span");r.setAttribute("jslog",`${s.value().track({change:!0,keydown:"ArrowLeft|ArrowUp|PageUp|Home|PageDown|ArrowRight|ArrowDown|End|Space|Tab|Enter|Escape"})}`),i.ARIAUtils.setLabel(r,qn(Kn.cssPropertyValue,{PH1:e.value})),r.className="value";const{nodes:a,cssControls:l}=this.renderValueNodes(e,t,n,o);return a.forEach((e=>r.appendChild(e))),r.normalize(),{valueElement:r,cssControls:l}}static renderValueNodes(t,i,s,o){if(!i)return{nodes:[document.createTextNode(t.value)],cssControls:new Map};const r=new Map;for(const e of s)r.set(e.matchType,e);const a=new Zn(i.ast,t instanceof n.CSSProperty.CSSProperty?t:null,r,i,void 0,{},o);return e.render([i.ast.tree,...i.ast.trailingNodes],a)}};class ti extends(Xn(n.CSSPropertyParserMatchers.URLMatch)){rule;node;constructor(e,t){super(),this.rule=e,this.node=t}render(t){const n=Wn(t.url),s=document.createDocumentFragment();i.UIUtils.createTextChild(s,"url(");let o=null;this.rule&&this.rule.resourceURL()?o=e.ParsedURL.ParsedURL.completeURL(this.rule.resourceURL(),n):this.node&&(o=this.node.resolveURL(n));const r=oe.setImageUrl(C.Linkifier.Linkifier.linkifyURL(o||n,{text:n,preventClick:!1,bypassURLTrimming:!0,showColumnNumber:!1,inlineFrameIndex:0}),o||n);return s.appendChild(r),i.UIUtils.createTextChild(s,")"),[s]}}class ni extends(Xn(n.CSSPropertyParserMatchers.StringMatch)){render(e){const t=document.createElement("span");return t.innerText=e.text,i.Tooltip.Tooltip.install(t,Wn(e.text)),[t]}}class ii extends(Xn(n.CSSPropertyParserMatchers.BinOpMatch)){render(e,t){const[i,s,o]=n.CSSPropertyParser.ASTUtils.children(e.node).map((e=>{const n=document.createElement("span");return ei.renderInto(e,t,n),n}));return[i,document.createTextNode(" "),s,document.createTextNode(" "),o]}}var si=Object.freeze({__proto__:null,BinOpRenderer:ii,Highlighting:Qn,Renderer:ei,RenderingContext:Zn,StringRenderer:ni,TracingContext:Jn,URLRenderer:ti,rendererBase:Xn});const{html:oi}=u,ri={showAll:"Show all",group:"Group",noMatchingProperty:"No matching property",navigateToSelectorSource:"Navigate to selector source",navigateToStyle:"Navigate to style"},ai=r.i18n.registerUIStrings("panels/elements/ComputedStyleWidget.ts",ri),li=r.i18n.getLocalizedString.bind(void 0,ai),di=new Map;function ci(e,t){return n.CSSPropertyParser.matchDeclaration(e,t,[new n.CSSPropertyParserMatchers.ColorMatcher,new n.CSSPropertyParserMatchers.URLMatcher,new n.CSSPropertyParserMatchers.StringMatcher])}const hi=(e,t,n,i,s,o,r)=>{const{name:a,value:l}=function(e,t,n){const i=t+":"+n,s=di.get(i);if(s)return s;const o=ei.renderNameElement(t);o.slot="name";const r=ei.renderValueElement({name:t,value:n},ci(t,n),[new pi,new ti(null,e),new ni]).valueElement;return r.slot="value",di.set(i,{name:o,value:r}),{name:o,value:r}}(e,t,n);return oi`<devtools-computed-style-property
+        .traceable=${i}
+        .inherited=${s}
+        @oncontextmenu=${r}
+        @onnavigatetosource=${e=>{o&&ui(o,e)}}>
+          ${a}
+          ${l}
+      </devtools-computed-style-property>`};class pi extends(Xn(n.CSSPropertyParserMatchers.ColorMatch)){render(t,n){const i=e.Color.parse(t.text);if(!i)return[document.createTextNode(t.text)];const s=new E.ColorSwatch.ColorSwatch;s.setReadonly(!0),s.renderColor(i);const o=document.createElement("span");return o.textContent=t.text,s.append(o),s.addEventListener(E.ColorSwatch.ColorChangedEvent.eventName,(e=>{const{data:{color:t}}=e;o.textContent=t.getAuthoredText()??t.asString()})),n.addControl("color",s),[s]}matcher(){return new n.CSSPropertyParserMatchers.ColorMatcher}}const ui=(t,n)=>{n&&(e.Revealer.reveal(t),n.consume(!0))},mi=(e,t)=>{if(e.startsWith("--")!==t.startsWith("--"))return e.startsWith("--")?1:-1;if(e.startsWith("-webkit")!==t.startsWith("-webkit"))return e.startsWith("-webkit")?1:-1;const i=n.CSSMetadata.cssMetadata().canonicalPropertyName(e),s=n.CSSMetadata.cssMetadata().canonicalPropertyName(t);return a.StringUtilities.compare(i,s)};class gi extends i.ThrottledWidget.ThrottledWidget{computedStyleModel;showInheritedComputedStylePropertiesSetting;groupComputedStylesSetting;input;filterRegex;noMatchesElement;linkifier;imagePreviewPopover;#Ne=new h.TreeOutline.TreeOutline;#Ie;constructor(t){super(!0),this.registerRequiredCSS(se),this.contentElement.classList.add("styles-sidebar-computed-style-widget"),this.computedStyleModel=t,this.computedStyleModel.addEventListener("CSSModelChanged",this.update,this),this.computedStyleModel.addEventListener("ComputedStyleChanged",this.update,this),this.showInheritedComputedStylePropertiesSetting=e.Settings.Settings.instance().createSetting("show-inherited-computed-style-properties",!1),this.showInheritedComputedStylePropertiesSetting.addChangeListener(this.update.bind(this)),this.groupComputedStylesSetting=e.Settings.Settings.instance().createSetting("group-computed-styles",!1),this.groupComputedStylesSetting.addChangeListener((()=>{this.update()}));const n=this.contentElement.createChild("div","hbox styles-sidebar-pane-toolbar").createChild("devtools-toolbar","styles-pane-toolbar"),s=new i.Toolbar.ToolbarFilter(void 0,1,1,void 0,void 0,!1);s.addEventListener("TextChanged",this.onFilterChanged,this),n.appendToolbarItem(s),this.input=s,this.filterRegex=null,n.appendToolbarItem(new i.Toolbar.ToolbarSettingCheckbox(this.showInheritedComputedStylePropertiesSetting,void 0,li(ri.showAll))),n.appendToolbarItem(new i.Toolbar.ToolbarSettingCheckbox(this.groupComputedStylesSetting,void 0,li(ri.group))),this.noMatchesElement=this.contentElement.createChild("div","gray-info-message"),this.noMatchesElement.textContent=li(ri.noMatchingProperty),this.contentElement.appendChild(this.#Ne),this.linkifier=new C.Linkifier.Linkifier(yi),this.imagePreviewPopover=new oe(this.contentElement,(e=>{const t=e.composedPath()[0];return t instanceof Element?t:null}),(()=>this.computedStyleModel.node()));new he(this.computedStyleModel).show(this.contentElement)}onResize(){const e=this.contentElement.offsetWidth<260;this.#Ne.classList.toggle("computed-narrow",e)}wasShown(){i.Context.Context.instance().setFlavor(gi,this),super.wasShown()}willHide(){i.Context.Context.instance().setFlavor(gi,null)}async doUpdate(){const[e,t]=await Promise.all([this.computedStyleModel.fetchComputedStyle(),this.fetchMatchedCascade()]);if(!e||!t)return void this.noMatchesElement.classList.remove("hidden");this.groupComputedStylesSetting.get()?await this.rebuildGroupedList(e,t):await this.rebuildAlphabeticalList(e,t)}async fetchMatchedCascade(){const e=this.computedStyleModel.node();if(!e||!this.computedStyleModel.cssModel())return null;const t=this.computedStyleModel.cssModel();return t?await t.cachedMatchedCascadeForNode(e).then(function(e){return e&&e.node()===this.computedStyleModel.node()?e:null}.bind(this)):null}async rebuildAlphabeticalList(e,t){this.imagePreviewPopover.hide(),this.linkifier.reset();if(!this.computedStyleModel.cssModel())return;const i=[...e.computedStyle.keys()];i.sort(mi);const s=e.node,o=this.computePropertyTraces(t),r=this.computeNonInheritedProperties(t),a=this.showInheritedComputedStylePropertiesSetting.get(),l=[];for(const t of i){const i=e.computedStyle.get(t)||"",s=n.CSSMetadata.cssMetadata().canonicalPropertyName(t),d=!r.has(s);(a||!d||fi.has(t))&&(!a&&t.startsWith("--")||t!==s&&i===e.computedStyle.get(s)||l.push(this.buildTreeNode(o,t,i,d)))}const d=this.createTreeNodeRenderer(o,s,t);this.#Ie={tree:l,compact:!0,defaultRenderer:d},this.filterAlphabeticalList()}async rebuildGroupedList(e,t){this.imagePreviewPopover.hide(),this.linkifier.reset();const i=this.computedStyleModel.cssModel();if(!e||!t||!i)return void this.noMatchesElement.classList.remove("hidden");const s=e.node,o=this.computePropertyTraces(t),r=this.computeNonInheritedProperties(t),a=this.showInheritedComputedStylePropertiesSetting.get(),l=new Map,d=[];for(const[t,i]of e.computedStyle){const s=n.CSSMetadata.cssMetadata().canonicalPropertyName(t),o=!r.has(s);if(!a&&o&&!fi.has(t))continue;if(!a&&t.startsWith("--"))continue;if(t!==s&&i===e.computedStyle.get(s))continue;const d=fe(t);for(const e of d)l.has(e)||l.set(e,[]),l.get(e)?.push(t)}this.#Ne.removeChildren();for(const t of ue){const i=l.get(t);if(i&&i.length>0){const s=[];for(const t of i){const i=e.computedStyle.get(t)||"",a=n.CSSMetadata.cssMetadata().canonicalPropertyName(t),l=!r.has(a);s.push(this.buildTreeNode(o,t,i,l))}d.push({id:t,treeNodeData:{tag:"category",name:t},children:async()=>s})}}const c=this.createTreeNodeRenderer(o,s,t);return this.#Ie={tree:d,compact:!0,defaultRenderer:c},await this.filterGroupLists()}buildTraceNode(e){const 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 s=>{const o=s.treeNodeData;if("property"===o.tag){const n=e.get(o.propertyName),s=n?.find((e=>"Active"===i.propertyState(e)));return hi(t,o.propertyName,o.propertyValue,e.has(o.propertyName),o.inherited,s,(e=>{s&&this.handleContextMenuEvent(i,s,e)}))}if("traceElement"===o.tag){const e="Overloaded"===i.propertyState(o.property),s=((e,t,i,s,o)=>{const r=new p.ComputedStyleTrace.ComputedStyleTrace,{valueElement:a}=ei.renderValueElement(t,ci(t.name,t.value),[new pi,new ti(null,e),new ni]);a.slot="trace-value",r.appendChild(a);const l=t.ownerStyle.parentRule;let d;l&&(d=yn.createRuleOriginNode(s,o,l));let c="element.style";return l?c=l.selectorText():t.ownerStyle.type===n.CSSStyleDeclaration.Type.Animation?c=t.ownerStyle.animationName()?`${t.ownerStyle.animationName()} animation`:"animation style":t.ownerStyle.type===n.CSSStyleDeclaration.Type.Transition&&(c="transitions style"),r.data={selector:c,active:!i,onNavigateToSource:ui.bind(null,t),ruleOriginNode:d},r})(t,o.property,e,i,this.linkifier);return s.addEventListener("contextmenu",this.handleContextMenuEvent.bind(this,i,o.property)),oi`${s}`}return oi`<span style="cursor: text; color: var(--sys-color-on-surface-subtle);">${o.name}</span>`}}buildTreeNode(e,t,n,i){const s={tag:"property",propertyName:t,propertyValue:n,inherited:i},o=e.get(t);return o?{treeNodeData:s,jslogContext:t,id:t,children:async()=>o.map(this.buildTraceNode)}:{treeNodeData:s,jslogContext:t,id:t}}handleContextMenuEvent(t,n,s){const o=new i.ContextMenu.ContextMenu(s),r=n.ownerStyle.parentRule;if(r){const e=r.styleSheetId?t.cssModel().styleSheetHeaderForId(r.styleSheetId):null;e&&!e.isAnonymousInlineStyleSheet()&&o.defaultSection().appendItem(li(ri.navigateToSelectorSource),(()=>{yn.tryNavigateToRuleLocation(t,r)}),{jslogContext:"navigate-to-selector-source"})}o.defaultSection().appendItem(li(ri.navigateToStyle),(()=>e.Revealer.reveal(n)),{jslogContext:"navigate-to-style"}),o.show()}computePropertyTraces(e){const t=new Map;for(const n of e.nodeStyles()){const i=n.allProperties();for(const n of i)n.activeInStyle()&&e.propertyState(n)&&(t.has(n.name)||t.set(n.name,[]),t.get(n.name).push(n))}return t}computeNonInheritedProperties(e){const t=new Set;for(const i of e.nodeStyles())for(const s of i.allProperties())e.propertyState(s)&&t.add(n.CSSMetadata.cssMetadata().canonicalPropertyName(s.name));return t}onFilterChanged(e){this.filterComputedStyles(e.data?new RegExp(a.StringUtilities.escapeForRegExp(e.data),"i"):null)}async filterComputedStyles(e){return this.filterRegex=e,this.groupComputedStylesSetting.get()?await this.filterGroupLists():this.filterAlphabeticalList()}nodeFilter(e){const t=this.filterRegex,n=e.treeNodeData;if("property"===n.tag){return!t||t.test(n.propertyName)||t.test(n.propertyValue)}return!0}filterAlphabeticalList(){if(!this.#Ie)return;const e=this.#Ie.tree.filter(this.nodeFilter.bind(this));this.#Ne.data={tree:e,defaultRenderer:this.#Ie.defaultRenderer,compact:this.#Ie.compact},this.noMatchesElement.classList.toggle("hidden",Boolean(e.length))}async filterGroupLists(){if(!this.#Ie)return;const e=[];for(const t of this.#Ie.tree){const n=t.treeNodeData;if("category"!==n.tag||!t.children)continue;const i=(await t.children()).filter(this.nodeFilter.bind(this));i.length&&e.push({id:n.name,treeNodeData:{tag:"category",name:n.name},children:async()=>i})}this.#Ne.data={tree:e,defaultRenderer:this.#Ie.defaultRenderer,compact:this.#Ie.compact},await this.#Ne.expandRecursively(0),this.noMatchesElement.classList.toggle("hidden",Boolean(e.length))}}const yi=30,fi=new Set(["display","height","width"]);var Si=Object.freeze({__proto__:null,ComputedStyleWidget:gi});class Ei extends e.ObjectWrapper.ObjectWrapper{nodeInternal;cssModelInternal;eventListeners;frameResizedTimer;computedStylePromise;currentTrackedNodeId;constructor(){super(),this.cssModelInternal=null,this.eventListeners=[],this.nodeInternal=i.Context.Context.instance().flavor(n.DOMModel.DOMNode),i.Context.Context.instance().addFlavorChangeListener(n.DOMModel.DOMNode,this.onNodeChanged,this),i.Context.Context.instance().addFlavorChangeListener(Fn,this.evaluateTrackingComputedStyleUpdatesForNode,this),i.Context.Context.instance().addFlavorChangeListener(gi,this.evaluateTrackingComputedStyleUpdatesForNode,this)}dispose(){i.Context.Context.instance().removeFlavorChangeListener(n.DOMModel.DOMNode,this.onNodeChanged,this),i.Context.Context.instance().removeFlavorChangeListener(Fn,this.evaluateTrackingComputedStyleUpdatesForNode,this),i.Context.Context.instance().removeFlavorChangeListener(gi,this.evaluateTrackingComputedStyleUpdatesForNode,this)}node(){return this.nodeInternal}cssModel(){return this.cssModelInternal?.isEnabled()?this.cssModelInternal:null}evaluateTrackingComputedStyleUpdatesForNode=e.Debouncer.debounce((()=>{if(!this.nodeInternal)return void(this.currentTrackedNodeId&&(this.cssModel()?.trackComputedStyleUpdatesForNode(void 0),this.currentTrackedNodeId=void 0));const e=Boolean(i.Context.Context.instance().flavor(gi)),n=Boolean(i.Context.Context.instance().flavor(Fn));e||n&&t.Runtime.hostConfig.devToolsAnimationStylesInStylesTab?.enabled?this.currentTrackedNodeId!==this.nodeInternal.id&&(this.cssModel()?.trackComputedStyleUpdatesForNode(this.nodeInternal.id),this.currentTrackedNodeId=this.nodeInternal.id):this.currentTrackedNodeId&&(this.cssModel()?.trackComputedStyleUpdatesForNode(void 0),this.currentTrackedNodeId=void 0)}),100);onNodeChanged(e){this.nodeInternal=e.data,this.updateModel(this.nodeInternal?this.nodeInternal.domModel().cssModel():null),this.onCSSModelChanged(null),this.evaluateTrackingComputedStyleUpdatesForNode()}updateModel(t){if(this.cssModelInternal===t)return;e.EventTarget.removeEventListeners(this.eventListeners),this.cssModelInternal=t;const i=t?t.domModel():null,s=t?t.target().model(n.ResourceTreeModel.ResourceTreeModel):null;t&&i&&s&&(this.eventListeners=[t.addEventListener(n.CSSModel.Events.StyleSheetAdded,this.onCSSModelChanged,this),t.addEventListener(n.CSSModel.Events.StyleSheetRemoved,this.onCSSModelChanged,this),t.addEventListener(n.CSSModel.Events.StyleSheetChanged,this.onCSSModelChanged,this),t.addEventListener(n.CSSModel.Events.FontsUpdated,this.onCSSModelChanged,this),t.addEventListener(n.CSSModel.Events.MediaQueryResultChanged,this.onCSSModelChanged,this),t.addEventListener(n.CSSModel.Events.PseudoStateForced,this.onCSSModelChanged,this),t.addEventListener(n.CSSModel.Events.ModelWasEnabled,this.onCSSModelChanged,this),t.addEventListener(n.CSSModel.Events.ComputedStyleUpdated,this.onComputedStyleChanged,this),i.addEventListener(n.DOMModel.Events.DOMMutated,this.onDOMModelChanged,this),s.addEventListener(n.ResourceTreeModel.Events.FrameResized,this.onFrameResized,this)])}onCSSModelChanged(e){delete this.computedStylePromise,this.dispatchEventToListeners("CSSModelChanged",e?.data??null)}onComputedStyleChanged(e){delete this.computedStylePromise,e?.data&&"nodeId"in e.data&&e.data.nodeId!==this.nodeInternal?.id||this.dispatchEventToListeners("ComputedStyleChanged")}onDOMModelChanged(e){const t=e.data;this.nodeInternal&&(this.nodeInternal===t||t.parentNode===this.nodeInternal.parentNode||t.isAncestor(this.nodeInternal))&&this.onCSSModelChanged(null)}onFrameResized(){this.frameResizedTimer&&clearTimeout(this.frameResizedTimer),this.frameResizedTimer=window.setTimeout(function(){this.onCSSModelChanged(null),delete this.frameResizedTimer}.bind(this),100)}elementNode(){const e=this.node();return e?e.enclosingElementOrSelf():null}async fetchComputedStyle(){const e=this.elementNode(),t=this.cssModel();if(!e||!t)return null;const n=e.id;return n?(this.computedStylePromise||(this.computedStylePromise=t.getComputedStyle(n).then(function(e,t){return e===this.elementNode()&&t?new Ci(e,t):null}.bind(this,e))),await this.computedStylePromise):null}}class Ci{node;computedStyle;constructor(e,t){this.node=e,this.computedStyle=t}}var vi=Object.freeze({__proto__:null,ComputedStyle:Ci,ComputedStyleModel:Ei}),bi={cssText:`#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);& > div:not(:last-child){border-bottom:1px solid var(--sys-color-divider)}}#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}.axtree-button{position:absolute;top:var(--sys-size-8);right:var(--sys-size-9);background-color:var(--sys-color-cdt-base-container);display:flex;justify-content:center;align-items:center;z-index:1;border-radius:var(--sys-shape-corner-full);box-shadow:var(--sys-elevation-level1)}\n/*# sourceURL=${import.meta.resolve("./elementsPanel.css")} */\n`};const wi=function(e,t){if(e.nodeType()!==Node.ELEMENT_NODE)return"";const n=[];let i=e;for(;i;){const s=Mi(i,Boolean(t),i===e);if(!s)break;if(n.push(s),s.optimized)break;i=i.parentNode}return n.reverse(),n.join(" > ")},xi=function(e){let t=e;for(;t;){const e=t.ancestorShadowRoot();if(e&&e.shadowRootType()!==n.DOMModel.DOMNode.ShadowRootTypes.Open)return!1;t=t.ancestorShadowHost()}return!0},Ti=function(e,t){if(e.nodeType()!==Node.ELEMENT_NODE)return"";const n=[];let i=e;for(;i;)n.push(wi(i,t)),i=i.ancestorShadowHost();n.reverse();let s="";for(let e=0;e<n.length;++e){const t=JSON.stringify(n[e]);s+=e?`.shadowRoot.querySelector(${t})`:`document.querySelector(${t})`}return s},Mi=function(e,t,n){if(e.nodeType()!==Node.ELEMENT_NODE)return null;const i=e.getAttribute("id");if(t){if(i)return new Ai(a(i),!0);const t=e.nodeName().toLowerCase();if("body"===t||"head"===t||"html"===t)return new Ai(e.nodeNameInCorrectCase(),!0)}const s=e.nodeNameInCorrectCase();if(i)return new Ai(s+a(i),!0);const o=e.parentNode;if(!o||o.nodeType()===Node.DOCUMENT_NODE)return new Ai(s,!0);function r(e){const t=e.getAttribute("class");return t?t.split(/\s+/g).filter(Boolean).map((function(e){return"$"+e})):[]}function a(e){return"#"+CSS.escape(e)}const l=r(e);let d=!1,c=!1,h=-1,p=-1;const u=o.children();for(let t=0;u&&(-1===h||!c)&&t<u.length;++t){const n=u[t];if(n.nodeType()!==Node.ELEMENT_NODE)continue;if(p+=1,n===e){h=p;continue}if(c)continue;if(n.nodeNameInCorrectCase()!==s)continue;d=!0;const i=new Set(l);if(!i.size){c=!0;continue}const o=r(n);for(let e=0;e<o.length;++e){const t=o[e];if(i.has(t)&&(i.delete(t),!i.size)){c=!0;break}}}let m=s;if(n&&"input"===s.toLowerCase()&&e.getAttribute("type")&&!e.getAttribute("id")&&!e.getAttribute("class")&&(m+="[type="+CSS.escape(e.getAttribute("type")||"")+"]"),c)m+=":nth-child("+(h+1)+")";else if(d)for(const e of l)m+="."+CSS.escape(e.slice(1));return new Ai(m,!1)},Ni=function(e,t){if(e.nodeType()===Node.DOCUMENT_NODE)return"/";const n=[];let i=e;for(;i;){const e=Ii(i,t);if(!e)break;if(n.push(e),e.optimized)break;i=i.parentNode}return n.reverse(),(n.length&&n[0].optimized?"":"/")+n.join("/")},Ii=function(e,t){let n;const i=Pi(e);if(-1===i)return null;switch(e.nodeType()){case Node.ELEMENT_NODE:if(t&&e.getAttribute("id"))return new Ai('//*[@id="'+e.getAttribute("id")+'"]',!0);n=e.localName();break;case Node.ATTRIBUTE_NODE:n="@"+e.nodeName();break;case Node.TEXT_NODE:case Node.CDATA_SECTION_NODE:n="text()";break;case Node.PROCESSING_INSTRUCTION_NODE:n="processing-instruction()";break;case Node.COMMENT_NODE:n="comment()";break;case Node.DOCUMENT_NODE:default:n=""}return i>0&&(n+="["+i+"]"),new Ai(n,e.nodeType()===Node.DOCUMENT_NODE)},Pi=function(e){function t(e,t){if(e===t)return!0;if(e.nodeType()===Node.ELEMENT_NODE&&t.nodeType()===Node.ELEMENT_NODE)return e.localName()===t.localName();if(e.nodeType()===t.nodeType())return!0;return(e.nodeType()===Node.CDATA_SECTION_NODE?Node.TEXT_NODE:e.nodeType())===(t.nodeType()===Node.CDATA_SECTION_NODE?Node.TEXT_NODE:t.nodeType())}const n=e.parentNode?e.parentNode.children():null;if(!n)return 0;let i;for(let s=0;s<n.length;++s)if(t(e,n[s])&&n[s]!==e){i=!0;break}if(!i)return 0;let s=1;for(let i=0;i<n.length;++i)if(t(e,n[i])){if(n[i]===e)return s;++s}return-1};class Ai{value;optimized;constructor(e,t){this.value=e,this.optimized=t||!1}toString(){return this.value}}var Li=Object.freeze({__proto__:null,Step:Ai,canGetJSPath:xi,cssPath:wi,fullQualifiedSelector:function(e,t){return e.nodeType()!==Node.ELEMENT_NODE?e.localName()||e.nodeName().toLowerCase():wi(e,t)},jsPath:Ti,xPath:Ni});const Oi={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't match any element id",formInputAssignedAutocompleteValueToIdOrNameAttributeError:"An element doesn't 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"},Ri=r.i18n.registerUIStrings("panels/elements/ElementIssueUtils.ts",Oi),Di=r.i18n.getLocalizedString.bind(void 0,Ri);function ki(e){if(e instanceof D.GenericIssue.GenericIssue){const t=e.details();return{tooltip:Fi(t.errorType),nodeId:t.violatingNodeId,attribute:t.violatingNodeAttribute}}if(e instanceof D.SelectElementAccessibilityIssue.SelectElementAccessibilityIssue){const t=e.details();return e.isInteractiveContentAttributesSelectDescendantIssue()?{tooltip:Di(Oi.interactiveContentAttributesSelectDescendant),nodeId:t.nodeId}:{tooltip:Ui(t.selectElementAccessibilityIssueReason),nodeId:t.nodeId}}}function Fi(e){switch(e){case"FormLabelForNameError":return Di(Oi.formLabelForNameError);case"FormDuplicateIdForInputError":return Di(Oi.formDuplicateIdForInputError);case"FormInputWithNoLabelError":return Di(Oi.formInputWithNoLabelError);case"FormAutocompleteAttributeEmptyError":return Di(Oi.formAutocompleteAttributeEmptyError);case"FormEmptyIdAndNameAttributesForInputError":return Di(Oi.formEmptyIdAndNameAttributesForInputError);case"FormAriaLabelledByToNonExistingId":return Di(Oi.formAriaLabelledByToNonExistingId);case"FormInputAssignedAutocompleteValueToIdOrNameAttributeError":return Di(Oi.formInputAssignedAutocompleteValueToIdOrNameAttributeError);case"FormLabelHasNeitherForNorNestedInput":return Di(Oi.formLabelHasNeitherForNorNestedInput);case"FormLabelForMatchesNonExistingIdError":return Di(Oi.formLabelForMatchesNonExistingIdError);case"FormInputHasWrongButWellIntendedAutocompleteValueError":return Di(Oi.formInputHasWrongButWellIntendedAutocompleteValueError);default:return""}}function Ui(e){switch(e){case"DisallowedSelectChild":return Di(Oi.disallowedSelectChild);case"DisallowedOptGroupChild":return Di(Oi.disallowedOptGroupChild);case"NonPhrasingContentOptionChild":return Di(Oi.nonPhrasingContentOptionChild);case"InteractiveContentOptionChild":return Di(Oi.interactiveContentOptionChild);case"InteractiveContentLegendChild":return Di(Oi.interactiveContentLegendChild);default:return""}}var _i={cssText:`.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,\n.editing *{color:var(--sys-color-on-surface)!important;text-decoration:none!important}.editing br{display:none}.adorner-reveal{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,\ninput,\nselect{font-family:inherit;font-size:inherit}.elements-gutter-decoration{position:absolute;top:3px;left:2px;height:9px;width:9px;border-radius:5px;border:1px solid var(--sys-color-orange-bright);background-color:var(--sys-color-orange-bright)}.elements-gutter-decoration.elements-has-decorated-children{opacity:50%}.add-attribute{margin-left:1px;margin-right:1px;white-space:nowrap}.elements-tree-nowrap,\n.elements-tree-nowrap .li{white-space:pre!important}.elements-disclosure .elements-tree-nowrap li{word-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,\n.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,\n.elements-tree-outline ol.shadow-root,\nli.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,\n  .elements-disclosure li.hovered:not(.selected) .selection,\n  .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}\n/*# sourceURL=${import.meta.resolve("./elementsTreeOutline.css")} */\n`};const Bi={reveal:"reveal"},Vi=r.i18n.registerUIStrings("panels/elements/TopLayerContainer.ts",Bi),Hi=r.i18n.getLocalizedString.bind(void 0,Vi);class Wi extends i.TreeOutline.TreeElement{tree;document;currentTopLayerDOMNodes=new Set;topLayerUpdateThrottler;constructor(t,n){super("#top-layer"),this.tree=t,this.document=n,this.topLayerUpdateThrottler=new e.Throttler.Throttler(1)}async throttledUpdateTopLayerElements(){await this.topLayerUpdateThrottler.schedule((()=>this.updateTopLayerElements()))}async updateTopLayerElements(){this.removeChildren(),this.removeCurrentTopLayerElementsAdorners(),this.currentTopLayerDOMNodes=new Set;const e=this.document.domModel(),t=await e.getTopLayerElements();if(!t||0===t.length)return;let i=0;for(let s=0;s<t.length;s++){const o=e.idToDOMNode.get(t[s]);if(o&&o.ownerDocument===this.document&&"::backdrop"!==o.nodeName()){const r=new n.DOMModel.DOMNodeShortcut(e.target(),o.backendNodeId(),0,o.nodeName()),a=new es(r);this.appendChild(a),this.currentTopLayerDOMNodes.add(o);const l=s>0?e.idToDOMNode.get(t[s-1]):void 0;if(l&&"::backdrop"===l.nodeName()){const t=new n.DOMModel.DOMNodeShortcut(e.target(),l.backendNodeId(),0,l.nodeName()),i=new es(t);a.appendChild(i)}const d=this.tree.treeElementByNode.get(o);d&&this.addTopLayerAdorner(d,a,++i)}}}removeCurrentTopLayerElementsAdorners(){for(const e of this.currentTopLayerDOMNodes){const t=this.tree.treeElementByNode.get(e);t?.removeAdornersByType(p.AdornerManager.RegisteredAdorners.TOP_LAYER)}}addTopLayerAdorner(e,t,n){const i=p.AdornerManager.getRegisteredAdorner(p.AdornerManager.RegisteredAdorners.TOP_LAYER),s=document.createElement("span");s.classList.add("adorner-with-icon");const o=x.Icon.create("select-element"),r=document.createElement("span");r.textContent=`top-layer (${n})`,s.append(o),s.append(r);const a=e?.adorn(i,s);if(a){const e=()=>{t.revealAndSelect()};a.addInteraction(e,{isToggle:!1,shouldPropagateOnKeydown:!1,ariaLabelDefault:Hi(Bi.reveal),ariaLabelActive:Hi(Bi.reveal)}),a.addEventListener("mousedown",(e=>e.consume()),!1)}}}var ji=Object.freeze({__proto__:null,TopLayerContainer:Wi});const $i={pageDom:"Page DOM",storeAsGlobalVariable:"Store as global variable",showAllNodesDMore:"Show all nodes ({PH1} more)",reveal:"reveal",viewIssue:"View Issue:"},zi=r.i18n.registerUIStrings("panels/elements/ElementsTreeOutline.ts",$i),Ki=r.i18n.getLocalizedString.bind(void 0,zi),Gi=new WeakMap,qi=new Set;class Yi extends(e.ObjectWrapper.eventMixin(i.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;#Pe=new Map;#Ae;#Le;#Oe=new Map;constructor(n,o,r){super(),t.Runtime.experiments.isEnabled("highlight-errors-elements-panel")&&(this.#Ae=D.IssuesManager.IssuesManager.instance(),this.#Ae.addEventListener("IssueAdded",this.#Re,this)),this.treeElementByNode=new WeakMap;const a=document.createElement("div");this.shadowRoot=i.UIUtils.createShadowRootWithCoreStyles(a,{cssFile:[_i,P.codeHighlighterStyles]});const l=this.shadowRoot.createChild("div","elements-disclosure");this.elementInternal=this.element,this.elementInternal.classList.add("elements-tree-outline","source-code"),r&&this.elementInternal.classList.add("elements-hide-gutter"),i.ARIAUtils.setLabel(this.elementInternal,Ki($i.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("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("contextmenu",this.contextMenuEventFired.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.elementInternal.addEventListener("keydown",this.onKeyDown.bind(this),!1),l.appendChild(this.elementInternal),this.element=a,this.contentElement.setAttribute("jslog",`${s.tree("elements")}`),this.includeRootDOMNode=!n,this.selectEnabled=o,this.rootDOMNodeInternal=null,this.selectedDOMNodeInternal=null,this.visible=!1,this.imagePreviewPopover=new oe(this.contentElement,(e=>{let t=e.target;for(;t&&!oe.getImageURL(t);)t=t.parentElementOrShadowHost();return t}),(e=>{const t=i.UIUtils.enclosingNodeOrSelfWithNodeName(e,"li");if(!t)return null;const n=i.TreeOutline.TreeElement.getTreeElementBylistItemNode(t);return n?n.node():null})),this.updateRecords=new Map,this.treeElementsBeingUpdated=new Set,this.decoratorExtensions=null,this.showHTMLCommentsSetting=e.Settings.Settings.instance().moduleSetting("show-html-comments"),this.showHTMLCommentsSetting.addChangeListener(this.onShowHTMLCommentsChange.bind(this)),this.setUseLightSelectionColor(!0),t.Runtime.experiments.isEnabled("highlight-errors-elements-panel")&&(this.#Le=new i.PopoverHelper.PopoverHelper(this.elementInternal,(t=>{const n=t.composedPath()[0];if(!n?.matches(".violating-element"))return null;const i=this.#Oe.get(n);return i?{box:n.boxInWindow(),show:async t=>(t.setIgnoreLeftMargin(!0),m(g`
+              <div class="squiggles-content">
+                ${i.map((t=>{const n=ki(t);if(!n)return y;const i=k.IssueCounter.getIssueKindIconData(t.getKind()),s=()=>e.Revealer.reveal(t);return g`
+                    <div class="squiggles-content-item">
+                    <devtools-icon .data=${i} @click=${s}></devtools-icon>
+                    <x-link class="link" @click=${s}>${Ki($i.viewIssue)}</x-link>
+                    <span>${n.tooltip}</span>
+                    </div>`}))}
+              </div>`,t.contentElement),!0)}:null}),"elements.issue"),this.#Le.setTimeout(300))}static forDOMModel(e){return Gi.get(e)||null}#Re(e){this.#De(e.data.issue)}#ke(){if(this.#Ae)for(const e of this.#Ae.issues())this.#De(e)}async#De(e){const t=ki(e);if(!t)return;const{nodeId:i}=t;if(!this.rootDOMNode||!i)return;const s=new n.DOMModel.DeferredDOMNode(this.rootDOMNode.domModel().target(),i),o=await s.resolvePromise();if(!o)return;const r=this.findTreeElement(o);if(r){r.addIssue(e);const t=r.issuesByNodeElement;for(const[e,n]of t)this.#Oe.set(e,n)}}onShowHTMLCommentsChange(){const 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){const e=this.findTreeElement(this.clipboardNodeData.node);e&&e.setInClipboard(!1),delete this.clipboardNodeData}if(e){const t=this.findTreeElement(e.node);t&&t.setInClipboard(!0),this.clipboardNodeData=e}}resetClipboardIfNeeded(e){this.clipboardNodeData&&this.clipboardNodeData.node===e&&this.setClipboardData(null)}onBeforeCopy(e){e.handled=!0}onCopyOrCut(e,t){this.setClipboardData(null);const n=t.original;if(!n?.target)return;if(n.target instanceof Node&&n.target.hasSelection())return;if(i.UIUtils.isEditing())return;const s=this.selectedDOMNode();s&&n.clipboardData&&(n.clipboardData.clearData(),t.handled=!0,this.performCopyOrCut(e,s))}performCopyOrCut(e,t){t&&(e&&(t.isShadowRoot()||t.ancestorUserAgentShadowRoot())||(t.copyNode(),this.setClipboardData({node:t,isCut:e})))}canPaste(e){if(e.isShadowRoot()||e.ancestorUserAgentShadowRoot())return!1;if(!this.clipboardNodeData)return!1;const t=this.clipboardNodeData.node;return(!this.clipboardNodeData.isCut||t!==e&&!t.isAncestor(e))&&e.domModel()===t.domModel()}pasteNode(e){this.canPaste(e)&&this.performPaste(e)}duplicateNode(e){this.performDuplicate(e)}onPaste(e){if(i.UIUtils.isEditing())return;const t=this.selectedDOMNode();t&&this.canPaste(t)&&(e.handled=!0,this.performPaste(t))}performPaste(e){function t(e,t){!e&&t&&this.selectDOMNode(t)}this.clipboardNodeData&&(this.clipboardNodeData.isCut?(this.clipboardNodeData.node.moveTo(e,null,t.bind(this)),this.setClipboardData(null)):this.clipboardNodeData.node.copyTo(e,null,t.bind(this)))}performDuplicate(e){if(e.isInShadowTree())return;const t=e.parentNode?e.parentNode:e;"#document"!==t.nodeName()&&e.copyTo(t,e.nextSibling)}setVisible(e){if(e!==this.visible){if(this.visible=e,!this.visible)return this.imagePreviewPopover.hide(),void(this.multilineEditing&&this.multilineEditing.cancel());this.runPendingUpdates(),this.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 Boolean(this.isXMLMimeTypeInternal)}selectedDOMNode(){return this.selectedDOMNodeInternal}selectDOMNode(e,t){this.selectedDOMNodeInternal!==e?(this.selectedDOMNodeInternal=e,this.revealAndSelectNode(e,!t),this.selectedDOMNodeInternal===e&&this.selectedNodeChanged(Boolean(t))):this.revealAndSelectNode(e,!t)}editing(){const e=this.selectedDOMNode();if(!e)return!1;const t=this.findTreeElement(e);return t&&t.isEditing()||!1}update(){const e=this.selectedDOMNode();if(this.removeChildren(),this.rootDOMNode){if(this.includeRootDOMNode){const e=this.createElementTreeElement(this.rootDOMNode);this.appendChild(e)}else{const e=this.visibleChildren(this.rootDOMNode);for(const t of e){const e=this.createElementTreeElement(t);this.appendChild(e)}}this.rootDOMNode instanceof n.DOMModel.DOMDocument&&this.createTopLayerContainer(this.rootElement(),this.rootDOMNode),e&&this.revealAndSelectNode(e,!0)}}selectedNodeChanged(e){this.dispatchEventToListeners(Yi.Events.SelectedNodeChanged,{node:this.selectedDOMNodeInternal,focus:e})}fireElementsTreeUpdated(e){this.dispatchEventToListeners(Yi.Events.ElementsTreeUpdated,e)}findTreeElement(e){let t=this.lookUpTreeElement(e);return t||e.nodeType()!==Node.TEXT_NODE||(t=this.lookUpTreeElement(e.parentNode)),t}lookUpTreeElement(e){if(!e)return null;const t=this.treeElementByNode.get(e);if(t)return t;const n=[];let i;for(i=e.parentNode;i&&(n.push(i),!this.treeElementByNode.has(i));i=i.parentNode);if(!i)return null;for(let t=n.length-1;t>=0;--t){const i=n[t-1]||e,s=this.treeElementByNode.get(n[t]);s&&(s.onpopulate(),i.index&&i.index>=s.expandedChildrenLimit()&&this.setExpandedChildrenLimit(s,i.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)return;if(!this.includeRootDOMNode&&e===this.rootDOMNode&&this.rootDOMNode&&(e=this.rootDOMNode.firstChild),!e)return;const n=this.createTreeElementFor(e);n&&n.revealAndSelect(t)}treeElementFromEventInternal(e){if(!this.element.parentElement)return null;const t=e.pageX,n=e.pageY,i=this.treeElementFromPoint(t,n);let s;return s=i===this.treeElementFromPoint(t,n-2)?i:this.treeElementFromPoint(t,n+2),s}onfocusout(e){n.OverlayModel.OverlayModel.hideDOMNodeHighlight()}onmousedown(e){const t=this.treeElementFromEventInternal(e);t&&t.select()}setHoverEffect(e){this.previousHoveredElement!==e&&(this.previousHoveredElement instanceof ms&&(this.previousHoveredElement.hovered=!1,delete this.previousHoveredElement),e instanceof ms&&(e.hovered=!0,this.previousHoveredElement=e))}onmousemove(e){const t=this.treeElementFromEventInternal(e);t&&this.previousHoveredElement===t||(this.setHoverEffect(t),this.highlightTreeElement(t,!i.KeyboardShortcut.KeyboardShortcut.eventHasEitherCtrlOrMeta(e)))}highlightTreeElement(e,t){e instanceof ms?e.node().domModel().overlayModel().highlightInOverlay({node:e.node(),selectorList:void 0},"all",t):e instanceof es&&e.domModel().overlayModel().highlightInOverlay({deferredNode:e.deferredNode(),selectorList:void 0},"all",t)}onmouseleave(e){this.setHoverEffect(null),n.OverlayModel.OverlayModel.hideDOMNodeHighlight()}ondragstart(e){const t=e.target;if(!t||t.hasSelection())return!1;if("A"===t.nodeName)return!1;const i=this.validDragSourceOrTarget(this.treeElementFromEventInternal(e));return!!i&&("BODY"!==i.node().nodeName()&&"HEAD"!==i.node().nodeName()&&(e.dataTransfer&&i.listItemElement.textContent?(e.dataTransfer.setData("text/plain",i.listItemElement.textContent.replace(/\u200b/g,"")),e.dataTransfer.effectAllowed="copyMove",this.treeElementBeingDragged=i,n.OverlayModel.OverlayModel.hideDOMNodeHighlight(),!0):void 0))}ondragover(e){if(!this.treeElementBeingDragged)return!1;const t=this.validDragSourceOrTarget(this.treeElementFromEventInternal(e));if(!t)return!1;let n=t.node();for(;n;){if(n===this.treeElementBeingDragged.nodeInternal)return!1;n=n.parentNode}return t.listItemElement.classList.add("elements-drag-over"),this.dragOverTreeElement=t,e.preventDefault(),e.dataTransfer&&(e.dataTransfer.dropEffect="move"),!1}ondragleave(e){return this.clearDragOverTreeElementMarker(),e.preventDefault(),!1}validDragSourceOrTarget(e){if(!e)return null;if(!(e instanceof ms))return null;const t=e,n=t.node();return n.parentNode&&n.parentNode.nodeType()===Node.ELEMENT_NODE?t:null}ondrop(e){e.preventDefault();const t=this.treeElementFromEventInternal(e);t instanceof ms&&this.doMove(t)}doMove(e){if(!this.treeElementBeingDragged)return;let t,n;if(e.isClosingTag())t=e.node(),n=null;else{const i=e.node();t=i.parentNode,n=i}if(!t)return;const i=this.treeElementBeingDragged.expanded;this.treeElementBeingDragged.nodeInternal.moveTo(t,n,this.selectNodeAfterEdit.bind(this,i)),delete this.treeElementBeingDragged}ondragend(e){e.preventDefault(),this.clearDragOverTreeElementMarker(),delete this.treeElementBeingDragged}clearDragOverTreeElementMarker(){this.dragOverTreeElement&&(this.dragOverTreeElement.listItemElement.classList.remove("elements-drag-over"),delete this.dragOverTreeElement)}contextMenuEventFired(e){const t=this.treeElementFromEventInternal(e);t instanceof ms&&this.showContextMenu(t,e)}showContextMenu(e,t){if(i.UIUtils.isEditing())return;const n=new i.ContextMenu.ContextMenu(t),s=Boolean(e.node().pseudoType()),o=e.node().nodeType()===Node.ELEMENT_NODE&&!s,r=t.target;if(!r)return;let a=r.enclosingNodeOrSelfWithClass("webkit-html-text-node");a?.classList.contains("bogus")&&(a=null);const l=r.enclosingNodeOrSelfWithClass("webkit-html-comment");n.saveSection().appendItem(Ki($i.storeAsGlobalVariable),this.saveNodeToTempVariable.bind(this,e.node()),{jslogContext:"store-as-global-variable"}),a?e.populateTextContextMenu(n,a):o?e.populateTagContextMenu(n,t):l?e.populateNodeContextMenu(n):s&&e.populatePseudoElementContextMenu(n),Ls.instance().populateAdornerSettingsContextMenu(n),n.appendApplicableItems(e.node()),n.show()}async saveNodeToTempVariable(e){const t=await e.resolveToObject(),s=t?.runtimeModel().target()?.model(n.ConsoleModel.ConsoleModel);await(s?.saveToTempVariable(i.Context.Context.instance().flavor(n.RuntimeModel.ExecutionContext),t))}runPendingUpdates(){this.updateModifiedNodes()}onKeyDown(e){const t=e;if(i.UIUtils.isEditing())return;const n=this.selectedDOMNode();if(!n)return;const s=this.treeElementByNode.get(n);if(s&&i.KeyboardShortcut.KeyboardShortcut.eventHasCtrlEquivalentKey(t)&&n.parentNode){if("ArrowUp"===t.key&&n.previousSibling)return n.moveTo(n.parentNode,n.previousSibling,this.selectNodeAfterEdit.bind(this,s.expanded)),void t.consume(!0);if("ArrowDown"===t.key&&n.nextSibling)return n.moveTo(n.parentNode,n.nextSibling.nextSibling,this.selectNodeAfterEdit.bind(this,s.expanded)),void t.consume(!0)}}toggleEditAsHTML(e,t,n){const i=this.treeElementByNode.get(e);if(!i?.hasEditableNode())return;if(e.pseudoType())return;const s=e.parentNode,o=e.index,r=i.expanded;i.toggleEditAsHTML(function(e){n&&n();if(!e)return;if(this.runPendingUpdates(),!o)return;const t=s?.children(),i=t&&t[o]||s;if(!i)return;if(this.selectDOMNode(i,!0),r){const e=this.findTreeElement(i);e&&e.expand()}}.bind(this),t)}selectNodeAfterEdit(e,t,n){if(t)return null;if(this.runPendingUpdates(),!n)return null;this.selectDOMNode(n,!0);const i=this.findTreeElement(n);return e&&i&&i.expand(),i}async toggleHideElement(e){const t=e.pseudoType(),n=t?e.parentNode:e;if(!n)return;const i=e.marker("hidden-marker"),s=await n.resolveToObject("");s&&(await s.callFunction((function(e,t){const n="__web-inspector-hide-shortcut-style__",i=[];i.push(".__web-inspector-hide-shortcut__"),i.push(".__web-inspector-hide-shortcut__ *"),i.push(".__web-inspector-hidebefore-shortcut__::before"),i.push(".__web-inspector-hideafter-shortcut__::after");const s=i.join(", "),o="\n"+s+"\n{\n    visibility: hidden !important;\n}\n",r="__web-inspector-hide"+(e||"")+"-shortcut__";this.classList.toggle(r,t);let a=this;for(;a.parentNode;)a=a.parentNode;a.nodeType===Node.DOCUMENT_NODE&&(a=document.head);let l=a.querySelector("style#"+n);if(l)return;l=document.createElement("style"),l.id=n,l.textContent=o,a.appendChild(l)}),[{value:t},{value:!i}]),s.release(),e.setMarker("hidden-marker",!i||null))}isToggledToHidden(e){return Boolean(e.marker("hidden-marker"))}reset(){this.rootDOMNode=null,this.selectDOMNode(null,!1),this.imagePreviewPopover.hide(),delete this.clipboardNodeData,n.OverlayModel.OverlayModel.hideDOMNodeHighlight(),this.updateRecords.clear()}wireToDOMModel(e){Gi.set(e,this),e.addEventListener(n.DOMModel.Events.MarkersChanged,this.markersChanged,this),e.addEventListener(n.DOMModel.Events.NodeInserted,this.nodeInserted,this),e.addEventListener(n.DOMModel.Events.NodeRemoved,this.nodeRemoved,this),e.addEventListener(n.DOMModel.Events.AttrModified,this.attributeModified,this),e.addEventListener(n.DOMModel.Events.AttrRemoved,this.attributeRemoved,this),e.addEventListener(n.DOMModel.Events.CharacterDataModified,this.characterDataModified,this),e.addEventListener(n.DOMModel.Events.DocumentUpdated,this.documentUpdated,this),e.addEventListener(n.DOMModel.Events.ChildNodeCountUpdated,this.childNodeCountUpdated,this),e.addEventListener(n.DOMModel.Events.DistributedNodesChanged,this.distributedNodesChanged,this),e.addEventListener(n.DOMModel.Events.TopLayerElementsChanged,this.topLayerElementsChanged,this),e.addEventListener(n.DOMModel.Events.ScrollableFlagUpdated,this.scrollableFlagUpdated,this)}unwireFromDOMModel(e){e.removeEventListener(n.DOMModel.Events.MarkersChanged,this.markersChanged,this),e.removeEventListener(n.DOMModel.Events.NodeInserted,this.nodeInserted,this),e.removeEventListener(n.DOMModel.Events.NodeRemoved,this.nodeRemoved,this),e.removeEventListener(n.DOMModel.Events.AttrModified,this.attributeModified,this),e.removeEventListener(n.DOMModel.Events.AttrRemoved,this.attributeRemoved,this),e.removeEventListener(n.DOMModel.Events.CharacterDataModified,this.characterDataModified,this),e.removeEventListener(n.DOMModel.Events.DocumentUpdated,this.documentUpdated,this),e.removeEventListener(n.DOMModel.Events.ChildNodeCountUpdated,this.childNodeCountUpdated,this),e.removeEventListener(n.DOMModel.Events.DistributedNodesChanged,this.distributedNodesChanged,this),e.removeEventListener(n.DOMModel.Events.TopLayerElementsChanged,this.topLayerElementsChanged,this),e.removeEventListener(n.DOMModel.Events.ScrollableFlagUpdated,this.scrollableFlagUpdated,this),Gi.delete(e)}addUpdateRecord(e){let t=this.updateRecords.get(e);return t||(t=new Qi,this.updateRecords.set(e,t)),t}updateRecordForHighlight(e){return this.visible&&this.updateRecords.get(e)||null}documentUpdated(e){const n=e.data;this.reset(),n.existingDocument()&&(this.rootDOMNode=n.existingDocument(),t.Runtime.experiments.isEnabled("highlight-errors-elements-panel")&&this.#ke())}attributeModified(e){const{node:t}=e.data;this.addUpdateRecord(t).attributeModified(e.data.name),this.updateModifiedNodesSoon()}attributeRemoved(e){const{node:t}=e.data;this.addUpdateRecord(t).attributeRemoved(e.data.name),this.updateModifiedNodesSoon()}characterDataModified(e){const t=e.data;this.addUpdateRecord(t).charDataModified(),t.parentNode&&t.parentNode.firstChild===t.parentNode.lastChild&&this.addUpdateRecord(t.parentNode).childrenModified(),this.updateModifiedNodesSoon()}nodeInserted(e){const t=e.data;this.addUpdateRecord(t.parentNode).nodeInserted(t),this.updateModifiedNodesSoon()}nodeRemoved(e){const{node:t,parent:n}=e.data;this.resetClipboardIfNeeded(t),this.addUpdateRecord(n).nodeRemoved(t),this.updateModifiedNodesSoon()}childNodeCountUpdated(e){const t=e.data;this.addUpdateRecord(t).childrenModified(),this.updateModifiedNodesSoon()}distributedNodesChanged(e){const t=e.data;this.addUpdateRecord(t).childrenModified(),this.updateModifiedNodesSoon()}updateModifiedNodesSoon(){this.updateRecords.size&&(this.updateModifiedNodesTimeout||(this.updateModifiedNodesTimeout=window.setTimeout(this.updateModifiedNodes.bind(this),50)))}updateModifiedNodes(){this.updateModifiedNodesTimeout&&(clearTimeout(this.updateModifiedNodesTimeout),delete this.updateModifiedNodesTimeout);const e=[...this.updateRecords.keys()],t=e.length>10;let n,i;t&&(n=this.element.parentNode,i=n?n.scrollTop:0,this.elementInternal.classList.add("hidden"));const s=this.rootDOMNodeInternal&&this.updateRecords.get(this.rootDOMNodeInternal);if(s?.hasChangedChildren())this.update();else for(const[e,t]of this.updateRecords)t.hasChangedChildren()?this.updateModifiedParentNode(e):this.updateModifiedNode(e);t&&(this.elementInternal.classList.remove("hidden"),n&&i&&(n.scrollTop=i)),this.updateRecords.clear(),this.fireElementsTreeUpdated(e)}updateModifiedNode(e){const t=this.findTreeElement(e);t&&t.updateTitle(this.updateRecordForHighlight(e))}updateModifiedParentNode(e){const t=this.findTreeElement(e);t&&(t.setExpandable(this.hasVisibleChildren(e)),t.updateTitle(this.updateRecordForHighlight(e)),qi.has(t)&&this.updateChildren(t))}populateTreeElement(e){return e.childCount()||!e.isExpandable()?Promise.resolve():new Promise((t=>{e.node().getChildNodes((()=>{qi.add(e),this.updateModifiedParentNode(e.node()),t()}))}))}async createTopLayerContainer(e,t){if(!(e.treeOutline&&e.treeOutline instanceof Yi))return;const n=new Wi(e.treeOutline,t);await n.throttledUpdateTopLayerElements(),n.currentTopLayerDOMNodes.size>0&&e.appendChild(n),this.#Pe.set(e,n)}createElementTreeElement(e,t){const n=new ms(e,t);return n.setExpandable(!t&&this.hasVisibleChildren(e)),e.nodeType()===Node.ELEMENT_NODE&&e.parentNode&&e.parentNode.nodeType()===Node.DOCUMENT_NODE&&!e.parentNode.parentNode&&n.setCollapsible(!1),e.hasAssignedSlot()&&n.createSlotLink(e.assignedSlot),n.selectable=Boolean(this.selectEnabled),n}showChild(e,t){if(e.isClosingTag())return null;const n=this.visibleChildren(e.node()).indexOf(t);return-1===n?null:(n>=e.expandedChildrenLimit()&&this.setExpandedChildrenLimit(e,n+1),e.childAt(n))}visibleChildren(e){let t=ms.visibleShadowRoots(e);const n=e.contentDocument();n&&t.push(n);const i=e.templateContent();i&&t.push(i),t.push(...e.viewTransitionPseudoElements());const s=e.markerPseudoElement();s&&t.push(s);const o=e.checkmarkPseudoElement();o&&t.push(o);const r=e.beforePseudoElement();if(r&&t.push(r),t.push(...e.carouselPseudoElements()),e.childNodeCount()){let n=e.children()||[];this.showHTMLCommentsSetting.get()||(n=n.filter((e=>e.nodeType()!==Node.COMMENT_NODE))),t=t.concat(n)}const a=e.afterPseudoElement();a&&t.push(a);const l=e.pickerIconPseudoElement();l&&t.push(l);const d=e.backdropPseudoElement();return d&&t.push(d),t}hasVisibleChildren(e){return!!e.isIframe()||(!!e.contentDocument()||(!!e.templateContent()||(!!ms.visibleShadowRoots(e).length||(!!e.hasPseudoElements()||(!!e.isInsertionPoint()||Boolean(e.childNodeCount())&&!ms.canShowInlineText(e))))))}createExpandAllButtonTreeElement(e){const t=i.UIUtils.createTextButton("",function(t){const n=this.visibleChildren(e.node()).length;this.setExpandedChildrenLimit(e,Math.max(n,e.expandedChildrenLimit()+gs)),t.consume()}.bind(this));t.value="";const n=new i.TreeOutline.TreeElement(t);return n.selectable=!1,n.button=t,n}setExpandedChildrenLimit(e,t){e.expandedChildrenLimit()!==t&&(e.setExpandedChildrenLimit(t),e.treeOutline&&!this.treeElementsBeingUpdated.has(e)&&this.updateModifiedParentNode(e.node()))}updateChildren(e){if(!e.isExpandable()){if(!e.treeOutline)return;const t=e.treeOutline.selectedTreeElement;return t?.hasAncestor(e)&&e.select(!0),void e.removeChildren()}console.assert(!e.isClosingTag()),this.innerUpdateChildren(e)}insertChildElement(e,t,i,s){const o=this.createElementTreeElement(t,s);return e.insertChild(o,i),t instanceof n.DOMModel.DOMDocument&&this.createTopLayerContainer(o,t),o}moveChild(e,t,n){if(e.indexOfChild(t)===n)return;const i=t.selected;t.parent&&t.parent.removeChild(t),e.insertChild(t,n),i&&t.select()}innerUpdateChildren(e){if(this.treeElementsBeingUpdated.has(e))return;this.treeElementsBeingUpdated.add(e);const t=e.node(),n=this.visibleChildren(t),i=new Set(n),s=new Map;for(let t=e.childCount()-1;t>=0;--t){const n=e.childAt(t);if(!(n instanceof ms)){e.removeChildAtIndex(t);continue}const o=n.node();i.has(o)?s.set(o,n):e.removeChildAtIndex(t)}for(let i=0;i<n.length&&i<e.expandedChildrenLimit();++i){const o=n[i],r=s.get(o)||this.findTreeElement(o);if(r&&r!==e)this.moveChild(e,r,i);else{const n=this.insertChildElement(e,o,i);this.updateRecordForHighlight(t)&&e.expanded&&ms.animateOnDOMUpdate(n),e.childCount()>e.expandedChildrenLimit()&&this.setExpandedChildrenLimit(e,e.expandedChildrenLimit()+1)}}const o=e.childCount();if(n.length>o){const t=o;e.expandAllButtonElement||(e.expandAllButtonElement=this.createExpandAllButtonTreeElement(e)),e.insertChild(e.expandAllButtonElement,t),e.expandAllButtonElement.title=Ki($i.showAllNodesDMore,{PH1:n.length-o})}else e.expandAllButtonElement&&(e.expandAllButtonElement=null);if(t.isInsertionPoint())for(const n of t.distributedNodes())e.appendChild(new es(n));t.nodeType()===Node.ELEMENT_NODE&&!t.pseudoType()&&e.isExpandable()&&this.insertChildElement(e,t,e.childCount(),!0),this.treeElementsBeingUpdated.delete(e)}markersChanged(e){const t=e.data,n=this.treeElementByNode.get(t);n&&n.updateDecorations()}async topLayerElementsChanged(){for(const[e,t]of this.#Pe)await t.throttledUpdateTopLayerElements(),t.currentTopLayerDOMNodes.size>0&&t.parent!==e&&e.appendChild(t),t.hidden=0===t.currentTopLayerDOMNodes.size}scrollableFlagUpdated(e){let{node:t}=e.data;if("#document"===t.nodeName()){if(!t.ownerDocument?.documentElement)return;t=t.ownerDocument.documentElement}const n=this.treeElementByNode.get(t);n&&us(n.tagTypeContext)&&n.tagTypeContext.adornersThrottler.schedule((async()=>n.updateScrollAdorner()))}static treeOutlineSymbol=Symbol("treeOutline")}!function(e){let t;!function(e){e.SelectedNodeChanged="SelectedNodeChanged",e.ElementsTreeUpdated="ElementsTreeUpdated"}(t=e.Events||(e.Events={}))}(Yi||(Yi={}));const Xi=new Map([[" ","nbsp"],["­","shy"],[" ","ensp"],[" ","emsp"],[" ","thinsp"],[" ","hairsp"],["​","ZeroWidthSpace"],["‌","zwnj"],["‍","zwj"],["‎","lrm"],["‏","rlm"],["‪","#x202A"],["‫","#x202B"],["‬","#x202C"],["‭","#x202D"],["‮","#x202E"],["⁠","NoBreak"],["\ufeff","#xFEFF"]]);class Qi{modifiedAttributes;removedAttributes;hasChangedChildrenInternal;hasRemovedChildrenInternal;charDataModifiedInternal;attributeModified(e){this.removedAttributes?.has(e)&&this.removedAttributes.delete(e),this.modifiedAttributes||(this.modifiedAttributes=new Set),this.modifiedAttributes.add(e)}attributeRemoved(e){this.modifiedAttributes?.has(e)&&this.modifiedAttributes.delete(e),this.removedAttributes||(this.removedAttributes=new Set),this.removedAttributes.add(e)}nodeInserted(e){this.hasChangedChildrenInternal=!0}nodeRemoved(e){this.hasChangedChildrenInternal=!0,this.hasRemovedChildrenInternal=!0}charDataModified(){this.charDataModifiedInternal=!0}childrenModified(){this.hasChangedChildrenInternal=!0}isAttributeModified(e){return this.modifiedAttributes?.has(e)??!1}hasRemovedAttributes(){return null!==this.removedAttributes&&void 0!==this.removedAttributes&&Boolean(this.removedAttributes.size)}isCharDataModified(){return Boolean(this.charDataModifiedInternal)}hasChangedChildren(){return Boolean(this.hasChangedChildrenInternal)}hasRemovedChildren(){return Boolean(this.hasRemovedChildrenInternal)}}let Ji;class Zi{static instance(e={forceNew:null}){const{forceNew:t}=e;return Ji&&!t||(Ji=new Zi),Ji}async render(e){let t=null;if(e instanceof n.DOMModel.DOMNode?t=e:e instanceof n.DOMModel.DeferredDOMNode&&(t=await e.resolvePromise()),!t)return null;const i=new Yi(!1,!0,!0);i.rootDOMNode=t;const s=i.firstChild();return s&&!s.isExpandable()&&i.element.classList.add("single-node"),i.setVisible(!0),i.element.treeElementForTest=s,i.setShowSelectionOnKeyboardFocus(!0,!0),{node:i.element,tree:i}}}class es extends i.TreeOutline.TreeElement{nodeShortcut;hoveredInternal;constructor(e){super(""),this.listItemElement.createChild("div","selection fill");const t=this.listItemElement.createChild("span","elements-tree-shortcut-title");let n=e.nodeName.toLowerCase();e.nodeType===Node.ELEMENT_NODE&&(n="<"+n+">"),t.textContent="↪ "+n,this.nodeShortcut=e,this.addRevealAdorner()}addRevealAdorner(){const t=new I.Adorner.Adorner;t.classList.add("adorner-reveal");const n=p.AdornerManager.getRegisteredAdorner(p.AdornerManager.RegisteredAdorners.REVEAL).name,i=document.createElement("span"),s=x.Icon.create("select-element"),o=document.createElement("span");o.textContent=n,i.append(s),i.append(o),i.classList.add("adorner-with-icon"),t.data={name:n,content:i,jslogContext:"reveal"},this.listItemElement.appendChild(t);t.addInteraction((()=>{this.nodeShortcut.deferredNode.resolve((t=>{e.Revealer.reveal(t)}))}),{isToggle:!1,shouldPropagateOnKeydown:!1,ariaLabelDefault:Ki($i.reveal),ariaLabelActive:Ki($i.reveal)}),t.addEventListener("mousedown",(e=>e.consume()),!1),Ls.instance().registerAdorner(t)}get hovered(){return Boolean(this.hoveredInternal)}set hovered(e){this.hoveredInternal!==e&&(this.hoveredInternal=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 ms){e+=parseFloat(this.parent.listItemElement.style.getPropertyValue("--indent"))||0}this.listItemElement.style.setProperty("--indent",e+"px")}onattach(){this.setLeftIndentOverlay()}onselect(e){if(!e)return!0;return this.nodeShortcut.deferredNode.highlight(),this.nodeShortcut.deferredNode.resolve(function(e){e&&this.treeOutline instanceof Yi&&(this.treeOutline.selectedDOMNodeInternal=e,this.treeOutline.selectedNodeChanged(!1))}.bind(this)),!0}}var ts=Object.freeze({__proto__:null,get ElementsTreeOutline(){return Yi},MappedCharToEntity:Xi,Renderer:Zi,ShortcutTreeElement:es,UpdateRecord:Qi});const ns={domBreakpoint:"DOM Breakpoint",elementIsHidden:"Element is hidden"},is=r.i18n.registerUIStrings("panels/elements/MarkerDecorator.ts",ns),ss=r.i18n.getLazilyComputedLocalizedString.bind(void 0,is);class os{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}}}const rs={marker:"breakpoint-marker",title:ss(ns.domBreakpoint),color:"var(--sys-color-primary-bright)"},as={marker:"hidden-marker",title:ss(ns.elementIsHidden),color:"var(--sys-color-neutral-bright)"};function ls(){return[{...rs,decorator:()=>new os(rs)},{...as,decorator:()=>new os(as)},{decorator:Ds.instance,marker:"pseudo-state-marker",title:void 0,color:void 0}]}var ds=Object.freeze({__proto__:null,GenericDecorator:os,getRegisteredDecorators:ls});const cs={thisFrameWasIdentifiedAsAnAd:"This frame was identified as an ad frame",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",editText:"Edit text",editAsHtml:"Edit as HTML",cut:"Cut",copy:"Copy",paste:"Paste",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",enableFlexMode:"Enable flex mode",disableFlexMode:"Disable flex mode",enableScrollSnap:"Enable scroll-snap overlay",disableScrollSnap:"Disable scroll-snap overlay",openMediaPanel:"Jump to Media panel",showPopoverTarget:"Show popover target",showInterestTarget:"Show interest target",elementHasScrollableOverflow:"This element has a scrollable overflow"},hs=r.i18n.registerUIStrings("panels/elements/ElementsTreeElement.ts",cs),ps=r.i18n.getLocalizedString.bind(void 0,hs);function us(e){return"OPENING_TAG"===e.tagType}class ms extends i.TreeOutline.TreeElement{nodeInternal;treeOutline;gutterContainer;decorationsElement;searchQuery;expandedChildrenLimitInternal;decorationsThrottler;inClipboard;hoveredInternal;editing;htmlEditElement;expandAllButtonElement;selectionElement;hintElement;aiButtonContainer;contentElement;#Fe=new Map;#Ue=new Map;#_e=[];tagTypeContext;constructor(t,n){super(),this.nodeInternal=t,this.treeOutline=null,this.listItemElement.setAttribute("jslog",`${s.treeItem().parent("elementsTreeOutline").track({keydown:"ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Backspace|Delete|Enter|Space|Home|End",drag:!0,click:!0})}`),this.contentElement=this.listItemElement.createChild("div"),this.gutterContainer=this.contentElement.createChild("div","gutter-container"),this.gutterContainer.addEventListener("click",this.showContextMenu.bind(this));const o=new x.Icon.Icon;if(o.name="dots-horizontal",this.gutterContainer.append(o),this.decorationsElement=this.gutterContainer.createChild("div","hidden"),this.searchQuery=null,this.expandedChildrenLimitInternal=gs,this.decorationsThrottler=new e.Throttler.Throttler(100),this.inClipboard=!1,this.hoveredInternal=!1,this.editing=null,n)this.tagTypeContext={tagType:"CLOSING_TAG"};else{if(this.tagTypeContext={tagType:"OPENING_TAG",adornerContainer:this.contentElement.createChild("div","adorner-container hidden"),adorners:new Set,styleAdorners:new Set,adornersThrottler:new e.Throttler.Throttler(100),canAddAttributes:this.nodeInternal.nodeType()===Node.ELEMENT_NODE},this.updateStyleAdorners(),t.isAdFrameNode()){const e=p.AdornerManager.getRegisteredAdorner(p.AdornerManager.RegisteredAdorners.AD),t=this.adorn(e);i.Tooltip.Tooltip.install(t,ps(cs.thisFrameWasIdentifiedAsAnAd))}this.updateScrollAdorner()}this.expandAllButtonElement=null}static animateOnDOMUpdate(e){const t=e.listItemElement.querySelector(".webkit-html-tag-name");i.UIUtils.runCSSAnimationOnce(t||e.listItemElement,"dom-update-highlight")}static visibleShadowRoots(t){let i=t.shadowRoots();return i.length&&!e.Settings.Settings.instance().moduleSetting("show-ua-shadow-dom").get()&&(i=i.filter((function(e){return e.shadowRootType()!==n.DOMModel.DOMNode.ShadowRootTypes.UserAgent}))),i}static canShowInlineText(e){if(e.contentDocument()||e.templateContent()||ms.visibleShadowRoots(e).length||e.hasPseudoElements())return!1;if(e.nodeType()!==Node.ELEMENT_NODE)return!1;if(!e.firstChild||e.firstChild!==e.lastChild||e.firstChild.nodeType()!==Node.TEXT_NODE)return!1;return e.firstChild.nodeValue().length<80}static populateForcedPseudoStateItems(e,t){const n=["active","hover","focus","visited","focus-within","focus-visible"],i=t.domModel().cssModel().pseudoState(t),s=e.debugSection().appendSubMenuItem(ps(cs.forceState),!1,"force-state");for(const e of n){const t=!!i&&i.indexOf(e)>=0;s.defaultSection().appendCheckboxItem(":"+e,o.bind(null,e,!t),{checked:t,jslogContext:e})}function o(e,n){t.domModel().cssModel().forcePseudoState(t,e,n)}}isClosingTag(){return!us(this.tagTypeContext)}node(){return this.nodeInternal}isEditing(){return Boolean(this.editing)}highlightSearchResults(e){this.searchQuery=e,this.editing||this.highlightSearchResultsInternal()}hideSearchHighlights(){L.HighlightManager.HighlightManager.instance().removeHighlights(this.#_e),this.#_e=[]}setInClipboard(e){this.inClipboard!==e&&(this.inClipboard=e,this.listItemElement.classList.toggle("in-clipboard",e))}get hovered(){return this.hoveredInternal}set hovered(e){this.hoveredInternal!==e&&(e&&!this.aiButtonContainer?this.createAiButton():!e&&this.aiButtonContainer&&(this.aiButtonContainer.remove(),delete this.aiButtonContainer),this.hoveredInternal=e,this.listItemElement&&(e?(this.createSelection(),this.listItemElement.classList.add("hovered")):this.listItemElement.classList.remove("hovered")))}addIssue(e){this.#Fe.has(e.primaryKey())||(this.#Fe.set(e.primaryKey(),e),this.#Be(e))}#Be(e){const t=ki(e);t&&(t.attribute?this.#Ve(t.attribute,e):this.#He(e))}get issuesByNodeElement(){return this.#Ue}#Ve(e,t){const n=this.listItemElement.getElementsByClassName("webkit-html-tag")[0].getElementsByClassName("webkit-html-attribute");for(const i of n)if(i.getElementsByClassName("webkit-html-attribute-name")[0].textContent===e){const e=i.getElementsByClassName("webkit-html-attribute-name")[0];e.classList.add("violating-element"),this.#We(e,t)}}#He(e){const t=this.listItemElement.getElementsByClassName("webkit-html-tag-name")[0];t.classList.add("violating-element"),this.#We(t,e)}#We(e,t){this.#Ue.has(e)?this.#Ue.get(e)?.push(t):this.#Ue.set(e,[t])}expandedChildrenLimit(){return this.expandedChildrenLimitInternal}setExpandedChildrenLimit(e){this.expandedChildrenLimitInternal=e}createSlotLink(t){if(us(this.tagTypeContext)&&t){const n=p.AdornerManager.getRegisteredAdorner(p.AdornerManager.RegisteredAdorners.SLOT);this.tagTypeContext.slot=this.adornSlot(n,this.tagTypeContext);const i=t.deferredNode;this.tagTypeContext.slot.addEventListener("click",(()=>{i.resolve((t=>{e.Revealer.reveal(t)}))})),this.tagTypeContext.slot.addEventListener("mousedown",(e=>e.consume()),!1)}}createSelection(){const e=this.contentElement;e&&(this.selectionElement||(this.selectionElement=document.createElement("div"),this.selectionElement.className="selection fill",this.selectionElement.style.setProperty("margin-left",-this.computeLeftIndent()+"px"),e.prepend(this.selectionElement)))}createHint(){if(this.contentElement&&!this.hintElement){this.hintElement=this.contentElement.createChild("span","selected-hint");const e="$0";i.Tooltip.Tooltip.install(this.hintElement,ps(cs.useSInTheConsoleToReferToThis,{PH1:e})),i.ARIAUtils.setHidden(this.hintElement,!0)}}createAiButton(){if(!(this.node().nodeType()===Node.ELEMENT_NODE)||!i.ActionRegistry.ActionRegistry.instance().hasAction("freestyler.elements-floating-button"))return;const e=i.ActionRegistry.ActionRegistry.instance().getAction("freestyler.elements-floating-button");if(this.contentElement&&!this.aiButtonContainer){this.aiButtonContainer=this.contentElement.createChild("span","ai-button-container");const t=new A.FloatingButton.FloatingButton({title:e.title(),iconName:"smart-assistant"});t.addEventListener("click",(t=>{t.stopPropagation(),this.select(!0,!1),e.execute()}),{capture:!0}),t.addEventListener("mousedown",(e=>{e.stopPropagation()}),{capture:!0}),this.aiButtonContainer.appendChild(t)}}onbind(){this.treeOutline&&!this.isClosingTag()&&this.treeOutline.treeElementByNode.set(this.nodeInternal,this)}onunbind(){this.editing&&this.editing.cancel(),this.treeOutline&&this.treeOutline.treeElementByNode.get(this.nodeInternal)===this&&this.treeOutline.treeElementByNode.delete(this.nodeInternal)}onattach(){this.hoveredInternal&&(this.createSelection(),this.listItemElement.classList.add("hovered")),this.updateTitle(),this.listItemElement.draggable=!0}async onpopulate(){if(this.treeOutline)return await this.treeOutline.populateTreeElement(this)}async expandRecursively(){await this.nodeInternal.getSubtree(-1,!0),await super.expandRecursively(Number.MAX_VALUE)}onexpand(){this.isClosingTag()||this.updateTitle()}oncollapse(){this.isClosingTag()||this.updateTitle()}select(e,t){return!this.editing&&super.select(e,t)}onselect(e){return!!this.treeOutline&&(this.treeOutline.suppressRevealAndSelect=!0,this.treeOutline.selectDOMNode(this.nodeInternal,e),e&&(this.nodeInternal.highlight(),o.userMetrics.actionTaken(o.UserMetrics.Action.ChangeInspectedNodeInElementsPanel)),this.createSelection(),this.createHint(),this.treeOutline.suppressRevealAndSelect=!1,!0)}ondelete(){if(!this.treeOutline)return!1;const e=this.treeOutline.findTreeElement(this.nodeInternal);return e?e.remove():this.remove(),!0}onenter(){return!this.editing&&(this.startEditing(),!0)}selectOnMouseDown(e){super.selectOnMouseDown(e),this.editing||e.detail>=2&&e.preventDefault()}ondblclick(e){return this.editing||this.isClosingTag()||this.startEditingTarget(e.target)||this.isExpandable()&&!this.expanded&&this.expand(),!1}hasEditableNode(){return!this.nodeInternal.isShadowRoot()&&!this.nodeInternal.ancestorUserAgentShadowRoot()}insertInLastAttributePosition(e,t){if(e.getElementsByClassName("webkit-html-attribute").length>0)e.insertBefore(t,e.lastChild);else if(null!==e.textContent){const n=e.textContent.match(/^<(.*?)>$/);if(!n)return;const s=n[1];e.textContent="",i.UIUtils.createTextChild(e,"<"+s),e.appendChild(t),i.UIUtils.createTextChild(e,">")}}startEditingTarget(e){if(!this.treeOutline||this.treeOutline.selectedDOMNode()!==this.nodeInternal)return!1;if(this.nodeInternal.nodeType()!==Node.ELEMENT_NODE&&this.nodeInternal.nodeType()!==Node.TEXT_NODE)return!1;const t=e.enclosingNodeOrSelfWithClass("webkit-html-text-node");if(t)return this.startEditingTextNode(t);const n=e.enclosingNodeOrSelfWithClass("webkit-html-attribute");if(n)return this.startEditingAttribute(n,e);const i=e.enclosingNodeOrSelfWithClass("webkit-html-tag-name");if(i)return this.startEditingTagName(i);return!!e.enclosingNodeOrSelfWithClass("add-attribute")&&this.addNewAttribute()}showContextMenu(e){this.treeOutline&&this.treeOutline.showContextMenu(this,e)}populateTagContextMenu(e,t){const n=this.isClosingTag()&&this.treeOutline?this.treeOutline.findTreeElement(this.nodeInternal):this;if(!n)return;e.editSection().appendItem(ps(cs.addAttribute),n.addNewAttribute.bind(n),{jslogContext:"add-attribute"});const i=t.target,s=i.enclosingNodeOrSelfWithClass("webkit-html-attribute"),o=i.enclosingNodeOrSelfWithClass("add-attribute");s&&!o&&e.editSection().appendItem(ps(cs.editAttribute),this.startEditingAttribute.bind(this,s,i),{jslogContext:"edit-attribute"}),this.populateNodeContextMenu(e),ms.populateForcedPseudoStateItems(e,n.node()),this.populateScrollIntoView(e),e.viewSection().appendItem(ps(cs.focus),(async()=>{await this.nodeInternal.focus()}),{jslogContext:"focus"})}populatePseudoElementContextMenu(e){0!==this.childCount()&&this.populateExpandRecursively(e),this.populateScrollIntoView(e)}populateExpandRecursively(e){e.viewSection().appendItem(ps(cs.expandRecursively),this.expandRecursively.bind(this),{jslogContext:"expand-recursively"})}populateScrollIntoView(e){e.viewSection().appendItem(ps(cs.scrollIntoView),(()=>this.nodeInternal.scrollIntoView()),{jslogContext:"scroll-into-view"})}populateTextContextMenu(e,t){this.editing||e.editSection().appendItem(ps(cs.editText),this.startEditingTextNode.bind(this,t),{jslogContext:"edit-text"}),this.populateNodeContextMenu(e)}populateNodeContextMenu(t){const s=this.hasEditableNode();s&&!this.editing&&t.editSection().appendItem(ps(cs.editAsHtml),this.editAsHTML.bind(this),{jslogContext:"elements.edit-as-html"});const o=this.nodeInternal.isShadowRoot(),r=i.KeyboardShortcut.KeyboardShortcut.shortcutToString.bind(null),a=i.KeyboardShortcut.Modifiers.CtrlOrMeta.value,l=this.treeOutline;if(!l)return;let d;i.ActionRegistry.ActionRegistry.instance().hasAction("freestyler.element-panel-context")&&t.footerSection().appendAction("freestyler.element-panel-context"),d=t.clipboardSection().appendItem(ps(cs.cut),l.performCopyOrCut.bind(l,!0,this.nodeInternal),{disabled:!this.hasEditableNode(),jslogContext:"cut"}),d.setShortcut(r("X",a));const c=t.clipboardSection().appendSubMenuItem(ps(cs.copy),!1,"copy"),h=c.section();if(o||(d=h.appendItem(ps(cs.copyOuterhtml),l.performCopyOrCut.bind(l,!1,this.nodeInternal),{jslogContext:"copy-outer-html"}),d.setShortcut(r("V",a))),this.nodeInternal.nodeType()===Node.ELEMENT_NODE&&(h.appendItem(ps(cs.copySelector),this.copyCSSPath.bind(this),{jslogContext:"copy-selector"}),h.appendItem(ps(cs.copyJsPath),this.copyJSPath.bind(this),{disabled:!xi(this.nodeInternal),jslogContext:"copy-js-path"}),h.appendItem(ps(cs.copyStyles),this.copyStyles.bind(this),{jslogContext:"elements.copy-styles"})),o||(h.appendItem(ps(cs.copyXpath),this.copyXPath.bind(this),{jslogContext:"copy-xpath"}),h.appendItem(ps(cs.copyFullXpath),this.copyFullXPath.bind(this),{jslogContext:"copy-full-xpath"})),!o){d=c.clipboardSection().appendItem(ps(cs.copyElement),l.performCopyOrCut.bind(l,!1,this.nodeInternal),{jslogContext:"copy-element"}),d.setShortcut(r("C",a));const e=!this.nodeInternal.parentNode||"#document"===this.nodeInternal.parentNode.nodeName();d=t.editSection().appendItem(ps(cs.duplicateElement),l.duplicateNode.bind(l,this.nodeInternal),{disabled:this.nodeInternal.isInShadowTree()||e,jslogContext:"elements.duplicate-element"})}d=t.clipboardSection().appendItem(ps(cs.paste),l.pasteNode.bind(l,this.nodeInternal),{disabled:!l.canPaste(this.nodeInternal),jslogContext:"paste"}),d.setShortcut(r("V",a)),d=t.debugSection().appendCheckboxItem(ps(cs.hideElement),l.toggleHideElement.bind(l,this.nodeInternal),{checked:l.isToggledToHidden(this.nodeInternal),jslogContext:"elements.hide-element"}),d.setShortcut(i.ShortcutRegistry.ShortcutRegistry.instance().shortcutTitleForAction("elements.hide-element")||""),s&&t.editSection().appendItem(ps(cs.deleteElement),this.remove.bind(this),{jslogContext:"delete-element"}),this.populateExpandRecursively(t),t.viewSection().appendItem(ps(cs.collapseChildren),this.collapseChildren.bind(this),{jslogContext:"collapse-children"});const p=new R.DeviceModeWrapper.ActionDelegate;t.viewSection().appendItem(ps(cs.captureNodeScreenshot),p.handleAction.bind(null,i.Context.Context.instance(),"emulation.capture-node-screenshot"),{jslogContext:"emulation.capture-node-screenshot"}),this.nodeInternal.frameOwnerFrameId()&&t.viewSection().appendItem(ps(cs.showFrameDetails),(()=>{const t=this.nodeInternal.frameOwnerFrameId();if(t){const i=n.FrameManager.FrameManager.instance().getFrame(t);e.Revealer.reveal(i)}}),{jslogContext:"show-frame-details"})}startEditing(){if(!this.treeOutline||this.treeOutline.selectedDOMNode()!==this.nodeInternal)return;const e=this.listItemElement;if(us(this.tagTypeContext)&&this.tagTypeContext.canAddAttributes){const t=e.getElementsByClassName("webkit-html-attribute")[0];return t?this.startEditingAttribute(t,t.getElementsByClassName("webkit-html-attribute-value")[0]):this.addNewAttribute()}if(this.nodeInternal.nodeType()===Node.TEXT_NODE){const t=e.getElementsByClassName("webkit-html-text-node")[0];if(t)return this.startEditingTextNode(t)}}addNewAttribute(){const e=document.createElement("span"),t=this.buildAttributeDOM(e," ","",null);t.style.marginLeft="2px",t.style.marginRight="2px",t.setAttribute("jslog",`${s.value("new-attribute").track({change:!0,resize:!0})}`);const n=this.listItemElement.getElementsByClassName("webkit-html-tag")[0];return this.insertInLastAttributePosition(n,t),t.scrollIntoViewIfNeeded(!0),this.startEditingAttribute(t,t)}triggerEditAttribute(e){const t=this.listItemElement.getElementsByClassName("webkit-html-attribute-name");for(let n=0,i=t.length;n<i;++n)if(t[n].textContent===e)for(let e=t[n].nextSibling;e;e=e.nextSibling)if(e.nodeType===Node.ELEMENT_NODE&&e.classList.contains("webkit-html-attribute-value"))return this.startEditingAttribute(e.parentElement,e)}startEditingAttribute(t,n){if(console.assert(this.listItemElement.isAncestor(t)),i.UIUtils.isBeingEdited(t))return!0;const s=t.getElementsByClassName("webkit-html-attribute-name")[0];if(!s)return!1;const o=s.textContent,r=t.getElementsByClassName("webkit-html-attribute-value")[0];n=r.isAncestor(n)?r:n;const a=o&&r?this.nodeInternal.getAttribute(o)?.replaceAll('"',"&quot;"):void 0;void 0!==a&&r.setTextContentTruncatedIfNeeded(a,ps(cs.valueIsTooLargeToEdit)),function e(t){if(t.nodeType!==Node.TEXT_NODE){if(t.nodeType===Node.ELEMENT_NODE)for(let n=t.firstChild;n;n=n.nextSibling)e(n)}else t.nodeValue=t.nodeValue?t.nodeValue.replace(/\u200B/g,""):""}(t);const l=new i.InplaceEditor.Config(this.attributeEditingCommitted.bind(this),this.editingCancelled.bind(this),o);e.ParsedURL.ParsedURL.fromString(r.textContent||"")||l.setPostKeydownFinishHandler((function(e){return i.UIUtils.handleElementValueModifications(e,t),""})),this.updateEditorHandles(t,l);const d=this.listItemElement.getComponentSelection();return d&&d.selectAllChildren(n),!0}startEditingTextNode(e){if(i.UIUtils.isBeingEdited(e))return!0;let t=this.nodeInternal;t.nodeType()===Node.ELEMENT_NODE&&t.firstChild&&(t=t.firstChild);const n=e.enclosingNodeOrSelfWithClass("webkit-html-text-node");n&&(n.textContent=t.nodeValue());const s=new i.InplaceEditor.Config(this.textNodeEditingCommitted.bind(this,t),this.editingCancelled.bind(this),null);this.updateEditorHandles(e,s);const o=this.listItemElement.getComponentSelection();return o&&o.selectAllChildren(e),!0}startEditingTagName(e){if(!e&&!(e=this.listItemElement.getElementsByClassName("webkit-html-tag-name")[0]))return!1;const t=e.textContent;if(null!==t&&fs.has(t.toLowerCase()))return!1;if(i.UIUtils.isBeingEdited(e))return!0;const n=this.distinctClosingTagElement();function s(){n&&e&&(n.textContent="</"+e.textContent+">")}const o=e=>{" "===e.key&&(this.editing&&this.editing.commit(),e.consume(!0))};e.addEventListener("keyup",s,!1),e.addEventListener("keydown",o,!1);const r=new i.InplaceEditor.Config(function(t,n,i,r,a){e&&(e.removeEventListener("keyup",s,!1),e.removeEventListener("keydown",o,!1),this.tagNameEditingCommitted(t,n,i,r,a))}.bind(this),function(t,n){e&&(e.removeEventListener("keyup",s,!1),e.removeEventListener("keydown",o,!1),this.editingCancelled(t,n))}.bind(this),t);this.updateEditorHandles(e,r);const a=this.listItemElement.getComponentSelection();return a&&a.selectAllChildren(e),!0}updateEditorHandles(e,t){const n=i.InplaceEditor.InplaceEditor.startEditing(e,t);this.editing=n?{commit:n.commit,cancel:n.cancel,editor:void 0,resize:()=>{}}:null}async startEditingAsHTML(e,t,n){if(null===n)return;if(this.editing)return;const i=Es(n).text;this.htmlEditElement=document.createElement("div"),this.htmlEditElement.className="source-code elements-tree-editor";let s=this.listItemElement.firstChild;for(;s;)s.style.display="none",s=s.nextSibling;this.childrenListElement&&(this.childrenListElement.style.display="none"),this.listItemElement.append(this.htmlEditElement),this.htmlEditElement.addEventListener("keydown",(e=>{"Escape"===e.key&&e.consume(!0)}));const o=new O.TextEditor.TextEditor(N.EditorState.create({doc:i,extensions:[N.keymap.of([{key:"Mod-Enter",run:()=>(this.editing?.commit(),!0)},{key:"Escape",run:()=>(this.editing?.cancel(),!0)}]),O.Config.baseConfiguration(i),O.Config.closeBrackets.instance(),O.Config.autocompletion.instance(),N.html.html({autoCloseTags:!1,selfClosingTags:!0}),O.Config.domWordWrap.instance(),N.EditorView.theme({"&.cm-editor":{maxHeight:"300px"},".cm-scroller":{overflowY:"auto"}}),N.EditorView.domEventHandlers({focusout:e=>{const t=e.relatedTarget;t&&!t.isSelfOrDescendant(o)&&this.editing&&this.editing.commit()}})]}));function r(){this.treeOutline&&this.htmlEditElement&&(this.htmlEditElement.style.width=this.treeOutline.visibleWidth()-this.computeLeftIndent()-30+"px")}function a(){if(!this.editing?.editor)return;this.editing=null,this.htmlEditElement&&this.listItemElement.removeChild(this.htmlEditElement),this.htmlEditElement=void 0,this.childrenListElement&&this.childrenListElement.style.removeProperty("display");let e=this.listItemElement.firstChild;for(;e;)e.style.removeProperty("display"),e=e.nextSibling;this.treeOutline&&(this.treeOutline.setMultilineEditing(null),this.treeOutline.focus()),t()}this.editing={commit:function(){this.editing?.editor&&e(i,this.editing.editor.state.doc.toString());a.call(this)}.bind(this),cancel:a.bind(this),editor:o,resize:r.bind(this)},r.call(this),this.htmlEditElement.appendChild(o),o.editor.focus(),this.treeOutline&&this.treeOutline.setMultilineEditing(this.editing)}attributeEditingCommitted(e,t,n,i,s){this.editing=null;const o=this.treeOutline;function r(n){if(n&&this.editingCancelled(e,i),!s)return;o&&(o.runPendingUpdates(),o.focus());const r=this.nodeInternal.attributes();for(let e=0;e<r.length;++e)if(r[e].name===i)return void("backward"===s?0===e?this.startEditingTagName():this.triggerEditAttribute(r[e-1].name):e===r.length-1?this.addNewAttribute():this.triggerEditAttribute(r[e+1].name));"backward"===s?" "===t?r.length>0&&this.triggerEditAttribute(r[r.length-1].name):r.length>1&&this.triggerEditAttribute(r[r.length-2].name):"forward"===s&&(a.StringUtilities.isWhitespace(t)?this.startEditingTagName():this.addNewAttribute())}null===i||!i.trim()&&!t.trim()||n===t?(this.updateTitle(),r.call(this)):this.nodeInternal.setAttribute(i,t,r.bind(this))}tagNameEditingCommitted(e,t,n,i,s){this.editing=null;const o=this;function r(){const t=o.distinctClosingTagElement();t&&(t.textContent="</"+i+">"),o.editingCancelled(e,i),a.call(o)}function a(){if("forward"!==s)return void this.addNewAttribute();const e=this.nodeInternal.attributes();e.length>0?this.triggerEditAttribute(e[0].name):this.addNewAttribute()}if((t=t.trim())===n)return void r();const l=this.treeOutline,d=this.expanded;this.nodeInternal.setNodeName(t,((e,t)=>{if(e||!t)return void r();if(!l)return;const n=l.selectNodeAfterEdit(d,e,t);a.call(n)}))}textNodeEditingCommitted(e,t,n){this.editing=null,e.setNodeValue(n,function(){this.updateTitle()}.bind(this))}editingCancelled(e,t){this.editing=null,this.updateTitle()}distinctClosingTagElement(){if(this.expanded){const e=this.childrenListElement.querySelectorAll(".close");return e[e.length-1]}const e=this.listItemElement.getElementsByClassName("webkit-html-tag");return 1===e.length?null:e[e.length-1]}updateTitle(e){if(this.editing)return;const t=this.nodeTitleInfo(e||null);if(this.nodeInternal.nodeType()===Node.DOCUMENT_FRAGMENT_NODE&&this.nodeInternal.isInShadowTree()&&this.nodeInternal.shadowRootType()){this.childrenListElement.classList.add("shadow-root");let e=4;for(let t=this.nodeInternal;e&&t;t=t.parentNode)t.nodeType()===Node.DOCUMENT_FRAGMENT_NODE&&e--;e?this.childrenListElement.classList.add("shadow-root-depth-"+e):this.childrenListElement.classList.add("shadow-root-deep")}this.contentElement.removeChildren();this.contentElement.createChild("span","highlight").append(t),this.title=this.contentElement,this.updateDecorations(),this.contentElement.prepend(this.gutterContainer),us(this.tagTypeContext)&&this.contentElement.append(this.tagTypeContext.adornerContainer),delete this.selectionElement,delete this.hintElement,delete this.aiButtonContainer,this.selected&&(this.createSelection(),this.createHint());for(const e of this.#Fe.values())this.#Be(e);this.highlightSearchResultsInternal()}computeLeftIndent(){let e=this.parent,t=0;for(;null!==e;)t++,e=e.parent;return 12*(t-2)+(this.isExpandable()&&this.isCollapsible()?1:12)}updateDecorations(){const e=this.computeLeftIndent();this.gutterContainer.style.left=-e+"px",this.listItemElement.style.setProperty("--indent",e+"px"),this.isClosingTag()||this.nodeInternal.nodeType()===Node.ELEMENT_NODE&&this.decorationsThrottler.schedule(this.updateDecorationsInternal.bind(this))}updateDecorationsInternal(){if(!this.treeOutline)return Promise.resolve();const e=this.nodeInternal;this.treeOutline.decoratorExtensions||(this.treeOutline.decoratorExtensions=ls());const t=new Map;for(const e of this.treeOutline.decoratorExtensions)t.set(e.marker,e);const n=[],s=[],o=[];function r(t,n){const i=n.decorate(t);i&&(t===e?s:o).push(i)}return e.traverseMarkers((function(e,i){const s=t.get(i);if(!s)return;n.push(Promise.resolve(s.decorator()).then(r.bind(null,e)))})),Promise.all(n).then(function(){if(this.decorationsElement.removeChildren(),this.decorationsElement.classList.add("hidden"),this.gutterContainer.classList.toggle("has-decorations",Boolean(s.length||o.length)),i.ARIAUtils.setLabel(this.decorationsElement,""),!s.length&&!o.length)return;const e=new Set,t=document.createElement("div");for(const n of s){t.createChild("div").textContent=n.title,e.add(n.color)}if(this.expanded&&!s.length)return;const n=new Set;if(o.length){let e=t.createChild("div");e.textContent=ps(cs.children);for(const i of o)e=t.createChild("div"),e.style.marginLeft="15px",e.textContent=i.title,n.add(i.color)}let r=0;a.call(this,e,"elements-gutter-decoration"),this.expanded||a.call(this,n,"elements-gutter-decoration elements-has-decorated-children");function a(e,t){for(const n of e){const e=this.decorationsElement.createChild("div",t);this.decorationsElement.classList.remove("hidden"),e.style.backgroundColor=n,e.style.borderColor=n,r&&(e.style.marginLeft=r+"px"),r+=3}}i.Tooltip.Tooltip.install(this.decorationsElement,t.textContent),i.ARIAUtils.setLabel(this.decorationsElement,t.textContent||"")}.bind(this))}buildAttributeDOM(e,t,n,o,r,l){const d=/[\/;:\)\]\}]/g;let c=0,h=0,p=0;function u(e,t){const n=Es(t);for(h=n.entityRanges.length,t=n.text.replace(d,((e,t)=>{for(;c<h&&n.entityRanges[c].offset<t;)n.entityRanges[c].offset+=p,++c;return p+=1,e+"​"}));c<h;)n.entityRanges[c].offset+=p,++c;e.setTextContentTruncatedIfNeeded(t),i.UIUtils.highlightRangesWithStyleClass(e,n.entityRanges,"webkit-html-entity-value")}const m=r||n.length>0,g=e.createChild("span","webkit-html-attribute");g.setAttribute("jslog",`${s.value("style"===t?"style-attribute":"attribute").track({change:!0,dblclick:!0})}`);const y=g.createChild("span","webkit-html-attribute-name");y.textContent=t,m&&i.UIUtils.createTextChild(g,'=​"');const f=g.createChild("span","webkit-html-attribute-value");function S(e){const t=l?l.resolveURL(e):null;if(null===t){const t=document.createElement("span");return u.call(this,t,e),t}(e=e.replace(d,"$&​")).startsWith("data:")&&(e=a.StringUtilities.trimMiddle(e,60));const n=l&&"a"===l.nodeName().toLowerCase()?i.XLink.XLink.create(t,e,"",!0,"image-url"):C.Linkifier.Linkifier.linkifyURL(t,{text:e,preventClick:!0,showColumnNumber:!1,inlineFrameIndex:0});return oe.setImageUrl(n,t)}o?.isAttributeModified(t)&&i.UIUtils.runCSSAnimationOnce(m?f:y,"dom-update-highlight");const E=l?l.nodeName().toLowerCase():"";switch(E&&("src"===t||"href"===t)&&n?f.appendChild(S.call(this,n)):("img"!==E&&"source"!==E||"srcset"!==t)&&("image"!==E||"xlink:href"!==t&&"href"!==t)?u.call(this,f,n):f.appendChild(v.call(this,n)),t){case"popovertarget":{const e=n?f:y;this.linkifyElementByRelation(e,"PopoverTarget",ps(cs.showPopoverTarget));break}case"interesttarget":{const e=n?f:y;this.linkifyElementByRelation(e,"InterestTarget",ps(cs.showInterestTarget));break}}function v(e){const t=document.createDocumentFragment();let n=0;for(;e.length;){n++>0&&i.UIUtils.createTextChild(t," ");let s="",o="";const r=(e=e.trim()).search(/\s/);if(-1===r)s=e;else if(r>0&&","===e[r-1])s=e.substring(0,r);else{s=e.substring(0,r);const t=e.indexOf(",",r);o=-1!==t?e.substring(r,t+1):e.substring(r)}s&&(s.endsWith(",")?(t.appendChild(S.call(this,s.substring(0,s.length-1))),i.UIUtils.createTextChild(t,",")):t.appendChild(S.call(this,s))),o&&i.UIUtils.createTextChild(t,o),e=e.substring(s.length+o.length)}return t}return m&&i.UIUtils.createTextChild(g,'"'),g}async linkifyElementByRelation(t,n,i){const s=await this.nodeInternal.domModel().getElementByRelation(this.nodeInternal.id,n),o=this.nodeInternal.domModel().nodeForId(s);if(!o)return;const r=await e.Linkifier.Linkifier.linkify(o,{preventKeyboardFocus:!0,tooltip:i,textContent:t.textContent||void 0,isDynamicLink:!0});t.removeChildren(),t.append(r)}buildPseudoElementDOM(e,t){e.createChild("span","webkit-html-pseudo-element").textContent=t,i.UIUtils.createTextChild(e,"​")}buildTagDOM(e,t,n,o,r){const a=this.nodeInternal,l=["webkit-html-tag"];n&&o&&l.push("close");const d=e.createChild("span",l.join(" "));i.UIUtils.createTextChild(d,"<");const c=d.createChild("span",n?"webkit-html-close-tag-name":"webkit-html-tag-name");if(n||c.setAttribute("jslog",`${s.value("tag-name").track({change:!0,dblclick:!0})}`),c.textContent=(n?"/":"")+t,!n){if(a.hasAttributes()){const e=a.attributes();for(let t=0;t<e.length;++t){const n=e[t];i.UIUtils.createTextChild(d," "),this.buildAttributeDOM(d,n.name,n.value,r,!1,a)}}if(r){let e=r.hasRemovedAttributes()||r.hasRemovedChildren();e=e||!this.expanded&&r.hasChangedChildren(),e&&i.UIUtils.runCSSAnimationOnce(c,"dom-update-highlight")}}i.UIUtils.createTextChild(d,">"),i.UIUtils.createTextChild(e,"​"),d.textContent&&i.ARIAUtils.setLabel(d,d.textContent)}nodeTitleInfo(e){const t=this.nodeInternal,n=document.createDocumentFragment(),o=()=>{this.highlightSearchResultsInternal()};switch(t.nodeType()){case Node.ATTRIBUTE_NODE:this.buildAttributeDOM(n,t.name,t.value,e,!0);break;case Node.ELEMENT_NODE:{if(t.pseudoType()){let e=t.nodeName();const i=t.pseudoIdentifier();i&&(e+=`(${i})`),this.buildPseudoElementDOM(n,e);break}const o=t.nodeNameInCorrectCase();if(this.isClosingTag()){this.buildTagDOM(n,o,!0,!0,e);break}if(this.buildTagDOM(n,o,!1,!1,e),this.isExpandable()){if(!this.expanded){const t=new p.ElementsTreeExpandButton.ElementsTreeExpandButton;t.data={clickHandler:()=>this.expand()},n.appendChild(t);const s=document.createElement("span");s.textContent="…",s.style.fontSize="0",n.appendChild(s),i.UIUtils.createTextChild(n,"​"),this.buildTagDOM(n,o,!0,!1,e)}break}if(ms.canShowInlineText(t)){const r=n.createChild("span","webkit-html-text-node");r.setAttribute("jslog",`${s.value("text-node").track({change:!0,dblclick:!0})}`);const l=t.firstChild;if(!l)throw new Error("ElementsTreeElement._nodeTitleInfo expects node.firstChild to be defined.");const d=Es(l.nodeValue());r.textContent=a.StringUtilities.collapseWhitespace(d.text),i.UIUtils.highlightRangesWithStyleClass(r,d.entityRanges,"webkit-html-entity-value"),i.UIUtils.createTextChild(n,"​"),this.buildTagDOM(n,o,!0,!1,e),e?.hasChangedChildren()&&i.UIUtils.runCSSAnimationOnce(r,"dom-update-highlight"),e?.isCharDataModified()&&i.UIUtils.runCSSAnimationOnce(r,"dom-update-highlight");break}!this.treeOutline?.isXMLMimeType&&ys.has(o)||this.buildTagDOM(n,o,!0,!1,e);break}case Node.TEXT_NODE:if(t.parentNode&&"script"===t.parentNode.nodeName().toLowerCase()){const e=n.createChild("span","webkit-html-text-node webkit-html-js-node");e.setAttribute("jslog",`${s.value("script-text-node").track({change:!0,dblclick:!0})}`);const i=t.nodeValue();e.textContent=i.replace(/^[\n\r]+|\s+$/g,""),P.CodeHighlighter.highlightNode(e,"text/javascript").then(o)}else if(t.parentNode&&"style"===t.parentNode.nodeName().toLowerCase()){const e=n.createChild("span","webkit-html-text-node webkit-html-css-node");e.setAttribute("jslog",`${s.value("css-text-node").track({change:!0,dblclick:!0})}`);const i=t.nodeValue();e.textContent=i.replace(/^[\n\r]+|\s+$/g,""),P.CodeHighlighter.highlightNode(e,"text/css").then(o)}else{i.UIUtils.createTextChild(n,'"');const o=n.createChild("span","webkit-html-text-node");o.setAttribute("jslog",`${s.value("text-node").track({change:!0,dblclick:!0})}`);const r=Es(t.nodeValue());o.textContent=a.StringUtilities.collapseWhitespace(r.text),i.UIUtils.highlightRangesWithStyleClass(o,r.entityRanges,"webkit-html-entity-value"),i.UIUtils.createTextChild(n,'"'),e?.isCharDataModified()&&i.UIUtils.runCSSAnimationOnce(o,"dom-update-highlight")}break;case Node.COMMENT_NODE:{const e=n.createChild("span","webkit-html-comment");i.UIUtils.createTextChild(e,"\x3c!--"+t.nodeValue()+"--\x3e");break}case Node.DOCUMENT_TYPE_NODE:{const e=n.createChild("span","webkit-html-doctype");i.UIUtils.createTextChild(e,"<!DOCTYPE "+t.nodeName()),t.publicId?(i.UIUtils.createTextChild(e,' PUBLIC "'+t.publicId+'"'),t.systemId&&i.UIUtils.createTextChild(e,' "'+t.systemId+'"')):t.systemId&&i.UIUtils.createTextChild(e,' SYSTEM "'+t.systemId+'"'),t.internalSubset&&i.UIUtils.createTextChild(e," ["+t.internalSubset+"]"),i.UIUtils.createTextChild(e,">");break}case Node.CDATA_SECTION_NODE:{const e=n.createChild("span","webkit-html-text-node");i.UIUtils.createTextChild(e,"<![CDATA["+t.nodeValue()+"]]>");break}case Node.DOCUMENT_NODE:{const e=n.createChild("span");i.UIUtils.createTextChild(e,"#document (");const s=t.documentURL;e.appendChild(C.Linkifier.Linkifier.linkifyURL(s,{text:s,preventClick:!0,showColumnNumber:!1,inlineFrameIndex:0})),i.UIUtils.createTextChild(e,")");break}case Node.DOCUMENT_FRAGMENT_NODE:n.createChild("span","webkit-html-fragment").textContent=a.StringUtilities.collapseWhitespace(t.nodeNameInCorrectCase());break;default:{const e=a.StringUtilities.collapseWhitespace(t.nodeNameInCorrectCase());i.UIUtils.createTextChild(n,e)}}return n}remove(){if(this.nodeInternal.pseudoType())return;this.parent&&this.nodeInternal.parentNode&&this.nodeInternal.parentNode.nodeType()!==Node.DOCUMENT_NODE&&this.nodeInternal.removeNode()}toggleEditAsHTML(e,t){if(this.editing&&this.htmlEditElement)return void this.editing.commit();if(!1===t)return;function n(t){e&&e(!t)}const i=this.nodeInternal;i.getOuterHTML().then(this.startEditingAsHTML.bind(this,(function(e,t){e!==t&&i.setOuterHTML(t,n)}),(function(){e&&e(!1)})))}copyCSSPath(){o.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(wi(this.nodeInternal,!0))}copyJSPath(){o.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(Ti(this.nodeInternal,!0))}copyXPath(){o.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(Ni(this.nodeInternal,!0))}copyFullXPath(){o.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(Ni(this.nodeInternal,!1))}async copyStyles(){const t=this.nodeInternal,i=t.domModel().cssModel(),s=await i.cachedMatchedCascadeForNode(t);if(!s)return;const r=e.Settings.Settings.instance().moduleSetting("text-editor-indent").get(),a=[];for(const e of s.nodeStyles().reverse())for(const t of e.leadingProperties())t.parsedOk&&!t.disabled&&t.activeInStyle()&&!t.implicit&&(s.isInherited(e)&&!n.CSSMetadata.cssMetadata().isPropertyInherited(t.name)||e.parentRule?.isUserAgent()||"Active"===s.propertyState(t)&&a.push(`${r}${t.name}: ${t.value};`));o.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(a.join("\n"))}highlightSearchResultsInternal(){if(this.hideSearchHighlights(),!this.searchQuery)return;const e=this.listItemElement.textContent||"",t=a.StringUtilities.createPlainTextSearchRegex(this.searchQuery,"gi"),n=[];let i=t.exec(e);for(;i;)n.push(new v.TextRange.SourceRange(i.index,i[0].length)),i=t.exec(e);n.length||n.push(new v.TextRange.SourceRange(0,e.length)),this.#_e=L.HighlightManager.HighlightManager.instance().highlightOrderedTextRanges(this.listItemElement,n)}editAsHTML(){e.Revealer.reveal(this.node()).then((()=>i.ActionRegistry.ActionRegistry.instance().getAction("elements.edit-as-html").execute()))}adorn({name:e},t){let n=t;n||(n=document.createElement("span"),n.textContent=e);const i=new I.Adorner.Adorner;return i.data={name:e,content:n,jslogContext:e},us(this.tagTypeContext)&&(this.tagTypeContext.adorners.add(i),Ls.instance().registerAdorner(i),this.updateAdorners(this.tagTypeContext)),i}adornSlot({name:e},t){const n=x.Icon.create("select-element"),i=document.createElement("span");i.textContent=e;const s=document.createElement("span");s.append(n),s.append(i),s.classList.add("adorner-with-icon");const o=new I.Adorner.Adorner;return o.data={name:e,content:s,jslogContext:"slot"},t.adorners.add(o),Ls.instance().registerAdorner(o),this.updateAdorners(t),o}adornMedia({name:e}){const t=document.createElement("span");t.textContent=e,t.classList.add("adorner-with-icon");const n=x.Icon.create("select-element");t.append(n);const i=new I.Adorner.Adorner;return i.data={name:e,content:t,jslogContext:"media"},us(this.tagTypeContext)&&(this.tagTypeContext.adorners.add(i),Ls.instance().registerAdorner(i),this.updateAdorners(this.tagTypeContext)),i}removeAdorner(e,t){Ls.instance().deregisterAdorner(e),e.remove(),t.adorners.delete(e),t.styleAdorners.delete(e),this.updateAdorners(t)}removeAdornersByType(e){if(us(this.tagTypeContext))for(const t of this.tagTypeContext.adorners)t.name!==e&&e||this.removeAdorner(t,this.tagTypeContext)}updateAdorners(e){e.adornersThrottler.schedule(this.updateAdornersInternal.bind(null,e))}updateAdornersInternal(e){const t=e.adornerContainer;if(!t)return Promise.resolve();const n=[...e.adorners].sort(Ss);e.slot&&n.push(e.slot),t.removeChildren();for(const e of n)t.appendChild(e);return t.classList.toggle("hidden",0===n.length),Promise.resolve()}async updateStyleAdorners(){if(!us(this.tagTypeContext))return;const e=this.node(),t=e.id;if(e.nodeType()===Node.COMMENT_NODE||e.nodeType()===Node.DOCUMENT_FRAGMENT_NODE||e.nodeType()===Node.TEXT_NODE||void 0===t)return;const n=await e.domModel().cssModel().getLayoutPropertiesFromComputedStyle(t);for(const e of this.tagTypeContext.styleAdorners)this.removeAdorner(e,this.tagTypeContext);n&&(n.isGrid&&this.pushGridAdorner(this.tagTypeContext,n.isSubgrid),n.isFlex&&this.pushFlexAdorner(this.tagTypeContext),n.hasScroll&&this.pushScrollSnapAdorner(this.tagTypeContext),n.isContainer&&this.pushContainerAdorner(this.tagTypeContext),e.isMediaNode()&&this.pushMediaAdorner(this.tagTypeContext))}pushGridAdorner(e,t){const n=this.node(),i=n.id;if(!i)return;const s=p.AdornerManager.getRegisteredAdorner(t?p.AdornerManager.RegisteredAdorners.SUBGRID:p.AdornerManager.RegisteredAdorners.GRID),o=this.adorn(s);o.classList.add("grid");o.addInteraction((()=>{o.isActive()?n.domModel().overlayModel().highlightGridInPersistentOverlay(i):n.domModel().overlayModel().hideGridInPersistentOverlay(i)}),{isToggle:!0,shouldPropagateOnKeydown:!1,ariaLabelDefault:ps(cs.enableGridMode),ariaLabelActive:ps(cs.disableGridMode)}),n.domModel().overlayModel().addEventListener("PersistentGridOverlayStateChanged",(e=>{const{nodeId:t,enabled:n}=e.data;t===i&&o.toggle(n)})),e.styleAdorners.add(o),n.domModel().overlayModel().isHighlightedGridInPersistentOverlay(i)&&o.toggle(!0)}pushScrollSnapAdorner(e){const t=this.node(),n=t.id;if(!n)return;const i=p.AdornerManager.getRegisteredAdorner(p.AdornerManager.RegisteredAdorners.SCROLL_SNAP),s=this.adorn(i);s.classList.add("scroll-snap");s.addInteraction((()=>{const e=t.domModel().overlayModel();s.isActive()?e.highlightScrollSnapInPersistentOverlay(n):e.hideScrollSnapInPersistentOverlay(n)}),{isToggle:!0,shouldPropagateOnKeydown:!1,ariaLabelDefault:ps(cs.enableScrollSnap),ariaLabelActive:ps(cs.disableScrollSnap)}),t.domModel().overlayModel().addEventListener("PersistentScrollSnapOverlayStateChanged",(e=>{const{nodeId:t,enabled:i}=e.data;t===n&&s.toggle(i)})),e.styleAdorners.add(s),t.domModel().overlayModel().isHighlightedScrollSnapInPersistentOverlay(n)&&s.toggle(!0)}pushFlexAdorner(e){const t=this.node(),n=t.id;if(!n)return;const i=p.AdornerManager.getRegisteredAdorner(p.AdornerManager.RegisteredAdorners.FLEX),s=this.adorn(i);s.classList.add("flex");s.addInteraction((()=>{const e=t.domModel().overlayModel();s.isActive()?e.highlightFlexContainerInPersistentOverlay(n):e.hideFlexContainerInPersistentOverlay(n)}),{isToggle:!0,shouldPropagateOnKeydown:!1,ariaLabelDefault:ps(cs.enableFlexMode),ariaLabelActive:ps(cs.disableFlexMode)}),t.domModel().overlayModel().addEventListener("PersistentFlexContainerOverlayStateChanged",(e=>{const{nodeId:t,enabled:i}=e.data;t===n&&s.toggle(i)})),e.styleAdorners.add(s),t.domModel().overlayModel().isHighlightedFlexContainerInPersistentOverlay(n)&&s.toggle(!0)}pushContainerAdorner(e){const t=this.node(),n=t.id;if(!n)return;const i=p.AdornerManager.getRegisteredAdorner(p.AdornerManager.RegisteredAdorners.CONTAINER),s=this.adorn(i);s.classList.add("container");s.addInteraction((()=>{const e=t.domModel().overlayModel();s.isActive()?e.highlightContainerQueryInPersistentOverlay(n):e.hideContainerQueryInPersistentOverlay(n)}),{isToggle:!0,shouldPropagateOnKeydown:!1,ariaLabelDefault:ps(cs.enableScrollSnap),ariaLabelActive:ps(cs.disableScrollSnap)}),t.domModel().overlayModel().addEventListener("PersistentContainerQueryOverlayStateChanged",(e=>{const{nodeId:t,enabled:i}=e.data;t===n&&s.toggle(i)})),e.styleAdorners.add(s),t.domModel().overlayModel().isHighlightedContainerQueryInPersistentOverlay(n)&&s.toggle(!0)}pushMediaAdorner(e){if(!this.node().id)return;const t=p.AdornerManager.getRegisteredAdorner(p.AdornerManager.RegisteredAdorners.MEDIA),n=this.adornMedia(t);n.classList.add("media");n.addInteraction((()=>{i.ViewManager.ViewManager.instance().showView("medias")}),{isToggle:!1,shouldPropagateOnKeydown:!1,ariaLabelDefault:ps(cs.openMediaPanel),ariaLabelActive:ps(cs.openMediaPanel)}),e.styleAdorners.add(n)}updateScrollAdorner(){if(!us(this.tagTypeContext))return;const e=this.tagTypeContext.adorners.values().find((e=>e.name===p.AdornerManager.RegisteredAdorners.SCROLL)),t="HTML"===this.node().nodeName()&&this.node().ownerDocument?.isScrollable()||"#document"!==this.node().nodeName()&&this.node().isScrollable();t&&!e?this.pushScrollAdorner():!t&&e&&this.removeAdorner(e,this.tagTypeContext)}pushScrollAdorner(){const e=p.AdornerManager.getRegisteredAdorner(p.AdornerManager.RegisteredAdorners.SCROLL),t=this.adorn(e);i.Tooltip.Tooltip.install(t,ps(cs.elementHasScrollableOverflow)),t.classList.add("scroll")}}const gs=500,ys=new Set(["area","base","basefont","br","canvas","col","command","embed","frame","hr","img","input","keygen","link","menuitem","meta","param","source","track","wbr"]),fs=new Set(["html","head","body"]);function Ss(e,t){const n=p.AdornerManager.compareAdornerNamesByCategory(t.name,t.name);return 0===n?e.name.localeCompare(t.name):n}function Es(e){let t="",n=0;const i=[],s=Xi;for(let o=0,r=e.length;o<r;++o){const r=e.charAt(o);if(s.has(r)){t+=e.substring(n,o);const a="&"+s.get(r)+";";i.push(new v.TextRange.SourceRange(t.length,a.length)),t+=a,n=o+1}}return t&&(t+=e.substring(n)),{text:t||e,entityRanges:i}}s.registerParentProvider("elementsTreeOutline",(function(e){const t=i.TreeOutline.TreeElement.getTreeElementBylistItemNode(e);return t?.treeOutline?.contentElement}));var Cs=Object.freeze({__proto__:null,EditTagBlocklist:fs,ElementsTreeElement:ms,ForbiddenClosingTagElements:ys,InitialChildrenLimit:gs,adornerComparator:Ss,convertUnicodeCharsToHTMLEntities:Es,isOpeningTag:us});class vs{throttler;treeOutline;currentHighlightedElement;alreadyExpandedParentElement;pendingHighlightNode;isModifyingTreeOutline;constructor(e,t){this.throttler=t,this.treeOutline=e,this.treeOutline.addEventListener(i.TreeOutline.Events.ElementExpanded,this.clearState,this),this.treeOutline.addEventListener(i.TreeOutline.Events.ElementCollapsed,this.clearState,this),this.treeOutline.addEventListener(Yi.Events.SelectedNodeChanged,this.clearState,this),n.TargetManager.TargetManager.instance().addModelListener(n.OverlayModel.OverlayModel,"HighlightNodeRequested",this.highlightNode,this,{scoped:!0}),n.TargetManager.TargetManager.instance().addModelListener(n.OverlayModel.OverlayModel,"InspectModeWillBeToggled",this.clearState,this,{scoped:!0}),this.currentHighlightedElement=null,this.alreadyExpandedParentElement=null,this.pendingHighlightNode=null,this.isModifyingTreeOutline=!1}highlightNode(t){if(!e.Settings.Settings.instance().moduleSetting("highlight-node-on-hover-in-overlay").get())return;const n=t.data;this.throttler.schedule((async()=>{this.highlightNodeInternal(this.pendingHighlightNode),this.pendingHighlightNode=null})),this.pendingHighlightNode=this.treeOutline===Yi.forDOMModel(n.domModel())?n:null}highlightNodeInternal(e){this.isModifyingTreeOutline=!0;let t=null;if(this.currentHighlightedElement){let e=this.currentHighlightedElement;for(;e&&e!==this.alreadyExpandedParentElement;){e.expanded&&e.collapse();const t=e.parent;e=t instanceof ms?t:null}}if(this.currentHighlightedElement=null,this.alreadyExpandedParentElement=null,e){let n=e;const i=this.treeOutline.treeElementByNode,s=e=>{const t=i.get(e);return!t||!t.expanded};for(;n&&s(n);)n=n.parentNode;this.alreadyExpandedParentElement=n?i.get(n):this.treeOutline.rootElement(),t=this.treeOutline.createTreeElementFor(e)}this.currentHighlightedElement=t,this.treeOutline.setHoverEffect(t),t&&t.reveal(!0),this.isModifyingTreeOutline=!1}clearState(){this.isModifyingTreeOutline||(this.currentHighlightedElement=null,this.alreadyExpandedParentElement=null,this.pendingHighlightNode=null)}}var bs=Object.freeze({__proto__:null,ElementsTreeElementHighlighter:vs}),ws={cssText:`.metrics{padding:8px;font-size:10px;text-align:center;white-space:nowrap;min-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;height:var(--metrics-height);contain:strict}:host(.invisible){visibility:hidden;height:0}:host(.collapsed){visibility:collapse;height: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,\n: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)}\n/*# sourceURL=${import.meta.resolve("./metricsSidebarPane.css")} */\n`};class xs extends Se{originalPropertyData;previousPropertyDataCandidate;inlineStyle;highlightMode;boxElements;isEditingMetrics;constructor(e){super(e),this.registerRequiredCSS(ws),this.originalPropertyData=null,this.previousPropertyDataCandidate=null,this.inlineStyle=null,this.highlightMode="",this.boxElements=[],this.contentElement.setAttribute("jslog",`${s.pane("styles-metrics")}`)}doUpdate(){if(this.isEditingMetrics)return Promise.resolve();const e=this.node(),t=this.cssModel();if(!e||e.nodeType()!==Node.ELEMENT_NODE||!t)return this.contentElement.removeChildren(),this.element.classList.add("collapsed"),Promise.resolve();if(!e.id)return Promise.resolve();const n=[t.getComputedStyle(e.id).then(function(t){t&&this.node()===e&&this.updateMetrics(t)}.bind(this)),t.getInlineStyles(e.id).then((t=>{t&&this.node()===e&&(this.inlineStyle=t.inlineStyle)}))];return Promise.all(n)}onCSSModelChanged(){this.update()}toggleVisibility(e){this.element.classList.toggle("invisible",!e)}getPropertyValueAsPx(e,t){const n=e.get(t);return n?Number(n.replace(/px$/,"")||0):0}getBox(e,t){const n="border"===t?"-width":"";return{left:this.getPropertyValueAsPx(e,t+"-left"+n),top:this.getPropertyValueAsPx(e,t+"-top"+n),right:this.getPropertyValueAsPx(e,t+"-right"+n),bottom:this.getPropertyValueAsPx(e,t+"-bottom"+n)}}highlightDOMNode(e,t,i){i.consume();const s=this.node();if(e&&s){if(this.highlightMode===t)return;this.highlightMode=t,s.highlight(t)}else this.highlightMode="",n.OverlayModel.OverlayModel.hideDOMNodeHighlight();for(const{element:e,name:n,backgroundColor:i}of this.boxElements){const o=!s||"all"===t||n===t;e.style.backgroundColor=o?i:"",e.classList.toggle("highlighted",o)}}updateMetrics(t){const n=document.createElement("div");n.className="metrics";const i=this;function o(e,t,n,i){const o=document.createElement("div");o.className=n;const r=("position"!==t?t+"-":"")+n+i;let l=e.get(r);return void 0===l||((""===l||"position"!==t&&"0px"===l||"position"===t&&"auto"===l)&&(l="‒"),l=l.replace(/px$/,""),l=a.NumberUtilities.toFixedIfFloating(l),o.textContent=l,o.setAttribute("jslog",`${s.value(r).track({dblclick:!0,keydown:"Enter|Escape|ArrowUp|ArrowDown|PageUp|PageDown",change:!0})}`),o.addEventListener("dblclick",this.startEditing.bind(this,o,t,r,e),!1)),o}function r(e){let t=e.get("width");if(!t)return"";t=t.replace(/px$/,"");const n=Number(t);if(!isNaN(n)&&"border-box"===e.get("box-sizing")){const s=i.getBox(e,"border"),o=i.getBox(e,"padding");t=(n-s.left-s.right-o.left-o.right).toString()}return a.NumberUtilities.toFixedIfFloating(t)}function l(e){let t=e.get("height");if(!t)return"";t=t.replace(/px$/,"");const n=Number(t);if(!isNaN(n)&&"border-box"===e.get("box-sizing")){const s=i.getBox(e,"border"),o=i.getBox(e,"padding");t=(n-s.top-s.bottom-o.top-o.bottom).toString()}return a.NumberUtilities.toFixedIfFloating(t)}const d=new Set(["table-cell","table-column","table-column-group","table-footer-group","table-header-group","table-row","table-row-group"]),c=new Set(["table-column","table-column-group","table-footer-group","table-header-group","table-row","table-row-group"]),h=new Set(["static"]),p=["content","padding","border","margin","position"],u=[e.Color.PageHighlight.Content,e.Color.PageHighlight.Padding,e.Color.PageHighlight.Border,e.Color.PageHighlight.Margin,e.Color.Legacy.fromRGBA([0,0,0,0])],m=["content","padding","border","margin","position"];let g=null;this.boxElements=[];for(let e=0;e<p.length;++e){const n=p[e],i=t.get("display"),a=t.get("position");if(!i||!a)continue;if("margin"===n&&d.has(i))continue;if("padding"===n&&c.has(i))continue;if("position"===n&&h.has(a))continue;const y=document.createElement("div");y.className=`${n} highlighted`;const f=u[e].asString("rgba")||"";if(y.style.backgroundColor=f,y.setAttribute("jslog",`${s.metricsBox().context(n).track({hover:!0})}`),y.addEventListener("mouseover",this.highlightDOMNode.bind(this,!0,"position"===n?"all":n),!1),this.boxElements.push({element:y,name:n,backgroundColor:f}),"content"===n){const e=document.createElement("span");e.textContent=r(t),e.addEventListener("dblclick",this.startEditing.bind(this,e,"width","width",t),!1),e.setAttribute("jslog",`${s.value("width").track({dblclick:!0,keydown:"Enter|Escape|ArrowUp|ArrowDown|PageUp|PageDown",change:!0})}`);const n=document.createElement("span");n.textContent=l(t),n.addEventListener("dblclick",this.startEditing.bind(this,n,"height","height",t),!1),n.setAttribute("jslog",`${s.value("height").track({dblclick:!0,keydown:"Enter|Escape|ArrowUp|ArrowDown|PageUp|PageDown",change:!0})}`);const i=document.createElement("span");i.textContent=" × ",y.appendChild(e),y.appendChild(i),y.appendChild(n)}else{const i="border"===n?"-width":"",s=document.createElement("div");s.className="label",s.textContent=m[e],y.appendChild(s),y.appendChild(o.call(this,t,n,"top",i)),y.appendChild(document.createElement("br")),y.appendChild(o.call(this,t,n,"left",i)),g&&y.appendChild(g),y.appendChild(o.call(this,t,n,"right",i)),y.appendChild(document.createElement("br")),y.appendChild(o.call(this,t,n,"bottom",i))}g=y}n.appendChild(g),n.addEventListener("mouseover",this.highlightDOMNode.bind(this,!1,"all"),!1),n.addEventListener("mouseleave",this.highlightDOMNode.bind(this,!1,"all"),!1),this.contentElement.removeChildren(),this.contentElement.appendChild(n),this.element.classList.remove("collapsed")}startEditing(e,t,n,s){if(i.UIUtils.isBeingEdited(e))return;const o={box:t,styleProperty:n,computedStyle:s,keyDownHandler:()=>{}},r=this.handleKeyDown.bind(this,o);o.keyDownHandler=r,e.addEventListener("keydown",r,!1),this.isEditingMetrics=!0;const a=new i.InplaceEditor.Config(this.editingCommitted.bind(this),this.editingCancelled.bind(this),o);i.InplaceEditor.InplaceEditor.startEditing(e,a);const l=e.getComponentSelection();l&&l.selectAllChildren(e)}handleKeyDown(e,t){const n=t.currentTarget;i.UIUtils.handleElementValueModifications(t,n,function(t,i){this.applyUserInput(n,i,t,e,!1)}.bind(this),void 0,(function(t,n,i){return"margin"!==e.styleProperty&&n<0&&(n=0),t+n+i}))}editingEnded(e,t){this.originalPropertyData=null,this.previousPropertyDataCandidate=null,e.removeEventListener("keydown",t.keyDownHandler,!1),delete this.isEditingMetrics}editingCancelled(e,t){if(this.inlineStyle)if(this.originalPropertyData)this.inlineStyle.allProperties()[this.originalPropertyData.index].setText(this.originalPropertyData.propertyText||"",!1);else{const e=this.inlineStyle.pastLastSourcePropertyIndex();e&&this.inlineStyle.allProperties()[e-1].setText("",!1)}this.editingEnded(e,t),this.update()}applyUserInput(t,n,i,s,o){if(!this.inlineStyle)return this.editingCancelled(t,s);if(o&&n===i)return this.editingCancelled(t,s);"position"===s.box||n&&"‒"!==n?"position"!==s.box||n&&"‒"!==n||(n="auto"):n="0px",n=n.toLowerCase(),/^\d+$/.test(n)&&(n+="px");const r=s.styleProperty,a=s.computedStyle;if("border-box"===a.get("box-sizing")&&("width"===r||"height"===r)){if(!n.match(/px$/))return void e.Console.Console.instance().error("For elements with box-sizing: border-box, only absolute content area dimensions can be applied");const t=this.getBox(a,"border"),i=this.getBox(a,"padding");let s=Number(n.replace(/px$/,""));if(isNaN(s))return;s+="width"===r?t.left+t.right+i.left+i.right:t.top+t.bottom+i.top+i.bottom,n=s+"px"}this.previousPropertyDataCandidate=null;const l=this.inlineStyle.allProperties();for(let e=0;e<l.length;++e){const t=l[e];if(t.name===s.styleProperty&&t.activeInStyle())return this.previousPropertyDataCandidate=t,void t.setValue(n,o,!0,d.bind(this))}function d(e){if(e){if(this.originalPropertyData||(this.originalPropertyData=this.previousPropertyDataCandidate),this.highlightMode){const e=this.node();if(!e)return;e.highlight(this.highlightMode)}o&&this.update()}}this.inlineStyle.appendProperty(s.styleProperty,n,d.bind(this))}editingCommitted(e,t,n,i){this.editingEnded(e,i),this.applyUserInput(e,t,n,i,!0)}}var Ts=Object.freeze({__proto__:null,MetricsSidebarPane:xs});const Ms={findByStringSelectorOrXpath:"Find by string, selector, or `XPath`",switchToAccessibilityTreeView:"Switch to Accessibility Tree view",switchToDomTreeView:"Switch to DOM Tree view",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"},Ns=r.i18n.registerUIStrings("panels/elements/ElementsPanel.ts",Ms),Is=r.i18n.getLocalizedString.bind(void 0,Ns),Ps=e=>{const t=new c.Button.Button,n=Is(e?Ms.switchToDomTreeView:Ms.switchToAccessibilityTreeView);return t.data={active:e,variant:"toolbar",iconName:"person",title:n,jslogContext:"toggle-accessibility-tree"},t.tabIndex=0,t.classList.add("axtree-button"),e&&t.classList.add("active"),t};let As;class Ls extends i.Panel.Panel{splitWidget;searchableViewInternal;mainContainer;domTreeContainer;splitMode;accessibilityTreeView;breadcrumbs;stylesWidget;computedStyleWidget;metricsWidget;treeOutlines=new Set;searchResults;currentSearchResultIndex;pendingNodeReveal;adornerManager;adornersByName;accessibilityTreeButton;domTreeButton;selectedNodeOnReset;hasNonDefaultSelectedNode;searchConfig;omitDefaultSelection;notFirstInspectElement;sidebarPaneView;stylesViewToReveal;nodeInsertedTaskRunner={queue:Promise.resolve(),run(e){this.queue=this.queue.then(e)}};cssStyleTrackerByCSSModel;constructor(){super("elements"),this.registerRequiredCSS(bi),this.splitWidget=new i.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.searchableViewInternal=new i.SearchableView.SearchableView(this,null),this.searchableViewInternal.setMinimalSearchQuerySize(0),this.searchableViewInternal.setMinimumSize(25,28),this.searchableViewInternal.setPlaceholder(Is(Ms.findByStringSelectorOrXpath));const s=this.searchableViewInternal.element;this.mainContainer=document.createElement("div"),this.domTreeContainer=document.createElement("div");const o=document.createElement("div");t.Runtime.experiments.isEnabled("full-accessibility-tree")&&this.initializeFullAccessibilityTreeView(),this.mainContainer.appendChild(this.domTreeContainer),s.appendChild(this.mainContainer),s.appendChild(o),i.ARIAUtils.markAsMain(this.domTreeContainer),i.ARIAUtils.setLabel(this.domTreeContainer,Is(Ms.domTreeExplorer)),this.splitWidget.setMainWidget(this.searchableViewInternal),this.splitMode=null,this.mainContainer.id="main-content",this.domTreeContainer.id="elements-content",this.domTreeContainer.tabIndex=-1,e.Settings.Settings.instance().moduleSetting("dom-word-wrap").get()&&this.domTreeContainer.classList.add("elements-wrap"),e.Settings.Settings.instance().moduleSetting("dom-word-wrap").addChangeListener(this.domWordWrapSettingChanged.bind(this)),o.id="elements-crumbs",this.domTreeButton&&(this.accessibilityTreeView=new q(this.domTreeButton,new h.TreeOutline.TreeOutline)),this.breadcrumbs=new p.ElementsBreadcrumbs.ElementsBreadcrumbs,this.breadcrumbs.addEventListener("breadcrumbsnodeselected",(e=>{this.crumbNodeSelected(e)})),o.appendChild(this.breadcrumbs);const r=new Ei;this.stylesWidget=new Fn(r),this.computedStyleWidget=new gi(r),this.metricsWidget=new xs(r),e.Settings.Settings.instance().moduleSetting("sidebar-position").addChangeListener(this.updateSidebarPosition.bind(this)),this.updateSidebarPosition(),this.cssStyleTrackerByCSSModel=new Map,n.TargetManager.TargetManager.instance().observeModels(n.DOMModel.DOMModel,this,{scoped:!0}),n.TargetManager.TargetManager.instance().addEventListener("NameChanged",(e=>this.targetNameChanged(e.data))),e.Settings.Settings.instance().moduleSetting("show-ua-shadow-dom").addChangeListener(this.showUAShadowDOMChanged.bind(this)),d.ExtensionServer.ExtensionServer.instance().addEventListener("SidebarPaneAdded",this.extensionSidebarPaneAdded,this),this.currentSearchResultIndex=-1,this.pendingNodeReveal=!1,this.adornerManager=new p.AdornerManager.AdornerManager(e.Settings.Settings.instance().moduleSetting("adorner-settings")),this.adornersByName=new Map}initializeFullAccessibilityTreeView(){this.accessibilityTreeButton=Ps(!1),this.accessibilityTreeButton.addEventListener("click",this.showAccessibilityTree.bind(this)),this.domTreeButton=Ps(!0),this.domTreeButton.addEventListener("click",this.showDOMTree.bind(this)),this.mainContainer.appendChild(this.accessibilityTreeButton)}showAccessibilityTree(){this.accessibilityTreeView&&this.splitWidget.setMainWidget(this.accessibilityTreeView)}showDOMTree(){this.splitWidget.setMainWidget(this.searchableViewInternal);const e=this.selectedDOMNode();if(!e)return;const t=this.treeElementForNode(e);t&&t.select()}static instance(e={forceNew:null}){const{forceNew:t}=e;return As&&!t||(As=new Ls),As}revealProperty(e){return this.sidebarPaneView&&this.stylesViewToReveal?this.sidebarPaneView.showView(this.stylesViewToReveal).then((()=>{this.stylesWidget.revealProperty(e)})):Promise.resolve()}resolveLocation(e){return this.sidebarPaneView||null}showToolbarPane(e,t){this.stylesWidget.showToolbarPane(e,t)}modelAdded(t){const i=t.parentModel();let s=i?Yi.forDOMModel(i):null;s||(s=new Yi(!0,!0),s.setWordWrap(e.Settings.Settings.instance().moduleSetting("dom-word-wrap").get()),s.addEventListener(Yi.Events.SelectedNodeChanged,this.selectedNodeChanged,this),s.addEventListener(Yi.Events.ElementsTreeUpdated,this.updateBreadcrumbIfNeeded,this),new vs(s,new e.Throttler.Throttler(100)),this.treeOutlines.add(s)),s.wireToDOMModel(t),this.setupStyleTracking(t.cssModel()),this.isShowing()&&this.wasShown(),this.domTreeContainer.hasFocus()&&s.focus(),t.addEventListener(n.DOMModel.Events.DocumentUpdated,this.documentUpdatedEvent,this),t.addEventListener(n.DOMModel.Events.NodeInserted,this.handleNodeInserted,this)}handleNodeInserted(e){this.nodeInsertedTaskRunner.run((async()=>{const t=e.data;if(!t.isViewTransitionPseudoNode())return;const n=t.domModel().cssModel(),i=await n.requestViaInspectorStylesheet(t.frameId());if(!i)return;const s=await n.getStyleSheetText(i.id);s?.includes(`${t.simpleSelector()} {`)||await n.setStyleSheetText(i.id,`${s}\n${t.simpleSelector()} {}`,!1)}))}modelRemoved(e){e.removeEventListener(n.DOMModel.Events.DocumentUpdated,this.documentUpdatedEvent,this),e.removeEventListener(n.DOMModel.Events.NodeInserted,this.handleNodeInserted,this);const t=Yi.forDOMModel(e);t&&(t.unwireFromDOMModel(e),e.parentModel()||(this.treeOutlines.delete(t),t.element.remove(),this.removeStyleTracking(e.cssModel())))}targetNameChanged(e){const t=e.model(n.DOMModel.DOMModel);if(!t)return;Yi.forDOMModel(t)}updateTreeOutlineVisibleWidth(){if(!this.treeOutlines.size)return;let e=this.splitWidget.element.offsetWidth;this.splitWidget.isVertical()&&(e-=this.splitWidget.sidebarSize());for(const t of this.treeOutlines)t.setVisibleWidth(e)}focus(){const e=this.treeOutlines.values().next();e.done?this.domTreeContainer.focus():e.value.focus()}searchableView(){return this.searchableViewInternal}wasShown(){super.wasShown(),i.Context.Context.instance().setFlavor(Ls,this);for(const e of this.treeOutlines)e.element.parentElement!==this.domTreeContainer&&this.domTreeContainer.appendChild(e.element);const e=n.TargetManager.TargetManager.instance().models(n.DOMModel.DOMModel,{scoped:!0});for(const t of e){if(t.parentModel())continue;const e=Yi.forDOMModel(t);e&&(e.setVisible(!0),e.rootDOMNode||(t.existingDocument()?(e.rootDOMNode=t.existingDocument(),this.documentUpdated(t)):t.requestDocument()))}}willHide(){n.OverlayModel.OverlayModel.hideDOMNodeHighlight();for(const e of this.treeOutlines)e.setVisible(!1),this.domTreeContainer.removeChild(e.element);super.willHide(),i.Context.Context.instance().setFlavor(Ls,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);const{focus:s}=e.data;for(const e of this.treeOutlines)t&&Yi.forDOMModel(t.domModel())===e||e.selectDOMNode(null);if(t){const e=[p.Helper.legacyNodeToElementsComponentsNode(t)];for(let n=t.parentNode;n;n=n.parentNode)e.push(p.Helper.legacyNodeToElementsComponentsNode(n));this.breadcrumbs.data={crumbs:e,selectedNode:p.Helper.legacyNodeToElementsComponentsNode(t)},this.accessibilityTreeView&&this.accessibilityTreeView.selectedNodeChanged(t)}else this.breadcrumbs.data={crumbs:[],selectedNode:null};if(i.Context.Context.instance().setFlavor(n.DOMModel.DOMNode,t),!t)return;t.setAsInspectedNode(),s&&(this.selectedNodeOnReset=t,this.hasNonDefaultSelectedNode=!0);const o=t.domModel().runtimeModel().executionContexts(),r=t.frameId();for(const e of o)if(e.frameId===r){i.Context.Context.instance().setFlavor(n.RuntimeModel.ExecutionContext,e);break}}documentUpdatedEvent(e){const t=e.data;this.documentUpdated(t),this.removeStyleTracking(t.cssModel()),this.setupStyleTracking(t.cssModel())}documentUpdated(e){if(this.searchableViewInternal.cancelSearch(),!e.existingDocument())return void(this.isShowing()&&e.requestDocument());if(this.hasNonDefaultSelectedNode=!1,this.omitDefaultSelection)return;const t=this.selectedNodeOnReset;(async function(e,n){const i=n?n.path():null,s=i?await e.pushNodeByPathToFrontend(i):null;if(t!==this.selectedNodeOnReset)return;let o=e.nodeForId(s);if(!o){const t=e.existingDocument();o=t?t.body||t.documentElement:null}o&&(this.setDefaultSelectedNode(o),this.lastSelectedNodeSelectedForTest())}).call(this,e,this.selectedNodeOnReset||null)}lastSelectedNodeSelectedForTest(){}setDefaultSelectedNode(e){if(!e||this.hasNonDefaultSelectedNode||this.pendingNodeReveal)return;const t=Yi.forDOMModel(e.domModel());t&&(this.selectDOMNode(e),t.selectedTreeElement&&t.selectedTreeElement.expand())}onSearchClosed(){const e=this.selectedDOMNode();if(!e)return;const t=this.treeElementForNode(e);t&&t.select()}onSearchCanceled(){this.searchConfig=void 0,this.hideSearchHighlights(),this.searchableViewInternal.updateSearchMatchesCount(0),this.currentSearchResultIndex=-1,delete this.searchResults,n.DOMModel.DOMModel.cancelSearch()}performSearch(t,i,s){const o=t.query,r=o.trim();if(!r.length)return;this.searchConfig&&this.searchConfig.query===o?this.hideSearchHighlights():this.onSearchCanceled(),this.searchConfig=t;const a=e.Settings.Settings.instance().moduleSetting("show-ua-shadow-dom").get(),l=n.TargetManager.TargetManager.instance().models(n.DOMModel.DOMModel,{scoped:!0}),d=l.map((e=>e.performSearch(r,a)));Promise.all(d).then((e=>{this.searchResults=[];for(let t=0;t<e.length;++t){const n=e[t];for(let e=0;e<n;++e)this.searchResults.push({domModel:l[t],index:e,node:void 0})}if(this.searchableViewInternal.updateSearchMatchesCount(this.searchResults.length),!this.searchResults.length)return;this.currentSearchResultIndex>=this.searchResults.length&&(this.currentSearchResultIndex=-1);let t=this.currentSearchResultIndex;i&&(t=-1===this.currentSearchResultIndex?s?-1:0:s?t-1:t+1,this.jumpToSearchResult(t))}))}domWordWrapSettingChanged(e){this.domTreeContainer.classList.toggle("elements-wrap",e.data);for(const t of this.treeOutlines)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}supportsRegexSearch(){return!1}highlightCurrentSearchResult(){const e=this.currentSearchResultIndex,t=this.searchResults;if(!t)return;const n=t[e];if(this.searchableViewInternal.updateCurrentMatchIndex(e),null===n.node)return;if(void 0===n.node)return void n.domModel.searchResult(n.index).then((e=>{n.node=e;this.searchConfig&&this.searchResults&&-1!==this.currentSearchResultIndex&&this.highlightCurrentSearchResult()}));const s=this.treeElementForNode(n.node);if(n.node.scrollIntoView(),s){this.searchConfig&&s.highlightSearchResults(this.searchConfig.query),s.reveal();const e=s.listItemElement.getElementsByClassName(i.UIUtils.highlightedSearchResultClassName);e.length&&e[0].scrollIntoViewIfNeeded(!1),s.select(!0)}}hideSearchHighlights(){if(!this.searchResults?.length||-1===this.currentSearchResultIndex)return;const e=this.searchResults[this.currentSearchResultIndex];if(!e.node)return;const t=this.treeElementForNode(e.node);t&&t.hideSearchHighlights()}selectedDOMNode(){for(const e of this.treeOutlines)if(e.selectedDOMNode())return e.selectedDOMNode();return null}selectDOMNode(e,t){for(const n of this.treeOutlines){Yi.forDOMModel(e.domModel())===n?n.selectDOMNode(e,t):n.selectDOMNode(null)}}selectAndShowSidebarTab(e){this.sidebarPaneView&&(this.sidebarPaneView.tabbedPane().selectTab(e),this.isShowing()||i.ViewManager.ViewManager.instance().showView("elements"))}updateBreadcrumbIfNeeded(e){const t=e.data,n=this.selectedDOMNode();if(!n)return void(this.breadcrumbs.data={crumbs:[],selectedNode:null});const i=p.Helper.legacyNodeToElementsComponentsNode(n),s=[i];for(let e=n.parentNode;e;e=e.parentNode)s.push(p.Helper.legacyNodeToElementsComponentsNode(e));const o=t.map(p.Helper.legacyNodeToElementsComponentsNode),r=new Map;o.forEach((e=>r.set(e.id,e)));const a=s.map((e=>r.get(e.id)||e));this.breadcrumbs.data={crumbs:a,selectedNode:i}}crumbNodeSelected(e){this.selectDOMNode(e.legacyDomNode,!0)}treeOutlineForNode(e){return e?Yi.forDOMModel(e.domModel()):null}treeElementForNode(e){const t=this.treeOutlineForNode(e);return t?t.findTreeElement(e):null}leaveUserAgentShadowDOM(e){let t;for(;(t=e.ancestorUserAgentShadowRoot())&&t.parentNode;)e=t.parentNode;return e}async revealAndSelectNode(t,n,s){this.omitDefaultSelection=!0;const r=e.Settings.Settings.instance().moduleSetting("show-ua-shadow-dom").get()?t:this.leaveUserAgentShadowDOM(t);s||r.highlightForTwoSeconds(),this.accessibilityTreeView&&this.accessibilityTreeView.revealAndSelectNode(t),await i.ViewManager.ViewManager.instance().showView("elements",!1,!n),this.selectDOMNode(r,n),delete this.omitDefaultSelection,this.notFirstInspectElement||(Ls.firstInspectElementNodeNameForTest=r.nodeName(),Ls.firstInspectElementCompletedForTest(),o.InspectorFrontendHost.InspectorFrontendHostInstance.inspectElementCompleted()),this.notFirstInspectElement=!0}showUAShadowDOMChanged(){for(const e of this.treeOutlines)e.update()}setupTextSelectionHack(e){const t=i.bind(this),n=e=>{0===e.buttons&&i.call(this)};function i(){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",n,!0),e.window().removeEventListener("mouseup",t,!0),e.window().removeEventListener("visibilitychange",t)}e.addEventListener("mousedown",(i=>{if(0!==i.button)return;this.splitWidget.element.classList.add("disable-resizer-for-elements-hack"),e.style.setProperty("height",`${e.offsetHeight}px`);e.style.setProperty("left","-1000000px"),e.style.setProperty("padding-left","1000000px"),e.style.setProperty("width","calc(100% + 1000000px)"),e.style.setProperty("position","fixed"),e.window().addEventListener("blur",t),e.window().addEventListener("contextmenu",t,!0),e.window().addEventListener("dragstart",t,!0),e.window().addEventListener("mousemove",n,!0),e.window().addEventListener("mouseup",t,!0),e.window().addEventListener("visibilitychange",t)}),!0)}initializeSidebarPanes(e){this.splitWidget.setVertical("Vertical"===e),this.showToolbarPane(null,null);const t=new i.Widget.VBox;t.element.classList.add("style-panes-wrapper"),t.element.setAttribute("jslog",`${s.pane("styles").track({resize:!0})}`),this.stylesWidget.show(t.element),this.setupTextSelectionHack(t.element);const n=new i.Widget.VBox;n.element.classList.add("style-panes-wrapper"),n.element.setAttribute("jslog",`${s.pane("computed").track({resize:!0})}`),this.computedStyleWidget.show(n.element);const o=new i.SplitWidget.SplitWidget(!0,!0,"elements.styles.sidebar.width",100);o.setMainWidget(t),o.hideSidebar(),o.enableShowModeSaving(),o.addEventListener("ShowModeChanged",(()=>{a()})),this.stylesWidget.addEventListener("InitialUpdateCompleted",(()=>{this.stylesWidget.appendToolbarItem(o.createShowHideSidebarButton(Is(Ms.showComputedStylesSidebar),Is(Ms.hideComputedStylesSidebar),Is(Ms.computedStylesShown),Is(Ms.computedStylesHidden),"computed-styles"))}));const r=()=>{this.metricsWidget.show(n.element,this.computedStyleWidget.element),this.metricsWidget.toggleVisibility(!0),this.stylesWidget.removeEventListener("StylesUpdateCompleted",l)},a=()=>{"Both"===o.showMode()?r():(this.metricsWidget.show(t.element),this.stylesWidget.hasMatchedStyles||this.metricsWidget.toggleVisibility(!1),this.stylesWidget.addEventListener("StylesUpdateCompleted",l))},l=e=>{this.metricsWidget.toggleVisibility(e.data.hasMatchedStyles)};this.sidebarPaneView=i.ViewManager.ViewManager.instance().createTabbedLocation((()=>i.ViewManager.ViewManager.instance().showView("elements")),"styles-pane-sidebar",!0,!0);const c=this.sidebarPaneView.tabbedPane();c.headerElement().setAttribute("jslog",`${s.toolbar("sidebar").track({keydown:"ArrowUp|ArrowLeft|ArrowDown|ArrowRight|Enter|Space"})}`),"Vertical"!==this.splitMode&&this.splitWidget.installResizer(c.headerElement());const h=c.headerElement();i.ARIAUtils.markAsNavigation(h),i.ARIAUtils.setLabel(h,Is(Ms.sidePanelToolbar));const p=c.tabbedPaneContentElement();i.ARIAUtils.markAsComplementary(p),i.ARIAUtils.setLabel(p,Is(Ms.sidePanelContent));const u=new i.View.SimpleView(Is(Ms.styles),void 0,"styles");this.sidebarPaneView.appendView(u),u.element.classList.add("flex-auto"),o.show(u.element);const m=new i.View.SimpleView(Is(Ms.computed),void 0,"computed");m.element.classList.add("composite","fill"),c.addEventListener(i.TabbedPane.Events.TabSelected,(e=>{const{tabId:t}=e.data;"computed"===t?(n.show(m.element),r()):"styles"===t&&(o.setSidebarWidget(n),a())}),this),this.sidebarPaneView.appendView(m),this.stylesViewToReveal=u,this.sidebarPaneView.appendApplicableItems("elements-sidebar");const g=d.ExtensionServer.ExtensionServer.instance().sidebarPanes();for(let e=0;e<g.length;++e)this.addExtensionSidebarPane(g[e]);this.splitWidget.setSidebarWidget(this.sidebarPaneView.tabbedPane())}updateSidebarPosition(){if(this.sidebarPaneView?.tabbedPane().shouldHideOnDetach())return;const t=e.Settings.Settings.instance().moduleSetting("sidebar-position").get();let n="Horizontal";if(("right"===t||"auto"===t&&i.InspectorView.InspectorView.instance().element.offsetWidth>680)&&(n="Vertical"),!this.sidebarPaneView)return void this.initializeSidebarPanes(n);if(n===this.splitMode)return;this.splitMode=n;const s=this.sidebarPaneView.tabbedPane();this.splitWidget.uninstallResizer(s.headerElement()),this.splitWidget.setVertical("Vertical"===this.splitMode),this.showToolbarPane(null,null),"Vertical"!==this.splitMode&&this.splitWidget.installResizer(s.headerElement())}extensionSidebarPaneAdded(e){this.addExtensionSidebarPane(e.data)}addExtensionSidebarPane(e){this.sidebarPaneView&&e.panelName()===this.name&&this.sidebarPaneView.appendView(e)}getComputedStyleWidget(){return this.computedStyleWidget}setupStyleTracking(e){const t=e.createCSSPropertyTracker(Os);t.start(),this.cssStyleTrackerByCSSModel.set(e,t),t.addEventListener("TrackedCSSPropertiesUpdated",this.trackedCSSPropertiesUpdated,this)}removeStyleTracking(e){const t=this.cssStyleTrackerByCSSModel.get(e);t&&(t.stop(),this.cssStyleTrackerByCSSModel.delete(e),t.removeEventListener("TrackedCSSPropertiesUpdated",this.trackedCSSPropertiesUpdated,this))}trackedCSSPropertiesUpdated({data:e}){for(const t of e){if(!t)continue;const e=this.treeElementForNode(t);e&&e.updateStyleAdorners(),p.LayoutPane.LayoutPane.instance().render()}}populateAdornerSettingsContextMenu(e){const t=e.viewSection().appendSubMenuItem(Is(Ms.adornerSettings),!1,"show-adorner-settings"),n=this.adornerManager.getSettings();for(const[e,i]of n)t.defaultSection().appendCheckboxItem(e,(()=>{const t=!i,s=this.adornersByName.get(e);if(s)for(const e of s)t?e.show():e.hide();this.adornerManager.getSettings().set(e,t),this.adornerManager.updateSettings(n)}),{checked:i,jslogContext:e})}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){const t=this.adornersByName.get(e.name);t&&t.delete(e)}static firstInspectElementCompletedForTest=function(){};static firstInspectElementNodeNameForTest=""}globalThis.Elements=globalThis.Elements||{},globalThis.Elements.ElementsPanel=Ls;const Os=[{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"}];let Rs;class Ds{static instance(e={forceNew:null}){const{forceNew:t}=e;return Rs&&!t||(Rs=new Ds),Rs}decorate(e){const t=e.domModel().cssModel().pseudoState(e);return t?{color:"--sys-color-orange-bright",title:Is(Ms.elementStateS,{PH1:":"+t.join(", :")})}:null}}var ks=Object.freeze({__proto__:null,CSSPropertyRevealer:class{reveal(e){return Ls.instance().revealProperty(e)}},ContextMenuProvider:class{appendApplicableItems(t,i,s){s instanceof n.RemoteObject.RemoteObject&&!s.isNode()||Ls.instance().element.isAncestor(t.target)||i.revealSection().appendItem(Is(Ms.openInElementsPanel),(()=>e.Revealer.reveal(s)),{jslogContext:"elements.reveal-node"})}},DOMNodeRevealer:class{reveal(t,i){const s=Ls.instance();return s.pendingNodeReveal=!0,new Promise((function(e,o){if(t instanceof n.DOMModel.DOMNode)r(t);else if(t instanceof n.DOMModel.DeferredDOMNode)t.resolve((function(e){if(!e){const e=Is(Ms.theDeferredDomNodeCouldNotBe);return void o(new a.UserVisibleError.UserVisibleError(e))}r(e)}));else{const e=t.runtimeModel().target().model(n.DOMModel.DOMModel);if(e)e.pushObjectAsNodeToFrontend(t).then((function(e){if(!e){const e=Is(Ms.theRemoteObjectCouldNotBe);return void o(new a.UserVisibleError.UserVisibleError(e))}r(e)}));else{const e=Is(Ms.nodeCannotBeFoundInTheCurrent);o(new a.UserVisibleError.UserVisibleError(e))}}function r(r){s.pendingNodeReveal=!1;let l=r;for(;l.parentNode;)l=l.parentNode;const d=!(l instanceof n.DOMModel.DOMDocument);if(!(t instanceof n.DOMModel.DOMDocument)&&d){const e=Is(Ms.nodeCannotBeFoundInTheCurrent);return void o(new a.UserVisibleError.UserVisibleError(e))}if(r)return void s.revealAndSelectNode(r,!i).then(e);const c=Is(Ms.nodeCannotBeFoundInTheCurrent);o(new a.UserVisibleError.UserVisibleError(c))}})).catch((t=>{let n;throw n=a.UserVisibleError.isUserVisibleError(t)?t.message:Is(Ms.nodeCannotBeFoundInTheCurrent),e.Console.Console.instance().warn(n),t}))}},ElementsActionDelegate:class{handleAction(e,t){const s=e.flavor(n.DOMModel.DOMNode);if(!s)return!0;const o=Yi.forDOMModel(s.domModel());if(!o)return!0;switch(t){case"elements.hide-element":return o.toggleHideElement(s),!0;case"elements.edit-as-html":return o.toggleEditAsHTML(s),!0;case"elements.duplicate-element":return o.duplicateNode(s),!0;case"elements.copy-styles":return o.findTreeElement(s)?.copyStyles(),!0;case"elements.undo":return n.DOMModel.DOMModelUndoStack.instance().undo(),Ls.instance().stylesWidget.forceUpdate(),!0;case"elements.redo":return n.DOMModel.DOMModelUndoStack.instance().redo(),Ls.instance().stylesWidget.forceUpdate(),!0;case"elements.show-styles":return Ls.instance().selectAndShowSidebarTab("styles"),!0;case"elements.show-computed":return Ls.instance().selectAndShowSidebarTab("computed"),!0;case"elements.toggle-eye-dropper":{const e=i.Context.Context.instance().flavor(ee);if(!e)return!1;e.toggleEyeDropper()}}return!1}},ElementsPanel:Ls,PseudoStateMarkerDecorator:Ds});let Fs;class Us{toggleSearchAction;mode;showDetailedInspectTooltipSetting;constructor(){this.toggleSearchAction=i.ActionRegistry.ActionRegistry.instance().getAction("elements.toggle-element-search"),this.mode="none",n.TargetManager.TargetManager.instance().addEventListener("SuspendStateChanged",this.suspendStateChanged,this),n.TargetManager.TargetManager.instance().addModelListener(n.OverlayModel.OverlayModel,"InspectModeExited",(()=>this.setMode("none")),void 0,{scoped:!0}),n.OverlayModel.OverlayModel.setInspectNodeHandler(this.inspectNode.bind(this)),n.TargetManager.TargetManager.instance().observeModels(n.OverlayModel.OverlayModel,this,{scoped:!0}),this.showDetailedInspectTooltipSetting=e.Settings.Settings.instance().moduleSetting("show-detailed-inspect-tooltip"),this.showDetailedInspectTooltipSetting.addChangeListener(this.showDetailedInspectTooltipChanged.bind(this)),document.addEventListener("keydown",(e=>{e.keyCode===i.KeyboardShortcut.Keys.Esc.code&&this.isInInspectElementMode()&&(this.setMode("none"),e.consume(!0),s.logKeyDown(null,e,"cancel-inspect-mode"))}),!0)}static instance({forceNew:e}={forceNew:!1}){return Fs&&!e||(Fs=new Us),Fs}modelAdded(e){"none"!==this.mode&&e.setInspectMode(this.mode,this.showDetailedInspectTooltipSetting.get())}modelRemoved(e){}isInInspectElementMode(){return"none"!==this.mode}toggleInspectMode(){let t;t=this.isInInspectElementMode()?"none":e.Settings.Settings.instance().moduleSetting("show-ua-shadow-dom").get()?"searchForUAShadowDOM":"searchForNode",this.setMode(t)}captureScreenshotMode(){this.setMode("captureAreaScreenshot")}setMode(e){if(!n.TargetManager.TargetManager.instance().allTargetsSuspended()){this.mode=e;for(const t of n.TargetManager.TargetManager.instance().models(n.OverlayModel.OverlayModel,{scoped:!0}))t.setInspectMode(e,this.showDetailedInspectTooltipSetting.get());this.toggleSearchAction.setToggled(this.isInInspectElementMode())}}suspendStateChanged(){n.TargetManager.TargetManager.instance().allTargetsSuspended()&&(this.mode="none",this.toggleSearchAction.setToggled(!1))}inspectNode(e){Ls.instance().revealAndSelectNode(e,!0,!0)}showDetailedInspectTooltipChanged(){this.setMode(this.mode)}}var _s=Object.freeze({__proto__:null,InspectElementModeController:Us,ToggleSearchActionDelegate:class{handleAction(e,n){return!t.Runtime.Runtime.queryParam("isSharedWorker")&&(Fs=Us.instance(),!!Fs&&("elements.toggle-element-search"===n?Fs.toggleInspectMode():"elements.capture-area-screenshot"===n&&Fs.captureScreenshotMode(),!0))}}});const Bs={frameworkListeners:"`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"},Vs=r.i18n.registerUIStrings("panels/elements/EventListenersWidget.ts",Bs),Hs=r.i18n.getLocalizedString.bind(void 0,Vs);let Ws;class js extends i.ThrottledWidget.ThrottledWidget{toolbarItemsInternal;showForAncestorsSetting;dispatchFilterBySetting;showFrameworkListenersSetting;eventListenersView;lastRequestedNode;constructor(){super(),this.toolbarItemsInternal=[],this.showForAncestorsSetting=e.Settings.Settings.instance().moduleSetting("show-event-listeners-for-ancestors"),this.showForAncestorsSetting.addChangeListener(this.update.bind(this)),this.dispatchFilterBySetting=e.Settings.Settings.instance().createSetting("event-listener-dispatch-filter-type",$s.All),this.dispatchFilterBySetting.addChangeListener(this.update.bind(this)),this.showFrameworkListenersSetting=e.Settings.Settings.instance().createSetting("show-frameowkr-listeners",!0),this.showFrameworkListenersSetting.setTitle(Hs(Bs.frameworkListeners)),this.showFrameworkListenersSetting.addChangeListener(this.showFrameworkListenersChanged.bind(this)),this.eventListenersView=new F.EventListenersView.EventListenersView(this.update.bind(this)),this.eventListenersView.show(this.element),this.element.setAttribute("jslog",`${s.pane("elements.event-listeners").track({resize:!0})}`),this.toolbarItemsInternal.push(i.Toolbar.Toolbar.createActionButton("elements.refresh-event-listeners")),this.toolbarItemsInternal.push(new i.Toolbar.ToolbarSettingCheckbox(this.showForAncestorsSetting,Hs(Bs.showListenersOnTheAncestors),Hs(Bs.ancestors)));const t=new i.Toolbar.ToolbarComboBox(this.onDispatchFilterTypeChanged.bind(this),Hs(Bs.eventListenersCategory));function o(e,n){const i=t.createOption(e,n);n===this.dispatchFilterBySetting.get()&&t.select(i)}t.element.setAttribute("jslog",`${s.filterDropdown().track({change:!0})}`),o.call(this,Hs(Bs.all),$s.All),o.call(this,Hs(Bs.passive),$s.Passive),o.call(this,Hs(Bs.blocking),$s.Blocking),t.setMaxWidth(200),this.toolbarItemsInternal.push(t),this.toolbarItemsInternal.push(new i.Toolbar.ToolbarSettingCheckbox(this.showFrameworkListenersSetting,Hs(Bs.resolveEventListenersBoundWith))),i.Context.Context.instance().addFlavorChangeListener(n.DOMModel.DOMNode,this.update,this),this.update()}static instance(e={forceNew:null}){const{forceNew:t}=e;return Ws&&!t||(Ws=new js),Ws}doUpdate(){this.lastRequestedNode&&(this.lastRequestedNode.domModel().runtimeModel().releaseObjectGroup(zs),delete this.lastRequestedNode);const e=i.Context.Context.instance().flavor(n.DOMModel.DOMNode);if(!e)return this.eventListenersView.reset(),this.eventListenersView.addEmptyHolderIfNeeded(),Promise.resolve();this.lastRequestedNode=e;const t=!this.showForAncestorsSetting.get(),s=[];if(s.push(e.resolveToObject(zs)),!t){let t=e.parentNode;for(;t;)s.push(t.resolveToObject(zs)),t=t.parentNode;s.push(this.windowObjectInNodeContext(e))}return Promise.all(s).then(this.eventListenersView.addObjects.bind(this.eventListenersView)).then(this.showFrameworkListenersChanged.bind(this))}wasShown(){i.Context.Context.instance().setFlavor(js,this),super.wasShown()}willHide(){super.willHide(),i.Context.Context.instance().setFlavor(js,null)}toolbarItems(){return this.toolbarItemsInternal}onDispatchFilterTypeChanged(e){const t=e.target;this.dispatchFilterBySetting.set(t.value)}showFrameworkListenersChanged(){const e=this.dispatchFilterBySetting.get(),t=e===$s.All||e===$s.Passive,n=e===$s.All||e===$s.Blocking;this.eventListenersView.showFrameworkListeners(this.showFrameworkListenersSetting.get(),t,n)}windowObjectInNodeContext(e){const t=e.domModel().runtimeModel().executionContexts();let n=t[0];if(e.frameId())for(let i=0;i<t.length;++i){const s=t[i];s.frameId===e.frameId()&&s.isDefault&&(n=s)}return n.evaluate({expression:"self",objectGroup:zs,includeCommandLineAPI:!1,silent:!0,returnByValue:!1,generatePreview:!1},!1,!1).then((e=>"object"in e?e.object:null))}eventListenersArrivedForTest(){}}const $s={All:"All",Blocking:"Blocking",Passive:"Passive"},zs="event-listeners-panel";var Ks=Object.freeze({__proto__:null,ActionDelegate:class{handleAction(e,t){return"elements.refresh-event-listeners"===t&&(js.instance().update(),!0)}},DispatchFilterBy:$s,EventListenersWidget:js}),Gs={cssText:`.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%}\n/*# sourceURL=${import.meta.resolve("./propertiesWidget.css")} */\n`};const qs="properties-sidebar-pane",Ys={showAll:"Show all",showAllTooltip:"When unchecked, only properties whose values are neither null nor undefined will be shown",noMatchingProperty:"No matching property"},Xs=r.i18n.registerUIStrings("panels/elements/PropertiesWidget.ts",Ys),Qs=r.i18n.getLocalizedString.bind(void 0,Xs);class Js extends i.ThrottledWidget.ThrottledWidget{node;showAllPropertiesSetting;filterRegex=null;noMatchesElement;treeOutline;expandController;lastRequestedNode;constructor(t){super(!0,t),this.registerRequiredCSS(Gs),this.showAllPropertiesSetting=e.Settings.Settings.instance().createSetting("show-all-properties",!1),this.showAllPropertiesSetting.addChangeListener(this.filterList.bind(this)),n.TargetManager.TargetManager.instance().addModelListener(n.DOMModel.DOMModel,n.DOMModel.Events.AttrModified,this.onNodeChange,this,{scoped:!0}),n.TargetManager.TargetManager.instance().addModelListener(n.DOMModel.DOMModel,n.DOMModel.Events.AttrRemoved,this.onNodeChange,this,{scoped:!0}),n.TargetManager.TargetManager.instance().addModelListener(n.DOMModel.DOMModel,n.DOMModel.Events.CharacterDataModified,this.onNodeChange,this,{scoped:!0}),n.TargetManager.TargetManager.instance().addModelListener(n.DOMModel.DOMModel,n.DOMModel.Events.ChildNodeCountUpdated,this.onNodeChange,this,{scoped:!0}),i.Context.Context.instance().addFlavorChangeListener(n.DOMModel.DOMNode,this.setNode,this),this.node=i.Context.Context.instance().flavor(n.DOMModel.DOMNode);const r=this.contentElement.createChild("div","hbox properties-widget-toolbar").createChild("devtools-toolbar","styles-pane-toolbar"),a=new i.Toolbar.ToolbarFilter(void 0,1,1,void 0,void 0,!1);a.addEventListener("TextChanged",this.onFilterChanged,this),r.appendToolbarItem(a),r.appendToolbarItem(new i.Toolbar.ToolbarSettingCheckbox(this.showAllPropertiesSetting,Qs(Ys.showAllTooltip),Qs(Ys.showAll))),this.contentElement.setAttribute("jslog",`${s.pane("element-properties").track({resize:!0})}`),this.noMatchesElement=this.contentElement.createChild("div","gray-info-message hidden"),this.noMatchesElement.textContent=Qs(Ys.noMatchingProperty),this.treeOutline=new U.ObjectPropertiesSection.ObjectPropertiesSectionsTreeOutline({readOnly:!0}),this.treeOutline.setShowSelectionOnKeyboardFocus(!0,!1),this.expandController=new U.ObjectPropertiesSection.ObjectPropertiesSectionsTreeExpandController(this.treeOutline),this.contentElement.appendChild(this.treeOutline.element),this.treeOutline.addEventListener(i.TreeOutline.Events.ElementExpanded,(()=>{o.userMetrics.actionTaken(o.UserMetrics.Action.DOMPropertiesExpanded)})),this.update()}onFilterChanged(e){this.filterRegex=e.data?new RegExp(a.StringUtilities.escapeForRegExp(e.data),"i"):null,this.filterList()}filterList(){let e=!0;for(const t of this.treeOutline.rootElement().children()){const{property:n}=t,i=!n?.match({includeNullOrUndefinedValues:this.showAllPropertiesSetting.get(),regex:this.filterRegex});i||(e=!1),t.hidden=i}this.noMatchesElement.classList.toggle("hidden",!e)}setNode(e){this.node=e.data,this.update()}async doUpdate(){if(this.lastRequestedNode&&(this.lastRequestedNode.domModel().runtimeModel().releaseObjectGroup(qs),delete this.lastRequestedNode),!this.node)return void this.treeOutline.removeChildren();this.lastRequestedNode=this.node;const e=await this.node.resolveToObject(qs);if(!e)return;const t=this.treeOutline.rootElement();let{properties:i}=await n.RemoteObject.RemoteObject.loadFromObjectPerProto(e,!0);t.removeChildren(),null===i&&(i=[]),U.ObjectPropertiesSection.ObjectPropertyTreeElement.populateWithProperties(t,i,null,!0,!0,e),this.filterList()}onNodeChange(e){if(!this.node)return;const t=e.data,i=t instanceof n.DOMModel.DOMNode?t:t.node;this.node===i&&this.update()}}var Zs=Object.freeze({__proto__:null,PropertiesWidget:Js}),eo={cssText:`.stack-trace{font-size:11px!important;font-family:Menlo,monospace}\n/*# sourceURL=${import.meta.resolve("./nodeStackTraceWidget.css")} */\n`};const to={noStackTraceAvailable:"No stack trace available"},no=r.i18n.registerUIStrings("panels/elements/NodeStackTraceWidget.ts",to),io=r.i18n.getLocalizedString.bind(void 0,no);class so extends i.ThrottledWidget.ThrottledWidget{noStackTraceElement;creationStackTraceElement;linkifier=new C.Linkifier.Linkifier(oo);constructor(){super(!0),this.registerRequiredCSS(eo),this.noStackTraceElement=this.contentElement.createChild("div","gray-info-message"),this.noStackTraceElement.textContent=io(to.noStackTraceAvailable),this.creationStackTraceElement=this.contentElement.createChild("div","stack-trace")}wasShown(){super.wasShown(),i.Context.Context.instance().addFlavorChangeListener(n.DOMModel.DOMNode,this.update,this),this.update()}willHide(){i.Context.Context.instance().removeFlavorChangeListener(n.DOMModel.DOMNode,this.update,this)}async doUpdate(){const e=i.Context.Context.instance().flavor(n.DOMModel.DOMNode);if(!e)return this.noStackTraceElement.classList.remove("hidden"),void this.creationStackTraceElement.classList.add("hidden");const t=await e.creationStackTrace();if(t){this.noStackTraceElement.classList.add("hidden"),this.creationStackTraceElement.classList.remove("hidden");const n=C.JSPresentationUtils.buildStackTracePreviewContents(e.domModel().target(),this.linkifier,{stackTrace:t,tabStops:void 0});this.creationStackTraceElement.removeChildren(),this.creationStackTraceElement.appendChild(n.element)}else this.noStackTraceElement.classList.remove("hidden"),this.creationStackTraceElement.classList.add("hidden")}}const oo=40;var ro=Object.freeze({__proto__:null,MaxLengthForLinks:oo,NodeStackTraceWidget:so}),ao={cssText:`.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 dt-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)}}\n/*# sourceURL=${import.meta.resolve("./classesPaneWidget.css")} */\n`};const lo={addNewClass:"Add new class",classesSAdded:"Classes {PH1} added",classSAdded:"Class {PH1} added",elementClasses:"Element Classes"},co=r.i18n.registerUIStrings("panels/elements/ClassesPaneWidget.ts",lo),ho=r.i18n.getLocalizedString.bind(void 0,co);class po extends i.Widget.Widget{input;classesContainer;prompt;mutatingNodes;pendingNodeClasses;updateNodeThrottler;previousTarget;constructor(){super(!0),this.registerRequiredCSS(ao),this.contentElement.className="styles-element-classes-pane",this.contentElement.setAttribute("jslog",`${s.pane("elements-classes")}`);const t=this.contentElement.createChild("div","title-container");this.input=t.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 yo(this.nodeClasses.bind(this)),this.prompt.setAutocompletionTimeout(0),this.prompt.renderAsBlock();const o=this.prompt.attach(this.input);this.prompt.setPlaceholder(ho(lo.addNewClass)),this.prompt.addEventListener("TextChanged",this.onTextChanged,this),o.addEventListener("keydown",this.onKeyDown.bind(this),!1),n.TargetManager.TargetManager.instance().addModelListener(n.DOMModel.DOMModel,n.DOMModel.Events.DOMMutated,this.onDOMMutated,this,{scoped:!0}),this.mutatingNodes=new Set,this.pendingNodeClasses=new Map,this.updateNodeThrottler=new e.Throttler.Throttler(0),this.previousTarget=null,i.Context.Context.instance().addFlavorChangeListener(n.DOMModel.DOMNode,this.onSelectedNodeChanged,this)}splitTextIntoClasses(e){return e.split(/[,\s]/).map((e=>e.trim())).filter((e=>e.length))}onKeyDown(e){if("Enter"!==e.key&&!a.KeyboardUtilities.isEscKey(e))return;if("Enter"===e.key&&(e.consume(),this.prompt.acceptAutoComplete()))return;const t=e.target;let s=t.textContent;a.KeyboardUtilities.isEscKey(e)&&(a.StringUtilities.isWhitespace(s)||e.consume(!0),s=""),this.prompt.clearAutocomplete(),t.textContent="";const o=i.Context.Context.instance().flavor(n.DOMModel.DOMNode);if(!o)return;const r=this.splitTextIntoClasses(s);if(!r.length)return void this.installNodeClasses(o);for(const e of r)this.toggleClass(o,e,!0);const l=r.join(" "),d=r.length>1?ho(lo.classesSAdded,{PH1:l}):ho(lo.classSAdded,{PH1:l});i.ARIAUtils.alert(d),this.installNodeClasses(o),this.update()}onTextChanged(){const e=i.Context.Context.instance().flavor(n.DOMModel.DOMNode);e&&this.installNodeClasses(e)}onDOMMutated(e){const t=e.data;this.mutatingNodes.has(t)||(uo.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=i.Context.Context.instance().flavor(n.DOMModel.DOMNode);if(e&&(e=e.enclosingElementOrSelf()),this.classesContainer.removeChildren(),this.input.disabled=!e,!e)return;const t=this.nodeClasses(e),s=[...t.keys()];s.sort(a.StringUtilities.caseInsensetiveComparator);for(const e of s){const n=i.UIUtils.CheckboxLabel.createWithStringLiteral(e,t.get(e),void 0,"element-class",!0);n.classList.add("monospace"),n.checkboxElement.addEventListener("click",this.onClick.bind(this,e),!1),this.classesContainer.appendChild(n)}}onClick(e,t){const s=i.Context.Context.instance().flavor(n.DOMModel.DOMNode);if(!s)return;const o=t.target.checked;this.toggleClass(s,e,o),this.installNodeClasses(s)}nodeClasses(e){let t=uo.get(e);if(!t){const n=(e.getAttribute("class")||"").split(/\s/);t=new Map;for(let e=0;e<n.length;++e){const i=n[e].trim();i.length&&t.set(i,!0)}uo.set(e,t)}return t}toggleClass(e,t,n){const i=this.nodeClasses(e);i.set(t,n),go.instance().item().setChecked([...i.values()].includes(!0))}installNodeClasses(e){const t=this.nodeClasses(e),n=new Set;for(const e of t.keys())t.get(e)&&n.add(e);const i=this.splitTextIntoClasses(this.prompt.textWithCurrentSuggestion());for(const e of i)n.add(e);const s=[...n.values()].sort();this.pendingNodeClasses.set(e,s.join(" ")),this.updateNodeThrottler.schedule(this.flushPendingClasses.bind(this))}async flushPendingClasses(){const e=[];for(const n of this.pendingNodeClasses.keys()){this.mutatingNodes.add(n);const i=n.setAttributeValuePromise("class",this.pendingNodeClasses.get(n)).then(t.bind(this,n));e.push(i)}function t(e){this.mutatingNodes.delete(e)}this.pendingNodeClasses.clear(),await Promise.all(e)}}const uo=new WeakMap;let mo,go=class e{button;view;constructor(){this.button=new i.Toolbar.ToolbarToggle(ho(lo.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 po}static instance(t={forceNew:null}){const{forceNew:n}=t;return mo&&!n||(mo=new e),mo}clicked(){Ls.instance().showToolbarPane(this.view.isShowing()?null:this.view,this.button)}item(){return this.button}};class yo extends i.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){const t=[],n=new Set;this.selectedFrameId=e.frameId();const i=e.domModel().cssModel(),s=i.allStyleSheets();for(const e of s){if(e.frameId!==this.selectedFrameId)continue;const s=i.getClassNames(e.id).then((e=>{for(const t of e)n.add(t)}));t.push(s)}const o=e.ownerDocument.id,r=e.domModel().classNamesPromise(o).then((e=>{for(const t of e)n.add(t)}));return t.push(r),await Promise.all(t),[...n]}async buildClassNameCompletions(e,t,s){t&&!s||(this.classNamesPromise=null);const o=i.Context.Context.instance().flavor(n.DOMModel.DOMNode);if(!o||!t&&!s&&!e.trim())return[];this.classNamesPromise&&this.selectedFrameId===o.frameId()||(this.classNamesPromise=this.getClassNames(o));let r=await this.classNamesPromise;const a=this.nodeClasses(o);return r=r.filter((e=>!a.get(e))),"."===t[0]&&(r=r.map((e=>"."+e))),r.filter((e=>e.startsWith(t))).sort().map((e=>({text:e,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 fo=Object.freeze({__proto__:null,ButtonProvider:go,ClassNamePrompt:yo,ClassesPaneWidget:po}),So={cssText:`.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}\n/*# sourceURL=${import.meta.resolve("./elementStatePaneWidget.css")} */\n`};const Eo={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"},Co=r.i18n.registerUIStrings("panels/elements/ElementStatePaneWidget.ts",Eo),vo=r.i18n.getLocalizedString.bind(void 0,Co);var bo;!function(e){e.ENABLED="enabled",e.DISABLED="disabled",e.VALID="valid",e.INVALID="invalid",e.USER_VALID="user-valid",e.USER_INVALID="user-invalid",e.REQUIRED="required",e.OPTIONAL="optional",e.READ_ONLY="read-only",e.READ_WRITE="read-write",e.IN_RANGE="in-range",e.OUT_OF_RANGE="out-of-range",e.VISITED="visited",e.LINK="link",e.CHECKED="checked",e.INDETERMINATE="indeterminate",e.PLACEHOLDER_SHOWN="placeholder-shown",e.AUTOFILL="autofill",e.OPEN="open"}(bo||(bo={}));class wo extends i.Widget.Widget{inputs;inputStates;duals;cssModel;specificPseudoStateDivs;specificHeader;throttler;constructor(){super(!0),this.registerRequiredCSS(So),this.contentElement.className="styles-element-state-pane",this.contentElement.setAttribute("jslog",`${s.pane("element-states")}`);const t=[];this.inputs=t,this.inputStates=new WeakMap,this.duals=new Map;const r=e=>{const t=i.Context.Context.instance().flavor(n.DOMModel.DOMNode);if(!(t&&e.target instanceof HTMLInputElement))return;const s=this.inputStates.get(e.target);if(!s)return;const o=e.target.checked,r=this.duals.get(s);o&&r&&t.domModel().cssModel().forcePseudoState(t,r,!1),t.domModel().cssModel().forcePseudoState(t,s,o)},a=e=>{const n=document.createElement("div");n.id=e;const o=i.UIUtils.CheckboxLabel.createWithStringLiteral(":"+e,void 0,void 0,void 0,!0),a=o.checkboxElement;return this.inputStates.set(a,e),a.addEventListener("click",r,!1),a.setAttribute("jslog",`${s.toggle().track({change:!0}).context(e)}`),t.push(a),n.appendChild(o),n},l=(e,t)=>{this.duals.set(e,t),this.duals.set(t,e)};this.contentElement.className="styles-element-state-pane";const d=(()=>{const t=document.createElement("div");t.classList.add("page-state-checkbox");const n=i.UIUtils.CheckboxLabel.create(vo(Eo.emulateFocusedPage),void 0,void 0,"emulate-page-focus",!0);i.SettingsUI.bindCheckbox(n.checkboxElement,e.Settings.Settings.instance().moduleSetting("emulate-page-focus"),{enable:o.UserMetrics.Action.ToggleEmulateFocusedPageFromStylesPaneOn,disable:o.UserMetrics.Action.ToggleEmulateFocusedPageFromStylesPaneOff}),i.Tooltip.Tooltip.install(n.textElement,vo(Eo.emulatesAFocusedPage));const s=new c.Button.Button;return s.data={variant:"icon",iconName:"help",size:"SMALL",jslogContext:"learn-more",title:vo(Eo.learnMore)},s.addEventListener("click",(()=>i.UIUtils.openInNewTab("https://developer.chrome.com/docs/devtools/rendering/apply-effects#emulate_a_focused_page"))),t.appendChild(n),t.appendChild(s),t})();this.contentElement.appendChild(d),this.contentElement.appendChild((e=>{const t=document.createElement("div");return t.classList.add("section-header"),i.UIUtils.createTextChild(t.createChild("span"),e),t})(vo(Eo.forceElementState)));const h=document.createElement("div");h.classList.add("source-code"),h.classList.add("pseudo-states-container"),i.ARIAUtils.markAsPresentation(h),h.appendChild(a("active")),h.appendChild(a("hover")),h.appendChild(a("focus")),h.appendChild(a("focus-within")),h.appendChild(a("focus-visible")),h.appendChild(a("target")),this.contentElement.appendChild(h);const p=document.createElement("div");p.classList.add("source-code"),p.classList.add("pseudo-states-container"),p.classList.add("specific-pseudo-states"),i.ARIAUtils.markAsPresentation(p),this.specificPseudoStateDivs=new Map,this.specificPseudoStateDivs.set(bo.ENABLED,a(bo.ENABLED)),this.specificPseudoStateDivs.set(bo.DISABLED,a(bo.DISABLED)),this.specificPseudoStateDivs.set(bo.VALID,a(bo.VALID)),this.specificPseudoStateDivs.set(bo.INVALID,a(bo.INVALID)),this.specificPseudoStateDivs.set(bo.USER_VALID,a(bo.USER_VALID)),this.specificPseudoStateDivs.set(bo.USER_INVALID,a(bo.USER_INVALID)),this.specificPseudoStateDivs.set(bo.REQUIRED,a(bo.REQUIRED)),this.specificPseudoStateDivs.set(bo.OPTIONAL,a(bo.OPTIONAL)),this.specificPseudoStateDivs.set(bo.READ_ONLY,a(bo.READ_ONLY)),this.specificPseudoStateDivs.set(bo.READ_WRITE,a(bo.READ_WRITE)),this.specificPseudoStateDivs.set(bo.IN_RANGE,a(bo.IN_RANGE)),this.specificPseudoStateDivs.set(bo.OUT_OF_RANGE,a(bo.OUT_OF_RANGE)),this.specificPseudoStateDivs.set(bo.VISITED,a(bo.VISITED)),this.specificPseudoStateDivs.set(bo.LINK,a(bo.LINK)),this.specificPseudoStateDivs.set(bo.CHECKED,a(bo.CHECKED)),this.specificPseudoStateDivs.set(bo.INDETERMINATE,a(bo.INDETERMINATE)),this.specificPseudoStateDivs.set(bo.PLACEHOLDER_SHOWN,a(bo.PLACEHOLDER_SHOWN)),this.specificPseudoStateDivs.set(bo.AUTOFILL,a(bo.AUTOFILL)),this.specificPseudoStateDivs.set(bo.OPEN,a(bo.OPEN)),this.specificPseudoStateDivs.forEach((e=>{p.appendChild(e)})),l(bo.VALID,bo.INVALID),l(bo.USER_VALID,bo.USER_INVALID),l(bo.READ_ONLY,bo.READ_WRITE),l(bo.IN_RANGE,bo.OUT_OF_RANGE),l(bo.ENABLED,bo.DISABLED),l(bo.VISITED,bo.LINK),this.specificHeader=document.createElement("details"),this.specificHeader.classList.add("specific-details");const u=document.createElement("summary");u.classList.add("force-specific-element-header"),u.classList.add("section-header"),i.UIUtils.createTextChild(u.createChild("span"),vo(Eo.forceElementSpecificStates)),this.specificHeader.appendChild(u),this.specificHeader.appendChild(p),this.contentElement.appendChild(this.specificHeader),this.throttler=new e.Throttler.Throttler(100),i.Context.Context.instance().addFlavorChangeListener(n.DOMModel.DOMNode,this.update,this)}updateModel(e){this.cssModel!==e&&(this.cssModel&&this.cssModel.removeEventListener(n.CSSModel.Events.PseudoStateForced,this.update,this),this.cssModel=e,this.cssModel&&this.cssModel.addEventListener(n.CSSModel.Events.PseudoStateForced,this.update,this))}wasShown(){super.wasShown(),this.update()}update(){let e=i.Context.Context.instance().flavor(n.DOMModel.DOMNode);if(e&&(e=e.enclosingElementOrSelf()),this.updateModel(e?e.domModel().cssModel():null),e){const t=e.domModel().cssModel().pseudoState(e);for(const n of this.inputs){n.disabled=Boolean(e.pseudoType());const i=this.inputStates.get(n);n.checked=!(!t||void 0===i)&&t.indexOf(i)>=0}}else for(const e of this.inputs)e.disabled=!0,e.checked=!1;this.throttler.schedule(this.updateElementSpecificStatesTable.bind(this,e)),To.instance().item().setToggled(this.inputs.some((e=>e.checked)))}async updateElementSpecificStatesTable(e=null){if(!e||e.nodeType()!==Node.ELEMENT_NODE)return this.specificHeader.hidden=!0,void this.updateElementSpecificStatesTableForTest();let t=!1;const n=(e,n)=>{const i=this.specificPseudoStateDivs.get(e);i&&(i.hidden=n),t=t||!n},i=(e,t)=>t.includes(e.nodeName()?.toLowerCase()),s=e=>i(e,["input"])&&("checkbox"===e.getAttribute("type")||"radio"===e.getAttribute("type")),o=e=>void 0!==e.getAttribute("contenteditable")||Boolean(e.parentNode&&o(e.parentNode)),r=e=>void 0!==e.getAttribute("disabled"),a=await(async e=>{const t=await e.callFunction((function(){return"formAssociated"in this.constructor&&!0===this.constructor.formAssociated}));return!!t&&t.value})(e);i(e,["button","input","select","textarea","optgroup","option","fieldset"])||a?(n(bo.ENABLED,!r(e)),n(bo.DISABLED,r(e))):(n(bo.ENABLED,!0),n(bo.DISABLED,!0)),i(e,["button","fieldset","input","object","output","select","textarea","img"])||a?(n(bo.VALID,!1),n(bo.INVALID,!1)):(n(bo.VALID,!0),n(bo.INVALID,!0)),i(e,["input","select","textarea"])?(n(bo.USER_VALID,!1),n(bo.USER_INVALID,!1),void 0===e.getAttribute("required")?(n(bo.REQUIRED,!1),n(bo.OPTIONAL,!0)):(n(bo.REQUIRED,!0),n(bo.OPTIONAL,!1))):(n(bo.USER_VALID,!0),n(bo.USER_INVALID,!0),n(bo.REQUIRED,!0),n(bo.OPTIONAL,!0)),(e=>i(e,["input","textarea"])?void 0===e.getAttribute("readonly")&&!r(e):o(e))(e)?(n(bo.READ_WRITE,!0),n(bo.READ_ONLY,!1)):(n(bo.READ_WRITE,!1),n(bo.READ_ONLY,!0)),!i(e,["input"])||void 0===e.getAttribute("min")&&void 0===e.getAttribute("max")?(n(bo.IN_RANGE,!0),n(bo.OUT_OF_RANGE,!0)):(n(bo.IN_RANGE,!1),n(bo.OUT_OF_RANGE,!1)),i(e,["a","area"])&&void 0!==e.getAttribute("href")?(n(bo.VISITED,!1),n(bo.LINK,!1)):(n(bo.VISITED,!0),n(bo.LINK,!0)),s(e)||i(e,["option"])?n(bo.CHECKED,!1):n(bo.CHECKED,!0),s(e)||i(e,["progress"])?n(bo.INDETERMINATE,!1):n(bo.INDETERMINATE,!0),i(e,["input","textarea"])?n(bo.PLACEHOLDER_SHOWN,!1):n(bo.PLACEHOLDER_SHOWN,!0),i(e,["input"])?n(bo.AUTOFILL,!1):n(bo.AUTOFILL,!0),i(e,["input","select","dialog","details"])?n(bo.OPEN,!1):n(bo.OPEN,!0),this.specificHeader.hidden=!t,this.updateElementSpecificStatesTableForTest()}updateElementSpecificStatesTableForTest(){}}let xo;class To{button;view;constructor(){this.button=new i.Toolbar.ToolbarToggle(vo(Eo.toggleElementState),"hover"),this.button.addEventListener("Click",this.clicked,this),this.button.element.classList.add("element-state"),this.button.element.setAttribute("jslog",`${s.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 wo}static instance(e={forceNew:null}){const{forceNew:t}=e;return xo&&!t||(xo=new To),xo}clicked(){Ls.instance().showToolbarPane(this.view.isShowing()?null:this.view,this.button)}item(){return this.button}}var Mo=Object.freeze({__proto__:null,ButtonProvider:To,ElementStatePaneWidget:wo});export{K as AccessibilityTreeUtils,Y as AccessibilityTreeView,nt as CSSRuleValidator,pt as CSSValueTraceView,fo as ClassesPaneWidget,ie as ColorSwatchPopoverIcon,vi as ComputedStyleModel,Si as ComputedStyleWidget,hn as DOMLinkifier,Li as DOMPath,Mo as ElementStatePaneWidget,ks as ElementsPanel,Ee as ElementsSidebarPane,Cs as ElementsTreeElement,bs as ElementsTreeElementHighlighter,ts as ElementsTreeOutline,Ks as EventListenersWidget,_s as InspectElementModeController,Ie as LayersWidget,ds as MarkerDecorator,Ts as MetricsSidebarPane,ro as NodeStackTraceWidget,pe as PlatformFontsWidget,Zs as PropertiesWidget,si as PropertyRenderer,en as StyleEditorWidget,xn as StylePropertiesSection,Mn as StylePropertyHighlighter,qt as StylePropertyTreeElement,mt as StylePropertyUtils,zn as StylesSidebarPane,ji as TopLayerContainer,Pn as WebCustomData};