[GreenDev]: Add annotation indicator for the panels tab switcher.

Bug: 461428483
Change-Id: Ie0101039501847beceb391125b6f90111c02e4a1
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7206086
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
Commit-Queue: Finnur Thorarinsson <finnur@chromium.org>

Author: finnurbreki

PRESUBMIT.py

@@ -36,6 +36,7 @@
     r'^front_end[\\/]third_party[\\/].*',  # 3rd party code
     # Apple copyright
     r'^front_end[\\/]ui[\\/]legacy[\\/]components[\\/]data_grid[\\/]DataGrid\.ts$',
+    r'^front_end[\\/]ui[\\/]legacy[\\/]tabbedPane\.css$',  # Apple copyright
     r'^node_modules[\\/].*',  # 3rd party code
     r'^scripts[\\/]build[\\/]build_inspector_overlay\.py$',  # Lines too long
     r'^scripts[\\/]build[\\/]code_generator_frontend\.py$',

front_end/models/ai_assistance/agents/PerformanceAgent.ts

@@ -47,7 +47,7 @@ const UIStringsNotTranslated = {
   mainThreadActivity: 'Investigating main thread activity…',
 } as const;
 const lockedString = i18n.i18n.lockedString;
-const annotationsEnabled = Annotations.AnnotationRepository.AnnotationRepository.annotationsEnabled();
+const annotationsEnabled = Annotations.AnnotationRepository.annotationsEnabled();
 
 /**
  * WARNING: preamble defined in code is only used when userTier is
@@ -1094,15 +1094,15 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
 
   async addElementAnnotation(elementId: string, annotationMessage: string):
       Promise<FunctionCallHandlerResult<unknown>> {
-    if (!Annotations.AnnotationRepository.AnnotationRepository.annotationsEnabled()) {
+    if (!Annotations.AnnotationRepository.annotationsEnabled()) {
       console.warn('Received agent request to add annotation with annotations disabled');
       return {error: 'Annotations are not currently enabled'};
     }
 
     // eslint-disable-next-line no-console
     console.log(`AI AGENT EVENT: Performance Agent adding annotation for element ${elementId}: '${annotationMessage}'`);
-    Annotations.AnnotationRepository.AnnotationRepository.instance().addAnnotationWithAnchor(
-        annotationMessage, elementId, Annotations.AnnotationType.AnnotationType.ELEMENT_NODE);
+    Annotations.AnnotationRepository.instance().addAnnotationWithAnchor(
+        annotationMessage, elementId, Annotations.AnnotationType.ELEMENT_NODE);
     return {result: {success: true}};
   }
 }

front_end/ui/components/annotations/annotations.ts

@@ -2,10 +2,5 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as AnnotationRepository from './AnnotationRepository.js';
-import * as AnnotationType from './AnnotationType.js';
-
-export {
-  AnnotationRepository,
-  AnnotationType,
-};
+export * from './AnnotationRepository.js';
+export * from './AnnotationType.js';

front_end/ui/legacy/BUILD.gn

@@ -111,6 +111,7 @@ devtools_ui_module("ui") {
     "../../models/geometry:bundle",
     "../../models/text_utils:bundle",
     "../../ui/legacy/theme_support:bundle",
+    "../components/annotations:bundle",
     "../components/buttons:bundle",
     "../components/helpers:bundle",
     "../components/highlighting:bundle",

front_end/ui/legacy/TabbedPane.ts

@@ -10,6 +10,7 @@ import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as Geometry from '../../models/geometry/geometry.js';
+import * as Annotations from '../../ui/components/annotations/annotations.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as IconButton from '../components/icon_button/icon_button.js';
@@ -53,6 +54,10 @@ const UIStrings = {
    * @description Indicates that a tab contains a preview feature (i.e., a beta / experimental feature).
    */
   previewFeature: 'Preview feature',
+  /**
+   * @description Indicates that a tab contains annotation(s).
+   */
+  panelContainsAnnotation: 'This panel has one or more annotations',
   /**
    * @description Text to move a tab forwar.
    */
@@ -121,6 +126,11 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     this.currentDevicePixelRatio = window.devicePixelRatio;
     ZoomManager.instance().addEventListener(ZoomManagerEvents.ZOOM_CHANGED, this.zoomChanged, this);
     this.makeTabSlider();
+
+    if (Annotations.AnnotationRepository.annotationsEnabled()) {
+      Annotations.AnnotationRepository.instance().addEventListener(
+          Annotations.Events.ANNOTATION_ADDED, this.#onAnnotationAdded, this);
+    }
   }
 
   setAccessibleName(name: string): void {
@@ -555,6 +565,36 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     this.performUpdate();
   }
 
