chrome-devtools-frontend 1.0.1473514 → 1.0.1506453

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -78,39 +78,39 @@ const UIStrings = {
    */
   consoleWasCleared: 'Console was cleared',
   /**
-   *@description Message element title in Console View Message of the Console panel
-   *@example {Ctrl+L} PH1
+   * @description Message element title in Console View Message of the Console panel
+   * @example {Ctrl+L} PH1
    */
   clearAllMessagesWithS: 'Clear all messages with {PH1}',
   /**
-   *@description Message prefix in Console View Message of the Console panel
+   * @description Message prefix in Console View Message of the Console panel
    */
   assertionFailed: 'Assertion failed: ',
   /**
-   *@description Message text in Console View Message of the Console panel
-   *@example {console.log(1)} PH1
+   * @description Message text in Console View Message of the Console panel
+   * @example {console.log(1)} PH1
    */
   violationS: '`[Violation]` {PH1}',
   /**
-   *@description Message text in Console View Message of the Console panel
-   *@example {console.log(1)} PH1
+   * @description Message text in Console View Message of the Console panel
+   * @example {console.log(1)} PH1
    */
   interventionS: '`[Intervention]` {PH1}',
   /**
-   *@description Message text in Console View Message of the Console panel
-   *@example {console.log(1)} PH1
+   * @description Message text in Console View Message of the Console panel
+   * @example {console.log(1)} PH1
    */
   deprecationS: '`[Deprecation]` {PH1}',
   /**
-   *@description Note title in Console View Message of the Console panel
+   * @description Note title in Console View Message of the Console panel
    */
   thisValueWillNotBeCollectedUntil: 'This value will not be collected until console is cleared.',
   /**
-   *@description Note title in Console View Message of the Console panel
+   * @description Note title in Console View Message of the Console panel
    */
   thisValueWasEvaluatedUponFirst: 'This value was evaluated upon first expanding. It may have changed since then.',
   /**
-   *@description Note title in Console View Message of the Console panel
+   * @description Note title in Console View Message of the Console panel
    */
   functionWasResolvedFromBound: 'Function was resolved from bound function.',
   /**
@@ -119,11 +119,11 @@ const UIStrings = {
    */
   exception: '<exception>',
   /**
-   *@description Text to indicate an item is a warning
+   * @description Text to indicate an item is a warning
    */
   warning: 'Warning',
   /**
-   *@description Text for errors
+   * @description Text for errors
    */
   error: 'Error',
   /**
@@ -153,71 +153,71 @@ const UIStrings = {
    */
   errorS: '{n, plural, =1 {Error, Repeated # time} other {Error, Repeated # times}}',
   /**
-   *@description Text appended to grouped console messages that are related to URL requests
+   * @description Text appended to grouped console messages that are related to URL requests
    */
   url: '<URL>',
   /**
-   *@description Text appended to grouped console messages about tasks that took longer than N ms
+   * @description Text appended to grouped console messages about tasks that took longer than N ms
    */
   tookNms: 'took <N>ms',
   /**
-   *@description Text appended to grouped console messages about tasks that are related to some DOM event
+   * @description Text appended to grouped console messages about tasks that are related to some DOM event
    */
   someEvent: '<some> event',
   /**
-   *@description Text appended to grouped console messages about tasks that are related to a particular milestone
+   * @description Text appended to grouped console messages about tasks that are related to a particular milestone
    */
   Mxx: ' M<XX>',
   /**
-   *@description Text appended to grouped console messages about tasks that are related to autofill completions
+   * @description Text appended to grouped console messages about tasks that are related to autofill completions
    */
   attribute: '<attribute>',
   /**
-   *@description Text for the index of something
+   * @description Text for the index of something
    */
   index: '(index)',
   /**
-   *@description Text for the value of something
+   * @description Text for the value of something
    */
   value: 'Value',
   /**
-   *@description Title of the Console tool
+   * @description Title of the Console tool
    */
   console: 'Console',
   /**
-   *@description Message to indicate a console message with a stack table is expanded
+   * @description Message to indicate a console message with a stack table is expanded
    */
   stackMessageExpanded: 'Stack table expanded',
   /**
-   *@description Message to indicate a console message with a stack table is collapsed
+   * @description Message to indicate a console message with a stack table is collapsed
    */
   stackMessageCollapsed: 'Stack table collapsed',
   /**
-   *@description Message to offer insights for a console error message
+   * @description Message to offer insights for a console error message
    */
   explainThisError: 'Understand this error',
   /**
-   *@description Message to offer insights for a console warning message
+   * @description Message to offer insights for a console warning message
    */
   explainThisWarning: 'Understand this warning',
   /**
-   *@description Message to offer insights for a console message
+   * @description Message to offer insights for a console message
    */
   explainThisMessage: 'Understand this message',
   /**
-   *@description Message to offer insights for a console error message
+   * @description Message to offer insights for a console error message
    */
   explainThisErrorWithAI: 'Understand this error. Powered by AI.',
   /**
-   *@description Message to offer insights for a console warning message
+   * @description Message to offer insights for a console warning message
    */
   explainThisWarningWithAI: 'Understand this warning. Powered by AI.',
   /**
-   *@description Message to offer insights for a console message
+   * @description Message to offer insights for a console message
    */
   explainThisMessageWithAI: 'Understand this message. Powered by AI',
   /**
-   *@description Tooltip shown when user hovers over the cookie icon to explain that the button will bring the user to the cookie report
+   * @description Tooltip shown when user hovers over the cookie icon to explain that the button will bring the user to the cookie report
    */
   SeeIssueInCookieReport: 'Click to open privacy and security panel and show third-party cookie report',
 } as const;
