ui: Add discriminating type to {,Legacy}DetailsPanel

It's becoming a bit too confusing to handle the duality of
DetailsPanel vs LegacyDetailsPanel. In order to move everything
onto the new Trace API, it's more convenient if they have a
discriminating property, so we can have a single registerDetailsPanel()
function that can deal with both. This reduces churn in next CLs.

Change-Id: I483e23b095d1f9bd1e2e2706a3d916d5f8c2b960

ui/src/core/app_trace_impl.ts

@@ -19,7 +19,7 @@ import {TimeSpan} from '../base/time';
 import {TimelineImpl} from '../core/timeline';
 import {App} from '../public/app';
 import {Command} from '../public/command';
-import {LegacyDetailsPanel} from '../public/details_panel';
+import {DetailsPanel, LegacyDetailsPanel} from '../public/details_panel';
 import {Trace} from '../public/trace';
 import {setScrollToFunction} from '../public/scroll_helper';
 import {ScrollToArgs} from 'src/public/scroll_helper';
@@ -304,8 +304,14 @@ export class TraceImpl implements Trace {
     return new TraceImpl(this.appImpl.forkForPlugin(pluginId), this.traceCtx);
   }
 
-  registerDetailsPanel(detailsPanel: LegacyDetailsPanel): Disposable {
-    return this.traceCtx.tabMgr.registerLegacyDetailsPanel(detailsPanel);
+  registerDetailsPanel(
+    detailsPanel: DetailsPanel | LegacyDetailsPanel,
+  ): Disposable {
+    if (detailsPanel.panelType === 'LegacyDetailsPanel') {
+      return this.traceCtx.tabMgr.registerLegacyDetailsPanel(detailsPanel);
+    } else {
+      return this.traceCtx.tabMgr.registerDetailsPanel(detailsPanel);
+    }
   }
 
   // TODO(primiano): there are two things here:

ui/src/core_plugins/cpu_profile/index.ts

@@ -95,6 +95,7 @@ class CpuProfile implements PerfettoPlugin {
 }
 
 class CpuProfileSampleFlamegraphDetailsPanel implements LegacyDetailsPanel {
+  readonly panelType = 'LegacyDetailsPanel';
   private sel?: CpuProfileSampleSelection;
   private selMonitor = new Monitor([() => this.sel?.ts, () => this.sel?.utid]);
   private flamegraphAttrs?: QueryFlamegraphAttrs;

ui/src/core_plugins/heap_profile/index.ts

@@ -89,6 +89,7 @@ class HeapProfilePlugin implements PerfettoPlugin {
 }
 
 class HeapProfileFlamegraphDetailsPanel implements LegacyDetailsPanel {
+  readonly panelType = 'LegacyDetailsPanel';
   private sel?: HeapProfileSelection;
   private selMonitor = new Monitor([
     () => this.sel?.ts,

ui/src/core_plugins/perf_samples_profile/index.ts

@@ -129,6 +129,7 @@ class PerfSamplesProfilePlugin implements PerfettoPlugin {
 }
 
 class PerfSamplesFlamegraphDetailsPanel implements LegacyDetailsPanel {
+  readonly panelType = 'LegacyDetailsPanel';
   private sel?: PerfSamplesSelection;
   private selMonitor = new Monitor([
     () => this.sel?.leftTs,

ui/src/frontend/aggregation_tab.ts

@@ -366,6 +366,7 @@ export class AggregationsTabs implements Disposable {
 
   constructor() {
     const unregister = globals.tabManager.registerDetailsPanel({
+      panelType: 'DetailsPanel',
       render(selection) {
         if (selection.kind === 'area') {
           return m(AreaDetailsPanel);

ui/src/frontend/notes_panel.ts

@@ -370,6 +370,8 @@ export class NotesPanel implements Panel {
 }
 
 export class NotesEditorTab implements DetailsPanel {
+  readonly panelType = 'DetailsPanel';
+
   render(selection: Selection) {
     if (selection.kind !== 'note') {
       return undefined;

ui/src/public/details_panel.ts

@@ -16,11 +16,13 @@ import m from 'mithril';
 import {LegacySelection, Selection} from './selection';
 
 export interface LegacyDetailsPanel {
+  readonly panelType: 'LegacyDetailsPanel';
   render(selection: LegacySelection): m.Children;
   isLoading?(): boolean;
 }
 
 export interface DetailsPanel {
+  readonly panelType: 'DetailsPanel';
   render(selection: Selection): m.Children;
   isLoading?(): boolean;
 }

ui/src/public/trace.ts

@@ -20,7 +20,7 @@ import {TabManager} from './tab';
 import {TrackManager} from './track';
 import {Timeline} from './timeline';
 import {Workspace, WorkspaceManager} from './workspace';
-import {LegacyDetailsPanel} from './details_panel';
+import {DetailsPanel, LegacyDetailsPanel} from './details_panel';
 import {SelectionManager} from './selection';
 import {ScrollToArgs} from './scroll_helper';
 
@@ -50,7 +50,7 @@ export interface Trace extends App {
   // gone. This method is particularly problematic because the method called
   // registerDetailsPanel in TabManagerImpl takes a non-Legacy DetailsPanel, but
   // all plugins use a Legacy one. Keeping this as a bridge for now.
-  registerDetailsPanel(detailsPanel: LegacyDetailsPanel): void;
+  registerDetailsPanel(detailsPanel: DetailsPanel | LegacyDetailsPanel): void;
 
   // Creates and shows a tab with a tabular result for the given query.
   // TODO(primiano): I am not convinced this belongs here, this should probably

ui/src/public/utils.ts

@@ -129,6 +129,7 @@ export interface BottomTabAdapterAttrs {
     })
  */
 export class BottomTabToSCSAdapter implements LegacyDetailsPanel {
+  readonly panelType = 'LegacyDetailsPanel';
   private oldSelection?: LegacySelection;
   private bottomTab?: BottomTab;
   private attrs: BottomTabAdapterAttrs;