[ui] Tidy up bottom tabs.

- Remove `renderTabCanvas()` method in `BottomTab` base class.
- Remove any references to `panel.ts`.
- Remove empty `FlamegraphDetailsPanelAttrs` interface.

Change-Id: I464d2fd13b33d521ec5fce39cf59762c80e9aa2c

ui/src/frontend/bottom_tab.ts

@@ -23,7 +23,6 @@ import {Registry} from '../common/registry';
 import {raf} from '../core/raf_scheduler';
 
 import {globals} from './globals';
-import {PanelSize, PanelVNode} from './panel';
 
 export interface NewBottomTabArgs {
   engine: EngineProxy;
@@ -89,7 +88,7 @@ export abstract class BottomTabBase<Config = {}> {
   abstract getTitle(): string;
 
   // Generate a mithril node for this component.
-  abstract createPanelVnode(): PanelVNode;
+  abstract renderPanel(): m.Children;
 
   // API for the tab to notify the TabList that it's still preparing the data.
   // If true, adding a new tab will be delayed for a short while (~50ms) to
@@ -114,18 +113,13 @@ export abstract class BottomTab<Config = {}> extends BottomTabBase<Config> {
     super(args);
   }
 
-  // These methods are direct counterparts to renderCanvas and view with
-  // slightly changes names to prevent cases when `BottomTab` will
-  // be accidentally used a mithril component.
-  abstract renderTabCanvas(ctx: CanvasRenderingContext2D, size: PanelSize):
-      void;
   abstract viewTab(): void|m.Children;
 
   close(): void {
     closeTab(this.uuid);
   }
 
-  createPanelVnode(): m.Vnode<any, any> {
+  renderPanel(): m.Children {
     return m(
         BottomTabAdapter,
         {key: this.uuid, panel: this} as BottomTabAdapterAttrs);

ui/src/frontend/chrome_slice_details_tab.ts

@@ -35,7 +35,6 @@ import {
   NewBottomTabArgs,
 } from './bottom_tab';
 import {FlowPoint, globals} from './globals';
-import {PanelSize} from './panel';
 import {runQueryInNewTab} from './query_result_tab';
 import {renderArguments} from './slice_args';
 import {renderDetails} from './slice_details';
@@ -210,10 +209,6 @@ export class ChromeSliceDetailsTab extends
         .then((sliceDetails) => this.sliceDetails = sliceDetails);
   }
 
-  renderTabCanvas(_ctx: CanvasRenderingContext2D, _size: PanelSize): void {
-    // No-op
-  }
-
   getTitle(): string {
     return `Current Selection`;
   }

ui/src/frontend/details_panel.ts

@@ -37,7 +37,6 @@ import {FtracePanel} from './ftrace_panel';
 import {globals} from './globals';
 import {LogPanel} from './logs_panel';
 import {NotesEditorTab} from './notes_panel';
-import {AnyAttrsVnode} from './panel_container';
 import {PivotTable} from './pivot_table';
 import {SliceDetailsPanel} from './slice_details_panel';
 import {ThreadStateTab} from './thread_state_tab';
@@ -259,7 +258,7 @@ export class DetailsPanel implements m.ClassComponent {
     interface DetailsPanel {
       key: string;
       name: string;
-      vnode: AnyAttrsVnode;
+      vnode: m.Children;
     }
 
     const detailsPanels: DetailsPanel[] = [];
@@ -269,7 +268,7 @@ export class DetailsPanel implements m.ClassComponent {
         detailsPanels.push({
           key: tab.tag ?? tab.uuid,
           name: tab.getTitle(),
-          vnode: tab.createPanelVnode(),
+          vnode: tab.renderPanel(),
         });
       }
     }

ui/src/frontend/flamegraph_panel.ts

@@ -38,14 +38,11 @@ import {DurationWidget} from '../widgets/duration';
 import {Flamegraph, NodeRendering} from './flamegraph';
 import {globals} from './globals';
 import {Modal, ModalDefinition} from './modal';
-import {PanelSize} from './panel';
 import {debounce} from './rate_limiters';
 import {Router} from './router';
 import {getCurrentTrace} from './sidebar';
 import {convertTraceToPprofAndDownload} from './trace_converter';
 
-interface FlamegraphDetailsPanelAttrs {}
-
 const HEADER_HEIGHT = 30;
 
 function toSelectedCallsite(c: CallsiteInfo|undefined): string {
@@ -64,8 +61,7 @@ const RENDER_OBJ_COUNT: NodeRendering = {
   totalSize: 'Subtree objects',
 };
 
-export class FlamegraphDetailsPanel implements
-    m.ClassComponent<FlamegraphDetailsPanelAttrs> {
+export class FlamegraphDetailsPanel implements m.ClassComponent {
   private profileType?: ProfileType = undefined;
   private ts = Time.ZERO;
   private pids: number[] = [];
@@ -255,19 +251,19 @@ export class FlamegraphDetailsPanel implements
         this.nodeRendering(), flamegraphData, data.expandedCallsite);
   }
 
-  oncreate({dom}: m.CVnodeDOM<FlamegraphDetailsPanelAttrs>) {
+  oncreate({dom}: m.CVnodeDOM) {
     this.canvas = FlamegraphDetailsPanel.findCanvasElement(dom);
     // TODO(stevegolton): If we truely want to be standalone, then we shouldn't
     // rely on someone else calling the rafScheduler when the window is resized,
     // but it's good enough for now as we know the ViewerPage will do it.
     raf.addRedrawCallback(this.rafRedrawCallback);
   }
 
-  onupdate({dom}: m.CVnodeDOM<FlamegraphDetailsPanelAttrs>) {
+  onupdate({dom}: m.CVnodeDOM) {
     this.canvas = FlamegraphDetailsPanel.findCanvasElement(dom);
   }
 
-  onremove(_vnode: m.CVnodeDOM<FlamegraphDetailsPanelAttrs>) {
+  onremove(_vnode: m.CVnodeDOM) {
     raf.removeRedrawCallback(this.rafRedrawCallback);
   }
 
@@ -291,13 +287,14 @@ export class FlamegraphDetailsPanel implements
         ctx.save();
         ctx.scale(devicePixelRatio, devicePixelRatio);
         const {offsetWidth: width, offsetHeight: height} = canvas;
-        this.renderLocalCanvas(ctx, {width, height});
+        this.renderLocalCanvas(ctx, width, height);
         ctx.restore();
       }
     }
   };
 
-  private renderLocalCanvas(ctx: CanvasRenderingContext2D, size: PanelSize) {
+  private renderLocalCanvas(
+      ctx: CanvasRenderingContext2D, width: number, height: number) {
     this.changeFlamegraphData();
     const current = globals.state.currentFlamegraphState;
     if (current === null) return;
@@ -306,7 +303,7 @@ export class FlamegraphDetailsPanel implements
             current.viewingOption === ALLOC_SPACE_MEMORY_ALLOCATED_KEY ?
         'B' :
         '';
-    this.flamegraph.draw(ctx, size.width, size.height, 0, 0, unit);
+    this.flamegraph.draw(ctx, width, height, 0, 0, unit);
   }
 
   private onMouseClick({x, y}: {x: number, y: number}): boolean {

ui/src/frontend/generic_slice_details_tab.ts

@@ -124,10 +124,6 @@ export class GenericSliceDetailsTab extends
   isLoading() {
     return this.data === undefined;
   }
-
-  renderTabCanvas() {
-    return;
-  }
 }
 
 bottomTabRegistry.register(GenericSliceDetailsTab);

ui/src/frontend/notes_panel.ts

@@ -316,8 +316,6 @@ export class NotesEditorTab extends BottomTab<NotesEditorTabConfig> {
     super(args);
   }
 
-  renderTabCanvas() {}
-
   getTitle() {
     return 'Current Selection';
   }

ui/src/frontend/query_result_tab.ts

@@ -130,8 +130,6 @@ export class QueryResultTab extends BottomTab<QueryResultTabConfig> {
     return this.queryResponse === undefined;
   }
 
-  renderTabCanvas() {}
-
   async createViewForDebugTrack(uuid: string): Promise<string> {
     const viewId = uuidToViewName(uuid);
     // Assuming that the query results come from a SELECT query, try creating a

ui/src/frontend/sql_table/tab.ts

@@ -107,8 +107,6 @@ export class SqlTableTab extends BottomTab<SqlTableTabConfig> {
         }));
   }
 
-  renderTabCanvas() {}
-
   getTitle(): string {
     const rowCount = this.state.getTotalRowCount();
     const rows = rowCount === undefined ? '' : ` (${rowCount})`;

ui/src/frontend/thread_state_tab.ts

@@ -370,8 +370,6 @@ export class ThreadStateTab extends BottomTab<ThreadStateTabConfig> {
   isLoading() {
     return this.state === undefined || this.relatedStates === undefined;
   }
-
-  renderTabCanvas(): void {}
 }
 
 bottomTabRegistry.register(ThreadStateTab);

ui/src/tracks/chrome_scroll_jank/event_latency_details_panel.ts

@@ -185,10 +185,6 @@ export class EventLatencySliceDetailsPanel extends
   getTitle(): string {
     return `Current Selection`;
   }
-
-  renderTabCanvas() {
-    return;
-  }
 }
 
 bottomTabRegistry.register(EventLatencySliceDetailsPanel);

ui/src/tracks/chrome_scroll_jank/scroll_details_panel.ts

@@ -357,10 +357,6 @@ export class ScrollDetailsPanel extends
   isLoading() {
     return !this.loaded;
   }
-
-  renderTabCanvas() {
-    return;
-  }
 }
 
 bottomTabRegistry.register(ScrollDetailsPanel);

ui/src/tracks/chrome_scroll_jank/scroll_jank_v3_details_panel.ts

@@ -331,10 +331,6 @@ export class ScrollJankV3DetailsPanel extends
   isLoading() {
     return !this.loaded;
   }
-
-  renderTabCanvas() {
-    return;
-  }
 }
 
 bottomTabRegistry.register(ScrollJankV3DetailsPanel);

ui/src/tracks/debug/details_tab.ts

@@ -258,10 +258,6 @@ export class DebugSliceDetailsTab extends
   isLoading() {
     return this.data === undefined;
   }
-
-  renderTabCanvas() {
-    return;
-  }
 }
 
 bottomTabRegistry.register(DebugSliceDetailsTab);