[AI Assistance] Temporary workaround for applying changes to shadow DOM elements

As part of setElementStyles, the styles are explicitly applied by updating root node's adopted stylesheets.

Bug: 361746671
Fixed: 393267953
Change-Id: Id9c4d6d61dba0fb4f95a3c3119baa433207b191f
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6205049
Commit-Queue: Samiya Caur <[email protected]>
Reviewed-by: Alex Rudenko <[email protected]>

Author: Samiya Caur

front_end/panels/ai_assistance/ChangeManager.ts

@@ -84,7 +84,7 @@ export class ChangeManager {
     }
   }
 
-  async addChange(cssModel: SDK.CSSModel.CSSModel, frameId: Protocol.Page.FrameId, change: Change): Promise<void> {
+  async addChange(cssModel: SDK.CSSModel.CSSModel, frameId: Protocol.Page.FrameId, change: Change): Promise<string> {
     const stylesheetId = await this.#getStylesheet(cssModel, frameId);
     const changes = this.#stylesheetChanges.get(stylesheetId) || [];
     const existingChange = changes.find(c => c.className === change.className);
@@ -101,6 +101,7 @@ export class ChangeManager {
     }
     await cssModel.setStyleSheetText(stylesheetId, this.buildChanges(changes), true);
     this.#stylesheetChanges.set(stylesheetId, changes);
+    return this.buildChanges(changes);
   }
 
   formatChanges(groupId: string): string {

front_end/panels/ai_assistance/ExtensionScope.ts

@@ -147,14 +147,13 @@ export class ExtensionScope {
       if (!cssModel) {
         throw new Error('CSSModel is not found');
       }
-      await this.#changeManager.addChange(cssModel, this.frameId, {
+      const styleChanges = await this.#changeManager.addChange(cssModel, this.frameId, {
         groupId: this.#agentId,
         selector,
         className,
         styles: arg.styles,
       });
-
-      await this.#simpleEval(executionContext, `freestyler.respond(${id})`);
+      await this.#simpleEval(executionContext, `freestyler.respond(${id}, ${JSON.stringify(styleChanges)})`);
     });
   }
 }
@@ -182,8 +181,8 @@ const freestylerBinding = `if (!globalThis.freestyler) {
   freestyler.getArgs = (callbackId) => {
     return freestyler.callbacks.get(callbackId).args;
   }
-  freestyler.respond = (callbackId) => {
-    freestyler.callbacks.get(callbackId).resolver();
+  freestyler.respond = (callbackId, styleChanges) => {
+    freestyler.callbacks.get(callbackId).resolver(styleChanges);
     freestyler.callbacks.delete(callbackId);
   }
 }`;
@@ -219,10 +218,31 @@ const functions = `async function setElementStyles(el, styles) {
     el.style[key] = '';
   }
 
-  await freestyler({
+  const result = await freestyler({
     method: 'setElementStyles',
     selector: selector,
     className,
     styles
   });
+
+  let rootNode = el.getRootNode();
+  if (rootNode instanceof ShadowRoot) {
+    let stylesheets = rootNode.adoptedStyleSheets;
+    let hasAiStyleChange = false;
+    let stylesheet = new CSSStyleSheet();
+    for (let i = 0; i < stylesheets.length; i++) {
+      const sheet = stylesheets[i];
+      for (let j = 0; j < sheet.cssRules.length; j++) {
+        hasAiStyleChange = sheet.cssRules[j].selectorText.startsWith('.${AI_ASSISTANCE_CSS_CLASS_NAME}');
+        if (hasAiStyleChange) {
+          stylesheet = sheet;
+          break;
+        }
+      }
+    }
+    stylesheet.replaceSync(result);
+    if (!hasAiStyleChange) {
+      rootNode.adoptedStyleSheets = [...stylesheets, stylesheet];
+    }
+  }
 }`;

test/e2e/ai_assistance/ai_assistance_test.ts

