chrome-devtools-frontend 1.0.1571573 → 1.0.1573331

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

@@ -224,8 +224,8 @@ const DEFAULT_VIEW: View = (input, output, target) => {
         </devtools-icon>
         ${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>`,
+        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)} <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 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`
@@ -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;

package/front_end/panels/security/cookieReportView.css

@@ -33,7 +33,7 @@
   font: var(--sys-typescale-body4-regular);
 }
 
-.x-link {
+.devtools-link {
   color: var(--sys-color-primary);
   text-decoration-line: underline;
   cursor: pointer;

package/front_end/panels/settings/AISettingsTab.ts

@@ -249,7 +249,7 @@ interface AiSettingParams {
 
 interface ViewInput {
   disabledReasons: string[];
-  sharedDisclaimerBulletPoints: Array<{icon: string, text: Common.UIString.LocalizedString|Lit.TemplateResult}>;
+  sharedDisclaimerBulletPoints: Array<{icon: string, text: Common.UIString.LocalizedString|Lit.LitTemplate}>;
   settingToParams: Map<Common.Settings.Setting<boolean>, AiSettingParams>;
   expandSetting(setting: Common.Settings.Setting<boolean>): void;
   toggleSetting(setting: Common.Settings.Setting<boolean>, ev: Event): void;
@@ -658,13 +658,11 @@ export class AISettingsTab extends UI.Widget.VBox {
     this.requestUpdate();
   }
 
-  #getSharedDisclaimerBulletPoints(): Array<{icon: string, text: Common.UIString.LocalizedString|Lit.TemplateResult}> {
-    const tosLink = UI.XLink.XLink.create(
-        'https://policies.google.com/terms', i18nString(UIStrings.termsOfService), undefined, undefined,
-        'terms-of-service');
-    const privacyNoticeLink = UI.XLink.XLink.create(
-        'https://policies.google.com/privacy', i18nString(UIStrings.privacyNotice), undefined, undefined,
-        'privacy-notice');
+  #getSharedDisclaimerBulletPoints(): Array<{icon: string, text: Common.UIString.LocalizedString|Lit.LitTemplate}> {
+    const tosLink = html`<devtools-link href="https://policies.google.com/terms" .jslogContext=${'terms-of-service'}>${
+        i18nString(UIStrings.termsOfService)}</devtools-link>`;
+    const privacyNoticeLink = html`<devtools-link href="https://policies.google.com/privacy" .jslogContext=${
+                                  'privacy-notice'}>${i18nString(UIStrings.privacyNotice)}</devtools-link>`;
     const noLogging = Root.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue ===
         Root.Runtime.GenAiEnterprisePolicyValue.ALLOW_WITHOUT_LOGGING;
 
@@ -680,10 +678,10 @@ export class AISettingsTab extends UI.Widget.VBox {
       },
       {
         icon: 'policy',
-        text: html`${uiI18n.getFormatLocalizedString(str_, UIStrings.termsOfServicePrivacyNotice, {
+        text: uiI18n.getFormatLocalizedStringTemplate(str_, UIStrings.termsOfServicePrivacyNotice, {
           PH1: tosLink,
           PH2: privacyNoticeLink,
-        })}`,
+        }),
       },
     ];
   }

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

@@ -181,7 +181,7 @@ const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLElement)
               ${getGdpSubscriptionText(input.gdpProfile)}
                · 
               <devtools-link
-                .jslogContext=${'view-profile'}
+                jslogcontext="view-profile"
                 class="link"
                 href=${Host.GdpClient.GOOGLE_DEVELOPER_PROGRAM_PROFILE_LINK}>
                 ${i18nString(UIStrings.viewProfile)}

package/front_end/panels/settings/emulation/components/UserAgentClientHintsForm.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 i18n from '../../../../core/i18n/i18n.js';
@@ -488,13 +489,6 @@ export class UserAgentClientHintsForm extends HTMLElement {
     this.dispatchEvent(new ClientHintsChangeEvent());
   };
 
