@react-native/debugger-frontend 0.73.0

package/dist/third-party/front_end/panels/css_overview/css_overview.js

@@ -0,0 +1,144 @@
+import*as e from"../../core/common/common.js";import*as t from"../../core/sdk/sdk.js";import*as i from"../../core/i18n/i18n.js";import*as o from"../../core/root/root.js";import*as n from"../../ui/legacy/components/color_picker/color_picker.js";import*as s from"../../ui/legacy/legacy.js";import*as r from"../../core/platform/platform.js";import*as a from"../../models/text_utils/text_utils.js";import*as l from"../../ui/components/icon_button/icon_button.js";import*as d from"../../ui/legacy/components/data_grid/data_grid.js";import*as c from"../../ui/legacy/components/utils/utils.js";import*as h from"./components/components.js";import*as u from"../../core/host/host.js";class v extends e.ObjectWrapper.ObjectWrapper{currentUrl;constructor(){super(),this.currentUrl=t.TargetManager.TargetManager.instance().inspectedURL(),t.TargetManager.TargetManager.instance().addEventListener(t.TargetManager.Events.InspectedURLChanged,this.#e,this)}#e(){this.currentUrl!==t.TargetManager.TargetManager.instance().inspectedURL()&&(this.currentUrl=t.TargetManager.TargetManager.instance().inspectedURL(),this.dispatchEventToListeners("Reset"))}}var p=Object.freeze({__proto__:null,OverviewController:v});const m={topAppliedToAStatically:"`Top` applied to a statically positioned element",leftAppliedToAStatically:"`Left` applied to a statically positioned element",rightAppliedToAStatically:"`Right` applied to a statically positioned element",bottomAppliedToAStatically:"`Bottom` applied to a statically positioned element",widthAppliedToAnInlineElement:"`Width` applied to an inline element",heightAppliedToAnInlineElement:"`Height` applied to an inline element",verticalAlignmentAppliedTo:"Vertical alignment applied to element which is neither `inline` nor `table-cell`"},g=i.i18n.registerUIStrings("panels/css_overview/CSSOverviewUnusedDeclarations.ts",m),w=i.i18n.getLocalizedString.bind(void 0,g);class f{static add(e,t,i){const o=e.get(t)||[];o.push(i),e.set(t,o)}static checkForUnusedPositionValues(e,t,i,o,n,s,r,a){if("static"===i[o]){if("auto"!==i[n]){const o=w(m.topAppliedToAStatically);this.add(e,o,{declaration:`top: ${i[n]}`,nodeId:t})}if("auto"!==i[s]){const o=w(m.leftAppliedToAStatically);this.add(e,o,{declaration:`left: ${i[s]}`,nodeId:t})}if("auto"!==i[r]){const o=w(m.rightAppliedToAStatically);this.add(e,o,{declaration:`right: ${i[r]}`,nodeId:t})}if("auto"!==i[a]){const o=w(m.bottomAppliedToAStatically);this.add(e,o,{declaration:`bottom: ${i[a]}`,nodeId:t})}}}static checkForUnusedWidthAndHeightValues(e,t,i,o,n,s){if("inline"===i[o]){if("auto"!==i[n]){const o=w(m.widthAppliedToAnInlineElement);this.add(e,o,{declaration:`width: ${i[n]}`,nodeId:t})}if("auto"!==i[s]){const o=w(m.heightAppliedToAnInlineElement);this.add(e,o,{declaration:`height: ${i[s]}`,nodeId:t})}}}static checkForInvalidVerticalAlignment(e,t,i,o,n){if(i[o]&&!i[o].startsWith("inline")&&!i[o].startsWith("table")&&"baseline"!==i[n]){const o=w(m.verticalAlignmentAppliedTo);this.add(e,o,{declaration:`vertical-align: ${i[n]}`,nodeId:t})}}}var b=Object.freeze({__proto__:null,CSSOverviewUnusedDeclarations:f});class S extends t.SDKModel.SDKModel{#t;#i;#o;#n;constructor(e){super(e),this.#t=e.runtimeAgent(),this.#i=e.cssAgent(),this.#o=e.domsnapshotAgent(),this.#n=e.overlayAgent()}highlightNode(t){const i={contentColor:e.Color.PageHighlight.Content.toProtocolRGBA(),showInfo:!0,contrastAlgorithm:o.Runtime.experiments.isEnabled("APCA")?"apca":"aa"};this.#n.invoke_hideHighlight(),this.#n.invoke_highlightNode({backendNodeId:t,highlightConfig:i})}async getNodeStyleStats(){const t=new Map,i=new Map,s=new Map,r=new Map,a=new Map,l=new Map,d=new Map,c=t=>t instanceof e.Color.Legacy?t.hasAlpha()?t.asString("hexa"):t.asString("hex"):t.asString(),h=(t,i,o)=>{if(-1===t)return;const n=w[t];if(!n)return;const s=e.Color.parse(n);if(!s||0===s.asLegacyColor().rgba()[3])return;const r=c(s);if(!r)return;const a=o.get(r)||new Set;return a.add(i),o.set(r,a),s},u=e=>new Set(["altglyph","circle","ellipse","path","polygon","polyline","rect","svg","text","textpath","tref","tspan"]).has(e.toLowerCase()),v=e=>new Set(["iframe","video","embed","img"]).has(e.toLowerCase()),p=(e,t)=>new Set(["tr","td","thead","tbody"]).has(e.toLowerCase())&&t.startsWith("table");let m=0;const{documents:g,strings:w}=await this.#o.invoke_captureSnapshot({computedStyles:["background-color","color","fill","border-top-width","border-top-color","border-bottom-width","border-bottom-color","border-left-width","border-left-color","border-right-width","border-right-color","font-family","font-size","font-weight","line-height","position","top","right","bottom","left","display","width","height","vertical-align"],includeTextColorOpacities:!0,includeBlendedBackgroundColors:!0});for(const{nodes:b,layout:S}of g){m+=S.nodeIndex.length;for(let m=0;m<S.styles.length;m++){const g=S.styles[m],C=S.nodeIndex[m];if(!b.backendNodeId||!b.nodeName)continue;const y=b.backendNodeId[C],x=b.nodeName[C],[k,I,T,M,$,A,E,L,F,O,R,P,_,V,N,D,z,W,U,B,H,G,j,q]=g;h(k,y,t);const Q=h(I,y,i);if(u(w[x])&&h(T,y,r),"0px"!==w[M]&&h($,y,a),"0px"!==w[A]&&h(E,y,a),"0px"!==w[L]&&h(F,y,a),"0px"!==w[O]&&h(R,y,a),P&&-1!==P){const e=w[P],t=l.get(e)||new Map,i="font-size",o="font-weight",n="line-height",s=t.get(i)||new Map,r=t.get(o)||new Map,a=t.get(n)||new Map;if(-1!==_){const e=w[_],t=s.get(e)||[];t.push(y),s.set(e,t)}if(-1!==V){const e=w[V],t=r.get(e)||[];t.push(y),r.set(e,t)}if(-1!==N){const e=w[N],t=a.get(e)||[];t.push(y),a.set(e,t)}t.set(i,s),t.set(o,r),t.set(n,a),l.set(e,t)}const K=Q&&S.blendedBackgroundColors&&-1!==S.blendedBackgroundColors[m]?e.Color.parse(w[S.blendedBackgroundColors[m]]):null;if(Q&&K){const e=new n.ContrastInfo.ContrastInfo({backgroundColors:[K.asString("hexa")],computedFontSize:-1!==_?w[_]:"",computedFontWeight:-1!==V?w[V]:""}),t=Q.asLegacyColor().blendWithAlpha(S.textColorOpacities?S.textColorOpacities[m]:1);e.setColor(t);const i=`${c(t)}_${c(K.asLegacyColor())}`;if(o.Runtime.experiments.isEnabled("APCA")){const o=e.contrastRatioAPCA(),n=e.contrastRatioAPCAThreshold();if(!(!(!o||!n)&&Math.abs(o)>=n)&&o){const e={nodeId:y,contrastRatio:o,textColor:t,backgroundColor:K,thresholdsViolated:{aa:!1,aaa:!1,apca:!0}};s.has(i)?s.get(i).push(e):s.set(i,[e])}}else{const o=e.contrastRatioThreshold("aa")||0,n=e.contrastRatioThreshold("aaa")||0,r=e.contrastRatio()||0;if(o>r||n>r){const e={nodeId:y,contrastRatio:r,textColor:t,backgroundColor:K,thresholdsViolated:{aa:o>r,aaa:n>r,apca:!1}};s.has(i)?s.get(i).push(e):s.set(i,[e])}}}f.checkForUnusedPositionValues(d,y,w,D,z,B,W,U),u(w[x])||v(w[x])||f.checkForUnusedWidthAndHeightValues(d,y,w,H,G,j),-1===q||p(w[x],w[H])||f.checkForInvalidVerticalAlignment(d,y,w,H,q)}}return{backgroundColors:t,textColors:i,textColorContrastIssues:s,fillColors:r,borderColors:a,fontInfo:l,unusedDeclarations:d,elementCount:m}}getComputedStyleForNode(e){return this.#i.invoke_getComputedStyleForNode({nodeId:e})}async getMediaQueries(){const e=await this.#i.invoke_getMediaQueries(),t=new Map;if(!e)return t;for(const i of e.medias){if("linkedSheet"===i.source)continue;const e=t.get(i.text)||[];e.push(i),t.set(i.text,e)}return t}async getGlobalStylesheetStats(){const{result:e}=await this.#t.invoke_evaluate({expression:"(function() {\n      let styleRules = 0;\n      let inlineStyles = 0;\n      let externalSheets = 0;\n      const stats = {\n        // Simple.\n        type: new Set(),\n        class: new Set(),\n        id: new Set(),\n        universal: new Set(),\n        attribute: new Set(),\n\n        // Non-simple.\n        nonSimple: new Set()\n      };\n\n      for (const styleSheet of document.styleSheets) {\n        if (styleSheet.href) {\n          externalSheets++;\n        } else {\n          inlineStyles++;\n        }\n\n        // Attempting to grab rules can trigger a DOMException.\n        // Try it and if it fails skip to the next stylesheet.\n        let rules;\n        try {\n          rules = styleSheet.rules;\n        } catch (err) {\n          continue;\n        }\n\n        for (const rule of rules) {\n          if ('selectorText' in rule) {\n            styleRules++;\n\n            // Each group that was used.\n            for (const selectorGroup of rule.selectorText.split(',')) {\n              // Each selector in the group.\n              for (const selector of selectorGroup.split(/[\\t\\n\\f\\r ]+/g)) {\n                if (selector.startsWith('.')) {\n                  // Class.\n                  stats.class.add(selector);\n                } else if (selector.startsWith('#')) {\n                  // Id.\n                  stats.id.add(selector);\n                } else if (selector.startsWith('*')) {\n                  // Universal.\n                  stats.universal.add(selector);\n                } else if (selector.startsWith('[')) {\n                  // Attribute.\n                  stats.attribute.add(selector);\n                } else {\n                  // Type or non-simple selector.\n                  const specialChars = /[#.:\\[\\]|\\+>~]/;\n                  if (specialChars.test(selector)) {\n                    stats.nonSimple.add(selector);\n                  } else {\n                    stats.type.add(selector);\n                  }\n                }\n              }\n            }\n          }\n        }\n      }\n\n      return {\n        styleRules,\n        inlineStyles,\n        externalSheets,\n        stats: {\n          // Simple.\n          type: stats.type.size,\n          class: stats.class.size,\n          id: stats.id.size,\n          universal: stats.universal.size,\n          attribute: stats.attribute.size,\n\n          // Non-simple.\n          nonSimple: stats.nonSimple.size\n        }\n      }\n    })()",returnByValue:!0});if("object"===e.type)return e.value}}t.SDKModel.SDKModel.register(S,{capabilities:t.Target.Capability.DOM,autostart:!1});var C=Object.freeze({__proto__:null,CSSOverviewModel:S});const y=new CSSStyleSheet;y.replaceSync(".overview-processing-view{overflow:hidden;padding:16px;justify-content:center;align-items:center;height:100%}.overview-processing-view h1{font-size:16px;text-align:center;font-weight:normal;margin:0;padding:8px}.overview-processing-view h2{font-size:12px;text-align:center;font-weight:normal;margin:0;padding-top:32px}\n/*# sourceURL=cssOverviewProcessingView.css */\n");const x={cancel:"Cancel"},k=i.i18n.registerUIStrings("panels/css_overview/CSSOverviewProcessingView.ts",x),I=i.i18n.getLocalizedString.bind(void 0,k);class T extends s.Widget.Widget{#s;fragment;constructor(e){super(),this.#s=e,this.#r()}#r(){const e=s.UIUtils.createTextButton(I(x.cancel),(()=>this.#s.dispatchEventToListeners("RequestOverviewCancel")),"",!0);this.setDefaultFocusedElement(e),this.fragment=s.Fragment.Fragment.build`
+      <div class="vbox overview-processing-view">
+        <h1>Processing page</h1>
+        <div>${e}</div>
+      </div>
+    `,this.contentElement.appendChild(this.fragment.element()),this.contentElement.style.overflow="auto"}wasShown(){super.wasShown(),this.registerCSSFiles([y])}}var M=Object.freeze({__proto__:null,CSSOverviewProcessingView:T});const $=new CSSStyleSheet;$.replaceSync('.overview-completed-view{overflow:auto;--overview-default-padding:28px;--overview-icon-padding:32px}.overview-completed-view .summary ul,\n.overview-completed-view .colors ul{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}.overview-completed-view .summary ul{display:grid;grid-template-columns:repeat(auto-fill,140px);grid-gap:16px}.overview-completed-view .colors ul li{display:inline-block;margin:0 0 16px;padding:0 8px 0 0}.overview-completed-view .summary ul li{display:flex;flex-direction:column;grid-column-start:auto}.overview-completed-view li .label{font-size:12px;padding-bottom:2px}.overview-completed-view li .value{font-size:17px}.overview-completed-view ul li span{font-weight:bold}.unused-rules-grid .header-container,\n.unused-rules-grid .data-container,\n.unused-rules-grid table.data{position:relative}.unused-rules-grid .data-container{top:0;max-height:350px}.unused-rules-grid{border-left:none;border-right:none}.unused-rules-grid .monospace{display:block;height:18px}.element-grid{flex:1;border-left:none;border-right:none;overflow:auto}.block{width:65px;height:25px;border-radius:3px;margin-right:16px}.block-title{padding-top:4px;font-size:12px;color:var(--color-text-primary);letter-spacing:0;text-transform:uppercase}.block-title.color-text{text-transform:none;max-width:65px;text-overflow:ellipsis;white-space:nowrap;cursor:text;user-select:text;overflow:hidden}.results-section{flex-shrink:0;border-bottom:1px solid var(--color-details-hairline);padding:var(--overview-default-padding) 0 var(--overview-default-padding) 0}.horizontally-padded{padding-left:var(--overview-default-padding);padding-right:var(--overview-default-padding)}.results-section h1{font-size:15px;font-weight:normal;padding:0;margin:0 0 20px;padding-left:calc(var(--overview-default-padding) + var(--overview-icon-padding));position:relative;height:26px;line-height:26px}.results-section h1::before{content:"";display:block;position:absolute;left:var(--overview-default-padding);top:0;width:26px;height:26px;background-image:var(--image-file-cssoverview_icons_2x);background-size:104px 26px}.results-section.horizontally-padded h1{padding-left:var(--overview-icon-padding)}.results-section.horizontally-padded h1::before{left:0}.results-section.summary h1{padding-left:0}.results-section.summary h1::before{display:none}.results-section.colors h1::before{background-position:0 0}.results-section.font-info h1::before{background-position:-26px 0}.results-section.unused-declarations h1::before{background-position:-52px 0}.results-section.media-queries h1::before{background-position:-78px 0}.results-section.colors h2{margin-top:20px;font-size:13px;font-weight:normal}.overview-completed-view .font-info ul,\n.overview-completed-view .media-queries ul,\n.overview-completed-view .unused-declarations ul{width:100%;list-style:none;margin:0;padding:0 var(--overview-default-padding)}.overview-completed-view .font-info ul li,\n.overview-completed-view .media-queries ul li,\n.overview-completed-view .unused-declarations ul li{display:grid;grid-template-columns:2fr 3fr;grid-gap:12px;margin-bottom:4px;align-items:center}.overview-completed-view .font-info button,\n.overview-completed-view .media-queries button,\n.overview-completed-view .unused-declarations button{border:none;padding:0;margin:0;display:flex;align-items:center;border-radius:2px;cursor:pointer;height:28px;background:none}.overview-completed-view .font-info button .details,\n.overview-completed-view .media-queries button .details,\n.overview-completed-view .unused-declarations button .details{min-width:100px;text-align:right;margin-right:8px;color:var(--color-primary-old);pointer-events:none}.overview-completed-view .font-info button .bar-container,\n.overview-completed-view .media-queries button .bar-container,\n.overview-completed-view .unused-declarations button .bar-container{flex:1;pointer-events:none}.overview-completed-view .font-info button .bar,\n.overview-completed-view .media-queries button .bar,\n.overview-completed-view .unused-declarations button .bar{height:8px;background:var(--color-primary-old);border-radius:2px;min-width:2px}.overview-completed-view .font-info button:hover .details,\n.overview-completed-view .font-info button:focus .details,\n.overview-completed-view .media-queries button:hover .details,\n.overview-completed-view .media-queries button:focus .details,\n.overview-completed-view .unused-declarations button:hover .details,\n.overview-completed-view .unused-declarations button:focus .details{color:var(--color-primary-variant)}.overview-completed-view .font-info button:hover .bar,\n.overview-completed-view .font-info button:focus .bar,\n.overview-completed-view .media-queries button:hover .bar,\n.overview-completed-view .media-queries button:focus .bar,\n.overview-completed-view .unused-declarations button:hover .bar,\n.overview-completed-view .unused-declarations button:focus .bar{background-color:var(--color-primary-variant);box-shadow:0 1px 2px var(--divider-line),0 0 0 2px var(--color-primary-variant);color:var(--color-background)}.overview-completed-view .font-info .font-metric{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));grid-gap:12px}.overview-completed-view .font-info ul{padding:0}.overview-completed-view .font-info ul li{grid-template-columns:1fr 4fr}.overview-completed-view .font-info h2{font-size:14px;font-weight:bold;margin:0 0 1em}.overview-completed-view .font-info h3{font-size:13px;font-weight:normal;font-style:italic;margin:0 0 0.5em}.overview-completed-view .font-info{padding-bottom:0}.overview-completed-view .font-family{padding:var(--overview-default-padding)}.overview-completed-view .font-family:nth-child(2n+1){background:var(--color-background)}.overview-completed-view .font-family:first-of-type{padding-top:0}.contrast-warning{display:flex;align-items:center;margin-top:2px}.contrast-warning .threshold-label{font-weight:normal;width:30px}.contrast-warning devtools-icon{margin-left:2px}.contrast-preview{padding:0 5px}.contrast-container-in-grid{display:flex;align-items:center}.contrast-container-in-grid > *{margin-right:5px;min-width:initial}.data .nodeId-column{align-items:center;display:flex;height:20px}.nodeId-column .monospace{overflow:hidden}.show-element{margin:0 0 0 8px;display:none;cursor:pointer;flex:none;--icon-show-element:var(--icon-default)}.show-element:focus,\n.show-element:hover{--icon-show-element:var(--icon-default-hover)}.nodeId-column:focus-within .show-element,\n.nodeId-column:hover .show-element{display:inline-block}.results-section.colors{forced-color-adjust:none}\n/*# sourceURL=cssOverviewCompletedView.css */\n');const A=new CSSStyleSheet;A.replaceSync(".overview-sidebar-panel{overflow:auto;display:flex;background:var(--color-background-elevation-1)}.overview-sidebar-panel-item{height:30px;padding-left:30px;display:flex;align-items:center;color:var(--color-text-primary);white-space:nowrap}.overview-sidebar-panel-container{min-width:fit-content}.overview-sidebar-panel-item:hover,\n.overview-sidebar-panel-item:focus{background:var(--color-background-highlight)}.overview-sidebar-panel-item.selected{background:var(--color-primary-old);color:var(--color-background)}.overview-toolbar{border-bottom:1px solid var(--color-details-hairline);flex:0 0 auto}.overview-sidebar-panel-item:focus-visible{outline-width:unset}@media (forced-colors: active){.overview-sidebar-panel-item.selected{forced-color-adjust:none;background:Highlight;color:HighlightText}.overview-sidebar-panel-item:hover{forced-color-adjust:none;background:Highlight;color:HighlightText}}\n/*# sourceURL=cssOverviewSidebarPanel.css */\n");const E={clearOverview:"Clear overview",cssOverviewPanelSidebar:"CSS Overview panel sidebar"},L=i.i18n.registerUIStrings("panels/css_overview/CSSOverviewSidebarPanel.ts",E),F=i.i18n.getLocalizedString.bind(void 0,L);class O extends(e.ObjectWrapper.eventMixin(s.Widget.VBox)){containerElement;static get ITEM_CLASS_NAME(){return"overview-sidebar-panel-item"}static get SELECTED(){return"selected"}constructor(){super(!0),this.contentElement.classList.add("overview-sidebar-panel"),this.contentElement.addEventListener("click",this.#a.bind(this)),this.contentElement.addEventListener("keydown",this.#l.bind(this)),this.containerElement=this.contentElement.createChild("div","overview-sidebar-panel-container"),s.ARIAUtils.setLabel(this.containerElement,F(E.cssOverviewPanelSidebar)),s.ARIAUtils.markAsTree(this.containerElement);const e=new s.Toolbar.ToolbarButton(F(E.clearOverview),"clear");e.addEventListener(s.Toolbar.ToolbarButton.Events.Click,this.#d,this);const t=this.containerElement.createChild("div","overview-toolbar");new s.Toolbar.Toolbar("",t).appendToolbarItem(e)}addItem(e,t){const i=this.containerElement.createChild("div",O.ITEM_CLASS_NAME);s.ARIAUtils.markAsTreeitem(i),i.textContent=e,i.dataset.id=t,i.tabIndex=0}#d(){this.dispatchEventToListeners("Reset")}#c(){this.containerElement.querySelectorAll(`.${O.ITEM_CLASS_NAME}`).forEach((e=>{e.classList.remove(O.SELECTED)}))}#a(e){const t=e.composedPath()[0];if(!t.classList.contains(O.ITEM_CLASS_NAME))return;const{id:i}=t.dataset;i&&(this.select(i),this.dispatchEventToListeners("ItemSelected",{id:i,isMouseEvent:!0}))}#l(e){if("Enter"!==e.key)return;const t=e.composedPath()[0];if(!t.classList.contains(O.ITEM_CLASS_NAME))return;const{id:i}=t.dataset;i&&(this.select(i),this.dispatchEventToListeners("ItemSelected",{id:i,isMouseEvent:!1}),e.consume(!0))}select(e){const t=this.containerElement.querySelector(`[data-id=${CSS.escape(e)}]`);t&&(t.classList.contains(O.SELECTED)||(this.#c(),t.classList.add(O.SELECTED)))}wasShown(){super.wasShown(),this.registerCSSFiles([A])}}var R=Object.freeze({__proto__:null,CSSOverviewSidebarPanel:O});const P={overviewSummary:"Overview summary",colors:"Colors",fontInfo:"Font info",unusedDeclarations:"Unused declarations",mediaQueries:"Media queries",elements:"Elements",externalStylesheets:"External stylesheets",inlineStyleElements:"Inline style elements",styleRules:"Style rules",typeSelectors:"Type selectors",idSelectors:"ID selectors",classSelectors:"Class selectors",universalSelectors:"Universal selectors",attributeSelectors:"Attribute selectors",nonsimpleSelectors:"Non-simple selectors",backgroundColorsS:"Background colors: {PH1}",textColorsS:"Text colors: {PH1}",fillColorsS:"Fill colors: {PH1}",borderColorsS:"Border colors: {PH1}",thereAreNoFonts:"There are no fonts.",thereAreNoUnusedDeclarations:"There are no unused declarations.",thereAreNoMediaQueries:"There are no media queries.",contrastIssues:"Contrast issues",nOccurrences:"{n, plural, =1 {# occurrence} other {# occurrences}}",contrastIssuesS:"Contrast issues: {PH1}",textColorSOverSBackgroundResults:"Text color {PH1} over {PH2} background results in low contrast for {PH3} elements",aa:"AA",aaa:"AAA",apca:"APCA",element:"Element",declaration:"Declaration",source:"Source",contrastRatio:"Contrast ratio",cssOverviewElements:"CSS Overview Elements",showElement:"Show element"},_=i.i18n.registerUIStrings("panels/css_overview/CSSOverviewCompletedView.ts",P),V=i.i18n.getLocalizedString.bind(void 0,_);function N(e){let{h:t,s:i,l:o}=e.as("hsl");return t=Math.round(360*t),i=Math.round(100*i),o=Math.round(100*o),o=Math.max(0,o-15),`1px solid hsl(${t}deg ${i}% ${o}%)`}class D extends s.Panel.PanelWithSidebar{#s;#h;#u;#v;#p;#m;#g;#w;#f;#b;#S;#C;constructor(e){super("css_overview_completed_view"),this.#s=e,this.#h=new Intl.NumberFormat("en-US"),this.#u=new s.SplitWidget.SplitWidget(!0,!0),this.#v=new s.Widget.VBox,this.#p=new z,this.#p.addEventListener("TabClosed",(e=>{0===e.data&&this.#u.setSidebarMinimized(!0)})),this.#u.setMainWidget(this.#v),this.#u.setSidebarWidget(this.#p),this.#u.setVertical(!1),this.#u.setSecondIsSidebar(!0),this.#u.setSidebarMinimized(!0),this.#m=new O,this.#m.setMinimumSize(100,25),this.splitWidget().setSidebarWidget(this.#m),this.splitWidget().setMainWidget(this.#u),this.#f=new c.Linkifier.Linkifier(20,!0),this.#b=new Map,this.#m.addItem(V(P.overviewSummary),"summary"),this.#m.addItem(V(P.colors),"colors"),this.#m.addItem(V(P.fontInfo),"font-info"),this.#m.addItem(V(P.unusedDeclarations),"unused-declarations"),this.#m.addItem(V(P.mediaQueries),"media-queries"),this.#m.select("summary"),this.#m.addEventListener("ItemSelected",this.#y,this),this.#m.addEventListener("Reset",this.#x,this),this.#s.addEventListener("Reset",this.#d,this),this.#s.addEventListener("PopulateNodes",this.#k,this),this.#v.element.addEventListener("click",this.#I.bind(this)),this.#S=null}wasShown(){super.wasShown(),this.#u.registerCSSFiles([$]),this.registerCSSFiles([$])}initializeModels(e){const i=e.model(t.CSSModel.CSSModel),o=e.model(t.DOMModel.DOMModel);if(!i||!o)throw new Error("Target must provide CSS and DOM models");this.#g=i,this.#w=o}#y(e){const{data:t}=e,i=this.#C.$(t.id);if(i&&(i.scrollIntoView(),!t.isMouseEvent)){i.querySelector('button, [tabindex="0"]')?.focus()}}#x(){this.#s.dispatchEventToListeners("Reset")}#d(){this.#v.element.removeChildren(),this.#u.setSidebarMinimized(!0),this.#p.closeTabs(),this.#b=new Map,D.pushedNodes.clear(),this.#m.select("summary")}#I(e){if(!e.target)return;const t=e.target.dataset,i=t.type;if(!i||!this.#S)return;let o;switch(i){case"contrast":{const e=t.section,n=t.key;if(!n)return;o={type:i,key:n,nodes:this.#S.textColorContrastIssues.get(n)||[],section:e};break}case"color":{const e=t.color,n=t.section;if(!e)return;let s;switch(n){case"text":s=this.#S.textColors.get(e);break;case"background":s=this.#S.backgroundColors.get(e);break;case"fill":s=this.#S.fillColors.get(e);break;case"border":s=this.#S.borderColors.get(e)}if(!s)return;s=Array.from(s).map((e=>({nodeId:e}))),o={type:i,color:e,nodes:s,section:n};break}case"unused-declarations":{const e=t.declaration;if(!e)return;const n=this.#S.unusedDeclarations.get(e);if(!n)return;o={type:i,declaration:e,nodes:n};break}case"media-queries":{const e=t.text;if(!e)return;const n=this.#S.mediaQueries.get(e);if(!n)return;o={type:i,text:e,nodes:n};break}case"font-info":{const e=t.value;if(!t.path)return;const[n,s]=t.path.split("/");if(!e)return;const r=this.#S.fontInfo.get(n);if(!r)return;const a=r.get(s);if(!a)return;const l=a.get(e);if(!l)return;o={type:i,name:`${e} (${n}, ${s})`,nodes:l.map((e=>({nodeId:e})))};break}default:return}e.consume(),this.#s.dispatchEventToListeners("PopulateNodes",{payload:o}),this.#u.setSidebarMinimized(!1)}async#r(e){if(!e||!("backgroundColors"in e)||!("textColors"in e))return;this.#S=e;const{elementCount:t,backgroundColors:i,textColors:o,textColorContrastIssues:n,fillColors:r,borderColors:a,globalStyleStats:l,mediaQueries:d,unusedDeclarations:c,fontInfo:h}=this.#S,u=this.#T(i),v=this.#T(o),p=this.#T(r),m=this.#T(a);this.#C=s.Fragment.Fragment.build`
+    <div class="vbox overview-completed-view">
+      <div $="summary" class="results-section horizontally-padded summary">
+        <h1>${V(P.overviewSummary)}</h1>
+
+        <ul>
+          <li>
+            <div class="label">${V(P.elements)}</div>
+            <div class="value">${this.#h.format(t)}</div>
+          </li>
+          <li>
+            <div class="label">${V(P.externalStylesheets)}</div>
+            <div class="value">${this.#h.format(l.externalSheets)}</div>
+          </li>
+          <li>
+            <div class="label">${V(P.inlineStyleElements)}</div>
+            <div class="value">${this.#h.format(l.inlineStyles)}</div>
+          </li>
+          <li>
+            <div class="label">${V(P.styleRules)}</div>
+            <div class="value">${this.#h.format(l.styleRules)}</div>
+          </li>
+          <li>
+            <div class="label">${V(P.mediaQueries)}</div>
+            <div class="value">${this.#h.format(d.size)}</div>
+          </li>
+          <li>
+            <div class="label">${V(P.typeSelectors)}</div>
+            <div class="value">${this.#h.format(l.stats.type)}</div>
+          </li>
+          <li>
+            <div class="label">${V(P.idSelectors)}</div>
+            <div class="value">${this.#h.format(l.stats.id)}</div>
+          </li>
+          <li>
+            <div class="label">${V(P.classSelectors)}</div>
+            <div class="value">${this.#h.format(l.stats.class)}</div>
+          </li>
+          <li>
+            <div class="label">${V(P.universalSelectors)}</div>
+            <div class="value">${this.#h.format(l.stats.universal)}</div>
+          </li>
+          <li>
+            <div class="label">${V(P.attributeSelectors)}</div>
+            <div class="value">${this.#h.format(l.stats.attribute)}</div>
+          </li>
+          <li>
+            <div class="label">${V(P.nonsimpleSelectors)}</div>
+            <div class="value">${this.#h.format(l.stats.nonSimple)}</div>
+          </li>
+        </ul>
+      </div>
+
+      <div $="colors" class="results-section horizontally-padded colors">
+        <h1>${V(P.colors)}</h1>
+        <h2>${V(P.backgroundColorsS,{PH1:u.length})}</h2>
+        <ul>
+          ${u.map(this.#M.bind(this,"background"))}
+        </ul>
+
+        <h2>${V(P.textColorsS,{PH1:v.length})}</h2>
+        <ul>
+          ${v.map(this.#M.bind(this,"text"))}
+        </ul>
+
+        ${n.size>0?this.#$(n):""}
+
+        <h2>${V(P.fillColorsS,{PH1:p.length})}</h2>
+        <ul>
+          ${p.map(this.#M.bind(this,"fill"))}
+        </ul>
+
+        <h2>${V(P.borderColorsS,{PH1:m.length})}</h2>
+        <ul>
+          ${m.map(this.#M.bind(this,"border"))}
+        </ul>
+      </div>
+
+      <div $="font-info" class="results-section font-info">
+        <h1>${V(P.fontInfo)}</h1>
+        ${h.size>0?this.#A(h):s.Fragment.Fragment.build`<div>${V(P.thereAreNoFonts)}</div>`}
+      </div>
+
+      <div $="unused-declarations" class="results-section unused-declarations">
+        <h1>${V(P.unusedDeclarations)}</h1>
+        ${c.size>0?this.#E(c,"unused-declarations","declaration"):s.Fragment.Fragment.build`<div class="horizontally-padded">${V(P.thereAreNoUnusedDeclarations)}</div>`}
+      </div>
+
+      <div $="media-queries" class="results-section media-queries">
+        <h1>${V(P.mediaQueries)}</h1>
+        ${d.size>0?this.#E(d,"media-queries","text"):s.Fragment.Fragment.build`<div class="horizontally-padded">${V(P.thereAreNoMediaQueries)}</div>`}
+      </div>
+    </div>`,this.#v.element.appendChild(this.#C.element())}#k(e){const{payload:t}=e.data;let i="",o="";switch(t.type){case"contrast":{const{section:e,key:n}=t;i=`${e}-${n}`,o=V(P.contrastIssues);break}case"color":{const{section:e,color:n}=t;i=`${e}-${n}`,o=`${n.toUpperCase()} (${e})`;break}case"unused-declarations":{const{declaration:e}=t;i=`${e}`,o=`${e}`;break}case"media-queries":{const{text:e}=t;i=`${e}`,o=`${e}`;break}case"font-info":{const{name:e}=t;i=`${e}`,o=`${e}`;break}}let n=this.#b.get(i);if(!n){if(!this.#w||!this.#g)throw new Error("Unable to initialize CSS Overview, missing models");n=new W(this.#s,this.#w,this.#g,this.#f),n.populateNodes(t.nodes),this.#b.set(i,n)}this.#p.appendTab(i,o,n,!0)}#A(e){const t=Array.from(e.entries());return s.Fragment.Fragment.build`
+  ${t.map((([e,t])=>s.Fragment.Fragment.build`<section class="font-family"><h2>${e}</h2> ${this.#L(e,t)}</section>`))}
+  `}#L(e,t){const i=Array.from(t.entries());return s.Fragment.Fragment.build`
+  <div class="font-metric">
+  ${i.map((([t,i])=>{const o=`${e}/${t}`;return s.Fragment.Fragment.build`
+  <div>
+  <h3>${t}</h3>
+  ${this.#E(i,"font-info","value",o)}
+  </div>`}))}
+  </div>`}#E(e,t,i,o=""){const n=Array.from(e.entries()).sort(((e,t)=>{const i=e[1];return t[1].length-i.length})),r=n.reduce(((e,t)=>e+t[1].length),0);return s.Fragment.Fragment.build`<ul>
+    ${n.map((([e,n])=>{const a=100*n.length/r,l=V(P.nOccurrences,{n:n.length});return s.Fragment.Fragment.build`<li>
+        <div class="title">${e}</div>
+        <button data-type="${t}" data-path="${o}" data-${i}="${e}">
+          <div class="details">${l}</div>
+          <div class="bar-container">
+            <div class="bar" style="width: ${a}%;"></div>
+          </div>
+        </button>
+      </li>`}))}
+    </ul>`}#$(e){return s.Fragment.Fragment.build`
+  <h2>${V(P.contrastIssuesS,{PH1:e.size})}</h2>
+  <ul>
+  ${[...e.entries()].map((([e,t])=>this.#F(e,t)))}
+  </ul>
+  `}#F(e,t){console.assert(t.length>0);let i=t[0];for(const e of t)Math.abs(e.contrastRatio)<Math.abs(i.contrastRatio)&&(i=e);const n=i.textColor.asString("hexa"),r=i.backgroundColor.asString("hexa"),a=o.Runtime.experiments.isEnabled("APCA"),l=V(P.textColorSOverSBackgroundResults,{PH1:n,PH2:r,PH3:t.length}),d=s.Fragment.Fragment.build`<li>
+      <button
+        title="${l}" aria-label="${l}"
+        data-type="contrast" data-key="${e}" data-section="contrast" class="block" $="color">
+        Text
+      </button>
+      <div class="block-title">
+        <div class="contrast-warning hidden" $="aa"><span class="threshold-label">${V(P.aa)}</span></div>
+        <div class="contrast-warning hidden" $="aaa"><span class="threshold-label">${V(P.aaa)}</span></div>
+        <div class="contrast-warning hidden" $="apca"><span class="threshold-label">${V(P.apca)}</span></div>
+      </div>
+    </li>`;if(a){const e=d.$("apca");i.thresholdsViolated.apca?e.appendChild(B()):e.appendChild(H()),e.classList.remove("hidden")}else{const e=d.$("aa");i.thresholdsViolated.aa?e.appendChild(B()):e.appendChild(H());const t=d.$("aaa");i.thresholdsViolated.aaa?t.appendChild(B()):t.appendChild(H()),e.classList.remove("hidden"),t.classList.remove("hidden")}const c=d.$("color");return c.style.backgroundColor=r,c.style.color=n,c.style.border=N(i.backgroundColor.asLegacyColor()),d}#M(t,i){const o=s.Fragment.Fragment.build`<li>
+      <button title=${i} data-type="color" data-color="${i}"
+        data-section="${t}" class="block" $="color"></button>
+      <div class="block-title color-text">${i}</div>
+    </li>`,n=o.$("color");n.style.backgroundColor=i;const r=e.Color.parse(i)?.asLegacyColor();if(r)return n.style.border=N(r),o}#T(t){return Array.from(t.keys()).sort(((t,i)=>{const o=e.Color.parse(t)?.asLegacyColor(),n=e.Color.parse(i)?.asLegacyColor();return o&&n?e.ColorUtils.luminance(n.rgba())-e.ColorUtils.luminance(o.rgba()):0}))}setOverviewData(e){this.#r(e)}static pushedNodes=new Set}class z extends(e.ObjectWrapper.eventMixin(s.Widget.VBox)){#O;constructor(){super(),this.#O=new s.TabbedPane.TabbedPane,this.#O.show(this.element),this.#O.addEventListener(s.TabbedPane.Events.TabClosed,(()=>{this.dispatchEventToListeners("TabClosed",this.#O.tabIds().length)}))}appendTab(e,t,i,o){this.#O.hasTab(e)||this.#O.appendTab(e,t,i,void 0,void 0,o),this.#O.selectTab(e)}closeTabs(){this.#O.closeTabs(this.#O.tabIds())}}class W extends s.Widget.Widget{#s;#w;#g;#f;#R;#P;constructor(e,t,i,o){super(),this.#s=e,this.#w=t,this.#g=i,this.#f=o,this.#R=[{id:"nodeId",title:V(P.element),sortable:!0,weight:50,titleDOMFragment:void 0,sort:void 0,align:void 0,width:void 0,fixedWidth:void 0,editable:void 0,nonSelectable:void 0,longText:void 0,disclosure:void 0,allowInSortByEvenWhenHidden:void 0,dataType:void 0,defaultWeight:void 0},{id:"declaration",title:V(P.declaration),sortable:!0,weight:50,titleDOMFragment:void 0,sort:void 0,align:void 0,width:void 0,fixedWidth:void 0,editable:void 0,nonSelectable:void 0,longText:void 0,disclosure:void 0,allowInSortByEvenWhenHidden:void 0,dataType:void 0,defaultWeight:void 0},{id:"sourceURL",title:V(P.source),sortable:!1,weight:100,titleDOMFragment:void 0,sort:void 0,align:void 0,width:void 0,fixedWidth:void 0,editable:void 0,nonSelectable:void 0,longText:void 0,disclosure:void 0,allowInSortByEvenWhenHidden:void 0,dataType:void 0,defaultWeight:void 0},{id:"contrastRatio",title:V(P.contrastRatio),sortable:!0,weight:25,titleDOMFragment:void 0,sort:void 0,align:void 0,width:"150px",fixedWidth:!0,editable:void 0,nonSelectable:void 0,longText:void 0,disclosure:void 0,allowInSortByEvenWhenHidden:void 0,dataType:void 0,defaultWeight:void 0}],this.#P=new d.SortableDataGrid.SortableDataGrid({displayName:V(P.cssOverviewElements),columns:this.#R,editCallback:void 0,deleteCallback:void 0,refreshCallback:void 0}),this.#P.element.classList.add("element-grid"),this.#P.element.addEventListener("mouseover",this.#_.bind(this)),this.#P.setStriped(!0),this.#P.addEventListener(d.DataGrid.Events.SortingChanged,this.#V.bind(this)),this.#P.asWidget().show(this.element)}#V(){const e=this.#P.sortColumnId();if(!e)return;const t=d.SortableDataGrid.SortableDataGrid.StringComparator.bind(null,e);this.#P.sortNodes(t,!this.#P.isSortOrderAscending())}#_(e){const t=e.composedPath().find((e=>e.dataset&&e.dataset.backendNodeId));if(!t)return;const i=Number(t.dataset.backendNodeId);this.#s.dispatchEventToListeners("RequestNodeHighlight",i)}async populateNodes(e){if(this.#P.rootNode().removeChildren(),!e.length)return;const[t]=e,i=new Set;let o;if("nodeId"in t&&t.nodeId&&i.add("nodeId"),"declaration"in t&&t.declaration&&i.add("declaration"),"sourceURL"in t&&t.sourceURL&&i.add("sourceURL"),"contrastRatio"in t&&t.contrastRatio&&i.add("contrastRatio"),"nodeId"in t&&i.has("nodeId")){const t=e.reduce(((e,t)=>{const i=t.nodeId;return D.pushedNodes.has(i)?e:(D.pushedNodes.add(i),e.add(i))}),new Set);o=await this.#w.pushNodesByBackendIdsToFrontend(t)}for(const t of e){let e;if("nodeId"in t&&i.has("nodeId")){if(!o)continue;if(e=o.get(t.nodeId),!e)continue}const n=new U(t,e,this.#f,this.#g);n.selectable=!1,this.#P.insertChild(n)}this.#P.setColumnsVisiblity(i),this.#P.renderInline(),this.#P.wasShown()}}class U extends d.SortableDataGrid.SortableDataGridNode{#f;#g;#N;constructor(e,t,i,o){super(e),this.#N=t,this.#f=i,this.#g=o}createCell(t){const i=this.#N;if("nodeId"===t){const o=this.createTD(t);if(o.textContent="...",!i)throw new Error("Node entry is missing a related frontend node.");return e.Linkifier.Linkifier.linkify(i).then((e=>{o.textContent="",e.dataset.backendNodeId=i.backendNodeId().toString(),o.appendChild(e);const t=new l.Icon.Icon;t.data={iconName:"select-element",color:"var(--icon-show-element)",width:"16px"},t.classList.add("show-element"),s.Tooltip.Tooltip.install(t,V(P.showElement)),t.tabIndex=0,t.onclick=()=>i.scrollIntoView(),o.appendChild(t)})),o}if("sourceURL"===t){const e=this.createTD(t);if(this.data.range){const t=this.#D(this.#g,this.#f,this.data.styleSheetId,a.TextRange.TextRange.fromObject(this.data.range));t&&""!==t.textContent?e.appendChild(t):e.textContent="(unable to link)"}else e.textContent="(unable to link to inlined styles)";return e}if("contrastRatio"===t){const e=this.createTD(t),i=o.Runtime.experiments.isEnabled("APCA"),n=r.NumberUtilities.floor(this.data.contrastRatio,2),a=i?n+"%":n,l=N(this.data.backgroundColor),d=this.data.textColor.asString(),c=this.data.backgroundColor.asString(),h=s.Fragment.Fragment.build`
+        <div class="contrast-container-in-grid" $="container">
+          <span class="contrast-preview" style="border: ${l};
+          color: ${d};
+          background-color: ${c};">Aa</span>
+          <span>${a}</span>
+        </div>
+      `,u=h.$("container");return i?(u.append(s.Fragment.Fragment.build`<span>${V(P.apca)}</span>`.element()),this.data.thresholdsViolated.apca?u.appendChild(B()):u.appendChild(H())):(u.append(s.Fragment.Fragment.build`<span>${V(P.aa)}</span>`.element()),this.data.thresholdsViolated.aa?u.appendChild(B()):u.appendChild(H()),u.append(s.Fragment.Fragment.build`<span>${V(P.aaa)}</span>`.element()),this.data.thresholdsViolated.aaa?u.appendChild(B()):u.appendChild(H())),e.appendChild(h.element()),e}return super.createCell(t)}#D(e,i,o,n){const s=e.styleSheetHeaderForId(o);if(!s)return;const r=s.lineNumberInSource(n.startLine),a=s.columnNumberInSource(n.startLine,n.startColumn),l=new t.CSSModel.CSSLocation(s,r,a);return i.linkifyCSSLocation(l)}}function B(){const e=new l.Icon.Icon;return e.data={iconName:"clear",color:"var(--icon-error)",width:"14px",height:"14px"},e}function H(){const e=new l.Icon.Icon;return e.data={iconName:"checkmark",color:"var(--icon-checkmark-green)",width:"14px",height:"14px"},e}var G=Object.freeze({__proto__:null,CSSOverviewCompletedView:D,DetailsView:z,ElementDetailsView:W,ElementNode:U});const j=new CSSStyleSheet;j.replaceSync(".css-overview-panel{overflow:hidden}devtools-css-overview-start-view{overflow:auto}\n/*# sourceURL=cssOverview.css */\n");class q extends s.Panel.Panel{#s;#z;#W;#U;#B;#H;#G;#j;#q;#Q;#K;#J;#X;#Y;#Z;constructor(e){super("css_overview"),this.element.classList.add("css-overview-panel"),this.#s=e,this.#z=new h.CSSOverviewStartView.CSSOverviewStartView,this.#z.addEventListener("overviewstartrequested",(()=>this.#s.dispatchEventToListeners("RequestOverviewStart"))),this.#W=new T(this.#s),this.#U=new D(this.#s),t.TargetManager.TargetManager.instance().observeTargets(this),this.#s.addEventListener("RequestOverviewStart",(e=>{u.userMetrics.actionTaken(u.UserMetrics.Action.CaptureCssOverviewClicked),this.#ee()}),this),this.#s.addEventListener("OverviewCompleted",this.#te,this),this.#s.addEventListener("Reset",this.#d,this),this.#s.addEventListener("RequestNodeHighlight",this.#ie,this),this.#d()}targetAdded(e){if(e!==t.TargetManager.TargetManager.instance().primaryPageTarget())return;this.#U.initializeModels(e);const i=e.model(S);this.#B=i}targetRemoved(){}#oe(){if(!this.#B)throw new Error("Did not retrieve model information yet.");return this.#B}#d(){this.#H=new Map,this.#G=new Map,this.#j=new Map,this.#q=new Map,this.#Q=new Map,this.#K=new Map,this.#J=new Map,this.#X=0,this.#Y={styleRules:0,inlineStyles:0,externalSheets:0,stats:{type:0,class:0,id:0,universal:0,attribute:0,nonSimple:0}},this.#Z=new Map,this.#ne()}#ie(e){this.#oe().highlightNode(e.data)}#ne(){this.#W.hideWidget(),this.#U.hideWidget(),this.contentElement.append(this.#z),this.#z.show()}#se(){this.#z.hide(),this.#U.hideWidget(),this.#W.show(this.contentElement)}#re(){this.#z.hide(),this.#W.hideWidget(),this.#U.show(this.contentElement),this.#U.setOverviewData({backgroundColors:this.#H,textColors:this.#G,textColorContrastIssues:this.#Z,fillColors:this.#j,borderColors:this.#q,globalStyleStats:this.#Y,fontInfo:this.#Q,elementCount:this.#X,mediaQueries:this.#K,unusedDeclarations:this.#J})}async#ee(){this.#se();const e=this.#oe(),[t,{elementCount:i,backgroundColors:o,textColors:n,textColorContrastIssues:s,fillColors:r,borderColors:a,fontInfo:l,unusedDeclarations:d},c]=await Promise.all([e.getGlobalStylesheetStats(),e.getNodeStyleStats(),e.getMediaQueries()]);i&&(this.#X=i),t&&(this.#Y=t),c&&(this.#K=c),o&&(this.#H=o),n&&(this.#G=n),s&&(this.#Z=s),r&&(this.#j=r),a&&(this.#q=a),l&&(this.#Q=l),d&&(this.#J=d),this.#s.dispatchEventToListeners("OverviewCompleted")}#te(){this.#re()}wasShown(){super.wasShown(),this.registerCSSFiles([j])}}var Q=Object.freeze({__proto__:null,CSSOverviewPanel:q});export{G as CSSOverviewCompletedView,p as CSSOverviewController,C as CSSOverviewModel,Q as CSSOverviewPanel,M as CSSOverviewProcessingView,R as CSSOverviewSidebarPanel,b as CSSOverviewUnusedDeclarations};

package/dist/third-party/front_end/panels/developer_resources/developer_resources-meta.js

@@ -0,0 +1 @@
+import*as e from"../../core/i18n/i18n.js";import*as r from"../../core/root/root.js";import*as o from"../../ui/legacy/legacy.js";const s={developerResources:"Developer Resources",showDeveloperResources:"Show Developer Resources"},i=e.i18n.registerUIStrings("panels/developer_resources/developer_resources-meta.ts",s),t=e.i18n.getLazilyComputedLocalizedString.bind(void 0,i);let n;o.ViewManager.registerViewExtension({location:"drawer-view",id:"resource-loading-pane",title:t(s.developerResources),commandPrompt:t(s.showDeveloperResources),order:100,persistence:"closeable",experiment:r.Runtime.ExperimentName.DEVELOPER_RESOURCES_VIEW,loadView:async()=>new((await async function(){return n||(n=await import("./developer_resources.js")),n}()).DeveloperResourcesView.DeveloperResourcesView)});

package/dist/third-party/front_end/panels/developer_resources/developer_resources.js

@@ -0,0 +1 @@
+import*as e from"../../core/i18n/i18n.js";import*as t from"../../core/platform/platform.js";import*as i from"../../core/sdk/sdk.js";import*as r from"../../ui/legacy/legacy.js";import*as s from"../../core/host/host.js";import*as o from"../../models/text_utils/text_utils.js";import*as l from"../../ui/legacy/components/data_grid/data_grid.js";const a=new CSSStyleSheet;a.replaceSync(".data-grid{border:none}.data-grid td .url-outer{width:100%;display:inline-flex;justify-content:flex-start}.data-grid td .url-outer .filter-highlight{font-weight:bold}.data-grid td .url-prefix{overflow-x:hidden;text-overflow:ellipsis}.data-grid td .url-suffix{flex:none}.data-grid td.error-message .filter-highlight{font-weight:bold}\n/*# sourceURL=developerResourcesListView.css */\n");const n={status:"Status",url:"URL",initiator:"Initiator",totalBytes:"Total Bytes",error:"Error",developerResources:"Developer Resources",copyUrl:"Copy URL",copyInitiatorUrl:"Copy initiator URL",pending:"pending",success:"success",failure:"failure",sBytes:"{n, plural, =1 {# byte} other {# bytes}}"},d=e.i18n.registerUIStrings("panels/developer_resources/DeveloperResourcesListView.ts",n),h=e.i18n.getLocalizedString.bind(void 0,d);class c extends r.Widget.VBox{nodeForItem;isVisibleFilter;highlightRegExp;dataGrid;constructor(e){super(!0),this.nodeForItem=new Map,this.isVisibleFilter=e,this.highlightRegExp=null;const t=[{id:"status",title:h(n.status),width:"60px",fixedWidth:!0,sortable:!0},{id:"url",title:h(n.url),width:"250px",fixedWidth:!1,sortable:!0},{id:"initiator",title:h(n.initiator),width:"80px",fixedWidth:!1,sortable:!0},{id:"size",title:h(n.totalBytes),width:"80px",fixedWidth:!0,sortable:!0,align:l.DataGrid.Align.Right},{id:"errorMessage",title:h(n.error),width:"200px",fixedWidth:!1,sortable:!0}];this.dataGrid=new l.SortableDataGrid.SortableDataGrid({displayName:h(n.developerResources),columns:t,editCallback:void 0,refreshCallback:void 0,deleteCallback:void 0}),this.dataGrid.setResizeMethod(l.DataGrid.ResizeMethod.Last),this.dataGrid.element.classList.add("flex-auto"),this.dataGrid.addEventListener(l.DataGrid.Events.SortingChanged,this.sortingChanged,this),this.dataGrid.setRowContextMenuCallback(this.populateContextMenu.bind(this));const i=this.dataGrid.asWidget();i.show(this.contentElement),this.setDefaultFocusedChild(i)}populateContextMenu(e,t){const i=t.item;e.clipboardSection().appendItem(h(n.copyUrl),(()=>{s.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(i.url)})),i.initiator.initiatorUrl&&e.clipboardSection().appendItem(h(n.copyInitiatorUrl),(()=>{s.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(i.initiator.initiatorUrl)}))}update(e){let t=!1;const i=this.dataGrid.rootNode();for(const r of e){let e=this.nodeForItem.get(r);e?this.isVisibleFilter(e.item)&&(t=e.refreshIfNeeded()||t):(e=new u(r),this.nodeForItem.set(r,e),this.isVisibleFilter(e.item)&&(i.appendChild(e),t=!0))}t&&this.sortingChanged()}reset(){this.nodeForItem.clear(),this.dataGrid.rootNode().removeChildren()}updateFilterAndHighlight(e){this.highlightRegExp=e;let t=!1;for(const e of this.nodeForItem.values()){const i=this.isVisibleFilter(e.item),r=Boolean(e.parent);i&&e.setHighlight(this.highlightRegExp),i!==r&&(t=!0,i?this.dataGrid.rootNode().appendChild(e):e.remove())}t&&this.sortingChanged()}sortingChanged(){const e=this.dataGrid.sortColumnId();if(!e)return;const t=u.sortFunctionForColumn(e);t&&this.dataGrid.sortNodes(t,!this.dataGrid.isSortOrderAscending())}wasShown(){super.wasShown(),this.registerCSSFiles([a])}}class u extends l.SortableDataGrid.SortableDataGridNode{item;highlightRegExp;constructor(e){super(),this.item=e,this.highlightRegExp=null}setHighlight(e){this.highlightRegExp!==e&&(this.highlightRegExp=e,this.refresh())}refreshIfNeeded(){return this.refresh(),!0}createCell(e){const s=this.createTD(e);switch(e){case"url":{r.Tooltip.Tooltip.install(s,this.item.url);const t=s.createChild("div","url-outer"),i=t.createChild("div","url-prefix"),o=t.createChild("div","url-suffix"),l=/^(.*)(\/[^/]*)$/.exec(this.item.url);i.textContent=l?l[1]:this.item.url,o.textContent=l?l[2]:"",this.highlightRegExp&&this.highlight(t,this.item.url),this.setCellAccessibleName(this.item.url,s,e);break}case"initiator":{const t=this.item.initiator.initiatorUrl||"";s.textContent=t,r.Tooltip.Tooltip.install(s,t),this.setCellAccessibleName(t,s,e),s.onmouseenter=()=>{const e=this.item.initiator.frameId,t=e?i.FrameManager.FrameManager.instance().getFrame(e):null;t&&t.highlight()},s.onmouseleave=()=>i.OverlayModel.OverlayModel.hideDOMNodeHighlight();break}case"status":null===this.item.success?s.textContent=h(n.pending):s.textContent=this.item.success?h(n.success):h(n.failure);break;case"size":{const i=this.item.size;if(null!==i){s.createChild("span").textContent=t.NumberUtilities.withThousandsSeparator(i);const r=h(n.sBytes,{n:i});this.setCellAccessibleName(r,s,e)}break}case"errorMessage":s.classList.add("error-message"),this.item.errorMessage&&(s.textContent=this.item.errorMessage,this.highlightRegExp&&this.highlight(s,this.item.errorMessage))}return s}highlight(e,t){if(!this.highlightRegExp)return;const i=this.highlightRegExp.exec(t);if(!i||!i.length)return;const s=new o.TextRange.SourceRange(i.index,i[0].length);r.UIUtils.highlightRangesWithStyleClass(e,[s],"filter-highlight")}static sortFunctionForColumn(e){const t=e=>null===e?-1:Number(e);switch(e){case"url":return(e,t)=>e.item.url.localeCompare(t.item.url);case"status":return(e,i)=>t(e.item.success)-t(i.item.success);case"size":return(e,i)=>t(e.item.size)-t(i.item.size);case"initiator":return(e,t)=>(e.item.initiator.initiatorUrl||"").localeCompare(t.item.initiator.initiatorUrl||"");case"errorMessage":return(e,t)=>(e.item.errorMessage||"").localeCompare(t.item.errorMessage||"");default:return console.assert(!1,"Unknown sort field: "+e),null}}}const g=new CSSStyleSheet;g.replaceSync(":host{overflow:hidden}.developer-resource-view-toolbar-container{display:flex;border-bottom:1px solid var(--color-details-hairline);flex:0 0 auto}.developer-resource-view-toolbar{display:inline-block;width:100%}.developer-resource-view-toolbar-summary{background-color:var(--color-background-elevation-2);border-top:1px solid var(--color-details-hairline);padding-left:5px;flex:0 0 19px;display:flex;padding-right:5px}.developer-resource-view-toolbar-summary .developer-resource-view-message{padding-top:2px;padding-left:1ex;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.developer-resource-view-results{overflow-y:auto;display:flex;flex:auto}\n/*# sourceURL=developerResourcesView.css */\n");const p={enterTextToSearchTheUrlAndError:"Enter text to search the URL and Error columns",loadHttpsDeveloperResources:"Load `HTTP(S)` developer resources through the website you inspect, not through DevTools",enableLoadingThroughTarget:"Load through website",resourcesCurrentlyLoading:"{PH1} resources, {PH2} currently loading",resources:"{n, plural, =1 {# resource} other {# resources}}"},m=e.i18n.registerUIStrings("panels/developer_resources/DeveloperResourcesView.ts",p),x=e.i18n.getLocalizedString.bind(void 0,m);class v extends r.ThrottledWidget.ThrottledWidget{textFilterRegExp;filterInput;coverageResultsElement;listView;statusToolbarElement;statusMessageElement;loader;constructor(){super(!0);const e=this.contentElement.createChild("div","developer-resource-view-toolbar-container"),t=new r.Toolbar.Toolbar("developer-resource-view-toolbar",e);this.textFilterRegExp=null;this.filterInput=new r.Toolbar.ToolbarInput(x(p.enterTextToSearchTheUrlAndError),"",1),this.filterInput.addEventListener(r.Toolbar.ToolbarInput.Event.TextChanged,this.onFilterChanged,this),t.appendToolbarItem(this.filterInput);const s=i.PageResourceLoader.getLoadThroughTargetSetting(),o=new r.Toolbar.ToolbarSettingCheckbox(s,x(p.loadHttpsDeveloperResources),x(p.enableLoadingThroughTarget));t.appendToolbarItem(o),this.coverageResultsElement=this.contentElement.createChild("div","developer-resource-view-results"),this.listView=new c(this.isVisible.bind(this)),this.listView.show(this.coverageResultsElement),this.statusToolbarElement=this.contentElement.createChild("div","developer-resource-view-toolbar-summary"),this.statusMessageElement=this.statusToolbarElement.createChild("div","developer-resource-view-message"),this.loader=i.PageResourceLoader.PageResourceLoader.instance(),this.loader.addEventListener(i.PageResourceLoader.Events.Update,this.update,this)}async doUpdate(){this.listView.reset(),this.listView.update(this.loader.getResourcesLoaded().values()),this.updateStats()}updateStats(){const{loading:e,resources:t}=this.loader.getNumberOfResources();this.statusMessageElement.textContent=e>0?x(p.resourcesCurrentlyLoading,{PH1:t,PH2:e}):x(p.resources,{n:t})}isVisible(e){return!this.textFilterRegExp||this.textFilterRegExp.test(e.url)||this.textFilterRegExp.test(e.errorMessage||"")}onFilterChanged(){if(!this.listView)return;const e=this.filterInput.value();this.textFilterRegExp=e?t.StringUtilities.createPlainTextSearchRegex(e,"i"):null,this.listView.updateFilterAndHighlight(this.textFilterRegExp),this.updateStats()}wasShown(){super.wasShown(),this.registerCSSFiles([g])}}var f=Object.freeze({__proto__:null,DeveloperResourcesView:v});export{f as DeveloperResourcesView};

package/dist/third-party/front_end/panels/elements/components/components.js

@@ -0,0 +1 @@
+import*as e from"../../../core/i18n/i18n.js";import*as t from"../../../core/platform/platform.js";import*as i from"../../../ui/components/helpers/helpers.js";import*as o from"../../../ui/components/render_coordinator/render_coordinator.js";import*as r from"../../../ui/lit-html/lit-html.js";import*as n from"../../../ui/components/input/input.js";import*as s from"../../../core/common/common.js";import*as a from"../../../ui/components/icon_button/icon_button.js";import*as c from"../../../ui/components/node_text/node_text.js";import*as l from"../../../core/sdk/sdk.js";import*as d from"../../../ui/components/legacy_wrapper/legacy_wrapper.js";import*as h from"../../../ui/legacy/legacy.js";const p=new CSSStyleSheet;p.replaceSync(".container{width:100%;display:inline-block}.container:hover{background-color:var(--item-hover-color)}span{color:var(--color-syntax-8);font-family:var(--monospace-font-family);font-size:var(--monospace-font-size)}.role-value{color:var(--color-syntax-2)}.attribute-name{color:var(--color-syntax-4)}.attribute-value{color:var(--color-syntax-3)}\n/*# sourceURL=accessibilityTreeNode.css */\n");const m={ignored:"Ignored"},u=e.i18n.registerUIStrings("panels/elements/components/AccessibilityTreeNode.ts",m),g=e.i18n.getLocalizedString.bind(void 0,u);class f extends HTMLElement{static litTagName=r.literal`devtools-accessibility-tree-node`;#e=this.attachShadow({mode:"open"});#t=!0;#i="";#o="";#r=[];#n="";set data(e){this.#t=e.ignored,this.#i=e.name,this.#o=e.role,this.#r=e.properties,this.#n=e.id,this.#s()}connectedCallback(){this.#e.adoptedStyleSheets=[p]}async#s(){const e=r.html`<span class="role-value">${i=this.#o,i.length>1e4?t.StringUtilities.trimMiddle(i,1e4):i}</span>`;var i;const n=r.html`"<span class="attribute-value">${this.#i}</span>"`,s=this.#r.map((({name:e,value:t})=>function(e){switch(e){case"boolean":case"booleanOrUndefined":case"string":case"number":return!0;default:return!1}}(t.type)?r.html` <span class="attribute-name">${e}</span>: <span class="attribute-value">${t.value}</span>`:r.nothing)),a=this.#t?r.html`<span>${g(m.ignored)}</span>`:r.html`${e} ${n}${s}`;await o.RenderCoordinator.RenderCoordinator.instance().write(`Accessibility node ${this.#n} render`,(()=>{r.render(r.html`<div class="container">${a}</div>`,this.#e,{host:this})}))}}i.CustomElements.defineComponent("devtools-accessibility-tree-node",f);var v,b=Object.freeze({__proto__:null,AccessibilityTreeNode:f});function k(e){switch(e){case v.GRID:return{name:"grid",category:"Layout",enabledByDefault:!0};case v.SUBGRID:return{name:"subgrid",category:"Layout",enabledByDefault:!0};case v.FLEX:return{name:"flex",category:"Layout",enabledByDefault:!0};case v.AD:return{name:"ad",category:"Security",enabledByDefault:!0};case v.SCROLL_SNAP:return{name:"scroll-snap",category:"Layout",enabledByDefault:!0};case v.CONTAINER:return{name:"container",category:"Layout",enabledByDefault:!0};case v.SLOT:return{name:"slot",category:"Layout",enabledByDefault:!0};case v.TOP_LAYER:return{name:"top-layer",category:"Layout",enabledByDefault:!0};case v.REVEAL:return{name:"reveal",category:"Default",enabledByDefault:!0}}}let w;function y(e){if(!w){w=new Map;for(const{name:e,category:t}of Object.values(v).map(k))w.set(e,t)}return w.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"}(v||(v={}));const x=Object.values(v).map(k).map((({name:e,enabledByDefault:t})=>({adorner:e,isEnabled:t})));const S=new Map(["Security","Layout","Default"].map(((e,t)=>[e,t+1])));var T=Object.freeze({__proto__:null,get RegisteredAdorners(){return v},getRegisteredAdorner:k,DefaultAdornerSettings:x,AdornerManager:class{#a=new Map;#c;constructor(e){this.#c=e,this.#l()}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,i]of this.#a)e.push({adorner:t,isEnabled:i});this.#c.set(e)}#h(){const e=this.#c.get();for(const t of e)this.#a.set(t.adorner,t.isEnabled)}#l(){this.#h();const e=new Set(this.#a.keys());for(const{adorner:t,isEnabled:i}of x)e.delete(t),this.#a.has(t)||this.#a.set(t,i);for(const t of e)this.#a.delete(t);this.#d()}},AdornerCategoryOrder:S,compareAdornerNamesByCategory:function(e,t){return(S.get(y(e))||Number.POSITIVE_INFINITY)-(S.get(y(t))||Number.POSITIVE_INFINITY)}});const O=new CSSStyleSheet;O.replaceSync('.adorner-settings-pane{display:flex;height:2.67em;padding:0 12px;color:var(--color-text-primary);font-size:12px;align-items:center}.settings-title{font-weight:500}.setting{margin-left:1em}.adorner-status{margin:auto 0.4em auto 0}.adorner-status,\n.adorner-name{vertical-align:middle}.close{position:relative;margin-left:auto;font-size:1em;width:1.5em;height:1.5em;border:none;border-radius:50%;background-color:var(--color-background-elevation-1)}.close::before,\n.close::after{content:"";display:inline-block;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;width:1em;height:0.2em;background-color:var(--color-text-secondary);border-radius:2px}.close:hover,\n.close:focus{background-color:var(--color-background-elevation-2)}.close::before{transform:rotate(45deg)}.close::after{transform:rotate(-45deg)}\n/*# sourceURL=adornerSettingsPane.css */\n');const C={settingsTitle:"Show badges",closeButton:"Close"},N=e.i18n.registerUIStrings("panels/elements/components/AdornerSettingsPane.ts",C),M=e.i18n.getLocalizedString.bind(void 0,N),{render:E,html:_}=r;class $ extends Event{static eventName="adornersettingupdated";data;constructor(e,t,i){super($.eventName,{}),this.data={adornerName:e,isEnabledNow:t,newSettings:i}}}class L extends HTMLElement{static litTagName=r.literal`devtools-adorner-settings-pane`;#e=this.attachShadow({mode:"open"});#p=new Map;connectedCallback(){this.#e.adoptedStyleSheets=[n.checkboxStyles,O]}set data(e){this.#p=new Map(e.settings.entries()),this.#s()}show(){this.classList.remove("hidden");const e=this.#e.querySelector(".adorner-settings-pane");e&&e.focus()}hide(){this.classList.add("hidden")}#m(e){const t=e.target,i=t.dataset.adorner;if(void 0===i)return;const o=t.checked;this.#p.set(i,o),this.dispatchEvent(new $(i,o,this.#p)),this.#s()}#s(){const e=[];for(const[t,i]of this.#p)e.push(_` <label class="setting" title="${t}"> <input class="adorner-status" type="checkbox" name="${t}" .checked="${i}" data-adorner="${t}"> <span class="adorner-name">${t}</span> </label> `);E(_` <div class="adorner-settings-pane" tabindex="-1"> <div class="settings-title">${M(C.settingsTitle)}</div> <div class="setting-list" @change="${this.#m}"> ${e} </div> <button class="close" @click="${this.hide}" aria-label="${M(C.closeButton)}"></button> </div> `,this.#e,{host:this})}}i.CustomElements.defineComponent("devtools-adorner-settings-pane",L);var I=Object.freeze({__proto__:null,AdornerSettingUpdatedEvent:$,AdornerSettingsPane:L});const z=new CSSStyleSheet;z.replaceSync(":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(--legacy-focus-bg-color);cursor:text}.computed-style-property.inherited{opacity:50%}.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(--color-syntax-1))}.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));-webkit-mask-image:var(--image-file-mediumIcons);-webkit-mask-position:-32px 48px;background-color:var(--legacy-active-control-bg-color)}.computed-style-property:hover .goto{display:inline-block}.hidden{display:none}:host-context(.computed-narrow) .computed-style-property{white-space:normal}: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) .goto{display:none}@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=computedStyleProperty.css */\n");const{render:D,html:P}=r;class R extends Event{static eventName="onnavigatetosource";constructor(){super(R.eventName,{bubbles:!0,composed:!0})}}class j extends HTMLElement{static litTagName=r.literal`devtools-computed-style-property`;#e=this.attachShadow({mode:"open"});#u=!1;#g=!1;constructor(){super(),this.#e.adoptedStyleSheets=[z]}set inherited(e){e!==this.#u&&(this.#u=e,this.#s())}set traceable(e){e!==this.#g&&(this.#g=e,this.#s())}#f(){this.dispatchEvent(new R)}#s(){D(P` <div class="computed-style-property ${this.#u?"inherited":""}"> <div class="property-name"> <slot name="name"></slot> </div> <span class="hidden" aria-hidden="false">: </span> ${this.#g?P`<span class="goto" @click="${this.#f}"></span>`:null} <div class="property-value"> <slot name="value"></slot> </div> <span class="hidden" aria-hidden="false">;</span> </div> `,this.#e,{host:this})}}i.CustomElements.defineComponent("devtools-computed-style-property",j);var H=Object.freeze({__proto__:null,NavigateToSourceEvent:R,ComputedStyleProperty:j});const B=new CSSStyleSheet;B.replaceSync(':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(--legacy-focus-bg-color);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));-webkit-mask-image:var(--image-file-mediumIcons);-webkit-mask-position:-32px 48px;background-color:var(--legacy-active-control-bg-color)}.computed-style-trace:hover .goto{display:inline-block}.devtools-link{--override-text-decoration-color:hsl(0deg 0% 60%);color:var(--color-text-primary);text-decoration-color:var(--override-text-decoration-color);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:rgb(128 128 128);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=computedStyleTrace.css */\n');const{render:A,html:F}=r;class q extends HTMLElement{static litTagName=r.literal`devtools-computed-style-trace`;#e=this.attachShadow({mode:"open"});#v="";#b=!1;#k=()=>{};#w;connectedCallback(){this.#e.adoptedStyleSheets=[B]}set data(e){this.#v=e.selector,this.#b=e.active,this.#k=e.onNavigateToSource,this.#w=e.ruleOriginNode,this.#s()}#s(){A(F` <div class="computed-style-trace ${this.#b?"active":"inactive"}"> <span class="goto" @click="${this.#k}"></span> <slot name="trace-value" @click="${this.#k}"></slot> <span class="trace-selector">${this.#v}</span> <span class="trace-link">${this.#w}</span> </div> `,this.#e,{host:this})}}i.CustomElements.defineComponent("devtools-computed-style-trace",q);var G=Object.freeze({__proto__:null,ComputedStyleTrace:q});const V=new CSSStyleSheet;V.replaceSync(":host{padding:6px}.hint-popup-wrapper{max-width:232px;font-size:12px;line-height:1.4}code{font-weight:bold;font-family:inherit}.hint-popup-possible-fix{margin-top:8px}.clickable{color:var(--color-link)}.underlined{text-decoration:underline}.unbreakable-text{white-space:nowrap}\n/*# sourceURL=cssHintDetailsView.css */\n");const U={learnMore:"Learn More"},Q=e.i18n.registerUIStrings("panels/elements/components/CSSHintDetailsView.ts",U),W=e.i18n.getLocalizedString.bind(void 0,Q),{render:Y,html:X,Directives:K}=r;class J extends HTMLElement{static litTagName=r.literal`devtools-css-hint-details-view`;#e=this.attachShadow({mode:"open"});#y;constructor(e){super(),this.#y=e,this.#e.adoptedStyleSheets=[V],this.#s()}#s(){const e=this.#y.getLearnMoreLink();Y(X` <div class="hint-popup-wrapper"> <div class="hint-popup-reason"> ${K.unsafeHTML(this.#y.getMessage())} </div> ${this.#y.getPossibleFixMessage()?X` <div class="hint-popup-possible-fix"> ${K.unsafeHTML(this.#y.getPossibleFixMessage())} ${e?X` <x-link id="learn-more" href="${e}" class="clickable underlined unbreakable-text" }> ${W(U.learnMore)} </x-link> `:""} </div> `:""} </div> `,this.#e,{host:this})}}i.CustomElements.defineComponent("devtools-css-hint-details-view",J);var Z=Object.freeze({__proto__:null,CSSHintDetailsView:J});const ee=new CSSStyleSheet;ee.replaceSync(":host{padding:6px}.docs-popup-wrapper{max-width:350px;font-size:12px;line-height:1.4}.docs-popup-section{margin-top:8px}.clickable{color:var(--color-link)}.underlined{text-decoration:underline}.unbreakable-text{white-space:nowrap}.footer{display:flex;justify-content:space-between}.dont-show input{vertical-align:bottom}\n/*# sourceURL=cssPropertyDocsView.css */\n");const te={learnMore:"Learn more",dontShow:"Don't show"},ie=e.i18n.registerUIStrings("panels/elements/components/CSSPropertyDocsView.ts",te),oe=e.i18n.getLocalizedString.bind(void 0,ie),{render:re,html:ne}=r;class se extends HTMLElement{static litTagName=r.literal`devtools-css-property-docs-view`;#e=this.attachShadow({mode:"open"});#x;constructor(e){super(),this.#x=e,this.#e.adoptedStyleSheets=[n.checkboxStyles,ee],this.#s()}#S(e){const t=!e.target.checked;s.Settings.Settings.instance().moduleSetting("showCSSPropertyDocumentationOnHover").set(t)}#s(){const e=this.#x.description,t=this.#x.references?.[0].url;re(ne` <div class="docs-popup-wrapper"> ${e?ne` <div id="description"> ${e} </div> `:r.nothing} ${t?ne` <div class="docs-popup-section footer"> <x-link id="learn-more" href="${t}" class="clickable underlined unbreakable-text"> ${oe(te.learnMore)} </x-link> <label class="dont-show"> <input type="checkbox" @change="${this.#S}"> ${oe(te.dontShow)} </label> </div> `:r.nothing} </div> `,this.#e,{host:this})}}i.CustomElements.defineComponent("devtools-css-property-docs-view",se);var ae=Object.freeze({__proto__:null,CSSPropertyDocsView:se});const ce=new Set(["tb","tb-rl","vertical-lr","vertical-rl"]);var le;function de(e){if(e===le.LEFT_TO_RIGHT)return le.RIGHT_TO_LEFT;if(e===le.RIGHT_TO_LEFT)return le.LEFT_TO_RIGHT;if(e===le.TOP_TO_BOTTOM)return le.BOTTOM_TO_TOP;if(e===le.BOTTOM_TO_TOP)return le.TOP_TO_BOTTOM;throw new Error("Unknown PhysicalFlexDirection")}function he(e){return{...e,"row-reverse":de(e.row),"column-reverse":de(e.column)}}function pe(e){const t="rtl"===e.get("direction"),i=e.get("writing-mode");return he(i&&ce.has(i)?{row:t?le.BOTTOM_TO_TOP:le.TOP_TO_BOTTOM,column:"vertical-lr"===i?le.LEFT_TO_RIGHT:le.RIGHT_TO_LEFT}:{row:t?le.RIGHT_TO_LEFT:le.LEFT_TO_RIGHT,column:le.TOP_TO_BOTTOM})}function me(e){let t=!0,i=!1,o=-90;return e===le.RIGHT_TO_LEFT?(o=90,i=!1,t=!1):e===le.TOP_TO_BOTTOM?(o=0,t=!1,i=!1):e===le.BOTTOM_TO_TOP&&(o=0,t=!1,i=!0),{iconName:"flex-direction",rotate:o,scaleX:t?-1:1,scaleY:i?-1:1}}function ue(e,t){return{iconName:e,rotate:t===le.RIGHT_TO_LEFT?90:t===le.LEFT_TO_RIGHT?-90:0,scaleX:1,scaleY:1}}function ge(e,t){return{iconName:e,rotate:t===le.TOP_TO_BOTTOM?90:t===le.BOTTOM_TO_TOP?-90:0,scaleX:t===le.RIGHT_TO_LEFT?-1:1,scaleY:1}}function fe(e,t){return{iconName:e,rotate:t===le.TOP_TO_BOTTOM?90:t===le.BOTTOM_TO_TOP?-90:0,scaleX:t===le.RIGHT_TO_LEFT?-1:1,scaleY:1}}function ve(e,t){return{iconName:e,rotate:t===le.RIGHT_TO_LEFT?90:t===le.LEFT_TO_RIGHT?-90:0,scaleX:1,scaleY:1}}function be(e){return function(t){return me(pe(t)[e])}}function ke(e){return function(t){const i=pe(t),o=new Map([["column",i.row],["row",i.column],["column-reverse",i.row],["row-reverse",i.column]]),r=t.get("flex-direction")||"row",n=o.get(r);if(!n)throw new Error("Unknown direction for flex-align icon");return ue(e,n)}}function we(e){return function(t){const i=pe(t);return ue(e,i.column)}}function ye(e){return function(t){const i=pe(t);return ge(e,i[t.get("flex-direction")||"row"])}}function xe(e){return function(t){const i=pe(t);return ge(e,i.row)}}function Se(e){return function(t){const i=pe(t);return fe(e,i.row)}}function Te(e){return function(t){const i=pe(t),o=new Map([["column",i.row],["row",i.column],["column-reverse",i.row],["row-reverse",i.column]]),r=t.get("flex-direction")||"row",n=o.get(r);if(!n)throw new Error("Unknown direction for flex-align icon");return ve(e,n)}}function Oe(e){return function(t){const i=pe(t);return ve(e,i.column)}}function Ce(){return{iconName:"align-items-baseline",rotate:0,scaleX:1,scaleY:1}}function Ne(e){return function(t,i){return Te(e)(i)}}function Me(e){return function(t,i){return Oe(e)(i)}}function Ee(e,t){return{iconName:e,rotate:t===le.BOTTOM_TO_TOP||t===le.TOP_TO_BOTTOM?90:0,scaleX:1,scaleY:1}}function _e(e){return function(t){const i=pe(t),o=t.get("flex-direction")||"row";return Ee(e,i[o])}}!function(e){e.LEFT_TO_RIGHT="left-to-right",e.RIGHT_TO_LEFT="right-to-left",e.BOTTOM_TO_TOP="bottom-to-top",e.TOP_TO_BOTTOM="top-to-bottom"}(le||(le={}));const $e=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",ke("align-content-center")],["align-content: space-around",ke("align-content-space-around")],["align-content: space-between",ke("align-content-space-between")],["align-content: stretch",ke("align-content-stretch")],["align-content: space-evenly",ke("align-content-space-evenly")],["align-content: flex-end",ke("align-content-end")],["align-content: flex-start",ke("align-content-start")],["align-content: start",ke("align-content-start")],["align-content: end",ke("align-content-end")],["align-content: normal",ke("align-content-stretch")],["align-content: revert",ke("align-content-stretch")],["align-content: unset",ke("align-content-stretch")],["align-content: initial",ke("align-content-stretch")],["justify-content: center",ye("justify-content-center")],["justify-content: space-around",ye("justify-content-space-around")],["justify-content: space-between",ye("justify-content-space-between")],["justify-content: space-evenly",ye("justify-content-space-evenly")],["justify-content: flex-end",ye("justify-content-end")],["justify-content: flex-start",ye("justify-content-start")],["align-items: stretch",Te("align-items-stretch")],["align-items: flex-end",Te("align-items-end")],["align-items: flex-start",Te("align-items-start")],["align-items: center",Te("align-items-center")],["align-items: baseline",Ce],["align-content: baseline",Ce],["flex-wrap: wrap",_e("flex-wrap")],["flex-wrap: nowrap",_e("flex-no-wrap")]]),Le=new Map([["align-self: baseline",Ce],["align-self: center",Ne("align-self-center")],["align-self: flex-start",Ne("align-self-start")],["align-self: flex-end",Ne("align-self-end")],["align-self: stretch",Ne("align-self-stretch")]]),Ie=new Map([["align-content: center",we("align-content-center")],["align-content: space-around",we("align-content-space-around")],["align-content: space-between",we("align-content-space-between")],["align-content: stretch",we("align-content-stretch")],["align-content: space-evenly",we("align-content-space-evenly")],["align-content: end",we("align-content-end")],["align-content: start",we("align-content-start")],["align-content: baseline",Ce],["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")],["align-items: stretch",Oe("align-items-stretch")],["align-items: end",Oe("align-items-end")],["align-items: start",Oe("align-items-start")],["align-items: center",Oe("align-items-center")],["align-items: baseline",Ce],["justify-items: center",Se("justify-items-center")],["justify-items: stretch",Se("justify-items-stretch")],["justify-items: end",Se("justify-items-end")],["justify-items: start",Se("justify-items-start")],["justify-items: baseline",Ce]]),ze=new Map([["align-self: baseline",Ce],["align-self: center",Me("align-self-center")],["align-self: start",Me("align-self-start")],["align-self: end",Me("align-self-end")],["align-self: stretch",Me("align-self-stretch")]]),De=e=>{const t=e?.get("display");return"flex"===t||"inline-flex"===t},Pe=e=>{const t=e?.get("display");return"grid"===t||"inline-grid"===t};function Re(e,t){const i=$e.get(e);return i?i(t||new Map):null}function je(e,t,i){const o=Le.get(e);return o?o(t||new Map,i||new Map):null}function He(e,t){const i=Ie.get(e);return i?i(t||new Map):null}function Be(e,t,i){const o=ze.get(e);return o?o(t||new Map,i||new Map):null}var Ae=Object.freeze({__proto__:null,get PhysicalDirection(){return le},reverseDirection:de,getPhysicalDirections:pe,rotateFlexDirectionIcon:me,rotateAlignContentIcon:ue,rotateJustifyContentIcon:ge,rotateJustifyItemsIcon:fe,rotateAlignItemsIcon:ve,roateFlexWrapIcon:Ee,findIcon:function(e,t,i){if(De(t)){const i=Re(e,t);if(i)return i}if(De(i)){const o=je(e,t,i);if(o)return o}if(Pe(t)){const i=He(e,t);if(i)return i}if(Pe(i)){const o=Be(e,t,i);if(o)return o}return null},findFlexContainerIcon:Re,findFlexItemIcon:je,findGridContainerIcon:He,findGridItemIcon:Be});const Fe=new CSSStyleSheet;Fe.replaceSync('*{box-sizing:border-box;min-width:0;min-height:0}:root{height:100%;overflow:hidden;--legacy-accent-color:#1a73e8;--legacy-accent-fg-color:#1a73e8;--legacy-accent-color-hover:#3b86e8;--legacy-accent-fg-color-hover:#1567d3;--legacy-active-control-bg-color:#5a5a5a;--legacy-focus-bg-color:hsl(214deg 40% 92%);--legacy-focus-ring-inactive-shadow-color:#e0e0e0;--legacy-input-validation-error:#db1600;--legacy-toolbar-hover-bg-color:#eaeaea;--legacy-selection-fg-color:#fff;--legacy-selection-bg-color:var(--legacy-accent-color);--legacy-selection-inactive-fg-color:#5a5a5a;--legacy-selection-inactive-bg-color:#dadada;--legacy-tab-selected-fg-color:#333;--legacy-divider-border:1px solid var(--color-details-hairline);--legacy-focus-ring-inactive-shadow:0 0 0 1px var(--legacy-focus-ring-inactive-shadow-color);--legacy-focus-ring-active-shadow:0 0 0 1px var(--legacy-accent-color);--legacy-item-selection-bg-color:#cfe8fc;--legacy-item-selection-inactive-bg-color:#e0e0e0;--item-hover-color:rgb(56 121 217/10%);--monospace-font-size:10px;--monospace-font-family:monospace;--source-code-font-size:11px;--source-code-font-family:monospace;--override-force-white-icons-background:#fafafa}.-theme-with-dark-background{color-scheme:dark;--legacy-accent-color:#0e639c;--legacy-accent-fg-color:#ccc;--legacy-accent-fg-color-hover:#fff;--legacy-accent-color-hover:rgb(17 119 187);--legacy-active-control-bg-color:#cdcdcd;--legacy-focus-bg-color:hsl(214deg 19% 27%);--legacy-focus-ring-inactive-shadow-color:#5a5a5a;--legacy-toolbar-hover-bg-color:#202020;--legacy-selection-fg-color:#cdcdcd;--legacy-selection-inactive-fg-color:#cdcdcd;--legacy-selection-inactive-bg-color:hsl(0deg 0% 28%);--legacy-tab-selected-fg-color:#eaeaea;--legacy-focus-ring-inactive-shadow:0 0 0 1px var(--legacy-focus-ring-inactive-shadow-color);--legacy-item-selection-bg-color:hsl(207deg 88% 22%);--legacy-item-selection-inactive-bg-color:#454545}body{height:100%;width:100%;position:relative;overflow:hidden;margin:0;cursor:default;font-family:".SFNSDisplay-Regular","Helvetica Neue","Lucida Grande",sans-serif;font-size:12px;tab-size:4;user-select:none;color:var(--color-text-primary);background:var(--color-background)}.platform-linux{font-family:Roboto,Ubuntu,Arial,sans-serif}.platform-mac{font-family:".SFNSDisplay-Regular","Helvetica Neue","Lucida Grande",sans-serif}.platform-mac,\n.platform-linux{--override-text-color:rgb(48 57 66);color:var(--override-text-color)}.platform-windows{font-family:"Segoe UI",Tahoma,sans-serif}:focus{outline-width:0}.platform-mac,\n:host-context(.platform-mac){--monospace-font-size:11px;--monospace-font-family:menlo,monospace;--source-code-font-size:11px;--source-code-font-family:menlo,monospace}.platform-windows,\n:host-context(.platform-windows){--monospace-font-size:12px;--monospace-font-family:consolas,lucida console,courier new,monospace;--source-code-font-size:12px;--source-code-font-family:consolas,lucida console,courier new,monospace}.platform-linux,\n:host-context(.platform-linux){--monospace-font-size:11px;--monospace-font-family:dejavu sans mono,monospace;--source-code-font-size:11px;--source-code-font-family:dejavu sans mono,monospace}.-theme-with-dark-background .platform-linux,\n.-theme-with-dark-background .platform-mac,\n:host-context(.-theme-with-dark-background) .platform-linux,\n:host-context(.-theme-with-dark-background) .platform-mac{--override-text-color:rgb(189 198 207)}.monospace{font-family:var(--monospace-font-family);font-size:var(--monospace-font-size)!important}.source-code{font-family:var(--source-code-font-family);font-size:var(--source-code-font-size)!important;white-space:pre-wrap}img{-webkit-user-drag:none}iframe,\na img{border:none}.fill{position:absolute;top:0;left:0;right:0;bottom: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 > .toolbar{border-bottom:1px solid var(--color-details-hairline)}.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(--color-background)}iframe.widget{position:absolute;width:100%;height:100%;left:0;right:0;top:0;bottom:0}.hidden{display:none!important}.highlighted-search-result{--override-highlighted-search-result-background-color:rgb(255 255 0/80%);border-radius:1px;background-color:var(--override-highlighted-search-result-background-color);outline:1px solid var(--override-highlighted-search-result-background-color)}.-theme-with-dark-background .highlighted-search-result,\n:host-context(.-theme-with-dark-background) .highlighted-search-result{--override-highlighted-search-result-background-color:hsl(133deg 100% 30%);color:#333}.link{cursor:pointer;text-decoration:underline;color:var(--color-link);outline-offset:2px}button,\ninput,\nselect{font-family:inherit;font-size:inherit}select option,\nselect optgroup,\ninput{background-color:var(--color-background)}input{color:inherit}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%)}:host-context(.-theme-with-dark-background) input[type="checkbox"]:not(.-theme-preserve){accent-color:var(--color-checkbox-accent-color)}.harmony-input:not([type]),\n.harmony-input[type="number"],\n.harmony-input[type="text"]{padding:3px 6px;height:24px;border:none;box-shadow:var(--legacy-focus-ring-inactive-shadow)}.harmony-input:not([type]).error-input,\n.harmony-input[type="number"].error-input,\n.harmony-input[type="text"].error-input,\n.harmony-input:not([type]):invalid,\n.harmony-input[type="number"]:invalid,\n.harmony-input[type="text"]:invalid{box-shadow:0 0 0 1px var(--color-red)}.harmony-input:not([type]):not(.error-input):not(:invalid):hover,\n.harmony-input[type="number"]:not(.error-input):not(:invalid):hover,\n.harmony-input[type="text"]:not(.error-input):not(:invalid):hover{box-shadow:var(--legacy-focus-ring-inactive-shadow)}.harmony-input:not([type]):not(.error-input):not(:invalid):focus,\n.harmony-input[type="number"]:not(.error-input):not(:invalid):focus,\n.harmony-input[type="text"]:not(.error-input):not(:invalid):focus{box-shadow:var(--legacy-focus-ring-active-shadow)}.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(--color-background);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(--color-text-primary)!important;text-decoration:none!important}.chrome-select{--override-chrome-select-border-color:rgb(0 0 0/20%);appearance:none;user-select:none;border:1px solid var(--override-chrome-select-border-color);border-radius:2px;color:var(--color-text-primary);font:inherit;margin:0;outline:none;padding-right:20px;padding-left:6px;background-image:var(--image-file-arrow-drop-down-light);background-color:var(--color-background-elevation-0);background-position:right center;background-repeat:no-repeat;min-height:24px;min-width:80px}.chrome-select:disabled{opacity:38%}.-theme-with-dark-background .chrome-select,\n:host-context(.-theme-with-dark-background) .chrome-select{--override-chrome-select-border-color:rgb(230 230 230/20%);background-image:var(--image-file-arrow-drop-down-dark)}.chrome-select:enabled:active,\n.chrome-select:enabled:focus,\n.chrome-select:enabled:hover{--override-select-box-shadow:0 0 0 2px var(--color-button-outline-focus);background-color:var(--color-background-elevation-1);box-shadow:var(--override-select-box-shadow)}.chrome-select:enabled:active{background-color:var(--color-background-elevation-2)}.chrome-select:enabled:focus{border-color:transparent}@media (forced-colors: active) and (prefers-color-scheme: light){.chrome-select{background-image:var(--image-file-arrow-drop-down-light)}.-theme-with-dark-background .chrome-select,\n  :host-context(.-theme-with-dark-background) .chrome-select{background-image:var(--image-file-arrow-drop-down-light)}}@media (forced-colors: active) and (prefers-color-scheme: dark){.chrome-select{background-image:var(--image-file-arrow-drop-down-dark)}.-theme-with-dark-background .chrome-select,\n  :host-context(.-theme-with-dark-background) .chrome-select{background-image:var(--image-file-arrow-drop-down-dark)}}.-theme-with-dark-background .chrome-select:enabled:active,\n.-theme-with-dark-background .chrome-select:enabled:focus,\n.-theme-with-dark-background .chrome-select:enabled:hover,\n:host-context(.-theme-with-dark-background) .chrome-select:enabled:active,\n:host-context(.-theme-with-dark-background) .chrome-select:enabled:focus,\n:host-context(.-theme-with-dark-background) .chrome-select:enabled:hover{--override-select-box-shadow:0 0 0 2px var(--color-button-outline-focus)}.chrome-select-label{margin:0 22px;flex:none}.chrome-select-label p p{margin-top:0;color:var(--color-text-secondary)}.settings-select{margin:0}.chrome-select optgroup,\n.chrome-select option{background-color:var(--color-background-elevation-1);color:var(--color-text-primary)}.gray-info-message{text-align:center;font-style:italic;padding:6px;color:var(--color-text-secondary);white-space:nowrap}span[is="dt-icon-label"]{flex:none}.full-widget-dimmed-banner a{color:inherit}.full-widget-dimmed-banner{color:var(--color-text-secondary);background-color:var(--color-background);display:flex;justify-content:center;align-items:center;text-align:center;padding:20px;position:absolute;top:0;right:0;bottom:0;left:0;font-size:13px;overflow:auto;z-index:500}[is="ui-icon"]{display:inline-block;flex-shrink:0}.-theme-with-dark-background [is="ui-icon"].icon-invert,\n:host-context(.-theme-with-dark-background) [is="ui-icon"].icon-invert{filter:invert(80%) hue-rotate(180deg)}[is="ui-icon"].icon-mask{background-color:var(--icon-default);-webkit-mask-position:var(--spritesheet-position)}.-theme-with-dark-background [is="ui-icon"].icon-mask,\n:host-context(.-theme-with-dark-background) [is="ui-icon"].icon-mask{--override-icon-mask-background-color:rgb(145 145 145)}[is="ui-icon"]:not(.icon-mask){background-position:var(--spritesheet-position)}.spritesheet-smallicons:not(.icon-mask){background-image:var(--image-file-smallIcons)}.spritesheet-smallicons.icon-mask{-webkit-mask-image:var(--image-file-smallIcons)}.spritesheet-largeicons:not(.icon-mask){background-image:var(--image-file-largeIcons)}.spritesheet-largeicons.icon-mask{-webkit-mask-image:var(--image-file-largeIcons)}.spritesheet-mediumicons:not(.icon-mask){background-image:var(--image-file-mediumIcons)}.spritesheet-mediumicons.icon-mask{-webkit-mask-image:var(--image-file-mediumIcons)}.spritesheet-arrowicons{background-image:var(--image-file-popoverArrows)}.spritesheet-3d-center.icon-mask{-webkit-mask-image:var(--image-file-3d-center)}.spritesheet-3d-pan.icon-mask{-webkit-mask-image:var(--image-file-3d-pan)}.spritesheet-3d-rotate.icon-mask{-webkit-mask-image:var(--image-file-3d-rotate)}.spritesheet-arrow-up-down-circle.icon-mask{-webkit-mask-image:var(--image-file-arrow-up-down-circle)}.spritesheet-arrow-up-down.icon-mask{-webkit-mask-image:var(--image-file-arrow-up-down)}.spritesheet-bell.icon-mask{-webkit-mask-image:var(--image-file-bell)}.spritesheet-bezier-curve-filled.icon-mask{-webkit-mask-image:var(--image-file-bezier-curve-filled)}.spritesheet-bin.icon-mask{-webkit-mask-image:var(--image-file-bin)}.spritesheet-bottom-panel-close.icon-mask{-webkit-mask-image:var(--image-file-bottom-panel-close)}.spritesheet-bottom-panel-open.icon-mask{-webkit-mask-image:var(--image-file-bottom-panel-open)}.spritesheet-brackets.icon-mask{-webkit-mask-image:var(--image-file-brackets)}.spritesheet-breakpoint-crossed-filled.icon-mask{-webkit-mask-image:var(--image-file-breakpoint-crossed-filled)}.spritesheet-breakpoint-crossed.icon-mask{-webkit-mask-image:var(--image-file-breakpoint-crossed)}.spritesheet-brush-filled.icon-mask{-webkit-mask-image:var(--image-file-brush-filled)}.spritesheet-brush.icon-mask{-webkit-mask-image:var(--image-file-brush)}.spritesheet-bug.icon-mask{-webkit-mask-image:var(--image-file-bug)}.spritesheet-check-double.icon-mask{-webkit-mask-image:var(--image-file-check-double)}.spritesheet-checkmark.icon-mask{-webkit-mask-image:var(--image-file-checkmark)}.spritesheet-chevron-double-right.icon-mask{-webkit-mask-image:var(--image-file-chevron-double-right)}.spritesheet-chevron-down.icon-mask{-webkit-mask-image:var(--image-file-chevron-down)}.spritesheet-chevron-up.icon-mask{-webkit-mask-image:var(--image-file-chevron-up)}.spritesheet-clear-list.icon-mask{-webkit-mask-image:var(--image-file-clear-list)}.spritesheet-clear.icon-mask{-webkit-mask-image:var(--image-file-clear)}.spritesheet-cloud.icon-mask{-webkit-mask-image:var(--image-file-cloud)}.spritesheet-code-circle.icon-mask{-webkit-mask-image:var(--image-file-code-circle)}.spritesheet-color-picker-filled.icon-mask{-webkit-mask-image:var(--image-file-color-picker-filled)}.spritesheet-color-picker.icon-mask{-webkit-mask-image:var(--image-file-color-picker)}.spritesheet-cookie.icon-mask{-webkit-mask-image:var(--image-file-cookie)}.spritesheet-copy.icon-mask{-webkit-mask-image:var(--image-file-copy)}.spritesheet-credit-card.icon-mask{-webkit-mask-image:var(--image-file-credit-card)}.spritesheet-cross-circle.icon-mask{-webkit-mask-image:var(--image-file-cross-circle)}.spritesheet-cross.icon-mask{-webkit-mask-image:var(--image-file-cross)}.spritesheet-custom-typography.icon-mask{-webkit-mask-image:var(--image-file-custom-typography)}.spritesheet-database.icon-mask{-webkit-mask-image:var(--image-file-database)}.spritesheet-device-fold.icon-mask{-webkit-mask-image:var(--image-file-device-fold)}.spritesheet-devices.icon-mask{-webkit-mask-image:var(--image-file-devices)}.spritesheet-dock-bottom.icon-mask{-webkit-mask-image:var(--image-file-dock-bottom)}.spritesheet-dock-left.icon-mask{-webkit-mask-image:var(--image-file-dock-left)}.spritesheet-dock-right.icon-mask{-webkit-mask-image:var(--image-file-dock-right)}.spritesheet-dock-window.icon-mask{-webkit-mask-image:var(--image-file-dock-window)}.spritesheet-document.icon-mask{-webkit-mask-image:var(--image-file-document)}.spritesheet-dots-vertical.icon-mask{-webkit-mask-image:var(--image-file-dots-vertical)}.spritesheet-download.icon-mask{-webkit-mask-image:var(--image-file-download)}.spritesheet-edit.icon-mask{-webkit-mask-image:var(--image-file-edit)}.spritesheet-experiment-check.icon-mask{-webkit-mask-image:var(--image-file-experiment-check)}.spritesheet-eye.icon-mask{-webkit-mask-image:var(--image-file-eye)}.spritesheet-filter-clear.icon-mask{-webkit-mask-image:var(--image-file-filter-clear)}.spritesheet-filter-filled.icon-mask{-webkit-mask-image:var(--image-file-filter-filled)}.spritesheet-filter.icon-mask{-webkit-mask-image:var(--image-file-filter)}.spritesheet-frame-crossed.icon-mask{-webkit-mask-image:var(--image-file-frame-crossed)}.spritesheet-frame.icon-mask{-webkit-mask-image:var(--image-file-frame)}.spritesheet-gear-filled.icon-mask{-webkit-mask-image:var(--image-file-gear-filled)}.spritesheet-gear.icon-mask{-webkit-mask-image:var(--image-file-gear)}.spritesheet-gears.icon-mask{-webkit-mask-image:var(--image-file-gears)}.spritesheet-heap-snapshot.icon-mask{-webkit-mask-image:var(--image-file-heap-snapshot)}.spritesheet-heap-snapshots.icon-mask{-webkit-mask-image:var(--image-file-heap-snapshots)}.spritesheet-iframe-crossed.icon-mask{-webkit-mask-image:var(--image-file-iframe-crossed)}.spritesheet-iframe.icon-mask{-webkit-mask-image:var(--image-file-iframe)}.spritesheet-import.icon-mask{-webkit-mask-image:var(--image-file-import)}.spritesheet-info.icon-mask{-webkit-mask-image:var(--image-file-info)}.spritesheet-keyboard-pen.icon-mask{-webkit-mask-image:var(--image-file-keyboard-pen)}.spritesheet-layers-filled.icon-mask{-webkit-mask-image:var(--image-file-layers-filled)}.spritesheet-layers.icon-mask{-webkit-mask-image:var(--image-file-layers)}.spritesheet-left-panel-close.icon-mask{-webkit-mask-image:var(--image-file-left-panel-close)}.spritesheet-left-panel-open.icon-mask{-webkit-mask-image:var(--image-file-left-panel-open)}.spritesheet-list.icon-mask{-webkit-mask-image:var(--image-file-list)}.spritesheet-pause.icon-mask{-webkit-mask-image:var(--image-file-pause)}.spritesheet-play.icon-mask{-webkit-mask-image:var(--image-file-play)}.spritesheet-plus.icon-mask{-webkit-mask-image:var(--image-file-plus)}.spritesheet-popup.icon-mask{-webkit-mask-image:var(--image-file-popup)}.spritesheet-profile.icon-mask{-webkit-mask-image:var(--image-file-profile)}.spritesheet-record-start.icon-mask{-webkit-mask-image:var(--image-file-record-start)}.spritesheet-record-stop.icon-mask{-webkit-mask-image:var(--image-file-record-stop)}.spritesheet-refresh.icon-mask{-webkit-mask-image:var(--image-file-refresh)}.spritesheet-replace.icon-mask{-webkit-mask-image:var(--image-file-replace)}.spritesheet-resume.icon-mask{-webkit-mask-image:var(--image-file-resume)}.spritesheet-right-panel-close.icon-mask{-webkit-mask-image:var(--image-file-right-panel-close)}.spritesheet-right-panel-open.icon-mask{-webkit-mask-image:var(--image-file-right-panel-open)}.spritesheet-screen-rotation.icon-mask{-webkit-mask-image:var(--image-file-screen-rotation)}.spritesheet-search.icon-mask{-webkit-mask-image:var(--image-file-search)}.spritesheet-select-element.icon-mask{-webkit-mask-image:var(--image-file-select-element)}.spritesheet-shadow.icon-mask{-webkit-mask-image:var(--image-file-shadow)}.spritesheet-step-into.icon-mask{-webkit-mask-image:var(--image-file-step-into)}.spritesheet-step-out.icon-mask{-webkit-mask-image:var(--image-file-step-out)}.spritesheet-step-over.icon-mask{-webkit-mask-image:var(--image-file-step-over)}.spritesheet-step.icon-mask{-webkit-mask-image:var(--image-file-step)}.spritesheet-stop.icon-mask{-webkit-mask-image:var(--image-file-stop)}.spritesheet-sync.icon-mask{-webkit-mask-image:var(--image-file-sync)}.spritesheet-table.icon-mask{-webkit-mask-image:var(--image-file-table)}.spritesheet-top-panel-close.icon-mask{-webkit-mask-image:var(--image-file-top-panel-close)}.spritesheet-top-panel-open.icon-mask{-webkit-mask-image:var(--image-file-top-panel-open)}.spritesheet-replay.icon-mask{-webkit-mask-image:var(--image-file-replay)}.spritesheet-triangle-bottom-right.icon-mask{-webkit-mask-image:var(--image-file-triangle-bottom-right)}.spritesheet-triangle-down.icon-mask{-webkit-mask-image:var(--image-file-triangle-down)}.spritesheet-triangle-left.icon-mask{-webkit-mask-image:var(--image-file-triangle-left)}.spritesheet-triangle-right.icon-mask{-webkit-mask-image:var(--image-file-triangle-right)}.spritesheet-triangle-up.icon-mask{-webkit-mask-image:var(--image-file-triangle-up)}.spritesheet-undo.icon-mask{-webkit-mask-image:var(--image-file-undo)}.spritesheet-warning.icon-mask{-webkit-mask-image:var(--image-file-warning)}.spritesheet-watch.icon-mask{-webkit-mask-image:var(--image-file-watch)}.force-white-icons [is="ui-icon"].spritesheet-smallicons,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-smallicons,\n[is="ui-icon"].force-white-icons.spritesheet-smallicons,\n.-theme-preserve{-webkit-mask-image:var(--image-file-smallIcons);-webkit-mask-position:var(--spritesheet-position);background:var(--override-force-white-icons-background)!important}.force-white-icons [is="ui-icon"].spritesheet-largeicons,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-largeicons,\n[is="ui-icon"].force-white-icons.spritesheet-largeicons,\n.-theme-preserve{-webkit-mask-image:var(--image-file-largeIcons);-webkit-mask-position:var(--spritesheet-position);background:var(--override-force-white-icons-background)!important}.force-white-icons [is="ui-icon"].spritesheet-mediumicons,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-mediumicons,\n[is="ui-icon"].force-white-icons.spritesheet-mediumicons,\n.-theme-preserve{-webkit-mask-image:var(--image-file-mediumIcons);-webkit-mask-position:var(--spritesheet-position);background:var(--override-force-white-icons-background)!important}.force-white-icons [is="ui-icon"].spritesheet-arrow-up-down,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-arrow-up-down,\n[is="ui-icon"].force-white-icons.spritesheet-arrow-up-down,\n.-theme-preserve{-webkit-mask-image:var(--image-file-arrow-up-down);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-bell,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-bell,\n[is="ui-icon"].force-white-icons.spritesheet-bell,\n.-theme-preserve{-webkit-mask-image:var(--image-file-bell);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-bug,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-bug,\n[is="ui-icon"].force-white-icons.spritesheet-bug,\n.-theme-preserve{-webkit-mask-image:var(--image-file-bug);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-cloud,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-cloud,\n[is="ui-icon"].force-white-icons.spritesheet-cloud,\n.-theme-preserve{-webkit-mask-image:var(--image-file-cloud);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-cookie,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-cookie,\n[is="ui-icon"].force-white-icons.spritesheet-cookie,\n.-theme-preserve{-webkit-mask-image:var(--image-file-cookie);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-credit-card,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-credit-card,\n[is="ui-icon"].force-white-icons.spritesheet-credit-card,\n.-theme-preserve{-webkit-mask-image:var(--image-file-credit-card);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-cross-circle,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-cross-circle,\n[is="ui-icon"].force-white-icons.spritesheet-cross-circle,\n.-theme-preserve{-webkit-mask-image:var(--image-file-cross-circle);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-database,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-database,\n[is="ui-icon"].force-white-icons.spritesheet-database,\n.-theme-preserve{-webkit-mask-image:var(--image-file-database);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-dock-bottom,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-dock-bottom,\n[is="ui-icon"].force-white-icons.spritesheet-dock-bottom,\n.-theme-preserve{-webkit-mask-image:var(--image-file-dock-bottom);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-dock-left,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-dock-left,\n[is="ui-icon"].force-white-icons.spritesheet-dock-left,\n.-theme-preserve{-webkit-mask-image:var(--image-file-dock-left);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-dock-right,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-dock-right,\n[is="ui-icon"].force-white-icons.spritesheet-dock-right,\n.-theme-preserve{-webkit-mask-image:var(--image-file-dock-right);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-dock-window,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-dock-window,\n[is="ui-icon"].force-white-icons.spritesheet-dock-window,\n.-theme-preserve{-webkit-mask-image:var(--image-file-dock-window);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-document,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-document,\n[is="ui-icon"].force-white-icons.spritesheet-document,\n.-theme-preserve{-webkit-mask-image:var(--image-file-document);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-frame-crossed,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-frame-crossed,\n[is="ui-icon"].force-white-icons.spritesheet-frame-crossed,\n.-theme-preserve{-webkit-mask-image:var(--image-file-frame-crossed);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-frame,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-frame,\n[is="ui-icon"].force-white-icons.spritesheet-frame,\n.-theme-preserve{-webkit-mask-image:var(--image-file-frame);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-gears,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-gears,\n[is="ui-icon"].force-white-icons.spritesheet-gears,\n.-theme-preserve{-webkit-mask-image:var(--image-file-gears);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-heap-snapshot,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-heap-snapshot,\n[is="ui-icon"].force-white-icons.spritesheet-heap-snapshot,\n.-theme-preserve{-webkit-mask-image:var(--image-file-heap-snapshot);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-heap-snapshots,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-heap-snapshots,\n[is="ui-icon"].force-white-icons.spritesheet-heap-snapshots,\n.-theme-preserve{-webkit-mask-image:var(--image-file-heap-snapshots);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-iframe-crossed,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-iframe-crossed,\n[is="ui-icon"].force-white-icons.spritesheet-iframe-crossed,\n.-theme-preserve{-webkit-mask-image:var(--image-file-iframe-crossed);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-iframe,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-iframe,\n[is="ui-icon"].force-white-icons.spritesheet-iframe,\n.-theme-preserve{-webkit-mask-image:var(--image-file-iframe);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-info,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-info,\n[is="ui-icon"].force-white-icons.spritesheet-info,\n.-theme-preserve{-webkit-mask-image:var(--image-file-info);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-list,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-list,\n[is="ui-icon"].force-white-icons.spritesheet-list,\n.-theme-preserve{-webkit-mask-image:var(--image-file-list);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-popup,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-popup,\n[is="ui-icon"].force-white-icons.spritesheet-popup,\n.-theme-preserve{-webkit-mask-image:var(--image-file-popup);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-profile,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-profile,\n[is="ui-icon"].force-white-icons.spritesheet-profile,\n.-theme-preserve{-webkit-mask-image:var(--image-file-profile);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-sync,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-sync,\n[is="ui-icon"].force-white-icons.spritesheet-sync,\n.-theme-preserve{-webkit-mask-image:var(--image-file-sync);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-table,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-table,\n[is="ui-icon"].force-white-icons.spritesheet-table,\n.-theme-preserve{-webkit-mask-image:var(--image-file-table);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-triangle-right,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-triangle-right,\n[is="ui-icon"].force-white-icons.spritesheet-triangle-right,\n.-theme-preserve{-webkit-mask-image:var(--image-file-triangle-right);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-warning,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-warning,\n[is="ui-icon"].force-white-icons.spritesheet-warning,\n.-theme-preserve{-webkit-mask-image:var(--image-file-warning);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-watch,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-watch,\n[is="ui-icon"].force-white-icons.spritesheet-watch,\n.-theme-preserve{-webkit-mask-image:var(--image-file-watch);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.dot::before{content:url("Images/empty.svg");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(--color-tertiary-bright)}.purple::before{background-color:var(--color-purple-bright)}.expandable-inline-button{background-color:var(--color-background-elevation-2);color:var(--color-text-primary);cursor:pointer;border-radius:3px}.undisplayable-text,\n.expandable-inline-button{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(--color-text-disabled);font-style:italic}.expandable-inline-button:hover,\n.expandable-inline-button:focus-visible{background-color:var(--color-background-elevation-1)}.expandable-inline-button:focus-visible{background-color:var(--color-background-elevation-1)}::selection{--override-selection-background-color:rgb(141 199 248/60%);background-color:var(--override-selection-background-color)}.-theme-with-dark-background *::selection,\n:host-context(.-theme-with-dark-background) *::selection{background-color:rgb(93 93 93/60%)}.reload-warning{align-self:center;margin-left:10px}button.link{border:none;background:none;padding:3px}button.link:focus-visible{--override-link-focus-background-color:rgb(0 0 0/8%);background-color:var(--override-link-focus-background-color);border-radius:2px}.-theme-with-dark-background button.link:focus-visible,\n:host-context(.-theme-with-dark-background) button.link:focus-visible{--override-link-focus-background-color:rgb(230 230 230/8%)}@media (forced-colors: active){.dimmed,\n  .chrome-select:disabled{opacity:100%}[is="ui-icon"].icon-mask,\n  .force-white-icons [is="ui-icon"].spritesheet-smallicons,\n  :host-context(.force-white-icons) [is="ui-icon"].spritesheet-smallicons,\n  [is="ui-icon"].force-white-icons.spritesheet-smallicons,\n  .force-white-icons [is="ui-icon"].spritesheet-largeicons,\n  :host-context(.force-white-icons) [is="ui-icon"].spritesheet-largeicons,\n  [is="ui-icon"].force-white-icons.spritesheet-largeicons,\n  .force-white-icons [is="ui-icon"].spritesheet-mediumicons,\n  :host-context(.force-white-icons) [is="ui-icon"].spritesheet-mediumicons,\n  [is="ui-icon"].force-white-icons.spritesheet-mediumicons,\n  .-theme-preserve{forced-color-adjust:none;background-color:ButtonText}.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;cursor:pointer;width:16px;height:15px;margin-right:0;background-position:-32px 32px;background-image:var(--image-file-mediumIcons)}.spinner::before{display:block;width:var(--dimension,24px);height:var(--dimension,24px);border:var(--override-spinner-size,3px) solid var(--override-spinner-color,var(--color-text-secondary));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-block}.adorner-container.hidden{display:none}.adorner-container devtools-adorner{margin-left:3px}:host-context(.-theme-with-dark-background) devtools-adorner{--override-adorner-background-color:rgb(var(--color-syntax-2-rgb)/15%);--override-adorner-border-color:rgb(var(--color-syntax-2-rgb)/50%);--override-adorner-focus-border-color:var(--color-syntax-2);--override-adorner-active-background-color:var(--color-syntax-8)}.panel{display:flex;overflow:hidden;position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;background-color:var(--color-background)}.panel-sidebar{overflow-x:hidden;background-color:var(--color-background-elevation-1)}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}}\n/*# sourceURL=inspectorCommon.css */\n');const qe=new CSSStyleSheet;qe.replaceSync(".query:not(.editing-query){overflow:hidden}.editable .query-text{color:var(--color-text-primary)}.editable .query-text:hover{text-decoration:var(--override-styles-section-text-hover-text-decoration);cursor:var(--override-styles-section-text-hover-cursor)}\n/*# sourceURL=cssQuery.css */\n");const{render:Ge,html:Ve}=r;class Ue extends HTMLElement{static litTagName=r.literal`devtools-css-query`;#e=this.attachShadow({mode:"open"});#T="";#O;#C="";#N;set data(e){this.#T=e.queryPrefix,this.#O=e.queryName,this.#C=e.queryText,this.#N=e.onQueryTextClick,this.#s()}connectedCallback(){this.#e.adoptedStyleSheets=[qe,Fe]}#s(){const e=r.Directives.classMap({query:!0,editable:Boolean(this.#N)}),t=Ve` <span class="query-text" @click="${this.#N}">${this.#C}</span> `;Ge(Ve` <div class="${e}"> ${this.#T?Ve`<span>${this.#T+" "}</span>`:r.nothing}${this.#O?Ve`<span>${this.#O+" "}</span>`:r.nothing}${t} </div> `,this.#e,{host:this})}}i.CustomElements.defineComponent("devtools-css-query",Ue);var Qe=Object.freeze({__proto__:null,CSSQuery:Ue});const We=new CSSStyleSheet;We.replaceSync(".variable-value-popup-wrapper{padding:4px 8px}\n/*# sourceURL=cssVariableValueView.css */\n");const{render:Ye,html:Xe}=r;class Ke extends HTMLElement{static litTagName=r.literal`devtools-css-variable-value-view`;#e=this.attachShadow({mode:"open"});#M;constructor(e){super(),this.#M=e,this.#e.adoptedStyleSheets=[We],this.#s()}#s(){Ye(Xe` <div class="variable-value-popup-wrapper">${this.#M}</div> `,this.#e,{host:this})}}i.CustomElements.defineComponent("devtools-css-variable-value-view",Ke);var Je=Object.freeze({__proto__:null,CSSVariableValueView:Ke});const Ze=new CSSStyleSheet;Ze.replaceSync(":host{--override-node-text-label-color:var(--color-syntax-2);--override-node-text-class-color:var(--color-syntax-4);--override-node-text-id-color:var(--color-syntax-4);--override-node-text-multiple-descriptors-id:var(--color-syntax-7);--override-node-text-multiple-descriptors-class:var(--color-syntax-4)}.crumbs{display:inline-flex;align-items:stretch;width:100%;overflow:hidden;pointer-events:auto;cursor:default;white-space:nowrap;position:relative;background:var(--color-background);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(--color-background-elevation-1);color:var(--color-text-secondary);margin:1px;outline:var(--color-background-elevation-1) solid 1px}.overflow.hidden{display:none}.overflow:disabled{opacity:50%}.overflow:focus{outline-color:var(--color-primary-old)}.overflow:not(:disabled):hover{background-color:var(--color-background-elevation-2);color:var(--color-text-primary)}.crumb-link{text-decoration:none;color:inherit}.crumb:hover{background:var(--color-background-elevation-2)}.crumb.selected{background:var(--color-background-elevation-1)}.crumb:focus{outline:var(--color-primary-old) auto 1px}\n/*# sourceURL=elementsBreadcrumbs.css */\n");const et={text:"(text)"},tt=e.i18n.registerUIStrings("panels/elements/components/ElementsBreadcrumbsUtils.ts",et),it=e.i18n.getLocalizedString.bind(void 0,tt),ot=(e,t)=>t?e.filter((e=>e.nodeType!==Node.DOCUMENT_NODE)).map((e=>({title:nt(e),selected:e.id===t.id,node:e,originalNode:e.legacyDomNode}))).reverse():[],rt=(e,t={})=>({main:e,extras:t}),nt=e=>{switch(e.nodeType){case Node.ELEMENT_NODE:{if(e.pseudoType)return rt("::"+e.pseudoType);const t=rt(e.nodeNameNicelyCased),i=e.getAttribute("id");i&&(t.extras.id=i);const o=e.getAttribute("class");if(o){const e=new Set(o.split(/\s+/));t.extras.classes=Array.from(e)}return t}case Node.TEXT_NODE:return rt(it(et.text));case Node.COMMENT_NODE:return rt("\x3c!--\x3e");case Node.DOCUMENT_TYPE_NODE:return rt("<!doctype>");case Node.DOCUMENT_FRAGMENT_NODE:return rt(e.shadowRootType?"#shadow-root":e.nodeNameNicelyCased);default:return rt(e.nodeNameNicelyCased)}};var st=Object.freeze({__proto__:null,crumbsToRender:ot,determineElementTitle:nt});const at={breadcrumbs:"DOM tree breadcrumbs",scrollLeft:"Scroll left",scrollRight:"Scroll right"},ct=e.i18n.registerUIStrings("panels/elements/components/ElementsBreadcrumbs.ts",at),lt=e.i18n.getLocalizedString.bind(void 0,ct);class dt extends Event{static eventName="breadcrumbsnodeselected";legacyDomNode;constructor(e){super(dt.eventName,{}),this.legacyDomNode=e.legacyDomNode}}const ht=o.RenderCoordinator.RenderCoordinator.instance();class pt extends HTMLElement{static litTagName=r.literal`devtools-elements-breadcrumbs`;#e=this.attachShadow({mode:"open"});#E=new ResizeObserver((()=>this.#_()));#$=this.#s.bind(this);#L=[];#I=null;#z=!1;#D="start";#P=!1;#R=!1;connectedCallback(){this.#e.adoptedStyleSheets=[Ze]}set data(e){this.#I=e.selectedNode,this.#L=e.crumbs,this.#R=!1,i.ScheduledRender.scheduleRender(this,this.#$)}disconnectedCallback(){this.#P=!1,this.#E.disconnect()}#j(e){return t=>{t.preventDefault(),this.dispatchEvent(new dt(e))}}async#_(){const e=this.#e.querySelector(".crumbs-scroll-container"),t=this.#e.querySelector(".crumbs-window");if(!e||!t)return;const i=await ht.read((()=>t.clientWidth)),o=await ht.read((()=>e.clientWidth));this.#z?o<i&&(this.#z=!1):o>i&&(this.#z=!0),this.#H(),this.#B(t)}#A(e){return()=>e.highlightNode()}#F(e){return()=>e.clearHighlight()}#q(e){return()=>e.highlightNode()}#G(e){return()=>e.clearHighlight()}#V(){if(!this.#E||!0===this.#P)return;const e=this.#e.querySelector(".crumbs");e&&(this.#E.observe(e),this.#P=!0)}async#U(){const e=this.#e.querySelector(".crumbs-scroll-container"),t=this.#e.querySelector(".crumbs-window");if(!e||!t)return;const i=await ht.read((()=>t.clientWidth)),o=await ht.read((()=>e.clientWidth));this.#z?o<i&&(this.#z=!1,this.#s()):o>i&&(this.#z=!0,this.#s())}#Q(e){if(!e.target)return;const t=e.target;this.#B(t)}#B(e){const t=e.scrollWidth-e.clientWidth,i=e.scrollLeft;this.#D=i<10?"start":i>=t-10?"end":"middle",this.#s()}#W(e){return()=>{this.#R=!0;const t=this.#e.querySelector(".crumbs-window");if(!t)return;const i=t.clientWidth/2,o="left"===e?Math.max(Math.floor(t.scrollLeft-i),0):t.scrollLeft+i;t.scrollTo({behavior:"smooth",left:o})}}#Y(e,t){const i=r.Directives.classMap({overflow:!0,[e]:!0,hidden:!this.#z}),o=lt("left"===e?at.scrollLeft:at.scrollRight);return r.html` <button class="${i}" @click="${this.#W(e)}" ?disabled="${t}" aria-label="${o}" title="${o}"> <${a.Icon.Icon.litTagName} .data="${{iconName:"triangle-"+e,color:"var(--color-text-primary)",width:"12px",height:"10px"}}"> </${a.Icon.Icon.litTagName}> </button> `}#s(){const e=ot(this.#L,this.#I);r.render(r.html` <nav class="crumbs" aria-label="${lt(at.breadcrumbs)}"> ${this.#Y("left","start"===this.#D)} <div class="crumbs-window" @scroll="${this.#Q}"> <ul class="crumbs-scroll-container"> ${e.map((e=>{const t={crumb:!0,selected:e.selected};return r.html` <li class="${r.Directives.classMap(t)}" data-node-id="${e.node.id}" data-crumb="true"> <a href="#" draggable="false" class="crumb-link" @click="${this.#j(e.node)}" @mousemove="${this.#A(e.node)}" @mouseleave="${this.#F(e.node)}" @focus="${this.#q(e.node)}" @blur="${this.#G(e.node)}"><${c.NodeText.NodeText.litTagName} data-node-title="${e.title.main}" .data="${{nodeTitle:e.title.main,nodeId:e.title.extras.id,nodeClasses:e.title.extras.classes}}"></${c.NodeText.NodeText.litTagName}></a> `}))} </ul> </div> ${this.#Y("right","end"===this.#D)} </nav> `,this.#e,{host:this}),this.#U(),this.#V(),this.#H()}async#H(){if(!this.#I||!this.#e||!this.#z||this.#R)return;const e=this.#I.id,t=this.#e.querySelector(`.crumb[data-node-id="${e}"]`);t&&await ht.scroll((()=>{t.scrollIntoView({behavior:"auto"})}))}}i.CustomElements.defineComponent("devtools-elements-breadcrumbs",pt);var mt=Object.freeze({__proto__:null,NodeSelectedEvent:dt,ElementsBreadcrumbs:pt});const ut=new CSSStyleSheet;ut.replaceSync(":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(--color-details-hairline));border-radius:10px;background:var(--override-adorner-background-color,var(--color-background-elevation-1))}.expand-button:hover{background:var(--color-background-elevation-2)}.dot{height:2px;width:2px;background:var(--color-text-disabled);border-radius:50%}.dot + .dot{margin-left:1px}\n/*# sourceURL=elementsTreeExpandButton.css */\n");class gt extends HTMLElement{static litTagName=r.literal`devtools-elements-tree-expand-button`;#e=this.attachShadow({mode:"open"});#X=()=>{};set data(e){this.#X=e.clickHandler,this.#K()}#K(){this.#s()}connectedCallback(){this.#e.adoptedStyleSheets=[ut]}#s(){r.render(r.html`<span class="expand-button" @click="${this.#X}"><span class="dot"></span><span class="dot"></span><span class="dot"></span></span>`,this.#e,{host:this})}}i.CustomElements.defineComponent("devtools-elements-tree-expand-button",gt);var ft=Object.freeze({__proto__:null,ElementsTreeExpandButton:gt});const vt=e=>({parentNode:e.parentNode?vt(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:()=>l.OverlayModel.OverlayModel.hideDOMNodeHighlight(),getAttribute:e.getAttribute.bind(e)});var bt=Object.freeze({__proto__:null,legacyNodeToElementsComponentsNode:vt});const kt=new CSSStyleSheet;kt.replaceSync('*{box-sizing:border-box;font-size:12px}.header{background-color:var(--color-background-elevation-1);border-bottom:var(--legacy-divider-border);line-height:1.6;overflow:hidden;padding:0 5px;white-space:nowrap}.header::marker{color:rgb(110 110 110);font-size:11px;line-height:1}.header:focus{background-color:var(--legacy-focus-bg-color)}.content-section{padding:16px;border-bottom:var(--legacy-divider-border);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}.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}.select-label{display:flex;flex-direction:column}.select-label span{margin-bottom:4px}.elements{margin-top:12px;color:var(--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}.show-element{margin:0 0 0 8px;cursor:pointer;flex:none;--icon-show-element:var(--icon-default)}.show-element:focus,\n.show-element:hover{--icon-show-element:var(--icon-default-hover)}.chrome-select{min-width:0;max-width:150px}.color-picker{opacity:0%}.color-picker-label{border:1px solid rgb(128 128 128/60%);cursor:default;display:inline-block;flex:none;height:10px;margin:0 0 0 8px;width:10px;position:relative}.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(--legacy-accent-color-hover);transform:scale(1.2)}.node-text-container{line-height:16px;padding:0 0.5ex;border-radius:5px}.node-text-container:hover{background-color:var(--item-hover-color)}\n/*# sourceURL=layoutPane.css */\n');const wt={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."},yt=e.i18n.registerUIStrings("panels/elements/components/LayoutPane.ts",wt),xt=e.i18n.getLocalizedString.bind(void 0,yt),{render:St,html:Tt}=r,Ot=e=>{const t=e.getAttribute("class");return{id:e.id,color:"#000",name:e.localName(),domId:e.getAttribute("id"),domClasses:t?t.split(/\s+/).filter((e=>Boolean(e))):void 0,enabled:!1,reveal:()=>{s.Revealer.reveal(e),e.scrollIntoView()},highlight:()=>{e.highlight()},hideHighlight:()=>{l.OverlayModel.OverlayModel.hideDOMNodeHighlight()},toggle:e=>{throw new Error("Not implemented")},setColor(e){throw new Error("Not implemented")}}},Ct=e=>e.map((e=>{const t=Ot(e),i=e.id;return{...t,color:e.domModel().overlayModel().colorOfGridInPersistentOverlay(i)||"#000",enabled:e.domModel().overlayModel().isHighlightedGridInPersistentOverlay(i),toggle:t=>{t?e.domModel().overlayModel().highlightGridInPersistentOverlay(i):e.domModel().overlayModel().hideGridInPersistentOverlay(i)},setColor(t){this.color=t,e.domModel().overlayModel().setColorOfGridInPersistentOverlay(i,t)}}})),Nt=e=>e.map((e=>{const t=Ot(e),i=e.id;return{...t,color:e.domModel().overlayModel().colorOfFlexInPersistentOverlay(i)||"#000",enabled:e.domModel().overlayModel().isHighlightedFlexContainerInPersistentOverlay(i),toggle:t=>{t?e.domModel().overlayModel().highlightFlexContainerInPersistentOverlay(i):e.domModel().overlayModel().hideFlexContainerInPersistentOverlay(i)},setColor(t){this.color=t,e.domModel().overlayModel().setColorOfFlexInPersistentOverlay(i,t)}}}));function Mt(e){return e.type===s.Settings.SettingType.ENUM}function Et(e){return e.type===s.Settings.SettingType.BOOLEAN}const _t=o.RenderCoordinator.RenderCoordinator.instance();let $t;class Lt extends d.LegacyWrapper.WrappableComponent{static litTagName=r.literal`devtools-layout-pane`;#e=this.attachShadow({mode:"open"});#p=[];#J;#Z;constructor(){super(),this.#p=this.#ee(),this.#J=s.Settings.Settings.instance().moduleSetting("showUAShadowDOM"),this.#Z=[],this.#e.adoptedStyleSheets=[n.checkboxStyles,kt,Fe]}static instance(){return $t||($t=d.LegacyWrapper.legacyWrapper(h.Widget.Widget,new Lt)),$t.getComponent()}modelAdded(e){const t=e.overlayModel();t.addEventListener(l.OverlayModel.Events.PersistentGridOverlayStateChanged,this.render,this),t.addEventListener(l.OverlayModel.Events.PersistentFlexContainerOverlayStateChanged,this.render,this),this.#Z.push(e)}modelRemoved(e){const t=e.overlayModel();t.removeEventListener(l.OverlayModel.Events.PersistentGridOverlayStateChanged,this.render,this),t.removeEventListener(l.OverlayModel.Events.PersistentFlexContainerOverlayStateChanged,this.render,this),this.#Z=this.#Z.filter((t=>t!==e))}async#te(e){const t=this.#J.get(),i=[];for(const o of this.#Z)try{const r=await o.getNodesByStyle(e,!0);for(const e of r){const r=o.nodeForId(e);null===r||!t&&r.ancestorUserAgentShadowRoot()||i.push(r)}}catch(e){console.warn(e)}return i}async#ie(){return await this.#te([{name:"display",value:"grid"},{name:"display",value:"inline-grid"}])}async#oe(){return await this.#te([{name:"display",value:"flex"},{name:"display",value:"inline-flex"}])}#ee(){const e=[];for(const t of["showGridLineLabels","showGridTrackSizes","showGridAreas","extendGridLines"]){const i=s.Settings.Settings.instance().moduleSetting(t),o=i.get(),r=i.type();if(!r)throw new Error("A setting provided to LayoutSidebarPane does not have a setting type");if(r!==s.Settings.SettingType.BOOLEAN&&r!==s.Settings.SettingType.ENUM)throw new Error("A setting provided to LayoutSidebarPane does not have a supported setting type");const n={type:r,name:i.name,title:i.title()};("boolean"==typeof o||"string"==typeof o)&&e.push({...n,value:o,options:i.options().map((e=>({...e,value:e.value})))})}return e}onSettingChanged(e,t){s.Settings.Settings.instance().moduleSetting(e).set(t)}wasShown(){for(const e of this.#p)s.Settings.Settings.instance().moduleSetting(e.name).addChangeListener(this.render,this);for(const e of this.#Z)this.modelRemoved(e);this.#Z=[],l.TargetManager.TargetManager.instance().observeModels(l.DOMModel.DOMModel,this,{scoped:!0}),h.Context.Context.instance().addFlavorChangeListener(l.DOMModel.DOMNode,this.render,this),this.#J.addChangeListener(this.render,this),this.render()}willHide(){for(const e of this.#p)s.Settings.Settings.instance().moduleSetting(e.name).removeChangeListener(this.render,this);l.TargetManager.TargetManager.instance().unobserveModels(l.DOMModel.DOMModel,this),h.Context.Context.instance().removeFlavorChangeListener(l.DOMModel.DOMNode,this.render,this),this.#J.removeChangeListener(this.render,this)}#re(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=Ct(await this.#ie()),t=Nt(await this.#oe());await _t.write("LayoutPane render",(()=>{St(Tt` <details open> <summary class="header" @keydown="${this.#re}"> ${xt(wt.grid)} </summary> <div class="content-section"> <h3 class="content-section-title">${xt(wt.overlayDisplaySettings)}</h3> <div class="select-settings"> ${this.#ne().map((e=>this.#se(e)))} </div> <div class="checkbox-settings"> ${this.#ae().map((e=>this.#ce(e)))} </div> </div> ${e?Tt`<div class="content-section"> <h3 class="content-section-title"> ${e.length?xt(wt.gridOverlays):xt(wt.noGridLayoutsFoundOnThisPage)} </h3> ${e.length?Tt`<div class="elements"> ${e.map((e=>this.#le(e)))} </div>`:""} </div>`:""} </details> ${void 0!==t?Tt` <details open> <summary class="header" @keydown="${this.#re}"> ${xt(wt.flexbox)} </summary> ${t?Tt`<div class="content-section"> <h3 class="content-section-title"> ${t.length?xt(wt.flexboxOverlays):xt(wt.noFlexboxLayoutsFoundOnThisPage)} </h3> ${t.length?Tt`<div class="elements"> ${t.map((e=>this.#le(e)))} </div>`:""} </div>`:""} </details> `:""} `,this.#e,{host:this})}))}#ne(){return this.#p.filter(Mt)}#ae(){return this.#p.filter(Et)}#de(e,t){t.preventDefault(),this.onSettingChanged(e.name,t.target.checked)}#he(e,t){t.preventDefault(),this.onSettingChanged(e.name,t.target.value)}#pe(e,t){t.preventDefault(),e.toggle(t.target.checked)}#me(e,t){t.preventDefault(),e.reveal()}#ue(e,t){t.preventDefault(),e.setColor(t.target.value),this.render()}#ge(e,t){t.preventDefault(),e.highlight()}#fe(e,t){t.preventDefault(),e.hideHighlight()}#le(e){const t=this.#pe.bind(this,e),i=this.#me.bind(this,e),o=this.#ue.bind(this,e),r=this.#ge.bind(this,e),n=this.#fe.bind(this,e);return Tt`<div class="element"> <label data-element="true" class="checkbox-label"> <input data-input="true" type="checkbox" .checked="${e.enabled}" @change="${t}"> <span class="node-text-container" data-label="true" @mouseenter="${r}" @mouseleave="${n}"> <${c.NodeText.NodeText.litTagName} .data="${{nodeId:e.domId,nodeTitle:e.name,nodeClasses:e.domClasses}}"></${c.NodeText.NodeText.litTagName}> </span> </label> <label @keyup="${e=>{if("Enter"!==e.key&&" "!==e.key)return;e.target.querySelector("input").click(),h.ARIAUtils.alert(xt(wt.colorPickerOpened)),e.preventDefault()}}" @keydown="${e=>{" "===e.key&&e.preventDefault()}}" class="color-picker-label" style="background: ${e.color};"> <input @change="${o}" @input="${o}" title="${xt(wt.chooseElementOverlayColor)}" tabindex="0" class="color-picker" type="color" value="${e.color}"> </label> <${a.Icon.Icon.litTagName} .data="${{iconName:"select-element",color:"var(--icon-show-element)",width:"16px"}}" tabindex="0" , @click="${i}" title="${xt(wt.showElementInTheElementsPanel)}" class="show-element"> </${a.Icon.Icon.litTagName}> </div>`}#ce(e){const t=this.#de.bind(this,e);return Tt`<label data-boolean-setting="true" class="checkbox-label" title="${e.title}"> <input data-input="true" type="checkbox" .checked="${e.value}" @change="${t}"> <span data-label="true">${e.title}</span> </label>`}#se(e){const t=this.#he.bind(this,e);return Tt`<label data-enum-setting="true" class="select-label" title="${e.title}"> <select class="chrome-select" data-input="true" @change="${t}"> ${e.options.map((t=>Tt`<option value="${t.value}" .selected="${e.value===t.value}">${t.title}`))} </select> </label>`}}i.CustomElements.defineComponent("devtools-layout-pane",Lt);var It=Object.freeze({__proto__:null,LayoutPane:Lt}),zt=Object.freeze({__proto__:null});const Dt=new CSSStyleSheet;Dt.replaceSync(".container-link{display:inline-block;color:var(--color-text-disabled)}.container-link:hover{color:var(--color-link)}.queried-size-details{color:var(--color-text-primary)}.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=queryContainer.css */\n");const{render:Pt,html:Rt}=r,{PhysicalAxis:jt,QueryAxis:Ht}=l.CSSContainerQuery;class Bt extends Event{static eventName="queriedsizerequested";constructor(){super(Bt.eventName,{})}}class At extends HTMLElement{static litTagName=r.literal`devtools-query-container`;#e=this.attachShadow({mode:"open"});#O;#ve;#be;#ke=!1;#we;set data(e){this.#O=e.queryName,this.#ve=e.container,this.#be=e.onContainerLinkClick,this.#s()}connectedCallback(){this.#e.adoptedStyleSheets=[Dt]}updateContainerQueriedSizeDetails(e){this.#we=e,this.#s()}async#ye(){this.#ve?.highlightNode("container-outline"),this.#ke=!0,this.dispatchEvent(new Bt)}#xe(){this.#ve?.clearHighlight(),this.#ke=!1,this.#s()}#s(){if(!this.#ve)return;let e,t;this.#O||(e=this.#ve.getAttribute("id"),t=this.#ve.getAttribute("class")?.split(/\s+/).filter(Boolean));const i=this.#O||this.#ve.nodeNameNicelyCased;Pt(Rt` → <a href="#" draggable="false" class="container-link" @click="${this.#be}" @mouseenter="${this.#ye}" @mouseleave="${this.#xe}"><${c.NodeText.NodeText.litTagName} data-node-title="${i}" .data="${{nodeTitle:i,nodeId:e,nodeClasses:t}}"></${c.NodeText.NodeText.litTagName}></a> ${this.#ke?this.#Se():r.nothing} `,this.#e,{host:this})}#Se(){if(!this.#we||""===this.#we.queryAxis)return r.nothing;const e="size"===this.#we.queryAxis,t=r.Directives.classMap({"axis-icon":!0,hidden:e,vertical:"Vertical"===this.#we.physicalAxis});return Rt` <span class="queried-size-details"> (${this.#we.queryAxis}<${a.Icon.Icon.litTagName} class="${t}" .data="${{iconName:"width",color:"var(--icon-default)"}}"></${a.Icon.Icon.litTagName}>) ${e&&this.#we.width?"width:":r.nothing} ${this.#we.width||r.nothing} ${e&&this.#we.height?"height:":r.nothing} ${this.#we.height||r.nothing} </span> `}}i.CustomElements.defineComponent("devtools-query-container",At);var Ft=Object.freeze({__proto__:null,QueriedSizeRequestedEvent:Bt,QueryContainer:At});const qt=new CSSStyleSheet;qt.replaceSync(".container{padding:12px;min-width:170px}.row{padding:0;color:var(--color-text-primary);padding-bottom:16px}.row:last-child{padding-bottom:0}.property{padding-bottom:4px;white-space:nowrap}.property-name{color:var(--color-syntax-1)}.property-value{color:var(--color-text-primary)}.property-value.not-authored{color:var(--color-text-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(--color-background-elevation-2);background-color:var(--color-background);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{--icon-color:var(--icon-default)}.button.selected{background-color:var(--color-background-elevation-1)}.button.selected devtools-icon{--icon-color:var(--icon-toggled)}\n/*# sourceURL=stylePropertyEditor.css */\n");const Gt={selectButton:"Add {propertyName}: {propertyValue}",deselectButton:"Remove {propertyName}: {propertyValue}"},Vt=e.i18n.registerUIStrings("panels/elements/components/StylePropertyEditor.ts",Gt),Ut=e.i18n.getLocalizedString.bind(void 0,Vt),{render:Qt,html:Wt,Directives:Yt}=r;class Xt extends Event{static eventName="propertyselected";data;constructor(e,t){super(Xt.eventName,{}),this.data={name:e,value:t}}}class Kt extends Event{static eventName="propertydeselected";data;constructor(e,t){super(Kt.eventName,{}),this.data={name:e,value:t}}}class Jt extends HTMLElement{#e=this.attachShadow({mode:"open"});#Te=new Map;#Oe=new Map;editableProperties=[];constructor(){super()}connectedCallback(){this.#e.adoptedStyleSheets=[qt]}getEditableProperties(){return this.editableProperties}set data(e){this.#Te=e.authoredProperties,this.#Oe=e.computedProperties,this.#s()}#s(){Qt(Wt` <div class="container"> ${this.editableProperties.map((e=>this.#Ce(e)))} </div> `,this.#e,{host:this})}#Ce(e){const t=this.#Te.get(e.propertyName),i=!t,o=t||this.#Oe.get(e.propertyName),r=Yt.classMap({"property-value":!0,"not-authored":i});return Wt`<div class="row"> <div class="property"> <span class="property-name">${e.propertyName}</span>: <span class="${r}">${o}</span> </div> <div class="buttons"> ${e.propertyValues.map((i=>this.#Ne(i,e.propertyName,i===t)))} </div> </div>`}#Ne(e,t,i=!1){const o=`${t}: ${e}`,r=this.findIcon(o,this.#Oe);if(!r)throw new Error(`Icon for ${o} is not found`);const n=`transform: rotate(${r.rotate}deg) scale(${r.scaleX}, ${r.scaleY})`,s=Yt.classMap({button:!0,selected:i}),c={propertyName:t,propertyValue:e},l=Ut(i?Gt.deselectButton:Gt.selectButton,c);return Wt`<button title="${l}" class="${s}" @click="${()=>this.#Me(t,e,i)}"> <${a.Icon.Icon.litTagName} style="${n}" .data="${{iconName:r.iconName,color:"var(--icon-color)",width:"20px",height:"20px"}}"></${a.Icon.Icon.litTagName}> </button>`}#Me(e,t,i){i?this.dispatchEvent(new Kt(e,t)):this.dispatchEvent(new Xt(e,t))}findIcon(e,t){throw new Error("Not implemented")}}class Zt extends Jt{editableProperties=ti;findIcon(e,t){return Re(e,t)}}i.CustomElements.defineComponent("devtools-flexbox-editor",Zt);class ei extends Jt{editableProperties=ii;findIcon(e,t){return He(e,t)}}i.CustomElements.defineComponent("devtools-grid-editor",ei);const ti=[{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"]}],ii=[{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 oi=Object.freeze({__proto__:null,PropertySelectedEvent:Xt,PropertyDeselectedEvent:Kt,StylePropertyEditor:Jt,FlexboxEditor:Zt,GridEditor:ei,FlexboxEditableProperties:ti,GridEditableProperties:ii});export{b as AccessibilityTreeNode,T as AdornerManager,I as AdornerSettingsPane,Z as CSSHintDetailsView,ae as CSSPropertyDocsView,Ae as CSSPropertyIconResolver,Qe as CSSQuery,Je as CSSVariableValueView,H as ComputedStyleProperty,G as ComputedStyleTrace,mt as ElementsBreadcrumbs,st as ElementsBreadcrumbsUtils,ft as ElementsTreeExpandButton,bt as Helper,It as LayoutPane,zt as LayoutPaneUtils,Ft as QueryContainer,oi as StylePropertyEditor};

package/dist/third-party/front_end/panels/elements/elements-legacy.js

@@ -0,0 +1 @@
+import*as e from"./elements.js";self.Elements=self.Elements||{},Elements=Elements||{},Elements.ClassesPaneWidget=e.ClassesPaneWidget.ClassesPaneWidget,Elements.ClassesPaneWidget.ButtonProvider=e.ClassesPaneWidget.ButtonProvider,Elements.ComputedStyleModel=e.ComputedStyleModel.ComputedStyleModel,Elements.ComputedStyleWidget=e.ComputedStyleWidget.ComputedStyleWidget,Elements.DOMLinkifier={},Elements.DOMLinkifier.Linkifier=e.DOMLinkifier.Linkifier,Elements.DOMPath={},Elements.DOMPath.fullQualifiedSelector=e.DOMPath.fullQualifiedSelector,Elements.DOMPath.cssPath=e.DOMPath.cssPath,Elements.DOMPath.jsPath=e.DOMPath.jsPath,Elements.DOMPath.xPath=e.DOMPath.xPath,Elements.ElementStatePaneWidget=e.ElementStatePaneWidget.ElementStatePaneWidget,Elements.ElementStatePaneWidget.ButtonProvider=e.ElementStatePaneWidget.ButtonProvider,Elements.ElementsPanel=e.ElementsPanel.ElementsPanel,Elements.ElementsPanel.ContextMenuProvider=e.ElementsPanel.ContextMenuProvider,Elements.ElementsPanel.DOMNodeRevealer=e.ElementsPanel.DOMNodeRevealer,Elements.ElementsPanel.CSSPropertyRevealer=e.ElementsPanel.CSSPropertyRevealer,Elements.ElementsActionDelegate=e.ElementsPanel.ElementsActionDelegate,Elements.ElementsPanel.PseudoStateMarkerDecorator=e.ElementsPanel.PseudoStateMarkerDecorator,Elements.ElementsTreeElement=e.ElementsTreeElement.ElementsTreeElement,Elements.ElementsTreeOutline=e.ElementsTreeOutline.ElementsTreeOutline,Elements.ElementsTreeOutline.Renderer=e.ElementsTreeOutline.Renderer,Elements.EventListenersWidget=e.EventListenersWidget.EventListenersWidget,Elements.InspectElementModeController=e.InspectElementModeController.InspectElementModeController,Elements.InspectElementModeController.ToggleSearchActionDelegate=e.InspectElementModeController.ToggleSearchActionDelegate,Elements.MarkerDecorator=e.MarkerDecorator.MarkerDecorator,Elements.GenericDecorator=e.MarkerDecorator.GenericDecorator,Elements.MetricsSidebarPane=e.MetricsSidebarPane.MetricsSidebarPane,Elements.NodeStackTraceWidget=e.NodeStackTraceWidget.NodeStackTraceWidget,Elements.PropertiesWidget=e.PropertiesWidget.PropertiesWidget,Elements.StylePropertiesSection=e.StylePropertiesSection.StylePropertiesSection,Elements.StylePropertyTreeElement=e.StylePropertyTreeElement.StylePropertyTreeElement,Elements.StylesSidebarPane=e.StylesSidebarPane.StylesSidebarPane,Elements.StylesSidebarPane.CSSPropertyPrompt=e.StylesSidebarPane.CSSPropertyPrompt,Elements.StylesSidebarPane.ButtonProvider=e.StylesSidebarPane.ButtonProvider;

package/dist/third-party/front_end/panels/elements/elements-meta.js

@@ -0,0 +1 @@
+import*as e from"../../core/common/common.js";import*as t from"../../core/root/root.js";import*as n from"../../core/sdk/sdk.js";import*as o from"../../ui/legacy/legacy.js";import*as i from"../../core/i18n/i18n.js";const a={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",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=i.i18n.registerUIStrings("panels/elements/elements-meta.ts",a),r=i.i18n.getLazilyComputedLocalizedString.bind(void 0,s);let l,c;async function g(){return l||(l=await import("./elements.js")),l}function d(e){return void 0===l?[]:e(l)}o.ViewManager.registerViewExtension({location:"panel",id:"elements",commandPrompt:r(a.showElements),title:r(a.elements),order:10,persistence:"permanent",hasToolbar:!1,loadView:async()=>(await g()).ElementsPanel.ElementsPanel.instance()}),o.ActionRegistration.registerActionExtension({actionId:"elements.show-styles",category:o.ActionRegistration.ActionCategory.ELEMENTS,title:r(a.showStyles),loadActionDelegate:async()=>(await g()).ElementsPanel.ElementsActionDelegate.instance()}),o.ActionRegistration.registerActionExtension({actionId:"elements.show-computed",category:o.ActionRegistration.ActionCategory.ELEMENTS,title:r(a.showComputedStyles),loadActionDelegate:async()=>(await g()).ElementsPanel.ElementsActionDelegate.instance()}),o.ViewManager.registerViewExtension({location:"elements-sidebar",id:"elements.eventListeners",commandPrompt:r(a.showEventListeners),title:r(a.eventListeners),order:5,hasToolbar:!0,persistence:"permanent",loadView:async()=>(await g()).EventListenersWidget.EventListenersWidget.instance()}),o.ViewManager.registerViewExtension({location:"elements-sidebar",id:"elements.domProperties",commandPrompt:r(a.showProperties),title:r(a.properties),order:7,persistence:"permanent",loadView:async()=>(await g()).PropertiesWidget.PropertiesWidget.instance()}),o.ViewManager.registerViewExtension({experiment:t.Runtime.ExperimentName.CAPTURE_NODE_CREATION_STACKS,location:"elements-sidebar",id:"elements.domCreation",commandPrompt:r(a.showStackTrace),title:r(a.stackTrace),order:10,persistence:"permanent",loadView:async()=>(await g()).NodeStackTraceWidget.NodeStackTraceWidget.instance()}),o.ViewManager.registerViewExtension({location:"elements-sidebar",id:"elements.layout",commandPrompt:r(a.showLayout),title:r(a.layout),order:4,persistence:"permanent",loadView:async()=>(await async function(){return c||(c=await import("./components/components.js")),c}()).LayoutPane.LayoutPane.instance().wrapper}),o.ActionRegistration.registerActionExtension({actionId:"elements.hide-element",category:o.ActionRegistration.ActionCategory.ELEMENTS,title:r(a.hideElement),loadActionDelegate:async()=>(await g()).ElementsPanel.ElementsActionDelegate.instance(),contextTypes:()=>d((e=>[e.ElementsPanel.ElementsPanel])),bindings:[{shortcut:"H"}]}),o.ActionRegistration.registerActionExtension({actionId:"elements.toggle-eye-dropper",category:o.ActionRegistration.ActionCategory.ELEMENTS,title:r(a.toggleEyeDropper),loadActionDelegate:async()=>(await g()).ElementsPanel.ElementsActionDelegate.instance(),contextTypes:()=>d((e=>[e.ColorSwatchPopoverIcon.ColorSwatchPopoverIcon])),bindings:[{shortcut:"c"}]}),o.ActionRegistration.registerActionExtension({actionId:"elements.edit-as-html",category:o.ActionRegistration.ActionCategory.ELEMENTS,title:r(a.editAsHtml),loadActionDelegate:async()=>(await g()).ElementsPanel.ElementsActionDelegate.instance(),contextTypes:()=>d((e=>[e.ElementsPanel.ElementsPanel])),bindings:[{shortcut:"F2"}]}),o.ActionRegistration.registerActionExtension({actionId:"elements.duplicate-element",category:o.ActionRegistration.ActionCategory.ELEMENTS,title:r(a.duplicateElement),loadActionDelegate:async()=>(await g()).ElementsPanel.ElementsActionDelegate.instance(),contextTypes:()=>d((e=>[e.ElementsPanel.ElementsPanel])),bindings:[{shortcut:"Shift+Alt+Down"}]}),o.ActionRegistration.registerActionExtension({actionId:"elements.copy-styles",category:o.ActionRegistration.ActionCategory.ELEMENTS,title:r(a.copyStyles),loadActionDelegate:async()=>(await g()).ElementsPanel.ElementsActionDelegate.instance(),contextTypes:()=>d((e=>[e.ElementsPanel.ElementsPanel])),bindings:[{shortcut:"Ctrl+Alt+C",platform:"windows,linux"},{shortcut:"Meta+Alt+C",platform:"mac"}]}),o.ActionRegistration.registerActionExtension({actionId:"elements.undo",category:o.ActionRegistration.ActionCategory.ELEMENTS,title:r(a.undo),loadActionDelegate:async()=>(await g()).ElementsPanel.ElementsActionDelegate.instance(),contextTypes:()=>d((e=>[e.ElementsPanel.ElementsPanel])),bindings:[{shortcut:"Ctrl+Z",platform:"windows,linux"},{shortcut:"Meta+Z",platform:"mac"}]}),o.ActionRegistration.registerActionExtension({actionId:"elements.redo",category:o.ActionRegistration.ActionCategory.ELEMENTS,title:r(a.redo),loadActionDelegate:async()=>(await g()).ElementsPanel.ElementsActionDelegate.instance(),contextTypes:()=>d((e=>[e.ElementsPanel.ElementsPanel])),bindings:[{shortcut:"Ctrl+Y",platform:"windows,linux"},{shortcut:"Meta+Shift+Z",platform:"mac"}]}),o.ActionRegistration.registerActionExtension({actionId:"elements.capture-area-screenshot",loadActionDelegate:async()=>(await g()).InspectElementModeController.ToggleSearchActionDelegate.instance(),condition:t.Runtime.ConditionName.CAN_DOCK,title:r(a.captureAreaScreenshot),category:o.ActionRegistration.ActionCategory.SCREENSHOT}),o.ActionRegistration.registerActionExtension({category:o.ActionRegistration.ActionCategory.ELEMENTS,actionId:"elements.toggle-element-search",toggleable:!0,loadActionDelegate:async()=>(await g()).InspectElementModeController.ToggleSearchActionDelegate.instance(),title:r(a.selectAnElementInThePageTo),iconClass:"select-element",bindings:[{shortcut:"Ctrl+Shift+C",platform:"windows,linux"},{shortcut:"Meta+Shift+C",platform:"mac"}]}),e.Settings.registerSettingExtension({category:e.Settings.SettingCategory.ELEMENTS,storageType:e.Settings.SettingStorageType.Synced,order:1,title:r(a.showUserAgentShadowDOM),settingName:"showUAShadowDOM",settingType:e.Settings.SettingType.BOOLEAN,defaultValue:!1}),e.Settings.registerSettingExtension({category:e.Settings.SettingCategory.ELEMENTS,storageType:e.Settings.SettingStorageType.Synced,order:2,title:r(a.wordWrap),settingName:"domWordWrap",settingType:e.Settings.SettingType.BOOLEAN,options:[{value:!0,title:r(a.enableDomWordWrap)},{value:!1,title:r(a.disableDomWordWrap)}],defaultValue:!0}),e.Settings.registerSettingExtension({category:e.Settings.SettingCategory.ELEMENTS,storageType:e.Settings.SettingStorageType.Synced,order:3,title:r(a.showHtmlComments),settingName:"showHTMLComments",settingType:e.Settings.SettingType.BOOLEAN,defaultValue:!0,options:[{value:!0,title:r(a.showHtmlComments)},{value:!1,title:r(a.hideHtmlComments)}]}),e.Settings.registerSettingExtension({category:e.Settings.SettingCategory.ELEMENTS,storageType:e.Settings.SettingStorageType.Synced,order:4,title:r(a.revealDomNodeOnHover),settingName:"highlightNodeOnHoverInOverlay",settingType:e.Settings.SettingType.BOOLEAN,defaultValue:!0}),e.Settings.registerSettingExtension({category:e.Settings.SettingCategory.ELEMENTS,storageType:e.Settings.SettingStorageType.Synced,order:5,title:r(a.showDetailedInspectTooltip),settingName:"showDetailedInspectTooltip",settingType:e.Settings.SettingType.BOOLEAN,defaultValue:!0}),e.Settings.registerSettingExtension({settingName:"showEventListenersForAncestors",settingType:e.Settings.SettingType.BOOLEAN,defaultValue:!0}),e.Settings.registerSettingExtension({category:e.Settings.SettingCategory.ADORNER,storageType:e.Settings.SettingStorageType.Synced,settingName:"adornerSettings",settingType:e.Settings.SettingType.ARRAY,defaultValue:[]}),e.Settings.registerSettingExtension({category:e.Settings.SettingCategory.ELEMENTS,storageType:e.Settings.SettingStorageType.Synced,title:r(a.showCSSDocumentationTooltip),settingName:"showCSSPropertyDocumentationOnHover",settingType:e.Settings.SettingType.BOOLEAN,defaultValue:!0}),o.ContextMenu.registerProvider({contextTypes:()=>[n.RemoteObject.RemoteObject,n.DOMModel.DOMNode,n.DOMModel.DeferredDOMNode],loadProvider:async()=>(await g()).ElementsPanel.ContextMenuProvider.instance(),experiment:void 0}),o.ViewManager.registerLocationResolver({name:"elements-sidebar",category:o.ViewManager.ViewLocationCategory.ELEMENTS,loadResolver:async()=>(await g()).ElementsPanel.ElementsPanel.instance()}),e.Revealer.registerRevealer({contextTypes:()=>[n.DOMModel.DOMNode,n.DOMModel.DeferredDOMNode,n.RemoteObject.RemoteObject],destination:e.Revealer.RevealerDestination.ELEMENTS_PANEL,loadRevealer:async()=>(await g()).ElementsPanel.DOMNodeRevealer.instance()}),e.Revealer.registerRevealer({contextTypes:()=>[n.CSSProperty.CSSProperty],destination:e.Revealer.RevealerDestination.STYLES_SIDEBAR,loadRevealer:async()=>(await g()).ElementsPanel.CSSPropertyRevealer.instance()}),o.Toolbar.registerToolbarItem({loadItem:async()=>(await g()).LayersWidget.ButtonProvider.instance(),order:1,location:o.Toolbar.ToolbarItemLocation.STYLES_SIDEBARPANE_TOOLBAR,showLabel:void 0,condition:void 0,separator:void 0,actionId:void 0}),o.Toolbar.registerToolbarItem({loadItem:async()=>(await g()).ElementStatePaneWidget.ButtonProvider.instance(),order:2,location:o.Toolbar.ToolbarItemLocation.STYLES_SIDEBARPANE_TOOLBAR,showLabel:void 0,condition:void 0,separator:void 0,actionId:void 0}),o.Toolbar.registerToolbarItem({loadItem:async()=>(await g()).ClassesPaneWidget.ButtonProvider.instance(),order:3,location:o.Toolbar.ToolbarItemLocation.STYLES_SIDEBARPANE_TOOLBAR,showLabel:void 0,condition:void 0,separator:void 0,actionId:void 0}),o.Toolbar.registerToolbarItem({loadItem:async()=>(await g()).StylesSidebarPane.ButtonProvider.instance(),order:100,location:o.Toolbar.ToolbarItemLocation.STYLES_SIDEBARPANE_TOOLBAR,showLabel:void 0,condition:void 0,separator:void 0,actionId:void 0}),o.Toolbar.registerToolbarItem({actionId:"elements.toggle-element-search",location:o.Toolbar.ToolbarItemLocation.MAIN_TOOLBAR_LEFT,order:0,showLabel:void 0,condition:void 0,separator:void 0,loadItem:void 0}),o.UIUtils.registerRenderer({contextTypes:()=>[n.DOMModel.DOMNode,n.DOMModel.DeferredDOMNode],loadRenderer:async()=>(await g()).ElementsTreeOutline.Renderer.instance()}),e.Linkifier.registerLinkifier({contextTypes:()=>[n.DOMModel.DOMNode,n.DOMModel.DeferredDOMNode],loadLinkifier:async()=>(await g()).DOMLinkifier.Linkifier.instance()});