chrome-devtools-frontend 1.0.1515796 → 1.0.1516909

package/front_end/panels/elements/ComputedStyleWidget.ts

@@ -205,7 +205,6 @@ class ColorRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.ColorMatc
     swatch.renderColor(color);
     const valueElement = document.createElement('span');
     valueElement.textContent = match.text;
-    swatch.append(valueElement);
 
     swatch.addEventListener(
         InlineEditor.ColorSwatch.ColorChangedEvent.eventName, (event: InlineEditor.ColorSwatch.ColorChangedEvent) => {
@@ -214,7 +213,7 @@ class ColorRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.ColorMatc
         });
 
     context.addControl('color', swatch);
-    return [swatch];
+    return [swatch, valueElement];
   }
 
   matcher(): SDK.CSSPropertyParserMatchers.ColorMatcher {

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -1830,7 +1830,7 @@ export class ElementsTreeOutline extends
 
     console.assert(!treeElement.isClosingTag());
 
-    this.innerUpdateChildren(treeElement);
+    this.#updateChildren(treeElement);
   }
 
   insertChildElement(
@@ -1858,7 +1858,7 @@ export class ElementsTreeOutline extends
     }
   }
 
-  private innerUpdateChildren(treeElement: ElementsTreeElement): void {
+  #updateChildren(treeElement: ElementsTreeElement): void {
     if (this.treeElementsBeingUpdated.has(treeElement)) {
       return;
     }

package/front_end/panels/elements/LayoutPane.ts

@@ -284,7 +284,7 @@ const DEFAULT_VIEW: View = (input, output, target) => {
   render(html`
       <div style="min-width: min-content;" jslog=${VisualLogging.pane('layout').track({resize: true})}>
         <style>${layoutPaneStyles}</style>
-        <style>${UI.inspectorCommonStyles}</style>
+        <style>@scope to (devtools-widget > *) { ${UI.inspectorCommonStyles} }</style>
         <details open>
           <summary class="header"
             @keydown=${input.onSummaryKeyDown}

package/front_end/panels/elements/StyleEditorWidget.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable rulesdir/no-imperative-dom-api */
 
-import * as Buttons from '../../ui/components/buttons/buttons.js';
+import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import type * as ElementsComponents from './components/components.js';
@@ -120,7 +120,9 @@ export class StyleEditorWidget extends UI.Widget.VBox {
   static createTriggerButton(
       pane: StylesSidebarPane, section: StylePropertiesSection, editorClass: {new(): Editor}, buttonTitle: string,
       triggerKey: string): HTMLElement {
-    const triggerButton = createButton(buttonTitle);
+    const triggerButton = IconButton.Icon.create('flex-wrap', 'styles-pane-button');
+    triggerButton.title = buttonTitle;
+    triggerButton.role = 'button';
 
     triggerButton.onclick = async event => {
       event.stopPropagation();
@@ -146,28 +148,15 @@ export class StyleEditorWidget extends UI.Widget.VBox {
         scrollerElement.addEventListener('scroll', onScroll);
       }
     };
+    triggerButton.onmouseup = event => {
+      // Stop propagation to prevent the property editor from being activated.
+      event.stopPropagation();
+    };
 
     return triggerButton;
   }
 }
 
-function createButton(buttonTitle: string): Buttons.Button.Button {
-  const button = new Buttons.Button.Button();
-  button.data = {
-    variant: Buttons.Button.Variant.ICON,
-    size: Buttons.Button.Size.SMALL,
-    iconName: 'flex-wrap',
-    title: buttonTitle,
-    jslogContext: 'flex-wrap',
-  };
-  button.classList.add('styles-pane-button');
-  button.onmouseup = event => {
-    // Stop propagation to prevent the property editor from being activated.
-    event.stopPropagation();
-  };
-  return button;
-}
-
 function ensureTreeElementForProperty(section: StylePropertiesSection, propertyName: string): StylePropertyTreeElement {
   const target = section.propertiesTreeOutline.rootElement().children().find(
       child => child instanceof StylePropertyTreeElement && child.property.name === propertyName);

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -1046,13 +1046,6 @@ export class LinkableNameRenderer extends rendererBase(SDK.CSSPropertyParserMatc
           ruleBlock: '@position-try',
           isDefined: Boolean(this.#matchedStyles.positionTryRules().find(pt => pt.name().text === match.text)),
         };
-      case SDK.CSSPropertyParserMatchers.LinkableNameProperties.FUNCTION:
-        return {
-          jslogContext: 'css-function',
-          metric: null,
-          ruleBlock: '@function',
-          isDefined: Boolean(this.#matchedStyles.getRegisteredFunction(match.text)),
-        };
     }
   }
 
@@ -1065,15 +1058,7 @@ export class LinkableNameRenderer extends rendererBase(SDK.CSSPropertyParserMatc
       isDefined,
       onLinkActivate: (): void => {
         metric && Host.userMetrics.swatchActivated(metric);
-        if (match.propertyName === SDK.CSSPropertyParserMatchers.LinkableNameProperties.FUNCTION) {
-          const functionName = this.#matchedStyles.getRegisteredFunction(match.text);
-          if (!functionName) {
-            return;
-          }
-          this.#stylesPane.jumpToFunctionDefinition(functionName);
-        } else {
-          this.#stylesPane.jumpToSectionBlock(`${ruleBlock} ${match.text}`);
-        }
+        this.#stylesPane.jumpToSectionBlock(`${ruleBlock} ${match.text}`);
       },
       jslogContext,
     };
@@ -1609,7 +1594,7 @@ export class LengthRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.L
 }
 
 // clang-format off
-export class MathFunctionRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.MathFunctionMatch) {
+export class BaseFunctionRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.BaseFunctionMatch) {
   // clang-format on
   readonly #stylesPane: StylesSidebarPane;
   readonly #matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles;
@@ -1627,7 +1612,7 @@ export class MathFunctionRenderer extends rendererBase(SDK.CSSPropertyParserMatc
     this.#propertyName = propertyName;
   }
 
-  override render(match: SDK.CSSPropertyParserMatchers.MathFunctionMatch, context: RenderingContext): Node[] {
+  override render(match: SDK.CSSPropertyParserMatchers.BaseFunctionMatch<string>, context: RenderingContext): Node[] {
     const childTracingContexts = context.tracing?.evaluation(match.args, {match, context});
     const renderedArgs = match.args.map((arg, idx) => {
       const span = document.createElement('span');
@@ -1651,7 +1636,7 @@ export class MathFunctionRenderer extends rendererBase(SDK.CSSPropertyParserMatc
       if (evaluation) {
         return evaluation;
       }
-    } else if (!match.isArithmeticFunctionCall()) {
+    } else if (match instanceof SDK.CSSPropertyParserMatchers.MathFunctionMatch && !match.isArithmeticFunctionCall()) {
       void this.applyMathFunction(renderedArgs, match, context);
     }
 
@@ -1659,7 +1644,7 @@ export class MathFunctionRenderer extends rendererBase(SDK.CSSPropertyParserMatc
   }
 
   async applyEvaluation(
-      span: HTMLSpanElement, match: SDK.CSSPropertyParserMatchers.MathFunctionMatch,
+      span: HTMLSpanElement, match: SDK.CSSPropertyParserMatchers.BaseFunctionMatch<string>,
       context: RenderingContext): Promise<boolean> {
     const value = context.matchedResult.getComputedText(match.node, match => {
       if (match instanceof SDK.CSSPropertyParserMatchers.RelativeColorChannelMatch) {
@@ -1678,7 +1663,7 @@ export class MathFunctionRenderer extends rendererBase(SDK.CSSPropertyParserMatc
   }
 
   async applyMathFunction(
-      renderedArgs: HTMLElement[], match: SDK.CSSPropertyParserMatchers.MathFunctionMatch,
+      renderedArgs: HTMLElement[], match: SDK.CSSPropertyParserMatchers.BaseFunctionMatch<string>,
       context: RenderingContext): Promise<void> {
     // To understand which argument was selected by the function, we evaluate the function as well as all the arguments
     // and compare the function result to the values of all its arguments. Evaluating the arguments eliminates nested
@@ -1701,6 +1686,14 @@ export class MathFunctionRenderer extends rendererBase(SDK.CSSPropertyParserMatc
   }
 }
 
+export class MathFunctionRenderer extends BaseFunctionRenderer {
+  override readonly matchType = SDK.CSSPropertyParserMatchers.MathFunctionMatch;
+}
+
+export class CustomFunctionRenderer extends BaseFunctionRenderer {
+  override readonly matchType = SDK.CSSPropertyParserMatchers.CustomFunctionMatch;
+}
+
 // clang-format off
 export class AnchorFunctionRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.AnchorFunctionMatch) {
   // clang-format on
@@ -1871,6 +1864,7 @@ export function getPropertyRenderers(
     new PositionTryRenderer(matchedStyles),
     new LengthRenderer(stylesPane, propertyName, treeElement),
     new MathFunctionRenderer(stylesPane, matchedStyles, computedStyles, propertyName, treeElement),
+    new CustomFunctionRenderer(stylesPane, matchedStyles, computedStyles, propertyName, treeElement),
     new AutoBaseRenderer(computedStyles),
     new BinOpRenderer(),
     new RelativeColorChannelRenderer(treeElement),
@@ -2264,15 +2258,15 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       return;
     }
     this.lastComputedValue = computedValue;
-    this.innerUpdateTitle();
+    this.#updateTitle();
   }
 
   updateTitle(): void {
     this.lastComputedValue = this.#computeCSSExpression(this.property.ownerStyle, this.property.value);
-    this.innerUpdateTitle();
+    this.#updateTitle();
   }
 
-  private innerUpdateTitle(): void {
+  #updateTitle(): void {
     this.#tooltipKeyCounts.clear();
     this.updateState();
     if (this.isExpandable()) {
@@ -2460,6 +2454,26 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     return container;
   }
 
+  #getLinkableFunction(functionName: string, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles):
+      InlineEditor.LinkSwatch.LinkSwatch {
+    const swatch = new InlineEditor.LinkSwatch.LinkSwatch();
+    const registeredFunction = matchedStyles.getRegisteredFunction(functionName);
+    const isDefined = Boolean(registeredFunction);
+    swatch.data = {
+      jslogContext: 'css-function',
+      text: functionName,
+      tooltip: isDefined ? undefined : {title: i18nString(UIStrings.sIsNotDefined, {PH1: functionName})},
+      isDefined,
+      onLinkActivate: (): void => {
+        if (!registeredFunction) {
+          return;
+        }
+        this.#parentPane.jumpToFunctionDefinition(registeredFunction);
+      },
+    };
+    return swatch;
+  }
+
   getTracingTooltip(
       functionName: string, node: CodeMirror.SyntaxNode, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
       computedStyles: Map<string, string>, context: RenderingContext): Lit.TemplateResult {
@@ -2474,7 +2488,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     const tooltipId = this.getTooltipId(`${functionName}-trace`);
     // clang-format off
     return html`
-        <span tabIndex=-1 class=tracing-anchor aria-details=${tooltipId}>${functionName}</span>
+        <span tabIndex=-1 class=tracing-anchor aria-details=${tooltipId}>${functionName.startsWith('--') ? this.#getLinkableFunction(functionName, matchedStyles) : functionName}</span>
         <devtools-tooltip
             id=${tooltipId}
             use-hotkey

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -623,10 +623,10 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   }
 
   override onResize(): void {
-    void this.resizeThrottler.schedule(this.innerResize.bind(this));
+    void this.resizeThrottler.schedule(this.#resize.bind(this));
   }
 
-  private innerResize(): Promise<void> {
+  #resize(): Promise<void> {
     const width = this.contentElement.getBoundingClientRect().width + 'px';
     this.allSections().forEach(section => {
       section.propertiesTreeOutline.element.style.width = width;

package/front_end/panels/elements/stylePropertiesTreeOutline.css

@@ -220,13 +220,14 @@ devtools-icon.icon-link {
 }
 
 .styles-pane-button {
-  height: 15px;
-  margin: 0 0 0 6px;
+  width: var(--sys-size-8);
+  height: var(--sys-size-8);
+  margin-left: var(--sys-size-4);
   position: absolute;
-  top: -1px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  user-select: none;
 }
 /* Matched styles */
 

package/front_end/panels/layer_viewer/Layers3DView.ts

@@ -735,12 +735,12 @@ export class Layers3DView extends Common.ObjectWrapper.eventMixin<EventTypes, ty
       this.updateScheduled = true;
       requestAnimationFrame(() => requestAnimationFrame(() => {
                               this.updateScheduled = false;
-                              this.innerUpdate();
+                              this.#update();
                             }));
     }
   }
 
-  private innerUpdate(): void {
+  #update(): void {
     if (!this.layerTree?.root()) {
       this.failBanner.show(this.contentElement);
       return;

package/front_end/panels/layers/LayerTreeModel.ts

@@ -138,7 +138,7 @@ export class AgentLayerTree extends SDK.LayerTreeBase.LayerTreeBase {
 
   async setLayers(payload: Protocol.LayerTree.Layer[]|null): Promise<void> {
     if (!payload) {
-      this.innerSetLayers(payload);
+      this.#setLayers(payload);
       return;
     }
     const idsToResolve = new Set<Protocol.DOM.BackendNodeId>();
@@ -150,10 +150,10 @@ export class AgentLayerTree extends SDK.LayerTreeBase.LayerTreeBase {
       idsToResolve.add(backendNodeId);
     }
     await this.resolveBackendNodeIds(idsToResolve);
-    this.innerSetLayers(payload);
+    this.#setLayers(payload);
   }
 
-  private innerSetLayers(layers: Protocol.LayerTree.Layer[]|null): void {
+  #setLayers(layers: Protocol.LayerTree.Layer[]|null): void {
     this.setRoot(null);
     this.setContentRoot(null);
     // Payload will be null when not in the composited mode.

package/front_end/panels/mobile_throttling/ThrottlingSettingsTab.ts

@@ -400,8 +400,8 @@ export class CPUThrottlingCard {
   }
 
   private async runCalibration(): Promise<void> {
-    this.progress.setWorked(0);
-    this.progress.setTotalWork(1);
+    this.progress.worked = 0;
+    this.progress.totalWork = 1;
 
     this.controller = new CalibrationController();
 
@@ -412,7 +412,7 @@ export class CPUThrottlingCard {
       }
 
       for await (const result of this.controller.iterator()) {
-        this.progress.setWorked(result.progress);
+        this.progress.worked = result.progress;
       }
     } catch (e) {
       console.error(e);
@@ -424,7 +424,7 @@ export class CPUThrottlingCard {
     if (result && (result.low || result.mid)) {
       this.setting.set(result);
       // Let the user bask in the glory of a 100% progress bar, for a bit.
-      this.progress.setWorked(1);
+      this.progress.worked = 1;
       await new Promise(resolve => setTimeout(resolve, 200));
     }
 

package/front_end/panels/network/NetworkLogView.ts

@@ -1963,7 +1963,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
 
     const progressIndicator = this.progressBarContainer.createChild('devtools-progress');
     await HAR.Writer.Writer.write(stream, this.harRequests(), options, progressIndicator);
-    progressIndicator.done();
+    progressIndicator.done = true;
     void stream.close();
   }
 
@@ -2391,6 +2391,10 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
          Lastly we replace new lines with ^ and TWO new lines because the first
          new line is there to enact the escape command the second is the character
          to escape (in this case new line).
+
+         All other whitespace characters are replaced with a single space, as there
+         is no way to enter their literal values in a command line, and they do break
+         the command allowing for injection.
         */
       const encapsChars = '^"';
       return encapsChars +
@@ -2398,7 +2402,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
               .replace(/"/g, '\\"')
               .replace(/[^a-zA-Z0-9\s_\-:=+~'\/.',?;()*`]/g, '^$&')
               .replace(/%(?=[a-zA-Z0-9_])/g, '%^')
-              .replace(/[^\S \r\n]/g, '^$&')
+              .replace(/[^\S \r\n]/g, ' ')
               .replace(/\r?\n|\r/g, '^\n\n') +
           encapsChars;
     }

package/front_end/panels/network/NetworkLogViewColumns.ts

@@ -279,7 +279,7 @@ export class NetworkLogViewColumns {
 
     this.updateColumns();
     this.#dataGrid.addEventListener(DataGrid.DataGrid.Events.SORTING_CHANGED, this.sortHandler, this);
-    this.#dataGrid.setHeaderContextMenuCallback(this.innerHeaderContextMenu.bind(this));
+    this.#dataGrid.setHeaderContextMenuCallback(this.#headerContextMenu.bind(this));
 
     this.activeWaterfallSortId = WaterfallSortIds.StartTime;
     this.#dataGrid.markColumnAsSortedBy(INITIAL_SORT_COLUMN, DataGrid.DataGrid.Order.Ascending);
@@ -405,7 +405,7 @@ export class NetworkLogViewColumns {
     this.waterfallHeaderElement.addEventListener('click', waterfallHeaderClicked.bind(this));
     this.waterfallHeaderElement.addEventListener('contextmenu', event => {
       const contextMenu = new UI.ContextMenu.ContextMenu(event);
-      this.innerHeaderContextMenu(contextMenu);
+      this.#headerContextMenu(contextMenu);
       void contextMenu.show();
     });
     this.waterfallHeaderElement.createChild('div', 'hover-layer');
@@ -627,7 +627,7 @@ export class NetworkLogViewColumns {
     return fragment;
   }
 
-  private innerHeaderContextMenu(contextMenu: UI.ContextMenu.SubMenu): void {
+  #headerContextMenu(contextMenu: UI.ContextMenu.SubMenu): void {
     const columnConfigs = this.columns.filter(columnConfig => columnConfig.hideable);
     const nonRequestResponseHeaders =
         columnConfigs.filter(columnConfig => !columnConfig.isRequestHeader && !columnConfig.isResponseHeader);

package/front_end/panels/network/NetworkSearchScope.ts

@@ -29,7 +29,7 @@ export class NetworkSearchScope implements Search.SearchScope.SearchScope {
 
   performIndexing(progress: Common.Progress.Progress): void {
     queueMicrotask(() => {
-      progress.done();
+      progress.done = true;
     });
   }
 
@@ -40,14 +40,14 @@ export class NetworkSearchScope implements Search.SearchScope.SearchScope {
     const promises = [];
     const requests =
         this.#networkLog.requests().filter(request => searchConfig.filePathMatchesFileQuery(request.url()));
-    progress.setTotalWork(requests.length);
+    progress.totalWork = requests.length;
     for (const request of requests) {
       const promise = this.searchRequest(searchConfig, request, progress);
       promises.push(promise);
     }
     const resultsWithNull = await Promise.all(promises);
     const results = (resultsWithNull.filter(result => result !== null));
-    if (progress.isCanceled()) {
+    if (progress.canceled) {
       searchFinishedCallback(false);
       return;
     }
@@ -56,7 +56,7 @@ export class NetworkSearchScope implements Search.SearchScope.SearchScope {
         searchResultCallback(result);
       }
     }
-    progress.done();
+    progress.done = true;
     searchFinishedCallback(true);
   }
 
@@ -64,7 +64,7 @@ export class NetworkSearchScope implements Search.SearchScope.SearchScope {
       searchConfig: Workspace.SearchConfig.SearchConfig, request: SDK.NetworkRequest.NetworkRequest,
       progress: Common.Progress.Progress): Promise<NetworkSearchResult|null> {
     const bodyMatches = await NetworkSearchScope.#responseBodyMatches(searchConfig, request);
-    if (progress.isCanceled()) {
+    if (progress.canceled) {
       return null;
     }
     const locations = [];
@@ -84,7 +84,7 @@ export class NetworkSearchScope implements Search.SearchScope.SearchScope {
     for (const match of bodyMatches) {
       locations.push(NetworkForward.UIRequestLocation.UIRequestLocation.bodyMatch(request, match));
     }
-    progress.incrementWorked();
+    ++progress.worked;
     return new NetworkSearchResult(request, locations);
 
     function headerMatchesQuery(header: SDK.NetworkRequest.NameValue): boolean {

package/front_end/panels/search/SearchResultsPane.ts

@@ -2,14 +2,15 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 /* eslint-disable rulesdir/no-imperative-dom-api */
+/* eslint-disable rulesdir/no-lit-render-outside-of-view */
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import type * as Workspace from '../../models/workspace/workspace.js';
-import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {html, render} from '../../ui/lit/lit.js';
 
 import searchResultsPaneStyles from './searchResultsPane.css.js';
 import type {SearchResult} from './SearchScope.js';
@@ -137,31 +138,23 @@ export class SearchResultsTreeElement extends UI.TreeOutline.TreeElement {
 
   private updateSearchMatches(): void {
     this.listItemElement.classList.add('search-result');
-
-    const fileNameSpan = span(this.searchResult.label(), 'search-result-file-name');
-    fileNameSpan.appendChild(span('\u2014', 'search-result-dash'));
-    fileNameSpan.appendChild(span(this.searchResult.description(), 'search-result-qualifier'));
+    // clang-format off
+    render(html`
+      <span class="search-result-file-name">${this.searchResult.label()}
+        <span class="search-result-dash">${'\u2014'}</span>
+        <span class="search-result-qualifier">${this.searchResult.description()}</span>
+      </span>
+      <span class="search-result-matches-count"
+          aria-label=${i18nString(UIStrings.matchesCountS, {PH1: this.searchResult.matchesCount()})}>
+          ${this.searchResult.matchesCount()}
+      </span>`,
+    this.listItemElement);
+    // clang-format on
 
     this.tooltip = this.searchResult.description();
-    this.listItemElement.appendChild(fileNameSpan);
-    const matchesCountSpan = document.createElement('span');
-    matchesCountSpan.className = 'search-result-matches-count';
-
-    matchesCountSpan.textContent = `${this.searchResult.matchesCount()}`;
-    UI.ARIAUtils.setLabel(
-        matchesCountSpan, i18nString(UIStrings.matchesCountS, {PH1: this.searchResult.matchesCount()}));
-
-    this.listItemElement.appendChild(matchesCountSpan);
     if (this.expanded) {
       this.updateMatchesUI();
     }
-
-    function span(text: string, className: string): Element {
-      const span = document.createElement('span');
-      span.className = className;
-      span.textContent = text;
-      return span;
-    }
   }
 
   private appendSearchMatches(fromIndex: number, toIndex: number): void {
@@ -195,28 +188,29 @@ export class SearchResultsTreeElement extends UI.TreeOutline.TreeElement {
         ({lineSegment: lineContent, matchRanges} = lineSegmentForMultipleMatches(lineContent, matchRanges));
       }
 
-      const anchor = Components.Linkifier.Linkifier.linkifyRevealable(
-          searchResult.matchRevealable(i), '', undefined, undefined, undefined, 'search-match');
-      anchor.classList.add('search-match-link');
-      anchor.tabIndex = 0;
-      const labelSpan = document.createElement('span');
-      labelSpan.classList.add('search-match-line-number');
       const resultLabel = searchResult.matchLabel(i);
-      labelSpan.textContent = resultLabel;
-      if (typeof resultLabel === 'number' && !isNaN(resultLabel)) {
-        UI.ARIAUtils.setLabel(labelSpan, i18nString(UIStrings.lineS, {PH1: resultLabel}));
-      } else {
-        UI.ARIAUtils.setLabel(labelSpan, resultLabel);
-      }
-      anchor.appendChild(labelSpan);
-
-      const contentSpan = this.createContentSpan(lineContent, matchRanges);
-      anchor.appendChild(contentSpan);
 
       const searchMatchElement = new UI.TreeOutline.TreeElement();
       this.appendChild(searchMatchElement);
+      // clang-format off
+      render(html`
+        <button class="devtools-link text-button link-style search-match-link"
+                jslog="Link; context: search-match; track: click" role="link" tabindex="0"
+                @click=${() => void Common.Revealer.reveal(searchResult.matchRevealable(i))}>
+          <span class="search-match-line-number"
+              aria-label=${typeof resultLabel === 'number' && !isNaN(resultLabel)
+                             ?  i18nString(UIStrings.lineS, {PH1: resultLabel}) : resultLabel}>
+            ${resultLabel}
+          </span>
+          <span class="search-match-content" aria-label="${lineContent} line">
+            ${lineContent}
+          </span>
+        </button>`,
+        searchMatchElement.listItemElement);
+      // clang-format on
+      const contentSpan = searchMatchElement.listItemElement.querySelector('.search-match-content') as HTMLElement;
+      UI.UIUtils.highlightRangesWithStyleClass(contentSpan, matchRanges, 'highlighted-search-result');
       searchMatchElement.listItemElement.className = 'search-match';
-      searchMatchElement.listItemElement.appendChild(anchor);
       searchMatchElement.listItemElement.addEventListener('keydown', event => {
         if (event.key === 'Enter') {
           event.consume(true);
@@ -237,15 +231,6 @@ export class SearchResultsTreeElement extends UI.TreeOutline.TreeElement {
         this.showMoreMatchesElementSelected.bind(this, showMoreMatchesTreeElement, startMatchIndex);
   }
 
-  private createContentSpan(lineContent: string, matchRanges: TextUtils.TextRange.SourceRange[]): Element {
-    const contentSpan = document.createElement('span');
-    contentSpan.className = 'search-match-content';
-    contentSpan.textContent = lineContent;
-    UI.ARIAUtils.setLabel(contentSpan, `${lineContent} line`);
-    UI.UIUtils.highlightRangesWithStyleClass(contentSpan, matchRanges, 'highlighted-search-result');
-    return contentSpan;
-  }
-
   private regexMatchRanges(lineContent: string, regex: RegExp): TextUtils.TextRange.SourceRange[] {
     regex.lastIndex = 0;
     let match;