components.null.txt

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/legacy/legacy.js";import*as n from"../../../ui/lit/lit.js";import{html as s,nothing as i,render as a,Directives as l}from"../../../ui/lit/lit.js";import*as c from"../../../ui/visual_logging/visual_logging.js";import*as d from"../../../ui/components/buttons/buttons.js";import*as u from"../../../core/common/common.js";import"../../../ui/components/icon_button/icon_button.js";import"../../../ui/components/node_text/node_text.js";import*as p from"../../../ui/components/helpers/helpers.js";import*as h from"../../../core/sdk/sdk.js";var m=`.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")} */`;const g={ignored:"Ignored"},y=e.i18n.registerUIStrings("panels/elements/components/AccessibilityTreeNode.ts",g),f=e.i18n.getLocalizedString.bind(void 0,y);class v extends HTMLElement{#e=r.UIUtils.createShadowRootWithCoreStyles(this,{cssFile:m});#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()}async#i(){const e=s`<span class='role-value'>${r=this.#r,r.length>1e4?t.StringUtilities.trimMiddle(r,1e4):r}</span>`;var r;const n=s`"<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)?s` <span class='attribute-name'>${e}</span>:&nbsp;<span class='attribute-value'>${t.value}</span>`:i),c=this.#t?s`<span>${f(g.ignored)}</span>`:s`${e}&nbsp;${n}${l}`;await o.write(`Accessibility node ${this.#s} render`,()=>{a(s`<div class='container'>${c}</div>`,this.#e,{host:this})})}}customElements.define("devtools-accessibility-tree-node",v);var b,w=Object.freeze({__proto__:null,AccessibilityTreeNode:v});function x(e){switch(e){case b.GRID:return{name:"grid",category:"Layout",enabledByDefault:!0};case b.SUBGRID:return{name:"subgrid",category:"Layout",enabledByDefault:!0};case b.MASONRY:return{name:"masonry",category:"Layout",enabledByDefault:!0};case b.FLEX:return{name:"flex",category:"Layout",enabledByDefault:!0};case b.AD:return{name:"ad",category:"Security",enabledByDefault:!0};case b.SCROLL_SNAP:return{name:"scroll-snap",category:"Layout",enabledByDefault:!0};case b.STARTING_STYLE:return{name:"starting-style",category:"Layout",enabledByDefault:!0};case b.CONTAINER:return{name:"container",category:"Layout",enabledByDefault:!0};case b.SLOT:return{name:"slot",category:"Layout",enabledByDefault:!0};case b.TOP_LAYER:return{name:"top-layer",category:"Layout",enabledByDefault:!0};case b.REVEAL:return{name:"reveal",category:"Default",enabledByDefault:!0};case b.MEDIA:return{name:"media",category:"Default",enabledByDefault:!1};case b.SCROLL:return{name:"scroll",category:"Layout",enabledByDefault:!0};case b.POPOVER:return{name:"popover",category:"Layout",enabledByDefault:!0}}}let S;function k(e){if(!S){S=new Map;for(const{name:e,category:t}of Object.values(b).map(x))S.set(e,t)}return S.get(e)||"Default"}!function(e){e.GRID="grid",e.SUBGRID="subgrid",e.MASONRY="masonry",e.FLEX="flex",e.AD="ad",e.SCROLL_SNAP="scroll-snap",e.STARTING_STYLE="starting-style",e.CONTAINER="container",e.SLOT="slot",e.TOP_LAYER="top-layer",e.REVEAL="reveal",e.MEDIA="media",e.SCROLL="scroll",e.POPOVER="popover"}(b||(b={}));const N=Object.values(b).map(x).map(({name:e,enabledByDefault:t})=>({adorner:e,isEnabled:t}));const $=new Map(["Security","Layout","Default"].map((e,t)=>[e,t+1]));var E=Object.freeze({__proto__:null,AdornerCategoryOrder:$,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)}#u(){const e=this.#l.get();for(const t of e)this.#a.set(t.adorner,t.isEnabled)}#c(){this.#u();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 b},compareAdornerNamesByCategory:function(e,t){return($.get(k(e))||Number.POSITIVE_INFINITY)-($.get(k(t))||Number.POSITIVE_INFINITY)},getRegisteredAdorner:x}),j=`: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")} */`;class C extends Event{static eventName="onnavigatetosource";constructor(){super(C.eventName,{bubbles:!0,composed:!0})}}class L extends HTMLElement{#e=this.attachShadow({mode:"open"});#p=!1;#h=!1;connectedCallback(){this.#i()}set inherited(e){e!==this.#p&&(this.#p=e,this.#i())}set traceable(e){e!==this.#h&&(this.#h=e,this.#i())}#m(){this.dispatchEvent(new C)}#i(){a(s`
      <style>${j}</style>
      <div class="computed-style-property ${this.#p?"inherited":""}">
        <div class="property-name">
          <slot name="name"></slot>
        </div>
        <span class="hidden" aria-hidden="false">: </span>
        ${this.#h?s`<span class="goto" @click=${this.#m} jslog=${c.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",L);var D=Object.freeze({__proto__:null,ComputedStyleProperty:L,NavigateToSourceEvent:C}),T=`: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-primary-bright)}.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")} */`;class M extends HTMLElement{#e=this.attachShadow({mode:"open"});#g="";#y=!1;#f=()=>{};#v;set data(e){this.#g=e.selector,this.#y=e.active,this.#f=e.onNavigateToSource,this.#v=e.ruleOriginNode,this.#i()}#i(){a(s`
      <style>${d.textButtonStyles}</style>
      <style>${r.inspectorCommonStyles}</style>
      <style>${T}</style>
      <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.#g}</span>
        <span class="trace-link">${this.#v}</span>
      </div>
    `,this.#e,{host:this})}}customElements.define("devtools-computed-style-trace",M);var _=Object.freeze({__proto__:null,ComputedStyleTrace:M}),O=`.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")} */`;const z={learnMore:"Learn More"},P=e.i18n.registerUIStrings("panels/elements/components/CSSHintDetailsView.ts",z),I=e.i18n.getLocalizedString.bind(void 0,P);class H extends HTMLElement{#e=this.attachShadow({mode:"open"});#b;constructor(e){super(),this.#b=e,this.#i()}#i(){const e=this.#b.getLearnMoreLink();a(s`
        <style>${O}</style>
        <div class="hint-popup-wrapper">
          <div class="hint-popup-reason">
            ${l.unsafeHTML(this.#b.getMessage())}
          </div>
          ${this.#b.getPossibleFixMessage()?s`
              <div class="hint-popup-possible-fix">
                  ${l.unsafeHTML(this.#b.getPossibleFixMessage())}
              </div>
          `:""}
          ${e?s`
                      <div class="footer">
                        <x-link id="learn-more" href=${e} class="clickable underlined unbreakable-text">
                            ${I(z.learnMore)}
                        </x-link>
                      </div>
                  `:""}
        </div>
      `,this.#e,{host:this})}}customElements.define("devtools-css-hint-details-view",H);var A=Object.freeze({__proto__:null,CSSHintDetailsView:H}),R=`.docs-popup-wrapper{max-width:420px;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}#baseline{display:inline-flex;align-items:flex-start;gap:4px}#baseline-icon{width:18px;height:18px}\n/*# sourceURL=${import.meta.resolve("./cssPropertyDocsView.css")} */`;const q={learnMore:"Learn more",dontShow:"Don't show",limitedAvailability:"Limited availability across major browsers",limitedAvailabilityInBrowsers:"Limited availability across major browsers (not fully implemented in {PH1})",browserOnPlatform:"{PH1} on {PH2}",newlyAvailableSince:"Newly available across major browsers (`Baseline` since {PH1})",widelyAvailableSince:"Widely available across major browsers (`Baseline` since {PH1})",unknownDate:"an unknown date"},V=e.i18n.registerUIStrings("panels/elements/components/CSSPropertyDocsView.ts",q),B=e.i18n.getLocalizedString.bind(void 0,V),F=new Set(["C","CA","E","FF","FFA","S","SM"]),U=new Map([["C",{name:"Chrome",platform:"desktop"}],["CA",{name:"Chrome",platform:"Android"}],["E",{name:"Edge",platform:"desktop"}],["FF",{name:"Firefox",platform:"desktop"}],["FFA",{name:"Firefox",platform:"Android"}],["S",{name:"Safari",platform:"macOS"}],["SM",{name:"Safari",platform:"iOS"}]]);const Y=t=>{if(!t)return B(q.unknownDate);const o=new Date(t);return new Intl.DateTimeFormat(e.DevToolsLocale.DevToolsLocale.instance().locale,{month:"long",year:"numeric"}).format(o)},Q=(t,o)=>{if("false"===t.status){const t=o&&(e=>{const t=e.map(e=>e.replace(/\d*$/,"")),o=F.difference(new Set(t)),r=new Map;for(const e of o){const t=U.get(e);if(t){const{name:e,platform:o}=t;r.set(e,[...r.get(e)??[],o])}}return r})(o);return t?B(q.limitedAvailabilityInBrowsers,{PH1:(r=t,new Intl.ListFormat(e.DevToolsLocale.DevToolsLocale.instance().locale,{style:"long",type:"disjunction"}).format(r.entries().map(([e,t])=>1!==t.length||"desktop"===t[0]?e:B(q.browserOnPlatform,{PH1:e,PH2:t[0]}))))}):B(q.limitedAvailability)}var r;return"low"===t.status?B(q.newlyAvailableSince,{PH1:Y(t.baseline_low_date)}):B(q.widelyAvailableSince,{PH1:Y(t.baseline_high_date)})};class G extends HTMLElement{#e=this.attachShadow({mode:"open"});#w;constructor(e){super(),this.#w=e,this.#i()}#x(e){const t=!e.target.checked;u.Settings.Settings.instance().moduleSetting("show-css-property-documentation-on-hover").set(t)}#i(){const{description:e,references:t,baseline:o,browsers:r}=this.#w,n=t?.[0].url;a(s`
      <style>${R}</style>
      <div class="docs-popup-wrapper">
        ${e?s`
          <div id="description">
            ${e}
          </div>
        `:i}
        ${o?s`
          <div id="baseline" class="docs-popup-section">
            <img
              id="baseline-icon"
              src=${(e=>{let t;switch(e.status){case"high":t="../../../Images/baseline-high-availability.svg";break;case"low":t="../../../Images/baseline-low-availability.svg";break;default:t="../../../Images/baseline-limited-availability.svg"}return new URL(t,import.meta.url).toString()})(o)}
              role="presentation"
            >
            <span>
              ${Q(o,r)}
            </span>
          </div>
        `:i}
        ${n?s`
          <div class="docs-popup-section footer">
            <x-link
              id="learn-more"
              href=${n}
              class="clickable underlined unbreakable-text"
            >
              ${B(q.learnMore)}
            </x-link>
            <devtools-checkbox
              @change=${this.#x}
              jslog=${c.toggle("css-property-doc").track({change:!0})}>
              ${B(q.dontShow)}
            </devtools-checkbox>
          </div>
        `:i}
      </div>
    `,this.#e,{host:this})}}customElements.define("devtools-css-property-docs-view",G);var W=Object.freeze({__proto__:null,CSSPropertyDocsView:G});const X=new Set(["tb","tb-rl","vertical-lr","vertical-rl"]);function J(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 K(e){return{...e,"row-reverse":J(e.row),"column-reverse":J(e.column)}}function Z(e){const t="rtl"===e.get("direction"),o=e.get("writing-mode");return K(o&&X.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 ee(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 te(e,t){return{iconName:e,rotate:"right-to-left"===t?90:"left-to-right"===t?-90:0,scaleX:1,scaleY:1}}function oe(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 re(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 ne(e,t){return{iconName:e,rotate:"right-to-left"===t?90:"left-to-right"===t?-90:0,scaleX:1,scaleY:1}}function se(e){return function(t){return ee(Z(t)[e])}}function ie(e){return function(t){const o=Z(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 te(e,s)}}function ae(e){return function(t){const o=Z(t);return te(e,o.column)}}function le(e){return function(t){const o=Z(t);return oe(e,o[t.get("flex-direction")||"row"])}}function ce(e){return function(t){const o=Z(t);return oe(e,o.row)}}function de(e){return function(t){const o=Z(t);return re(e,o.row)}}function ue(e){return function(t){const o=Z(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 ne(e,s)}}function pe(e){return function(t){const o=Z(t);return ne(e,o.column)}}function he(){return{iconName:"align-items-baseline",rotate:0,scaleX:1,scaleY:1}}function me(e){return function(t){return ue(e)(t)}}function ge(e){return function(t){return pe(e)(t)}}function ye(e,t){return{iconName:e,rotate:"bottom-to-top"===t||"top-to-bottom"===t?90:0,scaleX:1,scaleY:1}}function fe(e){return function(t){const o=Z(t),r=t.get("flex-direction")||"row";return ye(e,o[r])}}const ve=new Map([["flex-direction: row",se("row")],["flex-direction: column",se("column")],["flex-direction: column-reverse",se("column-reverse")],["flex-direction: row-reverse",se("row-reverse")],["flex-direction: initial",se("row")],["flex-direction: unset",se("row")],["flex-direction: revert",se("row")],["align-content: center",ie("align-content-center")],["align-content: space-around",ie("align-content-space-around")],["align-content: space-between",ie("align-content-space-between")],["align-content: stretch",ie("align-content-stretch")],["align-content: space-evenly",ie("align-content-space-evenly")],["align-content: flex-end",ie("align-content-end")],["align-content: flex-start",ie("align-content-start")],["align-content: start",ie("align-content-start")],["align-content: end",ie("align-content-end")],["align-content: normal",ie("align-content-stretch")],["align-content: revert",ie("align-content-stretch")],["align-content: unset",ie("align-content-stretch")],["align-content: initial",ie("align-content-stretch")],["justify-content: center",le("justify-content-center")],["justify-content: space-around",le("justify-content-space-around")],["justify-content: space-between",le("justify-content-space-between")],["justify-content: space-evenly",le("justify-content-space-evenly")],["justify-content: flex-end",le("justify-content-end")],["justify-content: flex-start",le("justify-content-start")],["justify-content: end",le("justify-content-end")],["justify-content: start",le("justify-content-start")],["justify-content: right",le("justify-content-end")],["justify-content: left",le("justify-content-start")],["align-items: stretch",ue("align-items-stretch")],["align-items: flex-end",ue("align-items-end")],["align-items: flex-start",ue("align-items-start")],["align-items: end",ue("align-items-end")],["align-items: start",ue("align-items-start")],["align-items: self-end",ue("align-items-end")],["align-items: self-start",ue("align-items-start")],["align-items: center",ue("align-items-center")],["align-items: baseline",he],["align-content: baseline",he],["flex-wrap: wrap",fe("flex-wrap")],["flex-wrap: nowrap",fe("flex-no-wrap")]]),be=new Map([["align-self: baseline",he],["align-self: center",me("align-self-center")],["align-self: flex-start",me("align-self-start")],["align-self: flex-end",me("align-self-end")],["align-self: start",ge("align-self-start")],["align-self: end",ge("align-self-end")],["align-self: self-start",ge("align-self-start")],["align-self: self-end",ge("align-self-end")],["align-self: stretch",me("align-self-stretch")]]),we=new Map([["align-content: center",ae("align-content-center")],["align-content: space-around",ae("align-content-space-around")],["align-content: space-between",ae("align-content-space-between")],["align-content: stretch",ae("align-content-stretch")],["align-content: space-evenly",ae("align-content-space-evenly")],["align-content: end",ae("align-content-end")],["align-content: start",ae("align-content-start")],["align-content: baseline",he],["justify-content: center",ce("justify-content-center")],["justify-content: space-around",ce("justify-content-space-around")],["justify-content: space-between",ce("justify-content-space-between")],["justify-content: space-evenly",ce("justify-content-space-evenly")],["justify-content: end",ce("justify-content-end")],["justify-content: start",ce("justify-content-start")],["justify-content: right",ce("justify-content-end")],["justify-content: left",ce("justify-content-start")],["justify-content: stretch",ce("justify-content-stretch")],["align-items: stretch",pe("align-items-stretch")],["align-items: end",pe("align-items-end")],["align-items: start",pe("align-items-start")],["align-items: self-end",pe("align-items-end")],["align-items: self-start",pe("align-items-start")],["align-items: center",pe("align-items-center")],["align-items: baseline",he],["justify-items: center",de("justify-items-center")],["justify-items: stretch",de("justify-items-stretch")],["justify-items: end",de("justify-items-end")],["justify-items: start",de("justify-items-start")],["justify-items: self-end",de("justify-items-end")],["justify-items: self-start",de("justify-items-start")],["justify-items: right",de("justify-items-end")],["justify-items: left",de("justify-items-start")],["justify-items: baseline",he]]),xe=new Map([["align-self: baseline",he],["align-self: center",ge("align-self-center")],["align-self: start",ge("align-self-start")],["align-self: end",ge("align-self-end")],["align-self: self-start",ge("align-self-start")],["align-self: self-end",ge("align-self-end")],["align-self: stretch",ge("align-self-stretch")]]),Se=e=>{const t=e?.get("display");return"flex"===t||"inline-flex"===t},ke=e=>{const t=e?.get("display");return"grid"===t||"inline-grid"===t};function Ne(e,t){const o=ve.get(e);return o?o(t||new Map):null}function $e(e,t){const o=be.get(e);return o?o(t||new Map):null}function Ee(e,t){const o=we.get(e);return o?o(t||new Map):null}function je(e,t){const o=xe.get(e);return o?o(t||new Map):null}var Ce=Object.freeze({__proto__:null,findFlexContainerIcon:Ne,findFlexItemIcon:$e,findGridContainerIcon:Ee,findGridItemIcon:je,findIcon:function(e,t,o){if(Se(t)){const o=Ne(e,t);if(o)return o}if(Se(o)){const t=$e(e,o);if(t)return t}if(ke(t)){const o=Ee(e,t);if(o)return o}if(ke(o)){const t=je(e,o);if(t)return t}return null},getPhysicalDirections:Z,reverseDirection:J,rotateAlignContentIcon:te,rotateAlignItemsIcon:ne,rotateFlexDirectionIcon:ee,rotateFlexWrapIcon:ye,rotateJustifyContentIcon:oe,rotateJustifyItemsIcon:re}),Le=`.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")} */`;const{render:De,html:Te}=n;class Me extends HTMLElement{#e=this.attachShadow({mode:"open"});#S="";#k;#N="";#$;#E;set data(e){this.#S=e.queryPrefix,this.#k=e.queryName,this.#N=e.queryText,this.#$=e.onQueryTextClick,this.#E=e.jslogContext,this.#i()}#i(){const e=n.Directives.classMap({query:!0,editable:Boolean(this.#$)}),t=Te`
      <span class="query-text" @click=${this.#$}>${this.#N}</span>
    `;De(Te`
        <style>${Le}</style>
        <style>${r.inspectorCommonStyles}</style>
        <div class=${e} jslog=${c.cssRuleHeader(this.#E).track({click:!0,change:!0})}>
          <slot name="indent"></slot>
          ${this.#S?Te`<span>${this.#S+" "}</span>`:n.nothing}
          ${this.#k?Te`<span>${this.#k+" "}</span>`:n.nothing}
          ${t} {
        </div>`,this.#e,{host:this})}}customElements.define("devtools-css-query",Me);var _e=Object.freeze({__proto__:null,CSSQuery:Me}),Oe=`.registered-property-popup-wrapper{max-width:232px;font-size:12px;line-height:1.4;word-break:break-all}.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")} */`;const ze={registeredPropertyLinkTitle:"View registered property",invalidPropertyValue:"Invalid property value, expected type {type}",sIsNotDefined:"{PH1} is not defined"},Pe=e.i18n.registerUIStrings("panels/elements/components/CSSVariableValueView.ts",ze),Ie=e.i18n.getLocalizedString.bind(void 0,Pe),He=n.i18nTemplate.bind(void 0,Pe),{render:Ae,html:Re}=n;function qe(e){return Re`<div class="registered-property-links">
            <span role="button" @click=${e?.goToDefinition} class="clickable underlined unbreakable-text">
              ${Ie(ze.registeredPropertyLinkTitle)}
            </span>
          </div>`}class Ve extends HTMLElement{#e=this.attachShadow({mode:"open"});constructor(e){super(),this.#i(e)}#i(e){const t=Re`<span class="monospace css-property">${e.registration.syntax()}</span>`;Ae(Re`
      <style>${Oe}</style>
      <div class="variable-value-popup-wrapper">
        ${He(ze.invalidPropertyValue,{type:t})}
        ${qe(e)}
      </div>`,this.#e,{host:this})}}class Be extends HTMLElement{#e=this.attachShadow({mode:"open"});variableName;#j;details;constructor({variableName:e,value:t,details:o}){super(),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?Re`
        <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?Re`<div><span class="css-property">initial-value:</span> ${e}</div>`:""}
          </div>
          ${qe(this.details)}
        </div>`:"",o=this.value??Ie(ze.sIsNotDefined,{PH1:this.variableName});Ae(Re`<style>${Oe}</style>
             <div class="variable-value-popup-wrapper">
               ${o}
             </div>
             ${t}
             `,this.#e,{host:this})}}customElements.define("devtools-css-variable-value-view",Be),customElements.define("devtools-css-variable-parser-error",Ve);var Fe=Object.freeze({__proto__:null,CSSVariableParserError:Ve,CSSVariableValueView:Be}),Ue=`: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")} */`;const Ye={text:"(text)"},Qe=e.i18n.registerUIStrings("panels/elements/components/ElementsBreadcrumbsUtils.ts",Ye),Ge=e.i18n.getLocalizedString.bind(void 0,Qe),We=(e,t)=>t?e.filter(e=>e.nodeType!==Node.DOCUMENT_NODE).map(e=>({title:Je(e),selected:e.id===t.id,node:e,originalNode:e.legacyDomNode})).reverse():[],Xe=(e,t={})=>({main:e,extras:t}),Je=e=>{switch(e.nodeType){case Node.ELEMENT_NODE:{if(e.pseudoType)return Xe("::"+e.pseudoType);const t=Xe(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 Xe(Ge(Ye.text));case Node.COMMENT_NODE:return Xe("\x3c!--\x3e");case Node.DOCUMENT_TYPE_NODE:return Xe("<!doctype>");case Node.DOCUMENT_FRAGMENT_NODE:return Xe(e.shadowRootType?"#shadow-root":e.nodeNameNicelyCased);default:return Xe(e.nodeNameNicelyCased)}};var Ke=Object.freeze({__proto__:null,crumbsToRender:We,determineElementTitle:Je});const{html:Ze}=n,et={breadcrumbs:"DOM tree breadcrumbs",scrollLeft:"Scroll left",scrollRight:"Scroll right"},tt=e.i18n.registerUIStrings("panels/elements/components/ElementsBreadcrumbs.ts",et),ot=e.i18n.getLocalizedString.bind(void 0,tt);class rt extends Event{static eventName="breadcrumbsnodeselected";legacyDomNode;constructor(e){super(rt.eventName,{}),this.legacyDomNode=e.legacyDomNode}}class nt extends HTMLElement{#e=this.attachShadow({mode:"open"});#C=new ResizeObserver(()=>this.#L());#D=[];#T=null;#M=!1;#_="start";#O=!1;#z=!1;set data(e){this.#T=e.selectedNode,this.#D=e.crumbs,this.#z=!1,p.ScheduledRender.scheduleRender(this,this.#i)}disconnectedCallback(){this.#O=!1,this.#C.disconnect()}#P(e){return t=>{t.preventDefault(),this.dispatchEvent(new rt(e))}}async#L(){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.#M?n<r&&(this.#M=!1):n>r&&(this.#M=!0),this.#I(),this.#H(t)}#A(e){return()=>e.highlightNode()}#R(e){return()=>e.clearHighlight()}#q(e){return()=>e.highlightNode()}#V(e){return()=>e.clearHighlight()}#B(){if(!this.#C||!0===this.#O)return;const e=this.#e.querySelector(".crumbs");e&&(this.#C.observe(e),this.#O=!0)}async#F(){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.#M?n<r&&(this.#M=!1,this.#i()):n>r&&(this.#M=!0,this.#i())}#U(e){if(!e.target)return;const t=e.target;this.#H(t)}#H(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.#z=!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})}}#Q(e,t){const o=n.Directives.classMap({overflow:!0,[e]:!0,hidden:!this.#M}),r=ot("left"===e?et.scrollLeft:et.scrollRight);return Ze`
      <button
        class=${o}
        @click=${this.#Y(e)}
        ?disabled=${t}
        aria-label=${r}
        title=${r}>
        <devtools-icon name=${"triangle-"+e} style="width: var(--sys-size-6); height: 10px;">
        </devtools-icon>
      </button>
      `}#i(){const e=We(this.#D,this.#T);n.render(Ze`
      <style>${Ue}</style>
      <nav class="crumbs" aria-label=${ot(et.breadcrumbs)} jslog=${c.elementsBreadcrumbs()}>
        ${this.#Q("left","start"===this.#_)}

        <div class="crumbs-window" @scroll=${this.#U}>
          <ul class="crumbs-scroll-container">
            ${e.map(e=>{const t={crumb:!0,selected:e.selected};return Ze`
                <li class=${n.Directives.classMap(t)}
                  data-node-id=${e.node.id}
                  data-crumb="true"
                >
                  <a href="#" draggable=false class="crumb-link"
                    jslog=${c.item().track({click:!0})}
                    @click=${this.#P(e.node)}
                    @mousemove=${this.#A(e.node)}
                    @mouseleave=${this.#R(e.node)}
                    @focus=${this.#q(e.node)}
                    @blur=${this.#V(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.#Q("right","end"===this.#_)}
      </nav>
    `,this.#e,{host:this}),this.#F(),this.#B(),this.#I()}async#I(){if(!this.#T||!this.#e||!this.#M||this.#z)return;const e=this.#T.id,t=this.#e.querySelector(`.crumb[data-node-id="${e}"]`);t&&await o.scroll(()=>{t.scrollIntoView({behavior:"auto"})})}}customElements.define("devtools-elements-breadcrumbs",nt);var st=Object.freeze({__proto__:null,ElementsBreadcrumbs:nt,NodeSelectedEvent:rt}),it=`: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")} */`;const at={expand:"Expand"},lt=e.i18n.registerUIStrings("panels/elements/components/ElementsTreeExpandButton.ts",at),ct=e.i18n.getLocalizedString.bind(void 0,lt);class dt extends HTMLElement{#e=this.attachShadow({mode:"open"});#G=()=>{};set data(e){this.#G=e.clickHandler,this.#W()}#W(){this.#i()}#i(){a(s`
      <style>${it}</style>
      <button
        class="expand-button"
        tabindex="-1"
        aria-label=${ct(at.expand)}
        jslog=${c.action("expand").track({click:!0})}
        @click=${this.#G}><devtools-icon name="dots-horizontal"></devtools-icon></button>`,this.#e,{host:this})}}customElements.define("devtools-elements-tree-expand-button",dt);var ut=Object.freeze({__proto__:null,ElementsTreeExpandButton:dt});const pt=e=>({parentNode:e.parentNode?pt(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 ht=Object.freeze({__proto__:null,legacyNodeToElementsComponentsNode:pt}),mt=`.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")} */`;const{render:gt,html:yt}=n,{PhysicalAxis:ft,QueryAxis:vt}=h.CSSContainerQuery;class bt extends Event{static eventName="queriedsizerequested";constructor(){super(bt.eventName,{})}}class wt extends HTMLElement{#e=this.attachShadow({mode:"open"});#k;#X;#J;#K=!1;#Z;set data(e){this.#k=e.queryName,this.#X=e.container,this.#J=e.onContainerLinkClick,this.#i()}updateContainerQueriedSizeDetails(e){this.#Z=e,this.#i()}async#ee(){this.#X?.highlightNode("container-outline"),this.#K=!0,this.dispatchEvent(new bt)}#te(){this.#X?.clearHighlight(),this.#K=!1,this.#i()}#i(){if(!this.#X)return;let e,t;this.#k||(e=this.#X.getAttribute("id"),t=this.#X.getAttribute("class")?.split(/\s+/).filter(Boolean));const o=this.#k||this.#X.nodeNameNicelyCased;gt(yt`
      <style>${mt}</style>
      →
      <a href="#" draggable=false class="container-link"
         jslog=${c.cssRuleHeader("container-query").track({click:!0})}
         @click=${this.#J}
         @mouseenter=${this.#ee}
         @mouseleave=${this.#te}>
        <devtools-node-text data-node-title=${o} .data=${{nodeTitle:o,nodeId:e,nodeClasses:t}}>
        </devtools-node-text>
      </a>
      ${this.#K?this.#oe():n.nothing}
    `,this.#e,{host:this})}#oe(){if(!this.#Z||""===this.#Z.queryAxis)return n.nothing;const e="size"===this.#Z.queryAxis,t=n.Directives.classMap({"axis-icon":!0,hidden:e,vertical:"Vertical"===this.#Z.physicalAxis});return yt`
      <span class="queried-size-details">
        (${this.#Z.queryAxis}
        <devtools-icon
          class=${t} name="width"></devtools-icon>
        ) ${e&&this.#Z.width?" width: ":n.nothing}
        ${this.#Z.width||n.nothing}
        ${e&&this.#Z.height?" height: ":n.nothing}
        ${this.#Z.height||n.nothing}
      </span>
    `}}customElements.define("devtools-query-container",wt);var xt=Object.freeze({__proto__:null,QueriedSizeRequestedEvent:bt,QueryContainer:wt}),St=`.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")} */`;const kt={selectButton:"Add {propertyName}: {propertyValue}",deselectButton:"Remove {propertyName}: {propertyValue}"},Nt=e.i18n.registerUIStrings("panels/elements/components/StylePropertyEditor.ts",kt),$t=e.i18n.getLocalizedString.bind(void 0,Nt),{render:Et,html:jt,Directives:Ct}=n;class Lt extends Event{static eventName="propertyselected";data;constructor(e,t){super(Lt.eventName,{}),this.data={name:e,value:t}}}class Dt extends Event{static eventName="propertydeselected";data;constructor(e,t){super(Dt.eventName,{}),this.data={name:e,value:t}}}class Tt extends HTMLElement{#e=this.attachShadow({mode:"open"});#re=new Map;#ne=new Map;editableProperties=[];getEditableProperties(){return this.editableProperties}set data(e){this.#re=e.authoredProperties,this.#ne=e.computedProperties,this.#i()}#i(){Et(jt`
      <style>${St}</style>
      <div class="container">
        ${this.editableProperties.map(e=>this.#se(e))}
      </div>
    `,this.#e,{host:this})}#se(e){const t=this.#re.get(e.propertyName),o=!t,r=t||this.#ne.get(e.propertyName),n=Ct.classMap({"property-value":!0,"not-authored":o});return jt`<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.#ie(o,e.propertyName,o===t))}
      </div>
    </div>`}#ie(e,t,o=!1){const r=`${t}: ${e}`,n=this.findIcon(r,this.#ne);if(!n)throw new Error(`Icon for ${r} is not found`);const s=`transform: rotate(${n.rotate}deg) scale(${n.scaleX}, ${n.scaleY})`,i=Ct.classMap({button:!0,selected:o}),a={propertyName:t,propertyValue:e},l=$t(o?kt.deselectButton:kt.selectButton,a);return jt`
      <button title=${l}
              class=${i}
              jslog=${c.item().track({click:!0}).context(`${t}-${e}`)}
              @click=${()=>this.#ae(t,e,o)}>
        <devtools-icon style=${s} name=${n.iconName}>
        </devtools-icon>
      </button>
    `}#ae(e,t,o){o?this.dispatchEvent(new Dt(e,t)):this.dispatchEvent(new Lt(e,t))}findIcon(e,t){throw new Error("Not implemented")}}class Mt extends Tt{jslogContext="cssFlexboxEditor";editableProperties=zt;findIcon(e,t){return Ne(e,t)}}customElements.define("devtools-flexbox-editor",Mt);class _t extends Tt{jslogContext="cssGridEditor";editableProperties=Pt;findIcon(e,t){return Ee(e,t)}}customElements.define("devtools-grid-editor",_t);class Ot extends Tt{jslogContext="cssMasonryEditor";editableProperties=It;findIcon(e,t){return Ee(e,t)}}customElements.define("devtools-masonry-editor",Ot);const zt=[{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"]}],Pt=[{propertyName:"align-content",propertyValues:["center","start","end","space-between","space-around","space-evenly","stretch"]},{propertyName:"justify-content",propertyValues:["center","start","end","space-between","space-around","space-evenly","stretch"]},{propertyName:"align-items",propertyValues:["center","start","end","stretch","baseline"]},{propertyName:"justify-items",propertyValues:["center","start","end","stretch"]}],It=[{propertyName:"align-content",propertyValues:["center","start","end","space-between","space-around","space-evenly","stretch"]},{propertyName:"justify-content",propertyValues:["center","start","end","space-between","space-around","space-evenly","stretch"]},{propertyName:"align-items",propertyValues:["center","start","end","stretch"]},{propertyName:"justify-items",propertyValues:["center","start","end","stretch"]}];var Ht=Object.freeze({__proto__:null,FlexboxEditableProperties:zt,FlexboxEditor:Mt,GridEditableProperties:Pt,GridEditor:_t,MasonryEditableProperties:It,MasonryEditor:Ot,PropertyDeselectedEvent:Dt,PropertySelectedEvent:Lt,StylePropertyEditor:Tt});export{w as AccessibilityTreeNode,E as AdornerManager,A as CSSHintDetailsView,W as CSSPropertyDocsView,Ce as CSSPropertyIconResolver,_e as CSSQuery,Fe as CSSVariableValueView,D as ComputedStyleProperty,_ as ComputedStyleTrace,st as ElementsBreadcrumbs,Ke as ElementsBreadcrumbsUtils,ut as ElementsTreeExpandButton,ht as Helper,xt as QueryContainer,Ht as StylePropertyEditor};
//# sourceMappingURL=components.js.map