chrome-devtools-frontend 1.0.1581449 → 1.0.1582745

package/front_end/panels/console_counters/WarningErrorCounter.ts

@@ -12,9 +12,11 @@ import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import type * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as IssueCounter from '../../ui/components/issue_counter/issue_counter.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {html, nothing, render} from '../../ui/lit/lit.js';
+import * as Lit from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
+const {html, nothing, render} = Lit;
+
 const UIStrings = {
   /**
    * @description The console error count in the Warning Error Counter shown in the main toolbar (top-left in DevTools). The error count refers to the number of errors currently present in the JavaScript console.
@@ -95,21 +97,25 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
 
   render(
       html`<div class="status-buttons"
-         ><icon-button
+         >${
+          errors + warnings ? html`<icon-button
             .data=${iconData}
             title=${consoleTitle}
-            class=${'small' + warnings || errors ? nothing as unknown as string : 'hidden'}
+            class=${'small'}
             jslog=${VisualLogging.counter('console').track({
-        click: true
-      })}
-         ></icon-button><devtools-issue-counter
-            class=${'main-toolbar' + (issues ? '' : ' hidden')}
+            click: true
+          })}
+         ></icon-button>` :
+                              nothing}${
+          issues ? html`<devtools-issue-counter
+            class=${'main-toolbar'}
             title=${issuesTitle}
             .data=${issueCounterData}
             jslog=${VisualLogging.counter('issue').track({
-        click: true
-      })}
-         ></devtools-issue-counter></div>`,
+            click: true
+          })}
+         ></devtools-issue-counter>` :
+                   nothing}</div>`,
       target);
 };
 

package/front_end/panels/elements/ComputedStyleWidget.ts

@@ -53,7 +53,7 @@ import {categorizePropertyName, type Category, DefaultCategoryOrder} from './Pro
 import {Renderer, rendererBase, type RenderingContext, StringRenderer, URLRenderer} from './PropertyRenderer.js';
 import {StylePropertiesSection} from './StylePropertiesSection.js';
 
-const {html} = Lit;
+const {html, render} = Lit;
 
 const UIStrings = {
   /**
@@ -197,7 +197,7 @@ const createTraceElement =
       return trace;
     };
 
-/** clang-format off **/
+// clang-format off
 class ColorRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.ColorMatch) {
   // clang-format on
   override render(match: SDK.CSSPropertyParserMatchers.ColorMatch, context: RenderingContext): Node[] {
@@ -261,21 +261,47 @@ type ComputedStyleData = {
   name: string,
 };
 
+interface ComputedStyleWidgetInput {
+  computedStylesTree: TreeOutline.TreeOutline.TreeOutline<ComputedStyleData>;
+  toolbar: HTMLElement;
+  hasMatches: boolean;
+  computedStyleModel: ComputedStyleModule.ComputedStyleModel.ComputedStyleModel;
+}
+
+type View = (input: ComputedStyleWidgetInput, output: null, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: View = (input, _output, target) => {
+  // clang-format off
+  render(html`
+    <div class="styles-sidebar-pane-toolbar">${input.toolbar}</div>
+    <div class="computed-style-tree-outline-container">
+      ${input.computedStylesTree}
+    </div>
+    ${!input.hasMatches ? html`<div class="gray-info-message">${i18nString(UIStrings.noMatchingProperty)}</div>` : ''}
+    <div class="platform-fonts-widget-container">
+      <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(PlatformFontsWidget, { sharedModel: input.computedStyleModel})}></devtools-widget>
+    </div>
+  `, target);
+  // clang-format on
+};
+
 export class ComputedStyleWidget extends UI.Widget.VBox {
   private computedStyleModel: ComputedStyleModule.ComputedStyleModel.ComputedStyleModel;
   private readonly showInheritedComputedStylePropertiesSetting: Common.Settings.Setting<boolean>;
   private readonly groupComputedStylesSetting: Common.Settings.Setting<boolean>;
   input: UI.Toolbar.ToolbarInput;
   private filterRegex: RegExp|null;
-  private readonly noMatchesElement: HTMLElement;
   private readonly linkifier: Components.Linkifier.Linkifier;
   private readonly imagePreviewPopover: ImagePreviewPopover;
 
   #computedStylesTree = new TreeOutline.TreeOutline.TreeOutline<ComputedStyleData>();
   #treeData?: TreeOutline.TreeOutline.TreeOutlineData<ComputedStyleData>;
+  readonly #view: View;
+  private readonly toolbarElement: HTMLElement;
 
   constructor(computedStyleModel: ComputedStyleModule.ComputedStyleModel.ComputedStyleModel) {
     super({useShadowDom: true});
+    this.#view = DEFAULT_VIEW;
     this.registerRequiredCSS(computedStyleSidebarPaneStyles);
 
     this.contentElement.classList.add('styles-sidebar-computed-style-widget');
@@ -295,8 +321,12 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
       this.requestUpdate();
     });
 
-    const hbox = this.contentElement.createChild('div', 'hbox styles-sidebar-pane-toolbar');
-    const toolbar = hbox.createChild('devtools-toolbar', 'styles-pane-toolbar');
+    this.toolbarElement = document.createElement('div');
+    this.toolbarElement.classList.add('hbox', 'styles-sidebar-pane-toolbar');
+    const toolbar = document.createElement('devtools-toolbar');
+    toolbar.classList.add('styles-pane-toolbar');
+    this.toolbarElement.appendChild(toolbar);
+
     const filterInput = new UI.Toolbar.ToolbarFilter(undefined, 1, 1, undefined, undefined, false);
     filterInput.addEventListener(UI.Toolbar.ToolbarInput.Event.TEXT_CHANGED, this.onFilterChanged, this);
     toolbar.appendToolbarItem(filterInput);
@@ -308,11 +338,6 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
     toolbar.appendToolbarItem(
         new UI.Toolbar.ToolbarSettingCheckbox(this.groupComputedStylesSetting, undefined, i18nString(UIStrings.group)));
 
-    this.noMatchesElement = this.contentElement.createChild('div', 'gray-info-message');
-    this.noMatchesElement.textContent = i18nString(UIStrings.noMatchingProperty);
-
-    this.contentElement.appendChild(this.#computedStylesTree);
-
     this.linkifier = new Components.Linkifier.Linkifier(maxLinkLength);
 
     this.imagePreviewPopover = new ImagePreviewPopover(this.contentElement, event => {
@@ -323,8 +348,7 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
       return null;
     }, () => this.computedStyleModel.node);
 
-    const fontsWidget = new PlatformFontsWidget(this.computedStyleModel);
-    fontsWidget.show(this.contentElement);
+    this.#updateView({hasMatches: true});
   }
 
   override onResize(): void {
@@ -342,11 +366,24 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
     UI.Context.Context.instance().setFlavor(ComputedStyleWidget, null);
   }
 
+  /**
+   * @param input.hasMatches Whether any properties matched the current filter (or if any properties exist at all).
+   */
+  #updateView({hasMatches}: {hasMatches: boolean}): void {
+    this.#view(
+        {
+          computedStylesTree: this.#computedStylesTree,
+          toolbar: this.toolbarElement,
+          hasMatches,
+          computedStyleModel: this.computedStyleModel,
+        },
+        null, this.contentElement);
+  }
+
   override async performUpdate(): Promise<void> {
-    const [nodeStyles, matchedStyles] =
-        await Promise.all([this.computedStyleModel.fetchComputedStyle(), this.fetchMatchedCascade()]);
+    const {computedStyle: nodeStyles, matchedStyles} = await this.computedStyleModel.fetchAllComputedStyleInfo();
     if (!nodeStyles || !matchedStyles) {
-      this.noMatchesElement.classList.remove('hidden');
+      this.#updateView({hasMatches: false});
       return;
     }
     const shouldGroupComputedStyles = this.groupComputedStylesSetting.get();
@@ -357,25 +394,6 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
     }
   }
 
