chrome-devtools-frontend 1.0.1571007 → 1.0.1571573

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}

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.Runtime.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.Runtime.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.Runtime.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.Runtime.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/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';
@@ -1193,13 +1194,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
+          <devtools-link
             class="x-link 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 +1473,9 @@ export class RecorderController extends LitElement {
               }
             ></devtools-button>
             <div class="feedback">
-              <x-link class="x-link" title=${i18nString(UIStrings.sendFeedback)} href=${
+              <devtools-link class="x-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/recorderController.css

@@ -167,7 +167,7 @@ devtools-recording-list-view {
     font: var(--sys-typescale-body4-regular);
     color: var(--sys-color-on-surface-subtle);
 
-    > x-link {
+    > devtools-link {
       white-space: nowrap;
       margin-left: var(--sys-size-3);
       cursor: pointer;

package/front_end/panels/security/CookieControlsView.ts

@@ -304,8 +304,8 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: object, target: HTMLEleme
             class="medium"
             style="color: var(--icon-warning); margin-right: var(--sys-size-2);">
           </devtools-icon>
-          ${i18nFormatString(UIStrings.upperDeprecationWarning, {
-            PH1: UI.Fragment.html`<x-link class="devtools-link" href="https://privacysandbox.com/news/privacy-sandbox-update/" jslog=${VisualLogging.link('privacy-sandbox-update').track({click: true})}>${i18nString(UIStrings.blogPostLink)}</x-link>`,
+          ${i18nFormatStringTemplate(UIStrings.upperDeprecationWarning, {
+            PH1: html`<devtools-link class="devtools-link" href="https://privacysandbox.com/news/privacy-sandbox-update/" .jslogContext=${'privacy-sandbox-update'}>${i18nString(UIStrings.blogPostLink)}</devtools-link>`,
           })}
         </div>
         <div class="body">

package/front_end/panels/security/CookieReportView.ts

@@ -4,6 +4,7 @@
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import '../../ui/legacy/components/data_grid/data_grid.js';
+import '../../ui/kit/kit.js';
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
@@ -15,7 +16,6 @@ import type * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as uiI18n from '../../ui/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
-import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as NetworkForward from '../network/forward/forward.js';
 
 import cookieReportViewStyles from './cookieReportView.css.js';
@@ -187,6 +187,7 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/security/CookieReportView.ts', UIStrings);
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export const i18nFormatString = uiI18n.getFormatLocalizedString.bind(undefined, str_);
+export const i18nFormatStringTemplate = uiI18n.getFormatLocalizedStringTemplate.bind(undefined, str_);
 
 export interface ViewInput {
   cookieRows: IssuesManager.CookieIssue.CookieReportInfo[];
@@ -221,11 +222,10 @@ const DEFAULT_VIEW: View = (input, output, target) => {
           class="medium"
           style="color: var(--icon-warning); margin-right: var(--sys-size-2);">
         </devtools-icon>
-        ${i18nFormatString(UIStrings.upperDeprecationWarning, {
-    PH1: UI.Fragment
-             .html`<x-link class="devtools-link" href="https://privacysandbox.com/news/privacy-sandbox-update/" jslog=${
-                 VisualLogging.link('privacy-sandbox-update').track({click: true})}>${
-                 i18nString(UIStrings.blogPostLink)}</x-link>`,
+        ${i18nFormatStringTemplate(UIStrings.upperDeprecationWarning, {
+    PH1:
+        html`<devtools-link class="devtools-link" href="https://privacysandbox.com/news/privacy-sandbox-update/" .jslogContext=${
+            'privacy-sandbox-update'}>${i18nString(UIStrings.blogPostLink)}</devtools-link>`,
   })}
       </div>
       <div class="body">
@@ -239,7 +239,7 @@ const DEFAULT_VIEW: View = (input, output, target) => {
         <div class="report overflow-auto">
             <div class="header">
               <h1>${i18nString(UIStrings.title)}</h1>
-              <div class="body">${i18nString(UIStrings.body)} <x-link class="devtools-link" href="https://developers.google.com/privacy-sandbox/cookies/prepare/audit-cookies" jslog=${VisualLogging.link('learn-more').track({click: true})}>${i18nString(UIStrings.learnMoreLink)}</x-link></div>
+              <div class="body">${i18nString(UIStrings.body)} <devtools-link class="devtools-link" href="https://developers.google.com/privacy-sandbox/cookies/prepare/audit-cookies" .jslogContext=${'learn-more'}>${i18nString(UIStrings.learnMoreLink)}</devtools-link></div>
             </div>
             ${input.cookieRows.length > 0 ?
               html`

package/front_end/panels/settings/AISettingsTab.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 Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
@@ -348,14 +350,12 @@ export const AI_SETTINGS_TAB_DEFAULT_VIEW: View = (input, _output, target): void
             <h3 class="expansion-grid-whole-row">${i18nString(UIStrings.thingsToConsider)}</h3>
             ${settingData.toConsiderSettingItems.map(item => renderSettingItem(item))}
             <div class="expansion-grid-whole-row">
-              <x-link
+              <devtools-link
                 href=${settingData.learnMoreLink.url}
                 class="link"
                 tabindex=${tabindex}
-                jslog=${VisualLogging.link(settingData.learnMoreLink.linkJSLogContext).track({
-                  click: true,
-                })}
-              >${i18nString(UIStrings.learnMore)}</x-link>
+                .jslogContext=${settingData.learnMoreLink.linkJSLogContext}
+              >${i18nString(UIStrings.learnMore)}</devtools-link>
             </div>
           </div>
         </div>

package/front_end/panels/settings/components/SyncSection.ts

@@ -4,6 +4,7 @@
 
 import '../../../ui/components/settings/settings.js';
 import '../../../ui/components/tooltips/tooltips.js';
+import '../../../ui/kit/kit.js';
 
 import * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
@@ -179,12 +180,12 @@ const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLElement)
             <div class="plan-details">
               ${getGdpSubscriptionText(input.gdpProfile)}
               &nbsp;·&nbsp;
-              <x-link
-                .jslog=${VisualLogging.link().track({click: true, keydown: 'Enter|Space'}).context('view-profile')}
+              <devtools-link
+                .jslogContext=${'view-profile'}
                 class="link"
                 href=${Host.GdpClient.GOOGLE_DEVELOPER_PROGRAM_PROFILE_LINK}>
                 ${i18nString(UIStrings.viewProfile)}
-              </x-link></div>
+              </devtools-link></div>
               ${hasReceiveBadgesCheckbox ? html`
                 <div class="setting-container" ${ref(el => {
                   output.highlightReceiveBadgesSetting = () => {

package/front_end/panels/sources/CallStackSidebarPane.ts

@@ -45,6 +45,7 @@ import {Directives, html, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import callStackSidebarPaneStyles from './callStackSidebarPane.css.js';
+import {QuickSourceView, SourcesPanel} from './SourcesPanel.js';
 
 const UIStrings = {
   /**
@@ -285,7 +286,9 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
     if (this.maxAsyncStackChainDepth === defaultMaxAsyncStackChainDepth) {
       this.list.selectNextItem(true /* canWrap */, false /* center */);
       const selectedItem = this.list.selectedItem();
-      if (selectedItem) {
+      if (selectedItem &&
+          (UI.Context.Context.instance().flavor(QuickSourceView) ||
+           UI.Context.Context.instance().flavor(SourcesPanel))) {
         this.activateItem(selectedItem);
       }
     }

package/front_end/panels/sources/NavigatorView.ts

@@ -179,7 +179,7 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
   private authoredNode?: NavigatorGroupTreeNode;
   private deployedNode?: NavigatorGroupTreeNode;
   private navigatorGroupByFolderSetting: Common.Settings.Setting<boolean>;
-  private navigatorGroupByAuthoredExperiment?: string;
+  private navigatorGroupByAuthoredExperiment?: Root.Runtime.ExperimentName;
   #workspace!: Workspace.Workspace.WorkspaceImpl;
   private groupByFrame?: boolean;
   private groupByAuthored?: boolean;

package/front_end/panels/sources/SourcesPanel.ts

@@ -429,6 +429,7 @@ export class SourcesPanel extends UI.Panel.Panel implements
       SourcesPanel.updateResizerAndSidebarButtons(this);
     }
     this.editorView.setMainWidget(this.#sourcesView);
+    this.callstackPane.requestUpdate();
   }
 
   override willHide(): void {
@@ -638,7 +639,8 @@ export class SourcesPanel extends UI.Panel.Panel implements
   }
 
   private addExperimentMenuItem(
-      menuSection: UI.ContextMenu.Section, experiment: string, menuItem: Common.UIString.LocalizedString): void {
+      menuSection: UI.ContextMenu.Section, experiment: Root.Runtime.ExperimentName,
+      menuItem: Common.UIString.LocalizedString): void {
     /** menu handler **/
     function toggleExperiment(): void {
       const checked = Root.Runtime.experiments.isEnabled(experiment);

package/front_end/panels/timeline/CompatibilityTracksAppender.ts

@@ -327,7 +327,7 @@ export class CompatibilityTracksAppender {
       }
     };
     const threads = Trace.Handlers.Threads.threadsInTrace(this.#parsedTrace.data);
-    const showAllEvents = Root.Runtime.experiments.isEnabled('timeline-show-all-events');
+    const showAllEvents = Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_SHOW_ALL_EVENTS);
 
     for (const {pid, tid, name, type, entries, tree} of threads) {
       if (this.#parsedTrace.data.Meta.traceIsGeneric) {

package/front_end/panels/timeline/ThreadAppender.ts

@@ -151,7 +151,7 @@ export class ThreadAppender implements TrackAppender {
   #headerAppended = false;
   readonly threadType: Trace.Handlers.Threads.ThreadType = Trace.Handlers.Threads.ThreadType.MAIN_THREAD;
   readonly isOnMainFrame: boolean;
-  #showAllEventsEnabled = Root.Runtime.experiments.isEnabled('timeline-show-all-events');
+  #showAllEventsEnabled = Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_SHOW_ALL_EVENTS);
   #url = '';
   #headerNestingLevel: number|null = null;
   constructor(

package/front_end/panels/timeline/TimelineController.ts

@@ -229,7 +229,7 @@ export class TimelineController implements Tracing.TracingManager.TracingManager
     // 'disabled-by-default-v8.cpu_profiler'
     //   └ default: on, option: enableJSSampling
     const categoriesArray = [
-      Root.Runtime.experiments.isEnabled('timeline-show-all-events') ? '*' : '-*',
+      Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_SHOW_ALL_EVENTS) ? '*' : '-*',
       Trace.Types.Events.Categories.Console,
       Trace.Types.Events.Categories.Loading,
       Trace.Types.Events.Categories.UserTiming,
@@ -251,13 +251,14 @@ export class TimelineController implements Tracing.TracingManager.TracingManager
       'navigation,rail',
     ];
 
-    if (Root.Runtime.experiments.isEnabled('timeline-v8-runtime-call-stats') && options.enableJSSampling) {
+    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_V8_RUNTIME_CALL_STATS) &&
+        options.enableJSSampling) {
       categoriesArray.push(disabledByDefault('v8.runtime_stats_sampling'));
     }
     if (options.enableJSSampling) {
       categoriesArray.push(disabledByDefault('v8.cpu_profiler'));
     }
-    if (Root.Runtime.experiments.isEnabled('timeline-invalidation-tracking')) {
+    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_INVALIDATION_TRACKING)) {
       categoriesArray.push(disabledByDefault('devtools.timeline.invalidationTracking'));
     }
     if (options.capturePictures) {

package/front_end/panels/timeline/TimelinePanel.ts

@@ -732,8 +732,9 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
 
   #instantiateNewModel(): Trace.TraceModel.Model {
     const config = Trace.Types.Configuration.defaults();
-    config.showAllEvents = Root.Runtime.experiments.isEnabled('timeline-show-all-events');
-    config.includeRuntimeCallStats = Root.Runtime.experiments.isEnabled('timeline-v8-runtime-call-stats');
+    config.showAllEvents = Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_SHOW_ALL_EVENTS);
+    config.includeRuntimeCallStats =
+        Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_V8_RUNTIME_CALL_STATS);
     config.debugMode = Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_DEBUG_MODE);
 
     const traceEngineModel = Trace.TraceModel.Model.createWithAllHandlers(config);
@@ -2089,7 +2090,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
 
   #applyActiveFilters(traceIsGeneric: boolean, exclusiveFilter: Trace.Extras.TraceFilter.TraceFilter|null = null):
       void {
-    if (traceIsGeneric || Root.Runtime.experiments.isEnabled('timeline-show-all-events')) {
+    if (traceIsGeneric || Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_SHOW_ALL_EVENTS)) {
       return;
     }
 

package/front_end/panels/whats_new/ReleaseNoteView.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import '../../ui/components/markdown_view/markdown_view.js';
+import '../../ui/kit/kit.js';
 
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
@@ -87,14 +88,14 @@ export class ReleaseNoteView extends UI.Panel.Panel {
             <div class="video-container">
               ${releaseNote.videoLinks.map((value: {description: string, link: Platform.DevToolsPath.UrlString, type?: VideoType}) => {
                 return html`
-                  <x-link
+                  <devtools-link
                   href=${value.link}
-                  jslog=${VisualLogging.link().track({click: true}).context('learn-more')}>
+                  .jslogContext=${'learn-more'}>
                     <div class="video">
                       <img class="thumbnail" src=${input.getThumbnailPath(value.type ?? VideoType.WHATS_NEW)}>
                       <div class="thumbnail-description"><span>${value.description}</span></div>
                     </div>
-                </x-link>
+                </devtools-link>
                 `;
               })}
             </div>

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: https://chromium.googlesource.com/chromium/src
 Version: N/A
-Revision: 45ca275b4749431e27f80dc5defcf893accdf583
+Revision: 68ce69fc7f71cb8b57403cba5397e1d12753b37c
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/ui/components/markdown_view/CodeBlock.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
-import '../../../ui/legacy/legacy.js'; // for x-link
+import '../../../ui/kit/kit.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as CodeMirror from '../../../third_party/codemirror.next/codemirror.next.js';
@@ -204,12 +204,9 @@ export class CodeBlock extends HTMLElement {
   #renderNotice(): Lit.TemplateResult {
     // clang-format off
     return html`<p class="notice">
-      <x-link class="link" href="https://support.google.com/legal/answer/13505487" jslog=${
-        VisualLogging.link('code-disclaimer').track({
-          click: true,
-        })}>
+      <devtools-link class="link" href="https://support.google.com/legal/answer/13505487" .jslogContext=${'code-disclaimer'}>
         ${i18nString(UIStrings.disclaimer)}
-      </x-link>
+      </devtools-link>
     </p>`;
     // clang-format on
   }

package/front_end/ui/components/markdown_view/MarkdownLink.ts

@@ -3,10 +3,9 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
-import '../../legacy/legacy.js'; // Required for <x-link>.
+import '../../kit/kit.js';
 
 import {html, render} from '../../lit/lit.js';
-import * as VisualLogging from '../../visual_logging/visual_logging.js';
 
 import markdownLinkStyles from './markdownLink.css.js';
 import {getMarkdownLink} from './MarkdownLinksMap.js';
@@ -38,8 +37,8 @@ export class MarkdownLink extends HTMLElement {
     // clang-format off
     const output = html`
       <style>${markdownLinkStyles}</style>
-      <x-link class="devtools-link" href=${this.#linkUrl} jslog=${VisualLogging.link().track({click: true})}
-      >${this.#linkText}</x-link>`;
+      <devtools-link class="devtools-link" href=${this.#linkUrl}
+      >${this.#linkText}</devtools-link>`;
     render(output, this.#shadow, {host: this});
     // clang-format on
   }

package/front_end/ui/components/panel_feedback/PanelFeedback.ts

@@ -3,13 +3,12 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
-import '../../legacy/legacy.js';
+import '../../kit/kit.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
 import * as ComponentHelpers from '../../components/helpers/helpers.js';
 import {html, render} from '../../lit/lit.js';
-import * as VisualLogging from '../../visual_logging/visual_logging.js';
 
 import panelFeedbackStyles from './panelFeedback.css.js';
 
@@ -68,14 +67,14 @@ export class PanelFeedback extends HTMLElement {
         <h2 class="flex">
           <devtools-icon name="experiment" class="extra-large" style="color: var(--icon-primary);"></devtools-icon> ${i18nString(UIStrings.previewFeature)}
         </h2>
-        <p>${i18nString(UIStrings.previewText)} <x-link href=${this.#props.feedbackUrl} jslog=${VisualLogging.link('feedback').track({click: true})}>${i18nString(UIStrings.previewTextFeedbackLink)}</x-link></p>
+        <p>${i18nString(UIStrings.previewText)} <devtools-link href=${this.#props.feedbackUrl} .jslogContext=${'feedback'}>${i18nString(UIStrings.previewTextFeedbackLink)}</devtools-link></p>
         <div class="video">
           <div class="thumbnail">
             <img src=${videoThumbnailUrl} role="presentation" />
           </div>
           <div class="video-description">
             <h3>${i18nString(UIStrings.videoAndDocumentation)}</h3>
-            <x-link class="quick-start-link" href=${this.#props.quickStartUrl} jslog=${VisualLogging.link('css-overview.quick-start').track({click: true})}>${this.#props.quickStartLinkText}</x-link>
+            <devtools-link class="quick-start-link" href=${this.#props.quickStartUrl} .jslogContext=${'css-overview.quick-start'}>${this.#props.quickStartLinkText}</devtools-link>
           </div>
         </div>
       </div>

package/front_end/ui/components/panel_feedback/PreviewToggle.ts

@@ -4,6 +4,7 @@
 /* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
 import '../../../ui/legacy/legacy.js';
+import '../../../ui/kit/kit.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Root from '../../../core/root/root.js';
@@ -45,7 +46,7 @@ export class PreviewToggle extends HTMLElement {
   #helperText: string|null = null;
   #feedbackURL: string|null = null;
   #learnMoreURL: string|undefined;
-  #experiment = '';
+  #experiment: Root.Runtime.ExperimentName|'' = '';
   #onChangeCallback?: (checked: boolean) => void;
 
   set data(data: PreviewToggleData) {
@@ -59,7 +60,7 @@ export class PreviewToggle extends HTMLElement {
   }
 
   #render(): void {
-    const checked = Root.Runtime.experiments.isEnabled(this.#experiment);
+    const checked = this.#experiment && Root.Runtime.experiments.isEnabled(this.#experiment);
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     render(
@@ -75,14 +76,14 @@ export class PreviewToggle extends HTMLElement {
           </devtools-checkbox>
         <div class="spacer"></div>
         ${this.#feedbackURL && !this.#helperText
-          ? html`<div class="feedback"><x-link class="x-link" href=${this.#feedbackURL}>${i18nString(UIStrings.shortFeedbackLink)}</x-link></div>`
+          ? html`<div class="feedback"><devtools-link class="x-link" href=${this.#feedbackURL}>${i18nString(UIStrings.shortFeedbackLink)}</devtools-link></div>`
           : nothing}
         ${this.#learnMoreURL
-          ? html`<div class="learn-more"><x-link class="x-link" href=${this.#learnMoreURL}>${i18nString(UIStrings.learnMoreLink)}</x-link></div>`
+          ? html`<div class="learn-more"><devtools-link class="x-link" href=${this.#learnMoreURL}>${i18nString(UIStrings.learnMoreLink)}</devtools-link></div>`
           : nothing}
         <div class="helper">
           ${this.#helperText && this.#feedbackURL
-            ? html`<p>${this.#helperText} <x-link class="x-link" href=${this.#feedbackURL}>${i18nString(UIStrings.previewTextFeedbackLink)}</x-link></p>`
+            ? html`<p>${this.#helperText} <devtools-link class="x-link" href=${this.#feedbackURL}>${i18nString(UIStrings.previewTextFeedbackLink)}</devtools-link></p>`
             : nothing}
         </div>
       </div>`,
@@ -95,7 +96,9 @@ export class PreviewToggle extends HTMLElement {
 
   #checkboxChanged(event: Event): void {
     const checked = (event.target as HTMLInputElement).checked;
-    Root.Runtime.experiments.setEnabled(this.#experiment, checked);
+    if (this.#experiment) {
+      Root.Runtime.experiments.setEnabled(this.#experiment, checked);
+    }
     this.#onChangeCallback?.(checked);
   }
 }

package/front_end/ui/components/panel_feedback/panelFeedback.css

@@ -54,7 +54,7 @@ h3 {
   gap: 20px;
 }
 
-x-link {
+devtools-link {
   color: var(--sys-color-primary);
   text-decoration-line: underline;
 }
@@ -72,7 +72,7 @@ x-link.quick-start-link {
 }
 
 @media (forced-colors: active) {
-  x-link {
+  devtools-link {
     color: linktext;
   }
 }

package/front_end/ui/kit/link/Link.ts

@@ -82,20 +82,7 @@ export class Link extends HTMLElement {
   }
 
   #onJslogContextChange(): void {
-    let jslogContext = this.jslogContext;
-    if (!jslogContext) {
-      try {
-        if (!this.href) {
-          return;
-        }
-        const urlForContext = new URL(this.href);
-        urlForContext.search = '';
-        jslogContext = Platform.StringUtilities.toKebabCase(urlForContext.toString());
-      } catch {
-        return;
-      }
-    }
-
+    const jslogContext = this.jslogContext ?? undefined;
     const jslog = VisualLogging.link().track({click: true, keydown: 'Enter|Space'}).context(jslogContext);
     this.setAttribute('jslog', jslog.toString());
   }

package/front_end/ui/legacy/components/color_picker/ContrastDetails.ts

@@ -242,7 +242,7 @@ export class ContrastDetails extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.setVisible(true);
     this.hideNoContrastInfoAvailableMessage();
 
-    const isAPCAEnabled = Root.Runtime.experiments.isEnabled('apca');
+    const isAPCAEnabled = Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.APCA);
 
     const fgColor = this.contrastInfo.color();
     const bgColor = this.contrastInfo.bgColor();