chrome-devtools-frontend 1.0.1643099 → 1.0.1643855

package/front_end/models/stack_trace/DetailedErrorStackParser.ts

@@ -62,57 +62,56 @@ export function parseRawFramesFromErrorStack(stack: string): RawFrame[]|null {
     let evalOrigin: RawFrame|undefined;
 
     const openParenIndex = lineContent.indexOf(' (');
+    let location = '';
     if (lineContent.endsWith(')') && openParenIndex !== -1) {
       functionName = lineContent.substring(0, openParenIndex).trim();
-      let location = lineContent.substring(openParenIndex + 2, lineContent.length - 1);
-
-      if (location.startsWith('eval at ')) {
-        isEval = true;
-        const commaIndex = location.lastIndexOf(', ');
-        let evalOriginStr = location;
-        if (commaIndex !== -1) {
-          evalOriginStr = location.substring(0, commaIndex);
-          location = location.substring(commaIndex + 2);
-        } else {
-          location = '';
-        }
-
-        if (evalOriginStr.startsWith('eval at ')) {
-          evalOriginStr = evalOriginStr.substring(8);
-        }
-        const innerOpenParen = evalOriginStr.indexOf(' (');
-        let evalFunctionName = evalOriginStr;
-        let evalLocation = '';
-        if (innerOpenParen !== -1) {
-          evalFunctionName = evalOriginStr.substring(0, innerOpenParen).trim();
-          evalLocation = evalOriginStr.substring(innerOpenParen + 2, evalOriginStr.length - 1);
-          evalOrigin = parseRawFramesFromErrorStack(`    at ${evalFunctionName} (${evalLocation})`)?.[0];
-        } else {
-          evalOrigin = parseRawFramesFromErrorStack(`    at ${evalFunctionName}`)?.[0];
-        }
+      location = lineContent.substring(openParenIndex + 2, lineContent.length - 1);
+    } else {
+      location = lineContent;
+    }
+
+    if (location.startsWith('eval at ')) {
+      isEval = true;
+      const commaIndex = location.lastIndexOf(', ');
+      let evalOriginStr = location;
+      if (commaIndex !== -1) {
+        evalOriginStr = location.substring(0, commaIndex);
+        location = location.substring(commaIndex + 2);
+      } else {
+        location = '';
       }
 
-      if (location.startsWith('index ')) {
-        promiseIndex = parseInt(location.substring(6), 10);
-        url = '';
-      } else if (location === '<anonymous>' || location === 'native') {
-        url = '';
-      } else if (location.includes(':wasm-function[')) {
-        isWasm = true;
-        const wasmMatch = /^(.*):wasm-function\[(\d+)\]:(0x[0-9a-fA-F]+)$/.exec(location);
-        if (wasmMatch) {
-          url = wasmMatch[1];
-          wasmFunctionIndex = parseInt(wasmMatch[2], 10);
-          columnNumber = parseInt(wasmMatch[3], 16);
-        }
+      if (evalOriginStr.startsWith('eval at ')) {
+        evalOriginStr = evalOriginStr.substring(8);
+      }
+      const innerOpenParen = evalOriginStr.indexOf(' (');
+      let evalFunctionName = evalOriginStr;
+      let evalLocation = '';
+      if (innerOpenParen !== -1) {
+        evalFunctionName = evalOriginStr.substring(0, innerOpenParen).trim();
+        evalLocation = evalOriginStr.substring(innerOpenParen + 2, evalOriginStr.length - 1);
+        evalOrigin = parseRawFramesFromErrorStack(`    at ${evalFunctionName} (${evalLocation})`)?.[0];
       } else {
-        const splitResult = Common.ParsedURL.ParsedURL.splitLineAndColumn(location);
-        url = splitResult.url;
-        lineNumber = splitResult.lineNumber ?? -1;
-        columnNumber = splitResult.columnNumber ?? -1;
+        evalOrigin = parseRawFramesFromErrorStack(`    at ${evalFunctionName}`)?.[0];
       }
-    } else {
-      const splitResult = Common.ParsedURL.ParsedURL.splitLineAndColumn(lineContent);
+    }
+
+    if (location.startsWith('index ')) {
+      promiseIndex = parseInt(location.substring(6), 10);
+      url = '';
+    } else if (location === '<anonymous>' || location === 'native') {
+      url = '';
+    } else if (location.includes(':wasm-function[')) {
+      isWasm = true;
+      const wasmMatch = /^(.*):wasm-function\[(\d+)\]:(0x[0-9a-fA-F]+)$/.exec(location);
+      if (wasmMatch) {
+        url = wasmMatch[1];
+        wasmFunctionIndex = parseInt(wasmMatch[2], 10);
+        columnNumber = parseInt(wasmMatch[3], 16);
+        lineNumber = 0;
+      }
+    } else if (location) {
+      const splitResult = Common.ParsedURL.ParsedURL.splitLineAndColumn(location);
       url = splitResult.url;
       lineNumber = splitResult.lineNumber ?? -1;
       columnNumber = splitResult.columnNumber ?? -1;
@@ -181,13 +180,7 @@ export function parseMessage(stack: string): string {
 export function augmentRawFramesWithScriptIds(
     rawFrames: RawFrame[], protocolStackTrace: Protocol.Runtime.StackTrace): void {
   function augmentFrame(rawFrame: RawFrame): void {
-    const isWasm = rawFrame.isWasm;
     const protocolFrame = protocolStackTrace.callFrames.find(frame => {
-      if (isWasm) {
-        // The parser parses Wasm offsets into the `columnNumber` field. The `lineNumber` is always -1.
-        // In the protocol trace, the `lineNumber` is 0 (for Wasm) and `columnNumber` is the bytecode offset.
-        return rawFrame.url === frame.url && rawFrame.columnNumber === frame.columnNumber;
-      }
       return rawFrame.url === frame.url && rawFrame.lineNumber === frame.lineNumber &&
           rawFrame.columnNumber === frame.columnNumber;
     });

package/front_end/models/stack_trace/StackTrace.ts

@@ -48,6 +48,13 @@ export interface Frame {
    * Whether the corresponding raw frame is JS or WASM.
    */
   readonly isWasm?: boolean;
+  /**
+   * Whether this frame is an inlined frame. Used by SymbolizedErrorWidget
+   * to render the translated name (i.e. `name`) for inlined frames, and
+   * the physical name (i.e. `rawName`) for normal frames to preserve existing
+   * behavior.
+   */
+  readonly isInline?: boolean;
 }
 
 export interface ParsedErrorStackFrame extends Frame {

package/front_end/models/stack_trace/StackTraceImpl.ts

@@ -89,11 +89,12 @@ export class FrameImpl implements StackTrace.StackTrace.Frame {
   readonly missingDebugInfo?: StackTrace.StackTrace.MissingDebugInfo;
   readonly rawName?: string;
   readonly isWasm?: boolean;
+  readonly isInline?: boolean;
 
-  constructor(
-      url: string|undefined, uiSourceCode: Workspace.UISourceCode.UISourceCode|undefined, name: string|undefined,
-      line: number, column: number, missingDebugInfo?: StackTrace.StackTrace.MissingDebugInfo, rawName?: string,
-      isWasm?: boolean) {
+  constructor(url: string|undefined, uiSourceCode: Workspace.UISourceCode.UISourceCode|undefined,
+              name: string|undefined, line: number, column: number,
+              missingDebugInfo?: StackTrace.StackTrace.MissingDebugInfo, rawName?: string, isWasm?: boolean,
+              isInline?: boolean) {
     this.url = url;
     this.uiSourceCode = uiSourceCode;
     this.name = name;
@@ -102,6 +103,7 @@ export class FrameImpl implements StackTrace.StackTrace.Frame {
     this.missingDebugInfo = missingDebugInfo;
     this.rawName = rawName;
     this.isWasm = isWasm;
+    this.isInline = isInline;
   }
 }
 
@@ -197,6 +199,9 @@ export class ParsedErrorStackFrameImpl implements StackTrace.StackTrace.ParsedEr
   get isWasm(): boolean|undefined {
     return this.#frame.isWasm;
   }
+  get isInline(): boolean|undefined {
+    return this.#frame.isInline;
+  }
   get wasmModuleName(): string|undefined {
     return this.#parsedFrameInfo?.wasmModuleName;
   }
@@ -291,6 +296,10 @@ export class DebuggableFrameImpl implements StackTrace.StackTrace.DebuggableFram
     return this.#frame.isWasm;
   }
 
+  get isInline(): boolean|undefined {
+    return this.#frame.isInline;
+  }
+
   get sdkFrame(): SDK.DebuggerModel.CallFrame {
     return this.#sdkFrame;
   }

package/front_end/models/stack_trace/StackTraceModel.ts

@@ -211,10 +211,11 @@ export class StackTraceModel extends SDK.SDKModel.SDKModel<unknown> {
     let i = 0;
     let evalI = 0;
     for (const node of fragment.node.getCallStack()) {
-      node.frames = uiFrames[i++].map(
-          frame => new FrameImpl(
-              frame.url, frame.uiSourceCode, frame.name, frame.line, frame.column, frame.missingDebugInfo,
-              node.rawFrame.functionName, node.rawFrame.isWasm));
+      const group = uiFrames[i++];
+      node.frames =
+          group.map((frame, index) => new FrameImpl(frame.url, frame.uiSourceCode, frame.name, frame.line, frame.column,
+                                                    frame.missingDebugInfo, node.rawFrame.functionName,
+                                                    node.rawFrame.isWasm, index < group.length - 1));
 
       if (node.parsedFrameInfo?.evalOrigin) {
         node.evalOrigin = evalOrigins[evalI++];
@@ -253,10 +254,10 @@ async function translateEvalOrigin(
     rawFrame: RawFrame, rawFramesToUIFrames: TranslateRawFrames,
     target: SDK.Target.Target): Promise<EvalOrigin|undefined> {
   const uiFrames = await rawFramesToUIFrames([rawFrame], target);
-  const frames = uiFrames[0].map(
-      frame => new FrameImpl(
-          frame.url, frame.uiSourceCode, frame.name, frame.line, frame.column, frame.missingDebugInfo,
-          rawFrame.functionName, rawFrame.isWasm));
+  const group = uiFrames[0];
+  const frames = group.map((frame, index) => new FrameImpl(frame.url, frame.uiSourceCode, frame.name, frame.line,
+                                                           frame.column, frame.missingDebugInfo, rawFrame.functionName,
+                                                           rawFrame.isWasm, index < group.length - 1));
 
   let parentEvalOrigin: EvalOrigin|undefined;
   if (rawFrame.parsedFrameInfo?.evalOrigin) {

package/front_end/panels/accessibility/AccessibilitySidebarView.ts

@@ -33,7 +33,7 @@ export class AccessibilitySidebarView extends UI.Widget.VBox {
   #node: SDK.DOMModel.DOMNode|null;
   #axNode: SDK.AccessibilityModel.AccessibilityNode|null;
   private skipNextPullNode: boolean;
-  private readonly sidebarPaneStack: UI.View.ViewLocation;
+  private readonly sidebarPaneStack: UI.ViewManager.StackLocation;
   private readonly ariaSubPane: ARIAAttributesPane;
   private readonly axNodeSubPane: AXNodeSubPane;
   private readonly sourceOrderSubPane: SourceOrderPane;
@@ -159,6 +159,7 @@ export class AccessibilitySidebarView extends UI.Widget.VBox {
 
   private updateToggle(): void {
     const isToggled = this.toggleAction.toggled();
+    this.sidebarPaneStack.notifyVisibilityChanged(isToggled);
     // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
     render(
         html`

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -2115,7 +2115,8 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
       case 'drjones.network-panel-context':
       case 'drjones.performance-panel-context':
       case 'drjones.sources-floating-button':
-      case 'drjones.sources-panel-context': {
+      case 'drjones.sources-panel-context':
+      case 'ai-assistance.storage-floating-button': {
         void (async () => {
           const view = UI.ViewManager.ViewManager.instance().view(
               AiAssistancePanel.panelName,

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -40,6 +40,7 @@ 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 Protocol from '../../generated/protocol.js';
+import * as AiAssistance from '../../models/ai_assistance/ai_assistance.js';
 import * as LegacyWrapper from '../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import {createIcon} from '../../ui/kit/kit.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
@@ -1762,9 +1763,29 @@ export class DOMStorageTreeElement extends ApplicationPanelTreeElement {
     return false;
   }
 
+  /**
+   * Resolves the DOM storage partition context (`localStorage` or `sessionStorage`)
+   * associated with this tree element for AI assistance.
+   */
+  #getStorageItem(): AiAssistance.StorageItem.StorageItem|null {
+    const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    const mainPageOrigin =
+        target?.inspectedURL() ? Common.ParsedURL.ParsedURL.extractOrigin(target.inspectedURL()) : '';
+    if (!mainPageOrigin || !this.domStorage.storageKey) {
+      return null;
+    }
+    const origin = SDK.StorageKeyManager.parseStorageKey(this.domStorage.storageKey).origin;
+    const storageType = this.domStorage.isLocalStorage ? 'localStorage' : 'sessionStorage';
+    return new AiAssistance.StorageItem.DOMStorageItem(mainPageOrigin, origin, this.domStorage.storageKey, storageType);
+  }
+
   override onattach(): void {
     super.onattach();
     this.listItemElement.addEventListener('contextmenu', this.handleContextMenuEvent.bind(this), true);
+    const storageItem = this.#getStorageItem();
+    if (storageItem) {
+      this.createAiButton(storageItem);
+    }
   }
 
   private handleContextMenuEvent(event: MouseEvent): void {
@@ -1851,9 +1872,27 @@ export class CookieTreeElement extends ApplicationPanelTreeElement {
     return this.#cookieDomain;
   }
 
+  /**
+   * Resolves the cookie domain security context associated with this tree element
+   * for AI assistance.
+   */
+  #getStorageItem(): AiAssistance.StorageItem.StorageItem|null {
+    const primaryTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    const mainPageOrigin =
+        primaryTarget?.inspectedURL() ? Common.ParsedURL.ParsedURL.extractOrigin(primaryTarget.inspectedURL()) : '';
+    if (!mainPageOrigin || !this.#cookieDomain) {
+      return null;
+    }
+    return new AiAssistance.StorageItem.CookieItem(mainPageOrigin, this.#cookieDomain);
+  }
+
   override onattach(): void {
     super.onattach();
     this.listItemElement.addEventListener('contextmenu', this.handleContextMenuEvent.bind(this), true);
+    const storageItem = this.#getStorageItem();
+    if (storageItem) {
+      this.createAiButton(storageItem);
+    }
   }
 
   private handleContextMenuEvent(event: Event): void {

package/front_end/panels/application/ApplicationPanelTreeElement.ts

@@ -2,15 +2,24 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+/* eslint-disable @devtools/no-lit-render-outside-of-view */
+
+import '../../ui/components/buttons/buttons.js';
+
 import * as Common from '../../core/common/common.js';
 import type * as Platform from '../../core/platform/platform.js';
+import * as AiAssistance from '../../models/ai_assistance/ai_assistance.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as Lit from '../../ui/lit/lit.js';
 
 import type {ResourcesPanel} from './ResourcesPanel.js';
 
+const {html} = Lit;
+
 export class ApplicationPanelTreeElement extends UI.TreeOutline.TreeElement {
   protected readonly resourcesPanel: ResourcesPanel;
   private customItemURL?: Platform.DevToolsPath.UrlString;
+  protected aiButtonContainer?: HTMLElement;
 
   constructor(resourcesPanel: ResourcesPanel, title: string, expandable: boolean, jslogContext: string) {
     super(title, expandable, jslogContext);
@@ -56,6 +65,36 @@ export class ApplicationPanelTreeElement extends UI.TreeOutline.TreeElement {
   showView(view: UI.Widget.AnyWidget|null): void {
     this.resourcesPanel.showView(view);
   }
+
+  protected createAiButton(storageItem: AiAssistance.StorageItem.StorageItem): void {
+    const STORAGE_FLOATING_BUTTON_ACTION_ID = 'ai-assistance.storage-floating-button';
+    const actionRegistry = UI.ActionRegistry.ActionRegistry.instance();
+    if (!actionRegistry.hasAction(STORAGE_FLOATING_BUTTON_ACTION_ID)) {
+      return;
+    }
+    const action = actionRegistry.getAction(STORAGE_FLOATING_BUTTON_ACTION_ID);
+    if (!this.aiButtonContainer) {
+      this.aiButtonContainer = this.listItemElement.createChild('span', 'ai-button-container');
+      const icon = AiAssistance.AiUtils.getIconName();
+      const onClick = (ev: Event): void => {
+        ev.stopPropagation();
+        UI.Context.Context.instance().setFlavor(AiAssistance.StorageItem.StorageItem, storageItem);
+        void action.execute();
+      };
+
+      // clang-format off
+      Lit.render(html`
+            <devtools-floating-button
+              icon-name=${icon}
+              title=${action.title()}
+              jslogcontext="ask-ai"
+              @click=${onClick}
+              @mousedown=${(ev: Event) => ev.stopPropagation()}>
+            </devtools-floating-button>
+          `, this.aiButtonContainer);
+      // clang-format on
+    }
+  }
 }
 
 export class ExpandableApplicationPanelTreeElement extends ApplicationPanelTreeElement {

package/front_end/panels/application/CookieItemsView.ts

@@ -317,7 +317,7 @@ export class CookieItemsView extends UI.Widget.VBox {
   }
 
   private updateAiAssistanceContext(cookie: SDK.Cookie.Cookie|null): void {
-    if (!cookie || cookie.httpOnly()) {
+    if (cookie && cookie.httpOnly()) {
       UI.Context.Context.instance().setFlavor(AiAssistanceModel.StorageItem.StorageItem, null);
       return;
     }
@@ -332,7 +332,7 @@ export class CookieItemsView extends UI.Widget.VBox {
       return;
     }
 
-    const storageItem = new AiAssistanceModel.StorageItem.CookieItem(mainPageOrigin, this.cookieDomain, cookie.name());
+    const storageItem = new AiAssistanceModel.StorageItem.CookieItem(mainPageOrigin, this.cookieDomain, cookie?.name());
     UI.Context.Context.instance().setFlavor(AiAssistanceModel.StorageItem.StorageItem, storageItem);
   }
 

package/front_end/panels/application/resourcesSidebar.css

@@ -64,3 +64,14 @@ devtools-icon.navigator-font-tree-item {
 .no-device-bound-session {
   font-style: italic;
 }
+
+.ai-button-container {
+  display: none;
+  position: absolute;
+  z-index: 999;
+  right: var(--sys-size-3);
+}
+
+.tree-outline li:hover .ai-button-container {
+  display: inline-flex;
+}

package/front_end/panels/console/SymbolizedErrorWidget.ts

@@ -28,8 +28,8 @@ function renderHeader(content: Lit.LitTemplate|Node|UI.Widget.Widget, isCause: b
 }
 
 function formatName(frame: StackTrace.StackTrace.ParsedErrorStackFrame): string {
-  let name = frame.name || '';
-  const isInline = Boolean(frame.rawName) && frame.name !== frame.rawName;
+  const isInline = frame.isInline;
+  let name = isInline ? (frame.name || '') : (frame.rawName || frame.name || '');
   const shouldAppendMethodAlias = !isInline && frame.methodName && name && name !== frame.methodName &&
       !name.endsWith('.' + frame.methodName) && !name.endsWith(' ' + frame.methodName);
   if (shouldAppendMethodAlias) {
@@ -105,10 +105,6 @@ function renderFrameSuffix(frame: StackTrace.StackTrace.ParsedErrorStackFrame):
 
 const DEFAULT_VIEW = (input: ViewInput, _output: object, target: HTMLElement): void => {
   const renderError = (error: Bindings.SymbolizedError.SymbolizedError, isCause: boolean): Lit.LitTemplate => {
-    if (error instanceof Bindings.SymbolizedError.SymbolizedSyntaxError) {
-      console.error('SymbolizedErrorWidget received an unsupported error type:', error);
-      return Lit.nothing;
-    }
     if (error instanceof Bindings.SymbolizedError.UnparsableError) {
       const fragment = ConsoleViewMessage.linkifyWithCustomLinkifier(
           error.errorStack,
@@ -130,7 +126,14 @@ const DEFAULT_VIEW = (input: ViewInput, _output: object, target: HTMLElement): v
       maxLength: UI.UIUtils.MaxLengthForDisplayedURLsInConsole,
       ignoreListManager: input.ignoreListManager,
     };
-    const headerContent = html`${error.message}`;
+
+    let headerContent = html`${error.message}`;
+    if (error.syntaxErrorLocation) {
+      const linkElement = Components.Linkifier.Linkifier.linkifyUILocation(error.syntaxErrorLocation, linkOptions);
+      linkElement.tabIndex = -1;
+      headerContent = html`${error.message} (at ${linkElement})`;
+    }
+
     const header = renderHeader(headerContent, isCause);
     const syncFrames = error.stackTrace.syncFragment.frames;
     // clang-format off

package/front_end/panels/settings/emulation/DevicesSettingsTab.ts

@@ -177,6 +177,7 @@ export class DevicesSettingsTab extends UI.Widget.VBox implements
     device.horizontal.height = 400;
     device.vertical.width = 400;
     device.vertical.height = 700;
+    device.userAgent = navigator.userAgent;
     this.#customDeviceList.addNewItem(this.emulatedDevicesList.custom().length, device);
   }
 

package/front_end/panels/sources/SourcesPanel.ts

@@ -221,7 +221,7 @@ export class SourcesPanel extends UI.Panel.Panel implements
   #paused?: boolean;
   private switchToPausedTargetTimeout?: number;
   private executionLineLocation?: Bindings.DebuggerWorkspaceBinding.Location|null;
-  private sidebarPaneStack?: UI.View.ViewLocation;
+  private sidebarPaneStack?: UI.ViewManager.StackLocation;
   private tabbedLocationHeader?: Element|null;
   private extensionSidebarPanesContainer?: UI.View.ViewLocation;
   sidebarPaneView?: UI.Widget.VBox|UI.SplitWidget.SplitWidget;
@@ -477,6 +477,7 @@ export class SourcesPanel extends UI.Panel.Panel implements
 
   toggleDebuggerSidebar(): void {
     this.splitWidget.toggleSidebar();
+    this.sidebarPaneStack?.notifyVisibilityChanged(this.splitWidget.sidebarIsShowing());
   }
 
   private debuggerPaused(event: Common.EventTarget.EventTargetEvent<SDK.DebuggerModel.DebuggerModel>): void {