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

package/lib/devtools/chunks/emulation-C6XKPPGu.js

@@ -0,0 +1,1306 @@
+import { n as e } from "./chunk-DF993M8W.js";
+import { F as t, K as n, M as r, m as i, z as a } from "./platform-BzB373NB.js";
+import { at as o, bt as s, d as c, jt as l, n as u, wt as d } from "./common-qd_KLeYO.js";
+import { o as f } from "./root-DbVQo07X.js";
+import { $i as p, $t as m, Al as h, An as g, Bn as _, Bo as v, Fd as ee, Fi as y, Fo as b, Ii as x, Io as S, La as C, Li as w, Md as T, Nl as E, Oa as te, Or as D, Po as O, Qi as ne, Qo as re, Qr as k, Qt as ie, Ro as ae, Ua as oe, Ur as se, Wc as ce, Wo as le, Xf as A, Xr as ue, Zo as de, Zr as j, br as M, di as N, ei as P, fi as fe, ha as F, ii as pe, ja as I, jn as me, ll as he, mf as ge, mo as _e, na as ve, ni as L, oo as ye, pf as be, rl as xe, tl as Se, to as Ce, ul as we, uo as Te, v as Ee, vi as R, zo as De } from "./legacy-Bqn4Q0Tf.js";
+import { f as Oe } from "./bindings-DgoVEdsr.js";
+import { a as z, c as ke, d as Ae, i as je, l as Me, n as Ne, o as B, p as Pe, t as Fe, u as Ie } from "./emulation-EtJlEukP.js";
+import { n as Le } from "./theme_support-CbSSLkbO.js";
+import { n as Re, s as ze } from "./mobile_throttling-Cw4AkJH4.js";
+//#region node_modules/.pnpm/chrome-devtools-frontend@1.0.1638082/node_modules/chrome-devtools-frontend/front_end/panels/emulation/DeviceModeToolbar.ts
+var Be = /* @__PURE__ */ e({
+	DEFAULT_VIEW: () => Ke,
+	DeviceModeToolbar: () => qe
+}), V = ae(class e extends De {
+	static itemWidthCache = /* @__PURE__ */ new Map();
+	constructor(e) {
+		if (super(e), e.type !== v.ELEMENT) throw Error("AutoWidthSelectDirective must be used as an element directive");
+	}
+	update(t, [n]) {
+		let r = t.element, i = e.itemWidthCache.get(n);
+		if (!i) {
+			let t = document.createElement("select");
+			t.className = r.className, t.style.width = "fit-content", t.style.position = "absolute", t.style.visibility = "hidden", t.style.pointerEvents = "none", t.appendChild(document.createElement("option")), t.options[0].textContent = n, r.parentElement?.appendChild(t);
+			let a = t.offsetWidth;
+			t.remove(), i = a ? `${a}px` : "", a > 0 && e.itemWidthCache.set(n, i);
+		}
+		return r.style.width = i, this.render(n);
+	}
+	render(e) {
+		return re;
+	}
+}), H = {
+	dimensions: "Dimensions: {PH1}",
+	dpr: "DPR: {PH1}",
+	width: "Width",
+	heightLeaveEmptyForFull: "Height (leave empty for full)",
+	zoom: "Zoom",
+	devicePixelRatio: "Device pixel ratio",
+	deviceType: "Device type",
+	moreOptions: "More options",
+	fitToWindowPercentage: "{PH1}% (fit to window)",
+	autoadjustZoom: "Auto-adjust zoom",
+	defaultF: "{PH1} (default)",
+	hideDeviceFrame: "Hide device frame",
+	showDeviceFrame: "Show device frame",
+	hideMediaQueries: "Hide media queries",
+	showMediaQueries: "Show media queries",
+	hideRulers: "Hide rulers",
+	showRulers: "Show rulers",
+	removeDevicePixelRatio: "Remove device pixel ratio",
+	addDevicePixelRatio: "Add device pixel ratio",
+	removeDeviceType: "Remove device type",
+	addDeviceType: "Add device type",
+	resetToDefaults: "Reset to defaults",
+	closeDevtools: "Close DevTools",
+	responsive: "Responsive",
+	edit: "Edit…",
+	portrait: "Portrait",
+	landscape: "Landscape",
+	rotate: "Rotate",
+	screenOrientationOptions: "Screen orientation options",
+	screenOrientationLocked: "Screen orientation is locked by the page",
+	toggleDualscreenMode: "Toggle dual-screen mode",
+	devicePosture: "Device posture",
+	throttling: "Throttling"
+}, U = d("panels/emulation/DeviceModeToolbar.ts", H), W = s.bind(void 0, U), { ifDefined: Ve, live: He } = le, { widget: Ue } = pe, { bindToSetting: We } = ie;
+function Ge(e, t, n, r, i, a) {
+	return O`
+      <input type="number"
+             max=${je}
+             min=${50}
+             title=${e}
+             class="device-mode-size-input"
+             .disabled=${r ?? !1}
+             jslog=${Te().track({ change: !0 }).context(t)}
+             .value=${n ?? ""}
+             placeholder=${Ve(i)}
+             @change=${a}
+             @keydown=${(e) => {
+		let t = e.target, n = _(Number(t.value), e);
+		n !== null && (n = Math.min(n, je), n = Math.max(n, 50), e.preventDefault(), t.value = String(n), t.dispatchEvent(new Event("change")));
+	}}>`;
+}
+var Ke = (e, t, n) => {
+	b(O`
+    <devtools-toolbar class="main-toolbar">
+      <div class="device-mode-empty-toolbar-element"></div>
+      ${S(U, H.dimensions, { PH1: O`
+        <select class="dark-text toolbar-has-dropdown-shrinkable"
+                ${V(e.deviceText)}
+                title=${W(H.deviceType)}
+                aria-label=${W(H.deviceType)}
+                @change=${e.onDeviceChange}
+                .value=${He(e.selectedDeviceOption === e.deviceModeOptions.responsive ? "Responsive" : e.selectedDeviceOption?.title || "Responsive")}
+                jslog=${I().track({ change: !0 }).context("device")}>
+          <option value="Responsive" ?selected=${e.deviceModeOptions.responsive.selected} jslog=${C(e.deviceModeOptions.responsive.jslogContext).track({ click: !0 })}>
+            ${e.deviceModeOptions.responsive.title}
+          </option>
+          ${e.deviceModeOptions.standard.length > 0 ? O`
+            <optgroup label="Standard">
+              ${e.deviceModeOptions.standard.map((e) => O`<option value=${e.title} ?selected=${e.selected} jslog=${C(e.jslogContext).track({ click: !0 })}>${e.title}</option>`)}
+            </optgroup>
+          ` : ""}
+          ${e.deviceModeOptions.custom.length > 0 ? O`
+            <optgroup label="Custom">
+              ${e.deviceModeOptions.custom.map((e) => O`<option value=${e.title} ?selected=${e.selected} jslog=${C(e.jslogContext).track({ click: !0 })}>${e.title}</option>`)}
+            </optgroup>
+          ` : ""}
+          <option value="Edit" jslog=${C(e.deviceModeOptions.edit.jslogContext).track({ click: !0 })}>
+            ${e.deviceModeOptions.edit.title}
+          </option>
+        </select>` })}
+
+      ${Ge(W(H.width), "width", e.widthValue, !e.isResponsive, "", e.onWidthChange)}
+
+      <div class="device-mode-x">×</div>
+      ${Ge(W(H.heightLeaveEmptyForFull), "height", e.heightValue, !e.isResponsive, e.heightPlaceholder, e.onHeightChange)}
+
+      <div class="device-mode-empty-toolbar-element"></div>
+      <select class="dark-text toolbar-has-dropdown-shrinkable"
+              ${V(e.scaleText)}
+              title=${W(H.zoom)}
+              aria-label=${W(H.zoom)}
+              @change=${e.onScaleChange}
+              .value=${String(e.scaleOptions.find((e) => e.selected)?.value || "")}
+              jslog=${I().track({ change: !0 }).context("scale")}>
+        ${e.scaleOptions.map((e) => O`<option value=${e.value} ?selected=${e.selected} jslog=${C(e.jslogContext).track({ click: !0 })}>${e.title}</option>`)}
+      </select>
+
+      <devtools-button .data=${{
+		variant: p.TOOLBAR,
+		iconName: "center-focus-weak",
+		toggledIconName: "center-focus-weak",
+		toggleType: ne.PRIMARY
+	}}
+                       class="toolbar-button" title=${W(H.autoadjustZoom)}
+                       ${We(e.autoAdjustScaleSetting)}>
+      </devtools-button>
+
+      <div class="device-mode-empty-toolbar-element"></div>
+
+      ${e.showDeviceScaleFactorSetting.get() ? O`
+        <div class="toolbar-text">
+          ${S(U, H.dpr, { PH1: O`
+              <select class="dark-text toolbar-has-dropdown-shrinkable"
+                      ${V(e.dprText)}
+                    title=${W(H.devicePixelRatio)}
+                    aria-label=${W(H.devicePixelRatio)}
+                    @change=${e.onDeviceScaleChange}
+                    .value=${String(e.dprOptions.find((e) => e.selected)?.value || "")}
+                    jslog=${I().track({ change: !0 }).context("device-pixel-ratio")}
+                    ?disabled=${!e.isResponsive}>
+                ${e.dprOptions.map((e) => O`<option value=${e.value} ?selected=${e.selected} jslog=${C(e.jslogContext).track({ click: !0 })}>${e.title}</option>`)}
+              </select>` })}
+        </div>` : ""}
+
+      <div class="device-mode-empty-toolbar-element"></div>
+      ${e.showUserAgentTypeSetting.get() ? O`
+        <select class="dark-text toolbar-has-dropdown-shrinkable"
+                ${V(e.uaText)}
+                title=${W(H.deviceType)}
+                aria-label=${W(H.deviceType)}
+                @change=${e.onUAChange}
+                .value=${e.uaOptions.find((e) => e.selected)?.value || ""}
+                jslog=${I().track({ change: !0 }).context("device-type")}
+                ?disabled=${!e.isResponsive}>
+          ${e.uaOptions.map((e) => O`<option value=${e.value} ?selected=${e.selected} jslog=${C(e.jslogContext).track({ click: !0 })}>${e.title}</option>`)}
+        </select>` : ""}
+      <select class="dark-text" ${Ue(Re, {
+		title: W(H.throttling),
+		bindToGlobalConditions: !0
+	})}></select>
+      <select class="dark-text toolbar-has-dropdown-shrinkable" ${Ue(ze)}></select>
+
+      <div class="device-mode-empty-toolbar-element"></div>
+      <devtools-button class="toolbar-button"
+                       .data=${{
+		variant: p.TOOLBAR,
+		iconName: "screen-rotation"
+	}}
+                       jslog=${F("screen-rotation").track({ click: !0 })}
+                       @click=${e.onModeMenuClick}
+                       .title=${e.modeButtonTitle}
+                       .disabled=${e.modeButtonDisabled}>
+      </devtools-button>
+
+      <!-- Show dual screen toolbar -->
+      ${e.showSpanButton ? O`
+        <devtools-button class="toolbar-button"
+                         .data=${{
+		variant: p.TOOLBAR,
+		iconName: "device-fold"
+	}}
+                         jslog=${F("device-fold").track({ click: !0 })}
+                         .title=${W(H.toggleDualscreenMode)}
+                         @click=${e.onSpanClick}>
+        </devtools-button>` : ""}
+
+      <!-- Show posture toolbar menu for foldable devices. -->
+      <div class="device-mode-empty-toolbar-element"></div>
+      ${e.showPostureItem ? O`
+        <select class="dark-text toolbar-has-dropdown-shrinkable"
+                ${V(e.postureText)}
+                title=${W(H.devicePosture)}
+                aria-label=${W(H.devicePosture)}
+                @change=${e.onPostureChange}
+                .value=${e.postureOptions.find((e) => e.selected)?.value || ""}
+                jslog=${I().track({ change: !0 }).context("device-posture")}>
+          ${e.postureOptions.map((e) => O`<option value=${e.value} ?selected=${e.selected} jslog=${C(e.value.toLowerCase()).track({ click: !0 })}>${e.title}</option>`)}
+        </select>` : ""}
+    </devtools-toolbar>
+    <devtools-toolbar class="device-mode-toolbar-options" wrappable>
+      <div class="device-mode-empty-toolbar-element"></div>
+      <devtools-button
+        .data=${{
+		variant: p.TOOLBAR,
+		iconName: "dots-vertical",
+		title: W(H.moreOptions)
+	}}
+        @click=${e.onMoreOptionsClick}
+        jslog=${I("more-options").track({ click: !0 })}
+      ></devtools-button></devtools-toolbar>
+  `, n, { container: {
+		classes: ["device-mode-toolbar"],
+		attributes: { jslog: `${_e("device-mode").track({ resize: !0 })}` }
+	} });
+}, qe = class extends L {
+	model;
+	showMediaInspectorSetting;
+	showRulersSetting;
+	deviceOutlineSetting;
+	showDeviceScaleFactorSetting;
+	showUserAgentTypeSetting;
+	autoAdjustScaleSetting;
+	lastMode;
+	emulatedDevicesList;
+	persistenceSetting;
+	view;
+	constructor(e, t, n, r = Ke) {
+		super(), this.view = r, this.model = e, this.showMediaInspectorSetting = t, this.showRulersSetting = n, this.deviceOutlineSetting = this.model.deviceOutlineSetting(), this.showDeviceScaleFactorSetting = c.instance().createSetting("emulation.show-device-scale-factor", !1), this.showDeviceScaleFactorSetting.addChangeListener(this.requestUpdate, this), this.showUserAgentTypeSetting = c.instance().createSetting("emulation.show-user-agent-type", !1), this.showUserAgentTypeSetting.addChangeListener(this.requestUpdate, this), this.autoAdjustScaleSetting = c.instance().createSetting("emulation.auto-adjust-scale", !0), this.lastMode = /* @__PURE__ */ new Map(), this.emulatedDevicesList = Me.instance(), this.emulatedDevicesList.addEventListener(Ie.CUSTOM_DEVICES_UPDATED, this.deviceListChanged, this), this.emulatedDevicesList.addEventListener(Ie.STANDARD_DEVICES_UPDATED, this.deviceListChanged, this), this.persistenceSetting = c.instance().createSetting("emulation.device-mode-value", {
+			device: "",
+			orientation: "",
+			mode: ""
+		}), this.model.toolbarControlsEnabledSetting().addChangeListener(this.requestUpdate, this), this.model.scaleSetting().addChangeListener(this.requestUpdate, this), this.model.uaSetting().addChangeListener(this.requestUpdate, this), this.model.deviceScaleFactorSetting().addChangeListener(this.requestUpdate, this), this.model.addEventListener(Ne.UPDATED, this.requestUpdate, this), this.performUpdate();
+	}
+	performUpdate() {
+		let e = this.model.type() === z.Responsive, t = e && this.model.isFullHeight(), n = this.model.appliedDeviceSize(), r = String(n.width), i = t ? "" : String(n.height), a = String(n.height), o = this.model.device();
+		this.model.type() === z.Device && o && this.lastMode.set(o, this.model.mode());
+		let s = this.persistenceSetting.get(), c = this.model.mode();
+		o ? (s.device = o.title, s.orientation = c ? c.orientation : "", s.mode = c ? c.title : "") : (s.device = "", s.orientation = "", s.mode = ""), this.persistenceSetting.set(s);
+		let l = W(H.rotate), u = !1;
+		if (this.model.isScreenOrientationLocked()) u = !0, l = W(H.screenOrientationLocked);
+		else if (o) {
+			let e = o.modes.length;
+			u = e < 2, l = W(e === 2 ? H.rotate : H.screenOrientationOptions);
+		} else e ? (u = !1, l = W(H.rotate)) : u = !0;
+		let d = !!o?.isDualScreen, f = !!(!o?.isDualScreen && o?.isFoldableScreen), p = this.getDeviceModeOptions(), m = this.getScaleOptions(), h = this.getDeviceScaleFactorOptions(), g = this.getUserAgentOptions(), _ = this.getDevicePostureOptions(), v = [
+			p.responsive,
+			...p.standard,
+			...p.custom
+		].find((e) => e.selected), ee = v ? v.title : p.responsive.title, y = m.find((e) => e.selected)?.title || "";
+		y.includes(" (") && (y = y.substring(0, y.indexOf(" (")));
+		let b = h.find((e) => e.selected)?.title || "";
+		b.includes(" (") && (b = b.substring(0, b.indexOf(" (")));
+		let x = g.find((e) => e.selected)?.title || "", S = _.find((e) => e.selected)?.title || "", C = this.model.toolbarControlsEnabledSetting().get();
+		this.contentElement.classList.toggle("disabled", !C);
+		let w = {
+			isResponsive: e,
+			isFullHeight: t,
+			widthValue: r,
+			heightValue: i,
+			heightPlaceholder: a,
+			modeButtonTitle: l,
+			modeButtonDisabled: u,
+			showSpanButton: d,
+			showPostureItem: f,
+			deviceModeOptions: p,
+			scaleOptions: m,
+			dprOptions: h,
+			uaOptions: g,
+			postureOptions: _,
+			selectedDeviceOption: v,
+			deviceText: ee,
+			scaleText: y,
+			dprText: b,
+			uaText: x,
+			postureText: S,
+			onDeviceChange: this.onDeviceChange.bind(this),
+			onWidthChange: (e) => {
+				let t = Number(e.target.value);
+				this.autoAdjustScaleSetting.get() ? this.model.setWidthAndScaleToFit(t) : this.model.setWidth(t);
+			},
+			onHeightChange: (e) => {
+				let t = Number(e.target.value);
+				this.autoAdjustScaleSetting.get() ? this.model.setHeightAndScaleToFit(t) : this.model.setHeight(t);
+			},
+			onScaleChange: this.onScaleChange.bind(this),
+			onDeviceScaleChange: this.onDeviceScaleChange.bind(this),
+			onUAChange: this.onUAChange.bind(this),
+			onPostureChange: this.onPostureChange.bind(this),
+			onModeMenuClick: this.modeMenuClicked.bind(this),
+			onSpanClick: this.spanClicked.bind(this),
+			onMoreOptionsClick: (e) => {
+				let t = new M(e);
+				this.appendOptionsMenuItems(t), t.show();
+			},
+			autoAdjustScaleSetting: this.autoAdjustScaleSetting,
+			showDeviceScaleFactorSetting: this.showDeviceScaleFactorSetting,
+			showUserAgentTypeSetting: this.showUserAgentTypeSetting
+		};
+		this.view(w, {}, this.contentElement);
+	}
+	getDevicePostureOptions() {
+		let e = this.currentDevicePosture();
+		return ["Continuous", "Folded"].map((t) => ({
+			title: t,
+			value: t,
+			selected: e === t
+		}));
+	}
+	onPostureChange(e) {
+		e.target.value !== this.currentDevicePosture() && this.spanClicked();
+	}
+	currentDevicePosture() {
+		let e = this.model.mode();
+		return e && (e.orientation === "vertical-spanned" || e.orientation === "horizontal-spanned") ? "Folded" : "Continuous";
+	}
+	getScaleOptions() {
+		let e = [
+			.5,
+			.75,
+			1,
+			1.25,
+			1.5,
+			2
+		], t = null;
+		if (this.model.type() === z.Device) {
+			t = this.model.fitScale();
+			let n = (t * 100).toFixed(0), r = !1;
+			for (let i = 0; i < e.length; ++i) if ((e[i] * 100).toFixed(0) === n) {
+				r = !0, e[i] = t;
+				break;
+			}
+			r || (e.push(t), e.sort((e, t) => e - t));
+		}
+		let n = this.model.scaleSetting().get();
+		return e.map((e) => {
+			let r = (e * 100).toFixed(0) + "%", i = r;
+			return e === t && (r = W(H.fitToWindowPercentage, { PH1: (e * 100).toFixed(0) }), i = "fit-to-window"), {
+				title: r,
+				value: e,
+				selected: n === e,
+				jslogContext: i
+			};
+		});
+	}
+	onScaleChange(e) {
+		let t = Number(e.target.value);
+		this.model.scaleSetting().set(t);
+	}
+	getDeviceScaleFactorOptions() {
+		let e = this.model.deviceScaleFactorSetting(), t = this.model.uaSetting().get() === B.MOBILE || this.model.uaSetting().get() === B.MOBILE_NO_TOUCH ? 2 : window.devicePixelRatio, n = [
+			1,
+			2,
+			3
+		];
+		n.includes(t) || (n.push(t), n.sort((e, t) => e - t));
+		let r = e.get();
+		return n.map((e) => {
+			let n = String(e), i = `dpr-${e}`;
+			return e === t && (n = W(H.defaultF, { PH1: e }), i = "dpr-default"), {
+				title: n,
+				value: e === t ? 0 : e,
+				selected: r === e || e === t && r === 0,
+				jslogContext: i
+			};
+		});
+	}
+	onDeviceScaleChange(e) {
+		let t = Number(e.target.value);
+		this.model.deviceScaleFactorSetting().set(t);
+	}
+	getUserAgentOptions() {
+		let e = this.model.uaSetting().get();
+		return [
+			B.MOBILE,
+			B.MOBILE_NO_TOUCH,
+			B.DESKTOP,
+			B.DESKTOP_TOUCH
+		].map((t) => ({
+			title: t,
+			value: t,
+			selected: e === t,
+			jslogContext: a(t)
+		}));
+	}
+	onUAChange(e) {
+		let t = e.target.value;
+		this.model.uaSetting().set(t);
+	}
+	appendOptionsMenuItems(e) {
+		let t = this.model;
+		n(e.headerSection(), this.deviceOutlineSetting, W(H.hideDeviceFrame), W(H.showDeviceFrame), t.type() !== z.Device, "device-frame"), n(e.headerSection(), this.showMediaInspectorSetting, W(H.hideMediaQueries), W(H.showMediaQueries), void 0, "media-queries"), n(e.headerSection(), this.showRulersSetting, W(H.hideRulers), W(H.showRulers), void 0, "rulers"), n(e.defaultSection(), this.showDeviceScaleFactorSetting, W(H.removeDevicePixelRatio), W(H.addDevicePixelRatio), void 0, "device-pixel-ratio"), n(e.defaultSection(), this.showUserAgentTypeSetting, W(H.removeDeviceType), W(H.addDeviceType), void 0, "device-type"), e.appendItemsAtLocation("deviceModeMenu"), e.footerSection().appendItem(W(H.resetToDefaults), this.reset.bind(this), { jslogContext: "reset-to-defaults" }), e.footerSection().appendItem(W(H.closeDevtools), A.closeWindow.bind(A), { jslogContext: "close-dev-tools" });
+		function n(e, n, r, i, a, o) {
+			a === void 0 && (a = t.type() === z.None);
+			let s = n.get(), c = `${o}-${s ? "disable" : "enable"}`;
+			e.appendItem(s ? r : i, n.set.bind(n, !n.get()), {
+				disabled: a,
+				jslogContext: c
+			});
+		}
+	}
+	reset() {
+		this.deviceOutlineSetting.set(!1), this.showDeviceScaleFactorSetting.set(!1), this.showUserAgentTypeSetting.set(!1), this.showMediaInspectorSetting.set(!1), this.showRulersSetting.set(!1), this.model.reset();
+	}
+	emulateDevice(e) {
+		let t = this.autoAdjustScaleSetting.get() ? void 0 : this.model.scaleSetting().get();
+		this.model.emulate(z.Device, e, this.lastMode.get(e) || e.modes[0], t);
+	}
+	switchToResponsive() {
+		this.model.emulate(z.Responsive, null, null);
+	}
+	filterDevices(e) {
+		return e = e.filter(function(e) {
+			return e.show();
+		}), e.sort(ke.deviceComparator), e;
+	}
+	standardDevices() {
+		return this.filterDevices(this.emulatedDevicesList.standard());
+	}
+	customDevices() {
+		return this.filterDevices(this.emulatedDevicesList.custom());
+	}
+	allDevices() {
+		return this.standardDevices().concat(this.customDevices());
+	}
+	getDeviceModeOptions() {
+		return {
+			responsive: {
+				title: W(H.responsive),
+				selected: this.model.type() === z.Responsive,
+				jslogContext: "responsive"
+			},
+			standard: this.standardDevices().map((e) => ({
+				device: e,
+				title: e.title,
+				selected: this.model.device() === e,
+				jslogContext: a(e.title)
+			})),
+			custom: this.customDevices().map((e) => ({
+				device: e,
+				title: e.title,
+				selected: this.model.device() === e,
+				jslogContext: a(e.title)
+			})),
+			edit: {
+				title: W(H.edit),
+				jslogContext: "edit"
+			}
+		};
+	}
+	onDeviceChange(e) {
+		let t = e.target.value;
+		if (t === "Edit") this.emulatedDevicesList.revealCustomSetting(), this.requestUpdate();
+		else if (t === "Responsive") this.switchToResponsive();
+		else for (let e of this.allDevices()) if (e.title === t) {
+			this.emulateDevice(e);
+			break;
+		}
+	}
+	deviceListChanged() {
+		this.requestUpdate();
+		let e = this.model.device();
+		if (!e) return;
+		let t = this.allDevices();
+		t.indexOf(e) === -1 ? t.length ? this.emulateDevice(t[0]) : this.model.emulate(z.Responsive, null, null) : this.emulateDevice(e);
+	}
+	spanClicked() {
+		let e = this.model.device();
+		if (!e || !e.isDualScreen && !e.isFoldableScreen) return;
+		let t = this.autoAdjustScaleSetting.get() ? void 0 : this.model.scaleSetting().get(), n = this.model.mode();
+		if (!n) return;
+		let r = e.getSpanPartner(n);
+		r && this.model.emulate(this.model.type(), e, r, t);
+	}
+	modeMenuClicked(e) {
+		if (this.model.isScreenOrientationLocked()) return;
+		let t = this.model.device(), n = this.model, r = this.autoAdjustScaleSetting;
+		if (n.type() === z.Responsive) {
+			let e = n.appliedDeviceSize();
+			r.get() ? n.setSizeAndScaleToFit(e.height, e.width) : (n.setWidth(e.height), n.setHeight(e.width));
+			return;
+		}
+		if (!t) return;
+		if ((t.isDualScreen || t.isFoldableScreen || t.modes.length === 2) && t.modes[0].orientation !== t.modes[1].orientation) {
+			let e = r.get() ? void 0 : n.scaleSetting().get(), i = n.mode();
+			if (!i) return;
+			let a = t.getRotationPartner(i);
+			if (!a) return;
+			n.emulate(n.type(), n.device(), a, e);
+			return;
+		}
+		let i = e.target, a = new M(e, {
+			x: i.getBoundingClientRect().left,
+			y: i.getBoundingClientRect().top + i.offsetHeight
+		});
+		o(Pe, W(H.portrait)), o(Ae, W(H.landscape)), a.show();
+		function o(e, n) {
+			if (!t) return;
+			let r = t.modesForOrientation(e);
+			if (r.length) if (r.length === 1) s(r[0], n);
+			else for (let e = 0; e < r.length; e++) s(r[e], n + " – " + r[e].title);
+		}
+		function s(e, t) {
+			a.defaultSection().appendCheckboxItem(t, c.bind(null, e), {
+				checked: n.mode() === e,
+				jslogContext: "device-mode"
+			});
+		}
+		function c(e) {
+			let t = r.get() ? void 0 : n.scaleSetting().get();
+			n.emulate(n.type(), n.device(), e, t);
+		}
+	}
+	getPrettyFitZoomPercentage() {
+		return `${(this.model.fitScale() * 100).toFixed(0)}`;
+	}
+	getPrettyZoomPercentage() {
+		return `${(this.model.scale() * 100).toFixed(0)}`;
+	}
+	restore() {
+		for (let e of this.allDevices()) if (e.title === this.persistenceSetting.get().device) {
+			for (let t of e.modes) if (t.orientation === this.persistenceSetting.get().orientation && t.title === this.persistenceSetting.get().mode) {
+				this.lastMode.set(e, t), this.emulateDevice(e);
+				return;
+			}
+		}
+		this.model.emulate(z.Responsive, null, null);
+	}
+}, Je = "/*\n * Copyright 2015 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  overflow: hidden;\n  align-items: stretch;\n  flex: auto;\n  background-color: var(--app-color-toolbar-background);\n}\n\n.device-mode-toolbar {\n  flex: none;\n  background-color: var(--app-color-toolbar-background);\n  border-bottom: 1px solid var(--sys-color-divider);\n  display: flex;\n  flex-direction: row;\n  align-items: stretch;\n}\n\n.device-mode-x {\n  margin: 0 1px;\n  font-size: 16px;\n}\n\n.device-mode-size-input {\n  /*\n   * 4 characters for the maximum size of the value,\n   * 2 characters for the width of the step-buttons,\n   * 2 pixels padding between the characters and the\n   * step-buttons.\n   */\n  width: calc(4ch + 2ch + 2px);\n  max-height: 18px;\n  border: var(--sys-color-neutral-outline);\n  border-radius: 4px;\n  margin: 0 2px;\n  text-align: center;\n  font-size: inherit;\n  font-family: inherit;\n}\n\n.device-mode-size-input:disabled {\n  user-select: none;\n}\n\n.device-mode-size-input:focus::-webkit-input-placeholder {\n  color: transparent;\n}\n\n.device-mode-empty-toolbar-element {\n  width: 0;\n}\n\ndevtools-toolbar {\n  overflow: hidden;\n  flex: 0 100000 auto;\n  padding: 0 5px;\n\n  &[wrappable] {\n    height: var(--toolbar-height);\n  }\n}\n\ndevtools-toolbar.main-toolbar {\n  margin: 0 auto;\n}\n\ndevtools-toolbar.device-mode-toolbar-options {\n  flex: none;\n}\n\n.device-mode-content-clip {\n  overflow: hidden;\n  flex: auto;\n}\n\n.device-mode-media-container {\n  flex: none;\n  overflow: hidden;\n  box-shadow: inset 0 -1px var(--sys-color-divider);\n}\n\n.device-mode-content-clip:not(.device-mode-outline-visible) .device-mode-media-container {\n  margin-bottom: 20px;\n}\n\n.device-mode-presets-container {\n  flex: 0 0 20px;\n  display: flex;\n}\n\n.device-mode-presets-container-inner {\n  flex: auto;\n  justify-content: center;\n  position: relative;\n  background-color: var(--sys-color-surface1);\n  border-bottom: 1px solid var(--sys-color-divider);\n}\n\n.device-mode-presets-container:hover {\n  transition: opacity 0.1s;\n  transition-delay: 50ms;\n  opacity: 100%;\n}\n\n.device-mode-preset-bar-outer {\n  pointer-events: none;\n  display: flex;\n  justify-content: center;\n}\n\n.device-mode-preset-bar {\n  border-left: 2px solid var(--sys-color-divider);\n  border-right: 2px solid var(--sys-color-divider);\n  pointer-events: auto;\n  text-align: center;\n  flex: none;\n  color: var(--sys-color-on-surface);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  white-space: nowrap;\n  margin-bottom: 1px;\n}\n\n.device-mode-preset-bar:hover {\n  transition: background-color 0.1s;\n  transition-delay: 50ms;\n  background-color: var(--sys-color-state-hover-on-subtle);\n}\n\n.device-mode-preset-bar > span {\n  visibility: hidden;\n}\n\n.device-mode-preset-bar:hover > span {\n  transition: visibility 0.1s;\n  transition-delay: 50ms;\n  visibility: visible;\n}\n\n.device-mode-content-area {\n  flex: auto;\n  position: relative;\n  margin: 0;\n}\n\n.device-mode-screen-area {\n  position: absolute;\n  left: 0;\n  right: 0;\n  width: 0;\n  height: 0;\n  background-color: var(--sys-color-inverse-surface);\n}\n\n.device-mode-content-clip:not(.device-mode-outline-visible) .device-mode-screen-area {\n  --override-screen-area-box-shadow: hsl(240deg 3% 84%) 0 0 0 0.5px, hsl(0deg 0% 80% / 40%) 0 0 20px;\n\n  box-shadow: var(--override-screen-area-box-shadow);\n}\n\n.theme-with-dark-background .device-mode-content-clip:not(.device-mode-outline-visible) .device-mode-screen-area,\n:host-context(.theme-with-dark-background) .device-mode-content-clip:not(.device-mode-outline-visible) .device-mode-screen-area {\n  --override-screen-area-box-shadow: rgb(40 40 42) 0 0 0 0.5px, rgb(51 51 51 / 40%) 0 0 20px;\n}\n\n.device-mode-screen-image {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n}\n\n.device-mode-resizer {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  transition: background-color 0.1s ease, opacity 0.1s ease;\n}\n\n.device-mode-resizer:hover {\n  background-color: var(--sys-color-state-hover-on-subtle);\n  opacity: 100%;\n}\n\n.device-mode-resizer > div {\n  pointer-events: none;\n}\n\n.device-mode-right-resizer {\n  top: 0;\n  bottom: -1px;\n  right: -20px;\n  width: 20px;\n}\n\n.device-mode-left-resizer {\n  top: 0;\n  bottom: -1px;\n  left: -20px;\n  width: 20px;\n  opacity: 0%;\n}\n\n.device-mode-bottom-resizer {\n  left: 0;\n  right: -1px;\n  bottom: -20px;\n  height: 20px;\n}\n\n.device-mode-bottom-right-resizer {\n  inset: 0 -20px -20px 0;\n  background-color: var(--sys-color-surface1);\n}\n\n.device-mode-bottom-left-resizer {\n  inset: 0 0 -20px -20px;\n  opacity: 0%;\n}\n\n.device-mode-right-resizer > div {\n  /* stylelint-disable-next-line custom-property-pattern */\n  content: var(--image-file-resizeHorizontal);\n  width: 6px;\n  height: 26px;\n}\n\n.device-mode-left-resizer > div {\n  /* stylelint-disable-next-line custom-property-pattern */\n  content: var(--image-file-resizeHorizontal);\n  width: 6px;\n  height: 26px;\n}\n\n.device-mode-bottom-resizer > div {\n  /* stylelint-disable-next-line custom-property-pattern */\n  content: var(--image-file-resizeVertical);\n  margin-bottom: -2px;\n  width: 26px;\n  height: 6px;\n}\n\n.device-mode-bottom-right-resizer > div {\n  position: absolute;\n  bottom: 3px;\n  right: 3px;\n  width: 13px;\n  height: 13px;\n  /* stylelint-disable-next-line custom-property-pattern */\n  content: var(--image-file-resizeDiagonal);\n}\n\n.device-mode-bottom-left-resizer > div {\n  position: absolute;\n  bottom: 3px;\n  left: 3px;\n  width: 13px;\n  height: 13px;\n  /* stylelint-disable-next-line custom-property-pattern */\n  content: var(--image-file-resizeDiagonal);\n  transform: rotate(90deg);\n}\n\n.device-mode-page-area {\n  position: absolute;\n  left: 0;\n  right: 0;\n  width: 0;\n  height: 0;\n  display: flex;\n  background-color: var(--sys-color-cdt-base-container);\n}\n\n.device-mode-ruler {\n  position: absolute;\n  overflow: visible;\n}\n\n.device-mode-ruler-top {\n  height: 20px;\n  right: 0;\n}\n\n.device-mode-ruler-left {\n  width: 20px;\n  bottom: 0;\n}\n\n.device-mode-ruler-content {\n  pointer-events: none;\n  position: absolute;\n  left: -20px;\n  top: -20px;\n}\n\n.device-mode-ruler-top .device-mode-ruler-content {\n  border-top: 1px solid transparent;\n  right: 0;\n  bottom: 20px;\n  background-color: var(--sys-color-cdt-base-container);\n}\n\n.device-mode-ruler-left .device-mode-ruler-content {\n  border-left: 1px solid transparent;\n  border-top: 1px solid transparent;\n  right: 20px;\n  bottom: 0;\n}\n\n.device-mode-content-clip.device-mode-outline-visible .device-mode-ruler-top .device-mode-ruler-content {\n  border-top: 1px solid var(--sys-color-token-subtle);\n}\n\n.device-mode-content-clip.device-mode-outline-visible .device-mode-ruler-left .device-mode-ruler-content {\n  border-left: 1px solid var(--sys-color-token-subtle);\n  border-top: 1px solid var(--sys-color-token-subtle);\n}\n\n.device-mode-ruler-inner {\n  position: absolute;\n}\n\n.device-mode-ruler-top .device-mode-ruler-inner {\n  inset: 0 0 0 20px;\n  border-bottom: 1px solid var(--sys-color-token-subtle);\n}\n\n.device-mode-ruler-left .device-mode-ruler-inner {\n  inset: 19px 0 0;\n  border-right: 1px solid var(--sys-color-token-subtle);\n  background-color: var(--sys-color-cdt-base-container);\n}\n\n.device-mode-ruler-marker {\n  position: absolute;\n}\n\n.device-mode-ruler-top .device-mode-ruler-marker {\n  width: 0;\n  height: 5px;\n  bottom: 0;\n  border-right: 1px solid var(--sys-color-token-subtle);\n  margin-right: -1px;\n}\n\n.device-mode-ruler-top .device-mode-ruler-marker.device-mode-ruler-marker-medium {\n  height: 10px;\n}\n\n.device-mode-ruler-top .device-mode-ruler-marker.device-mode-ruler-marker-large {\n  height: 15px;\n}\n\n.device-mode-ruler-left .device-mode-ruler-marker {\n  height: 0;\n  width: 5px;\n  right: 0;\n  border-bottom: 1px solid var(--sys-color-token-subtle);\n  margin-bottom: -1px;\n}\n\n.device-mode-ruler-left .device-mode-ruler-marker.device-mode-ruler-marker-medium {\n  width: 10px;\n}\n\n.device-mode-ruler-left .device-mode-ruler-marker.device-mode-ruler-marker-large {\n  width: 15px;\n}\n\n.device-mode-ruler-text {\n  color: var(--sys-color-token-subtle);\n  position: relative;\n  pointer-events: auto;\n}\n\n.device-mode-ruler-text:hover {\n  color: var(--sys-color-on-surface);\n}\n\n.device-mode-ruler-top .device-mode-ruler-text {\n  left: 2px;\n  top: -2px;\n}\n\n.device-mode-ruler-left .device-mode-ruler-text {\n  left: -4px;\n  top: -15px;\n  transform: rotate(270deg);\n}\n", Ye = "/*\n * Copyright 2015 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/* Media query bars */\n\n.media-inspector-view {\n  height: 50px;\n}\n\n.media-inspector-marker-container {\n  height: 14px;\n  margin: 2px 0;\n  position: relative;\n}\n\n.media-inspector-bar {\n  display: flex;\n  flex-direction: row;\n  align-items: stretch;\n  pointer-events: none;\n  position: absolute;\n  inset: 0;\n}\n\n.media-inspector-marker {\n  flex: none;\n  pointer-events: auto;\n  margin: 1px 0;\n  white-space: nowrap;\n  z-index: auto;\n  position: relative;\n}\n\n.media-inspector-marker-spacer {\n  flex: auto;\n}\n\n.media-inspector-marker:hover {\n  margin: -1px 0;\n  opacity: 100%;\n}\n\n.media-inspector-marker-min-width {\n  flex: auto;\n  background-color: var(--sys-color-yellow-container);\n  border-right: 2px solid var(--sys-color-yellow-bright);\n  border-left: 2px solid var(--sys-color-yellow-bright);\n\n  &:hover {\n    background-color: color-mix(in srgb, var(--sys-color-yellow-container), var(--sys-color-yellow-bright) 30%);\n  }\n}\n\n.media-inspector-marker-min-width-right {\n  border-left: 2px solid var(--sys-color-yellow-bright);\n}\n\n.media-inspector-marker-min-width-left {\n  border-right: 2px solid var(--sys-color-yellow-bright);\n}\n\n.media-inspector-marker-min-max-width {\n  background-color: var(--sys-color-tertiary-container);\n  border-left: 2px solid var(--sys-color-tertiary);\n  border-right: 2px solid var(--sys-color-tertiary);\n}\n\n.media-inspector-marker-min-max-width:hover {\n  z-index: 1;\n}\n\n.media-inspector-marker-max-width {\n  background-color: var(--sys-color-inverse-primary);\n  border-right: 2px solid var(--sys-color-primary-bright);\n  border-left: 2px solid var(--sys-color-primary-bright);\n}\n\n/* Clear background colors when query is not active and not hovering */\n\n.media-inspector-marker-inactive .media-inspector-marker-min-width:not(:hover) {\n  background-color: var(--sys-color-surface-yellow);\n}\n\n.media-inspector-marker-inactive .media-inspector-marker-min-max-width:not(:hover) {\n  background-color: color-mix(in srgb, var(--sys-color-tertiary-container), var(--sys-color-cdt-base-container) 30%);\n}\n\n.media-inspector-marker-inactive .media-inspector-marker-max-width:not(:hover) {\n  background-color: var(--sys-color-tonal-container);\n}\n\n/* Media query labels */\n\n.media-inspector-marker-label-container {\n  position: absolute;\n  z-index: 1;\n}\n\n.media-inspector-marker:not(:hover) .media-inspector-marker-label-container {\n  display: none;\n}\n\n.media-inspector-marker-label-container-left {\n  left: -2px;\n}\n\n.media-inspector-marker-label-container-right {\n  right: -2px;\n}\n\n.media-inspector-marker-label {\n  color: var(--sys-color-on-surface);\n  position: absolute;\n  top: 1px;\n  bottom: 0;\n  font-size: 12px;\n  pointer-events: none;\n}\n\n.media-inspector-label-right {\n  right: 4px;\n}\n\n.media-inspector-label-left {\n  left: 4px;\n}\n", Xe = /* @__PURE__ */ e({
+	DEFAULT_VIEW: () => et,
+	MediaQueryInspector: () => it,
+	MediaQueryUIModel: () => ot,
+	Section: () => at
+}), Ze = { revealInSourceCode: "Reveal in source code" }, Qe = d("panels/emulation/MediaQueryInspector.ts", Ze), $e = s.bind(void 0, Qe), { classMap: G } = le, et = (e, t, n) => {
+	let r = (e) => ({
+		"media-inspector-bar": !0,
+		"media-inspector-marker-inactive": !e.active
+	});
+	b(O`
+    <style>${Ye}</style>
+    <div class='media-inspector-view'>
+    ${e.markers.entries().map(([t, n]) => O`
+      <div class='media-inspector-marker-container'>
+        ${n.map((n) => O`
+          <div
+              class=${G(r(n))}
+              @click=${() => e.onMediaQueryClicked(n.model)}
+              @contextmenu=${(t) => e.onContextMenu(t, n.locations)}
+          >
+            ${t === 0 ? tt(e.zoomFactor, n.model) : t === 1 ? nt(e.zoomFactor, n.model) : rt(e.zoomFactor, n.model)}
+          </div>
+        `)}
+      </div>
+    `).toArray()}
+    </div>`, n, { container: { attributes: { jslog: `${oe().track({ click: !0 })}` } } });
+};
+function tt(e, t) {
+	return O`
+    <div class='media-inspector-marker-spacer'></div>
+    <div
+        class='media-inspector-marker media-inspector-marker-max-width'
+        style=${"width: " + t.maxWidthValue(e) + "px"}
+        title=${t.mediaText()}
+    >
+      ${K(t.maxWidthExpression(), !1, !1)}
+      ${K(t.maxWidthExpression(), !0, !0)}
+    </div>
+    <div class='media-inspector-marker-spacer'></div>
+  `;
+}
+function nt(e, t) {
+	let n = (t.maxWidthValue(e) - t.minWidthValue(e)) * .5;
+	return O`
+    <div class='media-inspector-marker-spacer'></div>
+    <div
+        class='media-inspector-marker media-inspector-marker-min-max-width'
+        style=${"width: " + n + "px"}
+        title=${t.mediaText()}
+    >
+      ${K(t.maxWidthExpression(), !0, !1)}
+      ${K(t.minWidthExpression(), !1, !0)}
+    </div>
+    <div class='media-inspector-marker-spacer' style=${"flex: 0 0 " + t.minWidthValue(e) + "px"}></div>
+    <div
+        class='media-inspector-marker media-inspector-marker-min-max-width'
+        style=${"width: " + n + "px"}
+        title=${t.mediaText()}
+    >
+      ${K(t.minWidthExpression(), !0, !1)}
+      ${K(t.maxWidthExpression(), !1, !0)}
+    </div>
+    <div class='media-inspector-marker-spacer'></div>
+  `;
+}
+function rt(e, t) {
+	return O`
+    <div
+        class='media-inspector-marker media-inspector-marker-min-width media-inspector-marker-min-width-left'
+        title=${t.mediaText()}
+    >${K(t.minWidthExpression(), !1, !1)}</div>
+    <div class='media-inspector-marker-spacer' style=${"flex: 0 0 " + t.minWidthValue(e) + "px"}></div>
+    <div
+        class='media-inspector-marker media-inspector-marker-min-width media-inspector-marker-min-width-right'
+        title=${t.mediaText()}
+    >${K(t.minWidthExpression(), !0, !0)}</div>
+  `;
+}
+function K(e, t, n) {
+	if (!e) return de;
+	let r = {
+		"media-inspector-marker-label-container": !0,
+		"media-inspector-marker-label-container-left": t,
+		"media-inspector-marker-label-container-right": !t
+	}, i = {
+		"media-inspector-marker-label": !0,
+		"media-inspector-label-left": n,
+		"media-inspector-label-right": !n
+	};
+	return O`
+    <div class=${G(r)}>
+      <span class=${G(i)}>${e.value()}${e.unit()}</span>
+    </div>
+  `;
+}
+var it = class extends L {
+	view;
+	mediaThrottler;
+	getWidthCallback;
+	setWidthCallback;
+	scale;
+	cssModel;
+	cachedQueryModels;
+	constructor(e, t, n, r = et) {
+		super({ useShadowDom: "pure" }), this.view = r, this.mediaThrottler = n, this.getWidthCallback = e, this.setWidthCallback = t, this.scale = 1, T.instance().observeModels(h, this), k.instance().addEventListener(j.ZOOM_CHANGED, this.requestUpdate.bind(this), this);
+	}
+	modelAdded(e) {
+		e.target() === T.instance().primaryPageTarget() && (this.cssModel = e, this.cssModel.addEventListener(E.StyleSheetAdded, this.scheduleMediaQueriesUpdate, this), this.cssModel.addEventListener(E.StyleSheetRemoved, this.scheduleMediaQueriesUpdate, this), this.cssModel.addEventListener(E.StyleSheetChanged, this.scheduleMediaQueriesUpdate, this), this.cssModel.addEventListener(E.MediaQueryResultChanged, this.scheduleMediaQueriesUpdate, this));
+	}
+	modelRemoved(e) {
+		e === this.cssModel && (this.cssModel.removeEventListener(E.StyleSheetAdded, this.scheduleMediaQueriesUpdate, this), this.cssModel.removeEventListener(E.StyleSheetRemoved, this.scheduleMediaQueriesUpdate, this), this.cssModel.removeEventListener(E.StyleSheetChanged, this.scheduleMediaQueriesUpdate, this), this.cssModel.removeEventListener(E.MediaQueryResultChanged, this.scheduleMediaQueriesUpdate, this), delete this.cssModel);
+	}
+	setAxisTransform(e) {
+		Math.abs(this.scale - e) < 1e-8 || (this.scale = e, this.performUpdate());
+	}
+	onMediaQueryClicked(e) {
+		let t = e.maxWidthExpression(), n = e.minWidthExpression();
+		if (e.section() === 0) {
+			this.setWidthCallback(t && t.computedLength() || 0);
+			return;
+		}
+		if (e.section() === 2) {
+			this.setWidthCallback(n && n.computedLength() || 0);
+			return;
+		}
+		let r = this.getWidthCallback();
+		n && r !== n.computedLength() ? this.setWidthCallback(n.computedLength() || 0) : this.setWidthCallback(t && t.computedLength() || 0);
+	}
+	onContextMenu(e, n) {
+		if (!this.cssModel?.isEnabled()) return;
+		let r = /* @__PURE__ */ new Map();
+		for (let e = 0; e < n.length; ++e) {
+			let i = Oe.instance().rawLocationToUILocation(n[e]);
+			if (!i) continue;
+			let a = typeof i.columnNumber == "number" ? t("%s:%d:%d", i.uiSourceCode.url(), i.lineNumber + 1, i.columnNumber + 1) : t("%s:%d", i.uiSourceCode.url(), i.lineNumber + 1);
+			r.set(a, i);
+		}
+		let i = [...r.keys()].sort(), a = new M(e), o = a.defaultSection().appendSubMenuItem($e(Ze.revealInSourceCode), void 0, "reveal-in-source-list");
+		for (let e = 0; e < i.length; ++e) {
+			let t = i[e];
+			o.defaultSection().appendItem(t, this.revealSourceLocation.bind(this, r.get(t)), { jslogContext: "reveal-in-source" });
+		}
+		a.show();
+	}
+	revealSourceLocation(e) {
+		o(e);
+	}
+	scheduleMediaQueriesUpdate() {
+		this.isShowing() && this.mediaThrottler.schedule(this.refetchMediaQueries.bind(this));
+	}
+	refetchMediaQueries() {
+		return !this.isShowing() || !this.cssModel ? Promise.resolve() : this.cssModel.getMediaQueries().then(this.rebuildMediaQueries.bind(this));
+	}
+	squashAdjacentEqual(e) {
+		let t = [];
+		for (let n = 0; n < e.length; ++n) t[t.length - 1]?.equals(e[n]) || t.push(e[n]);
+		return t;
+	}
+	rebuildMediaQueries(e) {
+		let t = [];
+		for (let n = 0; n < e.length; ++n) {
+			let r = e[n];
+			if (r.mediaList) for (let e = 0; e < r.mediaList.length; ++e) {
+				let n = r.mediaList[e], i = ot.createFromMediaQuery(r, n);
+				i && t.push(i);
+			}
+		}
+		t.sort(r), t = this.squashAdjacentEqual(t);
+		let n = this.cachedQueryModels && this.cachedQueryModels.length === t.length;
+		for (let e = 0; n && e < t.length; ++e) n &&= this.cachedQueryModels?.[e].equals(t[e]);
+		if (n) return;
+		this.cachedQueryModels = t, this.requestUpdate();
+		function r(e, t) {
+			return e.compareTo(t);
+		}
+	}
+	buildMediaQueryMarkers() {
+		if (!this.cachedQueryModels) return [];
+		let e = [], t = null;
+		for (let n of this.cachedQueryModels) {
+			t?.model.dimensionsEqual(n) ? t.active = t.active || n.active() : (t = {
+				active: n.active(),
+				model: n,
+				locations: []
+			}, e.push(t));
+			let r = n.rawLocation();
+			r && t.locations.push(r);
+		}
+		return e;
+	}
+	zoomFactor() {
+		return k.instance().zoomFactor() / this.scale;
+	}
+	wasShown() {
+		super.wasShown(), this.scheduleMediaQueriesUpdate(), this.performUpdate();
+	}
+	performUpdate() {
+		let e = Map.groupBy(this.buildMediaQueryMarkers(), (e) => e.model.section());
+		this.view({
+			zoomFactor: this.zoomFactor(),
+			markers: e,
+			onMediaQueryClicked: this.onMediaQueryClicked.bind(this),
+			onContextMenu: this.onContextMenu.bind(this)
+		}, {}, this.contentElement);
+	}
+}, at = /* @__PURE__ */ function(e) {
+	return e[e.MAX = 0] = "MAX", e[e.MIN_MAX = 1] = "MIN_MAX", e[e.MIN = 2] = "MIN", e;
+}({}), ot = class e {
+	cssMedia;
+	#e;
+	#t;
+	#n;
+	#r;
+	#i;
+	constructor(e, t, n, r) {
+		this.cssMedia = e, this.#e = t, this.#t = n, this.#n = r, n && !t ? this.#r = 0 : t && n ? this.#r = 1 : this.#r = 2;
+	}
+	static createFromMediaQuery(t, n) {
+		let r = null, i = Number.MAX_VALUE, a = null, o = Number.MIN_VALUE, s = n.expressions();
+		if (!s) return null;
+		for (let e = 0; e < s.length; ++e) {
+			let t = s[e], n = t.feature();
+			if (n.indexOf("width") === -1) continue;
+			let c = t.computedLength();
+			n.startsWith("max-") && c && c < i ? (r = t, i = c) : n.startsWith("min-") && c && c > o && (a = t, o = c);
+		}
+		return o > i || !r && !a ? null : new e(t, a, r, n.active());
+	}
+	equals(e) {
+		return this.compareTo(e) === 0;
+	}
+	dimensionsEqual(e) {
+		let t = this.minWidthExpression(), n = e.minWidthExpression(), r = this.maxWidthExpression(), i = e.maxWidthExpression(), a = this.section() === e.section(), o = !t || t.computedLength() === n?.computedLength(), s = !r || r.computedLength() === i?.computedLength();
+		return a && o && s;
+	}
+	compareTo(e) {
+		if (this.section() !== e.section()) return this.section() - e.section();
+		if (this.dimensionsEqual(e)) {
+			let t = this.rawLocation(), n = e.rawLocation();
+			return !t && !n ? i(this.mediaText(), e.mediaText()) : t && !n ? 1 : !t && n ? -1 : this.active() === e.active() ? !t || !n ? 0 : i(t.url, n.url) || t.lineNumber - n.lineNumber || t.columnNumber - n.columnNumber : this.active() ? -1 : 1;
+		}
+		let t = this.maxWidthExpression(), n = e.maxWidthExpression(), r = t && t.computedLength() || 0, a = n && n.computedLength() || 0, o = this.minWidthExpression(), s = e.minWidthExpression(), c = o && o.computedLength() || 0, l = s && s.computedLength() || 0;
+		return this.section() === 0 ? a - r : this.section() === 2 ? c - l : c - l || a - r;
+	}
+	section() {
+		return this.#r;
+	}
+	mediaText() {
+		return this.cssMedia.text || "";
+	}
+	rawLocation() {
+		return this.#i ||= this.cssMedia.rawLocation(), this.#i;
+	}
+	minWidthExpression() {
+		return this.#e;
+	}
+	maxWidthExpression() {
+		return this.#t;
+	}
+	minWidthValue(e) {
+		let t = this.minWidthExpression();
+		return t ? (t.computedLength() || 0) / e : 0;
+	}
+	maxWidthValue(e) {
+		let t = this.maxWidthExpression();
+		return t ? (t.computedLength() || 0) / e : 0;
+	}
+	active() {
+		return this.#n;
+	}
+}, st = /* @__PURE__ */ e({
+	DeviceModeView: () => Y,
+	Ruler: () => X
+}), q = {
+	doubleclickForFullHeight: "Double-click for full height",
+	mobileS: "Mobile S",
+	mobileM: "Mobile M",
+	mobileL: "Mobile L",
+	tablet: "Tablet",
+	laptop: "Laptop",
+	laptopL: "Laptop L"
+}, ct = d("panels/emulation/DeviceModeView.ts", q), J = s.bind(void 0, ct), Y = class extends P {
+	wrapperInstance;
+	blockElementToWidth;
+	model;
+	mediaInspector;
+	showMediaInspectorSetting;
+	showRulersSetting;
+	topRuler;
+	leftRuler;
+	presetBlocks;
+	responsivePresetsContainer;
+	screenArea;
+	pageArea;
+	outlineImage;
+	contentClip;
+	contentArea;
+	rightResizerElement;
+	leftResizerElement;
+	bottomResizerElement;
+	bottomRightResizerElement;
+	bottomLeftResizerElement;
+	cachedResizable;
+	mediaInspectorContainer;
+	screenImage;
+	toolbar;
+	slowPositionStart;
+	resizeStart;
+	cachedCssScreenRect;
+	cachedCssVisiblePageRect;
+	cachedOutlineRect;
+	cachedMediaInspectorVisible;
+	cachedShowRulers;
+	cachedScale;
+	handleWidth;
+	handleHeight;
+	constructor() {
+		super({ useShadowDom: !0 }), this.blockElementToWidth = /* @__PURE__ */ new WeakMap(), this.setMinimumSize(150, 150), this.element.classList.add("device-mode-view"), this.registerRequiredCSS(Je), this.model = Fe.instance(), this.model.addEventListener(Ne.UPDATED, this.updateUI, this), this.mediaInspector = new it(() => this.model.appliedDeviceSize().width, this.model.setWidth.bind(this.model), new u(0)), this.showMediaInspectorSetting = c.instance().moduleSetting("show-media-query-inspector"), this.showMediaInspectorSetting.addChangeListener(this.updateUI, this), this.showRulersSetting = c.instance().moduleSetting("emulation.show-rulers"), this.showRulersSetting.addChangeListener(this.updateUI, this), this.topRuler = new X(!0, this.model.setWidthAndScaleToFit.bind(this.model)), this.topRuler.element.classList.add("device-mode-ruler-top"), this.leftRuler = new X(!1, this.model.setHeightAndScaleToFit.bind(this.model)), this.leftRuler.element.classList.add("device-mode-ruler-left"), this.createUI(), k.instance().addEventListener(j.ZOOM_CHANGED, this.zoomChanged, this);
+	}
+	createUI() {
+		this.toolbar = new qe(this.model, this.showMediaInspectorSetting, this.showRulersSetting), this.toolbar.show(this.contentElement), this.contentClip = this.contentElement.createChild("div", "device-mode-content-clip vbox"), this.responsivePresetsContainer = this.contentClip.createChild("div", "device-mode-presets-container"), this.responsivePresetsContainer.setAttribute("jslog", `${Ce()}`), this.populatePresetsContainer(), this.mediaInspectorContainer = this.contentClip.createChild("div", "device-mode-media-container"), this.contentArea = this.contentClip.createChild("div", "device-mode-content-area"), this.outlineImage = this.contentArea.createChild("img", "device-mode-outline-image hidden fill"), this.outlineImage.addEventListener("load", this.onImageLoaded.bind(this, this.outlineImage, !0), !1), this.outlineImage.addEventListener("error", this.onImageLoaded.bind(this, this.outlineImage, !1), !1), this.screenArea = this.contentArea.createChild("div", "device-mode-screen-area"), this.screenImage = this.screenArea.createChild("img", "device-mode-screen-image hidden"), this.screenImage.addEventListener("load", this.onImageLoaded.bind(this, this.screenImage, !0), !1), this.screenImage.addEventListener("error", this.onImageLoaded.bind(this, this.screenImage, !1), !1), this.bottomRightResizerElement = this.screenArea.createChild("div", "device-mode-resizer device-mode-bottom-right-resizer"), this.bottomRightResizerElement.createChild("div", ""), this.createResizer(this.bottomRightResizerElement, 2, 1), this.bottomLeftResizerElement = this.screenArea.createChild("div", "device-mode-resizer device-mode-bottom-left-resizer"), this.bottomLeftResizerElement.createChild("div", ""), this.createResizer(this.bottomLeftResizerElement, -2, 1), this.rightResizerElement = this.screenArea.createChild("div", "device-mode-resizer device-mode-right-resizer"), this.rightResizerElement.createChild("div", ""), this.createResizer(this.rightResizerElement, 2, 0), this.leftResizerElement = this.screenArea.createChild("div", "device-mode-resizer device-mode-left-resizer"), this.leftResizerElement.createChild("div", ""), this.createResizer(this.leftResizerElement, -2, 0), this.bottomResizerElement = this.screenArea.createChild("div", "device-mode-resizer device-mode-bottom-resizer"), this.bottomResizerElement.createChild("div", ""), this.createResizer(this.bottomResizerElement, 0, 1), this.bottomResizerElement.addEventListener("dblclick", this.model.setHeight.bind(this.model, 0), !1), se.install(this.bottomResizerElement, J(q.doubleclickForFullHeight)), this.pageArea = this.screenArea.createChild("div", "device-mode-page-area"), this.pageArea.createChild("slot");
+	}
+	populatePresetsContainer() {
+		let e = [
+			320,
+			375,
+			425,
+			768,
+			1024,
+			1440,
+			2560
+		], t = [
+			J(q.mobileS),
+			J(q.mobileM),
+			J(q.mobileL),
+			J(q.tablet),
+			J(q.laptop),
+			J(q.laptopL),
+			"4K"
+		];
+		this.presetBlocks = [];
+		let n = this.responsivePresetsContainer.createChild("div", "device-mode-presets-container-inner");
+		for (let i = e.length - 1; i >= 0; --i) {
+			let a = n.createChild("div", "fill device-mode-preset-bar-outer").createChild("div", "device-mode-preset-bar");
+			a.createChild("span").textContent = t[i] + " – " + e[i] + "px", a.setAttribute("jslog", `${F().track({ click: !0 }).context(`device-mode-preset-${e[i]}px`)}`), a.addEventListener("click", r.bind(this, e[i]), !1), this.blockElementToWidth.set(a, e[i]), this.presetBlocks.push(a);
+		}
+		function r(e, t) {
+			this.model.emulate(z.Responsive, null, null), this.model.setWidthAndScaleToFit(e), t.consume();
+		}
+	}
+	createResizer(e, t, n) {
+		let r = new fe();
+		e.setAttribute("jslog", `${ye("device-mode-resizer").track({ drag: !0 })}`), r.addElement(e);
+		let i = t ? "ew-resize" : "ns-resize";
+		return t * n > 0 && (i = "nwse-resize"), t * n < 0 && (i = "nesw-resize"), r.setCursor(i), r.addEventListener(N.RESIZE_START, this.onResizeStart, this), r.addEventListener(N.RESIZE_UPDATE_XY, this.onResizeUpdate.bind(this, t, n)), r.addEventListener(N.RESIZE_END, this.onResizeEnd, this), r;
+	}
+	onResizeStart() {
+		this.slowPositionStart = null;
+		let e = this.model.screenRect();
+		this.resizeStart = new R(e.width, e.height);
+	}
+	onResizeUpdate(e, t, n) {
+		n.data.shiftKey !== !!this.slowPositionStart && (this.slowPositionStart = n.data.shiftKey ? {
+			x: n.data.currentX,
+			y: n.data.currentY
+		} : null);
+		let r = n.data.currentX - n.data.startX, i = n.data.currentY - n.data.startY;
+		if (this.slowPositionStart && (r = (n.data.currentX - this.slowPositionStart.x) / 10 + this.slowPositionStart.x - n.data.startX, i = (n.data.currentY - this.slowPositionStart.y) / 10 + this.slowPositionStart.y - n.data.startY), e && this.resizeStart) {
+			let t = r * k.instance().zoomFactor(), n = this.resizeStart.width + t * e;
+			n = Math.round(n / this.model.scale()), n >= 50 && n <= 9999 && this.model.setWidth(n);
+		}
+		if (t && this.resizeStart) {
+			let e = i * k.instance().zoomFactor(), n = this.resizeStart.height + e * t;
+			n = Math.round(n / this.model.scale()), n >= 50 && n <= 9999 && this.model.setHeight(n);
+		}
+	}
+	exitHingeMode() {
+		this.model && this.model.exitHingeMode();
+	}
+	onResizeEnd() {
+		delete this.resizeStart, be.actionTaken(ge.ResizedViewInResponsiveMode);
+	}
+	updateUI() {
+		function e(e, t) {
+			e.style.left = t.left + "px", e.style.top = t.top + "px", e.style.width = t.width + "px", e.style.height = t.height + "px";
+		}
+		if (!this.isShowing()) return;
+		let t = k.instance().zoomFactor(), n = !1, r = this.showRulersSetting.get() && this.model.type() !== z.None, i = !1, a = !1, o = this.model.screenRect().scale(1 / t);
+		(!this.cachedCssScreenRect || !o.isEqual(this.cachedCssScreenRect)) && (e(this.screenArea, o), a = !0, n = !0, this.cachedCssScreenRect = o);
+		let s = this.model.visiblePageRect().scale(1 / t);
+		(!this.cachedCssVisiblePageRect || !s.isEqual(this.cachedCssVisiblePageRect)) && (e(this.pageArea, s), n = !0, this.cachedCssVisiblePageRect = s);
+		let c = this.model.outlineRect();
+		if (c) {
+			let r = c.scale(1 / t);
+			(!this.cachedOutlineRect || !r.isEqual(this.cachedOutlineRect)) && (e(this.outlineImage, r), n = !0, this.cachedOutlineRect = r);
+		}
+		this.contentClip.classList.toggle("device-mode-outline-visible", !!this.model.outlineImage());
+		let l = this.model.type() === z.Responsive;
+		l !== this.cachedResizable && (this.rightResizerElement.classList.toggle("hidden", !l), this.leftResizerElement.classList.toggle("hidden", !l), this.bottomResizerElement.classList.toggle("hidden", !l), this.bottomRightResizerElement.classList.toggle("hidden", !l), this.bottomLeftResizerElement.classList.toggle("hidden", !l), this.cachedResizable = l);
+		let u = this.showMediaInspectorSetting.get() && this.model.type() !== z.None;
+		if (u !== this.cachedMediaInspectorVisible && (u ? this.mediaInspector.show(this.mediaInspectorContainer) : this.mediaInspector.detach(), i = !0, n = !0, this.cachedMediaInspectorVisible = u), r !== this.cachedShowRulers && (this.contentClip.classList.toggle("device-mode-rulers-visible", r), r ? (this.topRuler.show(this.contentArea), this.leftRuler.show(this.contentArea)) : (this.topRuler.detach(), this.leftRuler.detach()), i = !0, n = !0, this.cachedShowRulers = r), this.model.scale() !== this.cachedScale) {
+			a = !0, n = !0;
+			for (let e of this.presetBlocks) {
+				let t = this.blockElementToWidth.get(e);
+				if (!t) throw Error("Could not get width for block.");
+				e.style.width = t * this.model.scale() + "px";
+			}
+			this.cachedScale = this.model.scale();
+		}
+		this.toolbar.requestUpdate(), this.loadImage(this.screenImage, this.model.screenImage()), this.loadImage(this.outlineImage, this.model.outlineImage()), this.mediaInspector.setAxisTransform(this.model.scale()), n && this.doResize(), a && (this.topRuler.render(this.model.scale()), this.leftRuler.render(this.model.scale()), this.topRuler.element.positionAt(this.cachedCssScreenRect ? this.cachedCssScreenRect.left : 0, this.cachedCssScreenRect ? this.cachedCssScreenRect.top : 0), this.leftRuler.element.positionAt(this.cachedCssScreenRect ? this.cachedCssScreenRect.left : 0, this.cachedCssScreenRect ? this.cachedCssScreenRect.top : 0)), i && this.contentAreaResized();
+	}
+	loadImage(e, t) {
+		e.getAttribute("srcset") !== t && (e.setAttribute("srcset", t), t || e.classList.toggle("hidden", !0));
+	}
+	onImageLoaded(e, t) {
+		e.classList.toggle("hidden", !t);
+	}
+	setNonEmulatedAvailableSize(e) {
+		if (this.model.type() !== z.None) return;
+		let t = k.instance().zoomFactor(), n = e.getBoundingClientRect(), r = new R(Math.max(n.width * t, 1), Math.max(n.height * t, 1));
+		this.model.setAvailableSize(r, r);
+	}
+	contentAreaResized() {
+		let e = k.instance().zoomFactor(), t = this.contentArea.getBoundingClientRect(), n = new R(Math.max(t.width * e, 1), Math.max(t.height * e, 1)), r = new R(Math.max((t.width - 2 * (this.handleWidth || 0)) * e, 1), Math.max((t.height - (this.handleHeight || 0)) * e, 1));
+		this.model.setAvailableSize(n, r);
+	}
+	measureHandles() {
+		let e = this.rightResizerElement.classList.contains("hidden");
+		this.rightResizerElement.classList.toggle("hidden", !1), this.bottomResizerElement.classList.toggle("hidden", !1), this.handleWidth = this.rightResizerElement.offsetWidth, this.handleHeight = this.bottomResizerElement.offsetHeight, this.rightResizerElement.classList.toggle("hidden", e), this.bottomResizerElement.classList.toggle("hidden", e);
+	}
+	zoomChanged() {
+		delete this.handleWidth, delete this.handleHeight, this.isShowing() && (this.measureHandles(), this.contentAreaResized());
+	}
+	onResize() {
+		this.isShowing() && this.contentAreaResized();
+	}
+	wasShown() {
+		super.wasShown(), this.measureHandles(), this.toolbar.restore();
+	}
+	willHide() {
+		super.willHide(), this.model.emulate(z.None, null, null);
+	}
+	async captureScreenshot() {
+		let e = await this.model.captureScreenshot(!1);
+		if (e === null) return;
+		let t = new Image();
+		t.src = "data:image/png;base64," + e, t.onload = async () => {
+			let e = t.naturalWidth / this.model.screenRect().width, n = this.model.outlineRect();
+			if (!n) throw Error("Unable to take screenshot: no outlineRect available.");
+			let r = n.scale(e), i = this.model.screenRect().scale(e), a = this.model.visiblePageRect().scale(e), o = i.left + a.left - r.left, s = i.top + a.top - r.top, c = document.createElement("canvas");
+			c.width = Math.floor(r.width), c.height = Math.min(16384, Math.floor(r.height));
+			let l = c.getContext("2d", { willReadFrequently: !0 });
+			if (!l) throw Error("Could not get 2d context from canvas.");
+			l.imageSmoothingEnabled = !1, this.model.outlineImage() && await this.paintImage(l, this.model.outlineImage(), r.relativeTo(r)), this.model.screenImage() && await this.paintImage(l, this.model.screenImage(), i.relativeTo(r)), l.drawImage(t, Math.floor(o), Math.floor(s)), this.saveScreenshot(c);
+		};
+	}
+	async captureFullSizeScreenshot() {
+		let e = await this.model.captureScreenshot(!0);
+		if (e !== null) return this.saveScreenshotBase64(e);
+	}
+	async captureAreaScreenshot(e) {
+		let t = await this.model.captureScreenshot(!1, e);
+		if (t !== null) return this.saveScreenshotBase64(t);
+	}
+	saveScreenshotBase64(e) {
+		let t = new Image();
+		t.src = "data:image/png;base64," + e, t.onload = () => {
+			let e = document.createElement("canvas");
+			e.width = t.naturalWidth, e.height = Math.min(16384, Math.floor(t.naturalHeight));
+			let n = e.getContext("2d", { willReadFrequently: !0 });
+			if (!n) throw Error("Could not get 2d context for base64 screenshot.");
+			n.imageSmoothingEnabled = !1, n.drawImage(t, 0, 0), this.saveScreenshot(e);
+		};
+	}
+	paintImage(e, t, n) {
+		return new Promise((r) => {
+			let i = new Image();
+			i.crossOrigin = "Anonymous", i.srcset = t, i.onerror = () => r(), i.onload = () => {
+				e.drawImage(i, n.left, n.top, n.width, n.height), r();
+			};
+		});
+	}
+	saveScreenshot(e) {
+		let t = this.model.inspectedURL(), i = "";
+		t && (i = n(r(t)));
+		let a = this.model.device();
+		a && this.model.type() === z.Device && (i += `(${a.title})`);
+		let o = document.createElement("a");
+		o.download = i + ".png", e.toBlob((e) => {
+			e !== null && (o.href = URL.createObjectURL(e), o.click());
+		});
+	}
+}, X = class extends P {
+	#e;
+	horizontal;
+	scale;
+	count;
+	throttler;
+	applyCallback;
+	renderedScale;
+	renderedZoomFactor;
+	constructor(e, t) {
+		super({ jslog: `${te().track({ click: !0 })}` }), this.element.classList.add("device-mode-ruler"), this.#e = this.element.createChild("div", "device-mode-ruler-content").createChild("div", "device-mode-ruler-inner"), this.horizontal = e, this.scale = 1, this.count = 0, this.throttler = new u(0), this.applyCallback = t;
+	}
+	render(e) {
+		this.scale = e, this.throttler.schedule(this.update.bind(this));
+	}
+	onResize() {
+		this.throttler.schedule(this.update.bind(this));
+	}
+	update() {
+		let e = k.instance().zoomFactor(), t = this.horizontal ? this.#e.offsetWidth : this.#e.offsetHeight;
+		(this.scale !== this.renderedScale || e !== this.renderedZoomFactor) && (this.#e.removeChildren(), this.count = 0, this.renderedScale = this.scale, this.renderedZoomFactor = e);
+		let n = t * e / this.scale, r = Math.ceil(n / 5), i = 1;
+		this.scale < .8 && (i = 2), this.scale < .6 && (i = 4), this.scale < .4 && (i = 8), this.scale < .2 && (i = 16), this.scale < .1 && (i = 32);
+		for (let e = r; e < this.count; e++) if (!(e % i)) {
+			let e = this.#e.lastChild;
+			e && e.remove();
+		}
+		for (let t = this.count; t < r; t++) {
+			if (t % i) continue;
+			let n = this.#e.createChild("div", "device-mode-ruler-marker");
+			if (t && (this.horizontal ? n.style.left = 5 * t * this.scale / e + "px" : n.style.top = 5 * t * this.scale / e + "px", !(t % 20))) {
+				let e = n.createChild("div", "device-mode-ruler-text");
+				e.textContent = String(t * 5), e.addEventListener("click", this.onMarkerClick.bind(this, t * 5), !1);
+			}
+			t % 10 ? t % 5 || n.classList.add("device-mode-ruler-marker-medium") : n.classList.add("device-mode-ruler-marker-large");
+		}
+		this.count = r;
+	}
+	onMarkerClick(e) {
+		this.applyCallback.call(null, e);
+	}
+}, lt = /* @__PURE__ */ e({
+	ActionDelegate: () => dt,
+	DeviceModeWrapper: () => Z
+}), ut, Z = class e extends P {
+	inspectedPagePlaceholder;
+	deviceModeView;
+	toggleDeviceModeAction;
+	showDeviceModeSetting;
+	constructor(e) {
+		super(), this.inspectedPagePlaceholder = e, this.deviceModeView = null, this.toggleDeviceModeAction = ve.instance().getAction("emulation.toggle-device-mode");
+		let t = Fe.instance();
+		this.showDeviceModeSetting = t.enabledSetting(), this.showDeviceModeSetting.setRequiresUserAction(!!f.queryParam("hasOtherClients")), this.showDeviceModeSetting.addChangeListener(this.update.bind(this, !1)), T.instance().addModelListener(we, he.SCREENSHOT_REQUESTED, this.screenshotRequestedFromOverlay, this), this.update(!0);
+	}
+	static instance(t = {
+		forceNew: null,
+		inspectedPagePlaceholder: null
+	}) {
+		let { forceNew: n, inspectedPagePlaceholder: r } = t;
+		if (!ut || n) {
+			if (!r) throw Error(`Unable to create DeviceModeWrapper: inspectedPagePlaceholder must be provided: ${(/* @__PURE__ */ Error()).stack}`);
+			ut = new e(r);
+		}
+		return ut;
+	}
+	toggleDeviceMode() {
+		this.showDeviceModeSetting.set(!this.showDeviceModeSetting.get());
+	}
+	isDeviceModeOn() {
+		return this.showDeviceModeSetting.get();
+	}
+	captureScreenshot(e, t) {
+		return this.deviceModeView ||= new Y(), this.deviceModeView.setNonEmulatedAvailableSize(this.inspectedPagePlaceholder.element), e ? this.deviceModeView.captureFullSizeScreenshot() : t ? this.deviceModeView.captureAreaScreenshot(t) : this.deviceModeView.captureScreenshot(), !0;
+	}
+	screenshotRequestedFromOverlay(e) {
+		let t = e.data;
+		this.captureScreenshot(!1, t);
+	}
+	update(e) {
+		this.toggleDeviceModeAction.setToggled(this.showDeviceModeSetting.get());
+		let t = this.showDeviceModeSetting.get();
+		!e && t === this.deviceModeView?.isShowing() || (t ? (this.deviceModeView ||= new Y(), this.deviceModeView.show(this.element), this.inspectedPagePlaceholder.clearMinimumSize(), this.inspectedPagePlaceholder.show(this.deviceModeView.element)) : (this.deviceModeView && (this.deviceModeView.exitHingeMode(), this.deviceModeView.detach()), this.inspectedPagePlaceholder.restoreMinimumSize(), this.inspectedPagePlaceholder.show(this.element)));
+	}
+}, dt = class {
+	handleAction(e, t) {
+		switch (t) {
+			case "emulation.capture-screenshot": return Z.instance().captureScreenshot();
+			case "emulation.capture-node-screenshot": {
+				let t = e.flavor(xe);
+				if (!t) return !0;
+				async function n() {
+					if (!t || !await t.resolveToObject()) return;
+					let e = await t.boxModel();
+					if (!e) throw Error(`Unable to get box model of the node: ${(/* @__PURE__ */ Error()).stack}`);
+					let n = e.border, r = await t.domModel().target().pageAgent().invoke_getLayoutMetrics();
+					if (r.getError()) throw Error(`Unable to get metrics: ${(/* @__PURE__ */ Error()).stack}`);
+					let i = r.cssVisualViewport.pageX, a = r.cssVisualViewport.pageY, { x: o, y: s } = await ft(t.domModel().target()), c = {
+						x: o + i + n[0],
+						y: s + a + n[1],
+						width: e.width,
+						height: e.height,
+						scale: 1
+					}, l = r.cssVisualViewport.zoom ?? 1;
+					c.x *= l, c.y *= l, c.width *= l, c.height *= l, Z.instance().captureScreenshot(!1, c);
+				}
+				return n(), !0;
+			}
+			case "emulation.capture-full-height-screenshot": return Z.instance().captureScreenshot(!0);
+			case "emulation.toggle-device-mode": return Z.instance().toggleDeviceMode(), !0;
+		}
+		return !1;
+	}
+};
+async function ft(e) {
+	if (!e) return {
+		x: 0,
+		y: 0
+	};
+	let t = e.parentTarget();
+	if (!t || t.type() !== ee.FRAME) return {
+		x: 0,
+		y: 0
+	};
+	let n = e.model(ce)?.mainFrame?.id;
+	if (!n) return {
+		x: 0,
+		y: 0
+	};
+	let r = t.model(Se);
+	if (!r) return {
+		x: 0,
+		y: 0
+	};
+	let i = await (await r.getOwnerNodeForFrame(n))?.resolvePromise();
+	if (!i) return {
+		x: 0,
+		y: 0
+	};
+	let a = await i.boxModel();
+	if (!a) return {
+		x: 0,
+		y: 0
+	};
+	let o = a.content, s = o[0], c = o[1], l = await t.pageAgent().invoke_getLayoutMetrics();
+	if (l.getError()) return {
+		x: 0,
+		y: 0
+	};
+	let u = l.cssVisualViewport.pageX, d = l.cssVisualViewport.pageY, f = await ft(t);
+	return {
+		x: s + u + f.x,
+		y: c + d + f.y
+	};
+}
+//#endregion
+//#region \0qilin-devtools:css:/home/runner/work/QiLin/QiLin/node_modules/.pnpm/chrome-devtools-frontend@1.0.1638082/node_modules/chrome-devtools-frontend/front_end/panels/emulation/inspectedPagePlaceholder.css.mjs
+var pt = "/*\n * Copyright 2016 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  background-color: var(--sys-color-cdt-base-container);\n}\n", mt = /* @__PURE__ */ e({
+	Events: () => _t,
+	InspectedPagePlaceholder: () => gt
+}), ht, gt = class e extends l(L) {
+	updateId;
+	constructor() {
+		super({ useShadowDom: !0 }), this.registerRequiredCSS(pt), k.instance().addEventListener(j.ZOOM_CHANGED, this.onResize, this), this.restoreMinimumSize();
+	}
+	static instance(t = { forceNew: null }) {
+		let { forceNew: n } = t;
+		return (!ht || n) && (ht = new e()), ht;
+	}
+	onResize() {
+		this.updateId && this.element.window().cancelAnimationFrame(this.updateId), this.updateId = this.element.window().requestAnimationFrame(this.update.bind(this, !1));
+	}
+	restoreMinimumSize() {
+		this.setMinimumSize(150, 150);
+	}
+	clearMinimumSize() {
+		this.setMinimumSize(1, 1);
+	}
+	dipPageRect() {
+		let e = k.instance().zoomFactor(), t = this.element.getBoundingClientRect(), n = this.element.ownerDocument.body.getBoundingClientRect(), r = Math.max(t.left * e, n.left * e), i = Math.max(t.top * e, n.top * e), a = Math.min(t.bottom * e, n.bottom * e);
+		return {
+			x: r,
+			y: i,
+			width: Math.min(t.right * e, n.right * e) - r,
+			height: a - i
+		};
+	}
+	update(e) {
+		delete this.updateId;
+		let t = this.dipPageRect(), n = {
+			x: Math.round(t.x),
+			y: Math.round(t.y),
+			height: Math.max(1, Math.round(t.height)),
+			width: Math.max(1, Math.round(t.width))
+		};
+		e && (--n.height, this.dispatchEventToListeners("Update", n), ++n.height), this.dispatchEventToListeners("Update", n);
+	}
+}, _t = /* @__PURE__ */ function(e) {
+	return e.UPDATE = "Update", e;
+}({}), vt = /* @__PURE__ */ e({
+	AdvancedApp: () => Q,
+	AdvancedAppProvider: () => bt
+}), yt, Q = class e {
+	rootSplitWidget;
+	deviceModeView;
+	inspectedPagePlaceholder;
+	toolboxWindow;
+	toolboxRootView;
+	changingDockSide;
+	constructor() {
+		y.instance().addEventListener(w.BEFORE_DOCK_SIDE_CHANGED, this.openToolboxWindow, this);
+	}
+	static instance() {
+		return yt ||= new e(), yt;
+	}
+	presentUI(e) {
+		let t = new Ee();
+		this.rootSplitWidget = new ue(!1, !0, "inspector-view.split-view-state", 555, 300, !0), this.rootSplitWidget.show(t.element), this.rootSplitWidget.setSidebarWidget(D.instance()), this.rootSplitWidget.setDefaultFocusedChild(D.instance()), D.instance().setOwnerSplit(this.rootSplitWidget), this.inspectedPagePlaceholder = gt.instance(), this.inspectedPagePlaceholder.addEventListener(_t.UPDATE, this.onSetInspectedPageBounds.bind(this), this), this.deviceModeView = Z.instance({
+			inspectedPagePlaceholder: this.inspectedPagePlaceholder,
+			forceNew: !1
+		}), y.instance().addEventListener(w.BEFORE_DOCK_SIDE_CHANGED, this.onBeforeDockSideChange, this), y.instance().addEventListener(w.DOCK_SIDE_CHANGED, this.onDockSideChange, this), y.instance().addEventListener(w.AFTER_DOCK_SIDE_CHANGED, this.onAfterDockSideChange, this), this.onDockSideChange(), console.timeStamp("AdvancedApp.attachToBody"), t.attachToDocument(e), t.focus(), this.inspectedPagePlaceholder.update();
+	}
+	openToolboxWindow(e) {
+		if (e.data.to !== x.UNDOCKED || this.toolboxWindow) return;
+		let t = window.location.href.replace("devtools_app.html", "device_mode_emulation_frame.html");
+		this.toolboxWindow = window.open(t, void 0);
+	}
+	deviceModeEmulationFrameLoaded(e) {
+		Le.instance().addDocumentToTheme(e), g(e), m(e.documentElement), me(e.body), M.installHandler(e), this.toolboxRootView = new Ee(), this.toolboxRootView.attachToDocument(e), this.updateDeviceModeView();
+	}
+	updateDeviceModeView() {
+		this.isDocked() ? this.rootSplitWidget.setMainWidget(this.deviceModeView) : this.toolboxRootView && this.deviceModeView.show(this.toolboxRootView.element);
+	}
+	onBeforeDockSideChange(e) {
+		e.data.to === x.UNDOCKED && this.toolboxRootView && (this.rootSplitWidget.hideSidebar(), this.inspectedPagePlaceholder.update()), this.changingDockSide = !0;
+	}
+	onDockSideChange(e) {
+		this.updateDeviceModeView();
+		let t = e ? e.data.to : y.instance().dockSide();
+		if (t === void 0) throw Error("Got onDockSideChange event with unexpected undefined for dockSide()");
+		t === x.UNDOCKED ? this.updateForUndocked() : this.toolboxRootView && e && e.data.from === x.UNDOCKED ? this.rootSplitWidget.hideSidebar() : this.updateForDocked(t);
+	}
+	onAfterDockSideChange(e) {
+		this.changingDockSide && (e.data.from && e.data.from === x.UNDOCKED && this.updateForDocked(e.data.to), this.changingDockSide = !1, this.inspectedPagePlaceholder.update());
+	}
+	updateForDocked(e) {
+		let t = this.rootSplitWidget.resizerElement();
+		t.style.transform = e === x.RIGHT ? "translateX(2px)" : e === x.LEFT ? "translateX(-2px)" : "", this.rootSplitWidget.setVertical(e === x.RIGHT || e === x.LEFT), this.rootSplitWidget.setSecondIsSidebar(e === x.RIGHT || e === x.BOTTOM), this.rootSplitWidget.toggleResizer(this.rootSplitWidget.resizerElement(), !0), this.rootSplitWidget.toggleResizer(D.instance().topResizerElement(), e === x.BOTTOM), this.rootSplitWidget.showBoth();
+	}
+	updateForUndocked() {
+		this.rootSplitWidget.toggleResizer(this.rootSplitWidget.resizerElement(), !1), this.rootSplitWidget.toggleResizer(D.instance().topResizerElement(), !1), this.rootSplitWidget.hideMain();
+	}
+	isDocked() {
+		return y.instance().dockSide() !== x.UNDOCKED;
+	}
+	onSetInspectedPageBounds(e) {
+		if (this.changingDockSide) return;
+		let t = this.inspectedPagePlaceholder.element.window();
+		if (!t.innerWidth || !t.innerHeight || !this.inspectedPagePlaceholder.isShowing()) return;
+		let n = e.data;
+		console.timeStamp("AdvancedApp.setInspectedPageBounds"), A.setInspectedPageBounds(n);
+	}
+};
+globalThis.Emulation = globalThis.Emulation || {}, globalThis.Emulation.AdvancedApp = Q;
+var $, bt = class e {
+	static instance(t = { forceNew: null }) {
+		let { forceNew: n } = t;
+		return (!$ || n) && ($ = new e()), $;
+	}
+	createApp() {
+		return Q.instance();
+	}
+};
+//#endregion
+export { Z as a, Xe as c, dt as i, Be as l, gt as n, lt as o, mt as r, st as s, vt as t };