chrome-devtools-frontend 1.0.1585538 → 1.0.1586699

package/front_end/panels/elements/StylesAiCodeCompletionProvider.ts

@@ -0,0 +1,69 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+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 AiCodeCompletion from '../../models/ai_code_completion/ai_code_completion.js';
+import type * as TextEditor from '../../ui/components/text_editor/text_editor.js';
+
+export class StylesAiCodeCompletionProvider {
+  #aidaClient: Host.AidaClient.AidaClient = new Host.AidaClient.AidaClient();
+  #aiCodeCompletionSetting = Common.Settings.Settings.instance().createSetting('ai-code-completion-enabled', false);
+  #aiCodeCompletion?: AiCodeCompletion.AiCodeCompletion.AiCodeCompletion;
+  #aiCodeCompletionConfig?: TextEditor.AiCodeCompletionProvider.AiCodeCompletionConfig;
+
+  #boundOnUpdateAiCodeCompletionState = this.#updateAiCodeCompletionState.bind(this);
+
+  private constructor(aiCodeCompletionConfig: TextEditor.AiCodeCompletionProvider.AiCodeCompletionConfig) {
+    const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();
+    if (!AiCodeCompletion.AiCodeCompletion.AiCodeCompletion.isAiCodeCompletionStylesEnabled(devtoolsLocale.locale)) {
+      throw new Error('AI code completion feature in Styles is not enabled.');
+    }
+    this.#aiCodeCompletionConfig = aiCodeCompletionConfig;
+    Host.AidaClient.HostConfigTracker.instance().addEventListener(
+        Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#boundOnUpdateAiCodeCompletionState);
+    this.#aiCodeCompletionSetting.addChangeListener(this.#boundOnUpdateAiCodeCompletionState);
+    void this.#updateAiCodeCompletionState();
+  }
+
+  static createInstance(aiCodeCompletionConfig: TextEditor.AiCodeCompletionProvider.AiCodeCompletionConfig):
+      StylesAiCodeCompletionProvider {
+    return new StylesAiCodeCompletionProvider(aiCodeCompletionConfig);
+  }
+
+  #setupAiCodeCompletion(): void {
+    if (!this.#aiCodeCompletionConfig) {
+      return;
+    }
+    if (this.#aiCodeCompletion) {
+      // early return as this means that code completion was previously setup
+      return;
+    }
+    this.#aiCodeCompletion = new AiCodeCompletion.AiCodeCompletion.AiCodeCompletion(
+        {aidaClient: this.#aidaClient}, this.#aiCodeCompletionConfig.panel, undefined,
+        this.#aiCodeCompletionConfig.completionContext.stopSequences);
+    this.#aiCodeCompletionConfig.onFeatureEnabled();
+  }
+
+  #cleanupAiCodeCompletion(): void {
+    if (!this.#aiCodeCompletion) {
+      // early return as this means there is no code completion to clean up
+      return;
+    }
+    this.#aiCodeCompletion = undefined;
+    this.#aiCodeCompletionConfig?.onFeatureDisabled();
+  }
+
+  async #updateAiCodeCompletionState(): Promise<void> {
+    const aidaAvailability = await Host.AidaClient.AidaClient.checkAccessPreconditions();
+    const isAvailable = aidaAvailability === Host.AidaClient.AidaAccessPreconditions.AVAILABLE;
+    const isEnabled = this.#aiCodeCompletionSetting.get();
+    if (isAvailable && isEnabled) {
+      this.#setupAiCodeCompletion();
+    } else {
+      this.#cleanupAiCodeCompletion();
+    }
+  }
+}

package/front_end/panels/elements/elements.ts

@@ -4,7 +4,6 @@
 
 import './InspectElementModeController.js';
 import './ColorSwatchPopoverIcon.js';
-
 import './DOMPath.js';
 import './ElementsSidebarPane.js';
 import './ElementsTreeElement.js';
@@ -20,6 +19,7 @@ import './NodeStackTraceWidget.js';
 import './StylePropertiesSection.js';
 import './StylePropertyHighlighter.js';
 import './StylesSidebarPane.js';
+import './StylesAiCodeCompletionProvider.js';
 import './StylePropertyTreeElement.js';
 import './ComputedStyleWidget.js';
 import './CSSRuleValidator.js';
