Unify getTrackShellButtons and getContextMenu.

There is no need to have both and current approach has limitations:
e.g. context menu is always going to be the last button, and not
being able to add more buttons with context menus.

Allow getTrackShellButtons to return any mithril vnode instead of
requiring TrackButtonAttrs and fold getContextMenu into it.

Change-Id: Ib8337260b44d3b4928574a2b6c63eee86f75c026

ui/src/common/basic_async_track.ts

@@ -19,7 +19,6 @@ import {raf} from '../core/raf_scheduler';
 import {globals} from '../frontend/globals';
 import {PxSpan, TimeScale} from '../frontend/time_scale';
 import {SliceRect} from '../frontend/track';
-import {TrackButtonAttrs} from '../frontend/track_panel';
 import {Track} from '../public';
 
 import {TrackData} from './track_data';
@@ -67,14 +66,10 @@ export abstract class BasicAsyncTrack<Data> implements Track {
 
   abstract getHeight(): number;
 
-  getTrackShellButtons(): m.Vnode<TrackButtonAttrs, {}>[] {
+  getTrackShellButtons(): m.Children {
     return [];
   }
 
-  getContextMenu(): m.Vnode<any, {}>|null {
-    return null;
-  }
-
   onMouseMove(_position: {x: number; y: number;}): void {}
 
   onMouseClick(_position: {x: number; y: number;}): boolean {

ui/src/common/track_adapter.ts

@@ -76,7 +76,7 @@ export class TrackWithControllerAdapter<Config, Data> extends
     return this.track.getHeight();
   }
 
-  getTrackShellButtons(): m.Vnode<TrackButtonAttrs, {}>[] {
+  getTrackShellButtons(): m.Children {
     return this.track.getTrackShellButtons();
   }
 

ui/src/frontend/base_counter_track.ts

@@ -121,7 +121,7 @@ export abstract class BaseCounterTrack<Config> extends TrackBase<Config> {
     });
   }
 
-  getContextMenu(): m.Vnode<any> {
+  getCounterContextMenu(): m.Child {
     return m(
         PopupMenu2,
         {
@@ -131,6 +131,12 @@ export abstract class BaseCounterTrack<Config> extends TrackBase<Config> {
     );
   }
 
+  getTrackShellButtons(): m.Children {
+    return [
+      this.getCounterContextMenu(),
+    ];
+  }
+
   renderCanvas(ctx: CanvasRenderingContext2D) {
     const {
       visibleTimeScale: timeScale,

ui/src/frontend/track.ts

@@ -24,7 +24,6 @@ import {Track} from '../public';
 import {checkerboard} from './checkerboard';
 import {globals} from './globals';
 import {PxSpan, TimeScale} from './time_scale';
-import {TrackButtonAttrs} from './track_panel';
 
 // Args passed to the track constructors when creating a new track.
 export interface NewTrackArgs {
@@ -113,14 +112,10 @@ export abstract class TrackBase<Config = {}, Data extends TrackData = TrackData>
     return 40;
   }
 
-  getTrackShellButtons(): Array<m.Vnode<TrackButtonAttrs>> {
+  getTrackShellButtons(): m.Children {
     return [];
   }
 
-  getContextMenu(): m.Vnode<any>|null {
-    return null;
-  }
-
   onMouseMove(_position: {x: number, y: number}) {}
 
   // Returns whether the mouse click has selected something.

ui/src/frontend/track_panel.ts

@@ -152,7 +152,6 @@ class TrackShell implements m.ClassComponent<TrackShellAttrs> {
             ),
         m('.track-buttons',
           attrs.track.getTrackShellButtons(),
-          attrs.track.getContextMenu(),
           m(TrackButton, {
             action: () => {
               globals.dispatch(

ui/src/public/index.ts

@@ -21,7 +21,6 @@ import {TrackControllerFactory} from '../controller/track_controller';
 import {Store} from '../frontend/store';
 import {PxSpan, TimeScale} from '../frontend/time_scale';
 import {SliceRect, TrackCreator} from '../frontend/track';
-import {TrackButtonAttrs} from '../frontend/track_panel';
 
 export {EngineProxy} from '../common/engine';
 export {
@@ -196,8 +195,7 @@ export interface Track {
       windowSpan: PxSpan, tStart: time, tEnd: time, depth: number): SliceRect
       |undefined;
   getHeight(): number;
-  getTrackShellButtons(): Array<m.Vnode<TrackButtonAttrs>>;
-  getContextMenu(): m.Vnode<any>|null;
+  getTrackShellButtons(): m.Children;
   onMouseMove(position: {x: number, y: number}): void;
   onMouseClick(position: {x: number, y: number}): boolean;
   onMouseOut(): void;

ui/src/tracks/counter/index.ts

@@ -318,7 +318,7 @@ export class CounterTrack extends BasicAsyncTrack<Data> {
     return MARGIN_TOP + RECT_HEIGHT;
   }
 
-  getContextMenu(): m.Vnode<any> {
+  getTrackShellButtons(): m.Children {
     const currentScale = this.store.state.scale;
     const scales: {name: CounterScaleOptions, humanName: string}[] = [
       {name: 'ZERO_BASED', humanName: 'Zero based'},
@@ -338,13 +338,13 @@ export class CounterTrack extends BasicAsyncTrack<Data> {
       });
     });
 
-    return m(
+    return [m(
         PopupMenu2,
         {
           trigger: m(Button, {icon: 'show_chart', minimal: true}),
         },
         menuItems,
-    );
+        )];
   }
 
   renderCanvas(ctx: CanvasRenderingContext2D): void {

ui/src/tracks/debug/counter_track.ts

@@ -19,7 +19,7 @@ import {EngineProxy} from '../../common/engine';
 import {BaseCounterTrack} from '../../frontend/base_counter_track';
 import {globals} from '../../frontend/globals';
 import {NewTrackArgs} from '../../frontend/track';
-import {TrackButton, TrackButtonAttrs} from '../../frontend/track_panel';
+import {TrackButton} from '../../frontend/track_panel';
 
 // Names of the columns of the underlying view to be used as ts / dur / name.
 export interface CounterColumns {
@@ -44,15 +44,18 @@ export class DebugCounterTrack extends
     super(args);
   }
 
-  getTrackShellButtons(): Array<m.Vnode<TrackButtonAttrs>> {
-    return [m(TrackButton, {
-      action: () => {
-        globals.dispatch(Actions.removeDebugTrack({trackId: this.trackId}));
-      },
-      i: 'close',
-      tooltip: 'Close',
-      showButton: true,
-    })];
+  getTrackShellButtons(): m.Children {
+    return [
+      this.getCounterContextMenu(),
+      m(TrackButton, {
+        action: () => {
+          globals.dispatch(Actions.removeDebugTrack({trackId: this.trackId}));
+        },
+        i: 'close',
+        tooltip: 'Close',
+        showButton: true,
+      }),
+    ];
   }
 
   async initSqlTable(tableName: string): Promise<void> {

ui/src/tracks/debug/slice_track.ts

@@ -21,7 +21,7 @@ import {
   NamedSliceTrackTypes,
 } from '../../frontend/named_slice_track';
 import {NewTrackArgs} from '../../frontend/track';
-import {TrackButton, TrackButtonAttrs} from '../../frontend/track_panel';
+import {TrackButton} from '../../frontend/track_panel';
 import {
   CustomSqlDetailsPanelConfig,
   CustomSqlTableDefConfig,
@@ -78,7 +78,7 @@ export class DebugTrackV2 extends CustomSqlTableSliceTrack<DebugTrackV2Types> {
     super.initSqlTable(tableName);
   }
 
-  getTrackShellButtons(): Array<m.Vnode<TrackButtonAttrs>> {
+  getTrackShellButtons(): m.Children {
     return [m(TrackButton, {
       action: () => {
         globals.dispatch(Actions.removeDebugTrack({trackId: this.trackId}));

ui/src/tracks/visualised_args/index.ts

@@ -49,7 +49,7 @@ export class VisualisedArgsTrack extends ChromeSliceTrack {
     return 'italic 11px Roboto';
   }
 
-  getTrackShellButtons(): Array<m.Vnode<TrackButtonAttrs>> {
+  getTrackShellButtons(): m.Children {
     const config = this.config as Config;
     const buttons: Array<m.Vnode<TrackButtonAttrs>> = [];
     buttons.push(m(TrackButton, {