[AI Assistance] Fix CSS nested selector

Strip the special selector, this allows us to at least apply a change,
else we didn't pick anything and we failed to update the styles.

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

Author: Lightning00Blade

front_end/panels/ai_assistance/ExtensionScope.test.ts

@@ -233,6 +233,27 @@ describe('ExtensionScope', () => {
       const selector = await getSelector({matchedPayload});
       assert.strictEqual(selector, '.test');
     });
+
+    it('should work with nested selector and strip the &', 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(
+            {
+              selectors: [{text: 'div&'}],
+              text: 'div&',
+            },
+            MOCK_STYLE,
+            {
+              nestingSelectors: ['.my-parent-selector'],
+            },
+            )
+      ];
+      const selector = await getSelector({matchedPayload});
+      assert.strictEqual(selector, 'div');
+    });
   });
 
   describeWithMockConnection('getSourceLocation', () => {

front_end/panels/ai_assistance/ExtensionScope.ts

@@ -148,7 +148,6 @@ export class ExtensionScope {
 
   static getStyleRuleFromMatchesStyles(matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles): SDK.CSSRule.CSSStyleRule
       |undefined {
-    let styleRule: SDK.CSSRule.CSSStyleRule|undefined;
     for (const style of matchedStyles.nodeStyles()) {
       // Ignore inline as we can't override them
       if (style.type === 'Inline') {
@@ -168,11 +167,10 @@ export class ExtensionScope {
           continue;
         }
 
-        styleRule = rule;
-        break;
+        return rule;
       }
     }
-    return styleRule;
+    return;
   }
 
   static getSelectorsFromStyleRule(
@@ -199,8 +197,16 @@ export class ExtensionScope {
       return b.specificity.b - a.specificity.b;
     });
 
+    const selector = selectors.at(0);
+    if (!selector) {
+      return '';
+    }
     // See https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector
-    return selectors.at(0)?.text.replace(':visited', '') ?? '';
+    let cssSelector = selector.text.replaceAll(':visited', '');
+    // See https://www.w3.org/TR/css-nesting-1/#nest-selector
+    cssSelector = cssSelector.replaceAll('&', '');
+
+    return cssSelector.trim();
   }
 
   static getSelectorForNode(node: SDK.DOMModel.DOMNode): string {

test/shared/helper.ts

@@ -237,7 +237,7 @@ export const $$textContent = async (textContent: string, root?: puppeteer.Elemen
   return await $$(textContent, root, 'pierceShadowText');
 };
 
-export const timeout = (duration: number) => new Promise(resolve => setTimeout(resolve, duration));
+export const timeout = (duration: number) => new Promise<void>(resolve => setTimeout(resolve, duration));
 
 export const getTextContent =
     async<ElementType extends Element = Element>(selector: string, root?: puppeteer.ElementHandle) => {