chrome-devtools-frontend 1.0.963960 → 1.0.965611

package/front_end/panels/application/components/InterestGroupAccessGrid.ts

@@ -0,0 +1,149 @@
+// Copyright 2022 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as i18n from '../../../core/i18n/i18n.js';
+import * as DataGrid from '../../../ui/components/data_grid/data_grid.js';
+import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
+import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
+import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+import type * as Protocol from '../../../generated/protocol.js';
+
+import interestGroupAccessGridStyles from './interestGroupAccessGrid.css.js';
+
+const UIStrings = {
+  /**
+  *@description Hover text for an info icon in the Interest Group Event panel
+  */
+  allInterestGroupStorageEvents: 'All interest group storage events.',
+  /**
+    *@description Text in InterestGroupStorage Items View of the Application panel
+    */
+  eventTime: 'Event Time',
+  /**
+  *@description Text in InterestGroupStorage Items View of the Application panel
+  */
+  eventType: 'Access Type',
+  /**
+   *@description Text in InterestGroupStorage Items View of the Application panel
+  */
+  groupOwner: 'Owner',
+  /**
+   *@description Text in InterestGroupStorage Items View of the Application panel
+  */
+  groupName: 'Name',
+};
+const str_ = i18n.i18n.registerUIStrings('panels/application/components/InterestGroupAccessGrid.ts', UIStrings);
+export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export class InterestGroupAccessGrid extends HTMLElement {
+  static readonly litTagName = LitHtml.literal`devtools-interest-group-access-grid`;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #datastores: Array<Protocol.Storage.InterestGroupAccessedEvent> = [];
+
+  connectedCallback(): void {
+    this.#shadow.adoptedStyleSheets = [interestGroupAccessGridStyles];
+    this.#render();
+  }
+
+  set data(data: Array<Protocol.Storage.InterestGroupAccessedEvent>) {
+    this.#datastores = data;
+    this.#render();
+  }
+
+  #render(): void {
+    // clang-format off
+    LitHtml.render(LitHtml.html`
+      <div>
+        <span class="heading">Interest Groups</span>
+        <${IconButton.Icon.Icon.litTagName} class="info-icon" title=${
+            i18nString(UIStrings.allInterestGroupStorageEvents)}
+          .data=${
+            {iconName: 'ic_info_black_18dp', color: 'var(--color-link)', width: '14px'} as
+            IconButton.Icon.IconWithName}>
+        </${IconButton.Icon.Icon.litTagName}>
+        ${this.#renderGrid()}
+      </div>
+    `, this.#shadow, {host: this});
+    // clang-format on
+  }
+
+  #renderGrid(): LitHtml.TemplateResult {
+    const gridData: DataGrid.DataGridController.DataGridControllerData = {
+      columns: [
+        {
+          id: 'event-time',
+          title: i18nString(UIStrings.eventTime),
+          widthWeighting: 10,
+          hideable: false,
+          visible: true,
+          sortable: true,
+        },
+        {
+          id: 'event-type',
+          title: i18nString(UIStrings.eventType),
+          widthWeighting: 5,
+          hideable: false,
+          visible: true,
+          sortable: true,
+        },
+        {
+          id: 'event-group-owner',
+          title: i18nString(UIStrings.groupOwner),
+          widthWeighting: 10,
+          hideable: false,
+          visible: true,
+          sortable: true,
+        },
+        {
+          id: 'event-group-name',
+          title: i18nString(UIStrings.groupName),
+          widthWeighting: 10,
+          hideable: false,
+          visible: true,
+          sortable: true,
+        },
+      ],
+      rows: this.#buildRows(),
+      initialSort: {
+        columnId: 'event-time',
+        direction: DataGrid.DataGridUtils.SortDirection.ASC,
+      },
+    };
+
+    return LitHtml.html`
+      <${DataGrid.DataGridController.DataGridController.litTagName} .data=${
+        gridData as DataGrid.DataGridController.DataGridControllerData}></${
+        DataGrid.DataGridController.DataGridController.litTagName}>
+    `;
+  }
+
+  #buildRows(): DataGrid.DataGridUtils.Row[] {
+    return this.#datastores.map(event => ({
+                                  cells: [
+                                    {
+                                      columnId: 'event-time',
+                                      value: event.accessTime,
+                                      renderer: this.#renderDateForDataGridCell.bind(this),
+                                    },
+                                    {columnId: 'event-type', value: event.type},
+                                    {columnId: 'event-group-owner', value: event.ownerOrigin},
+                                    {columnId: 'event-group-name', value: event.name},
+                                  ],
+                                }));
+  }
+
+  #renderDateForDataGridCell(value: DataGrid.DataGridUtils.CellValue): LitHtml.TemplateResult {
+    const date = new Date(1e3 * (value as number));
+    return LitHtml.html`${date.toLocaleString()}`;
+  }
+}
+
+ComponentHelpers.CustomElements.defineComponent('devtools-interest-group-access-grid', InterestGroupAccessGrid);
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface HTMLElementTagNameMap {
+    'devtools-interest-group-access-grid': InterestGroupAccessGrid;
+  }
+}

