chrome-devtools-frontend 1.0.1571007 → 1.0.1571573

package/front_end/panels/application/FrameDetailsView.ts

@@ -856,7 +856,8 @@ export class FrameDetailsReportView extends UI.Widget.Widget {
 
   constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
     super(element, {useShadowDom: true});
-    this.#protocolMonitorExperimentEnabled = Root.Runtime.experiments.isEnabled('protocol-monitor');
+    this.#protocolMonitorExperimentEnabled =
+        Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.PROTOCOL_MONITOR);
     this.#view = view;
   }
 

package/front_end/panels/application/components/ReportsGrid.ts

@@ -134,7 +134,8 @@ export class ReportsGrid extends UI.Widget.Widget {
   constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element);
     this.#view = view;
-    this.#protocolMonitorExperimentEnabled = Root.Runtime.experiments.isEnabled('protocol-monitor');
+    this.#protocolMonitorExperimentEnabled =
+        Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.PROTOCOL_MONITOR);
     this.requestUpdate();
   }
 

package/front_end/panels/common/AiCodeCompletionSummaryToolbar.ts

@@ -4,13 +4,13 @@
 
 import '../../ui/components/spinners/spinners.js';
 import '../../ui/components/tooltips/tooltips.js';
+import '../../ui/kit/kit.js';
 
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as AiCodeCompletion from '../../models/ai_code_completion/ai_code_completion.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {Directives, html, nothing, render} from '../../ui/lit/lit.js';
-import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {AiCodeCompletionDisclaimer} from './AiCodeCompletionDisclaimer.js';
 import styles from './aiCodeCompletionSummaryToolbar.css.js';
