chrome-devtools-frontend 1.0.1537268 → 1.0.1538310

package/front_end/models/ai_code_generation/debug.ts

@@ -0,0 +1,30 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @file Local debugging utilities.
+ */
+
+export function isDebugMode(): boolean {
+  return Boolean(localStorage.getItem('debugAiCodeGenerationEnabled'));
+}
+
+export function debugLog(...log: unknown[]): void {
+  if (!isDebugMode()) {
+    return;
+  }
+
+  // eslint-disable-next-line no-console
+  console.log(...log);
+}
+
+function setDebugAiCodeGenerationEnabled(enabled: boolean): void {
+  if (enabled) {
+    localStorage.setItem('debugAiCodeGenerationEnabled', 'true');
+  } else {
+    localStorage.removeItem('debugAiCodeGenerationEnabled');
+  }
+}
+// @ts-expect-error
+globalThis.setDebugAiCodeGenerationEnabled = setDebugAiCodeGenerationEnabled;

package/front_end/models/cpu_profile/ProfileTreeModel.ts

@@ -13,7 +13,7 @@ export class ProfileNode {
   id: number;
   parent: ProfileNode|null;
   children: this[];
-  functionName: string;
+  originalFunctionName: string|null = null;
   depth!: number;
   deoptReason!: string|null;
   constructor(callFrame: Protocol.Runtime.CallFrame) {
@@ -22,7 +22,6 @@ export class ProfileNode {
     this.self = 0;
     this.total = 0;
     this.id = 0;
-    this.functionName = callFrame.functionName;
     this.parent = null;
     this.children = [];
   }
@@ -43,11 +42,12 @@ export class ProfileNode {
     return this.callFrame.columnNumber;
   }
 
-  setFunctionName(name: string|null): void {
-    if (name === null) {
-      return;
-    }
-    this.functionName = name;
+  get functionName(): string {
+    return this.originalFunctionName ?? this.callFrame.functionName;
+  }
+
+  setOriginalFunctionName(name: string|null): void {
+    this.originalFunctionName = name;
   }
 }
 

package/front_end/models/trace_source_maps_resolver/SourceMapsResolver.ts

@@ -173,7 +173,7 @@ export class SourceMapsResolver extends EventTarget {
           const resolvedFunctionName =
               await SourceMapScopes.NamesResolver.resolveProfileFrameFunctionName(node.callFrame, target);
           updatedMappings ||= Boolean(resolvedFunctionName);
-          node.setFunctionName(resolvedFunctionName);
+          node.setOriginalFunctionName(resolvedFunctionName);
 
           const debuggerModel = target.model(SDK.DebuggerModel.DebuggerModel);
           const script = debuggerModel?.scriptForId(node.scriptId) || null;

package/front_end/panels/application/PreloadingTreeElement.ts

@@ -8,7 +8,7 @@ import type * as SDK from '../../core/sdk/sdk.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 
 import {ApplicationPanelTreeElement, ExpandableApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
-import type * as PreloadingHelper from './preloading/helper/helper.js';
+import * as PreloadingHelper from './preloading/helper/helper.js';
 import {PreloadingAttemptView, PreloadingRuleSetView, PreloadingSummaryView} from './preloading/PreloadingView.js';
 import type {ResourcesPanel} from './ResourcesPanel.js';
 
@@ -125,7 +125,15 @@ export class PreloadingSummaryTreeElement extends ExpandableApplicationPanelTree
     this.#attempt.initialize(model);
 
     // Show the view if the model was initialized after selection.
-    if (this.#selected && !this.#view) {
+    // However, if the user last viewed this page and clicked into Rules or
+    // Speculations, we ensure that we instead show those pages.
+    if (this.#attempt.selected) {
+      const filter = new PreloadingHelper.PreloadingForward.AttemptViewWithFilter(null);
+      this.expandAndRevealAttempts(filter);
+    } else if (this.#ruleSet.selected) {
+      const filter = new PreloadingHelper.PreloadingForward.RuleSetView(null);
+      this.expandAndRevealRuleSet(filter);
+    } else if (this.#selected && !this.#view) {
       this.onselect(false);
     }
   }

package/front_end/panels/application/StorageView.ts

@@ -12,6 +12,7 @@ import type * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as uiI18n from '../../ui/i18n/i18n.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
+import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
@@ -207,7 +208,7 @@ export class StorageView extends UI.Widget.VBox {
     this.clearButton.id = 'storage-view-clear-button';
     clearButtonSection.appendChild(this.clearButton);
 
-    const includeThirdPartyCookiesCheckbox = UI.SettingsUI.createSettingCheckbox(
+    const includeThirdPartyCookiesCheckbox = SettingsUI.SettingsUI.createSettingCheckbox(
         i18nString(UIStrings.includingThirdPartyCookies), this.includeThirdPartyCookiesSetting);
     includeThirdPartyCookiesCheckbox.classList.add('include-third-party-cookies');
     clearButtonSection.appendChild(includeThirdPartyCookiesCheckbox);
@@ -280,7 +281,7 @@ export class StorageView extends UI.Widget.VBox {
     const row = section.appendRow();
     const setting = this.settings.get(settingName);
     if (setting) {
-      row.appendChild(UI.SettingsUI.createSettingCheckbox(title, setting));
+      row.appendChild(SettingsUI.SettingsUI.createSettingCheckbox(title, setting));
     }
   }
 

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

@@ -5,7 +5,7 @@
 import '../../../ui/components/chrome_link/chrome_link.js';
 import '../../../ui/components/expandable_list/expandable_list.js';
 import '../../../ui/components/report_view/report_view.js';
-import '../../../ui/components/tree_outline/tree_outline.js';
+import '../../../ui/legacy/legacy.js';
 
 import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';
@@ -15,7 +15,6 @@ import * as Protocol from '../../../generated/protocol.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import type * as ExpandableList from '../../../ui/components/expandable_list/expandable_list.js';
 import type * as ReportView from '../../../ui/components/report_view/report_view.js';
-import type * as TreeOutline from '../../../ui/components/tree_outline/tree_outline.js';
 import * as Components from '../../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import {html, type LitTemplate, nothing, render, type TemplateResult} from '../../../ui/lit/lit.js';
@@ -213,22 +212,23 @@ function maybeRenderFrameTree(
     return nothing;
   }
 
-  function treeNodeRenderer(node: TreeOutline.TreeOutlineUtils.TreeNode<FrameTreeNodeData>): TemplateResult {
+  function renderFrameTreeNode(node: FrameTreeNodeData): TemplateResult {
     // clang-format off
     return html`
-      <div class="text-ellipsis">
-        ${node.treeNodeData.iconName ? html`
-          <devtools-icon class="inline-icon extra-large" .name=${node.treeNodeData.iconName} style="margin-bottom: -3px;">
+      <li role="treeitem" class="text-ellipsis">
+        ${node.iconName ? html`
+          <devtools-icon class="inline-icon extra-large" .name=${node.iconName} style="margin-bottom: -3px;">
           </devtools-icon>
         ` : nothing}
-        ${node.treeNodeData.text}
-      </div>`;
+        ${node.text}
+        ${node.children?.length ? html`
+          <ul role="group" hidden>
+            ${node.children.map(child => renderFrameTreeNode(child))}
+          </ul>` : nothing}
+      </li>`;
     // clang-format on
   }
 
-  const frameTreeNode = buildFrameTree(frameTreeData.node);
-  // Override the icon for the outermost frame.
-  frameTreeNode.treeNodeData.iconName = 'frame';
   let title = '';
   // The translation pipeline does not support nested plurals. We avoid this
   // here by pulling out the logic for one of the plurals into code instead.
@@ -237,49 +237,31 @@ function maybeRenderFrameTree(
   } else {
     title = i18nString(UIStrings.issuesInMultipleFrames, {n: frameTreeData.issueCount, m: frameTreeData.frameCount});
   }
-  const root: TreeOutline.TreeOutlineUtils.TreeNode<FrameTreeNodeData> = {
-    treeNodeData: {
-      text: title,
-    },
-    id: 'root',
-    children: () => Promise.resolve([frameTreeNode]),
-  };
-
   // clang-format off
   return html`
     <devtools-report-key jslog=${VisualLogging.section('frames')}>${i18nString(UIStrings.framesTitle)}</devtools-report-key>
     <devtools-report-value>
-      <devtools-tree-outline .data=${{
-        tree: [root],
-        defaultRenderer: treeNodeRenderer,
-        compact: true,
-      } as TreeOutline.TreeOutline.TreeOutlineData<FrameTreeNodeData>}>
-      </devtools-tree-outline>
+      <devtools-tree .template=${html`
+        <ul role="tree">
+          <li role="treeitem" class="text-ellipsis">
+            ${title}
+            <ul role="group">
+              ${renderFrameTreeNode(frameTreeData.node)}
+            </ul>
+          </li>
+        </ul>
+      `}>
+      </devtools-tree>
     </devtools-report-value>`;
   // clang-format on
 }
 
-let nextNodeId = 0;
-
-function buildFrameTree(data: FrameTreeNodeData): TreeOutline.TreeOutlineUtils.TreeNode<FrameTreeNodeData> {
-  const children = data.children;
-  const node = {
-    treeNodeData: {
-      text: data.text,
-      ...(data.iconName ? {iconName: data.iconName} : {}),
-    },
-    ...(children?.length ? {children: () => Promise.resolve(children.map(child => buildFrameTree(child)))} : {}),
-    id: String(nextNodeId++),
-  };
-  return node;
-}
-
 function renderBackForwardCacheStatus(status: boolean|undefined): TemplateResult {
   switch (status) {
     case true:
       // clang-format off
       return html`
-        <devtools-report-section class="cache-status-section" tabindex="-1">
+        <devtools-report-section autofocus tabindex="-1">
           <div class="status extra-large">
             <devtools-icon class="inline-icon extra-large" name="check-circle" style="color: var(--icon-checkmark-green);">
             </devtools-icon>
@@ -290,7 +272,7 @@ function renderBackForwardCacheStatus(status: boolean|undefined): TemplateResult
     case false:
       // clang-format off
       return html`
-        <devtools-report-section class="cache-status-section" tabindex="-1">
+        <devtools-report-section autofocus tabindex="-1">
           <div class="status">
             <devtools-icon class="inline-icon extra-large" name="clear">
             </devtools-icon>
@@ -301,7 +283,7 @@ function renderBackForwardCacheStatus(status: boolean|undefined): TemplateResult
   }
   // clang-format off
   return html`
-    <devtools-report-section class="cache-status-section" tabindex="-1">
+    <devtools-report-section autofocus tabindex="-1">
       ${i18nString(UIStrings.unknown)}
     </devtools-report-section>`;
   // clang-format on
@@ -477,7 +459,7 @@ export class BackForwardCacheView extends UI.Widget.Widget {
   #view: View;
 
   constructor(view = DEFAULT_VIEW) {
-    super({useShadowDom: true});
+    super({useShadowDom: true, delegatesFocus: true});
     this.#view = view;
     this.#getMainResourceTreeModel()?.addEventListener(
         SDK.ResourceTreeModel.Events.PrimaryPageChanged, this.requestUpdate, this);
@@ -497,13 +479,17 @@ export class BackForwardCacheView extends UI.Widget.Widget {
 
   override async performUpdate(): Promise<void> {
     const reasonToFramesMap = new Map<Protocol.Page.BackForwardCacheNotRestoredReason, string[]>();
-    const explanationTree = this.#getMainFrame()?.backForwardCacheDetails?.explanationsTree;
+    const frame = this.#getMainFrame();
+    const explanationTree = frame?.backForwardCacheDetails?.explanationsTree;
     if (explanationTree) {
       this.#buildReasonToFramesMap(explanationTree, {blankCount: 1}, reasonToFramesMap);
     }
+    const frameTreeData = this.#buildFrameTreeDataRecursive(explanationTree, {blankCount: 1});
+    // Override the icon for the outermost frame.
+    frameTreeData.node.iconName = 'frame';
     const viewInput: ViewInput = {
-      frame: this.#getMainFrame(),
-      frameTreeData: this.#buildFrameTreeDataRecursive(explanationTree, {blankCount: 1}),
+      frame,
+      frameTreeData,
       reasonToFramesMap,
       screenStatus: this.#screenStatus,
       navigateAwayAndBack: this.#navigateAwayAndBack.bind(this),
@@ -519,10 +505,7 @@ export class BackForwardCacheView extends UI.Widget.Widget {
     this.requestUpdate();
     void this.updateComplete.then(() => {
       UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.testCompleted));
-      const resultsSection = this.contentElement?.querySelector('.cache-status-section') as HTMLElement;
-      if (resultsSection) {
-        resultsSection.focus();
-      }
+      this.contentElement.focus();
     });
   }