@qilin-agent/experimental-inspector 0.0.0-stage → 3.1.6

package/lib/devtools/chunks/css_overview-6FosuoNY.js

@@ -0,0 +1,1288 @@
+import { n as e } from "./chunk-DF993M8W.js";
+import { X as t } from "./platform-BzB373NB.js";
+import { Pt as n, Vt as r, bt as i, d as a, dn as o, tn as s, wt as c } from "./common-qd_KLeYO.js";
+import { l } from "./root-DbVQo07X.js";
+import { $i as u, Ad as d, Al as f, Fo as p, Hr as ee, La as te, Md as m, Nd as h, Po as g, S as _, Vr as ne, Wo as v, Xf as y, Zo as b, ei as x, ff as S, ha as C, ii as re, kl as ie, mf as ae, ni as w, pf as oe, tl as se, vi as ce } from "./legacy-C0IOfyhX.js";
+import { b as T } from "./text_utils-ohNt_gua.js";
+import { C as E, c as D } from "./common-C6gzvSKg.js";
+import "./data_grid-6RZWyPx-.js";
+import { n as O, t as k } from "./helpers-BypUnKdS.js";
+import { i as le } from "./color_picker-CHmwJ7or.js";
+//#region node_modules/.pnpm/chrome-devtools-frontend@1.0.1638082/node_modules/chrome-devtools-frontend/front_end/panels/css_overview/CSSOverviewUnusedDeclarations.ts
+var ue = /* @__PURE__ */ e({ CSSOverviewUnusedDeclarations: () => M }), A = {
+	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`"
+}, de = c("panels/css_overview/CSSOverviewUnusedDeclarations.ts", A), j = i.bind(void 0, de), M = class {
+	static add(e, t, n) {
+		let r = e.get(t) || [];
+		r.push(n), e.set(t, r);
+	}
+	static checkForUnusedPositionValues(e, t, n, r, i, a, o, s) {
+		if (n[r] === "static") {
+			if (n[i] !== "auto") {
+				let r = j(A.topAppliedToAStatically);
+				this.add(e, r, {
+					declaration: `top: ${n[i]}`,
+					nodeId: t
+				});
+			}
+			if (n[a] !== "auto") {
+				let r = j(A.leftAppliedToAStatically);
+				this.add(e, r, {
+					declaration: `left: ${n[a]}`,
+					nodeId: t
+				});
+			}
+			if (n[o] !== "auto") {
+				let r = j(A.rightAppliedToAStatically);
+				this.add(e, r, {
+					declaration: `right: ${n[o]}`,
+					nodeId: t
+				});
+			}
+			if (n[s] !== "auto") {
+				let r = j(A.bottomAppliedToAStatically);
+				this.add(e, r, {
+					declaration: `bottom: ${n[s]}`,
+					nodeId: t
+				});
+			}
+		}
+	}
+	static checkForUnusedWidthAndHeightValues(e, t, n, r, i, a) {
+		if (n[r] === "inline") {
+			if (n[i] !== "auto") {
+				let r = j(A.widthAppliedToAnInlineElement);
+				this.add(e, r, {
+					declaration: `width: ${n[i]}`,
+					nodeId: t
+				});
+			}
+			if (n[a] !== "auto") {
+				let r = j(A.heightAppliedToAnInlineElement);
+				this.add(e, r, {
+					declaration: `height: ${n[a]}`,
+					nodeId: t
+				});
+			}
+		}
+	}
+	static checkForInvalidVerticalAlignment(e, t, n, r, i) {
+		if (!(!n[r] || n[r].startsWith("inline") || n[r].startsWith("table")) && n[i] !== "baseline") {
+			let r = j(A.verticalAlignmentAppliedTo);
+			this.add(e, r, {
+				declaration: `vertical-align: ${n[i]}`,
+				nodeId: t
+			});
+		}
+	}
+}, N = /* @__PURE__ */ e({ CSSOverviewModel: () => P }), P = class extends S {
+	#e;
+	#t;
+	#n;
+	constructor(e) {
+		super(e), this.#e = e.runtimeAgent(), this.#t = e.cssAgent(), this.#n = e.domsnapshotAgent();
+	}
+	async getNodeStyleStats() {
+		let e = /* @__PURE__ */ new Map(), t = /* @__PURE__ */ new Map(), i = /* @__PURE__ */ new Map(), o = /* @__PURE__ */ new Map(), c = /* @__PURE__ */ new Map(), l = /* @__PURE__ */ new Map(), u = /* @__PURE__ */ new Map(), d = {
+			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
+		}, f = (e) => e instanceof r ? e.hasAlpha() ? e.asString(n.HEXA) : e.asString(n.HEX) : e.asString(), p = (e, t, n) => {
+			if (e === -1) return;
+			let r = _[e];
+			if (!r) return;
+			let i = s(r);
+			if (!i || i.asLegacyColor().rgba()[3] === 0) return;
+			let a = f(i);
+			if (!a) return;
+			let o = n.get(a) || /* @__PURE__ */ new Set();
+			return o.add(t), n.set(a, o), i;
+		}, ee = (e) => new Set([
+			"altglyph",
+			"circle",
+			"ellipse",
+			"path",
+			"polygon",
+			"polyline",
+			"rect",
+			"svg",
+			"text",
+			"textpath",
+			"tref",
+			"tspan"
+		]).has(e.toLowerCase()), te = (e) => new Set([
+			"iframe",
+			"video",
+			"embed",
+			"img"
+		]).has(e.toLowerCase()), m = (e, t) => new Set([
+			"tr",
+			"td",
+			"thead",
+			"tbody"
+		]).has(e.toLowerCase()) && t.startsWith("table"), h = 0, { documents: g, strings: _ } = await this.#n.invoke_captureSnapshot(d);
+		for (let { nodes: r, layout: d } of g) {
+			h += d.nodeIndex.length;
+			for (let h = 0; h < d.styles.length; h++) {
+				let g = d.styles[h], ne = d.nodeIndex[h];
+				if (!r.backendNodeId || !r.nodeName) continue;
+				let v = r.backendNodeId[ne], y = r.nodeName[ne], [b, x, S, C, re, ie, ae, w, oe, se, ce, T, E, D, O, k, ue, A, de, j, N, P, fe, F] = g;
+				p(b, v, e);
+				let I = p(x, v, t);
+				if (ee(_[y]) && p(S, v, o), _[C] !== "0px" && p(re, v, c), _[ie] !== "0px" && p(ae, v, c), _[w] !== "0px" && p(oe, v, c), _[se] !== "0px" && p(ce, v, c), T && T !== -1) {
+					let e = _[T], t = l.get(e) || /* @__PURE__ */ new Map(), n = "font-size", r = "font-weight", i = "line-height", a = t.get(n) || /* @__PURE__ */ new Map(), o = t.get(r) || /* @__PURE__ */ new Map(), s = t.get(i) || /* @__PURE__ */ new Map();
+					if (E !== -1) {
+						let e = _[E], t = a.get(e) || [];
+						t.push(v), a.set(e, t);
+					}
+					if (D !== -1) {
+						let e = _[D], t = o.get(e) || [];
+						t.push(v), o.set(e, t);
+					}
+					if (O !== -1) {
+						let e = _[O], t = s.get(e) || [];
+						t.push(v), s.set(e, t);
+					}
+					t.set(n, a), t.set(r, o), t.set(i, s), l.set(e, t);
+				}
+				let L = I && d.blendedBackgroundColors && d.blendedBackgroundColors[h] !== -1 ? s(_[d.blendedBackgroundColors[h]]) : null;
+				if (I && L) {
+					let e = new le({
+						backgroundColors: [L.asString(n.HEXA)],
+						computedFontSize: E === -1 ? "" : _[E],
+						computedFontWeight: D === -1 ? "" : _[D]
+					}), t = I.asLegacyColor().blendWithAlpha(d.textColorOpacities ? d.textColorOpacities[h] : 1);
+					e.setColor(t);
+					let r = `${f(t)}_${f(L.asLegacyColor())}`;
+					if (a.instance().moduleSetting("apca").get()) {
+						let n = e.contrastRatioAPCA(), a = e.contrastRatioAPCAThreshold();
+						if (!(n && a && Math.abs(n) >= a) && n) {
+							let e = {
+								nodeId: v,
+								contrastRatio: n,
+								textColor: t,
+								backgroundColor: L,
+								thresholdsViolated: {
+									aa: !1,
+									aaa: !1,
+									apca: !0
+								}
+							};
+							i.has(r) ? i.get(r).push(e) : i.set(r, [e]);
+						}
+					} else {
+						let n = e.contrastRatioThreshold("aa") || 0, a = e.contrastRatioThreshold("aaa") || 0, o = e.contrastRatio() || 0;
+						if (n > o || a > o) {
+							let e = {
+								nodeId: v,
+								contrastRatio: o,
+								textColor: t,
+								backgroundColor: L,
+								thresholdsViolated: {
+									aa: n > o,
+									aaa: a > o,
+									apca: !1
+								}
+							};
+							i.has(r) ? i.get(r).push(e) : i.set(r, [e]);
+						}
+					}
+				}
+				M.checkForUnusedPositionValues(u, v, _, k, ue, j, A, de), !ee(_[y]) && !te(_[y]) && M.checkForUnusedWidthAndHeightValues(u, v, _, N, P, fe), F !== -1 && !m(_[y], _[N]) && M.checkForInvalidVerticalAlignment(u, v, _, N, F);
+			}
+		}
+		return {
+			backgroundColors: e,
+			textColors: t,
+			textColorContrastIssues: i,
+			fillColors: o,
+			borderColors: c,
+			fontInfo: l,
+			unusedDeclarations: u,
+			elementCount: h
+		};
+	}
+	getComputedStyleForNode(e) {
+		return this.#t.invoke_getComputedStyleForNode({ nodeId: e });
+	}
+	async getMediaQueries() {
+		let e = await this.#t.invoke_getMediaQueries(), t = /* @__PURE__ */ new Map();
+		if (!e) return t;
+		for (let n of e.medias) {
+			if (n.source === "linkedSheet") continue;
+			let e = t.get(n.text) || [];
+			e.push(n), t.set(n.text, e);
+		}
+		return t;
+	}
+	async getGlobalStylesheetStats() {
+		let { result: e } = await this.#e.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 (e.type === "object") return e.value;
+	}
+};
+S.register(P, {
+	capabilities: h.DOM,
+	autostart: !1
+});
+//#endregion
+//#region \0dsh-devtools:css:/home/runner/work/QiLin/QiLin/node_modules/.pnpm/chrome-devtools-frontend@1.0.1638082/node_modules/chrome-devtools-frontend/front_end/panels/css_overview/cssOverviewProcessingView.css.mjs
+var fe = "/**\n * Copyright 2019 The Chromium Authors\n * Use of this source code is governed by a BSD-style license that can be\n * found in the LICENSE file.\n */\n\n.overview-processing-view {\n  overflow: hidden;\n  padding: 16px;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n}\n\n.overview-processing-view h1 {\n  font-size: 16px;\n  text-align: center;\n  font-weight: normal;\n  margin: 0;\n  padding: 8px;\n}\n\n.overview-processing-view h2 {\n  font-size: 12px;\n  text-align: center;\n  font-weight: normal;\n  margin: 0;\n  padding-top: 32px;\n}\n", F = /* @__PURE__ */ e({
+	CSSOverviewProcessingView: () => he,
+	DEFAULT_VIEW: () => me
+}), I = { cancel: "Cancel" }, L = c("panels/css_overview/CSSOverviewProcessingView.ts", I), pe = i.bind(void 0, L), me = (e, t, n) => {
+	p(g`
+    <style>${fe}</style>
+    <div style="overflow:auto">
+      <div class="vbox overview-processing-view">
+        <h1>Processing page</h1>
+        <div>
+          <devtools-button
+              @click=${e.onCancel}
+              .jslogContext=${"css-overview.cancel-processing"}
+              .variant=${u.OUTLINED}>${pe(I.cancel)}</devtools-button>
+        </div>
+      </div>
+    </div>`, n);
+}, he = class extends w {
+	#e = () => {};
+	#t;
+	constructor(e, t = me) {
+		super(e), this.#t = t, this.requestUpdate();
+	}
+	set onCancel(e) {
+		this.#e = e, this.requestUpdate();
+	}
+	performUpdate() {
+		this.#t({ onCancel: this.#e }, {}, this.element);
+	}
+}, R = "/**\n * Copyright 2019 The Chromium Authors\n * Use of this source code is governed by a BSD-style license that can be\n * found in the LICENSE file.\n */\n\n@scope to (devtools-widget > *) {\n  .overview-completed-view {\n    overflow: auto;\n\n    --overview-default-padding: 28px;\n    --overview-icon-padding: 32px;\n  }\n\n  .overview-completed-view .summary ul,\n  .overview-completed-view .colors ul {\n    display: flex;\n    flex-wrap: wrap;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n\n  .overview-completed-view .summary ul {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, 140px);\n    gap: 16px;\n  }\n\n  .overview-completed-view .colors ul li {\n    display: inline-block;\n    margin: 0 0 16px;\n    padding: 0 8px 0 0;\n  }\n\n  .overview-completed-view .summary ul li {\n    display: flex;\n    flex-direction: column;\n    grid-column-start: auto;\n  }\n\n  .overview-completed-view li .label {\n    font-size: 12px;\n    padding-bottom: 2px;\n  }\n\n  .overview-completed-view li .value {\n    font-size: 17px;\n  }\n\n  .overview-completed-view ul li span {\n    font-weight: bold;\n  }\n\n  .unused-rules-grid .header-container,\n  .unused-rules-grid .data-container,\n  .unused-rules-grid table.data {\n    position: relative;\n  }\n\n  .unused-rules-grid .data-container {\n    top: 0;\n    max-height: 350px;\n  }\n\n  .unused-rules-grid {\n    border-left: none;\n    border-right: none;\n  }\n  /** Ensure links are rendered at the correct height */\n\n  .unused-rules-grid .monospace {\n    display: block;\n    height: 18px;\n  }\n\n  .element-grid {\n    flex: 1;\n    border-left: none;\n    border-right: none;\n    overflow: auto;\n  }\n\n  .block {\n    width: 65px;\n    height: 25px;\n    border-radius: 3px;\n    margin-right: 16px;\n\n    &:focus-visible {\n      outline: 2px solid var(--sys-color-state-focus-ring);\n      outline-offset: 2px;\n    }\n  }\n\n  .block-title {\n    padding-top: 4px;\n    font-size: 12px;\n    color: var(--sys-color-on-surface);\n    letter-spacing: 0;\n    text-transform: uppercase;\n  }\n\n  .block-title.color-text {\n    text-transform: none;\n    max-width: 65px;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    cursor: text;\n    user-select: text;\n    overflow: hidden;\n  }\n\n  .results-section {\n    flex-shrink: 0;\n    border-bottom: 1px solid var(--sys-color-divider);\n    padding: var(--overview-default-padding) 0 var(--overview-default-padding) 0;\n  }\n\n  .horizontally-padded {\n    padding-left: var(--overview-default-padding);\n    padding-right: var(--overview-default-padding);\n  }\n\n  .results-section h1 {\n    font-size: 15px;\n    font-weight: normal;\n    padding: 0;\n    margin: 0 0 20px;\n    padding-left: calc(var(--overview-default-padding) + var(--overview-icon-padding));\n    position: relative;\n    height: 26px;\n    line-height: 26px;\n  }\n\n  .results-section h1::before {\n    content: \"\";\n    display: block;\n    position: absolute;\n    left: var(--overview-default-padding);\n    top: 0;\n    width: 26px;\n    height: 26px;\n    /* stylelint-disable-next-line custom-property-pattern */\n    background-image: var(--image-file-cssoverview_icons_2x);\n    background-size: 104px 26px;\n  }\n\n  .results-section.horizontally-padded h1 {\n    padding-left: var(--overview-icon-padding);\n  }\n\n  .results-section.horizontally-padded h1::before {\n    left: 0;\n  }\n\n  .results-section.summary h1 {\n    padding-left: 0;\n  }\n\n  .results-section.summary h1::before {\n    display: none;\n  }\n\n  .results-section.colors h1::before {\n    background-position: 0 0;\n  }\n\n  .results-section.font-info h1::before {\n    background-position: -26px 0;\n  }\n\n  .results-section.unused-declarations h1::before {\n    background-position: -52px 0;\n  }\n\n  .results-section.media-queries h1::before {\n    background-position: -78px 0;\n  }\n\n  .results-section.colors h2 {\n    margin-top: 20px;\n    font-size: 13px;\n    font-weight: normal;\n  }\n\n  .overview-completed-view .font-info ul,\n  .overview-completed-view .media-queries ul,\n  .overview-completed-view .unused-declarations ul {\n    width: 100%;\n    list-style: none;\n    margin: 0;\n    padding: 0 var(--overview-default-padding);\n  }\n\n  .overview-completed-view .font-info ul li,\n  .overview-completed-view .media-queries ul li,\n  .overview-completed-view .unused-declarations ul li {\n    display: grid;\n    grid-template-columns: 2fr 3fr;\n    gap: 12px;\n    margin-bottom: 4px;\n    align-items: center;\n  }\n\n  .overview-completed-view .font-info button .details,\n  .overview-completed-view .media-queries button .details,\n  .overview-completed-view .unused-declarations button .details {\n    min-width: 100px;\n    text-align: right;\n    margin-right: 8px;\n    color: var(--sys-color-primary);\n    pointer-events: none;\n  }\n\n  .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 {\n    flex: 1;\n    pointer-events: none;\n  }\n\n  .overview-completed-view .font-info button .bar,\n  .overview-completed-view .media-queries button .bar,\n  .overview-completed-view .unused-declarations button .bar {\n    height: 8px;\n    background: var(--sys-color-primary-bright);\n    border-radius: 2px;\n    min-width: 2px;\n  }\n\n  .overview-completed-view .font-info button,\n  .overview-completed-view .media-queries button,\n  .overview-completed-view .unused-declarations button {\n    border: none;\n    padding: 0;\n    padding-right: 10px;\n    margin: 0;\n    display: flex;\n    align-items: center;\n    border-radius: 2px;\n    cursor: pointer;\n    height: 28px;\n    background: none;\n\n    &:focus-visible {\n      outline: 2px solid var(--sys-color-state-focus-ring);\n    }\n\n    &:hover {\n      border-radius: 12px;\n      background: var(--sys-color-state-hover-on-subtle);\n    }\n\n    &:hover .details,\n    &:focus .details {\n      color: color-mix(in srgb, var(--sys-color-primary), var(--sys-color-state-hover-on-prominent) 6%);\n    }\n\n    &:hover .bar,\n    &:focus .bar {\n      background-color: color-mix(in srgb, var(--sys-color-primary-bright), var(--sys-color-state-hover-on-prominent) 6%);\n      color: var(--sys-color-on-primary);\n    }\n  }\n\n  .overview-completed-view .font-info .font-metric {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n    gap: 12px;\n  }\n\n  .overview-completed-view .font-info ul {\n    padding: 0;\n  }\n\n  .overview-completed-view .font-info ul li {\n    grid-template-columns: 1fr 4fr;\n  }\n\n  .overview-completed-view .font-info h2 {\n    font-size: 14px;\n    font-weight: bold;\n    margin: 0 0 1em;\n  }\n\n  .overview-completed-view .font-info h3 {\n    font-size: 13px;\n    font-weight: normal;\n    font-style: italic;\n    margin: 0 0 0.5em;\n  }\n\n  .overview-completed-view .font-info {\n    padding-bottom: 0;\n  }\n\n  .overview-completed-view .font-family {\n    padding: var(--overview-default-padding);\n  }\n\n  .overview-completed-view .font-family:nth-child(2n+1) {\n    background: var(--sys-color-cdt-base-container);\n  }\n\n  .overview-completed-view .font-family:first-of-type {\n    padding-top: 0;\n  }\n\n  .contrast-warning {\n    display: flex;\n    align-items: center;\n    margin-top: 2px;\n  }\n\n  .contrast-warning .threshold-label {\n    font-weight: normal;\n    width: 30px;\n  }\n\n  .contrast-warning devtools-icon {\n    margin-left: 2px;\n  }\n\n  .contrast-preview {\n    padding: 0 5px;\n  }\n\n  .contrast-container-in-grid {\n    display: flex;\n    align-items: center;\n  }\n\n  .contrast-container-in-grid > * {\n    margin-right: 5px;\n    min-width: initial;\n  }\n\n  ::part(node-id-column) {\n    align-items: center;\n    height: 20px;\n\n    --show-element-display: none;\n  }\n\n  ::part(node-id-column):focus,\n  ::part(node-id-column):hover {\n    --show-element-display: inline-block;\n  }\n\n  ::part(show-element) {\n    display: var(--show-element-display);\n    height: 16px;\n    width: 16px;\n  }\n\n  .results-section.colors {\n    forced-color-adjust: none; /* show colors in high contrast theme */\n  }\n}\n", ge = "/**\n * Copyright 2019 The Chromium Authors\n * Use of this source code is governed by a BSD-style license that can be\n * found in the LICENSE file.\n */\n@scope to (devtools-widget > *) {\n  .overview-sidebar-panel {\n    display: flex;\n    background: var(--sys-color-cdt-base-container);\n    min-width: fit-content;\n    flex-direction: column;\n  }\n\n  .overview-sidebar-panel-item {\n    height: 30px;\n    padding-left: 30px;\n    display: flex;\n    align-items: center;\n    color: var(--sys-color-on-surface);\n    white-space: nowrap;\n\n    &:hover {\n      background: var(--sys-color-state-hover-on-subtle);\n    }\n\n    &:focus {\n      background: var(--sys-color-state-focus-highlight);\n    }\n\n    &.selected {\n      background: var(--sys-color-tonal-container);\n      color: var(--sys-color-on-tonal-container);\n    }\n  }\n\n  .overview-toolbar {\n    border-bottom: 1px solid var(--sys-color-divider);\n    flex: 0 0 auto;\n  }\n\n  .overview-sidebar-panel-item:focus-visible {\n    outline-width: unset;\n  }\n\n  @media (forced-colors: active) {\n    .overview-sidebar-panel-item.selected {\n      forced-color-adjust: none; /* crbug.com/1166705 workaround */\n      background: Highlight;\n      color: HighlightText;\n    }\n\n    .overview-sidebar-panel-item:hover {\n      forced-color-adjust: none; /* crbug.com/1166705 workaround */\n      background: Highlight;\n      color: HighlightText;\n    }\n  }\n}\n", _e = /* @__PURE__ */ e({
+	CSSOverviewSidebarPanel: () => Se,
+	DEFAULT_VIEW: () => xe
+}), { classMap: ve } = v, z = {
+	clearOverview: "Clear overview",
+	cssOverviewPanelSidebar: "CSS overview panel sidebar"
+}, ye = c("panels/css_overview/CSSOverviewSidebarPanel.ts", z), be = i.bind(void 0, ye), xe = (e, t, n) => {
+	p(g`
+      <style>${ge}</style>
+      <div class="overview-sidebar-panel" @click=${(t) => {
+		if (t.target instanceof HTMLElement) {
+			let n = t.target.dataset.id;
+			n && e.onItemClick(n);
+		}
+	}} @keydown=${(t) => {
+		if (!(t.key !== "Enter" && t.key !== "ArrowUp" && t.key !== "ArrowDown")) {
+			if (t.target instanceof HTMLElement) {
+				let n = t.target.dataset.id;
+				n && e.onItemKeyDown(n, t.key);
+			}
+			t.consume(!0);
+		}
+	}}
+           aria-label=${be(z.cssOverviewPanelSidebar)} role="tree">
+        <div class="overview-toolbar">
+          <devtools-toolbar>
+            <devtools-button title=${be(z.clearOverview)} @click=${e.onReset}
+                .iconName=${"clear"} .variant=${u.TOOLBAR}
+                .jslogContext=${"css-overview.clear-overview"}></devtools-button>
+          </devtools-toolbar>
+        </div>
+        ${e.items.map(({ id: t, name: n }) => {
+		let r = t === e.selectedId;
+		return g`
+            <div class="overview-sidebar-panel-item ${ve({ selected: r })}"
+                ?autofocus=${r}
+                role="treeitem" data-id=${t} tabindex="0"
+                jslog=${te(`css-overview.${t}`).track({
+			click: !0,
+			keydown: "Enter|ArrowUp|ArrowDown"
+		})}>
+              ${n}
+            </div>`;
+	})}
+      </div>`, n);
+}, Se = class extends x {
+	#e;
+	#t = [];
+	#n;
+	#r = (e, t) => {};
+	#i = () => {};
+	constructor(e, t = xe) {
+		super(e, {
+			useShadowDom: !0,
+			delegatesFocus: !0
+		}), this.#e = t;
+	}
+	performUpdate() {
+		let e = {
+			items: this.#t,
+			selectedId: this.#n,
+			onReset: this.#i,
+			onItemClick: this.#o.bind(this),
+			onItemKeyDown: this.#s.bind(this)
+		};
+		this.#e(e, {}, this.contentElement);
+	}
+	set items(e) {
+		this.#t = e, this.requestUpdate();
+	}
+	set selectedId(e) {
+		this.#a(e);
+	}
+	set onItemSelected(e) {
+		this.#r = e, this.requestUpdate();
+	}
+	set onReset(e) {
+		this.#i = e, this.requestUpdate();
+	}
+	#a(e, t = !1) {
+		return this.#n = e, this.requestUpdate(), this.#r(e, t), this.updateComplete;
+	}
+	#o(e) {
+		this.#a(e, !1);
+	}
+	#s(e, t) {
+		if (t === "Enter") this.#a(e, !0);
+		else {
+			let n = -1;
+			for (let t = 0; t < this.#t.length; t++) if (this.#t[t].id === e) {
+				n = t;
+				break;
+			}
+			if (n < 0) return;
+			let r = (n + (t === "ArrowDown" ? 1 : -1)) % this.#t.length, i = this.#t[r].id;
+			if (!i) return;
+			this.#a(i, !1).then(() => {
+				this.element.blur(), this.element.focus();
+			});
+		}
+	}
+}, Ce = /* @__PURE__ */ e({
+	CSSOverviewCompletedView: () => G,
+	DEFAULT_VIEW: () => Oe,
+	ELEMENT_DETAILS_DEFAULT_VIEW: () => Re,
+	ElementDetailsView: () => ze
+}), { styleMap: B, ref: V } = v, { widget: we } = re, H = {
+	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",
+	unableToLink: "(unable to link)",
+	unableToLinkToInlineStyle: "(unable to link to inline style)"
+}, Te = c("panels/css_overview/CSSOverviewCompletedView.ts", H), U = i.bind(void 0, Te);
+function Ee(e) {
+	let { h: t, s: r, l: i } = e.as(n.HSL);
+	return t = Math.round(t * 360), r = Math.round(r * 100), i = Math.round(i * 100), i = Math.max(0, i - 15), `1px solid hsl(${t}deg ${r}% ${i}%)`;
+}
+var De = new Intl.NumberFormat("en-US"), Oe = (e, t, n) => {
+	function r(e, t) {
+		e && (e.scrollIntoView(), t && e.querySelector("button, [tabindex=\"0\"]")?.focus());
+	}
+	p(g`
+      <style>${R}</style>
+      <devtools-split-view direction="column" sidebar-position="first" sidebar-initial-size="200">
+        <devtools-widget slot="sidebar" ${we(Se, {
+		minimumSize: new ce(100, 25),
+		items: [
+			{
+				name: U(H.overviewSummary),
+				id: "summary"
+			},
+			{
+				name: U(H.colors),
+				id: "colors"
+			},
+			{
+				name: U(H.fontInfo),
+				id: "font-info"
+			},
+			{
+				name: U(H.unusedDeclarations),
+				id: "unused-declarations"
+			},
+			{
+				name: U(H.mediaQueries),
+				id: "media-queries"
+			}
+		],
+		selectedId: e.selectedSection,
+		onItemSelected: e.onSectionSelected,
+		onReset: e.onReset
+	})}>
+        </devtools-widget>
+        <devtools-split-view sidebar-position="second" slot="main" direction="row" sidebar-initial-size="minimized">
+          <div class="vbox overview-completed-view" slot="main" @click=${e.onClick}>
+            <!-- Dupe the styles into the main container because of the shadow root will prevent outer styles. -->
+            <style>${R}</style>
+            <div class="results-section horizontally-padded summary"
+                  ${V((e) => {
+		t.revealSection.set("summary", r.bind(null, e));
+	})}>
+              <h1>${U(H.overviewSummary)}</h1>
+              ${ke(e.elementCount, e.globalStyleStats, e.mediaQueries)}
+            </div>
+            <div class="results-section horizontally-padded colors"
+                ${V((e) => {
+		t.revealSection.set("colors", r.bind(null, e));
+	})}>
+                <h1>${U(H.colors)}</h1>
+                ${Ae(e.backgroundColors, e.textColors, e.textColorContrastIssues, e.fillColors, e.borderColors)}
+              </div>
+              <div class="results-section font-info"
+                    ${V((e) => {
+		t.revealSection.set("font-info", r.bind(null, e));
+	})}>
+                <h1>${U(H.fontInfo)}</h1>
+                ${Ne(e.fontInfo)}
+              </div>
+              <div class="results-section unused-declarations"
+                    ${V((e) => {
+		t.revealSection.set("unused-declarations", r.bind(null, e));
+	})}>
+                <h1>${U(H.unusedDeclarations)}</h1>
+                ${je(e.unusedDeclarations)}
+              </div>
+              <div class="results-section media-queries"
+                    ${V((e) => {
+		t.revealSection.set("media-queries", r.bind(null, e));
+	})}>
+              <h1>${U(H.mediaQueries)}</h1>
+              ${Me(e.mediaQueries)}
+            </div>
+          </div>
+          <devtools-widget slot="sidebar" ${we((e) => {
+		let n = new ee(e);
+		return t.closeAllTabs = () => {
+			n.closeTabs(n.tabIds());
+		}, t.addTab = (e, t, r, i) => {
+			n.hasTab(e) || n.appendTab(e, t, r, void 0, void 0, !0, void 0, void 0, i), n.selectTab(e), n.parentWidget().setSidebarMinimized(!1);
+		}, n.addEventListener(ne.TabClosed, (e) => {
+			n.tabIds().length === 0 && n.parentWidget().setSidebarMinimized(!0);
+		}), n;
+	})}>
+          </devtools-widget>
+        </devtools-split-view>
+      </devtools-split-view>`, n);
+};
+function ke(e, t, n) {
+	let r = (e, t) => g`
+    <li>
+      <div class="label">${e}</div>
+      <div class="value">${De.format(t)}</div>
+    </li>`;
+	return g`<ul>
+    ${r(U(H.elements), e)}
+    ${r(U(H.externalStylesheets), t.externalSheets)}
+    ${r(U(H.inlineStyleElements), t.inlineStyles)}
+    ${r(U(H.styleRules), t.styleRules)}
+    ${r(U(H.mediaQueries), n.length)}
+    ${r(U(H.typeSelectors), t.stats.type)}
+    ${r(U(H.idSelectors), t.stats.id)}
+    ${r(U(H.classSelectors), t.stats.class)}
+    ${r(U(H.universalSelectors), t.stats.universal)}
+    ${r(U(H.attributeSelectors), t.stats.attribute)}
+    ${r(U(H.nonsimpleSelectors), t.stats.nonSimple)}
+  </ul>`;
+}
+function Ae(e, t, n, r, i) {
+	return g`
+    <h2>${U(H.backgroundColorsS, { PH1: e.length })}</h2>
+    <ul>${e.map((e) => W("background", e))}</ul>
+
+    <h2>${U(H.textColorsS, { PH1: t.length })}</h2>
+    <ul>${t.map((e) => W("text", e))}</ul>
+
+    ${n.size > 0 ? Ie(n) : ""}
+
+    <h2>${U(H.fillColorsS, { PH1: r.length })}</h2>
+    <ul>${r.map((e) => W("fill", e))}</ul>
+
+    <h2>${U(H.borderColorsS, { PH1: i.length })}</h2>
+    <ul>${i.map((e) => W("border", e))}</ul>`;
+}
+function je(e) {
+	return e.length > 0 ? Fe(e, "unused-declarations") : g`<div class="horizontally-padded">${U(H.thereAreNoUnusedDeclarations)}</div>`;
+}
+function Me(e) {
+	return e.length > 0 ? Fe(e, "media-queries") : g`<div class="horizontally-padded">${U(H.thereAreNoMediaQueries)}</div>`;
+}
+function Ne(e) {
+	return e.length > 0 ? g`${e.map(({ font: e, fontMetrics: t }) => g`
+    <section class="font-family">
+      <h2>${e}</h2>
+      ${Pe(e, t)}
+    </section>`)}` : g`<div>${U(H.thereAreNoFonts)}</div>`;
+}
+function Pe(e, t) {
+	return g`
+    <div class="font-metric">
+      ${t.map(({ label: t, values: n }) => g`
+        <div>
+          <h3>${t}</h3>
+          ${Fe(n, "font-info", `${e}/${t}`)}
+        </div>`)}
+    </div>`;
+}
+function Fe(e, t, n = "") {
+	let r = e.reduce((e, t) => e + t.nodes.length, 0);
+	return g`
+      <ul aria-label=${t}>
+        ${e.map(({ title: e, nodes: i }) => {
+		let a = 100 * i.length / r, o = U(H.nOccurrences, { n: i.length });
+		return g`<li>
+            <div class="title">${e}</div>
+            <button data-type=${t} data-path=${n} data-label=${e}
+            jslog=${C().track({ click: !0 }).context(`css-overview.${t}`)}
+            aria-label=${`${e}: ${o}`}>
+              <div class="details">${o}</div>
+              <div class="bar-container">
+                <div class="bar" style=${B({ width: a })}></div>
+              </div>
+            </button>
+          </li>`;
+	})}
+  </ul>`;
+}
+function Ie(e) {
+	return g`
+    <h2>${U(H.contrastIssuesS, { PH1: e.size })}</h2>
+    <ul>
+      ${[...e.entries()].map(([e, t]) => Le(e, t))}
+    </ul>`;
+}
+function Le(e, t) {
+	console.assert(t.length > 0);
+	let r = t[0];
+	for (let e of t) Math.abs(e.contrastRatio) < Math.abs(r.contrastRatio) && (r = e);
+	let i = r.textColor.asString(n.HEXA), o = r.backgroundColor.asString(n.HEXA), s = a.instance().moduleSetting("apca").get(), c = U(H.textColorSOverSBackgroundResults, {
+		PH1: i,
+		PH2: o,
+		PH3: t.length
+	});
+	return g`<li>
+    <button
+      title=${c} aria-label=${c}
+      data-type="contrast" data-key=${e} data-section="contrast" class="block"
+      style=${B({
+		color: i,
+		backgroundColor: o,
+		border: Ee(r.backgroundColor.asLegacyColor())
+	})}
+      jslog=${C("css-overview.contrast").track({ click: !0 })}>
+      Text
+    </button>
+    <div class="block-title">
+      ${s ? g`
+        <div class="contrast-warning hidden">
+          <span class="threshold-label">${U(H.apca)}</span>
+          ${r.thresholdsViolated.apca ? K() : q()}
+        </div>` : g`
+        <div class="contrast-warning hidden">
+          <span class="threshold-label">${U(H.aa)}</span>
+          ${r.thresholdsViolated.aa ? K() : q()}
+        </div>
+        <div class="contrast-warning hidden">
+          <span class="threshold-label">${U(H.aaa)}</span>
+          ${r.thresholdsViolated.aaa ? K() : q()}
+        </div>`}
+    </div>
+  </li>`;
+}
+function W(e, t) {
+	let n = s(t)?.asLegacyColor();
+	return n ? g`<li>
+    <button title=${t} data-type="color" data-color=${t}
+      data-section=${e} class="block"
+      style=${B({
+		backgroundColor: t,
+		border: Ee(n)
+	})}
+      jslog=${C("css-overview.color").track({ click: !0 })}>
+    </button>
+    <div class="block-title color-text">${t}</div>
+  </li>` : b;
+}
+var G = class e extends x {
+	onReset = () => {};
+	#e = "summary";
+	#t;
+	#n;
+	#r;
+	#i;
+	#a;
+	#o;
+	#s = {
+		revealSection: /* @__PURE__ */ new Map(),
+		closeAllTabs: () => {},
+		addTab: (e, t, n, r) => {}
+	};
+	constructor(e, t = Oe) {
+		super(e), this.#o = t, this.registerRequiredCSS(R), this.#r = new E(20, !0), this.#i = /* @__PURE__ */ new Map(), this.#a = null;
+	}
+	set target(e) {
+		if (!e) return;
+		let t = e.model(f), n = e.model(se);
+		if (!t || !n) throw Error("Target must provide CSS and DOM models");
+		this.#t = t, this.#n = n;
+	}
+	#c(e, t) {
+		let n = this.#s.revealSection.get(e);
+		n && n(t);
+	}
+	#l() {
+		this.#u(), this.onReset();
+	}
+	#u() {
+		this.#s.closeAllTabs(), this.#i = /* @__PURE__ */ new Map(), e.pushedNodes.clear(), this.#e = "summary", this.requestUpdate();
+	}
+	#d(e) {
+		if (!e.target) return;
+		let t = e.target.dataset, n = t.type;
+		if (!n || !this.#a) return;
+		let r;
+		switch (n) {
+			case "contrast": {
+				let e = t.section, i = t.key;
+				if (!i) return;
+				r = {
+					type: n,
+					key: i,
+					nodes: this.#a.textColorContrastIssues.get(i) || [],
+					section: e
+				};
+				break;
+			}
+			case "color": {
+				let e = t.color, i = t.section;
+				if (!e) return;
+				let a;
+				switch (i) {
+					case "text":
+						a = this.#a.textColors.get(e);
+						break;
+					case "background":
+						a = this.#a.backgroundColors.get(e);
+						break;
+					case "fill":
+						a = this.#a.fillColors.get(e);
+						break;
+					case "border":
+						a = this.#a.borderColors.get(e);
+						break;
+				}
+				if (!a) return;
+				a = Array.from(a).map((e) => ({ nodeId: e })), r = {
+					type: n,
+					color: e,
+					nodes: a,
+					section: i
+				};
+				break;
+			}
+			case "unused-declarations": {
+				let e = t.label;
+				if (!e) return;
+				let i = this.#a.unusedDeclarations.get(e);
+				if (!i) return;
+				r = {
+					type: n,
+					declaration: e,
+					nodes: i
+				};
+				break;
+			}
+			case "media-queries": {
+				let e = t.label;
+				if (!e) return;
+				let i = this.#a.mediaQueries.get(e);
+				if (!i) return;
+				r = {
+					type: n,
+					text: e,
+					nodes: i
+				};
+				break;
+			}
+			case "font-info": {
+				let e = t.label;
+				if (!t.path) return;
+				let [i, a] = t.path.split("/");
+				if (!e) return;
+				let o = this.#a.fontInfo.get(i);
+				if (!o) return;
+				let s = o.get(a);
+				if (!s) return;
+				let c = s.get(e);
+				if (!c) return;
+				let l = c.map((e) => ({ nodeId: e }));
+				r = {
+					type: n,
+					name: `${e} (${i}, ${a})`,
+					nodes: l
+				};
+				break;
+			}
+			default: return;
+		}
+		e.consume(), this.#f(r), this.requestUpdate();
+	}
+	performUpdate() {
+		if (!this.#a || !("backgroundColors" in this.#a) || !("textColors" in this.#a)) return;
+		let e = {
+			elementCount: this.#a.elementCount,
+			backgroundColors: this.#p(this.#a.backgroundColors),
+			textColors: this.#p(this.#a.textColors),
+			textColorContrastIssues: this.#a.textColorContrastIssues,
+			fillColors: this.#p(this.#a.fillColors),
+			borderColors: this.#p(this.#a.borderColors),
+			globalStyleStats: this.#a.globalStyleStats,
+			mediaQueries: this.#h(this.#a.mediaQueries),
+			unusedDeclarations: this.#h(this.#a.unusedDeclarations),
+			fontInfo: this.#m(this.#a.fontInfo),
+			selectedSection: this.#e,
+			onClick: this.#d.bind(this),
+			onSectionSelected: this.#c.bind(this),
+			onReset: this.#l.bind(this)
+		};
+		this.#o(e, this.#s, this.element);
+	}
+	#f(e) {
+		let t = "", n = "";
+		switch (e.type) {
+			case "contrast": {
+				let { section: r, key: i } = e;
+				t = `${r}-${i}`, n = U(H.contrastIssues);
+				break;
+			}
+			case "color": {
+				let { section: r, color: i } = e;
+				t = `${r}-${i}`, n = `${i.toUpperCase()} (${r})`;
+				break;
+			}
+			case "unused-declarations": {
+				let { declaration: r } = e;
+				t = `${r}`, n = `${r}`;
+				break;
+			}
+			case "media-queries": {
+				let { text: r } = e;
+				t = `${r}`, n = `${r}`;
+				break;
+			}
+			case "font-info": {
+				let { name: r } = e;
+				t = `${r}`, n = `${r}`;
+				break;
+			}
+		}
+		let r = this.#i.get(t);
+		if (!r) {
+			if (!this.#n || !this.#t) throw Error("Unable to initialize CSS overview, missing models");
+			r = new ze(this.#n, this.#t, this.#r), r.data = e.nodes, this.#i.set(t, r);
+		}
+		this.#s.addTab(t, n, r, e.type);
+	}
+	#p(e) {
+		return Array.from(e.keys()).sort((e, t) => {
+			let n = s(e)?.asLegacyColor(), r = s(t)?.asLegacyColor();
+			return !n || !r ? 0 : o(r.rgba()) - o(n.rgba());
+		});
+	}
+	#m(e) {
+		return Array.from(e.entries()).map(([e, t]) => ({
+			font: e,
+			fontMetrics: Array.from(t.entries()).map(([e, t]) => ({
+				label: e,
+				values: this.#h(t)
+			}))
+		}));
+	}
+	#h(e) {
+		return Array.from(e.entries()).sort((e, t) => {
+			let n = e[1];
+			return t[1].length - n.length;
+		}).map(([e, t]) => ({
+			title: e,
+			nodes: t
+		}));
+	}
+	set overviewData(e) {
+		this.#a = e, this.requestUpdate();
+	}
+	static pushedNodes = /* @__PURE__ */ new Set();
+}, Re = (e, t, n) => {
+	let { items: r, visibility: i } = e;
+	p(g`
+    <div>
+      <devtools-data-grid class="element-grid" striped inline
+         name=${U(H.cssOverviewElements)}>
+        <table>
+          <tr>
+            ${i.has("node-id") ? g`
+              <th id="node-id" weight="50" sortable>
+                ${U(H.element)}
+              </th>` : b}
+            ${i.has("declaration") ? g`
+              <th id="declaration" weight="50" sortable>
+                ${U(H.declaration)}
+              </th>` : b}
+            ${i.has("source-url") ? g`
+              <th id="source-url" weight="100">
+                ${U(H.source)}
+              </th>` : b}
+            ${i.has("contrast-ratio") ? g`
+              <th id="contrast-ratio" weight="25" width="150px" sortable fixed>
+                ${U(H.contrastRatio)}
+              </th>` : b}
+          </tr>
+          ${r.map(({ data: e, link: t, showNode: n }) => g`
+            <tr>
+              ${i.has("node-id") ? Be(e, t, n) : b}
+              ${i.has("declaration") ? Ve(e) : b}
+              ${i.has("source-url") ? He(e, t) : b}
+              ${i.has("contrast-ratio") ? Ue(e) : b}
+            </tr>`)}
+        </table>
+      </devtools-data-grid>
+    </div>`, n);
+}, ze = class extends w {
+	#e;
+	#t;
+	#n;
+	#r;
+	#i;
+	constructor(e, t, n, r = Re) {
+		super(), this.#e = e, this.#t = t, this.#n = n, this.#i = r, this.#r = [];
+	}
+	set data(e) {
+		this.#r = e, this.requestUpdate();
+	}
+	async performUpdate() {
+		let e = /* @__PURE__ */ new Set();
+		if (!this.#r.length) {
+			this.#i({
+				items: [],
+				visibility: e
+			}, {}, this.element);
+			return;
+		}
+		let [t] = this.#r;
+		"nodeId" in t && t.nodeId && e.add("node-id"), "declaration" in t && t.declaration && e.add("declaration"), "sourceURL" in t && t.sourceURL && e.add("source-url"), "contrastRatio" in t && t.contrastRatio && e.add("contrast-ratio");
+		let n;
+		if ("nodeId" in t && e.has("node-id")) {
+			let e = this.#r.reduce((e, t) => {
+				let n = t.nodeId;
+				return G.pushedNodes.has(n) ? e : (G.pushedNodes.add(n), e.add(n));
+			}, /* @__PURE__ */ new Set());
+			n = await this.#e.pushNodesByBackendIdsToFrontend(e);
+		}
+		let r = await Promise.all(this.#r.map(async (t) => {
+			let r, i;
+			if ("nodeId" in t && e.has("node-id")) {
+				let e = n?.get(t.nodeId) ?? null;
+				e && (r = D.instance().linkify(e), i = () => e.scrollIntoView());
+			}
+			if ("range" in t && t.range && t.styleSheetId && e.has("source-url")) {
+				let e = T.fromObject(t.range), n = this.#t.styleSheetHeaderForId(t.styleSheetId);
+				if (n) {
+					let t = new ie(n, n.lineNumberInSource(e.startLine), n.columnNumberInSource(e.startLine, e.startColumn));
+					r = g`${this.#n.linkifyCSSLocation(t)}`;
+				}
+			}
+			return {
+				data: t,
+				link: r,
+				showNode: i
+			};
+		}));
+		this.#i({
+			items: r,
+			visibility: e
+		}, {}, this.element);
+	}
+};
+function Be(e, t, n) {
+	return t ? g`
+    <td>
+      ${t}
+      <devtools-icon part="show-element" name="select-element"
+          title=${U(H.showElement)} tabindex="0"
+          @click=${() => n?.()}></devtools-icon>
+    </td>` : b;
+}
+function Ve(e) {
+	if (!("declaration" in e)) throw Error("Declaration entry is missing a declaration.");
+	return g`<td>${e.declaration}</td>`;
+}
+function He(e, t) {
+	return "range" in e && e.range ? t ? g`<td>${t}</td>` : g`<td>${U(H.unableToLink)}</td>` : g`<td>${U(H.unableToLinkToInlineStyle)}</td>`;
+}
+function Ue(e) {
+	if (!("contrastRatio" in e)) throw Error("Contrast ratio entry is missing a contrast ratio.");
+	let n = a.instance().moduleSetting("apca").get(), r = t(e.contrastRatio, 2), i = n ? r + "%" : r;
+	return g`
+    <td>
+      <div class="contrast-container-in-grid">
+          <span class="contrast-preview" style=${B({
+		border: Ee(e.backgroundColor),
+		color: e.textColor.asString(),
+		backgroundColor: e.backgroundColor.asString()
+	})}>Aa</span>
+          <span>${i}</span>
+          ${n ? g`
+            <span>${U(H.apca)}</span>${e.thresholdsViolated.apca ? K() : q()}` : g`
+            <span>${U(H.aa)}</span>${e.thresholdsViolated.aa ? K() : q()}
+            <span>${U(H.aaa)}</span>${e.thresholdsViolated.aaa ? K() : q()}`}
+      </div>
+    </td>`;
+}
+function K() {
+	return g`
+    <devtools-icon name="clear" class="small" style="color:var(--icon-error);"></devtools-icon>`;
+}
+function q() {
+	return g`
+    <devtools-icon name="checkmark" class="small"
+        style="color:var(--icon-checkmark-green);"></devtools-icon>`;
+}
+//#endregion
+//#region node_modules/.pnpm/chrome-devtools-frontend@1.0.1638082/node_modules/chrome-devtools-frontend/front_end/ui/components/panel_feedback/FeedbackButton.ts
+var We = { feedback: "Feedback" }, Ge = c("ui/components/panel_feedback/FeedbackButton.ts", We), Ke = i.bind(void 0, Ge), qe = class extends HTMLElement {
+	#e = this.attachShadow({ mode: "open" });
+	#t = { feedbackUrl: "" };
+	set data(e) {
+		this.#t = e, O(this, this.#r);
+	}
+	#n() {
+		y.openInNewTab(this.#t.feedbackUrl);
+	}
+	#r() {
+		if (!k(this)) throw Error("FeedbackButton render was not scheduled");
+		p(g`
+      <devtools-button
+          @click=${this.#n}
+          .iconName=${"review"}
+          .variant=${u.OUTLINED}
+          .jslogContext=${"feedback"}
+      >${Ke(We.feedback)}</devtools-button>
+      `, this.#e, { host: this });
+	}
+};
+customElements.define("devtools-feedback-button", qe);
+//#endregion
+//#region \0dsh-devtools:css:/home/runner/work/QiLin/QiLin/node_modules/.pnpm/chrome-devtools-frontend@1.0.1638082/node_modules/chrome-devtools-frontend/front_end/ui/components/panel_feedback/panelFeedback.css.mjs
+var Je = "/*\n * Copyright 2021 The Chromium Authors\n * Use of this source code is governed by a BSD-style license that can be\n * found in the LICENSE file.\n */\n\n:host {\n  display: block;\n}\n\n.preview {\n  padding: 12px 16px;\n  border: 1px solid var(--sys-color-divider);\n  color: var(--sys-color-on-surface);\n  font-size: 13px;\n  line-height: 20px;\n  border-radius: 12px;\n  margin: 42px 0;\n  letter-spacing: 0.01em;\n}\n\nh2 {\n  color: var(--sys-color-primary);\n  font-size: 13px;\n  line-height: 20px;\n  letter-spacing: 0.01em;\n  margin: 9px 0 14px;\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  font-weight: normal;\n}\n\nh3 {\n  font-size: 13px;\n  line-height: 20px;\n  letter-spacing: 0.04em;\n  color: var(--sys-color-on-surface);\n  margin-bottom: 2px;\n  font-weight: normal;\n}\n\n.preview p {\n  margin-bottom: 24px;\n}\n\n.thumbnail {\n  height: 92px;\n}\n\n.video {\n  display: flex;\n  flex-flow: row wrap;\n  gap: 20px;\n}\n\ndevtools-link {\n  color: var(--sys-color-primary);\n  text-decoration-line: underline;\n}\n\ndevtools-link.quick-start-link {\n  font-size: 14px;\n  line-height: 22px;\n  letter-spacing: 0.04em;\n}\n\n.video-description {\n  min-width: min-content;\n  flex-basis: min-content;\n  flex-grow: 1;\n}\n\n@media (forced-colors: active) {\n  devtools-link {\n    color: linktext;\n  }\n}\n", J = {
+	previewText: "Our team is actively working on this feature and we would love to know what you think.",
+	previewTextFeedbackLink: "Send us your feedback.",
+	previewFeature: "Preview feature",
+	videoAndDocumentation: "Video and documentation"
+}, Ye = c("ui/components/panel_feedback/PanelFeedback.ts", J), Y = i.bind(void 0, Ye), Xe = new URL("../../../Images/preview_feature_video_thumbnail.svg", new URL("ui/components/panel_feedback/PanelFeedback.js", typeof document < "u" ? document.baseURI : new URL("../../", self.location.href).href).href).toString(), Ze = class extends HTMLElement {
+	#e = this.attachShadow({ mode: "open" });
+	#t = {
+		feedbackUrl: "",
+		quickStartUrl: "",
+		quickStartLinkText: ""
+	};
+	set data(e) {
+		this.#t = e, O(this, this.#n);
+	}
+	#n() {
+		if (!k(this)) throw Error("PanelFeedback render was not scheduled");
+		p(g`
+      <style>${Je}</style>
+      <div class="preview">
+        <h2 class="flex">
+          <devtools-icon name="experiment" class="extra-large" style="color: var(--icon-primary);"></devtools-icon> ${Y(J.previewFeature)}
+        </h2>
+        <p>${Y(J.previewText)} <devtools-link href=${this.#t.feedbackUrl} .jslogContext=${"feedback"}>${Y(J.previewTextFeedbackLink)}</devtools-link></p>
+        <div class="video">
+          <div class="thumbnail">
+            <img src=${Xe} role="presentation" />
+          </div>
+          <div class="video-description">
+            <h3>${Y(J.videoAndDocumentation)}</h3>
+            <devtools-link class="quick-start-link" href=${this.#t.quickStartUrl} jslogcontext="css-overview.quick-start">${this.#t.quickStartLinkText}</devtools-link>
+          </div>
+        </div>
+      </div>
+      `, this.#e, { host: this });
+	}
+};
+customElements.define("devtools-panel-feedback", Ze);
+//#endregion
+//#region \0dsh-devtools:css:/home/runner/work/QiLin/QiLin/node_modules/.pnpm/chrome-devtools-frontend@1.0.1638082/node_modules/chrome-devtools-frontend/front_end/ui/components/panel_feedback/previewToggle.css.mjs
+var Qe = "/*\n * Copyright 2021 The Chromium Authors\n * Use of this source code is governed by a BSD-style license that can be\n * found in the LICENSE file.\n */\n\n:host {\n  display: block;\n}\n\n.container {\n  display: flex;\n  flex-wrap: wrap;\n  padding: 4px;\n}\n\n.feedback,\n.learn-more {\n  display: flex;\n  align-items: center;\n}\n\n.helper {\n  flex-basis: 100%;\n  text-align: center;\n  font-style: italic;\n}\n\n.spacer {\n  flex: 1;\n}\n\n.devtools-link {\n  color: var(--sys-color-primary);\n  text-decoration-line: underline;\n  margin: 0 4px;\n}\n\n.feedback .devtools-link {\n  color: var(--sys-color-token-subtle);\n}\n", X = {
+	previewTextFeedbackLink: "Send us your feedback.",
+	shortFeedbackLink: "Send feedback",
+	learnMoreLink: "Learn More"
+}, $e = c("ui/components/panel_feedback/PreviewToggle.ts", X), et = i.bind(void 0, $e), tt = class extends HTMLElement {
+	#e = this.attachShadow({ mode: "open" });
+	#t = "";
+	#n = null;
+	#r = null;
+	#i;
+	#a = "";
+	#o;
+	set data(e) {
+		this.#t = e.name, this.#n = e.helperText, this.#r = e.feedbackURL, this.#i = e.learnMoreURL, this.#a = e.experiment, this.#o = e.onChangeCallback, this.#s();
+	}
+	#s() {
+		p(g`
+      <style>${Qe}</style>
+      <div class="container">
+          <devtools-checkbox
+            ?checked=${this.#a && l.isEnabled(this.#a)}
+            @change=${this.#c}
+            aria-label=${this.#t} >
+            <devtools-icon name="experiment" class="medium">
+          </devtools-icon>${this.#t}
+          </devtools-checkbox>
+        <div class="spacer"></div>
+        ${this.#r && !this.#n ? g`<div class="feedback"><devtools-link class="devtools-link" href=${this.#r} jslogContext=${"feedback"}>${et(X.shortFeedbackLink)}</devtools-link></div>` : b}
+        ${this.#i ? g`<div class="learn-more"><devtools-link class="devtools-link" href=${this.#i} jslogContext=${"learn-more"}>${et(X.learnMoreLink)}</devtools-link></div>` : b}
+        <div class="helper">
+          ${this.#n && this.#r ? g`<p>${this.#n} <devtools-link class="devtools-link" href=${this.#r} jslogContext=${"feedback"}>${et(X.previewTextFeedbackLink)}</devtools-link></p>` : b}
+        </div>
+      </div>`, this.#e, { host: this });
+	}
+	#c(e) {
+		let t = e.target.checked;
+		this.#a && l.setEnabled(this.#a, t), this.#o?.(t);
+	}
+};
+customElements.define("devtools-preview-toggle", tt);
+//#endregion
+//#region \0dsh-devtools:css:/home/runner/work/QiLin/QiLin/node_modules/.pnpm/chrome-devtools-frontend@1.0.1638082/node_modules/chrome-devtools-frontend/front_end/ui/components/panel_introduction_steps/panelIntroductionSteps.css.mjs
+var nt = "/*\n * Copyright 2022 The Chromium Authors\n * Use of this source code is governed by a BSD-style license that can be\n * found in the LICENSE file.\n */\n\n:host {\n  display: block;\n}\n\nh1 {\n  font-weight: normal;\n  font-size: 18px;\n  line-height: 28px;\n  padding: 0;\n  margin-top: 0;\n  color: var(--sys-color-on-surface);\n}\n\n.intro-steps {\n  counter-reset: custom-counter;\n  list-style: none;\n  margin: 16px 0 30px 30px;\n  padding: 0;\n}\n\n.intro-steps li {\n  color: var(--sys-color-on-surface);\n  counter-increment: custom-counter;\n  font-size: 13px;\n  letter-spacing: 0.03em;\n  line-height: 1.54;\n  margin-bottom: 9px;\n  position: relative;\n}\n\n.intro-steps li::before {\n  --override-color-counter-background: var(--sys-color-tonal-container);\n\n  box-sizing: border-box;\n  background: var(--override-color-counter-background);\n  border-radius: 50%;\n  color: var(--sys-color-primary);\n  content: counter(custom-counter);\n  font-size: 12px;\n  height: 18px;\n  left: -30px;\n  line-height: 20px;\n  position: absolute;\n  text-align: center;\n  top: 0;\n  width: 18px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n", rt = class extends HTMLElement {
+	#e = this.attachShadow({ mode: "open" });
+	connectedCallback() {
+		O(this, this.#t);
+	}
+	#t() {
+		if (!k(this)) throw Error("FeedbackButton render was not scheduled");
+		p(g`
+      <style>${nt}</style>
+      <h1><slot name="title">slot: title</slot></h1>
+
+      <ol class="intro-steps">
+        <li><slot name="step-1">slot: step-1</slot></li>
+        <li><slot name="step-2">slot: step-2</slot></li>
+        <li><slot name="step-3">slot: step-3</slot></li>
+      </ol>
+    `, this.#e, { host: this });
+	}
+};
+customElements.define("devtools-panel-introduction-steps", rt);
+//#endregion
+//#region \0dsh-devtools:css:/home/runner/work/QiLin/QiLin/node_modules/.pnpm/chrome-devtools-frontend@1.0.1638082/node_modules/chrome-devtools-frontend/front_end/panels/css_overview/cssOverviewStartView.css.mjs
+var it = "/**\n * Copyright 2019 The Chromium Authors\n * Use of this source code is governed by a BSD-style license that can be\n * found in the LICENSE file.\n */\n\n@scope to (devtools-widget > *) {\n  h1 {\n    font-weight: normal;\n  }\n\n  .css-overview-start-view {\n    padding: 24px;\n    display: flex;\n    flex-direction: column;\n    background-color: var(--sys-color-cdt-base-container);\n    overflow: auto;\n  }\n\n  .start-capture-wrapper {\n    width: fit-content;\n  }\n\n  .preview-feature {\n    padding: 12px 16px;\n    border: 1px solid var(--sys-color-neutral-outline);\n    color: var(--sys-color-on-surface);\n    font-size: 13px;\n    line-height: 20px;\n    border-radius: 12px;\n    margin: 42px 0;\n    letter-spacing: 0.01em;\n  }\n\n  .preview-header {\n    color: var(--sys-color-primary);\n    font-size: 13px;\n    line-height: 20px;\n    letter-spacing: 0.01em;\n    margin: 9px 0 14px;\n  }\n\n  .preview-icon {\n    vertical-align: middle;\n  }\n\n  .feedback-prompt {\n    margin-bottom: 24px;\n  }\n\n  .feedback-prompt .devtools-link {\n    color: -webkit-link;\n    cursor: pointer;\n    text-decoration: underline;\n  }\n\n  .resources {\n    display: flex;\n    flex-direction: row;\n  }\n\n  .thumbnail-wrapper {\n    width: 144px;\n    height: 92px;\n    margin-right: 20px;\n  }\n\n  .video-doc-header {\n    font-size: 13px;\n    line-height: 20px;\n    letter-spacing: 0.04em;\n    color: var(--sys-color-on-surface);\n    margin-bottom: 2px;\n  }\n\n  devtools-feedback-button {\n    align-self: flex-end;\n  }\n\n  .resources .devtools-link {\n    font-size: 14px;\n    line-height: 22px;\n    letter-spacing: 0.04em;\n    text-decoration-line: underline;\n    color: var(--sys-color-primary);\n  }\n}\n", Z = {
+	captureOverview: "Capture overview",
+	identifyCSSImprovements: "Identify potential CSS improvements",
+	capturePageCSSOverview: "Capture an overview of your page’s CSS",
+	identifyCSSImprovementsWithExampleIssues: "Identify potential CSS improvements (e.g. low contrast issues, unused declarations, color or font mismatches)",
+	locateAffectedElements: "Locate the affected elements in the Elements panel",
+	quickStartWithCSSOverview: "Quick start: get started with the new CSS overview panel"
+}, at = c("panels/css_overview/CSSOverviewStartView.ts", Z), Q = i.bind(void 0, at), ot = "https://g.co/devtools/css-overview-feedback", st = "https://developer.chrome.com/docs/devtools/css-overview", ct = (e, t, n) => {
+	p(g`
+    <style>${it}</style>
+    <div class="css-overview-start-view">
+      <devtools-panel-introduction-steps>
+        <span slot="title">${Q(Z.identifyCSSImprovements)}</span>
+        <span slot="step-1">${Q(Z.capturePageCSSOverview)}</span>
+        <span slot="step-2">${Q(Z.identifyCSSImprovementsWithExampleIssues)}</span>
+        <span slot="step-3">${Q(Z.locateAffectedElements)}</span>
+      </devtools-panel-introduction-steps>
+      <div class="start-capture-wrapper">
+        <devtools-button
+          class="start-capture"
+          autofocus
+          .variant=${u.PRIMARY}
+          .jslogContext=${"css-overview.capture-overview"}
+          @click=${e.onStartCapture}>
+          ${Q(Z.captureOverview)}
+        </devtools-button>
+      </div>
+      <devtools-panel-feedback .data=${{
+		feedbackUrl: ot,
+		quickStartUrl: st,
+		quickStartLinkText: Q(Z.quickStartWithCSSOverview)
+	}}>
+      </devtools-panel-feedback>
+      <devtools-feedback-button .data=${{ feedbackUrl: ot }}>
+      </devtools-feedback-button>
+    </div>`, n);
+}, lt = class extends w {
+	#e;
+	onStartCapture = () => {};
+	constructor(e, t = ct) {
+		super(e, {
+			useShadowDom: !0,
+			delegatesFocus: !0
+		}), this.#e = t, this.performUpdate();
+	}
+	performUpdate() {
+		this.#e({ onStartCapture: this.onStartCapture }, {}, this.contentElement);
+	}
+}, ut = /* @__PURE__ */ e({
+	CSSOverviewPanel: () => ft,
+	DEFAULT_VIEW: () => dt
+}), { widget: $ } = re, dt = (e, t, n) => {
+	p(e.state === "start" ? $(lt, { onStartCapture: e.onStartCapture }) : e.state === "processing" ? $(he, { onCancel: e.onCancel }) : $(G, {
+		onReset: e.onReset,
+		overviewData: e.overviewData,
+		target: e.target
+	}), n);
+}, ft = class extends _ {
+	#e;
+	#t;
+	#n;
+	#r;
+	#i;
+	#a;
+	#o;
+	#s;
+	#c;
+	#l;
+	#u;
+	#d;
+	#f;
+	#p;
+	constructor(e = dt) {
+		super("css-overview"), this.#e = m.instance().inspectedURL(), m.instance().addEventListener(d.INSPECTED_URL_CHANGED, this.#h, this), this.#p = e, m.instance().observeTargets(this), this.#_();
+	}
+	#m() {
+		oe.actionTaken(ae.CaptureCssOverviewClicked), this.#x();
+	}
+	#h() {
+		this.#e !== m.instance().inspectedURL() && (this.#e = m.instance().inspectedURL(), this.#_());
+	}
+	targetAdded(e) {
+		e === m.instance().primaryPageTarget() && (this.#t = e.model(P) ?? void 0);
+	}
+	targetRemoved() {}
+	#g() {
+		if (!this.#t) throw Error("Did not retrieve model information yet.");
+		return this.#t;
+	}
+	#_() {
+		this.#n = /* @__PURE__ */ new Map(), this.#r = /* @__PURE__ */ new Map(), this.#i = /* @__PURE__ */ new Map(), this.#a = /* @__PURE__ */ new Map(), this.#o = /* @__PURE__ */ new Map(), this.#s = /* @__PURE__ */ new Map(), this.#c = /* @__PURE__ */ new Map(), this.#l = 0, this.#u = {
+			styleRules: 0,
+			inlineStyles: 0,
+			externalSheets: 0,
+			stats: {
+				type: 0,
+				class: 0,
+				id: 0,
+				universal: 0,
+				attribute: 0,
+				nonSimple: 0
+			}
+		}, this.#d = /* @__PURE__ */ new Map(), this.#v();
+	}
+	#v() {
+		this.#f = "start", this.performUpdate();
+	}
+	#y() {
+		this.#f = "processing", this.performUpdate();
+	}
+	#b() {
+		this.#f = "completed", this.performUpdate();
+	}
+	performUpdate() {
+		let e = {
+			state: this.#f,
+			onStartCapture: this.#m.bind(this),
+			onCancel: this.#_.bind(this),
+			onReset: this.#_.bind(this),
+			target: this.#t?.target(),
+			overviewData: {
+				backgroundColors: this.#n,
+				textColors: this.#r,
+				textColorContrastIssues: this.#d,
+				fillColors: this.#i,
+				borderColors: this.#a,
+				globalStyleStats: this.#u,
+				fontInfo: this.#o,
+				elementCount: this.#l,
+				mediaQueries: this.#s,
+				unusedDeclarations: this.#c
+			}
+		};
+		this.#p(e, {}, this.contentElement);
+	}
+	async #x() {
+		this.#y();
+		let e = this.#g(), [t, { elementCount: n, backgroundColors: r, textColors: i, textColorContrastIssues: a, fillColors: o, borderColors: s, fontInfo: c, unusedDeclarations: l }, u] = await Promise.all([
+			e.getGlobalStylesheetStats(),
+			e.getNodeStyleStats(),
+			e.getMediaQueries()
+		]);
+		n && (this.#l = n), t && (this.#u = t), u && (this.#s = u), r && (this.#n = r), i && (this.#r = i), a && (this.#d = a), o && (this.#i = o), s && (this.#a = s), c && (this.#o = c), l && (this.#c = l), this.#b();
+	}
+};
+//#endregion
+export { Ce as CSSOverviewCompletedView, N as CSSOverviewModel, ut as CSSOverviewPanel, F as CSSOverviewProcessingView, _e as CSSOverviewSidebarPanel, ue as CSSOverviewUnusedDeclarations };