chrome-devtools-frontend 1.0.1473514 → 1.0.1506453

package/front_end/ui/components/text_editor/TextEditor.test.ts

@@ -36,15 +36,6 @@ function makeState(doc: string, extensions: CodeMirror.Extension = []) {
 }
 
 describeWithEnvironment('TextEditor', () => {
-  afterEach(() => {
-    // These do not get removed when the text editor is disconnected and calls
-    // the CodeMirror destroy() method.
-    const cmTooltips = document.body.querySelectorAll('.editor-tooltip-host');
-    for (const tooltip of cmTooltips) {
-      document.body.removeChild(tooltip);
-    }
-  });
-
   describe('component', () => {
     it('has a state property', () => {
       const editor = new TextEditor.TextEditor.TextEditor(makeState('one'));
@@ -209,6 +200,71 @@ describeWithEnvironment('TextEditor', () => {
     });
   });
 
+  describe('AI auto completion', () => {
+    it('can dispatch an effect to set the AI auto complete suggestion', () => {
+      const editor = new TextEditor.TextEditor.TextEditor(makeState('', TextEditor.Config.aiAutoCompleteSuggestion));
+      renderElementIntoDOM(editor);
+
+      const text = 'hello';
+      editor.dispatch({
+        effects: TextEditor.Config.setAiAutoCompleteSuggestion.of({text, from: 0}),
+      });
+
+      const actualSuggestion = editor.editor.state.field(TextEditor.Config.aiAutoCompleteSuggestionState);
+      assert.isOk(actualSuggestion);
+      assert.strictEqual(actualSuggestion.text, text);
+      editor.remove();
+    });
+
+    it('keeps the AI suggestion if the typed text is a prefix of the suggestion', () => {
+      const editor = new TextEditor.TextEditor.TextEditor(makeState('', TextEditor.Config.aiAutoCompleteSuggestion));
+      renderElementIntoDOM(editor);
+
+      editor.dispatch({
+        effects: TextEditor.Config.setAiAutoCompleteSuggestion.of({text: 'hello', from: 0}),
+      });
+      assert.isOk(editor.editor.state.field(TextEditor.Config.aiAutoCompleteSuggestionState));
+
+      editor.dispatch({
+        changes: {from: 0, insert: 'he'},
+        selection: {anchor: 2},
+      });
+      assert.isOk(editor.editor.state.field(TextEditor.Config.aiAutoCompleteSuggestionState));
+      editor.remove();
+    });
+
+    it('clears the AI auto complete suggestion if the typed text is not a prefix of the suggestion', () => {
+      const editor = new TextEditor.TextEditor.TextEditor(makeState('', TextEditor.Config.aiAutoCompleteSuggestion));
+      renderElementIntoDOM(editor);
+
+      editor.dispatch({
+        effects: TextEditor.Config.setAiAutoCompleteSuggestion.of({text: 'hello', from: 0}),
+      });
+      assert.isOk(editor.editor.state.field(TextEditor.Config.aiAutoCompleteSuggestionState));
+
+      editor.dispatch({changes: {from: 0, insert: 'a'}, selection: {anchor: 1}});
+      assert.isNull(editor.editor.state.field(TextEditor.Config.aiAutoCompleteSuggestionState));
+      editor.remove();
+    });
+
+    it('can accept an AI auto complete suggestion', () => {
+      const editor = new TextEditor.TextEditor.TextEditor(makeState('', TextEditor.Config.aiAutoCompleteSuggestion));
+      renderElementIntoDOM(editor);
+      const text = 'hello';
+      editor.dispatch({
+        effects: TextEditor.Config.setAiAutoCompleteSuggestion.of({text, from: 0}),
+      });
+
+      const {accepted, suggestion} = TextEditor.Config.acceptAiAutoCompleteSuggestion(editor.editor);
+      assert.isTrue(accepted);
+      assert.strictEqual(suggestion?.text, text);
+
+      assert.strictEqual(editor.state.doc.toString(), text);
+      assert.isNull(editor.editor.state.field(TextEditor.Config.aiAutoCompleteSuggestionState));
+      editor.remove();
+    });
+  });
+
   it('dispatching a transaction from a saved editor reference should not throw an error', () => {
     const textEditor = new TextEditor.TextEditor.TextEditor(makeState('one'));
     const editorViewA = textEditor.editor;
@@ -238,9 +294,13 @@ describeWithMockConnection('TextEditor autocompletion', () => {
     const workspace = Workspace.Workspace.WorkspaceImpl.instance();
     const targetManager = SDK.TargetManager.TargetManager.instance();
     const resourceMapping = new Bindings.ResourceMapping.ResourceMapping(targetManager, workspace);
-
-    const {pluginManager} = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance(
-        {forceNew: true, targetManager, resourceMapping});
+    const ignoreListManager = Workspace.IgnoreListManager.IgnoreListManager.instance({forceNew: true});
+    const {pluginManager} = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance({
+      forceNew: true,
+      resourceMapping,
+      targetManager,
+      ignoreListManager,
+    });
     const testScript = debuggerModel.parsedScriptSource(
         '1' as Protocol.Runtime.ScriptId, urlString`script://1`, 0, 0, 0, 0, executionContext.id, '', undefined, false,
         undefined, false, false, 0, null, null, null, null, null, null, null);

package/front_end/ui/components/text_editor/TextEditor.ts

@@ -10,6 +10,7 @@ import * as CodeHighlighter from '../code_highlighter/code_highlighter.js';
 
 import {baseConfiguration, dummyDarkTheme, dynamicSetting, DynamicSetting, themeSelection} from './config.js';
 import {toLineColumn, toOffset} from './position.js';
+import textEditorStyles from './textEditor.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -41,6 +42,7 @@ export class TextEditor extends HTMLElement {
     super();
     this.#pendingState = pendingState;
     this.#shadow.createChild('style').textContent = CodeHighlighter.codeHighlighterStyles;
+    this.#shadow.createChild('style').textContent = textEditorStyles;
   }
 
   #createEditor(): CodeMirror.EditorView {

package/front_end/ui/components/text_editor/config.ts

@@ -4,6 +4,7 @@
 /* eslint-disable rulesdir/no-imperative-dom-api */
 
 import * as Common from '../../../core/common/common.js';
+import type * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as TextUtils from '../../../models/text_utils/text_utils.js';
 import * as WindowBoundsService from '../../../services/window_bounds/window_bounds.js';
@@ -20,14 +21,14 @@ const RECOMPUTE_INDENT_MAX_SIZE = 200;
 
 const UIStrings = {
   /**
-   *@description Label text for the editor
+   * @description Label text for the editor
    */
   codeEditor: 'Code editor',
   /**
-   *@description Aria alert to read the suggestion for the suggestion box when typing in text editor
-   *@example {name} PH1
-   *@example {2} PH2
-   *@example {5} PH3
+   * @description Aria alert to read the suggestion for the suggestion box when typing in text editor
+   * @example {name} PH1
+   * @example {2} PH2
+   * @example {5} PH3
    */
   sSuggestionSOfS: '{PH1}, suggestion {PH2} of {PH3}',
 } as const;
@@ -131,6 +132,7 @@ function moveCompletionSelectionIfNotConservative(
     if (CM.completionStatus(view.state) !== 'active') {
       return false;
     }
+    view.dispatch({effects: setAiAutoCompleteSuggestion.of(null)});
     if (view.state.field(conservativeCompletion, false)) {
       view.dispatch({effects: disableConservativeCompletion.of(null)});
       announceSelectedCompletionInfo(view);
@@ -147,6 +149,7 @@ function moveCompletionSelectionBackwardWrapper(): ((view: CM.EditorView) => boo
     if (CM.completionStatus(view.state) !== 'active') {
       return false;
     }
+    view.dispatch({effects: setAiAutoCompleteSuggestion.of(null)});
     CM.moveCompletionSelection(false)(view);
     announceSelectedCompletionInfo(view);
     return true;
@@ -160,7 +163,7 @@ function announceSelectedCompletionInfo(view: CM.EditorView): void {
     PH3: CM.currentCompletions(view.state).length,
   });
 
-  UI.ARIAUtils.alert(ariaMessage);
+  UI.ARIAUtils.LiveAnnouncer.alert(ariaMessage);
 }
 
 export const autocompletion = new DynamicSetting<boolean>(
@@ -199,12 +202,8 @@ export const codeFolding = DynamicSetting.bool('text-editor-code-folding', [
       const icon = new Icon.Icon.Icon();
       icon.setAttribute('class', open ? 'cm-foldGutterElement' : 'cm-foldGutterElement cm-foldGutterElement-folded');
       icon.setAttribute('jslog', `${VisualLogging.expand().track({click: true})}`);
-      icon.data = {
-        iconName,
-        color: 'var(--icon-fold-marker)',
-        width: '14px',
-        height: '14px',
-      };
+      icon.name = iconName;
+      icon.classList.add('small');
       return icon;
     },
   }),
@@ -481,3 +480,112 @@ export function contentIncludingHint(view: CM.EditorView): string {
   }
   return content;
 }
+
+export const setAiAutoCompleteSuggestion = CM.StateEffect.define<ActiveSuggestion|null>();
+
+interface ActiveSuggestion {
+  text: string;
+  from: number;
+  sampleId?: number;
+  rpcGlobalId?: Host.AidaClient.RpcGlobalId;
+}
+
+export const aiAutoCompleteSuggestionState = CM.StateField.define<ActiveSuggestion|null>({
+  create: () => null,
+  update(value, tr) {
+    for (const effect of tr.effects) {
+      if (effect.is(setAiAutoCompleteSuggestion)) {
+        if (effect.value) {
+          return effect.value;
+        }
+        return null;
+      }
+    }
+
+    if (!value) {
+      return value;
+    }
+
+    // A suggestion from an effect can be stale if the document was changed
+    // between when the request was sent and the response was received.
+    // We check if the position is still valid before trying to map it.
+    if (value.from > tr.startState.doc.length) {
+      return null;
+    }
+
+    // If deletion occurs, set to null. Otherwise, the mapping might fail if
+    // the position is inside the deleted range.
+    if (tr.docChanged && tr.state.doc.length < tr.startState.doc.length) {
+      return null;
+    }
+
+    const from = tr.changes.mapPos(value.from);
+    const {head} = tr.state.selection.main;
+
+    // If a change happened before the position from which suggestion was generated, set to null.
+    if (tr.changes.touchesRange(0, from - 1) || head < from) {
+      return null;
+    }
+
+    // Check if what's typed is a prefix of the suggestion.
+    const typedText = tr.state.doc.sliceString(from, head);
+    return value.text.startsWith(typedText) ? value : null;
+  },
+});
+
+export function hasActiveAiSuggestion(state: CM.EditorState): boolean {
+  return state.field(aiAutoCompleteSuggestionState) !== null;
+}
+
+export function acceptAiAutoCompleteSuggestion(view: CM.EditorView):
+    {accepted: boolean, suggestion?: ActiveSuggestion} {
+  const suggestion = view.state.field(aiAutoCompleteSuggestionState);
+  if (!suggestion) {
+    return {accepted: false};
+  }
+
+  const {text, from} = suggestion;
+  const {head} = view.state.selection.main;
+  const typedText = view.state.doc.sliceString(from, head);
+  if (!text.startsWith(typedText)) {
+    return {accepted: false};
+  }
+
+  const remainingText = text.slice(typedText.length);
+  view.dispatch({
+    changes: {from: head, insert: remainingText},
+    selection: {anchor: head + remainingText.length},
+    effects: setAiAutoCompleteSuggestion.of(null),
+    userEvent: 'input.complete',
+  });
+  return {accepted: true, suggestion};
+}
+
+export const aiAutoCompleteSuggestion: CM.Extension = [
+  aiAutoCompleteSuggestionState,
+  CM.ViewPlugin.fromClass(
+      class {
+        decorations: CM.DecorationSet = CM.Decoration.none;
+
+        update(update: CM.ViewUpdate): void {
+          const activeSuggestion = update.state.field(aiAutoCompleteSuggestionState);
+          const {head, empty} = update.state.selection.main;
+          let hint = '';
+          if (activeSuggestion && empty && head >= activeSuggestion.from) {
+            const {text, from} = activeSuggestion;
+            const typedText = update.state.doc.sliceString(from, head);
+            if (text.startsWith(typedText)) {
+              hint = text.slice(typedText.length);
+            }
+          }
+
+          if (!hint) {
+            this.decorations = CM.Decoration.none;
+          } else {
+            this.decorations =
+                CM.Decoration.set([CM.Decoration.widget({widget: new CompletionHint(hint), side: 1}).range(head)]);
+          }
+        }
+      },
+      {decorations: p => p.decorations}),
+];

package/front_end/ui/{legacy/components/inline_editor/bezierSwatch.css → components/text_editor/textEditor.css}

@@ -1,14 +1,10 @@
 /*
- * Copyright 2016 The Chromium Authors. All rights reserved.
+ * Copyright 2025 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
 
-:host {
-  white-space: nowrap;
-}
-
-devtools-icon {
+devtools-icon.bezier-swatch-icon {
   position: relative;
   transform: scale(0.7);
   margin: -5px -2px -3px -4px;

package/front_end/ui/components/text_editor/text_editor.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+export * as AiCodeCompletionTeaserPlaceholder from './AiCodeCompletionTeaserPlaceholder.js';
 export * as AutocompleteHistory from './AutocompleteHistory.js';
 export * as Config from './config.js';
 export * as ExecutionPositionHighlighter from './ExecutionPositionHighlighter.js';

package/front_end/ui/components/tooltips/Tooltip.test.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 import {renderElementIntoDOM} from '../../../testing/DOMHelpers.js';
-import {checkForPendingActivity} from '../../../testing/TrackAsyncOperations.js';
+import * as UI from '../../legacy/legacy.js';
 import * as Lit from '../../lit/lit.js';
 
 import * as Tooltips from './tooltips.js';
@@ -37,6 +37,7 @@ function renderTooltip({
     <devtools-tooltip
      id=${id}
      variant=${variant}
+     hover-delay=${0}
      ?use-click=${useClick}
      ?use-hotkey=${useHotkey}
      jslogContext=${jslogContext??nothing}
@@ -45,11 +46,34 @@ function renderTooltip({
     </devtools-tooltip>
   `, container);
   // clang-format on
-  renderElementIntoDOM(container);
+  renderElementIntoDOM(container, {allowMultipleChildren: true});
   return container;
 }
 
+async function waitForToggle(tooltip: Tooltips.Tooltip.Tooltip, state: 'open'|'closed'): Promise<void> {
+  return await new Promise<void>(resolve => {
+    tooltip.addEventListener('toggle', (event: Event) => {
+      if ((event as ToggleEvent).newState === state) {
+        resolve();
+      }
+    }, {once: true});
+  });
+}
+
 describe('Tooltip', () => {
+  let inspectorViewRootElementStub: HTMLElement;
+
+  beforeEach(async () => {
+    inspectorViewRootElementStub = document.createElement('div');
+    renderElementIntoDOM(inspectorViewRootElementStub, {allowMultipleChildren: true});
+
+    const inspectorViewStub = sinon.createStubInstance(UI.InspectorView.InspectorView);
+    Object.assign(inspectorViewStub, {element: inspectorViewRootElementStub});
+    sinon.stub(UI.InspectorView.InspectorView, 'instance').returns(inspectorViewStub);
+
+    Tooltips.Tooltip.Tooltip.lastOpenedTooltipId = null;
+  });
+
   it('renders a simple tooltip', () => {
     const container = renderTooltip();
     const tooltip = container.querySelector('devtools-tooltip');
@@ -66,74 +90,90 @@ describe('Tooltip', () => {
 
   it('should be activated if hovered', async () => {
     const container = renderTooltip();
+    const tooltip = container.querySelector('devtools-tooltip');
+    assert.exists(tooltip);
 
     const button = container.querySelector('button');
+    const opened = waitForToggle(tooltip, 'open');
     button?.dispatchEvent(new MouseEvent('mouseenter'));
 
-    await checkForPendingActivity();
-    assert.isTrue(container.querySelector('devtools-tooltip')?.open);
+    await opened;
+    assert.isTrue(tooltip.open);
   });
 
   it('should be activated if focused', async () => {
     const container = renderTooltip();
+    const tooltip = container.querySelector('devtools-tooltip');
+    assert.exists(tooltip);
 
+    const opened = waitForToggle(tooltip, 'open');
     const button = container.querySelector('button');
     button?.dispatchEvent(new FocusEvent('focus'));
 
-    await checkForPendingActivity();
-    assert.isTrue(container.querySelector('devtools-tooltip')?.open);
+    await opened;
+    assert.isTrue(tooltip.open);
   });
 
-  it('should not be activated if un-hovered', async () => {
+  it('should not be activated if un-hovered', () => {
+    const clock = sinon.useFakeTimers({toFake: ['setTimeout']});
     const container = renderTooltip();
 
     const button = container.querySelector('button');
     button?.dispatchEvent(new MouseEvent('mouseenter'));
     button?.dispatchEvent(new MouseEvent('mouseleave'));
 
-    await checkForPendingActivity();
+    clock.runAll();
     assert.isFalse(container.querySelector('devtools-tooltip')?.open);
+    clock.restore();
   });
 
-  it('should not be activated if dragged', async () => {
+  it('should not be activated if dragged', () => {
+    const clock = sinon.useFakeTimers({toFake: ['setTimeout']});
     const container = renderTooltip();
 
     const button = container.querySelector('button');
     button?.dispatchEvent(new MouseEvent('mouseenter', {buttons: 1}));
 
-    await checkForPendingActivity();
+    clock.runAll();
     assert.isFalse(container.querySelector('devtools-tooltip')?.open);
+    clock.restore();
   });
 
-  it('should not be activated if un-focused', async () => {
+  it('should not be activated if un-focused', () => {
+    const clock = sinon.useFakeTimers({toFake: ['setTimeout']});
     const container = renderTooltip();
 
     const button = container.querySelector('button');
     button?.dispatchEvent(new FocusEvent('focus'));
     button?.dispatchEvent(new FocusEvent('blur'));
 
-    await checkForPendingActivity();
+    clock.runAll();
     assert.isFalse(container.querySelector('devtools-tooltip')?.open);
+    clock.restore();
   });
 
-  it('should not open on hover if use-click is set', async () => {
+  it('should not open on hover if use-click is set', () => {
+    const clock = sinon.useFakeTimers({toFake: ['setTimeout']});
     const container = renderTooltip({useClick: true});
 
     const button = container.querySelector('button');
     button?.dispatchEvent(new MouseEvent('mouseenter'));
 
-    await checkForPendingActivity();
+    clock.runAll();
     assert.isFalse(container.querySelector('devtools-tooltip')?.open);
+    clock.restore();
   });
 
-  it('should not open on focus if use-click is set', async () => {
+  it('should not open on focus if use-click is set', () => {
+    const clock = sinon.useFakeTimers({toFake: ['setTimeout']});
     const container = renderTooltip({useClick: true});
 
     const button = container.querySelector('button');
     button?.dispatchEvent(new FocusEvent('focus'));
 
-    await checkForPendingActivity();
+    clock.runAll();
     assert.isFalse(container.querySelector('devtools-tooltip')?.open);
+    clock.restore();
   });
 
   it('should open with click if use-click is set', () => {
@@ -154,20 +194,19 @@ describe('Tooltip', () => {
     assert.isTrue(container.querySelector('devtools-tooltip')?.open);
   });
 
-  it('should not open on focus if use-hotkey is set', async () => {
+  it('should not open on focus if use-hotkey is set', () => {
     const container = renderTooltip({useHotkey: true});
 
     const button = container.querySelector('button');
     button?.dispatchEvent(new FocusEvent('focus'));
 
-    await checkForPendingActivity();
     assert.isFalse(container.querySelector('devtools-tooltip')?.open);
   });
 
   const eventsNotToPropagate = ['click', 'mouseup'];
 
   eventsNotToPropagate.forEach(eventName => {
-    it('shoould stop propagation of click events', () => {
+    it('should stop propagation of click events', () => {
       const container = renderTooltip();
       const callback = sinon.spy();
       container.addEventListener(eventName, callback);
@@ -186,29 +225,21 @@ describe('Tooltip', () => {
     sinon.assert.calledOnce(consoleSpy);
   });
 
-  it('can be instantiated programatically', () => {
-    const container = document.createElement('div');
-    const anchor = document.createElement('button');
-    anchor.setAttribute('aria-describedby', 'tooltip-id');
-    const tooltip = new Tooltips.Tooltip.Tooltip({id: 'tooltip-id', anchor});
-    tooltip.append('Text content');
-    container.appendChild(anchor);
-    container.appendChild(tooltip);
-    renderElementIntoDOM(container);
-
-    assert.strictEqual(anchor.style.anchorName, '--devtools-tooltip-tooltip-id-anchor');
-  });
-
   it('should hide the tooltip if anchor is removed from DOM', async () => {
     const container = renderTooltip();
+    const tooltip = container.querySelector('devtools-tooltip');
+    assert.exists(tooltip);
 
+    const opened = waitForToggle(tooltip, 'open');
     const button = container.querySelector('button');
     button?.dispatchEvent(new MouseEvent('mouseenter'));
-    await checkForPendingActivity();
+    await opened;
+
+    const closed = waitForToggle(tooltip, 'closed');
     button?.remove();
-    await checkForPendingActivity();
+    await closed;
 
-    assert.isFalse(container.querySelector('devtools-tooltip')?.open);
+    assert.isFalse(tooltip.open);
   });
 
   it('should not hide the tooltip if focus moves from the anchor into deep DOM within the tooltip', async () => {
@@ -222,14 +253,14 @@ describe('Tooltip', () => {
     // child, so for this test we make a nested DOM structure and test on that.
     tooltip.innerHTML = '<div><span><p class="deep-nested">nested</p></span></div>';
 
+    const opened = waitForToggle(tooltip, 'open');
     anchor.dispatchEvent(new FocusEvent('focus'));
-    await checkForPendingActivity();
+    await opened;
     assert.isTrue(tooltip.open);
     const richContents = container.querySelector('devtools-tooltip')?.querySelector('p.deep-nested');
     assert.exists(richContents);
 
     anchor.dispatchEvent(new FocusEvent('blur', {relatedTarget: richContents}));
-    await checkForPendingActivity();
     assert.isTrue(tooltip.open);  // tooltip should still be open
   });
 
@@ -255,10 +286,9 @@ describe('Tooltip', () => {
     const tooltip = container.querySelector('devtools-tooltip');
     assert.exists(tooltip);
 
-    const waitForOpen = Promise.withResolvers<Event>();
-    tooltip.ontoggle = waitForOpen.resolve;
+    const opened = waitForToggle(tooltip, 'open');
     tooltip.showTooltip();
-    await waitForOpen.promise;
+    await opened;
     assert.isTrue(tooltip.open);
 
     container.remove();