chrome-devtools-frontend 1.0.1643855 → 1.0.1645245

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -94,6 +94,18 @@ import {TrustTokensTreeElement} from './TrustTokensTreeElement.js';
 import {WebMCPTreeElement} from './WebMCPTreeElement.js';
 
 const UIStrings = {
+  /**
+   * @description Text of a context menu item to start a chat with AI
+   */
+  startAChat: 'Start a chat',
+  /**
+   * @description Text of a context menu item to explain contents of a local/session storage bucket with AI
+   */
+  explainStorage: 'Explain storage',
+  /**
+   * @description Text of a context menu item to explain web cookies with AI
+   */
+  explainCookies: 'Explain cookies',
   /**
    * @description Text in Application Panel Sidebar of the Application panel
    */
@@ -1792,6 +1804,22 @@ export class DOMStorageTreeElement extends ApplicationPanelTreeElement {
     const contextMenu = new UI.ContextMenu.ContextMenu(event);
     contextMenu.defaultSection().appendItem(
         i18nString(UIStrings.clear), () => this.domStorage.clear(), {jslogContext: 'clear'});
+
+    const storageItem = this.#getStorageItem();
+    if (storageItem) {
+      const openAiAssistanceId = 'ai-assistance.application-panel-context';
+      if (UI.ActionRegistry.ActionRegistry.instance().hasAction(openAiAssistanceId)) {
+        UI.Context.Context.instance().setFlavor(AiAssistance.StorageItem.StorageItem, storageItem);
+        const action = UI.ActionRegistry.ActionRegistry.instance().getAction(openAiAssistanceId);
+        const submenu = contextMenu.footerSection().appendSubMenuItem(action.title(), false, openAiAssistanceId);
+        submenu.defaultSection().appendAction(openAiAssistanceId, i18nString(UIStrings.startAChat));
+        submenu.defaultSection().appendItem(
+            i18nString(UIStrings.explainStorage),
+            () => action.execute({prompt: 'What is the purpose of this storage bucket?'}),
+            {disabled: !action.enabled(), jslogContext: openAiAssistanceId + '.storage'});
+      }
+    }
+
     void contextMenu.show();
   }
 }
