[turbolizer] Improve TypeScript types

This CL adds more TypeScript types and inserts some instanceof checks to
ensure typing. The CL also selects es2018 as target and loads es6/es2018
libs for TypeScript types. This ensures that RegExp groups matching
results are properly typed.

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

tools/turbolizer/src/code-view.ts

@@ -30,11 +30,10 @@ export class CodeView extends View {
     return sourceContainer;
   }
 
-  constructor(parentId, broker, sourceResolver, sourceFunction, codeMode: CodeMode) {
-    super(parentId);
+  constructor(parent: HTMLElement, broker: SelectionBroker, sourceResolver: SourceResolver, sourceFunction: Source, codeMode: CodeMode) {
+    super(parent);
     let view = this;
     view.broker = broker;
-    view.source = null;
     view.sourceResolver = sourceResolver;
     view.source = sourceFunction;
     view.codeMode = codeMode;
@@ -207,11 +206,13 @@ export class CodeView extends View {
         const spans = currentLineElement.childNodes;
         for (let j = 0; j < spans.length; ++j) {
           const currentSpan = spans[j];
-          const pos = base + current;
-          const end = pos + currentSpan.textContent.length;
-          current += currentSpan.textContent.length;
-          this.insertSourcePositions(currentSpan, lineNumber, pos, end, newlineAdjust);
-          newlineAdjust = 0;
+          if (currentSpan instanceof HTMLSpanElement) {
+            const pos = base + current;
+            const end = pos + currentSpan.textContent.length;
+            current += currentSpan.textContent.length;
+            this.insertSourcePositions(currentSpan, lineNumber, pos, end, newlineAdjust);
+            newlineAdjust = 0;
+          }
         }
 
         this.insertLineNumber(currentLineElement, lineNumber);
@@ -232,6 +233,7 @@ export class CodeView extends View {
     for (const sourcePosition of sps) {
       this.sourceResolver.addAnyPositionToLine(lineNumber, sourcePosition);
       const textnode = currentSpan.tagName == 'SPAN' ? currentSpan.lastChild : currentSpan;
+      if (!(textnode instanceof Text)) continue;
       const splitLength = Math.max(0, sourcePosition.scriptOffset - pos - offset);
       offset += splitLength;
       const replacementNode = textnode.splitText(splitLength);
@@ -258,12 +260,12 @@ export class CodeView extends View {
     }
   }
 
-  insertLineNumber(lineElement, lineNumber) {
+  insertLineNumber(lineElement: HTMLElement, lineNumber: number) {
     const view = this;
     const lineNumberElement = document.createElement("div");
     lineNumberElement.classList.add("line-number");
-    lineNumberElement.dataset.lineNumber = lineNumber;
-    lineNumberElement.innerText = lineNumber;
+    lineNumberElement.dataset.lineNumber = `${lineNumber}`;
+    lineNumberElement.innerText = `${lineNumber}`;
     lineElement.insertBefore(lineNumberElement, lineElement.firstChild)
     // Don't add lines to source positions of not in backwardsCompatibility mode.
     if (this.source.backwardsCompatibility === true) {

tools/turbolizer/src/disassembly-view.ts

@@ -236,7 +236,7 @@ export class DisassemblyView extends TextView {
     }
   }
 
-  initializeCode(sourceText, sourcePosition) {
+  initializeCode(sourceText, sourcePosition: number = 0) {
     let view = this;
     view.addr_event_counts = null;
     view.total_event_counts = null;

tools/turbolizer/src/graph.ts

@@ -20,7 +20,7 @@ export class Graph {
     this.minGraphY = 0;
     this.maxGraphY = 1;
 
-    data.nodes.forEach((n) => {
+    data.nodes.forEach((n: any) => {
       n.__proto__ = GNode.prototype;
       n.visible = false;
       n.x = 0;

tools/turbolizer/src/sequence-view.ts

@@ -42,7 +42,7 @@ export class SequenceView extends TextView implements PhaseView {
     this.search_info = [];
     this.divNode.addEventListener('click', (e:MouseEvent) => {
       if (!(e.target instanceof HTMLElement)) return;
-      const instructionId = e.target.dataset.instructionId;
+      const instructionId = Number.parseInt(e.target.dataset.instructionId, 10);
       if (!instructionId) return;
       if (!e.shiftKey) this.broker.broadcastClear(null);
       this.broker.broadcastInstructionSelect(null, [instructionId], true);

tools/turbolizer/src/source-resolver.ts

@@ -16,9 +16,9 @@ function sourcePositionEq(a, b) {
     a.scriptOffset == b.scriptOffset;
 }
 
-export function sourcePositionToStringKey(sourcePosition): string {
+export function sourcePositionToStringKey(sourcePosition: AnyPosition): string {
   if (!sourcePosition) return "undefined";
-  if (sourcePosition.inliningId && sourcePosition.scriptOffset)
+  if ('inliningId' in sourcePosition && 'scriptOffset' in sourcePosition)
     return "SP:" + sourcePosition.inliningId + ":" + sourcePosition.scriptOffset;
   if (sourcePosition.bytecodePosition)
     return "BCP:" + sourcePosition.bytecodePosition;

tools/turbolizer/src/tabs.ts

@@ -72,7 +72,8 @@ export class Tabs {
         this.tabBar.parentNode.appendChild(tabDiv);
     }
 
-    tabBarOnDrop(e) {
+    tabBarOnDrop(e: DragEvent) {
+        if (!(e.target instanceof HTMLElement)) return;
         e.preventDefault();
         const tabId = e.dataTransfer.getData("text");
         const tab = document.getElementById(tabId) as HTMLLIElement;
@@ -90,7 +91,8 @@ export class Tabs {
         e.preventDefault();
     }
 
-    tabOnDragStart(e) {
+    tabOnDragStart(e: DragEvent) {
+        if (!(e.target instanceof HTMLElement)) return;
         e.dataTransfer.setData("text", e.target.id);
     }
 

tools/turbolizer/tsconfig.json

 {
-    "compilerOptions": {
-        "outDir": "build/",
-        "allowJs": false,
-        "target": "es2017",
-        "module": "es2015",
-        "sourceMap": true,
-        "experimentalDecorators": true,
-        "emitDecoratorMetadata": true,
-        "moduleResolution": "node",
-        "noUnusedLocals": true
-    },
-    "files": [
-        "src/util.ts",
-        "src/node.ts",
-        "src/edge.ts",
-        "src/graph.ts",
-        "src/source-resolver.ts",
-        "src/selection.ts",
-        "src/selection-broker.ts",
-        "src/selection-handler.ts",
-        "src/constants.ts",
-        "src/view.ts",
-        "src/text-view.ts",
-        "src/code-view.ts",
-        "src/graph-layout.ts",
-        "src/graph-view.ts",
-        "src/schedule-view.ts",
-        "src/disassembly-view.ts",
-        "src/graphmultiview.ts",
-        "src/turbo-visualizer.ts"
-    ]
+  "compilerOptions": {
+    "outDir": "build/",
+    "allowJs": false,
+    "target": "es2018",
+    "module": "es2015",
+    "sourceMap": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "moduleResolution": "node",
+    "noUnusedLocals": true,
+    "lib": ["dom", "es6", "dom.iterable", "scripthost", "es2018"]
+  },
+  "files": [
+    "src/util.ts",
+    "src/node.ts",
+    "src/edge.ts",
+    "src/graph.ts",
+    "src/source-resolver.ts",
+    "src/selection.ts",
+    "src/selection-broker.ts",
+    "src/selection-handler.ts",
+    "src/constants.ts",
+    "src/view.ts",
+    "src/text-view.ts",
+    "src/code-view.ts",
+    "src/graph-layout.ts",
+    "src/graph-view.ts",
+    "src/schedule-view.ts",
+    "src/disassembly-view.ts",
+    "src/graphmultiview.ts",
+    "src/turbo-visualizer.ts"
+  ]
 }