chrome-devtools-frontend 1.0.954777 → 1.0.955630

package/front_end/panels/application/components/FrameDetailsView.ts

@@ -281,7 +281,7 @@ export class FrameDetailsReportView extends HTMLElement {
     if (!this.#permissionsPolicies && this.#frame) {
       this.#permissionsPolicies = this.#frame.getPermissionsPolicyState();
     }
-    this.#render();
+    void this.#render();
   }
 
   async #render(): Promise<void> {
@@ -323,7 +323,7 @@ export class FrameDetailsReportView extends HTMLElement {
 
     const frame = this.#frame;
     const refreshOriginTrials: () => void = () => {
-      frame.getOriginTrials().then(trials => {
+      void frame.getOriginTrials().then(trials => {
         this.#originTrialTreeView.data = {trials} as OriginTrialTreeViewData;
       });
     };
@@ -442,7 +442,7 @@ export class FrameDetailsReportView extends HTMLElement {
             i18nString(UIStrings.clickToRevealInNetworkPanelMight),
             ():
                 void => {
-                  Common.Revealer.reveal(NetworkForward.UIFilter.UIRequestFilter.filters([
+                  void Common.Revealer.reveal(NetworkForward.UIFilter.UIRequestFilter.filters([
                     {
                       filterType: NetworkForward.UIFilter.FilterType.Domain,
                       filterValue: unreachableUrl.domain(),

package/front_end/panels/application/components/PermissionsPolicySection.ts

@@ -89,7 +89,7 @@ export class PermissionsPolicySection extends HTMLElement {
 
   set data(data: PermissionsPolicySectionData) {
     this.#permissionsPolicySectionData = data;
-    this.#render();
+    void this.#render();
   }
 
   connectedCallback(): void {
@@ -98,7 +98,7 @@ export class PermissionsPolicySection extends HTMLElement {
 
   #toggleShowPermissionsDisallowedDetails(): void {
     this.#permissionsPolicySectionData.showDetails = !this.#permissionsPolicySectionData.showDetails;
-    this.#render();
+    void this.#render();
   }
 
   #renderAllowed(): LitHtml.TemplateResult|{} {

package/front_end/panels/browser_debugger/CategorizedBreakpointsSidebarPane.ts

@@ -146,7 +146,7 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
       return;
     }
 
-    UI.ViewManager.ViewManager.instance().showView(this.#viewId);
+    void UI.ViewManager.ViewManager.instance().showView(this.#viewId);
     const category = this.#categories.get(breakpoint.category());
     if (category) {
       category.element.expand();

package/front_end/panels/browser_debugger/DOMBreakpointsSidebarPane.ts

@@ -199,11 +199,12 @@ export class DOMBreakpointsSidebarPane extends UI.Widget.VBox implements
     const linkifiedNode = document.createElement('monospace');
     linkifiedNode.style.display = 'block';
     labelElement.appendChild(linkifiedNode);
-    Common.Linkifier.Linkifier.linkify(item.node, {preventKeyboardFocus: true, tooltip: undefined}).then(linkified => {
-      linkifiedNode.appendChild(linkified);
-      UI.ARIAUtils.setAccessibleName(
-          checkboxElement, i18nString(UIStrings.sS, {PH1: breakpointTypeText, PH2: linkified.deepTextContent()}));
-    });
+    void Common.Linkifier.Linkifier.linkify(item.node, {preventKeyboardFocus: true, tooltip: undefined})
+        .then(linkified => {
+          linkifiedNode.appendChild(linkified);
+          UI.ARIAUtils.setAccessibleName(
+              checkboxElement, i18nString(UIStrings.sS, {PH1: breakpointTypeText, PH2: linkified.deepTextContent()}));
+        });
 
     labelElement.appendChild(description);
 
@@ -314,7 +315,7 @@ export class DOMBreakpointsSidebarPane extends UI.Widget.VBox implements
     contextMenu.defaultSection().appendItem(i18nString(UIStrings.removeAllDomBreakpoints), () => {
       breakpoint.domDebuggerModel.removeAllDOMBreakpoints();
     });
-    contextMenu.show();
+    void contextMenu.show();
   }
 
   private checkboxClicked(breakpoint: SDK.DOMDebuggerModel.DOMBreakpoint, event: Event): void {
@@ -356,7 +357,7 @@ export class DOMBreakpointsSidebarPane extends UI.Widget.VBox implements
     if (this.#highlightedBreakpoint) {
       this.#list.refreshItem(this.#highlightedBreakpoint);
     }
-    UI.ViewManager.ViewManager.instance().showView('sources.domBreakpoints');
+    void UI.ViewManager.ViewManager.instance().showView('sources.domBreakpoints');
   }
   wasShown(): void {
     super.wasShown();

package/front_end/panels/browser_debugger/ObjectEventListenersSidebarPane.ts

@@ -62,7 +62,7 @@ export class ObjectEventListenersSidebarPane extends UI.Widget.VBox implements U
       return;
     }
     this.#lastRequestedContext = executionContext;
-    Promise.all([this.windowObjectInContext(executionContext)])
+    void Promise.all([this.windowObjectInContext(executionContext)])
         .then(this.#eventListenersView.addObjects.bind(this.#eventListenersView));
   }
 

package/front_end/panels/browser_debugger/XHRBreakpointsSidebarPane.ts

@@ -92,7 +92,7 @@ export class XHRBreakpointsSidebarPane extends UI.Widget.VBox implements UI.Cont
 
     this.#addButton = new UI.Toolbar.ToolbarButton(i18nString(UIStrings.addXhrfetchBreakpoint), 'largeicon-add');
     this.#addButton.addEventListener(UI.Toolbar.ToolbarButton.Events.Click, () => {
-      this.addButtonClicked();
+      void this.addButtonClicked();
     });
 
     this.#emptyElement.addEventListener('contextmenu', this.emptyElementContextMenu.bind(this), true);
@@ -115,7 +115,7 @@ export class XHRBreakpointsSidebarPane extends UI.Widget.VBox implements UI.Cont
   private emptyElementContextMenu(event: Event): void {
     const contextMenu = new UI.ContextMenu.ContextMenu(event);
     contextMenu.defaultSection().appendItem(i18nString(UIStrings.addBreakpoint), this.addButtonClicked.bind(this));
-    contextMenu.show();
+    void contextMenu.show();
   }
 
   private async addButtonClicked(): Promise<void> {
@@ -294,7 +294,7 @@ export class XHRBreakpointsSidebarPane extends UI.Widget.VBox implements UI.Cont
     contextMenu.defaultSection().appendItem(i18nString(UIStrings.addBreakpoint), this.addButtonClicked.bind(this));
     contextMenu.defaultSection().appendItem(i18nString(UIStrings.removeBreakpoint), removeBreakpoint.bind(this));
     contextMenu.defaultSection().appendItem(removeAllTitle, removeAllBreakpoints.bind(this));
-    contextMenu.show();
+    void contextMenu.show();
   }
 
   private checkboxClicked(url: string, checked: boolean): void {
@@ -372,7 +372,7 @@ export class XHRBreakpointsSidebarPane extends UI.Widget.VBox implements UI.Cont
       return;
     }
     this.#list.refreshItem(url);
-    UI.ViewManager.ViewManager.instance().showView('sources.xhrBreakpoints');
+    void UI.ViewManager.ViewManager.instance().showView('sources.xhrBreakpoints');
   }
 
   private restoreBreakpoints(): void {

package/front_end/panels/changes/ChangesView.ts

@@ -122,7 +122,7 @@ export class ChangesView extends UI.Widget.VBox {
     if (!uiSourceCode) {
       return;
     }
-    this.workspaceDiff.revertToOriginal(uiSourceCode);
+    void this.workspaceDiff.revertToOriginal(uiSourceCode);
   }
 
   private click(event: MouseEvent): void {
@@ -136,7 +136,7 @@ export class ChangesView extends UI.Widget.VBox {
           // Unfortunately, caretRangeFromPoint is broken in shadow
           // roots, which makes determining the character offset more
           // work than justified here.
-          Common.Revealer.reveal(this.selectedUISourceCode.uiLocation(Number(number) - 1, 0), false);
+          void Common.Revealer.reveal(this.selectedUISourceCode.uiLocation(Number(number) - 1, 0), false);
           event.consume(true);
         }
         break;
@@ -159,11 +159,11 @@ export class ChangesView extends UI.Widget.VBox {
     }
 
     this.selectedUISourceCode = uiSourceCode;
-    this.refreshDiff();
+    void this.refreshDiff();
   }
 
   wasShown(): void {
-    this.refreshDiff();
+    void this.refreshDiff();
     this.registerCSSFiles([changesViewStyles]);
   }
 

package/front_end/panels/console/ConsoleContextSelector.ts

@@ -79,7 +79,7 @@ export class ConsoleContextSelector implements SDK.TargetManager.SDKModelObserve
     if (to && to.frameId) {
       const frame = SDK.FrameManager.FrameManager.instance().getFrame(to.frameId);
       if (frame && !frame.isTopFrame()) {
-        frame.highlight();
+        void frame.highlight();
       }
     }
     if (fromElement) {

package/front_end/panels/console/ConsoleFilter.ts

@@ -6,7 +6,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 
-import type {ConsoleViewMessage} from './ConsoleViewMessage.js';
+import type {ConsoleGroupViewMessage, ConsoleViewMessage} from './ConsoleViewMessage.js';
 
 export type LevelsMask = {
   [x: string]: boolean,
@@ -68,13 +68,28 @@ export class ConsoleFilter {
     }
 
     if (message.type === SDK.ConsoleModel.FrontendMessageType.Command ||
-        message.type === SDK.ConsoleModel.FrontendMessageType.Result || message.isGroupMessage()) {
+        message.type === SDK.ConsoleModel.FrontendMessageType.Result ||
+        message.type === Protocol.Runtime.ConsoleAPICalledEventType.EndGroup) {
       return true;
     }
+
     if (message.level && !this.levelsMask[message.level as string]) {
       return false;
     }
 
+    return this.applyFilter(viewMessage) || this.parentGroupHasMatch(viewMessage.consoleGroup());
+  }
+
+  // A message is visible if there is a match in any of the parent groups' titles.
+  parentGroupHasMatch(viewMessage: ConsoleGroupViewMessage|null): boolean {
+    if (viewMessage === null) {
+      return false;
+    }
+    return this.applyFilter(viewMessage) || this.parentGroupHasMatch(viewMessage.consoleGroup());
+  }
+
+  applyFilter(viewMessage: ConsoleViewMessage): boolean {
+    const message = viewMessage.consoleMessage();
     for (const filter of this.parsedFilters) {
       if (!filter.key) {
         if (filter.regex && viewMessage.matchesFilterRegex(filter.regex) === filter.negative) {

package/front_end/panels/console/ConsoleFormat.ts

@@ -5,8 +5,9 @@
 import type * as SDK from '../../core/sdk/sdk.js';
 
 // VGA color palette
-const ANSI_COLORS = ['#000000', '#AA0000', '#00AA00', '#AA5500', '#0000AA', '#AA00AA', '#00AAAA', '#AAAAAA'];
-const ANSI_BRIGHT_COLORS = ['#555555', '#FF5555', '#55FF55', '#FFFF55', '#5555FF', '#FF55FF', '#55FFFF', '#FFFFFF'];
+const ANSI_COLORS = ['black', 'red', 'green', 'yellow', 'blue', 'magenta', 'cyan', 'gray'];
+const ANSI_BRIGHT_COLORS =
+    ['darkgray', 'lightred', 'lightgreen', 'lightyellow', 'lightblue', 'lightmagenta', 'lightcyan', 'white'];
 
 export type FormatToken = {
   type: 'generic'|'optimal',
@@ -167,11 +168,11 @@ export const format = (fmt: string, args: SDK.RemoteObject.RemoteObject[]): {
             default: {
               const color = ANSI_COLORS[code - 30] ?? ANSI_BRIGHT_COLORS[code - 90];
               if (color !== undefined) {
-                currentStyle.set('color', color);
+                currentStyle.set('color', `var(--console-color-${color})`);
               } else {
                 const background = ANSI_COLORS[code - 40] ?? ANSI_BRIGHT_COLORS[code - 100];
                 if (background !== undefined) {
-                  currentStyle.set('background', background);
+                  currentStyle.set('background-color', `var(--console-color-${background})`);
                 }
               }
               break;

package/front_end/panels/console/ConsolePinPane.ts

@@ -100,7 +100,7 @@ export class ConsolePinPane extends UI.ThrottledWidget.ThrottledWidget {
       }
     }
     contextMenu.editSection().appendItem(i18nString(UIStrings.removeAllExpressions), this.removeAllPins.bind(this));
-    contextMenu.show();
+    void contextMenu.show();
   }
 
   private removeAllPins(): void {
@@ -115,7 +115,7 @@ export class ConsolePinPane extends UI.ThrottledWidget.ThrottledWidget {
     this.pins.delete(pin);
     this.savePins();
     if (newFocusedPin) {
-      newFocusedPin.focus();
+      void newFocusedPin.focus();
     } else {
       this.liveExpressionButton.focus();
     }
@@ -127,7 +127,7 @@ export class ConsolePinPane extends UI.ThrottledWidget.ThrottledWidget {
     this.pins.add(pin);
     this.savePins();
     if (userGesture) {
-      pin.focus();
+      void pin.focus();
     }
     this.update();
   }
@@ -213,7 +213,7 @@ export class ConsolePin {
     this.pinPreview.addEventListener('mouseleave', this.setHovered.bind(this, false), false);
     this.pinPreview.addEventListener('click', (event: Event) => {
       if (this.lastNode) {
-        Common.Revealer.reveal(this.lastNode);
+        void Common.Revealer.reveal(this.lastNode);
         event.consume();
       }
     }, false);

package/front_end/panels/console/ConsolePrompt.ts

@@ -113,7 +113,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
     const enabled = this.eagerEvalSetting.get();
     this.eagerPreviewElement.classList.toggle('hidden', !enabled);
     if (enabled) {
-      this.requestPreview();
+      void this.requestPreview();
     }
   }
 
@@ -210,7 +210,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
       {
         key: 'Enter',
         run: (): boolean => {
-          this.handleEnter();
+          void this.handleEnter();
           return true;
         },
         shift: CodeMirror.insertNewlineAndIndent,
@@ -269,7 +269,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
   }
 
   private updatePromptIcon(): void {
-    this.iconThrottler.schedule(async () => {
+    void this.iconThrottler.schedule(async () => {
       this.promptIcon.classList.toggle('console-prompt-incomplete', !(await this.enterWillEvaluate()));
     });
   }
@@ -280,7 +280,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
       const executionContext = currentExecutionContext;
       const message = SDK.ConsoleModel.ConsoleModel.instance().addCommandMessage(executionContext, text);
       const expression = ObjectUI.JavaScriptREPL.JavaScriptREPL.preprocessExpression(text);
-      SDK.ConsoleModel.ConsoleModel.instance().evaluateCommandInConsole(
+      void SDK.ConsoleModel.ConsoleModel.instance().evaluateCommandInConsole(
           executionContext, message, expression, useCommandLineAPI);
       if (ConsolePanel.instance().isShowing()) {
         Host.userMetrics.actionTaken(Host.UserMetrics.Action.CommandEvaluatedInConsolePanel);

package/front_end/panels/console/ConsoleView.ts

@@ -274,12 +274,10 @@ export class ConsoleView extends UI.Widget.VBox implements UI.SearchableView.Sea
   private viewportThrottler: Common.Throttler.Throttler;
   private pendingBatchResize: boolean;
   private readonly onMessageResizedBound: (e: Common.EventTarget.EventTargetEvent<UI.TreeOutline.TreeElement>) => void;
-  private topGroup: ConsoleGroup;
-  private currentGroup: ConsoleGroup;
   private readonly promptElement: HTMLElement;
   private readonly linkifier: Components.Linkifier.Linkifier;
   private consoleMessages: ConsoleViewMessage[];
-  private readonly viewMessageSymbol: symbol;
+  private consoleGroupStarts: ConsoleGroupViewMessage[];
   private readonly consoleHistorySetting: Common.Settings.Setting<string[]>;
   private prompt: ConsolePrompt;
   private immediatelyFilterMessagesForTest?: boolean;
@@ -404,7 +402,7 @@ export class ConsoleView extends UI.Widget.VBox implements UI.SearchableView.Sea
     this.issueCounter.data = {
       clickHandler: (): void => {
         Host.userMetrics.issuesPanelOpenedFrom(Host.UserMetrics.IssueOpener.StatusBarIssuesCounter);
-        UI.ViewManager.ViewManager.instance().showView('issues-pane');
+        void UI.ViewManager.ViewManager.instance().showView('issues-pane');
       },
       issuesManager: IssuesManager.IssuesManager.IssuesManager.instance(),
       accessibleName: i18nString(UIStrings.issueToolbarTooltipGeneral),
@@ -482,12 +480,9 @@ export class ConsoleView extends UI.Widget.VBox implements UI.SearchableView.Sea
     this.viewportThrottler = new Common.Throttler.Throttler(50);
     this.pendingBatchResize = false;
     this.onMessageResizedBound = (e: Common.EventTarget.EventTargetEvent<UI.TreeOutline.TreeElement>): void => {
-      this.onMessageResized(e);
+      void this.onMessageResized(e);
     };
 
-    this.topGroup = ConsoleGroup.createTopGroup();
-    this.currentGroup = this.topGroup;
-
     this.promptElement = this.messagesElement.createChild('div', 'source-code');
     this.promptElement.id = 'console-prompt';
 
@@ -509,7 +504,7 @@ export class ConsoleView extends UI.Widget.VBox implements UI.SearchableView.Sea
         new Components.Linkifier.Linkifier(MaxLengthForLinks, /* useLinkDecorator */ undefined, refilterMessages);
 
     this.consoleMessages = [];
-    this.viewMessageSymbol = Symbol('viewMessage');
+    this.consoleGroupStarts = [];
 
     this.consoleHistorySetting = Common.Settings.Settings.instance().createLocalSetting('consoleHistory', []);
 
@@ -801,6 +796,23 @@ export class ConsoleView extends UI.Widget.VBox implements UI.SearchableView.Sea
     const insertedInMiddle = insertAt < this.consoleMessages.length;
     this.consoleMessages.splice(insertAt, 0, viewMessage);
 
+    if (message.type !== SDK.ConsoleModel.FrontendMessageType.Command &&
+        message.type !== SDK.ConsoleModel.FrontendMessageType.Result) {
+      // Maintain group tree.
+      // Find parent group.
+      const consoleGroupStartIndex =
+          Platform.ArrayUtilities.upperBound(this.consoleGroupStarts, viewMessage, timeComparator) - 1;
+      if (consoleGroupStartIndex >= 0) {
+        const currentGroup = this.consoleGroupStarts[consoleGroupStartIndex];
+        addToGroup(viewMessage, currentGroup);
+      }
+      // Add new group.
+      if (message.isGroupStartMessage()) {
+        insertAt = Platform.ArrayUtilities.upperBound(this.consoleGroupStarts, viewMessage, timeComparator);
+        this.consoleGroupStarts.splice(insertAt, 0, viewMessage as ConsoleGroupViewMessage);
+      }
+    }
+
     this.filter.onMessageAdded(message);
     if (this.isSidebarOpen) {
       this.sidebar.onMessageAdded(viewMessage);
@@ -836,6 +848,29 @@ export class ConsoleView extends UI.Widget.VBox implements UI.SearchableView.Sea
     this.scheduleViewportRefresh();
     this.consoleMessageAddedForTest(viewMessage);
 
+    // Figure out whether the message should belong into this group or the parent group based on group end timestamp.
+    function addToGroup(viewMessage: ConsoleViewMessage, currentGroup: ConsoleGroupViewMessage): void {
+      const currentEnd = currentGroup.groupEnd();
+      if (currentEnd !== null) {
+        // Exceeds this group's end. It should belong into parent group.
+        if (timeComparator(viewMessage, currentEnd) > 0) {
+          const parent = currentGroup.consoleGroup();
+          // No parent group. We reached ungrouped messages. Don't establish group links.
+          if (parent === null) {
+            return;
+          }  // Add to parent group.
+          addToGroup(viewMessage, parent);
+          return;
+        }
+      }
+      // Add message to this group, and set group of the message.
+      if (viewMessage.consoleMessage().type === Protocol.Runtime.ConsoleAPICalledEventType.EndGroup) {
+        currentGroup.setGroupEnd(viewMessage);
+      } else {
+        viewMessage.setConsoleGroup(currentGroup);
+      }
+    }
+
     function timeComparator(viewMessage1: ConsoleViewMessage, viewMessage2: ConsoleViewMessage): number {
       return (messagesSortedBySymbol.get(viewMessage1) || 0) - (messagesSortedBySymbol.get(viewMessage2) || 0);
     }
@@ -872,6 +907,18 @@ export class ConsoleView extends UI.Widget.VBox implements UI.SearchableView.Sea
         !this.showCorsErrorsSetting.get()) {
       return;
     }
+
+    const lastMessage = this.visibleViewMessages[this.visibleViewMessages.length - 1];
+    if (viewMessage.consoleMessage().type === Protocol.Runtime.ConsoleAPICalledEventType.EndGroup) {
+      if (lastMessage) {
+        const group = lastMessage.consoleGroup();
+        if (group && !group.messagesHidden()) {
+          lastMessage.incrementCloseGroupDecorationCount();
+        }
+      }
+      return;
+    }
+
     if (!this.shouldMessageBeVisible(viewMessage)) {
       this.hiddenByFilterCount++;
       return;
@@ -882,29 +929,36 @@ export class ConsoleView extends UI.Widget.VBox implements UI.SearchableView.Sea
       return;
     }
 
-    const lastMessage = this.visibleViewMessages[this.visibleViewMessages.length - 1];
-    if (viewMessage.consoleMessage().type === Protocol.Runtime.ConsoleAPICalledEventType.EndGroup) {
-      if (lastMessage && !this.currentGroup.messagesHidden()) {
-        lastMessage.incrementCloseGroupDecorationCount();
-      }
-      this.currentGroup = this.currentGroup.parentGroup() || this.currentGroup;
-      return;
-    }
-    if (!this.currentGroup.messagesHidden()) {
+    const currentGroup = viewMessage.consoleGroup();
+
+    if (!currentGroup || !currentGroup.messagesHidden()) {
       const originatingMessage = viewMessage.consoleMessage().originatingMessage();
       if (lastMessage && originatingMessage && lastMessage.consoleMessage() === originatingMessage) {
         viewMessage.toMessageElement().classList.add('console-adjacent-user-command-result');
       }
-
+      showGroup(currentGroup, this.visibleViewMessages);
       this.visibleViewMessages.push(viewMessage);
       this.searchMessage(this.visibleViewMessages.length - 1);
     }
 
-    if (viewMessage.consoleMessage().isGroupStartMessage()) {
-      this.currentGroup = new ConsoleGroup(this.currentGroup, (viewMessage as ConsoleGroupViewMessage));
-    }
-
     this.messageAppendedForTests();
+
+    // Show the group the message belongs to, and also show parent groups.
+    function showGroup(currentGroup: ConsoleGroupViewMessage|null, visibleViewMessages: ConsoleViewMessage[]): void {
+      if (currentGroup === null) {
+        return;
+      }
+      // Group is already being shown, no need to traverse to
+      // parent groups since they are also already being shown.
+      if (visibleViewMessages.includes(currentGroup)) {
+        return;
+      }
+      const parentGroup = currentGroup.consoleGroup();
+      if (parentGroup) {
+        showGroup(parentGroup, visibleViewMessages);
+      }
+      visibleViewMessages.push(currentGroup);
+    }
   }
 
   private messageAppendedForTests(): void {
@@ -912,29 +966,24 @@ export class ConsoleView extends UI.Widget.VBox implements UI.SearchableView.Sea
   }
 
   private createViewMessage(message: SDK.ConsoleModel.ConsoleMessage): ConsoleViewMessage {
-    const nestingLevel = this.currentGroup.nestingLevel();
     switch (message.type) {
       case SDK.ConsoleModel.FrontendMessageType.Command:
         return new ConsoleCommand(
-            message, this.linkifier, this.requestResolver, this.issueResolver, nestingLevel,
-            this.onMessageResizedBound);
+            message, this.linkifier, this.requestResolver, this.issueResolver, this.onMessageResizedBound);
       case SDK.ConsoleModel.FrontendMessageType.Result:
         return new ConsoleCommandResult(
-            message, this.linkifier, this.requestResolver, this.issueResolver, nestingLevel,
-            this.onMessageResizedBound);
+            message, this.linkifier, this.requestResolver, this.issueResolver, this.onMessageResizedBound);
       case Protocol.Runtime.ConsoleAPICalledEventType.StartGroupCollapsed:
       case Protocol.Runtime.ConsoleAPICalledEventType.StartGroup:
         return new ConsoleGroupViewMessage(
-            message, this.linkifier, this.requestResolver, this.issueResolver, nestingLevel,
-            this.updateMessageList.bind(this), this.onMessageResizedBound);
+            message, this.linkifier, this.requestResolver, this.issueResolver, this.updateMessageList.bind(this),
+            this.onMessageResizedBound);
       case Protocol.Runtime.ConsoleAPICalledEventType.Table:
         return new ConsoleTableMessageView(
-            message, this.linkifier, this.requestResolver, this.issueResolver, nestingLevel,
-            this.onMessageResizedBound);
+            message, this.linkifier, this.requestResolver, this.issueResolver, this.onMessageResizedBound);
       default:
         return new ConsoleViewMessage(
-            message, this.linkifier, this.requestResolver, this.issueResolver, nestingLevel,
-            this.onMessageResizedBound);
+            message, this.linkifier, this.requestResolver, this.issueResolver, this.onMessageResizedBound);
     }
   }
 
@@ -970,6 +1019,7 @@ export class ConsoleView extends UI.Widget.VBox implements UI.SearchableView.Sea
     this.linkifier.reset();
     this.filter.clear();
     this.requestResolver.clear();
+    this.consoleGroupStarts = [];
     if (hadFocus) {
       this.prompt.focus();
     }
@@ -980,7 +1030,7 @@ export class ConsoleView extends UI.Widget.VBox implements UI.SearchableView.Sea
     const contextMenu = new UI.ContextMenu.ContextMenu(event);
     const eventTarget = (event.target as Node);
     if (eventTarget.isSelfOrDescendant(this.promptElement)) {
-      contextMenu.show();
+      void contextMenu.show();
       return;
     }
 
@@ -1011,7 +1061,7 @@ export class ConsoleView extends UI.Widget.VBox implements UI.SearchableView.Sea
       }
     }
 
-    contextMenu.show();
+    void contextMenu.show();
   }
 
   private async saveConsole(): Promise<void> {
@@ -1044,7 +1094,7 @@ export class ConsoleView extends UI.Widget.VBox implements UI.SearchableView.Sea
       progressIndicator.setWorked(messageIndex);
     }
 
-    stream.close();
+    void stream.close();
     progressIndicator.done();
   }
 
@@ -1079,7 +1129,7 @@ export class ConsoleView extends UI.Widget.VBox implements UI.SearchableView.Sea
       return;
     }
     this.buildHiddenCacheTimeout =
-        this.element.window().requestAnimationFrame(this.buildHiddenCache.bind(this, i, viewMessages));
+        this.element.window().requestAnimationFrame(this.buildHiddenCache.bind(this, i + 1, viewMessages));
   }
 
   private cancelBuildHiddenCache(): void {
@@ -1091,8 +1141,6 @@ export class ConsoleView extends UI.Widget.VBox implements UI.SearchableView.Sea
   }
 
   private updateMessageList(): void {
-    this.topGroup = ConsoleGroup.createTopGroup();
-    this.currentGroup = this.topGroup;
     this.regexMatchRanges = [];
     this.hiddenByFilterCount = 0;
     for (const visibleViewMessage of this.visibleViewMessages) {
@@ -1105,9 +1153,14 @@ export class ConsoleView extends UI.Widget.VBox implements UI.SearchableView.Sea
     } else {
       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();
+        }
         this.appendMessageToEnd(
             consoleMessage,
-            true /* crbug.com/1082963: prevent collapse of same messages when "Group similar" is false */);
+            true /* crbug.com/1082963: prevent collaps`e of same messages when "Group similar" is false */);
       }
     }
     this.updateFilterStatus();
@@ -1169,6 +1222,7 @@ export class ConsoleView extends UI.Widget.VBox implements UI.SearchableView.Sea
       for (const viewMessageInGroup of viewMessagesInGroup) {
         viewMessageInGroup.setInSimilarGroup(
             true, viewMessagesInGroup[viewMessagesInGroup.length - 1] === viewMessageInGroup);
+        viewMessageInGroup.setConsoleGroup(startGroupViewMessage as ConsoleGroupViewMessage);
         this.appendMessageToEnd(viewMessageInGroup, true);
         alreadyAdded.add(viewMessageInGroup.consoleMessage());
       }
@@ -1621,7 +1675,7 @@ export class ConsoleViewFilter {
     for (const [level, levelText] of this.levelLabels.entries()) {
       contextMenu.defaultSection().appendCheckboxItem(levelText, toggleShowLevel.bind(null, level), levels[level]);
     }
-    contextMenu.show();
+    void contextMenu.show();
 
     function toggleShowLevel(level: string): void {
       levels[level] = !levels[level];
@@ -1656,35 +1710,6 @@ export class ConsoleViewFilter {
   }
 }
 
-export class ConsoleGroup {
-  private readonly parentGroupInternal: ConsoleGroup|null;
-  private readonly nestingLevelInternal: number;
-  private readonly messagesHiddenInternal: boolean;
-
-  constructor(parentGroup: ConsoleGroup|null, groupMessage: ConsoleGroupViewMessage|null) {
-    this.parentGroupInternal = parentGroup;
-    this.nestingLevelInternal = parentGroup ? parentGroup.nestingLevel() + 1 : 0;
-    this.messagesHiddenInternal = groupMessage && groupMessage.collapsed() ||
-        this.parentGroupInternal && this.parentGroupInternal.messagesHidden() || false;
-  }
-
-  static createTopGroup(): ConsoleGroup {
-    return new ConsoleGroup(null, null);
-  }
-
-  messagesHidden(): boolean {
-    return this.messagesHiddenInternal;
-  }
-
-  nestingLevel(): number {
-    return this.nestingLevelInternal;
-  }
-
-  parentGroup(): ConsoleGroup|null {
-    return this.parentGroupInternal;
-  }
-}
-
 let actionDelegateInstance: ActionDelegate;
 
 export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {