Add tooltips to icons

And add icon next to the trace name in more places for better association of icon to trace

Fixes: 284100487
Test: npm run test:all
Change-Id: I2cfb1ba7214ec0b316b489ef84a138861d878345

14 files changed, 116 insertions, 17 deletions

diff --git a/tools/winscope/src/app/components/app_component.ts b/tools/winscope/src/app/components/app_component.ts
index f5e62dc16..512b19815 100644
--- a/tools/winscope/src/app/components/app_component.ts
+++ b/tools/winscope/src/app/components/app_component.ts
@@ -32,6 +32,7 @@ import {FileUtils} from 'common/file_utils';
 import {PersistentStore} from 'common/persistent_store';
 import {CrossToolProtocol} from 'cross_tool/cross_tool_protocol';
 import {TraceDataListener} from 'interfaces/trace_data_listener';
+import {LoadedTrace} from 'trace/loaded_trace';
 import {Timestamp} from 'trace/timestamp';
 import {TraceType} from 'trace/trace_type';
 import {proxyClient, ProxyState} from 'trace_collection/proxy_client';
@@ -59,6 +60,13 @@ import {UploadTracesComponent} from './upload_traces_component';
       </a>
 
       <div class="spacer">
+        <mat-icon
+          *ngIf="activeTrace"
+          class="icon"
+          [matTooltip]="TRACE_INFO[activeTrace.type].name"
+          [style]="{color: TRACE_INFO[activeTrace.type].color, marginRight: '0.5rem'}">
+          {{ TRACE_INFO[activeTrace.type].icon }}
+        </mat-icon>
         <span *ngIf="dataLoaded" class="active-trace-file-info mat-body-2">
           {{ activeTraceFileInfo }}
         </span>
