chrome-devtools-frontend 1.0.1543082 → 1.0.1544076

package/front_end/panels/settings/components/syncSection.css

@@ -4,63 +4,65 @@
  * found in the LICENSE file.
  */
 
-:host {
-  break-inside: avoid;
-  display: block;
-  width: 100%;
-  position: relative;
-}
+@scope to (devtools-widget > *) {
+  :scope {
+    break-inside: avoid;
+    display: block;
+    width: 100%;
+    position: relative;
+  }
 
-fieldset {
-  border: 0;
-  padding: 0;
-  padding: 4px 0 0;
-}
+  fieldset {
+    border: 0;
+    padding: 0;
+    padding: 4px 0 0;
+  }
 
-.link {
-  color: var(--sys-color-primary);
-  text-decoration: underline;
-  cursor: pointer;
-  outline-offset: 2px;
-}
+  .link {
+    color: var(--sys-color-primary);
+    text-decoration: underline;
+    cursor: pointer;
+    outline-offset: 2px;
+  }
 
-.account-avatar {
-  border: 0;
-  border-radius: var(--sys-shape-corner-full);
-  display: block;
-  height: var(--sys-size-9);
-  width: var(--sys-size-9);
-}
+  .account-avatar {
+    border: 0;
+    border-radius: var(--sys-shape-corner-full);
+    display: block;
+    height: var(--sys-size-9);
+    width: var(--sys-size-9);
+  }
 
-.account-info {
-  display: flex;
-  align-items: center;
-}
+  .account-info {
+    display: flex;
+    align-items: center;
+  }
 
-.account-email {
-  display: flex;
-  flex-direction: column;
-  margin-left: 8px;
-}
+  .account-email {
+    display: flex;
+    flex-direction: column;
+    margin-left: 8px;
+  }
 
-.not-signed-in {
-  padding-bottom: 4px;
-}
+  .not-signed-in {
+    padding-bottom: 4px;
+  }
 
-.setting-checkbox-container {
-  display: flex;
-  align-items: center;
-  gap: var(--sys-size-2);
-}
+  .setting-checkbox-container {
+    display: flex;
+    align-items: center;
+    gap: var(--sys-size-2);
+  }
 
-.setting-checkbox {
-  display: inline-block;
-}
+  .setting-checkbox {
+    display: inline-block;
+  }
 
-.gdp-profile-container {
-  padding-bottom: var(--sys-size-4);
+  .gdp-profile-container {
+    padding-bottom: var(--sys-size-4);
+  }
 
-  & .divider {
+  .gdp-profile-container .divider {
     left: 0;
     position: absolute;
     width: 100%;
@@ -68,57 +70,56 @@ fieldset {
     background: var(--sys-color-divider);
   }
 
-  & .gdp-profile-header {
+  .gdp-profile-container .gdp-profile-header {
     display: flex;
     align-items: center;
     gap: var(--sys-size-5);
     font-family: "Google Sans", system-ui;
     font-size: var(--sys-typescale-body3-size);
     height: var(--sys-size-11);
+  }
 
-    & .gdp-logo {
-      background-image: var(--image-file-gdp-logo-light);
-      background-size: contain;
-      width: 203px;
-      height: 18px;
-      background-repeat: no-repeat;
-    }
+  .gdp-profile-container .gdp-profile-header .gdp-logo {
+    background-image: var(--image-file-gdp-logo-light);
+    background-size: contain;
+    width: 203px;
+    height: 18px;
+    background-repeat: no-repeat;
+  }
 
-    :host-context(.theme-with-dark-background) & .gdp-logo {
-      background-image: var(--image-file-gdp-logo-dark);
-    }
+  :host-context(.theme-with-dark-background) & .gdp-profile-container .gdp-profile-header .gdp-logo {
+    background-image: var(--image-file-gdp-logo-dark);
   }
 
-  & .gdp-profile-sign-up-content {
+  .gdp-profile-container .gdp-profile-sign-up-content {
     padding-top: var(--sys-size-7);
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
 
-  & .gdp-profile-details-content {
+  .gdp-profile-container .gdp-profile-details-content {
     padding-top: var(--sys-size-7);
     font: var(--sys-typescale-body4-regular);
+  }
+
+  .gdp-profile-container .gdp-profile-details-content .plan-details {
+    margin-top: var(--sys-size-3);
+    height: 18px;
+    display: flex;
+    align-items: center;
+  }
+
+  .gdp-profile-container .gdp-profile-details-content .setting-container {
+    margin: calc(var(--sys-size-3) - 6px) 0 -6px;
+    display: flex;
+    align-items: center;
+    gap: var(--sys-size-2);
+  }
 
-    & .plan-details {
-      margin-top: var(--sys-size-3);
-      height: 18px;
-      display: flex;
-      align-items: center;
-    }
-
-    & .setting-container {
-      /* `<settigns-checkbox>` already provides 6px margin and we want to get rid of it here */
-      margin: calc(var(--sys-size-3) - 6px) -6px -6px;
-      display: flex;
-      align-items: center;
-      gap: var(--sys-size-2);
-    }
-
-    & .tooltip-content {
-      max-width: 278px;
-      padding: var(--sys-size-2) var(--sys-size-3);
-      font: var(--sys-typescale-body5-regular);
-    }
+  .gdp-profile-container .gdp-profile-details-content .tooltip-content {
+    max-width: 278px;
+    padding: var(--sys-size-2) var(--sys-size-3);
+    font: var(--sys-typescale-body5-regular);
   }
 }

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/DebuggerPlugin.ts

@@ -24,6 +24,7 @@ import * as Tooltips from '../../ui/components/tooltips/tooltips.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {AddDebugInfoURLDialog} from './AddSourceMapURLDialog.js';
@@ -2004,7 +2005,8 @@ class ValueDecoration extends CodeMirror.WidgetType {
       const propertyCount = value.preview ? value.preview.properties.length : 0;
       const entryCount = value.preview?.entries ? value.preview.entries.length : 0;
       if (value.preview && propertyCount + entryCount < 10) {
-        formatter.appendObjectPreview(nameValuePair, value.preview, false /* isEntry */);
+        /* eslint-disable-next-line  @devtools/no-lit-render-outside-of-view */
+        render(formatter.renderObjectPreview(value.preview), nameValuePair.createChild('span'));
       } else {
         const propertyValue = ObjectUI.ObjectPropertiesSection.ObjectPropertiesSection.createPropertyValue(
             value, /* wasThrown */ false, /* showPreview */ false);