chrome-devtools-frontend 1.0.1543472 → 1.0.1545096

package/front_end/panels/sources/AiCodeCompletionPlugin.ts

@@ -2,53 +2,23 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
-import * as Root from '../../core/root/root.js';
 import * as AiCodeCompletion from '../../models/ai_code_completion/ai_code_completion.js';
 import type * as Workspace from '../../models/workspace/workspace.js';
-import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
+import type * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import * as TextEditor from '../../ui/components/text_editor/text_editor.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as PanelCommon from '../common/common.js';
 
 import {Plugin} from './Plugin.js';
 
-const AI_CODE_COMPLETION_CHARACTER_LIMIT = 20_000;
 const DISCLAIMER_TOOLTIP_ID = 'sources-ai-code-completion-disclaimer-tooltip';
 const SPINNER_TOOLTIP_ID = 'sources-ai-code-completion-spinner-tooltip';
 const CITATIONS_TOOLTIP_ID = 'sources-ai-code-completion-citations-tooltip';
 
-function createCallbacks(editor: TextEditor.TextEditor.TextEditor): AiCodeCompletion.AiCodeCompletion.Callbacks {
-  return {
-    getSelectionHead: () => editor.editor.state.selection.main.head,
-    getCompletionHint: () => editor.editor.plugin(TextEditor.Config.showCompletionHint)?.currentHint,
-    setAiAutoCompletion: (args: {
-      text: string,
-      from: number,
-      startTime: number,
-      onImpression: (rpcGlobalId: Host.AidaClient.RpcGlobalId, latency: number, sampleId?: number) => void,
-      clearCachedRequest: () => void,
-      rpcGlobalId?: Host.AidaClient.RpcGlobalId,
-      sampleId?: number,
-    }|null) => editor.editor.dispatch({effects: TextEditor.Config.setAiAutoCompleteSuggestion.of(args)}),
-  };
-}
-
 export class AiCodeCompletionPlugin extends Plugin {
-  #aidaClient?: Host.AidaClient.AidaClient;
-  #aidaAvailability?: Host.AidaClient.AidaAccessPreconditions;
-  #boundOnAidaAvailabilityChange: () => Promise<void>;
-  #aiCodeCompletion?: AiCodeCompletion.AiCodeCompletion.AiCodeCompletion;
-  #aiCodeCompletionSetting = Common.Settings.Settings.instance().createSetting('ai-code-completion-enabled', false);
-  #aiCodeCompletionTeaserDismissedSetting =
-      Common.Settings.Settings.instance().createSetting('ai-code-completion-teaser-dismissed', false);
-  #teaserCompartment = new CodeMirror.Compartment();
-  #teaser?: PanelCommon.AiCodeCompletionTeaser;
-  #teaserDisplayTimeout?: number;
   #editor?: TextEditor.TextEditor.TextEditor;
   #aiCodeCompletionDisclaimer?: PanelCommon.AiCodeCompletionDisclaimer;
   #aiCodeCompletionDisclaimerContainer = document.createElement('div');
@@ -57,25 +27,39 @@ export class AiCodeCompletionPlugin extends Plugin {
   #aiCodeCompletionCitationsToolbar?: PanelCommon.AiCodeCompletionSummaryToolbar;
   #aiCodeCompletionCitationsToolbarContainer = document.createElement('div');
   #aiCodeCompletionCitationsToolbarAttached = false;
-
-  #boundEditorKeyDown: (event: KeyboardEvent) => Promise<void>;
-  #boundOnAiCodeCompletionSettingChanged: () => void;
+  aiCodeCompletionConfig: TextEditor.AiCodeCompletionProvider.AiCodeCompletionConfig;
+  #aiCodeCompletionProvider: TextEditor.AiCodeCompletionProvider.AiCodeCompletionProvider;
 
   constructor(uiSourceCode: Workspace.UISourceCode.UISourceCode) {
     super(uiSourceCode);
-    if (!this.#isAiCodeCompletionEnabled()) {
+    const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();
+    if (!AiCodeCompletion.AiCodeCompletion.AiCodeCompletion.isAiCodeCompletionEnabled(devtoolsLocale.locale)) {
       throw new Error('AI code completion feature is not enabled.');
     }
-    this.#boundEditorKeyDown = this.#editorKeyDown.bind(this);
-    this.#boundOnAiCodeCompletionSettingChanged = this.#onAiCodeCompletionSettingChanged.bind(this);
-    this.#boundOnAidaAvailabilityChange = this.#onAidaAvailabilityChange.bind(this);
-    Host.AidaClient.HostConfigTracker.instance().addEventListener(
-        Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#boundOnAidaAvailabilityChange);
-    const showTeaser = !this.#aiCodeCompletionSetting.get() && !this.#aiCodeCompletionTeaserDismissedSetting.get();
-    if (showTeaser) {
-      this.#teaser = new PanelCommon.AiCodeCompletionTeaser({onDetach: this.#detachAiCodeCompletionTeaser.bind(this)});
-    }
 
+    this.aiCodeCompletionConfig = {
+      completionContext: {
+        additionalFiles: this.uiSourceCode.url().startsWith('snippet://') ? [{
+          path: 'devtools-console-context.js',
+          content: AiCodeCompletion.AiCodeCompletion.consoleAdditionalContextFileContent,
+          included_reason: Host.AidaClient.Reason.RELATED_FILE,
+        }] :
+                                                                            undefined,
+        inferenceLanguage: this.#getInferenceLanguage()
+      },
+      onFeatureEnabled: () => {
+        this.#setupAiCodeCompletion();
+      },
+      onFeatureDisabled: () => {
+        this.#cleanupAiCodeCompletion();
+      },
+      onSuggestionAccepted: this.#onAiCodeCompletionSuggestionAccepted.bind(this),
+      onRequestTriggered: this.#onAiRequestTriggered.bind(this),
+      onResponseReceived: this.#onAiResponseReceived.bind(this),
+      panel: AiCodeCompletion.AiCodeCompletion.ContextFlavor.SOURCES,
+    };
+    this.#aiCodeCompletionProvider =
+        TextEditor.AiCodeCompletionProvider.AiCodeCompletionProvider.createInstance(this.aiCodeCompletionConfig);
     this.#aiCodeCompletionDisclaimerContainer.classList.add('ai-code-completion-disclaimer-container');
     this.#aiCodeCompletionDisclaimerContainer.style.paddingInline = 'var(--sys-size-3)';
   }
@@ -85,158 +69,28 @@ export class AiCodeCompletionPlugin extends Plugin {
   }
 
   override dispose(): void {
-    this.#teaser = undefined;
-    this.#aiCodeCompletionSetting.removeChangeListener(this.#boundOnAiCodeCompletionSettingChanged);
-    Host.AidaClient.HostConfigTracker.instance().removeEventListener(
-        Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#boundOnAidaAvailabilityChange);
-    this.#editor?.removeEventListener('keydown', this.#boundEditorKeyDown);
-    this.#cleanupAiCodeCompletion();
+    this.#aiCodeCompletionProvider.dispose();
     super.dispose();
   }
 
   override editorInitialized(editor: TextEditor.TextEditor.TextEditor): void {
     this.#editor = editor;
-    this.#editor.addEventListener('keydown', this.#boundEditorKeyDown);
-    this.#aiCodeCompletionSetting.addChangeListener(this.#boundOnAiCodeCompletionSettingChanged);
-    this.#onAiCodeCompletionSettingChanged();
-    void this.#onAidaAvailabilityChange();
+    this.#aiCodeCompletionProvider.editorInitialized(editor);
+    this.#editor.editor.dispatch({
+      effects: TextEditor.AiCodeCompletionProvider.setAiCodeCompletionTeaserMode.of(
+          TextEditor.AiCodeCompletionProvider.AiCodeCompletionTeaserMode.ON)
+    });
   }
 
   override editorExtension(): CodeMirror.Extension {
-    return [
-      CodeMirror.EditorView.updateListener.of(update => this.#editorUpdate(update)), this.#teaserCompartment.of([]),
-      TextEditor.Config.aiAutoCompleteSuggestion, CodeMirror.Prec.highest(CodeMirror.keymap.of(this.#editorKeymap()))
-    ];
+    return this.#aiCodeCompletionProvider.extension();
   }
 
   override rightToolbarItems(): UI.Toolbar.ToolbarItem[] {
     return [this.#aiCodeCompletionDisclaimerToolbarItem];
   }
 
-  #editorUpdate(update: CodeMirror.ViewUpdate): void {
-    if (this.#teaser) {
-      if (update.docChanged) {
-        update.view.dispatch({effects: this.#teaserCompartment.reconfigure([])});
-        window.clearTimeout(this.#teaserDisplayTimeout);
-        this.#addTeaserPluginToCompartment(update.view);
-      } else if (update.selectionSet && update.state.doc.length > 0) {
-        update.view.dispatch({effects: this.#teaserCompartment.reconfigure([])});
-      }
-    } else if (this.#aiCodeCompletion) {
-      if (update.docChanged && update.state.doc !== update.startState.doc) {
-        this.#triggerAiCodeCompletion();
-      }
-    }
-  }
-
-  #triggerAiCodeCompletion(): void {
-    if (!this.#editor || !this.#aiCodeCompletion) {
-      return;
-    }
-    const {doc, selection} = this.#editor.state;
-    const query = doc.toString();
-    const cursor = selection.main.head;
-    let prefix = query.substring(0, cursor);
-    if (prefix.trim().length === 0) {
-      return;
-    }
-    let suffix = query.substring(cursor);
-    if (prefix.length > AI_CODE_COMPLETION_CHARACTER_LIMIT) {
-      prefix = prefix.substring(prefix.length - AI_CODE_COMPLETION_CHARACTER_LIMIT);
-    }
-    if (suffix.length > AI_CODE_COMPLETION_CHARACTER_LIMIT) {
-      suffix = suffix.substring(0, AI_CODE_COMPLETION_CHARACTER_LIMIT);
-    }
-    this.#aiCodeCompletion.onTextChanged(prefix, suffix, cursor, this.#getInferenceLanguage());
-  }
-
-  #editorKeymap(): readonly CodeMirror.KeyBinding[] {
-    return [
-      {
-        key: 'Escape',
-        run: (): boolean => {
-          if (this.#aiCodeCompletion && this.#editor && TextEditor.Config.hasActiveAiSuggestion(this.#editor.state)) {
-            this.#editor.dispatch({
-              effects: TextEditor.Config.setAiAutoCompleteSuggestion.of(null),
-            });
-            return true;
-          }
-          return false;
-        },
-      },
-      {
-        key: 'Tab',
-        run: (): boolean => {
-          if (this.#aiCodeCompletion && this.#editor && TextEditor.Config.hasActiveAiSuggestion(this.#editor.state)) {
-            const {accepted, suggestion} = TextEditor.Config.acceptAiAutoCompleteSuggestion(this.#editor.editor);
-            if (accepted) {
-              if (suggestion?.rpcGlobalId) {
-                this.#aiCodeCompletion?.registerUserAcceptance(suggestion.rpcGlobalId, suggestion.sampleId);
-              }
-              this.#onAiCodeCompletionSuggestionAccepted();
-            }
-            return accepted;
-          }
-          return false;
-        },
-      }
-    ];
-  }
-
-  async #editorKeyDown(event: KeyboardEvent): Promise<void> {
-    if (!this.#teaser?.isShowing()) {
-      return;
-    }
-    const keyboardEvent = event;
-    if (UI.KeyboardShortcut.KeyboardShortcut.eventHasCtrlEquivalentKey(keyboardEvent)) {
-      if (keyboardEvent.key === 'i') {
-        keyboardEvent.consume(true);
-        void VisualLogging.logKeyDown(event.currentTarget, event, 'ai-code-completion-teaser.fre');
-        await this.#teaser?.onAction(event);
-      } else if (keyboardEvent.key === 'x') {
-        keyboardEvent.consume(true);
-        void VisualLogging.logKeyDown(event.currentTarget, event, 'ai-code-completion-teaser.dismiss');
-        this.#teaser?.onDismiss(event);
-      }
-    }
-  }
-
-  #addTeaserPluginToCompartment = Common.Debouncer.debounce((view: CodeMirror.EditorView) => {
-    this.#teaserDisplayTimeout = window.setTimeout(() => {
-      this.#addTeaserPluginToCompartmentImmediate(view);
-    }, AiCodeCompletion.AiCodeCompletion.DELAY_BEFORE_SHOWING_RESPONSE_MS);
-  }, AiCodeCompletion.AiCodeCompletion.AIDA_REQUEST_DEBOUNCE_TIMEOUT_MS);
-
-  #addTeaserPluginToCompartmentImmediate = (view: CodeMirror.EditorView): void => {
-    if (!this.#teaser) {
-      return;
-    }
-
-    view.dispatch({effects: this.#teaserCompartment.reconfigure([aiCodeCompletionTeaserExtension(this.#teaser)])});
-  };
-
   #setupAiCodeCompletion(): void {
-    if (!this.#editor) {
-      return;
-    }
-    if (!this.#aidaClient) {
-      this.#aidaClient = new Host.AidaClient.AidaClient();
-    }
-    if (this.#teaser) {
-      this.#detachAiCodeCompletionTeaser();
-      this.#teaser = undefined;
-    }
-    if (!this.#aiCodeCompletion) {
-      const contextFlavor = this.uiSourceCode.url().startsWith('snippet://') ?
-          AiCodeCompletion.AiCodeCompletion.ContextFlavor.CONSOLE :
-          AiCodeCompletion.AiCodeCompletion.ContextFlavor.SOURCES;
-      this.#aiCodeCompletion = new AiCodeCompletion.AiCodeCompletion.AiCodeCompletion(
-          {aidaClient: this.#aidaClient}, contextFlavor, createCallbacks(this.#editor));
-      this.#aiCodeCompletion.addEventListener(
-          AiCodeCompletion.AiCodeCompletion.Events.REQUEST_TRIGGERED, this.#onAiRequestTriggered, this);
-      this.#aiCodeCompletion.addEventListener(
-          AiCodeCompletion.AiCodeCompletion.Events.RESPONSE_RECEIVED, this.#onAiResponseReceived, this);
-    }
     this.#createAiCodeCompletionDisclaimer();
     this.#createAiCodeCompletionCitationsToolbar();
   }
@@ -281,46 +135,10 @@ export class AiCodeCompletionPlugin extends Plugin {
     }
   }
 
-  #onAiCodeCompletionSettingChanged(): void {
-    if (this.#aiCodeCompletionSetting.get()) {
-      this.#setupAiCodeCompletion();
-    } else if (this.#aiCodeCompletion) {
-      this.#cleanupAiCodeCompletion();
-    }
-  }
-
-  async #onAidaAvailabilityChange(): Promise<void> {
-    const currentAidaAvailability = await Host.AidaClient.AidaClient.checkAccessPreconditions();
-    if (currentAidaAvailability !== this.#aidaAvailability) {
-      this.#aidaAvailability = currentAidaAvailability;
-      if (this.#aidaAvailability === Host.AidaClient.AidaAccessPreconditions.AVAILABLE) {
-        this.#onAiCodeCompletionSettingChanged();
-        if (this.#editor?.state.doc.length === 0) {
-          this.#addTeaserPluginToCompartmentImmediate(this.#editor?.editor);
-        }
-      } else if (this.#aiCodeCompletion) {
-        this.#cleanupAiCodeCompletion();
-        if (this.#teaser) {
-          this.#editor?.dispatch({
-            effects: this.#teaserCompartment.reconfigure([]),
-          });
-        }
-      }
-    }
-  }
-
   #cleanupAiCodeCompletion(): void {
