chrome-devtools-frontend 1.0.1525561 → 1.0.1526630

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();
@@ -354,9 +370,10 @@ export class Button extends HTMLElement {
       html`
         <style>${buttonStyles}</style>
         <button title=${ifDefined(this.#props.title)}
-                .disabled=${this.#props.disabled}
+                ?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/legacy/EmptyWidget.ts

@@ -26,6 +26,7 @@ interface EmptyWidgetInput {
   header: string;
   text: string;
   link?: Platform.DevToolsPath.UrlString|undefined|null;
+  extraElements?: Element[];
 }
 
 interface EmptyWidgetOutput {
@@ -47,6 +48,7 @@ const DEFAULT_VIEW: View = (input, output, target) => {
         ${input.link ? XLink.create(
             input.link, i18nString(UIStrings.learnMore), undefined, undefined, 'learn-more') : ''}
       </div>
+      ${input.extraElements}
     </div>`, target);
   // clang-format on
 };
@@ -56,6 +58,8 @@ export class EmptyWidget extends VBox {
   #text: string;
   #link: Platform.DevToolsPath.UrlString|undefined|null;
   #view: View;
+  #firstUpdate = true;
+  #extraElements: Element[] = [];
 
   constructor(headerOrElement: string|HTMLElement, text = '', element?: HTMLElement, view = DEFAULT_VIEW) {
     const header = typeof headerOrElement === 'string' ? headerOrElement : '';
@@ -86,8 +90,14 @@ export class EmptyWidget extends VBox {
   }
 
   override performUpdate(): void {
+    if (this.#firstUpdate) {
+      this.#extraElements = [...this.element.children];
+      this.#firstUpdate = false;
+    }
     const output = {contentElement: undefined};
-    this.#view({header: this.#header, text: this.#text, link: this.#link}, output, this.element);
+    this.#view(
+        {header: this.#header, text: this.#text, link: this.#link, extraElements: this.#extraElements}, output,
+        this.element);
     if (output.contentElement) {
       this.contentElement = output.contentElement;
     }

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/Toolbar.ts

@@ -94,7 +94,7 @@ export class Toolbar extends HTMLElement {
         if (element instanceof Buttons.Button.Button) {
           item = new ToolbarButton('', undefined, undefined, undefined, element);
         } else if (element instanceof ToolbarInputElement) {
-          item = element.item;
+          item = element.item as ToolbarItem;
         } else if (element instanceof HTMLSelectElement) {
           item = new ToolbarComboBox(null, element.title, undefined, undefined, element);
         } else {
@@ -833,11 +833,12 @@ export class ToolbarFilter extends ToolbarInput {
 }
 
 export class ToolbarInputElement extends HTMLElement {
-  static observedAttributes = ['value'];
+  static observedAttributes = ['value', 'disabled'];
 
-  item!: ToolbarInput;
+  item?: ToolbarInput;
   datalist: HTMLDataListElement|null = null;
   value: string|undefined = undefined;
+  #disabled = false;
 
   connectedCallback(): void {
     if (this.item) {
@@ -866,6 +867,9 @@ export class ToolbarInputElement extends HTMLElement {
     if (this.value) {
       this.item.setValue(this.value);
     }
+    if (this.#disabled) {
+      this.item.setEnabled(false);
+    }
     this.item.addEventListener(ToolbarInput.Event.TEXT_CHANGED, event => {
       this.dispatchEvent(new CustomEvent('change', {detail: event.data}));
     });
@@ -875,7 +879,7 @@ export class ToolbarInputElement extends HTMLElement {
   }
 
   override focus(): void {
-    this.item.focus();
+    this.item?.focus();
   }
 
   async #onAutocomplete(expression: string, prefix: string, force?: boolean): Promise<Suggestion[]> {
@@ -894,8 +898,25 @@ export class ToolbarInputElement extends HTMLElement {
       } else {
         this.value = newValue;
       }
+    } else if (name === 'disabled') {
+      this.#disabled = typeof newValue === 'string';
+      if (this.item) {
+        this.item.setEnabled(!this.#disabled);
+      }
+    }
+  }
+
+  set disabled(disabled: boolean) {
+    if (disabled) {
+      this.setAttribute('disabled', '');
+    } else {
+      this.removeAttribute('disabled');
     }
   }
+
+  get disabled(): boolean {
+    return this.hasAttribute('disabled');
+  }
 }
 customElements.define('devtools-toolbar-input', ToolbarInputElement);
 

package/front_end/ui/legacy/UIUtils.ts

@@ -2135,6 +2135,7 @@ export function bindToAction(actionName: string): ReturnType<typeof Directives.r
   const action = ActionRegistry.instance().getAction(actionName);
 
   let setEnabled: (enabled: boolean) => void;
+  let toggled: () => void;
   function actionEnabledChanged(event: Common.EventTarget.EventTargetEvent<boolean>): void {
     setEnabled(event.data);
   }
@@ -2142,6 +2143,7 @@ export function bindToAction(actionName: string): ReturnType<typeof Directives.r
   return Directives.ref((e: Element|undefined) => {
     if (!e || !(e instanceof Buttons.Button.Button)) {
       action.removeEventListener(ActionRegistration.Events.ENABLED, actionEnabledChanged);
+      action.removeEventListener(ActionRegistration.Events.TOGGLED, toggled);
       return;
     }
 
@@ -2151,10 +2153,34 @@ export function bindToAction(actionName: string): ReturnType<typeof Directives.r
 
     action.addEventListener(ActionRegistration.Events.ENABLED, actionEnabledChanged);
 
+    const toggleable = action.toggleable();
+    if (toggleable) {
+      toggled = () => {
+        e.toggled = action.toggled();
+        if (action.title()) {
+          e.title = action.title();
+          Tooltip.installWithActionBinding(e, action.title(), action.id());
+        }
+      };
+      action.addEventListener(ActionRegistration.Events.TOGGLED, toggled);
+    }
     const title = action.title();
-    const iconName = action.icon();
+    const iconName = action.icon() ?? '';
     const jslogContext = action.id();
-    if (iconName) {
+    const toggledIconName = action.toggledIcon() ?? iconName;
+    const toggleType = action.toggleWithRedColor() ? Buttons.Button.ToggleType.RED : Buttons.Button.ToggleType.PRIMARY;
+    if (toggleable) {
+      e.data = {
+        jslogContext,
+        title,
+        variant: Buttons.Button.Variant.ICON_TOGGLE,
+        iconName,
+        toggledIconName,
+        toggleType,
+        toggled: action.toggled(),
+      };
+      toggled();
+    } else if (iconName) {
       e.data = {iconName, jslogContext, title, variant: Buttons.Button.Variant.ICON};
     } else {
       e.data = {jslogContext, title, variant: Buttons.Button.Variant.TEXT};

package/front_end/ui/legacy/Widget.ts

@@ -737,6 +737,11 @@ export class Widget {
       return;
     }
 
+    if (this.#shadowRoot?.delegatesFocus && this.contentElement.querySelector('[autofocus]')) {
+      this.element.focus();
+      return;
+    }
+
     const element = (this.#defaultFocusedElement as HTMLElement | null);
     if (element) {
       if (!element.hasFocus()) {

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,10 @@ class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate {
         node.setHighlighted(true);
       }
     }
+    for (const element of this.#getStyleElements(nodes)) {
+      this.#shadowRoot.appendChild(element.cloneNode(true));
+    }
+    this.#dataGrid.dispatchEventToListeners(DataGridEvents.SORTING_CHANGED);
   }
 
   override removeNodes(nodes: NodeList): 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

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable rulesdir/no-imperative-dom-api */
 
+import type * as Common from '../../../../core/common/common.js';
 import * as TextUtils from '../../../../models/text_utils/text_utils.js';
 import * as LinearMemoryInspectorComponents from '../../../../panels/linear_memory_inspector/components/components.js';
 import * as UI from '../../legacy.js';
@@ -22,13 +23,11 @@ class LinearMemoryInspectorView extends UI.Widget.VBox {
 
   constructor() {
     super();
-    this.#inspector.contentElement.addEventListener(
-        LinearMemoryInspectorComponents.LinearMemoryInspector.MemoryRequestEvent.eventName,
-        (event: LinearMemoryInspectorComponents.LinearMemoryInspector.MemoryRequestEvent) =>
-            this.#memoryRequested(event));
-    this.#inspector.contentElement.addEventListener(
-        LinearMemoryInspectorComponents.LinearMemoryInspector.AddressChangedEvent.eventName,
-        (event: LinearMemoryInspectorComponents.LinearMemoryInspector.AddressChangedEvent) => {
+    this.#inspector.addEventListener(
+        LinearMemoryInspectorComponents.LinearMemoryInspector.Events.MEMORY_REQUEST, this.#memoryRequested, this);
+    this.#inspector.addEventListener(
+        LinearMemoryInspectorComponents.LinearMemoryInspector.Events.ADDRESS_CHANGED,
+        (event: Common.EventTarget.EventTargetEvent<number>) => {
           this.#address = event.data;
         });
     this.#inspector.show(this.contentElement);
@@ -60,7 +59,7 @@ class LinearMemoryInspectorView extends UI.Widget.VBox {
     this.#inspector.hideValueInspector = true;
   }
 
-  #memoryRequested(event: LinearMemoryInspectorComponents.LinearMemoryInspector.MemoryRequestEvent): void {
+  #memoryRequested(event: Common.EventTarget.EventTargetEvent<{start: number, end: number, address: number}>): void {
     // TODO(szuend): The following lines are copied from `LinearMemoryInspectorController`. We can't reuse them
     // as depending on a module in `panels/` from a component is a layering violation.
 

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.1525561"
+  "version": "1.0.1526630"
 }