[turbolizer] Initial HTML&CSS code refactoring

Change-Id: Ic2c2ccbc68b95d02aed610e96c57ee5739836cc6
Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/3673299
Reviewed-by: Tobias Tebbi <tebbi@chromium.org>
Commit-Queue: Tobias Tebbi <tebbi@chromium.org>
Cr-Commit-Position: refs/heads/main@{#80804}

tools/turbolizer/css/tabs.css

@@ -0,0 +1,54 @@
+.content {
+  display: grid;
+  grid-template-areas:
+    "tabs"
+    "window";
+  grid-template-columns: 1fr;
+  grid-template-rows: auto 1fr;
+  min-height: calc(100vh);
+}
+
+.nav-tabs-container {
+  grid-area: tabs;
+  padding: 0;
+  background-color: #999999;
+  border-bottom: 4px solid #CCCCCC;
+}
+
+.tab-content {
+  grid-area: window;
+  background-color: white;
+  padding: 0;
+  display: none;
+}
+
+.tab-content.tab-default {
+  display: block;
+}
+
+ul.nav-tabs {
+  padding: 0;
+  margin: 0;
+  overflow: auto;
+  display: table-row;
+  min-height: 2ex;
+}
+
+.nav-tabs li {
+  display: inline-block;
+  padding: 4px 10px;
+  min-width: 20px;
+  text-decoration: none;
+  color: black;
+  text-align: center;
+  user-select: none;
+  cursor: pointer;
+}
+
+.nav-tabs li:hover {
+  background-color: #EEEEEE;
+}
+
+.nav-tabs li.active {
+  background-color: #CCCCCC;
+}

tools/turbolizer/css/turbo-visualizer.css

@@ -87,7 +87,7 @@ ol.linenums {
   background-color: #CCCCCC;
 }
 
-.prettyprint ol.linenums>li.selected {
+.prettyprint ol.linenums > li.selected {
   background-color: #FFFF33 !important;
 }
 
@@ -95,7 +95,7 @@ li.selected .line-number {
   background-color: #FFFF33;
 }
 
-.prettyprint ol.linenums>li {
+.prettyprint ol.linenums > li {
   list-style-type: decimal;
   display: block;
 }
@@ -106,10 +106,7 @@ li.selected .line-number {
 
 .code-header {
   background-color: #CCCCCC;
-  padding-left: 1em;
-  padding-right: 1em;
-  padding-top: 1ex;
-  padding-bottom: 1ex;
+  padding: 1ex 1em;
   font-family: monospace;
   user-select: none;
 }
@@ -150,7 +147,6 @@ li.selected .line-number {
   padding: 2px;
 }
 
-
 html,
 body {
   margin: 0;
@@ -163,7 +159,7 @@ body {
 
 p {
   text-align: center;
-  overflow: overlay;
+  overflow: auto;
   position: relative;
 }
 
@@ -297,7 +293,7 @@ path.link.selected {
 
 pre.prettyprint {
   border: none !important;
-  padding: 0px;
+  padding: 0;
 }
 
 li.L1,
@@ -313,9 +309,9 @@ li.nolinenums {
 }
 
 ul.noindent {
-  -webkit-padding-start: 0px;
-  -webkit-margin-before: 0px;
-  -webkit-margin-after: 0px;
+  -webkit-padding-start: 0;
+  -webkit-margin-before: 0;
+  -webkit-margin-after: 0;
 }
 
 input:hover,
@@ -464,7 +460,7 @@ text {
   content: "";
   display: inline-block;
   bottom: -1ex;
-  width: 0px;
+  width: 0;
   margin-left: -4px;
   margin-right: -4px;
   margin-bottom: -1ex;
@@ -521,11 +517,11 @@ text {
   font-weight: bold;
 }
 
-.schedule-block>.block-id::before {
+.schedule-block > .block-id::before {
   content: "Block B";
 }
 
-.schedule-block.deferred>.block-id::after {
+.schedule-block.deferred > .block-id::after {
   content: " (deferred)";
 }
 
@@ -593,7 +589,7 @@ text {
   /* display: none; */
 }
 
-.schedule-block>.instr-marker {
+.schedule-block > .instr-marker {
   display: inline;
 }
 
@@ -645,11 +641,11 @@ text {
   padding-right: .5ex;
 }
 
-.gap>*:before {
+.gap > *:before {
   content: "(";
 }
 
-.gap>*:after {
+.gap > *:after {
   content: ")";
 }
 
@@ -669,20 +665,20 @@ text {
   font-weight: bold;
 }
 
-.comma-sep-list>* {
+.comma-sep-list > * {
   padding-right: 1ex;
 }
 
-.comma-sep-list>*:after {
+.comma-sep-list > *:after {
   content: ",";
 }
 
-.comma-sep-list>*:last-child:after {
+.comma-sep-list > *:last-child:after {
   content: "";
 }
 
-.comma-sep-list>*:last-child {
-  padding-right: 0ex;
+.comma-sep-list > *:last-child {
+  padding-right: 0;
 }
 
 .temps:before {
@@ -704,15 +700,15 @@ ul.disassembly-list .block-id {
   padding-top: 2px;
 }
 
-div.highlight-gap-instructions [data-instruction-kind="gap"]+span+span {
+div.highlight-gap-instructions [data-instruction-kind="gap"] + span + span {
   background-color: #FAEEEE;
 }
 
-div.highlight-gap-instructions [data-instruction-kind="arch"]+span+span {
+div.highlight-gap-instructions [data-instruction-kind="arch"] + span + span {
   background-color: #EEFFEE;
 }
 
-div.highlight-gap-instructions [data-instruction-kind="condition"]+span+span {
+div.highlight-gap-instructions [data-instruction-kind="condition"] + span + span {
   background-color: #FFFFEE;
 }
 

tools/turbolizer/index.html

@@ -7,44 +7,43 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
 <head>
   <meta charset="utf-8">
   <title>V8 Turbolizer</title>
-  <link rel="stylesheet" href="turbo-visualizer.css">
-  <link rel="stylesheet" href="turbo-visualizer-ranges.css">
-  <link rel="stylesheet" href="tabs.css">
-  <link rel="icon" type="image/png" href="turbolizer.png">
+  <link rel="stylesheet" href="css/turbo-visualizer.css">
+  <link rel="stylesheet" href="css/turbo-visualizer-ranges.css">
+  <link rel="stylesheet" href="css/tabs.css">
+  <link rel="icon" href="turbolizer.png">
 </head>
 
 <body>
   <div id="left" class="content"></div>
   <div id="resizer-left" class="resizer"></div>
   <div id="middle">
-
     <div id="load-file">
-      <input id="upload-helper" type="file">
-      <input id="upload" type="image" title="load graph" class="button-input" src="upload-icon.png" alt="upload graph">
+      <input type="file" id="upload-helper">
+      <input type="image" id="upload" class="button-input" title="load graph" src="img/upload-icon.png" alt="upload graph">
     </div>
     <div id="resizer-ranges" class="resizer" style="visibility:hidden;"></div>
     <div id="ranges" class="content" style="visibility:hidden;"></div>
-    <div id="show-hide-ranges" class="show-hide-pane" style="visibility: hidden">
-      <input id="ranges-expand-vert" type="image" title="show ranges" src="up-arrow.png" class="button-input invisible">
-      <input id="ranges-shrink-vert" type="image" title="hide ranges" src="down-arrow.png" class="button-input">
-      <input id="ranges-expand-hor" type="image" title="show ranges" src="left-arrow.png" class="button-input invisible">
-      <input id="ranges-shrink-hor" type="image" title="hide ranges" src="right-arrow.png" class="button-input invisible">
+    <div id="show-hide-ranges" class="show-hide-pane" style="visibility: hidden;">
+      <input type="image" id="ranges-expand-vert" class="button-input invisible" title="show ranges" src="img/arrows/up-arrow.png">
+      <input type="image" id="ranges-shrink-vert" class="button-input" title="hide ranges" src="img/arrows/down-arrow.png">
+      <input type="image" id="ranges-expand-hor" class="button-input invisible" title="show ranges" src="img/arrows/left-arrow.png">
+      <input type="image" id="ranges-shrink-hor" class="button-input invisible" title="hide ranges" src="img/arrows/right-arrow.png">
     </div>
   </div>
   <div id="resizer-right" class="resizer"></div>
   <div id="right" class="content"></div>
   <div id="show-hide-source" class="show-hide-pane">
-    <input id="source-expand" type="image" title="show source" src="right-arrow.png" class="button-input invisible">
-    <input id="source-shrink" type="image" title="hide source" src="left-arrow.png" class="button-input">
+    <input type="image" id="source-expand" class="button-input invisible" title="show source" src="img/arrows/right-arrow.png">
+    <input type="image" id="source-shrink" class="button-input" title="hide source" src="img/arrows/left-arrow.png">
   </div>
   <div id="show-hide-disassembly" class="show-hide-pane">
-    <input id="disassembly-expand" type="image" title="show disassembly" src="left-arrow.png" class="button-input invisible">
-    <input id="disassembly-shrink" type="image" title="hide disassembly" src="right-arrow.png" class="button-input">
+    <input type="image" id="disassembly-expand" class="button-input invisible" title="show disassembly" src="img/arrows/left-arrow.png">
+    <input type="image" id="disassembly-shrink" class="button-input" title="hide disassembly" src="img/arrows/right-arrow.png">
   </div>
-  <div id="text-placeholder" width="0" height="0" style="position: absolute; top:100000px;">
+  <div id="text-placeholder" style="width: 0; height: 0; position: absolute; top:100000px;">
     <svg>
-      <text text-anchor="right">
-        <tspan white-space="inherit" id="text-measure">
+      <text style="text-anchor: end;">
+        <tspan id="text-measure" style="white-space: inherit;"></tspan>
       </text>
     </svg>
   </div>

tools/turbolizer/info-view.html

@@ -1,5 +1,5 @@
 <div>This is view contains hints about available keyboard shortcuts.</div>
-<div class="info-topic" id="info-global">
+<div id="info-global" class="info-topic">
   <div class="info-topic-header">Global shortcuts</div>
   <div class="info-topic-content">
     <table>
@@ -14,7 +14,7 @@
     </table>
   </div>
 </div>
-<div class="info-topic" id="info-graph-view">
+<div id="info-graph-view" class="info-topic">
   <div class="info-topic-header">Graph view</div>
   <div class="info-topic-content">
     <table>
@@ -57,7 +57,7 @@
     </table>
   </div>
 </div>
-<div class="info-topic" id="info-graph-nodes">
+<div id="info-graph-nodes" class="info-topic">
   <div class="info-topic-header">TurboFan graph nodes</div>
   <div class="info-topic-content">
     <div>The following commands transform node selections, i.e. each operation will be applied
@@ -95,7 +95,7 @@
     </table>
   </div>
 </div>
-<div class="info-topic" id="info-graph-search">
+<div id="info-graph-search" class="info-topic">
   <div class="info-topic-header">Graph search</div>
   <div class="info-topic-content">
     <table>
@@ -109,9 +109,7 @@
         <td>Select nodes according to regular expression, always including invisible nodes regardless of checkbox.</td>
       </tr>
     </table>
-    <div style="font-weight: bold">
-      Useful patterns
-    </div>
+    <div style="font-weight: bold;">Useful patterns</div>
     <table>
       <tr>
         <td>IfTrue</td>

tools/turbolizer/rollup.config.js

@@ -4,8 +4,7 @@
 
 import typescript from 'rollup-plugin-typescript2';
 import node from 'rollup-plugin-node-resolve';
-
-import path from 'path'
+import path from 'path';
 
 const onwarn = warning => {
   // Silence circular dependency warning for moment package

tools/turbolizer/src/graph-view.ts

@@ -239,7 +239,7 @@ export class GraphView extends PhaseView {
       input.setAttribute("id", id);
       input.setAttribute("type", "image");
       input.setAttribute("title", title);
-      input.setAttribute("src", `img/${id}-icon.png`);
+      input.setAttribute("src", `img/toolbox/${id}-icon.png`);
       input.className = "button-input graph-toolbox-item";
       input.addEventListener("click", onClick);
       return input;

tools/turbolizer/tabs.css

@@ -1,57 +0,0 @@
-.content {
-    display: grid;
-    grid-template-areas:
-        "tabs"
-        "window";
-    grid-template-columns: 1fr;
-    grid-template-rows: auto 1fr;
-    min-height: calc(100vh);
-}
-
-.nav-tabs-container {
-    grid-area: tabs;
-    padding: 0px;
-    background-color: #999999;
-    border-bottom: 4px solid #CCCCCC;
-}
-
-.tab-content {
-    grid-area: window;
-    background-color: white;
-    padding: 0px;
-    display:none;
-}
-
-.tab-content.tab-default {
-    display: block;
-}
-
-ul.nav-tabs {
-    padding: 0px;
-    margin: 0px;
-    overflow: auto;
-    display: table-row;
-    min-height: 2ex;
-}
-
-.nav-tabs li {
-    display: inline-block;
-    padding-left: 10px;
-    padding-right: 10px;
-    padding-top: 4px;
-    padding-bottom: 4px;
-    min-width: 20px;
-    text-decoration: none;
-    color: black;
-    text-align: center;
-    user-select: none;
-    cursor: pointer;
-}
-
-.nav-tabs li:hover {
-    background-color: #EEEEEE;
-}
-
-.nav-tabs li.active {
-    background-color: #CCCCCC;
-}

tools/turbolizer/tsconfig.test.json

@@ -1,6 +1,6 @@
 {
-    "extends": "./tsconfig.json",
-    "compilerOptions": {
-        "module": "commonjs"
-    }
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "commonjs"
+  }
 }