[AI Assistance] Stash Inspector protocol changes

Stash inspector protocol changes while waiting for writing to disc.
Uses git like names for convenience.

Fixed: 399561324
Change-Id: I65b97df4aaa94ef652b898de38d3c7b0d76b1093
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6387119
Auto-Submit: Nikolay Vitkov <[email protected]>
Reviewed-by: Ergün Erdoğmuş <[email protected]>
Commit-Queue: Nikolay Vitkov <[email protected]>

Author: Lightning00Blade

front_end/core/i18n/i18nImpl.ts

@@ -59,15 +59,15 @@ function getLocaleFetchUrl(locale: Intl.UnicodeBCP47LocaleIdentifier, location:
 
 /**
  * Fetches the locale data of the specified locale.
- * Callers have to ensure that `locale` is an officilly supported locale.
+ * Callers have to ensure that `locale` is an officially supported locale.
  * Depending whether a locale is present in `bundledLocales`, the data will be
  * fetched locally or remotely.
  */
 export async function fetchAndRegisterLocaleData(
     locale: Intl.UnicodeBCP47LocaleIdentifier, location = self.location.toString()): Promise<void> {
   const localeDataTextPromise = fetch(getLocaleFetchUrl(locale, location)).then(result => result.json());
   const timeoutPromise =
-      new Promise((resolve, reject) => window.setTimeout(() => reject(new Error('timed out fetching locale')), 5000));
+      new Promise<never>((_, reject) => window.setTimeout(() => reject(new Error('timed out fetching locale')), 5000));
   const localeData = await Promise.race([timeoutPromise, localeDataTextPromise]);
   i18nInstance.registerLocaleData(locale, localeData);
 }

front_end/models/ai_assistance/ChangeManager.test.ts

@@ -226,4 +226,86 @@ div {
 }`);
     });
   });
+
+  describe('stashes', () => {
+    it('can stash changes', async () => {
+      const changeManager = new AiAssistanceModel.ChangeManager();
+      const cssModel = createModel();
+      await changeManager.addChange(cssModel, frameId, {
+        groupId: agentId,
+        selector: 'div',
+        className: 'ai-style-change-1',
+        styles: {
+          color: 'blue',
+        },
+      });
+      assert(cssModel.setStyleSheetText.calledOnce);
+      assert.deepEqual(
+          cssModel.setStyleSheetText.lastCall.args,
+          ['1', '.ai-style-change-1 {\n  div& {\n    color: blue;\n  }\n}', true],
+      );
+      await changeManager.stashChanges();
+      assert(cssModel.setStyleSheetText.calledTwice);
+      assert.deepEqual(
+          cssModel.setStyleSheetText.lastCall.args,
+          ['1', '', true],
+      );
+    });
+
+    it('can restore changes', async () => {
+      const changeManager = new AiAssistanceModel.ChangeManager();
+      const cssModel = createModel();
+      await changeManager.addChange(cssModel, frameId, {
+        groupId: agentId,
+        selector: 'div',
+        className: 'ai-style-change-1',
+        styles: {
+          color: 'blue',
+        },
+      });
+      assert(cssModel.setStyleSheetText.calledOnce);
+      assert.deepEqual(
+          cssModel.setStyleSheetText.lastCall.args,
+          ['1', '.ai-style-change-1 {\n  div& {\n    color: blue;\n  }\n}', true],
+      );
+      await changeManager.stashChanges();
+      assert(cssModel.setStyleSheetText.calledTwice);
+      assert.deepEqual(
+          cssModel.setStyleSheetText.lastCall.args,
+          ['1', '', true],
+      );
+      await changeManager.popStashedChanges();
+      assert(cssModel.setStyleSheetText.calledThrice);
+      assert.deepEqual(
+          cssModel.setStyleSheetText.lastCall.args,
+          ['1', '.ai-style-change-1 {\n  div& {\n    color: blue;\n  }\n}', true],
+      );
+    });
+
+    it('can discard changes', async () => {
+      const changeManager = new AiAssistanceModel.ChangeManager();
+      const cssModel = createModel();
+      await changeManager.addChange(cssModel, frameId, {
+        groupId: agentId,
+        selector: 'div',
+        className: 'ai-style-change-1',
+        styles: {
+          color: 'blue',
+        },
+      });
+      assert(cssModel.setStyleSheetText.calledOnce);
+      assert.deepEqual(
+          cssModel.setStyleSheetText.lastCall.args,
+          ['1', '.ai-style-change-1 {\n  div& {\n    color: blue;\n  }\n}', true],
+      );
+      await changeManager.stashChanges();
+      assert(cssModel.setStyleSheetText.calledTwice);
+      assert.deepEqual(
+          cssModel.setStyleSheetText.lastCall.args,
+          ['1', '', true],
+      );
+      await changeManager.dropStashedChanges();
+      assert(cssModel.setStyleSheetText.calledTwice);
+    });
+  });
 });

front_end/models/ai_assistance/ChangeManager.ts

@@ -31,6 +31,36 @@ export class ChangeManager {
   readonly #cssModelToStylesheetId =
       new Map<SDK.CSSModel.CSSModel, Map<Protocol.Page.FrameId, Protocol.CSS.StyleSheetId>>();
   readonly #stylesheetChanges = new Map<Protocol.CSS.StyleSheetId, Change[]>();
+  readonly #backupStylesheetChanges = new Map<Protocol.CSS.StyleSheetId, Change[]>();
+
+  async stashChanges(): Promise<void> {
+    for (const [cssModel, stylesheetMap] of this.#cssModelToStylesheetId.entries()) {
+      const stylesheetIds = Array.from(stylesheetMap.values());
+      await Promise.allSettled(stylesheetIds.map(async id => {
+        this.#backupStylesheetChanges.set(id, this.#stylesheetChanges.get(id) ?? []);
+        this.#stylesheetChanges.delete(id);
+        await cssModel.setStyleSheetText(id, '', true);
+      }));
+    }
+  }
+
+  dropStashedChanges(): void {
+    this.#backupStylesheetChanges.clear();
+  }
+
+  async popStashedChanges(): Promise<void> {
+    const cssModelAndStyleSheets = Array.from(this.#cssModelToStylesheetId.entries());
+
+    await Promise.allSettled(cssModelAndStyleSheets.map(async ([cssModel, stylesheetMap]) => {
+      const frameAndStylesheet = Array.from(stylesheetMap.entries());
+      return await Promise.allSettled(frameAndStylesheet.map(async ([frameId, stylesheetId]) => {
+        const changes = this.#backupStylesheetChanges.get(stylesheetId) ?? [];
+        return await Promise.allSettled(changes.map(async change => {
+          return await this.addChange(cssModel, frameId, change);
+        }));
+      }));
+    }));
+  }
 
   async clear(): Promise<void> {
     const models = Array.from(this.#cssModelToStylesheetId.keys());
@@ -39,6 +69,7 @@ export class ChangeManager {
     }));
     this.#cssModelToStylesheetId.clear();
     this.#stylesheetChanges.clear();
+    this.#backupStylesheetChanges.clear();
     const firstFailed = results.find(result => result.status === 'rejected');
     if (firstFailed) {
       console.error(firstFailed.reason);
@@ -124,6 +155,7 @@ ${formatStyles(change.styles)}
       // Empty stylesheets.
       const results = await Promise.allSettled(stylesheetIds.map(async id => {
         this.#stylesheetChanges.delete(id);
+        this.#backupStylesheetChanges.delete(id);
         await cssModel.setStyleSheetText(id, '', true);
       }));
       this.#cssModelToStylesheetId.delete(cssModel);

front_end/models/ai_assistance/agents/PatchAgent.ts

@@ -134,7 +134,10 @@ export class PatchAgent extends AiAgent<Workspace.Workspace.Project> {
             type: Host.AidaClient.ParametersTypes.ARRAY,
             description: 'List of file names from the project',
             nullable: false,
-            items: {type: Host.AidaClient.ParametersTypes.STRING, description: 'File name'}
+            items: {
+              type: Host.AidaClient.ParametersTypes.STRING,
+              description: 'File name',
+            }
           }
         },
       },

front_end/panels/ai_assistance/AiAssistancePanel.test.ts

@@ -626,116 +626,118 @@ describeWithMockConnection('AI Assistance Panel', () => {
     });
   });
 
-  it('should have empty state after clear chat', async () => {
-    const {panel, view} = await createAiAssistancePanel({
-      aidaClient: mockAidaClient([[{explanation: 'test'}]]),
-    });
+  describe('empty state', () => {
+    it('should have empty state after clear chat', async () => {
+      const {panel, view} = await createAiAssistancePanel({
+        aidaClient: mockAidaClient([[{explanation: 'test'}]]),
+      });
 
-    panel.handleAction('freestyler.elements-floating-button');
-    (await view.nextInput).onTextSubmit('test');
-    assert.deepEqual((await view.nextInput).messages, [
-      {
-        entity: AiAssistancePanel.ChatMessageEntity.USER,
-        text: 'test',
-        imageInput: undefined,
-      },
-      {
-        answer: 'test',
-        entity: AiAssistancePanel.ChatMessageEntity.MODEL,
-        rpcId: undefined,
-        suggestions: undefined,
-        steps: [],
-      },
-    ]);
+      panel.handleAction('freestyler.elements-floating-button');
+      (await view.nextInput).onTextSubmit('test');
+      assert.deepEqual((await view.nextInput).messages, [
+        {
+          entity: AiAssistancePanel.ChatMessageEntity.USER,
+          text: 'test',
+          imageInput: undefined,
+        },
+        {
+          answer: 'test',
+          entity: AiAssistancePanel.ChatMessageEntity.MODEL,
+          rpcId: undefined,
+          suggestions: undefined,
+          steps: [],
+        },
+      ]);
 
-    view.input.onDeleteClick();
-    assert.deepEqual((await view.nextInput).messages, []);
-    assert.isUndefined(view.input.conversationType);
-  });
+      view.input.onDeleteClick();
+      assert.deepEqual((await view.nextInput).messages, []);
+      assert.isUndefined(view.input.conversationType);
+    });
 
-  it('should select default agent based on open panel after clearing the chat', async () => {
-    updateHostConfig({
-      devToolsFreestyler: {
-        enabled: true,
-      },
+    it('should select default agent based on open panel after clearing the chat', async () => {
+      updateHostConfig({
+        devToolsFreestyler: {
+          enabled: true,
+        },
+      });
+      UI.Context.Context.instance().setFlavor(
+          Elements.ElementsPanel.ElementsPanel, sinon.createStubInstance(Elements.ElementsPanel.ElementsPanel));
+      const {panel, view} = await createAiAssistancePanel({aidaClient: mockAidaClient([[{explanation: 'test'}]])});
+      panel.handleAction('freestyler.elements-floating-button');
+      (await view.nextInput).onTextSubmit('test');
+      assert.deepEqual((await view.nextInput).messages, [
+        {
+          entity: AiAssistancePanel.ChatMessageEntity.USER,
+          text: 'test',
+          imageInput: undefined,
+        },
+        {
+          answer: 'test',
+          entity: AiAssistancePanel.ChatMessageEntity.MODEL,
+          rpcId: undefined,
+          suggestions: undefined,
+          steps: [],
+        },
+      ]);
+      view.input.onDeleteClick();
+      assert.deepEqual((await view.nextInput).messages, []);
+      assert.deepEqual(view.input.conversationType, AiAssistanceModel.ConversationType.STYLING);
     });
-    UI.Context.Context.instance().setFlavor(
-        Elements.ElementsPanel.ElementsPanel, sinon.createStubInstance(Elements.ElementsPanel.ElementsPanel));
-    const {panel, view} = await createAiAssistancePanel({aidaClient: mockAidaClient([[{explanation: 'test'}]])});
-    panel.handleAction('freestyler.elements-floating-button');
-    (await view.nextInput).onTextSubmit('test');
-    assert.deepEqual((await view.nextInput).messages, [
-      {
-        entity: AiAssistancePanel.ChatMessageEntity.USER,
-        text: 'test',
-        imageInput: undefined,
-      },
-      {
-        answer: 'test',
-        entity: AiAssistancePanel.ChatMessageEntity.MODEL,
-        rpcId: undefined,
-        suggestions: undefined,
-        steps: [],
-      },
-    ]);
-    view.input.onDeleteClick();
-    assert.deepEqual((await view.nextInput).messages, []);
-    assert.deepEqual(view.input.conversationType, AiAssistanceModel.ConversationType.STYLING);
-  });
 
-  it('should have empty state after clear chat history', async () => {
-    const {panel, view} = await createAiAssistancePanel(
-        {aidaClient: mockAidaClient([[{explanation: 'test'}], [{explanation: 'test2'}]])});
+    it('should have empty state after clear chat history', async () => {
+      const {panel, view} = await createAiAssistancePanel(
+          {aidaClient: mockAidaClient([[{explanation: 'test'}], [{explanation: 'test2'}]])});
 
-    panel.handleAction('freestyler.elements-floating-button');
-    (await view.nextInput).onTextSubmit('User question to Freestyler?');
-    assert.deepEqual((await view.nextInput).messages, [
-      {
-        entity: AiAssistancePanel.ChatMessageEntity.USER,
-        text: 'User question to Freestyler?',
-        imageInput: undefined,
-      },
-      {
-        answer: 'test',
-        entity: AiAssistancePanel.ChatMessageEntity.MODEL,
-        rpcId: undefined,
-        suggestions: undefined,
-        steps: [],
-      },
-    ]);
+      panel.handleAction('freestyler.elements-floating-button');
+      (await view.nextInput).onTextSubmit('User question to Freestyler?');
+      assert.deepEqual((await view.nextInput).messages, [
+        {
+          entity: AiAssistancePanel.ChatMessageEntity.USER,
+          text: 'User question to Freestyler?',
+          imageInput: undefined,
+        },
+        {
+          answer: 'test',
+          entity: AiAssistancePanel.ChatMessageEntity.MODEL,
+          rpcId: undefined,
+          suggestions: undefined,
+          steps: [],
+        },
+      ]);
 
-    panel.handleAction('drjones.network-floating-button');
-    (await view.nextInput).onTextSubmit('User question to DrJones?');
-    assert.deepEqual((await view.nextInput).messages, [
-      {
-        entity: AiAssistancePanel.ChatMessageEntity.USER,
-        text: 'User question to DrJones?',
-        imageInput: undefined,
-      },
-      {
-        answer: 'test2',
-        entity: AiAssistancePanel.ChatMessageEntity.MODEL,
-        rpcId: undefined,
-        suggestions: undefined,
-        steps: [],
-      },
-    ]);
+      panel.handleAction('drjones.network-floating-button');
+      (await view.nextInput).onTextSubmit('User question to DrJones?');
+      assert.deepEqual((await view.nextInput).messages, [
+        {
+          entity: AiAssistancePanel.ChatMessageEntity.USER,
+          text: 'User question to DrJones?',
+          imageInput: undefined,
+        },
+        {
+          answer: 'test2',
+          entity: AiAssistancePanel.ChatMessageEntity.MODEL,
+          rpcId: undefined,
+          suggestions: undefined,
+          steps: [],
+        },
+      ]);
 
-    let contextMenu = getMenu(() => {
-      view.input.onHistoryClick(new MouseEvent('click'));
-    });
-    const clearAll = findMenuItemWithLabel(contextMenu.footerSection(), 'Clear local chats')!;
-    assert.isDefined(clearAll);
-    contextMenu.invokeHandler(clearAll.id());
-    assert.deepEqual((await view.nextInput).messages, []);
-    assert.isUndefined(view.input.conversationType);
-    contextMenu.discard();
-
-    contextMenu = getMenu(() => {
-      view.input.onHistoryClick(new MouseEvent('click'));
+      let contextMenu = getMenu(() => {
+        view.input.onHistoryClick(new MouseEvent('click'));
+      });
+      const clearAll = findMenuItemWithLabel(contextMenu.footerSection(), 'Clear local chats')!;
+      assert.isDefined(clearAll);
+      contextMenu.invokeHandler(clearAll.id());
+      assert.deepEqual((await view.nextInput).messages, []);
+      assert.isUndefined(view.input.conversationType);
+      contextMenu.discard();
+
+      contextMenu = getMenu(() => {
+        view.input.onHistoryClick(new MouseEvent('click'));
+      });
+      const menuItem = findMenuItemWithLabel(contextMenu.defaultSection(), 'No past conversations');
+      assert(menuItem);
     });
-    const menuItem = findMenuItemWithLabel(contextMenu.defaultSection(), 'No past conversations');
-    assert(menuItem);
   });
 
   describe('cross-origin', () => {

front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -839,6 +839,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
           inputPlaceholder: this.#getChatInputPlaceholder(),
           disclaimerText: this.#getDisclaimerText(),
           isTextInputEmpty: this.#isTextInputEmpty,
+          changeManager: this.#changeManager,
           onNewChatClick: this.#handleNewChatRequest.bind(this),
           onHistoryClick: this.#onHistoryClicked.bind(this),
           onDeleteClick: this.#onDeleteClicked.bind(this),