package/front_end/panels/application/components/components.ts

@@ -5,6 +5,7 @@
 import * as BackForwardCacheView from './BackForwardCacheView.js';
 import * as EndpointsGrid from './EndpointsGrid.js';
 import * as FrameDetailsView from './FrameDetailsView.js';
+import * as InterestGroupAccessGrid from './InterestGroupAccessGrid.js';
 import * as OriginTrialTreeView from './OriginTrialTreeView.js';
 import * as ReportsGrid from './ReportsGrid.js';
 import * as StackTrace from './StackTrace.js';
@@ -14,6 +15,7 @@ export {
   BackForwardCacheView,
   EndpointsGrid,
   FrameDetailsView,
+  InterestGroupAccessGrid,
   OriginTrialTreeView,
   ReportsGrid,
   StackTrace,

package/front_end/panels/application/components/interestGroupAccessGrid.css

@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2021 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+:host {
+  padding: 20px;
+}
+
+.heading {
+  font-size: 15px;
+}
+
+devtools-data-grid-controller {
+  border: 1px solid var(--color-details-hairline);
+  margin-top: 20px;
+}
+
+.info-icon {
+  vertical-align: text-bottom;
+  height: 14px;
+}
+
+.no-tt-message {
+  margin-top: 20px;
+}

package/front_end/panels/application/interestGroupStorageView.css

@@ -0,0 +1,13 @@
+/*
+ * Copyright 2021 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+.placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  color: var(--color-text-secondary);
+}

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -56,7 +56,7 @@ import type {Chrome} from '../../../extension-api/ExtensionAPI.js'; // eslint-di
 import {format} from './ConsoleFormat.js';
 import type {ConsoleViewportElement} from './ConsoleViewport.js';
 import consoleViewStyles from './consoleView.css.js';
-import {parseSourcePositionsFromErrorStack} from './ErrorStackParser.js';
+import {augmentErrorStackWithScriptIds, parseSourcePositionsFromErrorStack} from './ErrorStackParser.js';
 
 const UIStrings = {
   /**
@@ -236,6 +236,9 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
   private requestResolver: Logs.RequestResolver.RequestResolver;
   private issueResolver: IssuesManager.IssueResolver.IssueResolver;
 
+  /** Formatting Error#stack is asynchronous. Allow tests to wait for the result */
+  #formatErrorStackPromiseForTest = Promise.resolve();
+
   constructor(
       consoleMessage: SDK.ConsoleModel.ConsoleMessage, linkifier: Components.Linkifier.Linkifier,
       requestResolver: Logs.RequestResolver.RequestResolver, issueResolver: IssuesManager.IssueResolver.IssueResolver,
@@ -307,6 +310,10 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     return this.message;
   }
 
+  formatErrorStackPromiseForTest(): Promise<void> {
+    return this.#formatErrorStackPromiseForTest;
+  }
+
   protected buildMessage(): HTMLElement {
     let messageElement;
     let messageText: Common.UIString.LocalizedString|string = this.message.messageText;
@@ -816,11 +823,28 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
 
   private formatParameterAsError(output: SDK.RemoteObject.RemoteObject): HTMLElement {
     const result = document.createElement('span');
-    const errorSpan = this.tryFormatAsError(output.description || '');
-    result.appendChild(errorSpan ? errorSpan : this.linkifyStringAsFragment(output.description || ''));
+    const errorStack = output.description || '';
+
+    // Combine the ExceptionDetails for this error object with the parsed Error#stack.
+    // The Exceptiondetails include script IDs for stack frames, which allows more accurate
+    // linking.
+    this.#formatErrorStackPromiseForTest = this.retrieveExceptionDetails(output).then(exceptionDetails => {
+      const errorSpan = this.tryFormatAsError(errorStack, exceptionDetails);
+      result.appendChild(errorSpan ?? this.linkifyStringAsFragment(errorStack));
+    });
+
     return result;
   }
 
