@react-native/debugger-frontend
Version:
Debugger frontend for React Native based on Chrome DevTools
102 lines • 77 kB
JavaScript
import*as e from"../../../core/i18n/i18n.js";import*as t from"../../../core/platform/platform.js";import*as o from"../../../ui/components/render_coordinator/render_coordinator.js";import*as r from"../../../ui/lit/lit.js";import{html as n,nothing as s,render as i,Directives as a}from"../../../ui/lit/lit.js";import"../../../ui/components/icon_button/icon_button.js";import"../../../ui/legacy/components/inline_editor/inline_editor.js";import*as l from"../../../ui/visual_logging/visual_logging.js";import*as c from"../../../ui/legacy/legacy.js";import*as d from"../../../core/common/common.js";import*as p from"../../../ui/components/input/input.js";import"../../../ui/components/node_text/node_text.js";import*as u from"../../../ui/components/helpers/helpers.js";import*as h from"../../../core/sdk/sdk.js";import"../../../ui/components/buttons/buttons.js";import*as g from"../../../ui/components/legacy_wrapper/legacy_wrapper.js";var m={cssText:`.container{width:100%;display:inline-block}.container:hover{background-color:var(--sys-color-state-hover-on-subtle)}span{color:var(--sys-color-token-meta);font-family:var(--monospace-font-family);font-size:var(--monospace-font-size)}.role-value{color:var(--sys-color-token-tag)}.attribute-name{color:var(--sys-color-token-attribute)}.attribute-value{color:var(--sys-color-token-attribute-value)}\n/*# sourceURL=${import.meta.resolve("./accessibilityTreeNode.css")} */\n`};const b=new CSSStyleSheet;b.replaceSync(m.cssText);const v={ignored:"Ignored"},y=e.i18n.registerUIStrings("panels/elements/components/AccessibilityTreeNode.ts",v),f=e.i18n.getLocalizedString.bind(void 0,y);class x extends HTMLElement{#e=this.attachShadow({mode:"open"});#t=!0;#o="";#r="";#n=[];#s="";set data(e){this.#t=e.ignored,this.#o=e.name,this.#r=e.role,this.#n=e.properties,this.#s=e.id,this.#i()}connectedCallback(){this.#e.adoptedStyleSheets=[b]}async#i(){const e=n`<span class='role-value'>${r=this.#r,r.length>1e4?t.StringUtilities.trimMiddle(r,1e4):r}</span>`;var r;const a=n`"<span class='attribute-value'>${this.#o}</span>"`,l=this.#n.map((({name:e,value:t})=>function(e){switch(e){case"boolean":case"booleanOrUndefined":case"string":case"number":return!0;default:return!1}}(t.type)?n` <span class='attribute-name'>${e}</span>: <span class='attribute-value'>${t.value}</span>`:s)),c=this.#t?n`<span>${f(v.ignored)}</span>`:n`${e} ${a}${l}`;await o.write(`Accessibility node ${this.#s} render`,(()=>{i(n`<div class='container'>${c}</div>`,this.#e,{host:this})}))}}customElements.define("devtools-accessibility-tree-node",x);var w,k=Object.freeze({__proto__:null,AccessibilityTreeNode:x});function S(e){switch(e){case w.GRID:return{name:"grid",category:"Layout",enabledByDefault:!0};case w.SUBGRID:return{name:"subgrid",category:"Layout",enabledByDefault:!0};case w.FLEX:return{name:"flex",category:"Layout",enabledByDefault:!0};case w.AD:return{name:"ad",category:"Security",enabledByDefault:!0};case w.SCROLL_SNAP:return{name:"scroll-snap",category:"Layout",enabledByDefault:!0};case w.CONTAINER:return{name:"container",category:"Layout",enabledByDefault:!0};case w.SLOT:return{name:"slot",category:"Layout",enabledByDefault:!0};case w.TOP_LAYER:return{name:"top-layer",category:"Layout",enabledByDefault:!0};case w.REVEAL:return{name:"reveal",category:"Default",enabledByDefault:!0};case w.MEDIA:return{name:"media",category:"Default",enabledByDefault:!1};case w.SCROLL:return{name:"scroll",category:"Layout",enabledByDefault:!0}}}let $;function C(e){if(!$){$=new Map;for(const{name:e,category:t}of Object.values(w).map(S))$.set(e,t)}return $.get(e)||"Default"}!function(e){e.GRID="grid",e.SUBGRID="subgrid",e.FLEX="flex",e.AD="ad",e.SCROLL_SNAP="scroll-snap",e.CONTAINER="container",e.SLOT="slot",e.TOP_LAYER="top-layer",e.REVEAL="reveal",e.MEDIA="media",e.SCROLL="scroll"}(w||(w={}));const N=Object.values(w).map(S).map((({name:e,enabledByDefault:t})=>({adorner:e,isEnabled:t})));const E=new Map(["Security","Layout","Default"].map(((e,t)=>[e,t+1])));var M=Object.freeze({__proto__:null,AdornerCategoryOrder:E,AdornerManager:class{#a=new Map;#l;constructor(e){this.#l=e,this.#c()}updateSettings(e){this.#a=e,this.#d()}getSettings(){return this.#a}isAdornerEnabled(e){return this.#a.get(e)||!1}#d(){const e=[];for(const[t,o]of this.#a)e.push({adorner:t,isEnabled:o});this.#l.set(e)}#p(){const e=this.#l.get();for(const t of e)this.#a.set(t.adorner,t.isEnabled)}#c(){this.#p();const e=new Set(this.#a.keys());for(const{adorner:t,isEnabled:o}of N)e.delete(t),this.#a.has(t)||this.#a.set(t,o);for(const t of e)this.#a.delete(t);this.#d()}},DefaultAdornerSettings:N,get RegisteredAdorners(){return w},compareAdornerNamesByCategory:function(e,t){return(E.get(C(e))||Number.POSITIVE_INFINITY)-(E.get(C(t))||Number.POSITIVE_INFINITY)},getRegisteredAdorner:S}),j={cssText:`.icon-link{color:var(--text-link);width:13px;height:13px;&:hover{cursor:pointer}}\n/*# sourceURL=${import.meta.resolve("./anchorFunctionLinkSwatch.css")} */\n`};const z=new CSSStyleSheet;z.replaceSync(j.cssText);const T={jumpToAnchorNode:"Jump to anchor node",sIsNotDefined:"{PH1} is not defined"},L=e.i18n.registerUIStrings("panels/elements/components/AnchorFunctionLinkSwatch.ts",T),O=e.i18n.getLocalizedString.bind(void 0,L),{render:D,html:P}=r;class _ extends HTMLElement{#e=this.attachShadow({mode:"open"});#u;constructor(e){super(),this.#u=e}dataForTest(){return this.#u}connectedCallback(){this.#e.adoptedStyleSheets=[z],this.render()}set data(e){this.#u=e,this.render()}#h(e){e.stopPropagation(),this.#u.onLinkActivate()}render(){(this.#u.identifier||this.#u.anchorNode)&&(this.#u.identifier?D(P`<devtools-link-swatch
@mouseenter=${this.#u.onMouseEnter}
@mouseleave=${this.#u.onMouseLeave}
.data=${{text:this.#u.identifier,tooltip:this.#u.anchorNode?void 0:{title:O(T.sIsNotDefined,{PH1:this.#u.identifier})},isDefined:Boolean(this.#u.anchorNode),jslogContext:"anchor-link",onLinkActivate:this.#u.onLinkActivate}}
></devtools-link-swatch>${this.#u.needsSpace?" ":""}`,this.#e,{host:this}):D(P`<devtools-icon
role='button'
title=${O(T.jumpToAnchorNode)}
class='icon-link'
name='open-externally'
jslog=${l.action("jump-to-anchor-node").track({click:!0})}
@mouseenter=${this.#u.onMouseEnter}
@mouseleave=${this.#u.onMouseLeave}
@mousedown=${e=>e.stopPropagation()}
@click=${this.#h}
></devtools-icon>${this.#u.needsSpace?" ":""}`,this.#e,{host:this}))}}customElements.define("devtools-anchor-function-link-swatch",_);var I=Object.freeze({__proto__:null,AnchorFunctionLinkSwatch:_}),H={cssText:`:host{position:relative;overflow:hidden;flex:auto;text-overflow:ellipsis}.computed-style-property{--goto-size:16px;font-family:var(--monospace-font-family);font-size:var(--monospace-font-size);min-height:16px;box-sizing:border-box;padding-top:2px;white-space:nowrap;user-select:text}.computed-style-property:hover{background-color:var(--sys-color-state-hover-on-subtle);cursor:text}.computed-style-property.inherited{opacity:75%;font-style:italic}.property-name,\n.property-value{display:contents;overflow:hidden;text-overflow:ellipsis}.property-name{width:16em;max-width:52%;margin-right:calc(var(--goto-size) / 2);display:inline-block;vertical-align:text-top;color:var(--webkit-css-property-color,var(--sys-color-token-property-special))}.property-value{margin-left:2em}.goto{display:none;cursor:pointer;position:absolute;width:var(--goto-size);height:var(--goto-size);margin:-1px 0 0 calc(-1 * var(--goto-size));mask:var(--image-file-goto-filled) center /contain no-repeat;background-color:var(--sys-color-primary-bright)}.computed-style-property:hover .goto{display:inline-block}.hidden{display:none}:host-context(.computed-narrow) .computed-style-property{white-space:normal;& .goto{display:none;margin-left:0}}:host-context(.computed-narrow) .property-name,\n:host-context(.computed-narrow) .property-value{display:inline-block;width:100%;max-width:100%;margin-left:0;white-space:nowrap}:host-context(.computed-narrow) .computed-style-property:not(.inherited):hover{& .property-value{margin-left:var(--goto-size)}& .goto{display:inline-block}}@media (forced-colors: active){.computed-style-property.inherited{opacity:100%}.computed-style-property:hover{forced-color-adjust:none;background-color:Highlight}.computed-style-property:hover *{color:HighlightText}.goto{background-color:HighlightText}}\n/*# sourceURL=${import.meta.resolve("./computedStyleProperty.css")} */\n`};const A=new CSSStyleSheet;A.replaceSync(H.cssText);class B extends Event{static eventName="onnavigatetosource";constructor(){super(B.eventName,{bubbles:!0,composed:!0})}}class R extends HTMLElement{#e=this.attachShadow({mode:"open"});#g=!1;#m=!1;connectedCallback(){this.#e.adoptedStyleSheets=[A],this.#i()}set inherited(e){e!==this.#g&&(this.#g=e,this.#i())}set traceable(e){e!==this.#m&&(this.#m=e,this.#i())}#b(){this.dispatchEvent(new B)}#i(){i(n`
<div class="computed-style-property ${this.#g?"inherited":""}">
<div class="property-name">
<slot name="name"></slot>
</div>
<span class="hidden" aria-hidden="false">: </span>
${this.#m?n`<span class="goto" @click=${this.#b} jslog=${l.action("elements.jump-to-style").track({click:!0})}></span>`:null}
<div class="property-value">
<slot name="value"></slot>
</div>
<span class="hidden" aria-hidden="false">;</span>
</div>
`,this.#e,{host:this})}}customElements.define("devtools-computed-style-property",R);var q=Object.freeze({__proto__:null,ComputedStyleProperty:R,NavigateToSourceEvent:B}),F={cssText:`:host{text-overflow:ellipsis;overflow:hidden;flex-grow:1}.computed-style-trace{margin-left:16px;font-family:var(--monospace-font-family);font-size:var(--monospace-font-size)}.computed-style-trace:hover{background-color:var(--sys-color-state-hover-on-subtle);cursor:text}.goto{--size:16px;display:none;cursor:pointer;position:absolute;width:var(--size);height:var(--size);margin:-1px 0 0 calc(-1 * var(--size));mask:var(--image-file-goto-filled) center /contain no-repeat;background-color:var(--sys-color-surface-variant)}.computed-style-trace:hover .goto{display:inline-block}.devtools-link{color:var(--sys-color-on-surface);text-decoration-color:var(--sys-color-token-subtle);text-decoration-line:underline;cursor:pointer}.trace-value{margin-left:16px}.computed-style-trace.inactive slot[name="trace-value"]{text-decoration:line-through}.trace-selector{--override-trace-selector-color:var(--sys-color-neutral-bright);color:var(--override-trace-selector-color);padding-left:2em}.trace-link{user-select:none;float:right;padding-left:1em;position:relative;z-index:1}@media (forced-colors: active){.computed-style-trace:hover{forced-color-adjust:none;background-color:Highlight}.goto{background-color:Highlight}.computed-style-trace:hover *{color:HighlightText}.computed-style-trace:hover .trace-selector{--override-trace-selector-color:HighlightText}}\n/*# sourceURL=${import.meta.resolve("./computedStyleTrace.css")} */\n`};const V=new CSSStyleSheet;V.replaceSync(F.cssText);class U extends HTMLElement{#e=this.attachShadow({mode:"open"});#v="";#y=!1;#f=()=>{};#x;connectedCallback(){c.UIUtils.injectCoreStyles(this.#e),this.#e.adoptedStyleSheets.push(V)}set data(e){this.#v=e.selector,this.#y=e.active,this.#f=e.onNavigateToSource,this.#x=e.ruleOriginNode,this.#i()}#i(){i(n`
<div class="computed-style-trace ${this.#y?"active":"inactive"}">
<span class="goto" @click=${this.#f}></span>
<slot name="trace-value" @click=${this.#f}></slot>
<span class="trace-selector">${this.#v}</span>
<span class="trace-link">${this.#x}</span>
</div>
`,this.#e,{host:this})}}customElements.define("devtools-computed-style-trace",U);var G=Object.freeze({__proto__:null,ComputedStyleTrace:U}),W={cssText:`.hint-popup-wrapper{max-width:232px}code{font-weight:bold;font-family:inherit}.hint-popup-possible-fix{margin-top:8px}.clickable{color:var(--sys-color-primary)}.underlined{text-decoration:underline}.unbreakable-text{white-space:nowrap}.footer{margin-top:var(--sys-size-5)}\n/*# sourceURL=${import.meta.resolve("./cssHintDetailsView.css")} */\n`};const Q=new CSSStyleSheet;Q.replaceSync(W.cssText);const Y={learnMore:"Learn More"},X=e.i18n.registerUIStrings("panels/elements/components/CSSHintDetailsView.ts",Y),K=e.i18n.getLocalizedString.bind(void 0,X);class J extends HTMLElement{#e=this.attachShadow({mode:"open"});#w;constructor(e){super(),this.#w=e,this.#e.adoptedStyleSheets=[Q],this.#i()}#i(){const e=this.#w.getLearnMoreLink();i(n`
<div class="hint-popup-wrapper">
<div class="hint-popup-reason">
${a.unsafeHTML(this.#w.getMessage())}
</div>
${this.#w.getPossibleFixMessage()?n`
<div class="hint-popup-possible-fix">
${a.unsafeHTML(this.#w.getPossibleFixMessage())}
</div>
`:""}
${e?n`
<div class="footer">
<x-link id="learn-more" href=${e} class="clickable underlined unbreakable-text">
${K(Y.learnMore)}
</x-link>
</div>
`:""}
</div>
`,this.#e,{host:this})}}customElements.define("devtools-css-hint-details-view",J);var Z=Object.freeze({__proto__:null,CSSHintDetailsView:J}),ee={cssText:`.docs-popup-wrapper{max-width:350px;font-size:12px;line-height:1.4}.docs-popup-section{margin-top:8px}.clickable{color:var(--sys-color-primary)}.underlined{text-decoration:underline}.unbreakable-text{white-space:nowrap}.footer{display:flex;justify-content:space-between}.dont-show{display:inline-flex;align-items:center}\n/*# sourceURL=${import.meta.resolve("./cssPropertyDocsView.css")} */\n`};const te=new CSSStyleSheet;te.replaceSync(ee.cssText);const oe={learnMore:"Learn more",dontShow:"Don't show"},re=e.i18n.registerUIStrings("panels/elements/components/CSSPropertyDocsView.ts",oe),ne=e.i18n.getLocalizedString.bind(void 0,re);class se extends HTMLElement{#e=this.attachShadow({mode:"open"});#k;constructor(e){super(),this.#k=e,this.#e.adoptedStyleSheets=[p.checkboxStyles,te],this.#i()}#S(e){const t=!e.target.checked;d.Settings.Settings.instance().moduleSetting("show-css-property-documentation-on-hover").set(t)}#i(){const e=this.#k.description,t=this.#k.references?.[0].url;i(n`
<div class="docs-popup-wrapper">
${e?n`
<div id="description">
${e}
</div>
`:s}
${t?n`
<div class="docs-popup-section footer">
<x-link
id="learn-more"
href=${t}
class="clickable underlined unbreakable-text"
>
${ne(oe.learnMore)}
</x-link>
<label class="dont-show">
<input type="checkbox" @change=${this.#S} jslog=${l.toggle("css-property-doc").track({change:!0})} />
${ne(oe.dontShow)}
</label>
</div>
`:s}
</div>
`,this.#e,{host:this})}}customElements.define("devtools-css-property-docs-view",se);var ie=Object.freeze({__proto__:null,CSSPropertyDocsView:se});const ae=new Set(["tb","tb-rl","vertical-lr","vertical-rl"]);function le(e){if("left-to-right"===e)return"right-to-left";if("right-to-left"===e)return"left-to-right";if("top-to-bottom"===e)return"bottom-to-top";if("bottom-to-top"===e)return"top-to-bottom";throw new Error("Unknown PhysicalFlexDirection")}function ce(e){return{...e,"row-reverse":le(e.row),"column-reverse":le(e.column)}}function de(e){const t="rtl"===e.get("direction"),o=e.get("writing-mode");return ce(o&&ae.has(o)?{row:t?"bottom-to-top":"top-to-bottom",column:"vertical-lr"===o?"left-to-right":"right-to-left"}:{row:t?"right-to-left":"left-to-right",column:"top-to-bottom"})}function pe(e){let t=!0,o=!1,r=-90;return"right-to-left"===e?(r=90,o=!1,t=!1):"top-to-bottom"===e?(r=0,t=!1,o=!1):"bottom-to-top"===e&&(r=0,t=!1,o=!0),{iconName:"flex-direction",rotate:r,scaleX:t?-1:1,scaleY:o?-1:1}}function ue(e,t){return{iconName:e,rotate:"right-to-left"===t?90:"left-to-right"===t?-90:0,scaleX:1,scaleY:1}}function he(e,t){return{iconName:e,rotate:"top-to-bottom"===t?90:"bottom-to-top"===t?-90:0,scaleX:"right-to-left"===t?-1:1,scaleY:1}}function ge(e,t){return{iconName:e,rotate:"top-to-bottom"===t?90:"bottom-to-top"===t?-90:0,scaleX:"right-to-left"===t?-1:1,scaleY:1}}function me(e,t){return{iconName:e,rotate:"right-to-left"===t?90:"left-to-right"===t?-90:0,scaleX:1,scaleY:1}}function be(e){return function(t){return pe(de(t)[e])}}function ve(e){return function(t){const o=de(t),r=new Map([["column",o.row],["row",o.column],["column-reverse",o.row],["row-reverse",o.column]]),n=t.get("flex-direction")||"row",s=r.get(n);if(!s)throw new Error("Unknown direction for flex-align icon");return ue(e,s)}}function ye(e){return function(t){const o=de(t);return ue(e,o.column)}}function fe(e){return function(t){const o=de(t);return he(e,o[t.get("flex-direction")||"row"])}}function xe(e){return function(t){const o=de(t);return he(e,o.row)}}function we(e){return function(t){const o=de(t);return ge(e,o.row)}}function ke(e){return function(t){const o=de(t),r=new Map([["column",o.row],["row",o.column],["column-reverse",o.row],["row-reverse",o.column]]),n=t.get("flex-direction")||"row",s=r.get(n);if(!s)throw new Error("Unknown direction for flex-align icon");return me(e,s)}}function Se(e){return function(t){const o=de(t);return me(e,o.column)}}function $e(){return{iconName:"align-items-baseline",rotate:0,scaleX:1,scaleY:1}}function Ce(e){return function(t,o){return ke(e)(o)}}function Ne(e){return function(t,o){return Se(e)(o)}}function Ee(e,t){return{iconName:e,rotate:"bottom-to-top"===t||"top-to-bottom"===t?90:0,scaleX:1,scaleY:1}}function Me(e){return function(t){const o=de(t),r=t.get("flex-direction")||"row";return Ee(e,o[r])}}const je=new Map([["flex-direction: row",be("row")],["flex-direction: column",be("column")],["flex-direction: column-reverse",be("column-reverse")],["flex-direction: row-reverse",be("row-reverse")],["flex-direction: initial",be("row")],["flex-direction: unset",be("row")],["flex-direction: revert",be("row")],["align-content: center",ve("align-content-center")],["align-content: space-around",ve("align-content-space-around")],["align-content: space-between",ve("align-content-space-between")],["align-content: stretch",ve("align-content-stretch")],["align-content: space-evenly",ve("align-content-space-evenly")],["align-content: flex-end",ve("align-content-end")],["align-content: flex-start",ve("align-content-start")],["align-content: start",ve("align-content-start")],["align-content: end",ve("align-content-end")],["align-content: normal",ve("align-content-stretch")],["align-content: revert",ve("align-content-stretch")],["align-content: unset",ve("align-content-stretch")],["align-content: initial",ve("align-content-stretch")],["justify-content: center",fe("justify-content-center")],["justify-content: space-around",fe("justify-content-space-around")],["justify-content: space-between",fe("justify-content-space-between")],["justify-content: space-evenly",fe("justify-content-space-evenly")],["justify-content: flex-end",fe("justify-content-end")],["justify-content: flex-start",fe("justify-content-start")],["justify-content: end",fe("justify-content-end")],["justify-content: start",fe("justify-content-start")],["justify-content: right",fe("justify-content-end")],["justify-content: left",fe("justify-content-start")],["align-items: stretch",ke("align-items-stretch")],["align-items: flex-end",ke("align-items-end")],["align-items: flex-start",ke("align-items-start")],["align-items: end",ke("align-items-end")],["align-items: start",ke("align-items-start")],["align-items: self-end",ke("align-items-end")],["align-items: self-start",ke("align-items-start")],["align-items: center",ke("align-items-center")],["align-items: baseline",$e],["align-content: baseline",$e],["flex-wrap: wrap",Me("flex-wrap")],["flex-wrap: nowrap",Me("flex-no-wrap")]]),ze=new Map([["align-self: baseline",$e],["align-self: center",Ce("align-self-center")],["align-self: flex-start",Ce("align-self-start")],["align-self: flex-end",Ce("align-self-end")],["align-self: start",Ne("align-self-start")],["align-self: end",Ne("align-self-end")],["align-self: self-start",Ne("align-self-start")],["align-self: self-end",Ne("align-self-end")],["align-self: stretch",Ce("align-self-stretch")]]),Te=new Map([["align-content: center",ye("align-content-center")],["align-content: space-around",ye("align-content-space-around")],["align-content: space-between",ye("align-content-space-between")],["align-content: stretch",ye("align-content-stretch")],["align-content: space-evenly",ye("align-content-space-evenly")],["align-content: end",ye("align-content-end")],["align-content: start",ye("align-content-start")],["align-content: baseline",$e],["justify-content: center",xe("justify-content-center")],["justify-content: space-around",xe("justify-content-space-around")],["justify-content: space-between",xe("justify-content-space-between")],["justify-content: space-evenly",xe("justify-content-space-evenly")],["justify-content: end",xe("justify-content-end")],["justify-content: start",xe("justify-content-start")],["justify-content: right",xe("justify-content-end")],["justify-content: left",xe("justify-content-start")],["align-items: stretch",Se("align-items-stretch")],["align-items: end",Se("align-items-end")],["align-items: start",Se("align-items-start")],["align-items: self-end",Se("align-items-end")],["align-items: self-start",Se("align-items-start")],["align-items: center",Se("align-items-center")],["align-items: baseline",$e],["justify-items: center",we("justify-items-center")],["justify-items: stretch",we("justify-items-stretch")],["justify-items: end",we("justify-items-end")],["justify-items: start",we("justify-items-start")],["justify-items: self-end",we("justify-items-end")],["justify-items: self-start",we("justify-items-start")],["justify-items: right",we("justify-items-end")],["justify-items: left",we("justify-items-start")],["justify-items: baseline",$e]]),Le=new Map([["align-self: baseline",$e],["align-self: center",Ne("align-self-center")],["align-self: start",Ne("align-self-start")],["align-self: end",Ne("align-self-end")],["align-self: self-start",Ne("align-self-start")],["align-self: self-end",Ne("align-self-end")],["align-self: stretch",Ne("align-self-stretch")]]),Oe=e=>{const t=e?.get("display");return"flex"===t||"inline-flex"===t},De=e=>{const t=e?.get("display");return"grid"===t||"inline-grid"===t};function Pe(e,t){const o=je.get(e);return o?o(t||new Map):null}function _e(e,t,o){const r=ze.get(e);return r?r(t||new Map,o||new Map):null}function Ie(e,t){const o=Te.get(e);return o?o(t||new Map):null}function He(e,t,o){const r=Le.get(e);return r?r(t||new Map,o||new Map):null}var Ae=Object.freeze({__proto__:null,findFlexContainerIcon:Pe,findFlexItemIcon:_e,findGridContainerIcon:Ie,findGridItemIcon:He,findIcon:function(e,t,o){if(Oe(t)){const o=Pe(e,t);if(o)return o}if(Oe(o)){const r=_e(e,t,o);if(r)return r}if(De(t)){const o=Ie(e,t);if(o)return o}if(De(o)){const r=He(e,t,o);if(r)return r}return null},getPhysicalDirections:de,reverseDirection:le,roateFlexWrapIcon:Ee,rotateAlignContentIcon:ue,rotateAlignItemsIcon:me,rotateFlexDirectionIcon:pe,rotateJustifyContentIcon:he,rotateJustifyItemsIcon:ge}),Be={cssText:`*{box-sizing:border-box;min-width:0;min-height:0}:root{height:100%;overflow:hidden;interpolate-size:allow-keywords}body{height:100%;width:100%;position:relative;overflow:hidden;margin:0;cursor:default;font-family:var(--default-font-family);font-size:12px;tab-size:4;user-select:none;color:var(--sys-color-on-surface);background:var(--sys-color-cdt-base-container)}:focus{outline-width:0}.monospace{font-family:var(--monospace-font-family);font-size:var(\n --monospace-font-size\n )!important}.source-code{font-family:var(--source-code-font-family);font-size:var(\n --source-code-font-size\n )!important;white-space:pre-wrap;&:not(input)::selection{color:var(--sys-color-on-surface)}}.source-code.breakpoint{white-space:nowrap}.source-code .devtools-link.text-button{max-width:100%;overflow:hidden;text-overflow:ellipsis}img{-webkit-user-drag:none}iframe,\na img{border:none}.fill{position:absolute;inset:0}iframe.fill{width:100%;height:100%}.widget{position:relative;flex:auto;contain:style}.hbox{display:flex;flex-direction:row!important;position:relative}.vbox{display:flex;flex-direction:column!important;position:relative}.view-container > devtools-toolbar{border-bottom:1px solid var(--sys-color-divider)}.flex-auto{flex:auto}.flex-none{flex:none}.flex-centered{display:flex;align-items:center;justify-content:center}.overflow-auto{overflow:auto;background-color:var(--sys-color-cdt-base-container)}iframe.widget{position:absolute;width:100%;height:100%;inset:0}.hidden{display:none!important}.highlighted-search-result{border-radius:1px;background-color:var(--sys-color-yellow-container);outline:1px solid var(--sys-color-yellow-container)}.link{cursor:pointer;text-decoration:underline;color:var(--sys-color-primary);outline-offset:2px}button,\ninput,\nselect{font-family:inherit;font-size:inherit}select option,\nselect optgroup,\ninput{background-color:var(--sys-color-cdt-base-container)}input{color:inherit;&[type="checkbox"]{position:relative;outline:none;display:flex;align-items:center;justify-content:center;&:hover::after,\n &:active::before{content:"";height:24px;width:24px;border-radius:var(--sys-shape-corner-full);position:absolute}&:not(.-theme-preserve){accent-color:var(--sys-color-primary-bright);color:var(--sys-color-on-primary)}&:not(:disabled):hover::after{background-color:var(--sys-color-state-hover-on-subtle)}&:not(:disabled):active::before{background-color:var(--sys-color-state-ripple-neutral-on-subtle)}&:not(:disabled):focus-visible::before{content:"";height:15px;width:15px;border-radius:5px;position:absolute;border:2px solid var(--sys-color-state-focus-ring)}&.small:hover::after,\n &.small:active::before{height:12px;width:12px;border-radius:2px}}}input::placeholder{--override-input-placeholder-color:rgb(0 0 0/54%);color:var(--override-input-placeholder-color)}.theme-with-dark-background input::placeholder,\n:host-context(.theme-with-dark-background) input::placeholder{--override-input-placeholder-color:rgb(230 230 230/54%)}.harmony-input:not([type]),\n.harmony-input[type="number"],\n.harmony-input[type="text"]{padding:3px 6px;height:24px;border:1px solid var(--sys-color-neutral-outline);border-radius:4px;&.error-input,\n &:invalid{border-color:var(--sys-color-error)}&:not(.error-input, :invalid):focus{border-color:var(--sys-color-state-focus-ring)}&:not(.error-input, :invalid):hover:not(:focus){background:var(--sys-color-state-hover-on-subtle)}}input[type="radio"]{height:17px;width:17px;min-width:17px;border-radius:8px;vertical-align:sub;margin:0 5px 5px 0;accent-color:var(--sys-color-primary-bright);color:var(--sys-color-on-primary);&:focus{box-shadow:var(--legacy-focus-ring-active-shadow)}}@media (forced-colors: active){input[type="radio"]{--gradient-start:ButtonFace;--gradient-end:ButtonFace;&:checked{--gradient-start:Highlight;--gradient-end:Highlight}}}input[type="range"]{appearance:none;margin:0;padding:0;height:10px;width:88px;outline:none;background:none}input[type="range"]::-webkit-slider-thumb,\n.-theme-preserve{appearance:none;margin:0;padding:0;border:0;width:12px;height:12px;margin-top:-5px;border-radius:50%;background-color:var(--sys-color-primary)}input[type="range"]::-webkit-slider-runnable-track{appearance:none;margin:0;padding:0;width:100%;height:2px;background-color:var(--sys-color-surface-variant)}input[type="range"]:focus::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--sys-color-inverse-primary)}input[type="range"]:disabled::-webkit-slider-thumb{background-color:var(--sys-color-state-disabled)}@media (forced-colors: active){input[type="range"]{forced-color-adjust:none}}.highlighted-search-result.current-search-result{--override-current-search-result-background-color:rgb(255 127 0/80%);border-radius:1px;padding:1px;margin:-1px;background-color:var(--override-current-search-result-background-color)}.dimmed{opacity:60%}.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(\n --sys-color-on-surface\n )!important;text-decoration:none!important}select{appearance:none;user-select:none;height:var(--sys-size-11);border:var(--sys-size-1) solid var(--sys-color-neutral-outline);border-radius:var(--sys-shape-corner-extra-small);color:var(--sys-color-on-surface);font:inherit;margin:0;outline:none;padding:0 var(--sys-size-9) 0 var(--sys-size-5);background-image:var(--combobox-dropdown-arrow);background-color:transparent;background-position:right center;background-repeat:no-repeat;&:disabled{opacity:100%;border-color:transparent;color:var(--sys-color-state-disabled);background-color:var(--sys-color-state-disabled-container);pointer-events:none}&:enabled{&:hover{background-color:var(--sys-color-state-hover-on-subtle)}&:active{background-color:var(--sys-color-state-ripple-neutral-on-subtle)}&:hover:active{background:var(--combobox-dropdown-arrow),linear-gradient(var(--sys-color-state-hover-on-subtle),var(--sys-color-state-hover-on-subtle)),linear-gradient(var(--sys-color-state-ripple-neutral-on-subtle),var(--sys-color-state-ripple-neutral-on-subtle));background-position:right center;background-repeat:no-repeat}&:focus{outline:var(--sys-size-2) solid var(--sys-color-state-focus-ring);outline-offset:-1px}}}@media (forced-colors: active) and (prefers-color-scheme: light){:root,\n .theme-with-dark-background,\n :host-context(.theme-with-dark-background){--combobox-dropdown-arrow:var(--image-file-arrow-drop-down-light)}}@media (forced-colors: active) and (prefers-color-scheme: dark){:root,\n .theme-with-dark-background,\n :host-context(.theme-with-dark-background){--combobox-dropdown-arrow:var(--image-file-arrow-drop-down-dark)}}.chrome-select-label{margin:0 var(--sys-size-10);flex:none;p p{margin-top:0;color:var(--sys-color-token-subtle)}.reload-warning{margin-left:var(--sys-size-5)}}.settings-select{margin:0}select optgroup,\nselect option{background-color:var(--sys-color-cdt-base-container);color:var(--sys-color-on-surface)}.gray-info-message{text-align:center;font-style:italic;padding:6px;color:var(--sys-color-token-subtle);white-space:nowrap}.empty-state{margin:var(--sys-size-5);display:flex;flex-grow:1;justify-content:center;align-items:center;flex-direction:column;text-align:center;min-height:fit-content;min-width:fit-content;> *{max-width:var(--sys-size-29)}.empty-state-header{font:var(--sys-typescale-headline5);margin-bottom:var(--sys-size-3)}.empty-state-description{font:var(--sys-typescale-body4-regular);color:var(--sys-color-on-surface-subtle);> x-link{white-space:nowrap;margin-left:var(--sys-size-3)}}> devtools-button{margin-top:var(--sys-size-7)}}dt-icon-label{flex:none}.full-widget-dimmed-banner a{color:inherit}.full-widget-dimmed-banner{color:var(--sys-color-token-subtle);background-color:var(--sys-color-cdt-base-container);display:flex;justify-content:center;align-items:center;text-align:center;padding:20px;position:absolute;inset:0;font-size:13px;overflow:auto;z-index:500}.dot::before{content:var(--image-file-empty);width:6px;height:6px;border-radius:50%;outline:1px solid var(--icon-gap-default);left:9px;position:absolute;top:9px;z-index:1}.green::before{background-color:var(--sys-color-green-bright)}.purple::before{background-color:var(--sys-color-purple-bright)}.expandable-inline-button{background-color:var(--sys-color-cdt-base-container);color:var(--sys-color-on-surface);cursor:pointer;border-radius:3px}.undisplayable-text,\n.expandable-inline-button{border:none;padding:1px 3px;margin:0 2px;font-size:11px;font-family:sans-serif;white-space:nowrap;display:inline-block}.undisplayable-text::after,\n.expandable-inline-button::after{content:attr(data-text)}.undisplayable-text{color:var(--sys-color-state-disabled);font-style:italic}.expandable-inline-button:hover,\n.expandable-inline-button:focus-visible{background-color:var(--sys-color-state-hover-on-subtle)}.expandable-inline-button:focus-visible{background-color:var(--sys-color-state-focus-highlight)}::selection{background-color:var(--sys-color-state-text-highlight);color:var(--sys-color-state-on-text-highlight)}button.link{border:none;background:none;padding:3px}button.link:focus-visible{outline:2px solid var(--sys-color-state-focus-ring);outline-offset:2px;border-radius:var(--sys-shape-corner-full)}.data-grid-data-grid-node button.link:focus-visible{border-radius:var(--sys-shape-corner-extra-small);padding:0;margin-top:3px}@media (forced-colors: active){.dimmed,\n select:disabled{opacity:100%}.harmony-input:not([type]),\n .harmony-input[type="number"],\n .harmony-input[type="text"]{border:1px solid ButtonText}.harmony-input:not([type]):focus,\n .harmony-input[type="number"]:focus,\n .harmony-input[type="text"]:focus{border:1px solid Highlight}}input.custom-search-input::-webkit-search-cancel-button{appearance:none;width:16px;height:15px;margin-right:0;opacity:70%;mask-image:var(--image-file-cross-circle-filled);mask-position:center;mask-repeat:no-repeat;mask-size:99%;background-color:var(--icon-default)}input.custom-search-input::-webkit-search-cancel-button:hover{opacity:99%}.spinner::before{display:block;width:var(--dimension,24px);height:var(--dimension,24px);border:var(--override-spinner-size,3px) solid var(--override-spinner-color,var(--sys-color-token-subtle));border-radius:12px;clip:rect(0,var(--clip-size,15px),var(--clip-size,15px),0);content:"";position:absolute;animation:spinner-animation 1s linear infinite;box-sizing:border-box}@keyframes spinner-animation{from{transform:rotate(0)}to{transform:rotate(360deg)}}.adorner-container{display:inline-flex;vertical-align:middle}.adorner-container.hidden{display:none}.adorner-container devtools-adorner{margin-left:3px}:host-context(.theme-with-dark-background) devtools-adorner{--override-adorner-border-color:var(--sys-color-tonal-outline);--override-adorner-active-background-color:var(\n --sys-color-state-riple-neutral-on-subtle\n )}.panel{display:flex;overflow:hidden;position:absolute;inset:0;z-index:0;background-color:var(--sys-color-cdt-base-container)}.panel-sidebar{overflow-x:hidden;background-color:var(--sys-color-cdt-base-container)}iframe.extension{flex:auto;width:100%;height:100%}iframe.panel.extension{display:block;height:100%}@media (forced-colors: active){:root{--legacy-accent-color:Highlight;--legacy-focus-ring-inactive-shadow-color:ButtonText}}devtools-toolbar{& > *{position:relative;display:flex;background-color:transparent;flex:none;align-items:center;justify-content:center;height:var(--toolbar-height);border:none;white-space:pre;overflow:hidden;max-width:100%;color:var(--icon-default);cursor:default;& .devtools-link{color:var(--icon-default)}}.status-buttons{padding:0 var(--sys-size-2);gap:var(--sys-size-2)}& > :not(select){padding:0}& > devtools-issue-counter{margin-top:-4px;padding:0 1px}devtools-adorner.fix-perf-icon{--override-adorner-text-color:transparent;--override-adorner-border-color:transparent;--override-adorner-background-color:transparent}devtools-issue-counter.main-toolbar{margin-left:1px;margin-right:1px}.toolbar-dropdown-arrow{pointer-events:none;flex:none;top:2px}.toolbar-button.dark-text .toolbar-dropdown-arrow{color:var(--sys-color-on-surface)}.toolbar-button{white-space:nowrap;overflow:hidden;min-width:28px;background:transparent;border-radius:0;&[aria-haspopup="true"][aria-expanded="true"]{pointer-events:none}}.toolbar-item-search{min-width:5.2em;max-width:300px;flex:1 1 auto;justify-content:start;overflow:revert}.toolbar-text{margin:0 5px;flex:none;color:var(--ui-text)}.toolbar-text:empty{margin:0}.toolbar-has-dropdown{justify-content:space-between;height:var(--sys-size-9);padding:0 var(--sys-size-2) 0 var(--sys-size-4);margin:0 var(--sys-size-2);gap:var(--sys-size-2);border-radius:var(--sys-shape-corner-extra-small);&:hover::after,\n &:active::before{content:"";height:100%;width:100%;border-radius:inherit;position:absolute;top:0;left:0}&:hover::after{background-color:var(--sys-color-state-hover-on-subtle)}&:active::before{background-color:var(--sys-color-state-ripple-neutral-on-subtle)}&:focus-visible{outline:var(--sys-size-2) solid var(--sys-color-state-focus-ring)}&[disabled]{pointer-events:none;background-color:var(--sys-color-state-disabled-container);color:var(--sys-color-state-disabled)}}.toolbar-has-dropdown-shrinkable{flex-shrink:1}.toolbar-has-dropdown .toolbar-text{margin:0;text-overflow:ellipsis;flex:auto;overflow:hidden;text-align:right}.toolbar-button:not(.toolbar-has-dropdown):focus-visible::before{position:absolute;inset:2px;background-color:var(--sys-color-state-focus-highlight);border-radius:2px;content:"";z-index:-1}.toolbar-glyph{flex:none}.toolbar-button:disabled{opacity:50%}.toolbar-button.copied-to-clipboard::after{content:attr(data-content);position:fixed;margin-top:calc(2 * var(--toolbar-height));padding:3px 5px;color:var(--sys-color-token-subtle);background:var(--sys-color-cdt-base-container);animation:2s fade-out;font-weight:normal;border:1px solid var(--sys-color-divider);border-radius:3px}.toolbar-button.toolbar-state-on .toolbar-glyph{color:var(--icon-toggled)}.toolbar-state-on.toolbar-toggle-with-dot .toolbar-text::after{content:"";position:absolute;bottom:2px;background-color:var(--sys-color-primary-bright);width:4.5px;height:4.5px;border:2px solid var(--override-toolbar-background-color,--sys-color-cdt-base-container);border-radius:50%;right:0}.toolbar-button.toolbar-state-on.toolbar-toggle-with-red-color .toolbar-glyph,\n .toolbar-button.toolbar-state-off.toolbar-default-with-red-color\n .toolbar-glyph{color:var(\n --icon-error\n )!important}.toolbar-button:not(\n .toolbar-has-glyph,\n .toolbar-has-dropdown,\n .largeicon-menu,\n .toolbar-button-secondary\n ){font-weight:bold}.toolbar-button.dark-text .toolbar-text{color:var(\n --sys-color-on-surface\n )!important}.toolbar-button.toolbar-state-on .toolbar-text{color:var(--sys-color-primary)}.toolbar-button.toolbar-state-on:enabled:active .toolbar-text{color:var(--sys-color-primary-bright)}.toolbar-button:enabled:hover:not(:active) .toolbar-glyph{color:var(--sys-color-on-surface)}.toolbar-button:enabled:hover:not(:active) .toolbar-text{color:var(--sys-color-on-surface)}.toolbar-button.toolbar-state-on:enabled:hover:not(:active) .toolbar-glyph{color:var(--sys-color-primary)}.toolbar-button.toolbar-state-on:enabled:hover:not(:active) .toolbar-text{color:var(--sys-color-primary)}& > dt-checkbox{padding:0 5px 0 0}& > select{height:var(--sys-size-9);min-width:var(--sys-size-14)}.toolbar-input{box-shadow:inset 0 0 0 2px transparent;box-sizing:border-box;width:120px;height:var(--sys-size-9);padding:0 var(--sys-size-2) 0 var(--sys-size-5);margin:1px 3px;border-radius:100px;min-width:35px;position:relative;&.focused{box-shadow:inset 0 0 0 2px var(--sys-color-state-focus-ring)}&:not(:has(devtools-button:hover), .disabled):hover{background-color:var(--sys-color-state-hover-on-subtle)}&::before{content:"";box-sizing:inherit;height:100%;width:100%;position:absolute;left:0;background:var(--sys-color-cdt-base);z-index:-1}& > devtools-icon{color:var(--sys-color-on-surface-subtle);width:var(--sys-size-8);height:var(--sys-size-8);margin-right:var(--sys-size-3)}&.disabled > devtools-icon{color:var(--sys-color-state-disabled)}}.toolbar-filter .toolbar-input-clear-button{margin-right:var(--sys-size-4)}.toolbar-input-empty .toolbar-input-clear-button{display:none}.toolbar-prompt-proxy{flex:1}.toolbar-input-prompt{flex:1;overflow:hidden;white-space:nowrap;cursor:text;color:var(--sys-color-on-surface)}.toolbar-divider{background-color:var(--sys-color-divider);width:1px;margin:5px 4px;height:16px}.toolbar-spacer{flex:auto}.toolbar-button.emulate-active{background-color:var(--sys-color-surface-variant)}&:not([floating]) > :last-child:not(:first-child, select){flex-shrink:1;justify-content:left}&:not([floating]) > .toolbar-button:last-child:not(:first-child, select){justify-content:left;margin-right:2px}& > .highlight::before{content:"";position:absolute;inset:2px;border-radius:2px;background:var(--sys-color-neutral-container);z-index:-1}& > .highlight:focus-visible{background:var(--sys-color-tonal-container);& > .title{color:var(--sys-color-on-tonal-container)}}devtools-icon.leading-issue-icon{margin:0 7px}@media (forced-colors: active){.toolbar-button:disabled{opacity:100%;color:Graytext}devtools-toolbar > *,\n .toolbar-text{color:ButtonText}.toolbar-button:disabled .toolbar-text{color:Graytext}devtools-toolbar > select:disabled{opacity:100%;color:Graytext}.toolbar-button.toolbar-state-on .toolbar-glyph{forced-color-adjust:none;color:Highlight}.toolbar-button.toolbar-state-on .toolbar-text{forced-color-adjust:none;color:Highlight}.toolbar-button:enabled:hover:not(:active) .toolbar-text,\n .toolbar-button:enabled:focus:not(:active) .toolbar-text{color:HighlightText}.toolbar-button:disabled devtools-icon{color:GrayText}.toolbar-button:disabled .toolbar-glyph{color:GrayText}.toolbar-button:enabled.hover:not(:active) .toolbar-glyph{forced-color-adjust:none;color:Highlight}.toolbar-button:enabled:hover .toolbar-glyph,\n .toolbar-button:enabled:focus .toolbar-glyph,\n .toolbar-button:enabled:hover:not(:active) .toolbar-glyph,\n .toolbar-button:enabled:hover devtools-icon,\n .toolbar-button:enabled:focus devtools-icon{color:HighlightText}.toolbar-input{forced-color-adjust:none;background:canvas;box-shadow:var(--legacy-focus-ring-inactive-shadow)}.toolbar-input.focused,\n .toolbar-input:not(.toolbar-input-empty){forced-color-adjust:none;background:canvas;box-shadow:var(--legacy-focus-ring-active-shadow)}.toolbar-input:hover{box-shadow:var(--legacy-focus-ring-active-shadow)}devtools-toolbar .devtools-link{color:linktext}.toolbar-has-dropdown{forced-color-adjust:none;background:ButtonFace;color:ButtonText}}}@keyframes fade-out{from{opacity:100%}to{opacity:0%}}.webkit-css-property{color:var(--webkit-css-property-color,var(--sys-color-token-property-special))}.webkit-html-comment{color:var(--sys-color-token-comment)}.webkit-html-tag{color:var(--sys-color-token-tag)}.webkit-html-tag-name,\n.webkit-html-close-tag-name{color:var(--sys-color-token-tag)}.webkit-html-pseudo-element{color:var(--sys-color-token-pseudo-element)}.webkit-html-js-node,\n.webkit-html-css-node{color:var(--text-primary);white-space:pre-wrap}.webkit-html-text-node{color:var(--text-primary);unicode-bidi:-webkit-isolate}.webkit-html-entity-value{background-color:rgb(0 0 0/15%);unicode-bidi:-webkit-isolate}.webkit-html-doctype{color:var(--text-secondary)}.webkit-html-attribute-name{color:var(--sys-color-token-attribute);unicode-bidi:-webkit-isolate}.webkit-html-attribute-value{color:var(--sys-color-token-attribute-value);unicode-bidi:-webkit-isolate;word-break:break-all}.devtools-link{color:var(--text-link);text-decoration:underline;outline-offset:2px;.elements-disclosure &{color:var(--text-link)}devtools-icon{vertical-align:baseline;color:var(--sys-color-primary)}:focus .selected & devtools-icon{color:var(--sys-color-tonal-container)}&:focus-visible{outline-width:unset}&.invalid-link{color:var(--text-disabled);text-decoration:none}&:not(.devtools-link-prevent-click, .invalid-link){cursor:pointer}@media (forced-colors: active){&:not(.devtools-link-prevent-click){forced-color-adjust:none;color:linktext}&:focus-visible{background:Highlight;color:HighlightText}}}\n/*# sourceURL=${import.meta.resolve("./inspectorCommon.css")} */\n`},Re={cssText:`.query:not(.editing-query){overflow:hidden}.editable .query-text{color:var(--sys-color-on-surface)}.editable .query-text:hover{text-decoration:var(--override-styles-section-text-hover-text-decoration);cursor:var(--override-styles-section-text-hover-cursor)}\n/*# sourceURL=${import.meta.resolve("./cssQuery.css")} */\n`};const qe=new CSSStyleSheet;qe.replaceSync(Be.cssText);const Fe=new CSSStyleSheet;Fe.replaceSync(Re.cssText);const{render:Ve,html:Ue}=r;class Ge extends HTMLElement{#e=this.attachShadow({mode:"open"});#$="";#C;#N="";#E;#M;set data(e){this.#$=e.queryPrefix,this.#C=e.queryName,this.#N=e.queryText,this.#E=e.onQueryTextClick,this.#M=e.jslogContext,this.#i()}connectedCallback(){this.#e.adoptedStyleSheets=[Fe,qe]}#i(){const e=r.Directives.classMap({query:!0,editable:Boolean(this.#E)}),t=Ue`
<span class="query-text" @click=${this.#E}>${this.#N}</span>
`;Ve(Ue`
<div class=${e} jslog=${l.cssRuleHeader(this.#M).track({click:!0,change:!0})}>
<slot name="indent"></slot>${this.#$?Ue`<span>${this.#$+" "}</span>`:r.nothing}${this.#C?Ue`<span>${this.#C+" "}</span>`:r.nothing}${t} {
</div>
`,this.#e,{host:this})}}customElements.define("devtools-css-query",Ge);var We=Object.freeze({__proto__:null,CSSQuery:Ge}),Qe={cssText:`.registered-property-popup-wrapper{max-width:232px;font-size:12px;line-height:1.4}.monospace{font-family:var(--monospace-font-family);font-size:var(--monospace-font-size)}.divider{margin:8px -7px;border:1px solid var(--sys-color-divider)}.registered-property-links{margin-top:8px}.clickable{color:var(--sys-color-primary);cursor:pointer}.underlined{text-decoration:underline}.unbreakable-text{white-space:nowrap}.css-property{color:var(--webkit-css-property-color,var(--sys-color-token-property-special))}.title{color:var(--sys-color-state-disabled)}\n/*# sourceURL=${import.meta.resolve("./cssVariableValueView.css")} */\n`};const Ye=new CSSStyleSheet;Ye.replaceSync(Qe.cssText);const Xe={registeredPropertyLinkTitle:"View registered property",invalidPropertyValue:"Invalid property value, expected type {type}",sIsNotDefined:"{PH1} is not defined"},Ke=e.i18n.registerUIStrings("panels/elements/components/CSSVariableValueView.ts",Xe),Je=e.i18n.getLocalizedString.bind(void 0,Ke),Ze=r.i18nTemplate.bind(void 0,Ke),{render:et,html:tt}=r;function ot(e){return tt`<div class="registered-property-links">
<span role="button" @click=${e?.goToDefinition} class="clickable underlined unbreakable-text">
${Je(Xe.registeredPropertyLinkTitle)}
</span>
</div>`}class rt extends HTMLElement{#e=this.attachShadow({mode:"open"});constructor(e){super(),this.#e.adoptedStyleSheets=[Ye],this.#i(e)}#i(e){const t=tt`<span class="monospace css-property">${e.registration.syntax()}</span>`;et(tt`
<div class="variable-value-popup-wrapper">
${Ze(Xe.invalidPropertyValue,{type:t})}
${ot(e)}
</div>`,this.#e,{host:this})}}class nt extends HTMLElement{#e=this.attachShadow({mode:"open"});variableName;#j;details;constructor({variableName:e,value:t,details:o}){super(),this.#e.adoptedStyleSheets=[Ye],this.variableName=e,this.details=o,this.value=t}get value(){return this.#j}set value(e){this.#j=e,this.#i()}#i(){const e=this.details?.registration.initialValue(),t=this.details?tt`
<hr class=divider />
<div class=registered-property-popup-wrapper>
<div class="monospace">
<div><span class="css-property">syntax:</span> ${this.details.registration.syntax()}</div>
<div><span class="css-property">inherits:</span> ${this.details.registration.inherits()}</div>
${e?tt`<div><span class="css-property">initial-value:</span> ${e}</div>`:""}
</div>
${ot(this.details)}
</div>`:"",o=this.value??Je(Xe.sIsNotDefined,{PH1:this.variableName});et(tt`<div class="variable-value-popup-wrapper">
${o}
</div>
${t}
`,this.#e,{host:this})}}customElements.define("devtools-css-variable-value-view",nt),customElements.define("devtools-css-variable-parser-error",rt);var st=Object.freeze({__proto__:null,CSSVariableParserError:rt,CSSVariableValueView:nt}),it={cssText:`:host{--override-node-text-label-color:var(--sys-color-token-tag);--override-node-text-class-color:var(--sys-color-token-attribute);--override-node-text-id-color:var(--sys-color-token-attribute);--override-node-text-multiple-descriptors-id:var(--sys-color-on-surface);--override-node-text-multiple-descriptors-class:var(--sys-color-token-property)}.crumbs{display:inline-flex;align-items:stretch;width:100%;overflow:hidden;pointer-events:auto;cursor:default;white-space:nowrap;position:relative;background:var(--sys-color-cdt-base-container);font-size:inherit;font-family:inherit}.crumbs-window{flex-grow:2;overflow:hidden}.crumbs-scroll-container{display:inline-flex;margin:0;padding:0}.crumb{display:block;padding:0 7px;line-height:23px;white-space:nowrap}.overflow{padding:0 5px;font-weight:bold;display:block;border:none;flex-grow:0;flex-shrink:0;text-align:center;background-color:var(--sys-color-cdt-base-container);color:var(--sys-color-token-subtle);margin:1px;outline:1px solid var(--sys-color-neutral-outline)}.overflow.hidden{display:none}.overflow:disabled{opacity:50%}.overflow:focus{outline-color:var(--sys-color-primary)}.overflow:not(:disabled):hover{background-color:var(--sys-color-state-hover-on-subtle);color:var(--sys-color-on-surface)}.crumb-link{text-decoration:none;color:inherit}.crumb:hover{background:var(--sys-color-state-hover-on-subtle)}.crumb.selected{background:var(--sys-color-tonal-container)}.crumb:focus{outline:var(--sys-color-primary) auto 1px}\n/*# sourceURL=${import.meta.resolve("./elementsBreadcrumbs.css")} */\n`};const at={text:"(text)"},lt=e.i18n.registerUIStrings("panels/elem