[turbolizer] Refactor View/PhaseView interfaces

Notry: true
Bug: v8:7327
Change-Id: I9cdea29db2b409d773a16e3d6c29ef4325257162
Reviewed-on: https://chromium-review.googlesource.com/c/1409437
Commit-Queue: Sigurd Schneider <sigurds@chromium.org>
Reviewed-by: Georg Neis <neis@chromium.org>
Cr-Commit-Position: refs/heads/master@{#58815}

tools/turbolizer/src/code-view.ts

@@ -100,9 +100,6 @@ export class CodeView extends View {
     mkVisible.apply(scrollIntoView);
   }
 
-  initializeContent(data, rememberedSelection) {
-  }
-
   getCodeHtmlElementName() {
     return `source-pre-${this.source.sourceId}`;
   }
@@ -126,7 +123,7 @@ export class CodeView extends View {
     }
   }
 
-  onSelectSourcePosition(sourcePosition, doClear) {
+  onSelectSourcePosition(sourcePosition, doClear: boolean) {
     if (doClear) {
       this.selectionHandler.clear();
     }
@@ -274,6 +271,4 @@ export class CodeView extends View {
     }
   }
 
-  deleteContent() { }
-  detachSelection() { return null; }
 }

tools/turbolizer/src/disassembly-view.ts

@@ -280,9 +280,9 @@ export class DisassemblyView extends TextView {
     }
   }
 
