chrome-devtools-frontend 1.0.1543472 → 1.0.1544076

package/front_end/models/bindings/ResourceMapping.ts

@@ -9,8 +9,8 @@ import * as TextUtils from '../text_utils/text_utils.js';
 import * as Workspace from '../workspace/workspace.js';
 
 import {ContentProviderBasedProject} from './ContentProviderBasedProject.js';
-import {CSSWorkspaceBinding} from './CSSWorkspaceBinding.js';
-import {DebuggerWorkspaceBinding} from './DebuggerWorkspaceBinding.js';
+import type {CSSWorkspaceBinding} from './CSSWorkspaceBinding.js';
+import type {DebuggerWorkspaceBinding} from './DebuggerWorkspaceBinding.js';
 import {NetworkProject} from './NetworkProject.js';
 import {resourceMetadata} from './ResourceUtils.js';
 
@@ -30,13 +30,46 @@ export class ResourceMapping implements SDK.TargetManager.SDKModelObserver<SDK.R
   readonly workspace: Workspace.Workspace.WorkspaceImpl;
   readonly #modelToInfo = new Map<SDK.ResourceTreeModel.ResourceTreeModel, ModelInfo>();
 
+  #debuggerWorkspaceBinding: DebuggerWorkspaceBinding|null = null;
+  #cssWorkspaceBinding: CSSWorkspaceBinding|null = null;
+
   constructor(targetManager: SDK.TargetManager.TargetManager, workspace: Workspace.Workspace.WorkspaceImpl) {
     this.workspace = workspace;
     targetManager.observeModels(SDK.ResourceTreeModel.ResourceTreeModel, this);
   }
 
+  get debuggerWorkspaceBinding(): DebuggerWorkspaceBinding|null {
+    // TODO(crbug.com/458180550): Throw when this.#debuggerWorkspaceBinding is null and never return null.
+    //                            The only reason we don't throw and return an instance unconditionally
+    //                            is that unit tests often don't set-up both the *WorkspaceBindings.
+    return this.#debuggerWorkspaceBinding;
+  }
+
+  /* {@link DebuggerWorkspaceBinding} and ResourceMapping form a cycle so we can't wire it up at ctor time. */
+  set debuggerWorkspaceBinding(debuggerWorkspaceBinding: DebuggerWorkspaceBinding) {
+    if (this.#debuggerWorkspaceBinding) {
+      throw new Error('DebuggerWorkspaceBinding already set');
+    }
+    this.#debuggerWorkspaceBinding = debuggerWorkspaceBinding;
+  }
+
+  get cssWorkspaceBinding(): CSSWorkspaceBinding|null {
+    // TODO(crbug.com/458180550): Throw when this.#cssWorkspaceBinding is null and never return null.
+    //                            The only reason we don't throw and return an instance unconditionally
+    //                            is that unit tests often don't set-up both the *WorkspaceBindings.
+    return this.#cssWorkspaceBinding;
+  }
+
+  /* {@link CSSWorkspaceBinding} and ResourceMapping form a cycle so we can't wire it up at ctor time. */
+  set cssWorkspaceBinding(cssWorkspaceBinding: CSSWorkspaceBinding) {
+    if (this.#cssWorkspaceBinding) {
+      throw new Error('CSSWorkspaceBinding already set');
+    }
+    this.#cssWorkspaceBinding = cssWorkspaceBinding;
+  }
+
   modelAdded(resourceTreeModel: SDK.ResourceTreeModel.ResourceTreeModel): void {
-    const info = new ModelInfo(this.workspace, resourceTreeModel);
+    const info = new ModelInfo(this, resourceTreeModel);
     this.#modelToInfo.set(resourceTreeModel, info);
   }
 
