chrome-devtools-frontend 1.0.1571007 → 1.0.1572937

package/front_end/panels/ai_assistance/components/PerformanceAgentMarkdownRenderer.ts

@@ -2,171 +2,27 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '../../../models/trace/insights/insights.js';
-import '../../../panels/timeline/components/components.js';
-import './PerformanceAgentFlameChart.js';
-import './CollapsibleAssistanceContentWidget.js';
-
 import * as Common from '../../../core/common/common.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../generated/protocol.js';
-import * as GreenDev from '../../../models/greendev/greendev.js';
-import * as Logs from '../../../models/logs/logs.js';
-import * as NetworkTimeCalculator from '../../../models/network_time_calculator/network_time_calculator.js';
-import * as Helpers from '../../../models/trace/helpers/helpers.js';
 import * as Trace from '../../../models/trace/trace.js';
 import type * as Marked from '../../../third_party/marked/marked.js';
-import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as PanelsCommon from '../../common/common.js';
-import * as NetworkForward from '../../network/forward/forward.js';
-import * as Network from '../../network/network.js';
-import * as TimelineComponents from '../../timeline/components/components.js';
-import * as Insights from '../../timeline/components/insights/insights.js';
-import * as Timeline from '../../timeline/timeline.js';
 
 import {MarkdownRendererWithCodeBlock} from './MarkdownRendererWithCodeBlock.js';
-import type * as PerformanceAgentFlameChart from './PerformanceAgentFlameChart.js';
 
 const {html} = Lit.StaticHtml;
 const {ref, createRef} = Lit.Directives;
