chrome-devtools-frontend 1.0.1622369 → 1.0.1624583

package/front_end/models/ai_code_completion/AiCodeCompletion.ts

@@ -14,7 +14,6 @@ import {debugLog} from './debug.js';
 interface AgentOptions {
   aidaClient: Host.AidaClient.AidaClient;
   serverSideLoggingEnabled?: boolean;
-  confirmSideEffectForTest?: typeof Promise.withResolvers;
 }
 
 interface RequestOptions {
@@ -274,7 +273,7 @@ export class AiCodeCompletion {
 
     void this.#aidaClient.registerClientEvent({
       corresponding_aida_rpc_global_id: rpcGlobalId,
-      disable_user_content_logging: true,
+      disable_user_content_logging: !(this.#serverSideLoggingEnabled ?? false),
       complete_code_client_event: {
         user_impression: {
           sample: {
@@ -296,7 +295,7 @@ export class AiCodeCompletion {
   registerUserAcceptance(rpcGlobalId: Host.AidaClient.RpcGlobalId, sampleId?: number): void {
     void this.#aidaClient.registerClientEvent({
       corresponding_aida_rpc_global_id: rpcGlobalId,
-      disable_user_content_logging: true,
+      disable_user_content_logging: !(this.#serverSideLoggingEnabled ?? false),
       complete_code_client_event: {
         user_acceptance: {
           sample: {

package/front_end/models/ai_code_generation/AiCodeGeneration.ts

@@ -39,7 +39,6 @@ The console has direct access to the inspected page's \`window\` and \`document\
 interface Options {
   aidaClient: Host.AidaClient.AidaClient;
   serverSideLoggingEnabled?: boolean;
-  confirmSideEffectForTest?: typeof Promise.withResolvers;
 }
 
 interface RequestOptions {
@@ -124,7 +123,7 @@ export class AiCodeGeneration {
 
     void this.#aidaClient.registerClientEvent({
       corresponding_aida_rpc_global_id: rpcGlobalId,
-      disable_user_content_logging: true,
+      disable_user_content_logging: !(this.#serverSideLoggingEnabled ?? false),
       generate_code_client_event: {
         user_impression: {
           sample: {
@@ -146,7 +145,7 @@ export class AiCodeGeneration {
   registerUserAcceptance(rpcGlobalId: Host.AidaClient.RpcGlobalId, sampleId?: number): void {
     void this.#aidaClient.registerClientEvent({
       corresponding_aida_rpc_global_id: rpcGlobalId,
-      disable_user_content_logging: true,
+      disable_user_content_logging: !(this.#serverSideLoggingEnabled ?? false),
       generate_code_client_event: {
         user_acceptance: {
           sample: {

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/AiAssistancePanel.ts

@@ -531,7 +531,7 @@ function defaultView(input: ViewInput, output: PanelViewOutput, target: HTMLElem
     let walkthroughIsForLastMessage = false;
     if(input.state === ViewState.CHAT_VIEW) {
       const lastMessage = input.props.messages.at(-1);
-      if(lastMessage && input.props.walkthrough.activeSidebarMessage === lastMessage) {
+      if(lastMessage && input.props.walkthrough.activeSidebarMessage?.id === lastMessage.id) {
         walkthroughIsForLastMessage = true;
       }
     }
@@ -879,7 +879,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   }
 
   #openWalkthrough(message: ModelChatMessage): void {
-    if (!this.#walkthrough.inlineExpandedMessages.includes(message)) {
+    if (!this.#walkthrough.inlineExpandedMessages.some(m => m.id === message.id)) {
       this.#walkthrough.inlineExpandedMessages.push(message);
     }
     this.#walkthrough.activeSidebarMessage = message;
@@ -905,7 +905,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     }
 
     // If we are closing a walkthrough, remove it from the list of expanded messages.
-    this.#walkthrough.inlineExpandedMessages = this.#walkthrough.inlineExpandedMessages.filter(m => m !== message);
+    this.#walkthrough.inlineExpandedMessages =
+        this.#walkthrough.inlineExpandedMessages.filter(m => m.id !== message.id);
 
     if (this.#walkthrough.isInlined) {
       // In Narrow mode, the global expanded state tracks if at least one walkthrough is open.
@@ -913,7 +914,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       // If the message we just closed was the active one, we pick a new active message
       // from the remaining open ones (if any). This ensures that if the user
       // re-opens the sidebar later, it shows the most recently opened walkthrough.
-      if (this.#walkthrough.activeSidebarMessage === message) {
+      if (this.#walkthrough.activeSidebarMessage?.id === message.id) {
         this.#walkthrough.activeSidebarMessage = this.#walkthrough.inlineExpandedMessages.at(-1) ?? null;
       }
     } else {
@@ -1857,6 +1858,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       let systemMessage: ModelChatMessage = {
         entity: ChatMessageEntity.MODEL,
         parts: [],
+        id: crypto.randomUUID(),
       };
       let step: Step = {isLoading: true};
 
@@ -1885,10 +1887,12 @@ export class AiAssistancePanel extends UI.Panel.Panel {
               entity: ChatMessageEntity.USER,
               text: data.query,
               imageInput: data.imageInput,
+              id: crypto.randomUUID(),
             });
             systemMessage = {
               entity: ChatMessageEntity.MODEL,
               parts: [],
+              id: crypto.randomUUID(),
             };
             this.#messages.push(systemMessage);
             // If the walkthrough is currently expanded in the sidebar, we want to

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

@@ -46,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;
 
@@ -227,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.
    */
@@ -247,6 +255,14 @@ const UIStringsNotTranslate = {
    * @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.
    */
@@ -263,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 {
@@ -315,6 +435,7 @@ export interface UserChatMessage {
   entity: ChatMessageEntity.USER;
   text: string;
   imageInput?: Host.AidaClient.Part;
+  id: string;
 }
 
 export interface ModelChatMessage {
@@ -322,6 +443,7 @@ export interface ModelChatMessage {
   parts: ModelMessagePart[];
   error?: AiAssistanceModel.AiAgent.ErrorType;
   rpcId?: Host.AidaClient.RpcGlobalId;
+  id: string;
 }
 
 export type Message = UserChatMessage|ModelChatMessage;
@@ -620,7 +742,7 @@ function renderWalkthroughSidebarButton(
   }
 
   const hasOneStepWithWidget = steps.some(step => step.widgets?.length);
-  const isExpanded = walkthrough.isExpanded && input.message === input.walkthrough.activeSidebarMessage;
+  const isExpanded = walkthrough.isExpanded && input.message.id === input.walkthrough.activeSidebarMessage?.id;
   const title = isExpanded ? walkthroughCloseTitle({hasWidgets: hasOneStepWithWidget}) : walkthroughTitle({
     isLoading: input.isLoading,
     hasWidgets: hasOneStepWithWidget,
@@ -661,7 +783,7 @@ function renderWalkthroughSidebarButton(
         .jslogContext=${walkthrough.isExpanded ? 'ai-hide-walkthrough-sidebar' : 'ai-show-walkthrough-sidebar'}
         data-show-walkthrough
         @click=${() => {
-          if(walkthrough.activeSidebarMessage === input.message && walkthrough.isExpanded) {
+          if(walkthrough.activeSidebarMessage?.id === input.message.id && walkthrough.isExpanded) {
             walkthrough.onToggle(false, message as ModelChatMessage);
           } else {
             // Can't just toggle the visibility here; we need to ensure we
@@ -696,8 +818,8 @@ function renderWalkthroughUI(input: ChatMessageViewInput, steps: Step[]): Lit.Li
   // open and it is specifically targeting this message. This is necessary
   // because the walkthrough state is shared across all messages in the chat.
   const isExpanded = input.walkthrough.isInlined ?
-      input.walkthrough.inlineExpandedMessages.includes(input.message as ModelChatMessage) :
-      (input.walkthrough.isExpanded && input.walkthrough.activeSidebarMessage === input.message);
+      input.walkthrough.inlineExpandedMessages.some(m => m.id === input.message.id) :
+      (input.walkthrough.isExpanded && input.walkthrough.activeSidebarMessage?.id === input.message.id);
 
   // clang-format off
   const walkthroughInline = input.walkthrough.isInlined ? html`
@@ -941,8 +1063,7 @@ async function makeStylePropertiesWidget(widgetData: StylePropertiesAiWidget): P
 }
 
 const INSIGHT_METADATA: Record<string, {
-  component: typeof TimelineInsights.LCPBreakdown.LCPBreakdown | typeof TimelineInsights.RenderBlocking.RenderBlocking |
-      typeof TimelineInsights.LCPDiscovery.LCPDiscovery | typeof TimelineInsights.CLSCulprits.CLSCulprits,
+  component: new () => BaseInsightComponent<Trace.Insights.Types.InsightModel>,
   accessibleLabel: string,
   title: string,
   jslog: string,
@@ -971,6 +1092,96 @@ const INSIGHT_METADATA: Record<string, {
     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>(
@@ -1566,7 +1777,7 @@ function renderActions(input: ChatMessageViewInput, output: ViewOutput): Lit.Lit
 }
 
 export class ChatMessage extends UI.Widget.Widget {
-  message: Message = {entity: ChatMessageEntity.USER, text: ''};
+  message: Message = {entity: ChatMessageEntity.USER, text: '', id: ''};
   isLoading = false;
   isReadOnly = false;
   prompt = '';

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

@@ -155,7 +155,7 @@ const DEFAULT_VIEW: View = (input, output, target) => {
         <main @scroll=${input.handleScroll} ${ref(element => { output.mainElement = element as HTMLElement; } )}>
           ${input.messages.length > 0 ? html`
             <div class="messages-container" ${ref(input.handleMessageContainerRef)}>
-              ${repeat(input.messages, (message, index) => {
+              ${repeat(input.messages, message => message.id, (message, index) => {
                 const prevMessage = index > 0 ? input.messages[index - 1] : null;
                 const prompt = (message.entity === ChatMessageEntity.MODEL && prevMessage?.entity === ChatMessageEntity.USER) ?
                     prevMessage.text :
@@ -169,7 +169,7 @@ const DEFAULT_VIEW: View = (input, output, target) => {
                   isLastMessage: index === input.messages.length - 1,
                   isFirstMessage: index === 0,
                   prompt,
-                  shouldShowCSSChangeSummary: message === cssChangeSummaryMessage,
+                  shouldShowCSSChangeSummary: message.id === cssChangeSummaryMessage?.id,
                   onSuggestionClick: input.handleSuggestionClick,
                   onFeedbackSubmit: input.onFeedbackSubmit,
                   onCopyResponseClick: input.onCopyResponseClick,

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 {