chrome-devtools-frontend 1.0.1515796 → 1.0.1516909

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -132,10 +132,6 @@ const UIStringsNotTranslate = {
    * @description Placeholder text for the chat UI input.
    */
   inputPlaceholderForFile: 'Ask a question about the selected file',
-  /**
-   * @description Placeholder text for the chat UI input.
-   */
-  inputPlaceholderForPerformance: 'Ask a question about the selected item and its call tree',
   /**
    * @description Placeholder text for the chat UI input.
    */
@@ -152,18 +148,6 @@ const UIStringsNotTranslate = {
    * @description Placeholder text for the chat UI input when there is no context selected.
    */
   inputPlaceholderForFileNoContext: 'Select a file to ask a question',
-  /**
-   * @description Placeholder text for the chat UI input when there is no context selected.
-   */
-  inputPlaceholderForPerformanceNoContext: 'Select an item to ask a question',
-  /**
-   * @description Placeholder text for the chat UI input.
-   */
-  inputPlaceholderForPerformanceInsights: 'Ask a question about the selected performance insight',
-  /**
-   * @description Placeholder text for the chat UI input.
-   */
-  inputPlaceholderForPerformanceInsightsNoContext: 'Select a performance insight to ask a question',
   /**
    * @description Placeholder text for the chat UI input.
    */
@@ -171,7 +155,7 @@ const UIStringsNotTranslate = {
   /**
    *@description Placeholder text for the chat UI input.
    */
-  inputPlaceholderForPerformanceTraceNoContext: 'Select a performance trace to ask a question',
+  inputPlaceholderForPerformanceTraceNoContext: 'Record or select a performance trace to ask a question',
   /**
    * @description Disclaimer text right after the chat input.
    */
@@ -236,7 +220,7 @@ function selectedElementFilter(maybeNode: SDK.DOMModel.DOMNode|null): SDK.DOMMod
 
 async function getEmptyStateSuggestions(
     context: AiAssistanceModel.ConversationContext<unknown>|null,
-    conversationType?: AiAssistanceModel.ConversationType): Promise<AiAssistanceModel.ConversationSuggestion[]> {
+    conversation?: AiAssistanceModel.Conversation): Promise<AiAssistanceModel.ConversationSuggestion[]> {
   if (context) {
     const specialSuggestions = await context.getSuggestions();
 
@@ -245,11 +229,11 @@ async function getEmptyStateSuggestions(
     }
   }
 
-  if (!conversationType) {
+  if (!conversation?.type || conversation.isReadOnly) {
     return [];
   }
 
-  switch (conversationType) {
+  switch (conversation.type) {
     case AiAssistanceModel.ConversationType.STYLING:
       return [
         {title: 'What can you help me with?', jslogContext: 'styling-default'},
@@ -268,28 +252,14 @@ async function getEmptyStateSuggestions(
         {title: 'Are there any security headers present?', jslogContext: 'network-default'},
         {title: 'Why is the request failing?', jslogContext: 'network-default'},
       ];
-    case AiAssistanceModel.ConversationType.PERFORMANCE_FULL:
+    case AiAssistanceModel.ConversationType.PERFORMANCE: {
       return [
         {title: 'What performance issues exist with my page?', jslogContext: 'performance-default'},
       ];
-    case AiAssistanceModel.ConversationType.PERFORMANCE_INSIGHT:
-    case AiAssistanceModel.ConversationType.PERFORMANCE_CALL_TREE: {
-      const focus = context?.getItem() as AiAssistanceModel.AgentFocus | null;
-      if (focus?.data.type === 'call-tree') {
-        return [
-          {title: 'What\'s the purpose of this work?', jslogContext: 'performance-default'},
-          {title: 'Where is time being spent?', jslogContext: 'performance-default'},
-          {title: 'How can I optimize this?', jslogContext: 'performance-default'},
-        ];
-      }
-
-      return [
-        {title: 'Help me optimize my page load performance', jslogContext: 'performance-insights-default'},
-      ];
     }
 
     default:
-      Platform.assertNever(conversationType, 'Unknown conversation type');
+      Platform.assertNever(conversation.type, 'Unknown conversation type');
   }
 }
 
@@ -619,15 +589,6 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     const isSourcesPanelVisible = viewManager.isViewVisible('sources');
     const isPerformancePanelVisible = viewManager.isViewVisible('timeline');
 
-    // Check if the user has an insight expanded in the performance panel sidebar.
-    // If they have, we default to the Insights agent; otherwise we fallback to
-    // the regular Performance agent.
-    // Note that we do not listen to this flavor changing; this code is here to
-    // ensure that by default we do not pick the Insights agent if the user has
-    // just imported a trace and not done anything else. It doesn't make sense
-    // to select the Insights AI agent in that case.
-    const userHasExpandedPerfInsight =
-        Boolean(UI.Context.Context.instance().flavor(TimelinePanel.TimelinePanel.SelectedInsight));
     let targetConversationType: AiAssistanceModel.ConversationType|undefined = undefined;
     if (isElementsPanelVisible && hostConfig.devToolsFreestyler?.enabled) {
       targetConversationType = AiAssistanceModel.ConversationType.STYLING;
@@ -635,12 +596,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       targetConversationType = AiAssistanceModel.ConversationType.NETWORK;
     } else if (isSourcesPanelVisible && hostConfig.devToolsAiAssistanceFileAgent?.enabled) {
       targetConversationType = AiAssistanceModel.ConversationType.FILE;
-    } else if (
-        isPerformancePanelVisible && hostConfig.devToolsAiAssistancePerformanceAgent?.enabled &&
-        hostConfig.devToolsAiAssistancePerformanceAgent?.insightsEnabled && userHasExpandedPerfInsight) {
-      targetConversationType = AiAssistanceModel.ConversationType.PERFORMANCE_INSIGHT;
     } else if (isPerformancePanelVisible && hostConfig.devToolsAiAssistancePerformanceAgent?.enabled) {
-      targetConversationType = AiAssistanceModel.ConversationType.PERFORMANCE_CALL_TREE;
+      targetConversationType = AiAssistanceModel.ConversationType.PERFORMANCE;
     }
 
     if (this.#conversation?.type === targetConversationType) {
@@ -845,25 +802,6 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         this.#selectedPerformanceTrace =
             Boolean(ev.data) ? new AiAssistanceModel.PerformanceTraceContext(ev.data) : null;
 
-        let conversationType: AiAssistanceModel.ConversationType|undefined;
-        if (ev.data) {
-          if (ev.data.data.type === 'full') {
-            conversationType = AiAssistanceModel.ConversationType.PERFORMANCE_FULL;
-          } else if (ev.data.data.type === 'insight') {
-            conversationType = AiAssistanceModel.ConversationType.PERFORMANCE_INSIGHT;
-          } else if (ev.data.data.type === 'call-tree') {
-            conversationType = AiAssistanceModel.ConversationType.PERFORMANCE_CALL_TREE;
-          } else {
-            Platform.assertNever(ev.data.data, 'Unknown agent focus');
-          }
-        }
-
-        let agent = this.#conversationAgent;
-        if (conversationType && agent instanceof AiAssistanceModel.PerformanceAgent &&
-            agent.getConversationType() !== conversationType) {
-          agent = this.#conversationHandler.createAgent(conversationType);
-        }
-
         this.#updateConversationState({agent: this.#conversationAgent});
       };
 
@@ -898,7 +836,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   }
 
   override async performUpdate(): Promise<void> {
-    const emptyStateSuggestions = await getEmptyStateSuggestions(this.#selectedContext, this.#conversation?.type);
+    const emptyStateSuggestions = await getEmptyStateSuggestions(this.#selectedContext, this.#conversation);
 
     this.view(
         {
@@ -1039,21 +977,16 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       case AiAssistanceModel.ConversationType.NETWORK:
         return this.#selectedContext ? lockedString(UIStringsNotTranslate.inputPlaceholderForNetwork) :
                                        lockedString(UIStringsNotTranslate.inputPlaceholderForNetworkNoContext);
-      case AiAssistanceModel.ConversationType.PERFORMANCE_CALL_TREE: {
+      case AiAssistanceModel.ConversationType.PERFORMANCE: {
         const perfPanel = UI.Context.Context.instance().flavor(TimelinePanel.TimelinePanel.TimelinePanel);
         if (perfPanel?.hasActiveTrace()) {
-          return this.#selectedContext ? lockedString(UIStringsNotTranslate.inputPlaceholderForPerformance) :
-                                         lockedString(UIStringsNotTranslate.inputPlaceholderForPerformanceNoContext);
+          return this.#selectedContext ?
+              lockedString(UIStringsNotTranslate.inputPlaceholderForPerformanceTrace) :
+              lockedString(UIStringsNotTranslate.inputPlaceholderForPerformanceTraceNoContext);
         }
+
         return lockedString(UIStringsNotTranslate.inputPlaceholderForPerformanceWithNoRecording);
       }
-      case AiAssistanceModel.ConversationType.PERFORMANCE_INSIGHT:
-        return this.#selectedContext ?
-            lockedString(UIStringsNotTranslate.inputPlaceholderForPerformanceInsights) :
-            lockedString(UIStringsNotTranslate.inputPlaceholderForPerformanceInsightsNoContext);
-      case AiAssistanceModel.ConversationType.PERFORMANCE_FULL:
-        return this.#selectedContext ? lockedString(UIStringsNotTranslate.inputPlaceholderForPerformanceTrace) :
-                                       lockedString(UIStringsNotTranslate.inputPlaceholderForPerformanceTraceNoContext);
     }
   }
 
@@ -1084,9 +1017,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
 
       // It is deliberate that both Performance agents use the same disclaimer
       // text and this has been approved by Privacy.
-      case AiAssistanceModel.ConversationType.PERFORMANCE_FULL:
-      case AiAssistanceModel.ConversationType.PERFORMANCE_CALL_TREE:
-      case AiAssistanceModel.ConversationType.PERFORMANCE_INSIGHT:
+      case AiAssistanceModel.ConversationType.PERFORMANCE:
         if (noLogging) {
           return lockedString(UIStringsNotTranslate.inputDisclaimerForPerformanceEnterpriseNoLogging);
         }
@@ -1121,18 +1052,14 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     }
     if (context instanceof AiAssistanceModel.PerformanceTraceContext) {
       const focus = context.getItem().data;
-      if (focus.type === 'full') {
-        return;
-      }
-      if (focus.type === 'call-tree') {
+      if (focus.callTree) {
         const event = focus.callTree.selectedNode?.event ?? focus.callTree.rootNode.event;
         const trace = new SDK.TraceObject.RevealableEvent(event);
         return Common.Revealer.reveal(trace);
       }
-      if (focus.type === 'insight') {
+      if (focus.insight) {
         return Common.Revealer.reveal(focus.insight);
       }
-      Platform.assertNever(focus, 'Unknown agent focus');
     }
     // Node picker is using linkifier.
   }
@@ -1169,17 +1096,17 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       }
       case 'drjones.performance-panel-context': {
         Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceOpenedFromPerformancePanelCallTree);
-        targetConversationType = AiAssistanceModel.ConversationType.PERFORMANCE_CALL_TREE;
+        targetConversationType = AiAssistanceModel.ConversationType.PERFORMANCE;
         break;
       }
       case 'drjones.performance-insight-context': {
         Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceOpenedFromPerformanceInsight);
-        targetConversationType = AiAssistanceModel.ConversationType.PERFORMANCE_INSIGHT;
+        targetConversationType = AiAssistanceModel.ConversationType.PERFORMANCE;
         break;
       }
       case 'drjones.performance-panel-full-context': {
         Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceOpenedFromPerformanceFullButton);
-        targetConversationType = AiAssistanceModel.ConversationType.PERFORMANCE_FULL;
+        targetConversationType = AiAssistanceModel.ConversationType.PERFORMANCE;
         break;
       }
       case 'drjones.sources-floating-button': {
@@ -1200,10 +1127,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
 
     let agent = this.#conversationAgent;
     if (!this.#conversation || !this.#conversationAgent || this.#conversation.type !== targetConversationType ||
-        this.#conversation?.isEmpty ||
-        targetConversationType === AiAssistanceModel.ConversationType.PERFORMANCE_CALL_TREE ||
-        (agent instanceof AiAssistanceModel.PerformanceAgent &&
-         agent.getConversationType() !== targetConversationType)) {
+        this.#conversation?.isEmpty) {
       agent = this.#conversationHandler.createAgent(targetConversationType, this.#changeManager);
     }
     this.#updateConversationState({agent});
@@ -1448,9 +1372,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       case AiAssistanceModel.ConversationType.NETWORK:
         context = this.#selectedRequest;
         break;
-      case AiAssistanceModel.ConversationType.PERFORMANCE_FULL:
-      case AiAssistanceModel.ConversationType.PERFORMANCE_CALL_TREE:
-      case AiAssistanceModel.ConversationType.PERFORMANCE_INSIGHT:
+      case AiAssistanceModel.ConversationType.PERFORMANCE:
         context = this.#selectedPerformanceTrace;
         break;
     }

package/front_end/panels/application/ServiceWorkersView.ts

@@ -487,7 +487,6 @@ export class Section {
     this.routerView = new ApplicationComponents.ServiceWorkerRouterView.ServiceWorkerRouterView();
     this.networkRequests = new Buttons.Button.Button();
     this.networkRequests.data = {
-      iconName: 'bottom-panel-open',
       variant: Buttons.Button.Variant.TEXT,
       title: i18nString(UIStrings.networkRequests),
       jslogContext: 'show-network-requests',

package/front_end/panels/browser_debugger/CategorizedBreakpointsSidebarPane.ts

@@ -176,7 +176,6 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
             }
           };
 
-  const {on} = UI.UIUtils.HTMLElementWithLightDOMTemplate;
   const classes =
       (breakpoint: SDK.CategorizedBreakpoint.CategorizedBreakpoint): ReturnType<typeof Lit.Directives.classMap> =>
           Lit.Directives.classMap({
@@ -239,7 +238,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
                 ?indeterminate=${breakpoints.some(breakpoint => !breakpoint.enabled()) &&
                                  breakpoints.some(breakpoint => breakpoint.enabled())}
                 ?checked=${!breakpoints.some(breakpoint => !breakpoint.enabled())}
-                @change=${on((e: Event) => onCheckboxClicked(e, category))}
+                @change=${(e: Event) => onCheckboxClicked(e, category)}
               >${getLocalizedCategory(category)}</devtools-checkbox>
               <ul
                   role="group"
@@ -257,7 +256,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
                     ?checked=${breakpoint.enabled()}
                     aria-description=${breakpoint === input.highlightedItem ? i18nString(UIStrings.breakpointHit)
                                                                             : Lit.nothing}
-                    @change=${on((e: Event) => onCheckboxClicked(e, breakpoint))}
+                    @change=${(e: Event) => onCheckboxClicked(e, breakpoint)}
                   >${Sources.CategorizedBreakpointL10n.getLocalizedBreakpointName(breakpoint.name)}</devtools-checkbox>
                 </li>`)}
               </ul>

package/front_end/panels/common/BadgeNotification.ts

@@ -69,6 +69,8 @@ const lockedString = i18n.i18n.lockedString;
 
 const LEFT_OFFSET = 5;
 const BOTTOM_OFFSET = 5;
+const AUTO_CLOSE_TIME_IN_MS = 30000;
+
 export interface BadgeNotificationAction {
   label: string;
   jslogContext?: string;
@@ -80,10 +82,11 @@ export interface BadgeNotificationProperties {
   message: HTMLElement|string;
   imageUri: string;
   actions: BadgeNotificationAction[];
+  isStarterBadge: boolean;
 }
 
 export interface ViewInput extends BadgeNotificationProperties {
-  onCloseClick: () => void;
+  onDismissClick: () => void;
 }
 
 // clang-format off
@@ -101,7 +104,7 @@ const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement)
 
   const crossButton = html`<devtools-button
         class="dismiss notification-button"
-        @click=${input.onCloseClick}
+        @click=${input.onDismissClick}
         jslog=${VisualLogging.action('badge-notification.dismiss').track({click: true})}
         aria-label=${i18nString(UIStrings.close)}
         .iconName=${'cross'}
@@ -138,9 +141,10 @@ export class BadgeNotification extends UI.Widget.Widget {
   message: HTMLElement|string = '';
   imageUri = '';
   actions: BadgeNotificationAction[] = [];
+  isStarterBadge = false;
 
+  #autoCloseTimeout?: number;
   #view: View;
-
   constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element);
     this.#view = view;
@@ -170,12 +174,18 @@ export class BadgeNotification extends UI.Widget.Widget {
     this.message = properties.message;
     this.imageUri = properties.imageUri;
     this.actions = properties.actions;
+    this.isStarterBadge = properties.isStarterBadge;
     this.requestUpdate();
     this.show(document.body);
 
     void this.updateComplete.then(() => {
       this.#positionNotification();
     });
+
+    if (this.#autoCloseTimeout) {
+      window.clearTimeout(this.#autoCloseTimeout);
+    }
+    this.#autoCloseTimeout = window.setTimeout(this.#onAutoClose, AUTO_CLOSE_TIME_IN_MS);
   }
 
   async #presentStarterBadge(badge: Badges.Badge): Promise<void> {
@@ -201,17 +211,21 @@ export class BadgeNotification extends UI.Widget.Widget {
         actions: [
           {
             label: i18nString(UIStrings.remindMeLater),
-            onClick: () => {/* To implement */},
+            onClick: () => {
+              this.detach();
+              Badges.UserBadges.instance().snoozeStarterBadge();
+            },
           },
           {
             label: i18nString(UIStrings.receiveBadges),
             onClick: () => {
-              this.#close();
+              this.detach();
               revealBadgeSettings();
             }
           }
         ],
         imageUri: badge.imageUri,
+        isStarterBadge: true,
       });
       return;
     }
@@ -223,17 +237,21 @@ export class BadgeNotification extends UI.Widget.Widget {
       actions: [
         {
           label: i18nString(UIStrings.remindMeLater),
-          onClick: () => {/* TODO(ergunsh): Implement */},
+          onClick: () => {
+            this.detach();
+            Badges.UserBadges.instance().snoozeStarterBadge();
+          },
         },
         {
           label: i18nString(UIStrings.createProfile),
           onClick: () => {
-            this.#close();
+            this.detach();
             GdpSignUpDialog.GdpSignUpDialog.show();
           }
         }
       ],
       imageUri: badge.imageUri,
+      isStarterBadge: true,
     });
   }
 
@@ -244,7 +262,7 @@ export class BadgeNotification extends UI.Widget.Widget {
         {
           label: i18nString(UIStrings.manageSettings),
           onClick: () => {
-            this.#close();
+            this.detach();
             revealBadgeSettings();
           },
         },
@@ -256,11 +274,28 @@ export class BadgeNotification extends UI.Widget.Widget {
         }
       ],
       imageUri: badge.imageUri,
+      isStarterBadge: badge.isStarterBadge,
     });
   }
 
-  #close = (): void => {
+  override onDetach(): void {
+    window.clearTimeout(this.#autoCloseTimeout);
+  }
+
+  #onDismissClick = (): void => {
+    this.detach();
+
+    if (this.isStarterBadge) {
+      Badges.UserBadges.instance().dismissStarterBadge();
+    }
+  };
+
+  #onAutoClose = (): void => {
     this.detach();
+
+    if (this.isStarterBadge) {
+      Badges.UserBadges.instance().snoozeStarterBadge();
+    }
   };
 
   override wasShown(): void {
@@ -273,7 +308,8 @@ export class BadgeNotification extends UI.Widget.Widget {
       message: this.message,
       imageUri: this.imageUri,
       actions: this.actions,
-      onCloseClick: this.#close,
+      isStarterBadge: this.isStarterBadge,
+      onDismissClick: this.#onDismissClick,
     };
     this.#view(viewInput, undefined, this.contentElement);
   }

package/front_end/panels/common/GdpSignUpDialog.ts

@@ -193,10 +193,12 @@ export class GdpSignUpDialog extends UI.Widget.VBox {
   #dialog: UI.Dialog.Dialog;
   #keepMeUpdated = false;
   #isSigningUp = false;
+  #onSuccess?: () => void;
 
-  constructor(options: {dialog: UI.Dialog.Dialog}, view?: View) {
+  constructor(options: {dialog: UI.Dialog.Dialog, onSuccess?: () => void}, view?: View) {
     super();
     this.#dialog = options.dialog;
+    this.#onSuccess = options.onSuccess;
     this.#view = view ?? DEFAULT_VIEW;
     this.requestUpdate();
   }
@@ -215,6 +217,7 @@ export class GdpSignUpDialog extends UI.Widget.VBox {
       Common.Settings.Settings.instance().moduleSetting('receive-gdp-badges').set(true);
       await Badges.UserBadges.instance().initialize();
       Badges.UserBadges.instance().recordAction(Badges.BadgeAction.GDP_SIGN_UP_COMPLETE);
+      this.#onSuccess?.();
       this.#dialog.hide();
     } else {
       Snackbars.Snackbar.Snackbar.show({message: i18nString(UIStrings.signUpFailed)}, this.#dialog.contentElement);
@@ -240,14 +243,14 @@ export class GdpSignUpDialog extends UI.Widget.VBox {
     this.#view(viewInput, undefined, this.contentElement);
   }
 
-  static show(): void {
+  static show({onSuccess}: {onSuccess?: () => void} = {}): void {
     const dialog = new UI.Dialog.Dialog();
     dialog.setAriaLabel(i18nString(UIStrings.gdpDialogAriaLabel));
     dialog.setMaxContentSize(new Geometry.Size(384, 500));
     dialog.setSizeBehavior(UI.GlassPane.SizeBehavior.SET_EXACT_WIDTH_MAX_HEIGHT);
     dialog.setDimmed(true);
 
-    new GdpSignUpDialog({dialog}).show(dialog.contentElement);
+    new GdpSignUpDialog({dialog, onSuccess}).show(dialog.contentElement);
     dialog.show(undefined, /* stack */ true);
   }
 }

package/front_end/panels/console/ConsoleView.ts

@@ -322,7 +322,7 @@ export class ConsoleView extends UI.Widget.VBox implements
   private buildHiddenCacheTimeout?: number;
   private searchShouldJumpBackwards?: boolean;
   private searchProgressIndicator?: UI.ProgressIndicator.ProgressIndicator;
-  private innerSearchTimeoutId?: number;
+  #searchTimeoutId?: number;
   private muteViewportUpdates?: boolean;
   private waitForScrollTimeout?: number;
   private issueCounter: IssueCounter.IssueCounter.IssueCounter;
@@ -1051,18 +1051,13 @@ export class ConsoleView extends UI.Widget.VBox implements
       return;
     }
 
-    // Track any adjacent messages.
-    const originatingMessage = viewMessage.consoleMessage().originatingMessage();
-    const adjacent = Boolean(originatingMessage && lastMessage?.consoleMessage() === originatingMessage);
-    viewMessage.setAdjacentUserCommandResult(adjacent);
-
-    // Ensure any parent groups for this message are shown.
     const currentGroup = viewMessage.consoleGroup();
-    showGroup(currentGroup, this.visibleViewMessages);
 
-    // Determine whether this message should actually be visible.
-    const shouldShowMessage = !currentGroup?.messagesHidden();
-    if (shouldShowMessage) {
+    if (!currentGroup?.messagesHidden()) {
+      const originatingMessage = viewMessage.consoleMessage().originatingMessage();
+      const adjacent = Boolean(originatingMessage && lastMessage?.consoleMessage() === originatingMessage);
+      viewMessage.setAdjacentUserCommandResult(adjacent);
+      showGroup(currentGroup, this.visibleViewMessages);
       this.visibleViewMessages.push(viewMessage);
       this.searchMessage(this.visibleViewMessages.length - 1);
     }
@@ -1216,8 +1211,8 @@ export class ConsoleView extends UI.Widget.VBox implements
     const stream = new Bindings.FileUtils.FileOutputStream();
 
     const progressIndicator = document.createElement('devtools-progress');
-    progressIndicator.setTitle(i18nString(UIStrings.writingFile));
-    progressIndicator.setTotalWork(this.itemCount());
+    progressIndicator.title = i18nString(UIStrings.writingFile);
+    progressIndicator.totalWork = this.itemCount();
 
     const chunkSize = 350;
 
@@ -1227,7 +1222,7 @@ export class ConsoleView extends UI.Widget.VBox implements
     this.progressToolbarItem.element.appendChild(progressIndicator);
 
     let messageIndex = 0;
-    while (messageIndex < this.itemCount() && !progressIndicator.isCanceled()) {
+    while (messageIndex < this.itemCount() && !progressIndicator.canceled) {
       const messageContents = [];
       let i;
       for (i = 0; i < chunkSize && i + messageIndex < this.itemCount(); ++i) {
@@ -1236,11 +1231,11 @@ export class ConsoleView extends UI.Widget.VBox implements
       }
       messageIndex += i;
       await stream.write(messageContents.join('\n') + '\n');
-      progressIndicator.setWorked(messageIndex);
+      progressIndicator.worked = messageIndex;
     }
 
     void stream.close();
-    progressIndicator.done();
+    progressIndicator.done = true;
   }
 
   private async copyConsole(): Promise<void> {
@@ -1519,21 +1514,21 @@ export class ConsoleView extends UI.Widget.VBox implements
     }
 
     this.searchProgressIndicator = document.createElement('devtools-progress');
-    this.searchProgressIndicator.setTitle(i18nString(UIStrings.searching));
-    this.searchProgressIndicator.setTotalWork(this.visibleViewMessages.length);
+    this.searchProgressIndicator.title = i18nString(UIStrings.searching);
+    this.searchProgressIndicator.totalWork = this.visibleViewMessages.length;
     this.progressToolbarItem.element.appendChild(this.searchProgressIndicator);
 
-    this.innerSearch(0);
+    this.#search(0);
   }
 
   private cleanupAfterSearch(): void {
     delete this.searchShouldJumpBackwards;
-    if (this.innerSearchTimeoutId) {
-      clearTimeout(this.innerSearchTimeoutId);
-      delete this.innerSearchTimeoutId;
+    if (this.#searchTimeoutId) {
+      clearTimeout(this.#searchTimeoutId);
+      this.#searchTimeoutId = undefined;
     }
     if (this.searchProgressIndicator) {
-      this.searchProgressIndicator.done();
+      this.searchProgressIndicator.done = true;
       delete this.searchProgressIndicator;
     }
   }
@@ -1542,9 +1537,9 @@ export class ConsoleView extends UI.Widget.VBox implements
     // This method is sniffed in tests.
   }
 
-  private innerSearch(index: number): void {
-    delete this.innerSearchTimeoutId;
-    if (this.searchProgressIndicator?.isCanceled()) {
+  #search(index: number): void {
+    this.#searchTimeoutId = undefined;
+    if (this.searchProgressIndicator?.canceled) {
       this.cleanupAfterSearch();
       return;
     }
@@ -1566,9 +1561,9 @@ export class ConsoleView extends UI.Widget.VBox implements
       return;
     }
 
-    this.innerSearchTimeoutId = window.setTimeout(this.innerSearch.bind(this, index), 100);
+    this.#searchTimeoutId = window.setTimeout(this.#search.bind(this, index), 100);
     if (this.searchProgressIndicator) {
-      this.searchProgressIndicator.setWorked(index);
+      this.searchProgressIndicator.worked = index;
     }
   }
 

package/front_end/panels/console/ConsoleViewport.ts

@@ -435,13 +435,13 @@ export class ConsoleViewport {
 
   refresh(): void {
     this.observer.disconnect();
-    this.innerRefresh();
+    this.#refresh();
     if (this.#stickToBottom) {
       this.observer.observe(this.#contentElement, this.observerConfig);
     }
   }
 
-  private innerRefresh(): void {
+  #refresh(): void {
     if (!this.visibleHeight()) {
       return;
     }  // Do nothing for invisible controls.

package/front_end/panels/console/consoleView.css

@@ -325,14 +325,24 @@
 .console-view-object-properties-section {
   padding: 0;
   position: relative;
-  vertical-align: top;
   color: inherit;
   display: inline-block;
   overflow-wrap: break-word;
   max-width: 100%;
+  vertical-align: top;
   margin-top: -1.5px;
 }
 
+/* Console content is rendered in "Noto Sans Mono" on Linux, which has a
+ * different actual line-height than the fonts used on Windows or MacOS.
+ * "vertical-align: middle" breaks the layout when expanding an object such
+ * that it spans multiple lines. We therefore align to the top, and use a
+ * different "margin-top" on Linux to compensate for the line-height difference.
+ */
+.platform-linux .console-view-object-properties-section {
+  margin-top: 0;
+}
+
 .info-note {
   background-color: var(--sys-color-tonal-container);
 }

package/front_end/panels/coverage/CoverageView.ts

@@ -643,12 +643,12 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
           const view = UI.ViewManager.ViewManager.instance().view(coverageViewId);
           return view?.widget();
         })
-        .then(widget => this.innerHandleAction(widget as CoverageView, actionId));
+        .then(widget => this.#handleAction(widget as CoverageView, actionId));
 
     return true;
   }
 
-  private innerHandleAction(coverageView: CoverageView, actionId: string): void {
+  #handleAction(coverageView: CoverageView, actionId: string): void {
     switch (actionId) {
       case 'coverage.toggle-recording':
         coverageView.toggleRecording();