[AI Assistance] Use DevTools simple selector

Bug: 393267006
Change-Id: I7888f477e214c560abece0cfa6eca1b12c57f762
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6298062
Reviewed-by: Alex Rudenko <[email protected]>
Commit-Queue: Nikolay Vitkov <[email protected]>

Author: Lightning00Blade

front_end/panels/ai_assistance/ExtensionScope.test.ts

@@ -9,11 +9,26 @@ import {createCSSStyle, getMatchedStyles, ruleMatch} from '../../testing/StyleHe
 import * as ExtensionScope from './ExtensionScope.js';
 import * as Injected from './injected.js';
 
-async function getSelector(payload: Partial<SDK.CSSMatchedStyles.CSSMatchedStylesPayload>) {
+function createNode(options?: {getAttribute?: (attribute: string) => string | undefined}) {
   const node = sinon.createStubInstance(SDK.DOMModel.DOMNode);
   node.id = 1 as Protocol.DOM.NodeId;
   // Needed to process the inline styles
   node.nodeType.returns(Node.ELEMENT_NODE);
+  node.localName.returns('div');
+  node.simpleSelector.callThrough();
+  if (options?.getAttribute) {
+    node.getAttribute.callsFake(options.getAttribute);
+  }
+  return node;
+}
+
+async function getSelector(
+    payload: Partial<SDK.CSSMatchedStyles.CSSMatchedStylesPayload>,
+    node?: SDK.DOMModel.DOMNode,
+) {
+  if (!node) {
+    node = createNode();
+  }
 
   const matchedStyles = await getMatchedStyles({
     node,
@@ -31,7 +46,51 @@ describe('ExtensionScope', () => {
     },
   ];
 
-  describe('getSelector', () => {
+  describe('getSimpleSelector', () => {
+    it('should work with node that has classes', () => {
+      const node = createNode({
+        getAttribute: attribute => {
+          if (attribute === 'class') {
+            return 'my-class-a my-class-b';
+          }
+
+          return undefined;
+        }
+      });
+      const selector = ExtensionScope.ExtensionScope.getSelectorForNode(node);
+      assert.strictEqual(selector, '.my-class-a.my-class-b');
+    });
+
+    it('should exclude ai generated class', () => {
+      const node = createNode({
+        getAttribute: attribute => {
+          if (attribute === 'class') {
+            return `my-class-a my-class-b ${Injected.AI_ASSISTANCE_CSS_CLASS_NAME}-2`;
+          }
+
+          return undefined;
+        }
+      });
+      const selector = ExtensionScope.ExtensionScope.getSelectorForNode(node);
+      assert.strictEqual(selector, '.my-class-a.my-class-b');
+    });
+
+    it('should work with node has classes that need escaping', () => {
+      const node = createNode({
+        getAttribute: attribute => {
+          if (attribute === 'class') {
+            return `my.special-class my-class-b ${Injected.AI_ASSISTANCE_CSS_CLASS_NAME}-2`;
+          }
+
+          return undefined;
+        }
+      });
+      const selector = ExtensionScope.ExtensionScope.getSelectorForNode(node);
+      assert.strictEqual(selector, '.my\\.special-class.my-class-b');
+    });
+  });
+
+  describe('getSelectorFromRules', () => {
     it('should work with empty styles', async () => {
       const selector = await getSelector({});
       assert.strictEqual(selector, '');

front_end/panels/ai_assistance/ExtensionScope.ts

@@ -197,6 +197,15 @@ export class ExtensionScope {
     return selectors.at(0)?.text.replace(':visited', '') ?? '';
   }
 
+  static getSelectorForNode(node: SDK.DOMModel.DOMNode): string {
+    return node.simpleSelector()
+        .split('.')
+        .filter(chunk => {
+          return !chunk.startsWith(AI_ASSISTANCE_CSS_CLASS_NAME);
+        })
+        .join('.');
+  }
+
   async #computeSelectorFromElement(remoteObject: SDK.RemoteObject.RemoteObject): Promise<string> {
     if (!remoteObject.objectId) {
       throw new Error('DOMModel is not found');
@@ -217,13 +226,21 @@ export class ExtensionScope {
       throw new Error('Node is not found');
     }
 
-    const matchedStyles = await cssModel.getMatchedStyles(node.id);
+    try {
+      const matchedStyles = await cssModel.getMatchedStyles(node.id);
 
-    if (!matchedStyles) {
-      throw new Error('No Matching styles');
+      if (!matchedStyles) {
+        throw new Error('No Matching styles');
+      }
+
+      const selector = ExtensionScope.getSelectorForRule(matchedStyles);
+      if (selector) {
+        return selector;
+      }
+    } catch {
     }
 
-    return ExtensionScope.getSelectorForRule(matchedStyles);
+    return ExtensionScope.getSelectorForNode(node);
   }
 
   async #bindingCalled(executionContext: SDK.RuntimeModel.ExecutionContext, event: {
@@ -248,11 +265,11 @@ export class ExtensionScope {
       ]);
 
       const arg = JSON.parse(args.object.value) as Omit<FreestyleCallbackArgs, 'element'>;
-      let selector = arg.selector;
 
+      // TODO: Should this a be a *?
+      let selector = '';
       try {
-        const computedSelector = await this.#computeSelectorFromElement(element.object);
-        selector = computedSelector || selector;
+        selector = await this.#computeSelectorFromElement(element.object);
       } catch (err) {
         console.error(err);
       } finally {