[AI Assistance] Ignore AI Assistance selectors

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

Author: Lightning00Blade

front_end/models/ai_assistance/ExtensionScope.test.ts

@@ -212,6 +212,33 @@ describe('ExtensionScope', () => {
       assert.strictEqual(selector, 'div.container > .header');
     });
 
+    it('should skip selector with ai assistance prefix', async () => {
+      // Order is reversed we know that specificity order will
+      // be returned correctly
+      // front_end/core/sdk/CSSMatchedStyles.ts:373
+      const matchedPayload = [
+        ruleMatch('.test', MOCK_STYLE),
+        ruleMatch(`.${Injected.AI_ASSISTANCE_CSS_CLASS_NAME}-1`, MOCK_STYLE),
+      ];
+      const selector = await getSelector({matchedPayload});
+      assert.strictEqual(selector, '.test');
+    });
+    it('should skip selector with ai assistance prefix in complex selector', async () => {
+      // Order is reversed we know that specificity order will
+      // be returned correctly
+      // front_end/core/sdk/CSSMatchedStyles.ts:373
+      const matchedPayload = [
+        ruleMatch(
+            {
+              selectors: [{text: `.${Injected.AI_ASSISTANCE_CSS_CLASS_NAME}-1`}, {text: '.test'}],
+              text: `.${Injected.AI_ASSISTANCE_CSS_CLASS_NAME}-1, .test`
+            },
+            MOCK_STYLE),
+      ];
+      const selector = await getSelector({matchedPayload});
+      assert.strictEqual(selector, '.test');
+    });
+
     it('should skip nested selector with ai assistance prefix', async () => {
       // Order is reversed we know that specificity order will
       // be returned correctly

front_end/models/ai_assistance/ExtensionScope.ts

@@ -162,7 +162,8 @@ export class ExtensionScope {
         break;
       }
       if (rule instanceof SDK.CSSRule.CSSStyleRule) {
-        if (rule.nestingSelectors?.at(0)?.includes(AI_ASSISTANCE_CSS_CLASS_NAME)) {
+        if (rule.nestingSelectors?.at(0)?.includes(AI_ASSISTANCE_CSS_CLASS_NAME) ||
+            rule.selectors.every(selector => selector.text.includes(AI_ASSISTANCE_CSS_CLASS_NAME))) {
           // If the rule we created was our continue to get the correct location
           continue;
         }
@@ -174,28 +175,36 @@ export class ExtensionScope {
   }
 
   static getSelectorsFromStyleRule(
-      styleRule: SDK.CSSRule.CSSStyleRule, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles): string {
+      styleRule: SDK.CSSRule.CSSStyleRule,
+      matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
+      ): string {
     const selectorIndexes = matchedStyles.getMatchingSelectors(styleRule);
     // TODO: Compute the selector when nested selector is present
-    const selectors = styleRule.selectors.filter((_, index) => selectorIndexes.includes(index)).sort((a, b) => {
-      if (!a.specificity) {
-        return -1;
-      }
-
-      if (!b.specificity) {
-        return 1;
-      }
-
-      if (b.specificity.a !== a.specificity.a) {
-        return b.specificity.a - a.specificity.a;
-      }
-
-      if (b.specificity.b !== a.specificity.b) {
-        return b.specificity.b - a.specificity.b;
-      }
-
-      return b.specificity.b - a.specificity.b;
-    });
+    const selectors = styleRule
+                          .selectors
+                          // Filter out only selector that apply rules
+                          .filter((_, index) => selectorIndexes.includes(index))
+                          // Ignore selector that include AI selector name
+                          .filter(value => !value.text.includes(AI_ASSISTANCE_CSS_CLASS_NAME))
+                          .sort((a, b) => {
+                            if (!a.specificity) {
+                              return -1;
+                            }
+
+                            if (!b.specificity) {
+                              return 1;
+                            }
+
+                            if (b.specificity.a !== a.specificity.a) {
+                              return b.specificity.a - a.specificity.a;
+                            }
+
+                            if (b.specificity.b !== a.specificity.b) {
+                              return b.specificity.b - a.specificity.b;
+                            }
+
+                            return b.specificity.b - a.specificity.b;
+                          });
 
     const selector = selectors.at(0);
     if (!selector) {