[AI Assistance] Compute most specific selector

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

Author: Lightning00Blade

front_end/core/sdk/CSSMatchedStyles.test.ts

@@ -343,9 +343,11 @@ describe('CSSMatchedStyles', () => {
        node.id = 1 as Protocol.DOM.NodeId;
        const startColumn = 0, endColumn = 1;
        const matchedPayload = [
-         ruleMatch('body', [{name: '--var', value: 'blue'}], {startLine: 0, startColumn, endLine: 0, endColumn}),
-         ruleMatch('*', [{name: 'color', value: 'var(--var)'}], {startLine: 1, startColumn, endLine: 1, endColumn}),
-         ruleMatch('*', [{name: '--var', value: 'red'}], {startLine: 2, startColumn, endLine: 2, endColumn}),
+         ruleMatch(
+             'body', [{name: '--var', value: 'blue'}], {range: {startLine: 0, startColumn, endLine: 0, endColumn}}),
+         ruleMatch(
+             '*', [{name: 'color', value: 'var(--var)'}], {range: {startLine: 1, startColumn, endLine: 1, endColumn}}),
+         ruleMatch('*', [{name: '--var', value: 'red'}], {range: {startLine: 2, startColumn, endLine: 2, endColumn}}),
        ];
        const inheritedPayload = [{matchedCSSRules: matchedPayload.slice(1)}];
        const matchedStyles = await getMatchedStyles({

front_end/panels/ai_assistance/BUILD.gn

@@ -97,6 +97,7 @@ ts_library("unittests") {
     "AiHistoryStorage.test.ts",
     "ChangeManager.test.ts",
     "EvaluateAction.test.ts",
+    "ExtensionScope.test.ts",
     "agents/AiAgent.test.ts",
     "agents/FileAgent.test.ts",
     "agents/NetworkAgent.test.ts",

front_end/panels/ai_assistance/ExtensionScope.test.ts

@@ -0,0 +1,164 @@
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as SDK from '../../core/sdk/sdk.js';
+import type * as Protocol from '../../generated/protocol.js';
+import {createCSSStyle, getMatchedStyles, ruleMatch} from '../../testing/StyleHelpers.js';
+
+import * as ChangeManager from './ChangeManager.js';
+import * as ExtensionScope from './ExtensionScope.js';
+
+async function getSelector(payload: Partial<SDK.CSSMatchedStyles.CSSMatchedStylesPayload>) {
+  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);
+
+  const matchedStyles = await getMatchedStyles({
+    node,
+    ...payload,
+  });
+
+  return ExtensionScope.ExtensionScope.getSelectorForRule(matchedStyles);
+}
+
+describe('ExtensionScope', () => {
+  const MOCK_STYLE = [
+    {
+      name: 'color',
+      value: 'red',
+    },
+  ];
+
+  describe('getSelector', () => {
+    it('should work with empty styles', async () => {
+      const selector = await getSelector({});
+      assert.strictEqual(selector, '');
+    });
+
+    it('should omit inline selectors', async () => {
+      const inlinePayload = createCSSStyle(MOCK_STYLE);
+      const selector = await getSelector({
+        inlinePayload,
+      });
+      assert.strictEqual(selector, '');
+    });
+
+    it('should work with id selector', async () => {
+      const matchedPayload = [
+        ruleMatch('#test', MOCK_STYLE),
+      ];
+      const selector = await getSelector({matchedPayload});
+      assert.strictEqual(selector, '#test');
+    });
+
+    it('should work with class selector', async () => {
+      const matchedPayload = [
+        ruleMatch('.test', MOCK_STYLE),
+      ];
+      const selector = await getSelector({matchedPayload});
+      assert.strictEqual(selector, '.test');
+    });
+
+    it('should work with tag selector', async () => {
+      const matchedPayload = [
+        ruleMatch('div', MOCK_STYLE),
+      ];
+      const selector = await getSelector({matchedPayload});
+      assert.strictEqual(selector, 'div');
+    });
+
+    it('should prefer id selectors', async () => {
+      const matchedPayload = [
+        ruleMatch(
+            {
+              selectors: [
+                {
+                  text: '#my-id',
+                  specificity: {a: 1, b: 0, c: 0},
+                },
+                {
+                  text: '.my-class',
+                  specificity: {a: 0, b: 1, c: 0},
+                },
+                {
+                  text: 'div',
+                  specificity: {a: 0, b: 0, c: 1},
+                },
+              ],
+              text: '#my-id, .my-class, div'
+            },
+            MOCK_STYLE,
+            ),
+      ];
+      const selector = await getSelector({matchedPayload});
+      assert.strictEqual(selector, '#my-id');
+    });
+
+    it('should prefer class selectors over tags', async () => {
+      const matchedPayload = [
+        ruleMatch(
+            {
+              selectors: [
+                {
+                  text: '.my-class',
+                  specificity: {a: 0, b: 1, c: 0},
+                },
+                {
+                  text: 'div',
+                  specificity: {a: 0, b: 0, c: 1},
+                },
+              ],
+              text: '.my-class, div'
+            },
+            MOCK_STYLE,
+            ),
+      ];
+      const selector = await getSelector({matchedPayload});
+      assert.strictEqual(selector, '.my-class');
+    });
+
+    it('should pick first rule from the cascade', 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('.test-2', MOCK_STYLE),
+      ];
+      const selector = await getSelector({matchedPayload});
+      assert.strictEqual(selector, '.test-2');
+    });
+
+    it('should work with complex selector', async () => {
+      const matchedPayload = [
+        ruleMatch('div.container > .header', MOCK_STYLE),
+      ];
+      const selector = await getSelector({matchedPayload});
+      assert.strictEqual(selector, 'div.container > .header');
+    });
+
+    it('should return nested 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(
+
+            {
+              selectors: [{text: 'div&'}],
+              text: 'div&',
+            },
+            MOCK_STYLE,
+            {
+              nestingSelectors: [`.${ChangeManager.AI_ASSISTANCE_CSS_CLASS_NAME}-1`],
+            },
+            ),
+      ];
+      const selector = await getSelector({matchedPayload});
+      assert.strictEqual(selector, 'div');
+    });
+  });
+});