chrome-devtools-frontend 1.0.1571007 → 1.0.1572937

package/front_end/panels/explain/components/ConsoleInsight.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import '../../../ui/components/spinners/spinners.js';
+import '../../../ui/kit/kit.js';
 
 import * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
@@ -299,9 +300,9 @@ function renderSearchButton(onSearch: ViewInput['callbacks']['onSearch']): Lit.T
 
 function renderLearnMoreAboutInsights(): Lit.TemplateResult {
   // clang-format off
-  return html`<x-link href=${LEARN_MORE_URL} class="link" jslog=${VisualLogging.link('learn-more').track({click: true})}>
+  return html`<devtools-link href=${LEARN_MORE_URL} class="link" .jslogContext=${'learn-more'}>
     ${i18nString(UIStrings.learnMore)}
-  </x-link>`;
+  </devtools-link>`;
   // clang-format on
 }
 
@@ -317,15 +318,15 @@ function maybeRenderSources(
     <ol class="sources-list">
       ${directCitationUrls.map((url, index) => html`
         <li>
-          <x-link
+          <devtools-link
             href=${url}
             class=${Directives.classMap({link: true, highlighted: index === highlightedCitationIndex})}
-            jslog=${VisualLogging.link('references.console-insights').track({click: true})}
+            .jslogContext=${'references.console-insights'}
             ${Directives.ref(e => { output.citationLinks[index] = e as HTMLElement; })}
             @animationend=${onCitationAnimationEnd}
           >
             ${url}
-          </x-link>
+          </devtools-link>
         </li>
       `)}
     </ol>
@@ -343,13 +344,13 @@ function maybeRenderRelatedContent(relatedUrls: string[], directCitationUrls: st
     <ul class="references-list">
       ${relatedUrls.map(relatedUrl => html`
         <li>
-          <x-link
+          <devtools-link
             href=${relatedUrl}
             class="link"
-            jslog=${VisualLogging.link('references.console-insights').track({click: true})}
+            .jslogContext=${'references.console-insights'}
           >
             ${relatedUrl}
-          </x-link>
+          </devtools-link>
         </li>
       `)}
     </ul>
@@ -379,10 +380,10 @@ function renderInsightSourcesList(
     <div class="insight-sources">
       <ul>
         ${Directives.repeat(sources, item => item.value, item => {
-          return html`<li><x-link class="link" title="${localizeType(item.type)} ${i18nString(UIStrings.opensInNewTab)}" href="data:text/plain;charset=utf-8,${encodeURIComponent(item.value)}" jslog=${VisualLogging.link('source-' + item.type).track({click: true})}>
+          return html`<li><devtools-link class="link" title="${localizeType(item.type)} ${i18nString(UIStrings.opensInNewTab)}" href="data:text/plain;charset=utf-8,${encodeURIComponent(item.value)}" .jslogContext=${'source-' + item.type}>
             <devtools-icon name="open-externally"></devtools-icon>
             ${localizeType(item.type)}
-          </x-link></li>`;
+          </devtools-link></li>`;
         })}
         ${isPageReloadRecommended ? html`<li class="source-disclaimer">
           <devtools-icon name="warning"></devtools-icon>
@@ -450,28 +451,28 @@ function renderConsentReminder(noLogging: boolean): Lit.TemplateResult {
         <devtools-icon name="policy" class="medium">
         </devtools-icon>
       </div>
-      <div>Use of this feature is subject to the <x-link
+      <div>Use of this feature is subject to the <devtools-link
           href=${TERMS_OF_SERVICE_URL}
           class="link"
-          jslog=${VisualLogging.link('terms-of-service.console-insights').track({click: true})}>
+          .jslogContext=${'terms-of-service.console-insights'}>
         Google Terms of Service
-        </x-link> and <x-link
+        </devtools-link> and <devtools-link
           href=${PRIVACY_POLICY_URL}
           class="link"
-          jslog=${VisualLogging.link('privacy-policy.console-insights').track({click: true})}>
+          .jslogContext=${'privacy-policy.console-insights'}>
         Google Privacy Policy
-        </x-link>
+        </devtools-link>
       </div>
       <div>
         <devtools-icon name="warning" class="medium">
         </devtools-icon>
       </div>
       <div>
-        <x-link
+        <devtools-link
           href=${CODE_SNIPPET_WARNING_URL}
           class="link"
-          jslog=${VisualLogging.link('code-snippets-explainer.console-insights').track({click: true})}
-        >Use generated code snippets with caution</x-link>
+          .jslogContext=${'code-snippets-explainer.console-insights'}
+        >Use generated code snippets with caution</devtools-link>
       </div>
     </div>`;
   // clang-format on
@@ -513,10 +514,10 @@ function renderDisclaimer(noLogging: boolean, onDisclaimerSettingsLink: () => vo
     } <button class="link" role="link" @click=${onDisclaimerSettingsLink}
               jslog=${VisualLogging.action('open-ai-settings').track({click: true})}>
       Open settings
-    </button> or <x-link href=${LEARN_MORE_URL}
-        class="link" jslog=${VisualLogging.link('learn-more').track({click: true})}>
+    </button> or <devtools-link href=${LEARN_MORE_URL}
+        class="link" .jslogContext=${'learn-more'}>
       learn more
-    </x-link>
+    </devtools-link>
   </span>`;
   // clang-format on
 }
@@ -549,7 +550,8 @@ function renderSignInFooter(onGoToSignIn: () => void): Lit.LitTemplate {
   // clang-format on
 }
 
-function renderConsentReminderFooter(onReminderSettingsLink: () => void, onConsentReminderConfirmed: () => void): Lit.LitTemplate {
+function renderConsentReminderFooter(
+    onReminderSettingsLink: () => void, onConsentReminderConfirmed: () => void): Lit.LitTemplate {
   // clang-format off
   return html`
     <div class="filler"></div>
@@ -575,7 +577,9 @@ function renderConsentReminderFooter(onReminderSettingsLink: () => void, onConse
   // clang-format on
 }
 
-function renderInsightFooter(noLogging: ViewInput['noLogging'], selectedRating: ViewInput['selectedRating'], callbacks: ViewInput['callbacks']): Lit.LitTemplate {
+function renderInsightFooter(
+    noLogging: ViewInput['noLogging'], selectedRating: ViewInput['selectedRating'],
+    callbacks: ViewInput['callbacks']): Lit.LitTemplate {
   // clang-format off
   return html`
   <div class="disclaimer">

package/front_end/panels/explain/components/consoleInsight.css

@@ -360,7 +360,7 @@
     display: table-cell;
   }
 
-  .sources-list x-link.highlighted {
+  .sources-list devtools-link.highlighted {
     animation: highlight-fadeout 2s;
   }
 

package/front_end/panels/issues/IssueView.ts

@@ -16,7 +16,7 @@ import * as IssueCounter from '../../ui/components/issue_counter/issue_counter.j
 import * as MarkdownView from '../../ui/components/markdown_view/markdown_view.js';
 import {Icon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+import {html, render} from '../../ui/lit/lit.js';
 
 import {AffectedBlockedByResponseView} from './AffectedBlockedByResponseView.js';
 import {AffectedCookiesView, AffectedRawCookieLinesView} from './AffectedCookiesView.js';
@@ -452,12 +452,12 @@ export class IssueView extends UI.TreeOutline.TreeElement {
 
     const linkList = linkWrapper.listItemElement.createChild('ul', 'link-list');
     for (const description of this.#description.links) {
-      const link = UI.Fragment.html`<x-link class="link devtools-link" tabindex="0" href=${description.link}>${
-                       i18nString(UIStrings.learnMoreS, {PH1: description.linkTitle})}</x-link>` as UI.XLink.XLink;
-      link.setAttribute('jslog', `${VisualLogging.link('learn-more').track({click: true})}`);
-
       const linkListItem = linkList.createChild('li');
-      linkListItem.appendChild(link);
+      // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+      render(
+          html`<devtools-link class="link devtools-link" href=${description.link} .jslogContext=${'learn-more'}>${
+              i18nString(UIStrings.learnMoreS, {PH1: description.linkTitle})}</devtools-link>`,
+          linkListItem);
     }
     this.appendChild(linkWrapper);
   }

package/front_end/panels/network/RequestConditionsDrawer.ts

@@ -4,6 +4,7 @@
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 /* eslint-disable @devtools/no-imperative-dom-api */
 
+import '../../ui/kit/kit.js';
 import '../../ui/legacy/legacy.js';
 import '../../ui/components/tooltips/tooltips.js';
 
@@ -325,13 +326,13 @@ export class AffectedCountWidget extends UI.Widget.Widget {
 }
 
 function learnMore(): LitTemplate {
-  return html`<x-link
+  return html`<devtools-link
         href=${NETWORK_REQUEST_BLOCKING_EXPLANATION_URL}
         tabindex=0
         class=devtools-link
-        jslog=${VisualLogging.link().track({click: true, keydown: 'Enter|Space'}).context('learn-more')}>
+        .jslogContext=${'learn-more'}>
           ${i18nString(UIStrings.learnMore)}
-      </x-link>`;
+      </devtools-link>`;
 }
 
 export class RequestConditionsDrawer extends UI.Widget.VBox implements

package/front_end/panels/network/RequestCookiesView.ts

@@ -121,10 +121,9 @@ export const DEFAULT_VIEW: ViewFunction = (input, _output, target) => {
       ` : Lit.nothing}
 
       <div class="cookies-panel-item site-has-cookies-in-other-partition ${input.siteHasCookieInOtherPartition ? '' : 'hidden'}">
-        ${uiI18n.getFormatLocalizedString(str_, UIStrings.siteHasCookieInOtherPartition, {
-          PH1: UI.XLink.XLink.create(
-            'https://developer.chrome.com/en/docs/privacy-sandbox/chips/', i18nString(UIStrings.learnMore), undefined,
-            undefined, 'learn-more'),})}
+        ${uiI18n.getFormatLocalizedStringTemplate(str_, UIStrings.siteHasCookieInOtherPartition, {
+          PH1: html`<devtools-link href="https://developer.chrome.com/en/docs/privacy-sandbox/chips/" .jslogContext=${'learn-more'}>${i18nString(UIStrings.learnMore)}</devtools-link>`
+})}
       </div>
 
       <div class="request-cookies-title ${input.responseCookies.cookies.length ? '' : 'hidden'}"

package/front_end/panels/network/RequestTimingView.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 /* eslint-disable @devtools/no-imperative-dom-api */
+import '../../ui/kit/kit.js';
 
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
@@ -500,12 +501,12 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
           </tr>` : nothing}
        <tr class=network-timing-footer>
          <td colspan=1>
-           <x-link
+           <devtools-link
              href="https://developer.chrome.com/docs/devtools/network/reference/#timing-explanation"
              class=devtools-link
-             jslog=${VisualLogging.link().track({click: true, keydown:'Enter|Space'}).context('explanation')}>
+             .jslogContext=${'explanation'}>
                ${i18nString(UIStrings.explanation)}
-           </x-link>
+           </devtools-link>
          <td></td>
          <td class=${input.wasThrottled ? 'throttled' : ''} title=${ifDefined(throttledRequestTitle)}>
            ${input.wasThrottled ? html` <devtools-icon name=watch @click=${revealThrottled}></devtools-icon>` : nothing}
@@ -527,13 +528,8 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
        ${input.serverTimings.length === 0 ? html`
          <tr>
            <td colspan=3>
-             ${uiI18n.getFormatLocalizedString(str_, UIStrings.duringDevelopmentYouCanUseSToAdd, {PH1:
-                                                  UI.XLink.XLink.create(
-                                                    'https://web.dev/custom-metrics/#server-timing-api',
-                                                  i18nString(UIStrings.theServerTimingApi),
-                                                  undefined,
-                                                  undefined,
-                                                  'server-timing-api')})}
+${uiI18n.getFormatLocalizedStringTemplate(str_, UIStrings.duringDevelopmentYouCanUseSToAdd, {PH1:
+                                                  html`<devtools-link href="https://web.dev/custom-metrics/#server-timing-api" .jslogContext=${'server-timing-api'}>${i18nString(UIStrings.theServerTimingApi)}</devtools-link>`})}
            </td>
          </tr>` : nothing}
    </table>`,

package/front_end/panels/network/components/HeaderSectionRow.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
+import '../../../ui/kit/kit.js';
 import '../../../ui/legacy/legacy.js';
 
 import * as Host from '../../../core/host/host.js';
@@ -339,11 +340,11 @@ export class HeaderSectionRow extends HTMLElement {
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
       return html`
-        <x-link href=${blockedDetails.link.url} class="link">
+        <devtools-link href=${blockedDetails.link.url} class="link">
           <devtools-icon name="open-externally" class="inline-icon extra-large" style="color: var(--icon-link);">
           </devtools-icon
           >${i18nString(UIStrings.learnMore)}
-        </x-link>
+        </devtools-link>
       `;
       // clang-format on
     }

package/front_end/panels/network/components/RequestHeaderSection.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 '../../../ui/kit/kit.js';
+
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
 import type * as SDK from '../../../core/sdk/sdk.js';
@@ -81,7 +83,7 @@ function renderProvisionalHeadersWarning(isRequestCached: boolean): Lit.LitTempl
         <div class="explanation" title=${cautionTitle}>
           <devtools-icon class="inline-icon medium" name='warning-filled'>
           </devtools-icon>
-          ${cautionText} <x-link href="https://developer.chrome.com/docs/devtools/network/reference/#provisional-headers" class="link">${i18nString(UIStrings.learnMore)}</x-link>
+          ${cautionText} <devtools-link href="https://developer.chrome.com/docs/devtools/network/reference/#provisional-headers" class="link">${i18nString(UIStrings.learnMore)}</devtools-link>
         </div>
       </div>
     </div>

package/front_end/panels/network/components/RequestHeadersView.css

@@ -147,11 +147,11 @@ div.raw-headers-row {
   color: var(--sys-color-on-surface);
 }
 
-x-link {
+devtools-link {
   position: relative;
 }
 
-x-link .inline-icon {
+devtools-link .inline-icon {
   padding-right: 3px;
 }
 

package/front_end/panels/network/components/RequestHeadersView.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.
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
+import '../../../ui/kit/kit.js';
 
 import * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
@@ -306,22 +307,22 @@ export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableCom
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     return html`
-      <x-link
+      <devtools-link
           href="https://goo.gle/devtools-override"
           class="link devtools-link"
-          jslog=${VisualLogging.link('devtools-override').track({click: true})}
+          .jslogContext=${'devtools-override'}
       >
         <devtools-icon name="help" class="inline-icon medium">
         </devtools-icon>
-      </x-link>
-      <x-link
+      </devtools-link>
+      <devtools-link
           @click=${revealHeadersFile}
           class="link devtools-link"
           title=${UIStrings.revealHeaderOverrides}
-          jslog=${VisualLogging.link('reveal-header-overrides').track({click: true})}
+          .jslogContext=${'reveal-header-overrides'}
       >
         ${fileIcon}${Persistence.NetworkPersistenceManager.HEADERS_FILENAME}
-      </x-link>
+      </devtools-link>
     `;
     // clang-format on
   }

package/front_end/panels/profiler/HeapProfileView.ts

@@ -144,7 +144,7 @@ export class HeapProfileView extends ProfileView implements UI.SearchableView.Se
 
     this.timelineOverview = new HeapTimelineOverview();
 
-    if (Root.Runtime.experiments.isEnabled('sampling-heap-profiler-timeline')) {
+    if (Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.SAMPLING_HEAP_PROFILER_TIMELINE)) {
       this.timelineOverview.addEventListener(Events.IDS_RANGE_CHANGED, this.onIdsRangeChanged.bind(this));
       this.timelineOverview.show(this.element, this.element.firstChild);
       this.timelineOverview.start();
@@ -368,7 +368,7 @@ export class SamplingHeapProfileType extends SamplingHeapProfileTypeBase {
   }
 
   override hasTemporaryView(): boolean {
-    return Root.Runtime.experiments.isEnabled('sampling-heap-profiler-timeline');
+    return Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.SAMPLING_HEAP_PROFILER_TIMELINE);
   }
 
   override startSampling(): void {
@@ -378,7 +378,7 @@ export class SamplingHeapProfileType extends SamplingHeapProfileTypeBase {
     }
 
     void heapProfilerModel.startSampling();
-    if (Root.Runtime.experiments.isEnabled('sampling-heap-profiler-timeline')) {
+    if (Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.SAMPLING_HEAP_PROFILER_TIMELINE)) {
       this.updateTimer = window.setTimeout(() => {
         void this.updateStats();
       }, this.updateIntervalMs);

package/front_end/panels/profiler/HeapSnapshotView.ts

@@ -1337,8 +1337,8 @@ export class HeapSnapshotProfileType extends
   }
 
   override customContent(): Element|null {
-    const showOptionToExposeInternalsInHeapSnapshot =
-        Root.Runtime.experiments.isEnabled('show-option-tp-expose-internals-in-heap-snapshot');
+    const showOptionToExposeInternalsInHeapSnapshot = Root.Runtime.experiments.isEnabled(
+        Root.ExperimentNames.ExperimentName.SHOW_OPTION_TO_EXPOSE_INTERNALS_IN_HEAP_SNAPSHOT);
     const exposeInternalsInHeapSnapshotCheckbox =
         SettingsUI.SettingsUI.createSettingCheckbox(i18nString(UIStrings.exposeInternals), this.exposeInternals);
     this.customContentInternal = exposeInternalsInHeapSnapshotCheckbox;

package/front_end/panels/profiler/profiler-meta.ts

@@ -101,7 +101,7 @@ UI.ViewManager.registerViewExtension({
     const Profiler = await loadProfilerModule();
     return Profiler.LiveHeapProfileView.LiveHeapProfileView.instance();
   },
-  experiment: Root.Runtime.ExperimentName.LIVE_HEAP_PROFILE,
+  experiment: Root.ExperimentNames.ExperimentName.LIVE_HEAP_PROFILE,
 });
 
 UI.ActionRegistration.registerActionExtension({
@@ -115,7 +115,7 @@ UI.ActionRegistration.registerActionExtension({
     return new Profiler.LiveHeapProfileView.ActionDelegate();
   },
   category: UI.ActionRegistration.ActionCategory.MEMORY,
-  experiment: Root.Runtime.ExperimentName.LIVE_HEAP_PROFILE,
+  experiment: Root.ExperimentNames.ExperimentName.LIVE_HEAP_PROFILE,
   options: [
     {
       value: true,
@@ -136,7 +136,7 @@ UI.ActionRegistration.registerActionExtension({
     return new Profiler.LiveHeapProfileView.ActionDelegate();
   },
   category: UI.ActionRegistration.ActionCategory.MEMORY,
-  experiment: Root.Runtime.ExperimentName.LIVE_HEAP_PROFILE,
+  experiment: Root.ExperimentNames.ExperimentName.LIVE_HEAP_PROFILE,
   title: i18nLazyString(UIStrings.startRecordingHeapAllocationsAndReload),
 });
 

package/front_end/panels/protocol_monitor/protocol_monitor-meta.ts

@@ -44,5 +44,5 @@ UI.ViewManager.registerViewExtension({
     const ProtocolMonitor = await loadProtocolMonitorModule();
     return new ProtocolMonitor.ProtocolMonitor.ProtocolMonitorImpl();
   },
-  experiment: Root.Runtime.ExperimentName.PROTOCOL_MONITOR,
+  experiment: Root.ExperimentNames.ExperimentName.PROTOCOL_MONITOR,
 });

package/front_end/panels/recorder/RecorderController.ts

@@ -1,6 +1,7 @@
 // Copyright 2023 The Chromium Authors
 // 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 * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
@@ -691,7 +692,6 @@ export class RecorderController extends LitElement {
     const indexToInsertAt = currentIndex + (position === Components.StepView.AddStepPosition.BEFORE ? 0 : 1);
     steps.splice(indexToInsertAt, 0, {type: Models.Schema.StepType.WaitForElement, selectors: ['body']});
     const recording = {...this.currentRecording, flow: {...this.currentRecording.flow, steps}};
-    Host.userMetrics.recordingEdited(Host.UserMetrics.RecordingEdited.STEP_ADDED);
     this.#stepBreakpointIndexes = new Set([...this.#stepBreakpointIndexes.values()].map(breakpointIndex => {
       if (indexToInsertAt > breakpointIndex) {
         return breakpointIndex;
@@ -722,7 +722,6 @@ export class RecorderController extends LitElement {
     const currentIndex = steps.indexOf(event.step);
     steps.splice(currentIndex, 1);
     const flow = {...this.currentRecording.flow, steps};
-    Host.userMetrics.recordingEdited(Host.UserMetrics.RecordingEdited.STEP_REMOVED);
     this.#stepBreakpointIndexes = new Set([...this.#stepBreakpointIndexes.values()]
                                               .map(breakpointIndex => {
                                                 if (currentIndex > breakpointIndex) {
@@ -957,10 +956,8 @@ export class RecorderController extends LitElement {
     await this.#exportContent(converter.getFilename(this.currentRecording.flow), content);
     const builtInMetric = CONVERTER_ID_TO_METRIC[converter.getId()];
     if (builtInMetric) {
-      Host.userMetrics.recordingExported(builtInMetric);
       UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.recordingExported));
     } else if (converter.getId().startsWith(Converters.ExtensionConverter.EXTENSION_PREFIX)) {
-      Host.userMetrics.recordingExported(Host.UserMetrics.RecordingExported.TO_EXTENSION);
       UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.recordingExported));
     } else {
       throw new Error('Could not find a metric for the export option with id = ' + id);
@@ -992,7 +989,6 @@ export class RecorderController extends LitElement {
     this.#setCurrentRecording(
         await this.#storage.updateRecording(this.currentRecording.storageName, flow),
         {keepBreakpoints: true, updateSession: true});
-    Host.userMetrics.recordingAssertion(Host.UserMetrics.RecordingAssertion.ASSERTION_ADDED);
     await this.updateComplete;
     // FIXME: call a method on the recording view widget.
     await this.#recordingView?.updateComplete;
@@ -1193,13 +1189,11 @@ export class RecorderController extends LitElement {
         <div class="empty-state-header">${i18nString(UIStrings.header)}</div>
         <div class="empty-state-description">
           <span>${i18nString(UIStrings.recordingDescription)}</span>
-          <x-link
-            class="x-link devtools-link"
+          <devtools-link
+            class="devtools-link"
             href=${RECORDER_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>
         <devtools-button .variant=${Buttons.Button.Variant.TONAL} jslogContext=${Actions.RecorderActions.CREATE_RECORDING} @click=${this.#onCreateNewRecording}>${i18nString(UIStrings.createRecording)}</devtools-button>
       </div>
@@ -1474,9 +1468,9 @@ export class RecorderController extends LitElement {
               }
             ></devtools-button>
             <div class="feedback">
-              <x-link class="x-link" title=${i18nString(UIStrings.sendFeedback)} href=${
+              <devtools-link class="devtools-link" title=${i18nString(UIStrings.sendFeedback)} href=${
                 FEEDBACK_URL
-              } jslog=${VisualLogging.link('feedback').track({click: true})}>${i18nString(UIStrings.sendFeedback)}</x-link>
+              } .jslogContext=${'feedback'}>${i18nString(UIStrings.sendFeedback)}</devtools-link>
             </div>
             <div class="separator"></div>
             <devtools-shortcut-dialog

package/front_end/panels/recorder/components/CreateRecordingView.ts

@@ -211,13 +211,13 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
         />
         <label class="row-label" for="selector-attribute">
           <span>${i18nString(UIStrings.selectorAttribute)}</span>
-          <x-link
+          <devtools-link
             class="link" href="https://g.co/devtools/recorder#selector"
             title=${i18nString(UIStrings.learnMore)}
-            jslog=${VisualLogging.link('recorder-selector-help').track({click: true})}>
+            .jslogContext=${'recorder-selector-help'}>
             <devtools-icon name="help">
             </devtools-icon>
-          </x-link>
+          </devtools-link>
         </label>
         <input
           value=${selectorAttribute}
@@ -232,13 +232,13 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
         />
         <label class="row-label">
           <span>${i18nString(UIStrings.selectorTypes)}</span>
-          <x-link
+          <devtools-link
             class="link" href="https://g.co/devtools/recorder#selector"
             title=${i18nString(UIStrings.learnMore)}
-            jslog=${VisualLogging.link('recorder-selector-help').track({click: true})}>
+            .jslogContext=${'recorder-selector-help'}>
             <devtools-icon name="help">
             </devtools-icon>
-          </x-link>
+          </devtools-link>
         </label>
         <div class="checkbox-container">
           ${repeat(selectorTypes, item => {

package/front_end/panels/recorder/components/RecordingView.ts

@@ -177,38 +177,6 @@ const networkConditionPresets = [
   SDK.NetworkManager.Fast4GConditions,
 ];
 
-function converterIdToFlowMetric(
-    converterId: string,
-    ): Host.UserMetrics.RecordingCopiedToClipboard {
-  switch (converterId) {
-    case Models.ConverterIds.ConverterIds.PUPPETEER:
-    case Models.ConverterIds.ConverterIds.PUPPETEER_FIREFOX:
-      return Host.UserMetrics.RecordingCopiedToClipboard.COPIED_RECORDING_WITH_PUPPETEER;
-    case Models.ConverterIds.ConverterIds.JSON:
-      return Host.UserMetrics.RecordingCopiedToClipboard.COPIED_RECORDING_WITH_JSON;
-    case Models.ConverterIds.ConverterIds.REPLAY:
-      return Host.UserMetrics.RecordingCopiedToClipboard.COPIED_RECORDING_WITH_REPLAY;
-    default:
-      return Host.UserMetrics.RecordingCopiedToClipboard.COPIED_RECORDING_WITH_EXTENSION;
-  }
-}
-
-function converterIdToStepMetric(
-    converterId: string,
-    ): Host.UserMetrics.RecordingCopiedToClipboard {
-  switch (converterId) {
-    case Models.ConverterIds.ConverterIds.PUPPETEER:
-    case Models.ConverterIds.ConverterIds.PUPPETEER_FIREFOX:
-      return Host.UserMetrics.RecordingCopiedToClipboard.COPIED_STEP_WITH_PUPPETEER;
-    case Models.ConverterIds.ConverterIds.JSON:
-      return Host.UserMetrics.RecordingCopiedToClipboard.COPIED_STEP_WITH_JSON;
-    case Models.ConverterIds.ConverterIds.REPLAY:
-      return Host.UserMetrics.RecordingCopiedToClipboard.COPIED_STEP_WITH_REPLAY;
-    default:
-      return Host.UserMetrics.RecordingCopiedToClipboard.COPIED_STEP_WITH_EXTENSION;
-  }
-}
-
 function renderSettings({
   settings,
   replaySettingsExpanded,
@@ -1193,8 +1161,6 @@ export class RecordingView extends UI.Widget.Widget {
     }
 
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(text);
-    const metric = step ? converterIdToStepMetric(converter.getId()) : converterIdToFlowMetric(converter.getId());
-    Host.userMetrics.recordingCopiedToClipboard(metric);
   }
 
   #onCopyStepEvent(event: CopyStepEvent): void {
@@ -1223,10 +1189,6 @@ export class RecordingView extends UI.Widget.Widget {
 
   showCodeToggle = (): void => {
     this.#showCodeView = !this.#showCodeView;
-    Host.userMetrics.recordingCodeToggled(
-        this.#showCodeView ? Host.UserMetrics.RecordingCodeToggled.CODE_SHOWN :
-                             Host.UserMetrics.RecordingCodeToggled.CODE_HIDDEN,
-    );
     void this.#convertToCode();
   };
 

package/front_end/panels/recorder/components/ReplaySection.ts

@@ -1,9 +1,7 @@
 // Copyright 2023 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
 
-import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
@@ -66,13 +64,6 @@ const UIStrings = {
   extensionGroup: 'Extensions',
 } as const;
 
-const replaySpeedToMetricSpeedMap = {
-  [PlayRecordingSpeed.NORMAL]: Host.UserMetrics.RecordingReplaySpeed.NORMAL,
-  [PlayRecordingSpeed.SLOW]: Host.UserMetrics.RecordingReplaySpeed.SLOW,
-  [PlayRecordingSpeed.VERY_SLOW]: Host.UserMetrics.RecordingReplaySpeed.VERY_SLOW,
-  [PlayRecordingSpeed.EXTREMELY_SLOW]: Host.UserMetrics.RecordingReplaySpeed.EXTREMELY_SLOW,
-} as const;
-
 const str_ = i18n.i18n.registerUIStrings(
     'panels/recorder/components/ReplaySection.ts',
     UIStrings,
@@ -185,7 +176,6 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
         </devtools-button>
       </div>`,
     target,
-    { host: target },
   );
   // clang-format on
 };
@@ -334,10 +324,6 @@ export class ReplaySection extends UI.Widget.Widget {
       this.#settings.speed = speed;
       this.#settings.replayExtension = '';
     }
-
-    if (replaySpeedToMetricSpeedMap[speed]) {
-      Host.userMetrics.recordingReplaySpeed(replaySpeedToMetricSpeedMap[speed]);
-    }
     this.performUpdate();
   }
 }