chrome-devtools-frontend 1.0.1571007 → 1.0.1572937

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;
 }
 
@@ -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`
@@ -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

@@ -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';
@@ -247,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;
@@ -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>
@@ -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

@@ -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/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/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/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?: string;
+  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

@@ -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.ExperimentNames.ExperimentName,
+      menuItem: Common.UIString.LocalizedString): void {
     /** menu handler **/
     function toggleExperiment(): void {
       const checked = Root.Runtime.experiments.isEnabled(experiment);
@@ -668,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 {
@@ -966,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('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) {