[AI Assistance] Make sure bindings are not overwritten

This CL fixes the issue of the AI Assistance updating the wrong
element on subsequent updates.

Fixed: 383979011
Change-Id: I3382a9fc9ad83ed87b2cb1add2895b79589ba389
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6148212
Reviewed-by: Samiya Caur <[email protected]>
Commit-Queue: Alex Rudenko <[email protected]>

Author: OrKoN

front_end/panels/ai_assistance/ExtensionScope.ts

@@ -156,31 +156,33 @@ export class ExtensionScope {
   }
 }
 
-const freestylerBinding = `globalThis.freestyler = (args) => {
-  let resolver;
-  let rejecter;
-  const p = new Promise((resolve, reject) => {
-    resolver = resolve;
-    rejecter = reject;
-  });
-  freestyler.callbacks.set(freestyler.id , {
-    args: JSON.stringify(args),
-    callbackId: freestyler.id,
-    resolver,
-    rejecter
-  });
-  ${FREESTYLER_BINDING_NAME}(String(freestyler.id));
-  freestyler.id++;
-  return p;
-}
-freestyler.id = 1;
-freestyler.callbacks = new Map();
-freestyler.getArgs = (callbackId) => {
-  return freestyler.callbacks.get(callbackId).args;
-}
-freestyler.respond = (callbackId) => {
-  freestyler.callbacks.get(callbackId).resolver();
-  freestyler.callbacks.delete(callbackId);
+const freestylerBinding = `if (!globalThis.freestyler) {
+  globalThis.freestyler = (args) => {
+    let resolver;
+    let rejecter;
+    const p = new Promise((resolve, reject) => {
+      resolver = resolve;
+      rejecter = reject;
+    });
+    freestyler.callbacks.set(freestyler.id , {
+      args: JSON.stringify(args),
+      callbackId: freestyler.id,
+      resolver,
+      rejecter
+    });
+    ${FREESTYLER_BINDING_NAME}(String(freestyler.id));
+    freestyler.id++;
+    return p;
+  }
+  freestyler.id = 1;
+  freestyler.callbacks = new Map();
+  freestyler.getArgs = (callbackId) => {
+    return freestyler.callbacks.get(callbackId).args;
+  }
+  freestyler.respond = (callbackId) => {
+    freestyler.callbacks.get(callbackId).resolver();
+    freestyler.callbacks.delete(callbackId);
+  }
 }`;
 
 const functions = `async function setElementStyles(el, styles) {

test/e2e/ai_assistance/ai_assistance_test.ts

@@ -57,6 +57,14 @@ describe('AI Assistance', function() {
       waitUntil: 'networkidle0',
     });
 
+    await resetMockMessages(messages);
+  }
+
+  async function resetMockMessages(
+      messages: string[],
+  ) {
+    const {frontend} = getBrowserAndPages();
+    await frontend.bringToFront();
     await frontend.evaluate(messages => {
       let call = 0;
       // @ts-ignore devtools context.
@@ -177,12 +185,30 @@ describe('AI Assistance', function() {
           },
         },
         messages);
-    await goToResource(resource);
-
-    await inspectNode(node, iframeId);
+    await goToResource(resource, {
+      waitUntil: 'networkidle0',
+    });
     await openFreestyler();
     await turnOnAiAssistance();
     await enableDebugModeForFreestyler();
+    return await sendAiAssistanceMessage({
+      node,
+      iframeId,
+      query,
+      messages,
+    });
+  }
+
+  async function sendAiAssistanceMessage(options: {
+    query: string,
+    messages: string[],
+    node?: string,
+    iframeId?: string,
+  }) {
+    const {messages, query, node = 'div', iframeId} = options;
+
+    await resetMockMessages(messages);
+    await inspectNode(node, iframeId);
     await typeQuery(query);
     return await submitAndWaitTillDone();
   }
@@ -205,7 +231,7 @@ STOP`,
         result.at(-1)!.request.current_message, {role: 1, parts: [{text: 'OBSERVATION: {"color":"rgb(0, 0, 0)"}'}]});
   });
 
-  it('gets handles trailing ;', async () => {
+  it('handles trailing ;', async () => {
     const result = await runAiAssistance(
         {
           query: 'Change the background color for this element to blue',
@@ -232,7 +258,7 @@ STOP`,
         result.at(-1)!.request.current_message, {role: 1, parts: [{text: 'OBSERVATION: {"aspectRatio":"auto"}'}]});
   });
 
-  it('gets handles comments', async () => {
+  it('handles comments', async () => {
     const result = await runAiAssistance({
       query: 'Change the background color for this element to blue',
       messages: [
@@ -281,6 +307,47 @@ STOP`,
     });
   });
 
+  it('modifies multiple styles', async () => {
+    await runAiAssistance({
+      query: 'Change the background color for this element to blue',
+      messages: [
+        `THOUGHT: I can change the background color of an element by setting the background-color CSS property.
+TITLE: changing the property
+ACTION
+await setElementStyles($0, { 'background-color': 'blue' });
+STOP`,
+        'ANSWER: changed styles',
+      ],
+      node: 'div',
+    });
+
+    const {target} = getBrowserAndPages();
+    await target.bringToFront();
+    await target.waitForFunction(() => {
+      // @ts-ignore page context.
+      return window.getComputedStyle(document.querySelector('div')).backgroundColor === 'rgb(0, 0, 255)';
+    });
+
+    await sendAiAssistanceMessage({
+      query: 'Change the background color for this element to green',
+      messages: [
+        `THOUGHT: I can change the background color of an element by setting the background-color CSS property.
+TITLE: changing the property
+ACTION
+await setElementStyles($0, { 'background-color': 'green' });
+STOP`,
+        'ANSWER: changed styles',
+      ],
+      node: 'button',
+    });
+
+    await target.bringToFront();
+    await target.waitForFunction(() => {
+      // @ts-ignore page context.
+      return window.getComputedStyle(document.querySelector('button')).backgroundColor === 'rgb(0, 128, 0)';
+    });
+  });
+
   it('executes in the correct realm', async () => {
     const result = await runAiAssistance({
       query: 'What is the document title',