chrome-devtools-frontend 1.0.1522585 → 1.0.1524741

package/front_end/ui/legacy/Treeoutline.ts

@@ -1458,8 +1458,17 @@ export class TreeSearch < NodeT extends TreeNode<NodeT>,
   static highlight(ranges: TextUtils.TextRange.SourceRange[], selectedRange: TextUtils.TextRange.SourceRange|undefined):
       ReturnType<typeof Lit.Directives.ref> {
     return Lit.Directives.ref(element => {
-      if (element instanceof HTMLLIElement) {
-        TreeViewTreeElement.get(element)?.highlight(ranges, selectedRange);
+      if (!(element instanceof HTMLElement)) {
+        return;
+      }
+      const configListItem = element.closest<HTMLLIElement>('li[role="treeitem"]');
+      const titleElement = configListItem ? TreeViewTreeElement.get(configListItem)?.titleElement : undefined;
+      if (configListItem && titleElement) {
+        const targetElement = HTMLElementWithLightDOMTemplate.findCorrespondingElement(
+            element, configListItem, titleElement as HTMLElement);
+        if (targetElement) {
+          Highlighting.HighlightManager.HighlightManager.instance().set(targetElement, ranges, selectedRange);
+        }
       }
     });
   }
@@ -1524,31 +1533,7 @@ export class TreeSearch < NodeT extends TreeNode<NodeT>,
   }
 }
 