-const {widgetConfig} = UI.Widget;
 
 export class PerformanceAgentMarkdownRenderer extends MarkdownRendererWithCodeBlock {
-  #insightRenderer = new Insights.InsightRenderer.InsightRenderer();
-
   constructor(
       private mainFrameId = '',
-      private lookupEvent: (key: Trace.Types.File.SerializableKey) => Trace.Types.Events.Event | null = () => null,
-      private parsedTrace: Trace.TraceModel.ParsedTrace|null = null) {
+      private lookupEvent: (key: Trace.Types.File.SerializableKey) => Trace.Types.Events.Event | null = () => null) {
     super();
   }
 
   override templateForToken(token: Marked.Marked.MarkedToken): Lit.LitTemplate|null {
-    if (!this.parsedTrace) {
-      return null;
-    }
-
-    // NOTE: The custom tag handling below (e.g., <ai-insight>, <network-request-widget>)
-    // is part of a prototype for the GreenDev project and is only rendered when the GreenDev
-    // feature is enabled.
-    if (token.type === 'html' && GreenDev.Prototypes.instance().isEnabled('inlineWidgets')) {
-      if (token.text.includes('<flame-chart-widget')) {
-        const startMatch = token.text.match(/start="?(\d+)"?/);
-        const endMatch = token.text.match(/end="?(\d+)"?/);
-        const start = startMatch ? Number(startMatch[1]) : this.parsedTrace.data.Meta.traceBounds.min;
-        const end = endMatch ? Number(endMatch[1]) : this.parsedTrace.data.Meta.traceBounds.max;
-        return html`<devtools-performance-agent-flame-chart .data=${{
-          parsedTrace: this.parsedTrace,
-          start,
-          end,
-        } as PerformanceAgentFlameChart.PerformanceAgentFlameChartData}
-          }></devtools-performance-agent-flame-chart>`;
-      }
-
-      // Flexible regex to match the tag name and a value a.
-      // match[1]: tagName (e.g., 'ai-insight', 'network-request-widget')
-      // match[2]: value (value needed to display the widget)
-      const regex = /<([a-z-]+)\s+value="([^"]+)">/;
-      const match = token.text.match(regex);
-
-      if (!match) {
-        return null;
-      }
-
-      const tagName = match[1];
-      const value = match[2];
-
-      if (tagName === 'ai-insight' && value) {
-        const componentName = value;
-
-        const insightSet = this.parsedTrace.insights?.values().next().value;
-        const insightM = insightSet?.model[componentName as Trace.Insights.Types.InsightKeys];
-
-        if (!insightM) {
-          return null;
-        }
-
-        return html`<devtools-collapsible-assistance-content-widget  .data=${{
-          headerText: `Insight - ${componentName}`, onReveal: () => {
-            void UI.InspectorView.InspectorView.instance().showPanel('timeline').then(() => {
-              Timeline.TimelinePanel.TimelinePanel.instance().revealInsight(insightM);
-            });
-          },
-        }
-        }>
-        ${this.#insightRenderer.renderInsightToWidgetElement(this.parsedTrace, insightSet, insightM, componentName, {
-          selected: true,
-          isAIAssistanceContext: true
-        })}
-        </devtools-collapsible-assistance-content-widget>`;
-      }
-      if (tagName === 'network-request-widget' && value) {
-        const rawTraceEvent =
-            Helpers.SyntheticEvents.SyntheticEventsManager.getActiveManager().getRawTraceEvents().at(Number(value));
-
-        // Rendering RequestTimingView widget only works for fresh traces where the network log is in sync.
-        // If the trace is uploaded, we need to use the synthetic events and
-        // render the network request tooltip that uses the synthetic events.
-        if (rawTraceEvent && Trace.Types.Events.isSyntheticNetworkRequest(rawTraceEvent)) {
-          const rawTraceEventId = rawTraceEvent?.args?.data?.requestId;
-          const rawTraceEventUrl = rawTraceEvent?.args?.data?.url;
-          const networkRequest = rawTraceEvent ? Logs.NetworkLog.NetworkLog.instance()
-                                                     .requestsForId(rawTraceEventId)
-                                                     .find(r => r.url() === rawTraceEventUrl) :
-                                                 null;
-
-          if (networkRequest) {
-            const calculator = new NetworkTimeCalculator.NetworkTimeCalculator(true);
-            return html`<devtools-collapsible-assistance-content-widget
-            .data=${{
-              headerText: `Network Request: ${
-                  networkRequest.url().length > 80 ? networkRequest.url().slice(0, 80) + '...' : networkRequest.url()}`,
-                  onReveal: () => {
-                    void UI.InspectorView.InspectorView.instance().showPanel('network').then(() => {
-                      void Common.Revealer.reveal(NetworkForward.UIRequestLocation.UIRequestLocation.tab(
-                          networkRequest, NetworkForward.UIRequestLocation.UIRequestTabs.TIMING));
-                    });
-                  },
-            }
-            }>
-            <devtools-widget class="actions" .widgetConfig=${
-                UI.Widget.widgetConfig(Network.RequestTimingView.RequestTimingView, {
-                  request: networkRequest,
-                  calculator,
-                })}></devtools-widget>
-            </devtools-collapsible-assistance-content-widget>`;
-          }
-        }
-
-        const syntheticRequest =
-            Helpers.SyntheticEvents.SyntheticEventsManager.getActiveManager().syntheticEventForRawEventIndex(
-                Number(value));
-
-        let networkTooltip = null;
-        if (syntheticRequest && Trace.Types.Events.isSyntheticNetworkRequest(syntheticRequest)) {
-          // clang-format off
-          networkTooltip = html`<devtools-widget .widgetConfig=${widgetConfig(TimelineComponents.NetworkRequestTooltip.NetworkRequestTooltip, {
-            networkRequest: syntheticRequest,
-          })}></devtools-widget>`;
-          // clang-format on
-        }
-
-        return html`<devtools-collapsible-assistance-content-widget
-        .data=${{
-          headerText: 'Network Request', onReveal: () => {
-            // eslint-disable-next-line no-console
-            console.log('Reveal network request', value);
-          },
-        }
-        }>
-          ${networkTooltip}
-          </devtools-collapsible-assistance-content-widget>`;
-      }
-
-      return null;
-    }
-
     if (token.type === 'link' && token.href.startsWith('#')) {
       if (token.href.startsWith('#node-')) {
         const nodeId = Number(token.href.replace('#node-', '')) as Protocol.DOM.BackendNodeId;

package/front_end/panels/application/DeviceBoundSessionsModel.ts

@@ -12,6 +12,7 @@ interface EventWithTimestamp {
 }
 export interface SessionAndEvents {
   session?: Protocol.Network.DeviceBoundSession;
+  isSessionTerminated: boolean;
   eventsById: Map<string, EventWithTimestamp>;
 }
 type SessionIdToSessionMap = Map<string|undefined, SessionAndEvents>;
@@ -91,6 +92,14 @@ export class DeviceBoundSessionsModel extends Common.ObjectWrapper.ObjectWrapper
     return this.#visibleSites.has(site);
   }
 
+  isSessionTerminated(site: string, sessionId?: string): boolean {
+    const session = this.getSession(site, sessionId);
+    if (session === undefined) {
+      return false;
+    }
+    return session.isSessionTerminated;
+  }
+
   getSession(site: string, sessionId?: string): SessionAndEvents|undefined {
     return this.#siteSessions.get(site)?.get(sessionId);
   }
@@ -116,7 +125,11 @@ export class DeviceBoundSessionsModel extends Common.ObjectWrapper.ObjectWrapper
 
     let sessionAndEvent = sessionIdToSessionMap.get(sessionId);
     if (!sessionAndEvent) {
-      sessionAndEvent = {session: undefined, eventsById: new Map<string, EventWithTimestamp>()};
+      sessionAndEvent = {
+        session: undefined,
+        isSessionTerminated: false,
+        eventsById: new Map<string, EventWithTimestamp>()
+      };
       sessionIdToSessionMap.set(sessionId, sessionAndEvent);
     }
     return sessionAndEvent;
@@ -145,6 +158,15 @@ export class DeviceBoundSessionsModel extends Common.ObjectWrapper.ObjectWrapper
       sessionAndEvent.session.cachedChallenge = event.challengeEventDetails.challenge;
     }
 
