chrome-devtools-frontend 1.0.1571573 → 1.0.1573331

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -576,14 +576,17 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     const nodeId = this.node()?.id;
     const parentNodeId = this.matchedStyles?.getParentLayoutNodeId();
 
-    const [computedStyles, parentsComputedStyles] =
-        await Promise.all([this.fetchComputedStylesFor(nodeId), this.fetchComputedStylesFor(parentNodeId)]);
+    const [computedStyles, parentsComputedStyles, computedStyleExtraFields] = await Promise.all([
+      this.fetchComputedStylesFor(nodeId), this.fetchComputedStylesFor(parentNodeId),
+      this.fetchComputedStyleExtraFieldsFor(nodeId)
+    ]);
 
     if (signal.aborted) {
       return;
     }
 
-    await this.innerRebuildUpdate(signal, this.matchedStyles, computedStyles, parentsComputedStyles);
+    await this.innerRebuildUpdate(
+        signal, this.matchedStyles, computedStyles, parentsComputedStyles, computedStyleExtraFields);
 
     if (signal.aborted) {
       return;
@@ -633,6 +636,15 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     return await node.domModel().cssModel().getComputedStyle(nodeId);
   }
 
+  private async fetchComputedStyleExtraFieldsFor(nodeId: Protocol.DOM.NodeId|undefined):
+      Promise<Protocol.CSS.ComputedStyleExtraFields|null> {
+    const node = this.node();
+    if (node === null || nodeId === undefined) {
+      return null;
+    }
+    return await node.domModel().cssModel().getComputedStyleExtraFields(nodeId);
+  }
+
   override onResize(): void {
     void this.resizeThrottler.schedule(this.#resize.bind(this));
   }
@@ -914,7 +926,8 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
 
   private async innerRebuildUpdate(
       signal: AbortSignal, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles|null,
-      computedStyles: Map<string, string>|null, parentsComputedStyles: Map<string, string>|null): Promise<void> {
+      computedStyles: Map<string, string>|null, parentsComputedStyles: Map<string, string>|null,
+      computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null): Promise<void> {
     // ElementsSidebarPane's throttler schedules this method. Usually,
     // rebuild is suppressed while editing (see onCSSModelChanged()), but we need a
     // 'force' flag since the currently running throttler process cannot be canceled.
@@ -940,7 +953,8 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     }
 
     const blocks = await this.rebuildSectionsForMatchedStyleRules(
-        (matchedStyles as SDK.CSSMatchedStyles.CSSMatchedStyles), computedStyles, parentsComputedStyles);
+        (matchedStyles as SDK.CSSMatchedStyles.CSSMatchedStyles), computedStyles, parentsComputedStyles,
+        computedStyleExtraFields);
 
     if (signal.aborted) {
       return;
@@ -1023,13 +1037,16 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
 
   rebuildSectionsForMatchedStyleRulesForTest(
       matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles, computedStyles: Map<string, string>|null,
-      parentsComputedStyles: Map<string, string>|null): Promise<SectionBlock[]> {
-    return this.rebuildSectionsForMatchedStyleRules(matchedStyles, computedStyles, parentsComputedStyles);
+      parentsComputedStyles: Map<string, string>|null,
+      computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null): Promise<SectionBlock[]> {
+    return this.rebuildSectionsForMatchedStyleRules(
+        matchedStyles, computedStyles, parentsComputedStyles, computedStyleExtraFields);
   }
 
   private async rebuildSectionsForMatchedStyleRules(
       matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles, computedStyles: Map<string, string>|null,
-      parentsComputedStyles: Map<string, string>|null): Promise<SectionBlock[]> {
+      parentsComputedStyles: Map<string, string>|null,
+      computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null): Promise<SectionBlock[]> {
     if (this.idleCallbackManager) {
       this.idleCallbackManager.discard();
     }
@@ -1077,8 +1094,8 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
           style.type === SDK.CSSStyleDeclaration.Type.Animation;
       if (lastBlock && (!isTransitionOrAnimationStyle || style.allProperties().length > 0)) {
         this.idleCallbackManager.schedule(() => {
-          const section =
-              new StylePropertiesSection(this, matchedStyles, style, sectionIdx, computedStyles, parentsComputedStyles);
+          const section = new StylePropertiesSection(
+              this, matchedStyles, style, sectionIdx, computedStyles, parentsComputedStyles, computedStyleExtraFields);
           sectionIdx++;
           lastBlock.sections.push(section);
         });
@@ -1151,7 +1168,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
         const lastBlock = blocks[blocks.length - 1];
         this.idleCallbackManager.schedule(() => {
           const section = new HighlightPseudoStylePropertiesSection(
-              this, matchedStyles, style, sectionIdx, computedStyles, parentsComputedStyles);
+              this, matchedStyles, style, sectionIdx, computedStyles, parentsComputedStyles, computedStyleExtraFields);
           sectionIdx++;
           lastBlock.sections.push(section);
         });

package/front_end/panels/elements/components/CSSHintDetailsView.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';
@@ -51,9 +52,9 @@ export class CSSHintDetailsView extends HTMLElement {
           ` : ''}
           ${link ? html`
                       <div class="footer">
-                        <x-link id="learn-more" href=${link} class="clickable underlined unbreakable-text">
+                        <devtools-link id="learn-more" href=${link} class="clickable underlined unbreakable-text">
                             ${i18nString(UIStrings.learnMore)}
-                        </x-link>
+                        </devtools-link>
                       </div>
                   `: ''}
         </div>

package/front_end/panels/elements/components/CSSPropertyDocsView.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 Common from '../../../core/common/common.js';
@@ -250,13 +251,13 @@ export class CSSPropertyDocsView extends HTMLElement {
         ` : nothing}
         ${link ? html`
           <div class="docs-popup-section footer">
-            <x-link
+            <devtools-link
               id="learn-more"
               href=${link}
               class="clickable underlined unbreakable-text"
             >
               ${i18nString(UIStrings.learnMore)}
-            </x-link>
+            </devtools-link>
             <devtools-checkbox
               @change=${this.#dontShowChanged}
               jslog=${VisualLogging.toggle('css-property-doc').track({ change: true })}>

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

@@ -238,7 +238,7 @@ UI.ViewManager.registerViewExtension({
 });
 
 UI.ViewManager.registerViewExtension({
-  experiment: Root.Runtime.ExperimentName.CAPTURE_NODE_CREATION_STACKS,
+  experiment: Root.ExperimentNames.ExperimentName.CAPTURE_NODE_CREATION_STACKS,
   location: UI.ViewManager.ViewLocationValues.ELEMENTS_SIDEBAR,
   id: 'elements.dom-creation',
   commandPrompt: i18nLazyString(UIStrings.showStackTrace),

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

@@ -300,7 +300,7 @@ function renderSearchButton(onSearch: ViewInput['callbacks']['onSearch']): Lit.T
 
 function renderLearnMoreAboutInsights(): Lit.TemplateResult {
   // clang-format off
-  return html`<devtools-link href=${LEARN_MORE_URL} class="link" .jslogContext=${'learn-more'}>
+  return html`<devtools-link href=${LEARN_MORE_URL} class="link" jslogcontext="learn-more">
     ${i18nString(UIStrings.learnMore)}
   </devtools-link>`;
   // clang-format on
@@ -321,7 +321,7 @@ function maybeRenderSources(
           <devtools-link
             href=${url}
             class=${Directives.classMap({link: true, highlighted: index === highlightedCitationIndex})}
-            .jslogContext=${'references.console-insights'}
+            jslogcontext="references.console-insights"
             ${Directives.ref(e => { output.citationLinks[index] = e as HTMLElement; })}
             @animationend=${onCitationAnimationEnd}
           >
@@ -347,7 +347,7 @@ function maybeRenderRelatedContent(relatedUrls: string[], directCitationUrls: st
           <devtools-link
             href=${relatedUrl}
             class="link"
-            .jslogContext=${'references.console-insights'}
+            jslogcontext="references.console-insights"
           >
             ${relatedUrl}
           </devtools-link>
@@ -454,12 +454,12 @@ function renderConsentReminder(noLogging: boolean): Lit.TemplateResult {
       <div>Use of this feature is subject to the <devtools-link
           href=${TERMS_OF_SERVICE_URL}
           class="link"
-          .jslogContext=${'terms-of-service.console-insights'}>
+          jslogcontext="terms-of-service.console-insights">
         Google Terms of Service
         </devtools-link> and <devtools-link
           href=${PRIVACY_POLICY_URL}
           class="link"
-          .jslogContext=${'privacy-policy.console-insights'}>
+          jslogcontext="privacy-policy.console-insights">
         Google Privacy Policy
         </devtools-link>
       </div>
@@ -471,7 +471,7 @@ function renderConsentReminder(noLogging: boolean): Lit.TemplateResult {
         <devtools-link
           href=${CODE_SNIPPET_WARNING_URL}
           class="link"
-          .jslogContext=${'code-snippets-explainer.console-insights'}
+          jslogcontext="code-snippets-explainer.console-insights"
         >Use generated code snippets with caution</devtools-link>
       </div>
     </div>`;
@@ -515,7 +515,7 @@ function renderDisclaimer(noLogging: boolean, onDisclaimerSettingsLink: () => vo
               jslog=${VisualLogging.action('open-ai-settings').track({click: true})}>
       Open settings
     </button> or <devtools-link href=${LEARN_MORE_URL}
-        class="link" .jslogContext=${'learn-more'}>
+        class="link" jslogcontext="learn-more">
       learn more
     </devtools-link>
   </span>`;

package/front_end/panels/issues/IssueView.ts

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

package/front_end/panels/network/RequestConditionsDrawer.ts

@@ -4,6 +4,7 @@
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 /* eslint-disable @devtools/no-imperative-dom-api */
 
+import '../../ui/kit/kit.js';
 import '../../ui/legacy/legacy.js';
 import '../../ui/components/tooltips/tooltips.js';
 
@@ -23,7 +24,7 @@ import * as PanelUtils from '../utils/utils.js';
 
 import requestConditionsDrawerStyles from './requestConditionsDrawer.css.js';
 
-const {ref} = Directives;
+const {ref, live} = Directives;
 const {widgetConfig} = UI.Widget;
 
 const UIStrings = {
@@ -325,13 +326,13 @@ export class AffectedCountWidget extends UI.Widget.Widget {
 }
 
 function learnMore(): LitTemplate {
-  return html`<x-link
+  return html`<devtools-link
         href=${NETWORK_REQUEST_BLOCKING_EXPLANATION_URL}
         tabindex=0
         class=devtools-link
-        jslog=${VisualLogging.link().track({click: true, keydown: 'Enter|Space'}).context('learn-more')}>
+        .jslogContext=${'learn-more'}>
           ${i18nString(UIStrings.learnMore)}
-      </x-link>`;
+      </devtools-link>`;
 }
 
 export class RequestConditionsDrawer extends UI.Widget.VBox implements
@@ -438,10 +439,10 @@ export class RequestConditionsDrawer extends UI.Widget.VBox implements
           // clang-format off
         html`
     <input class=blocked-url-checkbox
-      @click=${toggle}
+      @change=${toggle}
       type=checkbox
       title=${i18nString(UIStrings.enableThrottlingToggleLabel, {PH1: constructorStringOrWildcardURL})}
-      .checked=${enabled}
+      .checked=${live(enabled)}
       .disabled=${!editable || !originalOrUpgradedURLPattern}
       jslog=${VisualLogging.toggle().track({ change: true })}>
     <devtools-button
@@ -518,7 +519,7 @@ export class RequestConditionsDrawer extends UI.Widget.VBox implements
           // clang-format off
         html`
     <input class=blocked-url-checkbox
-      @click=${toggle}
+      @change=${toggle}
       type=checkbox
       .checked=${condition.enabled}
       .disabled=${!editable}

package/front_end/panels/network/RequestCookiesView.ts

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

package/front_end/panels/network/RequestTimingView.ts

@@ -504,7 +504,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
            <devtools-link
              href="https://developer.chrome.com/docs/devtools/network/reference/#timing-explanation"
              class=devtools-link
-             .jslogContext=${'explanation'}>
+             jslogcontext="explanation">
                ${i18nString(UIStrings.explanation)}
            </devtools-link>
          <td></td>
@@ -528,13 +528,8 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
        ${input.serverTimings.length === 0 ? html`
          <tr>
            <td colspan=3>
-             ${uiI18n.getFormatLocalizedString(str_, UIStrings.duringDevelopmentYouCanUseSToAdd, {PH1:
-                                                  UI.XLink.XLink.create(
-                                                    'https://web.dev/custom-metrics/#server-timing-api',
-                                                  i18nString(UIStrings.theServerTimingApi),
-                                                  undefined,
-                                                  undefined,
-                                                  'server-timing-api')})}
+${uiI18n.getFormatLocalizedStringTemplate(str_, UIStrings.duringDevelopmentYouCanUseSToAdd, {PH1:
+                                                  html`<devtools-link href="https://web.dev/custom-metrics/#server-timing-api" .jslogContext=${'server-timing-api'}>${i18nString(UIStrings.theServerTimingApi)}</devtools-link>`})}
            </td>
          </tr>` : nothing}
    </table>`,

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

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

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

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/kit/kit.js';
+
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
 import type * as SDK from '../../../core/sdk/sdk.js';
@@ -81,7 +83,7 @@ function renderProvisionalHeadersWarning(isRequestCached: boolean): Lit.LitTempl
         <div class="explanation" title=${cautionTitle}>
           <devtools-icon class="inline-icon medium" name='warning-filled'>
           </devtools-icon>
-          ${cautionText} <x-link href="https://developer.chrome.com/docs/devtools/network/reference/#provisional-headers" class="link">${i18nString(UIStrings.learnMore)}</x-link>
+          ${cautionText} <devtools-link href="https://developer.chrome.com/docs/devtools/network/reference/#provisional-headers" class="link">${i18nString(UIStrings.learnMore)}</devtools-link>
         </div>
       </div>
     </div>

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

@@ -310,7 +310,7 @@ export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableCom
       <devtools-link
           href="https://goo.gle/devtools-override"
           class="link devtools-link"
-          .jslogContext=${'devtools-override'}
+          jslogcontext="devtools-override"
       >
         <devtools-icon name="help" class="inline-icon medium">
         </devtools-icon>
@@ -319,7 +319,7 @@ export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableCom
           @click=${revealHeadersFile}
           class="link devtools-link"
           title=${UIStrings.revealHeaderOverrides}
-          .jslogContext=${'reveal-header-overrides'}
+          jslogcontext="reveal-header-overrides"
       >
         ${fileIcon}${Persistence.NetworkPersistenceManager.HEADERS_FILENAME}
       </devtools-link>

package/front_end/panels/profiler/HeapProfileView.ts

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

package/front_end/panels/profiler/HeapSnapshotView.ts

@@ -1338,7 +1338,7 @@ export class HeapSnapshotProfileType extends
 
   override customContent(): Element|null {
     const showOptionToExposeInternalsInHeapSnapshot = Root.Runtime.experiments.isEnabled(
-        Root.Runtime.ExperimentName.SHOW_OPTION_TO_EXPOSE_INTERNALS_IN_HEAP_SNAPSHOT);
+        Root.ExperimentNames.ExperimentName.SHOW_OPTION_TO_EXPOSE_INTERNALS_IN_HEAP_SNAPSHOT);
     const exposeInternalsInHeapSnapshotCheckbox =
         SettingsUI.SettingsUI.createSettingCheckbox(i18nString(UIStrings.exposeInternals), this.exposeInternals);
     this.customContentInternal = exposeInternalsInHeapSnapshotCheckbox;

package/front_end/panels/profiler/IsolateSelector.ts

@@ -88,6 +88,7 @@ export class IsolateSelector extends UI.Widget.VBox implements UI.ListControl.Li
         this.totalTrendDiv, i18nString(UIStrings.totalPageJsHeapSizeChangeTrend, {PH1: trendIntervalMinutes}));
     UI.Tooltip.Tooltip.install(this.totalValueDiv, i18nString(UIStrings.totalPageJsHeapSizeAcrossAllVm));
 
+    SDK.IsolateManager.IsolateManager.instance().observeIsolates(this);
     SDK.TargetManager.TargetManager.instance().addEventListener(
         SDK.TargetManager.Events.NAME_CHANGED, this.targetChanged, this);
     SDK.TargetManager.TargetManager.instance().addEventListener(
@@ -96,7 +97,6 @@ export class IsolateSelector extends UI.Widget.VBox implements UI.ListControl.Li
 
   override wasShown(): void {
     super.wasShown();
-    SDK.IsolateManager.IsolateManager.instance().observeIsolates(this);
     SDK.IsolateManager.IsolateManager.instance().addEventListener(
         SDK.IsolateManager.Events.MEMORY_CHANGED, this.heapStatsChanged, this);
   }
@@ -105,7 +105,6 @@ export class IsolateSelector extends UI.Widget.VBox implements UI.ListControl.Li
     super.willHide();
     SDK.IsolateManager.IsolateManager.instance().removeEventListener(
         SDK.IsolateManager.Events.MEMORY_CHANGED, this.heapStatsChanged, this);
-    SDK.IsolateManager.IsolateManager.instance().unobserveIsolates(this);
   }
 
   isolateAdded(isolate: SDK.IsolateManager.Isolate): void {

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

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

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

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

package/front_end/panels/recorder/RecorderController.ts

@@ -692,7 +692,6 @@ export class RecorderController extends LitElement {
     const indexToInsertAt = currentIndex + (position === Components.StepView.AddStepPosition.BEFORE ? 0 : 1);
     steps.splice(indexToInsertAt, 0, {type: Models.Schema.StepType.WaitForElement, selectors: ['body']});
     const recording = {...this.currentRecording, flow: {...this.currentRecording.flow, steps}};
-    Host.userMetrics.recordingEdited(Host.UserMetrics.RecordingEdited.STEP_ADDED);
     this.#stepBreakpointIndexes = new Set([...this.#stepBreakpointIndexes.values()].map(breakpointIndex => {
       if (indexToInsertAt > breakpointIndex) {
         return breakpointIndex;
@@ -723,7 +722,6 @@ export class RecorderController extends LitElement {
     const currentIndex = steps.indexOf(event.step);
     steps.splice(currentIndex, 1);
     const flow = {...this.currentRecording.flow, steps};
-    Host.userMetrics.recordingEdited(Host.UserMetrics.RecordingEdited.STEP_REMOVED);
     this.#stepBreakpointIndexes = new Set([...this.#stepBreakpointIndexes.values()]
                                               .map(breakpointIndex => {
                                                 if (currentIndex > breakpointIndex) {
@@ -958,10 +956,8 @@ export class RecorderController extends LitElement {
     await this.#exportContent(converter.getFilename(this.currentRecording.flow), content);
     const builtInMetric = CONVERTER_ID_TO_METRIC[converter.getId()];
     if (builtInMetric) {
-      Host.userMetrics.recordingExported(builtInMetric);
       UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.recordingExported));
     } else if (converter.getId().startsWith(Converters.ExtensionConverter.EXTENSION_PREFIX)) {
-      Host.userMetrics.recordingExported(Host.UserMetrics.RecordingExported.TO_EXTENSION);
       UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.recordingExported));
     } else {
       throw new Error('Could not find a metric for the export option with id = ' + id);
@@ -993,7 +989,6 @@ export class RecorderController extends LitElement {
     this.#setCurrentRecording(
         await this.#storage.updateRecording(this.currentRecording.storageName, flow),
         {keepBreakpoints: true, updateSession: true});
-    Host.userMetrics.recordingAssertion(Host.UserMetrics.RecordingAssertion.ASSERTION_ADDED);
     await this.updateComplete;
     // FIXME: call a method on the recording view widget.
     await this.#recordingView?.updateComplete;
@@ -1195,9 +1190,9 @@ export class RecorderController extends LitElement {
         <div class="empty-state-description">
           <span>${i18nString(UIStrings.recordingDescription)}</span>
           <devtools-link
-            class="x-link devtools-link"
+            class="devtools-link"
             href=${RECORDER_EXPLANATION_URL}
-            .jslogContext=${'learn-more'}
+            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>
@@ -1473,9 +1468,9 @@ export class RecorderController extends LitElement {
               }
             ></devtools-button>
             <div class="feedback">
-              <devtools-link class="x-link" title=${i18nString(UIStrings.sendFeedback)} href=${
+              <devtools-link class="devtools-link" title=${i18nString(UIStrings.sendFeedback)} href=${
                 FEEDBACK_URL
-              } .jslogContext=${'feedback'}>${i18nString(UIStrings.sendFeedback)}</devtools-link>
+              } jslogcontext="feedback">${i18nString(UIStrings.sendFeedback)}</devtools-link>
             </div>
             <div class="separator"></div>
             <devtools-shortcut-dialog

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

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

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

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