-class ActiveHighlights {
-  #activeRanges: Range[] = [];
-  #highlights: TextUtils.TextRange.SourceRange[] = [];
-  #selectedSearchResult: TextUtils.TextRange.SourceRange|undefined = undefined;
-
-  apply(node: Node): void {
-    Highlighting.HighlightManager.HighlightManager.instance().removeHighlights(this.#activeRanges);
-    this.#activeRanges =
-        Highlighting.HighlightManager.HighlightManager.instance().highlightOrderedTextRanges(node, this.#highlights);
-    if (this.#selectedSearchResult) {
-      this.#activeRanges.push(...Highlighting.HighlightManager.HighlightManager.instance().highlightOrderedTextRanges(
-          node, [this.#selectedSearchResult], /* isSelected=*/ true));
-    }
-  }
-
-  set(element: Node, highlights: TextUtils.TextRange.SourceRange[],
-      selectedSearchResult: TextUtils.TextRange.SourceRange|undefined): void {
-    this.#highlights = highlights;
-    this.#selectedSearchResult = selectedSearchResult;
-    this.apply(element);
-  }
-}
-
 class TreeViewTreeElement extends TreeElement {
-  #activeHighlights = new ActiveHighlights();
   #clonedAttributes = new Set<string>();
   #clonedClasses = new Set<string>();
 
@@ -1562,12 +1547,6 @@ class TreeViewTreeElement extends TreeElement {
     this.refresh();
   }
 
-  highlight(
-      highlights: TextUtils.TextRange.SourceRange[],
-      selectedSearchResult: TextUtils.TextRange.SourceRange|undefined): void {
-    this.#activeHighlights.set(this.titleElement, highlights, selectedSearchResult);
-  }
-
   refresh(): void {
     this.titleElement.textContent = '';
     this.#clonedAttributes.forEach(attr => this.listItemElement.attributes.removeNamedItem(attr));
@@ -1594,7 +1573,7 @@ class TreeViewTreeElement extends TreeElement {
       this.titleElement.appendChild(HTMLElementWithLightDOMTemplate.cloneNode(child));
     }
 
-    this.#activeHighlights.apply(this.titleElement);
+    Highlighting.HighlightManager.HighlightManager.instance().apply(this.titleElement);
   }
 
   static get(configElement: Node|undefined): TreeViewTreeElement|undefined {

package/front_end/ui/legacy/UIUtils.ts

@@ -857,7 +857,7 @@ export function highlightRangesWithStyleClass(
   return highlightNodes;
 }
 
-// Used in chromium/src/third_party/blink/web_tests/http/tests/devtools/components/utilities-highlight-results.js
+/** Used in chromium/src/third_party/blink/web_tests/http/tests/devtools/components/utilities-highlight-results.js **/
 export function applyDomChanges(domChanges: HighlightChange[]): void {
   for (let i = 0, size = domChanges.length; i < size; ++i) {
     const entry = domChanges[i];
@@ -2302,4 +2302,22 @@ export class HTMLElementWithLightDOMTemplate extends HTMLElement {
 
   protected removeNodes(_nodes: NodeList): void {
   }
+
+  static findCorrespondingElement(
+      sourceElement: HTMLElement, sourceRootElement: HTMLElement, targetRootElement: Element): Element|null {
+    let currentElement = sourceElement;
+    const childIndexesOnPathToRoot: number[] = [];
+    while (currentElement?.parentElement && currentElement !== sourceRootElement) {
+      childIndexesOnPathToRoot.push([...currentElement.parentElement.children].indexOf(currentElement));
+      currentElement = currentElement.parentElement;
+    }
+    if (!currentElement) {
+      return null;
+    }
+    let targetElement = targetRootElement;
+    for (const index of childIndexesOnPathToRoot.reverse()) {
+      targetElement = targetElement.children[index];
+    }
+    return targetElement;
+  }
 }

package/front_end/ui/legacy/components/color_picker/Spectrum.ts

@@ -168,15 +168,17 @@ function convertColorFormat(colorFormat: Common.Color.Format): SpectrumColorForm
   return colorFormat;
 }
 
-// HSV by itself, without a color space, doesn't map to a color and
-// it is usually interpreted as an sRGB color. However, it can also
-// represent colors in other color spaces since `HSV` -> `RGB` mapping
-// is not color space dependent. For example, color(display-p3 1 1 1) and rgb(1 1 1)
-// map to the same HSV values. The tricky thing is, `hsl()` syntax is interpreted
-// as it is in sRGB in CSS. So, when you convert those two colors and use as `hsl()`, it will
-// show an sRGB color. Though, if there was a function `color-hsl(<color-space> h s l)`
-// it was going to show the color in the color-space represented with `hsl`.
-// This function, gets the HSV values by interpreting them in the given gamut.
+/**
+ * HSV by itself, without a color space, doesn't map to a color and
+ * it is usually interpreted as an sRGB color. However, it can also
+ * represent colors in other color spaces since `HSV` -> `RGB` mapping
+ * is not color space dependent. For example, color(display-p3 1 1 1) and rgb(1 1 1)
+ * map to the same HSV values. The tricky thing is, `hsl()` syntax is interpreted
+ * as it is in sRGB in CSS. So, when you convert those two colors and use as `hsl()`, it will
+ * show an sRGB color. Though, if there was a function `color-hsl(<color-space> h s l)`
+ * it was going to show the color in the color-space represented with `hsl`.
+ * This function, gets the HSV values by interpreting them in the given gamut.
+ **/
 function getHsvFromColor(gamut: SpectrumGamut, color: Common.Color.Color): Common.ColorUtils.Color4D {
   switch (gamut) {
     case SpectrumGamut.DISPLAY_P3: {
@@ -192,7 +194,7 @@ function getHsvFromColor(gamut: SpectrumGamut, color: Common.Color.Color): Commo
   }
 }
 
-// Interprets the given `hsva` values in the given gamut and returns the concrete `Color` object.
+/** Interprets the given `hsva` values in the given gamut and returns the concrete `Color` object. **/
 function getColorFromHsva(gamut: SpectrumGamut, hsva: Common.ColorUtils.Color4D): Common.Color.Color {
   const color: Common.Color.Legacy = Common.Color.Legacy.fromHSVA(hsva);
   switch (gamut) {

package/front_end/ui/legacy/components/cookie_table/CookiesTable.ts

@@ -55,13 +55,12 @@ interface ViewInput {
   renderInline?: boolean;
   portBindingEnabled?: boolean;
   schemeBindingEnabled?: boolean;
-  onEdit:
-      (event: CustomEvent<{node: HTMLElement, columnId: string, valueBeforeEditing: string, newText: string}>) => void;
-  onCreate: (event: CustomEvent<CookieData>) => void;
+  onEdit: (data: CookieData, columnId: string, valueBeforeEditing: string, newText: string) => void;
+  onCreate: (data: CookieData) => void;
   onRefresh: () => void;
-  onDelete: (event: CustomEvent<HTMLElement>) => void;
-  onContextMenu: (event: CustomEvent<{menu: UI.ContextMenu.ContextMenu, element: HTMLElement}>) => void;
-  onSelect: (event: CustomEvent<HTMLElement|null>) => void;
+  onDelete: (data: CookieData) => void;
+  onContextMenu: (data: CookieData, menu: UI.ContextMenu.ContextMenu) => void;
+  onSelect: (key: string|undefined) => void;
 }
 type ViewFunction = (input: ViewInput, output: object, target: HTMLElement) => void;
 type AttributeWithIcon = SDK.Cookie.Attribute.NAME|SDK.Cookie.Attribute.VALUE|SDK.Cookie.Attribute.DOMAIN|
@@ -183,12 +182,9 @@ export class CookiesTable extends UI.Widget.VBox {
                id="cookies-table"
                striped
                ?inline=${input.renderInline}
-               @edit=${input.onEdit}
                @create=${input.onCreate}
                @refresh=${input.onRefresh}
-               @delete=${input.onDelete}
-               @contextmenu=${input.onContextMenu}
-               @select=${input.onSelect}
+               @deselect=${() => input.onSelect(undefined)}
           >
             <table>
                <tr>
@@ -237,12 +233,16 @@ export class CookiesTable extends UI.Widget.VBox {
                    SourcePort
                 </th>` : ''}
               </tr>
-              ${repeat(this.data,
-                        cookie => cookie.key, cookie => html`<tr data-key=${ifDefined(cookie.key)}
-                    ?selected=${cookie.key === input.selectedKey}
+              ${repeat(this.data, cookie => cookie.key, cookie => html`
+                <tr ?selected=${cookie.key === input.selectedKey}
                     ?inactive=${cookie.inactive}
                     ?dirty=${cookie.dirty}
-                    ?highlighted=${cookie.flagged}>
+                    ?highlighted=${cookie.flagged}
+                    @edit=${(e: CustomEvent<{columnId: string, valueBeforeEditing: string, newText: string}>) =>
+                       input.onEdit(cookie, e.detail.columnId, e.detail.valueBeforeEditing, e.detail.newText)}
+                    @delete=${()=> input.onDelete(cookie)}
+                    @contextmenu=${(e: CustomEvent<UI.ContextMenu.ContextMenu>) => input.onContextMenu(cookie, e.detail)}
+                    @select=${() => input.onSelect(cookie.key)}>
                   <td>${cookie.icons?.name}${cookie.name}</td>
                   <td>${cookie.value}</td>
                   <td>${cookie.icons?.domain}${cookie.domain}</td>
@@ -336,37 +336,35 @@ export class CookiesTable extends UI.Widget.VBox {
       renderInline: this.renderInline,
       schemeBindingEnabled: this.schemeBindingEnabled,
       portBindingEnabled: this.portBindingEnabled,
-      onEdit: event => this.onUpdateCookie(
-          event.detail.node, event.detail.columnId, event.detail.valueBeforeEditing, event.detail.newText),
-      onCreate: event => this.onCreateCookie(event.detail),
-      onRefresh: () => this.refresh(),
-      onDelete: event => this.onDeleteCookie(event.detail),
-      onSelect: event => this.onSelect(event.detail),
-      onContextMenu: event => this.populateContextMenu(event.detail.menu, event.detail.element),
+      onEdit: this.onUpdateCookie.bind(this),
+      onCreate: this.onCreateCookie.bind(this),
+      onRefresh: this.refresh.bind(this),
+      onDelete: this.onDeleteCookie.bind(this),
+      onSelect: this.onSelect.bind(this),
+      onContextMenu: this.populateContextMenu.bind(this),
     };
     const output = {};
     this.view(input, output, this.element);
   }
 
-  private onSelect(node: HTMLElement|null): void {
-    this.selectedKey = node?.dataset?.key;
+  private onSelect(key: string|undefined): void {
+    this.selectedKey = key;
     this.selectedCallback?.();
   }
 
-  private onDeleteCookie(node: HTMLElement): void {
-    const cookie = this.cookies.find(cookie => cookie.key() === node.dataset.key);
+  private onDeleteCookie(data: CookieData): void {
+    const cookie = this.cookies.find(cookie => cookie.key() === data.key);
     if (cookie && this.deleteCallback) {
       this.deleteCallback(cookie, () => this.refresh());
     }
   }
 
-  private onUpdateCookie(editingNode: HTMLElement, columnIdentifier: string, _oldText: string, newText: string): void {
-    const oldCookie = this.cookies.find(cookie => cookie.key() === editingNode.dataset.key);
-    const oldData = this.data.find(data => data.key === editingNode.dataset.key);
-    if (!oldData || !oldCookie) {
+  private onUpdateCookie(oldData: CookieData, columnIdentifier: string, _oldText: string, newText: string): void {
+    const oldCookie = this.cookies.find(cookie => cookie.key() === oldData.key);
+    if (!oldCookie) {
       return;
     }
-    const newCookieData = {...oldData, [columnIdentifier]: newText};  // as CookieData;
+    const newCookieData = {...oldData, [columnIdentifier]: newText};
     if (!this.isValidCookieData(newCookieData)) {
       newCookieData.dirty = true;
       this.requestUpdate();
@@ -556,8 +554,8 @@ export class CookiesTable extends UI.Widget.VBox {
     }
   }
 
-  private populateContextMenu(contextMenu: UI.ContextMenu.ContextMenu, gridNode: HTMLElement): void {
-    const maybeCookie = this.cookies.find(cookie => cookie.key() === gridNode.dataset.key);
+  private populateContextMenu(data: CookieData, contextMenu: UI.ContextMenu.ContextMenu): void {
+    const maybeCookie = this.cookies.find(cookie => cookie.key() === data.key);
     if (!maybeCookie) {
       return;
     }

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

@@ -1669,7 +1669,7 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   }
 }
 
-// Keep in sync with .data-grid col.corner style rule.
+/** Keep in sync with .data-grid col.corner style rule. **/
 export const CornerWidth = 14;
 
 export const enum Events {

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

@@ -66,15 +66,14 @@ class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate {
 
     this.#dataGrid.addEventListener(
         DataGridEvents.SELECTED_NODE,
-        e => this.dispatchEvent(new CustomEvent('select', {detail: (e.data as DataGridElementNode).configElement})));
+        e => (e.data as DataGridElementNode).configElement.dispatchEvent(new CustomEvent('select')));
     this.#dataGrid.addEventListener(
-        DataGridEvents.DESELECTED_NODE, () => this.dispatchEvent(new CustomEvent('select', {detail: null})));
+        DataGridEvents.DESELECTED_NODE, () => this.dispatchEvent(new CustomEvent('deselect')));
     this.#dataGrid.addEventListener(DataGridEvents.SORTING_CHANGED, () => this.dispatchEvent(new CustomEvent('sort', {
       detail: {columnId: this.#dataGrid.sortColumnId(), ascending: this.#dataGrid.isSortOrderAscending()}
     })));
     this.#dataGrid.setRowContextMenuCallback((menu, node) => {
-      this.dispatchEvent(
-          new CustomEvent('contextmenu', {detail: {menu, element: (node as DataGridElementNode).configElement}}));
+      (node as DataGridElementNode).configElement.dispatchEvent(new CustomEvent('contextmenu', {detail: menu}));
     });
     this.#dataGrid.setHeaderContextMenuCallback(menu => {
       for (const column of this.#columns) {
@@ -226,10 +225,10 @@ class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate {
     return [...nodes]
         .flatMap(node => {
           if (node instanceof HTMLTableRowElement) {
-            return [node];
+            return [node, ...node.querySelectorAll<HTMLTableRowElement>('table tr')];
           }
           if (node instanceof HTMLElement) {
-            return [...node.querySelectorAll('tr')];
+            return [...node.querySelectorAll<HTMLTableRowElement>('tr')];
           }
           return [] as HTMLElement[];
         })
@@ -248,10 +247,15 @@ class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate {
 
   override addNodes(nodes: NodeList): void {
     for (const element of this.#getDataRows(nodes)) {
-      const parentNode = this.#dataGrid.rootNode();  // TODO(dsv): support nested nodes
+      const parentRow = element.parentElement?.closest('td')?.closest('tr');
+      const parentDataGridNode = parentRow ? DataGridElementNode.get(parentRow) : undefined;
+      const parentNode = parentDataGridNode || this.#dataGrid.rootNode();
       const nextNode = this.#findNextExistingNode(element);
       const index = nextNode ? parentNode.children.indexOf(nextNode) : parentNode.children.length;
       const node = new DataGridElementNode(element, this);
+      if ((parentRow || node.hasChildren()) && !this.#dataGrid.disclosureColumnId) {
+        this.#dataGrid.disclosureColumnId = this.#columns[0].id;
+      }
       parentNode.insertChild(node, index);
       if (hasBooleanAttribute(element, 'selected')) {
         node.select();
@@ -345,12 +349,11 @@ class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate {
       return;
     }
 
-    this.dispatchEvent(
-        new CustomEvent('edit', {detail: {node: node.configElement, columnId, valueBeforeEditing, newText}}));
+    node.configElement.dispatchEvent(new CustomEvent('edit', {detail: {columnId, valueBeforeEditing, newText}}));
   }
 
   #deleteCallback(node: DataGridElementNode): void {
-    this.dispatchEvent(new CustomEvent('delete', {detail: node.configElement}));
+    node.configElement.dispatchEvent(new CustomEvent('delete'));
   }
 
   override addEventListener<K extends keyof HTMLElementEventMap>(
@@ -394,9 +397,12 @@ class DataGridElementNode extends SortableDataGridNode<DataGridElementNode> {
   }
 
   #updateData(): void {
-    const cells = this.#configElement.querySelectorAll('td');
-    for (let i = 0; i < cells.length; ++i) {
-      const cell = cells[i];
+    const cells = [...this.#configElement.children].filter(c => c.tagName === 'TD');
+    for (let i = 0; i < this.#dataGridElement.columns.length; ++i) {
+      const cell = cells[i] as HTMLElement;
+      if (!cell) {
+        continue;
+      }
       const column = this.#dataGridElement.columns[i];
       if (column.dataType === DataType.BOOLEAN) {
         this.data[column.id] = hasBooleanAttribute(cell, 'data-value') || cell.textContent === 'true';
@@ -439,19 +445,12 @@ class DataGridElementNode extends SortableDataGridNode<DataGridElementNode> {
   }
 
   #onRowMouseEvent(event: MouseEvent): void {
-    let currentElement = event.target as HTMLElement;
-    const childIndexesOnPathToRoot: number[] = [];
-    while (currentElement?.parentElement && currentElement !== event.currentTarget) {
-      childIndexesOnPathToRoot.push([...currentElement.parentElement.children].indexOf(currentElement));
-      currentElement = currentElement.parentElement;
-    }
-    if (!currentElement) {
+    const targetInConfigRow = UI.UIUtils.HTMLElementWithLightDOMTemplate.findCorrespondingElement(
+        event.target as HTMLElement, event.currentTarget as HTMLElement, this.#configElement);
+    if (!targetInConfigRow) {
       throw new Error('Cell click event target not found in the data grid');
     }
-    let targetInConfigRow = this.#configElement;
-    for (const index of childIndexesOnPathToRoot.reverse()) {
-      targetInConfigRow = targetInConfigRow.children[index];
-    }
+
     if (targetInConfigRow instanceof HTMLElement) {
       targetInConfigRow?.dispatchEvent(new MouseEvent(event.type, {bubbles: true, composed: true}));
     }
@@ -481,7 +480,8 @@ class DataGridElementNode extends SortableDataGridNode<DataGridElementNode> {
     if (this.isCreationNode) {
       return cell;
     }
-    const configCell = this.#configElement.querySelectorAll('td')[index];
+    const configCells = [...this.#configElement.children].filter(c => c.tagName === 'TD') as HTMLTableCellElement[];
+    const configCell = configCells[index];
     if (!configCell) {
       throw new Error(`Column ${columnId} not found in the data grid`);
     }

package/front_end/ui/legacy/components/data_grid/dataGrid.css

@@ -346,6 +346,11 @@
     color: ButtonText;
   }
 
+  .data-grid tbody tr.revealed:not(.data-grid-filler-row, .selected):hover,
+  .data-grid:focus-within tbody tr.revealed.selected {
+    background-color: Highlight;
+  }
+
   .data-grid th.sortable:hover *,
   .data-grid tr.parent.selected td.disclosure::before,
   .data-grid:focus tr.parent.selected td.disclosure::before,

package/front_end/ui/legacy/components/inline_editor/AnimationTimingModel.ts

@@ -6,8 +6,10 @@ import * as Geometry from '../../../../models/geometry/geometry.js';
 
 import {CSSLinearEasingModel} from './CSSLinearEasingModel.js';
 
-// Provides a unified interface for both linear easing and cubic bezier
-// models and handles the parsing for animation-timing texts.
+/**
+ * Provides a unified interface for both linear easing and cubic bezier
+ * models and handles the parsing for animation-timing texts.
+ **/
 export abstract class AnimationTimingModel {
   abstract asCSSText(): string;
 

package/front_end/ui/legacy/components/object_ui/ObjectPropertiesSection.ts

@@ -680,8 +680,10 @@ export class RootElement extends UI.TreeOutline.TreeElement {
   }
 }
 
-// Number of initially visible children in an ObjectPropertyTreeElement.
-// Remaining children are shown as soon as requested via a show more properties button.
+/**
+ * Number of initially visible children in an ObjectPropertyTreeElement.
+ * Remaining children are shown as soon as requested via a show more properties button.
+ **/
 export const InitialVisibleChildrenLimit = 200;
 
 export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {

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

@@ -103,7 +103,7 @@ const HEADER_LABEL_X_PADDING = 3;
 const HEADER_LABEL_Y_PADDING = 2;
 const PADDING_BETWEEN_TITLE_AND_SUBTITLE = 6;
 
-// The width of each of the edit mode icons.
+/** The width of each of the edit mode icons. **/
 export const EDIT_ICON_WIDTH = 16;
 // This gap might seem quite small - but the icons themselves have some
 // whitespace either side, so we don't need a huge gap.
@@ -136,7 +136,7 @@ const hideIconPath =
 const showIconPath =
     'M10 13.5C10.972 13.5 11.7983 13.1597 12.479 12.479C13.1597 11.7983 13.5 10.972 13.5 10C13.5 9.028 13.1597 8.20167 12.479 7.521C11.7983 6.84033 10.972 6.5 10 6.5C9.028 6.5 8.20167 6.84033 7.521 7.521C6.84033 8.20167 6.5 9.028 6.5 10C6.5 10.972 6.84033 11.7983 7.521 12.479C8.20167 13.1597 9.028 13.5 10 13.5ZM10 12C9.44467 12 8.97233 11.8057 8.583 11.417C8.19433 11.0277 8 10.5553 8 10C8 9.44467 8.19433 8.97233 8.583 8.583C8.97233 8.19433 9.44467 8 10 8C10.5553 8 11.0277 8.19433 11.417 8.583C11.8057 8.97233 12 9.44467 12 10C12 10.5553 11.8057 11.0277 11.417 11.417C11.0277 11.8057 10.5553 12 10 12ZM10 16C8.014 16 6.20833 15.455 4.583 14.365C2.95833 13.2743 1.764 11.8193 1 10C1.764 8.18067 2.95833 6.72567 4.583 5.635C6.20833 4.545 8.014 4 10 4C11.986 4 13.7917 4.545 15.417 5.635C17.0417 6.72567 18.236 8.18067 19 10C18.236 11.8193 17.0417 13.2743 15.417 14.365C13.7917 15.455 11.986 16 10 16ZM10 14.5C11.5553 14.5 12.9927 14.0973 14.312 13.292C15.632 12.486 16.646 11.3887 17.354 10C16.646 8.61133 15.632 7.514 14.312 6.708C12.9927 5.90267 11.5553 5.5 10 5.5C8.44467 5.5 7.00733 5.90267 5.688 6.708C4.368 7.514 3.354 8.61133 2.646 10C3.354 11.3887 4.368 12.486 5.688 13.292C7.00733 14.0973 8.44467 14.5 10 14.5Z';
 
-// export for test.
+/** export for test. **/
 export const enum HoverType {
   TRACK_CONFIG_UP_BUTTON = 'TRACK_CONFIG_UP_BUTTON',
   TRACK_CONFIG_DOWN_BUTTON = 'TRACK_CONFIG_DOWN_BUTTON',
@@ -216,7 +216,7 @@ export interface UserFilterAction {
   entry: Trace.Types.Events.Event;
 }
 
-// Object used to indicate to the Context Menu if an action is possible on the selected entry.
+/** Object used to indicate to the Context Menu if an action is possible on the selected entry. **/
 export interface PossibleFilterActions {
   [FilterAction.MERGE_FUNCTION]: boolean;
   [FilterAction.COLLAPSE_FUNCTION]: boolean;
@@ -2569,9 +2569,11 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
     const minTextWidth = 2 * textPadding + UI.UIUtils.measureTextWidth(context, '…');
     const minTextWidthDuration = this.chartViewport.pixelToTimeOffset(minTextWidth);
 
-    // As we parse each event, we bucket them into batches based on the color and
-    // whether they should be outlined. The key of this map is an object, so the
-    // following helps for dedupings keys to use within a Map.
+    /**
+     * As we parse each event, we bucket them into batches based on the color and
+     * whether they should be outlined. The key of this map is an object, so the
+     * following helps for dedupings keys to use within a Map.
+     **/
     interface BatchKey {
       color: string;
       outline: boolean;

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

@@ -32,10 +32,12 @@ export interface PieChartData {
   total: number;
   slices: Slice[];
 }
-// If the slices are not available when constructing the pie chart, set .data
-// immediately, with total=0 and slices=[], so that the chart is rendered with
-// the correct initial size. This avoids a layout shift when the slices are
-// later populated.
+/**
+ * If the slices are not available when constructing the pie chart, set .data
+ * immediately, with total=0 and slices=[], so that the chart is rendered with
+ * the correct initial size. This avoids a layout shift when the slices are
+ * later populated.
+ **/
 export class PieChart extends HTMLElement {
   private readonly shadow = this.attachShadow({mode: 'open'});
   private chartName = '';

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

@@ -1153,7 +1153,7 @@ const nonBreakableLineMark = new (class extends CodeMirror.GutterMarker {
   override elementClass = 'cm-nonBreakableLine';
 })();
 
-// Effect to add lines (by position) to the set of non-breakable lines.
+/** Effect to add lines (by position) to the set of non-breakable lines. **/
 export const addNonBreakableLines = CodeMirror.StateEffect.define<readonly number[]>();
 
 const nonBreakableLines = CodeMirror.StateField.define<CodeMirror.RangeSet<CodeMirror.GutterMarker>>({
@@ -1227,13 +1227,13 @@ const sourceFrameTheme = CodeMirror.EditorView.theme({
 export type RevealPosition = number|{lineNumber: number, columnNumber?: number}|
     {from: {lineNumber: number, columnNumber: number}, to: {lineNumber: number, columnNumber: number}};
 
-// This is usually an Infobar but is also used for AiCodeCompletionSummaryToolbar
+/** This is usually an Infobar but is also used for AiCodeCompletionSummaryToolbar **/
 export interface SourceFrameInfobar {
   element: HTMLElement;
   order?: number;
 }
 
-// Infobar panel state, used to show additional panels below the editor.
+/** Infobar panel state, used to show additional panels below the editor. **/
 export const addSourceFrameInfobar = CodeMirror.StateEffect.define<SourceFrameInfobar>();
 export const removeSourceFrameInfobar = CodeMirror.StateEffect.define<SourceFrameInfobar>();
 

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

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../components/highlighting/highlighting.js';
+
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as TextUtils from '../../../../models/text_utils/text_utils.js';
 import * as Lit from '../../../lit/lit.js';
@@ -113,38 +115,41 @@ interface ViewInput {
 }
 export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
 export const DEFAULT_VIEW: View = (input, output, target) => {
-  function highlight(node: XMLTreeViewNode, closeTag: boolean): ReturnType<typeof Lit.Directives.ref> {
+  function highlight(node: XMLTreeViewNode, closeTag: boolean): {highlights: string, selected: string} {
+    let highlights = '';
+    let selected = '';
     if (!input.search) {
-      return Lit.nothing;
+      return {highlights, selected};
     }
     const entries = input.search.getResults(node);
-    const highlights = [];
-    let selected = undefined;
     for (const entry of entries ?? []) {
       if (entry.isPostOrderMatch === closeTag) {
         const range = new TextUtils.TextRange.SourceRange(entry.match.index, entry.match[0].length);
         if (entry === input.jumpToNextSearchResult) {
-          selected = range;
+          selected = `${range.offset},${range.length}`;
         } else {
-          highlights.push(range);
+          highlights += `${range.offset},${range.length} `;
         }
       }
     }
-    return UI.TreeOutline.TreeSearch.highlight(highlights, selected);
+    return {highlights, selected};
   }
 
   function layOutNode(node: XMLTreeViewNode, populateSubtrees = false): Lit.LitTemplate {
     const onExpand = (event: UI.TreeOutline.TreeViewElement.ExpandEvent): void =>
         input.onExpand(node, event.detail.expanded);
+    const {highlights, selected} = highlight(node, /* closeTag=*/ false);
 
     // clang-format off
     return html`
-      <li ${highlight(node, /* closeTag=*/ false)} role="treeitem"
+      <li role="treeitem"
           ?selected=${input.jumpToNextSearchResult?.node === node}
           @expand=${onExpand}>
-        ${htmlView(node)}
+        <devtools-highlight ranges=${highlights} current-range=${selected}>
+          ${htmlView(node)}
+        </devtools-highlight>
         ${node.children().length ? html`
-          <ul role="group" ?hidden=${!node.expanded}>
+          <ul role="group" ?hidden=${!node.expanded && input.jumpToNextSearchResult?.node !== node}>
             ${populateSubtrees || input.search ? subtree(node) : Lit.nothing}
           </ul>` : Lit.nothing}
       </li>`;
@@ -156,15 +161,16 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
     if (children.length === 0) {
       return Lit.nothing;
     }
+    const {highlights, selected} = highlight(treeNode, /* closeTag=*/ true);
     // clang-format off
     return html`
       ${children.map(child => layOutNode(child, treeNode.expanded))}
-      ${treeNode.node instanceof Element
-          ? html`<li
-                  ${highlight(treeNode, /* closeTag=*/ true)}
-                  role="treeitem"><span part='shadow-xml-view-close-tag'>${'</' + treeNode.node.tagName + '>'}</span
-                 ></li>`
-          : Lit.nothing}`;
+      ${treeNode.node instanceof Element ? html`
+        <li role="treeitem">
+          <devtools-highlight ranges=${highlights} current-range=${selected}>
+            <span part='shadow-xml-view-close-tag'>${'</' + treeNode.node.tagName + '>'}</span>
+          </devtools-highlight>
+        </li>` : Lit.nothing}`;
     // clang-format on
   }
 

package/front_end/ui/legacy/components/source_frame/xmlView.css

@@ -4,10 +4,8 @@
  * found in the LICENSE file.
  */
 
-@scope to (devtools-widget > *) {
 .shadow-xml-view {
   user-select: text;
   overflow: auto;
   padding: 0;
 }
-}

package/front_end/ui/legacy/components/utils/Linkifier.ts

@@ -1107,10 +1107,12 @@ interface LinkDisplayOptions {
   revealBreakpoint?: boolean;
 }
 
-// The filter function for the openResourceHandlers. Returns true if the `url`
-// should be considered for a particular handler. `specificSchemeHandlers`
-// is the set of all schemes handled by all registered DevTools extensions
-// (that specify a particular scheme).
+/**
+ * The filter function for the openResourceHandlers. Returns true if the `url`
+ * should be considered for a particular handler. `specificSchemeHandlers`
+ * is the set of all schemes handled by all registered DevTools extensions
+ * (that specify a particular scheme).
+ **/
 export type LinkHandlerPredicate = (url: Platform.DevToolsPath.UrlString, specificSchemeHandlers: Set<string>) =>
     boolean;