-  private async fetchMatchedCascade(): Promise<SDK.CSSMatchedStyles.CSSMatchedStyles|null> {
-    const node = this.computedStyleModel.node;
-    if (!node || !this.computedStyleModel.cssModel()) {
-      return null;
-    }
-
-    const cssModel = this.computedStyleModel.cssModel();
-    if (!cssModel) {
-      return null;
-    }
-
-    return await cssModel.cachedMatchedCascadeForNode(node).then(validateStyles.bind(this));
-
-    function validateStyles(this: ComputedStyleWidget, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles|null):
-        SDK.CSSMatchedStyles.CSSMatchedStyles|null {
-      return matchedStyles && matchedStyles.node() === this.computedStyleModel.node ? matchedStyles : null;
-    }
-  }
-
   private async rebuildAlphabeticalList(
       nodeStyle: ComputedStyleModule.ComputedStyleModel.ComputedStyle,
       matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles): Promise<void> {
@@ -426,7 +444,7 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
     this.linkifier.reset();
     const cssModel = this.computedStyleModel.cssModel();
     if (!nodeStyle || !matchedStyles || !cssModel) {
-      this.noMatchesElement.classList.remove('hidden');
+      this.#updateView({hasMatches: false});
       return;
     }
 
@@ -648,7 +666,7 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
       defaultRenderer: this.#treeData.defaultRenderer,
       compact: this.#treeData.compact,
     };
