chrome-devtools-frontend 1.0.1571573 → 1.0.1572937

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

@@ -528,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/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(Root.Runtime.ExperimentName.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(Root.Runtime.ExperimentName.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(Root.Runtime.ExperimentName.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

@@ -1338,7 +1338,7 @@ export class HeapSnapshotProfileType extends
 
   override customContent(): Element|null {
     const showOptionToExposeInternalsInHeapSnapshot = Root.Runtime.experiments.isEnabled(
-        Root.Runtime.ExperimentName.SHOW_OPTION_TO_EXPOSE_INTERNALS_IN_HEAP_SNAPSHOT);
+        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

@@ -692,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;
@@ -723,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) {
@@ -958,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);
@@ -993,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;
@@ -1195,7 +1190,7 @@ export class RecorderController extends LitElement {
         <div class="empty-state-description">
           <span>${i18nString(UIStrings.recordingDescription)}</span>
           <devtools-link
-            class="x-link devtools-link"
+            class="devtools-link"
             href=${RECORDER_EXPLANATION_URL}
             .jslogContext=${'learn-more'}
           >${i18nString(UIStrings.learnMore)}</devtools-link>
@@ -1473,7 +1468,7 @@ export class RecorderController extends LitElement {
               }
             ></devtools-button>
             <div class="feedback">
-              <devtools-link class="x-link" title=${i18nString(UIStrings.sendFeedback)} href=${
+              <devtools-link class="devtools-link" title=${i18nString(UIStrings.sendFeedback)} href=${
                 FEEDBACK_URL
               } .jslogContext=${'feedback'}>${i18nString(UIStrings.sendFeedback)}</devtools-link>
             </div>

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();
   }
 }

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

@@ -2,7 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-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 type * as Puppeteer from '../../../third_party/puppeteer/puppeteer.js';
@@ -517,19 +516,14 @@ export class StepEditor extends LitElement {
     this.dispatchEvent(new RequestSelectorAttributeEvent(send));
   };
 
-  #handleAddOrRemoveClick =
-      (assignments: DeepImmutable<DeepPartial<Assignments<EditorState>>>, query: string,
-       metric: Host.UserMetrics.RecordingEdited): ((event: Event) => void) => event => {
+  #handleAddOrRemoveClick = (assignments: DeepImmutable<DeepPartial<Assignments<EditorState>>>, query: string):
+      ((event: Event) => void) => event => {
         event.preventDefault();
         event.stopPropagation();
 
         this.#commit(immutableDeepAssign(this.state, assignments));
 
         this.#ensureFocus(query);
-
-        if (metric) {
-          Host.userMetrics.recordingEdited(metric);
-        }
       };
 
   #handleKeyDownEvent = (event: Event): void => {
@@ -551,7 +545,6 @@ export class StepEditor extends LitElement {
     attribute: A,
     // If there are not assignments, then we should ignore the event.
     from(this: StepEditor, value: DataType<A>): DeepImmutable<DeepPartial<Assignments<EditorState>>>|undefined,
-    metric: Host.UserMetrics.RecordingEdited,
   }): ((event: Event) => void) => event => {
     assert(event.target instanceof SuggestionInput.SuggestionInput.SuggestionInput);
     if (event.target.disabled) {
@@ -565,10 +558,6 @@ export class StepEditor extends LitElement {
       return;
     }
     this.#commit(immutableDeepAssign(this.state, assignments));
-
-    if (opts.metric) {
-      Host.userMetrics.recordingEdited(opts.metric);
-    }
   };
 
   #handleTypeInputBlur = async(event: Event): Promise<void> => {
@@ -586,7 +575,6 @@ export class StepEditor extends LitElement {
       return;
     }
     this.#commit(await EditorState.default(value));
-    Host.userMetrics.recordingEdited(Host.UserMetrics.RecordingEdited.TYPE_CHANGED);
   };
 
   #handleAddRowClickEvent = async(event: MouseEvent): Promise<void> => {
@@ -702,14 +690,8 @@ export class StepEditor extends LitElement {
         if (this.state[attribute] === undefined) {
           return;
         }
-        switch (attribute) {
-          case 'properties':
-            Host.userMetrics.recordingAssertion(Host.UserMetrics.RecordingAssertion.PROPERTY_ASSERTION_EDITED);
-            break;
-        }
         return {[attribute]: value};
       },
-      metric: Host.UserMetrics.RecordingEdited.OTHER_EDITING,
     })}
       ></devtools-suggestion-input>
       ${this.#renderDeleteButton(attribute)}
@@ -748,7 +730,6 @@ export class StepEditor extends LitElement {
                       frame: new ArrayAssignments({ [index]: value }),
                     };
                   },