@@ -1900,6 +1928,22 @@ export class CookieTreeElement extends ApplicationPanelTreeElement {
     contextMenu.defaultSection().appendItem(
         i18nString(UIStrings.clear), () => this.resourcesPanel.clearCookies(this.target, this.#cookieDomain),
         {jslogContext: 'clear'});
+
+    const storageItem = this.#getStorageItem();
+    if (storageItem) {
+      const openAiAssistanceId = 'ai-assistance.application-panel-context';
+      if (UI.ActionRegistry.ActionRegistry.instance().hasAction(openAiAssistanceId)) {
+        UI.Context.Context.instance().setFlavor(AiAssistance.StorageItem.StorageItem, storageItem);
+        const action = UI.ActionRegistry.ActionRegistry.instance().getAction(openAiAssistanceId);
+        const submenu = contextMenu.footerSection().appendSubMenuItem(action.title(), false, openAiAssistanceId);
+        submenu.defaultSection().appendAction(openAiAssistanceId, i18nString(UIStrings.startAChat));
+        submenu.defaultSection().appendItem(
+            i18nString(UIStrings.explainCookies),
+            () => action.execute({prompt: 'What is the purpose of these cookies?'}),
+            {disabled: !action.enabled(), jslogContext: openAiAssistanceId + '.cookies'});
+      }
+    }
+
     void contextMenu.show();
   }
 

package/front_end/panels/application/ServiceWorkersView.ts

@@ -228,8 +228,8 @@ export class ServiceWorkersView extends UI.Widget.VBox implements
     othersView.show(othersDiv);
     const othersSection = othersView.appendSection(i18nString(UIStrings.serviceWorkersFromOtherOrigins));
     const othersSectionRow = othersSection.appendRow();
-    const seeOthers = Link.create(
-        'chrome://serviceworker-internals', i18nString(UIStrings.seeAllRegistrations), undefined, 'view-all');
+    const seeOthers = Link.create('chrome://serviceworker-internals', i18nString(UIStrings.seeAllRegistrations),
+                                  undefined, 'view-all', 0, /* allowPrivileged=*/ true);
     othersSectionRow.appendChild(seeOthers);
 
     this.toolbar.appendToolbarItem(

package/front_end/panels/application/WebMCPView.ts

@@ -1014,7 +1014,6 @@ export const PAYLOAD_DEFAULT_VIEW = (input: PayloadViewInput, output: object, ta
           link.lineNumber,
           {
             columnNumber: link.columnNumber,
-            inlineFrameIndex: 0,
             showColumnNumber: true,
           },
       );

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

@@ -341,7 +341,7 @@ function maybeRenderReasonContext(explanation: Protocol.Page.BackForwardCacheNot
     const link = 'chrome://extensions/?id=' + explanation.context as Platform.DevToolsPath.UrlString;
     // clang-format off
     return html`${i18nString(UIStrings.blockingExtensionId)}
-      <devtools-link .href=${link}>${explanation.context}</devtools-link>`;
+      <devtools-link .href=${link} allow-privileged>${explanation.context}</devtools-link>`;
     // clang-format on
   }
   return nothing;
@@ -393,7 +393,6 @@ function maybeRenderJavaScriptDetails(details: Protocol.Page.BackForwardCacheBlo
                              options: {
                                columnNumber: detail.columnNumber,
                                showColumnNumber: true,
-                               inlineFrameIndex: 0,
                                maxLength: maxLengthForDisplayedURLs,
                              }
                            })}`));

package/front_end/panels/console/ConsoleView.ts

@@ -75,6 +75,7 @@ import {
   getMessageForElement,
 } from './ConsoleViewMessage.js';
 import {ConsoleViewport, type ConsoleViewportElement, type ConsoleViewportProvider} from './ConsoleViewport.js';
+import symbolizedErrorWidgetStyles from './symbolizedErrorWidget.css.js';
 
 const UIStrings = {
   /**
@@ -356,7 +357,11 @@ export class ConsoleView extends UI.Widget.VBox implements
   constructor(viewportThrottlerTimeout: number) {
     super();
     this.setMinimumSize(0, 35);
-    this.registerRequiredCSS(consoleViewStyles, objectValueStyles, CodeHighlighter.codeHighlighterStyles);
+    // We register the SymbolizedErrorWidget styles here because many web and e2e
+    // tests use `deepTextContent`, which would also include <style> tags if they
+    // were injected directly into the widget's shadow DOM.
+    this.registerRequiredCSS(consoleViewStyles, symbolizedErrorWidgetStyles, objectValueStyles,
+                             CodeHighlighter.codeHighlighterStyles);
 
     this.#searchableView = new UI.SearchableView.SearchableView(this, null);
     this.#searchableView.element.classList.add('console-searchable-view');

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -34,7 +34,6 @@
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-import type {Chrome} from '../../../extension-api/ExtensionAPI.js';
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
@@ -45,7 +44,6 @@ import * as AiAssistanceModel from '../../models/ai_assistance/ai_assistance.js'
 import * as Bindings from '../../models/bindings/bindings.js';
 import type * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as Logs from '../../models/logs/logs.js';
-import * as StackTrace from '../../models/stack_trace/stack_trace.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
@@ -66,6 +64,7 @@ import {format, updateStyle} from './ConsoleFormat.js';
 import {ConsoleInsightTeaser} from './ConsoleInsightTeaser.js';
 import consoleViewStyles from './consoleView.css.js';
 import type {ConsoleViewportElement} from './ConsoleViewport.js';
+import {SymbolizedErrorWidget} from './SymbolizedErrorWidget.js';
 
 const UIStrings = {
   /**
@@ -449,7 +448,14 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
           if (this.message.parameters?.length === 1) {
             const parameter = this.message.parameters[0];
             if (typeof parameter !== 'string' && parameter.type === 'string') {
-              messageElement = this.tryFormatAsError((parameter.value as string));
+              const value = parameter.value as string;
+              const runtimeModel = this.message.runtimeModel();
+              if (runtimeModel && Bindings.SymbolizedError.isErrorLike(value)) {
+                const remoteObj = parameter instanceof SDK.RemoteObject.RemoteObject ?
+                    parameter :
+                    runtimeModel.createRemoteObject(parameter);
+                messageElement = this.renderSymbolizedError(remoteObj);
+              }
             }
           }
           const args = this.message.parameters || [messageText];
@@ -570,23 +576,21 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       const userMetric = this.#getLinkifierMetric();
       if (stackFrameWithBreakpoint) {
         return this.linkifier.maybeLinkifyConsoleCallFrame(runtimeModel.target(), stackFrameWithBreakpoint, {
-          inlineFrameIndex: 0,
           revealBreakpoint: true,
           userMetric,
         });
       }
       if (scriptId) {
-        return this.linkifier.linkifyScriptLocation(
-            runtimeModel.target(), scriptId, url || Platform.DevToolsPath.EmptyUrlString, line,
-            {columnNumber: column, inlineFrameIndex: 0, userMetric});
+        return this.linkifier.linkifyScriptLocation(runtimeModel.target(), scriptId,
+                                                    url || Platform.DevToolsPath.EmptyUrlString, line,
+                                                    {columnNumber: column, userMetric});
       }
       if (stackTrace?.callFrames.length) {
         return this.linkifier.linkifyStackTraceTopFrame(runtimeModel.target(), stackTrace);
       }
       if (url && url !== 'undefined') {
-        return this.linkifier.linkifyScriptLocation(
-            runtimeModel.target(), /* scriptId */ null, url, line,
-            {columnNumber: column, inlineFrameIndex: 0, userMetric});
+        return this.linkifier.linkifyScriptLocation(runtimeModel.target(), /* scriptId */ null, url, line,
+                                                    {columnNumber: column, userMetric});
       }
       return null;
     };
