chrome-devtools-frontend 1.0.1581708 → 1.0.1582745

package/front_end/models/issues_manager/descriptions/connectionAllowlistItemNotInnerList.md

@@ -0,0 +1,12 @@
+# An item in the `Connection-Allowlist` header is not an Inner List.
+
+Responses' `Connection-Allowlist` header should be formatted as a [List](sfList)
+containing a single [Inner List](sfInnerList) that declares the allowed set of
+[URL Patterns](urlPatternSpec) for a given context.
+
+For example, the following header allows connections to (only)
+`https://example.com/`:
+
+```
+Connection-Allowlist: ("https://example.com")
+```

package/front_end/models/issues_manager/descriptions/connectionAllowlistMoreThanOneList.md

@@ -0,0 +1,7 @@
+# `Connection-Allowlist` has multiple items.
+
+Responses' `Connection-Allowlist` header should be formatted as a [List](sfList)
+containing a single [Inner List](sfInnerList) that declares the allowed set of
+[URL Patterns](urlPatternSpec) for a given context. This response was a
+[List](sfList) containing more than one item: all but the first have been
+ignored.

package/front_end/models/issues_manager/descriptions/connectionAllowlistReportingEndpointNotToken.md

@@ -0,0 +1,10 @@
+# The `report-to` parameter in the `Connection-Allowlist` header is not a token.
+
+If provided, the `report-to` parameter must be a [Token](sfToken)
+naming a reporting endpoint.
+
+For example:
+
+```
+Connection-Allowlist: ("https://example.com");report-to=endpoint
+```

package/front_end/models/issues_manager/issues_manager.ts

@@ -5,6 +5,7 @@
 import * as AttributionReportingIssue from './AttributionReportingIssue.js';
 import * as CheckFormsIssuesTrigger from './CheckFormsIssuesTrigger.js';
 import * as ClientHintIssue from './ClientHintIssue.js';
+import * as ConnectionAllowlistIssue from './ConnectionAllowlistIssue.js';
 import * as ContentSecurityPolicyIssue from './ContentSecurityPolicyIssue.js';
 import * as ContrastCheckTrigger from './ContrastCheckTrigger.js';
 import * as CookieDeprecationMetadataIssue from './CookieDeprecationMetadataIssue.js';
@@ -39,6 +40,7 @@ export {
   AttributionReportingIssue,
   CheckFormsIssuesTrigger,
   ClientHintIssue,
+  ConnectionAllowlistIssue,
   ContentSecurityPolicyIssue,
   ContrastCheckTrigger,
   CookieDeprecationMetadataIssue,

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -1417,7 +1417,13 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     });
 
     void this.#toggleSearchElementAction.execute();
-    return await result;
+    try {
+      return await result;
+    } finally {
+      if (this.#toggleSearchElementAction.toggled()) {
+        void this.#toggleSearchElementAction.execute();
+      }
+    }
   }
 
   async #startConversation(

package/front_end/panels/ai_assistance/components/ChatInput.ts

