Merge pull request #343 from SwiftFiddle/token-balloon

Improve balloon token kind

Author: kishikawakatsumi

Public/css/balloon.css

@@ -57,6 +57,16 @@
 .balloon .title {
   color: #fff;
   font-weight: bolder;
+  display: inline-block;
+}
+
+.balloon .token-kind {
+  color: #fff;
+  font-weight: normal;
+  font-family: Menlo, Consolas, "DejaVu Sans Mono", "Ubuntu Mono", monospace;
+  max-width: 200px;
+  display: inline-block;
+  vertical-align: bottom;
 }
 
 .balloon .range {

Public/js/app.js

@@ -153,7 +153,9 @@ export class App {
     this.structureView.update(data);
 
     this.structureView.onmouseover = (event, target, data) => {
-      const title = data.token ? "Token" : `${data.text}`;
+      const title = data.token
+        ? `Token <span class="token-kind text-truncate"  style="max-width: 300px;">${data.token.kind}</span>`
+        : `${data.text}`;
       const range = data.range;
 
       const formatted = formatRange(range);