@@ -250,11 +283,13 @@ class ModelInfo {
   readonly #bindings = new Map<string, Binding>();
   readonly #cssModel: SDK.CSSModel.CSSModel;
   readonly #eventListeners: Common.EventTarget.EventDescriptor[];
-  constructor(
-      workspace: Workspace.Workspace.WorkspaceImpl, resourceTreeModel: SDK.ResourceTreeModel.ResourceTreeModel) {
+  readonly resourceMapping: ResourceMapping;
+
+  constructor(resourceMapping: ResourceMapping, resourceTreeModel: SDK.ResourceTreeModel.ResourceTreeModel) {
     const target = resourceTreeModel.target();
+    this.resourceMapping = resourceMapping;
     this.project = new ContentProviderBasedProject(
-        workspace, 'resources:' + target.id(), Workspace.Workspace.projectTypes.Network, '',
+        resourceMapping.workspace, 'resources:' + target.id(), Workspace.Workspace.projectTypes.Network, '',
         false /* isServiceProject */);
     NetworkProject.setTargetForProject(this.project, target);
 
@@ -332,7 +367,7 @@ class ModelInfo {
 
     let binding = this.#bindings.get(resource.url);
     if (!binding) {
-      binding = new Binding(this.project, resource);
+      binding = new Binding(this, resource);
       this.#bindings.set(resource.url, binding);
     } else {
       binding.addResource(resource);
@@ -396,9 +431,16 @@ class Binding implements TextUtils.ContentProvider.ContentProvider {
     stylesheet: SDK.CSSStyleSheetHeader.CSSStyleSheetHeader,
     edit: SDK.CSSModel.Edit|null,
   }> = [];
-  constructor(project: ContentProviderBasedProject, resource: SDK.Resource.Resource) {
+
+  readonly #debuggerWorkspaceBinding: DebuggerWorkspaceBinding|null;
+  readonly #cssWorkspaceBinding: CSSWorkspaceBinding|null;
+
+  constructor(modelInfo: ModelInfo, resource: SDK.Resource.Resource) {
     this.resources = new Set([resource]);
-    this.#project = project;
+    this.#project = modelInfo.project;
+    this.#debuggerWorkspaceBinding = modelInfo.resourceMapping.debuggerWorkspaceBinding;
+    this.#cssWorkspaceBinding = modelInfo.resourceMapping.cssWorkspaceBinding;
+
     this.#uiSourceCode = this.#project.createUISourceCode(resource.url, resource.contentType());
     boundUISourceCodes.add(this.#uiSourceCode);
     if (resource.frameId) {
@@ -407,8 +449,8 @@ class Binding implements TextUtils.ContentProvider.ContentProvider {
     this.#project.addUISourceCodeWithProvider(this.#uiSourceCode, this, resourceMetadata(resource), resource.mimeType);
 
     void Promise.all([
-      ...this.inlineScripts().map(script => DebuggerWorkspaceBinding.instance().updateLocations(script)),
-      ...this.inlineStyles().map(style => CSSWorkspaceBinding.instance().updateLocations(style)),
+      ...this.inlineScripts().map(script => this.#debuggerWorkspaceBinding?.updateLocations(script)),
+      ...this.inlineStyles().map(style => this.#cssWorkspaceBinding?.updateLocations(style)),
     ]);
   }
 
@@ -478,7 +520,7 @@ class Binding implements TextUtils.ContentProvider.ContentProvider {
           continue;
         }
         scriptRangeMap.set(script, range.rebaseAfterTextEdit(oldRange, newRange));
-        updatePromises.push(DebuggerWorkspaceBinding.instance().updateLocations(script));
+        updatePromises.push(this.#debuggerWorkspaceBinding?.updateLocations(script));
       }
       for (const style of styles) {
         const range = styleSheetRangeMap.get(style) ?? computeStyleSheetRange(style);
@@ -486,7 +528,7 @@ class Binding implements TextUtils.ContentProvider.ContentProvider {
           continue;
         }
         styleSheetRangeMap.set(style, range.rebaseAfterTextEdit(oldRange, newRange));
-        updatePromises.push(CSSWorkspaceBinding.instance().updateLocations(style));
+        updatePromises.push(this.#cssWorkspaceBinding?.updateLocations(style));
       }
       await Promise.all(updatePromises);
     }
@@ -510,8 +552,8 @@ class Binding implements TextUtils.ContentProvider.ContentProvider {
   dispose(): void {
     this.#project.removeUISourceCode(this.#uiSourceCode.url());
     void Promise.all([
-      ...this.inlineScripts().map(script => DebuggerWorkspaceBinding.instance().updateLocations(script)),
-      ...this.inlineStyles().map(style => CSSWorkspaceBinding.instance().updateLocations(style)),
+      ...this.inlineScripts().map(script => this.#debuggerWorkspaceBinding?.updateLocations(script)),
+      ...this.inlineStyles().map(style => this.#cssWorkspaceBinding?.updateLocations(style)),
     ]);
   }
 

package/front_end/models/live-metrics/LiveMetrics.ts

@@ -163,7 +163,8 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
    * DOM nodes can't be sent over a runtime binding, so we have to retrieve
    * them separately.
    */
-  async #resolveNodeRef(index: number, executionContextId: Protocol.Runtime.ExecutionContextId): Promise<NodeRef|null> {
+  async #resolveNodeRef(index: number, executionContextId: Protocol.Runtime.ExecutionContextId):
+      Promise<SDK.DOMModel.DOMNode|null> {
     if (!this.#target) {
       return null;
     }
@@ -195,8 +196,7 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
         return null;
       }
 
-      const link = await Common.Linkifier.Linkifier.linkify(node);
-      return {node, link};
+      return node;
     } catch {
       return null;
     } finally {
@@ -236,26 +236,23 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
       ...this.#layoutShifts.flatMap(shift => shift.affectedNodeRefs),
     ].filter(nodeRef => !!nodeRef);
 
-    const idsToRefresh = new Set(toRefresh.map(nodeRef => nodeRef.node.backendNodeId()));
+    const idsToRefresh = new Set(toRefresh.map(nodeRef => nodeRef.backendNodeId()));
     const nodes = await domModel.pushNodesByBackendIdsToFrontend(idsToRefresh);
     if (!nodes) {
       return;
     }
 
-    const allPromises = toRefresh.map(async nodeRef => {
-      const refreshedNode = nodes.get(nodeRef.node.backendNodeId());
+    for (let i = 0; i < toRefresh.length; i++) {
+      const refreshedNode = nodes.get(toRefresh[i].backendNodeId());
 
       // It is possible for the refreshed node to be undefined even though it was defined previously.
       // We should keep the affected nodes consistent from the user perspective, so we will just keep the stale node instead of removing it.
       if (!refreshedNode) {
-        return;
+        continue;
       }
 
-      nodeRef.node = refreshedNode;
-      nodeRef.link = await Common.Linkifier.Linkifier.linkify(refreshedNode);
-    });
-
-    await Promise.all(allPromises);
+      toRefresh[i] = refreshedNode;
+    }
 
     this.#sendStatusUpdate();
   }
@@ -599,14 +596,9 @@ export interface MetricValue {
   warnings?: string[];
 }
 
-export interface NodeRef {
-  node: SDK.DOMModel.DOMNode;
-  link: Node;
-}
-
 export interface LcpValue extends MetricValue {
   phases: Spec.LcpPhases;
-  nodeRef?: NodeRef;
+  nodeRef?: SDK.DOMModel.DOMNode;
 }
 
 export interface InpValue extends MetricValue {
@@ -621,7 +613,7 @@ export interface ClsValue extends MetricValue {
 export interface LayoutShift {
   score: number;
   uniqueLayoutShiftId: Spec.UniqueLayoutShiftId;
-  affectedNodeRefs: NodeRef[];
+  affectedNodeRefs: SDK.DOMModel.DOMNode[];
 }
 
 export interface Interaction {
@@ -633,7 +625,7 @@ export interface Interaction {
   nextPaintTime: number;
   phases: Spec.InpPhases;
   longAnimationFrameTimings: Spec.PerformanceLongAnimationFrameTimingJSON[];
-  nodeRef?: NodeRef;
+  nodeRef?: SDK.DOMModel.DOMNode;
 }
 
 export interface StatusEvent {

package/front_end/panels/accessibility/AccessibilityNodeView.ts

@@ -10,6 +10,7 @@ import * as Protocol from '../../generated/protocol.js';
 import * as uiI18n from '../../ui/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+import * as PanelsCommon from '../common/common.js';
 
 import accessibilityNodeStyles from './accessibilityNode.css.js';
 import {AXAttributes, AXNativeSourceTypes, AXSourceTypes} from './AccessibilityStrings.js';
@@ -587,8 +588,11 @@ export class AXRelatedNodeElement {
       const valueElement = document.createElement('span');
       element.appendChild(valueElement);
       void this.deferredNode.resolvePromise().then(node => {
-        void Common.Linkifier.Linkifier.linkify(node, {tooltip: undefined, preventKeyboardFocus: true})
-            .then(linkfied => valueElement.appendChild(linkfied));
+        if (!node) {
+          return;
+        }
+        valueElement.appendChild(PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(
+            node, {tooltip: undefined, preventKeyboardFocus: true}));
       });
     } else if (this.idref) {
       element.classList.add('invalid');

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -474,7 +474,7 @@ function agentToConversationType(agent: AiAssistanceModel.AiAgent.AiAgent<unknow
   }
 
   if (agent instanceof AiAssistanceModel.PerformanceAgent.PerformanceAgent) {
-    return agent.getConversationType();
+    return AiAssistanceModel.AiHistoryStorage.ConversationType.PERFORMANCE;
   }
 
   throw new Error('Provided agent does not have a corresponding conversation type');

package/front_end/panels/ai_assistance/components/ChatView.ts

@@ -12,7 +12,7 @@ import type * as Platform from '../../../core/platform/platform.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as AiAssistanceModel from '../../../models/ai_assistance/ai_assistance.js';
 import * as Workspace from '../../../models/workspace/workspace.js';
-import * as ElementsPanel from '../../../panels/elements/elements.js';
+import * as PanelsCommon from '../../../panels/common/common.js';
 import * as PanelUtils from '../../../panels/utils/utils.js';
 import * as Marked from '../../../third_party/marked/marked.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
@@ -532,7 +532,6 @@ export class ChatView extends HTMLElement {
             suggestions: this.#props.emptyStateSuggestions,
             userInfo: this.#props.userInfo,
             markdownRenderer: this.#props.markdownRenderer,
-            conversationType: this.#props.conversationType,
             changeSummary: this.#props.changeSummary,
             changeManager: this.#props.changeManager,
             onSuggestionClick: this.#handleSuggestionClick,
@@ -932,7 +931,7 @@ function renderContextTitle(
     // FIXME: move this to the model code.
     const hiddenClassList = item.classNames().filter(
         className => className.startsWith(AiAssistanceModel.Injected.AI_ASSISTANCE_CSS_CLASS_NAME));
-    return html`<devtools-widget .widgetConfig=${UI.Widget.widgetConfig(ElementsPanel.DOMLinkifier.DOMNodeLink, {
+    return html`<devtools-widget .widgetConfig=${UI.Widget.widgetConfig(PanelsCommon.DOMLinkifier.DOMNodeLink, {
       node: item,
       options: {hiddenClassList, disabled}
     })}></devtools-widget>`;
@@ -1458,7 +1457,6 @@ function renderMainContents({
   onFeedbackSubmit: (rpcId: Host.AidaClient.RpcGlobalId, rate: Host.AidaClient.Rating, feedback?: string) => void,
   onCopyResponseClick: (message: ModelChatMessage) => void,
   onMessageContainerRef: (el: Element|undefined) => void,
-  conversationType: AiAssistanceModel.AiHistoryStorage.ConversationType,
   changeSummary?: string,
 }): Lit.LitTemplate {
   if (messages.length > 0) {

package/front_end/panels/ai_assistance/components/PerformanceAgentMarkdownRenderer.ts

@@ -8,6 +8,7 @@ import type * as Protocol from '../../../generated/protocol.js';
 import * as Trace from '../../../models/trace/trace.js';
 import type * as Marked from '../../../third_party/marked/marked.js';
 import * as Lit from '../../../ui/lit/lit.js';
+import * as PanelsCommon from '../../common/common.js';
 
 import {MarkdownRendererWithCodeBlock} from './MarkdownRendererWithCodeBlock.js';
 
@@ -84,7 +85,7 @@ export class PerformanceAgentMarkdownRenderer extends MarkdownRendererWithCodeBl
       return;
     }
 
-    const linkedNode = await Common.Linkifier.Linkifier.linkify(node, {textContent: label});
+    const linkedNode = PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(node, {textContent: label});
     return linkedNode;
   }
 }

package/front_end/panels/animation/AnimationTimeline.ts

@@ -18,6 +18,7 @@ import * as Buttons from '../../ui/components/buttons/buttons.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 PanelsCommon from '../common/common.js';
 
 import {AnimationGroupPreviewUI} from './AnimationGroupPreviewUI.js';
 import animationTimelineStyles from './animationTimeline.css.js';
@@ -1222,13 +1223,12 @@ export class NodeUI {
     }
     this.#node = node;
     this.nodeChanged();
-    void Common.Linkifier.Linkifier.linkify(node).then(link => {
-      link.addEventListener('click', () => {
-        Host.userMetrics.actionTaken(Host.UserMetrics.Action.AnimatedNodeDescriptionClicked);
-      });
-
-      this.#description.appendChild(link);
+    const link = PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(node);
+    link.addEventListener('click', () => {
+      Host.userMetrics.actionTaken(Host.UserMetrics.Action.AnimatedNodeDescriptionClicked);
     });
+
+    this.#description.appendChild(link);
     if (!node.ownerDocument) {
       this.nodeRemoved();
     }

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

@@ -108,8 +108,13 @@ export const DEFAULT_VIEW = (input: ViewInput, output: undefined, target: HTMLEl
           <span class="empty-state-header">${i18nString(UIStrings.noReportsToDisplay)}</span>
           <div class="empty-state-description">
             <span>${i18nString(UIStrings.reportingApiDescription)}</span>
-            ${UI.XLink.XLink.create(REPORTING_API_EXPLANATION_URL, i18nString(UIStrings.learnMore), undefined,
-              undefined, 'learn-more')}
+            <x-link
+              class="devtools-link"
+              href=${REPORTING_API_EXPLANATION_URL}
+              jslog=${VisualLogging.link()
+                      .track({ click: true, keydown: 'Enter|Space' })
+                      .context('learn-more')}
+            >${i18nString(UIStrings.learnMore)}</x-link>
           </div>
         </div>
       `}

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

@@ -97,9 +97,11 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
           <div class="empty-state-header">${i18nString(UIStrings.noEvents)}</div>
           <div class="empty-state-description">
             <span>${i18nString(UIStrings.sharedStorageDescription)}</span>
-            ${
-          UI.XLink.XLink.create(
-              SHARED_STORAGE_EXPLANATION_URL, i18nString(UIStrings.learnMore), 'x-link', undefined, 'learn-more')}
+            <x-link
+              class="x-link devtools-link"
+              href=${SHARED_STORAGE_EXPLANATION_URL}
+              jslog=${VisualLogging.link().track({click: true, keydown: 'Enter|Space'}).context('learn-more')}
+            >${i18nString(UIStrings.learnMore)}</x-link>
           </div>
         </div>`
       : html`

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

@@ -115,7 +115,13 @@ export class TrustTokensView extends LegacyWrapper.LegacyWrapper.WrappableCompon
           <div class="empty-state-header">${i18nString(UIStrings.noTrustTokens)}</div>
           <div class="empty-state-description">
             <span>${i18nString(UIStrings.trustTokensDescription)}</span>
-            ${UI.XLink.XLink.create(PRIVATE_STATE_TOKENS_EXPLANATION_URL, i18nString(UIStrings.learnMore), 'x-link', undefined, 'learn-more')}
+            <x-link
+              class="x-link devtools-link"
+              href=${PRIVATE_STATE_TOKENS_EXPLANATION_URL}
+              jslog=${VisualLogging.link()
+                      .track({ click: true, keydown: 'Enter|Space' })
+                      .context('learn-more')}
+            >${i18nString(UIStrings.learnMore)}</x-link>
           </div>
         </div>
       `;

package/front_end/panels/application/preloading/PreloadingView.ts

@@ -245,7 +245,11 @@ export class PreloadingRuleSetView extends UI.Widget.VBox {
           <span class="empty-state-header">${i18nString(UIStrings.noRulesDetected)}</span>
           <div class="empty-state-description">
             <span>${i18nString(UIStrings.rulesDescription)}</span>
-            ${UI.XLink.XLink.create(SPECULATION_EXPLANATION_URL, i18nString(UIStrings.learnMore), 'x-link', undefined, 'learn-more')}
+            <x-link
+              class="x-link devtools-link"
+              href=${SPECULATION_EXPLANATION_URL}
+              jslog=${VisualLogging.link().track({click: true, keydown:'Enter|Space'}).context('learn-more')}
+            >${i18nString(UIStrings.learnMore)}</x-link>
           </div>
         </div>
         <devtools-split-view sidebar-position="second">
@@ -402,9 +406,11 @@ export class PreloadingAttemptView extends UI.Widget.VBox {
           <span class="empty-state-header">${i18nString(UIStrings.noPrefetchAttempts)}</span>
           <div class="empty-state-description">
             <span>${i18nString(UIStrings.prefetchDescription)}</span>
-            ${
-            UI.XLink.XLink.create(
-                SPECULATION_EXPLANATION_URL, i18nString(UIStrings.learnMore), 'x-link', undefined, 'learn-more')}
+            <x-link
+              class="x-link devtools-link"
+              href=${SPECULATION_EXPLANATION_URL}
+              jslog=${VisualLogging.link().track({click: true, keydown: 'Enter|Space'}).context('learn-more')}
+            >${i18nString(UIStrings.learnMore)}</x-link>
           </div>
         </div>
         <devtools-split-view sidebar-position="second">

package/front_end/panels/application/preloading/components/PreloadingDisabledInfobar.ts

@@ -14,7 +14,7 @@ import * as Dialogs from '../../../../ui/components/dialogs/dialogs.js';
 import * as LegacyWrapper from '../../../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import * as RenderCoordinator from '../../../../ui/components/render_coordinator/render_coordinator.js';
 import * as uiI18n from '../../../../ui/i18n/i18n.js';
-import * as UI from '../../../../ui/legacy/legacy.js';
+import type * 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';
 
@@ -98,6 +98,8 @@ const str_ =
     i18n.i18n.registerUIStrings('panels/application/preloading/components/PreloadingDisabledInfobar.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+const LINK = 'https://developer.chrome.com/blog/prerender-pages/';
+
 export class PreloadingDisabledInfobar extends LegacyWrapper.LegacyWrapper.WrappableComponent<UI.Widget.VBox> {
   readonly #shadow = this.attachShadow({mode: 'open'});
   #data: Protocol.Preload.PreloadEnabledStateUpdatedEvent = {
@@ -168,14 +170,6 @@ export class PreloadingDisabledInfobar extends LegacyWrapper.LegacyWrapper.Wrapp
   }
 
   #dialogContents(): Lit.LitTemplate {
-    const LINK = 'https://developer.chrome.com/blog/prerender-pages/';
-
-    const learnMoreLink =
-        UI.XLink.XLink.create(LINK, i18nString(UIStrings.footerLearnMore), undefined, undefined, 'learn-more');
-    const iconLink = UI.Fragment.html`
-      <x-link class="icon-link devtools-link" tabindex="0" href="${LINK}"></x-link>
-    ` as UI.XLink.XLink;
-
     return html`
       <div id='contents'>
         <devtools-report>
@@ -186,8 +180,10 @@ export class PreloadingDisabledInfobar extends LegacyWrapper.LegacyWrapper.Wrapp
           ${this.#maybeDisableByHoldbackPrerenderSpeculationRules()}
         </devtools-report>
         <div id='footer'>
-          ${learnMoreLink}
-          ${iconLink}
+          <x-link class="devtools-link" tabindex="0" href=${LINK} 
+          jslog=${VisualLogging.link().track({click: true, keydown: 'Enter|Space'}).context('learn-more')}
+          >${i18nString(UIStrings.footerLearnMore)}</x-link>
+          <x-link class="icon-link devtools-link" tabindex="0" href=${LINK}></x-link>
         </div>
       </div>
     `;

package/front_end/panels/application/preloading/components/UsedPreloadingView.ts

@@ -16,7 +16,7 @@ import * as SDK from '../../../../core/sdk/sdk.js';
 import * as Protocol from '../../../../generated/protocol.js';
 import * as LegacyWrapper from '../../../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import * as RenderCoordinator from '../../../../ui/components/render_coordinator/render_coordinator.js';
-import * as UI from '../../../../ui/legacy/legacy.js';
+import type * 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 PreloadingHelper from '../helper/helper.js';
@@ -176,7 +176,13 @@ export class UsedPreloadingView extends LegacyWrapper.LegacyWrapper.WrappableCom
         <devtools-report-divider></devtools-report-divider>
 
         <devtools-report-section>
-          ${UI.XLink.XLink.create('https://developer.chrome.com/blog/prerender-pages/', i18nString(UIStrings.learnMore), 'link', undefined, 'learn-more')}
+          <x-link
+            class="link devtools-link"
+            href=${'https://developer.chrome.com/blog/prerender-pages/'}
+            jslog=${VisualLogging.link()
+                    .track({ click: true, keydown: 'Enter|Space' })
+                    .context('learn-more')}
+          >${i18nString(UIStrings.learnMore)}</x-link>
         </devtools-report-section>
       </devtools-report>
     `;
@@ -319,7 +325,13 @@ export class UsedPreloadingView extends LegacyWrapper.LegacyWrapper.WrappableCom
     return html`
       <devtools-report-section-header>${i18nString(UIStrings.currentURL)}</devtools-report-section-header>
       <devtools-report-section>
-        ${UI.XLink.XLink.create(this.#data.pageURL, undefined, 'link', undefined, 'current-url')}
+        <x-link
+          class="link devtools-link"
+          href=${this.#data.pageURL}
+          jslog=${VisualLogging.link()
+                  .track({ click: true, keydown: 'Enter|Space' })
+                  .context('current-url')}
+        >${this.#data.pageURL}</x-link>
       </devtools-report-section>
 
       <devtools-report-section-header>${i18nString(UIStrings.preloadedURLs)}</devtools-report-section-header>

package/front_end/panels/browser_debugger/DOMBreakpointsSidebarPane.ts

@@ -11,6 +11,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+import * as PanelsCommon from '../common/common.js';
 import * as Sources from '../sources/sources.js';
 
 import domBreakpointsSidebarPaneStyles from './domBreakpointsSidebarPane.css.js';
@@ -203,19 +204,17 @@ export class DOMBreakpointsSidebarPane extends UI.Widget.VBox implements
     const linkifiedNode = document.createElement('monospace');
     linkifiedNode.style.display = 'block';
     labelElement.appendChild(linkifiedNode);
-    void Common.Linkifier.Linkifier.linkify(item.node, {preventKeyboardFocus: true, tooltip: undefined})
-        .then(linkified => {
-          linkifiedNode.appendChild(linkified);
-          // Give the checkbox an aria-label as it is required for all form element
-          UI.ARIAUtils.setLabel(
-              checkbox, i18nString(UIStrings.sS, {PH1: breakpointTypeText, PH2: linkified.deepTextContent()}));
-          // The parent list element is the one that actually gets focused.
-          // Assign it an aria-label with complete information for the screen reader to read out properly
-          UI.ARIAUtils.setLabel(
-              element,
-              i18nString(
-                  UIStrings.sSS, {PH1: breakpointTypeText, PH2: linkified.deepTextContent(), PH3: checkedStateText}));
-        });
+    const linkified = PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(
+        item.node, {preventKeyboardFocus: true, tooltip: undefined});
+    linkifiedNode.appendChild(linkified);
+    // Give the checkbox an aria-label as it is required for all form element
+    UI.ARIAUtils.setLabel(
+        checkbox, i18nString(UIStrings.sS, {PH1: breakpointTypeText, PH2: linkified.deepTextContent()}));
+    // The parent list element is the one that actually gets focused.
+    // Assign it an aria-label with complete information for the screen reader to read out properly
+    UI.ARIAUtils.setLabel(
+        element,
+        i18nString(UIStrings.sSS, {PH1: breakpointTypeText, PH2: linkified.deepTextContent(), PH3: checkedStateText}));
 
     labelElement.appendChild(description);
 

package/front_end/panels/{elements → common}/DOMLinkifier.ts

@@ -21,7 +21,7 @@ const UIStrings = {
    */
   node: '<node>',
 } as const;
-const str_ = i18n.i18n.registerUIStrings('panels/elements/DOMLinkifier.ts', UIStrings);
+const str_ = i18n.i18n.registerUIStrings('panels/common/DOMLinkifier.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export interface Options extends Common.Linkifier.Options {
@@ -247,15 +247,15 @@ export class Linkifier implements Common.Linkifier.Linkifier {
 
     return linkifierInstance;
   }
-  linkify(object: Object, options?: Options): Node {
-    if (object instanceof SDK.DOMModel.DOMNode) {
+  linkify(node: SDK.DOMModel.DOMNode|SDK.DOMModel.DeferredDOMNode, options?: Options): HTMLElement {
+    if (node instanceof SDK.DOMModel.DOMNode) {
       const link = document.createElement('devtools-widget') as UI.Widget.WidgetElement<DOMNodeLink>;
-      link.widgetConfig = UI.Widget.widgetConfig(e => new DOMNodeLink(e, object, options));
+      link.widgetConfig = UI.Widget.widgetConfig(e => new DOMNodeLink(e, node, options));
       return link;
     }
-    if (object instanceof SDK.DOMModel.DeferredDOMNode) {
+    if (node instanceof SDK.DOMModel.DeferredDOMNode) {
       const link = document.createElement('devtools-widget') as UI.Widget.WidgetElement<DeferredDOMNodeLink>;
-      link.widgetConfig = UI.Widget.widgetConfig(e => new DeferredDOMNodeLink(e, object, options));
+      link.widgetConfig = UI.Widget.widgetConfig(e => new DeferredDOMNodeLink(e, node, options));
       return link;
     }
     throw new Error('Can\'t linkify non-node');

package/front_end/panels/common/common.ts

@@ -104,3 +104,4 @@ export * as ExtensionPanel from './ExtensionPanel.js';
 export * as ExtensionServer from './ExtensionServer.js';
 export * as ExtensionView from './ExtensionView.js';
 export * as PersistenceUtils from './PersistenceUtils.js';
+export * as DOMLinkifier from './DOMLinkifier.js';

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -843,8 +843,8 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     const result = document.createElement('span');
     const description = obj.description || '';
     if (description.length > getMaxTokenizableStringLength()) {
-      const propertyValue = new ObjectUI.ObjectPropertiesSection.ExpandableTextPropertyValue(
-          document.createElement('span'), description, getLongStringVisibleLength());
+      const propertyValue =
+          new ObjectUI.ObjectPropertiesSection.ExpandableTextPropertyValue(description, getLongStringVisibleLength());
       result.appendChild(propertyValue.element);
     } else {
       UI.UIUtils.createTextChild(result, description);
@@ -1889,8 +1889,8 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       linkifier: (arg0: string, arg1: Platform.DevToolsPath.UrlString, arg2?: number, arg3?: number) => Node):
       DocumentFragment {
     if (string.length > getMaxTokenizableStringLength()) {
-      const propertyValue = new ObjectUI.ObjectPropertiesSection.ExpandableTextPropertyValue(
-          document.createElement('span'), string, getLongStringVisibleLength());
+      const propertyValue =
+          new ObjectUI.ObjectPropertiesSection.ExpandableTextPropertyValue(string, getLongStringVisibleLength());
       const fragment = document.createDocumentFragment();
       fragment.appendChild(propertyValue.element);
       return fragment;

package/front_end/panels/css_overview/CSSOverviewCompletedView.ts

@@ -17,6 +17,7 @@ import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {Directives, html, type LitTemplate, nothing, render, type TemplateResult} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+import * as PanelsCommon from '../common/common.js';
 
 import cssOverviewCompletedViewStyles from './cssOverviewCompletedView.css.js';
 import type {GlobalStyleStats} from './CSSOverviewModel.js';
@@ -984,7 +985,7 @@ export class ElementDetailsView extends UI.Widget.Widget {
       if ('nodeId' in item && visibility.has('node-id')) {
         const frontendNode = relatedNodesMap?.get(item.nodeId) ?? null;
         if (frontendNode) {
-          link = await Common.Linkifier.Linkifier.linkify(frontendNode) as HTMLElement;
+          link = PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(frontendNode);
           showNode = () => frontendNode.scrollIntoView();
         }
       }