chrome-devtools-frontend 1.0.954845 → 1.0.955092

package/front_end/generated/ARIAProperties.js

@@ -1,4 +1,4 @@
-// Copyright 2021 The Chromium Authors. All rights reserved.
+// Copyright 2022 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 

package/front_end/generated/InspectorBackendCommands.js

@@ -627,7 +627,11 @@ export function registerCommands(inspectorBackend) {
     ScrollbarTrackPiece: 'scrollbar-track-piece',
     ScrollbarCorner: 'scrollbar-corner',
     Resizer: 'resizer',
-    InputListButton: 'input-list-button'
+    InputListButton: 'input-list-button',
+    Transition: 'transition',
+    TransitionContainer: 'transition-container',
+    TransitionOldContent: 'transition-old-content',
+    TransitionNewContent: 'transition-new-content'
   });
   inspectorBackend.registerEnum('DOM.ShadowRootType', {UserAgent: 'user-agent', Open: 'open', Closed: 'closed'});
   inspectorBackend.registerEnum(

package/front_end/generated/SupportedCSSProperties.js

@@ -1,4 +1,4 @@
-// Copyright 2021 The Chromium Authors. All rights reserved.
+// Copyright 2022 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
@@ -65,14 +65,6 @@ export const generatedProperties = [
   {'name': '-webkit-tap-highlight-color', 'inherited': true},
   {'name': '-webkit-text-combine', 'inherited': true},
   {'name': '-webkit-text-decorations-in-effect', 'inherited': true},
-  {
-    'longhands': ['-webkit-text-emphasis-style', '-webkit-text-emphasis-color'],
-    'name': '-webkit-text-emphasis',
-    'inherited': true
-  },
-  {'name': '-webkit-text-emphasis-color', 'inherited': true},
-  {'name': '-webkit-text-emphasis-position', 'inherited': true},
-  {'name': '-webkit-text-emphasis-style', 'inherited': true},
   {'name': '-webkit-text-fill-color', 'inherited': true},
   {'name': '-webkit-text-orientation', 'inherited': true},
   {'name': '-webkit-text-security', 'inherited': true, 'keywords': ['none', 'disc', 'circle', 'square']},
@@ -771,6 +763,10 @@ export const generatedProperties = [
   {'name': 'text-decoration-skip-ink', 'inherited': true, 'keywords': ['none', 'auto']},
   {'name': 'text-decoration-style', 'keywords': ['solid', 'double', 'dotted', 'dashed', 'wavy']},
   {'name': 'text-decoration-thickness', 'inherited': true, 'keywords': ['auto', 'from-font']},
+  {'longhands': ['text-emphasis-style', 'text-emphasis-color'], 'name': 'text-emphasis', 'inherited': true},
+  {'name': 'text-emphasis-color', 'inherited': true, 'keywords': ['currentcolor']},
+  {'name': 'text-emphasis-position', 'inherited': true},
+  {'name': 'text-emphasis-style', 'inherited': true},
   {'name': 'text-indent', 'inherited': true},
   {'name': 'text-justify', 'inherited': true, 'keywords': ['auto', 'none', 'inter-word', 'distribute']},
   {'name': 'text-orientation', 'inherited': true, 'keywords': ['sideways', 'mixed', 'upright']},
@@ -828,7 +824,7 @@ export const generatedProperties = [
   {
     'name': 'white-space',
     'inherited': true,
-    'keywords': ['none', 'normal', 'pre', 'pre-wrap', 'pre-line', 'nowrap', '-webkit-nowrap', 'break-spaces']
+    'keywords': ['normal', 'pre', 'pre-wrap', 'pre-line', 'nowrap', '-webkit-nowrap', 'break-spaces']
   },
   {'name': 'widows', 'inherited': true},
   {'name': 'width', 'keywords': ['auto', 'fit-content', 'min-content', 'max-content']},
@@ -1160,6 +1156,7 @@ export const generatedPropertyValues = {
   'text-decoration-skip-ink': {'values': ['none', 'auto']},
   'text-decoration-style': {'values': ['solid', 'double', 'dotted', 'dashed', 'wavy']},
   'text-decoration-thickness': {'values': ['auto', 'from-font']},
+  'text-emphasis-color': {'values': ['currentcolor']},
   'text-justify': {'values': ['auto', 'none', 'inter-word', 'distribute']},
   'text-orientation': {'values': ['sideways', 'mixed', 'upright']},
   'text-overflow': {'values': ['clip', 'ellipsis']},
@@ -1189,8 +1186,7 @@ export const generatedPropertyValues = {
   'vector-effect': {'values': ['none', 'non-scaling-stroke']},
   'vertical-align': {'values': ['baseline', 'sub', 'super', 'text-top', 'text-bottom', 'middle']},
   'visibility': {'values': ['visible', 'hidden', 'collapse']},
-  'white-space':
-      {'values': ['none', 'normal', 'pre', 'pre-wrap', 'pre-line', 'nowrap', '-webkit-nowrap', 'break-spaces']},
+  'white-space': {'values': ['normal', 'pre', 'pre-wrap', 'pre-line', 'nowrap', '-webkit-nowrap', 'break-spaces']},
   'width': {'values': ['auto', 'fit-content', 'min-content', 'max-content']},
   'will-change': {'values': ['auto']},
   'word-break': {'values': ['normal', 'break-all', 'keep-all', 'break-word']},
@@ -1201,9 +1197,9 @@ export const generatedPropertyValues = {
 export const generatedAliasesFor = new Map([
   ['-epub-caption-side', 'caption-side'],
   ['-epub-text-combine', '-webkit-text-combine'],
-  ['-epub-text-emphasis', '-webkit-text-emphasis'],
-  ['-epub-text-emphasis-color', '-webkit-text-emphasis-color'],
-  ['-epub-text-emphasis-style', '-webkit-text-emphasis-style'],
+  ['-epub-text-emphasis', 'text-emphasis'],
+  ['-epub-text-emphasis-color', 'text-emphasis-color'],
+  ['-epub-text-emphasis-style', 'text-emphasis-style'],
   ['-epub-text-orientation', '-webkit-text-orientation'],
   ['-epub-text-transform', 'text-transform'],
   ['-epub-word-break', 'word-break'],
@@ -1290,6 +1286,10 @@ export const generatedAliasesFor = new Map([
   ['-webkit-shape-image-threshold', 'shape-image-threshold'],
   ['-webkit-shape-margin', 'shape-margin'],
   ['-webkit-shape-outside', 'shape-outside'],
+  ['-webkit-text-emphasis', 'text-emphasis'],
+  ['-webkit-text-emphasis-color', 'text-emphasis-color'],
+  ['-webkit-text-emphasis-position', 'text-emphasis-position'],
+  ['-webkit-text-emphasis-style', 'text-emphasis-style'],
   ['-webkit-text-size-adjust', 'text-size-adjust'],
   ['-webkit-transform', 'transform'],
   ['-webkit-transform-origin', 'transform-origin'],

package/front_end/generated/protocol.d.ts

@@ -2884,6 +2884,10 @@ declare namespace Protocol {
       ScrollbarCorner = 'scrollbar-corner',
       Resizer = 'resizer',
       InputListButton = 'input-list-button',
+      Transition = 'transition',
+      TransitionContainer = 'transition-container',
+      TransitionOldContent = 'transition-old-content',
+      TransitionNewContent = 'transition-new-content',
     }
 
     /**
@@ -14068,6 +14072,12 @@ declare namespace Protocol {
        * Defaults to false.
        */
       hasCredBlob?: boolean;
+      /**
+       * If set to true, the authenticator will support the minPinLength extension.
+       * https://fidoalliance.org/specs/fido-v2.1-ps-20210615/fido-client-to-authenticator-protocol-v2.1-ps-20210615.html#sctn-minpinlength-extension
+       * Defaults to false.
+       */
+      hasMinPinLength?: boolean;
       /**
        * If set to true, tests of user presence will succeed immediately.
        * Otherwise, they will not be resolved. Defaults to true.
@@ -14356,6 +14366,8 @@ declare namespace Protocol {
       location: Location;
       /**
        * JavaScript script name or url.
+       * Deprecated in favor of using the `location.scriptId` to resolve the URL via a previously
+       * sent `Debugger.scriptParsed` event.
        */
       url: string;
       /**

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/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;
@@ -485,9 +483,6 @@ export class ConsoleView extends UI.Widget.VBox implements UI.SearchableView.Sea
       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();
     }
@@ -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());
       }
@@ -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 {
@@ -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();
@@ -1699,17 +1717,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 +1779,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 +1809,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;
   }
 
@@ -1826,8 +1867,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/elements/ElementsTreeElement.ts

@@ -244,10 +244,10 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.nodeInternal = node;
     this.treeOutline = null;
 
-    this.gutterContainer = this.listItemElement.createChild('div', 'gutter-container');
+    this.gutterContainer = this.contentElement.createChild('div', 'gutter-container');
     this.gutterContainer.addEventListener('click', this.showContextMenu.bind(this));
     const gutterMenuIcon = UI.Icon.Icon.create('largeicon-menu', 'gutter-menu-icon');
-    this.gutterContainer.appendChild(gutterMenuIcon);
+    this.gutterContainer.append(gutterMenuIcon);
     this.decorationsElement = this.gutterContainer.createChild('div', 'hidden');
 
     this.isClosingTagInternal = isClosingTag;
@@ -267,7 +267,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.highlightResult = [];
 
     if (!isClosingTag) {
-      this.adornerContainer = this.listItemElement.createChild('div', 'adorner-container hidden');
+      this.adornerContainer = this.contentElement.createChild('div', 'adorner-container hidden');
       this.adorners = [];
       this.styleAdorners = [];
       this.adornersThrottler = new Common.Throttler.Throttler(100);
@@ -422,8 +422,8 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   private createSelection(): void {
-    const listItemElement = this.listItemElement;
-    if (!listItemElement) {
+    const contentElement = this.contentElement;
+    if (!contentElement) {
       return;
     }
 
@@ -431,13 +431,13 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       this.selectionElement = document.createElement('div');
       this.selectionElement.className = 'selection fill';
       this.selectionElement.style.setProperty('margin-left', (-this.computeLeftIndent()) + 'px');
-      listItemElement.insertBefore(this.selectionElement, listItemElement.firstChild);
+      contentElement.prepend(this.selectionElement);
     }
   }
 
   private createHint(): void {
-    if (this.listItemElement && !this.hintElement) {
-      this.hintElement = this.listItemElement.createChild('span', 'selected-hint');
+    if (this.contentElement && !this.hintElement) {
+      this.hintElement = this.contentElement.createChild('span', 'selected-hint');
       const selectedElementCommand = '$0';
       UI.Tooltip.Tooltip.install(
           this.hintElement, i18nString(UIStrings.useSInTheConsoleToReferToThis, {PH1: selectedElementCommand}));
@@ -1017,7 +1017,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       this.childrenListElement.style.display = 'none';
     }
     // Append editor.
-    this.listItemElement.appendChild(this.htmlEditElement);
+    this.listItemElement.append(this.htmlEditElement);
     this.htmlEditElement.addEventListener('keydown', event => {
       if (event.key === 'Escape') {
         event.consume(true);
@@ -1305,13 +1305,13 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       }
       const highlightElement = document.createElement('span');
       highlightElement.className = 'highlight';
-      highlightElement.appendChild(nodeInfo);
+      highlightElement.append(nodeInfo);
       // fixme: make it clear that `this.title = x` is a setter with significant side effects
       this.title = highlightElement;
       this.updateDecorations();
-      this.listItemElement.insertBefore(this.gutterContainer, this.listItemElement.firstChild);
+      this.contentElement.prepend(this.gutterContainer);
       if (!this.isClosingTagInternal && this.adornerContainer) {
-        this.listItemElement.appendChild(this.adornerContainer);
+        this.contentElement.append(this.adornerContainer);
       }
       this.highlightResult = [];
       delete this.selectionElement;

package/front_end/panels/elements/elementsTreeOutline.css

@@ -44,9 +44,13 @@
   min-width: 200px;
 }
 
+.elements-disclosure li.parent {
+  display: flex;
+}
+
 .elements-disclosure li.parent:not(.always-parent) {
   /** Keep it in sync with ElementsTreeElements.updateDecorations **/
-  margin-left: -13px;
+  margin-left: -12px;
 }
 
 .elements-disclosure li .selected-hint::before {
@@ -67,6 +71,7 @@
   user-select: none;
   -webkit-mask-image: var(--image-file-treeoutlineTriangles);
   -webkit-mask-size: 32px 24px;
+  height: 16px;
   content: "\A0\A0";
   color: transparent;
   text-shadow: none;

package/front_end/ui/legacy/Treeoutline.ts

@@ -432,6 +432,7 @@ export class TreeElement {
   private readonly boundOnFocus: () => void;
   private readonly boundOnBlur: () => void;
   readonly listItemNode: HTMLLIElement;
+  readonly contentNode: HTMLElement;
   titleElement: Node;
   titleInternal: string|Node;
   private childrenInternal: TreeElement[]|null;
@@ -458,8 +459,10 @@ export class TreeElement {
     this.boundOnFocus = this.onFocus.bind(this);
     this.boundOnBlur = this.onBlur.bind(this);
     this.listItemNode = document.createElement('li');
+    this.contentNode = this.listItemElement.createChild('div');
+    this.contentNode.classList.add('tree-element-content');
 
-    this.titleElement = this.listItemNode.createChild('span', 'tree-element-title');
+    this.titleElement = this.contentNode.createChild('span', 'tree-element-title');
     treeElementBylistItemNode.set(this.listItemNode, this);
     this.titleInternal = '';
     if (title) {
@@ -729,6 +732,10 @@ export class TreeElement {
     return this.listItemNode;
   }
 
+  get contentElement(): HTMLElement {
+    return this.contentNode;
+  }
+
   get childrenListElement(): HTMLOListElement {
     return this.childrenListNode;
   }
@@ -751,13 +758,13 @@ export class TreeElement {
       this.tooltip = '';
     }
 
-    this.listItemNode.removeChildren();
+    this.contentNode.removeChildren();
     if (this.leadingIconsElement) {
-      this.listItemNode.appendChild(this.leadingIconsElement);
+      this.contentNode.appendChild(this.leadingIconsElement);
     }
-    this.listItemNode.appendChild(this.titleElement);
+    this.contentNode.appendChild(this.titleElement);
     if (this.trailingIconsElement) {
-      this.listItemNode.appendChild(this.trailingIconsElement);
+      this.contentNode.appendChild(this.trailingIconsElement);
     }
     this.ensureSelection();
   }
@@ -787,7 +794,7 @@ export class TreeElement {
       this.leadingIconsElement = document.createElement('div');
       this.leadingIconsElement.classList.add('leading-icons');
       this.leadingIconsElement.classList.add('icons-container');
-      this.listItemNode.insertBefore(this.leadingIconsElement, this.titleElement);
+      this.contentNode.insertBefore(this.leadingIconsElement, this.titleElement);
       this.ensureSelection();
     }
     this.leadingIconsElement.removeChildren();
@@ -804,7 +811,7 @@ export class TreeElement {
       this.trailingIconsElement = document.createElement('div');
       this.trailingIconsElement.classList.add('trailing-icons');
       this.trailingIconsElement.classList.add('icons-container');
-      this.listItemNode.appendChild(this.trailingIconsElement);
+      this.contentNode.appendChild(this.trailingIconsElement);
       this.ensureSelection();
     }
     this.trailingIconsElement.removeChildren();

package/front_end/ui/legacy/treeoutline.css

@@ -93,6 +93,10 @@ ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus * {
   color: inherit;
 }
 
+.tree-outline .tree-element-content {
+  display: flex;
+}
+
 .tree-outline li .icons-container {
   align-self: center;
   display: flex;

package/package.json

@@ -53,5 +53,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.954845"
+  "version": "1.0.955092"
 }

package/scripts/eslint_rules/tests/check_license_header_test.js

@@ -9,6 +9,8 @@ const ruleTester = new (require('eslint').RuleTester)({
   parser: require.resolve('@typescript-eslint/parser'),
 });
 
+const CURRENT_YEAR = new Date().getFullYear();
+
 ruleTester.run('check_license_header', rule, {
   valid: [
     {
@@ -116,7 +118,7 @@ main()
       code: 'import * as Action from \'./Action.js\';',
       filename: 'front_end/ui/ui.js',
       errors: [{message: 'Missing license header'}],
-      output: `// Copyright 2021 The Chromium Authors. All rights reserved.
+      output: `// Copyright ${CURRENT_YEAR} The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
@@ -131,7 +133,7 @@ import * as Action from './Action.js';
       filename: 'front_end/ui/ui.js',
       errors: [{message: 'Incorrect line license header'}],
       output: `
-// Copyright 2021 The Chromium Authors. All rights reserved.
+// Copyright ${CURRENT_YEAR} The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
@@ -147,7 +149,7 @@ import * as Action from './Action.js';
 (async function() {})();`,
       filename: 'test/webtests/http/tests/devtools/a11y-axe-core/sources/call-stack-a11y-test.js',
       errors: [{message: 'Incorrect line license header'}],
-      output: `// Copyright 2021 The Chromium Authors. All rights reserved.
+      output: `// Copyright ${CURRENT_YEAR} The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
@@ -168,7 +170,7 @@ import * as Action from './Action.js';
       filename: 'front_end/ui/ui.js',
       errors: [{message: 'Incorrect line license header'}],
       output: `
-// Copyright 2021 The Chromium Authors. All rights reserved.
+// Copyright ${CURRENT_YEAR} The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
@@ -191,7 +193,7 @@ import * as Action from './Action.js';
       filename: 'front_end/ui/ui.js',
       errors: [{message: 'Incorrect block license header'}],
       output: `
-// Copyright 2021 The Chromium Authors. All rights reserved.
+// Copyright ${CURRENT_YEAR} The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
@@ -225,7 +227,7 @@ interface String {
       filename: 'front_end/legacy/legacy-defs.d.ts',
       errors: [{message: 'Missing license header'}],
       output: `
-// Copyright 2021 The Chromium Authors. All rights reserved.
+// Copyright ${CURRENT_YEAR} The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
@@ -258,7 +260,7 @@ main()
       errors: [{message: 'Missing license header'}],
       output: `#!/usr/bin/env node
 
-// Copyright 2021 The Chromium Authors. All rights reserved.
+// Copyright ${CURRENT_YEAR} The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
@@ -279,7 +281,7 @@ main()
       errors: [{message: 'Incorrect line license header'}],
       output: `#!/usr/bin/env node
 
-// Copyright 2021 The Chromium Authors. All rights reserved.
+// Copyright ${CURRENT_YEAR} The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.