chrome-devtools-frontend 1.0.1525561 → 1.0.1526203

package/front_end/models/trace/insights/NetworkDependencyTree.ts

@@ -30,7 +30,7 @@ export const UIStrings = {
    * @description Description of an insight that recommends avoiding chaining critical requests.
    */
   description:
-      '[Avoid chaining critical requests](https://developer.chrome.com/docs/lighthouse/performance/critical-request-chains) by reducing the length of chains, reducing the download size of resources, or deferring the download of unnecessary resources to improve page load.',
+      '[Avoid chaining critical requests](https://developer.chrome.com/docs/performance/insights/network-dependency-tree) by reducing the length of chains, reducing the download size of resources, or deferring the download of unnecessary resources to improve page load.',
   /**
    * @description Description of the warning that recommends avoiding chaining critical requests.
    */
@@ -175,6 +175,7 @@ function finalize(partialModel: PartialInsightModel<NetworkDependencyTreeInsight
     strings: UIStrings,
     title: i18nString(UIStrings.title),
     description: i18nString(UIStrings.description),
+    docs: 'https://developer.chrome.com/docs/performance/insights/network-dependency-tree',
     category: InsightCategory.LCP,
     state: partialModel.fail ? 'fail' : 'pass',
     ...partialModel,

package/front_end/models/trace/insights/RenderBlocking.ts

@@ -29,7 +29,7 @@ export const UIStrings = {
    * @description Text to describe that there are requests blocking rendering, which may affect LCP.
    */
   description: 'Requests are blocking the page\'s initial render, which may delay LCP. ' +
-      '[Deferring or inlining](https://web.dev/learn/performance/understanding-the-critical-path#render-blocking_resources) ' +
+      '[Deferring or inlining](https://developer.chrome.com/docs/performance/insights/render-blocking) ' +
       'can move these network requests out of the critical path.',
   /**
    * @description Label to describe a network request (that happens to be render-blocking).
@@ -169,6 +169,7 @@ function finalize(partialModel: PartialInsightModel<RenderBlockingInsightModel>)
     strings: UIStrings,
     title: i18nString(UIStrings.title),
     description: i18nString(UIStrings.description),
+    docs: 'https://developer.chrome.com/docs/performance/insights/render-blocking',
     category: InsightCategory.LCP,
     state: partialModel.renderBlockingRequests.length > 0 ? 'fail' : 'pass',
     ...partialModel,

package/front_end/models/trace/insights/SlowCSSSelector.ts

@@ -27,7 +27,7 @@ export const UIStrings = {
    * @description Text to describe how to improve the performance of CSS selectors.
    */
   description:
-      'If Recalculate Style costs remain high, selector optimization can reduce them. [Optimize the selectors](https://developer.chrome.com/docs/devtools/performance/selector-stats) with both high elapsed time and high slow-path %. Simpler selectors, fewer selectors, a smaller DOM, and a shallower DOM will all reduce matching costs.',
+      'If Recalculate Style costs remain high, selector optimization can reduce them. [Optimize the selectors](https://developer.chrome.com/docs/performance/insights/slow-css-selector) with both high elapsed time and high slow-path %. Simpler selectors, fewer selectors, a smaller DOM, and a shallower DOM will all reduce matching costs.',
   /**
    * @description Column name for count of elements that the engine attempted to match against a style rule
    */
@@ -108,6 +108,7 @@ function finalize(partialModel: PartialInsightModel<SlowCSSSelectorInsightModel>
     strings: UIStrings,
     title: i18nString(UIStrings.title),
     description: i18nString(UIStrings.description),
+    docs: 'https://developer.chrome.com/docs/performance/insights/slow-css-selector',
     category: InsightCategory.ALL,
     state: partialModel.topSelectorElapsedMs && partialModel.topSelectorMatchAttempts ? 'informative' : 'pass',
     ...partialModel,

package/front_end/models/trace/insights/ThirdParties.ts

@@ -24,7 +24,7 @@ export const UIStrings = {
    * This is displayed after a user expands the section to see more. No character length limits.
    */
   description: '3rd party code can significantly impact load performance. ' +
-      '[Reduce and defer loading of 3rd party code](https://web.dev/articles/optimizing-content-efficiency-loading-third-party-javascript/) to prioritize your page\'s content.',
+      '[Reduce and defer loading of 3rd party code](https://developer.chrome.com/docs/performance/insights/third-parties) to prioritize your page\'s content.',
   /** Label for a table column that displays the name of a third-party provider. */
   columnThirdParty: '3rd party',
   /** Label for a column in a data table; entries will be the download size of a web resource in kilobytes. */
@@ -65,6 +65,7 @@ function finalize(partialModel: PartialInsightModel<ThirdPartiesInsightModel>):
     strings: UIStrings,
     title: i18nString(UIStrings.title),
     description: i18nString(UIStrings.description),
+    docs: 'https://developer.chrome.com/docs/performance/insights/third-parties',
     category: InsightCategory.ALL,
     state: partialModel.entitySummaries.find(summary => summary.entity !== partialModel.firstPartyEntity) ?
         'informative' :

package/front_end/models/trace/insights/Viewport.ts

@@ -24,7 +24,7 @@ export const UIStrings = {
    * @description Text to tell the user how a viewport meta element can improve performance. \xa0 is a non-breaking space
    */
   description:
-      'Tap interactions may be [delayed by up to 300\xA0ms](https://developer.chrome.com/blog/300ms-tap-delay-gone-away/) if the viewport is not optimized for mobile.',
+      'Tap interactions may be [delayed by up to 300\xA0ms](https://developer.chrome.com/docs/performance/insights/viewport) if the viewport is not optimized for mobile.',
   /**
    * @description Text for a label describing the portion of an interaction event that was delayed due to a bad mobile viewport.
    */
@@ -46,6 +46,7 @@ function finalize(partialModel: PartialInsightModel<ViewportInsightModel>): View
     strings: UIStrings,
     title: i18nString(UIStrings.title),
     description: i18nString(UIStrings.description),
+    docs: 'https://developer.chrome.com/docs/performance/insights/viewport',
     category: InsightCategory.INP,
     state: partialModel.mobileOptimized === false ? 'fail' : 'pass',
     ...partialModel,

package/front_end/models/trace/insights/types.ts

@@ -76,6 +76,7 @@ export type InsightModel<UIStrings extends Record<string, string> = Record<strin
       strings: UIStrings,
       title: Common.UIString.LocalizedString,
       description: Common.UIString.LocalizedString,
+      docs: string,
       category: InsightCategory,
       state: 'pass' | 'fail' | 'informative',
       /** Used by RelatedInsightChips.ts */
@@ -101,7 +102,7 @@ export type InsightModel<UIStrings extends Record<string, string> = Record<strin
     };
 
 export type PartialInsightModel<T> =
-    Omit<T, 'strings'|'title'|'description'|'category'|'state'|'insightKey'|'navigationId'|'frameId'>;
+    Omit<T, 'strings'|'title'|'description'|'docs'|'category'|'state'|'insightKey'|'navigationId'|'frameId'>;
 
 /**
  * Contains insights for a specific navigation. If a trace began after a navigation already started,

package/front_end/panels/application/ReportingApiView.ts

@@ -56,12 +56,11 @@ interface ViewInput {
   onReportSelected: (id: string) => void;
 }
 
-type View = (input: ViewInput, output: object, target: HTMLElement) => void;
-
-export const DEFAULT_VIEW: View = (input, _output, target) => {
+export const DEFAULT_VIEW = (input: ViewInput, output: undefined, target: HTMLElement): void => {
   if (input.hasReports || input.hasEndpoints) {
     // clang-format off
     render(html`
+      <style>${UI.inspectorCommonStyles}</style>
       <devtools-split-view sidebar-position="second" sidebar-initial-size="150" jslog=${
           VisualLogging.pane('reporting-api')}>
         ${input.hasReports ? html`
@@ -73,9 +72,9 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
             </div>
             <div slot="sidebar" class="vbox" jslog=${VisualLogging.pane('preview').track({resize: true})}>
               ${input.focusedReport ? html`
-                <devtools-widget .widgetConfig=${widgetConfig(
-                  element => SourceFrame.JSONView.JSONView.createViewSync(input.focusedReport?.body || '', element)
-                )}></devtools-widget>
+                <devtools-widget .widgetConfig=${widgetConfig(SourceFrame.JSONView.SearchableJsonView, {
+                  jsonObject: input.focusedReport.body,
+                })}></devtools-widget>
               ` : html`
                 <devtools-widget .widgetConfig=${widgetConfig(UI.EmptyWidget.EmptyWidget, {
                   header: i18nString(UIStrings.noReportSelected),
@@ -112,6 +111,8 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
   }
 };
 
+type View = typeof DEFAULT_VIEW;
+
 export class ReportingApiView extends UI.Widget.VBox implements
     SDK.TargetManager.SDKModelObserver<SDK.NetworkManager.NetworkManager> {
   #endpoints: Map<string, Protocol.Network.ReportingApiEndpoint[]>;
@@ -164,7 +165,7 @@ export class ReportingApiView extends UI.Widget.VBox implements
       focusedReport: this.#focusedReport,
       onReportSelected: this.#onReportSelected.bind(this),
     };
-    this.#view(viewInput, {}, this.element);
+    this.#view(viewInput, undefined, this.element);
   }
 
   #onEndpointsChangedForOrigin({data}: {data: Protocol.Network.ReportingApiEndpointsChangedForOriginEvent}): void {

package/front_end/panels/application/StorageView.ts

@@ -236,6 +236,7 @@ export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
     this.quotaOverrideCheckbox.addEventListener('click', this.onClickCheckbox.bind(this), false);
     this.quotaOverrideControlRow = quota.appendRow();
     this.quotaOverrideEditor = this.quotaOverrideControlRow.createChild('input', 'quota-override-notification-editor');
+    this.quotaOverrideEditor.setAttribute('placeholder', i18nString(UIStrings.pleaseEnterANumber));
     this.quotaOverrideEditor.setAttribute(
         'jslog', `${VisualLogging.textField('quota-override').track({change: true})}`);
     this.quotaOverrideControlRow.appendChild(UI.UIUtils.createLabel(i18nString(UIStrings.mb)));
@@ -402,7 +403,7 @@ export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
       this.quotaOverrideControlRow.classList.remove('hidden');
       this.quotaOverrideCheckbox.checked = true;
       this.quotaOverrideEditor.value = this.previousOverrideFieldValue;
-      this.quotaOverrideEditor.focus();
+      window.setTimeout(() => this.quotaOverrideEditor.focus(), 500);
     } else if (this.target && this.securityOrigin) {
       this.quotaOverrideControlRow.classList.add('hidden');
       this.quotaOverrideCheckbox.checked = false;

package/front_end/panels/application/preloading/components/PreloadingString.ts

@@ -736,6 +736,8 @@ export function capitalizedAction(action: Protocol.Preload.SpeculationAction): C
       return i18n.i18n.lockedString('Prefetch');
     case Protocol.Preload.SpeculationAction.Prerender:
       return i18n.i18n.lockedString('Prerender');
+    case Protocol.Preload.SpeculationAction.PrerenderUntilScript:
+      return i18n.i18n.lockedString('PrerenderUntilScript');
   }
 }
 

package/front_end/panels/console/ConsolePrompt.ts

@@ -343,9 +343,29 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
   }
 
   private editorKeymap(): readonly CodeMirror.KeyBinding[] {
-    const keymap = [
-      {key: 'ArrowUp', run: () => this.#editorHistory.moveHistory(Direction.BACKWARD)},
-      {key: 'ArrowDown', run: () => this.#editorHistory.moveHistory(Direction.FORWARD)},
+    const keymap: CodeMirror.KeyBinding[] = [
+      {
+        // Handle the KeyboardEvent manually.
+        any: (_view, event) => {
+          // Events with `repeat=true` are excluded from altering the history state because
+          // they are often not intended as such. Example:
+          // Scrolling through long snippets.
+          if (event.repeat) {
+            return false;
+          }
+
+          if (event.key === 'ArrowUp') {
+            return this.#editorHistory.moveHistory(Direction.BACKWARD);
+          }
+
+          if (event.key === 'ArrowDown') {
+            return this.#editorHistory.moveHistory(Direction.FORWARD);
+          }
+
+          return false;
+        },
+      },
+
       {mac: 'Ctrl-p', run: () => this.#editorHistory.moveHistory(Direction.BACKWARD, true)},
       {mac: 'Ctrl-n', run: () => this.#editorHistory.moveHistory(Direction.FORWARD, true)},
       {
@@ -372,7 +392,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
     if (this.isAiCodeCompletionEnabled()) {
       keymap.push({
         key: 'Tab',
-        run: (): boolean => {
+        run: () => {
           const {accepted, suggestion} = TextEditor.Config.acceptAiAutoCompleteSuggestion(this.editor.editor);
           if (accepted) {
             this.dispatchEventToListeners(

package/front_end/panels/timeline/TimelinePanel.ts

@@ -310,7 +310,7 @@ let isNode: boolean;
 
 /**
  * Represents the states that the timeline panel can be in.
- * If you need to change the panel's view, use the {@see #changeView} method.
+ * If you need to change the panel's view, use the {@link TimelinePanel.#changeView} method.
  * Note that we do not represent the "Loading/Processing" view here. The
  * StatusPane is managed in the code that handles file import/recording, and
  * when it is visible it is rendered on top of the UI so obscures what is behind
@@ -787,8 +787,8 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
   }
 
   /**
-   * Determine if two view modes are equivalent. Useful because if {@see
-   * #changeView} gets called and the new mode is identical to the current,
+   * Determine if two view modes are equivalent. Useful because if
+   * {@link TimelinePanel.#changeView} gets called and the new mode is identical to the current,
    * we can bail without doing any UI updates.
    */
   #viewModesEquivalent(m1: ViewMode, m2: ViewMode): boolean {
@@ -2087,14 +2087,14 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
 
   /**
    * Called when we update the active trace that is being shown to the user.
-   * This is called from {@see changeView} when we change the UI to show a
+   * This is called from {@link TimelinePanel.#changeView} when we change the UI to show a
    * trace - either one the user has just recorded/imported, or one they have
    * navigated to via the dropdown.
    *
    * If you need code to execute whenever the active trace changes, this is the method to use.
-   * If you need code to execute ONLY ON NEW TRACES, then use {@see loadingComplete}
+   * If you need code to execute ONLY ON NEW TRACES, then use {@link TimelinePanel.loadingComplete}
    * You should not call this method directly if you want the UI to update; use
-   * {@see changeView} to control what is shown to the user.
+   * {@link TimelinePanel.#changeView} to control what is shown to the user.
    */
   #setModelForActiveTrace(): void {
     if (this.#viewMode.mode !== 'VIEWING_TRACE') {
@@ -2249,8 +2249,10 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       }
     }
 
-    UI.Context.Context.instance().setFlavor(
-        AiAssistanceModel.AgentFocus, AiAssistanceModel.AgentFocus.fromParsedTrace(parsedTrace));
+    if (parsedTrace.metadata.dataOrigin !== Trace.Types.File.DataOrigin.CPU_PROFILE) {
+      UI.Context.Context.instance().setFlavor(
+          AiAssistanceModel.AgentFocus, AiAssistanceModel.AgentFocus.fromParsedTrace(parsedTrace));
+    }
   }
 
   #onAnnotationModifiedEvent(e: Event): void {

package/front_end/panels/timeline/components/ExportTraceOptions.ts

@@ -235,7 +235,7 @@ export class ExportTraceOptions extends HTMLElement {
           ${checkboxesWithInfoDialog.has(checkboxId) ? html`
             <devtools-button
               aria-details=${`export-trace-tooltip-${checkboxId}`}
-              aria-label=${this.#accessibleLabelForInfoCheckbox(checkboxId)}
+              .accessibleLabel=${this.#accessibleLabelForInfoCheckbox(checkboxId)}
               class="pen-icon"
               .iconName=${'info'}
               .variant=${Buttons.Button.Variant.ICON}

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: https://source.chromium.org/chromium/chromium/src/+/main:components/variations/proto/devtools/
 Version: N/A
-Revision: 21c0e9d79181fd991f782bb74b0eb1c8bce10209
+Revision: 871199b5845026663e1efbe7e1dcc69c6ec1dfb7
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

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/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/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.1526203"
 }