@@ -42,7 +42,11 @@ const UIStrings = {
   /**
    * @description Label added to the button that remove the currently selected context in AI Assistance panel.
    */
-  removeContext: 'Remove selected context',
+  removeContext: 'Remove from context',
+  /**
+   * @description Label added to the button that add selected context from the current panel in AI Assistance panel.
+   */
+  addContext: 'Add selected item as context',
 } as const;
 
 /*
@@ -387,8 +391,8 @@ export const
                   :
                     input.onContextAdd ? html`
                                   <devtools-button
-                                    title=${i18nString(UIStrings.removeContext)}
-                                    aria-label=${i18nString(UIStrings.removeContext)}
+                                    title=${i18nString(UIStrings.addContext)}
+                                    aria-label=${i18nString(UIStrings.addContext)}
                                     class="add-context"
                                     .iconName=${'plus'}
                                     .size=${Buttons.Button.Size.SMALL}

package/front_end/panels/application/preloading/PreloadingView.ts

@@ -22,7 +22,7 @@ import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import * as PreloadingComponents from './components/components.js';
 import {ruleSetTagOrLocationShort} from './components/PreloadingString.js';
-import type * as PreloadingHelper from './helper/helper.js';
+import * as PreloadingHelper from './helper/helper.js';
 import preloadingViewStyles from './preloadingView.css.js';
 import preloadingViewDropDownStyles from './preloadingViewDropDown.css.js';
 
@@ -501,10 +501,17 @@ export class PreloadingAttemptView extends UI.Widget.VBox {
         const ruleSet = this.model.getRuleSetById(id);
         return ruleSet === null ? [] : [ruleSet];
       });
+
+      // Lookup status code for prefetch attempts
+      const statusCode = attempt.action === Protocol.Preload.SpeculationAction.Prefetch ?
+          PreloadingHelper.PreloadingForward.prefetchStatusCode(attempt.requestId) :
+          undefined;
+
       return {
         id,
         pipeline,
         ruleSets,
+        statusCode,
       };
     });
     this.preloadingGrid.rows = rows;

package/front_end/panels/application/preloading/components/PreloadingDetailsReportView.ts

@@ -349,7 +349,10 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
       return Lit.nothing;
     }
 
-    const failureDescription = prefetchFailureReason(attempt);
+    // Lookup status code for Non2XX failures
+    const statusCode = PreloadingHelper.PreloadingForward.prefetchStatusCode(attempt.requestId);
+
+    const failureDescription = prefetchFailureReason(attempt, statusCode);
     if (failureDescription === null) {
       return Lit.nothing;
     }

package/front_end/panels/application/preloading/components/PreloadingGrid.ts

@@ -51,6 +51,7 @@ export interface PreloadingGridRow {
   id: string;
   pipeline: SDK.PreloadingModel.PreloadPipeline;
   ruleSets: Protocol.Preload.RuleSet[];
+  statusCode?: number;
 }
 
 export interface ViewInput {
@@ -107,7 +108,7 @@ export const PRELOADING_GRID_DEFAULT_VIEW: View = (input, _output, target): void
                         'vertical-align': 'sub',
                       })}
                     ></devtools-icon>` : ''}
-                  ${hasWarning ? i18nString(UIStrings.prefetchFallbackReady) : composedStatus(attempt)}
+                  ${hasWarning ? i18nString(UIStrings.prefetchFallbackReady) : composedStatus(attempt, row.statusCode)}
                 </div>
               </td>
             </tr>`;

package/front_end/panels/application/preloading/components/PreloadingString.ts

@@ -31,6 +31,11 @@ const UIStrings = {
    * @description  Description text for Prefetch status PrefetchFailedNon2XX.
    */
   PrefetchFailedNon2XX: 'The prefetch failed because of a non-2xx HTTP response status code.',
+  /**
+   * @description  Description text for Prefetch status PrefetchFailedNon2XX when the HTTP status code is known.
+   * @example {404} PH1
+   */
+  PrefetchFailedNon2XXWithStatusCode: 'The prefetch failed because of a non-2xx HTTP response status code ({PH1}).',
   /**
    * @description  Description text for Prefetch status PrefetchIneligibleRetryAfter.
    */
@@ -446,7 +451,8 @@ export const PrefetchReasonDescription: Record<string, {name: () => Platform.UIS
 };
 
 /** Decoding PrefetchFinalStatus prefetchAttempt to failure description. **/