+    // Set the session's terminated status based on the event.
+    if (event.succeeded) {
+      if (event.terminationEventDetails) {
+        sessionAndEvent.isSessionTerminated = true;
+      } else if (event.creationEventDetails) {
+        sessionAndEvent.isSessionTerminated = false;
+      }
+    }
+
     this.dispatchEventToListeners(
         DeviceBoundSessionModelEvents.EVENT_OCCURRED,
         {site: eventWithTimestamp.event.site, sessionId: eventWithTimestamp.event.sessionId});

package/front_end/panels/application/DeviceBoundSessionsTreeElement.ts

@@ -120,6 +120,25 @@ export class RootTreeElement extends ApplicationPanelTreeElement {
     }
   }
 
+  #updateTerminatedSessionDisplay(site: string, sessionId: string|undefined): void {
+    const isSessionTerminated = this.#model.isSessionTerminated(site, sessionId);
+    const siteMapEntry = this.#sites.get(site);
+    if (!siteMapEntry) {
+      return;
+    }
+    const sessionElement = siteMapEntry.sessions.get(sessionId);
+    if (!sessionElement) {
+      return;
+    }
+    if (isSessionTerminated) {
+      sessionElement.listItemElement.classList.add('device-bound-session-terminated');
+      sessionElement.setLeadingIcons([createIcon('database-off')]);
+    } else {
+      sessionElement.listItemElement.classList.remove('device-bound-session-terminated');
+      sessionElement.setLeadingIcons([createIcon('database')]);
+    }
+  }
+
   #addSiteSessionIfMissing(site: string, sessionId: string|undefined): void {
     let siteMapEntry = this.#sites.get(site);
     if (!siteMapEntry) {
@@ -144,6 +163,9 @@ export class RootTreeElement extends ApplicationPanelTreeElement {
     if (!siteMapEntry.sessions.has(sessionId)) {
       const sessionElement = new ApplicationPanelTreeElement(
           this.resourcesPanel, sessionId ?? i18nString(UIStrings.noSession), false, 'device-bound-sessions-session');
+      if (sessionId === undefined) {
+        sessionElement.listItemElement.classList.add('no-device-bound-session');
+      }
       sessionElement.setLeadingIcons([createIcon('database')]);
       sessionElement.itemURL = `device-bound-sessions://${site}/${sessionId || ''}` as Platform.DevToolsPath.UrlString;
       const defaultOnSelect = sessionElement.onselect.bind(sessionElement);
@@ -209,6 +231,7 @@ export class RootTreeElement extends ApplicationPanelTreeElement {
       {data: {site, sessionId}}: Common.EventTarget
           .EventTargetEvent<DeviceBoundSessionModelEventTypes[DeviceBoundSessionModelEvents.EVENT_OCCURRED]>): void {
     this.#addSiteSessionIfMissing(site, sessionId);
+    this.#updateTerminatedSessionDisplay(site, sessionId);
   }
 
   #onClearEvents({data: {emptySessions, emptySites}}: Common.EventTarget

package/front_end/panels/application/FrameDetailsView.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../ui/kit/kit.js';
 import '../../ui/components/expandable_list/expandable_list.js';
 import '../../ui/components/report_view/report_view.js';
 
@@ -322,10 +323,10 @@ function renderOriginTrial(trials: Protocol.Page.OriginTrial[]|null): LitTemplat
     <devtools-report-section>
       <span class="report-section">
         ${i18nString(UIStrings.originTrialsExplanation)}
-        <x-link href="https://developer.chrome.com/docs/web-platform/origin-trials/" class="link"
-                jslog=${VisualLogging.link('learn-more.origin-trials').track({click: true})}>
+        <devtools-link href="https://developer.chrome.com/docs/web-platform/origin-trials/" class="link"
+                .jslogContext=${'learn-more.origin-trials'}>
           ${i18nString(UIStrings.learnMore)}
-        </x-link>
+        </devtools-link>
       </span>
     </devtools-report-section>
     <devtools-widget class="span-cols" .widgetConfig=${widgetConfig(OriginTrialTreeView, {data})}>
@@ -735,11 +736,11 @@ function renderApiAvailabilitySection(frame: SDK.ResourceTreeModel.ResourceTreeF
       <devtools-report-section>
         <span class="report-section">
           ${i18nString(UIStrings.availabilityOfCertainApisDepends)}
-          <x-link
+          <devtools-link
             href="https://web.dev/why-coop-coep/" class="link"
-            jslog=${VisualLogging.link('learn-more.coop-coep').track({click: true})}>
+            .jslogContext=${'learn-more.coop-coep'}>
             ${i18nString(UIStrings.learnMore)}
-          </x-link>
+          </devtools-link>
         </span>
       </devtools-report-section>
       ${renderSharedArrayBufferAvailability(frame)}
@@ -814,9 +815,9 @@ function renderMeasureMemoryAvailability(frame: SDK.ResourceTreeModel.ResourceTr
         <devtools-report-key>${i18nString(UIStrings.measureMemory)}</devtools-report-key>
         <devtools-report-value>
           <span title=${tooltipText}>${
-        availabilityText}</span>\xA0<x-link class="link" href="https://web.dev/monitor-total-page-memory-usage/" jslog=${
-        VisualLogging.link('learn-more.monitor-memory-usage').track({click: true})}>${
-        i18nString(UIStrings.learnMore)}</x-link>
+        availabilityText}</span>\xA0<devtools-link class="link" href="https://web.dev/monitor-total-page-memory-usage/" .jslogContext=${
+                                                                  'learn-more.monitor-memory-usage'}>${
+        i18nString(UIStrings.learnMore)}</devtools-link>
         </devtools-report-value>
       `;
   }
@@ -856,7 +857,8 @@ export class FrameDetailsReportView extends UI.Widget.Widget {
 
   constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
     super(element, {useShadowDom: true});
-    this.#protocolMonitorExperimentEnabled = Root.Runtime.experiments.isEnabled('protocol-monitor');
+    this.#protocolMonitorExperimentEnabled =
+        Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.PROTOCOL_MONITOR);
     this.#view = view;
   }
 

package/front_end/panels/application/components/BackForwardCacheView.ts

@@ -199,10 +199,10 @@ function renderMainFrameInformation(
         frame.backForwardCacheDetails.explanationsTree,
         reasonToFramesMap)}
     <devtools-report-section>
-      <x-link href="https://web.dev/bfcache/" class="link"
-      jslog=${VisualLogging.action('learn-more.eligibility').track({click: true})}>
+      <devtools-link href="https://web.dev/bfcache/" class="link"
+      jslogcontext="learn-more.eligibility">
         ${i18nString(UIStrings.learnMore)}
-      </x-link>
+      </devtools-link>
     </devtools-report-section>`;
   // clang-format on
 }
@@ -370,12 +370,10 @@ function maybeRenderDeepLinkToUnload(explanation: Protocol.Page.BackForwardCache
   if (explanation.reason === Protocol.Page.BackForwardCacheNotRestoredReason.UnloadHandlerExistsInMainFrame ||
       explanation.reason === Protocol.Page.BackForwardCacheNotRestoredReason.UnloadHandlerExistsInSubFrame) {
     return html`
-        <x-link href="https://web.dev/bfcache/#never-use-the-unload-event" class="link"
-        jslog=${VisualLogging.action('learn-more.never-use-unload').track({
-      click: true,
-    })}>
+        <devtools-link href="https://web.dev/bfcache/#never-use-the-unload-event" class="link"
+        jslogContext=${'learn-more.never-use-unload'}>
           ${i18nString(UIStrings.neverUseUnload)}
-        </x-link>`;
+        </devtools-link>`;
   }
   return nothing;
 }

package/front_end/panels/application/components/BounceTrackingMitigationsView.ts

@@ -4,6 +4,7 @@
 
 import '../../../ui/components/report_view/report_view.js';
 import '../../../ui/legacy/components/data_grid/data_grid.js';
+import '../../../ui/kit/kit.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as SDK from '../../../core/sdk/sdk.js';
@@ -157,10 +158,10 @@ const renderMainFrameInformation = (input: ViewInput): Lit.LitTemplate => {
     <devtools-report-divider>
     </devtools-report-divider>
     <devtools-report-section>
-      <x-link href="https://privacycg.github.io/nav-tracking-mitigations/#bounce-tracking-mitigations" class="link"
-      jslog=${VisualLogging.link('learn-more').track({click: true})}>
+      <devtools-link href="https://privacycg.github.io/nav-tracking-mitigations/#bounce-tracking-mitigations" class="link"
+      .jslogContext=${'learn-more'}>
         ${i18nString(UIStrings.learnMore)}
-      </x-link>
+      </devtools-link>
     </devtools-report-section>
   `;
   // clang-format on

package/front_end/panels/application/components/ProtocolHandlersView.ts

@@ -74,8 +74,6 @@ const i18nTemplate = unboundI18nTemplate.bind(undefined, str_);
 
 function renderStatusMessage(
     protocolHandlers: readonly ProtocolHandler[], manifestLink: Platform.DevToolsPath.UrlString): TemplateResult {
-  const manifestInTextLink =
-      UI.XLink.XLink.create(manifestLink, i18nString(UIStrings.manifest), undefined, undefined, 'manifest');
   const statusString = protocolHandlers.length > 0 ? UIStrings.protocolDetected : UIStrings.protocolNotDetected;
   // clang-format off
   return html`
@@ -83,7 +81,9 @@ function renderStatusMessage(
       <devtools-icon class="inline-icon"
                      name=${protocolHandlers.length > 0 ? 'check-circle' : 'info'}>
       </devtools-icon>
-      ${uiI18n.getFormatLocalizedString(str_, statusString, {PH1: manifestInTextLink })}
+      ${uiI18n.getFormatLocalizedStringTemplate(str_, statusString, {PH1: html`
+        <devtools-link href=${manifestLink} .jslogContext=${'manifest'}>${i18nString(UIStrings.manifest)}</devtools-link>
+        ` })}
     </div>`;
   // clang-format on
 }
@@ -144,10 +144,9 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
     ${renderStatusMessage(input.protocolHandler, input.manifestLink)}
     <div class="protocol-handlers-row">
       ${i18nTemplate(UIStrings.needHelpReadOur, {PH1: html`
-        <x-link href=${PROTOCOL_DOCUMENT_URL} tabindex=0 class="devtools-link" autofocus jslog=${
-            VisualLogging.link('learn-more').track({click: true, keydown: 'Enter|Space'})}>
+        <devtools-link href=${PROTOCOL_DOCUMENT_URL} class="devtools-link" autofocus .jslogContext=${'learn-more'}>
           ${i18nString(UIStrings.protocolHandlerRegistrations)}
-        </x-link>`})}
+        </devtools-link>`})}
     </div>
     ${renderProtocolTest(input.protocolHandler, input.queryInputState, input.protocolSelectHandler,
                          input.queryInputChangeHandler, input.testProtocolClickHandler)}

package/front_end/panels/application/components/ReportsGrid.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/kit/kit.js';
 import '../../../ui/legacy/components/data_grid/data_grid.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
@@ -80,11 +81,11 @@ export const DEFAULT_VIEW = (input: ViewInput, output: undefined, target: HTMLEl
               <th id="status" weight="20">
                 <style>${reportsGridStyles}</style>
                 <span class="status-header">${i18nString(UIStrings.status)}</span>
-                <x-link href="https://web.dev/reporting-api/#report-status"
-                jslog=${VisualLogging.link('report-status').track({click: true})}>
+                <devtools-link href="https://web.dev/reporting-api/#report-status"
+                .jslogContext=${'report-status'}>
                   <devtools-icon class="inline-icon medium" name="help" style="color: var(--icon-link);"
                   ></devtools-icon>
-                </x-link>
+                </devtools-link>
               </th>
               <th id="destination" weight="20">${i18nString(UIStrings.destination)}</th>
               <th id="timestamp" weight="20">${i18nString(UIStrings.generatedAt)}</th>
@@ -108,13 +109,11 @@ export const DEFAULT_VIEW = (input: ViewInput, output: undefined, target: HTMLEl
           <span class="empty-state-header">${i18nString(UIStrings.noReportsToDisplay)}</span>
           <div class="empty-state-description">
             <span>${i18nString(UIStrings.reportingApiDescription)}</span>
-            <x-link
+            <devtools-link
               class="devtools-link"
               href=${REPORTING_API_EXPLANATION_URL}
-              jslog=${VisualLogging.link()
-                      .track({ click: true, keydown: 'Enter|Space' })
-                      .context('learn-more')}
-            >${i18nString(UIStrings.learnMore)}</x-link>
+              .jslogContext=${'learn-more'}
+            >${i18nString(UIStrings.learnMore)}</devtools-link>
           </div>
         </div>
       `}
@@ -134,7 +133,8 @@ export class ReportsGrid extends UI.Widget.Widget {
   constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element);
     this.#view = view;
-    this.#protocolMonitorExperimentEnabled = Root.Runtime.experiments.isEnabled('protocol-monitor');
+    this.#protocolMonitorExperimentEnabled =
+        Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.PROTOCOL_MONITOR);
     this.requestUpdate();
   }
 

package/front_end/panels/application/components/SharedStorageAccessGrid.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/kit/kit.js';
 import '../../../ui/legacy/components/data_grid/data_grid.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
@@ -97,11 +98,11 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
           <div class="empty-state-header">${i18nString(UIStrings.noEvents)}</div>
           <div class="empty-state-description">
             <span>${i18nString(UIStrings.sharedStorageDescription)}</span>
-            <x-link
-              class="x-link devtools-link"
+            <devtools-link
+              class="devtools-link"
               href=${SHARED_STORAGE_EXPLANATION_URL}
-              jslog=${VisualLogging.link().track({click: true, keydown: 'Enter|Space'}).context('learn-more')}
-            >${i18nString(UIStrings.learnMore)}</x-link>
+              .jslogContext=${'learn-more'}
+            >${i18nString(UIStrings.learnMore)}</devtools-link>
           </div>
         </div>`
       : html`

package/front_end/panels/application/components/TrustTokensView.ts

@@ -78,13 +78,11 @@ function renderGridOrNoDataMessage(input: TrustTokensViewInput): Lit.TemplateRes
             <div class="empty-state-header">${i18nString(UIStrings.noTrustTokens)}</div>
             <div class="empty-state-description">
               <span>${i18nString(UIStrings.trustTokensDescription)}</span>
-              <x-link
-                class="x-link devtools-link"
+              <devtools-link
+                class="devtools-link"
                 href=${PRIVATE_STATE_TOKENS_EXPLANATION_URL}
-                jslog=${VisualLogging.link()
-                        .track({ click: true, keydown: 'Enter|Space' })
-                        .context('learn-more')}
-              >${i18nString(UIStrings.learnMore)}</x-link>
+                .jslogContext=${'learn-more'}
+              >${i18nString(UIStrings.learnMore)}</devtools-link>
             </div>
           </div>
         </div>

package/front_end/panels/application/preloading/PreloadingView.ts

@@ -4,6 +4,7 @@
 /* eslint-disable @devtools/no-imperative-dom-api */
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
+import '../../../ui/kit/kit.js';
 import '../../../ui/legacy/legacy.js';
 
 import * as Common from '../../../core/common/common.js';
@@ -253,11 +254,11 @@ export class PreloadingRuleSetView extends UI.Widget.VBox {
           <span class="empty-state-header">${i18nString(UIStrings.noRulesDetected)}</span>
           <div class="empty-state-description">
             <span>${i18nString(UIStrings.rulesDescription)}</span>
-            <x-link
-              class="x-link devtools-link"
+            <devtools-link
+              class="devtools-link"
               href=${SPECULATION_EXPLANATION_URL}
-              jslog=${VisualLogging.link().track({click: true, keydown:'Enter|Space'}).context('learn-more')}
-            >${i18nString(UIStrings.learnMore)}</x-link>
+              .jslogContext=${'learn-more'}
+            >${i18nString(UIStrings.learnMore)}</devtools-link>
           </div>
         </div>
         <devtools-split-view sidebar-position="second">
@@ -430,11 +431,11 @@ export class PreloadingAttemptView extends UI.Widget.VBox {
           <span class="empty-state-header">${i18nString(UIStrings.noPrefetchAttempts)}</span>
           <div class="empty-state-description">
             <span>${i18nString(UIStrings.prefetchDescription)}</span>
-            <x-link
-              class="x-link devtools-link"
+            <devtools-link
+              class="devtools-link"
               href=${SPECULATION_EXPLANATION_URL}
-              jslog=${VisualLogging.link().track({click: true, keydown: 'Enter|Space'}).context('learn-more')}
-            >${i18nString(UIStrings.learnMore)}</x-link>
+              .jslogContext=${'learn-more'}
+            >${i18nString(UIStrings.learnMore)}</devtools-link>
           </div>
         </div>
         <devtools-split-view sidebar-position="second">