-                  metric: Host.UserMetrics.RecordingEdited.OTHER_EDITING,
                 })}
               ></devtools-suggestion-input>
               ${this.#renderInlineButton({
@@ -764,7 +745,6 @@ export class StepEditor extends LitElement {
                     }),
                   },
                   `devtools-suggestion-input[data-path="frame.${index + 1}"]`,
-                  Host.UserMetrics.RecordingEdited.OTHER_EDITING,
                 ),
               })}
               ${this.#renderInlineButton({
@@ -779,7 +759,6 @@ export class StepEditor extends LitElement {
                     index,
                     frames.length - 2,
                   )}"]`,
-                  Host.UserMetrics.RecordingEdited.OTHER_EDITING,
                 ),
               })}
             </div>
@@ -824,7 +803,6 @@ export class StepEditor extends LitElement {
                   }),
                 },
                 `devtools-suggestion-input[data-path="selectors.${index + 1}.0"]`,
-                Host.UserMetrics.RecordingEdited.SELECTOR_ADDED,
               ),
             })}
             ${this.#renderInlineButton({
@@ -837,7 +815,6 @@ export class StepEditor extends LitElement {
                   index,
                   selectors.length - 2,
                 )}.0"]`,
-                Host.UserMetrics.RecordingEdited.SELECTOR_REMOVED,
               ),
             })}
           </div>
@@ -868,7 +845,6 @@ export class StepEditor extends LitElement {
                       }),
                     };
                   },
-                  metric: Host.UserMetrics.RecordingEdited.SELECTOR_PART_EDITED,
                 })}
               ></devtools-suggestion-input>
               ${this.#renderInlineButton({
@@ -888,7 +864,6 @@ export class StepEditor extends LitElement {
                   `devtools-suggestion-input[data-path="selectors.${index}.${
                     partIndex + 1
                   }"]`,
-                  Host.UserMetrics.RecordingEdited.SELECTOR_PART_ADDED,
                 ),
               })}
               ${this.#renderInlineButton({
@@ -907,7 +882,6 @@ export class StepEditor extends LitElement {
                     partIndex,
                     parts.length - 2,
                   )}"]`,
-                  Host.UserMetrics.RecordingEdited.SELECTOR_PART_REMOVED,
                 ),
               })}
             </div>`;
@@ -952,7 +926,6 @@ export class StepEditor extends LitElement {
                     }),
                   };
                 },
-                metric: Host.UserMetrics.RecordingEdited.OTHER_EDITING,
               })}
             ></devtools-suggestion-input>
           </div>
@@ -975,7 +948,6 @@ export class StepEditor extends LitElement {
                     }),
                   };
                 },
-                metric: Host.UserMetrics.RecordingEdited.OTHER_EDITING,
               })}
             ></devtools-suggestion-input>
           </div>`;
@@ -1009,14 +981,10 @@ export class StepEditor extends LitElement {
                 if (this.state.attributes?.[index]?.name === undefined) {
                   return;
                 }
-                Host.userMetrics.recordingAssertion(
-                  Host.UserMetrics.RecordingAssertion.ATTRIBUTE_ASSERTION_EDITED,
-                );
                 return {
                   attributes: new ArrayAssignments({ [index]: { name } }),
                 };
               },
-              metric: Host.UserMetrics.RecordingEdited.OTHER_EDITING,
             })}
           ></devtools-suggestion-input>
           <span class="separator">:</span>
@@ -1031,14 +999,10 @@ export class StepEditor extends LitElement {
                 if (this.state.attributes?.[index]?.value === undefined) {
                   return;
                 }
-                Host.userMetrics.recordingAssertion(
-                  Host.UserMetrics.RecordingAssertion.ATTRIBUTE_ASSERTION_EDITED,
-                );
                 return {
                   attributes: new ArrayAssignments({ [index]: { value } }),
                 };
               },