-  initializeContent(data, rememberedSelection) {
+  showContent(data): void {
     console.time("disassembly-view");
-    super.initializeContent(data, rememberedSelection);
+    super.initializeContent(data, null);
     this.showInstructionAddressHandler();
     this.showInstructionBinaryHandler();
     console.timeEnd("disassembly-view");
@@ -347,4 +347,8 @@ export class DisassemblyView extends TextView {
   }
 
   detachSelection() { return null; }
+
+  public searchInputAction(searchInput: HTMLInputElement, e: Event, onlyVisible: boolean): void {
+    throw new Error("Method not implemented.");
+  }
 }

tools/turbolizer/src/graph-view.ts

@@ -8,7 +8,7 @@ import { GNode, nodeToStr } from "../src/node";
 import { NODE_INPUT_WIDTH } from "../src/node";
 import { DEFAULT_NODE_BUBBLE_RADIUS } from "../src/node";
 import { Edge, edgeToStr } from "../src/edge";
-import { View, PhaseView } from "../src/view";
+import { PhaseView } from "../src/view";
 import { MySelection } from "../src/selection";
 import { partial } from "../src/util";
 import { NodeSelectionHandler, ClearableHandler } from "./selection-handler";
@@ -28,7 +28,7 @@ interface GraphState {
   hideDead: boolean;
 }
 
-export class GraphView extends View implements PhaseView {
+export class GraphView extends PhaseView {
   divElement: d3.Selection<any, any, any, any>;
   svg: d3.Selection<any, any, any, any>;
   showPhaseByName: (p: string, s: Set<any>) => void;
@@ -227,6 +227,7 @@ export class GraphView extends View implements PhaseView {
   }
 
   initializeContent(data, rememberedSelection) {
+    this.show();
     function createImgInput(id: string, title: string, onClick): HTMLElement {
       const input = document.createElement("input");
       input.setAttribute("id", id);
@@ -267,11 +268,6 @@ export class GraphView extends View implements PhaseView {
     }
   }
 
-  show(data, rememberedSelection): void {
-    this.container.appendChild(this.divNode);
-    this.initializeContent(data, rememberedSelection);
-  }
-
   deleteContent() {
     for (const item of this.toolbox.querySelectorAll(".graph-toolbox-item")) {
       item.parentElement.removeChild(item);
@@ -286,6 +282,11 @@ export class GraphView extends View implements PhaseView {
     this.updateGraphVisibility();
   }
 
+  public hide(): void {
+    super.hide();
+    this.deleteContent();
+  }
+
   createGraph(data, rememberedSelection) {
     this.graph = new Graph(data);
 
@@ -293,7 +294,7 @@ export class GraphView extends View implements PhaseView {
 
     if (rememberedSelection != undefined) {
       for (const n of this.graph.nodes()) {
-        n.visible = n.visible || rememberedSelection.has(nodeToStringKey(n);
+        n.visible = n.visible || rememberedSelection.has(nodeToStringKey(n));
       }
     }
 
@@ -559,7 +560,7 @@ export class GraphView extends View implements PhaseView {
         view.selectAllNodes();
         break;
       case 38:
-        // UP
+      // UP
       case 40: {
         // DOWN
         showSelectionFrontierNodes(d3.event.keyCode == 38, undefined, true);

tools/turbolizer/src/graphmultiview.ts

@@ -28,7 +28,7 @@ export class GraphMultiView extends View {
   schedule: ScheduleView;
   sequence: SequenceView;
   selectMenu: HTMLSelectElement;
-  currentPhaseView: View & PhaseView;
+  currentPhaseView: PhaseView;
 
   createViewElement() {
     const pane = document.createElement("div");
@@ -84,8 +84,8 @@ export class GraphMultiView extends View {
     };
   }
 
-  show(data, rememberedSelection) {
-    super.show(data, rememberedSelection);
+  show() {
+    super.show();
     this.initializeSelect();
     const lastPhaseIndex = +window.sessionStorage.getItem("lastSelectedPhase");
     const initialPhaseIndex = this.sourceResolver.repairPhaseId(lastPhaseIndex);
@@ -93,8 +93,6 @@ export class GraphMultiView extends View {
     this.displayPhase(this.sourceResolver.getPhase(initialPhaseIndex));
   }
 
-  initializeContent() { }
-
   displayPhase(phase, selection?: Set<any>) {
     if (phase.type == "graph") {
       this.displayPhaseView(this.graph, phase, selection);
@@ -105,9 +103,9 @@ export class GraphMultiView extends View {
     }
   }
 
-  displayPhaseView(view, data, selection?: Set<any>) {
+  displayPhaseView(view: PhaseView, data, selection?: Set<any>) {
     const rememberedSelection = selection ? selection : this.hideCurrentPhase();
-    view.show(data, rememberedSelection);
+    view.initializeContent(data, rememberedSelection);
     this.divNode.classList.toggle("scrollable", view.isScrollable());
     this.currentPhaseView = view;
   }
@@ -132,10 +130,6 @@ export class GraphMultiView extends View {
     if (this.currentPhaseView) this.currentPhaseView.onresize();
   }
 
-  deleteContent() {
-    this.hideCurrentPhase();
-  }
-
   detachSelection() {
     return null;
   }

tools/turbolizer/src/info-view.ts

@@ -4,9 +4,6 @@ export class InfoView extends View {
 
   constructor(idOrContainer: HTMLElement | string) {
     super(idOrContainer);
-  }
-
-  initializeContent(data: any, rememberedSelection: Set<any>): void {
     fetch("info-view.html")
       .then(response => response.text())
       .then(htmlText => this.divNode.innerHTML = htmlText);
@@ -17,12 +14,4 @@ export class InfoView extends View {
     infoContainer.classList.add("info-container");
     return infoContainer;
   }
-
-  deleteContent(): void {
-    this.divNode.innerHTML = "";
-  }
-
-  detachSelection(): Set<string> {
-    return null;
-  }
 }

tools/turbolizer/src/schedule-view.ts

@@ -3,10 +3,9 @@
 // found in the LICENSE file.
 
 import { Schedule, SourceResolver } from "../src/source-resolver";
-import { PhaseView } from "../src/view";
 import { TextView } from "../src/text-view";
 
-export class ScheduleView extends TextView implements PhaseView {
+export class ScheduleView extends TextView {
   schedule: Schedule;
   sourceResolver: SourceResolver;
 
@@ -41,6 +40,7 @@ export class ScheduleView extends TextView implements PhaseView {
     this.schedule = data.schedule;
     this.addBlocks(data.schedule.blocks);
     this.attachSelection(rememberedSelection);
+    this.show();
   }
 
   createElementFromString(htmlString) {
@@ -183,6 +183,4 @@ export class ScheduleView extends TextView implements PhaseView {
     }
     this.selectionHandler.select(select, true);
   }
-
-  onresize() { }
 }

tools/turbolizer/src/sequence-view.ts

@@ -4,10 +4,9 @@
 
 import { Sequence } from "../src/source-resolver";
 import { isIterable } from "../src/util";
-import { PhaseView } from "../src/view";
 import { TextView } from "../src/text-view";
 
-export class SequenceView extends TextView implements PhaseView {
+export class SequenceView extends TextView {
   sequence: Sequence;
   searchInfo: Array<any>;
 
@@ -49,6 +48,7 @@ export class SequenceView extends TextView implements PhaseView {
     });
     this.addBlocks(this.sequence.blocks);
     this.attachSelection(rememberedSelection);
+    this.show();
   }
 
   elementForBlock(block) {
@@ -239,6 +239,4 @@ export class SequenceView extends TextView implements PhaseView {
     }
     this.selectionHandler.select(select, true);
   }
-
-  onresize() { }
 }

tools/turbolizer/src/text-view.ts

@@ -2,14 +2,14 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import { View } from "../src/view";
+import { PhaseView } from "../src/view";
 import { anyToString, ViewElements, isIterable } from "../src/util";
 import { MySelection } from "../src/selection";
 import { SourceResolver } from "./source-resolver";
 import { SelectionBroker } from "./selection-broker";
 import { NodeSelectionHandler, BlockSelectionHandler } from "./selection-handler";
 
-export abstract class TextView extends View {
+export abstract class TextView extends PhaseView {
   selectionHandler: NodeSelectionHandler;
   blockSelectionHandler: BlockSelectionHandler;
   selection: MySelection;
@@ -161,9 +161,8 @@ export abstract class TextView extends View {
   }
 
   clearText() {
-    const view = this;
-    while (view.textListNode.firstChild) {
-      view.textListNode.removeChild(view.textListNode.firstChild);
+    while (this.textListNode.firstChild) {
+      this.textListNode.removeChild(this.textListNode.firstChild);
     }
   }
 
@@ -240,13 +239,12 @@ export abstract class TextView extends View {
   }
 
   initializeContent(data, rememberedSelection) {
-    const view = this;
-    view.clearText();
-    view.processText(data);
+    this.clearText();
+    this.processText(data);
+    this.show();
   }
 
-  deleteContent() {
-  }
+  public onresize(): void {}
 
   isScrollable() {
     return true;

tools/turbolizer/src/turbo-visualizer.ts

@@ -13,11 +13,11 @@ import * as C from "../src/constants";
 import { InfoView } from "./info-view";
 
 window.onload = function () {
-  let multiview = null;
-  let disassemblyView = null;
-  let sourceViews = [];
-  let selectionBroker = null;
-  let sourceResolver = null;
+  let multiview: GraphMultiView = null;
+  let disassemblyView: DisassemblyView = null;
+  let sourceViews: Array<CodeView> = [];
+  let selectionBroker: SelectionBroker = null;
+  let sourceResolver: SourceResolver = null;
   const resizer = new Resizer(panesUpdatedCallback, 100);
   const sourceTabsContainer = document.getElementById(C.SOURCE_PANE_ID);
   const sourceTabs = new Tabs(sourceTabsContainer);
@@ -29,7 +29,7 @@ window.onload = function () {
   infoTab.classList.add("persistent-tab");
   infoContainer.classList.add("viewpane", "scrollable");
   const infoView = new InfoView(infoContainer);
-  infoView.show(null, null);
+  infoView.show();
   sourceTabs.activateTab(infoTab);
 
   function panesUpdatedCallback() {
@@ -80,12 +80,12 @@ window.onload = function () {
       sourceContainer.classList.add("viewpane", "scrollable");
       sourceTabs.activateTab(sourceTab);
       const sourceView = new CodeView(sourceContainer, selectionBroker, sourceResolver, fnc, CodeMode.MAIN_SOURCE);
-      sourceView.show(null, null);
+      sourceView.show();
       sourceViews.push(sourceView);
 
       sourceResolver.forEachSource(source => {
         const sourceView = new CodeView(sourceContainer, selectionBroker, sourceResolver, source, CodeMode.INLINED_SOURCE);
-        sourceView.show(null, null);
+        sourceView.show();
         sourceViews.push(sourceView);
       });
 
@@ -96,11 +96,12 @@ window.onload = function () {
       disassemblyView.initializeCode(fnc.sourceText);
       if (sourceResolver.disassemblyPhase) {
         disassemblyView.initializePerfProfile(jsonObj.eventCounts);
-        disassemblyView.show(sourceResolver.disassemblyPhase.data, null);
+        disassemblyView.showContent(sourceResolver.disassemblyPhase.data);
+        disassemblyView.show();
       }
 
       multiview = new GraphMultiView(C.INTERMEDIATE_PANE_ID, selectionBroker, sourceResolver);
-      multiview.show(jsonObj);
+      multiview.show();
     } catch (err) {
       if (window.confirm("Error: Exception during load of TurboFan JSON file:\n" +
         "error: " + err.message + "\nDo you want to clear session storage?")) {

tools/turbolizer/src/view.ts

@@ -3,34 +3,35 @@
 // found in the LICENSE file.
 
 export abstract class View {
-  container: HTMLElement;
-  divNode: HTMLElement;
-  abstract initializeContent(data: any, rememberedSelection: Set<any>): void;
-  abstract createViewElement(): HTMLElement;
-  abstract deleteContent(): void;
-  abstract detachSelection(): Set<string>;
+  protected container: HTMLElement;
+  protected divNode: HTMLElement;
+  protected abstract createViewElement(): HTMLElement;
 
   constructor(idOrContainer: string | HTMLElement) {
     this.container = typeof idOrContainer == "string" ? document.getElementById(idOrContainer) : idOrContainer;
     this.divNode = this.createViewElement();
   }
 
-  isScrollable(): boolean {
-    return false;
-  }
-
-  show(data: any, rememberedSelection: Set<any>): void {
-    this.initializeContent(data, rememberedSelection);
+  public show(): void {
     this.container.appendChild(this.divNode);
   }
 
-  hide(): void {
+  public hide(): void {
     this.container.removeChild(this.divNode);
-    this.deleteContent();
   }
 }
 
-export interface PhaseView {
-  onresize(): void;
-  searchInputAction(searchInput: HTMLInputElement, e: Event, onlyVisible: boolean): void;
+export abstract class PhaseView extends View {
+  public abstract initializeContent(data: any, rememberedSelection: Set<any>): void;
+  public abstract detachSelection(): Set<string>;
+  public abstract onresize(): void;
+  public abstract searchInputAction(searchInput: HTMLInputElement, e: Event, onlyVisible: boolean): void;
+
+  constructor(idOrContainer: string | HTMLElement) {
+    super(idOrContainer);
+  }
+
+  public isScrollable(): boolean {
+    return false;
+  }
 }