@@ -157,6 +165,9 @@ import {UploadTracesComponent} from './upload_traces_component';
       .spacer {
         flex: 1;
         text-align: center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
       }
       .viewers {
         height: 0;
@@ -202,11 +213,13 @@ export class AppComponent implements TraceDataListener {
   isDarkModeOn!: boolean;
   dataLoaded = false;
   activeView?: View;
+  activeTrace?: LoadedTrace;
   activeTraceFileInfo = '';
   collapsedTimelineHeight = 0;
   @ViewChild(UploadTracesComponent) uploadTracesComponent?: UploadTracesComponent;
   @ViewChild(CollectTracesComponent) collectTracesComponent?: UploadTracesComponent;
   @ViewChild(TimelineComponent) timelineComponent?: TimelineComponent;
+  TRACE_INFO = TRACE_INFO;
 
   constructor(
     @Inject(Injector) injector: Injector,
@@ -327,6 +340,7 @@ export class AppComponent implements TraceDataListener {
 
   onActiveViewChanged(view: View) {
     this.activeView = view;
+    this.activeTrace = this.getActiveTrace(view);
     this.activeTraceFileInfo = this.makeActiveTraceFileInfo(view);
     this.timelineData.setActiveViewTraceTypes(view.dependencies);
   }
@@ -336,15 +350,19 @@ export class AppComponent implements TraceDataListener {
   }
 
   private makeActiveTraceFileInfo(view: View): string {
-    const traceFile = this.tracePipeline
-      .getLoadedTraces()
-      .find((file) => file.type === view.dependencies[0]);
+    const trace = this.getActiveTrace(view);
 
-    if (!traceFile) {
+    if (!trace) {
       return '';
     }
 
-    return `${traceFile.type} (${traceFile.descriptors.join(', ')})`;
+    return `${TRACE_INFO[trace.type].name} (${trace.descriptors.join(', ')})`;
+  }
+
+  private getActiveTrace(view: View): LoadedTrace | undefined {
+    return this.tracePipeline
+      .getLoadedTraces()
+      .find((trace) => trace.type === view.dependencies[0]);
   }
 
   private async makeTraceFilesForDownload(): Promise<File[]> {
diff --git a/tools/winscope/src/app/components/timeline/expanded_timeline_component.ts b/tools/winscope/src/app/components/timeline/expanded_timeline_component.ts
index d1cb8f37f..51a1d9b59 100644
--- a/tools/winscope/src/app/components/timeline/expanded_timeline_component.ts
+++ b/tools/winscope/src/app/components/timeline/expanded_timeline_component.ts
@@ -40,7 +40,10 @@ import {SingleTimelineComponent} from './single_timeline_component';
         *ngFor="let trace of getTraces(); trackBy: trackTraceBySelectedTimestamp"
         class="timeline">
         <div class="icon-wrapper">
-          <mat-icon class="icon" [style]="{color: TRACE_INFO[trace.type].color}">
+          <mat-icon
+            class="icon"
+            [matTooltip]="TRACE_INFO[trace.type].name"
+            [style]="{color: TRACE_INFO[trace.type].color}">
             {{ TRACE_INFO[trace.type].icon }}
           </mat-icon>
         </div>
diff --git a/tools/winscope/src/app/components/trace_view_component.ts b/tools/winscope/src/app/components/trace_view_component.ts
index ca8ca7c44..353ceff02 100644
--- a/tools/winscope/src/app/components/trace_view_component.ts
+++ b/tools/winscope/src/app/components/trace_view_component.ts
@@ -15,6 +15,7 @@
  */
 
 import {Component, ElementRef, EventEmitter, Inject, Input, Output} from '@angular/core';
+import {TRACE_INFO} from 'app/trace_info';
 import {PersistentStore} from 'common/persistent_store';
 import {View, Viewer, ViewType} from 'viewers/viewer';
 
@@ -44,6 +45,12 @@ interface Tab extends View {
           [active]="isCurrentActiveTab(tab)"
           (click)="onTabClick(tab)"
           class="tab">
+          <mat-icon
+            class="icon"
+            [matTooltip]="TRACE_INFO[tab.traceType].name"
+            [style]="{color: TRACE_INFO[tab.traceType].color, marginRight: '0.5rem'}">
+            {{ TRACE_INFO[tab.traceType].icon }}
+          </mat-icon>
           {{ tab.title }}
         </a>
       </nav>
@@ -99,6 +106,8 @@ export class TraceViewComponent {
   @Output() downloadTracesButtonClick = new EventEmitter<void>();
   @Output() activeViewChanged = new EventEmitter<View>();
 
+  TRACE_INFO = TRACE_INFO;
+
   private elementRef: ElementRef;
 
   tabs: Tab[] = [];
@@ -129,6 +138,7 @@ export class TraceViewComponent {
           title: view.title,
           addedToDom: false,
           dependencies: view.dependencies,
+          traceType: view.traceType
         };
       });
 
diff --git a/tools/winscope/src/viewers/viewer.ts b/tools/winscope/src/viewers/viewer.ts
index e2629e04e..26560eeae 100644
--- a/tools/winscope/src/viewers/viewer.ts
+++ b/tools/winscope/src/viewers/viewer.ts
@@ -27,7 +27,8 @@ class View {
     public type: ViewType,
     public dependencies: TraceType[],
     public htmlElement: HTMLElement,
-    public title: string
+    public title: string,
+    public traceType: TraceType
   ) {}
 }
 
diff --git a/tools/winscope/src/viewers/viewer_input_method_clients/viewer_input_method_clients.ts b/tools/winscope/src/viewers/viewer_input_method_clients/viewer_input_method_clients.ts
index 6d55511f3..e2ebb42d0 100644
--- a/tools/winscope/src/viewers/viewer_input_method_clients/viewer_input_method_clients.ts
+++ b/tools/winscope/src/viewers/viewer_input_method_clients/viewer_input_method_clients.ts
@@ -23,7 +23,13 @@ import {PresenterInputMethodClients} from './presenter_input_method_clients';
 class ViewerInputMethodClients extends ViewerInputMethod {
   override getViews(): View[] {
     return [
-      new View(ViewType.TAB, this.getDependencies(), this.htmlElement, 'Input Method Clients'),
+      new View(
+        ViewType.TAB,
+        this.getDependencies(),
+        this.htmlElement,
+        'Input Method Clients',
+        TraceType.INPUT_METHOD_CLIENTS
+      ),
     ];
   }
 
diff --git a/tools/winscope/src/viewers/viewer_input_method_manager_service/viewer_input_method_manager_service.ts b/tools/winscope/src/viewers/viewer_input_method_manager_service/viewer_input_method_manager_service.ts
index dd24e8050..74a9ea6d5 100644
--- a/tools/winscope/src/viewers/viewer_input_method_manager_service/viewer_input_method_manager_service.ts
+++ b/tools/winscope/src/viewers/viewer_input_method_manager_service/viewer_input_method_manager_service.ts
@@ -27,7 +27,8 @@ class ViewerInputMethodManagerService extends ViewerInputMethod {
         ViewType.TAB,
         this.getDependencies(),
         this.htmlElement,
-        'Input Method Manager Service'
+        'Input Method Manager Service',
+        TraceType.INPUT_METHOD_MANAGER_SERVICE
       ),
     ];
   }
diff --git a/tools/winscope/src/viewers/viewer_input_method_service/viewer_input_method_service.ts b/tools/winscope/src/viewers/viewer_input_method_service/viewer_input_method_service.ts
index fe205a71a..8bc064f18 100644
--- a/tools/winscope/src/viewers/viewer_input_method_service/viewer_input_method_service.ts
+++ b/tools/winscope/src/viewers/viewer_input_method_service/viewer_input_method_service.ts
@@ -23,7 +23,13 @@ import {PresenterInputMethodService} from './presenter_input_method_service';
 class ViewerInputMethodService extends ViewerInputMethod {
   override getViews(): View[] {
     return [
-      new View(ViewType.TAB, this.getDependencies(), this.htmlElement, 'Input Method Service'),
+      new View(
+        ViewType.TAB,
+        this.getDependencies(),
+        this.htmlElement,
+        'Input Method Service',
+        TraceType.INPUT_METHOD_SERVICE
+      ),
     ];
   }
 
diff --git a/tools/winscope/src/viewers/viewer_protolog/viewer_protolog.ts b/tools/winscope/src/viewers/viewer_protolog/viewer_protolog.ts
index c71f390d0..f03f46afa 100644
--- a/tools/winscope/src/viewers/viewer_protolog/viewer_protolog.ts
+++ b/tools/winscope/src/viewers/viewer_protolog/viewer_protolog.ts
@@ -49,7 +49,15 @@ class ViewerProtoLog implements Viewer {
   }
 
   getViews(): View[] {
-    return [new View(ViewType.TAB, this.getDependencies(), this.htmlElement, 'ProtoLog')];
+    return [
+      new View(
+        ViewType.TAB,
+        this.getDependencies(),
+        this.htmlElement,
+        'ProtoLog',
+        TraceType.PROTO_LOG
+      ),
+    ];
   }
 
   getDependencies(): TraceType[] {
diff --git a/tools/winscope/src/viewers/viewer_screen_recording/viewer_screen_recording.ts b/tools/winscope/src/viewers/viewer_screen_recording/viewer_screen_recording.ts
index db26c900a..5bc19521b 100644
--- a/tools/winscope/src/viewers/viewer_screen_recording/viewer_screen_recording.ts
+++ b/tools/winscope/src/viewers/viewer_screen_recording/viewer_screen_recording.ts
@@ -42,7 +42,13 @@ class ViewerScreenRecording implements Viewer {
 
   getViews(): View[] {
     return [
-      new View(ViewType.OVERLAY, this.getDependencies(), this.htmlElement, 'ScreenRecording'),
+      new View(
+        ViewType.OVERLAY,
+        this.getDependencies(),
+        this.htmlElement,
+        'ScreenRecording',
+        TraceType.SCREEN_RECORDING
+      ),
     ];
   }
 
diff --git a/tools/winscope/src/viewers/viewer_stub.ts b/tools/winscope/src/viewers/viewer_stub.ts
index 088c5f4ad..95f8f2cb8 100644
--- a/tools/winscope/src/viewers/viewer_stub.ts
+++ b/tools/winscope/src/viewers/viewer_stub.ts
@@ -34,7 +34,15 @@ class ViewerStub implements Viewer {
   }
 
   getViews(): View[] {
-    return [new View(ViewType.TAB, this.getDependencies(), this.htmlElement, this.title)];
+    return [
+      new View(
+        ViewType.TAB,
+        this.getDependencies(),
+        this.htmlElement,
+        this.title,
+        this.getDependencies()[0]
+      ),
+    ];
   }
 
   getDependencies(): any {
diff --git a/tools/winscope/src/viewers/viewer_surface_flinger/viewer_surface_flinger.ts b/tools/winscope/src/viewers/viewer_surface_flinger/viewer_surface_flinger.ts
index ff2b12eae..17dc629ac 100644
--- a/tools/winscope/src/viewers/viewer_surface_flinger/viewer_surface_flinger.ts
+++ b/tools/winscope/src/viewers/viewer_surface_flinger/viewer_surface_flinger.ts
@@ -62,7 +62,15 @@ class ViewerSurfaceFlinger implements Viewer {
   }
 
   getViews(): View[] {
-    return [new View(ViewType.TAB, this.getDependencies(), this.htmlElement, 'Surface Flinger')];
+    return [
+      new View(
+        ViewType.TAB,
+        this.getDependencies(),
+        this.htmlElement,
+        'Surface Flinger',
+        TraceType.SURFACE_FLINGER
+      ),
+    ];
   }
 
   getDependencies(): TraceType[] {
diff --git a/tools/winscope/src/viewers/viewer_transactions/viewer_transactions.ts b/tools/winscope/src/viewers/viewer_transactions/viewer_transactions.ts
index e1c31ac70..2c83bc6f9 100644
--- a/tools/winscope/src/viewers/viewer_transactions/viewer_transactions.ts
+++ b/tools/winscope/src/viewers/viewer_transactions/viewer_transactions.ts
@@ -64,7 +64,15 @@ class ViewerTransactions implements Viewer {
   }
 
   getViews(): View[] {
-    return [new View(ViewType.TAB, this.getDependencies(), this.htmlElement, 'Transactions')];
+    return [
+      new View(
+        ViewType.TAB,
+        this.getDependencies(),
+        this.htmlElement,
+        'Transactions',
+        TraceType.TRANSACTIONS
+      ),
+    ];
   }
 
   getDependencies(): TraceType[] {
diff --git a/tools/winscope/src/viewers/viewer_transitions/viewer_transitions.ts b/tools/winscope/src/viewers/viewer_transitions/viewer_transitions.ts
index 106c93ddc..6ba1e4e3b 100644
--- a/tools/winscope/src/viewers/viewer_transitions/viewer_transitions.ts
+++ b/tools/winscope/src/viewers/viewer_transitions/viewer_transitions.ts
@@ -39,7 +39,15 @@ export class ViewerTransitions implements Viewer {
   }
 
   getViews(): View[] {
-    return [new View(ViewType.TAB, this.getDependencies(), this.htmlElement, 'Transitions')];
+    return [
+      new View(
+        ViewType.TAB,
+        this.getDependencies(),
+        this.htmlElement,
+        'Transitions',
+        TraceType.TRANSITION
+      ),
+    ];
   }
 
   getDependencies(): TraceType[] {
diff --git a/tools/winscope/src/viewers/viewer_window_manager/viewer_window_manager.ts b/tools/winscope/src/viewers/viewer_window_manager/viewer_window_manager.ts
index 7bfea19ff..29726f8bf 100644
--- a/tools/winscope/src/viewers/viewer_window_manager/viewer_window_manager.ts
+++ b/tools/winscope/src/viewers/viewer_window_manager/viewer_window_manager.ts
@@ -56,7 +56,15 @@ class ViewerWindowManager implements Viewer {
   }
 
   getViews(): View[] {
-    return [new View(ViewType.TAB, this.getDependencies(), this.htmlElement, 'Window Manager')];
+    return [
+      new View(
+        ViewType.TAB,
+        this.getDependencies(),
+        this.htmlElement,
+        'Window Manager',
+        TraceType.WINDOW_MANAGER
+      ),
+    ];
   }
 
   getDependencies(): TraceType[] {