@@ -86,12 +86,10 @@ export const DEFAULT_SUMMARY_TOOLBAR_VIEW: View = (input, _output, target) => {
                     variant="rich"
                     jslogContext="ai-code-completion-citations"
                 ><div class="citations-tooltip-container">
-                    ${Directives.repeat(input.citations, citation => html`<x-link
+                    ${Directives.repeat(input.citations, citation => html`<devtools-link
                         tabIndex="0"
                         href=${citation}
-                        jslog=${VisualLogging.link('ai-code-completion-citations.citation-link').track({
-      click: true
-    })}>${citation}</x-link>`)}</div></devtools-tooltip>
+                        .jslogContext=${'ai-code-completion-citations.citation-link'}>${citation}</devtools-link>`)}</div></devtools-tooltip>
             </div>` : nothing;
 
   render(

package/front_end/panels/common/AiCodeCompletionTeaser.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';
@@ -244,13 +246,11 @@ export class AiCodeCompletionTeaser extends UI.Widget.Widget {
         {
           iconName: 'warning',
           // clang-format off
-          content: html`<x-link
+          content: html`<devtools-link
             href=${CODE_SNIPPET_WARNING_URL}
             class="link devtools-link"
-            jslog=${VisualLogging.link('code-snippets-explainer.ai-code-completion-teaser').track({
-              click: true
-            })}
-          >${lockedString(UIStringsNotTranslate.freDisclaimerTextUseWithCaution)}</x-link>`,
+            .jslogContext=${'code-snippets-explainer.ai-code-completion-teaser'}
+          >${lockedString(UIStringsNotTranslate.freDisclaimerTextUseWithCaution)}</devtools-link>`,
           // clang-format on
         });
     return reminderItems;

package/front_end/panels/console/ConsoleInsightTeaser.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 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';
@@ -167,13 +168,13 @@ function renderNoModel(input: ViewInput): Lit.TemplateResult {
           lockedString(UIStringsNotTranslate.getHelpForWarning) :
           lockedString(UIStringsNotTranslate.getHelpForError)}
         </h2>
-        <div>You can get quick answers from <x-link
-            .jslog=${VisualLogging.link().track({click: true, keydown: 'Enter|Space'}).context('insights-teaser-built-in-ai-documentation')}
+        <div>You can get quick answers from <devtools-link
+            .jslogContext=${'insights-teaser-built-in-ai-documentation'}
             class="link"
             href=${BUILT_IN_AI_DOCUMENTATION}
           >
             Chrome’s Built-in AI
-          </x-link>
+          </devtools-link>
           , without any data leaving your device.
         </div>
         <div>${lockedString(UIStringsNotTranslate.toUseDownload)}</div>
@@ -324,12 +325,12 @@ function renderFooter(input: ViewInput): Lit.TemplateResult {
       >
         <div class="info-tooltip-text">${lockedString(UIStringsNotTranslate.infoTooltipText)}</div>
         <div class="learn-more">
-          <x-link
+          <devtools-link
             class="devtools-link"
             title=${lockedString(UIStringsNotTranslate.learnMoreAboutAiSummaries)}
             href=${DATA_USAGE_URL}
-            jslog=${VisualLogging.link().track({click: true, keydown:'Enter|Space'}).context('explain.teaser.learn-more')}
-          >${lockedString(UIStringsNotTranslate.learnMoreAboutAiSummaries)}</x-link>
+            .jslogContext=${'explain.teaser.learn-more'}
+          >${lockedString(UIStringsNotTranslate.learnMoreAboutAiSummaries)}</devtools-link>
         </div>
       </devtools-tooltip>
       ${renderDontShowCheckbox(input)}
@@ -509,13 +510,11 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
         {
           iconName: 'warning',
           // clang-format off
-          content: html`<x-link
+          content: html`<devtools-link
             href=${CODE_SNIPPET_WARNING_URL}
             class="link devtools-link"
-            jslog=${VisualLogging.link('explain.teaser.code-snippets-explainer').track({
-              click: true
-            })}
-          >${lockedString(UIStringsNotTranslate.freDisclaimerTextUseWithCaution)}</x-link>`,
+            .jslogContext=${'explain.teaser.code-snippets-explainer'}
+          >${lockedString(UIStringsNotTranslate.freDisclaimerTextUseWithCaution)}</devtools-link>`,
           // clang-format on
         }
       ],

package/front_end/panels/css_overview/CSSOverviewCompletedView.ts

@@ -483,7 +483,7 @@ function renderContrastIssue(key: string, issues: ContrastIssue[]): TemplateResu
   const color = (minContrastIssue.textColor.asString(Common.Color.Format.HEXA));
   const backgroundColor = (minContrastIssue.backgroundColor.asString(Common.Color.Format.HEXA));
 
-  const showAPCA = Root.Runtime.experiments.isEnabled('apca');
+  const showAPCA = Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.APCA);
 
   const title = i18nString(UIStrings.textColorSOverSBackgroundResults, {
     PH1: color,
@@ -1041,7 +1041,7 @@ function renderContrastRatio(data: PopulateNodesEventNodeTypes): TemplateResult
   if (!('contrastRatio' in data)) {
     throw new Error('Contrast ratio entry is missing a contrast ratio.');
   }
-  const showAPCA = Root.Runtime.experiments.isEnabled('apca');
+  const showAPCA = Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.APCA);
   const contrastRatio = Platform.NumberUtilities.floor(data.contrastRatio, 2);
   const contrastRatioString = showAPCA ? contrastRatio + '%' : contrastRatio;
   const border = getBorderString(data.backgroundColor);

package/front_end/panels/css_overview/CSSOverviewModel.ts

@@ -267,7 +267,7 @@ export class CSSOverviewModel extends SDK.SDKModel.SDKModel<void> {
           const formattedTextColor = formatColor(blendedTextColor);
           const formattedBackgroundColor = formatColor(blendedBackgroundColor.asLegacyColor());
           const key = `${formattedTextColor}_${formattedBackgroundColor}`;
-          if (Root.Runtime.experiments.isEnabled('apca')) {
+          if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.APCA)) {
             const contrastRatio = contrastInfo.contrastRatioAPCA();
             const threshold = contrastInfo.contrastRatioAPCAThreshold();
             const passes = contrastRatio && threshold ? Math.abs(contrastRatio) >= threshold : false;

package/front_end/panels/elements/ComputedStyleModel.ts

@@ -18,13 +18,12 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
   private computedStylePromise?: Promise<ComputedStyle|null>;
   private currentTrackedNodeId?: number;
 
-  constructor() {
+  constructor(node?: SDK.DOMModel.DOMNode|null) {
     super();
     this.#cssModel = null;
     this.eventListeners = [];
-    this.#node = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
+    this.#node = node ?? null;
 
-    UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this.onNodeChanged, this);
     UI.Context.Context.instance().addFlavorChangeListener(
         StylesSidebarPane, this.evaluateTrackingComputedStyleUpdatesForNode, this);
     UI.Context.Context.instance().addFlavorChangeListener(
@@ -32,17 +31,23 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
   }
 
   dispose(): void {
-    UI.Context.Context.instance().removeFlavorChangeListener(SDK.DOMModel.DOMNode, this.onNodeChanged, this);
     UI.Context.Context.instance().removeFlavorChangeListener(
         StylesSidebarPane, this.evaluateTrackingComputedStyleUpdatesForNode, this);
     UI.Context.Context.instance().removeFlavorChangeListener(
         ComputedStyleWidget, this.evaluateTrackingComputedStyleUpdatesForNode, this);
   }
 
-  node(): SDK.DOMModel.DOMNode|null {
+  get node(): SDK.DOMModel.DOMNode|null {
     return this.#node;
   }
 
+  set node(node: SDK.DOMModel.DOMNode|null) {
+    this.#node = node;
+    this.updateModel(this.#node ? this.#node.domModel().cssModel() : null);
+    this.onCSSModelChanged(null);
+    this.evaluateTrackingComputedStyleUpdatesForNode();
+  }
+
   cssModel(): SDK.CSSModel.CSSModel|null {
     return this.#cssModel?.isEnabled() ? this.#cssModel : null;
   }
@@ -82,13 +87,6 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
     }
   }, 100);
 
-  private onNodeChanged(event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode|null>): void {
-    this.#node = event.data;
-    this.updateModel(this.#node ? this.#node.domModel().cssModel() : null);
-    this.onCSSModelChanged(null);
-    this.evaluateTrackingComputedStyleUpdatesForNode();
-  }
-
   private updateModel(cssModel: SDK.CSSModel.CSSModel|null): void {
     if (this.#cssModel === cssModel) {
       return;
@@ -155,7 +153,7 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
   }
 
   private elementNode(): SDK.DOMModel.DOMNode|null {
-    const node = this.node();
+    const node = this.node;
     if (!node) {
       return null;
     }

package/front_end/panels/elements/ComputedStyleWidget.ts

@@ -319,7 +319,7 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
         return link;
       }
       return null;
-    }, () => this.computedStyleModel.node());
+    }, () => this.computedStyleModel.node);
 
     const fontsWidget = new PlatformFontsWidget(this.computedStyleModel);
     fontsWidget.show(this.contentElement);
@@ -356,7 +356,7 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
   }
 
   private async fetchMatchedCascade(): Promise<SDK.CSSMatchedStyles.CSSMatchedStyles|null> {
-    const node = this.computedStyleModel.node();
+    const node = this.computedStyleModel.node;
     if (!node || !this.computedStyleModel.cssModel()) {
       return null;
     }
@@ -370,7 +370,7 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
 
     function validateStyles(this: ComputedStyleWidget, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles|null):
         SDK.CSSMatchedStyles.CSSMatchedStyles|null {
-      return matchedStyles && matchedStyles.node() === this.computedStyleModel.node() ? matchedStyles : null;
+      return matchedStyles && matchedStyles.node() === this.computedStyleModel.node ? matchedStyles : null;
     }
   }
 

package/front_end/panels/elements/ElementsPanel.ts

@@ -263,7 +263,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     this.mainContainer = document.createElement('div');
     this.domTreeContainer = document.createElement('div');
     const crumbsContainer = document.createElement('div');
-    if (Root.Runtime.experiments.isEnabled('full-accessibility-tree')) {
+    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.FULL_ACCESSIBILITY_TREE)) {
       this.initializeFullAccessibilityTreeView();
     }
     this.mainContainer.appendChild(this.domTreeContainer);
@@ -299,7 +299,10 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
 
     crumbsContainer.appendChild(this.breadcrumbs);
 
-    const computedStyleModel = new ComputedStyleModel();
+    const computedStyleModel = new ComputedStyleModel(UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode));
+    UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, event => {
+      computedStyleModel.node = event.data;
+    });
     this.stylesWidget = new StylesSidebarPane(computedStyleModel);
     this.computedStyleWidget = new ComputedStyleWidget(computedStyleModel);
     this.metricsWidget = new MetricsSidebarPane(computedStyleModel);

package/front_end/panels/elements/ElementsSidebarPane.ts

@@ -21,7 +21,7 @@ export class ElementsSidebarPane extends UI.Widget.VBox {
   }
 
   node(): SDK.DOMModel.DOMNode|null {
-    return this.computedStyleModelInternal.node();
+    return this.computedStyleModelInternal.node;
   }
 
   cssModel(): SDK.CSSModel.CSSModel|null {

package/front_end/panels/elements/PlatformFontsWidget.ts

@@ -93,7 +93,7 @@ export class PlatformFontsWidget extends UI.Widget.VBox {
 
   override async performUpdate(): Promise<void> {
     const cssModel = this.sharedModel.cssModel();
-    const node = this.sharedModel.node();
+    const node = this.sharedModel.node;
     if (!node || !cssModel) {
       this.#view({platformFonts: null}, {}, this.contentElement);
       return;

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -257,7 +257,7 @@ export class StylePropertiesSection {
       UI.ARIAUtils.setHidden(this.newStyleRuleToolbar, true);
     }
 
-    if (Root.Runtime.experiments.isEnabled('font-editor') && this.editable) {
+    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.FONT_EDITOR) && this.editable) {
       this.fontEditorToolbar = this.#styleRuleElement.createChild('devtools-toolbar', 'sidebar-pane-section-toolbar');
       this.fontEditorSectionManager = new FontEditorSectionManager(this.parentPane.swatchPopoverHelper(), this);
       this.fontEditorButton =

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -2348,7 +2348,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
             this.name, this.style, this.#parentPane, this.#matchedStyles, this, this.getComputedStyles() ?? new Map()) :
         [];
 
-    if (Root.Runtime.experiments.isEnabled('font-editor') && this.property.parsedOk) {
+    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.FONT_EDITOR) && this.property.parsedOk) {
       renderers.push(new FontRenderer(this));
     }
     this.listItemElement.removeChildren();

package/front_end/panels/emulation/DeviceModeWrapper.ts

@@ -123,73 +123,47 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
             return;
           }
 
+          // Resolve to a remote object to ensure the node is alive in the context.
           const object = await node.resolveToObject();
           if (!object) {
             return;
           }
-          const result = await object.callFunction(function(this: Element) {
-            function getFrameOffset(frame: Element|null): {x: number, y: number} {
-              if (!frame) {
-                return {x: 0, y: 0};
-              }
-
-              // The offset of the frame's content relative to the frame element
-              // contains the border width and the padding.
-              // The border width.
-              const borderTop = frame.clientTop;
-              const borderLeft = frame.clientLeft;
-
-              // The padding can be retrieved via computed styles.
-              const styles = window.getComputedStyle(frame);
-              const paddingTop = parseFloat(styles.paddingTop);
-              const paddingLeft = parseFloat(styles.paddingLeft);
-
-              // The position of the frame in it's parent.
-              const rect = frame.getBoundingClientRect();
-
-              // The offset of the parent frame's content relative to the
-              // document. If there is no parent frame, the offset is 0.
-              // In case of OOPiF, there is no access to the parent frame's
-              // offset.
-              const parentFrameOffset = getFrameOffset(frame.ownerDocument.defaultView?.frameElement ?? null);
-
-              // The scroll position of the frame.
-              const scrollX = frame.ownerDocument.defaultView?.scrollX ?? 0;
-              const scrollY = frame.ownerDocument.defaultView?.scrollY ?? 0;
-
-              return {
-                x: parentFrameOffset.x + rect.left + borderLeft + paddingLeft + scrollX,
-                y: parentFrameOffset.y + rect.top + borderTop + paddingTop + scrollY,
-              };
-            }
-
-            // The bounding client rect of the node relative to the viewport.
-            const rect = this.getBoundingClientRect();
-            const frameOffset = getFrameOffset(this.ownerDocument.defaultView?.frameElement ?? null);
-
-            // The scroll position of the frame.
-            const scrollX = this.ownerDocument.defaultView?.scrollX ?? 0;
-            const scrollY = this.ownerDocument.defaultView?.scrollY ?? 0;
-
-            // The offset of the node's content relative to the top-level
-            // document is the sum of the element offset relative to the
-            // document's viewport, the document's scroll position, and the
-            // parent's offset relative to the top-level document.
-            return JSON.stringify({
-              x: rect.left + frameOffset.x + scrollX,
-              y: rect.top + frameOffset.y + scrollY,
-              width: rect.width,
-              height: rect.height,
-              scale: 1,
-            });
-          });
-          if (!result.object) {
-            throw new Error('Clipping error: could not get object data.');
+
+          // Get the Box Model via CDP.
+          // This returns the quads relative to the target's viewport.
+          // We use the 'border' quad to include the border and padding in the screenshot,
+          // matching the 'width' and 'height' properties which are also Border Box dimensions.
+          const nodeBoxModel = await node.boxModel();
+          if (!nodeBoxModel) {
+            throw new Error(`Unable to get box model of the node: ${new Error().stack}`);
+          }
+          const nodeBorderQuad = nodeBoxModel.border;
+
+          // Get Layout Metrics to account for the Visual Viewport scroll and zoom.
+          const metrics = await node.domModel().target().pageAgent().invoke_getLayoutMetrics();
+          if (metrics.getError()) {
+            throw new Error(`Unable to get metrics: ${new Error().stack}`);
           }
-          const clip = (JSON.parse((result.object.value as string)));
-          const response = await node.domModel().target().pageAgent().invoke_getLayoutMetrics();
-          const error = response.getError();
-          const zoom = !error && response.visualViewport.zoom || 1;
+
+          const scrollX = metrics.cssVisualViewport.pageX;
+          const scrollY = metrics.cssVisualViewport.pageY;
+
+          // Calculate the global offset for OOPiFs (Out-of-Process iframes).
+          // This accounts for the position of the target's frame within the main page.
+          const {x: oopifOffsetX, y: oopifOffsetY} = await getOopifOffset(node.domModel().target());
+
+          // Assemble the final Clip.
+          // The absolute coordinates are: Global (OOPiF) + Viewport Scroll + Local Node Position (Border Box).
+          const clip = {
+            x: oopifOffsetX + scrollX + nodeBorderQuad[0],
+            y: oopifOffsetY + scrollY + nodeBorderQuad[1],
+            width: nodeBoxModel.width,
+            height: nodeBoxModel.height,
+            scale: 1,
+          };
+
+          // Apply Zoom factor.
+          const zoom = metrics.cssVisualViewport.zoom ?? 1;
           clip.x *= zoom;
           clip.y *= zoom;
           clip.width *= zoom;
@@ -210,3 +184,68 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
     return false;
   }
 }
+
+/**
+ * Calculate the offset of the "Local Root" frame relative to the "Global Root" (the main frame).
+ * This involves traversing the CDP Targets for OOPiFs.
+ */
+async function getOopifOffset(target: SDK.Target.Target|null): Promise<{x: number, y: number}> {
+  if (!target) {
+    return {x: 0, y: 0};
+  }
+
+  // Get the parent target. If there's no parent (we are at root) or it's not a frame, we are done.
+  const parentTarget = target.parentTarget();
+  if (!parentTarget || parentTarget.type() !== SDK.Target.Type.FRAME) {
+    return {x: 0, y: 0};
+  }
+
+  // Identify the current frame's ID to find its owner in the parent.
+  const frameId = target.model(SDK.ResourceTreeModel.ResourceTreeModel)?.mainFrame?.id;
+  if (!frameId) {
+    return {x: 0, y: 0};
+  }
+
+  // Get the DOMModel of the parent to query the frame owner element.
+  const parentDOMModel = parentTarget.model(SDK.DOMModel.DOMModel);
+  if (!parentDOMModel) {
+    return {x: 0, y: 0};
+  }
+
+  // Retrieve the frame owner node (e.g. the <iframe> element) in the parent's document.
+  const frameOwnerDeferred = await parentDOMModel.getOwnerNodeForFrame(frameId);
+  const frameOwner = await frameOwnerDeferred?.resolvePromise();
+  if (!frameOwner) {
+    return {x: 0, y: 0};
+  }
+
+  // Get the content box of the iframe element.
+  // This is relative to the parent target's viewport.
+  const boxModel = await frameOwner.boxModel();
+  if (!boxModel) {
+    return {x: 0, y: 0};
+  }
+
+  // content is a Quad [x1, y1, x2, y2, x3, y3, x4, y4]
+  const contentQuad = boxModel.content;
+  const iframeContentX = contentQuad[0];
+  const iframeContentY = contentQuad[1];
+
+  // Get the scroll position of the parent target to convert viewport-relative coordinates
+  // to document-relative coordinates.
+  const parentMetrics = await parentTarget.pageAgent().invoke_getLayoutMetrics();
+  if (parentMetrics.getError()) {
+    return {x: 0, y: 0};
+  }
+
+  const scrollX = parentMetrics.cssVisualViewport.pageX;
+  const scrollY = parentMetrics.cssVisualViewport.pageY;
+
+  // Recursively add the offset of the parent target itself (if it is also an OOPiF).
+  const parentOffset = await getOopifOffset(parentTarget);
+
+  return {
+    x: iframeContentX + scrollX + parentOffset.x,
+    y: iframeContentY + scrollY + parentOffset.y,
+  };
+}

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

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import '../../../ui/components/spinners/spinners.js';
+import '../../../ui/kit/kit.js';
 
 import * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
@@ -299,9 +300,9 @@ function renderSearchButton(onSearch: ViewInput['callbacks']['onSearch']): Lit.T
 
 function renderLearnMoreAboutInsights(): Lit.TemplateResult {
   // clang-format off
-  return html`<x-link href=${LEARN_MORE_URL} class="link" jslog=${VisualLogging.link('learn-more').track({click: true})}>
+  return html`<devtools-link href=${LEARN_MORE_URL} class="link" .jslogContext=${'learn-more'}>
     ${i18nString(UIStrings.learnMore)}
-  </x-link>`;
+  </devtools-link>`;
   // clang-format on
 }
 
@@ -317,15 +318,15 @@ function maybeRenderSources(
     <ol class="sources-list">
       ${directCitationUrls.map((url, index) => html`
         <li>
-          <x-link
+          <devtools-link
             href=${url}
             class=${Directives.classMap({link: true, highlighted: index === highlightedCitationIndex})}
-            jslog=${VisualLogging.link('references.console-insights').track({click: true})}
+            .jslogContext=${'references.console-insights'}
             ${Directives.ref(e => { output.citationLinks[index] = e as HTMLElement; })}
             @animationend=${onCitationAnimationEnd}
           >
             ${url}
-          </x-link>
+          </devtools-link>
         </li>
       `)}
     </ol>
@@ -343,13 +344,13 @@ function maybeRenderRelatedContent(relatedUrls: string[], directCitationUrls: st
     <ul class="references-list">
       ${relatedUrls.map(relatedUrl => html`
         <li>
-          <x-link
+          <devtools-link
             href=${relatedUrl}
             class="link"
-            jslog=${VisualLogging.link('references.console-insights').track({click: true})}
+            .jslogContext=${'references.console-insights'}
           >
             ${relatedUrl}
-          </x-link>
+          </devtools-link>
         </li>
       `)}
     </ul>
@@ -379,10 +380,10 @@ function renderInsightSourcesList(
     <div class="insight-sources">
       <ul>
         ${Directives.repeat(sources, item => item.value, item => {
-          return html`<li><x-link class="link" title="${localizeType(item.type)} ${i18nString(UIStrings.opensInNewTab)}" href="data:text/plain;charset=utf-8,${encodeURIComponent(item.value)}" jslog=${VisualLogging.link('source-' + item.type).track({click: true})}>
+          return html`<li><devtools-link class="link" title="${localizeType(item.type)} ${i18nString(UIStrings.opensInNewTab)}" href="data:text/plain;charset=utf-8,${encodeURIComponent(item.value)}" .jslogContext=${'source-' + item.type}>
             <devtools-icon name="open-externally"></devtools-icon>
             ${localizeType(item.type)}
-          </x-link></li>`;
+          </devtools-link></li>`;
         })}
         ${isPageReloadRecommended ? html`<li class="source-disclaimer">
           <devtools-icon name="warning"></devtools-icon>
@@ -450,28 +451,28 @@ function renderConsentReminder(noLogging: boolean): Lit.TemplateResult {
         <devtools-icon name="policy" class="medium">
         </devtools-icon>
       </div>
-      <div>Use of this feature is subject to the <x-link
+      <div>Use of this feature is subject to the <devtools-link
           href=${TERMS_OF_SERVICE_URL}
           class="link"
-          jslog=${VisualLogging.link('terms-of-service.console-insights').track({click: true})}>
+          .jslogContext=${'terms-of-service.console-insights'}>
         Google Terms of Service
-        </x-link> and <x-link
+        </devtools-link> and <devtools-link
           href=${PRIVACY_POLICY_URL}
           class="link"
-          jslog=${VisualLogging.link('privacy-policy.console-insights').track({click: true})}>
+          .jslogContext=${'privacy-policy.console-insights'}>
         Google Privacy Policy
-        </x-link>
+        </devtools-link>
       </div>
       <div>
         <devtools-icon name="warning" class="medium">
         </devtools-icon>
       </div>
       <div>
-        <x-link
+        <devtools-link
           href=${CODE_SNIPPET_WARNING_URL}
           class="link"
-          jslog=${VisualLogging.link('code-snippets-explainer.console-insights').track({click: true})}
-        >Use generated code snippets with caution</x-link>
+          .jslogContext=${'code-snippets-explainer.console-insights'}
+        >Use generated code snippets with caution</devtools-link>
       </div>
     </div>`;
   // clang-format on
@@ -513,10 +514,10 @@ function renderDisclaimer(noLogging: boolean, onDisclaimerSettingsLink: () => vo
     } <button class="link" role="link" @click=${onDisclaimerSettingsLink}
               jslog=${VisualLogging.action('open-ai-settings').track({click: true})}>
       Open settings
-    </button> or <x-link href=${LEARN_MORE_URL}
-        class="link" jslog=${VisualLogging.link('learn-more').track({click: true})}>
+    </button> or <devtools-link href=${LEARN_MORE_URL}
+        class="link" .jslogContext=${'learn-more'}>
       learn more
-    </x-link>
+    </devtools-link>
   </span>`;
   // clang-format on
 }
@@ -549,7 +550,8 @@ function renderSignInFooter(onGoToSignIn: () => void): Lit.LitTemplate {
   // clang-format on
 }
 
-function renderConsentReminderFooter(onReminderSettingsLink: () => void, onConsentReminderConfirmed: () => void): Lit.LitTemplate {
+function renderConsentReminderFooter(
+    onReminderSettingsLink: () => void, onConsentReminderConfirmed: () => void): Lit.LitTemplate {
   // clang-format off
   return html`
     <div class="filler"></div>
@@ -575,7 +577,9 @@ function renderConsentReminderFooter(onReminderSettingsLink: () => void, onConse
   // clang-format on
 }
 
-function renderInsightFooter(noLogging: ViewInput['noLogging'], selectedRating: ViewInput['selectedRating'], callbacks: ViewInput['callbacks']): Lit.LitTemplate {
+function renderInsightFooter(
+    noLogging: ViewInput['noLogging'], selectedRating: ViewInput['selectedRating'],
+    callbacks: ViewInput['callbacks']): Lit.LitTemplate {
   // clang-format off
   return html`
   <div class="disclaimer">

package/front_end/panels/explain/components/consoleInsight.css

@@ -360,7 +360,7 @@
     display: table-cell;
   }
 
-  .sources-list x-link.highlighted {
+  .sources-list devtools-link.highlighted {
     animation: highlight-fadeout 2s;
   }