@react-native/debugger-frontend/dist/third-party/front_end/panels/elements/elements.js

Debugger frontend for React Native based on Chrome DevTools

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),K