Add tooltips to icons am: 115ed2f243

Original change: https://googleplex-android-review.googlesource.com/c/platform/development/+/23466728 Change-Id: I5b636897e3dfc3db94a8095586190dc4679041a9 Signed-off-by: Automerger Merge Worker <android-build-automerger-merge-worker@system.gserviceaccount.com>
2023-05-30 15:17:24 +00:00
parent 6dab99f012 115ed2f243
commit 496ba10ece
14 changed files with 116 additions and 17 deletions
--- 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[]> {
--- 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>
--- 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
        };
      });

--- 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
  ) {}
 }

--- 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
+      ),
    ];
  }

--- 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
      ),
    ];
  }
--- 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
+      ),
    ];
  }

--- 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[] {
--- 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
+      ),
    ];
  }

--- 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 {
--- 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[] {
--- 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[] {
--- 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[] {
--- 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[] {