[Patch agent] Show infobar warning for AI-edited files in editor

If the working copy of a UISourceCode contains AI-generated changes,
show an infobar warning when this file is opened in an editor panel.

If the changes are discarded or saved to disk, the warning is removed.

Screenshot: https://i.imgur.com/4OqWghA.png

Bug: 399560250
Change-Id: If757dd49bf5b61d85319cbb3ae90fbabc0e042b4
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6355191
Reviewed-by: Simon Zünd <[email protected]>
Commit-Queue: Wolfgang Beyer <[email protected]>

Author: wolfib

config/gni/devtools_grd_files.gni

@@ -1796,6 +1796,7 @@ grd_files_debug_sources = [
   "front_end/panels/snippets/ScriptSnippetFileSystem.js",
   "front_end/panels/snippets/SnippetsQuickOpen.js",
   "front_end/panels/sources/AddSourceMapURLDialog.js",
+  "front_end/panels/sources/AiWarningInfobarPlugin.js",
   "front_end/panels/sources/BreakpointEditDialog.js",
   "front_end/panels/sources/CSSPlugin.js",
   "front_end/panels/sources/CallStackSidebarPane.js",

front_end/models/workspace/UISourceCode.ts

@@ -72,6 +72,7 @@ export class UISourceCode extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
   private contentEncodedInternal?: boolean;
   private isKnownThirdPartyInternal: boolean;
   private isUnconditionallyIgnoreListedInternal: boolean;
+  #containsAiChanges = false;
 
   constructor(project: Project, url: Platform.DevToolsPath.UrlString, contentType: Common.ResourceType.ResourceType) {
     super();
@@ -378,6 +379,7 @@ export class UISourceCode extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
   private innerResetWorkingCopy(): void {
     this.workingCopyInternal = null;
     this.workingCopyGetter = null;
+    this.setContainsAiChanges(false);
   }
 
   setWorkingCopy(newWorkingCopy: string): void {
@@ -386,6 +388,14 @@ export class UISourceCode extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     this.workingCopyChanged();
   }
 
+  setContainsAiChanges(containsAiChanges: boolean): void {
+    this.#containsAiChanges = containsAiChanges;
+  }
+
+  containsAiChanges(): boolean {
+    return this.#containsAiChanges;
+  }
+
   setContent(content: string, isBase64: boolean): void {
     this.contentEncodedInternal = isBase64;
     if (this.projectInternal.canSetFileContent()) {

front_end/panels/ai_assistance/AgentProject.ts

@@ -101,6 +101,7 @@ export class AgentProject {
     }
     this.#linesChanged += linesChanged;
     uiSourceCode.setWorkingCopy(content);
+    uiSourceCode.setContainsAiChanges(true);
   }
 
   /**

front_end/panels/sources/AiWarningInfobarPlugin.ts

@@ -0,0 +1,78 @@
+// 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.
+
+import * as i18n from '../../core/i18n/i18n.js';
+import * as Workspace from '../../models/workspace/workspace.js';
+import type * 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 {Plugin} from './Plugin.js';
+
+const UIStrings = {
+  /**
+   *@description Infobar text announcing that the file contents have been changed by AI
+   */
+  aiContentWarning: 'This file contains AI-generated content',
+} as const;
+const str_ = i18n.i18n.registerUIStrings('panels/sources/AiWarningInfobarPlugin.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export class AiWarningInfobarPlugin extends Plugin {
+  #editor: TextEditor.TextEditor.TextEditor|undefined = undefined;
+  #aiWarningInfobar: UI.Infobar.Infobar|null = null;
+
+  constructor(uiSourceCode: Workspace.UISourceCode.UISourceCode) {
+    super(uiSourceCode);
+    this.uiSourceCode.addEventListener(
+        Workspace.UISourceCode.Events.WorkingCopyCommitted, this.#onWorkingCopyCommitted, this);
+  }
+
+  override dispose(): void {
+    this.#aiWarningInfobar?.dispose();
+    this.#aiWarningInfobar = null;
+    this.uiSourceCode.removeEventListener(
+        Workspace.UISourceCode.Events.WorkingCopyCommitted, this.#onWorkingCopyCommitted, this);
+    super.dispose();
+  }
+
+  static override accepts(uiSourceCode: Workspace.UISourceCode.UISourceCode): boolean {
+    return uiSourceCode.contentType().hasScripts() || uiSourceCode.contentType().hasStyleSheets();
+  }
+
+  override editorInitialized(editor: TextEditor.TextEditor.TextEditor): void {
+    this.#editor = editor;
+    if (this.uiSourceCode.containsAiChanges()) {
+      this.#showAiWarningInfobar();
+    }
+  }
+
+  #onWorkingCopyCommitted(): void {
+    if (!this.uiSourceCode.containsAiChanges()) {
+      this.#aiWarningInfobar?.dispose();
+      this.#aiWarningInfobar = null;
+    }
+  }
+
+  #showAiWarningInfobar(): void {
+    const infobar = new UI.Infobar.Infobar(
+        UI.Infobar.Type.WARNING, i18nString(UIStrings.aiContentWarning), undefined, undefined,
+        'contains-ai-content-warning');
+    this.#aiWarningInfobar = infobar;
+    infobar.setCloseCallback(() => this.removeInfobar(this.#aiWarningInfobar));
+    this.attachInfobar(this.#aiWarningInfobar);
+  }
+
+  attachInfobar(bar: UI.Infobar.Infobar): void {
+    if (this.#editor) {
+      this.#editor.dispatch({effects: SourceFrame.SourceFrame.addInfobar.of(bar)});
+    }
+  }
+
+  removeInfobar(bar: UI.Infobar.Infobar|null): void {
+    if (this.#editor && bar) {
+      this.#editor.dispatch({effects: SourceFrame.SourceFrame.removeInfobar.of(bar)});
+    }
+  }
+}

front_end/panels/sources/BUILD.gn

@@ -28,6 +28,7 @@ generate_css("css_files") {
 devtools_module("sources") {
   sources = [
     "AddSourceMapURLDialog.ts",
+    "AiWarningInfobarPlugin.ts",
     "BreakpointEditDialog.ts",
     "CSSPlugin.ts",
     "CallStackSidebarPane.ts",

front_end/panels/sources/DebuggerPlugin.ts

@@ -311,7 +311,6 @@ export class DebuggerPlugin extends Plugin {
           click: (view, block, event) => this.handleGutterClick(view.state.doc.lineAt(block.from), event as MouseEvent),
         },
       }),
-      infobarState,
       breakpointMarkers,
       TextEditor.ExecutionPositionHighlighter.positionHighlighter('cm-executionLine', 'cm-executionToken'),
       CodeMirror.Prec.lowest(continueToMarkers.field),
@@ -454,13 +453,13 @@ export class DebuggerPlugin extends Plugin {
 
   attachInfobar(bar: UI.Infobar.Infobar): void {
     if (this.editor) {
-      this.editor.dispatch({effects: addInfobar.of(bar)});
+      this.editor.dispatch({effects: SourceFrame.SourceFrame.addInfobar.of(bar)});
     }
   }
 
   removeInfobar(bar: UI.Infobar.Infobar|null): void {
     if (this.editor && bar) {
-      this.editor.dispatch({effects: removeInfobar.of(bar)});
+      this.editor.dispatch({effects: SourceFrame.SourceFrame.removeInfobar.of(bar)});
     }
   }
 
@@ -1794,31 +1793,6 @@ export class BreakpointLocationRevealer implements
   }
 }
 
-// Infobar panel state, used to show additional panels below the editor.
-
-const addInfobar = CodeMirror.StateEffect.define<UI.Infobar.Infobar>();
-const removeInfobar = CodeMirror.StateEffect.define<UI.Infobar.Infobar>();
-
-const infobarState = CodeMirror.StateField.define<UI.Infobar.Infobar[]>({
-  create(): UI.Infobar.Infobar[] {
-    return [];
-  },
-  update(current, tr): UI.Infobar.Infobar[] {
-    for (const effect of tr.effects) {
-      if (effect.is(addInfobar)) {
-        current = current.concat(effect.value);
-      } else if (effect.is(removeInfobar)) {
-        current = current.filter(b => b !== effect.value);
-      }
-    }
-    return current;
-  },
-  provide: (field): CodeMirror.Extension => CodeMirror.showPanel.computeN(
-      [field],
-      (state): Array<() => CodeMirror.Panel> =>
-          state.field(field).map((bar): (() => CodeMirror.Panel) => (): CodeMirror.Panel => ({dom: bar.element}))),
-});
-
 // Enumerate non-breakable lines (lines without a known corresponding
 // position in the UISource).
 async function computeNonBreakableLines(

front_end/panels/sources/SourcesView.test.ts

@@ -99,6 +99,41 @@ describeWithEnvironment('SourcesView', () => {
     assert.instanceOf(sourcesView.getSourceView(uiSourceCode), SourcesComponents.HeadersView.HeadersView);
   });
 
+  it('shows and hides an infobar which warns about AI-generated changes', async () => {
+    const attachSpy = sinon.spy(Sources.AiWarningInfobarPlugin.AiWarningInfobarPlugin.prototype, 'attachInfobar');
+    const removeSpy = sinon.spy(Sources.AiWarningInfobarPlugin.AiWarningInfobarPlugin.prototype, 'removeInfobar');
+
+    const sourcesView = new Sources.SourcesView.SourcesView();
+    const {uiSourceCode} = createFileSystemUISourceCode({
+      url: urlString`file:///path/to/project/example.ts`,
+      mimeType: 'text/typescript',
+      content: 'export class Foo {}',
+    });
+
+    // Mock an AI-generated edit
+    uiSourceCode.setWorkingCopy('export class Bar {}');
+    uiSourceCode.setContainsAiChanges(true);
+
+    const contentLoadedPromise = new Promise(res => window.addEventListener('source-file-loaded', res));
+    const widget = sourcesView.viewForFile(uiSourceCode);
+    assert.instanceOf(widget, Sources.UISourceCodeFrame.UISourceCodeFrame);
+    const uiSourceCodeFrame = widget;
+
+    // Only load the AiWarningInfobarPlugin
+    sinon.stub(Sources.UISourceCodeFrame.UISourceCodeFrame, 'sourceFramePlugins').returns([
+      Sources.AiWarningInfobarPlugin.AiWarningInfobarPlugin
+    ]);
+    uiSourceCodeFrame.wasShown();
+
+    await contentLoadedPromise;
+
+    assert.isTrue(attachSpy.called);
+    assert.isTrue(removeSpy.notCalled);
+
+    uiSourceCode.commitWorkingCopy();
+    assert.isTrue(removeSpy.called);
+  });
+
   describe('viewForFile', () => {
     it('records the correct media type in the DevTools.SourcesPanelFileOpened metric', async () => {
       const sourcesView = new Sources.SourcesView.SourcesView();

front_end/panels/sources/UISourceCodeFrame.ts

@@ -41,6 +41,7 @@ import * as IssueCounter from '../../ui/components/issue_counter/issue_counter.j
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
+import {AiWarningInfobarPlugin} from './AiWarningInfobarPlugin.js';
 import {CoveragePlugin} from './CoveragePlugin.js';
 import {CSSPlugin} from './CSSPlugin.js';
 import {DebuggerPlugin} from './DebuggerPlugin.js';
@@ -50,20 +51,6 @@ import {ResourceOriginPlugin} from './ResourceOriginPlugin.js';
 import {SnippetsPlugin} from './SnippetsPlugin.js';
 import {SourcesPanel} from './SourcesPanel.js';
 
-function sourceFramePlugins(): Array<typeof Plugin> {
-  // The order of these plugins matters for toolbar items and editor
-  // extension precedence
-  return [
-    CSSPlugin,
-    DebuggerPlugin,
-    SnippetsPlugin,
-    ResourceOriginPlugin,
-    CoveragePlugin,
-    MemoryProfilePlugin,
-    PerformanceProfilePlugin,
-  ];
-}
-
 export class UISourceCodeFrame extends
     Common.ObjectWrapper.eventMixin<EventTypes, typeof SourceFrame.SourceFrame.SourceFrameImpl>(
         SourceFrame.SourceFrame.SourceFrameImpl) {
@@ -342,11 +329,26 @@ export class UISourceCodeFrame extends
     this.updateLanguageMode('').then(() => this.reloadPlugins(), console.error);
   }
 
+  static sourceFramePlugins(): Array<typeof Plugin> {
+    // The order of these plugins matters for toolbar items and editor
+    // extension precedence
+    return [
+      CSSPlugin,
+      DebuggerPlugin,
+      SnippetsPlugin,
+      ResourceOriginPlugin,
+      CoveragePlugin,
+      MemoryProfilePlugin,
+      PerformanceProfilePlugin,
+      AiWarningInfobarPlugin,
+    ];
+  }
+
   private loadPlugins(): void {
     const binding = Persistence.Persistence.PersistenceImpl.instance().binding(this.uiSourceCodeInternal);
     const pluginUISourceCode = binding ? binding.network : this.uiSourceCodeInternal;
 
-    for (const pluginType of sourceFramePlugins()) {
+    for (const pluginType of UISourceCodeFrame.sourceFramePlugins()) {
       if (pluginType.accepts(pluginUISourceCode)) {
         this.plugins.push(new pluginType(pluginUISourceCode, this));
       }

front_end/panels/sources/sources.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as AddSourceMapURLDialog from './AddSourceMapURLDialog.js';
+import * as AiWarningInfobarPlugin from './AiWarningInfobarPlugin.js';
 import * as BreakpointEditDialog from './BreakpointEditDialog.js';
 import * as CallStackSidebarPane from './CallStackSidebarPane.js';
 import * as CategorizedBreakpointL10n from './CategorizedBreakpointL10n.js';
@@ -34,6 +35,7 @@ import * as WatchExpressionsSidebarPane from './WatchExpressionsSidebarPane.js';
 
 export {
   AddSourceMapURLDialog,
+  AiWarningInfobarPlugin,
   BreakpointEditDialog,
   CallStackSidebarPane,
   CategorizedBreakpointL10n,

front_end/ui/legacy/components/source_frame/SourceFrame.ts

@@ -312,6 +312,7 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
           activeDark: 'var(--sys-color-divider-prominent)',
         },
       }),
+      infobarState,
     ];
   }
 
@@ -1247,3 +1248,28 @@ const sourceFrameTheme = CodeMirror.EditorView.theme({
  */
 export type RevealPosition = number|{lineNumber: number, columnNumber?: number}|
     {from: {lineNumber: number, columnNumber: number}, to: {lineNumber: number, columnNumber: number}};
+
+// Infobar panel state, used to show additional panels below the editor.
+
+export const addInfobar = CodeMirror.StateEffect.define<UI.Infobar.Infobar>();
+export const removeInfobar = CodeMirror.StateEffect.define<UI.Infobar.Infobar>();
+
+const infobarState = CodeMirror.StateField.define<UI.Infobar.Infobar[]>({
+  create(): UI.Infobar.Infobar[] {
+    return [];
+  },
+  update(current, tr): UI.Infobar.Infobar[] {
+    for (const effect of tr.effects) {
+      if (effect.is(addInfobar)) {
+        current = current.concat(effect.value);
+      } else if (effect.is(removeInfobar)) {
+        current = current.filter(b => b !== effect.value);
+      }
+    }
+    return current;
+  },
+  provide: (field): CodeMirror.Extension => CodeMirror.showPanel.computeN(
+      [field],
+      (state): Array<() => CodeMirror.Panel> =>
+          state.field(field).map((bar): (() => CodeMirror.Panel) => (): CodeMirror.Panel => ({dom: bar.element}))),
+});