chrome-devtools-frontend 1.0.1621678 → 1.0.1624409

package/front_end/models/ai_assistance/agents/PerformanceAgent.ts

@@ -171,7 +171,7 @@ Note: if the user asks a specific question about the trace (such as "What is my
   - \`nav-to-lcp\` (navigation to LCP)
   - \`lcp-ttfb\` (LCP TTFB phase)
   - \`lcp-render-delay\` (LCP render delay phase)
-  - Insight names: \`LCPBreakdown\`, \`CLSCulprits\`, \`RenderBlocking\`, \`NetworkDependencyTree\`, \`ImageDelivery\`, \`FontDisplay\`, \`ThirdParties\`, \`ForcedReflow\`, \`Cache\`, \`DOMSize\`
+  - Insight names: \`LCPBreakdown\`, \`INPBreakdown\`, \`CLSCulprits\`, \`ThirdParties\`, \`DocumentLatency\`, \`DOMSize\`, \`DuplicatedJavaScript\`, \`FontDisplay\`, \`ForcedReflow\`, \`ImageDelivery\`, \`LCPDiscovery\`, \`LegacyJavaScript\`, \`NetworkDependencyTree\`, \`RenderBlocking\`, \`SlowCSSSelector\`, \`Viewport\`, \`ModernHTTP\`, \`Cache\`, \`CharacterSet\`
   - Navigation IDs: \`NAVIGATION_0\`, \`NAVIGATION_1\`, etc.
 - Use \`getEventByKey\` to get data on a specific trace event. This is great for root-cause analysis or validating any assumptions.
 - Provide clear, actionable recommendations. Avoid technical jargon unless necessary, and explain any technical terms used.
@@ -222,12 +222,6 @@ enum ScorePriority {
   DEFAULT = 1,
 }
 
-// TODO(crbug.com/503296282): Remove this when we add support for all insights
-const SUPPORTED_INSIGHT_WIDGETS = new Set<Trace.Insights.Types.InsightKeys>([
-  Trace.Insights.Types.InsightKeys.LCP_BREAKDOWN,
-  Trace.Insights.Types.InsightKeys.RENDER_BLOCKING,
-]);
-
 export class PerformanceTraceContext extends ConversationContext<AgentFocus> {
   static fromParsedTrace(parsedTrace: Trace.TraceModel.ParsedTrace): PerformanceTraceContext {
     return new PerformanceTraceContext(AgentFocus.fromParsedTrace(parsedTrace));
@@ -545,7 +539,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
     // Case 2: Insight -> PERF_INSIGHT widget
     if (focus.insight) {
       const insightKey = focus.insight.insightKey;
-      if (Trace.Insights.Common.isInsightKey(insightKey) && SUPPORTED_INSIGHT_WIDGETS.has(insightKey)) {
+      if (Trace.Insights.Common.isInsightKey(insightKey)) {
         widgets.push({
           name: 'PERF_INSIGHT',
           data: {
@@ -1018,7 +1012,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
         }
 
         const insightKey = params.insightName;
-        if (Trace.Insights.Common.isInsightKey(insightKey) && SUPPORTED_INSIGHT_WIDGETS.has(insightKey)) {
+        if (Trace.Insights.Common.isInsightKey(insightKey)) {
           widgets.push({
             name: 'PERF_INSIGHT',
             data: {

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -2324,6 +2324,11 @@ export const NativeFunctions = [
     signatures: [["type"]],
     receivers: ["HTMLScriptElement","ClipboardItem"]
   },
+  {
+    name: "supports",
+    signatures: [["operation","algorithm","?length"],["operation","algorithm","additionalAlgorithm"]],
+    receivers: ["SubtleCrypto"]
+  },
   {
     name: "toggle",
     signatures: [["token","?force"]]
@@ -7435,10 +7440,6 @@ export const NativeFunctions = [
     name: "setReportEventDataForAutomaticBeacons",
     signatures: [["event"]]
   },
-  {
-    name: "notifyEvent",
-    signatures: [["triggering_event"]]
-  },
   {
     name: "FencedFrameConfig",
     signatures: [["url"]]
@@ -9391,6 +9392,10 @@ export const NativeFunctions = [
     name: "startDiagnosticLogging",
     signatures: [["?options"]]
   },
+  {
+    name: "finishDiagnosticLogging",
+    signatures: [["?options"]]
+  },
   {
     name: "CloseEvent",
     signatures: [["type","?eventInitDict"]]

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

@@ -20,6 +20,7 @@ import * as AiAssistanceModel from '../../../models/ai_assistance/ai_assistance.
 import * as ComputedStyle from '../../../models/computed_style/computed_style.js';
 import * as Trace from '../../../models/trace/trace.js';
 import * as PanelsCommon from '../../../panels/common/common.js';
+import * as TraceBounds from '../../../services/trace_bounds/trace_bounds.js';
 import * as Marked from '../../../third_party/marked/marked.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as Input from '../../../ui/components/input/input.js';
@@ -31,6 +32,7 @@ import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import * as Elements from '../../elements/elements.js';
 import * as TimelineComponents from '../../timeline/components/components.js';
+import type {BaseInsightComponent} from '../../timeline/components/insights/BaseInsightComponent.js';
 import * as TimelineInsights from '../../timeline/components/insights/insights.js';
 import * as Timeline from '../../timeline/timeline.js';
 import * as TimelineUtils from '../../timeline/utils/utils.js';
@@ -44,7 +46,7 @@ const {html, Directives: {ref, ifDefined}} = Lit;
 const lockedString = i18n.i18n.lockedString;
 const {widget} = UI.Widget;
 
-const REPORT_URL = 'https://crbug.com/364805393' as Platform.DevToolsPath.UrlString;
+const REPORT_URL = 'https://crbug.com/508304827' as Platform.DevToolsPath.UrlString;
 const SCROLL_ROUNDING_OFFSET = 1;
 const MAX_NUM_LINES_IN_CODEBLOCK = 11;
 
@@ -201,6 +203,14 @@ const UIStringsNotTranslate = {
    * @description Accessible label for the reveal button in the LCP breakdown widget.
    */
   revealLcpBreakdown: 'Reveal LCP breakdown',
+  /**
+   * @description Accessible label for the reveal button in the LCP discovery widget.
+   */
+  revealLcpDiscovery: 'Reveal LCP discovery',
+  /**
+   * @description Accessible label for the reveal button in the layout shift culprits widget.
+   */
+  revealClsCulprits: 'Reveal layout shift culprits',
   /**
    * @description Accessible label for the reveal button in the render-blocking requests widget.
    */
@@ -217,6 +227,14 @@ const UIStringsNotTranslate = {
    * @description Accessible label for the reveal button in the bottom up thread activity widget.
    */
   revealBottomUpTree: 'Reveal bottom-up thread activity',
+  /**
+   * @description Accessible label for the reveal button in the network dependency tree widget.
+   */
+  revealNetworkDependencyTree: 'Reveal network dependency tree',
+  /**
+   * @description Accessible label for the reveal button in the 3rd parties widget.
+   */
+  revealThirdParties: 'Reveal 3rd parties',
   /**
    * @description Title for the core web vitals widget.
    */
@@ -225,10 +243,26 @@ const UIStringsNotTranslate = {
    * @description Title for the LCP breakdown widget.
    */
   lcpBreakdown: 'LCP breakdown',
+  /**
+   * @description Title for the LCP discovery widget.
+   */
+  lcpDiscovery: 'LCP discovery',
+  /**
+   * @description Title for the layout shift culprits widget.
+   */
+  clsCulprits: 'Layout shift culprits',
   /**
    * @description Title for the render-blocking requests widget.
    */
   renderBlockingBreakdown: 'Render-blocking requests',
+  /**
+   * @description Title for the network dependency tree widget.
+   */
+  networkDependencyTree: 'Network dependency tree',
+  /**
+   * @description Title for the 3rd parties widget.
+   */
+  thirdParties: '3rd parties',
   /**
    * @description Title for the LCP element widget.
    */
@@ -245,6 +279,110 @@ const UIStringsNotTranslate = {
    * @description Title for the bottom up thread activity widget.
    */
   bottomUpTree: 'Bottom-up thread activity',
+  /**
+   * @description Accessible label for the reveal button in the forced reflow widget.
+   */
+  revealForcedReflow: 'Reveal forced reflow',
+  /**
+   * @description Title for the forced reflow widget.
+   */
+  forcedReflow: 'Forced reflow',
+  /**
+   * @description Accessible label for the reveal button in the cache widget.
+   */
+  revealCache: 'Reveal efficient cache lifetimes',
+  /**
+   * @description Title for the cache widget.
+   */
+  cache: 'Efficient cache lifetimes',
+  /**
+   * @description Accessible label for the reveal button in the INP breakdown widget.
+   */
+  revealInpBreakdown: 'Reveal INP breakdown',
+  /**
+   * @description Title for the INP breakdown widget.
+   */
+  inpBreakdown: 'INP breakdown',
+  /**
+   * @description Accessible label for the reveal button in the document latency widget.
+   */
+  revealDocumentLatency: 'Reveal document latency',
+  /**
+   * @description Title for the document latency widget.
+   */
+  documentLatency: 'Document latency',
+  /**
+   * @description Accessible label for the reveal button in the DOM size widget.
+   */
+  revealDomSize: 'Reveal DOM size',
+  /**
+   * @description Title for the DOM size widget.
+   */
+  domSize: 'DOM size',
+  /**
+   * @description Accessible label for the reveal button in the duplicated JavaScript widget.
+   */
+  revealDuplicateJavaScript: 'Reveal duplicated JavaScript',
+  /**
+   * @description Title for the duplicated JavaScript widget.
+   */
+  duplicateJavaScript: 'Duplicated JavaScript',
+  /**
+   * @description Accessible label for the reveal button in the image delivery widget.
+   */
+  revealImageDelivery: 'Reveal image delivery',
+  /**
+   * @description Title for the image delivery widget.
+   */
+  imageDelivery: 'Image delivery',
+  /**
+   * @description Accessible label for the reveal button in the font display widget.
+   */
+  revealFontDisplay: 'Reveal font display',
+  /**
+   * @description Title for the font display widget.
+   */
+  fontDisplay: 'Font display',
+  /**
+   * @description Accessible label for the reveal button in the slow CSS selectors widget.
+   */
+  revealSlowCssSelector: 'Reveal slow CSS selectors',
+  /**
+   * @description Title for the slow CSS selectors widget.
+   */
+  slowCssSelector: 'Slow CSS selectors',
+  /**
+   * @description Accessible label for the reveal button in the legacy JavaScript widget.
+   */
+  revealLegacyJavaScript: 'Reveal legacy JavaScript',
+  /**
+   * @description Title for the legacy JavaScript widget.
+   */
+  legacyJavaScript: 'Legacy JavaScript',
+  /**
+   * @description Accessible label for the reveal button in the viewport optimization widget.
+   */
+  revealViewport: 'Reveal viewport optimization',
+  /**
+   * @description Title for the viewport optimization widget.
+   */
+  viewport: 'Viewport optimization',
+  /**
+   * @description Accessible label for the reveal button in the modern HTTP usage widget.
+   */
+  revealModernHttp: 'Reveal modern HTTP usage',
+  /**
+   * @description Title for the modern HTTP usage widget.
+   */
+  modernHttp: 'Modern HTTP usage',
+  /**
+   * @description Accessible label for the reveal button in the character set declaration widget.
+   */
+  revealCharacterSet: 'Reveal character set declaration',
+  /**
+   * @description Title for the character set declaration widget.
+   */
+  characterSet: 'Character set declaration',
 } as const;
 
 export interface Step {
@@ -922,55 +1060,167 @@ async function makeStylePropertiesWidget(widgetData: StylePropertiesAiWidget): P
   };
 }
 
+const INSIGHT_METADATA: Record<string, {
+  component: new () => BaseInsightComponent<Trace.Insights.Types.InsightModel>,
+  accessibleLabel: string,
+  title: string,
+  jslog: string,
+}> = {
+  [Trace.Insights.Types.InsightKeys.LCP_BREAKDOWN]: {
+    component: TimelineInsights.LCPBreakdown.LCPBreakdown,
+    accessibleLabel: UIStringsNotTranslate.revealLcpBreakdown,
+    title: UIStringsNotTranslate.lcpBreakdown,
+    jslog: 'lcp-breakdown-widget',
+  },
+  [Trace.Insights.Types.InsightKeys.RENDER_BLOCKING]: {
+    component: TimelineInsights.RenderBlocking.RenderBlocking,
+    accessibleLabel: UIStringsNotTranslate.revealRenderBlockingBreakdown,
+    title: UIStringsNotTranslate.renderBlockingBreakdown,
+    jslog: 'render-blocking-widget',
+  },
+  [Trace.Insights.Types.InsightKeys.LCP_DISCOVERY]: {
+    component: TimelineInsights.LCPDiscovery.LCPDiscovery,
+    accessibleLabel: UIStringsNotTranslate.revealLcpDiscovery,
+    title: UIStringsNotTranslate.lcpDiscovery,
+    jslog: 'lcp-discovery-widget',
+  },
+  [Trace.Insights.Types.InsightKeys.CLS_CULPRITS]: {
+    component: TimelineInsights.CLSCulprits.CLSCulprits,
+    accessibleLabel: UIStringsNotTranslate.revealClsCulprits,
+    title: UIStringsNotTranslate.clsCulprits,
+    jslog: 'cls-culprits-widget',
+  },
+  [Trace.Insights.Types.InsightKeys.NETWORK_DEPENDENCY_TREE]: {
+    component: TimelineInsights.NetworkDependencyTree.NetworkDependencyTree,
+    accessibleLabel: UIStringsNotTranslate.revealNetworkDependencyTree,
+    title: UIStringsNotTranslate.networkDependencyTree,
+    jslog: 'network-dependency-tree-widget',
+  },
+  [Trace.Insights.Types.InsightKeys.THIRD_PARTIES]: {
+    component: TimelineInsights.ThirdParties.ThirdParties,
+    accessibleLabel: UIStringsNotTranslate.revealThirdParties,
+    title: UIStringsNotTranslate.thirdParties,
+    jslog: 'third-parties-widget',
+  },
+  [Trace.Insights.Types.InsightKeys.FORCED_REFLOW]: {
+    component: TimelineInsights.ForcedReflow.ForcedReflow,
+    accessibleLabel: UIStringsNotTranslate.revealForcedReflow,
+    title: UIStringsNotTranslate.forcedReflow,
+    jslog: 'forced-reflow-widget',
+  },
+  [Trace.Insights.Types.InsightKeys.CACHE]: {
+    component: TimelineInsights.Cache.Cache,
+    accessibleLabel: UIStringsNotTranslate.revealCache,
+    title: UIStringsNotTranslate.cache,
+    jslog: 'cache-widget',
+  },
+  [Trace.Insights.Types.InsightKeys.INP_BREAKDOWN]: {
+    component: TimelineInsights.INPBreakdown.INPBreakdown,
+    accessibleLabel: UIStringsNotTranslate.revealInpBreakdown,
+    title: UIStringsNotTranslate.inpBreakdown,
+    jslog: 'inp-breakdown-widget',
+  },
+  [Trace.Insights.Types.InsightKeys.DOCUMENT_LATENCY]: {
+    component: TimelineInsights.DocumentLatency.DocumentLatency,
+    accessibleLabel: UIStringsNotTranslate.revealDocumentLatency,
+    title: UIStringsNotTranslate.documentLatency,
+    jslog: 'document-latency-widget',
+  },
+  [Trace.Insights.Types.InsightKeys.DOM_SIZE]: {
+    component: TimelineInsights.DOMSize.DOMSize,
+    accessibleLabel: UIStringsNotTranslate.revealDomSize,
+    title: UIStringsNotTranslate.domSize,
+    jslog: 'dom-size-widget',
+  },
+  [Trace.Insights.Types.InsightKeys.DUPLICATE_JAVASCRIPT]: {
+    component: TimelineInsights.DuplicatedJavaScript.DuplicatedJavaScript,
+    accessibleLabel: UIStringsNotTranslate.revealDuplicateJavaScript,
+    title: UIStringsNotTranslate.duplicateJavaScript,
+    jslog: 'duplicate-javascript-widget',
+  },
+  [Trace.Insights.Types.InsightKeys.IMAGE_DELIVERY]: {
+    component: TimelineInsights.ImageDelivery.ImageDelivery,
+    accessibleLabel: UIStringsNotTranslate.revealImageDelivery,
+    title: UIStringsNotTranslate.imageDelivery,
+    jslog: 'image-delivery-widget',
+  },
+  [Trace.Insights.Types.InsightKeys.FONT_DISPLAY]: {
+    component: TimelineInsights.FontDisplay.FontDisplay,
+    accessibleLabel: UIStringsNotTranslate.revealFontDisplay,
+    title: UIStringsNotTranslate.fontDisplay,
+    jslog: 'font-display-widget',
+  },
+  [Trace.Insights.Types.InsightKeys.SLOW_CSS_SELECTOR]: {
+    component: TimelineInsights.SlowCSSSelector.SlowCSSSelector,
+    accessibleLabel: UIStringsNotTranslate.revealSlowCssSelector,
+    title: UIStringsNotTranslate.slowCssSelector,
+    jslog: 'slow-css-selector-widget',
+  },
+  [Trace.Insights.Types.InsightKeys.LEGACY_JAVASCRIPT]: {
+    component: TimelineInsights.LegacyJavaScript.LegacyJavaScript,
+    accessibleLabel: UIStringsNotTranslate.revealLegacyJavaScript,
+    title: UIStringsNotTranslate.legacyJavaScript,
+    jslog: 'legacy-javascript-widget',
+  },
+  [Trace.Insights.Types.InsightKeys.VIEWPORT]: {
+    component: TimelineInsights.Viewport.Viewport,
+    accessibleLabel: UIStringsNotTranslate.revealViewport,
+    title: UIStringsNotTranslate.viewport,
+    jslog: 'viewport-widget',
+  },
+  [Trace.Insights.Types.InsightKeys.MODERN_HTTP]: {
+    component: TimelineInsights.ModernHTTP.ModernHTTP,
+    accessibleLabel: UIStringsNotTranslate.revealModernHttp,
+    title: UIStringsNotTranslate.modernHttp,
+    jslog: 'modern-http-widget',
+  },
+  [Trace.Insights.Types.InsightKeys.CHARACTER_SET]: {
+    component: TimelineInsights.CharacterSet.CharacterSet,
+    accessibleLabel: UIStringsNotTranslate.revealCharacterSet,
+    title: UIStringsNotTranslate.characterSet,
+    jslog: 'character-set-widget',
+  },
+};
+
+function renderInsightWidget<T extends Trace.Insights.Types.InsightModel>(
+    component: new () => BaseInsightComponent<T>, insight: T, jslog: string, accessibleLabel: string, title: string,
+    bounds?: Trace.Types.Timing.TraceWindowMicro): WidgetMakerResponse {
+  const renderedWidget = html`<devtools-widget
+    class=${jslog}
+    ${widget(component, {
+    model: insight,
+    minimal: true,
+    bounds: bounds ?? null,
+  })}></devtools-widget>`;
+
+  return {
+    renderedWidget,
+    revealable: new TimelineUtils.Helpers.RevealableInsight(insight),
+    accessibleRevealLabel: lockedString(accessibleLabel),
+    title: lockedString(title),
+    jslogContext: jslog,
+  };
+}
+
 async function makePerfInsightWidget(widgetData: PerfInsightAiWidget): Promise<WidgetMakerResponse|null> {
-  switch (widgetData.data.insight) {
-    case Trace.Insights.Types.InsightKeys.LCP_BREAKDOWN: {
-      const insight = widgetData.data.insightData;
-      if (!insight || !Trace.Insights.Models.LCPBreakdown.isLCPBreakdownInsight(insight)) {
-        return null;
-      }
-      // clang-format off
-      const renderedWidget = html`<devtools-widget
-        class="lcp-breakdown-widget"
-        ${widget(TimelineInsights.LCPBreakdown.LCPBreakdown, {
-          model: insight,
-          minimal: true,
-        })}></devtools-widget>`;
-      // clang-format on
+  const insightKey = widgetData.data.insight;
+  const insight = widgetData.data.insightData;
 
-      return {
-        renderedWidget,
-        revealable: new TimelineUtils.Helpers.RevealableInsight(insight),
-        accessibleRevealLabel: lockedString(UIStringsNotTranslate.revealLcpBreakdown),
-        title: lockedString(UIStringsNotTranslate.lcpBreakdown),
-        jslogContext: 'lcp-breakdown',
-      };
-    }
-    case Trace.Insights.Types.InsightKeys.RENDER_BLOCKING: {
-      const insight = widgetData.data.insightData;
-      if (!insight || !Trace.Insights.Models.RenderBlocking.isRenderBlockingInsight(insight)) {
-        return null;
-      }
-      // clang-format off
-      const renderedWidget = html`<devtools-widget
-        class="render-blocking-widget"
-        ${widget(TimelineInsights.RenderBlocking.RenderBlocking, {
-          model: insight,
-          minimal: true,
-        })}></devtools-widget>`;
-      // clang-format on
+  const meta = INSIGHT_METADATA[insightKey];
+  if (!meta) {
+    return null;
+  }
 
-      return {
-        renderedWidget,
-        revealable: new TimelineUtils.Helpers.RevealableInsight(insight),
-        accessibleRevealLabel: lockedString(UIStringsNotTranslate.revealRenderBlockingBreakdown),
-        title: lockedString(UIStringsNotTranslate.renderBlockingBreakdown),
-        jslogContext: 'render-blocking-widget',
-      };
-    }
-    default:
+  let bounds;
+  if (insightKey === Trace.Insights.Types.InsightKeys.CLS_CULPRITS) {
+    const traceBounds = TraceBounds.TraceBounds.BoundsManager.instance().state()?.micro.entireTraceBounds;
+    if (!traceBounds) {
       return null;
+    }
+    bounds = traceBounds;
   }
+
+  return renderInsightWidget(meta.component, insight, meta.jslog, meta.accessibleLabel, meta.title, bounds);
 }
 
 async function makeBottomUpTimelineTreeWidget(widgetData: BottomUpTreeAiWidget): Promise<WidgetMakerResponse|null> {

package/front_end/panels/console/ConsoleView.ts

@@ -265,6 +265,16 @@ const UIStrings = {
    * @example {5} PH1
    */
   filteredMessagesInConsole: '{PH1} messages in console',
+  /**
+   * @description Tooltip for the collapse all button in the Console panel toolbar.
+   * Clicking this button will collapse all groups and stack traces.
+   */
+  collapseAll: 'Collapse all',
+  /**
+   * @description Tooltip for the expand all button in the Console panel toolbar.
+   * Clicking this button will expand all groups and stack traces.
+   */
+  expandAll: 'Expand all',
 
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/console/ConsoleView.ts', UIStrings);
@@ -337,6 +347,8 @@ export class ConsoleView extends UI.Widget.VBox implements
   private issueResolver = new IssuesManager.IssueResolver.IssueResolver();
   #isDetached = false;
   #onIssuesCountUpdateBound = this.#onIssuesCountUpdate.bind(this);
+  #collapseAllButton: UI.Toolbar.ToolbarButton;
+  #allCollapsed = false;
   aiCodeCompletionConfig?: TextEditor.AiCodeCompletionProvider.AiCodeCompletionConfig;
   private aiCodeCompletionSummaryToolbarContainer?: HTMLElement;
   private aiCodeCompletionSummaryToolbar?: AiCodeCompletionSummaryToolbar;
@@ -428,6 +440,10 @@ export class ConsoleView extends UI.Widget.VBox implements
         i18nString(UIStrings.showConsoleSidebar), i18nString(UIStrings.hideConsoleSidebar),
         i18nString(UIStrings.consoleSidebarShown), i18nString(UIStrings.consoleSidebarHidden), 'console-sidebar'));
     toolbar.appendToolbarItem(UI.Toolbar.Toolbar.createActionButton('console.clear'));
+    this.#collapseAllButton =
+        new UI.Toolbar.ToolbarButton(i18nString(UIStrings.collapseAll), 'compress', undefined, 'console.collapse-all');
+    this.#collapseAllButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, this.#toggleCollapseAll, this);
+    toolbar.appendToolbarItem(this.#collapseAllButton);
     toolbar.appendSeparator();
     toolbar.appendToolbarItem(this.consoleContextSelector.toolbarItem());
     toolbar.appendSeparator();
@@ -684,6 +700,62 @@ export class ConsoleView extends UI.Widget.VBox implements
     this.prompt.clearAiCodeCompletionCache();
   }
 
+  collapseAll(): void {
+    for (const message of this.consoleMessages) {
+      if (message instanceof ConsoleGroupViewMessage) {
+        message.setCollapsedSilent(true);
+      }
+      message.setTraceExpanded(false);
+    }
+    this.updateMessageList();
+  }
+
+  expandAll(): void {
+    for (const message of this.consoleMessages) {
+      if (message instanceof ConsoleGroupViewMessage) {
+        message.setCollapsedSilent(false);
+      }
+      message.setTraceExpanded(true);
+    }
+    this.updateMessageList();
+  }
+
+  #toggleCollapseAll(): void {
+    if (this.#allCollapsed) {
+      this.expandAll();
+    } else {
+      this.collapseAll();
+    }
+    this.#allCollapsed = !this.#allCollapsed;
+    this.#updateCollapseAllButton();
+  }
+
+  #updateCollapseAllButton(): void {
+    let hasExpandedMessages = false;
+    let hasCollapsedMessages = false;
+    for (const message of this.visibleViewMessages) {
+      if (message instanceof ConsoleGroupViewMessage) {
+        hasExpandedMessages = hasExpandedMessages || !message.collapsed();
+        hasCollapsedMessages = hasCollapsedMessages || message.collapsed();
+      }
+      if (message.isExpandableTrace()) {
+        hasExpandedMessages = hasExpandedMessages || message.isTraceExpanded();
+        hasCollapsedMessages = hasCollapsedMessages || !message.isTraceExpanded();
+      }
+      if (hasExpandedMessages && hasCollapsedMessages) {
+        break;
+      }
+    }
+    this.#allCollapsed = !hasExpandedMessages && hasCollapsedMessages;
+    if (this.#allCollapsed) {
+      this.#collapseAllButton.setGlyph('expand');
+      this.#collapseAllButton.setTitle(i18nString(UIStrings.expandAll));
+    } else {
+      this.#collapseAllButton.setGlyph('compress');
+      this.#collapseAllButton.setTitle(i18nString(UIStrings.collapseAll));
+    }
+  }
+
   #onIssuesCountUpdate(): void {
     void this.issueToolbarThrottle.schedule(async () => this.updateIssuesToolbarItem());
     this.issuesCountUpdatedForTest();
@@ -1121,11 +1193,13 @@ export class ConsoleView extends UI.Widget.VBox implements
       }
       const parentGroup = currentGroup.consoleGroup();
       if (parentGroup) {
+        // If the parent group has its messages hidden, don't show this group.
+        if (parentGroup.messagesHidden()) {
+          return;
+        }
         showGroup(parentGroup, visibleViewMessages);
       }
-      if (!parentGroup?.messagesHidden()) {
-        visibleViewMessages.push(currentGroup);
-      }
+      visibleViewMessages.push(currentGroup);
     }
   }
 
@@ -1369,18 +1443,23 @@ export class ConsoleView extends UI.Widget.VBox implements
       for (const consoleMessage of this.consoleMessages) {
         consoleMessage.setInSimilarGroup(false);
         if (consoleMessage.consoleMessage().isGroupable()) {
-          // Since grouping similar messages is disabled, we need clear the
-          // reference to the artificial console group start.
-          consoleMessage.clearConsoleGroup();
+          // Since grouping similar messages is disabled, we need to clear the
+          // reference to the artificial console group start, but preserve
+          // references to real console groups (console.group()/console.groupCollapsed()).
+          const group = consoleMessage.consoleGroup();
+          if (group && !this.consoleGroupStarts.includes(group)) {
+            consoleMessage.clearConsoleGroup();
+          }
         }
         this.appendMessageToEnd(
             consoleMessage,
-            true /* crbug.com/1082963: prevent collaps`e of same messages when "Group similar" is false */);
+            true /* crbug.com/1082963: prevent collapse of same messages when "Group similar" is false */);
       }
     }
     this.updateFilterStatus();
     this.#searchableView.updateSearchMatchesCount(this.regexMatchRanges.length);
     this.highlightMatch(this.currentMatchRangeIndex, false);  // Re-highlight current match without scrolling.