@@ -90,7 +90,7 @@ describe('AI Assistance', function() {
     }, messages);
   }
 
-  async function inspectNode(selector: string, iframeId?: string): Promise<void> {
+  async function inspectNode(selector: string, iframeId?: string, shadowRoot?: string): Promise<void> {
     const {frontend} = getBrowserAndPages();
     await click(CONSOLE_TAB_SELECTOR);
     await frontend.locator('aria/Console prompt').click();
@@ -99,6 +99,10 @@ describe('AI Assistance', function() {
       inspectText = `inspect(document.querySelector('iframe#${iframeId}').contentDocument.querySelector((${
           JSON.stringify(selector)})))`;
     }
+    if (shadowRoot) {
+      inspectText = `inspect(document.querySelector(${JSON.stringify(shadowRoot)}).shadowRoot.querySelector((${
+          JSON.stringify(selector)})))`;
+    }
     await frontend.keyboard.type(inspectText);
     await frontend.keyboard.press('Enter');
   }
@@ -183,6 +187,7 @@ describe('AI Assistance', function() {
     resource?: string,
     node?: string,
     iframeId?: string,
+    shadowRoot?: string,
     waitForSideEffect?: boolean,
   }) {
     const {
@@ -191,6 +196,7 @@ describe('AI Assistance', function() {
       resource = '../resources/recorder/recorder.html',
       node = 'div',
       iframeId,
+      shadowRoot,
       waitForSideEffect
     } = options;
 
@@ -211,6 +217,7 @@ describe('AI Assistance', function() {
     return await sendAiAssistanceMessage({
       node,
       iframeId,
+      shadowRoot,
       query,
       messages,
       waitForSideEffect,
@@ -222,12 +229,13 @@ describe('AI Assistance', function() {
     messages: string[],
     node?: string,
     iframeId?: string,
+    shadowRoot?: string,
     waitForSideEffect?: boolean,
   }) {
-    const {messages, query, node = 'div', iframeId, waitForSideEffect} = options;
+    const {messages, query, node = 'div', iframeId, shadowRoot, waitForSideEffect} = options;
 
     await resetMockMessages(messages);
-    await inspectNode(node, iframeId);
+    await inspectNode(node, iframeId, shadowRoot);
     await typeQuery(query);
     return await submitAndWaitTillDone(waitForSideEffect);
   }
@@ -367,6 +375,53 @@ STOP`,
     });
   });
 
+  it('modifies multiple styles for elements inside shadow DOM', 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',
+      ],
+      resource: '../resources/recorder/shadow-open.html',
+      node: 'button',
+      shadowRoot: 'login-element',
+    });
+
+    const {target} = getBrowserAndPages();
+    await target.bringToFront();
+    await target.waitForFunction(() => {
+      // @ts-ignore page context.
+      return window.getComputedStyle(document.querySelector('login-element').shadowRoot.querySelector('button'))
+                 .backgroundColor === 'rgb(0, 0, 255)';
+    });
+
+    await sendAiAssistanceMessage({
+      query: 'Change the font color for this element to green',
+      messages: [
+        `THOUGHT: I can change the font color of an element by setting the color CSS property.
+TITLE: changing the property
+ACTION
+await setElementStyles($0, { 'color': 'green' });
+STOP`,
+        'ANSWER: changed styles',
+      ],
+      node: 'button',
+      shadowRoot: 'login-element',
+    });
+
+    await target.bringToFront();
+    await target.waitForFunction(() => {
+      const buttonStyles =
+          // @ts-ignore page context.
+          window.getComputedStyle(document.querySelector('login-element').shadowRoot.querySelector('button'));
+      return buttonStyles.backgroundColor === 'rgb(0, 0, 255)' && buttonStyles.color === 'rgb(0, 128, 0)';
+    });
+  });
+
   it('executes in the correct realm', async () => {
     const result = await runAiAssistance({
       query: 'What is the document title',