-    this.#aiCodeCompletion?.removeEventListener(
-        AiCodeCompletion.AiCodeCompletion.Events.REQUEST_TRIGGERED, this.#onAiRequestTriggered, this);
-    this.#aiCodeCompletion?.removeEventListener(
-        AiCodeCompletion.AiCodeCompletion.Events.RESPONSE_RECEIVED, this.#onAiResponseReceived, this);
-    this.#aiCodeCompletion?.remove();
-    this.#aiCodeCompletion = undefined;
-    this.#aiCodeCompletionCitations = [];
-    this.#aiCodeCompletionDisclaimer?.detach();
+    this.#aiCodeCompletionDisclaimerContainer.removeChildren();
     this.#aiCodeCompletionDisclaimer = undefined;
     this.#removeAiCodeCompletionCitationsToolbar();
-    this.#aiCodeCompletionCitationsToolbar = undefined;
   }
 
   #onAiRequestTriggered = (): void => {
@@ -329,13 +147,12 @@ export class AiCodeCompletionPlugin extends Plugin {
     }
   };
 
-  #onAiResponseReceived =
-      (event: Common.EventTarget.EventTargetEvent<AiCodeCompletion.AiCodeCompletion.ResponseReceivedEvent>): void => {
-        this.#aiCodeCompletionCitations = event.data.citations ?? [];
-        if (this.#aiCodeCompletionDisclaimer) {
-          this.#aiCodeCompletionDisclaimer.loading = false;
-        }
-      };
+  #onAiResponseReceived = (citations: Host.AidaClient.Citation[]): void => {
+    this.#aiCodeCompletionCitations = citations;
+    if (this.#aiCodeCompletionDisclaimer) {
+      this.#aiCodeCompletionDisclaimer.loading = false;
+    }
+  };
 
   #onAiCodeCompletionSuggestionAccepted(): void {
     if (!this.#aiCodeCompletionCitationsToolbar || this.#aiCodeCompletionCitations.length === 0) {
@@ -349,28 +166,6 @@ export class AiCodeCompletionPlugin extends Plugin {
     }
   }
 
