chrome-devtools-frontend 1.0.954271 → 1.0.954777

package/front_end/core/i18n/locales/en-US.json

@@ -11912,8 +11912,8 @@
   "ui/legacy/components/quick_open/QuickInput.ts | pressEnterToConfirmOrEscapeTo": {
     "message": "{PH1} (Press 'Enter' to confirm or 'Escape' to cancel.)"
   },
-  "ui/legacy/components/quick_open/QuickOpen.ts | useTabToSwitchCommandsTypeToSeeAvailableCommands": {
-    "message": "Use Tab to switch commands. Type '?' to see available commands"
+  "ui/legacy/components/quick_open/QuickOpen.ts | typeToSeeAvailableCommands": {
+    "message": "Type '?' to see available commands"
   },
   "ui/legacy/components/source_frame/FontView.ts | font": {
     "message": "Font"

package/front_end/core/i18n/locales/en-XL.json

@@ -11912,8 +11912,8 @@
   "ui/legacy/components/quick_open/QuickInput.ts | pressEnterToConfirmOrEscapeTo": {
     "message": "{PH1} (P̂ŕêśŝ 'Én̂t́êŕ' t̂ó ĉón̂f́îŕm̂ ór̂ 'Éŝćâṕê' t́ô ćâńĉél̂.)"
   },
-  "ui/legacy/components/quick_open/QuickOpen.ts | useTabToSwitchCommandsTypeToSeeAvailableCommands": {
-    "message": "Ûśê T́âb́ t̂ó ŝẃît́ĉh́ ĉóm̂ḿâńd̂ś. T̂ýp̂é '?' t̂ó ŝéê áv̂áîĺâb́l̂é ĉóm̂ḿâńd̂ś"
+  "ui/legacy/components/quick_open/QuickOpen.ts | typeToSeeAvailableCommands": {
+    "message": "T̂ýp̂é '?' t̂ó ŝéê áv̂áîĺâb́l̂é ĉóm̂ḿâńd̂ś"
   },
   "ui/legacy/components/source_frame/FontView.ts | font": {
     "message": "F̂ón̂t́"

package/front_end/models/bindings/DebuggerWorkspaceBinding.ts

@@ -120,6 +120,12 @@ export class DebuggerWorkspaceBinding implements SDK.TargetManager.SDKModelObser
     if (!compilerMapping) {
       return [];
     }
+    if (mode === SDK.DebuggerModel.StepMode.StepOut) {
+      // We should actually return the source range for the entire function
+      // to skip over. Since we don't have that, we return an empty range
+      // instead, to signal that we should perform a regular step-out.
+      return [];
+    }
     ranges = compilerMapping.getLocationRangesForSameSourceLocation(rawLocation);
     ranges = ranges.filter(range => contained(rawLocation, range));
     return ranges;

package/front_end/panels/console/ConsoleFormat.ts

@@ -4,47 +4,9 @@
 
 import type * as SDK from '../../core/sdk/sdk.js';
 
-// TODO(crbug/1282837): This is too naive and doesn't support
-// most (anticipated) uses of the ANSI color sequences (i.e.
-// setting both foreground and background color).
-const ANSI_COLOR_CODES = new Map([
-  // Foreground codes
-  [30, 'color:black'],
-  [31, 'color:red'],
-  [32, 'color:green'],
-  [33, 'color:yellow'],
-  [34, 'color:blue'],
-  [35, 'color:magenta'],
-  [36, 'color:cyan'],
-  [37, 'color:lightGray'],
-  [39, 'color:default'],
-  [90, 'color:darkGray'],
-  [91, 'color:lightRed'],
-  [92, 'color:lightGreen'],
-  [93, 'color:lightYellow'],
-  [94, 'color:lightBlue'],
-  [95, 'color:lightMagenta'],
-  [96, 'color:lightCyan'],
-  [97, 'color:white'],
-  // Background codes
-  [40, 'background:black'],
-  [41, 'background:red'],
-  [42, 'background:green'],
-  [43, 'background:yellow'],
-  [44, 'background:blue'],
-  [45, 'background:magenta'],
-  [46, 'background:cyan'],
-  [47, 'background:lightGray'],
-  [49, 'background:default'],
-  [100, 'background:darkGray'],
-  [101, 'background:lightRed'],
-  [102, 'background:lightGreen'],
-  [103, 'background:lightYellow'],
-  [104, 'background:lightBlue'],
-  [105, 'background:lightMagenta'],
-  [106, 'background:lightCyan'],
-  [107, 'background:white'],
-]);
+// 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'];
 
 export type FormatToken = {
   type: 'generic'|'optimal',
@@ -71,6 +33,23 @@ export const format = (fmt: string, args: SDK.RemoteObject.RemoteObject[]): {
 } => {
   const tokens: FormatToken[] = [];
 
+  // Current maintained style for ANSI color codes.
+  const currentStyle = new Map<string, string>();
+  function addTextDecoration(value: string): void {
+    const textDecoration = currentStyle.get('text-decoration') ?? '';
+    if (!textDecoration.includes(value)) {
+      currentStyle.set('text-decoration', `${textDecoration} ${value}`);
+    }
+  }
+  function removeTextDecoration(value: string): void {
+    const textDecoration = currentStyle.get('text-decoration')?.replace(` ${value}`, '');
+    if (textDecoration) {
+      currentStyle.set('text-decoration', textDecoration);
+    } else {
+      currentStyle.delete('text-decoration');
+    }
+  }
+
   function addStringToken(value: string): void {
     if (!value) {
       return;
@@ -83,7 +62,7 @@ export const format = (fmt: string, args: SDK.RemoteObject.RemoteObject[]): {
   }
 
   let argIndex = 0;
-  const re = /%([%_Oocsdfi])|\x1B\[(\d+)m/;
+  const re = /%([%_Oocsdfi])|\x1B\[([\d;]*)m/;
   for (let match = re.exec(fmt); match !== null; match = re.exec(fmt)) {
     addStringToken(match.input.substring(0, match.index));
     let substitution: number|string|undefined = undefined;
@@ -134,12 +113,75 @@ export const format = (fmt: string, args: SDK.RemoteObject.RemoteObject[]): {
         }
         break;
       case undefined: {
-        const value = ANSI_COLOR_CODES.get(parseInt(match[2], 10));
-        if (value !== undefined) {
-          const type = 'style';
-          tokens.push({type, value});
-          substitution = '';
+        const codes = (match[2] || '0').split(';').map(code => code ? parseInt(code, 10) : 0);
+        while (codes.length) {
+          const code = codes.shift() as number;
+          switch (code) {
+            case 0:
+              currentStyle.clear();
+              break;
+            case 1:
+              currentStyle.set('font-weight', 'bold');
+              break;
+            case 2:
+              currentStyle.set('font-weight', 'lighter');
+              break;
+            case 3:
+              currentStyle.set('font-style', 'italic');
+              break;
+            case 4:
+              addTextDecoration('underline');
+              break;
+            case 9:
+              addTextDecoration('line-through');
+              break;
+            case 22:
+              currentStyle.delete('font-weight');
+              break;
+            case 23:
+              currentStyle.delete('font-style');
+              break;
+            case 24:
+              removeTextDecoration('underline');
+              break;
+            case 29:
+              removeTextDecoration('line-through');
+              break;
+            case 38:
+            case 48:
+              if (codes.shift() === 2) {
+                const r = codes.shift() ?? 0, g = codes.shift() ?? 0, b = codes.shift() ?? 0;
+                currentStyle.set(code === 38 ? 'color' : 'background', `rgb(${r},${g},${b})`);
+              }
+              break;
+            case 39:
+            case 49:
+              currentStyle.delete(code === 39 ? 'color' : 'background');
+              break;
+            case 53:
+              addTextDecoration('overline');
+              break;
+            case 55:
+              removeTextDecoration('overline');
+              break;
+            default: {
+              const color = ANSI_COLORS[code - 30] ?? ANSI_BRIGHT_COLORS[code - 90];
+              if (color !== undefined) {
+                currentStyle.set('color', color);
+              } else {
+                const background = ANSI_COLORS[code - 40] ?? ANSI_BRIGHT_COLORS[code - 100];
+                if (background !== undefined) {
+                  currentStyle.set('background', background);
+                }
+              }
+              break;
+            }
+          }
         }
+        const value = [...currentStyle.entries()].map(([key, val]) => `${key}:${val.trimStart()}`).join(';');
+        const type = 'style';
+        tokens.push({type, value});
+        substitution = '';
         break;
       }
     }

package/front_end/panels/console/consoleView.css

@@ -375,6 +375,10 @@
   flex-shrink: 0;
 }
 
+.console-message-text .object-value-node {
+  display: inline-block;
+}
+
 .console-message-text .object-value-string,
 .console-message-text .object-value-regexp,
 .console-message-text .object-value-symbol {

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -1334,7 +1334,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     }
 
     /** Keep it in sync with elementsTreeOutline.css **/
-    return 12 * (depth - 2) + (this.isExpandable() ? 1 : 12);
+    return 12 * (depth - 2) + (this.isExpandable() && this.isCollapsible() ? 1 : 12);
   }
 
   updateDecorations(): void {

package/front_end/panels/elements/elementsTreeOutline.css

@@ -34,7 +34,7 @@
 }
 
 .elements-disclosure li {
-  /** Keep margin-left & padding-left in sync with ElementsTreeElements.updateDecorators **/
+  /** Keep margin-left & padding-left in sync with ElementsTreeElements.updateDecorations **/
   padding: 1px 0 0 14px;
   margin-left: -2px;
   word-break: normal;
@@ -44,8 +44,8 @@
   min-width: 200px;
 }
 
-.elements-disclosure li.parent {
-  /** Keep it in sync with ElementsTreeElements.updateDecorators **/
+.elements-disclosure li.parent:not(.always-parent) {
+  /** Keep it in sync with ElementsTreeElements.updateDecorations **/
   margin-left: -13px;
 }
 
@@ -62,7 +62,7 @@
   opacity: 60%;
 }
 
-.elements-disclosure li.parent::before {
+.elements-disclosure li.parent:not(.always-parent)::before {
   box-sizing: border-box;
   user-select: none;
   -webkit-mask-image: var(--image-file-treeoutlineTriangles);
@@ -79,10 +79,6 @@
   -webkit-mask-position: -16px 0;
 }
 
-.elements-disclosure li.always-parent::before {
-  visibility: hidden;
-}
-
 .elements-disclosure li .selection {
   display: none;
   z-index: -1;
@@ -126,7 +122,7 @@
 
 .elements-disclosure ol {
   list-style-type: none;
-  /** Keep it in sync with ElementsTreeElements.updateDecorators **/
+  /** Keep it in sync with ElementsTreeElements.updateDecorations **/
   padding-inline-start: 12px;
   margin: 0;
 }

package/front_end/panels/profiler/HeapTimelineOverview.ts

@@ -242,7 +242,7 @@ export class HeapTimelineOverview extends Common.ObjectWrapper.eventMixin<EventT
     const maxIndex =
         Platform.ArrayUtilities.upperBound(timestamps, timeRight, Platform.ArrayUtilities.DEFAULT_COMPARATOR);
     let size = 0;
-    for (let i = minIndex; i <= maxIndex; ++i) {
+    for (let i = minIndex; i < maxIndex; ++i) {
       size += sizes[i];
     }
     const minId = minIndex > 0 ? ids[minIndex - 1] : 0;

package/front_end/panels/sources/SourcesPanel.ts

@@ -293,7 +293,7 @@ export class SourcesPanel extends UI.Panel.Panel implements UI.ContextMenu.Provi
     Extensions.ExtensionServer.ExtensionServer.instance().addEventListener(
         Extensions.ExtensionServer.Events.SidebarPaneAdded, this.extensionSidebarPaneAdded, this);
     SDK.TargetManager.TargetManager.instance().observeTargets(this);
-    this.lastModificationTime = window.performance.now();
+    this.lastModificationTime = -Infinity;
   }
 
   static instance(opts: {

package/front_end/ui/legacy/Treeoutline.ts

@@ -845,6 +845,10 @@ export class TreeElement {
     }
   }
 
+  isCollapsible(): boolean {
+    return this.collapsible;
+  }
+
   setCollapsible(collapsible: boolean): void {
     if (this.collapsible === collapsible) {
       return;

package/front_end/ui/legacy/components/object_ui/objectValue.css

@@ -49,7 +49,7 @@
   position: relative;
   vertical-align: baseline;
   color: var(--color-syntax-7);
-  display: inline-block;
+  white-space: nowrap;
 }
 
 .object-value-with-memory-icon {

package/front_end/ui/legacy/components/quick_open/FilteredListWidget.ts

@@ -510,6 +510,10 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
         this.onEnter(keyboardEvent);
         return;
       case Platform.KeyboardUtilities.TAB_KEY:
+        if (keyboardEvent.shiftKey) {
+          handled = this.list.selectPreviousItem(true, false);
+          break;
+        }
         handled = this.tabKeyPressed();
         break;
       case Platform.KeyboardUtilities.ArrowKey.UP:

package/front_end/ui/legacy/components/quick_open/QuickOpen.ts

@@ -12,7 +12,7 @@ const UIStrings = {
   /**
   * @description Text of the hint shows under Quick Open input box
   */
-  useTabToSwitchCommandsTypeToSeeAvailableCommands: 'Use Tab to switch commands. Type \'?\' to see available commands',
+  typeToSeeAvailableCommands: 'Type \'?\' to see available commands',
 };
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/quick_open/QuickOpen.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -43,7 +43,7 @@ export class QuickOpenImpl {
     const quickOpen = new this();
     const filteredListWidget = new FilteredListWidget(null, history, quickOpen.queryChanged.bind(quickOpen));
     quickOpen.filteredListWidget = filteredListWidget;
-    filteredListWidget.setHintElement(i18nString(UIStrings.useTabToSwitchCommandsTypeToSeeAvailableCommands));
+    filteredListWidget.setHintElement(i18nString(UIStrings.typeToSeeAvailableCommands));
     filteredListWidget.showAsDialog();
     filteredListWidget.setQuery(query);
   }

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.954271"
+  "version": "1.0.954777"
 }