[AI Assistance] Update prompt so that it is better able to detect when inspected element is in a shadow DOM

Pending: how to apply changes for such elements

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

Author: Samiya Caur

front_end/panels/ai_assistance/agents/StylingAgent.test.ts

@@ -467,6 +467,7 @@ c`;
 * It has a next sibling and it is an element node
 * It has a previous sibling and it is a non element node
 * Its parent's selector is \`div#grandparentElement\`
+* Its parent is a non element node
 * Its parent has only 1 child element node
 * Its parent has only 1 child text node`;
 

front_end/panels/ai_assistance/agents/StylingAgent.ts

@@ -54,14 +54,15 @@ The user selected a DOM element in the browser's DevTools and sends a query abou
 # Considerations
 * After applying a fix, please ask the user to confirm if the fix worked or not.
 * Meticulously investigate all potential causes for the observed behavior before moving on. Gather comprehensive information about the element's parent, siblings, children, and any overlapping elements, paying close attention to properties that are likely relevant to the query.
+* Be aware of the different node types (element, text, comment, document fragment, etc.) and their properties. You will always be provided with information about node types of parent, siblings and children of the selected element.
 * Avoid making assumptions without sufficient evidence, and always seek further clarification if needed.
 * Always explore multiple possible explanations for the observed behavior before settling on a conclusion.
 * When presenting solutions, clearly distinguish between the primary cause and contributing factors.
 * Please answer only if you are sure about the answer. Otherwise, explain why you're not able to answer.
 * When answering, always consider MULTIPLE possible solutions.
 * You're also capable of executing the fix for the issue user mentioned. Reflect this in your suggestions.
 * Use \`window.getComputedStyle\` to gather **rendered** styles and make sure that you take the distinction between authored styles and computed styles into account.
-* **CRITICAL** Call \`window.getComputedStyle\` only once per element and store results into a local variable. Never try to return all the styles of the element in \`data\`. Always use property getter to return relevant styles in \`data\` using the local variable: const parentStyles = window.getComputedStyle($0.parentElement); const data = { parentElementColor: parentStyles['color']}.
+* **CRITICAL** Call \`window.getComputedStyle\` only once per element and store results into a local variable. Never try to return all the styles of the element in \`data\`. Always use property getter to return relevant styles in \`data\` using the local variable: const styles = window.getComputedStyle($0); const data = { elementColor: styles['color']}.
 * **CRITICAL** Never assume a selector for the elements unless you verified your knowledge.
 * **CRITICAL** Consider that \`data\` variable from the previous ACTION blocks are not available in a different ACTION block.
 * **CRITICAL** If the user asks a question about religion, race, politics, sexuality, gender, or other sensitive topics, answer with "Sorry, I can't answer that. I'm best at questions about debugging web pages."
@@ -545,10 +546,19 @@ export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
       output += `\n* It has a previous sibling and it is ${elementOrNodeElementNodeText} node`;
     }
 
+    if (element.isInShadowTree()) {
+      output += '\n* It is in a shadow DOM tree.';
+    }
+
     const parentNode = element.parentNode;
     if (parentNode) {
       const parentChildrenNodes = await parentNode.getChildNodesPromise();
       output += `\n* Its parent's selector is \`${parentNode.simpleSelector()}\``;
+      const elementOrNodeElementNodeText = parentNode.nodeType() === Node.ELEMENT_NODE ? 'an element' : 'a non element';
+      output += `\n* Its parent is ${elementOrNodeElementNodeText} node`;
+      if (parentNode.isShadowRoot()) {
+        output += '\n* Its parent is a shadow root.';
+      }
       if (parentChildrenNodes) {
         const childElementNodes =
             parentChildrenNodes.filter(siblingNode => siblingNode.nodeType() === Node.ELEMENT_NODE);