[GreenDev]: Add sparky icon for annotations.

Bug: 461427169
Change-Id: I37639f55b869fe6be433c5c8b384130ec9df954b
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7228371
Reviewed-by: Alina Varkki <[email protected]>
Auto-Submit: Finnur Thorarinsson <[email protected]>
Commit-Queue: Alina Varkki <[email protected]>

Author: finnurbreki

config/gni/devtools_grd_files.gni

@@ -276,6 +276,7 @@ grd_files_bundled_sources = [
   "front_end/Images/smart-assistant.svg",
   "front_end/Images/snippet.svg",
   "front_end/Images/spark-info.svg",
+  "front_end/Images/spark.svg",
   "front_end/Images/speculative-loads.svg",
   "front_end/Images/speedster-badge.svg",
   "front_end/Images/star.svg",

config/gni/devtools_image_files.gni

@@ -274,6 +274,7 @@ devtools_svg_sources = [
   "smart-assistant.svg",
   "snippet.svg",
   "spark-info.svg",
+  "spark.svg",
   "speculative-loads.svg",
   "speedster-badge.svg",
   "star.svg",

front_end/Images/src/spark.svg

@@ -1203,11 +1203,21 @@ export class TabbedPaneTab {
     if (!this.#tabElement) {
       return;
     }
-    const iconElement = this.#tabElement.querySelector('.ai-icon');
+    const iconElement = this.#tabElement.querySelector('.spark');
     if (iconVisible) {
       if (!iconElement) {
-        const closeButton = this.#tabElement.querySelector('.close-button');
-        this.#tabElement.insertBefore(this.createTabAnnotationIcon(), closeButton);
+        const spark = this.createTabAnnotationIcon();
+        this.#tabElement.appendChild(spark);
+
+        const parentRect = this.#tabElement.parentElement?.getBoundingClientRect();
+        if (!parentRect) {
+          return;
+        }
+        const containerRect = this.tabElement.getBoundingClientRect();
+        const iconWidth = spark.getBoundingClientRect().width;
+        // Position the icon so that its right edge is at the container's right edge.
+        const x = containerRect.x - parentRect.x + containerRect.width - iconWidth;
+        (spark as HTMLElement).style.left = `${x}px`;
       }
     } else {
       iconElement?.remove();
@@ -1393,17 +1403,14 @@ export class TabbedPaneTab {
     return tabElement as HTMLElement;
   }
 
-  private createTabAnnotationIcon(): HTMLDivElement {
-    // TODO(finnur): Replace the ai-icon with the squiggly svg once it becomes available.
-    const iconContainer = document.createElement('div');
-    iconContainer.classList.add('ai-icon');
+  private createTabAnnotationIcon(): Icon {
     const tabAnnotationIcon = new Icon();
-    tabAnnotationIcon.name = 'smart-assistant';
+    tabAnnotationIcon.name = 'spark';
     tabAnnotationIcon.classList.add('small');
-    iconContainer.appendChild(tabAnnotationIcon);
-    iconContainer.setAttribute('title', i18nString(UIStrings.panelContainsAnnotation));
-    iconContainer.setAttribute('aria-label', i18nString(UIStrings.panelContainsAnnotation));
-    return iconContainer;
+    tabAnnotationIcon.classList.add('spark');
+    tabAnnotationIcon.setAttribute('title', i18nString(UIStrings.panelContainsAnnotation));
+    tabAnnotationIcon.setAttribute('aria-label', i18nString(UIStrings.panelContainsAnnotation));
+    return tabAnnotationIcon;
   }
 
   private createCloseIconButton(): Buttons.Button.Button {

front_end/ui/legacy/TabbedPane.ts

@@ -521,12 +521,9 @@
   }
 }
 
-.tabbed-pane-header-tab.ai .ai-icon {
-  background-color: var(--sys-color-primary);
-  border-radius: 50%;
-  margin-left: 4px;
-}
+.spark {
+  position: absolute;
+  top: 2px;
 
-.tabbed-pane-header-tab.ai .ai-icon devtools-icon {
-  color: var(--sys-color-on-primary);
+  --icon-default: var(--sys-color-primary);
 }