@@ -695,17 +699,19 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     stackTracePreview.options = {widthConstrained: true};
     if (stackTraceTarget && stackTrace) {
       const selectableChildIndex = this.selectableChildren.length;
-      void Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()
-          .createStackTraceFromProtocolRuntime(stackTrace, stackTraceTarget)
-          .then(stackTrace => {
-            stackTracePreview.stackTrace = stackTrace;
-            return stackTracePreview.updateComplete;
-          })
-          .then(() => {
-            const selectableLinks =
-                stackTracePreview.linkElements.map(element => ({element, forceSelect: () => element.focus()}));
-            this.selectableChildren.splice(selectableChildIndex, 0, ...selectableLinks);
-          });
+      const stackTracePromise = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()
+                                    .createStackTraceFromProtocolRuntime(stackTrace, stackTraceTarget)
+                                    .then(stackTrace => {
+                                      stackTracePreview.stackTrace = stackTrace;
+                                      return stackTracePreview.updateComplete;
+                                    })
+                                    .then(() => {
+                                      const selectableLinks = stackTracePreview.linkElements.map(
+                                          (element: HTMLElement) => ({element, forceSelect: () => element.focus()}));
+                                      this.selectableChildren.splice(selectableChildIndex, 0, ...selectableLinks);
+                                    });
+      this.#formatErrorStackPromiseForTest =
+          Promise.all([this.#formatErrorStackPromiseForTest, stackTracePromise]).then(() => {});
     }
     stackTracePreview.markAsRoot();
     stackTracePreview.show(stackTraceElement);
@@ -771,7 +777,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     let element;
     switch (outputType) {
       case 'error':
-        element = this.formatParameterAsError(output);
+        element = this.renderSymbolizedError(output);
         break;
       case 'function':
         element = this.formatParameterAsFunction(output, includePreview);
@@ -980,42 +986,28 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     return result;
   }
 
-  private formatParameterAsError(output: SDK.RemoteObject.RemoteObject): HTMLElement {
-    const result = document.createElement('span');
-
-    // 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.
-    const formatErrorStack =
-        async(errorObj: SDK.RemoteObject.RemoteObject, includeCausedByPrefix: boolean): Promise<void> => {
-      const error = SDK.RemoteObject.RemoteError.objectAsError(errorObj);
-      const [details, cause] = await Promise.all([error.exceptionDetails(), error.cause()]);
-      let errorElement = this.tryFormatAsError(error.errorStack, details);
-      if (!errorElement) {
-        errorElement = document.createElement('span');
-        appendOrShow(errorElement, this.linkifyStringAsFragment(error.errorStack));
-      }
-
-      if (includeCausedByPrefix) {
-        const causeElement = document.createElement('div');
-        causeElement.append('Caused by: ', errorElement);
-        result.appendChild(causeElement);
-      } else {
-        result.appendChild(errorElement);
-      }
+  private renderSymbolizedError(errorRemoteObject: SDK.RemoteObject.RemoteObject): HTMLElement {
+    const container = document.createElement('span');
+    const widget = new SymbolizedErrorWidget();
+    widget.ignoreListManager = Workspace.IgnoreListManager.IgnoreListManager.instance();
+    const selectableChildIndex = this.selectableChildren.length;
 
-      if (cause?.subtype === 'error') {
-        await formatErrorStack(cause, /* includeCausedByPrefix */ true);
-      } else if (cause?.type === 'string') {
-        const stringCauseElement = document.createElement('div');
-        stringCauseElement.append(`Caused by: ${cause.value}`);
-        result.append(stringCauseElement);
+    const format = async(): Promise<void> => {
+      const error = await Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().createSymbolizedError(
+          errorRemoteObject, this.message.exceptionDetails);
+      if (error) {
+        widget.error = error;
       }
+      await widget.updateComplete;
+      const selectableLinks =
+          widget.linkElements.map((element: HTMLElement) => ({element, forceSelect: () => element.focus()}));
+      this.selectableChildren.splice(selectableChildIndex, 0, ...selectableLinks);
     };
 
-    this.#formatErrorStackPromiseForTest = formatErrorStack(output, /* includeCausedByPrefix */ false);
-
-    return result;
+    this.#formatErrorStackPromiseForTest = Promise.all([this.#formatErrorStackPromiseForTest, format()]).then(() => {});
+    widget.markAsRoot();
+    widget.show(container);
+    return container;
   }
 
   private formatAsArrayEntry(output: SDK.RemoteObject.RemoteObject): DocumentFragment {
@@ -1781,165 +1773,6 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     return this.searchHighlightNodes[index];
   }
 
-  private async getInlineFrames(
-      debuggerModel: SDK.DebuggerModel.DebuggerModel, url: Platform.DevToolsPath.UrlString,
-      lineNumber: number|undefined, columnNumber: number|undefined): Promise<{frames: Chrome.DevTools.FunctionInfo[]}> {
-    const debuggerWorkspaceBinding = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance();
-    const projects = Workspace.Workspace.WorkspaceImpl.instance().projects();
-    const uiSourceCodes = projects.map(project => project.uiSourceCodeForURL(url)).flat().filter(f => !!f);
-    const scripts =
-        uiSourceCodes.map(uiSourceCode => debuggerWorkspaceBinding.scriptsForUISourceCode(uiSourceCode)).flat();
-    if (scripts.length) {
-      const location =
-          new SDK.DebuggerModel.Location(debuggerModel, scripts[0].scriptId, lineNumber || 0, columnNumber);
-      const functionInfo = await debuggerWorkspaceBinding.pluginManager.getFunctionInfo(scripts[0], location);
-      return functionInfo && 'frames' in functionInfo ? functionInfo : {frames: []};
-    }
-
-    return {frames: []};
-  }
-
-  // Expand inline stack frames in the formatted error in the stackTrace element, inserting new elements before the
-  // insertBefore anchor.
-  private async expandInlineStackFrames(
-      debuggerModel: SDK.DebuggerModel.DebuggerModel, prefix: string, suffix: string,
-      url: Platform.DevToolsPath.UrlString, lineNumber: number|undefined, columnNumber: number|undefined,
-      stackTrace: HTMLElement, insertBefore: HTMLElement): Promise<boolean> {
-    const {frames} = await this.getInlineFrames(debuggerModel, url, lineNumber, columnNumber);
-    if (!frames.length) {
-      return false;
-    }
-
-    for (let f = 0; f < frames.length; ++f) {
-      const {name} = frames[f];
-      const formattedLine = document.createElement('span');
-      appendOrShow(formattedLine, this.linkifyStringAsFragment(`${prefix} ${name} (`));
-      const scriptLocationLink = this.linkifier.linkifyScriptLocation(
-          debuggerModel.target(), null, url, lineNumber, {columnNumber, inlineFrameIndex: f});
-      scriptLocationLink.tabIndex = -1;
-      this.selectableChildren.push({element: scriptLocationLink, forceSelect: () => scriptLocationLink.focus()});
-      formattedLine.appendChild(scriptLocationLink);
-      appendOrShow(formattedLine, this.linkifyStringAsFragment(suffix));
-      formattedLine.classList.add('formatted-stack-frame');
-      stackTrace.insertBefore(formattedLine, insertBefore);
-    }
-    return true;
-  }
-
-  private createScriptLocationLinkForSyntaxError(
-      debuggerModel: SDK.DebuggerModel.DebuggerModel, exceptionDetails: Protocol.Runtime.ExceptionDetails): HTMLElement
-      |undefined {
-    const {scriptId, lineNumber, columnNumber} = exceptionDetails;
-    if (!scriptId) {
-      return;
-    }
-
-    // SyntaxErrors might not populate the URL field. Try to resolve it via scriptId.
-    const url =
-        exceptionDetails.url as Platform.DevToolsPath.UrlString || debuggerModel.scriptForId(scriptId)?.sourceURL;
-    if (!url) {
-      return;
-    }
-
-    const scriptLocationLink = this.linkifier.linkifyScriptLocation(
-        debuggerModel.target(), exceptionDetails.scriptId || null, url, lineNumber, {
-          columnNumber,
-          inlineFrameIndex: 0,
-          showColumnNumber: true,
-        });
-    scriptLocationLink.tabIndex = -1;
-    return scriptLocationLink;
-  }
-
-  private tryFormatAsError(string: string, exceptionDetails?: Protocol.Runtime.ExceptionDetails): HTMLElement|null {
-    const runtimeModel = this.message.runtimeModel();
-    if (!runtimeModel) {
-      return null;
-    }
-
-    const issueSummary = exceptionDetails?.exceptionMetaData?.issueSummary;
-    if (typeof issueSummary === 'string') {
-      string = StackTrace.ErrorStackParser.concatErrorDescriptionAndIssueSummary(string, issueSummary);
-    }
-
-    const linkInfos = StackTrace.ErrorStackParser.parseSourcePositionsFromErrorStack(runtimeModel, string);
-    if (!linkInfos?.length) {
-      return null;
-    }
-    if (exceptionDetails?.stackTrace) {
-      StackTrace.ErrorStackParser.augmentErrorStackWithScriptIds(linkInfos, exceptionDetails.stackTrace);
-    }
-
-    const debuggerModel = runtimeModel.debuggerModel();
-    const formattedResult = document.createElement('span');
-
-    for (let i = 0; i < linkInfos.length; ++i) {
-      const newline = i < linkInfos.length - 1 ? '\n' : '';
-      const {line, link, isCallFrame} = linkInfos[i];
-      // Syntax errors don't have a stack frame that points to the source position
-      // where the error occurred. We use the source location from the
-      // exceptionDetails and append it to the end of the message instead.
-      if (!link && exceptionDetails && line.startsWith('SyntaxError')) {
-        appendOrShow(formattedResult, this.linkifyStringAsFragment(line));
-        const maybeScriptLocation = this.createScriptLocationLinkForSyntaxError(debuggerModel, exceptionDetails);
-        if (maybeScriptLocation) {
-          formattedResult.append(' (at ');
-          formattedResult.appendChild(maybeScriptLocation);
-          formattedResult.append(')');
-        }
-        formattedResult.append(newline);
-        continue;
-      }
-      if (!isCallFrame) {
-        appendOrShow(formattedResult, this.linkifyStringAsFragment(`${line}${newline}`));
-        continue;
-      }
-      const formattedLine = document.createElement('span');
-      if (!link) {
-        appendOrShow(formattedLine, this.linkifyStringAsFragment(`${line}${newline}`));
-        formattedLine.classList.add('formatted-builtin-stack-frame');
-        formattedResult.appendChild(formattedLine);
-        continue;
-      }
-      const suffix = `${link.suffix}${newline}`;
-      appendOrShow(formattedLine, this.linkifyStringAsFragment(link.prefix));
-      const scriptLocationLink = this.linkifier.linkifyScriptLocation(
-          debuggerModel.target(), link.scriptId || null, link.url, link.lineNumber, {
-            columnNumber: link.columnNumber,
-            inlineFrameIndex: 0,
-            showColumnNumber: true,
-          });
-      scriptLocationLink.tabIndex = -1;
-      this.selectableChildren.push({element: scriptLocationLink, forceSelect: () => scriptLocationLink.focus()});
-      formattedLine.appendChild(scriptLocationLink);
-      appendOrShow(formattedLine, this.linkifyStringAsFragment(suffix));
-      formattedLine.classList.add('formatted-stack-frame');
-      formattedResult.appendChild(formattedLine);
-
-      if (!link.enclosedInBraces) {
-        continue;
-      }
-
-      const prefixWithoutFunction = link.prefix.substring(0, link.prefix.lastIndexOf(' ', link.prefix.length - 3));
-
-      // If we were able to parse the function name from the stack trace line, try to replace it with an expansion of
-      // any inline frames.
-      const selectableChildIndex = this.selectableChildren.length - 1;
-      void this
-          .expandInlineStackFrames(
-              debuggerModel, prefixWithoutFunction, suffix, link.url, link.lineNumber, link.columnNumber,
-              formattedResult, formattedLine)
-          .then(modified => {
-            if (modified) {
-              formattedResult.removeChild(formattedLine);
-              this.selectableChildren.splice(selectableChildIndex, 1);
-            }
-          });
-    }
-
-    return formattedResult;
-  }
-
   static linkifyWithCustomLinkifier(
       string: string,
       linkifier: (arg0: string, arg1: Platform.DevToolsPath.UrlString, arg2?: number, arg3?: number) => Node):

package/front_end/panels/console/SymbolizedErrorWidget.ts

@@ -122,7 +122,6 @@ const DEFAULT_VIEW = (input: ViewInput, _output: object, target: HTMLElement): v
 
     const linkOptions: Components.Linkifier.LinkifyOptions = {
       showColumnNumber: true,
-      inlineFrameIndex: 0,
       maxLength: UI.UIUtils.MaxLengthForDisplayedURLsInConsole,
       ignoreListManager: input.ignoreListManager,
     };
@@ -171,6 +170,10 @@ export class SymbolizedErrorWidget extends UI.Widget.Widget {
     this.#view = view;
   }
 
+  get linkElements(): readonly HTMLElement[] {
+    return [...this.contentElement.querySelectorAll<HTMLElement>('.devtools-link')];
+  }
+
   set ignoreListManager(ignoreListManager: Workspace.IgnoreListManager.IgnoreListManager) {
     this.#ignoreListManager = ignoreListManager;
     this.requestUpdate();

package/front_end/panels/elements/AdoptedStyleSheetTreeElement.ts

@@ -58,7 +58,6 @@ export class AdoptedStyleSheetTreeElement extends UI.TreeOutline.TreeElement {
         text: linkText,
         preventClick: true,
         showColumnNumber: false,
-        inlineFrameIndex: 0,
       }));
       UI.UIUtils.createTextChild(documentElement, ')');
     }

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -644,7 +644,6 @@ function renderTitle(
         text,
         preventClick: true,
         showColumnNumber: false,
-        inlineFrameIndex: 0,
       })}</span>)</span>`;
     }
 
@@ -733,7 +732,6 @@ function renderLinkifiedValue(value: string, node: SDK.DOMModel.DOMNode): Lit.Te
     text: value,
     preventClick: true,
     showColumnNumber: false,
-    inlineFrameIndex: 0,
     onRef: link => {
       ImagePreviewPopover.setImageUrl(link, rewrittenHref);
     }

package/front_end/panels/elements/PropertyRenderer.ts

@@ -556,7 +556,6 @@ export class URLRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.URLM
           // at the same time, which complicates both StylesSidebarPane and StylePropertyTreeElement.
           bypassURLTrimming: true,
           showColumnNumber: false,
-          inlineFrameIndex: 0,
         }),
         hrefUrl || url);
     container.appendChild(link);

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -235,6 +235,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   #shouldRenderLazily = false;
   #lazyRenderObserver?: IntersectionObserver;
   #lazyRenderCallbacks = new WeakMap<Element, () => void>();
+  #updateId = 0;
 
   constructor(computedStyleModel: ComputedStyle.ComputedStyleModel.ComputedStyleModel) {
     super(computedStyleModel, {delegatesFocus: true, useShadowDom: true, classes: ['flex-none']});
@@ -616,9 +617,15 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       this.dispatchEventToListeners(Events.INITIAL_UPDATE_COMPLETED);
     }
 
-    this.nodeStylesUpdatedForTest((this.node() as SDK.DOMModel.DOMNode), true);
+    this.#updateId += 1;
+    const currentUpdateId = this.#updateId;
 
-    this.dispatchEventToListeners(Events.STYLES_UPDATE_COMPLETED, {hasMatchedStyles: this.hasMatchedStyles});
+    void UI.Widget.Widget.allUpdatesComplete.then(() => {
+      if (this.#updateId === currentUpdateId) {
+        this.nodeStylesUpdatedForTest((this.node() as SDK.DOMModel.DOMNode), true);
+        this.dispatchEventToListeners(Events.STYLES_UPDATE_COMPLETED, {hasMatchedStyles: this.hasMatchedStyles});
+      }
+    });
   }
 
   #getRegisteredPropertyDetails(matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles, variableName: string):

package/front_end/panels/issues/AffectedResourcesView.ts

@@ -252,7 +252,7 @@ export abstract class AffectedResourcesView extends UI.TreeOutline.TreeElement {
       const linkifier = new Components.Linkifier.Linkifier(UI.UIUtils.MaxLengthForDisplayedURLsInConsole);
       const sourceAnchor = linkifier.linkifyScriptLocation(
           target || null, sourceLocation.scriptId || null, sourceLocation.url as Platform.DevToolsPath.UrlString,
-          sourceLocation.lineNumber, {columnNumber: sourceLocation.columnNumber, inlineFrameIndex: 0});
+          sourceLocation.lineNumber, {columnNumber: sourceLocation.columnNumber});
       sourceAnchor.setAttribute('jslog', `${VisualLogging.link('source-location').track({click: true})}`);
       sourceCodeLocation.appendChild(sourceAnchor);
     }

package/front_end/panels/issues/AffectedSourcesView.ts

@@ -39,7 +39,7 @@ export class AffectedSourcesView extends AffectedResourcesView {
     const cellElement = document.createElement('td');
     // TODO(chromium:1072331): Check feasibility of plumping through scriptId for `linkifyScriptLocation`
     //                         to support source maps and formatted scripts.
-    const linkifierURLOptions = {columnNumber, lineNumber, tabStop: true, showColumnNumber: false, inlineFrameIndex: 0};
+    const linkifierURLOptions = {columnNumber, lineNumber, tabStop: true, showColumnNumber: false};
     // An element created with linkifyURL can subscribe to the events
     // 'click' neither 'keydown' if that key is the 'Enter' key.
     // Also, this element has a context menu, so we should be able to

package/front_end/panels/lighthouse/LighthouseReportRenderer.ts

@@ -198,7 +198,6 @@ export class LighthouseReportRenderer {
         lineNumber: line,
         columnNumber: column,
         showColumnNumber: false,
-        inlineFrameIndex: 0,
         maxLength: MaxLengthForLinks,
       });
       UI.Tooltip.Tooltip.install(origHTMLElement, '');

package/front_end/panels/mobile_throttling/ThrottlingSettingsTab.ts

@@ -180,10 +180,20 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 /**
  * This promise resolves after the first compute pressure record is observed.
  * The object it returns is always up-to-date with the most recent record observed.
+ *
+ * Note: The returned value measures the host machine's compute pressure. When
+ * debugging a remote device, this may trigger irrelevant high-pressure warnings.
  */
 function createComputePressurePromise(): Promise<{state: string}> {
   const result = {state: ''};
 
+  // @ts-expect-error typescript/lib version needs to be updated.
+  if (typeof PressureObserver === 'undefined') {
+    // The Compute Pressure API is used only for showing warnings to the user.
+    // If it's unavailable, resolve immediately to proceed without warnings.
+    return Promise.resolve(result);
+  }
+
   return new Promise(resolve => {
     // @ts-expect-error typescript/lib version needs to be updated.
     const observer = new PressureObserver(records => {

package/front_end/panels/network/NetworkDataGridNode.ts

@@ -1515,8 +1515,7 @@ export class NetworkRequestNode extends NetworkNode {
           this.linkifiedInitiatorAnchor = linkifier.linkifyStackTraceTopFrame(target, initiator.stack);
         } else {
           this.linkifiedInitiatorAnchor = linkifier.linkifyScriptLocation(
-              target, initiator.scriptId, initiator.url, initiator.lineNumber,
-              {columnNumber: initiator.columnNumber, inlineFrameIndex: 0});
+              target, initiator.scriptId, initiator.url, initiator.lineNumber, {columnNumber: initiator.columnNumber});
         }
         UI.Tooltip.Tooltip.install((this.linkifiedInitiatorAnchor), '');
         cell.appendChild(this.linkifiedInitiatorAnchor);