@@ -653,7 +653,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       const stackTableState =
           expand ? i18nString(UIStrings.stackMessageExpanded) : i18nString(UIStrings.stackMessageCollapsed);
       UI.ARIAUtils.setLabel(contentElement, `${messageElement.textContent} ${stackTableState}`);
-      UI.ARIAUtils.alert(stackTableState);
+      UI.ARIAUtils.LiveAnnouncer.alert(stackTableState);
       UI.ARIAUtils.setExpanded(clickableElement, expand);
       this.traceExpanded = expand;
     };
@@ -662,7 +662,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       if (UI.UIUtils.isEditing() || contentElement.hasSelection()) {
         return;
       }
-      this.expandTrace && this.expandTrace(stackTraceElement.classList.contains('hidden-stack-trace'));
+      this.expandTrace?.(stackTraceElement.classList.contains('hidden-stack-trace'));
       event.consume();
     };
 
@@ -705,10 +705,11 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     clickableElement.tabIndex = -1;
     clickableElement.appendChild(messageElement);
     const stackTraceElement = contentElement.createChild('div');
-    const stackTracePreview = Components.JSPresentationUtils.buildStackTracePreviewContents(
-        target, this.linkifier, {stackTrace, tabStops: undefined, widthConstrained: true});
-    stackTraceElement.appendChild(stackTracePreview.element);
-    for (const linkElement of stackTracePreview.links) {
+    const stackTracePreview = new Components.JSPresentationUtils.StackTracePreviewContent(
+        undefined, target ?? undefined, this.linkifier, {stackTrace, widthConstrained: true});
+    stackTracePreview.markAsRoot();
+    stackTracePreview.show(stackTraceElement);
+    for (const linkElement of stackTracePreview.linkElements) {
       this.selectableChildren.push({element: linkElement, forceSelect: () => linkElement.focus()});
     }
     stackTraceElement.classList.add('hidden-stack-trace');
@@ -982,21 +983,26 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
         async(errorObj: SDK.RemoteObject.RemoteObject, includeCausedByPrefix: boolean): Promise<void> => {
       const error = SDK.RemoteObject.RemoteError.objectAsError(errorObj);
       const [details, cause] = await Promise.all([error.exceptionDetails(), error.cause()]);
-      const errorElementType = includeCausedByPrefix ? 'div' : 'span';
-      let errorElement = this.tryFormatAsError(error.errorStack, details, errorElementType);
+      let errorElement = this.tryFormatAsError(error.errorStack, details);
       if (!errorElement) {
-        errorElement = document.createElement(errorElementType);
+        errorElement = document.createElement('span');
         errorElement.append(this.linkifyStringAsFragment(error.errorStack));
       }
+
       if (includeCausedByPrefix) {
-        errorElement.prepend('Caused by: ');
+        const causeElement = document.createElement('div');
+        causeElement.append('Caused by: ', errorElement);
+        result.appendChild(causeElement);
+      } else {
+        result.appendChild(errorElement);
       }
-      result.appendChild(errorElement);
 
       if (cause && cause.subtype === 'error') {
         await formatErrorStack(cause, /* includeCausedByPrefix */ true);
       } else if (cause && cause.type === 'string') {
-        result.append(`Caused by: ${cause.value}`);
+        const stringCauseElement = document.createElement('div');
+        stringCauseElement.append(`Caused by: ${cause.value}`);
+        result.append(stringCauseElement);
       }
     };
 
@@ -1223,7 +1229,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     }
 
     if (event.key === 'ArrowLeft') {
-      this.elementInternal && this.elementInternal.focus();
+      this.elementInternal?.focus();
       return true;
     }
     if (event.key === 'ArrowRight') {
@@ -1234,7 +1240,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     if (event.key === 'ArrowUp') {
       const firstVisibleChild = this.nearestVisibleChild(0);
       if (this.selectableChildren[focusedChildIndex] === firstVisibleChild && firstVisibleChild) {
-        this.elementInternal && this.elementInternal.focus();
+        this.elementInternal?.focus();
         return true;
       }
       if (this.selectNearestVisibleChild(focusedChildIndex - 1, true /* backwards */)) {
@@ -1456,12 +1462,9 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
 
   #createHoverButton(): HTMLButtonElement {
     const icon = new IconButton.Icon.Icon();
-    icon.data = {
-      iconName: 'lightbulb-spark',
-      color: 'var(--devtools-icon-color)',
-      width: '16px',
-      height: '16px',
-    };
+    icon.name = 'lightbulb-spark';
+    icon.style.color = 'var(--devtools-icon-color)';
+    icon.classList.add('medium');
     const button = document.createElement('button');
     button.append(icon);
     button.onclick = (event: Event) => {
@@ -1501,15 +1504,13 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       this.messageIcon = null;
     }
 
-    let color = '';
+    const color = '';
     let iconName = '';
     let accessibleName = '';
     if (this.message.level === Protocol.Log.LogEntryLevel.Warning) {
-      color = 'var(--icon-warning)';
       iconName = 'warning-filled';
       accessibleName = i18nString(UIStrings.warning);
     } else if (this.message.level === Protocol.Log.LogEntryLevel.Error) {
-      color = 'var(--icon-error)';
       iconName = 'cross-circle-filled';
       accessibleName = i18nString(UIStrings.error);
     } else if (this.message.originatesFromLogpoint) {
@@ -1524,13 +1525,9 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     }
 
     this.messageIcon = new IconButton.Icon.Icon();
-    this.messageIcon.data = {
-      iconName,
-      color,
-      width: '14px',
-      height: '14px',
-    };
-    this.messageIcon.classList.add('message-level-icon');
+    this.messageIcon.name = iconName;
+    this.messageIcon.style.color = color;
+    this.messageIcon.classList.add('message-level-icon', 'small');
     if (this.contentElementInternal) {
       this.contentElementInternal.insertBefore(this.messageIcon, this.contentElementInternal.firstChild);
     }
@@ -1741,9 +1738,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     return scriptLocationLink;
   }
 
-  private tryFormatAsError(
-      string: string, exceptionDetails?: Protocol.Runtime.ExceptionDetails,
-      formattedResultType: 'div'|'span' = 'span'): HTMLElement|null {
+  private tryFormatAsError(string: string, exceptionDetails?: Protocol.Runtime.ExceptionDetails): HTMLElement|null {
     const runtimeModel = this.message.runtimeModel();
     if (!runtimeModel) {
       return null;
@@ -1763,7 +1758,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     }
 
     const debuggerModel = runtimeModel.debuggerModel();
-    const formattedResult = document.createElement(formattedResultType);
+    const formattedResult = document.createElement('span');
 
     for (let i = 0; i < linkInfos.length; ++i) {
       const newline = i < linkInfos.length - 1 ? '\n' : '';
@@ -2073,8 +2068,8 @@ export class ConsoleCommand extends ConsoleViewMessage {
     this.setContentElement(newContentElement);
     newContentElement.classList.add('console-user-command');
     const userCommandIcon = new IconButton.Icon.Icon();
-    userCommandIcon.data = {iconName: 'chevron-right', color: 'var(--icon-default)', width: '16px', height: '16px'};
-    userCommandIcon.classList.add('command-result-icon');
+    userCommandIcon.name = 'chevron-right';
+    userCommandIcon.classList.add('command-result-icon', 'medium');
     newContentElement.appendChild(userCommandIcon);
 
     elementToMessage.set(newContentElement, this);
@@ -2106,8 +2101,8 @@ export class ConsoleCommandResult extends ConsoleViewMessage {
       element.classList.add('console-user-command-result');
       if (this.consoleMessage().level === Protocol.Log.LogEntryLevel.Info) {
         const icon = new IconButton.Icon.Icon();
-        icon.data = {iconName: 'chevron-left-dot', color: 'var(--icon-default)', width: '16px', height: '16px'};
-        icon.classList.add('command-result-icon');
+        icon.name = 'chevron-left-dot';
+        icon.classList.add('command-result-icon', 'medium');
         element.insertBefore(icon, element.firstChild);
       }
     }
@@ -2263,12 +2258,12 @@ export class ConsoleTableMessageView extends ConsoleViewMessage {
 
 /**
  * The maximum length before strings are considered too long for syntax highlighting.
- * @const
+ * @constant
  */
 const MaxLengthToIgnoreHighlighter = 10000;
 
 /**
- * @const
+ * @constant
  */
 export const MaxLengthForLinks = 40;
 

package/front_end/panels/console/console-meta.ts

@@ -10,71 +10,71 @@ import type * as Console from './console.js';
 
 const UIStrings = {
   /**
-   *@description Title of the Console tool
+   * @description Title of the Console tool
    */
   console: 'Console',
   /**
-   *@description Title of an action that shows the console.
+   * @description Title of an action that shows the console.
    */
   showConsole: 'Show Console',
   /**
-   *@description Title of an action that toggles the console.
+   * @description Title of an action that toggles the console.
    */
   toggleConsole: 'Toggle Console',
   /**
-   *@description Text to clear the console
+   * @description Text to clear the console
    */
   clearConsole: 'Clear console',
   /**
-   *@description Title of an action in the console tool to clear
+   * @description Title of an action in the console tool to clear
    */
   clearConsoleHistory: 'Clear console history',
   /**
-   *@description Title of an action in the console tool to create pin. A live expression is code that the user can enter into the console and it will be pinned in the UI. Live expressions are constantly evaluated as the user interacts with the console (hence 'live').
+   * @description Title of an action in the console tool to create pin. A live expression is code that the user can enter into the console and it will be pinned in the UI. Live expressions are constantly evaluated as the user interacts with the console (hence 'live').
    */
   createLiveExpression: 'Create live expression',
   /**
-   *@description Title of a setting under the Console category that can be invoked through the Command Menu
+   * @description Title of a setting under the Console category that can be invoked through the Command Menu
    */
   hideNetworkMessages: 'Hide network messages',
   /**
-   *@description Title of a setting under the Console category that can be invoked through the Command Menu
+   * @description Title of a setting under the Console category that can be invoked through the Command Menu
    */
   showNetworkMessages: 'Show network messages',
   /**
-   *@description Alternative title text of a setting in Console View of the Console panel
+   * @description Alternative title text of a setting in Console View of the Console panel
    */
   selectedContextOnly: 'Selected context only',
   /**
-   *@description Tooltip text that appears on the setting when hovering over it in Console View of the Console panel
+   * @description Tooltip text that appears on the setting when hovering over it in Console View of the Console panel
    */
   onlyShowMessagesFromTheCurrent: 'Only show messages from the current context (`top`, `iframe`, `worker`, extension)',
   /**
-   *@description Title of a setting under the Console category that can be invoked through the Command Menu
+   * @description Title of a setting under the Console category that can be invoked through the Command Menu
    */
   showMessagesFromAllContexts: 'Show messages from all contexts',
   /**
-   *@description Title of a setting under the Console category in Settings
+   * @description Title of a setting under the Console category in Settings
    */
   logXmlhttprequests: 'Log XMLHttpRequests',
   /**
-   *@description Title of a setting under the Console category
+   * @description Title of a setting under the Console category
    */
   timestamps: 'Timestamps',
   /**
-   *@description Title of a setting under the Console category that can be invoked through the Command Menu
+   * @description Title of a setting under the Console category that can be invoked through the Command Menu
    */
   showTimestamps: 'Show timestamps',
   /**
-   *@description Title of a setting under the Console category that can be invoked through the Command Menu
+   * @description Title of a setting under the Console category that can be invoked through the Command Menu
    */
   hideTimestamps: 'Hide timestamps',
   /**
-   *@description Title of a setting under the Console category that can be invoked through the Command Menu
+   * @description Title of a setting under the Console category that can be invoked through the Command Menu
    */
   autocompleteFromHistory: 'Autocomplete from history',
   /**
-   *@description Title of a setting under the Console category that can be invoked through the Command Menu
+   * @description Title of a setting under the Console category that can be invoked through the Command Menu
    */
   doNotAutocompleteFromHistory: 'Do not autocomplete from history',
   /**
@@ -86,43 +86,43 @@ const UIStrings = {
    */
   doNotAutocompleteOnEnter: 'Do not accept autocomplete suggestion on Enter',
   /**
-   *@description Title of a setting under the Console category that can be invoked through the Command Menu
+   * @description Title of a setting under the Console category that can be invoked through the Command Menu
    */
   groupSimilarMessagesInConsole: 'Group similar messages in console',
   /**
-   *@description Title of a setting under the Console category that can be invoked through the Command Menu
+   * @description Title of a setting under the Console category that can be invoked through the Command Menu
    */
   doNotGroupSimilarMessagesIn: 'Do not group similar messages in console',
   /**
-   *@description Title of a setting under the Console category that can be invoked through the Command Menu
+   * @description Title of a setting under the Console category that can be invoked through the Command Menu
    */
   showCorsErrorsInConsole: 'Show `CORS` errors in console',
   /**
-   *@description Title of a setting under the Console category that can be invoked through the Command Menu
+   * @description Title of a setting under the Console category that can be invoked through the Command Menu
    */
   doNotShowCorsErrorsIn: 'Do not show `CORS` errors in console',
   /**
-   *@description Title of a setting under the Console category in Settings
+   * @description Title of a setting under the Console category in Settings
    */
   eagerEvaluation: 'Eager evaluation',
   /**
-   *@description Title of a setting under the Console category that can be invoked through the Command Menu
+   * @description Title of a setting under the Console category that can be invoked through the Command Menu
    */
   eagerlyEvaluateConsolePromptText: 'Eagerly evaluate console prompt text',
   /**
-   *@description Title of a setting under the Console category that can be invoked through the Command Menu
+   * @description Title of a setting under the Console category that can be invoked through the Command Menu
    */
   doNotEagerlyEvaluateConsole: 'Do not eagerly evaluate console prompt text',
   /**
-   *@description Allows code that is executed in the console to do things that usually are only allowed if triggered by a user action
+   * @description Allows code that is executed in the console to do things that usually are only allowed if triggered by a user action
    */
   evaluateTriggersUserActivation: 'Treat code evaluation as user action',
   /**
-   *@description Title of a setting under the Console category that can be invoked through the Command Menu
+   * @description Title of a setting under the Console category that can be invoked through the Command Menu
    */
   treatEvaluationAsUserActivation: 'Treat evaluation as user activation',
   /**
-   *@description Title of a setting under the Console category that can be invoked through the Command Menu
+   * @description Title of a setting under the Console category that can be invoked through the Command Menu
    */
   doNotTreatEvaluationAsUser: 'Do not treat evaluation as user activation',
   /**

package/front_end/panels/console/consoleSidebar.css

@@ -14,6 +14,8 @@
 }
 
 devtools-icon {
+  margin-right: var(--sys-size-3);
+
   &[name="cross-circle"] {
     color: var(--sys-color-error-bright);
   }

package/front_end/panels/console/consoleView.css

@@ -44,6 +44,12 @@
   flex: 1 1 auto;
 }
 
+.console-sidebar-levels-info {
+  margin-left: var(--sys-size-3);
+  width: var(--sys-size-8);
+  height: var(--sys-size-8);
+}
+
 #console-issues-counter {
   margin-top: 0;
 }
@@ -69,7 +75,7 @@
 #console-messages {
   flex: 1 1;
   overflow-y: auto;
-  word-wrap: break-word;
+  overflow-wrap: break-word;
   user-select: text;
   transform: translateZ(0);
   overflow-anchor: none;  /* Chrome-specific scroll-anchoring opt-out */
@@ -208,13 +214,8 @@
   --console-color-lightcyan: #5ff;
   --console-color-white: #fff;
 
-  &:focus {
+  &.console-selected {
     background-color: var(--sys-color-tonal-container);
-
-    & ::selection {
-      background-color: var(--sys-color-state-focus-select);
-      color: currentcolor;
-    }
   }
 }
 
@@ -324,11 +325,12 @@
 .console-view-object-properties-section {
   padding: 0;
   position: relative;
-  vertical-align: baseline;
+  vertical-align: top;
   color: inherit;
   display: inline-block;
   overflow-wrap: break-word;
   max-width: 100%;
+  margin-top: -1.5px;
 }
 
 .info-note {
@@ -369,7 +371,7 @@
 
 .console-object-preview {
   white-space: normal;
-  word-wrap: break-word;
+  overflow-wrap: break-word;
   font-style: italic;
 }
 
@@ -389,20 +391,25 @@
     word-break: break-all;
   }
 
-  .formatted-stack-frame:has(.ignore-list-link) {
-    display: var(--display-ignored-formatted-stack-frame);
-    opacity: 60%;
+  .formatted-stack-frame {
+    display: var(--display-formatted-stack-frame-default);
 
-    /* Subsequent builtin stack frames are also treated as ignored */
-    & + .formatted-builtin-stack-frame {
+    &:has(.ignore-list-link) {
       display: var(--display-ignored-formatted-stack-frame);
       opacity: 60%;
+
+      /* Subsequent builtin stack frames are also treated as ignored */
+      & + .formatted-builtin-stack-frame {
+        display: var(--display-ignored-formatted-stack-frame);
+        opacity: 60%;
+      }
     }
   }
 }
 
 .console-message-stack-trace-wrapper {
   --override-display-stack-preview-toggle-link: none;
+  --display-formatted-stack-frame-default: block;
 
   flex: 1 1 auto;
   display: flex;
@@ -410,7 +417,7 @@
   align-items: stretch;
 
   &:has(div > .stack-preview-container.show-hidden-rows) {
-    --display-ignored-formatted-stack-frame: inherit;
+    --display-ignored-formatted-stack-frame: var(--display-formatted-stack-frame-default);
   }
 
   &:has(.formatted-stack-frame .ignore-list-link):has(.formatted-stack-frame .devtools-link:not(.ignore-list-link)) {