[AI Assistance] Update selected element indicator when class or id for the element is update dynamically

Bug: 367653288
Change-Id: I076112c16bdad440097e26c5a612fbbeff7bbec5
Fixed: 367653288
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6090556
Commit-Queue: Samiya Caur <[email protected]>
Reviewed-by: Ergün Erdoğmuş <[email protected]>
Auto-Submit: Samiya Caur <[email protected]>

Author: Samiya Caur

front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -449,6 +449,10 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         SourcesPanel.SourcesPanel.SourcesPanel, this.#selectDefaultAgentIfNeeded, this);
     UI.Context.Context.instance().addFlavorChangeListener(
         TimelinePanel.TimelinePanel.TimelinePanel, this.#selectDefaultAgentIfNeeded, this);
+    SDK.TargetManager.TargetManager.instance().addModelListener(
+        SDK.DOMModel.DOMModel, SDK.DOMModel.Events.AttrModified, this.#handleDOMNodeAttrChange, this);
+    SDK.TargetManager.TargetManager.instance().addModelListener(
+        SDK.DOMModel.DOMModel, SDK.DOMModel.Events.AttrRemoved, this.#handleDOMNodeAttrChange, this);
     Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistancePanelOpened);
   }
 
@@ -473,6 +477,18 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         SourcesPanel.SourcesPanel.SourcesPanel, this.#selectDefaultAgentIfNeeded, this);
     UI.Context.Context.instance().removeFlavorChangeListener(
         TimelinePanel.TimelinePanel.TimelinePanel, this.#selectDefaultAgentIfNeeded, this);
+    SDK.TargetManager.TargetManager.instance().removeModelListener(
+        SDK.DOMModel.DOMModel,
+        SDK.DOMModel.Events.AttrModified,
+        this.#handleDOMNodeAttrChange,
+        this,
+    );
+    SDK.TargetManager.TargetManager.instance().removeModelListener(
+        SDK.DOMModel.DOMModel,
+        SDK.DOMModel.Events.AttrRemoved,
+        this.#handleDOMNodeAttrChange,
+        this,
+    );
   }
 
   #handleAidaAvailabilityChange = async(): Promise<void> => {
@@ -508,6 +524,15 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     this.#updateAgentState(this.#currentAgent);
   };
 
+  #handleDOMNodeAttrChange =
+      (ev: Common.EventTarget.EventTargetEvent<{node: SDK.DOMModel.DOMNode, name: string}>): void => {
+        if (this.#selectedElement?.getItem() === ev.data.node) {
+          if (ev.data.name === 'class' || ev.data.name === 'id') {
+            void this.doUpdate();
+          }
+        }
+      };
+
   #handleNetworkRequestFlavorChange =
       (ev: Common.EventTarget.EventTargetEvent<SDK.NetworkRequest.NetworkRequest>): void => {
         if (this.#selectedRequest?.getItem() === ev.data) {