simdeck 0.1.4 → 0.1.5

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

@@ -0,0 +1,39 @@
+import*as e from"../../../models/emulation/emulation.js";import*as t from"../../../ui/legacy/legacy.js";import{render as i,html as s}from"../../../ui/lit/lit.js";import*as n from"../../../ui/visual_logging/visual_logging.js";class o extends Event{size;static eventName="sizechanged";constructor(e){super(o.eventName),this.size=e}}function a(e){return Number(e.target.value)}class l extends HTMLElement{#e=this.attachShadow({mode:"open"});#t=!1;#i="0";#s="";#n;#o;constructor(e,{jslogContext:t}){super(),this.#n=e,this.#o=t}connectedCallback(){this.render()}set disabled(e){this.#t=e,this.render()}set size(e){this.#i=e,this.render()}set placeholder(e){this.#s=e,this.render()}render(){i(s`
+      <style>
+        input {
+          /*
+           * 4 characters for the maximum size of the value,
+           * 2 characters for the width of the step-buttons,
+           * 2 pixels padding between the characters and the
+           * step-buttons.
+           */
+          width: calc(4ch + 2ch + 2px);
+          max-height: 18px;
+          border: var(--sys-color-neutral-outline);
+          border-radius: 4px;
+          margin: 0 2px;
+          text-align: center;
+          font-size: inherit;
+          font-family: inherit;
+        }
+
+        input:disabled {
+          user-select: none;
+        }
+
+        input:focus::-webkit-input-placeholder {
+          color: transparent;
+        }
+      </style>
+      <input type="number"
+             max=${e.DeviceModeModel.MaxDeviceSize}
+             min=${e.DeviceModeModel.MinDeviceSize}
+             jslog=${n.textField().track({change:!0}).context(this.#o)}
+             maxlength="4"
+             title=${this.#n}
+             placeholder=${this.#s}
+             ?disabled=${this.#t}
+             .value=${this.#i}
+             @change=${this.#a}
+             @keydown=${this.#l} />
+    `,this.#e,{host:this})}#a(e){this.dispatchEvent(new o(a(e)))}#l(i){let s=t.UIUtils.modifiedFloatNumber(a(i),i);null!==s&&(s=Math.min(s,e.DeviceModeModel.MaxDeviceSize),s=Math.max(s,e.DeviceModeModel.MinDeviceSize),i.preventDefault(),i.target.value=String(s),this.dispatchEvent(new o(s)))}}customElements.define("device-mode-emulation-size-input",l);var r=Object.freeze({__proto__:null,SizeInputElement:l});export{r as DeviceSizeInputElement};

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

@@ -0,0 +1 @@
+import*as e from"../../core/common/common.js";import*as t from"../../core/i18n/i18n.js";import*as i from"../../core/root/root.js";import*as o from"../../ui/legacy/legacy.js";const n={toggleDeviceToolbar:"Toggle device toolbar",captureScreenshot:"Capture screenshot",captureFullSizeScreenshot:"Capture full size screenshot",captureNodeScreenshot:"Capture node screenshot",showMediaQueries:"Show media queries",device:"device",hideMediaQueries:"Hide media queries",showRulers:"Show rulers in the Device Mode toolbar",hideRulers:"Hide rulers in the Device Mode toolbar",showDeviceFrame:"Show device frame",hideDeviceFrame:"Hide device frame"},a=t.i18n.registerUIStrings("panels/emulation/emulation-meta.ts",n),r=t.i18n.getLazilyComputedLocalizedString.bind(void 0,a);let c;async function s(){return c||(c=await import("./emulation.js")),c}o.ActionRegistration.registerActionExtension({category:"MOBILE",actionId:"emulation.toggle-device-mode",toggleable:!0,loadActionDelegate:async()=>new((await s()).DeviceModeWrapper.ActionDelegate),condition:i.Runtime.conditions.canDock,title:r(n.toggleDeviceToolbar),iconClass:"devices",bindings:[{platform:"windows,linux",shortcut:"Shift+Ctrl+M"},{platform:"mac",shortcut:"Shift+Meta+M"}]}),o.ActionRegistration.registerActionExtension({actionId:"emulation.capture-screenshot",category:"SCREENSHOT",loadActionDelegate:async()=>new((await s()).DeviceModeWrapper.ActionDelegate),condition:i.Runtime.conditions.canDock,title:r(n.captureScreenshot)}),o.ActionRegistration.registerActionExtension({actionId:"emulation.capture-full-height-screenshot",category:"SCREENSHOT",loadActionDelegate:async()=>new((await s()).DeviceModeWrapper.ActionDelegate),condition:i.Runtime.conditions.canDock,title:r(n.captureFullSizeScreenshot)}),o.ActionRegistration.registerActionExtension({actionId:"emulation.capture-node-screenshot",category:"SCREENSHOT",loadActionDelegate:async()=>new((await s()).DeviceModeWrapper.ActionDelegate),condition:i.Runtime.conditions.canDock,title:r(n.captureNodeScreenshot)}),e.Settings.registerSettingExtension({category:"MOBILE",settingName:"show-media-query-inspector",settingType:"boolean",defaultValue:!1,options:[{value:!0,title:r(n.showMediaQueries)},{value:!1,title:r(n.hideMediaQueries)}],tags:[r(n.device)]}),e.Settings.registerSettingExtension({category:"MOBILE",settingName:"emulation.show-rulers",settingType:"boolean",defaultValue:!1,options:[{value:!0,title:r(n.showRulers)},{value:!1,title:r(n.hideRulers)}],tags:[r(n.device)]}),e.Settings.registerSettingExtension({category:"MOBILE",settingName:"emulation.show-device-outline",settingType:"boolean",defaultValue:!1,options:[{value:!0,title:r(n.showDeviceFrame)},{value:!1,title:r(n.hideDeviceFrame)}],tags:[r(n.device)]}),o.Toolbar.registerToolbarItem({actionId:"emulation.toggle-device-mode",condition:i.Runtime.conditions.canDock,location:"main-toolbar-left",order:1,loadItem:void 0,separator:void 0}),e.AppProvider.registerAppProvider({loadAppProvider:async()=>(await s()).AdvancedApp.AdvancedAppProvider.instance(),condition:i.Runtime.conditions.canDock,order:0}),o.ContextMenu.registerItem({location:"deviceModeMenu/save",order:12,actionId:"emulation.capture-screenshot"}),o.ContextMenu.registerItem({location:"deviceModeMenu/save",order:13,actionId:"emulation.capture-full-height-screenshot"});

package/client/dist/chrome-devtools-ui/panels/emulation/emulation.js

@@ -0,0 +1 @@
+import*as e from"../../core/host/host.js";import*as t from"../../ui/legacy/legacy.js";import*as i from"../../ui/legacy/theme_support/theme_support.js";import*as o from"../../core/root/root.js";import*as s from"../../core/sdk/sdk.js";import*as n from"../../models/emulation/emulation.js";import*as r from"../../core/common/common.js";import*as a from"../../core/i18n/i18n.js";import*as d from"../../core/platform/platform.js";import*as l from"../../ui/visual_logging/visual_logging.js";import*as c from"../mobile_throttling/mobile_throttling.js";import*as h from"./components/components.js";import*as m from"../../models/bindings/bindings.js";const p={dimensions:"Dimensions",width:"Width",heightLeaveEmptyForFull:"Height (leave empty for full)",zoom:"Zoom",devicePixelRatio:"Device pixel ratio",deviceType:"Device type",experimentalWebPlatformFeature:'"`Experimental Web Platform Feature`" flag is enabled. Click to disable it.',experimentalWebPlatformFeatureFlag:'"`Experimental Web Platform Feature`" flag is disabled. Click to enable it.',moreOptions:"More options",fitToWindowF:"Fit to window ({PH1}%)",autoadjustZoom:"Auto-adjust zoom",defaultF:"Default: {PH1}",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",none:"None",screenOrientationOptions:"Screen orientation options",toggleDualscreenMode:"Toggle dual-screen mode",devicePosture:"Device posture"},u=a.i18n.registerUIStrings("panels/emulation/DeviceModeToolbar.ts",p),g=a.i18n.getLocalizedString.bind(void 0,u);function v(e,t){e.setTitle(t),e.element.title=t}class b{model;showMediaInspectorSetting;showRulersSetting;deviceOutlineSetting;showDeviceScaleFactorSetting;showUserAgentTypeSetting;autoAdjustScaleSetting;lastMode;elementInternal;emulatedDevicesList;persistenceSetting;spanButton;postureItem;modeButton;widthInput;heightInput;deviceScaleItem;deviceSelectItem;scaleItem;uaItem;experimentalButton;cachedDeviceScale;cachedUaType;xItem;throttlingConditionsItem;cachedModelType;cachedScale;cachedModelDevice;cachedModelMode;constructor(e,t,i){this.model=e,this.showMediaInspectorSetting=t,this.showRulersSetting=i,this.deviceOutlineSetting=this.model.deviceOutlineSetting(),this.showDeviceScaleFactorSetting=r.Settings.Settings.instance().createSetting("emulation.show-device-scale-factor",!1),this.showDeviceScaleFactorSetting.addChangeListener(this.updateDeviceScaleFactorVisibility,this),this.showUserAgentTypeSetting=r.Settings.Settings.instance().createSetting("emulation.show-user-agent-type",!1),this.showUserAgentTypeSetting.addChangeListener(this.updateUserAgentTypeVisibility,this),this.autoAdjustScaleSetting=r.Settings.Settings.instance().createSetting("emulation.auto-adjust-scale",!0),this.lastMode=new Map,this.elementInternal=document.createElement("div"),this.elementInternal.classList.add("device-mode-toolbar"),this.elementInternal.setAttribute("jslog",`${l.toolbar("device-mode").track({resize:!0})}`);const o=this.elementInternal.createChild("devtools-toolbar","main-toolbar");this.appendDeviceSelectMenu(o),this.widthInput=new h.DeviceSizeInputElement.SizeInputElement(g(p.width),{jslogContext:"width"}),this.widthInput.addEventListener("sizechanged",(({size:e})=>{this.autoAdjustScaleSetting.get()?this.model.setWidthAndScaleToFit(e):this.model.setWidth(e)})),this.heightInput=new h.DeviceSizeInputElement.SizeInputElement(g(p.heightLeaveEmptyForFull),{jslogContext:"height"}),this.heightInput.addEventListener("sizechanged",(({size:e})=>{this.autoAdjustScaleSetting.get()?this.model.setHeightAndScaleToFit(e):this.model.setHeight(e)})),this.appendDimensionInputs(o),this.appendDisplaySettings(o),this.appendDevicePositionItems(o);const s=this.elementInternal.createChild("devtools-toolbar","device-mode-toolbar-options");function a(){const t=e.toolbarControlsEnabledSetting().get();o.setEnabled(t),s.setEnabled(t)}s.wrappable=!0,this.fillOptionsToolbar(s),this.emulatedDevicesList=n.EmulatedDevices.EmulatedDevicesList.instance(),this.emulatedDevicesList.addEventListener("CustomDevicesUpdated",this.deviceListChanged,this),this.emulatedDevicesList.addEventListener("StandardDevicesUpdated",this.deviceListChanged,this),this.persistenceSetting=r.Settings.Settings.instance().createSetting("emulation.device-mode-value",{device:"",orientation:"",mode:""}),this.model.toolbarControlsEnabledSetting().addChangeListener(a),a()}createEmptyToolbarElement(){const e=document.createElement("div");return e.classList.add("device-mode-empty-toolbar-element"),e}appendDeviceSelectMenu(e){e.appendToolbarItem(new t.Toolbar.ToolbarItem(this.createEmptyToolbarElement())),this.deviceSelectItem=new t.Toolbar.ToolbarMenuButton(this.appendDeviceMenuItems.bind(this),void 0,void 0,"device"),this.deviceSelectItem.turnShrinkable(),this.deviceSelectItem.setDarkText(),e.appendToolbarItem(this.deviceSelectItem)}appendDimensionInputs(e){e.appendToolbarItem(new t.Toolbar.ToolbarItem(this.widthInput));const i=document.createElement("div");i.classList.add("device-mode-x"),i.textContent="×",this.xItem=new t.Toolbar.ToolbarItem(i),e.appendToolbarItem(this.xItem),e.appendToolbarItem(new t.Toolbar.ToolbarItem(this.heightInput))}appendDisplaySettings(e){e.appendToolbarItem(new t.Toolbar.ToolbarItem(this.createEmptyToolbarElement())),this.scaleItem=new t.Toolbar.ToolbarMenuButton(this.appendScaleMenuItems.bind(this),void 0,void 0,"scale"),v(this.scaleItem,g(p.zoom)),this.scaleItem.turnShrinkable(),this.scaleItem.setDarkText(),e.appendToolbarItem(this.scaleItem),e.appendToolbarItem(new t.Toolbar.ToolbarItem(this.createEmptyToolbarElement())),this.deviceScaleItem=new t.Toolbar.ToolbarMenuButton(this.appendDeviceScaleMenuItems.bind(this),void 0,void 0,"device-pixel-ratio"),this.deviceScaleItem.turnShrinkable(),this.deviceScaleItem.setVisible(this.showDeviceScaleFactorSetting.get()),v(this.deviceScaleItem,g(p.devicePixelRatio)),this.deviceScaleItem.setDarkText(),e.appendToolbarItem(this.deviceScaleItem),e.appendToolbarItem(new t.Toolbar.ToolbarItem(this.createEmptyToolbarElement())),this.uaItem=new t.Toolbar.ToolbarMenuButton(this.appendUserAgentMenuItems.bind(this),void 0,void 0,"device-type"),this.uaItem.turnShrinkable(),this.uaItem.setVisible(this.showUserAgentTypeSetting.get()),v(this.uaItem,g(p.deviceType)),this.uaItem.setDarkText(),e.appendToolbarItem(this.uaItem),this.throttlingConditionsItem=c.ThrottlingManager.throttlingManager().createMobileThrottlingButton(),this.throttlingConditionsItem.turnShrinkable(),e.appendToolbarItem(this.throttlingConditionsItem)}appendDevicePositionItems(e){e.appendToolbarItem(new t.Toolbar.ToolbarItem(this.createEmptyToolbarElement())),this.modeButton=new t.Toolbar.ToolbarButton("","screen-rotation",void 0,"screen-rotation"),this.modeButton.addEventListener("Click",this.modeMenuClicked,this),e.appendToolbarItem(this.modeButton),this.spanButton=new t.Toolbar.ToolbarButton("","device-fold",void 0,"device-fold"),this.spanButton.addEventListener("Click",this.spanClicked,this),e.appendToolbarItem(this.spanButton),e.appendToolbarItem(new t.Toolbar.ToolbarItem(this.createEmptyToolbarElement())),this.postureItem=new t.Toolbar.ToolbarMenuButton(this.appendDevicePostureItems.bind(this),void 0,void 0,"device-posture"),this.postureItem.turnShrinkable(),this.postureItem.setDarkText(),v(this.postureItem,g(p.devicePosture)),e.appendToolbarItem(this.postureItem),this.createExperimentalButton(e)}createExperimentalButton(e){e.appendToolbarItem(new t.Toolbar.ToolbarSeparator(!0));const i=this.model.webPlatformExperimentalFeaturesEnabled()?g(p.experimentalWebPlatformFeature):g(p.experimentalWebPlatformFeatureFlag);this.experimentalButton=new t.Toolbar.ToolbarToggle(i,"experiment-check"),this.experimentalButton.setToggled(this.model.webPlatformExperimentalFeaturesEnabled()),this.experimentalButton.setEnabled(!0),this.experimentalButton.addEventListener("Click",this.experimentalClicked,this),e.appendToolbarItem(this.experimentalButton)}experimentalClicked(){e.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab("chrome://flags/#enable-experimental-web-platform-features")}fillOptionsToolbar(e){e.appendToolbarItem(new t.Toolbar.ToolbarItem(this.createEmptyToolbarElement()));const i=new t.Toolbar.ToolbarMenuButton(this.appendOptionsMenuItems.bind(this),!0,void 0,"more-options","dots-vertical");i.setTitle(g(p.moreOptions)),e.appendToolbarItem(i)}appendDevicePostureItems(e){for(const t of["Continuous","Folded"])e.defaultSection().appendCheckboxItem(t,this.spanClicked.bind(this),{checked:t===this.currentDevicePosture(),jslogContext:t.toLowerCase()})}currentDevicePosture(){const e=this.model.mode();return!e||e.orientation!==n.EmulatedDevices.VerticalSpanned&&e.orientation!==n.EmulatedDevices.HorizontalSpanned?"Continuous":"Folded"}appendScaleMenuItems(e){this.model.type()===n.DeviceModeModel.Type.Device&&e.footerSection().appendItem(g(p.fitToWindowF,{PH1:this.getPrettyFitZoomPercentage()}),this.onScaleMenuChanged.bind(this,this.model.fitScale()),{jslogContext:"fit-to-window"}),e.footerSection().appendCheckboxItem(g(p.autoadjustZoom),this.onAutoAdjustScaleChanged.bind(this),{checked:this.autoAdjustScaleSetting.get(),jslogContext:"auto-adjust-zoom"});const t=function(t,i){e.defaultSection().appendCheckboxItem(t,this.onScaleMenuChanged.bind(this,i),{checked:this.model.scaleSetting().get()===i,jslogContext:t})}.bind(this);t("50%",.5),t("75%",.75),t("100%",1),t("125%",1.25),t("150%",1.5),t("200%",2)}onScaleMenuChanged(e){this.model.scaleSetting().set(e)}onAutoAdjustScaleChanged(){this.autoAdjustScaleSetting.set(!this.autoAdjustScaleSetting.get())}appendDeviceScaleMenuItems(e){const t=this.model.deviceScaleFactorSetting(),i="Mobile"===this.model.uaSetting().get()||"Mobile (no touch)"===this.model.uaSetting().get()?n.DeviceModeModel.defaultMobileScaleFactor:window.devicePixelRatio;function o(e,i,o,s){e.appendCheckboxItem(i,t.set.bind(t,o),{checked:t.get()===o,jslogContext:s})}o(e.headerSection(),g(p.defaultF,{PH1:i}),0,"dpr-default"),o(e.defaultSection(),"1",1,"dpr-1"),o(e.defaultSection(),"2",2,"dpr-2"),o(e.defaultSection(),"3",3,"dpr-3")}appendUserAgentMenuItems(e){const t=this.model.uaSetting();function i(i,o){e.defaultSection().appendCheckboxItem(i,t.set.bind(t,o),{checked:t.get()===o,jslogContext:d.StringUtilities.toKebabCase(o)})}i("Mobile","Mobile"),i("Mobile (no touch)","Mobile (no touch)"),i("Desktop","Desktop"),i("Desktop (touch)","Desktop (touch)")}appendOptionsMenuItems(t){const i=this.model;function o(e,t,o,s,r,a){void 0===r&&(r=i.type()===n.DeviceModeModel.Type.None);const d=t.get(),l=`${a}-${d?"disable":"enable"}`;e.appendItem(d?o:s,t.set.bind(t,!t.get()),{disabled:r,jslogContext:l})}o(t.headerSection(),this.deviceOutlineSetting,g(p.hideDeviceFrame),g(p.showDeviceFrame),i.type()!==n.DeviceModeModel.Type.Device,"device-frame"),o(t.headerSection(),this.showMediaInspectorSetting,g(p.hideMediaQueries),g(p.showMediaQueries),void 0,"media-queries"),o(t.headerSection(),this.showRulersSetting,g(p.hideRulers),g(p.showRulers),void 0,"rulers"),o(t.defaultSection(),this.showDeviceScaleFactorSetting,g(p.removeDevicePixelRatio),g(p.addDevicePixelRatio),void 0,"device-pixel-ratio"),o(t.defaultSection(),this.showUserAgentTypeSetting,g(p.removeDeviceType),g(p.addDeviceType),void 0,"device-type"),t.appendItemsAtLocation("deviceModeMenu"),t.footerSection().appendItem(g(p.resetToDefaults),this.reset.bind(this),{jslogContext:"reset-to-defaults"}),t.footerSection().appendItem(g(p.closeDevtools),e.InspectorFrontendHost.InspectorFrontendHostInstance.closeWindow.bind(e.InspectorFrontendHost.InspectorFrontendHostInstance),{jslogContext:"close-dev-tools"})}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){const t=this.autoAdjustScaleSetting.get()?void 0:this.model.scaleSetting().get();this.model.emulate(n.DeviceModeModel.Type.Device,e,this.lastMode.get(e)||e.modes[0],t)}switchToResponsive(){this.model.emulate(n.DeviceModeModel.Type.Responsive,null,null)}filterDevices(e){return(e=e.filter((function(e){return e.show()}))).sort(n.EmulatedDevices.EmulatedDevice.deviceComparator),e}standardDevices(){return this.filterDevices(this.emulatedDevicesList.standard())}customDevices(){return this.filterDevices(this.emulatedDevicesList.custom())}allDevices(){return this.standardDevices().concat(this.customDevices())}appendDeviceMenuItems(e){function t(t){if(!t.length)return;const i=e.section();for(const e of t)i.appendCheckboxItem(e.title,this.emulateDevice.bind(this,e),{checked:this.model.device()===e,jslogContext:d.StringUtilities.toKebabCase(e.title)})}e.headerSection().appendCheckboxItem(g(p.responsive),this.switchToResponsive.bind(this),{checked:this.model.type()===n.DeviceModeModel.Type.Responsive,jslogContext:"responsive"}),t.call(this,this.standardDevices()),t.call(this,this.customDevices()),e.footerSection().appendItem(g(p.edit),this.emulatedDevicesList.revealCustomSetting.bind(this.emulatedDevicesList),{jslogContext:"edit"})}deviceListChanged(){const e=this.model.device();if(!e)return;const t=this.allDevices();-1===t.indexOf(e)?t.length?this.emulateDevice(t[0]):this.model.emulate(n.DeviceModeModel.Type.Responsive,null,null):this.emulateDevice(e)}updateDeviceScaleFactorVisibility(){this.deviceScaleItem&&this.deviceScaleItem.setVisible(this.showDeviceScaleFactorSetting.get())}updateUserAgentTypeVisibility(){this.uaItem&&this.uaItem.setVisible(this.showUserAgentTypeSetting.get())}spanClicked(){const e=this.model.device();if(!e||!e.isDualScreen&&!e.isFoldableScreen)return;const t=this.autoAdjustScaleSetting.get()?void 0:this.model.scaleSetting().get(),i=this.model.mode();if(!i)return;const o=e.getSpanPartner(i);o&&this.model.emulate(this.model.type(),e,o,t)}modeMenuClicked(e){const i=this.model.device(),o=this.model,s=this.autoAdjustScaleSetting;if(o.type()===n.DeviceModeModel.Type.Responsive){const e=o.appliedDeviceSize();return void(s.get()?o.setSizeAndScaleToFit(e.height,e.width):(o.setWidth(e.height),o.setHeight(e.width)))}if(!i)return;if((i.isDualScreen||i.isFoldableScreen||2===i.modes.length)&&i.modes[0].orientation!==i.modes[1].orientation){const e=s.get()?void 0:o.scaleSetting().get(),t=o.mode();if(!t)return;const n=i.getRotationPartner(t);if(!n)return;return void o.emulate(o.type(),o.device(),n,e)}if(!this.modeButton)return;const r=new t.ContextMenu.ContextMenu(e.data,{useSoftMenu:!1,x:this.modeButton.element.getBoundingClientRect().left,y:this.modeButton.element.getBoundingClientRect().top+this.modeButton.element.offsetHeight});function a(e,t){if(!i)return;const o=i.modesForOrientation(e);if(o.length)if(1===o.length)d(o[0],t);else for(let e=0;e<o.length;e++)d(o[e],t+" – "+o[e].title)}function d(e,t){r.defaultSection().appendCheckboxItem(t,l.bind(null,e),{checked:o.mode()===e,jslogContext:"device-mode"})}function l(e){const t=s.get()?void 0:o.scaleSetting().get();o.emulate(o.type(),o.device(),e,t)}a(n.EmulatedDevices.Vertical,g(p.portrait)),a(n.EmulatedDevices.Horizontal,g(p.landscape)),r.show()}getPrettyFitZoomPercentage(){return`${(100*this.model.fitScale()).toFixed(0)}`}getPrettyZoomPercentage(){return`${(100*this.model.scale()).toFixed(0)}`}element(){return this.elementInternal}update(){this.model.type()!==this.cachedModelType&&(this.cachedModelType=this.model.type(),this.widthInput.disabled=this.model.type()!==n.DeviceModeModel.Type.Responsive,this.heightInput.disabled=this.model.type()!==n.DeviceModeModel.Type.Responsive,this.deviceScaleItem.setEnabled(this.model.type()===n.DeviceModeModel.Type.Responsive),this.uaItem.setEnabled(this.model.type()===n.DeviceModeModel.Type.Responsive),this.model.type()===n.DeviceModeModel.Type.Responsive?(this.modeButton.setEnabled(!0),v(this.modeButton,g(p.rotate))):this.modeButton.setEnabled(!1));const e=this.model.appliedDeviceSize();this.widthInput.size=String(e.width),this.heightInput.size=this.model.type()===n.DeviceModeModel.Type.Responsive&&this.model.isFullHeight()?"":String(e.height),this.heightInput.placeholder=String(e.height),this.model.scale()!==this.cachedScale&&(this.scaleItem.setText(`${this.getPrettyZoomPercentage()}%`),this.cachedScale=this.model.scale());const t=this.model.appliedDeviceScaleFactor();t!==this.cachedDeviceScale&&(this.deviceScaleItem.setText(`DPR: ${t.toFixed(1)}`),this.cachedDeviceScale=t);const i=this.model.appliedUserAgentType();i!==this.cachedUaType&&(this.uaItem.setText(i),this.cachedUaType=i);let o=g(p.none);this.model.type()===n.DeviceModeModel.Type.Responsive&&(o=g(p.responsive));const s=this.model.device();if(this.model.type()===n.DeviceModeModel.Type.Device&&s&&(o=s.title),this.deviceSelectItem.setText(`${g(p.dimensions)}: ${o}`),this.model.device()!==this.cachedModelDevice){const e=this.model.device();if(e){const t=e?e.modes.length:0;this.modeButton.setEnabled(t>=2),v(this.modeButton,g(2===t?p.rotate:p.screenOrientationOptions))}this.cachedModelDevice=e}if(this.experimentalButton){const e=this.model.device();e&&(e.isDualScreen||e.isFoldableScreen)?(e.isDualScreen?(this.spanButton.setVisible(!0),this.postureItem.setVisible(!1)):e.isFoldableScreen&&(this.spanButton.setVisible(!1),this.postureItem.setVisible(!0),this.postureItem.setText(this.currentDevicePosture())),this.experimentalButton.setVisible(!0)):(this.spanButton.setVisible(!1),this.postureItem.setVisible(!1),this.experimentalButton.setVisible(!1)),v(this.spanButton,g(p.toggleDualscreenMode))}if(this.model.type()===n.DeviceModeModel.Type.Device&&this.lastMode.set(this.model.device(),this.model.mode()),this.model.mode()!==this.cachedModelMode&&this.model.type()!==n.DeviceModeModel.Type.None){this.cachedModelMode=this.model.mode();const e=this.persistenceSetting.get(),t=this.model.device();if(t){e.device=t.title;const i=this.model.mode();e.orientation=i?i.orientation:"",e.mode=i?i.title:""}else e.device="",e.orientation="",e.mode="";this.persistenceSetting.set(e)}}restore(){for(const e of this.allDevices())if(e.title===this.persistenceSetting.get().device)for(const t of e.modes)if(t.orientation===this.persistenceSetting.get().orientation&&t.title===this.persistenceSetting.get().mode)return this.lastMode.set(e,t),void this.emulateDevice(e);this.model.emulate(n.DeviceModeModel.Type.Responsive,null,null)}}var S=Object.freeze({__proto__:null,DeviceModeToolbar:b}),w={cssText:`:host{overflow:hidden;align-items:stretch;flex:auto;background-color:var(--app-color-toolbar-background)}.device-mode-toolbar{flex:none;background-color:var(--app-color-toolbar-background);border-bottom:1px solid var(--sys-color-divider);display:flex;flex-direction:row;align-items:stretch}.device-mode-x{margin:0 1px;font-size:16px}.device-mode-empty-toolbar-element{width:0}devtools-toolbar{overflow:hidden;flex:0 100000 auto;padding:0 5px;&[wrappable]{height:var(--toolbar-height)}}devtools-toolbar.main-toolbar{margin:0 auto}devtools-toolbar.device-mode-toolbar-options{flex:none}.device-mode-content-clip{overflow:hidden;flex:auto}.device-mode-media-container{flex:none;overflow:hidden;box-shadow:inset 0 -1px var(--sys-color-divider)}.device-mode-content-clip:not(.device-mode-outline-visible) .device-mode-media-container{margin-bottom:20px}.device-mode-presets-container{flex:0 0 20px;display:flex}.device-mode-presets-container-inner{flex:auto;justify-content:center;position:relative;background-color:var(--sys-color-surface1);border-bottom:1px solid var(--sys-color-divider)}.device-mode-presets-container:hover{transition:opacity 0.1s;transition-delay:50ms;opacity:100%}.device-mode-preset-bar-outer{pointer-events:none;display:flex;justify-content:center}.device-mode-preset-bar{border-left:2px solid var(--sys-color-divider);border-right:2px solid var(--sys-color-divider);pointer-events:auto;text-align:center;flex:none;color:var(--sys-color-on-surface);display:flex;align-items:center;justify-content:center;white-space:nowrap;margin-bottom:1px}.device-mode-preset-bar:hover{transition:background-color 0.1s;transition-delay:50ms;background-color:var(--sys-color-state-hover-on-subtle)}.device-mode-preset-bar > span{visibility:hidden}.device-mode-preset-bar:hover > span{transition:visibility 0.1s;transition-delay:50ms;visibility:visible}.device-mode-content-area{flex:auto;position:relative;margin:0}.device-mode-screen-area{position:absolute;left:0;right:0;width:0;height:0;background-color:var(--sys-color-inverse-surface)}.device-mode-content-clip:not(.device-mode-outline-visible) .device-mode-screen-area{--override-screen-area-box-shadow:hsl(240deg 3% 84%) 0 0 0 0.5px,hsl(0deg 0% 80%/40%) 0 0 20px;box-shadow:var(--override-screen-area-box-shadow)}.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{--override-screen-area-box-shadow:rgb(40 40 42) 0 0 0 0.5px,rgb(51 51 51/40%) 0 0 20px}.device-mode-screen-image{position:absolute;left:0;top:0;width:100%;height:100%}.device-mode-resizer{position:absolute;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:background-color 0.1s ease,opacity 0.1s ease}.device-mode-resizer:hover{background-color:var(--sys-color-state-hover-on-subtle);opacity:100%}.device-mode-resizer > div{pointer-events:none}.device-mode-right-resizer{top:0;bottom:-1px;right:-20px;width:20px}.device-mode-left-resizer{top:0;bottom:-1px;left:-20px;width:20px;opacity:0%}.device-mode-bottom-resizer{left:0;right:-1px;bottom:-20px;height:20px}.device-mode-bottom-right-resizer{inset:0 -20px -20px 0;background-color:var(--sys-color-surface1)}.device-mode-bottom-left-resizer{inset:0 0 -20px -20px;opacity:0%}.device-mode-right-resizer > div{content:var(--image-file-resizeHorizontal);width:6px;height:26px}.device-mode-left-resizer > div{content:var(--image-file-resizeHorizontal);width:6px;height:26px}.device-mode-bottom-resizer > div{content:var(--image-file-resizeVertical);margin-bottom:-2px;width:26px;height:6px}.device-mode-bottom-right-resizer > div{position:absolute;bottom:3px;right:3px;width:13px;height:13px;content:var(--image-file-resizeDiagonal)}.device-mode-bottom-left-resizer > div{position:absolute;bottom:3px;left:3px;width:13px;height:13px;content:var(--image-file-resizeDiagonal);transform:rotate(90deg)}.device-mode-page-area{position:absolute;left:0;right:0;width:0;height:0;display:flex;background-color:var(--sys-color-cdt-base-container)}.device-mode-ruler{position:absolute;overflow:visible}.device-mode-ruler-top{height:20px;right:0}.device-mode-ruler-left{width:20px;bottom:0}.device-mode-ruler-content{pointer-events:none;position:absolute;left:-20px;top:-20px}.device-mode-ruler-top .device-mode-ruler-content{border-top:1px solid transparent;right:0;bottom:20px;background-color:var(--sys-color-cdt-base-container)}.device-mode-ruler-left .device-mode-ruler-content{border-left:1px solid transparent;border-top:1px solid transparent;right:20px;bottom:0}.device-mode-content-clip.device-mode-outline-visible .device-mode-ruler-top .device-mode-ruler-content{border-top:1px solid var(--sys-color-token-subtle)}.device-mode-content-clip.device-mode-outline-visible .device-mode-ruler-left .device-mode-ruler-content{border-left:1px solid var(--sys-color-token-subtle);border-top:1px solid var(--sys-color-token-subtle)}.device-mode-ruler-inner{position:absolute}.device-mode-ruler-top .device-mode-ruler-inner{inset:0 0 0 20px;border-bottom:1px solid var(--sys-color-token-subtle)}.device-mode-ruler-left .device-mode-ruler-inner{inset:19px 0 0;border-right:1px solid var(--sys-color-token-subtle);background-color:var(--sys-color-cdt-base-container)}.device-mode-ruler-marker{position:absolute}.device-mode-ruler-top .device-mode-ruler-marker{width:0;height:5px;bottom:0;border-right:1px solid var(--sys-color-token-subtle);margin-right:-1px}.device-mode-ruler-top .device-mode-ruler-marker.device-mode-ruler-marker-medium{height:10px}.device-mode-ruler-top .device-mode-ruler-marker.device-mode-ruler-marker-large{height:15px}.device-mode-ruler-left .device-mode-ruler-marker{height:0;width:5px;right:0;border-bottom:1px solid var(--sys-color-token-subtle);margin-bottom:-1px}.device-mode-ruler-left .device-mode-ruler-marker.device-mode-ruler-marker-medium{width:10px}.device-mode-ruler-left .device-mode-ruler-marker.device-mode-ruler-marker-large{width:15px}.device-mode-ruler-text{color:var(--sys-color-token-subtle);position:relative;pointer-events:auto}.device-mode-ruler-text:hover{color:var(--sys-color-on-surface)}.device-mode-ruler-top .device-mode-ruler-text{left:2px;top:-2px}.device-mode-ruler-left .device-mode-ruler-text{left:-4px;top:-15px;transform:rotate(270deg)}\n/*# sourceURL=${import.meta.resolve("./deviceModeView.css")} */\n`},M={cssText:`.media-inspector-view{height:50px}.media-inspector-marker-container{height:14px;margin:2px 0;position:relative}.media-inspector-bar{display:flex;flex-direction:row;align-items:stretch;pointer-events:none;position:absolute;inset:0}.media-inspector-marker{flex:none;pointer-events:auto;margin:1px 0;white-space:nowrap;z-index:auto;position:relative}.media-inspector-marker-spacer{flex:auto}.media-inspector-marker:hover{margin:-1px 0;opacity:100%}.media-inspector-marker-min-width{flex:auto;background-color:var(--sys-color-yellow-container);border-right:2px solid var(--sys-color-yellow-bright);border-left:2px solid var(--sys-color-yellow-bright);&:hover{background-color:color-mix(in srgb,var(--sys-color-yellow-container),var(--sys-color-yellow-bright) 30%)}}.media-inspector-marker-min-width-right{border-left:2px solid var(--sys-color-yellow-bright)}.media-inspector-marker-min-width-left{border-right:2px solid var(--sys-color-yellow-bright)}.media-inspector-marker-min-max-width{background-color:var(--sys-color-tertiary-container);border-left:2px solid var(--sys-color-tertiary);border-right:2px solid var(--sys-color-tertiary)}.media-inspector-marker-min-max-width:hover{z-index:1}.media-inspector-marker-max-width{background-color:var(--sys-color-inverse-primary);border-right:2px solid var(--sys-color-primary-bright);border-left:2px solid var(--sys-color-primary-bright)}.media-inspector-marker-inactive .media-inspector-marker-min-width:not(:hover){background-color:var(--sys-color-surface-yellow)}.media-inspector-marker-inactive .media-inspector-marker-min-max-width:not(:hover){background-color:color-mix(in srgb,var(--sys-color-tertiary-container),var(--sys-color-cdt-base-container) 30%)}.media-inspector-marker-inactive .media-inspector-marker-max-width:not(:hover){background-color:var(--sys-color-tonal-container)}.media-inspector-marker-label-container{position:absolute;z-index:1}.media-inspector-marker:not(:hover) .media-inspector-marker-label-container{display:none}.media-inspector-marker-label-container-left{left:-2px}.media-inspector-marker-label-container-right{right:-2px}.media-inspector-marker-label{color:var(--sys-color-on-surface);position:absolute;top:1px;bottom:0;font-size:12px;pointer-events:none}.media-inspector-label-right{right:4px}.media-inspector-label-left{left:4px}\n/*# sourceURL=${import.meta.resolve("./mediaQueryInspector.css")} */\n`};const f={revealInSourceCode:"Reveal in source code"},x=a.i18n.registerUIStrings("panels/emulation/MediaQueryInspector.ts",f),I=a.i18n.getLocalizedString.bind(void 0,x);class y extends t.Widget.Widget{mediaThrottler;getWidthCallback;setWidthCallback;scale;elementsToMediaQueryModel;elementsToCSSLocations;cssModel;cachedQueryModels;constructor(e,i,o){super(!0),this.registerRequiredCSS(M),this.contentElement.classList.add("media-inspector-view"),this.contentElement.setAttribute("jslog",`${l.mediaInspectorView().track({click:!0})}`),this.contentElement.addEventListener("click",this.onMediaQueryClicked.bind(this),!1),this.contentElement.addEventListener("contextmenu",this.onContextMenu.bind(this),!1),this.mediaThrottler=o,this.getWidthCallback=e,this.setWidthCallback=i,this.scale=1,this.elementsToMediaQueryModel=new WeakMap,this.elementsToCSSLocations=new WeakMap,s.TargetManager.TargetManager.instance().observeModels(s.CSSModel.CSSModel,this),t.ZoomManager.ZoomManager.instance().addEventListener("ZoomChanged",this.renderMediaQueries.bind(this),this)}modelAdded(e){e.target()===s.TargetManager.TargetManager.instance().primaryPageTarget()&&(this.cssModel=e,this.cssModel.addEventListener(s.CSSModel.Events.StyleSheetAdded,this.scheduleMediaQueriesUpdate,this),this.cssModel.addEventListener(s.CSSModel.Events.StyleSheetRemoved,this.scheduleMediaQueriesUpdate,this),this.cssModel.addEventListener(s.CSSModel.Events.StyleSheetChanged,this.scheduleMediaQueriesUpdate,this),this.cssModel.addEventListener(s.CSSModel.Events.MediaQueryResultChanged,this.scheduleMediaQueriesUpdate,this))}modelRemoved(e){e===this.cssModel&&(this.cssModel.removeEventListener(s.CSSModel.Events.StyleSheetAdded,this.scheduleMediaQueriesUpdate,this),this.cssModel.removeEventListener(s.CSSModel.Events.StyleSheetRemoved,this.scheduleMediaQueriesUpdate,this),this.cssModel.removeEventListener(s.CSSModel.Events.StyleSheetChanged,this.scheduleMediaQueriesUpdate,this),this.cssModel.removeEventListener(s.CSSModel.Events.MediaQueryResultChanged,this.scheduleMediaQueriesUpdate,this),delete this.cssModel)}setAxisTransform(e){Math.abs(this.scale-e)<1e-8||(this.scale=e,this.renderMediaQueries())}onMediaQueryClicked(e){const t=e.target.enclosingNodeOrSelfWithClass("media-inspector-bar");if(!t)return;const i=this.elementsToMediaQueryModel.get(t);if(!i)return;const o=i.maxWidthExpression(),s=i.minWidthExpression();if(0===i.section())return void this.setWidthCallback(o&&o.computedLength()||0);if(2===i.section())return void this.setWidthCallback(s&&s.computedLength()||0);const n=this.getWidthCallback();s&&n!==s.computedLength()?this.setWidthCallback(s.computedLength()||0):this.setWidthCallback(o&&o.computedLength()||0)}onContextMenu(e){if(!this.cssModel?.isEnabled())return;const i=e.target.enclosingNodeOrSelfWithClass("media-inspector-bar");if(!i)return;const o=this.elementsToCSSLocations.get(i)||[],s=new Map;for(let e=0;e<o.length;++e){const t=m.CSSWorkspaceBinding.CSSWorkspaceBinding.instance().rawLocationToUILocation(o[e]);if(!t)continue;const i="number"==typeof t.columnNumber?d.StringUtilities.sprintf("%s:%d:%d",t.uiSourceCode.url(),t.lineNumber+1,t.columnNumber+1):d.StringUtilities.sprintf("%s:%d",t.uiSourceCode.url(),t.lineNumber+1);s.set(i,t)}const n=[...s.keys()].sort(),r=new t.ContextMenu.ContextMenu(e),a=r.defaultSection().appendSubMenuItem(I(f.revealInSourceCode),void 0,"reveal-in-source-list");for(let e=0;e<n.length;++e){const t=n[e];a.defaultSection().appendItem(t,this.revealSourceLocation.bind(this,s.get(t)),{jslogContext:"reveal-in-source"})}r.show()}revealSourceLocation(e){r.Revealer.reveal(e)}scheduleMediaQueriesUpdate(){this.isShowing()&&this.mediaThrottler.schedule(this.refetchMediaQueries.bind(this))}refetchMediaQueries(){return this.isShowing()&&this.cssModel?this.cssModel.getMediaQueries().then(this.rebuildMediaQueries.bind(this)):Promise.resolve()}squashAdjacentEqual(e){const t=[];for(let i=0;i<e.length;++i){const o=t[t.length-1];o?.equals(e[i])||t.push(e[i])}return t}rebuildMediaQueries(e){let t=[];for(let i=0;i<e.length;++i){const o=e[i];if(o.mediaList)for(let e=0;e<o.mediaList.length;++e){const i=o.mediaList[e],s=C.createFromMediaQuery(o,i);s&&t.push(s)}}t.sort((function(e,t){return e.compareTo(t)})),t=this.squashAdjacentEqual(t);let i=this.cachedQueryModels&&this.cachedQueryModels.length===t.length;for(let e=0;i&&e<t.length;++e)i=i&&this.cachedQueryModels?.[e].equals(t[e]);i||(this.cachedQueryModels=t,this.renderMediaQueries())}renderMediaQueries(){if(!this.cachedQueryModels||!this.isShowing())return;const e=[];let t=null;for(const i of this.cachedQueryModels){t?.model.dimensionsEqual(i)?t.active=t.active||i.active():(t={active:i.active(),model:i,locations:[]},e.push(t));const o=i.rawLocation();o&&t.locations.push(o)}this.contentElement.removeChildren();let i=null;for(let t=0;t<e.length;++t){t&&e[t].model.section()===e[t-1].model.section()||(i=this.contentElement.createChild("div","media-inspector-marker-container"));const o=e[t],s=this.createElementFromMediaQueryModel(o.model);if(this.elementsToMediaQueryModel.set(s,o.model),this.elementsToCSSLocations.set(s,o.locations),s.classList.toggle("media-inspector-marker-inactive",!o.active),!i)throw new Error("Could not find container to render media queries into.");i.appendChild(s)}}zoomFactor(){return t.ZoomManager.ZoomManager.instance().zoomFactor()/this.scale}wasShown(){super.wasShown(),this.scheduleMediaQueriesUpdate()}createElementFromMediaQueryModel(e){const i=this.zoomFactor(),o=e.minWidthExpression(),s=e.maxWidthExpression(),n=o?(o.computedLength()||0)/i:0,r=s?(s.computedLength()||0)/i:0,a=document.createElement("div");if(a.classList.add("media-inspector-bar"),0===e.section()){a.createChild("div","media-inspector-marker-spacer");const i=a.createChild("div","media-inspector-marker media-inspector-marker-max-width");i.style.width=r+"px",t.Tooltip.Tooltip.install(i,e.mediaText()),d(i,e.maxWidthExpression(),!1,!1),d(i,e.maxWidthExpression(),!0,!0),a.createChild("div","media-inspector-marker-spacer")}if(1===e.section()){a.createChild("div","media-inspector-marker-spacer");const i=a.createChild("div","media-inspector-marker media-inspector-marker-min-max-width");i.style.width=.5*(r-n)+"px",t.Tooltip.Tooltip.install(i,e.mediaText()),d(i,e.maxWidthExpression(),!0,!1),d(i,e.minWidthExpression(),!1,!0),a.createChild("div","media-inspector-marker-spacer").style.flex="0 0 "+n+"px";const o=a.createChild("div","media-inspector-marker media-inspector-marker-min-max-width");o.style.width=.5*(r-n)+"px",t.Tooltip.Tooltip.install(o,e.mediaText()),d(o,e.minWidthExpression(),!0,!1),d(o,e.maxWidthExpression(),!1,!0),a.createChild("div","media-inspector-marker-spacer")}if(2===e.section()){const i=a.createChild("div","media-inspector-marker media-inspector-marker-min-width media-inspector-marker-min-width-left");t.Tooltip.Tooltip.install(i,e.mediaText()),d(i,e.minWidthExpression(),!1,!1),a.createChild("div","media-inspector-marker-spacer").style.flex="0 0 "+n+"px";const o=a.createChild("div","media-inspector-marker media-inspector-marker-min-width media-inspector-marker-min-width-right");t.Tooltip.Tooltip.install(o,e.mediaText()),d(o,e.minWidthExpression(),!0,!0)}function d(e,t,i,o){t&&(e.createChild("div","media-inspector-marker-label-container "+(i?"media-inspector-marker-label-container-left":"media-inspector-marker-label-container-right")).createChild("span","media-inspector-marker-label "+(o?"media-inspector-label-left":"media-inspector-label-right")).textContent=t.value()+t.unit())}return a}}class C{cssMedia;minWidthExpressionInternal;maxWidthExpressionInternal;activeInternal;sectionInternal;rawLocationInternal;constructor(e,t,i,o){this.cssMedia=e,this.minWidthExpressionInternal=t,this.maxWidthExpressionInternal=i,this.activeInternal=o,this.sectionInternal=i&&!t?0:t&&i?1:2}static createFromMediaQuery(e,t){let i=null,o=Number.MAX_VALUE,s=null,n=Number.MIN_VALUE;const r=t.expressions();if(!r)return null;for(let e=0;e<r.length;++e){const t=r[e],a=t.feature();if(-1===a.indexOf("width"))continue;const d=t.computedLength();a.startsWith("max-")&&d&&d<o?(i=t,o=d):a.startsWith("min-")&&d&&d>n&&(s=t,n=d)}return n>o||!i&&!s?null:new C(e,s,i,t.active())}equals(e){return 0===this.compareTo(e)}dimensionsEqual(e){const t=this.minWidthExpression(),i=e.minWidthExpression(),o=this.maxWidthExpression(),s=e.maxWidthExpression(),n=this.section()===e.section(),r=!t||t.computedLength()===i?.computedLength(),a=!o||o.computedLength()===s?.computedLength();return n&&r&&a}compareTo(e){if(this.section()!==e.section())return this.section()-e.section();if(this.dimensionsEqual(e)){const t=this.rawLocation(),i=e.rawLocation();return t||i?t&&!i?1:!t&&i?-1:this.active()!==e.active()?this.active()?-1:1:t&&i?d.StringUtilities.compare(t.url,i.url)||t.lineNumber-i.lineNumber||t.columnNumber-i.columnNumber:0:d.StringUtilities.compare(this.mediaText(),e.mediaText())}const t=this.maxWidthExpression(),i=e.maxWidthExpression(),o=t&&t.computedLength()||0,s=i&&i.computedLength()||0,n=this.minWidthExpression(),r=e.minWidthExpression(),a=n&&n.computedLength()||0,l=r&&r.computedLength()||0;return 0===this.section()?s-o:2===this.section()?a-l:a-l||s-o}section(){return this.sectionInternal}mediaText(){return this.cssMedia.text||""}rawLocation(){return this.rawLocationInternal||(this.rawLocationInternal=this.cssMedia.rawLocation()),this.rawLocationInternal}minWidthExpression(){return this.minWidthExpressionInternal}maxWidthExpression(){return this.maxWidthExpressionInternal}active(){return this.activeInternal}}var k=Object.freeze({__proto__:null,MediaQueryInspector:y,MediaQueryUIModel:C});const D={doubleclickForFullHeight:"Double-click for full height",mobileS:"Mobile S",mobileM:"Mobile M",mobileL:"Mobile L",tablet:"Tablet",laptop:"Laptop",laptopL:"Laptop L"},T=a.i18n.registerUIStrings("panels/emulation/DeviceModeView.ts",D),E=a.i18n.getLocalizedString.bind(void 0,T);class R extends t.Widget.VBox{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(!0),this.blockElementToWidth=new WeakMap,this.setMinimumSize(150,150),this.element.classList.add("device-mode-view"),this.registerRequiredCSS(w),this.model=n.DeviceModeModel.DeviceModeModel.instance(),this.model.addEventListener("Updated",this.updateUI,this),this.mediaInspector=new y((()=>this.model.appliedDeviceSize().width),this.model.setWidth.bind(this.model),new r.Throttler.Throttler(0)),this.showMediaInspectorSetting=r.Settings.Settings.instance().moduleSetting("show-media-query-inspector"),this.showMediaInspectorSetting.addChangeListener(this.updateUI,this),this.showRulersSetting=r.Settings.Settings.instance().moduleSetting("emulation.show-rulers"),this.showRulersSetting.addChangeListener(this.updateUI,this),this.topRuler=new z(!0,this.model.setWidthAndScaleToFit.bind(this.model)),this.topRuler.element.classList.add("device-mode-ruler-top"),this.leftRuler=new z(!1,this.model.setHeightAndScaleToFit.bind(this.model)),this.leftRuler.element.classList.add("device-mode-ruler-left"),this.createUI(),t.ZoomManager.ZoomManager.instance().addEventListener("ZoomChanged",this.zoomChanged,this)}createUI(){this.toolbar=new b(this.model,this.showMediaInspectorSetting,this.showRulersSetting),this.contentElement.appendChild(this.toolbar.element()),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",`${l.responsivePresets()}`),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),t.Tooltip.Tooltip.install(this.bottomResizerElement,E(D.doubleclickForFullHeight)),this.pageArea=this.screenArea.createChild("div","device-mode-page-area"),this.pageArea.createChild("slot")}populatePresetsContainer(){const e=[320,375,425,768,1024,1440,2560],t=[E(D.mobileS),E(D.mobileM),E(D.mobileL),E(D.tablet),E(D.laptop),E(D.laptopL),"4K"];this.presetBlocks=[];const i=this.responsivePresetsContainer.createChild("div","device-mode-presets-container-inner");for(let s=e.length-1;s>=0;--s){const n=i.createChild("div","fill device-mode-preset-bar-outer").createChild("div","device-mode-preset-bar");n.createChild("span").textContent=t[s]+" – "+e[s]+"px",n.setAttribute("jslog",`${l.action().track({click:!0}).context(`device-mode-preset-${e[s]}px`)}`),n.addEventListener("click",o.bind(this,e[s]),!1),this.blockElementToWidth.set(n,e[s]),this.presetBlocks.push(n)}function o(e,t){this.model.emulate(n.DeviceModeModel.Type.Responsive,null,null),this.model.setWidthAndScaleToFit(e),t.consume()}}createResizer(e,i,o){const s=new t.ResizerWidget.ResizerWidget;e.setAttribute("jslog",`${l.slider("device-mode-resizer").track({drag:!0})}`),s.addElement(e);let n=i?"ew-resize":"ns-resize";return i*o>0&&(n="nwse-resize"),i*o<0&&(n="nesw-resize"),s.setCursor(n),s.addEventListener("ResizeStart",this.onResizeStart,this),s.addEventListener("ResizeUpdateXY",this.onResizeUpdate.bind(this,i,o)),s.addEventListener("ResizeEnd",this.onResizeEnd,this),s}onResizeStart(){this.slowPositionStart=null;const e=this.model.screenRect();this.resizeStart=new t.Geometry.Size(e.width,e.height)}onResizeUpdate(e,i,o){o.data.shiftKey!==Boolean(this.slowPositionStart)&&(this.slowPositionStart=o.data.shiftKey?{x:o.data.currentX,y:o.data.currentY}:null);let s=o.data.currentX-o.data.startX,r=o.data.currentY-o.data.startY;if(this.slowPositionStart&&(s=(o.data.currentX-this.slowPositionStart.x)/10+this.slowPositionStart.x-o.data.startX,r=(o.data.currentY-this.slowPositionStart.y)/10+this.slowPositionStart.y-o.data.startY),e&&this.resizeStart){const i=s*t.ZoomManager.ZoomManager.instance().zoomFactor();let o=this.resizeStart.width+i*e;o=Math.round(o/this.model.scale()),o>=n.DeviceModeModel.MinDeviceSize&&o<=n.DeviceModeModel.MaxDeviceSize&&this.model.setWidth(o)}if(i&&this.resizeStart){const e=r*t.ZoomManager.ZoomManager.instance().zoomFactor();let o=this.resizeStart.height+e*i;o=Math.round(o/this.model.scale()),o>=n.DeviceModeModel.MinDeviceSize&&o<=n.DeviceModeModel.MaxDeviceSize&&this.model.setHeight(o)}}exitHingeMode(){this.model&&this.model.exitHingeMode()}onResizeEnd(){delete this.resizeStart,e.userMetrics.actionTaken(e.UserMetrics.Action.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;const i=t.ZoomManager.ZoomManager.instance().zoomFactor();let o=!1;const s=this.showRulersSetting.get()&&this.model.type()!==n.DeviceModeModel.Type.None;let r=!1,a=!1;const d=this.model.screenRect().scale(1/i);this.cachedCssScreenRect&&d.isEqual(this.cachedCssScreenRect)||(e(this.screenArea,d),a=!0,o=!0,this.cachedCssScreenRect=d);const l=this.model.visiblePageRect().scale(1/i);this.cachedCssVisiblePageRect&&l.isEqual(this.cachedCssVisiblePageRect)||(e(this.pageArea,l),o=!0,this.cachedCssVisiblePageRect=l);const c=this.model.outlineRect();if(c){const t=c.scale(1/i);this.cachedOutlineRect&&t.isEqual(this.cachedOutlineRect)||(e(this.outlineImage,t),o=!0,this.cachedOutlineRect=t)}this.contentClip.classList.toggle("device-mode-outline-visible",Boolean(this.model.outlineImage()));const h=this.model.type()===n.DeviceModeModel.Type.Responsive;h!==this.cachedResizable&&(this.rightResizerElement.classList.toggle("hidden",!h),this.leftResizerElement.classList.toggle("hidden",!h),this.bottomResizerElement.classList.toggle("hidden",!h),this.bottomRightResizerElement.classList.toggle("hidden",!h),this.bottomLeftResizerElement.classList.toggle("hidden",!h),this.cachedResizable=h);const m=this.showMediaInspectorSetting.get()&&this.model.type()!==n.DeviceModeModel.Type.None;if(m!==this.cachedMediaInspectorVisible&&(m?this.mediaInspector.show(this.mediaInspectorContainer):this.mediaInspector.detach(),r=!0,o=!0,this.cachedMediaInspectorVisible=m),s!==this.cachedShowRulers&&(this.contentClip.classList.toggle("device-mode-rulers-visible",s),s?(this.topRuler.show(this.contentArea),this.leftRuler.show(this.contentArea)):(this.topRuler.detach(),this.leftRuler.detach()),r=!0,o=!0,this.cachedShowRulers=s),this.model.scale()!==this.cachedScale){a=!0,o=!0;for(const e of this.presetBlocks){const t=this.blockElementToWidth.get(e);if(!t)throw new Error("Could not get width for block.");e.style.width=t*this.model.scale()+"px"}this.cachedScale=this.model.scale()}this.toolbar.update(),this.loadImage(this.screenImage,this.model.screenImage()),this.loadImage(this.outlineImage,this.model.outlineImage()),this.mediaInspector.setAxisTransform(this.model.scale()),o&&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)),r&&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()!==n.DeviceModeModel.Type.None)return;const i=t.ZoomManager.ZoomManager.instance().zoomFactor(),o=e.getBoundingClientRect(),s=new t.Geometry.Size(Math.max(o.width*i,1),Math.max(o.height*i,1));this.model.setAvailableSize(s,s)}contentAreaResized(){const e=t.ZoomManager.ZoomManager.instance().zoomFactor(),i=this.contentArea.getBoundingClientRect(),o=new t.Geometry.Size(Math.max(i.width*e,1),Math.max(i.height*e,1)),s=new t.Geometry.Size(Math.max((i.width-2*(this.handleWidth||0))*e,1),Math.max((i.height-(this.handleHeight||0))*e,1));this.model.setAvailableSize(o,s)}measureHandles(){const 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(){this.measureHandles(),this.toolbar.restore()}willHide(){this.model.emulate(n.DeviceModeModel.Type.None,null,null)}async captureScreenshot(){const e=await this.model.captureScreenshot(!1);if(null===e)return;const t=new Image;t.src="data:image/png;base64,"+e,t.onload=async()=>{const e=t.naturalWidth/this.model.screenRect().width,i=this.model.outlineRect();if(!i)throw new Error("Unable to take screenshot: no outlineRect available.");const o=i.scale(e),s=this.model.screenRect().scale(e),n=this.model.visiblePageRect().scale(e),r=s.left+n.left-o.left,a=s.top+n.top-o.top,d=document.createElement("canvas");d.width=Math.floor(o.width),d.height=Math.min(16384,Math.floor(o.height));const l=d.getContext("2d");if(!l)throw new Error("Could not get 2d context from canvas.");l.imageSmoothingEnabled=!1,this.model.outlineImage()&&await this.paintImage(l,this.model.outlineImage(),o.relativeTo(o)),this.model.screenImage()&&await this.paintImage(l,this.model.screenImage(),s.relativeTo(o)),l.drawImage(t,Math.floor(r),Math.floor(a)),this.saveScreenshot(d)}}async captureFullSizeScreenshot(){const e=await this.model.captureScreenshot(!0);if(null!==e)return this.saveScreenshotBase64(e)}async captureAreaScreenshot(e){const t=await this.model.captureScreenshot(!1,e);if(null!==t)return this.saveScreenshotBase64(t)}saveScreenshotBase64(e){const t=new Image;t.src="data:image/png;base64,"+e,t.onload=()=>{const e=document.createElement("canvas");e.width=t.naturalWidth,e.height=Math.min(16384,Math.floor(t.naturalHeight));const i=e.getContext("2d");if(!i)throw new Error("Could not get 2d context for base64 screenshot.");i.imageSmoothingEnabled=!1,i.drawImage(t,0,0),this.saveScreenshot(e)}}paintImage(e,t,i){return new Promise((o=>{const s=new Image;s.crossOrigin="Anonymous",s.srcset=t,s.onerror=()=>o(),s.onload=()=>{e.drawImage(s,i.left,i.top,i.width,i.height),o()}}))}saveScreenshot(e){const t=this.model.inspectedURL();let i="";if(t){const e=d.StringUtilities.removeURLFragment(t);i=d.StringUtilities.trimURL(e)}const o=this.model.device();o&&this.model.type()===n.DeviceModeModel.Type.Device&&(i+=`(${o.title})`);const s=document.createElement("a");s.download=i+".png",e.toBlob((e=>{null!==e&&(s.href=URL.createObjectURL(e),s.click())}))}}class z extends t.Widget.VBox{contentElementInternal;horizontal;scale;count;throttler;applyCallback;renderedScale;renderedZoomFactor;constructor(e,t){super(),this.element.classList.add("device-mode-ruler"),this.element.setAttribute("jslog",`${l.deviceModeRuler().track({click:!0})}`),this.contentElementInternal=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 r.Throttler.Throttler(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(){const e=t.ZoomManager.ZoomManager.instance().zoomFactor(),i=this.horizontal?this.contentElementInternal.offsetWidth:this.contentElementInternal.offsetHeight;this.scale===this.renderedScale&&e===this.renderedZoomFactor||(this.contentElementInternal.removeChildren(),this.count=0,this.renderedScale=this.scale,this.renderedZoomFactor=e);const o=i*e/this.scale,s=Math.ceil(o/5);let n=1;this.scale<.8&&(n=2),this.scale<.6&&(n=4),this.scale<.4&&(n=8),this.scale<.2&&(n=16),this.scale<.1&&(n=32);for(let e=s;e<this.count;e++)if(!(e%n)){const e=this.contentElementInternal.lastChild;e&&e.remove()}for(let t=this.count;t<s;t++){if(t%n)continue;const i=this.contentElementInternal.createChild("div","device-mode-ruler-marker");if(t&&(this.horizontal?i.style.left=5*t*this.scale/e+"px":i.style.top=5*t*this.scale/e+"px",!(t%20))){const e=i.createChild("div","device-mode-ruler-text");e.textContent=String(5*t),e.addEventListener("click",this.onMarkerClick.bind(this,5*t),!1)}t%10?t%5||i.classList.add("device-mode-ruler-marker-medium"):i.classList.add("device-mode-ruler-marker-large")}this.count=s}onMarkerClick(e){this.applyCallback.call(null,e)}}var L=Object.freeze({__proto__:null,DeviceModeView:R,Ruler:z});let P;class W extends t.Widget.VBox{inspectedPagePlaceholder;deviceModeView;toggleDeviceModeAction;showDeviceModeSetting;constructor(e){super(),this.inspectedPagePlaceholder=e,this.deviceModeView=null,this.toggleDeviceModeAction=t.ActionRegistry.ActionRegistry.instance().getAction("emulation.toggle-device-mode");const i=n.DeviceModeModel.DeviceModeModel.instance();this.showDeviceModeSetting=i.enabledSetting(),this.showDeviceModeSetting.setRequiresUserAction(Boolean(o.Runtime.Runtime.queryParam("hasOtherClients"))),this.showDeviceModeSetting.addChangeListener(this.update.bind(this,!1)),s.TargetManager.TargetManager.instance().addModelListener(s.OverlayModel.OverlayModel,"ScreenshotRequested",this.screenshotRequestedFromOverlay,this),this.update(!0)}static instance(e={forceNew:null,inspectedPagePlaceholder:null}){const{forceNew:t,inspectedPagePlaceholder:i}=e;if(!P||t){if(!i)throw new Error(`Unable to create DeviceModeWrapper: inspectedPagePlaceholder must be provided: ${(new Error).stack}`);P=new W(i)}return P}toggleDeviceMode(){this.showDeviceModeSetting.set(!this.showDeviceModeSetting.get())}isDeviceModeOn(){return this.showDeviceModeSetting.get()}captureScreenshot(e,t){return this.deviceModeView||(this.deviceModeView=new R),this.deviceModeView.setNonEmulatedAvailableSize(this.inspectedPagePlaceholder.element),e?this.deviceModeView.captureFullSizeScreenshot():t?this.deviceModeView.captureAreaScreenshot(t):this.deviceModeView.captureScreenshot(),!0}screenshotRequestedFromOverlay(e){const t=e.data;this.captureScreenshot(!1,t)}update(e){this.toggleDeviceModeAction.setToggled(this.showDeviceModeSetting.get());const t=this.showDeviceModeSetting.get();(e||t!==this.deviceModeView?.isShowing())&&(t?(this.deviceModeView||(this.deviceModeView=new R),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)))}}var A=Object.freeze({__proto__:null,ActionDelegate:class{handleAction(e,t){switch(t){case"emulation.capture-screenshot":return W.instance().captureScreenshot();case"emulation.capture-node-screenshot":{const i=e.flavor(s.DOMModel.DOMNode);if(!i)return!0;async function o(){if(!i)return;const e=await i.resolveToObject();if(!e)return;const t=await e.callFunction((function(){const e=this.getBoundingClientRect(),t=this.ownerDocument.documentElement.getBoundingClientRect();return JSON.stringify({x:e.left-t.left,y:e.top-t.top,width:e.width,height:e.height,scale:1})}));if(!t.object)throw new Error("Clipping error: could not get object data.");const o=JSON.parse(t.object.value),s=await i.domModel().target().pageAgent().invoke_getLayoutMetrics(),n=!s.getError()&&s.visualViewport.zoom||1;o.x*=n,o.y*=n,o.width*=n,o.height*=n,W.instance().captureScreenshot(!1,o)}return o(),!0}case"emulation.capture-full-height-screenshot":return W.instance().captureScreenshot(!0);case"emulation.toggle-device-mode":return W.instance().toggleDeviceMode(),!0}return!1}},DeviceModeWrapper:W}),F={cssText:`:host{background-color:var(--sys-color-cdt-base-container)}\n/*# sourceURL=${import.meta.resolve("./inspectedPagePlaceholder.css")} */\n`};let V;class U extends(r.ObjectWrapper.eventMixin(t.Widget.Widget)){updateId;constructor(){super(!0),this.registerRequiredCSS(F),t.ZoomManager.ZoomManager.instance().addEventListener("ZoomChanged",this.onResize,this),this.restoreMinimumSize()}static instance(e={forceNew:null}){const{forceNew:t}=e;return V&&!t||(V=new U),V}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(){const e=t.ZoomManager.ZoomManager.instance().zoomFactor(),i=this.element.getBoundingClientRect(),o=this.element.ownerDocument.body.getBoundingClientRect(),s=Math.max(i.left*e,o.left*e),n=Math.max(i.top*e,o.top*e),r=Math.min(i.bottom*e,o.bottom*e);return{x:s,y:n,width:Math.min(i.right*e,o.right*e)-s,height:r-n}}update(e){delete this.updateId;const t=this.dipPageRect(),i={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&&(--i.height,this.dispatchEventToListeners("Update",i),++i.height),this.dispatchEventToListeners("Update",i)}}var B=Object.freeze({__proto__:null,InspectedPagePlaceholder:U});let j,Q;class H{rootSplitWidget;deviceModeView;inspectedPagePlaceholder;toolboxWindow;toolboxRootView;changingDockSide;toolboxDocument;constructor(){t.DockController.DockController.instance().addEventListener("BeforeDockSideChanged",this.openToolboxWindow,this)}static instance(){return j||(j=new H),j}presentUI(e){const i=new t.RootView.RootView;this.rootSplitWidget=new t.SplitWidget.SplitWidget(!1,!0,"inspector-view.split-view-state",555,300,!0),this.rootSplitWidget.show(i.element),this.rootSplitWidget.setSidebarWidget(t.InspectorView.InspectorView.instance()),this.rootSplitWidget.setDefaultFocusedChild(t.InspectorView.InspectorView.instance()),t.InspectorView.InspectorView.instance().setOwnerSplit(this.rootSplitWidget),this.inspectedPagePlaceholder=U.instance(),this.inspectedPagePlaceholder.addEventListener("Update",this.onSetInspectedPageBounds.bind(this),this),this.deviceModeView=W.instance({inspectedPagePlaceholder:this.inspectedPagePlaceholder,forceNew:!1}),t.DockController.DockController.instance().addEventListener("BeforeDockSideChanged",this.onBeforeDockSideChange,this),t.DockController.DockController.instance().addEventListener("DockSideChanged",this.onDockSideChange,this),t.DockController.DockController.instance().addEventListener("AfterDockSideChanged",this.onAfterDockSideChange,this),this.onDockSideChange(),console.timeStamp("AdvancedApp.attachToBody"),i.attachToDocument(e),i.focus(),this.inspectedPagePlaceholder.update()}openToolboxWindow(e){if("undocked"!==e.data.to)return;if(this.toolboxWindow)return;const t=window.location.href.replace("devtools_app.html","device_mode_emulation_frame.html");this.toolboxWindow=window.open(t,void 0)}deviceModeEmulationFrameLoaded(e){i.ThemeSupport.instance().addDocumentToTheme(e),t.UIUtils.initializeUIUtils(e),t.UIUtils.addPlatformClass(e.documentElement),t.UIUtils.installComponentRootStyles(e.body),t.ContextMenu.ContextMenu.installHandler(e),this.toolboxRootView=new t.RootView.RootView,this.toolboxRootView.attachToDocument(e),this.toolboxDocument=e,this.updateDeviceModeView()}updateDeviceModeView(){this.isDocked()?this.rootSplitWidget.setMainWidget(this.deviceModeView):this.toolboxRootView&&this.deviceModeView.show(this.toolboxRootView.element)}onBeforeDockSideChange(e){"undocked"===e.data.to&&this.toolboxRootView&&(this.rootSplitWidget.hideSidebar(),this.inspectedPagePlaceholder.update()),this.changingDockSide=!0}onDockSideChange(e){this.updateDeviceModeView();const i=e?e.data.to:t.DockController.DockController.instance().dockSide();if(void 0===i)throw new Error("Got onDockSideChange event with unexpected undefined for dockSide()");"undocked"===i?this.updateForUndocked():this.toolboxRootView&&e&&"undocked"===e.data.from?this.rootSplitWidget.hideSidebar():this.updateForDocked(i)}onAfterDockSideChange(e){this.changingDockSide&&(e.data.from&&"undocked"===e.data.from&&this.updateForDocked(e.data.to),this.changingDockSide=!1,this.inspectedPagePlaceholder.update())}updateForDocked(e){this.rootSplitWidget.resizerElement().style.transform="right"===e?"translateX(2px)":"left"===e?"translateX(-2px)":"",this.rootSplitWidget.setVertical("right"===e||"left"===e),this.rootSplitWidget.setSecondIsSidebar("right"===e||"bottom"===e),this.rootSplitWidget.toggleResizer(this.rootSplitWidget.resizerElement(),!0),this.rootSplitWidget.toggleResizer(t.InspectorView.InspectorView.instance().topResizerElement(),"bottom"===e),this.rootSplitWidget.showBoth()}updateForUndocked(){this.rootSplitWidget.toggleResizer(this.rootSplitWidget.resizerElement(),!1),this.rootSplitWidget.toggleResizer(t.InspectorView.InspectorView.instance().topResizerElement(),!1),this.rootSplitWidget.hideMain()}isDocked(){return"undocked"!==t.DockController.DockController.instance().dockSide()}onSetInspectedPageBounds(t){if(this.changingDockSide)return;const i=this.inspectedPagePlaceholder.element.window();if(!i.innerWidth||!i.innerHeight)return;if(!this.inspectedPagePlaceholder.isShowing())return;const o=t.data;console.timeStamp("AdvancedApp.setInspectedPageBounds"),e.InspectorFrontendHost.InspectorFrontendHostInstance.setInspectedPageBounds(o)}}globalThis.Emulation=globalThis.Emulation||{},globalThis.Emulation.AdvancedApp=H;class O{static instance(e={forceNew:null}){const{forceNew:t}=e;return Q&&!t||(Q=new O),Q}createApp(){return H.instance()}}var _=Object.freeze({__proto__:null,AdvancedApp:H,AdvancedAppProvider:O});export{_ as AdvancedApp,S as DeviceModeToolbar,L as DeviceModeView,A as DeviceModeWrapper,B as InspectedPagePlaceholder,k as MediaQueryInspector};

package/client/dist/chrome-devtools-ui/panels/event_listeners/event_listeners.js

@@ -0,0 +1 @@
+import*as e from"../../core/common/common.js";import*as t from"../../core/sdk/sdk.js";import*as n from"../../core/i18n/i18n.js";import*as r from"../../ui/components/buttons/buttons.js";import*as o from"../../ui/legacy/components/object_ui/object_ui.js";import*as i from"../../ui/legacy/components/utils/utils.js";import*as s from"../../ui/legacy/legacy.js";import*as l from"../../ui/visual_logging/visual_logging.js";async function a(n){const r=n.runtimeModel().target().model(t.DOMDebuggerModel.DOMDebuggerModel);if(!r)return{eventListeners:[],internalHandlers:null};const o={internalHandlers:null,eventListeners:[]};return await n.callFunction((function(){const e=[];let t=[],n=[],r=[function(e){if(!(e&&e instanceof Node))return{eventListeners:[]};const t=window.jQuery;if(!t?.fn)return{eventListeners:[]};const n=t,r=t._data||t.data,o=[],i=[];if("function"==typeof r){const t=r(e,"events");for(const n in t)for(const r in t[n]){const i=t[n][r];if("object"==typeof i||"function"==typeof i){const t={handler:i.handler||i,useCapture:!0,passive:!1,once:!1,type:n,remove:u.bind(e,i.selector)};o.push(t)}}const n=r(e);n&&"function"==typeof n.handle&&i.push(n.handle)}const s=n(e)[0];if(s){const e=s.$events;for(const t in e){const n=e[t];for(const e in n)if("function"==typeof n[e]){const r={handler:n[e],useCapture:!0,passive:!1,once:!1,type:t};o.push(r)}}s?.$handle&&i.push(s.$handle)}return{eventListeners:o,internalHandlers:i}}];try{self.devtoolsFrameworkEventListeners&&i(self.devtoolsFrameworkEventListeners)&&(r=r.concat(self.devtoolsFrameworkEventListeners))}catch(t){e.push("devtoolsFrameworkEventListeners call produced error: "+a(t))}for(let o=0;o<r.length;++o)try{const e=r[o](this);if(e.eventListeners&&i(e.eventListeners)){const n=e.eventListeners.map((e=>s(e))).filter(c);t=t.concat(n)}if(e.internalHandlers&&i(e.internalHandlers)){const t=e.internalHandlers.map((e=>l(e))).filter(c);n=n.concat(t)}}catch(t){e.push("fetcher call produced error: "+a(t))}const o={eventListeners:t,internalHandlers:n.length?n:void 0,errorString:void 0};o.internalHandlers||delete o.internalHandlers;if(e.length){let t="Framework Event Listeners API Errors:\n\t"+e.join("\n\t");t=t.substr(0,t.length-1),o.errorString=t}""!==o.errorString&&void 0!==o.errorString||delete o.errorString;return o;function i(e){if(!e||"object"!=typeof e)return!1;try{if("function"==typeof e.splice){const t=e.length;return"number"==typeof t&&t>>>0===t&&(t>0||1/t>0)}}catch{}return!1}function s(t){try{let n="";if(t){const e=t.type;e&&"string"==typeof e||(n+="event listener's type isn't string or empty, ");const r=t.useCapture;"boolean"!=typeof r&&(n+="event listener's useCapture isn't boolean or undefined, ");const o=t.passive;"boolean"!=typeof o&&(n+="event listener's passive isn't boolean or undefined, ");const i=t.once;"boolean"!=typeof i&&(n+="event listener's once isn't boolean or undefined, ");const s=t.handler;s&&"function"==typeof s||(n+="event listener's handler isn't a function or empty, ");const l=t.remove;if(l&&"function"!=typeof l&&(n+="event listener's remove isn't a function, "),!n)return{type:e,useCapture:r,passive:o,once:i,handler:s,remove:l}}else n+="empty event listener, ";return e.push(n.substr(0,n.length-2)),null}catch(t){return e.push(a(t)),null}}function l(t){return t&&"function"==typeof t?t:(e.push("internal handler isn't a function or empty"),null)}function a(e){try{return String(e)}catch{return"<error>"}}function c(e){return Boolean(e)}function u(e,t,n){if(!(this&&this instanceof Node))return;const r=window.jQuery;if(!r?.fn)return;r(this).off(t,e,n)}}),void 0).then(c).then((function(e){return e.getOwnProperties(!1)})).then((async function(n){if(!n.properties)throw new Error("Object properties is empty");const r=[];for(const u of n.properties)"eventListeners"===u.name&&u.value&&r.push(i(u.value).then(l)),"internalHandlers"===u.name&&u.value&&r.push((c=u.value,t.RemoteObject.RemoteArray.objectAsArray(c).map(s).then(t.RemoteObject.RemoteArray.createFromRemoteObjects.bind(null))).then(a)),"errorString"===u.name&&u.value&&(o=u.value,e.Console.Console.instance().error(String(o.value)));var o;var c;await Promise.all(r)})).then((function(){return o})).catch((e=>(console.error(e),o)));function i(e){return t.RemoteObject.RemoteArray.objectAsArray(e).map((function(e){let o,i,l,a,u=null,d=null,h=null,v=null;const p=[];function m(e){h=e?e.location:null}return p.push(e.callFunctionJSON((function(){return{type:this.type,useCapture:this.useCapture,passive:this.passive,once:this.once}}),void 0).then((function(e){void 0!==e.type&&(o=e.type);void 0!==e.useCapture&&(i=e.useCapture);void 0!==e.passive&&(l=e.passive);void 0!==e.once&&(a=e.once)}))),p.push(e.callFunction((function(){return this.handler||null})).then(c).then((function(e){return d=e,d})).then(s).then((function(e){return u=e,e.debuggerModel().functionDetailsPromise(e).then(m)}))),p.push(e.callFunction((function(){return this.remove||null})).then(c).then((function(e){if("function"!==e.type)return;v=e}))),Promise.all(p).then((function(){if(!h)throw new Error("Empty event listener's location");return new t.DOMDebuggerModel.EventListener(r,n,o,i,l,a,u,d,h,v,"FrameworkUser")})).catch((e=>(console.error(e),null)))})).then(u)}function s(e){return t.RemoteObject.RemoteFunction.objectAsFunction(e).targetFunction()}function l(e){o.eventListeners=e}function a(e){o.internalHandlers=e}function c(e){if(e.wasThrown||!e.object)throw new Error("Exception in callFunction or empty result");return e.object}function u(e){return e.filter((function(e){return Boolean(e)}))}}var c=Object.freeze({__proto__:null,frameworkEventListeners:a}),u={cssText:`.value.object-value-node:hover{background-color:var(--sys-color-state-hover-on-subtle)}.object-value-function-prefix,\n.object-value-boolean{color:var(--sys-color-token-attribute-value)}.object-value-function{font-style:italic}.object-value-function.linkified:hover{--override-linkified-hover-background:rgb(0 0 0/10%);background-color:var(--override-linkified-hover-background);cursor:pointer}.theme-with-dark-background .object-value-function.linkified:hover,\n:host-context(.theme-with-dark-background) .object-value-function.linkified:hover{--override-linkified-hover-background:rgb(230 230 230/10%)}.object-value-number{color:var(--sys-color-token-attribute-value)}.object-value-bigint{color:var(--sys-color-token-comment)}.object-value-string,\n.object-value-regexp,\n.object-value-symbol{white-space:pre;unicode-bidi:-webkit-isolate;color:var(--sys-color-token-property-special)}.object-value-node{position:relative;vertical-align:baseline;color:var(--sys-color-token-variable);white-space:nowrap}.object-value-null,\n.object-value-undefined{color:var(--sys-color-state-disabled)}.object-value-unavailable{color:var(--sys-color-token-tag)}.object-value-calculate-value-button:hover{text-decoration:underline}.object-properties-section-custom-section{display:inline-flex;flex-direction:column}.theme-with-dark-background .object-value-number,\n:host-context(.theme-with-dark-background) .object-value-number,\n.theme-with-dark-background .object-value-boolean,\n:host-context(.theme-with-dark-background) .object-value-boolean{--override-primitive-dark-mode-color:hsl(252deg 100% 75%);color:var(--override-primitive-dark-mode-color)}.object-properties-section .object-description{color:var(--sys-color-token-subtle)}.value .object-properties-preview{white-space:nowrap}.name{color:var(--sys-color-token-tag);flex-shrink:0}.object-properties-preview .name{color:var(--sys-color-token-subtle)}@media (forced-colors: active){.object-value-calculate-value-button:hover{forced-color-adjust:none;color:Highlight}}\n/*# sourceURL=${import.meta.resolve("./objectValue.css")} */\n`},d={cssText:`.tree-outline-disclosure li{padding:0 0 0 5px;overflow:hidden;display:flex;min-height:var(--sys-size-8);align-items:center}.tree-outline-disclosure{padding-left:0!important;padding-right:3px}.tree-outline-disclosure li.parent::before{top:0!important}.tree-outline-disclosure .name{color:var(--sys-color-token-tag)}.tree-outline-disclosure .object-value-node,\n.tree-outline-disclosure .object-value-object{overflow:hidden;text-overflow:ellipsis}.event-listener-details{display:flex;min-height:var(--sys-size-8);align-items:center;gap:var(--sys-size-2);devtools-button{height:var(--sys-size-8)}}.event-listener-tree-subtitle{float:right;margin-left:5px;flex-shrink:0}.event-listener-button{padding:0 5px;color:var(--sys-color-primary);background-color:var(--sys-color-cdt-base-container);border-radius:7px;border:1px solid var(--sys-color-tonal-outline);margin-left:5px;display:block;flex-shrink:0;&:hover{background-color:var(--sys-color-state-hover-on-subtle)}&:active{background-color:var(--sys-color-state-ripple-neutral-on-subtle)}}.placeholder:not(.hidden) + .event-listener-tree{display:none}.placeholder{display:flex;margin:auto;align-items:center;justify-content:center}.sources.panel .empty-view-scroller{display:none}.elements.panel .placeholder{display:block;.gray-info-message{display:none}}.tree-outline-disclosure li:hover .event-listener-button{display:inline}@media (forced-colors: active){.event-listener-details .event-listener-button{forced-color-adjust:none;opacity:100%;background:ButtonFace;color:ButtonText;border-color:ButtonText}.event-listener-button:hover{background-color:Highlight!important;color:HighlightText;border-color:ButtonText}.tree-outline.hide-selection-when-blurred .selected:focus-visible .event-listener-button,\n  .tree-outline-disclosure li:focus-visible .gray-info-message{background-color:Highlight;color:HighlightText;border-color:HighlightText}}\n/*# sourceURL=${import.meta.resolve("./eventListenersView.css")} */\n`};const h={noEventListeners:"No event listeners",eventListenersExplanation:"On this page you will find registered event listeners",deleteEventListener:"Delete event listener",togglePassive:"Toggle Passive",toggleWhetherEventListenerIs:"Toggle whether event listener is passive or blocking",openInElementsPanel:"Open in Elements panel",passive:"Passive"},v=n.i18n.registerUIStrings("panels/event_listeners/EventListenersView.ts",h),p=n.i18n.getLocalizedString.bind(void 0,v);class m extends s.Widget.VBox{changeCallback;enableDefaultTreeFocus;treeOutline;emptyHolder;linkifier;treeItemMap;constructor(e,t=!1){super(),this.registerRequiredCSS(d),this.changeCallback=e,this.enableDefaultTreeFocus=t,this.emptyHolder=this.element.createChild("div","placeholder hidden"),this.emptyHolder.createChild("span","gray-info-message").textContent=p(h.noEventListeners);new s.EmptyWidget.EmptyWidget(p(h.noEventListeners),p(h.eventListenersExplanation)).show(this.emptyHolder),this.treeOutline=new s.TreeOutline.TreeOutlineInShadow,this.treeOutline.setComparator(f.comparator),this.treeOutline.element.classList.add("event-listener-tree","monospace"),this.treeOutline.setShowSelectionOnKeyboardFocus(!0),this.treeOutline.setFocusable(!0),this.treeOutline.registerRequiredCSS(d,u),this.element.appendChild(this.treeOutline.element),this.linkifier=new i.Linkifier.Linkifier,this.treeItemMap=new Map}focus(){this.enableDefaultTreeFocus&&(this.emptyHolder.classList.contains("hidden")?this.emptyHolder.focus():this.treeOutline.forceSelect())}async addObjects(e){this.reset(),await Promise.all(e.map((e=>e?this.addObject(e):Promise.resolve()))),this.addEmptyHolderIfNeeded(),this.eventListenersArrivedForTest()}addObject(e){let n,r=null;const o=[],i=e.runtimeModel().target().model(t.DOMDebuggerModel.DOMDebuggerModel);return i&&o.push(i.eventListeners(e).then((function(e){n=e}))),o.push(a(e).then((function(e){r=e}))),Promise.all(o).then((async function(){if(!r)return;if(!r.internalHandlers)return;return await r.internalHandlers.object().callFunctionJSON((function(){const e=[],t=new Set(this);for(const n of arguments)e.push(t.has(n));return e}),n.map((function(e){return t.RemoteObject.RemoteObject.toCallArgument(e.handler())}))).then((function(e){for(let t=0;t<n.length;++t)e[t]&&n[t].markAsFramework()}))})).then(function(){this.addObjectEventListeners(e,n),r&&this.addObjectEventListeners(e,r.eventListeners)}.bind(this))}addObjectEventListeners(e,t){if(t)for(const n of t){this.getOrCreateTreeElementForType(n.type()).addObjectEventListener(n,e)}}showFrameworkListeners(e,t,n){const r=this.treeOutline.rootElement().children();for(const o of r){let r=!0;for(const i of o.children()){const o=i,s=o.eventListener().origin();let l=!1;"FrameworkUser"!==s||e||(l=!0),"Framework"===s&&e&&(l=!0),!t&&o.eventListener().passive()&&(l=!0),n||o.eventListener().passive()||(l=!0),o.hidden=l,r=r&&l}o.hidden=r}}getOrCreateTreeElementForType(e){let t=this.treeItemMap.get(e);return t||(t=new f(e,this.linkifier,this.changeCallback),this.treeItemMap.set(e,t),t.hidden=!0,this.treeOutline.appendChild(t)),this.emptyHolder.classList.add("hidden"),t}addEmptyHolderIfNeeded(){let e=!0,t=null;for(const n of this.treeOutline.rootElement().children())n.hidden=!n.firstChild(),e=e&&n.hidden,t||n.hidden||(t=n);e&&this.emptyHolder.classList.contains("hidden")&&this.emptyHolder.classList.remove("hidden"),t&&t.select(!0),this.treeOutline.setFocusable(Boolean(t))}reset(){const e=this.treeOutline.rootElement().children();for(const t of e)t.removeChildren();this.linkifier.reset()}eventListenersArrivedForTest(){}}class f extends s.TreeOutline.TreeElement{toggleOnClick;linkifier;changeCallback;constructor(e,t,n){super(e),this.toggleOnClick=!0,this.linkifier=t,this.changeCallback=n,s.ARIAUtils.setLabel(this.listItemElement,`${e}, event listener`)}static comparator(e,t){return e.title===t.title?0:e.title>t.title?1:-1}addObjectEventListener(e,t){const n=new b(e,t,this.linkifier,this.changeCallback);this.appendChild(n)}}class b extends s.TreeOutline.TreeElement{eventListenerInternal;editable;changeCallback;valueTitle;constructor(e,t,n,r){super("",!0),this.eventListenerInternal=e,this.editable=!1,this.setTitle(t,n),this.changeCallback=r}async onpopulate(){const e=[],n=this.eventListenerInternal,r=n.domDebuggerModel().runtimeModel();e.push(r.createRemotePropertyFromPrimitiveValue("useCapture",n.useCapture())),e.push(r.createRemotePropertyFromPrimitiveValue("passive",n.passive())),e.push(r.createRemotePropertyFromPrimitiveValue("once",n.once())),void 0!==n.handler()&&e.push(new t.RemoteObject.RemoteObjectProperty("handler",n.handler())),o.ObjectPropertiesSection.ObjectPropertyTreeElement.populateWithProperties(this,e,[],!0,!0,null)}setTitle(t,n){const i=this.listItemElement.createChild("span","event-listener-details"),a=o.ObjectPropertiesSection.ObjectPropertiesSection.createPropertyValue(t,!1,!1);if(this.valueTitle=a.element,i.appendChild(this.valueTitle),this.eventListenerInternal.canRemove()){const e=new r.Button.Button;e.data={variant:"icon",size:"MICRO",iconName:"bin",jslogContext:"delete-event-listener"},s.Tooltip.Tooltip.install(e,p(h.deleteEventListener)),e.addEventListener("click",(e=>{this.removeListener(),e.consume()}),!1),i.appendChild(e)}if(this.eventListenerInternal.isScrollBlockingType()&&this.eventListenerInternal.canTogglePassive()){const e=i.createChild("button","event-listener-button");e.textContent=p(h.togglePassive),e.setAttribute("jslog",`${l.action("passive").track({click:!0})}`),s.Tooltip.Tooltip.install(e,p(h.toggleWhetherEventListenerIs)),e.addEventListener("click",(e=>{this.togglePassiveListener(),e.consume()}),!1),i.appendChild(e)}const c=i.createChild("span","event-listener-tree-subtitle"),u=n.linkifyRawLocation(this.eventListenerInternal.location(),this.eventListenerInternal.sourceURL());c.appendChild(u),this.listItemElement.addEventListener("contextmenu",(n=>{const r=new s.ContextMenu.ContextMenu(n);n.target!==u&&r.appendApplicableItems(u),"node"===t.subtype&&r.defaultSection().appendItem(p(h.openInElementsPanel),(()=>e.Revealer.reveal(t)),{jslogContext:"reveal-in-elements"}),r.defaultSection().appendItem(p(h.deleteEventListener),this.removeListener.bind(this),{disabled:!this.eventListenerInternal.canRemove(),jslogContext:"delete-event-listener"}),r.defaultSection().appendCheckboxItem(p(h.passive),this.togglePassiveListener.bind(this),{checked:this.eventListenerInternal.passive(),disabled:!this.eventListenerInternal.canTogglePassive(),jslogContext:"passive"}),r.show()}))}removeListener(){this.removeListenerBar(),this.eventListenerInternal.remove()}togglePassiveListener(){this.eventListenerInternal.togglePassive().then((()=>this.changeCallback()))}removeListenerBar(){const e=this.parent;if(!e)return;e.removeChild(this),e.childCount()||e.collapse();let t=!0;for(const n of e.children())n.hidden||(t=!1);e.hidden=t}eventListener(){return this.eventListenerInternal}onenter(){return!!this.valueTitle&&(this.valueTitle.click(),!0)}ondelete(){return!!this.eventListenerInternal.canRemove()&&(this.removeListener(),!0)}}var g=Object.freeze({__proto__:null,EventListenersTreeElement:f,EventListenersView:m,ObjectEventListenerBar:b});export{c as EventListenersUtils,g as EventListenersView};

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

@@ -0,0 +1 @@
+import*as e from"../../core/common/common.js";import*as i from"../../core/i18n/i18n.js";import*as n from"../console/console.js";import*as o from"../../ui/legacy/legacy.js";const t={explainThisError:"Understand this error",explainThisWarning:"Understand this warning",explainThisMessage:"Understand this message",enableConsoleInsights:"Understand console messages with AI",wrongLocale:"To use this feature, set your language preference to English in DevTools settings.",geoRestricted:"This feature is unavailable in your region.",policyRestricted:"This setting is managed by your administrator."},s=i.i18n.registerUIStrings("panels/explain/explain-meta.ts",t),a=i.i18n.getLazilyComputedLocalizedString.bind(void 0,s),l=i.i18n.getLocalizedString.bind(void 0,s),r=[{actionId:"explain.console-message.hover",title:a(t.explainThisMessage),contextTypes:()=>[n.ConsoleViewMessage.ConsoleViewMessage]},{actionId:"explain.console-message.context.error",title:a(t.explainThisError),contextTypes:()=>[]},{actionId:"explain.console-message.context.warning",title:a(t.explainThisWarning),contextTypes:()=>[]},{actionId:"explain.console-message.context.other",title:a(t.explainThisMessage),contextTypes:()=>[]}];function c(e){return!0===e?.aidaAvailability?.blockedByEnterprisePolicy}function g(e){return!0===(e?.aidaAvailability?.enabled&&e?.devToolsConsoleInsights?.enabled)}e.Settings.registerSettingExtension({category:"AI",settingName:"console-insights-enabled",settingType:"boolean",title:a(t.enableConsoleInsights),defaultValue:!1,reloadRequired:!1,condition:e=>g(e),disabledCondition:e=>{const n=[];return function(e){return!0===e?.aidaAvailability?.blockedByGeo}(e)&&n.push(l(t.geoRestricted)),c(e)&&n.push(l(t.policyRestricted)),i.DevToolsLocale.DevToolsLocale.instance().locale.startsWith("en-")||n.push(l(t.wrongLocale)),n.length>0?{disabled:!0,reasons:n}:{disabled:!1}}});for(const e of r)o.ActionRegistration.registerActionExtension({...e,category:"CONSOLE",loadActionDelegate:async()=>new((await import("./explain.js")).ActionDelegate),condition:e=>g(e)&&!c(e)});

package/client/dist/chrome-devtools-ui/panels/explain/explain.js

@@ -0,0 +1,231 @@
+import"../../ui/components/spinners/spinners.js";import*as e from"../../core/common/common.js";import*as t from"../../core/host/host.js";import*as s from"../../core/i18n/i18n.js";import*as i from"../../core/root/root.js";import*as n from"../../third_party/marked/marked.js";import"../../ui/components/buttons/buttons.js";import*as o from"../../ui/components/input/input.js";import*as r from"../../ui/components/markdown_view/markdown_view.js";import*as a from"../../ui/legacy/legacy.js";import*as l from"../../ui/lit/lit.js";import*as c from"../../ui/visual_logging/visual_logging.js";import*as d from"../../core/sdk/sdk.js";import*as g from"../../models/ai_assistance/ai_assistance.js";import*as h from"../../models/bindings/bindings.js";import*as u from"../../models/formatter/formatter.js";import*as m from"../../models/logs/logs.js";import*as p from"../../ui/legacy/components/utils/utils.js";import*as f from"../console/console.js";const v=1e3;var y;!function(e){e.MESSAGE="message",e.STACKTRACE="stacktrace",e.NETWORK_REQUEST="networkRequest",e.RELATED_CODE="relatedCode"}(y||(y={}));class b{#e;constructor(e){this.#e=e}async getNetworkRequest(){const e=this.#e.consoleMessage().getAffectedResources()?.requestId;if(!e)return;return m.NetworkLog.NetworkLog.instance().requestsForId(e)[0]}async getMessageSourceCode(){const e=this.#e.consoleMessage().stackTrace?.callFrames[0],t=this.#e.consoleMessage().runtimeModel(),s=t?.debuggerModel();if(!s||!t||!e)return{text:"",columnNumber:0,lineNumber:0};const i=new d.DebuggerModel.Location(s,e.scriptId,e.lineNumber,e.columnNumber),n=await h.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().rawLocationToUILocation(i),o=await(n?.uiSourceCode.requestContent()),r=!o?.isEncoded&&o?.content?o.content:"",a=r.indexOf("\n");if(r.length>v&&(a<0||a>v)){const{formattedContent:e,formattedMapping:t}=await u.ScriptFormatter.formatScriptContent(n?.uiSourceCode.mimeType()??"text/javascript",r),[s,i]=t.originalToFormatted(n?.lineNumber??0,n?.columnNumber??0);return{text:e,columnNumber:i,lineNumber:s}}return{text:r,columnNumber:n?.columnNumber??0,lineNumber:n?.lineNumber??0}}async buildPrompt(e=Object.values(y)){const[t,s]=await Promise.all([e.includes(y.RELATED_CODE)?this.getMessageSourceCode():void 0,e.includes(y.NETWORK_REQUEST)?this.getNetworkRequest():void 0]),i=t?.text?x(t):"",n=s?C(s):"",o=e.includes(y.STACKTRACE)?I(this.#e):"",r=R(this.#e),a=this.formatPrompt({message:[r,o].join("\n").trim(),relatedCode:i,relatedRequest:n}),l=[{type:y.MESSAGE,value:r}];return o&&l.push({type:y.STACKTRACE,value:o}),i&&l.push({type:y.RELATED_CODE,value:i}),n&&l.push({type:y.NETWORK_REQUEST,value:n}),{prompt:a,sources:l,isPageReloadRecommended:e.includes(y.NETWORK_REQUEST)&&Boolean(this.#e.consoleMessage().getAffectedResources()?.requestId)&&!n}}formatPrompt({message:e,relatedCode:t,relatedRequest:s}){let i=`Please explain the following console error or warning:\n\n\`\`\`\n${e}\n\`\`\``;return t&&(i+=`\nFor the following code:\n\n\`\`\`\n${t}\n\`\`\``),s&&(i+=`\nFor the following network request:\n\n\`\`\`\n${s}\n\`\`\``),i}getSearchQuery(){let e=this.#e.toMessageTextString();return e&&(e=e.split("\n")[0]),e}}function k(e){const t=e.name.toLowerCase().trim();return!t.startsWith("x-")&&("cookie"!==t&&"set-cookie"!==t&&"authorization"!==t)}function w(e){const t=/^\s*/.exec(e);if(!t?.length)return null;const s=t[0];return s===e?null:s}function x({text:e,columnNumber:t,lineNumber:s},i=1e3){const n=e.split("\n");if(n[s].length>=i/2){const e=Math.max(t-i/2,0),o=Math.min(t+i/2,n[s].length);return n[s].substring(e,o)}let o=0,r=s,a=w(n[s]);const l=new Map;for(;void 0!==n[r]&&o+n[r].length<=i/2;){const e=w(n[r]);null===e||null===a||e!==a&&e.startsWith(a)||(/^\s*[\}\)\]]/.exec(n[r])||l.set(e,r),a=e),o+=n[r].length+1,r--}r=s+1;let c=s,d=s;for(a=w(n[s]);void 0!==n[r]&&o+n[r].length<=i;){o+=n[r].length;const e=w(n[r]);if(null!==e&&null!==a&&(e===a||!e.startsWith(a))){const t=n[r+1],s=t?w(t):null;s&&s!==e&&s.startsWith(e)||l.has(e)&&(c=l.get(e)??0,d=r),a=e}r++}return n.slice(c,d+1).join("\n")}function C(e){return`Request: ${e.url()}\n\n${g.NetworkRequestFormatter.formatHeaders("Request headers:",e.requestHeaders())}\n\n${g.NetworkRequestFormatter.formatHeaders("Response headers:",e.responseHeaders)}\n\nResponse status: ${e.statusCode} ${e.statusText}`}function R(e){return e.toMessageTextString().substr(0,1e3)}function I(e){const t=e.contentElement().querySelector(".stack-preview-container");if(!t)return"";const s=t.shadowRoot?.querySelector(".stack-preview-container");return function(e,t,s){let i="";for(const e of t){if(i.length+e.length>s)break;i+=e}return i=i.trim(),i&&e?e+"\n"+i:i}("",s.childTextNodes().filter((e=>!e.parentElement?.closest(".show-all-link,.show-less-link,.hidden-row"))).map(p.Linkifier.Linkifier.untruncatedNodeText),1e3)}var S={cssText:`*{padding:0;margin:0;box-sizing:border-box}:host{font-family:var(--default-font-family);font-size:inherit;display:block}.wrapper{background-color:var(--sys-color-cdt-base-container);border-radius:16px;container-type:inline-size;display:grid;animation:expand var(--sys-motion-duration-medium2) var(--sys-motion-easing-emphasized) forwards}:host-context(.closing) .wrapper{animation:collapse var(--sys-motion-duration-medium2) var(--sys-motion-easing-emphasized) forwards}@keyframes expand{from{grid-template-rows:0fr}to{grid-template-rows:1fr}}@keyframes collapse{from{grid-template-rows:1fr}to{grid-template-rows:0fr;padding-top:0;padding-bottom:0}}.animation-wrapper{overflow:hidden;padding:var(--sys-size-6) var(--sys-size-8)}.wrapper.top{border-radius:16px 16px 4px 4px}.wrapper.bottom{margin-top:5px;border-radius:4px 4px 16px 16px}header{display:flex;flex-direction:row;gap:6px;color:var(--sys-color-on-surface);font-size:13px;font-style:normal;font-weight:500;margin-bottom:var(--sys-size-6);align-items:center}header:focus-visible{outline:none}header > .filler{display:flex;flex-direction:row;gap:var(--sys-size-5);align-items:center;flex:1}.reminder-container{border-radius:var(--sys-size-5);background-color:var(--sys-color-surface4);padding:var(--sys-size-8);font-weight:var(--ref-typeface-weight-medium);h3{font:inherit}}.reminder-items{display:grid;grid-template-columns:var(--sys-size-8) auto;gap:var(--sys-size-5) var(--sys-size-6);margin-top:var(--sys-size-6);line-height:var(--sys-size-8);font-weight:var(--ref-typeface-weight-regular)}main{--override-markdown-view-message-color:var(--sys-color-on-surface);color:var(--sys-color-on-surface);font-size:12px;font-style:normal;font-weight:400;line-height:20px;p{margin-block:1em}ul{list-style-type:none;list-style-position:inside;padding-inline-start:0.2em;li{display:list-item;list-style-type:disc;list-style-position:outside;margin-inline-start:1em}li::marker{font-size:11px;line-height:1}}label{display:inline-flex;flex-direction:row;gap:0.5em;input,\n    span{vertical-align:middle}input[type="checkbox"]{margin-top:0.3em}}}.opt-in-teaser{display:flex;gap:var(--sys-size-5)}devtools-markdown-view{margin-bottom:12px}footer{display:flex;flex-direction:row;align-items:center;color:var(--sys-color-on-surface);font-style:normal;font-weight:400;line-height:normal;margin-top:14px;gap:32px}@container (max-width: 600px){footer{gap:8px}}footer > .filler{flex:1}footer .rating{display:flex;flex-direction:row;gap:8px}textarea{height:84px;padding:10px;border-radius:8px;border:1px solid var(--sys-color-neutral-outline);width:100%;font-family:var(--default-font-family);font-size:inherit}.buttons{display:flex;gap:5px}@media (width <= 500px){.buttons{flex-wrap:wrap}}main .buttons{margin-top:12px}.disclaimer{display:flex;gap:2px;color:var(--sys-color-on-surface-subtle);font-size:11px;align-items:flex-start;flex-direction:column}.link{color:var(--sys-color-primary);text-decoration-line:underline;devtools-icon{color:var(--sys-color-primary);width:14px;height:14px}}button.link{border:none;background:none;cursor:pointer;font:inherit}.loader{background:linear-gradient(130deg,transparent 0%,var(--sys-color-gradient-tertiary) 20%,var(--sys-color-gradient-primary) 40%,transparent 60%,var(--sys-color-gradient-tertiary) 80%,var(--sys-color-gradient-primary) 100%);background-position:0% 0%;background-size:250% 250%;animation:gradient 5s infinite linear}@keyframes gradient{0%{background-position:0 0}100%{background-position:100% 100%}}summary{font-size:12px;font-style:normal;font-weight:400;line-height:20px}details{overflow:hidden;margin-top:10px}::details-content{height:0;transition:height var(--sys-motion-duration-short4) var(--sys-motion-easing-emphasized),content-visibility var(--sys-motion-duration-short4) var(--sys-motion-easing-emphasized) allow-discrete}[open]::details-content{height:auto}details.references{transition:margin-bottom var(--sys-motion-duration-short4) var(--sys-motion-easing-emphasized)}details.references[open]{margin-bottom:var(--sys-size-1)}h2{display:block;font-size:var(--sys-size-7);margin:0;font-weight:var(--ref-typeface-weight-medium);line-height:var(--sys-size-9)}h2:focus-visible{outline:none}.info{width:20px;height:20px}.badge{background:linear-gradient(135deg,var(--sys-color-gradient-primary),var(--sys-color-gradient-tertiary));border-radius:var(--sys-size-3);height:var(--sys-size-9);devtools-icon{margin:var(--sys-size-2)}}.header-icon-container{background:linear-gradient(135deg,var(--sys-color-gradient-primary),var(--sys-color-gradient-tertiary));border-radius:var(--sys-size-4);height:36px;width:36px;display:flex;align-items:center;justify-content:center}.close-button{align-self:flex-start}.sources-list{padding-left:var(--sys-size-6);margin-bottom:var(--sys-size-6);list-style:none;counter-reset:sources;display:grid;grid-template-columns:var(--sys-size-9) auto;list-style-position:inside}.sources-list li{display:contents}.sources-list li::before{counter-increment:sources;content:"[" counter(sources) "]";display:table-cell}.sources-list x-link.highlighted{animation:highlight-fadeout 2s}@keyframes highlight-fadeout{from{background-color:var(--sys-color-yellow-container)}to{background-color:transparent}}.references-list{padding-left:var(--sys-size-8)}.references-list li{padding-left:var(--sys-size-3)}details h3{font-size:10px;font-weight:var(--ref-typeface-weight-medium);text-transform:uppercase;color:var(--sys-color-on-surface-subtle);padding-left:var(--sys-size-6)}.error-message{font:var(--sys-typescale-body4-bold)}\n/*# sourceURL=${import.meta.resolve("././components/consoleInsight.css")} */\n`},A={cssText:`*{padding:0;margin:0;box-sizing:border-box}:host{display:block}ul{color:var(--sys-color-primary);font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin-top:8px;padding-left:var(--sys-size-6)}li{list-style-type:none}ul .link{color:var(--sys-color-primary);display:inline-flex!important;align-items:center;gap:4px;text-decoration-line:underline}devtools-icon{height:16px;width:16px;margin-right:var(--sys-size-1)}devtools-icon[name="open-externally"]{color:var(--icon-link)}.source-disclaimer{color:var(--sys-color-on-surface-subtle)}\n/*# sourceURL=${import.meta.resolve("././components/consoleInsightSourcesList.css")} */\n`};const T=new CSSStyleSheet;T.replaceSync(S.cssText);const $=new CSSStyleSheet;$.replaceSync(A.cssText);const M={consoleMessage:"Console message",stackTrace:"Stacktrace",networkRequest:"Network request",relatedCode:"Related code",generating:"Generating explanation…",insight:"Explanation",closeInsight:"Close explanation",inputData:"Data used to understand this message",goodResponse:"Good response",badResponse:"Bad response",report:"Report legal issue",error:"DevTools has encountered an error",errorBody:"Something went wrong. Try again.",opensInNewTab:"(opens in a new tab)",learnMore:"Learn more",notLoggedIn:"This feature is only available when you sign into Chrome with your Google account.",signIn:"Sign in",offlineHeader:"DevTools can’t reach the internet",offline:"Check your internet connection and try again.",signInToUse:"Sign in to use this feature",search:"Use search instead",reloadRecommendation:"Reload the page to capture related network request data for this message in order to create a better insight.",turnOnInSettings:"Turn on {PH1} to receive AI assistance for understanding and addressing console warnings and errors.",settingsLink:"`Console insights` in Settings",references:"Sources and related content",relatedContent:"Related content",timedOut:"Generating a response took too long. Please try again.",notAvailableInIncognitoMode:"AI assistance is not available in Incognito mode or Guest mode"},E=s.i18n.registerUIStrings("panels/explain/components/ConsoleInsight.ts",M),z=s.i18n.getLocalizedString.bind(void 0,E),{render:L,html:N,Directives:U}=l;class j extends Event{static eventName="close";constructor(){super(j.eventName,{composed:!0,bubbles:!0})}}function O(e){switch(e){case y.MESSAGE:return z(M.consoleMessage);case y.STACKTRACE:return z(M.stackTrace);case y.NETWORK_REQUEST:return z(M.networkRequest);case y.RELATED_CODE:return z(M.relatedCode)}}const D="https://goo.gle/devtools-console-messages-ai",P={name:"citation",level:"inline",start:e=>e.match(/\[\^/)?.index,tokenizer(e){const t=e.match(/^\[\^(\d+)\]/);return!!t&&{type:"citation",raw:t[0],linkText:Number(t[1])}},renderer:()=>""};class _ extends HTMLElement{static async create(e,s){const i=await t.AidaClient.AidaClient.checkAccessPreconditions();return new _(e,s,i)}#t=this.attachShadow({mode:"open"});disableAnimations=!1;#s;#i;#n;#o;#r=l.Directives.createRef();#a=!1;#l;#c;#d;#g;#h;constructor(e,t,s){super(),this.#s=e,this.#i=t,this.#d=s,this.#c=this.#u(),this.#n=new r.MarkdownView.MarkdownInsightRenderer(this.#m.bind(this)),this.#h=new n.Marked.Marked({extensions:[P]}),this.#o=this.#p(),this.#g=this.#f.bind(this),this.#v(),this.addEventListener("keydown",(e=>{e.stopPropagation()})),this.addEventListener("keyup",(e=>{e.stopPropagation()})),this.addEventListener("keypress",(e=>{e.stopPropagation()})),this.addEventListener("click",(e=>{e.stopPropagation()})),this.focus()}#m(e){if("insight"!==this.#o.type||!this.#r.value)return;const t=this.#r.value.open;this.#a=!0,this.#v();const s=this.#t.querySelector(`.sources-list x-link[data-index="${e}"]`);s&&(a.UIUtils.runCSSAnimationOnce(s,"highlighted"),t?(s.scrollIntoView({behavior:"auto"}),s.focus()):this.#r.value.addEventListener("transitionend",(()=>{s.scrollIntoView({behavior:"auto"}),s.focus()}),{once:!0}))}#p(){switch(this.#d){case"available":{const t=e.Settings.Settings.instance().createSetting("console-insights-skip-reminder",!1,"Session").get();return{type:"loading",consentOnboardingCompleted:this.#y().get()||t}}case"no-account-email":return{type:"not-logged-in"};case"sync-is-paused":return{type:"sync-is-paused"};case"no-internet":return{type:"offline"}}}#u(){try{return e.Settings.moduleSetting("console-insights-enabled")}catch{return}}#y(){return e.Settings.Settings.instance().createLocalSetting("console-insights-onboarding-finished",!1)}connectedCallback(){this.#t.adoptedStyleSheets=[T,o.checkboxStyles],this.classList.add("opening"),this.#c?.addChangeListener(this.#b,this);const e=!0===i.Runtime.hostConfig.aidaAvailability?.blockedByAge;"loading"===this.#o.type&&!0===this.#c?.getIfNotDisabled()&&!e&&this.#o.consentOnboardingCompleted&&t.userMetrics.actionTaken(t.UserMetrics.Action.GeneratingInsightWithoutDisclaimer),t.AidaClient.HostConfigTracker.instance().addEventListener("aidaAvailabilityChanged",this.#g),this.#f(),"insight"!==this.#o.type&&"error"!==this.#o.type&&(this.#o=this.#p()),this.#k()}disconnectedCallback(){this.#c?.removeChangeListener(this.#b,this),t.AidaClient.HostConfigTracker.instance().removeEventListener("aidaAvailabilityChanged",this.#g)}async#f(){const e=await t.AidaClient.AidaClient.checkAccessPreconditions();e!==this.#d&&(this.#d=e,this.#o=this.#p(),this.#k())}#b(){!0===this.#c?.getIfNotDisabled()&&this.#y().set(!0),"setting-is-not-true"===this.#o.type&&!0===this.#c?.getIfNotDisabled()&&(this.#w({type:"loading",consentOnboardingCompleted:!0}),t.userMetrics.actionTaken(t.UserMetrics.Action.InsightsOptInTeaserConfirmedInSettings),this.#k()),"consent-reminder"===this.#o.type&&!1===this.#c?.getIfNotDisabled()&&(this.#w({type:"loading",consentOnboardingCompleted:!1}),t.userMetrics.actionTaken(t.UserMetrics.Action.InsightsReminderTeaserAbortedInSettings),this.#k())}#w(e){const t=this.#o;this.#o=e,this.#v(),e.type!==t.type&&this.#x()}async#k(){if("loading"!==this.#o.type)return;const e=!0===i.Runtime.hostConfig.aidaAvailability?.blockedByAge;if(!0!==this.#c?.getIfNotDisabled()||e)return this.#w({type:"setting-is-not-true"}),void t.userMetrics.actionTaken(t.UserMetrics.Action.InsightsOptInTeaserShown);if(!this.#o.consentOnboardingCompleted){const{sources:e,isPageReloadRecommended:s}=await this.#s.buildPrompt();return this.#w({type:"consent-reminder",sources:e,isPageReloadRecommended:s}),void t.userMetrics.actionTaken(t.UserMetrics.Action.InsightsReminderTeaserShown)}await this.#C()}#R(){"consent-reminder"===this.#o.type&&t.userMetrics.actionTaken(t.UserMetrics.Action.InsightsReminderTeaserCanceled),this.shadowRoot?.addEventListener("animationend",(()=>{this.dispatchEvent(new j)}),{once:!0}),this.classList.add("closing")}#I(e){if("insight"!==this.#o.type)throw new Error("Unexpected state");if(void 0===this.#o.metadata?.rpcGlobalId)throw new Error("RPC Id not in metadata");if(void 0!==this.#l)return;this.#l="true"===e.target.dataset.rating,this.#v(),this.#l?t.userMetrics.actionTaken(t.UserMetrics.Action.InsightRatedPositive):t.userMetrics.actionTaken(t.UserMetrics.Action.InsightRatedNegative);const s=i.Runtime.hostConfig.aidaAvailability?.disallowLogging??!0;this.#i.registerClientEvent({corresponding_aida_rpc_global_id:this.#o.metadata.rpcGlobalId,disable_user_content_logging:s,do_conversation_client_event:{user_feedback:{sentiment:this.#l?"POSITIVE":"NEGATIVE"}}})}#S(){t.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab("https://support.google.com/legal/troubleshooter/1114905?hl=en#ts=1115658%2C13380504")}#A(){const e=this.#s.getSearchQuery();t.InspectorFrontendHost.InspectorFrontendHostInstance.openSearchResultsInNewTab(e)}async#T(){this.#y().set(!0),this.#w({type:"loading",consentOnboardingCompleted:!0}),t.userMetrics.actionTaken(t.UserMetrics.Action.InsightsReminderTeaserConfirmed),await this.#C()}#$(e,s){const i=[];if(!this.#M(s)||!s.attributionMetadata)return{explanationWithCitations:e,directCitationUrls:i};const{attributionMetadata:n}=s,o=n.citations.filter((e=>e.sourceType===t.AidaClient.CitationSourceType.WORLD_FACTS)).sort(((e,t)=>(t.endIndex||0)-(e.endIndex||0)));let r=e;for(const[e,t]of o.entries()){const s=/[.,:;!?]*\s/g;s.lastIndex=t.endIndex||0;const n=s.exec(r);n&&t.uri&&(r=r.slice(0,n.index)+`[^${o.length-e}]`+r.slice(n.index),i.push(t.uri))}return i.reverse(),{explanationWithCitations:r,directCitationUrls:i}}async#C(){try{for await(const{sources:e,isPageReloadRecommended:t,explanation:s,metadata:i,completed:n}of this.#E()){const{explanationWithCitations:o,directCitationUrls:r}=this.#$(s,i),a=this.#z(o),l=!1!==a;this.#w({type:"insight",tokens:l?a:[],validMarkdown:l,explanation:s,sources:e,metadata:i,isPageReloadRecommended:t,completed:n,directCitationUrls:r})}t.userMetrics.actionTaken(t.UserMetrics.Action.InsightGenerated)}catch(e){t.userMetrics.actionTaken(t.UserMetrics.Action.InsightErrored),"doAidaConversation timed out"===e.message&&"insight"===this.#o.type?(this.#o.timedOut=!0,this.#w({...this.#o,completed:!0,timedOut:!0})):this.#w({type:"error",error:e.message})}}#z(e){try{const t=this.#h.lexer(e);for(const e of t)this.#n.renderToken(e);return t}catch{return t.userMetrics.actionTaken(t.UserMetrics.Action.InsightErroredMarkdown),!1}}async*#E(){const{prompt:e,sources:s,isPageReloadRecommended:i}=await this.#s.buildPrompt();try{for await(const n of this.#i.fetch(t.AidaClient.AidaClient.buildConsoleInsightsRequest(e)))yield{sources:s,isPageReloadRecommended:i,...n}}catch(e){throw"Server responded: permission denied"===e.message?t.userMetrics.actionTaken(t.UserMetrics.Action.InsightErroredPermissionDenied):e.message.startsWith("Cannot send request:")?t.userMetrics.actionTaken(t.UserMetrics.Action.InsightErroredCannotSend):e.message.startsWith("Request failed:")?t.userMetrics.actionTaken(t.UserMetrics.Action.InsightErroredRequestFailed):e.message.startsWith("Cannot parse chunk:")?t.userMetrics.actionTaken(t.UserMetrics.Action.InsightErroredCannotParseChunk):"Unknown chunk result"===e.message?t.userMetrics.actionTaken(t.UserMetrics.Action.InsightErroredUnknownChunk):e.message.startsWith("Server responded:")?t.userMetrics.actionTaken(t.UserMetrics.Action.InsightErroredApi):t.userMetrics.actionTaken(t.UserMetrics.Action.InsightErroredOther),e}}#L(){t.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab("https://accounts.google.com")}#x(){this.addEventListener("animationend",(()=>{this.#t.querySelector("header h2")?.focus()}),{once:!0})}#N(){return N`<devtools-button
+      @click=${this.#A}
+      class="search-button"
+      .data=${{variant:"outlined",jslogContext:"search"}}
+    >
+      ${z(M.search)}
+    </devtools-button>`}#U(){return N`<x-link href=${D} class="link" jslog=${c.link("learn-more").track({click:!0})}>
+      ${z(M.learnMore)}
+    </x-link>`}#j(){return"insight"===this.#o.type&&this.#o.directCitationUrls.length?N`
+      <ol class="sources-list">
+        ${this.#o.directCitationUrls.map(((e,t)=>N`
+          <li>
+            <x-link
+              href=${e}
+              class="link"
+              data-index=${t+1}
+              jslog=${c.link("references.console-insights").track({click:!0})}
+            >
+              ${e}
+            </x-link>
+          </li>
+        `))}
+      </ol>
+    `:l.nothing}#O(){if("insight"!==this.#o.type||!this.#o.metadata.factualityMetadata?.facts.length)return l.nothing;const e=this.#o.directCitationUrls,s=this.#o.metadata.factualityMetadata.facts.filter((t=>t.sourceUri&&!e.includes(t.sourceUri))).map((e=>e.sourceUri)),i=this.#o.metadata.attributionMetadata?.citations.filter((e=>e.sourceType===t.AidaClient.CitationSourceType.TRAINING_DATA&&(e.uri||e.repository))).map((e=>e.uri||`https://www.github.com/${e.repository}`))||[],n=[...new Set(i.filter((t=>!s.includes(t)&&!e.includes(t))))];return s.push(...n),0===s.length?l.nothing:N`
+      ${this.#o.directCitationUrls.length?N`<h3>${z(M.relatedContent)}</h3>`:l.nothing}
+      <ul class="references-list">
+        ${s.map((e=>N`
+          <li>
+            <x-link
+              href=${e}
+              class="link"
+              jslog=${c.link("references.console-insights").track({click:!0})}
+            >
+              ${e}
+            </x-link>
+          </li>
+        `))}
+      </ul>
+    `}#M(e){return Boolean(e.factualityMetadata?.facts.length)}#D(){this.#r.value&&(this.#a=this.#r.value.open)}#P(){const e=`${c.section(this.#o.type).track({resize:!0})}`,n=i.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue===i.Runtime.GenAiEnterprisePolicyValue.ALLOW_WITHOUT_LOGGING;switch(this.#o.type){case"loading":return N`<main jslog=${e}>
+            <div role="presentation" aria-label="Loading" class="loader" style="clip-path: url('#clipPath');">
+              <svg width="100%" height="64">
+                <clipPath id="clipPath">
+                  <rect x="0" y="0" width="100%" height="16" rx="8"></rect>
+                  <rect x="0" y="24" width="100%" height="16" rx="8"></rect>
+                  <rect x="0" y="48" width="100%" height="16" rx="8"></rect>
+                </clipPath>
+              </svg>
+            </div>
+          </main>`;case"insight":return N`
+        <main jslog=${e}>
+          ${this.#o.validMarkdown?N`<devtools-markdown-view
+              .data=${{tokens:this.#o.tokens,renderer:this.#n,animationEnabled:!this.disableAnimations}}>
+            </devtools-markdown-view>`:this.#o.explanation}
+          ${this.#o.timedOut?N`<p class="error-message">${z(M.timedOut)}</p>`:l.nothing}
+          ${this.#M(this.#o.metadata)?N`
+            <details class="references" ${l.Directives.ref(this.#r)} @toggle=${this.#D} jslog=${c.expand("references").track({click:!0})}>
+              <summary>${z(M.references)}</summary>
+              ${this.#j()}
+              ${this.#O()}
+            </details>
+          `:l.nothing}
+          <details jslog=${c.expand("sources").track({click:!0})}>
+            <summary>${z(M.inputData)}</summary>
+            <devtools-console-insight-sources-list .sources=${this.#o.sources} .isPageReloadRecommended=${this.#o.isPageReloadRecommended}>
+            </devtools-console-insight-sources-list>
+          </details>
+          <div class="buttons">
+            ${this.#N()}
+          </div>
+        </main>`;case"error":return N`
+        <main jslog=${e}>
+          <div class="error">${z(M.errorBody)}</div>
+        </main>`;case"consent-reminder":return N`
+          <main class="reminder-container" jslog=${e}>
+            <h3>Things to consider</h3>
+            <div class="reminder-items">
+              <div>
+                <devtools-icon .data=${{iconName:"google",width:"var(--sys-size-8)",height:"var(--sys-size-8)"}}>
+                </devtools-icon>
+              </div>
+              <div>The console message, associated stack trace, related source code, and the associated network headers are sent to Google to generate explanations.
+                ${n?"The content you submit and that is generated by this feature will not be used to improve Google’s AI models.":"This data may be seen by human reviewers to improve this feature. Avoid sharing sensitive or personal information."}
+              </div>
+              <div>
+                <devtools-icon .data=${{iconName:"policy",width:"var(--sys-size-8)",height:"var(--sys-size-8)"}}>
+                </devtools-icon>
+              </div>
+              <div>Use of this feature is subject to the
+                <x-link
+                  href=${"https://policies.google.com/terms"}
+                  class="link"
+                  jslog=${c.link("terms-of-service.console-insights").track({click:!0})}
+                >Google Terms of Service</x-link>
+                and
+                <x-link
+                  href=${"https://policies.google.com/privacy"}
+                  class="link"
+                  jslog=${c.link("privacy-policy.console-insights").track({click:!0})}
+                >Google Privacy Policy</x-link>
+              </div>
+              <div>
+                <devtools-icon .data=${{iconName:"warning",width:"var(--sys-size-8)",height:"var(--sys-size-8)"}}>
+                </devtools-icon>
+              </div>
+              <div>
+                <x-link
+                  href=${"https://support.google.com/legal/answer/13505487"}
+                  class="link"
+                  jslog=${c.link("code-snippets-explainer.console-insights").track({click:!0})}
+                >Use generated code snippets with caution</x-link>
+              </div>
+            </div>
+          </main>
+        `;case"setting-is-not-true":{const i=document.createElement("button");return i.textContent=z(M.settingsLink),i.classList.add("link"),a.ARIAUtils.markAsLink(i),i.addEventListener("click",(()=>{t.userMetrics.actionTaken(t.UserMetrics.Action.InsightsOptInTeaserSettingsLinkClicked),a.ViewManager.ViewManager.instance().showView("chrome-ai")})),i.setAttribute("jslog",`${c.action("open-ai-settings").track({click:!0})}`),N`<main class="opt-in-teaser" jslog=${e}>
+          <div class="badge">
+            <devtools-icon .data=${{iconName:"lightbulb-spark",width:"var(--sys-size-8)",height:"var(--sys-size-8)"}}>
+            </devtools-icon>
+          </div>
+          <div>
+            ${s.i18n.getFormatLocalizedString(E,M.turnOnInSettings,{PH1:i})}
+            ${this.#U()}
+          </div>
+        </main>`}case"not-logged-in":case"sync-is-paused":return N`
+          <main jslog=${e}>
+            <div class="error">${i.Runtime.hostConfig.isOffTheRecord?z(M.notAvailableInIncognitoMode):z(M.notLoggedIn)}</div>
+          </main>`;case"offline":return N`
+          <main jslog=${e}>
+            <div class="error">${z(M.offline)}</div>
+          </main>`}}#_(){const e=i.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue===i.Runtime.GenAiEnterprisePolicyValue.ALLOW_WITHOUT_LOGGING;return N`<span>
+      AI tools may generate inaccurate info that doesn't represent Google's views.
+      ${e?"The content you submit and that is generated by this feature will not be used to improve Google’s AI models.":"Data sent to Google may be seen by human reviewers to improve this feature."}
+      <button class="link" role="link" @click=${()=>a.ViewManager.ViewManager.instance().showView("chrome-ai")}
+        jslog=${c.action("open-ai-settings").track({click:!0})}
+      >Open settings</button>
+      or
+      <x-link href=${D} class="link" jslog=${c.link("learn-more").track({click:!0})}>learn more</x-link>
+    </span>`}#G(){const e=!(i.Runtime.hostConfig.aidaAvailability?.disallowLogging??1),s=this.#_();switch(this.#o.type){case"loading":case"setting-is-not-true":return l.nothing;case"error":case"offline":return N`<footer jslog=${c.section("footer")}>
+          <div class="disclaimer">
+            ${s}
+          </div>
+        </footer>`;case"not-logged-in":case"sync-is-paused":return i.Runtime.hostConfig.isOffTheRecord?l.nothing:N`<footer jslog=${c.section("footer")}>
+        <div class="filler"></div>
+        <div>
+          <devtools-button
+            @click=${this.#L}
+            .data=${{variant:"primary",jslogContext:"update-settings"}}
+          >
+            ${M.signIn}
+          </devtools-button>
+        </div>
+      </footer>`;case"consent-reminder":return N`<footer jslog=${c.section("footer")}>
+          <div class="filler"></div>
+          <div class="buttons">
+            <devtools-button
+              @click=${()=>{t.userMetrics.actionTaken(t.UserMetrics.Action.InsightsReminderTeaserSettingsLinkClicked),a.ViewManager.ViewManager.instance().showView("chrome-ai")}}
+              .data=${{variant:"tonal",jslogContext:"settings",title:"Settings"}}
+            >
+              Settings
+            </devtools-button>
+            <devtools-button
+              class='continue-button'
+              @click=${this.#T}
+              .data=${{variant:"primary",jslogContext:"continue",title:"continue"}}
+              >
+              Continue
+            </devtools-button>
+          </div>
+        </footer>`;case"insight":return N`<footer jslog=${c.section("footer")}>
+        <div class="disclaimer">
+          ${s}
+        </div>
+        <div class="filler"></div>
+        <div class="rating">
+          ${e?N`
+            <devtools-button
+              data-rating=${"true"}
+              .data=${{variant:"icon_toggle",size:"SMALL",iconName:"thumb-up",toggledIconName:"thumb-up",toggleOnClick:!1,toggleType:"primary-toggle",disabled:void 0!==this.#l,toggled:!0===this.#l,title:z(M.goodResponse),jslogContext:"thumbs-up"}}
+              @click=${this.#I}
+            ></devtools-button>
+            <devtools-button
+              data-rating=${"false"}
+              .data=${{variant:"icon_toggle",size:"SMALL",iconName:"thumb-down",toggledIconName:"thumb-down",toggleOnClick:!1,toggleType:"primary-toggle",disabled:void 0!==this.#l,toggled:!1===this.#l,title:z(M.badResponse),jslogContext:"thumbs-down"}}
+              @click=${this.#I}
+            ></devtools-button>
+          `:l.nothing}
+          <devtools-button
+            .data=${{variant:"icon",size:"SMALL",iconName:"report",title:z(M.report),jslogContext:"report"}}
+            @click=${this.#S}
+          ></devtools-button>
+        </div>
+
+      </footer>`}}#q(){switch(this.#o.type){case"not-logged-in":case"sync-is-paused":return z(M.signInToUse);case"offline":return z(M.offlineHeader);case"loading":return z(M.generating);case"insight":return z(M.insight);case"error":return z(M.error);case"consent-reminder":return"Understand console messages with AI";case"setting-is-not-true":return""}}#H(){return"insight"!==this.#o.type||this.#o.completed?l.nothing:N`<devtools-spinner></devtools-spinner>`}#W(){if("setting-is-not-true"===this.#o.type)return l.nothing;const e="consent-reminder"===this.#o.type;return N`
+      <header>
+        ${e?N`
+          <div class="header-icon-container">
+            <devtools-icon .data=${{iconName:"lightbulb-spark",width:"18px",height:"18px"}}>
+            </devtools-icon>
+          </div>`:l.nothing}
+        <div class="filler">
+          <h2 tabindex="-1">
+            ${this.#q()}
+          </h2>
+          ${this.#H()}
+        </div>
+        <div class="close-button">
+          <devtools-button
+            .data=${{variant:"icon",size:"SMALL",iconName:"cross",title:z(M.closeInsight)}}
+            jslog=${c.close().track({click:!0})}
+            @click=${this.#R}
+          ></devtools-button>
+        </div>
+      </header>
+    `}#v(){L(N`
+      <div class="wrapper" jslog=${c.pane("console-insights").track({resize:!0})}>
+        <div class="animation-wrapper">
+          ${this.#W()}
+          ${this.#P()}
+          ${this.#G()}
+        </div>
+      </div>
+    `,this.#t,{host:this}),this.#r.value&&(this.#r.value.open=this.#a)}}class G extends HTMLElement{#t=this.attachShadow({mode:"open"});#F=[];#V=!1;constructor(){super(),this.#t.adoptedStyleSheets=[$,o.checkboxStyles]}#v(){L(N`
+      <ul>
+        ${U.repeat(this.#F,(e=>e.value),(e=>N`<li><x-link class="link" title="${O(e.type)} ${z(M.opensInNewTab)}" href="data:text/plain,${encodeURIComponent(e.value)}" jslog=${c.link("source-"+e.type).track({click:!0})}>
+            <devtools-icon name="open-externally"></devtools-icon>
+            ${O(e.type)}
+          </x-link></li>`))}
+        ${this.#V?N`<li class="source-disclaimer">
+          <devtools-icon name="warning"></devtools-icon>
+          ${z(M.reloadRecommendation)}</li>`:l.nothing}
+      </ul>
+    `,this.#t,{host:this})}set sources(e){this.#F=e,this.#v()}set isPageReloadRecommended(e){this.#V=e,this.#v()}}customElements.define("devtools-console-insight",_),customElements.define("devtools-console-insight-sources-list",G);class q{handleAction(e,s){switch(s){case"explain.console-message.context":case"explain.console-message.context.error":case"explain.console-message.context.warning":case"explain.console-message.context.other":case"explain.console-message.hover":{const i=e.flavor(f.ConsoleViewMessage.ConsoleViewMessage);if(i){s.startsWith("explain.console-message.context")?t.userMetrics.actionTaken(t.UserMetrics.Action.InsightRequestedViaContextMenu):"explain.console-message.hover"===s&&t.userMetrics.actionTaken(t.UserMetrics.Action.InsightRequestedViaHoverButton);const e=new b(i),n=new t.AidaClient.AidaClient;return _.create(e,n).then((e=>{i.setInsight(e)})),!0}return!1}}return!1}}export{q as ActionDelegate,j as CloseEvent,_ as ConsoleInsight,b as PromptBuilder,y as SourceType,k as allowHeader,R as formatConsoleMessage,C as formatNetworkRequest,x as formatRelatedCode,I as formatStackTrace,w as lineWhitespace};

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

@@ -0,0 +1,14 @@
+import{render as e,html as t}from"../../../ui/lit/lit.js";import*as n from"../../../ui/visual_logging/visual_logging.js";import*as o from"../../../core/common/common.js";import*as s from"../../../core/i18n/i18n.js";import"../../../ui/components/buttons/buttons.js";import*as i from"../../../ui/legacy/legacy.js";var l={cssText:`.element-reveal-icon{display:inline-block;width:20px;height:20px;mask-image:var(--image-file-select-element);background-color:var(--icon-default)}\n/*# sourceURL=${import.meta.resolve("././elementsPanelLink.css")} */\n`};const a=new CSSStyleSheet;a.replaceSync(l.cssText);class c extends HTMLElement{#e=this.attachShadow({mode:"open"});#t=()=>{};#n=()=>{};#o=()=>{};set data(e){this.#t=e.onElementRevealIconClick,this.#n=e.onElementRevealIconMouseEnter,this.#o=e.onElementRevealIconMouseLeave,this.#s()}#s(){this.#i()}connectedCallback(){this.#e.adoptedStyleSheets=[a]}#i(){e(t`
+      <span
+        class="element-reveal-icon"
+        jslog=${n.link("elements-panel").track({click:!0})}
+        @click=${this.#t}
+        @mouseenter=${this.#n}
+        @mouseleave=${this.#o}></span>
+      `,this.#e,{host:this})}}customElements.define("devtools-elements-panel-link",c);var m=Object.freeze({__proto__:null,ElementsPanelLink:c}),r={cssText:`.hide-issues-menu-btn{position:relative;display:flex;background-color:transparent;flex:none;align-items:center;justify-content:center;padding:0;margin:0 -2px 0 4px;overflow:hidden;border-radius:0;border:none;&:hover > devtools-icon{color:var(--icon-default-hover)}}\n/*# sourceURL=${import.meta.resolve("././hideIssuesMenu.css")} */\n`};const d=new CSSStyleSheet;d.replaceSync(r.cssText);const u={tooltipTitle:"Hide issues"},h=s.i18n.registerUIStrings("panels/issues/components/HideIssuesMenu.ts",u),p=s.i18n.getLocalizedString.bind(void 0,h);class v extends HTMLElement{#e=this.attachShadow({mode:"open"});#l=o.UIString.LocalizedEmptyString;#a=()=>{};set data(e){this.#l=e.menuItemLabel,this.#a=e.menuItemAction,this.#i()}connectedCallback(){this.#e.adoptedStyleSheets=[d]}onMenuOpen(e){e.stopPropagation();const t=this.#e.querySelector("devtools-button"),n=new i.ContextMenu.ContextMenu(e,{x:t?.getBoundingClientRect().left,y:t?.getBoundingClientRect().bottom});n.headerSection().appendItem(this.#l,(()=>this.#a()),{jslogContext:"toggle-similar-issues"}),n.show()}#i(){e(t`
+    <devtools-button
+      .data=${{variant:"icon",iconName:"dots-vertical",title:p(u.tooltipTitle)}}
+      .jslogContext=${"hide-issues"}
+      class="hide-issues-menu-btn"
+      @click=${this.onMenuOpen}></devtools-button>
+    `,this.#e,{host:this})}}customElements.define("devtools-hide-issues-menu",v);var g=Object.freeze({__proto__:null,HideIssuesMenu:v});export{m as ElementsPanelLink,g as HideIssuesMenu};

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

@@ -0,0 +1 @@
+import*as e from"../../core/common/common.js";import*as s from"../../core/i18n/i18n.js";import*as i from"../../models/issues_manager/issues_manager.js";import*as a from"../../ui/legacy/legacy.js";const r={issues:"Issues",showIssues:"Show Issues"},o=s.i18n.registerUIStrings("panels/issues/issues-meta.ts",r),n=s.i18n.getLazilyComputedLocalizedString.bind(void 0,o);let t;async function u(){return t||(t=await import("./issues.js")),t}a.ViewManager.registerViewExtension({location:"drawer-view",id:"issues-pane",title:n(r.issues),commandPrompt:n(r.showIssues),order:100,persistence:"closeable",loadView:async()=>new((await u()).IssuesPane.IssuesPane)}),e.Revealer.registerRevealer({contextTypes:()=>[i.Issue.Issue],destination:e.Revealer.RevealerDestination.ISSUES_VIEW,loadRevealer:async()=>new((await u()).IssueRevealer.IssueRevealer)});