+  private async retrieveExceptionDetails(errorObject: SDK.RemoteObject.RemoteObject):
+      Promise<Protocol.Runtime.ExceptionDetails|undefined> {
+    const runtimeModel = this.message.runtimeModel();
+    if (runtimeModel && errorObject.objectId) {
+      return runtimeModel.getExceptionDetails(errorObject.objectId);
+    }
+    return undefined;
+  }
+
   private formatAsArrayEntry(output: SDK.RemoteObject.RemoteObject): HTMLElement {
     return this.previewFormatter.renderPropertyPreview(
         output.type, output.subtype, output.className, output.description);
@@ -1422,7 +1446,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     return true;
   }
 
-  private tryFormatAsError(string: string): HTMLElement|null {
+  private tryFormatAsError(string: string, exceptionDetails?: Protocol.Runtime.ExceptionDetails): HTMLElement|null {
     const runtimeModel = this.message.runtimeModel();
     if (!runtimeModel) {
       return null;
@@ -1432,6 +1456,9 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     if (!linkInfos?.length) {
       return null;
     }
+    if (exceptionDetails?.stackTrace) {
+      augmentErrorStackWithScriptIds(linkInfos, exceptionDetails.stackTrace);
+    }
 
     const debuggerModel = runtimeModel.debuggerModel();
     const formattedResult = document.createElement('span');
@@ -1447,8 +1474,8 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       const suffix = `${line.substring(link.positionRight)}${newline}`;
 
       formattedLine.appendChild(this.linkifyStringAsFragment(prefix));
-      const scriptLocationLink =
-          this.linkifier.linkifyScriptLocation(debuggerModel.target(), null, link.url, link.lineNumber, {
+      const scriptLocationLink = this.linkifier.linkifyScriptLocation(
+          debuggerModel.target(), link.scriptId || null, link.url, link.lineNumber, {
             columnNumber: link.columnNumber,
             className: undefined,
             tabStop: undefined,

package/front_end/panels/console/ErrorStackParser.ts

@@ -4,6 +4,7 @@
 
 import * as Common from '../../core/common/common.js';
 import type * as SDK from '../../core/sdk/sdk.js';
+import type * as Protocol from '../../generated/protocol.js';
 
 export interface ParsedErrorFrame {
   line: string;
@@ -11,6 +12,7 @@ export interface ParsedErrorFrame {
     url: string,
     lineNumber?: number,
     columnNumber?: number, enclosedInBraces: boolean, positionLeft: number, positionRight: number,
+    scriptId?: Protocol.Runtime.ScriptId,
   };
 }
 
@@ -115,3 +117,35 @@ function parseOrScriptMatch(debuggerModel: SDK.DebuggerModel.DebuggerModel, url:
   }
   return null;
 }
+
+/**
+ * Error#stack output only contains script URLs. In some cases we are able to
+ * retrieve additional exception details from V8 that we can use to augment
+ * the parsed Error#stack with script IDs.
+ * This function sets the `scriptId` field in `ParsedErrorFrame` when it finds
+ * the corresponding info in `Protocol.Runtime.StackTrace`.
+ */
+export function augmentErrorStackWithScriptIds(
+    parsedFrames: ParsedErrorFrame[], protocolStackTrace: Protocol.Runtime.StackTrace): void {
+  // Note that the number of frames between the two stack traces can differ. The
+  // parsed Error#stack can contain Builtin frames which are not present in the protocol
+  // stack. This means its easier to always search the whole protocol stack for a matching
+  // frame rather then trying to detect the Builtin frames and skipping them.
+  for (const parsedFrame of parsedFrames) {
+    const protocolFrame = protocolStackTrace.callFrames.find(frame => framesMatch(parsedFrame, frame));
+    if (protocolFrame && parsedFrame.link) {
+      parsedFrame.link.scriptId = protocolFrame.scriptId;
+    }
+  }
+}
+
+/** Returns true iff both stack frames have the same url and line/column numbers. The function name is ignored */
+function framesMatch(parsedFrame: ParsedErrorFrame, protocolFrame: Protocol.Runtime.CallFrame): boolean {
+  if (!parsedFrame.link) {
+    return false;
+  }
+
+  const {url, lineNumber, columnNumber} = parsedFrame.link;
+  return url === protocolFrame.url && lineNumber === protocolFrame.lineNumber &&
+      columnNumber === protocolFrame.columnNumber;
+}

package/front_end/panels/emulation/DeviceModeView.ts

@@ -467,7 +467,9 @@ export class DeviceModeView extends UI.Widget.VBox {
 
       const canvas = document.createElement('canvas');
       canvas.width = Math.floor(outlineRect.width);
-      canvas.height = Math.floor(outlineRect.height);
+      // Cap the height to not hit the GPU limit.
+      // https://crbug.com/1260828
+      canvas.height = Math.min((1 << 14), Math.floor(outlineRect.height));
       const ctx = canvas.getContext('2d');
       if (!ctx) {
         throw new Error('Could not get 2d context from canvas.');
@@ -507,7 +509,9 @@ export class DeviceModeView extends UI.Widget.VBox {
     pageImage.onload = (): void => {
       const canvas = document.createElement('canvas');
       canvas.width = pageImage.naturalWidth;
-      canvas.height = pageImage.naturalHeight;
+      // Cap the height to not hit the GPU limit.
+      // https://crbug.com/1260828
+      canvas.height = Math.min((1 << 14), Math.floor(pageImage.naturalHeight));
       const ctx = canvas.getContext('2d');
       if (!ctx) {
         throw new Error('Could not get 2d context for base64 screenshot.');

package/front_end/panels/sources/UISourceCodeFrame.ts

@@ -364,9 +364,16 @@ export class UISourceCodeFrame extends
     this.unloadUISourceCode();
     this.persistenceBinding = binding;
     this.initializeUISourceCode();
+    this.reloadMessages();
     this.reloadPlugins();
   }
 
+  private reloadMessages(): void {
+    const messages = [...this.allMessages()];
+    const {editor} = this.textEditor;
+    editor.dispatch({effects: setRowMessages.of(RowMessages.create(messages))});
+  }
+
   private updateStyle(): void {
     this.setEditable(this.canEditSourceInternal());
   }

package/front_end/panels/sources/WatchExpressionsSidebarPane.ts

@@ -171,7 +171,7 @@ export class WatchExpressionsSidebarPane extends UI.ThrottledWidget.ThrottledWid
     this.createWatchExpression(null).startEditing();
   }
 
-  doUpdate(): Promise<void> {
+  async doUpdate(): Promise<void> {
     this.linkifier.reset();
     this.contentElement.removeChildren();
     this.treeOutline.removeChildren();
@@ -191,7 +191,6 @@ export class WatchExpressionsSidebarPane extends UI.ThrottledWidget.ThrottledWid
 
       this.createWatchExpression(expression);
     }
-    return Promise.resolve();
   }
 
   private createWatchExpression(expression: string|null): WatchExpression {