chrome-devtools-frontend 1.0.1667564 → 1.0.1669021

package/front_end/panels/console/console-meta.ts

@@ -4,11 +4,21 @@
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as SettingsUI from '../../ui/settings/settings.js';
 
 import type * as Console from './console.js';
 
 const UIStrings = {
+  /**
+   * @description Title of a setting under the Console category that can be invoked through the Command Menu.
+   */
+  preserveLogUponNavigation: 'Keep log on navigation',
+  /**
+   * @description Title of a setting under the Console category that can be invoked through the Command Menu.
+   */
+  doNotPreserveLogUponNavigation: 'Don’t keep log on navigation',
   /**
    * @description Title of the Console tool.
    */
@@ -201,6 +211,9 @@ UI.ActionRegistration.registerActionExtension({
         UI.ActionRegistration.KeybindSet.DEVTOOLS_DEFAULT,
         UI.ActionRegistration.KeybindSet.VS_CODE,
       ],
+      // The Cmd+` combination is used in macOS to activate the next
+      // open window in the front app. Therefore it was not implemented
+      // below.
     },
   ],
 });
@@ -446,6 +459,21 @@ Common.Settings.registerSettingExtension({
   defaultValue: true,
 });
 
+SettingsUI.SettingUIRegistration.register(SDK.SDKSettings.preserveConsoleLogSettingDescriptor, {
+  category: Common.Settings.SettingCategory.CONSOLE,
+  title: i18nLazyString(UIStrings.preserveLogUponNavigation),
+  options: [
+    {
+      value: true,
+      title: i18nLazyString(UIStrings.preserveLogUponNavigation),
+    },
+    {
+      value: false,
+      title: i18nLazyString(UIStrings.doNotPreserveLogUponNavigation),
+    },
+  ],
+});
+
 Common.Revealer.registerRevealer({
   contextTypes() {
     return [

package/front_end/panels/elements/StylesAiCodeCompletionProvider.ts

@@ -76,7 +76,7 @@ export class StylesAiCodeCompletionProvider {
       aidaClient: this.#aidaClient,
       serverSideLoggingEnabled: !Root.Runtime.hostConfig.aidaAvailability?.disallowLogging,
     },
-                                                                                    this.#aiCodeCompletionConfig.panel,
+
                                                                                     undefined, stopSequences);
     this.#aiCodeCompletionConfig.onFeatureEnabled();
   }

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -300,7 +300,8 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
         onSuggestionAccepted: this.#onAiCodeCompletionSuggestionAccepted.bind(this),
         onRequestTriggered: this.#onAiCodeCompletionRequestTriggered.bind(this),
         onResponseReceived: this.#onAiCodeCompletionResponseReceived.bind(this),
-        panel: AiCodeCompletion.AiCodeCompletion.ContextFlavor.STYLES,
+        disclaimerTooltipId: DISCLAIMER_TOOLTIP_ID,
+        disclaimerTextVariant: 'styles',
       };
       this.aiCodeCompletionProvider =
           StylesAiCodeCompletionProvider.StylesAiCodeCompletionProvider.createInstance(this.aiCodeCompletionConfig);
@@ -1618,7 +1619,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
           citationsTooltipId: CITATIONS_TOOLTIP_ID,
           disclaimerTooltipId: DISCLAIMER_TOOLTIP_ID,
           spinnerTooltipId: SPINNER_TOOLTIP_ID,
-          panel: AiCodeCompletion.AiCodeCompletion.ContextFlavor.STYLES,
+          disclaimerTextVariant: 'styles',
         });
     const containingPane = this.contentElement.enclosingNodeOrSelfWithClass('style-panes-wrapper') as HTMLElement;
     this.#aiCodeCompletionSummaryToolbarContainer =

package/front_end/panels/emulation/DeviceModeToolbar.ts

