chrome-devtools-frontend 1.0.954826 → 1.0.956060

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 {

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -206,7 +206,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
   private readonly linkifier: Components.Linkifier.Linkifier;
   private repeatCountInternal: number;
   private closeGroupDecorationCount: number;
-  private readonly nestingLevelInternal: number;
+  private consoleGroupInternal: ConsoleGroupViewMessage|null;
   private selectableChildren: {
     element: HTMLElement,
     forceSelect: () => void,
@@ -238,14 +238,13 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
   constructor(
       consoleMessage: SDK.ConsoleModel.ConsoleMessage, linkifier: Components.Linkifier.Linkifier,
       requestResolver: Logs.RequestResolver.RequestResolver, issueResolver: IssuesManager.IssueResolver.IssueResolver,
-      nestingLevel: number, onResize: (arg0: Common.EventTarget.EventTargetEvent<UI.TreeOutline.TreeElement>) => void) {
+      onResize: (arg0: Common.EventTarget.EventTargetEvent<UI.TreeOutline.TreeElement>) => void) {
     this.message = consoleMessage;
     this.linkifier = linkifier;
     this.requestResolver = requestResolver;
     this.issueResolver = issueResolver;
     this.repeatCountInternal = 1;
     this.closeGroupDecorationCount = 0;
-    this.nestingLevelInternal = nestingLevel;
     this.selectableChildren = [];
     this.messageResized = onResize;
     this.elementInternal = null;
@@ -269,6 +268,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     this.lastInSimilarGroup = false;
     this.groupKeyInternal = '';
     this.repeatCountElement = null;
+    this.consoleGroupInternal = null;
   }
 
   element(): HTMLElement {
@@ -702,7 +702,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       this.previewFormatter.appendObjectPreview(titleElement, obj.preview, false /* isEntry */);
     } else if (obj.type === 'function') {
       const functionElement = titleElement.createChild('span');
-      ObjectUI.ObjectPropertiesSection.ObjectPropertiesSection.formatObjectAsFunction(obj, functionElement, false);
+      void ObjectUI.ObjectPropertiesSection.ObjectPropertiesSection.formatObjectAsFunction(obj, functionElement, false);
       titleElement.classList.add('object-value-function');
     } else if (obj.subtype === 'trustedtype') {
       titleElement.appendChild(this.formatParameterAsTrustedType(obj));
@@ -734,7 +734,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
 
   private formatParameterAsFunction(func: SDK.RemoteObject.RemoteObject, includePreview?: boolean): HTMLElement {
     const result = document.createElement('span');
-    SDK.RemoteObject.RemoteFunction.objectAsFunction(func).targetFunction().then(formatTargetFunction.bind(this));
+    void SDK.RemoteObject.RemoteFunction.objectAsFunction(func).targetFunction().then(formatTargetFunction.bind(this));
     return result;
 
     function formatTargetFunction(this: ConsoleViewMessage, targetFunction: SDK.RemoteObject.RemoteObject): void {
@@ -747,7 +747,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
         UI.Tooltip.Tooltip.install(note, i18nString(UIStrings.functionWasResolvedFromBound));
       }
       result.addEventListener('contextmenu', this.contextMenuEventFired.bind(this, targetFunction), false);
-      promise.then(() => this.formattedParameterAsFunctionForTest());
+      void promise.then(() => this.formattedParameterAsFunctionForTest());
     }
   }
 
@@ -757,7 +757,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
   private contextMenuEventFired(obj: SDK.RemoteObject.RemoteObject, event: Event): void {
     const contextMenu = new UI.ContextMenu.ContextMenu(event);
     contextMenu.appendApplicableItems(obj);
-    contextMenu.show();
+    void contextMenu.show();
   }
 
   protected renderPropertyPreviewOrAccessor(
@@ -778,7 +778,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     if (!domModel) {
       return result;
     }
-    domModel.pushObjectAsNodeToFrontend(remoteObject).then(async (node: SDK.DOMModel.DOMNode|null) => {
+    void domModel.pushObjectAsNodeToFrontend(remoteObject).then(async (node: SDK.DOMModel.DOMNode|null) => {
       if (!node) {
         result.appendChild(this.formatParameterAsObject(remoteObject, false));
         return;
@@ -906,6 +906,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
           // Make sure that allowed properties do not interfere with link visibility.
           const ALLOWED_PROPERTY_PREFIXES =
               ['background', 'border', 'color', 'font', 'line', 'margin', 'padding', 'text'];
+
           currentStyle.clear();
           const buffer = document.createElement('span');
           buffer.setAttribute('style', token.value);
@@ -959,7 +960,24 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
   }
 
   nestingLevel(): number {
-    return this.nestingLevelInternal;
+    let nestingLevel = 0;
+    for (let group = this.consoleGroup(); group !== null; group = group.consoleGroup()) {
+      nestingLevel++;
+    }
+    return nestingLevel;
+  }
+
+  setConsoleGroup(group: ConsoleGroupViewMessage): void {
+    console.assert(this.consoleGroupInternal === null);
+    this.consoleGroupInternal = group;
+  }
+
+  clearConsoleGroup(): void {
+    this.consoleGroupInternal = null;
+  }
+
+  consoleGroup(): ConsoleGroupViewMessage|null {
+    return this.consoleGroupInternal;
   }
 
   setInSimilarGroup(inSimilarGroup: boolean, isLast?: boolean): void {
@@ -1170,7 +1188,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     }
 
     this.nestingLevelMarkers = [];
-    for (let i = 0; i < this.nestingLevelInternal; ++i) {
+    for (let i = 0; i < this.nestingLevel(); ++i) {
       this.nestingLevelMarkers.push(this.elementInternal.createChild('div', 'nesting-level-marker'));
     }
     this.updateCloseGroupDecorations();
@@ -1534,7 +1552,8 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       // If we were able to parse the function name from the stack trace line, try to replace it with an expansion of
       // any inline frames.
       const selectableChildIndex = this.selectableChildren.length - 1;
-      this.expandInlineStackFrames(
+      void this
+          .expandInlineStackFrames(
               debuggerModel, prefixWithoutFunction, suffix, link.url, link.lineNumber, link.columnNumber,
               formattedResult, formattedLine)
           .then(modified => {
@@ -1699,17 +1718,18 @@ export class ConsoleGroupViewMessage extends ConsoleViewMessage {
   private collapsedInternal: boolean;
   private expandGroupIcon: UI.Icon.Icon|null;
   private readonly onToggle: () => void;
+  private groupEndMessageInternal: ConsoleViewMessage|null;
 
   constructor(
       consoleMessage: SDK.ConsoleModel.ConsoleMessage, linkifier: Components.Linkifier.Linkifier,
       requestResolver: Logs.RequestResolver.RequestResolver, issueResolver: IssuesManager.IssueResolver.IssueResolver,
-      nestingLevel: number, onToggle: () => void,
-      onResize: (arg0: Common.EventTarget.EventTargetEvent<UI.TreeOutline.TreeElement>) => void) {
+      onToggle: () => void, onResize: (arg0: Common.EventTarget.EventTargetEvent<UI.TreeOutline.TreeElement>) => void) {
     console.assert(consoleMessage.isGroupStartMessage());
-    super(consoleMessage, linkifier, requestResolver, issueResolver, nestingLevel, onResize);
+    super(consoleMessage, linkifier, requestResolver, issueResolver, onResize);
     this.collapsedInternal = consoleMessage.type === Protocol.Runtime.ConsoleAPICalledEventType.StartGroupCollapsed;
     this.expandGroupIcon = null;
     this.onToggle = onToggle;
+    this.groupEndMessageInternal = null;
   }
 
   private setCollapsed(collapsed: boolean): void {
@@ -1760,6 +1780,28 @@ export class ConsoleGroupViewMessage extends ConsoleViewMessage {
       this.repeatCountElement.insertBefore(this.expandGroupIcon, this.repeatCountElement.firstChild);
     }
   }
+
+  messagesHidden(): boolean {
+    if (this.collapsed()) {
+      return true;
+    }
+    const parent = this.consoleGroup();
+    return Boolean(parent && parent.messagesHidden());
+  }
+
+  setGroupEnd(viewMessage: ConsoleViewMessage): void {
+    if (viewMessage.consoleMessage().type !== Protocol.Runtime.ConsoleAPICalledEventType.EndGroup) {
+      throw new Error('Invalid console message as group end');
+    }
+    if (this.groupEndMessageInternal !== null) {
+      throw new Error('Console group already has an end');
+    }
+    this.groupEndMessageInternal = viewMessage;
+  }
+
+  groupEnd(): ConsoleViewMessage|null {
+    return this.groupEndMessageInternal;
+  }
 }
 
 export class ConsoleCommand extends ConsoleViewMessage {
@@ -1768,8 +1810,8 @@ export class ConsoleCommand extends ConsoleViewMessage {
   constructor(
       consoleMessage: SDK.ConsoleModel.ConsoleMessage, linkifier: Components.Linkifier.Linkifier,
       requestResolver: Logs.RequestResolver.RequestResolver, issueResolver: IssuesManager.IssueResolver.IssueResolver,
-      nestingLevel: number, onResize: (arg0: Common.EventTarget.EventTargetEvent<UI.TreeOutline.TreeElement>) => void) {
-    super(consoleMessage, linkifier, requestResolver, issueResolver, nestingLevel, onResize);
+      onResize: (arg0: Common.EventTarget.EventTargetEvent<UI.TreeOutline.TreeElement>) => void) {
+    super(consoleMessage, linkifier, requestResolver, issueResolver, onResize);
     this.formattedCommand = null;
   }
 
@@ -1791,7 +1833,7 @@ export class ConsoleCommand extends ConsoleViewMessage {
     newContentElement.appendChild(this.formattedCommand);
 
     if (this.formattedCommand.textContent.length < MaxLengthToIgnoreHighlighter) {
-      CodeHighlighter.CodeHighlighter.highlightNode(this.formattedCommand, 'text/javascript')
+      void CodeHighlighter.CodeHighlighter.highlightNode(this.formattedCommand, 'text/javascript')
           .then(this.updateSearch.bind(this));
     } else {
       this.updateSearch();
@@ -1826,8 +1868,8 @@ export class ConsoleTableMessageView extends ConsoleViewMessage {
   constructor(
       consoleMessage: SDK.ConsoleModel.ConsoleMessage, linkifier: Components.Linkifier.Linkifier,
       requestResolver: Logs.RequestResolver.RequestResolver, issueResolver: IssuesManager.IssueResolver.IssueResolver,
-      nestingLevel: number, onResize: (arg0: Common.EventTarget.EventTargetEvent<UI.TreeOutline.TreeElement>) => void) {
-    super(consoleMessage, linkifier, requestResolver, issueResolver, nestingLevel, onResize);
+      onResize: (arg0: Common.EventTarget.EventTargetEvent<UI.TreeOutline.TreeElement>) => void) {
+    super(consoleMessage, linkifier, requestResolver, issueResolver, onResize);
     console.assert(consoleMessage.type === Protocol.Runtime.ConsoleAPICalledEventType.Table);
     this.dataGrid = null;
   }

package/front_end/panels/console/consoleView.css

@@ -208,6 +208,42 @@
   display: flex;
   border-top: 1px solid var(--override-message-border-color);
   border-bottom: 1px solid transparent;
+
+  /* Console ANSI color */
+  --console-color-black: #000;
+  --console-color-red: #a00;
+  --console-color-green: #0a0;
+  --console-color-yellow: #a50;
+  --console-color-blue: #00a;
+  --console-color-magenta: #a0a;
+  --console-color-cyan: #0aa;
+  --console-color-gray: #aaa;
+  --console-color-darkgray: #555;
+  --console-color-lightred: #f55;
+  --console-color-lightgreen: #5f5;
+  --console-color-lightyellow: #ff5;
+  --console-color-lightblue: #55f;
+  --console-color-ightmagenta: #f5f;
+  --console-color-lightcyan: #5ff;
+  --console-color-white: #fff;
+}
+
+.-theme-with-dark-background .console-message-wrapper {
+  /* Dark theme console ANSI color */
+  --console-color-red: rgb(237 78 76);
+  --console-color-green: rgb(1 200 1);
+  --console-color-yellow: rgb(210 192 87);
+  --console-color-blue: rgb(39 116 240);
+  --console-color-magenta: rgb(161 66 244);
+  --console-color-cyan: rgb(18 181 203);
+  --console-color-gray: rgb(207 208 208);
+  --console-color-darkgray: rgb(137 137 137);
+  --console-color-lightred: rgb(242 139 130);
+  --console-color-lightgreen: rgb(161 247 181);
+  --console-color-lightyellow: rgb(221 251 85);
+  --console-color-lightblue: rgb(102 157 246);
+  --console-color-lightmagenta: rgb(214 112 214);
+  --console-color-lightcyan: rgb(132 240 255);
 }
 
 .console-message-wrapper:first-of-type {

package/front_end/panels/console_counters/WarningErrorCounter.ts

@@ -63,7 +63,7 @@ export class WarningErrorCounter implements UI.Toolbar.Provider {
     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,
       displayMode: IssueCounter.IssueCounter.DisplayMode.OnlyMostImportant,
@@ -106,7 +106,7 @@ export class WarningErrorCounter implements UI.Toolbar.Provider {
 
   private update(): void {
     this.updatingForTest = true;
-    this.throttler.schedule(this.updateThrottled.bind(this));
+    void this.throttler.schedule(this.updateThrottled.bind(this));
   }
 
   get titlesForTesting(): string|null {

package/front_end/panels/coverage/CoverageListView.ts

@@ -249,7 +249,7 @@ export class CoverageListView extends UI.Widget.VBox {
   }
 
   private onOpenedNode(): void {
-    this.revealSourceForSelectedNode();
+    void this.revealSourceForSelectedNode();
   }
 
   private onKeyDown(event: KeyboardEvent): void {
@@ -257,7 +257,7 @@ export class CoverageListView extends UI.Widget.VBox {
       return;
     }
     event.consume(true);
-    this.revealSourceForSelectedNode();
+    void this.revealSourceForSelectedNode();
   }
 
   private async revealSourceForSelectedNode(): Promise<void> {
@@ -277,7 +277,7 @@ export class CoverageListView extends UI.Widget.VBox {
     if (this.dataGrid.selectedNode !== node) {
       return;
     }
-    Common.Revealer.reveal(sourceCode);
+    void Common.Revealer.reveal(sourceCode);
   }
 
   private sortingChanged(): void {

package/front_end/panels/coverage/CoverageModel.ts

@@ -103,7 +103,7 @@ export class CoverageModel extends SDK.SDKModel.SDKModel<EventTypes> {
   preciseCoverageDeltaUpdate(timestamp: number, occasion: string, coverageData: Protocol.Profiler.ScriptCoverage[]):
       void {
     this.coverageUpdateTimes.add(timestamp);
-    this.backlogOrProcessJSCoverage(coverageData, timestamp);
+    void this.backlogOrProcessJSCoverage(coverageData, timestamp);
   }
 
   async stop(): Promise<void> {
@@ -287,7 +287,7 @@ export class CoverageModel extends SDK.SDKModel.SDKModel<EventTypes> {
   }
 
   async processJSBacklog(): Promise<void> {
-    this.backlogOrProcessJSCoverage([], 0);
+    void this.backlogOrProcessJSCoverage([], 0);
   }
 
   private processJSCoverage(scriptsCoverage: Protocol.Profiler.ScriptCoverage[], stamp: number): CoverageInfo[] {
@@ -475,7 +475,7 @@ export class CoverageModel extends SDK.SDKModel.SDKModel<EventTypes> {
       result.push(...await urlInfo.entriesForExport());
     }
     await fos.write(JSON.stringify(result, undefined, 2));
-    fos.close();
+    void fos.close();
   }
 }