chrome-devtools-frontend 1.0.965113 → 1.0.967135

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/elements/StylePropertyTreeElement.ts

@@ -6,6 +6,7 @@ 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 Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
@@ -116,6 +117,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
   private prompt: CSSPropertyPrompt|null;
   private lastComputedValue: string|null;
   private contextForTest!: Context|undefined;
+  #propertyTextFromSource: string;
 
   constructor(
       stylesPane: StylesSidebarPane, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
@@ -145,6 +147,8 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     this.prompt = null;
 
     this.lastComputedValue = null;
+
+    this.#propertyTextFromSource = property.propertyText || '';
   }
 
   matchedStyles(): SDK.CSSMatchedStyles.CSSMatchedStyles {
@@ -478,7 +482,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       this.listItemElement.classList.remove('disabled');
     }
 
-    this.listItemElement.classList.toggle('changed', this.parentPane().isPropertyChanged(this.property));
+    this.listItemElement.classList.toggle('changed', this.isPropertyChanged(this.property));
   }
 
   node(): SDK.DOMModel.DOMNode|null {
@@ -523,6 +527,14 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     this.styleTextAppliedForTest();
   }
 
+  private isPropertyChanged(property: SDK.CSSProperty.CSSProperty): boolean {
+    if (!Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.STYLES_PANE_CSS_CHANGES)) {
+      return false;
+    }
+    // Check local cache first, then check against diffs from the workspace.
+    return this.#propertyTextFromSource !== property.propertyText || this.parentPane().isPropertyChanged(property);
+  }
+
   async onpopulate(): Promise<void> {
     // Only populate once and if this property is a shorthand.
     if (this.childCount() || !this.isShorthand) {
@@ -1481,7 +1493,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       return;
     }
     if (updatedProperty) {
-      this.listItemElement.classList.toggle('changed', this.parentPane().isPropertyChanged(updatedProperty));
+      this.listItemElement.classList.toggle('changed', this.isPropertyChanged(updatedProperty));
     }
 
     this.matchedStylesInternal.resetActiveProperties();

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -1023,9 +1023,6 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   }
 
   isPropertyChanged(property: SDK.CSSProperty.CSSProperty): boolean {
-    if (!Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.STYLES_PANE_CSS_CHANGES)) {
-      return false;
-    }
     const url = property.ownerStyle.parentRule?.resourceURL();
     if (!url) {
       return false;

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/event_listeners/EventListenersUtils.ts

@@ -5,10 +5,11 @@
 import * as Common from '../../core/common/common.js';
 import * as SDK from '../../core/sdk/sdk.js';
 
-export function frameworkEventListeners(object: SDK.RemoteObject.RemoteObject): Promise<FrameworkEventListenersObject> {
+export async function frameworkEventListeners(object: SDK.RemoteObject.RemoteObject):
+    Promise<FrameworkEventListenersObject> {
   const domDebuggerModel = object.runtimeModel().target().model(SDK.DOMDebuggerModel.DOMDebuggerModel);
   if (!domDebuggerModel) {
-    return Promise.resolve({eventListeners: [], internalHandlers: null} as FrameworkEventListenersObject);
+    return {eventListeners: [], internalHandlers: null} as FrameworkEventListenersObject;
   }
 
   const listenersResult = {internalHandlers: null, eventListeners: []} as FrameworkEventListenersObject;

package/front_end/panels/event_listeners/EventListenersView.ts

@@ -116,13 +116,13 @@ export class EventListenersView extends UI.Widget.VBox {
       frameworkEventListenersObject = result;
     }
 
-    function markInternalEventListeners(): Promise<void> {
+    async function markInternalEventListeners(): Promise<void> {
       if (!frameworkEventListenersObject) {
-        return Promise.resolve();
+        return;
       }
 
       if (!frameworkEventListenersObject.internalHandlers) {
-        return Promise.resolve();
+        return;
       }
       return frameworkEventListenersObject.internalHandlers.object()
           .callFunctionJSON(isInternalEventListener as (this: Object) => boolean[], eventListeners.map(handlerArgument))

package/front_end/panels/lighthouse/lighthouse.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '../../third_party/lighthouse/report-assets/report-generator.js';
+import '../../third_party/lighthouse/report-assets/report-generator.mjs';
 
 import * as LighthouseController from './LighthouseController.js';
 import * as LighthousePanel from './LighthousePanel.js';

package/front_end/panels/sources/DebuggerPausedMessage.ts

@@ -142,7 +142,7 @@ export class DebuggerPausedMessage {
     }
 
     const mainElement = messageWrapper.createChild('div', 'status-main');
-    mainElement.appendChild(UI.Icon.Icon.create('smallicon-info', 'status-icon'));
+    mainElement.appendChild(UI.Icon.Icon.create('smallicon-clear-info', 'status-icon'));
     const breakpointType = BreakpointTypeNouns.get(data.type);
     mainElement.appendChild(document.createTextNode(
         i18nString(UIStrings.pausedOnS, {PH1: breakpointType ? breakpointType() : String(null)})));
@@ -256,7 +256,7 @@ export class DebuggerPausedMessage {
     function buildWrapper(mainText: string, subText?: string, title?: string): Element {
       const messageWrapper = document.createElement('span');
       const mainElement = messageWrapper.createChild('div', 'status-main');
-      const icon = UI.Icon.Icon.create(errorLike ? 'smallicon-error' : 'smallicon-info', 'status-icon');
+      const icon = UI.Icon.Icon.create(errorLike ? 'smallicon-clear-error' : 'smallicon-clear-info', 'status-icon');
       mainElement.appendChild(icon);
       mainElement.appendChild(document.createTextNode(mainText));
       if (subText) {

package/front_end/panels/sources/SourcesPanel.ts

@@ -1153,12 +1153,11 @@ export class UILocationRevealer implements Common.Revealer.Revealer {
     return uILocationRevealerInstance;
   }
 
-  reveal(uiLocation: Object, omitFocus?: boolean): Promise<void> {
+  async reveal(uiLocation: Object, omitFocus?: boolean): Promise<void> {
     if (!(uiLocation instanceof Workspace.UISourceCode.UILocation)) {
-      return Promise.reject(new Error('Internal error: not a ui location'));
+      throw new Error('Internal error: not a ui location');
     }
     SourcesPanel.instance().showUILocation(uiLocation, omitFocus);
-    return Promise.resolve();
   }
 }
 
@@ -1203,12 +1202,11 @@ export class UISourceCodeRevealer implements Common.Revealer.Revealer {
     return uISourceCodeRevealerInstance;
   }
 
-  reveal(uiSourceCode: Object, omitFocus?: boolean): Promise<void> {
+  async reveal(uiSourceCode: Object, omitFocus?: boolean): Promise<void> {
     if (!(uiSourceCode instanceof Workspace.UISourceCode.UISourceCode)) {
-      return Promise.reject(new Error('Internal error: not a ui source code'));
+      throw new Error('Internal error: not a ui source code');
     }
     SourcesPanel.instance().showUISourceCode(uiSourceCode, undefined, undefined, omitFocus);
-    return Promise.resolve();
   }
 }
 
@@ -1226,11 +1224,10 @@ export class DebuggerPausedDetailsRevealer implements Common.Revealer.Revealer {
     return debuggerPausedDetailsRevealerInstance;
   }
 
-  reveal(_object: Object): Promise<void> {
-    if (!Common.Settings.Settings.instance().moduleSetting('autoFocusOnDebuggerPausedEnabled').get()) {
-      return Promise.resolve();
+  async reveal(_object: Object): Promise<void> {
+    if (Common.Settings.Settings.instance().moduleSetting('autoFocusOnDebuggerPausedEnabled').get()) {
+      return SourcesPanel.instance().setAsCurrentPanel();
     }
-    return SourcesPanel.instance().setAsCurrentPanel();
   }
 }
 

package/front_end/panels/sources/UISourceCodeFrame.ts

@@ -105,9 +105,9 @@ export class UISourceCodeFrame extends
 
     this.initializeUISourceCode();
 
-    function workingCopy(): Promise<TextUtils.ContentProvider.DeferredContent> {
+    async function workingCopy(): Promise<TextUtils.ContentProvider.DeferredContent> {
       if (uiSourceCode.isDirty()) {
-        return Promise.resolve({content: uiSourceCode.workingCopy(), isEncoded: false});
+        return {content: uiSourceCode.workingCopy(), isEncoded: false};
       }
       return uiSourceCode.requestContent();
     }
@@ -494,9 +494,9 @@ export class UISourceCodeFrame extends
     return {
       box: anchor,
       hide(): void{},
-      show: (popover: UI.GlassPane.GlassPane): Promise<true> => {
+      show: async(popover: UI.GlassPane.GlassPane): Promise<true> => {
         popover.contentElement.append(element);
-        return Promise.resolve(true);
+        return true;
       },
     };
   }

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 {

package/front_end/panels/sources/debuggerPausedMessage.css

@@ -56,12 +56,16 @@
 }
 
 .status-icon {
-  filter: hue-rotate(190deg);
   position: absolute;
   left: 0;
   top: calc(50% - 5px);
 }
 
+[is="ui-icon"].icon-mask.status-icon,
+:host-context(.-theme-with-dark-background) [is="ui-icon"].icon-mask.status-icon {
+  --override-icon-mask-background-color: var(--color-button-primary-background-hovering);
+}
+
 .paused-status.error-reason .status-icon {
   filter: none;
 }

package/front_end/third_party/codemirror/README.chromium

@@ -20,3 +20,8 @@ wget -qO- https://registry.npmjs.org/codemirror/-/codemirror-5.61.0.tgz | tar xz
 Local changes applied:
 - Run `wget -qOpackage/mode/wast/wast.js https://raw.githubusercontent.com/codemirror/CodeMirror/0bf9231f90925acc7b273ef9aaf89730ddf6e07b/mode/wast/wast.js` to synchronize unreleased changes for WebAssembly disassembly syntax highlighting.
 - Some files have a `.d.ts` file added, as they are used during TypeScript compilation
+- Change extension of following files from `.js` to `.mjs`.
+  - package/addon/runmode/runmode-standalone.js
+  - package/mode/css/css.js
+  - package/mode/javascript/javascript.js
+  - package/mode/xml/xml.js

package/front_end/third_party/codemirror/codemirror-tsconfig.json

@@ -3,9 +3,9 @@
     "composite": true
   },
   "files": [
-    "package/addon/runmode/runmode-standalone.js",
-    "package/mode/css/css.js",
-    "package/mode/javascript/javascript.js",
-    "package/mode/xml/xml.js"
+    "package/addon/runmode/runmode-standalone.mjs",
+    "package/mode/css/css.mjs",
+    "package/mode/javascript/javascript.mjs",
+    "package/mode/xml/xml.mjs"
   ]
 }

package/front_end/third_party/lighthouse/README.chromium

@@ -5,4 +5,3 @@ License: Apache License 2.0
 Security Critical: no
 
 This directory contains Chromium's version of the lighthouse report assets, including renderer.
-