+  updateTabAnnotationIcons(): void {
+    if (!Annotations.AnnotationRepository.annotationsEnabled()) {
+      return;
+    }
+
+    const annotations = Annotations.AnnotationRepository.instance();
+    if (!annotations) {
+      return;
+    }
+
+    for (const tab of this.tabs) {
+      let primaryType = -1;
+      let secondaryType = -1;
+      switch (tab.id) {
+        case 'elements':
+          primaryType = Annotations.AnnotationType.ELEMENT_NODE;
+          secondaryType = Annotations.AnnotationType.STYLE_RULE;
+          break;
+        case 'network':
+          primaryType = Annotations.AnnotationType.NETWORK_REQUEST;
+          secondaryType = Annotations.AnnotationType.NETWORK_REQUEST_SUBPANEL_HEADERS;
+          break;
+      }
+
+      const showTabAnnotationIcon = annotations.getAnnotationsByType(primaryType).length > 0 ||
+          annotations.getAnnotationsByType(secondaryType).length > 0;
+      this.setTabAnnotationIcon(tab.id, showTabAnnotationIcon);
+    }
+  }
+
   override performUpdate(): void {
     if (!this.isShowing()) {
       return;
@@ -583,6 +623,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     this.updateWidths();
     this.updateTabsDropDown();
     this.updateTabSlider();
+    this.updateTabAnnotationIcons();
   }
 
   private adjustToolbarWidth(): void {
@@ -939,6 +980,17 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     this.automaticReorder = automatic;
   }
 
+  setTabAnnotationIcon(id: string, iconVisible: boolean): void {
+    const tab = this.tabsById.get(id);
+    if (tab) {
+      tab.tabAnnotationIcon = iconVisible;
+    }
+  }
+
+  #onAnnotationAdded(): void {
+    this.updateTabAnnotationIcons();
+  }
+
   private keyDown(event: KeyboardEvent): void {
     if (!this.currentTab) {
       return;
@@ -1009,6 +1061,7 @@ export interface EventTypes {
 export class TabbedPaneTab {
   closeable: boolean;
   previewFeature = false;
+  #tabAnnotationIcon = false;
   private readonly tabbedPane: TabbedPane;
   #id: string;
   #title: string;
@@ -1064,6 +1117,32 @@ export class TabbedPaneTab {
     return this.#jslogContext ?? (this.#id === 'console-view' ? 'console' : this.#id);
   }
 
+  get tabAnnotationIcon(): boolean {
+    return this.#tabAnnotationIcon;
+  }
+
+  set tabAnnotationIcon(iconVisible: boolean) {
+    if (this.#tabAnnotationIcon === iconVisible) {
+      return;
+    }
+    this.#tabAnnotationIcon = iconVisible;
+    if (!this.#tabElement) {
+      return;
+    }
+    const iconElement = this.#tabElement.querySelector('.ai-icon');
+    if (iconVisible) {
+      if (!iconElement) {
+        const closeButton = this.#tabElement.querySelector('.close-button');
+        this.#tabElement.insertBefore(this.createTabAnnotationIcon(), closeButton);
+      }
+    } else {
+      iconElement?.remove();
+    }
+    this.#tabElement.classList.toggle('ai', iconVisible);
+    delete this.measuredWidth;
+    this.tabbedPane.requestUpdate();
+  }
+
   isCloseable(): boolean {
     return this.closeable;
   }
@@ -1204,6 +1283,12 @@ export class TabbedPaneTab {
       tabElement.classList.add('preview');
     }
 
+    if (this.tabAnnotationIcon) {
+      const tabAnnotationIcon = this.createTabAnnotationIcon();
+      tabElement.appendChild(tabAnnotationIcon);
+      tabElement.classList.add('ai');
+    }
+
     if (this.closeable) {
       const closeIcon = this.createCloseIconButton();
       tabElement.appendChild(closeIcon);
@@ -1230,6 +1315,19 @@ 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');
+    const tabAnnotationIcon = new IconButton.Icon.Icon();
+    tabAnnotationIcon.name = 'smart-assistant';
+    tabAnnotationIcon.classList.add('small');
+    iconContainer.appendChild(tabAnnotationIcon);
+    iconContainer.setAttribute('title', i18nString(UIStrings.panelContainsAnnotation));
+    iconContainer.setAttribute('aria-label', i18nString(UIStrings.panelContainsAnnotation));
+    return iconContainer;
+  }
+
   private createCloseIconButton(): Buttons.Button.Button {
     const closeButton = new Buttons.Button.Button();
     closeButton.data = {

front_end/ui/legacy/tabbedPane.css

@@ -520,3 +520,13 @@
     --tabbed-pane-close-icon-color: HighlightText;
   }
 }
+
+.tabbed-pane-header-tab.ai .ai-icon {
+  background-color: var(--sys-color-primary);
+  border-radius: 50%;
+  margin-left: 4px;
+}
+
+.tabbed-pane-header-tab.ai .ai-icon devtools-icon {
+  color: var(--sys-color-on-primary);
+}