chrome-devtools-frontend 1.0.1524741 → 1.0.1526203

package/front_end/ui/components/buttons/Button.ts

@@ -63,6 +63,10 @@ interface ButtonState {
   jslogContext?: string;
   longClickable?: boolean;
   inverseColorTheme?: boolean;
+  /**
+   * Sets aria-label on the internal <button> element.
+   */
+  accessibleLabel?: string;
 }
 
 interface CommonButtonData {
@@ -84,6 +88,10 @@ interface CommonButtonData {
   jslogContext?: string;
   longClickable?: boolean;
   inverseColorTheme?: boolean;
+  /**
+   * Sets aria-label on the internal <button> element.
+   */
+  accessibleLabel?: string;
 }
 
 export type ButtonData = CommonButtonData&(|{
@@ -143,6 +151,9 @@ export class Button extends HTMLElement {
     if ('size' in data && data.size) {
       this.#props.size = data.size;
     }
+    if (data.accessibleLabel) {
+      this.#props.accessibleLabel = data.accessibleLabel;
+    }
 
     this.#props.active = Boolean(data.active);
     this.#props.spinner = Boolean('spinner' in data ? data.spinner : false);
@@ -187,6 +198,11 @@ export class Button extends HTMLElement {
     this.#render();
   }
 
+  set accessibleLabel(label: string) {
+    this.#props.accessibleLabel = label;
+    this.#render();
+  }
+
   set reducedFocusRing(reducedFocusRing: boolean) {
     this.#props.reducedFocusRing = reducedFocusRing;
     this.#render();
@@ -357,6 +373,7 @@ export class Button extends HTMLElement {
                 .disabled=${this.#props.disabled}
                 class=${classMap(classes)}
                 aria-pressed=${ifDefined(this.#props.toggled)}
+                aria-label=${ifDefined(this.#props.accessibleLabel)}
                 jslog=${ifDefined(jslog)}>
           ${hasIcon ? html`
             <devtools-icon name=${ifDefined(this.#props.toggled ? this.#props.toggledIconName : this.#props.iconName)}>

package/front_end/ui/components/docs/linear_memory_inspector/basic.ts

@@ -4,11 +4,16 @@
 
 import * as LinearMemoryInspectorComponents from '../../../../panels/linear_memory_inspector/components/components.js';
 import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';
+import * as UI from '../../../legacy/legacy.js';
+import * as Lit from '../../../lit/lit.js';
 import * as ComponentHelpers from '../../helpers/helpers.js';
 
 await ComponentHelpers.ComponentServerSetup.setup();
 await FrontendHelpers.initializeGlobalVars();
 
+const {render, html} = Lit;
+const {widgetConfig} = UI.Widget;
+
 const array = [];
 const string = 'Hello this is a string from the memory buffer!';
 
@@ -21,12 +26,19 @@ for (let i = -1000; i < 1000; ++i) {
 }
 
 const memory = new Uint8Array(array);
-const memoryInspector = new LinearMemoryInspectorComponents.LinearMemoryInspector.LinearMemoryInspector();
-document.getElementById('container')?.appendChild(memoryInspector);
-
-memoryInspector.data = {
-  memory,
-  address: 0,
-  memoryOffset: 0,
-  outerMemoryLength: memory.length,
-};
+
+const container = document.getElementById('container');
+if (container) {
+  render(
+      html`
+    <devtools-widget .widgetConfig=${
+          widgetConfig(LinearMemoryInspectorComponents.LinearMemoryInspector.LinearMemoryInspector, {
+            memory,
+            address: 0,
+            memoryOffset: 0,
+            outerMemoryLength: memory.length,
+          })}>
+    </devtools-widget>
+  `,
+      container);
+}

package/front_end/ui/components/highlighting/HighlightManager.ts

@@ -10,7 +10,15 @@ export class RangeWalker {
   #eof: boolean;
 
   constructor(readonly root: Node) {
-    this.#treeWalker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+    const nodeFilter = {
+      acceptNode(node: Node): number {
+        if (['STYLE', 'SCRIPT'].includes(node.parentNode?.nodeName ?? '')) {
+          return NodeFilter.FILTER_REJECT;
+        }
+        return NodeFilter.FILTER_ACCEPT;
+      },
+    };
+    this.#treeWalker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, nodeFilter);
     this.#eof = !this.#treeWalker.firstChild();
   }
 
@@ -57,6 +65,18 @@ export class RangeWalker {
     range.setEnd(endNode, offsetInEndNode);
     return range;
   }
+
+  goToTextNode(node: Text): void {
+    while (this.#treeWalker.currentNode !== node) {
+      if (!this.#next()) {
+        return;
+      }
+    }
+  }
+
+  get offset(): number {
+    return this.#offset;
+  }
 }
 
 export const HIGHLIGHT_REGISTRY = 'highlighted-search-result';

package/front_end/ui/components/tooltips/Tooltip.ts

@@ -479,12 +479,23 @@ export class Tooltip extends HTMLElement {
     }
   };
 
+  #globalKeyDown = (event: KeyboardEvent): void => {
+    if (!this.open || event.key !== 'Escape') {
+      return;
+    }
+
+    this.#openedViaHotkey = false;
+    this.toggle();
+    event.consume(true);
+  };
+
   #keyDown = (event: KeyboardEvent): void => {
-    // There are two scenarios when we care about keydown:
-    // 1. The tooltip is open, and the user presses ESC
-    // 2. "use-hotkey" is set, and the user presses Alt+ArrowDown.
-    const shouldToggleVisibility =
-        (event.key === 'Escape' && this.open) || (this.useHotkey && event.altKey && event.key === 'ArrowDown');
+    // This supports the scenario where the user uses Alt+ArrowDown in hotkey
+    // mode to toggle the visibility.
+    // Note that the "Escape to close" scenario is handled in the global
+    // keydown function so we capture Escape presses even if the tooltip does
+    // not have focus.
+    const shouldToggleVisibility = (this.useHotkey && event.altKey && event.key === 'ArrowDown');
 
     if (shouldToggleVisibility) {
       this.#openedViaHotkey = !this.open;
@@ -494,6 +505,7 @@ export class Tooltip extends HTMLElement {
   };
 
   #registerEventListeners(): void {
+    document.body.addEventListener('keydown', this.#globalKeyDown);
     if (this.#anchor) {
       // We bind the keydown listener regardless of if use-hotkey is enabled
       // as we always want to support ESC to close.
@@ -525,6 +537,11 @@ export class Tooltip extends HTMLElement {
     if (this.#timeout) {
       window.clearTimeout(this.#timeout);
     }
+
+    // Should always exist when this component is used, but in test
+    // environments on Chromium this isn't always the case, hence the body? check.
+    document.body?.removeEventListener('keydown', this.#globalKeyDown);
+
     if (this.#anchor) {
       this.#anchor.removeEventListener('click', this.toggle);
       this.#anchor.removeEventListener('mouseenter', this.showTooltip);

package/front_end/ui/legacy/SearchableView.ts

@@ -139,7 +139,7 @@ function createClearButton(jslogContext: string): Buttons.Button.Button {
   return button;
 }
 export class SearchableView extends VBox {
-  private searchProvider: Searchable;
+  protected searchProvider: Searchable;
   private replaceProvider: Replaceable|null;
   // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
   // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/front_end/ui/legacy/components/data_grid/DataGridElement.ts

@@ -5,10 +5,17 @@
 
 import type * as Platform from '../../../../core/platform/platform.js';
 import type * as TextUtils from '../../../../models/text_utils/text_utils.js';
-import * as UI from '../../../../ui/legacy/legacy.js';
+import * as UI from '../../legacy.js';
 
 import dataGridStyles from './dataGrid.css.js';
-import {Align, type ColumnDescriptor, DataType, Events as DataGridEvents} from './DataGrid.js';
+import {
+  Align,
+  type ColumnDescriptor,
+  DataType,
+  Events as DataGridEvents,
+  Order,
+  type ResizeMethod
+} from './DataGrid.js';
 import {SortableDataGrid, SortableDataGridNode} from './SortableDataGrid.js';
 
 const DUMMY_COLUMN_ID = 'dummy';  // SortableDataGrid.create requires at least one column.
@@ -36,12 +43,14 @@ const DUMMY_COLUMN_ID = 'dummy';  // SortableDataGrid.create requires at least o
  * Under the hood it uses SortableDataGrid, which extends ViewportDataGrid so only
  * visible rows are layed out and sorting is provided out of the box.
  *
- * @property filters
- * @attribute striped
+ * @property filters Set of text filters to be applied to the data grid.
+ * @attribute inline If true, the data grid will render inline instead of taking a full container height.
+ * @attribute resize Column resize method, one of 'nearest' (default), 'first' or 'last'.
+ * @attribute striped If true, the data grid will have striped rows.
  * @attribute displayName
  */
 class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate {
-  static readonly observedAttributes = ['striped', 'name', 'inline'];
+  static readonly observedAttributes = ['striped', 'name', 'inline', 'resize'];
 
   #dataGrid = SortableDataGrid.create([DUMMY_COLUMN_ID], [], '') as SortableDataGrid<DataGridElementNode>;
   #resizeObserver = new ResizeObserver(() => {
@@ -69,6 +78,9 @@ class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate {
         e => (e.data as DataGridElementNode).configElement.dispatchEvent(new CustomEvent('select')));
     this.#dataGrid.addEventListener(
         DataGridEvents.DESELECTED_NODE, () => this.dispatchEvent(new CustomEvent('deselect')));
+    this.#dataGrid.addEventListener(
+        DataGridEvents.OPENED_NODE,
+        e => (e.data as DataGridElementNode).configElement.dispatchEvent(new CustomEvent('open')));
     this.#dataGrid.addEventListener(DataGridEvents.SORTING_CHANGED, () => this.dispatchEvent(new CustomEvent('sort', {
       detail: {columnId: this.#dataGrid.sortColumnId(), ascending: this.#dataGrid.isSortOrderAscending()}
     })));
@@ -111,6 +123,9 @@ class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate {
       case 'inline':
         this.#dataGrid.renderInline();
         break;
+      case 'resize':
+        this.#dataGrid.setResizeMethod(newValue as ResizeMethod);
+        break;
     }
   }
 
@@ -138,6 +153,14 @@ class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate {
     return this.getAttribute('name');
   }
 
+  set resizeMethod(resizeMethod: ResizeMethod) {
+    this.setAttribute('resize', resizeMethod);
+  }
+
+  get resizeMethod(): ResizeMethod {
+    return this.getAttribute('resize') as ResizeMethod;
+  }
+
   set filters(filters: TextUtils.TextUtils.ParsedFilter[]) {
     this.#dataGrid.setFilters(filters);
     this.#dataGrid.element.setAttribute('aria-rowcount', String(this.#dataGrid.getNumberOfRows()));
@@ -178,11 +201,15 @@ class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate {
       if (editable) {
         hasEditableColumn = true;
       }
+      const sort = column.getAttribute('sort') === 'descending' ? Order.Descending :
+          column.getAttribute('sort') === 'ascending'           ? Order.Ascending :
+                                                                  undefined;
       const columnDescriptor = {
         id,
         title: title as Platform.UIString.LocalizedString,
         titleDOMFragment,
         sortable,
+        sort,
         fixedWidth,
         width,
         align,
@@ -235,6 +262,18 @@ class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate {
         .filter(node => node.querySelector('td') && !hasBooleanAttribute(node, 'placeholder'));
   }
 
+  #getStyleElements(nodes: NodeList): HTMLElement[] {
+    return [...nodes].flatMap(node => {
+      if (node instanceof HTMLStyleElement) {
+        return [node];
+      }
+      if (node instanceof HTMLElement) {
+        return [...node.querySelectorAll<HTMLStyleElement>('style')];
+      }
+      return [] as HTMLElement[];
+    });
+  }
+
   #findNextExistingNode(element: Element): DataGridElementNode|null {
     for (let e = element.nextElementSibling; e; e = e.nextElementSibling) {
       const nextNode = DataGridElementNode.get(e);
@@ -270,6 +309,9 @@ class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate {
         node.setHighlighted(true);
       }
     }
+    for (const element of this.#getStyleElements(nodes)) {
+      this.#shadowRoot.appendChild(element.cloneNode(true));
+    }
   }
 
   override removeNodes(nodes: NodeList): void {
@@ -304,6 +346,7 @@ class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate {
         dataGridNode.refresh();
       }
     }
+    this.#dataGrid.dispatchEventToListeners(DataGridEvents.SORTING_CHANGED);
   }
 
   #updateCreationNode(): void {

package/front_end/ui/legacy/components/perf_ui/FlameChart.ts

@@ -23,7 +23,7 @@ import {TimelineGrid} from './TimelineGrid.js';
 /**
  * Set as the `details` value on the fake context menu event we dispatch to
  * trigger a context menu on an event on a keyboard space key press.
- * {@see onContextMenu} for more details and explanation.
+ * {@link FlameChart.onContextMenu} for more details and explanation.
  */
 const KEYBOARD_FAKED_CONTEXT_MENU_DETAIL = -1;
 
@@ -2347,7 +2347,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
   }
 
   /**
-   * Draws decorations onto events. {@see FlameChartDecoration}.
+   * Draws decorations onto events. {@link FlameChartDecoration}.
    */
   #drawDecorations(context: CanvasRenderingContext2D, timelineData: FlameChartTimelineData, indexes: number[]): void {
     const {entryTotalTimes, entryStartTimes, entryLevels} = timelineData;

package/front_end/ui/legacy/components/source_frame/JSONView.ts

@@ -20,6 +20,7 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/source_frame/JSONView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
 export class JSONView extends UI.Widget.VBox implements UI.SearchableView.Searchable {
   private initialized: boolean;
   private readonly parsedJSON: ParsedJSON;
@@ -67,6 +68,10 @@ export class JSONView extends UI.Widget.VBox implements UI.SearchableView.Search
     return searchableView;
   }
 
+  setSearchableView(searchableView: UI.SearchableView.SearchableView): void {
+    this.searchableView = searchableView;
+  }
+
   private static parseJSON(text: string|null): Promise<ParsedJSON|null> {
     let returnObj: ParsedJSON<string>|null = null;
     if (text) {
@@ -280,3 +285,26 @@ export class ParsedJSON<T extends unknown = unknown> {
     this.suffix = suffix;
   }
 }
+
+export class SearchableJsonView extends UI.SearchableView.SearchableView {
+  #jsonView: JSONView;
+
+  constructor(element: HTMLElement) {
+    const jsonView = new JSONView(new ParsedJSON('', '', ''));
+    super(jsonView, null, undefined, element);
+    this.#jsonView = jsonView;
+    this.setPlaceholder(i18nString(UIStrings.find));
+    jsonView.setSearchableView(this);
+    jsonView.show(this.element);
+    jsonView.element.tabIndex = 0;
+  }
+
+  set jsonObject(obj: Object) {
+    const jsonView = new JSONView(new ParsedJSON(obj, '', ''));
+    this.#jsonView.detach();
+    this.#jsonView = jsonView;
+    this.searchProvider = jsonView;
+    jsonView.show(this.element);
+    this.requestUpdate();
+  }
+}

package/front_end/ui/legacy/components/source_frame/StreamingContentHexView.ts

@@ -16,20 +16,22 @@ const MEMORY_TRANSFER_MIN_CHUNK_SIZE = 1000;
  * known upfront.
  */
 class LinearMemoryInspectorView extends UI.Widget.VBox {
-  #memory = new Uint8Array([0]);
+  #memory: Uint8Array = new Uint8Array([0]);
   #address = 0;
   #inspector = new LinearMemoryInspectorComponents.LinearMemoryInspector.LinearMemoryInspector();
 
   constructor() {
     super();
-    this.#inspector.addEventListener(
+    this.#inspector.contentElement.addEventListener(
         LinearMemoryInspectorComponents.LinearMemoryInspector.MemoryRequestEvent.eventName,
-        this.#memoryRequested.bind(this));
-    this.#inspector.addEventListener(
-        LinearMemoryInspectorComponents.LinearMemoryInspector.AddressChangedEvent.eventName, event => {
+        (event: LinearMemoryInspectorComponents.LinearMemoryInspector.MemoryRequestEvent) =>
+            this.#memoryRequested(event));
+    this.#inspector.contentElement.addEventListener(
+        LinearMemoryInspectorComponents.LinearMemoryInspector.AddressChangedEvent.eventName,
+        (event: LinearMemoryInspectorComponents.LinearMemoryInspector.AddressChangedEvent) => {
           this.#address = event.data;
         });
-    this.contentElement.appendChild(this.#inspector);
+    this.#inspector.show(this.contentElement);
   }
 
   override wasShown(): void {
@@ -51,13 +53,11 @@ class LinearMemoryInspectorView extends UI.Widget.VBox {
     const memoryChunkStart = Math.max(0, this.#address - MEMORY_TRANSFER_MIN_CHUNK_SIZE / 2);
     const memoryChunkEnd = memoryChunkStart + MEMORY_TRANSFER_MIN_CHUNK_SIZE;
     const memory = this.#memory.slice(memoryChunkStart, memoryChunkEnd);
-    this.#inspector.data = {
-      memory,
-      address: this.#address,
-      memoryOffset: memoryChunkStart,
-      outerMemoryLength: this.#memory.length,
-      hideValueInspector: true,
-    };
+    this.#inspector.memory = memory;
+    this.#inspector.address = this.#address;
+    this.#inspector.memoryOffset = memoryChunkStart;
+    this.#inspector.outerMemoryLength = this.#memory.length;
+    this.#inspector.hideValueInspector = true;
   }
 
   #memoryRequested(event: LinearMemoryInspectorComponents.LinearMemoryInspector.MemoryRequestEvent): void {
@@ -80,13 +80,11 @@ class LinearMemoryInspectorView extends UI.Widget.VBox {
     const chunkEnd = Math.max(end, start + MEMORY_TRANSFER_MIN_CHUNK_SIZE);
     const memory = this.#memory.slice(start, chunkEnd);
 
-    this.#inspector.data = {
-      memory,
-      address,
-      memoryOffset: start,
-      outerMemoryLength: this.#memory.length,
-      hideValueInspector: true,
-    };
+    this.#inspector.memory = memory;
+    this.#inspector.address = address;
+    this.#inspector.memoryOffset = start;
+    this.#inspector.outerMemoryLength = this.#memory.length;
+    this.#inspector.hideValueInspector = true;
   }
 }
 

package/package.json

@@ -36,10 +36,10 @@
   "devDependencies": {
     "@rollup/plugin-node-resolve": "16.0.1",
     "@rollup/plugin-terser": "0.4.4",
-    "@rollup/wasm-node": "4.46.2",
-    "@stylistic/eslint-plugin": "5.2.3",
+    "@rollup/wasm-node": "4.52.1",
+    "@stylistic/eslint-plugin": "5.4.0",
     "@types/chai": "4.3.15",
-    "@types/codemirror": "5.60.15",
+    "@types/codemirror": "5.60.16",
     "@types/emscripten": "1.39.4",
     "@types/estree": "1.0.8",
     "@types/filesystem": "0.0.36",
@@ -51,20 +51,20 @@
     "@types/webidl2": "24.4.3",
     "@types/yargs": "17.0.33",
     "@types/yargs-unparser": "2.0.3",
-    "@typescript-eslint/rule-tester": "8.39.1",
-    "@typescript-eslint/utils": "8.39.1",
+    "@typescript-eslint/rule-tester": "8.45.0",
+    "@typescript-eslint/utils": "8.45.0",
     "@web/rollup-plugin-import-meta-assets": "2.3.0",
     "chai": "4.3.4",
-    "cssnano": "7.1.0",
+    "cssnano": "7.1.1",
     "cssnano-preset-lite": "4.0.4",
     "esbuild": "0.25.1",
-    "eslint": "9.33.0",
+    "eslint": "9.36.0",
     "eslint-plugin-eslint-plugin": "7.0.0",
     "eslint-plugin-import": "2.32.0",
-    "eslint-plugin-jsdoc": "51.3.4",
+    "eslint-plugin-jsdoc": "60.5.0",
     "eslint-plugin-mocha": "10.5.0",
     "glob": "7.1.7",
-    "globals": "16.3.0",
+    "globals": "16.4.0",
     "js-yaml": "4.1.0",
     "karma": "6.4.4",
     "karma-chai": "0.1.0",
@@ -77,30 +77,30 @@
     "karma-spec-reporter": "0.0.36",
     "license-checker": "25.0.1",
     "lit-analyzer": "2.0.3",
-    "mocha": "11.7.1",
-    "ora": "8.2.0",
+    "mocha": "11.7.2",
+    "ora": "9.0.0",
     "postcss": "8.5.6",
-    "puppeteer-core": "24.14.0",
-    "rollup-plugin-sourcemaps2": "0.5.3",
+    "puppeteer-core": "24.22.3",
+    "rollup-plugin-sourcemaps2": "0.5.4",
     "sinon": "21.0.0",
     "source-map-support": "0.5.21",
-    "stylelint": "16.23.1",
+    "stylelint": "16.24.0",
     "stylelint-config-standard": "39.0.0",
     "svgo": "3.3.2",
-    "terser": "5.43.1",
+    "terser": "5.44.0",
     "ts-lit-plugin": "2.0.2",
     "typescript": "5.9.2",
-    "typescript-eslint": "8.39.1",
-    "uuid": "11.1.0",
+    "typescript-eslint": "8.45.0",
+    "uuid": "13.0.0",
     "webidl2": "24.5.0",
     "yargs": "17.7.2"
   },
   "overrides": {
-    "@typescript-eslint/types": "8.39.1",
-    "eslint": {
-      "@eslint/plugin-kit": "0.3.4",
-      "@eslint/core": "0.15.1"
+    "@typescript-eslint/types": "8.45.0",
+    "@es-joy/jsdoccomment": "0.64.0",
+    "stylelint": {
+      "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1524741"
+  "version": "1.0.1526203"
 }