-export function prefetchFailureReason({prefetchStatus}: SDK.PreloadingModel.PrefetchAttempt): string|null {
+export function prefetchFailureReason(
+    {prefetchStatus}: SDK.PreloadingModel.PrefetchAttempt, statusCode?: number): string|null {
   // If you face an error on rolling CDP changes, see
   // https://docs.google.com/document/d/1PnrfowsZMt62PX1EvvTp2Nqs3ji1zrklrAEe1JYbkTk
   switch (prefetchStatus) {
@@ -478,6 +484,9 @@ export function prefetchFailureReason({prefetchStatus}: SDK.PreloadingModel.Pref
     case Protocol.Preload.PrefetchStatus.PrefetchFailedNetError:
       return PrefetchReasonDescription['PrefetchFailedNetError'].name();
     case Protocol.Preload.PrefetchStatus.PrefetchFailedNon2XX:
+      if (statusCode !== undefined) {
+        return i18nString(UIStrings.PrefetchFailedNon2XXWithStatusCode, {PH1: String(statusCode)});
+      }
       return PrefetchReasonDescription['PrefetchFailedNon2XX'].name();
     case Protocol.Preload.PrefetchStatus.PrefetchIneligibleRetryAfter:
       return PrefetchReasonDescription['PrefetchIneligibleRetryAfter'].name();
@@ -795,7 +804,7 @@ export function status(status: SDK.PreloadingModel.PreloadingStatus): string {
   }
 }
 
-export function composedStatus(attempt: SDK.PreloadingModel.PreloadingAttempt): string {
+export function composedStatus(attempt: SDK.PreloadingModel.PreloadingAttempt, statusCode?: number): string {
   const short = status(attempt.status);
 
   if (attempt.status !== SDK.PreloadingModel.PreloadingStatus.FAILURE) {
@@ -804,7 +813,7 @@ export function composedStatus(attempt: SDK.PreloadingModel.PreloadingAttempt):
 
   switch (attempt.action) {
     case Protocol.Preload.SpeculationAction.Prefetch: {
-      const detail = prefetchFailureReason(attempt) ?? i18n.i18n.lockedString('Internal error');
+      const detail = prefetchFailureReason(attempt, statusCode) ?? i18n.i18n.lockedString('Internal error');
       return short + ' - ' + detail;
     }
     case Protocol.Preload.SpeculationAction.Prerender:

package/front_end/panels/application/preloading/helper/PreloadingForward.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import type * as Protocol from '../../../../generated/protocol.js';
+import * as Logs from '../../../../models/logs/logs.js';
 
 export class RuleSetView {
   readonly ruleSetId: Protocol.Preload.RuleSetId|null;
@@ -19,3 +20,16 @@ export class AttemptViewWithFilter {
     this.ruleSetId = ruleSetId;
   }
 }
+
+/**
+ * Retrieves the HTTP status code for a prefetch attempt by looking up its
+ * network request in the network log.
+ */
+export function prefetchStatusCode(requestId: Protocol.Network.RequestId): number|undefined {
+  const networkLog = Logs.NetworkLog.NetworkLog.instance();
+  const requests = networkLog.requestsForId(requestId);
+  if (requests.length > 0) {
+    return requests[requests.length - 1].statusCode;
+  }
+  return undefined;
+}

package/front_end/panels/browser_debugger/CategorizedBreakpointsSidebarPane.ts

@@ -134,6 +134,9 @@ interface ViewOutput {
 interface ViewInput {
   onFilterChanged: (filterText: string|null) => void;
   onBreakpointChange: (breakpoint: SDK.CategorizedBreakpoint.CategorizedBreakpoint, enabled: boolean) => void;
+  onItemSelected: (item: SDK.CategorizedBreakpoint.Category|SDK.CategorizedBreakpoint.CategorizedBreakpoint|
+                   null) => void;
+  onSpaceKeyDown: () => void;
 
   filterText: string|null;
   userExpandedCategories: Set<SDK.CategorizedBreakpoint.Category>;
@@ -200,6 +203,13 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
             }
           };
 
+  const onKeyDown = (e: KeyboardEvent): void => {
+    if (e.key === ' ') {
+      input.onSpaceKeyDown();
+      e.preventDefault();
+    }
+  };
+
   render(
       // clang-format off
       html`
@@ -210,10 +220,11 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
         style="flex: 1;"
         ></devtools-toolbar-input>
     </devtools-toolbar>
-    <devtools-tree autofocus .template=${html`
+    <devtools-tree autofocus @keydown=${onKeyDown} .template=${html`
       <ul role="tree">
         ${filteredCategories.map(([category, breakpoints]) => html`
-          <li @expand=${(e: UI.TreeOutline.TreeViewElement.ExpandEvent) => onExpand(category, e)}
+          <li @select=${() => input.onItemSelected(category)}
+              @expand=${(e: UI.TreeOutline.TreeViewElement.ExpandEvent) => onExpand(category, e)}
               role="treeitem"
               jslog-context=${category}
               aria-checked=${breakpoints.some(breakpoint => breakpoint.enabled())
@@ -233,7 +244,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
                 role="group"
                 ?hidden=${!shouldExpandCategory(breakpoints) && !input.userExpandedCategories.has(category)}>
               ${breakpoints.map(breakpoint => html`
-              <li
+              <li @select=${() => input.onItemSelected(breakpoint)}
                   role="treeitem"
                   aria-checked=${breakpoint.enabled()}
                   jslog-context=${Platform.StringUtilities.toKebabCase(breakpoint.name)}>
@@ -265,6 +276,7 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
   #filterText: string|null = null;
   #view: View;
   #userExpandedCategories = new Set<SDK.CategorizedBreakpoint.Category>();
+  #selectedItem: SDK.CategorizedBreakpoint.Category|SDK.CategorizedBreakpoint.CategorizedBreakpoint|null = null;
   constructor(
       breakpoints: SDK.CategorizedBreakpoint.CategorizedBreakpoint[], jslog: string, viewId: string,
       view = DEFAULT_VIEW) {
@@ -321,6 +333,26 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
     this.requestUpdate();
   }
 
+  #onItemSelected(item: SDK.CategorizedBreakpoint.Category|SDK.CategorizedBreakpoint.CategorizedBreakpoint|null): void {
+    this.#selectedItem = item;
+  }
+
+  #onSpaceKeyDown(): void {
+    const selected = this.#selectedItem;
+    if (!selected) {
+      return;
+    }
+    if (selected instanceof SDK.CategorizedBreakpoint.CategorizedBreakpoint) {
+      this.onBreakpointChanged(selected, !selected.enabled());
+    } else {
+      const breakpoints = this.categories.get(selected);
+      if (breakpoints) {
+        const newEnabled = breakpoints.some(bp => !bp.enabled());
+        breakpoints.forEach(bp => this.onBreakpointChanged(bp, newEnabled));
+      }
+    }
+  }
+
   protected onBreakpointChanged(breakpoint: SDK.CategorizedBreakpoint.CategorizedBreakpoint, enabled: boolean): void {
     breakpoint.setEnabled(enabled);
     this.requestUpdate();
@@ -331,6 +363,8 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
       filterText: this.#filterText,
       onFilterChanged: this.#onFilterChanged.bind(this),
       onBreakpointChange: this.onBreakpointChanged.bind(this),
+      onItemSelected: this.#onItemSelected.bind(this),
+      onSpaceKeyDown: this.#onSpaceKeyDown.bind(this),
       sortedCategoryNames: this.#sortedCategories,
       categories: this.categories,
       highlightedItem: this.#highlightedItem,

package/front_end/panels/changes/ChangesSidebar.ts

@@ -24,7 +24,7 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/changes/ChangesSidebar.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-const {render, html, Directives: {ref}} = Lit;
+const {render, html} = Lit;
 interface ViewInput {
   selectedSourceCode: Workspace.UISourceCode.UISourceCode|null;
   onSelect: (uiSourceCode: Workspace.UISourceCode.UISourceCode|null) => void;
@@ -38,20 +38,16 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
       uiSourceCode.url();
   const icon = (uiSourceCode: Workspace.UISourceCode.UISourceCode): string =>
       Snippets.ScriptSnippetFileSystem.isSnippetsUISourceCode(uiSourceCode) ? 'snippet' : 'document';
-  const configElements = new WeakMap<HTMLLIElement, Workspace.UISourceCode.UISourceCode>();
-  const onSelect = (e: UI.TreeOutline.TreeViewElement.SelectEvent): void =>
-      input.onSelect(configElements.get(e.detail) ?? null);
   render(
       // clang-format off
       html`<devtools-tree
-             @selected=${onSelect}
              navigation-variant
              hide-overflow .template=${html`
                <ul role="tree">
                  ${input.sourceCodes.values().map(uiSourceCode => html`
                    <li
                      role="treeitem"
-                     ${ref(e => e instanceof HTMLLIElement && configElements.set(e, uiSourceCode))}
+                     @select=${() => input.onSelect(uiSourceCode)}
                      ?selected=${uiSourceCode === input.selectedSourceCode}>
                        <style>${changesSidebarStyles}</style>
                        <div class=${'navigator-' + uiSourceCode.contentType().name() + '-tree-item'}>

package/front_end/panels/console/ConsoleSidebar.ts

@@ -50,7 +50,7 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/console/ConsoleSidebar.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-const {render, html, nothing, Directives} = Lit;
+const {render, html, nothing} = Lit;
 
 export const enum GroupName {
   CONSOLE_API = 'user message',
@@ -78,18 +78,10 @@ interface ViewInput {
 
 export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
 export const DEFAULT_VIEW: View = (input, output, target) => {
-  const nodeFilterMap = new WeakMap<Element, ConsoleFilter>();
-  const onSelectionChanged = (event: UI.TreeOutline.TreeViewElement.SelectEvent): void => {
-    const filter = nodeFilterMap.get(event.detail);
-    if (filter) {
-      input.onSelectionChanged(filter);
-    }
-  };
   render(
       html`<devtools-tree
         navigation-variant
         hide-overflow
-        @select=${onSelectionChanged}
         .template=${
           html`
           <ul role="tree">
@@ -98,7 +90,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                   group => html`
               <li
                 role="treeitem"
-                ${Directives.ref(element => element && nodeFilterMap.set(element, group.filter))}
+                @select=${() => input.onSelectionChanged(group.filter)}
                 ?selected=${group.filter === input.selectedFilter}>
                   <style>${consoleSidebarStyles}</style>
                   <devtools-icon name=${GROUP_ICONS[group.name].icon}></devtools-icon>
@@ -112,7 +104,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                   <ul role="group" hidden>
                     ${group.urlGroups.values().map(urlGroup => html`
                       <li
-                        ${Directives.ref(element => element && nodeFilterMap.set(element, urlGroup.filter))}
+                        @select=${() => input.onSelectionChanged(urlGroup.filter)}
                         role="treeitem"
                         ?selected=${urlGroup.filter === input.selectedFilter}
                         title=${urlGroup.url ?? ''}>

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) :
@@ -198,15 +202,22 @@ export class RequestInitiatorView extends UI.Widget.VBox {
     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/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/SettingsScreen.ts

@@ -631,16 +631,6 @@ const GREENDEV_VIEW: View = (input, _output, target) => {
                ${renderPrototypeCheckboxes(input.settings, ['aiAnnotations', 'inDevToolsFloaty', 'copyToGemini'])}
              </div>
            </devtools-card>
-
-           <devtools-card .heading=${'GreenDev widgets'}>
-             <div class="experiments-warning-subsection">
-              <devtools-icon .name=${'warning'}></devtools-icon>
-              <span>${i18nString(UIStrings.greenDevUnstable)}</span>
-             </div>
-             <div class="settings-experiments-block greendev-widgets">
-               ${renderWidgetOptions(input.settings)}
-             </div>
-           </devtools-card>
          </div>
        `, target);
   // clang-format on
@@ -649,50 +639,9 @@ const GREENDEV_VIEW: View = (input, _output, target) => {
 const GREENDEV_PROTOTYPE_NAMES: Record<keyof GreenDev.GreenDevSettings, string> = {
   inDevToolsFloaty: 'In DevTools context picker',
   aiAnnotations: 'AI auto-annotations',
-  inlineWidgets: 'Inline widgets in AI Assistance',
-  artifactViewer: 'Widgets in the Artifact viewer',
   copyToGemini: 'Copy changes to AI Prompt'
 };
 
-function renderWidgetOptions(settings: GreenDev.GreenDevSettings): TemplateResult {
-  function onChange(nowActiveRadio: 'inlineWidgets'|'artifactViewer'|'none') {
-    return () => {
-      switch (nowActiveRadio) {
-        case 'inlineWidgets': {
-          settings.artifactViewer.set(false);
-          settings.inlineWidgets.set(true);
-          break;
-        }
-        case 'artifactViewer': {
-          settings.artifactViewer.set(true);
-          settings.inlineWidgets.set(false);
-          break;
-        }
-        case 'none': {
-          settings.artifactViewer.set(false);
-          settings.inlineWidgets.set(false);
-        }
-      }
-
-      UI.InspectorView.InspectorView.instance().displayReloadRequiredWarning(
-          i18nString(UIStrings.settingsChangedReloadDevTools));
-    };
-  }
-  // clang-format off
-  return html`
-    <p class="settings-experiment">
-      <label><input type="radio" name="widgets-choice" @change=${onChange('inlineWidgets')}>${GREENDEV_PROTOTYPE_NAMES['inlineWidgets']}</label>
-    </p>
-    <p class="settings-experiment">
-      <label><input type="radio" name="widgets-choice" @change=${onChange('artifactViewer')}>${GREENDEV_PROTOTYPE_NAMES['artifactViewer']}</label>
-    </p>
-    <p class="settings-experiment">
-      <label><input type="radio" name="widgets-choice" @change=${onChange('none')}>None</label>
-    </p>
-  `;
-  // clang-format on
-}
-
 function renderPrototypeCheckboxes(
     settings: GreenDev.GreenDevSettings,
     keys: Array<keyof GreenDev.GreenDevSettings>,

package/front_end/panels/timeline/AnimationsTrackAppender.ts

@@ -48,7 +48,10 @@ export class AnimationsTrackAppender implements TrackAppender {
   }
 
   #appendTrackHeaderAtLevel(currentLevel: number, expanded?: boolean): void {
-    const style = buildGroupStyle({useFirstLineForOverview: false});
+    const style = buildGroupStyle({
+      useFirstLineForOverview: false,
+      collapsible: PerfUI.FlameChart.GroupCollapsibleState.IF_MULTI_ROW,
+    });
     const group = buildTrackHeader(
         VisualLoggingTrackName.ANIMATIONS, currentLevel, i18nString(UIStrings.animations), style,
         /* selectable= */ true, expanded);

package/front_end/panels/timeline/InteractionsTrackAppender.ts

@@ -71,7 +71,7 @@ export class InteractionsTrackAppender implements TrackAppender {
   #appendTrackHeaderAtLevel(currentLevel: number, expanded?: boolean): void {
     const trackIsCollapsible = this.#parsedTrace.data.UserInteractions.interactionEvents.length > 0;
     const style = buildGroupStyle({
-      collapsible: trackIsCollapsible ? PerfUI.FlameChart.GroupCollapsibleState.ALWAYS :
+      collapsible: trackIsCollapsible ? PerfUI.FlameChart.GroupCollapsibleState.IF_MULTI_ROW :
                                         PerfUI.FlameChart.GroupCollapsibleState.NEVER,
       useDecoratorsForOverview: true,
     });