-  #handleLinkPress = (event: KeyboardEvent): void => {
-    if (event.code === 'Space' || event.code === 'Enter') {
-      event.preventDefault();
-      (event.target as HTMLAnchorElement).click();
-    }
-  };
-
   #handleSubmit = (event: Event): void => {
     event.preventDefault();
     if (this.#showSubmitButton) {
@@ -869,17 +863,15 @@ export class UserAgentClientHintsForm extends HTMLElement {
             ${i18nString(UIStrings.title)}
           </div>
           <devtools-icon tabindex=${this.#isFormDisabled ? '-1' : '0'} class=info-icon name=info aria-label=${i18nString(UIStrings.userAgentClientHintsInfo)} title=${i18nString(UIStrings.userAgentClientHintsInfo)}></devtools-icon>
-          <x-link
+          <devtools-link
            tabindex=${this.#isFormDisabled ? '-1' : '0'}
            href="https://web.dev/user-agent-client-hints/"
-           target="_blank"
            class="link"
-           @keypress=${this.#handleLinkPress}
            aria-label=${i18nString(UIStrings.learnMore)}
-           jslog=${VisualLogging.link('learn-more').track({click: true})}
+           jslogcontext="learn-more"
           >
             ${i18nString(UIStrings.learnMore)}
-          </x-link>
+          </devtools-link>
         </div>
         <form
           id="form-container"

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

@@ -141,7 +141,7 @@ UI.ViewManager.registerViewExtension({
   title: i18nLazyString(UIStrings.experiments),
   commandPrompt: i18nLazyString(UIStrings.showExperiments),
   order: 3,
-  experiment: Root.Runtime.ExperimentName.ALL,
+  experiment: Root.ExperimentNames.ExperimentName.ALL,
   async loadView() {
     const Settings = await loadSettingsModule();
     return new Settings.SettingsScreen.ExperimentsSettingsTab();

package/front_end/panels/sources/BreakpointEditDialog.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-imperative-dom-api */
 
+import '../../ui/kit/kit.js';
 import '../../ui/legacy/legacy.js';
 
 import * as Common from '../../core/common/common.js';
@@ -141,9 +142,9 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
     </div>
     <div class=link-wrapper>
       <devtools-icon name=open-externally class=link-icon></devtools-icon>
-      <x-link class="link devtools-link" tabindex="0" href="https://goo.gle/devtools-loc"
-                                          jslog=${VisualLogging.link('learn-more')}>${
-                     i18nString(UIStrings.learnMoreOnBreakpointTypes)}</x-link>
+      <devtools-link class="devtools-link" href="https://goo.gle/devtools-loc"
+                                          jslogcontext="learn-more">${
+                     i18nString(UIStrings.learnMoreOnBreakpointTypes)}</devtools-link>
     </div>
     `,
       // clang-format on

package/front_end/panels/sources/FilteredUISourceCodeListProvider.ts

@@ -74,7 +74,7 @@ export class FilteredUISourceCodeListProvider extends QuickOpen.FilteredListWidg
     if (this.uiSourceCodeIds.has(uiSourceCode.canonicalScriptId())) {
       return false;
     }
-    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.JUST_MY_CODE) &&
+    if (Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.JUST_MY_CODE) &&
         Workspace.IgnoreListManager.IgnoreListManager.instance().isUserOrSourceMapIgnoreListedUISourceCode(
             uiSourceCode)) {
       return false;

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?: Root.Runtime.ExperimentName;
+  private navigatorGroupByAuthoredExperiment?: Root.ExperimentNames.ExperimentName;
   #workspace!: Workspace.Workspace.WorkspaceImpl;
   private groupByFrame?: boolean;
   private groupByAuthored?: boolean;
@@ -217,7 +217,7 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
     this.navigatorGroupByFolderSetting = Common.Settings.Settings.instance().moduleSetting('navigator-group-by-folder');
     this.navigatorGroupByFolderSetting.addChangeListener(this.groupingChanged.bind(this));
     if (enableAuthoredGrouping) {
-      this.navigatorGroupByAuthoredExperiment = Root.Runtime.ExperimentName.AUTHORED_DEPLOYED_GROUPING;
+      this.navigatorGroupByAuthoredExperiment = Root.ExperimentNames.ExperimentName.AUTHORED_DEPLOYED_GROUPING;
     }
 
     Workspace.IgnoreListManager.IgnoreListManager.instance().addChangeListener(this.ignoreListChanged.bind(this));
@@ -457,7 +457,7 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
   }
 
   private addUISourceCode(uiSourceCode: Workspace.UISourceCode.UISourceCode): void {
-    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.JUST_MY_CODE) &&
+    if (Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.JUST_MY_CODE) &&
         Workspace.IgnoreListManager.IgnoreListManager.instance().isUserOrSourceMapIgnoreListedUISourceCode(
             uiSourceCode)) {
       return;
@@ -1188,7 +1188,7 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
   }
 
   private ignoreListChanged(): void {
-    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.JUST_MY_CODE)) {
+    if (Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.JUST_MY_CODE)) {
       this.groupingChanged();
     } else {
       this.rootNode.updateTitleRecursive();

package/front_end/panels/sources/SourcesPanel.ts

@@ -639,7 +639,7 @@ export class SourcesPanel extends UI.Panel.Panel implements
   }
 
   private addExperimentMenuItem(
-      menuSection: UI.ContextMenu.Section, experiment: Root.Runtime.ExperimentName,
+      menuSection: UI.ContextMenu.Section, experiment: Root.ExperimentNames.ExperimentName,
       menuItem: Common.UIString.LocalizedString): void {
     /** menu handler **/
     function toggleExperiment(): void {
@@ -670,10 +670,11 @@ export class SourcesPanel extends UI.Panel.Panel implements
         {checked: groupByFolderSetting.get(), jslogContext: groupByFolderSetting.name});
 
     this.addExperimentMenuItem(
-        contextMenu.viewSection(), Root.Runtime.ExperimentName.AUTHORED_DEPLOYED_GROUPING,
+        contextMenu.viewSection(), Root.ExperimentNames.ExperimentName.AUTHORED_DEPLOYED_GROUPING,
         i18nString(UIStrings.groupByAuthored));
     this.addExperimentMenuItem(
-        contextMenu.viewSection(), Root.Runtime.ExperimentName.JUST_MY_CODE, i18nString(UIStrings.hideIgnoreListed));
+        contextMenu.viewSection(), Root.ExperimentNames.ExperimentName.JUST_MY_CODE,
+        i18nString(UIStrings.hideIgnoreListed));
   }
 
   updateLastModificationTime(): void {
@@ -968,7 +969,7 @@ export class SourcesPanel extends UI.Panel.Panel implements
     const eventTarget = (event.target as Node);
     if (!uiSourceCode.project().isServiceProject() &&
         !eventTarget.isSelfOrDescendant(this.navigatorTabbedLocation.widget().element) &&
-        !(Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.JUST_MY_CODE) &&
+        !(Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.JUST_MY_CODE) &&
           Workspace.IgnoreListManager.IgnoreListManager.instance().isUserOrSourceMapIgnoreListedUISourceCode(
               uiSourceCode))) {
       contextMenu.revealSection().appendItem(

package/front_end/panels/sources/components/HeadersView.ts

@@ -377,10 +377,10 @@ export class HeadersViewComponent extends HTMLElement {
         ${i18nString(UIStrings.addOverrideRule)}
       </devtools-button>
       <div class="learn-more-row">
-        <x-link
+        <devtools-link
             href="https://goo.gle/devtools-override"
             class="link"
-            jslog=${VisualLogging.link('learn-more').track({click: true})}>${i18nString(UIStrings.learnMore)}</x-link>
+            jslogContext=${'learn-more'}>${i18nString(UIStrings.learnMore)}</devtools-link>
       </div>
     `, this.#shadow, {host: this});
     // clang-format on

package/front_end/panels/timeline/CompatibilityTracksAppender.ts

@@ -42,7 +42,7 @@ function isShowPostMessageEventsEnabled(): boolean {
   // cache is updated automatically.
   if (showPostMessageEvents === undefined) {
     showPostMessageEvents =
-        Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_SHOW_POST_MESSAGE_EVENTS);
+        Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.TIMELINE_SHOW_POST_MESSAGE_EVENTS);
   }
   return showPostMessageEvents;
 }
@@ -327,7 +327,8 @@ export class CompatibilityTracksAppender {
       }
     };
     const threads = Trace.Handlers.Threads.threadsInTrace(this.#parsedTrace.data);
-    const showAllEvents = Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_SHOW_ALL_EVENTS);
+    const showAllEvents =
+        Root.Runtime.experiments.isEnabled(Root.ExperimentNames.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,8 @@ 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(Root.Runtime.ExperimentName.TIMELINE_SHOW_ALL_EVENTS);
+  #showAllEventsEnabled =
+      Root.Runtime.experiments.isEnabled(Root.ExperimentNames.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(Root.Runtime.ExperimentName.TIMELINE_SHOW_ALL_EVENTS) ? '*' : '-*',
+      Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.TIMELINE_SHOW_ALL_EVENTS) ? '*' : '-*',
       Trace.Types.Events.Categories.Console,
       Trace.Types.Events.Categories.Loading,
       Trace.Types.Events.Categories.UserTiming,
@@ -251,14 +251,14 @@ export class TimelineController implements Tracing.TracingManager.TracingManager
       'navigation,rail',
     ];
 
-    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_V8_RUNTIME_CALL_STATS) &&
+    if (Root.Runtime.experiments.isEnabled(Root.ExperimentNames.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(Root.Runtime.ExperimentName.TIMELINE_INVALIDATION_TRACKING)) {
+    if (Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.TIMELINE_INVALIDATION_TRACKING)) {
       categoriesArray.push(disabledByDefault('devtools.timeline.invalidationTracking'));
     }
     if (options.capturePictures) {

package/front_end/panels/timeline/TimelinePanel.ts

@@ -732,10 +732,11 @@ 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(Root.Runtime.ExperimentName.TIMELINE_SHOW_ALL_EVENTS);
+    config.showAllEvents =
+        Root.Runtime.experiments.isEnabled(Root.ExperimentNames.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);
+        Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.TIMELINE_V8_RUNTIME_CALL_STATS);
+    config.debugMode = Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.TIMELINE_DEBUG_MODE);
 
     const traceEngineModel = Trace.TraceModel.Model.createWithAllHandlers(config);
 
@@ -2090,7 +2091,8 @@ 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(Root.Runtime.ExperimentName.TIMELINE_SHOW_ALL_EVENTS)) {
+    if (traceIsGeneric ||
+        Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.TIMELINE_SHOW_ALL_EVENTS)) {
       return;
     }