+    this.#updateCollapseAllButton();
     this.viewport.invalidate();
     this.messagesCountElement.setAttribute(
         'aria-label', i18nString(UIStrings.filteredMessagesInConsole, {PH1: this.visibleViewMessages.length}));

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -299,6 +299,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
   protected messageIcon: Icon|null;
   private traceExpanded: boolean;
   private expandTrace: ((arg0: boolean) => void)|null;
+  private hasStackTrace: boolean;
   protected anchorElement: HTMLElement|null;
   protected contentElementInternal: HTMLElement|null;
   private nestingLevelMarkers: HTMLElement[]|null;
@@ -340,6 +341,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     this.messageIcon = null;
     this.traceExpanded = false;
     this.expandTrace = null;
+    this.hasStackTrace = false;
     this.anchorElement = null;
     this.contentElementInternal = null;
     this.nestingLevelMarkers = null;
@@ -653,6 +655,8 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       this.expandTrace(true);
     }
 
+    this.hasStackTrace = true;
+
     // @ts-expect-error
     toggleElement._expandStackTraceForTest = this.expandTrace.bind(this, true);
     return toggleElement;
@@ -1200,6 +1204,20 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     return this.consoleGroupInternal;
   }
 
+  isTraceExpanded(): boolean {
+    return this.traceExpanded;
+  }
+
+  isExpandableTrace(): boolean {
+    return this.hasStackTrace;
+  }
+
+  setTraceExpanded(expanded: boolean): void {
+    if (this.expandTrace && this.traceExpanded !== expanded) {
+      this.expandTrace(expanded);
+    }
+  }
+
   setInSimilarGroup(inSimilarGroup: boolean, isLast?: boolean): void {
     this.inSimilarGroup = inSimilarGroup;
     this.lastInSimilarGroup = inSimilarGroup && Boolean(isLast);
@@ -2161,11 +2179,15 @@ export class ConsoleGroupViewMessage extends ConsoleViewMessage {
   }
 
   setCollapsed(collapsed: boolean): void {
+    this.setCollapsedSilent(collapsed);
+    this.onToggle.call(null);
+  }
+
+  setCollapsedSilent(collapsed: boolean): void {
     this.collapsedInternal = collapsed;
     if (this.expandGroupIcon) {
       this.expandGroupIcon.name = this.collapsedInternal ? 'triangle-right' : 'triangle-down';
     }
-    this.onToggle.call(null);
   }
 
   collapsed(): boolean {