-              metric: Host.UserMetrics.RecordingEdited.OTHER_EDITING,
             })}
           ></devtools-suggestion-input>
           ${this.#renderInlineButton({
@@ -1071,7 +1035,6 @@ export class StepEditor extends LitElement {
               `devtools-suggestion-input[data-path="attributes.${
                 index + 1
               }.name"]`,
-              Host.UserMetrics.RecordingEdited.OTHER_EDITING,
             ),
           })}
           ${this.#renderInlineButton({
@@ -1084,7 +1047,6 @@ export class StepEditor extends LitElement {
                 index,
                 attributes.length - 2,
               )}.value"]`,
-              Host.UserMetrics.RecordingEdited.OTHER_EDITING,
             ),
           })}
         </div>`;

package/front_end/panels/recorder/recorderController.css

@@ -129,7 +129,7 @@ devtools-recording-list-view {
   margin-right: 4px;
 }
 
-.feedback .x-link {
+.feedback .devtools-link {
   letter-spacing: 0.03em;
   text-decoration-line: underline;
   font-size: var(--sys-typescale-body4-size);
@@ -138,8 +138,8 @@ devtools-recording-list-view {
   outline-offset: 3px;
 }
 
-.feedback .x-link:focus-visible,
-.empty-state-description .x-link:focus-visible {
+.feedback .devtools-link:focus-visible,
+.empty-state-description .devtools-link:focus-visible {
   outline: -webkit-focus-ring-color auto 1px;
 }
 

package/front_end/panels/security/CookieReportView.ts

@@ -482,26 +482,26 @@ export class CookieReportView extends UI.Widget.VBox {
 
     switch (insight.type) {
       case Protocol.Audits.InsightType.GitHubResource: {
-        const githubLink = UI.XLink.XLink.create(
-            insight.tableEntryUrl ?
-                insight.tableEntryUrl :
-                'https://github.com/privacysandbox/privacy-sandbox-dev-support/blob/main/3pc-migration-readiness.md',
-            i18nString(UIStrings.guidance), undefined, undefined, 'readiness-list-link');
+        const githubLink = html`<devtools-link href=${
+            insight.tableEntryUrl ??
+            'https://github.com/privacysandbox/privacy-sandbox-dev-support/blob/main/3pc-migration-readiness.md'} .jslogContext=${
+            'readiness-list-link'}>${i18nString(UIStrings.guidance)}</devtools-link>`;
 
-        return html`${uiI18n.getFormatLocalizedString(str_, UIStrings.gitHubResource, {
+        return html`${uiI18n.getFormatLocalizedStringTemplate(str_, UIStrings.gitHubResource, {
           PH1: githubLink,
         })}`;
       }
       case Protocol.Audits.InsightType.GracePeriod: {
         const url = SDK.TargetManager.TargetManager.instance().primaryPageTarget()?.inspectedURL();
-        const gracePeriodLink = UI.XLink.XLink.create(
-            'https://developers.google.com/privacy-sandbox/cookies/dashboard?url=' +
-                // The order of the URLs matters - needs to be 1P + 3P.
-                (url ? Common.ParsedURL.ParsedURL.fromString(url)?.host + '+' : '') +
-                (domain.charAt(0) === '.' ? domain.substring(1) : domain),
-            i18nString(UIStrings.reportedIssues), undefined, undefined, 'compatibility-lookup-link');
-
-        return html`${uiI18n.getFormatLocalizedString(str_, UIStrings.gracePeriod, {
+        const gracePeriodLink = html`<devtools-link
+            href=${
+                                    'https://developers.google.com/privacy-sandbox/cookies/dashboard?url=' +
+            // The order of the URLs matters - needs to be 1P + 3P.
+            (url ? Common.ParsedURL.ParsedURL.fromString(url)?.host + '+' : '') +
+            (domain.charAt(0) === '.' ? domain.substring(1) : domain)}
+            .jslogContext=${'compatibility-lookup-link'}>${i18nString(UIStrings.reportedIssues)}</devtools-link>`;
+
+        return html`${uiI18n.getFormatLocalizedStringTemplate(str_, UIStrings.gracePeriod, {
           PH1: gracePeriodLink,
         })}`;
       }

package/front_end/panels/security/cookieControlsView.css

@@ -92,7 +92,7 @@ h3 {
   margin: 0;
 }
 
-.x-link {
+.devtools-link {
   color: var(--sys-color-primary);
   text-decoration-line: underline;
   cursor: pointer;