chrome-devtools-frontend 1.0.1556696 → 1.0.1559913

package/front_end/ui/components/text_editor/AiCodeGenerationProvider.ts

@@ -12,6 +12,13 @@ import * as UI from '../../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../visual_logging/visual_logging.js';
 
 import {AiCodeCompletionTeaserPlaceholder} from './AiCodeCompletionTeaserPlaceholder.js';
+import {
+  acceptAiAutoCompleteSuggestion,
+  aiAutoCompleteSuggestion,
+  aiAutoCompleteSuggestionState,
+  hasActiveAiSuggestion,
+  setAiAutoCompleteSuggestion,
+} from './config.js';
 import type {TextEditor} from './TextEditor.js';
 
 export enum AiCodeGenerationTeaserMode {
@@ -28,30 +35,48 @@ const aiCodeGenerationTeaserModeState = CodeMirror.StateField.define<AiCodeGener
   },
 });
 
+export interface AiCodeGenerationConfig {
+  generationContext: {
+    inferenceLanguage?: Host.AidaClient.AidaInferenceLanguage,
+  };
+  onSuggestionAccepted: () => void;
+  onRequestTriggered: () => void;
+  // TODO(b/445394511): Move exposing citations to onSuggestionAccepted
+  onResponseReceived: (citations: Host.AidaClient.Citation[]) => void;
+}
+
 export class AiCodeGenerationProvider {
   #devtoolsLocale: string;
   #aiCodeCompletionSetting = Common.Settings.Settings.instance().createSetting('ai-code-completion-enabled', false);
   #generationTeaserCompartment = new CodeMirror.Compartment();
-  #generationTeaser: PanelCommon.AiCodeGenerationTeaser;
+  #generationTeaser: PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaser;
   #editor?: TextEditor;
+  #aiCodeGenerationConfig: AiCodeGenerationConfig;
+  #aiCodeGeneration?: AiCodeGeneration.AiCodeGeneration.AiCodeGeneration;
 
+  #aidaClient: Host.AidaClient.AidaClient = new Host.AidaClient.AidaClient();
   #boundOnUpdateAiCodeGenerationState = this.#updateAiCodeGenerationState.bind(this);
+  #controller = new AbortController();
 
-  private constructor() {
+  private constructor(aiCodeGenerationConfig: AiCodeGenerationConfig) {
     this.#devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance().locale;
     if (!AiCodeGeneration.AiCodeGeneration.AiCodeGeneration.isAiCodeGenerationEnabled(this.#devtoolsLocale)) {
       throw new Error('AI code generation feature is not enabled.');
     }
-    this.#generationTeaser = new PanelCommon.AiCodeGenerationTeaser();
+    this.#generationTeaser = new PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaser();
+    this.#aiCodeGenerationConfig = aiCodeGenerationConfig;
   }
 
-  static createInstance(): AiCodeGenerationProvider {
-    return new AiCodeGenerationProvider();
+  static createInstance(aiCodeGenerationConfig: AiCodeGenerationConfig): AiCodeGenerationProvider {
+    return new AiCodeGenerationProvider(aiCodeGenerationConfig);
   }
 
   extension(): CodeMirror.Extension[] {
     return [
-      CodeMirror.EditorView.updateListener.of(update => this.activateTeaser(update)),
+      CodeMirror.EditorView.updateListener.of(update => this.#activateTeaser(update)),
+      CodeMirror.EditorView.updateListener.of(update => this.#abortGenerationDuringUpdate(update)),
+      aiAutoCompleteSuggestion,
+      aiAutoCompleteSuggestionState,
       aiCodeGenerationTeaserModeState,
       this.#generationTeaserCompartment.of([]),
       CodeMirror.Prec.highest(CodeMirror.keymap.of(this.#editorKeymap())),
@@ -59,6 +84,7 @@ export class AiCodeGenerationProvider {
   }
 
   dispose(): void {
+    this.#controller.abort();
     this.#cleanupAiCodeGeneration();
   }
 
@@ -71,6 +97,10 @@ export class AiCodeGenerationProvider {
   }
 
   #setupAiCodeGeneration(): void {
+    if (this.#aiCodeGeneration) {
+      return;
+    }
+    this.#aiCodeGeneration = new AiCodeGeneration.AiCodeGeneration.AiCodeGeneration({aidaClient: this.#aidaClient});
     this.#editor?.dispatch({
       effects:
           [this.#generationTeaserCompartment.reconfigure([aiCodeGenerationTeaserExtension(this.#generationTeaser)])],
@@ -78,6 +108,10 @@ export class AiCodeGenerationProvider {
   }
 
   #cleanupAiCodeGeneration(): void {
+    if (!this.#aiCodeGeneration) {
+      return;
+    }
+    this.#aiCodeGeneration = undefined;
     this.#editor?.dispatch({
       effects: [this.#generationTeaserCompartment.reconfigure([])],
     });
@@ -99,23 +133,53 @@ export class AiCodeGenerationProvider {
       {
         key: 'Escape',
         run: (): boolean => {
-          if (!this.#editor || !this.#generationTeaser.isShowing() || !this.#generationTeaser.loading) {
+          if (!this.#editor || !this.#aiCodeGeneration) {
+            return false;
+          }
+          if (hasActiveAiSuggestion(this.#editor.state)) {
+            this.#editor.dispatch({
+              effects: setAiAutoCompleteSuggestion.of(null),
+            });
+            return true;
+          }
+          const generationTeaserIsLoading = this.#generationTeaser.displayState ===
+              PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.LOADING;
+          if (this.#generationTeaser.isShowing() && generationTeaserIsLoading) {
+            this.#controller.abort();
+            this.#controller = new AbortController();
+            this.#dismissTeaser();
+            return true;
+          }
+          return false;
+        },
+      },
+      {
+        key: 'Tab',
+        run: (): boolean => {
+          if (!this.#aiCodeGeneration || !this.#editor || !hasActiveAiSuggestion(this.#editor.state)) {
             return false;
           }
-          this.#editor.dispatch({effects: setAiCodeGenerationTeaserMode.of(AiCodeGenerationTeaserMode.DISMISSED)});
+          const {accepted, suggestion} = acceptAiAutoCompleteSuggestion(this.#editor.editor);
+          if (!accepted) {
+            return false;
+          }
+          if (suggestion?.rpcGlobalId) {
+            this.#aiCodeGeneration.registerUserAcceptance(suggestion.rpcGlobalId, suggestion.sampleId);
+          }
+          this.#aiCodeGenerationConfig?.onSuggestionAccepted();
           return true;
         },
       },
       {
         any: (_view: unknown, event: KeyboardEvent) => {
-          if (!this.#editor || !this.#generationTeaser.isShowing()) {
+          if (!this.#editor || !this.#aiCodeGeneration || !this.#generationTeaser.isShowing()) {
             return false;
           }
           if (UI.KeyboardShortcut.KeyboardShortcut.eventHasCtrlEquivalentKey(event)) {
             if (event.key === 'i') {
               event.consume(true);
               void VisualLogging.logKeyDown(event.currentTarget, event, 'ai-code-generation.triggered');
-              this.#generationTeaser.loading = true;
+              void this.#triggerAiCodeGeneration({signal: this.#controller.signal});
               return true;
             }
           }
@@ -125,7 +189,12 @@ export class AiCodeGenerationProvider {
     ];
   }
 
-  async activateTeaser(update: CodeMirror.ViewUpdate): Promise<void> {
+  #dismissTeaser(): void {
+    this.#generationTeaser.displayState = PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.TRIGGER;
+    this.#editor?.dispatch({effects: setAiCodeGenerationTeaserMode.of(AiCodeGenerationTeaserMode.DISMISSED)});
+  }
+
+  #activateTeaser(update: CodeMirror.ViewUpdate): void {
     const currentTeaserMode = update.state.field(aiCodeGenerationTeaserModeState);
     if (currentTeaserMode === AiCodeGenerationTeaserMode.ACTIVE) {
       return;
@@ -135,46 +204,147 @@ export class AiCodeGenerationProvider {
     }
     update.view.dispatch({effects: setAiCodeGenerationTeaserMode.of(AiCodeGenerationTeaserMode.ACTIVE)});
   }
+
+  /**
+   * Monitors editor changes to cancel an ongoing AI generation.
+   * We abort the request and dismiss the teaser if the user modifies the
+   * document or moves their cursor/selection. These actions indicate the user
+   * is no longer focused on the current generation point or has manually
+   * resumed editing, making the pending suggestion irrelevant.
+   */
+  #abortGenerationDuringUpdate(update: CodeMirror.ViewUpdate): void {
+    if (!update.docChanged && update.state.selection.main.head === update.startState.selection.main.head) {
+      return;
+    }
+    const currentTeaserMode = update.state.field(aiCodeGenerationTeaserModeState);
+    const generationTeaserIsLoading = this.#generationTeaser.displayState ===
+        PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.LOADING;
+    // Generation should be in progress
+    if (currentTeaserMode === AiCodeGenerationTeaserMode.DISMISSED || !generationTeaserIsLoading) {
+      return;
+    }
+    this.#controller.abort();
+    this.#controller = new AbortController();
+    this.#dismissTeaser();
+  }
+
+  async #triggerAiCodeGeneration(options?: {signal?: AbortSignal}): Promise<void> {
+    if (!this.#editor || !this.#aiCodeGeneration) {
+      return;
+    }
+
+    this.#generationTeaser.displayState = PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.LOADING;
+    const cursor = this.#editor.state.selection.main.head;
+    // TODO(b/445899453): Detect all types of comments
+    const query = this.#editor.state.doc.lineAt(cursor).text;
+    if (query.trim().length === 0) {
+      return;
+    }
+
+    try {
+      const startTime = performance.now();
+      this.#aiCodeGenerationConfig?.onRequestTriggered();
+      Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiCodeGenerationRequestTriggered);
+
+      const generationResponse = await this.#aiCodeGeneration.generateCode(
+          query, AiCodeGeneration.AiCodeGeneration.basePreamble,
+          this.#aiCodeGenerationConfig?.generationContext.inferenceLanguage, options);
+
+      if (this.#generationTeaser) {
+        this.#dismissTeaser();
+      }
+
+      if (!generationResponse || generationResponse.samples.length === 0) {
+        this.#aiCodeGenerationConfig?.onResponseReceived([]);
+        return;
+      }
+      const topSample = generationResponse.samples[0];
+
+      const shouldBlock = topSample.attributionMetadata?.attributionAction === Host.AidaClient.RecitationAction.BLOCK;
+      if (shouldBlock) {
+        return;
+      }
+
+      this.#editor.dispatch({
+        effects: setAiAutoCompleteSuggestion.of({
+          text: '\n' + topSample.generationString,
+          from: cursor,
+          rpcGlobalId: generationResponse.metadata.rpcGlobalId,
+          sampleId: topSample.sampleId,
+          startTime,
+          onImpression: this.#aiCodeGeneration?.registerUserImpression.bind(this.#aiCodeGeneration),
+        })
+      });
+
+      AiCodeGeneration.debugLog('Suggestion dispatched to the editor', topSample.generationString);
+      const citations = topSample.attributionMetadata?.citations ?? [];
+      this.#aiCodeGenerationConfig?.onResponseReceived(citations);
+    } catch (e) {
+      AiCodeGeneration.debugLog('Error while fetching code generation suggestions from AIDA', e);
+      this.#aiCodeGenerationConfig?.onResponseReceived([]);
+      Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiCodeGenerationError);
+    }
+
+    if (this.#generationTeaser) {
+      this.#dismissTeaser();
+    }
+  }
 }
 
-// TODO(b/445899453): Handle teaser's discovery mode
-function aiCodeGenerationTeaserExtension(teaser: PanelCommon.AiCodeGenerationTeaser): CodeMirror.Extension {
+function aiCodeGenerationTeaserExtension(teaser: PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaser):
+    CodeMirror.Extension {
   return CodeMirror.ViewPlugin.fromClass(class {
-    #teaserMode: AiCodeGenerationTeaserMode;
+    #view: CodeMirror.EditorView;
 
-    constructor(readonly view: CodeMirror.EditorView) {
-      this.#teaserMode = view.state.field(aiCodeGenerationTeaserModeState);
+    constructor(view: CodeMirror.EditorView) {
+      this.#view = view;
+      this.#updateTeaserState(view.state);
     }
 
     update(update: CodeMirror.ViewUpdate): void {
-      const currentTeaserMode = update.state.field(aiCodeGenerationTeaserModeState);
-      if (currentTeaserMode !== this.#teaserMode) {
-        this.#teaserMode = currentTeaserMode;
-      }
       if (!update.docChanged && update.state.selection.main.head === update.startState.selection.main.head) {
         return;
       }
-      if (teaser.loading) {
-        teaser.loading = false;
-      }
+      this.#updateTeaserState(update.state);
     }
 
     get decorations(): CodeMirror.DecorationSet {
-      if (this.#teaserMode === AiCodeGenerationTeaserMode.DISMISSED) {
+      const teaserMode = this.#view.state.field(aiCodeGenerationTeaserModeState);
+      if (teaserMode === AiCodeGenerationTeaserMode.DISMISSED) {
         return CodeMirror.Decoration.none;
       }
-      const cursorPosition = this.view.state.selection.main.head;
-      const line = this.view.state.doc.lineAt(cursorPosition);
+
+      const cursorPosition = this.#view.state.selection.main.head;
+      const line = this.#view.state.doc.lineAt(cursorPosition);
+
+      const isEmptyLine = line.length === 0;
       // TODO(b/445899453): Detect all types of comments
       const isComment = line.text.startsWith('//');
       const isCursorAtEndOfLine = cursorPosition >= line.to;
-      if (!isComment || !isCursorAtEndOfLine) {
-        return CodeMirror.Decoration.none;
+
+      if ((isEmptyLine) || (isComment && isCursorAtEndOfLine)) {
+        return CodeMirror.Decoration.set([
+          CodeMirror.Decoration.widget({widget: new AiCodeCompletionTeaserPlaceholder(teaser), side: 1})
+              .range(cursorPosition),
+        ]);
+      }
+      return CodeMirror.Decoration.none;
+    }
+
+    #updateTeaserState(state: CodeMirror.EditorState): void {
+      // Only handle non loading states, as updates during generation are handled by
+      // #abortGenerationDuringUpdate in AiCodeGenerationProvider
+      if (teaser.displayState === PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.LOADING) {
+        return;
+      }
+      const cursorPosition = state.selection.main.head;
+      const line = state.doc.lineAt(cursorPosition);
+      const isEmptyLine = line.length === 0;
+      if (isEmptyLine) {
+        teaser.displayState = PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.DISCOVERY;
+      } else {
+        teaser.displayState = PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.TRIGGER;
       }
-      return CodeMirror.Decoration.set([
-        CodeMirror.Decoration.widget({widget: new AiCodeCompletionTeaserPlaceholder(teaser), side: 1})
-            .range(cursorPosition),
-      ]);
     }
   }, {
     decorations: v => v.decorations,

package/front_end/ui/components/text_editor/config.ts

@@ -490,7 +490,7 @@ export interface ActiveSuggestion {
   rpcGlobalId?: Host.AidaClient.RpcGlobalId;
   startTime: number;
   onImpression: (rpcGlobalId: Host.AidaClient.RpcGlobalId, latency: number, sampleId?: number) => void;
-  clearCachedRequest: () => void;
+  clearCachedRequest?: () => void;
 }
 
 export const aiAutoCompleteSuggestionState = CM.StateField.define<ActiveSuggestion|null>({
@@ -501,7 +501,7 @@ export const aiAutoCompleteSuggestionState = CM.StateField.define<ActiveSuggesti
         if (effect.value) {
           return effect.value;
         }
-        value?.clearCachedRequest();
+        value?.clearCachedRequest?.();
         return null;
       }
     }
@@ -514,14 +514,14 @@ export const aiAutoCompleteSuggestionState = CM.StateField.define<ActiveSuggesti
     // between when the request was sent and the response was received.
     // We check if the position is still valid before trying to map it.
     if (value.from > tr.state.doc.length) {
-      value.clearCachedRequest();
+      value.clearCachedRequest?.();
       return null;
     }
 
     // If deletion occurs, set to null. Otherwise, the mapping might fail if
     // the position is inside the deleted range.
     if (tr.docChanged && tr.state.doc.length < tr.startState.doc.length) {
-      value.clearCachedRequest();
+      value.clearCachedRequest?.();
       return null;
     }
 
@@ -530,7 +530,7 @@ export const aiAutoCompleteSuggestionState = CM.StateField.define<ActiveSuggesti
 
     // If a change happened before the position from which suggestion was generated, set to null.
     if (tr.docChanged && head < from) {
-      value.clearCachedRequest();
+      value.clearCachedRequest?.();
       return null;
     }
 
@@ -571,7 +571,7 @@ export function acceptAiAutoCompleteSuggestion(view: CM.EditorView):
     userEvent: 'input.complete',
   });
 
-  suggestion.clearCachedRequest();
+  suggestion.clearCachedRequest?.();
   return {accepted: true, suggestion};
 }
 

package/front_end/ui/legacy/ContextMenu.ts

@@ -787,8 +787,17 @@ export class ContextMenu extends SubMenu {
 
     const menuObject = this.buildMenuDescriptors();
     const ownerDocument = (this.eventTarget as HTMLElement).ownerDocument;
-    if (this.useSoftMenu || ContextMenu.useSoftMenu ||
-        Host.InspectorFrontendHost.InspectorFrontendHostInstance.isHostedMode()) {
+
+    let useSoftMenu = this.useSoftMenu || ContextMenu.useSoftMenu ||
+        Host.InspectorFrontendHost.InspectorFrontendHostInstance.isHostedMode();
+
+    // Allow force opening a Native menu when DevTools is under test.
+    // This allows opening DevTools on DevTools
+    if (!this.useSoftMenu && ContextMenu.useSoftMenu && this.event.altKey) {
+      useSoftMenu = false;
+    }
+
+    if (useSoftMenu) {
       this.softMenu = new SoftContextMenu(
           (menuObject as SoftContextMenuDescriptor[]), this.itemSelected.bind(this), this.keepOpen, undefined,
           this.onSoftMenuClosed, this.loggableParent);

package/front_end/ui/legacy/SearchableView.ts

@@ -150,6 +150,7 @@ export class SearchableView extends VBox {
   private replaceToggleButton: ToolbarToggle;
   private searchInputElement: HTMLInputElement;
   private matchesElement: HTMLElement;
+  private matchesElementValue: HTMLElement;
   private searchNavigationPrevElement: ToolbarButton;
   private searchNavigationNextElement: ToolbarButton;
   private readonly replaceInputElement: HTMLInputElement;
@@ -314,6 +315,9 @@ export class SearchableView extends VBox {
     this.matchesElement.style.color = 'var(--sys-color-on-surface-subtle)';
     this.matchesElement.style.padding = '0 var(--sys-size-3)';
     this.matchesElement.classList.add('search-results-matches');
+    ARIAUtils.markAsPoliteLiveRegion(this.matchesElement, false);
+    this.matchesElementValue = this.matchesElement.createChild('span');
+    ARIAUtils.setHidden(this.matchesElementValue, true);
     toolbar.appendToolbarItem(matchesText);
 
     const cancelButtonElement = new Buttons.Button.Button();
@@ -455,7 +459,7 @@ export class SearchableView extends VBox {
   resetSearch(): void {
     this.clearSearch();
     this.updateReplaceVisibility();
-    this.matchesElement.textContent = '';
+    this.matchesElementValue.textContent = '';
   }
 
   refreshSearch(): void {
@@ -504,15 +508,17 @@ export class SearchableView extends VBox {
 
   private updateSearchMatchesCountAndCurrentMatchIndex(matches: number, currentMatchIndex: number): void {
     if (!this.currentQuery) {
-      this.matchesElement.textContent = '';
+      this.matchesElementValue.textContent = '';
     } else if (matches === 0 || currentMatchIndex >= 0) {
-      this.matchesElement.textContent = i18nString(UIStrings.dOfD, {PH1: currentMatchIndex + 1, PH2: matches});
+      this.matchesElementValue.textContent = i18nString(UIStrings.dOfD, {PH1: currentMatchIndex + 1, PH2: matches});
       ARIAUtils.setLabel(
           this.matchesElement, i18nString(UIStrings.accessibledOfD, {PH1: currentMatchIndex + 1, PH2: matches}));
     } else if (matches === 1) {
-      this.matchesElement.textContent = i18nString(UIStrings.matchString);
+      this.matchesElementValue.textContent = i18nString(UIStrings.matchString);
+      ARIAUtils.setLabel(this.matchesElement, i18nString(UIStrings.matchString));
     } else {
-      this.matchesElement.textContent = i18nString(UIStrings.dMatches, {PH1: matches});
+      this.matchesElementValue.textContent = i18nString(UIStrings.dMatches, {PH1: matches});
+      ARIAUtils.setLabel(this.matchesElement, i18nString(UIStrings.dMatches, {PH1: matches}));
     }
     this.updateSearchNavigationButtonState(matches > 0);
   }

package/front_end/ui/legacy/SplitWidget.ts

@@ -236,7 +236,7 @@ export class SplitWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typ
     this.#restoreAndApplyShowModeFromSettings();
   }
 
-  showMode(): string {
+  showMode(): ShowMode {
     return this.#showMode;
   }
 

package/front_end/ui/legacy/TextPrompt.ts

@@ -327,7 +327,7 @@ export class TextPrompt extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
    * or the |blurListener| parameter to register a "blur" event listener on the |element|
    * (since the "blur" event does not bubble.)
    */
-  attachAndStartEditing(element: Element, blurListener: (arg0: Event) => void): Element {
+  attachAndStartEditing(element: Element, blurListener?: (arg0: Event) => void): Element {
     const proxyElement = this.#attach(element);
     this.startEditing(blurListener);
     return proxyElement;

package/front_end/ui/legacy/Toolbar.ts

@@ -1166,6 +1166,10 @@ export class ToolbarComboBox extends ToolbarItem<void, HTMLSelectElement> {
     }
   }
 
+  turnShrinkable(): void {
+    this.element.classList.add('toolbar-has-dropdown-shrinkable');
+  }
+
   size(): number {
     return this.element.childElementCount;
   }

package/front_end/ui/legacy/UIUtils.ts

@@ -1295,8 +1295,6 @@ export class DevToolsIconLabel extends HTMLElement {
 
   set data(data: IconData) {
     this.#icon.data = data;
-    // TODO(crbug.com/1427397): Clean this up. This was necessary so `DevToolsIconLabel` can use Lit icon
-    //    while being backwards-compatible with the legacy Icon while working for both small and large icons.
     if (data.height === '14px') {
       this.#icon.style.setProperty('margin-bottom', '-2px');
     } else if (data.height === '20px') {

package/front_end/ui/legacy/components/cookie_table/CookiesTable.ts

@@ -176,6 +176,12 @@ const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined
 
 const expiresSessionValue = i18nLazyString(UIStrings.session);
 
+export interface CookiesTableData {
+  cookies: SDK.Cookie.Cookie[];
+  cookieToBlockedReasons?: ReadonlyMap<SDK.Cookie.Cookie, SDK.CookieModel.BlockedReason[]>;
+  cookieToExemptionReason?: ReadonlyMap<SDK.Cookie.Cookie, SDK.CookieModel.ExemptionReason>;
+}
+
 export class CookiesTable extends UI.Widget.VBox {
   private saveCallback?: ((arg0: SDK.Cookie.Cookie, arg1: SDK.Cookie.Cookie|null) => Promise<boolean>);
   private readonly refreshCallback?: (() => void);
@@ -190,15 +196,15 @@ export class CookiesTable extends UI.Widget.VBox {
   private readonly view: ViewFunction;
   private selectedKey?: string;
   private readonly editable: boolean;
-  private readonly renderInline: boolean;
+  private renderInline: boolean;
   private readonly schemeBindingEnabled: boolean;
   private readonly portBindingEnabled: boolean;
   constructor(
-      renderInline?: boolean,
+      element?: HTMLElement, renderInline?: boolean,
       saveCallback?: ((arg0: SDK.Cookie.Cookie, arg1: SDK.Cookie.Cookie|null) => Promise<boolean>),
       refreshCallback?: (() => void), selectedCallback?: (() => void),
       deleteCallback?: ((arg0: SDK.Cookie.Cookie, arg1: () => void) => void), view?: ViewFunction) {
-    super();
+    super(element);
     if (!view) {
       view = (input, _, target) => {
         // clang-format off
@@ -325,6 +331,15 @@ export class CookiesTable extends UI.Widget.VBox {
     this.requestUpdate();
   }
 
+  set cookiesData(data: CookiesTableData) {
+    this.setCookies(data.cookies, data.cookieToBlockedReasons, data.cookieToExemptionReason);
+  }
+
+  set inline(value: boolean) {
+    this.renderInline = value;
+    this.requestUpdate();
+  }
+
   setCookies(
       cookies: SDK.Cookie.Cookie[],
       cookieToBlockedReasons?: ReadonlyMap<SDK.Cookie.Cookie, SDK.CookieModel.BlockedReason[]>,

package/front_end/ui/legacy/components/data_grid/DataGrid.ts

@@ -68,15 +68,15 @@ const UIStrings = {
   /**
    * @description A context menu item in the Data Grid of a data grid
    */
-  sortByString: 'Sort By',
+  sortByString: 'Sort by',
   /**
    * @description A context menu item in data grids to reset the columns to their default weight
    */
-  resetColumns: 'Reset Columns',
+  resetColumns: 'Reset columns',
   /**
    * @description A context menu item in data grids to list header options.
    */
-  headerOptions: 'Header Options',
+  headerOptions: 'Header options',
   /**
    * @description Text to refresh the page
    */

package/front_end/ui/legacy/components/object_ui/ObjectPropertiesSection.ts

@@ -1697,6 +1697,12 @@ export class Renderer implements UI.UIUtils.Renderer {
     if (options?.expand) {
       section.firstChild()?.expand();
     }
+    const dispatchDimensionChange = (): void => {
+      section.element.dispatchEvent(new CustomEvent('dimensionschanged'));
+    };
+    section.addEventListener(UI.TreeOutline.Events.ElementAttached, dispatchDimensionChange);
+    section.addEventListener(UI.TreeOutline.Events.ElementExpanded, dispatchDimensionChange);
+    section.addEventListener(UI.TreeOutline.Events.ElementCollapsed, dispatchDimensionChange);
     return {
       element: section.element,
       forceSelect: section.forceSelect.bind(section),

package/front_end/ui/legacy/components/perf_ui/FlameChart.ts

@@ -1187,6 +1187,39 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
     this.expandGroup(groupIndex, !this.rawTimelineData.groups[groupIndex].expanded /* setExpanded */);
   }
 
+  bulkExpandGroups(indexes: number[]): void {
+    if (indexes.length === 0) {
+      return;
+    }
+    if (!this.rawTimelineData) {
+      return;
+    }
+
+    const groups = this.rawTimelineData.groups;
+    if (!groups) {
+      return;
+    }
+
+    let didUpdate = false;
+    for (const index of indexes) {
+      if (!this.isGroupCollapsible(index) || groups[index].expanded) {
+        continue;
+      }
+      didUpdate = true;
+      groups[index].expanded = true;
+    }
+    if (didUpdate) {
+      this.#updateAfterGroupExpansionChange();
+    }
+  }
+
+  #updateAfterGroupExpansionChange(): void {
+    this.updateLevelPositions();
+    this.updateHeight();
+    this.draw();
+    this.#notifyProviderOfConfigurationChange();
+  }
+
   private expandGroup(
       groupIndex: number, setExpanded: boolean|undefined = true, propagatedExpand: boolean|undefined = false): void {
     if (groupIndex < 0 || !this.isGroupCollapsible(groupIndex)) {
@@ -1203,12 +1236,10 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
     }
 
     const group = groups[groupIndex];
-    group.expanded = setExpanded;
-
-    this.updateLevelPositions();
 
-    this.updateHighlight();
-    if (!group.expanded) {
+    // If a group was expanded and is now being collapsed, and the selected
+    // entry is within that group, then we have to deselect it.
+    if (!setExpanded) {
       const timelineData = this.timelineData();
       if (timelineData) {
         const level = timelineData.entryLevels[this.selectedEntryIndex];
@@ -1220,10 +1251,13 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
         }
       }
     }
-
-    this.updateHeight();
-    this.draw();
-    this.#notifyProviderOfConfigurationChange();
+    if (group.expanded === setExpanded) {
+      // If the state isn't changing, early exit so we don't waste cycles
+      // redrawing.
+      return;
+    }
+    group.expanded = setExpanded;
+    this.#updateAfterGroupExpansionChange();
 
     this.scrollGroupIntoView(groupIndex);
     // We only want to read expanded/collapsed state on user inputted expand/collapse