chrome-devtools-frontend 1.0.1571573 → 1.0.1572937

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>
       `}
@@ -135,7 +134,7 @@ export class ReportsGrid extends UI.Widget.Widget {
     super(element);
     this.#view = view;
     this.#protocolMonitorExperimentEnabled =
-        Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.PROTOCOL_MONITOR);
+        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">