@@ -59,6 +59,7 @@ import * as StylePropertiesSection from './StylePropertiesSection.js';
 import * as StylePropertyHighlighter from './StylePropertyHighlighter.js';
 import * as StylePropertyTreeElement from './StylePropertyTreeElement.js';
 import * as StylePropertyUtils from './StylePropertyUtils.js';
+import * as StylesAiCodeCompletionProvider from './StylesAiCodeCompletionProvider.js';
 import * as StylesSidebarPane from './StylesSidebarPane.js';
 import * as TopLayerContainer from './TopLayerContainer.js';
 import * as WebCustomData from './WebCustomData.js';
@@ -94,6 +95,7 @@ export {
   StylePropertyHighlighter,
   StylePropertyTreeElement,
   StylePropertyUtils,
+  StylesAiCodeCompletionProvider,
   StylesSidebarPane,
   TopLayerContainer,
   WebCustomData,

package/front_end/panels/network/RequestInitiatorView.ts

@@ -39,8 +39,6 @@ export interface ViewInput {
   initiatorGraph: Logs.NetworkLog.InitiatorGraph;
   stackTrace: StackTrace.StackTrace.StackTrace|null;
   request: SDK.NetworkRequest.NetworkRequest;
-  linkifier: Components.Linkifier.Linkifier;
-  target?: SDK.Target.Target;
 }
 
 export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement): void => {
@@ -68,8 +66,6 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
         <ul role="group">
           <li role="treeitem">
             <devtools-widget .widgetConfig=${widgetConfig(Components.JSPresentationUtils.StackTracePreviewContent, {
-      target: input.target,
-      linkifier: input.linkifier,
       options: {tabStops: true},
       stackTrace: input.stackTrace,
     })}></devtools-widget>
@@ -165,7 +161,6 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
 type View = typeof DEFAULT_VIEW;
 
 export class RequestInitiatorView extends UI.Widget.VBox {
-  private readonly linkifier: Components.Linkifier.Linkifier;
   private readonly request: SDK.NetworkRequest.NetworkRequest;
   #view: View;
 
@@ -173,7 +168,6 @@ export class RequestInitiatorView extends UI.Widget.VBox {
     super({jslog: `${VisualLogging.pane('initiator').track({resize: true})}`});
 
     this.element.classList.add('request-initiator-view');
-    this.linkifier = new Components.Linkifier.Linkifier();
     this.request = request;
     this.#view = view;
   }
@@ -192,8 +186,8 @@ export class RequestInitiatorView extends UI.Widget.VBox {
     const networkManager = SDK.NetworkManager.NetworkManager.forRequest(request);
     const target = networkManager?.target() ?? targetManager.primaryPageTarget() ?? targetManager.rootTarget();
     let stackTrace: StackTrace.StackTrace.StackTrace|null = null;
-    const preview = new Components.JSPresentationUtils.StackTracePreviewContent(
-        undefined, target ?? undefined, linkifier, {tabStops: focusableLink});
+    const preview = new Components.JSPresentationUtils.StackTracePreviewContent();
+    preview.options = {tabStops: focusableLink};
     if (target) {
       stackTrace = await Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()
                        .createStackTraceFromProtocolRuntime(initiator.stack, target);
@@ -219,8 +213,6 @@ export class RequestInitiatorView extends UI.Widget.VBox {
       initiatorGraph,
       stackTrace,
       request: this.request,
-      linkifier: this.linkifier,
-      target: target || undefined,
     };
 
     this.#view(viewInput, undefined, this.contentElement);

package/front_end/panels/network/components/RequestHeadersView.ts

@@ -195,6 +195,7 @@ export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableCom
       // clang-format off
       render(html`
         <style>${requestHeadersViewStyles}</style>
+        <style>${Input.checkboxStyles}</style>
         ${this.#renderGeneralSection()}
         ${this.#renderEarlyHintsHeaders()}
         ${this.#renderResponseHeaders()}
@@ -216,31 +217,22 @@ export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableCom
     };
 
     // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
-    return html`
-      <devtools-request-headers-category
-        @togglerawevent=${toggleShowRaw}
-        .data=${{
-        name: 'early-hints-headers',
-        title: i18nString(UIStrings.earlyHintsHeaders),
-        headerCount: this.#request.earlyHintsHeaders.length,
-        checked: undefined,
-        additionalContent: undefined,
-        forceOpen: this.#toReveal?.section === NetworkForward.UIRequestLocation.UIHeaderSection.EARLY_HINTS,
-        loggingContext: 'early-hints-headers',
-      } as CategoryData}
-        aria-label=${i18nString(UIStrings.earlyHintsHeaders)}
-      >
-        ${this.#showResponseHeadersText ?
-        this.#renderRawHeaders(this.#request.responseHeadersText, true) : html`
+    return renderCategory({
+      onToggleRawHeaders: toggleShowRaw,
+      name: 'early-hints-headers',
+      title: i18nString(UIStrings.earlyHintsHeaders),
+      headerCount: this.#request.earlyHintsHeaders.length,
+      checked: undefined,
+      additionalContent: undefined,
+      forceOpen: this.#toReveal?.section === NetworkForward.UIRequestLocation.UIHeaderSection.EARLY_HINTS,
+      loggingContext: 'early-hints-headers',
+      contents: this.#showResponseHeadersText ? this.#renderRawHeaders(this.#request.responseHeadersText, true) : html`
           <devtools-early-hints-header-section .data=${{
-            request: this.#request,
-            toReveal: this.#toReveal,
-          } as ResponseHeaderSectionData}></devtools-early-hints-header-section>
-        `}
-      </devtools-request-headers-category>
-    `;
-    // clang-format on
+        request: this.#request,
+        toReveal: this.#toReveal,
+      } as ResponseHeaderSectionData}></devtools-early-hints-header-section>
+        `
+    });
   }
 
   #renderResponseHeaders(): Lit.LitTemplate {
@@ -253,32 +245,25 @@ export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableCom
       void this.render();
     };
 
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
-    return html`
-      <devtools-request-headers-category
-        @togglerawevent=${toggleShowRaw}
-        .data=${{
-          name: 'response-headers',
-          title: i18nString(UIStrings.responseHeaders),
-          headerCount: this.#request.sortedResponseHeaders.length,
-          checked: this.#request.responseHeadersText ? this.#showResponseHeadersText : undefined,
-          additionalContent: this.#renderHeaderOverridesLink(),
-          forceOpen: this.#toReveal?.section === NetworkForward.UIRequestLocation.UIHeaderSection.RESPONSE,
-          loggingContext: 'response-headers',
-        } as CategoryData}
-        aria-label=${i18nString(UIStrings.responseHeaders)}
-      >
-        ${this.#showResponseHeadersText ?
-            this.#renderRawHeaders(this.#request.responseHeadersText, true) : html`
+    return renderCategory({
+      onToggleRawHeaders: toggleShowRaw,
+      name: 'response-headers',
+      title: i18nString(UIStrings.responseHeaders),
+      headerCount: this.#request.sortedResponseHeaders.length,
+      checked: this.#request.responseHeadersText ? this.#showResponseHeadersText : undefined,
+      additionalContent: this.#renderHeaderOverridesLink(),
+      forceOpen: this.#toReveal?.section === NetworkForward.UIRequestLocation.UIHeaderSection.RESPONSE,
+      loggingContext: 'response-headers',
+      contents: this.#showResponseHeadersText ?
+          this.#renderRawHeaders(this.#request.responseHeadersText, true) :
+          html`
           <devtools-response-header-section .data=${{
             request: this.#request,
             toReveal: this.#toReveal,
-          } as ResponseHeaderSectionData} jslog=${VisualLogging.section('response-headers')}></devtools-response-header-section>
-        `}
-      </devtools-request-headers-category>
-    `;
-    // clang-format on
+          } as ResponseHeaderSectionData} jslog=${
+              VisualLogging.section('response-headers')}></devtools-response-header-section>
+        `
+    });
   }
 
   #renderHeaderOverridesLink(): Lit.LitTemplate {
@@ -348,31 +333,22 @@ export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableCom
       void this.render();
     };
 
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
-    return html`
-      <devtools-request-headers-category
-        @togglerawevent=${toggleShowRaw}
-        .data=${{
-          name: 'request-headers',
-          title: i18nString(UIStrings.requestHeaders),
-          headerCount: this.#request.requestHeaders().length,
-          checked: requestHeadersText? this.#showRequestHeadersText : undefined,
-          forceOpen: this.#toReveal?.section === NetworkForward.UIRequestLocation.UIHeaderSection.REQUEST,
-          loggingContext: 'request-headers',
-        } as CategoryData}
-        aria-label=${i18nString(UIStrings.requestHeaders)}
-      >
-        ${(this.#showRequestHeadersText && requestHeadersText) ?
-            this.#renderRawHeaders(requestHeadersText, false) : html`
+    return renderCategory({
+      onToggleRawHeaders: toggleShowRaw,
+      name: 'request-headers',
+      title: i18nString(UIStrings.requestHeaders),
+      headerCount: this.#request.requestHeaders().length,
+      checked: requestHeadersText ? this.#showRequestHeadersText : undefined,
+      forceOpen: this.#toReveal?.section === NetworkForward.UIRequestLocation.UIHeaderSection.REQUEST,
+      loggingContext: 'request-headers',
+      contents: (this.#showRequestHeadersText && requestHeadersText) ?
+          this.#renderRawHeaders(requestHeadersText, false) :
+          html`
           <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(RequestHeaderSection, {
             request: this.#request,
             toReveal: this.#toReveal,
-          })} jslog=${VisualLogging.section('request-headers')}></devtools-widget>
-        `}
-      </devtools-request-headers-category>
-    `;
-    // clang-format on
+          })} jslog=${VisualLogging.section('request-headers')}></devtools-widget>`
+    });
   }
 
   #renderRawHeaders(rawHeadersText: string, forResponseHeaders: boolean): Lit.TemplateResult {
@@ -466,19 +442,13 @@ export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableCom
 
     const statusText = [this.#request.statusCode, this.#request.getInferredStatusText(), comment].join(' ');
 
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
-    return html`
-      <devtools-request-headers-category
-        .data=${{
-          name: 'general',
-          title: i18nString(UIStrings.general),
-          forceOpen: this.#toReveal?.section === NetworkForward.UIRequestLocation.UIHeaderSection.GENERAL,
-          loggingContext: 'general',
-        } as CategoryData}
-        aria-label=${i18nString(UIStrings.general)}
-      >
-      <div jslog=${VisualLogging.section('general')}>
+    return renderCategory({
+      name: 'general',
+      title: i18nString(UIStrings.general),
+      forceOpen: this.#toReveal?.section === NetworkForward.UIRequestLocation.UIHeaderSection.GENERAL,
+      loggingContext: 'general',
+      // clang-format off
+          contents: html`<div jslog=${VisualLogging.section('general')}>
         ${this.#renderGeneralRow(i18nString(UIStrings.requestUrl), this.#request.url(), 'request-url')}
         ${this.#request.statusCode? this.#renderGeneralRow(i18nString(UIStrings.requestMethod),
             this.#request.requestMethod, 'request-method') : Lit.nothing}
@@ -488,9 +458,7 @@ export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableCom
             this.#request.remoteAddress(), 'remote-address') : Lit.nothing}
         ${this.#request.referrerPolicy()? this.#renderGeneralRow(i18nString(UIStrings.referrerPolicy),
             String(this.#request.referrerPolicy()), 'referrer-policy') : Lit.nothing}
-      </div>
-      </devtools-request-headers-category>
-    `;
+      </div>`});
     // clang-format on
   }
 
@@ -522,87 +490,53 @@ export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableCom
   }
 }
 
-export class ToggleRawHeadersEvent extends Event {
-  static readonly eventName = 'togglerawevent';
-
-  constructor() {
-    super(ToggleRawHeadersEvent.eventName, {});
-  }
-}
-
-export interface CategoryData {
-  name: string;
-  title: Common.UIString.LocalizedString;
-  headerCount?: number;
-  checked?: boolean;
-  additionalContent?: Lit.LitTemplate;
-  forceOpen?: boolean;
-  loggingContext: string;
-}
-
-export class Category extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
-  #expandedSetting?: Common.Settings.Setting<boolean>;
-  #title: Common.UIString.LocalizedString = Common.UIString.LocalizedEmptyString;
-  #headerCount?: number = undefined;
-  #checked: boolean|undefined = undefined;
-  #additionalContent: Lit.LitTemplate|undefined = undefined;
-  #forceOpen: boolean|undefined = undefined;
-  #loggingContext = '';
-
-  set data(data: CategoryData) {
-    this.#title = data.title;
-    this.#expandedSetting =
-        Common.Settings.Settings.instance().createSetting('request-info-' + data.name + '-category-expanded', true);
-    this.#headerCount = data.headerCount;
-    this.#checked = data.checked;
-    this.#additionalContent = data.additionalContent;
-    this.#forceOpen = data.forceOpen;
-    this.#loggingContext = data.loggingContext;
-    this.#render();
-  }
-
-  #onCheckboxToggle(): void {
-    this.dispatchEvent(new ToggleRawHeadersEvent());
-  }
-
-  #render(): void {
-    const isOpen = (this.#expandedSetting ? this.#expandedSetting.get() : true) || this.#forceOpen;
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
-    render(html`
-      <style>${requestHeadersViewStyles}</style>
-      <style>${Input.checkboxStyles}</style>
-      <details ?open=${isOpen} @toggle=${this.#onToggle}>
+function renderCategory(data: {
+  name: string,
+  title: Common.UIString.LocalizedString,
+  contents: Lit.LitTemplate,
+  loggingContext: string,
+  headerCount?: number,
+  checked?: boolean,
+  additionalContent?: Lit.LitTemplate,
+  forceOpen?: boolean,
+  onToggleRawHeaders?: () => void,
+}): Lit.LitTemplate {
+  const expandedSetting =
+      Common.Settings.Settings.instance().createSetting('request-info-' + data.name + '-category-expanded', true);
+
+  const isOpen = (expandedSetting ? expandedSetting.get() : true) || data.forceOpen;
+  // Disabled until https://crbug.com/1079231 is fixed.
+  // clang-format off
+  return html`
+      <details ?open=${isOpen} @toggle=${onToggle} aria-label=${data.title}>
         <summary
           class="header"
-          @keydown=${this.#onSummaryKeyDown}
-          jslog=${VisualLogging.sectionHeader().track({click: true}).context(this.#loggingContext)}
+          @keydown=${onSummaryKeyDown}
+          jslog=${VisualLogging.sectionHeader().track({click: true}).context(data.loggingContext)}
         >
           <div class="header-grid-container">
             <div>
-              ${this.#title}${this.#headerCount !== undefined ?
-                html`<span class="header-count"> (${this.#headerCount})</span>` :
+              ${data.title}${data.headerCount !== undefined ?
+                html`<span class="header-count"> (${data.headerCount})</span>` :
                 Lit.nothing
               }
             </div>
             <div class="hide-when-closed">
-              ${this.#checked !== undefined ? html`
-                <devtools-checkbox .checked=${this.#checked} @change=${this.#onCheckboxToggle}
+              ${data.checked !== undefined ? html`
+                <devtools-checkbox .checked=${data.checked} @change=${data.onToggleRawHeaders}
                          jslog=${VisualLogging.toggle('raw-headers').track({change: true})}>
                   ${i18nString(UIStrings.raw)}
               </devtools-checkbox>` : Lit.nothing}
             </div>
-            <div class="hide-when-closed">${this.#additionalContent}</div>
+            <div class="hide-when-closed">${data.additionalContent}</div>
           </div>
         </summary>
-        <slot></slot>
+        ${data.contents}
       </details>
-    `, this.#shadow, {host: this});
-    // clang-format on
-  }
+    `;
+  // clang-format on
 
-  #onSummaryKeyDown(event: KeyboardEvent): void {
+  function onSummaryKeyDown(event: KeyboardEvent): void {
     if (!event.target) {
       return;
     }
@@ -621,17 +555,15 @@ export class Category extends HTMLElement {
     }
   }
 
-  #onToggle(event: Event): void {
-    this.#expandedSetting?.set((event.target as HTMLDetailsElement).open);
+  function onToggle(event: Event): void {
+    expandedSetting?.set((event.target as HTMLDetailsElement).open);
   }
 }
 
 customElements.define('devtools-request-headers', RequestHeadersView);
-customElements.define('devtools-request-headers-category', Category);
 
 declare global {
   interface HTMLElementTagNameMap {
     'devtools-request-headers': RequestHeadersView;
-    'devtools-request-headers-category': Category;
   }
 }

package/front_end/panels/sources/CallStackSidebarPane.ts

@@ -253,15 +253,12 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
 
     let {maxAsyncStackChainDepth} = this;
     let hasMore = false;
-    let previousFragment: StackTrace.StackTrace.Fragment = this.#stackTrace.syncFragment;
     for (const asyncFragment of this.#stackTrace.asyncFragments) {
-      items.push(Item.createForAsyncHeader(asyncFragment, previousFragment));
+      items.push(Item.createForAsyncHeader(this.#stackTrace, asyncFragment));
       for (const frame of asyncFragment.frames) {
         items.push(Item.createForFrame(frame));
       }
 
-      previousFragment = asyncFragment;
-
       if (--maxAsyncStackChainDepth <= 0) {
         hasMore = asyncFragment !== this.#stackTrace.asyncFragments.at(-1);
         break;
@@ -546,9 +543,8 @@ export class Item {
   }
 
   static createForAsyncHeader(
-      fragment: StackTrace.StackTrace.AsyncFragment, previousFragment: StackTrace.StackTrace.Fragment): Item {
-    const description = UI.UIUtils.asyncStackTraceLabel(
-        fragment.description, previousFragment.frames.map(f => ({functionName: f.name ?? ''})));
+      stackTrace: StackTrace.StackTrace.StackTrace, fragment: StackTrace.StackTrace.AsyncFragment): Item {
+    const description = UI.UIUtils.asyncFragmentLabel(stackTrace, fragment);
     const item = new Item(description);
     item.isAsyncHeader = true;
     return item;

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -2498,10 +2498,6 @@ export class TimelineDetailsContentHelper {
    * contains any entries, and discards it if it's empty.
    */
   async createChildStackTraceElement(runtimeStackTrace: Protocol.Runtime.StackTrace): Promise<HTMLElement|null> {
-    if (!this.#linkifier) {
-      return null;
-    }
-
     // Fallback to the main page/root target. Maybe the main page has a source map we need.
     // Worst case the stack is identity mapped.
     const targetManager = SDK.TargetManager.TargetManager.instance();
@@ -2513,8 +2509,8 @@ export class TimelineDetailsContentHelper {
     const stackTrace =
         await Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().createStackTraceFromProtocolRuntime(
             runtimeStackTrace, target);
-    const callFrameContents = new LegacyComponents.JSPresentationUtils.StackTracePreviewContent(
-        undefined, target, this.#linkifier, {tabStops: true, showColumnNumber: true});
+    const callFrameContents = new LegacyComponents.JSPresentationUtils.StackTracePreviewContent();
+    callFrameContents.options = {tabStops: true, showColumnNumber: true};
     callFrameContents.stackTrace = stackTrace;
 
     await callFrameContents.updateComplete;

package/front_end/panels/utils/utils.ts

@@ -151,12 +151,20 @@ export class PanelUtils {
     }
 
     if (type === Common.ResourceType.resourceTypes.Image) {
+      // clang-format off
       return html`<div class="image icon">
-          <img class="image-network-icon-preview"
-               title=${iconTitleForRequest(request)}
-               alt=${iconTitleForRequest(request)}
-               ${ref(e => request.populateImageSource(e as HTMLImageElement))}>
-        </div>`;
+        <img
+          class="image-network-icon-preview"
+          title=${iconTitleForRequest(request)}
+          alt=${iconTitleForRequest(request)}
+          ${ref(el => {
+            if (el) {
+             void request.populateImageSource(el as HTMLImageElement);
+            }
+          })}
+        />
+      </div>`;
+      // clang-format on
     }
 
     // Exclude Manifest here because it has mimeType:application/json but it has its own icon

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: https://chromium.googlesource.com/chromium/src
 Version: N/A
-Revision: 1b64dcefe38cd6a1d49f95075bd448eae1c3cd57
+Revision: 649f914735bb39cbd9bfe68673921ced1cc2e71f
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/third_party/puppeteer/README.chromium

@@ -1,10 +1,10 @@
 Name: Puppeteer Core
 Short Name: Puppeteer Core
 URL: https://github.com/puppeteer/puppeteer/tree/main/packages/puppeteer-core
-Version: 24.37.3
+Version: 24.37.4
 License: Apache-2.0
 License File: LICENSE
-Revision: eee111bedbbf719ce27f356f4f5307646b13b0eb
+Revision: c771d9cc0c6c3611532e18d89291c2d734f736ab
 Security Critical: no
 Shipped: yes
 Update Mechanism: Autoroll

package/front_end/third_party/puppeteer/package/lib/cjs/puppeteer/cdp/FrameManager.js

@@ -267,7 +267,7 @@ class FrameManager extends EventEmitter_js_1.EventEmitter {
             frame.updateClient(target._session());
         }
         this.setupEventListeners(target._session());
-        void this.initialize(target._session(), frame);
+        void this.initialize(target._session(), frame).catch(util_js_1.debugError);
     }
     _deviceRequestPromptManager(client) {
         let manager = this.#deviceRequestPromptManagerMap.get(client);