-    this.noMatchesElement.classList.toggle('hidden', Boolean(tree.length));
+    this.#updateView({hasMatches: Boolean(tree.length)});
   }
 
   private async filterGroupLists(): Promise<void> {
@@ -675,7 +693,7 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
       compact: this.#treeData.compact,
     };
     await this.#computedStylesTree.expandRecursively(0);
-    this.noMatchesElement.classList.toggle('hidden', Boolean(tree.length));
+    this.#updateView({hasMatches: Boolean(tree.length)});
   }
 }
 

package/front_end/panels/elements/PlatformFontsWidget.ts

@@ -78,24 +78,37 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
 };
 
 export class PlatformFontsWidget extends UI.Widget.VBox {
-  private readonly sharedModel: ComputedStyle.ComputedStyleModel.ComputedStyleModel;
   readonly #view: View;
+  #sharedModel: ComputedStyle.ComputedStyleModel.ComputedStyleModel|null = null;
 
-  constructor(sharedModel: ComputedStyle.ComputedStyleModel.ComputedStyleModel, view: View = DEFAULT_VIEW) {
-    super({useShadowDom: true});
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
     this.#view = view;
     this.registerRequiredCSS(platformFontsWidgetStyles);
+  }
+
+  get sharedModel(): ComputedStyle.ComputedStyleModel.ComputedStyleModel|null {
+    return this.#sharedModel;
+  }
+
+  set sharedModel(model: ComputedStyle.ComputedStyleModel.ComputedStyleModel) {
+    if (model !== this.sharedModel) {
+      this.sharedModel?.removeEventListener(
+          ComputedStyle.ComputedStyleModel.Events.CSS_MODEL_CHANGED, this.requestUpdate, this);
+      this.sharedModel?.removeEventListener(
+          ComputedStyle.ComputedStyleModel.Events.COMPUTED_STYLE_CHANGED, this.requestUpdate, this);
+
+      model.addEventListener(ComputedStyle.ComputedStyleModel.Events.CSS_MODEL_CHANGED, this.requestUpdate, this);
+      model.addEventListener(ComputedStyle.ComputedStyleModel.Events.COMPUTED_STYLE_CHANGED, this.requestUpdate, this);
+    }
 
-    this.sharedModel = sharedModel;
-    this.sharedModel.addEventListener(
-        ComputedStyle.ComputedStyleModel.Events.CSS_MODEL_CHANGED, this.requestUpdate, this);
-    this.sharedModel.addEventListener(
-        ComputedStyle.ComputedStyleModel.Events.COMPUTED_STYLE_CHANGED, this.requestUpdate, this);
+    this.#sharedModel = model;
+    void this.requestUpdate();
   }
 
   override async performUpdate(): Promise<void> {
-    const cssModel = this.sharedModel.cssModel();
-    const node = this.sharedModel.node;
+    const cssModel = this.#sharedModel?.cssModel();
+    const node = this.#sharedModel?.node;
     if (!node || !cssModel) {
       this.#view({platformFonts: null}, {}, this.contentElement);
       return;

package/front_end/panels/greendev/GreenDevPanel.css

@@ -234,8 +234,49 @@
 }
 
 .green-dev-floaty-disclaimer {
-  font-size: 14px;
+  font-size: 15px;
   color: #666;
   text-align: center;
   margin-top: 8px;
+  position: relative; /* For tooltip positioning */
+}
+
+.disclaimer-link {
+  color: #666; /* Match text color */
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.disclaimer-tooltip {
+  display: none;
+  position: absolute;
+  bottom: 100%; /* Position above */
+  left: 50%;
+  transform: translateX(-50%);
+  width: 300px;
+  padding: 12px;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgb(0 0 0 / 20%);
+  z-index: 1000;
+  text-align: left;
+  font-size: 16px;
+  line-height: 1.4;
+  color: #333;
+  white-space: normal; /* Ensure text wraps */
+}
+
+.disclaimer-link:hover + .disclaimer-tooltip,
+.disclaimer-tooltip:hover {
+  display: block;
+}
+
+.learn-more-link {
+  color: #0b57d0;
+  text-decoration: none;
+}
+
+.learn-more-link:hover {
+  text-decoration: underline;
 }

package/front_end/panels/greendev/GreenDevPanel.ts

@@ -4,6 +4,8 @@
 /* eslint-disable @devtools/no-imperative-dom-api */
 
 import type * as Common from '../../core/common/common.js';
+import * as Host from '../../core/host/host.js';
+import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -186,7 +188,34 @@ export class GreenDevPanel extends UI.Panel.Panel {
 
       const disclaimer = document.createElement('div');
       disclaimer.className = 'green-dev-floaty-disclaimer';
-      disclaimer.textContent = 'Relevant data is sent to Google';
+
+      const link = document.createElement('span');
+      link.className = 'disclaimer-link';
+      link.textContent = 'Relevant data';
+      disclaimer.appendChild(link);
+
+      disclaimer.appendChild(document.createTextNode(' is sent to Google'));
+
+      const tooltip = document.createElement('div');
+      tooltip.className = 'disclaimer-tooltip';
+
+      tooltip.appendChild(document.createTextNode(
+          'Chat messages and any data the inspected page can access via Web APIs are sent to Google and may be seen by human reviewers to improve this feature. This is an experimental AI feature and won\'t always get it right.'));
+      tooltip.appendChild(document.createElement('br'));
+      tooltip.appendChild(document.createElement('br'));
+
+      const learnMore = document.createElement('a');
+      const href = 'https://developer.chrome.com/docs/devtools/ai-assistance' as Platform.DevToolsPath.UrlString;
+      learnMore.href = href;
+      learnMore.className = 'learn-more-link';
+      learnMore.textContent = 'Learn about AI in DevTools';
+      learnMore.addEventListener('click', event => {
+        event.preventDefault();
+        Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(href);
+      });
+      tooltip.appendChild(learnMore);
+
+      disclaimer.appendChild(tooltip);
       blueCard.appendChild(disclaimer);
 
       content.appendChild(blueCard);

package/front_end/panels/lighthouse/LighthouseStartView.ts

@@ -166,8 +166,6 @@ export class StartView extends UI.Widget.Widget {
         checkbox.setIndeterminate(true);
       }
     }
-    UI.ARIAUtils.markAsGroup(categoryFormElements);
-    UI.ARIAUtils.setLabel(categoryFormElements, i18nString(UIStrings.categories));
   }
 
   private render(): void {
@@ -194,10 +192,10 @@ export class StartView extends UI.Widget.Widget {
       <div class="lighthouse-form-elements" $="device-type-form-elements"></div>
     </div>
     <div class="lighthouse-form-categories">
-      <div class="lighthouse-form-section">
-        <div class="lighthouse-form-section-label">${i18nString(UIStrings.categories)}</div>
+      <fieldset class="lighthouse-form-section lighthouse-form-categories-fieldset">
+        <legend class="lighthouse-form-section-label">${i18nString(UIStrings.categories)}</legend>
         <div class="lighthouse-form-elements" $="categories-form-elements"></div>
-      </div>
+      </fieldset>
     </div>
   </div>
   <div $="warning-text" class="lighthouse-warning-text hidden"></div>

package/front_end/panels/lighthouse/lighthouseStartView.css

@@ -52,6 +52,12 @@
   flex: 1 1;
 }
 
+.lighthouse-form-categories-fieldset {
+  border: none;
+  margin: 0;
+  padding: 8px;
+}
+
 .lighthouse-form-section-label {
   margin: 7px 0;
   font-weight: 500;

package/front_end/panels/network/NetworkLogView.ts

@@ -1933,14 +1933,14 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
           const isThrottling = existingConditions &&
               existingConditions.conditions !== SDK.NetworkManager.BlockingConditions &&
               existingConditions.conditions !== SDK.NetworkManager.NoThrottlingConditions;
+          const croppedURL = Platform.StringUtilities.trimMiddle(urlPattern.constructorString, maxBlockedURLLength);
           blockingMenu.debugSection().appendItem(
-              isBlocking ? i18nString(UIStrings.unblockS, {PH1: urlPattern.constructorString}) :
-                           i18nString(UIStrings.blockRequestUrl),
+              isBlocking ? i18nString(UIStrings.unblockS, {PH1: croppedURL}) : i18nString(UIStrings.blockRequestUrl),
               () => isBlocking ? removeRequestCondition(urlPattern) :
                                  addRequestCondition(urlPattern, SDK.NetworkManager.BlockingConditions),
               {jslogContext: 'block-request-url'});
           throttlingMenu.debugSection().appendItem(
-              isThrottling ? i18nString(UIStrings.unthrottleS, {PH1: urlPattern.constructorString}) :
+              isThrottling ? i18nString(UIStrings.unthrottleS, {PH1: croppedURL}) :
                              i18nString(UIStrings.throttleRequestUrl),
               () => isThrottling ? removeRequestCondition(urlPattern) :
                                    addRequestCondition(urlPattern, SDK.NetworkManager.Slow3GConditions),
@@ -1959,14 +1959,14 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
           const isThrottling = existingConditions &&
               existingConditions.conditions !== SDK.NetworkManager.BlockingConditions &&
               existingConditions.conditions !== SDK.NetworkManager.NoThrottlingConditions;
+          const croppedURL = Platform.StringUtilities.trimMiddle(domainPattern.constructorString, maxBlockedURLLength);
           blockingMenu.debugSection().appendItem(
-              isBlocking ? i18nString(UIStrings.unblockS, {PH1: domainPattern.constructorString}) :
-                           i18nString(UIStrings.blockRequestDomain),
+              isBlocking ? i18nString(UIStrings.unblockS, {PH1: croppedURL}) : i18nString(UIStrings.blockRequestDomain),
               () => isBlocking ? removeRequestCondition(domainPattern) :
                                  addRequestCondition(domainPattern, SDK.NetworkManager.BlockingConditions),
               {jslogContext: 'block-request-domain'});
           throttlingMenu.debugSection().appendItem(
-              isThrottling ? i18nString(UIStrings.unthrottleS, {PH1: domainPattern.constructorString}) :
+              isThrottling ? i18nString(UIStrings.unthrottleS, {PH1: croppedURL}) :
                              i18nString(UIStrings.throttleRequestDomain),
               () => isThrottling ? removeRequestCondition(domainPattern) :
                                    addRequestCondition(domainPattern, SDK.NetworkManager.Slow3GConditions),

package/front_end/panels/network/RequestInitiatorView.ts

@@ -37,7 +37,7 @@ const str_ = i18n.i18n.registerUIStrings('panels/network/RequestInitiatorView.ts
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export interface ViewInput {
   initiatorGraph: Logs.NetworkLog.InitiatorGraph;
-  hasStackTrace: boolean;
+  stackTrace: StackTrace.StackTrace.StackTrace|null;
   request: SDK.NetworkRequest.NetworkRequest;
   linkifier: Components.Linkifier.Linkifier;
   target?: SDK.Target.Target;
@@ -45,7 +45,7 @@ export interface ViewInput {
 
 export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement): void => {
   const hasInitiatorData =
-      input.initiatorGraph.initiators.size > 1 || input.initiatorGraph.initiated.size > 1 || input.hasStackTrace;
+      input.initiatorGraph.initiators.size > 1 || input.initiatorGraph.initiated.size > 1 || input.stackTrace;
 
   if (!hasInitiatorData) {
     render(
@@ -59,6 +59,9 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
   }
 
   const renderStackTraceSection = (): Lit.TemplateResult => {
+    if (!input.stackTrace) {
+      return html`${nothing}`;
+    }
     return html`
       <li role="treeitem" class="request-initiator-view-section-title" aria-expanded="true">
         ${i18nString(UIStrings.requestCallStack)}
@@ -67,7 +70,8 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
             <devtools-widget .widgetConfig=${widgetConfig(Components.JSPresentationUtils.StackTracePreviewContent, {
       target: input.target,
       linkifier: input.linkifier,
-      options: {runtimeStackTrace: input.request.initiator()?.stack, tabStops: true}
+      options: {tabStops: true},
+      stackTrace: input.stackTrace,
     })}></devtools-widget>
           </li>
         </ul>
@@ -146,7 +150,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
           ${requestInitiatorViewTreeStyles}
         </style>
         <ul role="tree">
-           ${input.hasStackTrace ? renderStackTraceSection() : Lit.nothing}
+           ${renderStackTraceSection()}
            ${
               (input.initiatorGraph.initiators.size > 1 || input.initiatorGraph.initiated.size > 1) ?
                   renderInitiatorChain(input.initiatorGraph) :
@@ -184,32 +188,36 @@ export class RequestInitiatorView extends UI.Widget.VBox {
     if (!initiator?.stack) {
       return null;
     }
+    const targetManager = SDK.TargetManager.TargetManager.instance();
     const networkManager = SDK.NetworkManager.NetworkManager.forRequest(request);
-    const target = networkManager ? networkManager.target() : undefined;
+    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});
     if (target) {
-      const stackTrace = await Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()
-                             .createStackTraceFromProtocolRuntime(initiator.stack, target);
-      const preview = new Components.JSPresentationUtils.StackTracePreviewContent(
-          undefined, target, linkifier, {tabStops: focusableLink});
+      stackTrace = await Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()
+                       .createStackTraceFromProtocolRuntime(initiator.stack, target);
       preview.stackTrace = stackTrace;
-      return {preview, stackTrace};
     }
-    return {
-      preview: new Components.JSPresentationUtils.StackTracePreviewContent(
-          undefined, target, linkifier, {runtimeStackTrace: initiator.stack, tabStops: focusableLink}),
-      stackTrace: null
-    };
+    return {preview, stackTrace};
   }
 
-  override performUpdate(): void {
+  override async performUpdate(): Promise<void> {
     const initiatorGraph = Logs.NetworkLog.NetworkLog.instance().initiatorGraphForRequest(this.request);
-    const hasStackTrace = !!this.request.initiator()?.stack;
+    const targetManager = SDK.TargetManager.TargetManager.instance();
     const networkManager = SDK.NetworkManager.NetworkManager.forRequest(this.request);
-    const target = networkManager ? networkManager.target() : undefined;
+    const target = networkManager?.target() ?? targetManager.primaryPageTarget() ?? targetManager.rootTarget();
+
+    const rawStack = this.request.initiator()?.stack;
+    let stackTrace: StackTrace.StackTrace.StackTrace|null = null;
+    if (rawStack && target) {
+      stackTrace = await Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()
+                       .createStackTraceFromProtocolRuntime(rawStack, target);
+    }
 
     const viewInput: ViewInput = {
       initiatorGraph,
-      hasStackTrace,
+      stackTrace,
       request: this.request,
       linkifier: this.linkifier,
       target: target || undefined,

package/front_end/panels/network/RequestTimingView.ts

@@ -576,7 +576,7 @@ export class RequestTimingView extends UI.Widget.VBox {
       calculator: this.#calculator,
       requestStartTime: this.#request.startTime,
       requestIssueTime: this.#request.issueTime(),
-      requestUnfinished: false,
+      requestUnfinished: !this.#request.finished,
       fetchDetails: this.#fetchDetailsTree(),
       routerDetails: this.#routerDetailsTree(),
       wasThrottled: conditions?.urlPattern ? conditions : undefined,

package/front_end/panels/settings/AISettingsTab.ts

@@ -10,7 +10,6 @@ import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as AiAssistanceModel from '../../models/ai_assistance/ai_assistance.js';
-import * as AiCodeGeneration from '../../models/ai_code_generation/ai_code_generation.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as Input from '../../ui/components/input/input.js';
 import * as Switch from '../../ui/components/switch/switch.js';
@@ -537,10 +536,7 @@ export class AISettingsTab extends UI.Widget.VBox {
     }
 
     if (this.#aiCodeCompletionSetting) {
-      const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();
-      const isAiCodeGenerationEnabled =
-          AiCodeGeneration.AiCodeGeneration.AiCodeGeneration.isAiCodeGenerationEnabled(devtoolsLocale.locale);
-      const settingItems = isAiCodeGenerationEnabled ?
+      const settingItems = Root.Runtime.hostConfig.devToolsAiCodeGeneration?.enabled ?
           [
             {iconName: 'code', text: i18nString(UIStrings.asYouTypeRelevantDataIsBeingSentToGoogle)}, {
               iconName: 'text-analysis',

package/front_end/panels/settings/KeybindsSettingsTab.ts

@@ -222,8 +222,9 @@ export class KeybindsSettingsTab extends UI.Widget.VBox implements UI.ListContro
     return 0;
   }
 
-  isItemSelectable(_item: KeybindsItem): boolean {
-    return true;
+  isItemSelectable(item: KeybindsItem): boolean {
+    // Category headers (UI.ActionRegistration.ActionCategory) should not be selectable
+    return item instanceof UI.ActionRegistration.Action;
   }
 
   selectedItemChanged(
@@ -314,7 +315,7 @@ export class KeybindsSettingsTab extends UI.Widget.VBox implements UI.ListContro
     }
     this.list.refreshAllItems();
     if (!this.list.selectedItem()) {
-      this.list.selectItem(this.items.at(0));
+      this.list.selectFirstItem();
     }
   }