simdeck 0.1.4 → 0.1.5

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

@@ -0,0 +1,250 @@
+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>:&nbsp;<span class='attribute-value'>${t.value}</span>`:s)),c=this.#t?n`<span>${f(v.ignored)}</span>`:n`${e}&nbsp;${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/elements/components/ElementsBreadcrumbsUtils.ts",at),ct=e.i18n.getLocalizedString.bind(void 0,lt),dt=(e,t)=>t?e.filter((e=>e.nodeType!==Node.DOCUMENT_NODE)).map((e=>({title:ut(e),selected:e.id===t.id,node:e,originalNode:e.legacyDomNode}))).reverse():[],pt=(e,t={})=>({main:e,extras:t}),ut=e=>{switch(e.nodeType){case Node.ELEMENT_NODE:{if(e.pseudoType)return pt("::"+e.pseudoType);const t=pt(e.nodeNameNicelyCased),o=e.getAttribute("id");o&&(t.extras.id=o);const r=e.getAttribute("class");if(r){const e=new Set(r.split(/\s+/));t.extras.classes=Array.from(e)}return t}case Node.TEXT_NODE:return pt(ct(at.text));case Node.COMMENT_NODE:return pt("\x3c!--\x3e");case Node.DOCUMENT_TYPE_NODE:return pt("<!doctype>");case Node.DOCUMENT_FRAGMENT_NODE:return pt(e.shadowRootType?"#shadow-root":e.nodeNameNicelyCased);default:return pt(e.nodeNameNicelyCased)}};var ht=Object.freeze({__proto__:null,crumbsToRender:dt,determineElementTitle:ut});const gt=new CSSStyleSheet;gt.replaceSync(it.cssText);const{html:mt}=r,bt={breadcrumbs:"DOM tree breadcrumbs",scrollLeft:"Scroll left",scrollRight:"Scroll right"},vt=e.i18n.registerUIStrings("panels/elements/components/ElementsBreadcrumbs.ts",bt),yt=e.i18n.getLocalizedString.bind(void 0,vt);class ft extends Event{static eventName="breadcrumbsnodeselected";legacyDomNode;constructor(e){super(ft.eventName,{}),this.legacyDomNode=e.legacyDomNode}}class xt extends HTMLElement{#e=this.attachShadow({mode:"open"});#z=new ResizeObserver((()=>this.#T()));#L=this.#i.bind(this);#O=[];#D=null;#P=!1;#_="start";#I=!1;#H=!1;connectedCallback(){this.#e.adoptedStyleSheets=[gt]}set data(e){this.#D=e.selectedNode,this.#O=e.crumbs,this.#H=!1,u.ScheduledRender.scheduleRender(this,this.#L)}disconnectedCallback(){this.#I=!1,this.#z.disconnect()}#A(e){return t=>{t.preventDefault(),this.dispatchEvent(new ft(e))}}async#T(){const e=this.#e.querySelector(".crumbs-scroll-container"),t=this.#e.querySelector(".crumbs-window");if(!e||!t)return;const r=await o.read((()=>t.clientWidth)),n=await o.read((()=>e.clientWidth));this.#P?n<r&&(this.#P=!1):n>r&&(this.#P=!0),this.#B(),this.#R(t)}#q(e){return()=>e.highlightNode()}#F(e){return()=>e.clearHighlight()}#V(e){return()=>e.highlightNode()}#U(e){return()=>e.clearHighlight()}#G(){if(!this.#z||!0===this.#I)return;const e=this.#e.querySelector(".crumbs");e&&(this.#z.observe(e),this.#I=!0)}async#W(){const e=this.#e.querySelector(".crumbs-scroll-container"),t=this.#e.querySelector(".crumbs-window");if(!e||!t)return;const r=await o.read((()=>t.clientWidth)),n=await o.read((()=>e.clientWidth));this.#P?n<r&&(this.#P=!1,this.#i()):n>r&&(this.#P=!0,this.#i())}#Q(e){if(!e.target)return;const t=e.target;this.#R(t)}#R(e){const t=e.scrollWidth-e.clientWidth,o=e.scrollLeft;this.#_=o<10?"start":o>=t-10?"end":"middle",this.#i()}#Y(e){return()=>{this.#H=!0;const t=this.#e.querySelector(".crumbs-window");if(!t)return;const o=t.clientWidth/2,r="left"===e?Math.max(Math.floor(t.scrollLeft-o),0):t.scrollLeft+o;t.scrollTo({behavior:"smooth",left:r})}}#X(e,t){const o=r.Directives.classMap({overflow:!0,[e]:!0,hidden:!this.#P}),n=yt("left"===e?bt.scrollLeft:bt.scrollRight);return mt`
+      <button
+        class=${o}
+        @click=${this.#Y(e)}
+        ?disabled=${t}
+        aria-label=${n}
+        title=${n}>
+        <devtools-icon .data=${{iconName:"triangle-"+e,color:"var(--sys-color-on-surface)",width:"12px",height:"10px"}}>
+        </devtools-icon>
+      </button>
+      `}#i(){const e=dt(this.#O,this.#D);r.render(mt`
+      <nav class="crumbs" aria-label=${yt(bt.breadcrumbs)} jslog=${l.elementsBreadcrumbs()}>
+        ${this.#X("left","start"===this.#_)}
+
+        <div class="crumbs-window" @scroll=${this.#Q}>
+          <ul class="crumbs-scroll-container">
+            ${e.map((e=>{const t={crumb:!0,selected:e.selected};return mt`
+                <li class=${r.Directives.classMap(t)}
+                  data-node-id=${e.node.id}
+                  data-crumb="true"
+                >
+                  <a href="#"
+                    draggable=false
+                    class="crumb-link"
+                    jslog=${l.item().track({click:!0})}
+                    @click=${this.#A(e.node)}
+                    @mousemove=${this.#q(e.node)}
+                    @mouseleave=${this.#F(e.node)}
+                    @focus=${this.#V(e.node)}
+                    @blur=${this.#U(e.node)}
+                  ><devtools-node-text data-node-title=${e.title.main} .data=${{nodeTitle:e.title.main,nodeId:e.title.extras.id,nodeClasses:e.title.extras.classes}}></devtools-node-text></a>
+                </li>`}))}
+          </ul>
+        </div>
+        ${this.#X("right","end"===this.#_)}
+      </nav>
+    `,this.#e,{host:this}),this.#W(),this.#G(),this.#B()}async#B(){if(!this.#D||!this.#e||!this.#P||this.#H)return;const e=this.#D.id,t=this.#e.querySelector(`.crumb[data-node-id="${e}"]`);t&&await o.scroll((()=>{t.scrollIntoView({behavior:"auto"})}))}}customElements.define("devtools-elements-breadcrumbs",xt);var wt=Object.freeze({__proto__:null,ElementsBreadcrumbs:xt,NodeSelectedEvent:ft}),kt={cssText:`:host{display:inline-flex;vertical-align:middle}:host(.hidden){display:none}.expand-button{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;width:14px;height:10px;margin:0 2px;border:1px solid var(--override-adorner-border-color,var(--sys-color-tonal-outline));border-radius:10px;background:var(--override-adorner-background-color,var(--sys-color-cdt-base-container));padding:0;position:relative;&: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)}}.expand-button devtools-icon{width:14px;height:14px;color:var(--sys-color-primary)}\n/*# sourceURL=${import.meta.resolve("./elementsTreeExpandButton.css")} */\n`};const St=new CSSStyleSheet;St.replaceSync(kt.cssText);const $t={expand:"Expand"},Ct=e.i18n.registerUIStrings("panels/elements/components/ElementsTreeExpandButton.ts",$t),Nt=e.i18n.getLocalizedString.bind(void 0,Ct);class Et extends HTMLElement{#e=this.attachShadow({mode:"open"});#K=()=>{};set data(e){this.#K=e.clickHandler,this.#J()}#J(){this.#i()}connectedCallback(){this.#e.adoptedStyleSheets=[St]}#i(){i(n`<button
+        class="expand-button"
+        tabindex="-1"
+        aria-label=${Nt($t.expand)}
+        jslog=${l.action("expand").track({click:!0})}
+        @click=${this.#K}><devtools-icon name="dots-horizontal"></devtools-icon></button>`,this.#e,{host:this})}}customElements.define("devtools-elements-tree-expand-button",Et);var Mt=Object.freeze({__proto__:null,ElementsTreeExpandButton:Et});const jt=e=>({parentNode:e.parentNode?jt(e.parentNode):null,id:e.id,nodeType:e.nodeType(),pseudoType:e.pseudoType(),shadowRootType:e.shadowRootType(),nodeName:e.nodeName(),nodeNameNicelyCased:e.nodeNameInCorrectCase(),legacyDomNode:e,highlightNode:t=>e.highlight(t),clearHighlight:()=>h.OverlayModel.OverlayModel.hideDOMNodeHighlight(),getAttribute:e.getAttribute.bind(e)});var zt=Object.freeze({__proto__:null,legacyNodeToElementsComponentsNode:jt}),Tt={cssText:`*{box-sizing:border-box;font-size:12px}.header{background-color:var(--sys-color-surface2);border-bottom:1px solid var(--sys-color-divider);line-height:1.6;overflow:hidden;padding:0 5px;white-space:nowrap}.header::marker{color:var(--sys-color-on-surface-subtle);font-size:11px;line-height:1}.header:focus{background-color:var(--sys-color-tonal-container)}.content-section{padding:16px;border-bottom:1px solid var(--sys-color-divider);overflow-x:hidden}.content-section-title{font-size:12px;font-weight:500;line-height:1.1;margin:0;padding:0}.checkbox-settings{margin-top:8px;display:grid;grid-template-columns:1fr;gap:5px}.checkbox-label{display:flex;flex-direction:row;align-items:center;min-width:40px;width:fit-content}.checkbox-settings .checkbox-label{margin-bottom:8px}.checkbox-settings .checkbox-label:last-child{margin-bottom:0}.checkbox-label input{margin:0 6px 0 0;padding:0;flex:none}.checkbox-label input:focus{outline:auto 5px -webkit-focus-ring-color}.checkbox-label > span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.select-settings{margin-top:16px;width:fit-content}.select-label{display:flex;flex-direction:column}.select-label span{margin-bottom:4px}.elements{margin-top:12px;color:var(--sys-color-token-tag);display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));gap:8px}.element{display:flex;flex-direction:row;align-items:center;gap:8px}.show-element{flex:none}select{min-width:0;max-width:150px}.color-picker{opacity:0%}.color-picker-label{border:1px solid var(--sys-color-neutral-outline);cursor:default;display:inline-block;flex:none;height:10px;width:10px;position:relative;&:focus-within{outline:2px solid var(--sys-color-state-focus-ring);outline-offset:2px;border-radius:2px}}.color-picker-label input[type="color"]{width:100%;height:100%;position:absolute}.color-picker-label:hover,\n.color-picker-label:focus{border:1px solid var(--sys-color-outline);transform:scale(1.2)}.node-text-container{line-height:16px;padding:0 0.5ex;border-radius:5px}\n/*# sourceURL=${import.meta.resolve("./layoutPane.css")} */\n`};const Lt=new CSSStyleSheet;Lt.replaceSync(Be.cssText);const Ot=new CSSStyleSheet;Ot.replaceSync(Tt.cssText);const Dt={chooseElementOverlayColor:"Choose the overlay color for this element",showElementInTheElementsPanel:"Show element in the Elements panel",grid:"Grid",overlayDisplaySettings:"Overlay display settings",gridOverlays:"Grid overlays",noGridLayoutsFoundOnThisPage:"No grid layouts found on this page",flexbox:"Flexbox",flexboxOverlays:"Flexbox overlays",noFlexboxLayoutsFoundOnThisPage:"No flexbox layouts found on this page",colorPickerOpened:"Color picker opened."},Pt=e.i18n.registerUIStrings("panels/elements/components/LayoutPane.ts",Dt),_t=e.i18n.getLocalizedString.bind(void 0,Pt),{render:It,html:Ht}=r,At=e=>{const t=e.getAttribute("class");return{id:e.id,color:"var(--sys-color-inverse-surface)",name:e.localName(),domId:e.getAttribute("id"),domClasses:t?t.split(/\s+/).filter((e=>!!e)):void 0,enabled:!1,reveal:()=>{d.Revealer.reveal(e),e.scrollIntoView()},highlight:()=>{e.highlight()},hideHighlight:()=>{h.OverlayModel.OverlayModel.hideDOMNodeHighlight()},toggle:e=>{throw new Error("Not implemented")},setColor(e){throw new Error("Not implemented")}}},Bt=e=>e.map((e=>{const t=At(e),o=e.id;return{...t,color:e.domModel().overlayModel().colorOfGridInPersistentOverlay(o)||"var(--sys-color-inverse-surface)",enabled:e.domModel().overlayModel().isHighlightedGridInPersistentOverlay(o),toggle:t=>{t?e.domModel().overlayModel().highlightGridInPersistentOverlay(o):e.domModel().overlayModel().hideGridInPersistentOverlay(o)},setColor(t){this.color=t,e.domModel().overlayModel().setColorOfGridInPersistentOverlay(o,t)}}})),Rt=e=>e.map((e=>{const t=At(e),o=e.id;return{...t,color:e.domModel().overlayModel().colorOfFlexInPersistentOverlay(o)||"var(--sys-color-inverse-surface)",enabled:e.domModel().overlayModel().isHighlightedFlexContainerInPersistentOverlay(o),toggle:t=>{t?e.domModel().overlayModel().highlightFlexContainerInPersistentOverlay(o):e.domModel().overlayModel().hideFlexContainerInPersistentOverlay(o)},setColor(t){this.color=t,e.domModel().overlayModel().setColorOfFlexInPersistentOverlay(o,t)}}}));function qt(e){return"enum"===e.type}function Ft(e){return"boolean"===e.type}let Vt;class Ut extends g.LegacyWrapper.WrappableComponent{#e=this.attachShadow({mode:"open"});#Z=[];#ee;#te;constructor(){super(),this.#Z=this.#oe(),this.#ee=d.Settings.Settings.instance().moduleSetting("show-ua-shadow-dom"),this.#te=[],this.#e.adoptedStyleSheets=[p.checkboxStyles,Ot,Lt]}static instance(){return Vt||(Vt=g.LegacyWrapper.legacyWrapper(c.Widget.Widget,new Ut)),Vt.element.style.minWidth="min-content",Vt.element.setAttribute("jslog",`${l.pane("layout").track({resize:!0})}`),Vt.getComponent()}modelAdded(e){const t=e.overlayModel();t.addEventListener("PersistentGridOverlayStateChanged",this.render,this),t.addEventListener("PersistentFlexContainerOverlayStateChanged",this.render,this),this.#te.push(e)}modelRemoved(e){const t=e.overlayModel();t.removeEventListener("PersistentGridOverlayStateChanged",this.render,this),t.removeEventListener("PersistentFlexContainerOverlayStateChanged",this.render,this),this.#te=this.#te.filter((t=>t!==e))}async#re(e){const t=this.#ee.get(),o=[];for(const r of this.#te)try{const n=await r.getNodesByStyle(e,!0);for(const e of n){const n=r.nodeForId(e);null===n||!t&&n.ancestorUserAgentShadowRoot()||o.push(n)}}catch(e){console.warn(e)}return o}async#ne(){return await this.#re([{name:"display",value:"grid"},{name:"display",value:"inline-grid"}])}async#se(){return await this.#re([{name:"display",value:"flex"},{name:"display",value:"inline-flex"}])}#oe(){const e=[];for(const t of["show-grid-line-labels","show-grid-track-sizes","show-grid-areas","extend-grid-lines"]){const o=d.Settings.Settings.instance().moduleSetting(t),r=o.get(),n=o.type();if(!n)throw new Error("A setting provided to LayoutSidebarPane does not have a setting type");if("boolean"!==n&&"enum"!==n)throw new Error("A setting provided to LayoutSidebarPane does not have a supported setting type");const s={type:n,name:o.name,title:o.title()};("boolean"==typeof r||"string"==typeof r)&&e.push({...s,value:r,options:o.options().map((e=>({...e,value:e.value})))})}return e}onSettingChanged(e,t){d.Settings.Settings.instance().moduleSetting(e).set(t)}wasShown(){for(const e of this.#Z)d.Settings.Settings.instance().moduleSetting(e.name).addChangeListener(this.render,this);for(const e of this.#te)this.modelRemoved(e);this.#te=[],h.TargetManager.TargetManager.instance().observeModels(h.DOMModel.DOMModel,this,{scoped:!0}),c.Context.Context.instance().addFlavorChangeListener(h.DOMModel.DOMNode,this.render,this),this.#ee.addChangeListener(this.render,this),this.render()}willHide(){for(const e of this.#Z)d.Settings.Settings.instance().moduleSetting(e.name).removeChangeListener(this.render,this);h.TargetManager.TargetManager.instance().unobserveModels(h.DOMModel.DOMModel,this),c.Context.Context.instance().removeFlavorChangeListener(h.DOMModel.DOMNode,this.render,this),this.#ee.removeChangeListener(this.render,this)}#ie(e){if(!e.target)return;const t=e.target.parentElement;if(!t)throw new Error("<details> element is not found for a <summary> element");switch(e.key){case"ArrowLeft":t.open=!1;break;case"ArrowRight":t.open=!0}}async render(){const e=Bt(await this.#ne()),t=Rt(await this.#se());await o.write("LayoutPane render",(()=>{It(Ht`
+        <details open>
+          <summary class="header" @keydown=${this.#ie} jslog=${l.sectionHeader("grid-settings").track({click:!0})}>
+            ${_t(Dt.grid)}
+          </summary>
+          <div class="content-section" jslog=${l.section("grid-settings")}>
+            <h3 class="content-section-title">${_t(Dt.overlayDisplaySettings)}</h3>
+            <div class="select-settings">
+              ${this.#ae().map((e=>this.#le(e)))}
+            </div>
+            <div class="checkbox-settings">
+              ${this.#ce().map((e=>this.#de(e)))}
+            </div>
+          </div>
+          ${e?Ht`<div class="content-section" jslog=${l.section("grid-overlays")}>
+              <h3 class="content-section-title">
+                ${e.length?_t(Dt.gridOverlays):_t(Dt.noGridLayoutsFoundOnThisPage)}
+              </h3>
+              ${e.length?Ht`<div class="elements">
+                  ${e.map((e=>this.#pe(e)))}
+                </div>`:""}
+            </div>`:""}
+        </details>
+        ${void 0!==t?Ht`
+          <details open>
+            <summary class="header" @keydown=${this.#ie} jslog=${l.sectionHeader("flexbox-overlays").track({click:!0})}>
+              ${_t(Dt.flexbox)}
+            </summary>
+            ${t?Ht`<div class="content-section" jslog=${l.section("flexbox-overlays")}>
+                <h3 class="content-section-title">
+                  ${t.length?_t(Dt.flexboxOverlays):_t(Dt.noFlexboxLayoutsFoundOnThisPage)}
+                </h3>
+                ${t.length?Ht`<div class="elements">
+                    ${t.map((e=>this.#pe(e)))}
+                  </div>`:""}
+              </div>`:""}
+          </details>
+          `:""}
+      `,this.#e,{host:this})}))}#ae(){return this.#Z.filter(qt)}#ce(){return this.#Z.filter(Ft)}#ue(e,t){t.preventDefault(),this.onSettingChanged(e.name,t.target.checked)}#he(e,t){t.preventDefault(),this.onSettingChanged(e.name,t.target.value)}#ge(e,t){t.preventDefault(),e.toggle(t.target.checked)}#me(e,t){t.preventDefault(),e.reveal()}#be(e,t){t.preventDefault(),e.setColor(t.target.value),this.render()}#ve(e,t){t.preventDefault(),e.highlight()}#ye(e,t){t.preventDefault(),e.hideHighlight()}#pe(e){const t=this.#ge.bind(this,e),o=this.#me.bind(this,e),r=this.#be.bind(this,e),n=this.#ve.bind(this,e),s=this.#ye.bind(this,e);return Ht`<div class="element" jslog=${l.item()}>
+      <label data-element="true" class="checkbox-label">
+        <input data-input="true" type="checkbox" .checked=${e.enabled} @change=${t} jslog=${l.toggle().track({click:!0})} />
+        <span class="node-text-container" data-label="true" @mouseenter=${n} @mouseleave=${s}>
+          <devtools-node-text .data=${{nodeId:e.domId,nodeTitle:e.name,nodeClasses:e.domClasses}}></devtools-node-text>
+        </span>
+      </label>
+      <label @keyup=${e=>{if("Enter"!==e.key&&" "!==e.key)return;e.target.querySelector("input").click(),c.ARIAUtils.alert(_t(Dt.colorPickerOpened)),e.preventDefault()}} @keydown=${e=>{" "===e.key&&e.preventDefault()}} class="color-picker-label" style="background: ${e.color};" jslog=${l.showStyleEditor("color").track({click:!0})}>
+        <input @change=${r} @input=${r} title=${_t(Dt.chooseElementOverlayColor)} tabindex="0" class="color-picker" type="color" value=${e.color} />
+      </label>
+      <devtools-button class="show-element"
+                                           .title=${_t(Dt.showElementInTheElementsPanel)}
+                                           aria-label=${_t(Dt.showElementInTheElementsPanel)}
+                                           .iconName=${"select-element"}
+                                           .jslogContext=${"elements.select-element"}
+                                           .size=${"SMALL"}
+                                           .variant=${"icon"}
+                                           @click=${o}></devtools-button>
+    </div>`}#de(e){const t=this.#ue.bind(this,e);return Ht`<label data-boolean-setting="true" class="checkbox-label" title=${e.title} jslog=${l.toggle().track({click:!0}).context(e.name)}>
+      <input data-input="true" type="checkbox" .checked=${e.value} @change=${t} />
+      <span data-label="true">${e.title}</span>
+    </label>`}#le(e){const o=this.#he.bind(this,e);return Ht`<label data-enum-setting="true" class="select-label" title=${e.title}>
+      <select
+        data-input="true"
+        jslog=${l.dropDown().track({change:!0}).context(e.name)}
+        @change=${o}>
+        ${e.options.map((o=>Ht`<option value=${o.value} .selected=${e.value===o.value} jslog=${l.item(t.StringUtilities.toKebabCase(o.value)).track({click:!0})}>${o.title}</option>`))}
+      </select>
+    </label>`}}customElements.define("devtools-layout-pane",Ut);var Gt=Object.freeze({__proto__:null,LayoutPane:Ut}),Wt=Object.freeze({__proto__:null}),Qt={cssText:`.container-link{display:inline-block;color:var(--sys-color-state-disabled)}.container-link:hover{color:var(--sys-color-primary)}.queried-size-details{color:var(--sys-color-on-surface)}.axis-icon{margin-left:0.4em;width:16px;height:12px;vertical-align:text-top}.axis-icon.hidden{display:none}.axis-icon.vertical{transform:rotate(90deg)}\n/*# sourceURL=${import.meta.resolve("./queryContainer.css")} */\n`};const Yt=new CSSStyleSheet;Yt.replaceSync(Qt.cssText);const{render:Xt,html:Kt}=r,{PhysicalAxis:Jt,QueryAxis:Zt}=h.CSSContainerQuery;class eo extends Event{static eventName="queriedsizerequested";constructor(){super(eo.eventName,{})}}class to extends HTMLElement{#e=this.attachShadow({mode:"open"});#C;#fe;#xe;#we=!1;#ke;set data(e){this.#C=e.queryName,this.#fe=e.container,this.#xe=e.onContainerLinkClick,this.#i()}connectedCallback(){this.#e.adoptedStyleSheets=[Yt]}updateContainerQueriedSizeDetails(e){this.#ke=e,this.#i()}async#Se(){this.#fe?.highlightNode("container-outline"),this.#we=!0,this.dispatchEvent(new eo)}#$e(){this.#fe?.clearHighlight(),this.#we=!1,this.#i()}#i(){if(!this.#fe)return;let e,t;this.#C||(e=this.#fe.getAttribute("id"),t=this.#fe.getAttribute("class")?.split(/\s+/).filter(Boolean));const o=this.#C||this.#fe.nodeNameNicelyCased;Xt(Kt`
+      →
+      <a href="#"
+        draggable=false
+        class="container-link"
+        jslog=${l.cssRuleHeader("container-query").track({click:!0})}
+        @click=${this.#xe}
+        @mouseenter=${this.#Se}
+        @mouseleave=${this.#$e}
+      ><devtools-node-text
+          data-node-title=${o}
+          .data=${{nodeTitle:o,nodeId:e,nodeClasses:t}}></devtools-node-text></a>
+      ${this.#we?this.#Ce():r.nothing}
+    `,this.#e,{host:this})}#Ce(){if(!this.#ke||""===this.#ke.queryAxis)return r.nothing;const e="size"===this.#ke.queryAxis,t=r.Directives.classMap({"axis-icon":!0,hidden:e,vertical:"Vertical"===this.#ke.physicalAxis});return Kt`
+      <span class="queried-size-details">
+        (${this.#ke.queryAxis}<devtools-icon
+          class=${t} .data=${{iconName:"width",color:"var(--icon-default)"}}></devtools-icon>)
+        ${e&&this.#ke.width?"width:":r.nothing}
+        ${this.#ke.width||r.nothing}
+        ${e&&this.#ke.height?"height:":r.nothing}
+        ${this.#ke.height||r.nothing}
+      </span>
+    `}}customElements.define("devtools-query-container",to);var oo=Object.freeze({__proto__:null,QueriedSizeRequestedEvent:eo,QueryContainer:to}),ro={cssText:`.container{min-width:170px}.row{padding:0;color:var(--sys-color-on-surface);padding-bottom:16px}.row:last-child{padding-bottom:0}.property{padding-bottom:4px;white-space:nowrap}.property-name{color:var(--sys-color-token-property-special)}.property-value{color:var(--sys-color-on-surface)}.property-value.not-authored{color:var(--sys-color-state-disabled)}.buttons{display:flex;flex-direction:row}.buttons > :first-child{border-radius:3px 0 0 3px}.buttons > :last-child{border-radius:0 3px 3px 0}.button{border:1px solid var(--sys-color-neutral-outline);background-color:var(--sys-color-cdt-base-container);width:24px;height:24px;min-width:24px;min-height:24px;padding:0;margin:0;display:flex;justify-content:center;align-items:center;cursor:pointer}.button:focus-visible{outline:auto 5px -webkit-focus-ring-color}.button devtools-icon{color:var(--icon-default)}.button:hover devtools-icon{color:var(--icon-default-hover)}.button.selected devtools-icon{color:var(--icon-toggled)}\n/*# sourceURL=${import.meta.resolve("./stylePropertyEditor.css")} */\n`};const no=new CSSStyleSheet;no.replaceSync(ro.cssText);const so={selectButton:"Add {propertyName}: {propertyValue}",deselectButton:"Remove {propertyName}: {propertyValue}"},io=e.i18n.registerUIStrings("panels/elements/components/StylePropertyEditor.ts",so),ao=e.i18n.getLocalizedString.bind(void 0,io),{render:lo,html:co,Directives:po}=r;class uo extends Event{static eventName="propertyselected";data;constructor(e,t){super(uo.eventName,{}),this.data={name:e,value:t}}}class ho extends Event{static eventName="propertydeselected";data;constructor(e,t){super(ho.eventName,{}),this.data={name:e,value:t}}}class go extends HTMLElement{#e=this.attachShadow({mode:"open"});#Ne=new Map;#Ee=new Map;editableProperties=[];constructor(){super()}connectedCallback(){this.#e.adoptedStyleSheets=[no]}getEditableProperties(){return this.editableProperties}set data(e){this.#Ne=e.authoredProperties,this.#Ee=e.computedProperties,this.#i()}#i(){lo(co`
+      <div class="container">
+        ${this.editableProperties.map((e=>this.#Me(e)))}
+      </div>
+    `,this.#e,{host:this})}#Me(e){const t=this.#Ne.get(e.propertyName),o=!t,r=t||this.#Ee.get(e.propertyName),n=po.classMap({"property-value":!0,"not-authored":o});return co`<div class="row">
+      <div class="property">
+        <span class="property-name">${e.propertyName}</span>: <span class=${n}>${r}</span>
+      </div>
+      <div class="buttons">
+        ${e.propertyValues.map((o=>this.#je(o,e.propertyName,o===t)))}
+      </div>
+    </div>`}#je(e,t,o=!1){const r=`${t}: ${e}`,n=this.findIcon(r,this.#Ee);if(!n)throw new Error(`Icon for ${r} is not found`);const s=`transform: rotate(${n.rotate}deg) scale(${n.scaleX}, ${n.scaleY})`,i=po.classMap({button:!0,selected:o}),a={propertyName:t,propertyValue:e},c=ao(o?so.deselectButton:so.selectButton,a);return co`
+      <button title=${c}
+              class=${i}
+              jslog=${l.item().track({click:!0}).context(`${t}-${e}`)}
+              @click=${()=>this.#ze(t,e,o)}>
+        <devtools-icon style=${s} name=${n.iconName}>
+        </devtools-icon>
+      </button>
+    `}#ze(e,t,o){o?this.dispatchEvent(new ho(e,t)):this.dispatchEvent(new uo(e,t))}findIcon(e,t){throw new Error("Not implemented")}}class mo extends go{jslogContext="cssFlexboxEditor";editableProperties=vo;findIcon(e,t){return Pe(e,t)}}customElements.define("devtools-flexbox-editor",mo);class bo extends go{jslogContext="cssGridEditor";editableProperties=yo;findIcon(e,t){return Ie(e,t)}}customElements.define("devtools-grid-editor",bo);const vo=[{propertyName:"flex-direction",propertyValues:["row","column","row-reverse","column-reverse"]},{propertyName:"flex-wrap",propertyValues:["nowrap","wrap"]},{propertyName:"align-content",propertyValues:["center","flex-start","flex-end","space-around","space-between","stretch"]},{propertyName:"justify-content",propertyValues:["center","flex-start","flex-end","space-between","space-around","space-evenly"]},{propertyName:"align-items",propertyValues:["center","flex-start","flex-end","stretch","baseline"]}],yo=[{propertyName:"align-content",propertyValues:["center","space-between","space-around","space-evenly","stretch"]},{propertyName:"justify-content",propertyValues:["center","start","end","space-between","space-around","space-evenly"]},{propertyName:"align-items",propertyValues:["center","start","end","stretch","baseline"]},{propertyName:"justify-items",propertyValues:["center","start","end","stretch"]}];var fo=Object.freeze({__proto__:null,FlexboxEditableProperties:vo,FlexboxEditor:mo,GridEditableProperties:yo,GridEditor:bo,PropertyDeselectedEvent:ho,PropertySelectedEvent:uo,StylePropertyEditor:go});export{k as AccessibilityTreeNode,M as AdornerManager,I as AnchorFunctionLinkSwatch,Z as CSSHintDetailsView,ie as CSSPropertyDocsView,Ae as CSSPropertyIconResolver,We as CSSQuery,st as CSSVariableValueView,q as ComputedStyleProperty,G as ComputedStyleTrace,wt as ElementsBreadcrumbs,ht as ElementsBreadcrumbsUtils,Mt as ElementsTreeExpandButton,zt as Helper,Gt as LayoutPane,Wt as LayoutPaneUtils,oo as QueryContainer,fo as StylePropertyEditor};

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

@@ -0,0 +1 @@
+import*as e from"../../core/common/common.js";import*as t from"../../core/i18n/i18n.js";import*as n from"../../core/root/root.js";import*as o from"../../core/sdk/sdk.js";import*as a from"../../ui/legacy/legacy.js";const i={showElements:"Show Elements",elements:"Elements",showEventListeners:"Show Event Listeners",eventListeners:"Event Listeners",showProperties:"Show Properties",properties:"Properties",showStackTrace:"Show Stack Trace",stackTrace:"Stack Trace",showLayout:"Show Layout",layout:"Layout",hideElement:"Hide element",editAsHtml:"Edit as HTML",duplicateElement:"Duplicate element",undo:"Undo",redo:"Redo",captureAreaScreenshot:"Capture area screenshot",selectAnElementInThePageTo:"Select an element in the page to inspect it",newStyleRule:"New Style Rule",refreshEventListeners:"Refresh event listeners",wordWrap:"Word wrap",enableDomWordWrap:"Enable `DOM` word wrap",disableDomWordWrap:"Disable `DOM` word wrap",showHtmlComments:"Show `HTML` comments",hideHtmlComments:"Hide `HTML` comments",revealDomNodeOnHover:"Reveal `DOM` node on hover",showDetailedInspectTooltip:"Show detailed inspect tooltip",showCSSDocumentationTooltip:"Show CSS documentation tooltip",copyStyles:"Copy styles",showUserAgentShadowDOM:"Show user agent shadow `DOM`",showComputedStyles:"Show Computed Styles",showStyles:"Show Styles",toggleEyeDropper:"Toggle eye dropper"},s=t.i18n.registerUIStrings("panels/elements/elements-meta.ts",i),r=t.i18n.getLazilyComputedLocalizedString.bind(void 0,s);let l,c;async function d(){return l||(l=await import("./elements.js")),l}function m(e){return void 0===l?[]:e(l)}a.ViewManager.registerViewExtension({location:"panel",id:"elements",commandPrompt:r(i.showElements),title:r(i.elements),order:10,persistence:"permanent",hasToolbar:!1,loadView:async()=>(await d()).ElementsPanel.ElementsPanel.instance()}),a.ActionRegistration.registerActionExtension({actionId:"elements.show-styles",category:"ELEMENTS",title:r(i.showStyles),loadActionDelegate:async()=>new((await d()).ElementsPanel.ElementsActionDelegate)}),a.ActionRegistration.registerActionExtension({actionId:"elements.show-computed",category:"ELEMENTS",title:r(i.showComputedStyles),loadActionDelegate:async()=>new((await d()).ElementsPanel.ElementsActionDelegate)}),a.ViewManager.registerViewExtension({location:"elements-sidebar",id:"elements.event-listeners",commandPrompt:r(i.showEventListeners),title:r(i.eventListeners),order:5,hasToolbar:!0,persistence:"permanent",loadView:async()=>(await d()).EventListenersWidget.EventListenersWidget.instance()}),a.ViewManager.registerViewExtension({location:"elements-sidebar",id:"elements.dom-properties",commandPrompt:r(i.showProperties),title:r(i.properties),order:7,persistence:"permanent",loadView:async()=>new((await d()).PropertiesWidget.PropertiesWidget)}),a.ViewManager.registerViewExtension({experiment:"capture-node-creation-stacks",location:"elements-sidebar",id:"elements.dom-creation",commandPrompt:r(i.showStackTrace),title:r(i.stackTrace),order:10,persistence:"permanent",loadView:async()=>new((await d()).NodeStackTraceWidget.NodeStackTraceWidget)}),a.ViewManager.registerViewExtension({location:"elements-sidebar",id:"elements.layout",commandPrompt:r(i.showLayout),title:r(i.layout),order:4,persistence:"permanent",loadView:async()=>(await async function(){return c||(c=await import("./components/components.js")),c}()).LayoutPane.LayoutPane.instance().wrapper}),a.ActionRegistration.registerActionExtension({actionId:"elements.hide-element",category:"ELEMENTS",title:r(i.hideElement),loadActionDelegate:async()=>new((await d()).ElementsPanel.ElementsActionDelegate),contextTypes:()=>m((e=>[e.ElementsPanel.ElementsPanel])),bindings:[{shortcut:"H"}]}),a.ActionRegistration.registerActionExtension({actionId:"elements.toggle-eye-dropper",category:"ELEMENTS",title:r(i.toggleEyeDropper),loadActionDelegate:async()=>new((await d()).ElementsPanel.ElementsActionDelegate),contextTypes:()=>m((e=>[e.ColorSwatchPopoverIcon.ColorSwatchPopoverIcon])),bindings:[{shortcut:"c"}]}),a.ActionRegistration.registerActionExtension({actionId:"elements.edit-as-html",category:"ELEMENTS",title:r(i.editAsHtml),loadActionDelegate:async()=>new((await d()).ElementsPanel.ElementsActionDelegate),contextTypes:()=>m((e=>[e.ElementsPanel.ElementsPanel])),bindings:[{shortcut:"F2"}]}),a.ActionRegistration.registerActionExtension({actionId:"elements.duplicate-element",category:"ELEMENTS",title:r(i.duplicateElement),loadActionDelegate:async()=>new((await d()).ElementsPanel.ElementsActionDelegate),contextTypes:()=>m((e=>[e.ElementsPanel.ElementsPanel])),bindings:[{shortcut:"Shift+Alt+Down"}]}),a.ActionRegistration.registerActionExtension({actionId:"elements.copy-styles",category:"ELEMENTS",title:r(i.copyStyles),loadActionDelegate:async()=>new((await d()).ElementsPanel.ElementsActionDelegate),contextTypes:()=>m((e=>[e.ElementsPanel.ElementsPanel])),bindings:[{shortcut:"Ctrl+Alt+C",platform:"windows,linux"},{shortcut:"Meta+Alt+C",platform:"mac"}]}),a.ActionRegistration.registerActionExtension({actionId:"elements.undo",category:"ELEMENTS",title:r(i.undo),loadActionDelegate:async()=>new((await d()).ElementsPanel.ElementsActionDelegate),contextTypes:()=>m((e=>[e.ElementsPanel.ElementsPanel])),bindings:[{shortcut:"Ctrl+Z",platform:"windows,linux"},{shortcut:"Meta+Z",platform:"mac"}]}),a.ActionRegistration.registerActionExtension({actionId:"elements.redo",category:"ELEMENTS",title:r(i.redo),loadActionDelegate:async()=>new((await d()).ElementsPanel.ElementsActionDelegate),contextTypes:()=>m((e=>[e.ElementsPanel.ElementsPanel])),bindings:[{shortcut:"Ctrl+Y",platform:"windows,linux"},{shortcut:"Meta+Shift+Z",platform:"mac"}]}),a.ActionRegistration.registerActionExtension({actionId:"elements.capture-area-screenshot",loadActionDelegate:async()=>new((await d()).InspectElementModeController.ToggleSearchActionDelegate),condition:n.Runtime.conditions.canDock,title:r(i.captureAreaScreenshot),category:"SCREENSHOT"}),a.ActionRegistration.registerActionExtension({category:"ELEMENTS",actionId:"elements.toggle-element-search",toggleable:!0,loadActionDelegate:async()=>new((await d()).InspectElementModeController.ToggleSearchActionDelegate),title:r(i.selectAnElementInThePageTo),iconClass:"select-element",bindings:[{shortcut:"Ctrl+Shift+C",platform:"windows,linux"},{shortcut:"Meta+Shift+C",platform:"mac"}]}),a.ActionRegistration.registerActionExtension({category:"ELEMENTS",actionId:"elements.new-style-rule",title:r(i.newStyleRule),iconClass:"plus",loadActionDelegate:async()=>new((await d()).StylesSidebarPane.ActionDelegate),contextTypes:()=>m((e=>[e.StylesSidebarPane.StylesSidebarPane]))}),a.ActionRegistration.registerActionExtension({category:"ELEMENTS",actionId:"elements.refresh-event-listeners",title:r(i.refreshEventListeners),iconClass:"refresh",loadActionDelegate:async()=>new((await d()).EventListenersWidget.ActionDelegate),contextTypes:()=>m((e=>[e.EventListenersWidget.EventListenersWidget]))}),e.Settings.registerSettingExtension({category:"ELEMENTS",storageType:"Synced",order:1,title:r(i.showUserAgentShadowDOM),settingName:"show-ua-shadow-dom",settingType:"boolean",defaultValue:!1}),e.Settings.registerSettingExtension({category:"ELEMENTS",storageType:"Synced",order:2,title:r(i.wordWrap),settingName:"dom-word-wrap",settingType:"boolean",options:[{value:!0,title:r(i.enableDomWordWrap)},{value:!1,title:r(i.disableDomWordWrap)}],defaultValue:!0}),e.Settings.registerSettingExtension({category:"ELEMENTS",storageType:"Synced",order:3,title:r(i.showHtmlComments),settingName:"show-html-comments",settingType:"boolean",defaultValue:!0,options:[{value:!0,title:r(i.showHtmlComments)},{value:!1,title:r(i.hideHtmlComments)}]}),e.Settings.registerSettingExtension({category:"ELEMENTS",storageType:"Synced",order:4,title:r(i.revealDomNodeOnHover),settingName:"highlight-node-on-hover-in-overlay",settingType:"boolean",defaultValue:!0}),e.Settings.registerSettingExtension({category:"ELEMENTS",storageType:"Synced",order:5,title:r(i.showDetailedInspectTooltip),settingName:"show-detailed-inspect-tooltip",settingType:"boolean",defaultValue:!0}),e.Settings.registerSettingExtension({settingName:"show-event-listeners-for-ancestors",settingType:"boolean",defaultValue:!0}),e.Settings.registerSettingExtension({category:"ADORNER",storageType:"Synced",settingName:"adorner-settings",settingType:"array",defaultValue:[]}),e.Settings.registerSettingExtension({category:"ELEMENTS",storageType:"Synced",title:r(i.showCSSDocumentationTooltip),settingName:"show-css-property-documentation-on-hover",settingType:"boolean",defaultValue:!0}),a.ContextMenu.registerProvider({contextTypes:()=>[o.RemoteObject.RemoteObject,o.DOMModel.DOMNode,o.DOMModel.DeferredDOMNode],loadProvider:async()=>new((await d()).ElementsPanel.ContextMenuProvider),experiment:void 0}),a.ViewManager.registerLocationResolver({name:"elements-sidebar",category:"ELEMENTS",loadResolver:async()=>(await d()).ElementsPanel.ElementsPanel.instance()}),e.Revealer.registerRevealer({contextTypes:()=>[o.DOMModel.DOMNode,o.DOMModel.DeferredDOMNode,o.RemoteObject.RemoteObject],destination:e.Revealer.RevealerDestination.ELEMENTS_PANEL,loadRevealer:async()=>new((await d()).ElementsPanel.DOMNodeRevealer)}),e.Revealer.registerRevealer({contextTypes:()=>[o.CSSProperty.CSSProperty],destination:e.Revealer.RevealerDestination.STYLES_SIDEBAR,loadRevealer:async()=>new((await d()).ElementsPanel.CSSPropertyRevealer)}),a.Toolbar.registerToolbarItem({loadItem:async()=>(await d()).LayersWidget.ButtonProvider.instance(),order:1,location:"styles-sidebarpane-toolbar"}),a.Toolbar.registerToolbarItem({loadItem:async()=>(await d()).ElementStatePaneWidget.ButtonProvider.instance(),order:2,location:"styles-sidebarpane-toolbar"}),a.Toolbar.registerToolbarItem({loadItem:async()=>(await d()).ClassesPaneWidget.ButtonProvider.instance(),order:3,location:"styles-sidebarpane-toolbar"}),a.Toolbar.registerToolbarItem({loadItem:async()=>(await d()).StylesSidebarPane.ButtonProvider.instance(),order:100,location:"styles-sidebarpane-toolbar"}),a.Toolbar.registerToolbarItem({actionId:"elements.toggle-element-search",location:"main-toolbar-left",order:0}),a.UIUtils.registerRenderer({contextTypes:()=>[o.DOMModel.DOMNode,o.DOMModel.DeferredDOMNode],loadRenderer:async()=>(await d()).ElementsTreeOutline.Renderer.instance()}),e.Linkifier.registerLinkifier({contextTypes:()=>[o.DOMModel.DOMNode,o.DOMModel.DeferredDOMNode],loadLinkifier:async()=>(await d()).DOMLinkifier.Linkifier.instance()});