-  #detachAiCodeCompletionTeaser(): void {
-    this.#editor?.dispatch({
-      effects: this.#teaserCompartment.reconfigure([]),
-    });
-    this.#teaser = undefined;
-  }
-
-  #isAiCodeCompletionEnabled(): boolean {
-    const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();
-    const aidaAvailability = Root.Runtime.hostConfig.aidaAvailability;
-    if (!devtoolsLocale.locale.startsWith('en-')) {
-      return false;
-    }
-    if (aidaAvailability?.blockedByGeo) {
-      return false;
-    }
-    if (aidaAvailability?.blockedByAge) {
-      return false;
-    }
-    return Boolean(Root.Runtime.hostConfig.devToolsAiCodeCompletion?.enabled);
-  }
-
   #getInferenceLanguage(): Host.AidaClient.AidaInferenceLanguage|undefined {
     const mimeType = this.uiSourceCode.mimeType();
     switch (mimeType) {
@@ -435,51 +230,4 @@ export class AiCodeCompletionPlugin extends Plugin {
         return undefined;
     }
   }
-
-  setAidaClientForTest(aidaClient: Host.AidaClient.AidaClient): void {
-    this.#aidaClient = aidaClient;
-  }
-}
-
-export function aiCodeCompletionTeaserExtension(teaser: PanelCommon.AiCodeCompletionTeaser): CodeMirror.Extension {
-  const teaserPlugin = CodeMirror.ViewPlugin.fromClass(class {
-    #teaserDecoration: CodeMirror.DecorationSet;
-
-    constructor(readonly view: CodeMirror.EditorView) {
-      const cursorPosition = this.view.state.selection.main.head;
-      const line = this.view.state.doc.lineAt(cursorPosition);
-      const column = cursorPosition - line.from;
-      const isCursorAtEndOfLine = column >= line.length;
-      if (isCursorAtEndOfLine) {
-        this.#teaserDecoration = CodeMirror.Decoration.set([
-          CodeMirror.Decoration
-              .widget({
-                widget: new TextEditor.AiCodeCompletionTeaserPlaceholder.AiCodeCompletionTeaserPlaceholder(teaser),
-                side: 1
-              })
-              .range(cursorPosition),
-        ]);
-      } else {
-        this.#teaserDecoration = CodeMirror.Decoration.none;
-      }
-    }
-
-    declare update: () => void;
-
-    get decorations(): CodeMirror.DecorationSet {
-      return this.#teaserDecoration;
-    }
-  }, {
-    decorations: v => v.decorations,
-    eventHandlers: {
-      mousedown(event: MouseEvent): boolean {
-        // Required for mouse click to propagate to the "Don't show again" span in teaser.
-        if (event.target instanceof Node && teaser.contentElement.contains(event.target)) {
-          return true;
-        }
-        return false;
-      },
-    },
-  });
-  return teaserPlugin;
 }

