chrome-devtools-frontend 1.0.1515988 → 1.0.1516909

package/front_end/core/host/GdpClient.ts

@@ -80,7 +80,7 @@ function normalizeBadgeName(name: string): string {
 export const GOOGLE_DEVELOPER_PROGRAM_PROFILE_LINK = 'https://developers.google.com/profile/u/me';
 
 async function makeHttpRequest<R extends object>(request: DispatchHttpRequestRequest): Promise<R|null> {
-  if (!Root.Runtime.hostConfig.devToolsGdpProfiles?.enabled) {
+  if (!Root.Runtime.hostConfig.devToolsGdpProfiles?.enabled || Root.Runtime.hostConfig.isOffTheRecord) {
     return null;
   }
 

package/front_end/core/host/UserMetrics.ts

@@ -507,7 +507,11 @@ export enum Action {
   AiAssistanceOpenedFromPerformanceInsight = 182,
   AiAssistanceOpenedFromPerformanceFullButton = 183,
   AiCodeCompletionResponseServedFromCache = 184,
-  MAX_VALUE = 185,
+  AiCodeCompletionRequestTriggered = 185,
+  AiCodeCompletionSuggestionDisplayed = 186,
+  AiCodeCompletionSuggestionAccepted = 187,
+  AiCodeCompletionError = 188,
+  MAX_VALUE = 189,
   /* eslint-enable @typescript-eslint/naming-convention */
 }
 

package/front_end/entrypoints/main/MainImpl.ts

@@ -516,7 +516,7 @@ export class MainImpl {
     this.#registerMessageSinkListener();
 
     // Initialize `GDPClient` and `UserBadges` for Google Developer Program integration
-    if (Root.Runtime.hostConfig.devToolsGdpProfiles?.enabled) {
+    if (Root.Runtime.hostConfig.devToolsGdpProfiles?.enabled && !Root.Runtime.hostConfig.isOffTheRecord) {
       void Host.GdpClient.GdpClient.instance().initialize();
       void Badges.UserBadges.instance().initialize();
       Badges.UserBadges.instance().addEventListener(Badges.Events.BADGE_TRIGGERED, async ev => {

package/front_end/models/ai_assistance/agents/PerformanceAgent.ts

@@ -264,7 +264,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
   #formatter: PerformanceTraceFormatter|null = null;
   #lastInsightForEnhancedQuery: Trace.Insights.Types.InsightModel|undefined;
   #eventsSerializer = new Trace.EventsSerializer.EventsSerializer();
-  #lastFocusHandledForContextDetails: AgentFocus|null = null;
+  #hasShownAnalyzeTraceContext = false;
 
   /**
    * Cache of all function calls made by the agent. This allows us to include (as a
@@ -336,13 +336,10 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
       return;
     }
 
-    const focus = context.getItem();
-    if (this.#lastFocusHandledForContextDetails === focus) {
+    if (this.#hasShownAnalyzeTraceContext) {
       return;
     }
 
-    this.#lastFocusHandledForContextDetails = focus;
-
     yield {
       type: ResponseType.CONTEXT,
       title: lockedString(UIStringsNotTranslated.analyzingTrace),
@@ -353,6 +350,8 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
         },
       ],
     };
+
+    this.#hasShownAnalyzeTraceContext = true;
   }
 
   #callTreeContextSet = new WeakSet();

package/front_end/models/ai_code_completion/AiCodeCompletion.ts

@@ -159,8 +159,10 @@ export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTy
   }
 
   #debouncedRequestAidaSuggestion = Common.Debouncer.debounce(
-      (prefix: string, suffix: string, cursor: number, inferenceLanguage?: Host.AidaClient.AidaInferenceLanguage) => {
-        void this.#requestAidaSuggestion(this.#buildRequest(prefix, suffix, inferenceLanguage), cursor);
+      (prefix: string, suffix: string, cursorPositionAtRequest: number,
+       inferenceLanguage?: Host.AidaClient.AidaInferenceLanguage) => {
+        void this.#requestAidaSuggestion(
+            this.#buildRequest(prefix, suffix, inferenceLanguage), cursorPositionAtRequest);
       },
       AIDA_REQUEST_DEBOUNCE_TIMEOUT_MS);
 
@@ -288,12 +290,15 @@ export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTy
     };
   }
 
-  async #requestAidaSuggestion(request: Host.AidaClient.CompletionRequest, cursor: number): Promise<void> {
+  async #requestAidaSuggestion(request: Host.AidaClient.CompletionRequest, cursorPositionAtRequest: number):
+      Promise<void> {
     const startTime = performance.now();
     this.dispatchEventToListeners(Events.REQUEST_TRIGGERED, {});
+    // Registering AiCodeCompletionRequestTriggered metric even if the request is served from cache
+    Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiCodeCompletionRequestTriggered);
 
     try {
-      const sampleResponse = await this.#generateSampleForRequest(request, cursor);
+      const sampleResponse = await this.#generateSampleForRequest(request, cursorPositionAtRequest);
       if (!sampleResponse) {
         this.dispatchEventToListeners(Events.RESPONSE_RECEIVED, {});
         return;
@@ -308,12 +313,19 @@ export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTy
       } = sampleResponse;
       const remainingDelay = Math.max(DELAY_BEFORE_SHOWING_RESPONSE_MS - (performance.now() - startTime), 0);
       this.#renderingTimeout = window.setTimeout(() => {
+        const currentCursorPosition = this.#editor.editor.state.selection.main.head;
+        if (currentCursorPosition !== cursorPositionAtRequest) {
+          this.dispatchEventToListeners(Events.RESPONSE_RECEIVED, {});
+          return;
+        }
         this.#editor.dispatch({
           effects: TextEditor.Config.setAiAutoCompleteSuggestion.of({
             text: suggestionText,
-            from: cursor,
+            from: cursorPositionAtRequest,
             rpcGlobalId,
             sampleId,
+            startTime,
+            onImpression: this.#registerUserImpression.bind(this),
           })
         });
 
@@ -326,12 +338,13 @@ export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTy
           this.#registerUserImpression(rpcGlobalId, sampleId, latency);
         }
 
-        debugLog('Suggestion dispatched to the editor', suggestionText, 'at cursor position', cursor);
+        debugLog('Suggestion dispatched to the editor', suggestionText, 'at cursor position', cursorPositionAtRequest);
         this.dispatchEventToListeners(Events.RESPONSE_RECEIVED, {citations});
       }, remainingDelay);
     } catch (e) {
       debugLog('Error while fetching code completion suggestions from AIDA', e);
       this.dispatchEventToListeners(Events.RESPONSE_RECEIVED, {});
+      Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiCodeCompletionError);
     }
   }
 
@@ -418,6 +431,7 @@ export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTy
       },
     });
     debugLog('Registered user impression with latency {seconds:', seconds, ', nanos:', nanos, '}');
+    Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiCodeCompletionSuggestionDisplayed);
   }
 
   registerUserAcceptance(rpcGlobalId: Host.AidaClient.RpcGlobalId, sampleId: number): void {
@@ -433,11 +447,13 @@ export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTy
       },
     });
     debugLog('Registered user acceptance');
+    Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiCodeCompletionSuggestionAccepted);
   }
 
   onTextChanged(
-      prefix: string, suffix: string, cursor: number, inferenceLanguage?: Host.AidaClient.AidaInferenceLanguage): void {
-    this.#debouncedRequestAidaSuggestion(prefix, suffix, cursor, inferenceLanguage);
+      prefix: string, suffix: string, cursorPositionAtRequest: number,
+      inferenceLanguage?: Host.AidaClient.AidaInferenceLanguage): void {
+    this.#debouncedRequestAidaSuggestion(prefix, suffix, cursorPositionAtRequest, inferenceLanguage);
   }
 
   remove(): void {

package/front_end/models/badges/UserBadges.ts

@@ -22,6 +22,9 @@ export interface EventTypes {
   [Events.BADGE_TRIGGERED]: Badge;
 }
 
+const SNOOZE_TIME_MS = 24 * 60 * 60 * 1000;  // 24 hours
+const MAX_SNOOZE_COUNT = 3;
+
 let userBadgesInstance: UserBadges|undefined = undefined;
 export class UserBadges extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   readonly #badgeActionEventTarget = new Common.ObjectWrapper.ObjectWrapper<BadgeActionEvents>();
@@ -29,6 +32,10 @@ export class UserBadges extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   #receiveBadgesSetting: Common.Settings.Setting<Boolean>;
   #allBadges: Badge[];
 
+  #starterBadgeSnoozeCount: Common.Settings.Setting<number>;
+  #starterBadgeLastSnoozedTimestamp: Common.Settings.Setting<number>;
+  #starterBadgeDismissed: Common.Settings.Setting<boolean>;
+
   static readonly BADGE_REGISTRY: BadgeClass[] = [
     StarterBadge,
     SpeedsterBadge,
@@ -43,6 +50,13 @@ export class UserBadges extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
     this.#receiveBadgesSetting = Common.Settings.Settings.instance().moduleSetting('receive-gdp-badges');
     this.#receiveBadgesSetting.addChangeListener(this.#reconcileBadges, this);
 
+    this.#starterBadgeSnoozeCount = Common.Settings.Settings.instance().createSetting(
+        'starter-badge-snooze-count', 0, Common.Settings.SettingStorageType.SYNCED);
+    this.#starterBadgeLastSnoozedTimestamp = Common.Settings.Settings.instance().createSetting(
+        'starter-badge-last-snoozed-timestamp', 0, Common.Settings.SettingStorageType.SYNCED);
+    this.#starterBadgeDismissed = Common.Settings.Settings.instance().createSetting(
+        'starter-badge-dismissed', false, Common.Settings.SettingStorageType.SYNCED);
+
     this.#allBadges = UserBadges.BADGE_REGISTRY.map(badgeCtor => new badgeCtor({
                                                       onTriggerBadge: this.#onTriggerBadge.bind(this),
                                                       badgeActionEventTarget: this.#badgeActionEventTarget,
@@ -60,6 +74,15 @@ export class UserBadges extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
     return await this.#reconcileBadges();
   }
 
+  snoozeStarterBadge(): void {
+    this.#starterBadgeSnoozeCount.set(this.#starterBadgeSnoozeCount.get() + 1);
+    this.#starterBadgeLastSnoozedTimestamp.set(Date.now());
+  }
+
+  dismissStarterBadge(): void {
+    this.#starterBadgeDismissed.set(true);
+  }
+
   recordAction(action: BadgeAction): void {
     // `Common.ObjectWrapper.ObjectWrapper` does not allow passing unions to
     // the `dispatchEventToListeners` and `action` in this case is a union.
@@ -79,7 +102,8 @@ export class UserBadges extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
       const gdpProfile = await Host.GdpClient.GdpClient.instance().getProfile();
       const receiveBadgesSettingEnabled = Boolean(this.#receiveBadgesSetting.get());
       // If there is a GDP profile and the user has enabled receiving badges, we award the starter badge as well.
-      if (gdpProfile && receiveBadgesSettingEnabled) {
+      if (gdpProfile && receiveBadgesSettingEnabled && !this.#isStarterBadgeDismissed() &&
+          !this.#isStarterBadgeSnoozed()) {
         shouldAwardBadge = true;
       }
     }
@@ -101,7 +125,17 @@ export class UserBadges extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
     });
   }
 
-  // TODO(ergunsh): Implement starter badge dismissal, snooze count & timestamp checks.
+  #isStarterBadgeDismissed(): boolean {
+    return this.#starterBadgeDismissed.get();
+  }
+
+  #isStarterBadgeSnoozed(): boolean {
+    const snoozeCount = this.#starterBadgeSnoozeCount.get();
+    const lastSnoozed = this.#starterBadgeLastSnoozedTimestamp.get();
+    const snoozedRecently = (Date.now() - lastSnoozed) < SNOOZE_TIME_MS;
+    return snoozeCount >= MAX_SNOOZE_COUNT || snoozedRecently;
+  }
+
   async #reconcileBadges(): Promise<void> {
     const syncInfo = await new Promise<Host.InspectorFrontendHostAPI.SyncInformation>(
         resolve => Host.InspectorFrontendHost.InspectorFrontendHostInstance.getSyncInformation(resolve));
@@ -148,7 +182,8 @@ export class UserBadges extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
         continue;
       }
 
-      const shouldActivateStarterBadge = badge.isStarterBadge && isEligibleToCreateProfile;
+      const shouldActivateStarterBadge = badge.isStarterBadge && isEligibleToCreateProfile &&
+          !this.#isStarterBadgeDismissed() && !this.#isStarterBadgeSnoozed();
       const shouldActivateActivityBasedBadge =
           !badge.isStarterBadge && Boolean(gdpProfile) && receiveBadgesSettingEnabled;
       if (shouldActivateStarterBadge || shouldActivateActivityBasedBadge) {

package/front_end/models/formatter/FormatterWorkerPool.ts

@@ -7,8 +7,6 @@ import * as FormatterActions from '../../entrypoints/formatter_worker/FormatterA
 
 export {DefinitionKind, type ScopeTreeNode} from '../../entrypoints/formatter_worker/FormatterActions.js';
 
-const MAX_WORKERS = Math.max(2, navigator.hardwareConcurrency - 1);
-
 let formatterWorkerPoolInstance: FormatterWorkerPool;
 
 export class FormatterWorkerPool {
@@ -37,12 +35,14 @@ export class FormatterWorkerPool {
   }
 
   private processNextTask(): void {
+    const maxWorkers = Math.max(2, navigator.hardwareConcurrency - 1);
+
     if (!this.taskQueue.length) {
       return;
     }
 
     let freeWorker = [...this.workerTasks.keys()].find(worker => !this.workerTasks.get(worker));
-    if (!freeWorker && this.workerTasks.size < MAX_WORKERS) {
+    if (!freeWorker && this.workerTasks.size < maxWorkers) {
       freeWorker = this.createWorker();
     }
     if (!freeWorker) {

package/front_end/panels/common/BadgeNotification.ts

@@ -69,6 +69,8 @@ const lockedString = i18n.i18n.lockedString;
 
 const LEFT_OFFSET = 5;
 const BOTTOM_OFFSET = 5;
+const AUTO_CLOSE_TIME_IN_MS = 30000;
+
 export interface BadgeNotificationAction {
   label: string;
   jslogContext?: string;
@@ -80,10 +82,11 @@ export interface BadgeNotificationProperties {
   message: HTMLElement|string;
   imageUri: string;
   actions: BadgeNotificationAction[];
+  isStarterBadge: boolean;
 }
 
 export interface ViewInput extends BadgeNotificationProperties {
-  onCloseClick: () => void;
+  onDismissClick: () => void;
 }
 
 // clang-format off
@@ -101,7 +104,7 @@ const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement)
 
   const crossButton = html`<devtools-button
         class="dismiss notification-button"
-        @click=${input.onCloseClick}
+        @click=${input.onDismissClick}
         jslog=${VisualLogging.action('badge-notification.dismiss').track({click: true})}
         aria-label=${i18nString(UIStrings.close)}
         .iconName=${'cross'}
@@ -138,9 +141,10 @@ export class BadgeNotification extends UI.Widget.Widget {
   message: HTMLElement|string = '';
   imageUri = '';
   actions: BadgeNotificationAction[] = [];
+  isStarterBadge = false;
 
+  #autoCloseTimeout?: number;
   #view: View;
-
   constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element);
     this.#view = view;
@@ -170,12 +174,18 @@ export class BadgeNotification extends UI.Widget.Widget {
     this.message = properties.message;
     this.imageUri = properties.imageUri;
     this.actions = properties.actions;
+    this.isStarterBadge = properties.isStarterBadge;
     this.requestUpdate();
     this.show(document.body);
 
     void this.updateComplete.then(() => {
       this.#positionNotification();
     });
+
+    if (this.#autoCloseTimeout) {
+      window.clearTimeout(this.#autoCloseTimeout);
+    }
+    this.#autoCloseTimeout = window.setTimeout(this.#onAutoClose, AUTO_CLOSE_TIME_IN_MS);
   }
 
   async #presentStarterBadge(badge: Badges.Badge): Promise<void> {
@@ -201,17 +211,21 @@ export class BadgeNotification extends UI.Widget.Widget {
         actions: [
           {
             label: i18nString(UIStrings.remindMeLater),
-            onClick: () => {/* To implement */},
+            onClick: () => {
+              this.detach();
+              Badges.UserBadges.instance().snoozeStarterBadge();
+            },
           },
           {
             label: i18nString(UIStrings.receiveBadges),
             onClick: () => {
-              this.#close();
+              this.detach();
               revealBadgeSettings();
             }
           }
         ],
         imageUri: badge.imageUri,
+        isStarterBadge: true,
       });
       return;
     }
@@ -223,17 +237,21 @@ export class BadgeNotification extends UI.Widget.Widget {
       actions: [
         {
           label: i18nString(UIStrings.remindMeLater),
-          onClick: () => {/* TODO(ergunsh): Implement */},
+          onClick: () => {
+            this.detach();
+            Badges.UserBadges.instance().snoozeStarterBadge();
+          },
         },
         {
           label: i18nString(UIStrings.createProfile),
           onClick: () => {
-            this.#close();
+            this.detach();
             GdpSignUpDialog.GdpSignUpDialog.show();
           }
         }
       ],
       imageUri: badge.imageUri,
+      isStarterBadge: true,
     });
   }
 
