[AI Assistance] Remove ai-style-change-* class from the selector picker within AI Assistance

Fixed: 362464957
Change-Id: I13df1e61153c69f0fa57f763e78fefb65f0914d1
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6090598
Commit-Queue: Alex Rudenko <[email protected]>
Reviewed-by: Alex Rudenko <[email protected]>
Auto-Submit: Samiya Caur <[email protected]>

Author: Samiya Caur

front_end/core/sdk/DOMModel.ts

@@ -1044,6 +1044,11 @@ export class DOMNode {
 
     return this.domModel().nodeForId(response.nodeId);
   }
+
+  classNames(): string[] {
+    const classes = this.getAttribute('class');
+    return classes ? classes.split(/\s+/) : [];
+  }
 }
 
 export namespace DOMNode {

front_end/panels/ai_assistance/agents/StylingAgent.ts

@@ -10,7 +10,8 @@ import * as Root from '../../../core/root/root.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
-import {ChangeManager} from '../ChangeManager.js';
+import {linkifyNodeReference} from '../../elements/DOMLinkifier.js';
+import {AI_ASSISTANCE_CSS_CLASS_NAME, ChangeManager} from '../ChangeManager.js';
 import {EvaluateAction, formatError, SideEffectError} from '../EvaluateAction.js';
 import {ExtensionScope, FREESTYLER_WORLD_NAME} from '../ExtensionScope.js';
 
@@ -226,8 +227,10 @@ export class NodeContext extends ConversationContext<SDK.DOMModel.DOMNode> {
   }
 
   override getTitle(): string|ReturnType<typeof LitHtml.Directives.until> {
+    const hiddenClassList =
+        this.#node.classNames().filter(className => className.startsWith(AI_ASSISTANCE_CSS_CLASS_NAME));
     return LitHtml.Directives.until(
-        Common.Linkifier.Linkifier.linkify(this.#node),
+        linkifyNodeReference(this.#node, {hiddenClassList}),
     );
   }
 }

front_end/panels/ai_assistance/components/ChatView.test.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as Host from '../../../core/host/host.js';
-import type * as SDK from '../../../core/sdk/sdk.js';
 import {renderElementIntoDOM} from '../../../testing/DOMHelpers.js';
 import {describeWithEnvironment, getGetHostConfigStub} from '../../../testing/EnvironmentHelpers.js';
 import * as Marked from '../../../third_party/marked/marked.js';
@@ -104,6 +103,8 @@ css
   function getProp(options: Partial<Freestyler.Props>): Freestyler.Props {
     const noop = () => {};
     const messages: Freestyler.ChatMessage[] = options.messages ?? [];
+    const selectedContext = sinon.createStubInstance(Freestyler.NodeContext);
+    selectedContext.getTitle.returns('');
     return {
       onTextSubmit: noop,
       onInspectElementClick: noop,
@@ -116,7 +117,7 @@ css
       agentType: Freestyler.AgentType.STYLING,
       aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
       messages,
-      selectedContext: new Freestyler.NodeContext({} as unknown as SDK.DOMModel.DOMNode),
+      selectedContext,
       isLoading: false,
       canShowFeedbackForm: false,
       userInfo: {},

front_end/panels/elements/DOMLinkifier.ts

@@ -21,8 +21,12 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/elements/DOMLinkifier.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+export interface Options extends Common.Linkifier.Options {
+  hiddenClassList?: string[];
+}
+
 export const decorateNodeLabel = function(
-    node: SDK.DOMModel.DOMNode, parentElement: HTMLElement, options: Common.Linkifier.Options): void {
+    node: SDK.DOMModel.DOMNode, parentElement: HTMLElement, options: Options): void {
   const originalNode = node;
   const isPseudo = node.nodeType() === Node.ELEMENT_NODE && node.pseudoType();
   if (isPseudo && node.parentNode) {
@@ -69,7 +73,7 @@ export const decorateNodeLabel = function(
       const classesElement = parentElement.createChild('span', 'extra node-label-class');
       for (let i = 0; i < classes.length; ++i) {
         const className = classes[i];
-        if (className && !foundClasses.has(className)) {
+        if (className && !options.hiddenClassList?.includes(className) && !foundClasses.has(className)) {
           const part = '.' + className;
           title += part;
           UI.UIUtils.createTextChild(classesElement, part);
@@ -93,13 +97,12 @@ export const decorateNodeLabel = function(
   UI.Tooltip.Tooltip.install(parentElement, options.tooltip || title);
 };
 
-export const linkifyNodeReference = function(
-    node: SDK.DOMModel.DOMNode|null, options: Common.Linkifier.Options|undefined = {
-      tooltip: undefined,
-      preventKeyboardFocus: undefined,
-      textContent: undefined,
-      isDynamicLink: false,
-    }): Node {
+export const linkifyNodeReference = function(node: SDK.DOMModel.DOMNode|null, options: Options|undefined = {
+  tooltip: undefined,
+  preventKeyboardFocus: undefined,
+  textContent: undefined,
+  isDynamicLink: false,
+}): Node {
   if (!node) {
     return document.createTextNode(i18nString(UIStrings.node));
   }
@@ -129,7 +132,7 @@ export const linkifyNodeReference = function(
 };
 
 export const linkifyDeferredNodeReference = function(
-    deferredNode: SDK.DOMModel.DeferredDOMNode, options: Common.Linkifier.Options|undefined = {
+    deferredNode: SDK.DOMModel.DeferredDOMNode, options: Options|undefined = {
       tooltip: undefined,
       preventKeyboardFocus: undefined,
     }): Node {
@@ -166,7 +169,7 @@ export class Linkifier implements Common.Linkifier.Linkifier {
 
     return linkifierInstance;
   }
-  linkify(object: Object, options?: Common.Linkifier.Options): Node {
+  linkify(object: Object, options?: Options): Node {
     if (object instanceof SDK.DOMModel.DOMNode) {
       return linkifyNodeReference(object, options);
     }

front_end/testing/DOMHelpers.ts

@@ -33,7 +33,6 @@ export const renderElementIntoDOM = (element: HTMLElement, renderOptions: Render
   if (container.childNodes.length !== 0 && !allowMultipleChildren) {
     throw new Error(`renderElementIntoDOM expects the container to be empty ${container.innerHTML}`);
   }
-
   container.appendChild(element);
   return element;
 };