package/front_end/panels/sources/DebuggerPausedMessage.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-imperative-dom-api */
 
-import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
@@ -14,6 +13,7 @@ import * as IconButton from '../../ui/components/icon_button/icon_button.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 {getLocalizedBreakpointName} from './CategorizedBreakpointL10n.js';
 import debuggerPausedMessageStyles from './debuggerPausedMessage.css.js';
@@ -168,11 +168,11 @@ export class DebuggerPausedMessage {
         i18nString(UIStrings.pausedOnS, {PH1: breakpointType ? breakpointType() : String(null)})));
 
     const subElement = messageWrapper.createChild('div', 'status-sub monospace');
-    const linkifiedNode = await Common.Linkifier.Linkifier.linkify(data.node);
+    const linkifiedNode = PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(data.node);
     subElement.appendChild(linkifiedNode);
 
     if (data.targetNode) {
-      const targetNodeLink = await Common.Linkifier.Linkifier.linkify(data.targetNode);
+      const targetNodeLink = PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(data.targetNode);
       let messageElement;
       if (data.insertion) {
         if (data.targetNode === data.node) {

package/front_end/panels/sources/SourcesPanel.ts

@@ -252,8 +252,12 @@ export class SourcesPanel extends UI.Panel.Panel implements
     const initialDebugSidebarWidth = 225;
     this.splitWidget =
         new UI.SplitWidget.SplitWidget(true, true, 'sources-panel-split-view-state', initialDebugSidebarWidth);
-    this.splitWidget.enableShowModeSaving();
     this.splitWidget.show(this.element);
+    if (Root.Runtime.Runtime.isTraceApp()) {
+      this.splitWidget.hideSidebar();
+    } else {
+      this.splitWidget.enableShowModeSaving();
+    }
 
     // Create scripts navigator
     const initialNavigatorWidth = 225;

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -56,6 +56,7 @@ import imagePreviewStyles from '../../ui/legacy/components/utils/imagePreview.cs
 import * as LegacyComponents from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
+import * as PanelsCommon from '../common/common.js';
 
 import {getDurationString} from './AppenderUtils.js';
 import * as TimelineComponents from './components/components.js';
@@ -1483,7 +1484,7 @@ export class TimelineUIUtils {
     const relatedNodes = relatedNodesMap?.values() || [];
     for (const relatedNode of relatedNodes) {
       if (relatedNode) {
-        const nodeSpan = await Common.Linkifier.Linkifier.linkify(relatedNode);
+        const nodeSpan = PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(relatedNode);
         contentHelper.appendElementRow(relatedNodeLabel || i18nString(UIStrings.relatedNode), nodeSpan);
       }
     }
@@ -1845,7 +1846,7 @@ export class TimelineUIUtils {
           null;
       if (node) {
         const nodeSpan = document.createElement('span');
-        void Common.Linkifier.Linkifier.linkify(node).then(link => nodeSpan.appendChild(link));
+        nodeSpan.appendChild(PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(node));
         return nodeSpan;
       }
       if (invalidation.args.data.nodeName) {

package/front_end/panels/timeline/components/LiveMetricsView.ts

@@ -30,6 +30,7 @@ import * as uiI18n from '../../../ui/i18n/i18n.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
+import * as PanelsCommon from '../../common/common.js';
 import {getThrottlingRecommendations} from '../utils/Helpers.js';
 
 import {CPUThrottlingSelector} from './CPUThrottlingSelector.js';
@@ -40,6 +41,7 @@ import metricValueStyles from './metricValueStyles.css.js';
 import {CLS_THRESHOLDS, INP_THRESHOLDS, renderMetricValue} from './Utils.js';
 
 const {html, nothing} = Lit;
+const {widgetConfig} = UI.Widget;
 
 type DeviceOption = CrUXManager.DeviceScope|'AUTO';
 
@@ -449,7 +451,8 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
 
   #renderLcpCard(): Lit.LitTemplate {
     const fieldData = this.#cruxManager.getSelectedFieldMetricData('largest_contentful_paint');
-    const nodeLink = this.#lcpValue?.nodeRef?.link;
+    const nodeLink =
+        this.#lcpValue?.nodeRef && PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(this.#lcpValue?.nodeRef);
     const phases = this.#lcpValue?.phases;
 
     const fieldPhases = this.#getLcpFieldPhases();
@@ -473,7 +476,10 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
         ${nodeLink ? html`
             <div class="related-info" slot="extra-info">
               <span class="related-info-label">${i18nString(UIStrings.lcpElement)}</span>
-              <span class="related-info-link">${nodeLink}</span>
+              <span class="related-info-link">
+               <devtools-widget .widgetConfig=${widgetConfig(PanelsCommon.DOMLinkifier.DOMNodeLink, {node: this.#lcpValue?.nodeRef})}>
+               </devtools-widget>
+              </span>
             </div>
           `
           : nothing}
@@ -636,7 +642,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
         </ul>
       ` : nothing}
       <div class="environment-option">
-        <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(CPUThrottlingSelector, {recommendedOption: recs.cpuOption})}></devtools-widget>
+        <devtools-widget .widgetConfig=${widgetConfig(CPUThrottlingSelector, {recommendedOption: recs.cpuOption})}></devtools-widget>
       </div>
       <div class="environment-option">
         <devtools-network-throttling-selector .recommendedConditions=${recs.networkConditions}></devtools-network-throttling-selector>
@@ -956,7 +962,10 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
                       html`<span class="interaction-inp-chip" title=${i18nString(UIStrings.inpInteraction)}>INP</span>`
                     : nothing}
                   </span>
-                  <span class="interaction-node">${interaction.nodeRef?.link}</span>
+                  <span class="interaction-node">
+                    <devtools-widget .widgetConfig=${widgetConfig(PanelsCommon.DOMLinkifier.DOMNodeLink, {node: interaction.nodeRef})}>
+                    </devtools-widget>
+                  </span>
                   ${isP98Excluded ? html`<devtools-icon
                     class="interaction-info"
                     name="info"
@@ -1062,8 +1071,11 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
             <li id=${layoutShift.uniqueLayoutShiftId} class="log-item layout-shift" tabindex="-1">
               <div class="layout-shift-score">Layout shift score: ${metricValue}</div>
               <div class="layout-shift-nodes">
-                ${layoutShift.affectedNodeRefs.map(({link}) => html`
-                  <div class="layout-shift-node">${link}</div>
+                ${layoutShift.affectedNodeRefs.map(node => html`
+                  <div class="layout-shift-node">
+                    <devtools-widget .widgetConfig=${widgetConfig(PanelsCommon.DOMLinkifier.DOMNodeLink, {node})}>
+                    </devtools-widget>
+                  </div>
                 `)}
               </div>
             </li>

package/front_end/panels/timeline/components/MetricCard.ts

@@ -9,7 +9,7 @@ import * as CrUXManager from '../../../models/crux-manager/crux-manager.js';
 import type * as Trace from '../../../models/trace/trace.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
-import * as UI from '../../../ui/legacy/legacy.js';
+import * as UIHelpers from '../../../ui/helpers/helpers.js';
 import * as Lit from '../../../ui/lit/lit.js';
 
 import metricCardStyles from './metricCard.css.js';
@@ -622,7 +622,7 @@ export class MetricCard extends HTMLElement {
             title=${this.#getHelpTooltip()}
             .iconName=${'help'}
             .variant=${Buttons.Button.Variant.ICON}
-            @click=${() => UI.UIUtils.openInNewTab(helpLink)}
+            @click=${() => UIHelpers.openInNewTab(helpLink)}
           ></devtools-button>
         </h3>
         <div tabindex="0" class="metric-values-section"

package/front_end/panels/timeline/components/insights/NodeLink.ts

@@ -5,7 +5,6 @@
 
 // TODO: move to ui/components/node_link?
 
-import * as Common from '../../../../core/common/common.js';
 import type * as Platform from '../../../../core/platform/platform.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../../generated/protocol.js';
@@ -13,13 +12,14 @@ import * as Buttons from '../../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../../ui/components/helpers/helpers.js';
 import * as LegacyComponents from '../../../../ui/legacy/components/utils/utils.js';
 import * as Lit from '../../../../ui/lit/lit.js';
+import * as PanelsCommon from '../../../common/common.js';
 
 const {html} = Lit;
 
 export interface NodeLinkData {
   backendNodeId: Protocol.DOM.BackendNodeId;
   frame: string;
-  options?: Common.Linkifier.Options;
+  options?: PanelsCommon.DOMLinkifier.Options;
   /**
    * URL to display if backendNodeId cannot be resolved (ie for traces loaded from disk).
    * Will be given to linkifyURL. Use this or one of the other fallback fields.
@@ -41,7 +41,7 @@ export class NodeLink extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
   #backendNodeId?: Protocol.DOM.BackendNodeId;
   #frame?: string;
-  #options?: Common.Linkifier.Options;
+  #options?: PanelsCommon.DOMLinkifier.Options;
   #fallbackUrl?: Platform.DevToolsPath.UrlString;
   #fallbackHtmlSnippet?: string;
   #fallbackText?: string;
@@ -92,7 +92,7 @@ export class NodeLink extends HTMLElement {
 
     // TODO: it'd be nice if we could specify what attributes to render,
     // ex for the Viewport insight: <meta content="..."> (instead of just <meta>)
-    const linkedNode = await Common.Linkifier.Linkifier.linkify(node, this.#options);
+    const linkedNode = PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(node, this.#options);
     this.#linkifiedNodeForBackendId.set(this.#backendNodeId, linkedNode);
     return linkedNode;
   }

package/front_end/panels/timeline/overlays/components/EntryLabelOverlay.ts

@@ -15,6 +15,7 @@ import * as Root from '../../../../core/root/root.js';
 import * as AiAssistanceModels from '../../../../models/ai_assistance/ai_assistance.js';
 import * as Buttons from '../../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../../ui/components/helpers/helpers.js';
+import * as UIHelpers from '../../../../ui/helpers/helpers.js';
 import * as UI from '../../../../ui/legacy/legacy.js';
 import * as ThemeSupport from '../../../../ui/legacy/theme_support/theme_support.js';
 import * as Lit from '../../../../ui/lit/lit.js';
@@ -574,7 +575,7 @@ export class EntryLabelOverlay extends HTMLElement {
         },
       ],
       onLearnMoreClick: () => {
-        UI.UIUtils.openInNewTab('https://developer.chrome.com/docs/devtools/performance/annotations#auto-annotations');
+        UIHelpers.openInNewTab('https://developer.chrome.com/docs/devtools/performance/annotations#auto-annotations');
       },
       learnMoreButtonText: UIStringsNotTranslate.learnMoreButton,
     });

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

@@ -323,16 +323,6 @@ Common.Settings.registerSettingExtension({
   defaultValue: false,
 });
 
-Common.Linkifier.registerLinkifier({
-  contextTypes() {
-    return maybeRetrieveContextTypes(Timeline => [Timeline.CLSLinkifier.CLSRect]);
-  },
-  async loadLinkifier() {
-    const Timeline = await loadTimelineModule();
-    return Timeline.CLSLinkifier.Linkifier.instance();
-  },
-});
-
 UI.ContextMenu.registerItem({
   location: UI.ContextMenu.ItemLocation.TIMELINE_MENU_OPEN,
   actionId: 'timeline.load-from-file',