@@ -512,8 +512,8 @@ export class DeviceModeToolbar extends UI.Widget.Widget {
     super.wasShown();
     // TODO(crbug.com/407750803): Revisit once DeviceModeView is migrated.
     this.performUpdate();  // Trigger a manual update eagerly, DeviceModeView needs to measure our height.
+    this.restore();
   }
-
   override performUpdate(): void {
     if (!this.model) {
       return;
@@ -1078,7 +1078,7 @@ export class DeviceModeToolbar extends UI.Widget.Widget {
     return !this.model ? '' : `${(this.model.scale() * 100).toFixed(0)}`;
   }
 
-  restore(): void {
+  private restore(): void {
     if (!this.model) {
       return;
     }

package/front_end/panels/emulation/DeviceModeView.ts

@@ -1,15 +1,16 @@
 // Copyright 2015 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-imperative-dom-api */
 
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
+import * as TextUtils from '../../core/text_utils/text_utils.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as EmulationModel from '../../models/emulation/emulation.js';
 import * as Geometry from '../../models/geometry/geometry.js';
+import * as Workspace from '../../models/workspace/workspace.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {Directives, html, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -60,16 +61,6 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/emulation/DeviceModeView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export interface DeviceModeViewRefs {
-  toolbar: DeviceModeToolbar;
-  bottomRightResizerElement: HTMLElement;
-  bottomLeftResizerElement: HTMLElement;
-  rightResizerElement: HTMLElement;
-  leftResizerElement: HTMLElement;
-  bottomResizerElement: HTMLElement;
-  pageArea: HTMLElement;
-}
-
 export interface DeviceModeViewInput {
   model: EmulationModel.DeviceModeModel.DeviceModeModel;
   showMediaInspectorSetting: Common.Settings.Setting<boolean>;
@@ -78,10 +69,12 @@ export interface DeviceModeViewInput {
   outlineImageLoaded: boolean;
   screenImage: string;
   screenImageLoaded: boolean;
+  resizable: boolean;
   showRulers: boolean;
   showMediaInspector: boolean;
   scale: number;
   cachedCssScreenRect?: EmulationModel.DeviceModeModel.Rect;
+  cachedCssVisiblePageRect?: EmulationModel.DeviceModeModel.Rect;
   cachedOutlineRect?: EmulationModel.DeviceModeModel.Rect;
   onApplyPresetSize: (size: number, e: Event) => void;
   bottomRightResizer: UI.ResizerWidget.ResizerWidget;
@@ -101,7 +94,7 @@ export interface DeviceModeViewInput {
 
 export type DeviceModeViewView = (
     input: DeviceModeViewInput,
-    output: DeviceModeViewRefs,
+    output: undefined,
     target: HTMLElement,
     ) => void;
 
@@ -130,7 +123,7 @@ function resizerRef(
 
 export const DEFAULT_DEVICE_MODE_VIEW: DeviceModeViewView = (
     input: DeviceModeViewInput,
-    output: DeviceModeViewRefs,
+    _output: undefined,
     target: HTMLElement,
     ): void => {
   const sizes = [320, 375, 425, 768, 1024, 1440, 2560];
@@ -145,8 +138,7 @@ export const DEFAULT_DEVICE_MODE_VIEW: DeviceModeViewView = (
   ];
   // clang-format off
   render(html`
-    <devtools-widget ${UI.Widget.widget(DeviceModeToolbar, {model: input.model})}
-       ${UI.Widget.widgetRef(DeviceModeToolbar, t => { output.toolbar = t; })}></devtools-widget>
+    ${UI.Widget.widget(DeviceModeToolbar, {model: input.model})}
     <div class=${classMap({
       'device-mode-content-clip': true,
       vbox: true,
@@ -199,33 +191,44 @@ export const DEFAULT_DEVICE_MODE_VIEW: DeviceModeViewView = (
                @load=${(): void => input.onScreenImageLoaded(true)}
                @error=${(): void => input.onScreenImageLoaded(false)}>
           <div class="device-mode-resizer device-mode-bottom-right-resizer"
+               ?hidden=${!input.resizable}
                jslog=${VisualLogging.slider('device-mode-resizer').track({drag: true})}
                ${ref(input.bottomRightResizerRef)}>
             <div></div>
           </div>
           <div class="device-mode-resizer device-mode-bottom-left-resizer"
+               ?hidden=${!input.resizable}
                jslog=${VisualLogging.slider('device-mode-resizer').track({drag: true})}
                ${ref(input.bottomLeftResizerRef)}>
             <div></div>
           </div>
           <div class="device-mode-resizer device-mode-right-resizer"
+               ?hidden=${!input.resizable}
                jslog=${VisualLogging.slider('device-mode-resizer').track({drag: true})}
                ${ref(input.rightResizerRef)}>
             <div></div>
           </div>
           <div class="device-mode-resizer device-mode-left-resizer"
+               ?hidden=${!input.resizable}
                jslog=${VisualLogging.slider('device-mode-resizer').track({drag: true})}
                ${ref(input.leftResizerRef)}>
             <div></div>
           </div>
           <div class="device-mode-resizer device-mode-bottom-resizer"
+               ?hidden=${!input.resizable}
                jslog=${VisualLogging.slider('device-mode-resizer').track({drag: true})}
                title=${i18nString(UIStrings.doubleclickForFullHeight)}
                ${ref(input.bottomResizerRef)}
                @dblclick=${input.onDoubleclickBottomResizer}>
             <div></div>
           </div>
-          <div class="device-mode-page-area" ${ref((el?: Element) => { if (el instanceof HTMLElement) { output.pageArea = el; } })}><slot></slot></div>
+          <div class="device-mode-page-area"
+               style=${styleMap(input.cachedCssVisiblePageRect ? {
+                 left: `${input.cachedCssVisiblePageRect.left}px`,
+                 top: `${input.cachedCssVisiblePageRect.top}px`,
+                 width: `${input.cachedCssVisiblePageRect.width}px`,
+                 height: `${input.cachedCssVisiblePageRect.height}px`,
+               } : {})}><slot></slot></div>
         </div>
         ${input.showRulers ? html`
           <devtools-widget class="device-mode-ruler-top device-mode-ruler"
@@ -247,7 +250,11 @@ export const DEFAULT_DEVICE_MODE_VIEW: DeviceModeViewView = (
         ` : nothing}
       </div>
     </div>
-  `, target);
+  `, target, {
+    container: {
+      classes: ['device-mode-view'],
+    },
+  });
   // clang-format on
 };
 
@@ -256,34 +263,16 @@ export class DeviceModeView extends UI.Widget.VBox {
   private model: EmulationModel.DeviceModeModel.DeviceModeModel;
   private showMediaInspectorSetting: Common.Settings.Setting<boolean>;
   private showRulersSetting: Common.Settings.Setting<boolean>;
-  pageArea!: HTMLElement;
-  rightResizerElement!: HTMLElement;
-  leftResizerElement!: HTMLElement;
-  bottomResizerElement!: HTMLElement;
-  bottomRightResizerElement!: HTMLElement;
-  bottomLeftResizerElement!: HTMLElement;
   private readonly bottomRightResizer = this.createResizer(2, 1);
   private readonly bottomLeftResizer = this.createResizer(-2, 1);
   private readonly rightResizer = this.createResizer(2, 0);
   private readonly leftResizer = this.createResizer(-2, 0);
   private readonly bottomResizer = this.createResizer(0, 1);
-  private readonly bottomRightResizerRef = resizerRef(this.bottomRightResizer, el => {
-    this.bottomRightResizerElement = el;
-  });
-  private readonly bottomLeftResizerRef = resizerRef(this.bottomLeftResizer, el => {
-    this.bottomLeftResizerElement = el;
-  });
-  private readonly rightResizerRef = resizerRef(this.rightResizer, el => {
-    this.rightResizerElement = el;
-  });
-  private readonly leftResizerRef = resizerRef(this.leftResizer, el => {
-    this.leftResizerElement = el;
-  });
-  private readonly bottomResizerRef = resizerRef(this.bottomResizer, el => {
-    this.bottomResizerElement = el;
-  });
-  private cachedResizable!: boolean|undefined;
-  toolbar!: DeviceModeToolbar;
+  private readonly bottomRightResizerRef = resizerRef(this.bottomRightResizer);
+  private readonly bottomLeftResizerRef = resizerRef(this.bottomLeftResizer);
+  private readonly rightResizerRef = resizerRef(this.rightResizer);
+  private readonly leftResizerRef = resizerRef(this.leftResizer);
+  private readonly bottomResizerRef = resizerRef(this.bottomResizer);
   private slowPositionStart?: {
     x: number,
     y: number,
@@ -295,8 +284,6 @@ export class DeviceModeView extends UI.Widget.VBox {
   private cachedMediaInspectorVisible?: boolean;
   private cachedShowRulers?: boolean;
   private cachedScale?: number;
-  private handleWidth?: number;
-  private handleHeight?: number;
   #outlineImageLoaded = false;
   #lastOutlineImageSrc?: string;
   #screenImageLoaded = false;
@@ -308,7 +295,6 @@ export class DeviceModeView extends UI.Widget.VBox {
     this.#view = view;
 
     this.setMinimumSize(150, 150);
-    this.element.classList.add('device-mode-view');
     this.registerRequiredCSS(deviceModeViewStyles);
 
     this.model = EmulationModel.DeviceModeModel.DeviceModeModel.instance();
@@ -339,11 +325,13 @@ export class DeviceModeView extends UI.Widget.VBox {
       outlineImageLoaded: this.#outlineImageLoaded,
       screenImage: this.model.screenImage(),
       screenImageLoaded: this.#screenImageLoaded,
+      resizable: this.model.type() === EmulationModel.DeviceModeModel.Type.Responsive,
       showRulers: this.showRulersSetting.get() && this.model.type() !== EmulationModel.DeviceModeModel.Type.None,
       showMediaInspector:
           this.showMediaInspectorSetting.get() && this.model.type() !== EmulationModel.DeviceModeModel.Type.None,
       scale: this.model.scale(),
       cachedCssScreenRect: this.cachedCssScreenRect,
+      cachedCssVisiblePageRect: this.cachedCssVisiblePageRect,
       cachedOutlineRect: this.cachedOutlineRect,
       onApplyPresetSize: (width: number, e: Event): void => {
         this.model.emulate(EmulationModel.DeviceModeModel.Type.Responsive, null, null);
@@ -364,7 +352,7 @@ export class DeviceModeView extends UI.Widget.VBox {
       onOutlineImageLoaded: (success: boolean): void => this.onOutlineImageLoaded(success),
       onScreenImageLoaded: (success: boolean): void => this.onScreenImageLoaded(success),
     };
-    this.#view(input, this, this.contentElement);
+    this.#view(input, undefined, this.contentElement);
   }
 
   private onOutlineImageLoaded(success: boolean): void {
@@ -380,6 +368,7 @@ export class DeviceModeView extends UI.Widget.VBox {
       this.requestUpdate();
     }
   }
+
   private createResizer(widthFactor: number, heightFactor: number): UI.ResizerWidget.ResizerWidget {
     const resizer = new UI.ResizerWidget.ResizerWidget();
     let cursor: 'nwse-resize'|'nesw-resize'|('ew-resize' | 'ns-resize') = widthFactor ? 'ew-resize' : 'ns-resize';
@@ -450,13 +439,6 @@ export class DeviceModeView extends UI.Widget.VBox {
   }
 
   private updateUI(): void {
-    function applyRect(element: HTMLElement, rect: EmulationModel.DeviceModeModel.Rect): void {
-      element.style.left = rect.left + 'px';
-      element.style.top = rect.top + 'px';
-      element.style.width = rect.width + 'px';
-      element.style.height = rect.height + 'px';
-    }
-
     if (!this.isShowing()) {
       return;
     }
@@ -474,7 +456,6 @@ export class DeviceModeView extends UI.Widget.VBox {
 
     const cssVisiblePageRect = this.model.visiblePageRect().scale(1 / zoomFactor);
     if (!this.cachedCssVisiblePageRect || !cssVisiblePageRect.isEqual(this.cachedCssVisiblePageRect)) {
-      applyRect(this.pageArea, cssVisiblePageRect);
       callDoResize = true;
       this.cachedCssVisiblePageRect = cssVisiblePageRect;
     }
@@ -488,16 +469,6 @@ export class DeviceModeView extends UI.Widget.VBox {
       }
     }
 
-    const resizable = this.model.type() === EmulationModel.DeviceModeModel.Type.Responsive;
-    if (resizable !== this.cachedResizable) {
-      this.rightResizerElement.classList.toggle('hidden', !resizable);
-      this.leftResizerElement.classList.toggle('hidden', !resizable);
-      this.bottomResizerElement.classList.toggle('hidden', !resizable);
-      this.bottomRightResizerElement.classList.toggle('hidden', !resizable);
-      this.bottomLeftResizerElement.classList.toggle('hidden', !resizable);
-      this.cachedResizable = resizable;
-    }
-
     const mediaInspectorVisible =
         this.showMediaInspectorSetting.get() && this.model.type() !== EmulationModel.DeviceModeModel.Type.None;
     if (mediaInspectorVisible !== this.cachedMediaInspectorVisible) {
@@ -518,7 +489,6 @@ export class DeviceModeView extends UI.Widget.VBox {
     }
 
     this.requestUpdate();
-    this.toolbar.requestUpdate();
     if (callDoResize) {
       this.doResize();
     }
@@ -545,29 +515,18 @@ export class DeviceModeView extends UI.Widget.VBox {
     }
     const zoomFactor = UI.ZoomManager.ZoomManager.instance().zoomFactor();
     const rect = contentArea.getBoundingClientRect();
+    const handleWidth = this.contentElement.querySelector<HTMLElement>('.device-mode-right-resizer')?.offsetWidth || 20;
+    const handleHeight =
+        this.contentElement.querySelector<HTMLElement>('.device-mode-bottom-resizer')?.offsetHeight || 20;
     const availableSize =
         new Geometry.Size(Math.max(rect.width * zoomFactor, 1), Math.max(rect.height * zoomFactor, 1));
-    const preferredSize = new Geometry.Size(
-        Math.max((rect.width - 2 * (this.handleWidth || 0)) * zoomFactor, 1),
-        Math.max((rect.height - (this.handleHeight || 0)) * zoomFactor, 1));
+    const preferredSize = new Geometry.Size(Math.max((rect.width - 2 * handleWidth) * zoomFactor, 1),
+                                            Math.max((rect.height - handleHeight) * zoomFactor, 1));
     this.model.setAvailableSize(availableSize, preferredSize);
   }
 
-  private measureHandles(): void {
-    const hidden = this.rightResizerElement.classList.contains('hidden');
-    this.rightResizerElement.classList.toggle('hidden', false);
-    this.bottomResizerElement.classList.toggle('hidden', false);
-    this.handleWidth = this.rightResizerElement.offsetWidth;
-    this.handleHeight = this.bottomResizerElement.offsetHeight;
-    this.rightResizerElement.classList.toggle('hidden', hidden);
-    this.bottomResizerElement.classList.toggle('hidden', hidden);
-  }
-
   private zoomChanged(): void {
-    delete this.handleWidth;
-    delete this.handleHeight;
     if (this.isShowing()) {
-      this.measureHandles();
       this.contentAreaResized();
     }
   }
@@ -580,8 +539,6 @@ export class DeviceModeView extends UI.Widget.VBox {
 
   override wasShown(): void {
     super.wasShown();
-    this.measureHandles();
-    this.toolbar.restore();
   }
 
   override willHide(): void {
@@ -609,11 +566,10 @@ export class DeviceModeView extends UI.Widget.VBox {
       const contentLeft = screenRect.left + visiblePageRect.left - outlineRect.left;
       const contentTop = screenRect.top + visiblePageRect.top - outlineRect.top;
 
-      const canvas = document.createElement('canvas');
-      canvas.width = Math.floor(outlineRect.width);
-      // Cap the height to not hit the GPU limit.
-      // https://crbug.com/1260828
-      canvas.height = Math.min((1 << 14), Math.floor(outlineRect.height));
+      const canvas = new OffscreenCanvas(Math.floor(outlineRect.width),
+                                         // Cap the height to not hit the GPU limit.
+                                         // https://crbug.com/1260828
+                                         Math.min((1 << 14), Math.floor(outlineRect.height)));
       const ctx = canvas.getContext('2d', {willReadFrequently: true});
       if (!ctx) {
         throw new Error('Could not get 2d context from canvas.');
@@ -627,7 +583,7 @@ export class DeviceModeView extends UI.Widget.VBox {
         await this.paintImage(ctx, this.model.screenImage(), screenRect.relativeTo(outlineRect));
       }
       ctx.drawImage(pageImage, Math.floor(contentLeft), Math.floor(contentTop));
-      this.saveScreenshot((canvas));
+      void this.saveScreenshot(canvas);
     };
   }
 
@@ -651,23 +607,22 @@ export class DeviceModeView extends UI.Widget.VBox {
     const pageImage = new Image();
     pageImage.src = 'data:image/png;base64,' + screenshot;
     pageImage.onload = () => {
-      const canvas = document.createElement('canvas');
-      canvas.width = pageImage.naturalWidth;
-      // Cap the height to not hit the GPU limit.
-      // https://crbug.com/1260828
-      canvas.height = Math.min((1 << 14), Math.floor(pageImage.naturalHeight));
+      const canvas = new OffscreenCanvas(pageImage.naturalWidth,
+                                         // Cap the height to not hit the GPU limit.
+                                         // https://crbug.com/1260828
+                                         Math.min((1 << 14), Math.floor(pageImage.naturalHeight)));
       const ctx = canvas.getContext('2d', {willReadFrequently: true});
       if (!ctx) {
         throw new Error('Could not get 2d context for base64 screenshot.');
       }
       ctx.imageSmoothingEnabled = false;
       ctx.drawImage(pageImage, 0, 0);
-      this.saveScreenshot((canvas));
+      void this.saveScreenshot(canvas);
     };
   }
 
-  private paintImage(ctx: CanvasRenderingContext2D, src: string, rect: EmulationModel.DeviceModeModel.Rect):
-      Promise<void> {
+  private paintImage(ctx: OffscreenCanvasRenderingContext2D|CanvasRenderingContext2D, src: string,
+                     rect: EmulationModel.DeviceModeModel.Rect): Promise<void> {
     return new Promise(resolve => {
       const image = new Image();
       image.crossOrigin = 'Anonymous';
@@ -680,7 +635,7 @@ export class DeviceModeView extends UI.Widget.VBox {
     });
   }
 
-  private saveScreenshot(canvas: HTMLCanvasElement): void {
+  private async saveScreenshot(canvas: OffscreenCanvas): Promise<void> {
     const url = this.model.inspectedURL();
     let fileName = '';
     if (url) {
@@ -692,15 +647,19 @@ export class DeviceModeView extends UI.Widget.VBox {
     if (device && this.model.type() === EmulationModel.DeviceModeModel.Type.Device) {
       fileName += `(${device.title})`;
     }
-    const link = document.createElement('a');
-    link.download = fileName + '.png';
-    canvas.toBlob(blob => {
-      if (blob === null) {
-        return;
-      }
-      link.href = URL.createObjectURL(blob);
-      link.click();
+    fileName += '.png';
+    const blob = await canvas.convertToBlob({type: 'image/png'});
+    const dataUrl = await new Promise<string>((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onloadend = () => resolve(reader.result as string);
+      reader.onerror = reject;
+      reader.readAsDataURL(blob);
     });
+    const base64 = dataUrl.slice(dataUrl.indexOf(',') + 1);
+    const contentData = new TextUtils.ContentData.ContentData(base64, /* isBase64=*/ true, 'image/png');
+    await Workspace.FileManager.FileManager.instance().save(fileName as Platform.DevToolsPath.RawPathString,
+                                                            contentData, /* forceSaveAs=*/ true);
+    Workspace.FileManager.FileManager.instance().close(fileName as Platform.DevToolsPath.RawPathString);
   }
 }
 

package/front_end/panels/emulation/DeviceModeWrapper.ts

@@ -138,6 +138,8 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
             throw new Error(`Unable to get box model of the node: ${new Error().stack}`);
           }
           const nodeBorderQuad = nodeBoxModel.border;
+          // Calculate the rendered bounding box from the border quad to account for CSS scaling and transforms (e.g. zoom or transform: scale).
+          const {minX, maxX, minY, maxY} = getQuadBoundingBox(nodeBorderQuad);
 
           // Get Layout Metrics to account for the Visual Viewport scroll and zoom.
           const metrics = await node.domModel().target().pageAgent().invoke_getLayoutMetrics();
@@ -155,10 +157,10 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
           // Assemble the final Clip.
           // The absolute coordinates are: Global (OOPiF) + Viewport Scroll + Local Node Position (Border Box).
           const clip = {
-            x: oopifOffsetX + scrollX + nodeBorderQuad[0],
-            y: oopifOffsetY + scrollY + nodeBorderQuad[1],
-            width: nodeBoxModel.width,
-            height: nodeBoxModel.height,
+            x: oopifOffsetX + scrollX + minX,
+            y: oopifOffsetY + scrollY + minY,
+            width: maxX - minX,
+            height: maxY - minY,
             scale: 1,
           };
 
@@ -249,3 +251,15 @@ async function getOopifOffset(target: SDK.Target.Target|null): Promise<{x: numbe
     y: iframeContentY + scrollY + parentOffset.y,
   };
 }
+
+/**
+ * Calculate the axis-aligned bounding box for a Quad [x1, y1, x2, y2, x3, y3, x4, y4].
+ * This accounts for CSS scaling and transforms (e.g. zoom, transform: scale).
+ */
+function getQuadBoundingBox(quad: Protocol.DOM.Quad): {minX: number, maxX: number, minY: number, maxY: number} {
+  const minX = Math.min(quad[0], quad[2], quad[4], quad[6]);
+  const maxX = Math.max(quad[0], quad[2], quad[4], quad[6]);
+  const minY = Math.min(quad[1], quad[3], quad[5], quad[7]);
+  const maxY = Math.max(quad[1], quad[3], quad[5], quad[7]);
+  return {minX, maxX, minY, maxY};
+}

package/front_end/panels/explain/components/ConsoleInsight.ts

@@ -10,6 +10,7 @@ import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as Platform from '../../../core/platform/platform.js';
 import * as Root from '../../../core/root/root.js';
+import * as AiAssistanceModel from '../../../models/ai_assistance/ai_assistance.js';
 import * as Marked from '../../../third_party/marked/marked.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as Input from '../../../ui/components/input/input.js';
@@ -861,12 +862,9 @@ export class ConsoleInsight extends UI.Widget.Widget {
   // off -> entrypoints are shown, and point to the AI setting panel where the setting can be turned on
   // on -> entrypoints are shown, and console insights can be generated
   #getConsoleInsightsEnabledSetting(): Common.Settings.Setting<boolean>|undefined {
-    try {
-      return Common.Settings.Settings.instance().moduleSetting('console-insights-enabled') as
-          Common.Settings.Setting<boolean>;
-    } catch {
-      return;
-    }
+    const result = Common.Settings.Settings.instance().maybeResolve(
+        AiAssistanceModel.AiUtils.consoleInsightsEnabledSettingDescriptor);
+    return 'setting' in result ? (result.setting as Common.Settings.Setting<boolean>) : undefined;
   }
 
   // off -> consent reminder is shown, unless the 'console-insights-enabled'-setting has been enabled in the current DevTools session

package/front_end/panels/explain/explain-meta.ts

@@ -4,10 +4,11 @@
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
-import type * as Platform from '../../core/platform/platform.js';
 import type * as Root from '../../core/root/root.js';
+import * as AiAssistanceModel from '../../models/ai_assistance/ai_assistance.js';
 import * as Console from '../../panels/console/console.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as SettingUIRegistration from '../../ui/settings/settings.js';
 
 const UIStrings = {
   /**
@@ -27,27 +28,9 @@ const UIStrings = {
    * the settings tab.
    */
   enableConsoleInsights: 'Understand console messages with AI',
-  /**
-   * @description Message shown to the user if the DevTools locale is not
-   * supported.
-   */
-  wrongLocale: 'To use this feature, set your language preference to English in DevTools settings.',
-  /**
-   * @description Message shown to the user if the user's region is not
-   * supported.
-   */
-  geoRestricted: 'This feature is unavailable in your region.',
-  /**
-   * @description Message shown to the user if the enterprise policy does
-   * not allow this feature.
-   */
-  policyRestricted: 'This setting is managed by your administrator.',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/explain/explain-meta.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
-const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-
-const setting = 'console-insights-enabled';
 
 const actions = [
   {
@@ -92,11 +75,6 @@ const actions = [
   },
 ];
 
-function isLocaleRestricted(): boolean {
-  const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();
-  return !devtoolsLocale.locale.startsWith('en-');
-}
-
 function isGeoRestricted(config?: Root.Runtime.HostConfig): boolean {
   return config?.aidaAvailability?.blockedByGeo === true;
 }
@@ -109,31 +87,11 @@ function isFeatureEnabled(config?: Root.Runtime.HostConfig): boolean {
   return (config?.aidaAvailability?.enabled && config?.devToolsConsoleInsights?.enabled) === true;
 }
 
-Common.Settings.registerSettingExtension({
-  category: Common.Settings.SettingCategory.AI,
-  settingName: setting,
-  settingType: Common.Settings.SettingType.BOOLEAN,
-  title: i18nLazyString(UIStrings.enableConsoleInsights),
-  defaultValue: false,
-  reloadRequired: false,
-  condition: config => isFeatureEnabled(config),
-  disabledCondition: config => {
-    const reasons: Platform.UIString.LocalizedString[] = [];
-    if (isGeoRestricted(config)) {
-      reasons.push(i18nString(UIStrings.geoRestricted));
-    }
-    if (isPolicyRestricted(config)) {
-      reasons.push(i18nString(UIStrings.policyRestricted));
-    }
-    if (isLocaleRestricted()) {
-      reasons.push(i18nString(UIStrings.wrongLocale));
-    }
-    if (reasons.length > 0) {
-      return {disabled: true, reasons};
-    }
-    return {disabled: false};
-  },
-});
+SettingUIRegistration.SettingUIRegistration.register(AiAssistanceModel.AiUtils.consoleInsightsEnabledSettingDescriptor,
+                                                     {
+                                                       category: Common.Settings.SettingCategory.AI,
+                                                       title: i18nLazyString(UIStrings.enableConsoleInsights),
+                                                     });
 
 for (const action of actions) {
   UI.ActionRegistration.registerActionExtension({

package/front_end/panels/network/NetworkDataGridNode.ts

@@ -378,7 +378,7 @@ export interface RequestActivatedEvent {
 }
 
 export interface EventTypes {
-  [Events.RequestSelected]: SDK.NetworkRequest.NetworkRequest;
+  [Events.RequestSelected]: SDK.NetworkRequest.NetworkRequest|null;
   [Events.RequestActivated]: RequestActivatedEvent;
 }