chrome-devtools-frontend 1.0.1667564 → 1.0.1668390

package/front_end/panels/application/preloading/components/preloadingDetailsReportView.css

@@ -10,21 +10,21 @@
 
 devtools-report {
   flex-grow: 1;
-}
 
-button.link {
-  color: var(--sys-color-primary);
-  text-decoration: underline;
-  padding: 0;
-  border: none;
-  background: none;
-  font-family: inherit;
-  font-size: inherit;
-  height: 16px;
-}
+  button.link {
+    color: var(--sys-color-primary);
+    text-decoration: underline;
+    padding: 0;
+    border: none;
+    background: none;
+    font-family: inherit;
+    font-size: inherit;
+    height: 16px;
+  }
 
-button.link devtools-icon {
-  vertical-align: sub;
+  button.link devtools-icon {
+    vertical-align: sub;
+  }
 }
 
 .link {

package/front_end/panels/console/ConsoleInsightTeaser.ts

@@ -420,7 +420,8 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
   #callShowTooltip = false;
   #startTime = 0;
 
-  constructor(uuid: string, consoleViewMessage: ConsoleViewMessage, element?: HTMLElement, view?: View) {
+  constructor(uuid: string, consoleViewMessage: ConsoleViewMessage, element?: HTMLElement, view?: View,
+              builtInAi: AiAssistanceModel.BuiltInAi.BuiltInAi = AiAssistanceModel.BuiltInAi.BuiltInAi.instance()) {
     super(element);
     this.#view = view ?? DEFAULT_VIEW;
     this.#uuid = uuid;
@@ -430,7 +431,7 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
     this.#boundOnAidaAvailabilityChange = this.#onAidaAvailabilityChange.bind(this);
     this.#boundOnDownloadProgressChange = this.#onDownloadProgressChange.bind(this);
     this.#boundOnSessionCreation = this.#onSessionCreation.bind(this);
-    this.#builtInAi = AiAssistanceModel.BuiltInAi.BuiltInAi.instance();
+    this.#builtInAi = builtInAi;
     this.#state = this.#builtInAi.hasSession() ? State.READY : State.NO_MODEL;
     this.#callShowTooltip = true;
     this.requestUpdate();

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);
   }
 }