@@ -244,7 +262,7 @@ export class BadgeNotification extends UI.Widget.Widget {
         {
           label: i18nString(UIStrings.manageSettings),
           onClick: () => {
-            this.#close();
+            this.detach();
             revealBadgeSettings();
           },
         },
@@ -256,11 +274,28 @@ export class BadgeNotification extends UI.Widget.Widget {
         }
       ],
       imageUri: badge.imageUri,
+      isStarterBadge: badge.isStarterBadge,
     });
   }
 
-  #close = (): void => {
+  override onDetach(): void {
+    window.clearTimeout(this.#autoCloseTimeout);
+  }
+
+  #onDismissClick = (): void => {
+    this.detach();
+
+    if (this.isStarterBadge) {
+      Badges.UserBadges.instance().dismissStarterBadge();
+    }
+  };
+
+  #onAutoClose = (): void => {
     this.detach();
+
+    if (this.isStarterBadge) {
+      Badges.UserBadges.instance().snoozeStarterBadge();
+    }
   };
 
   override wasShown(): void {
@@ -273,7 +308,8 @@ export class BadgeNotification extends UI.Widget.Widget {
       message: this.message,
       imageUri: this.imageUri,
       actions: this.actions,
-      onCloseClick: this.#close,
+      isStarterBadge: this.isStarterBadge,
+      onDismissClick: this.#onDismissClick,
     };
     this.#view(viewInput, undefined, this.contentElement);
   }

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/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/network/NetworkLogView.ts

@@ -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/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;