Add a html-based visualizer for TurboFan graphs

tools/turbolizer/turbo-visualizer.css

Index: tools/turbolizer/turbo-visualizer.css
diff --git a/tools/turbolizer/turbo-visualizer.css b/tools/turbolizer/turbo-visualizer.css
new file mode 100644
index 0000000000000000000000000000000000000000..4f7190c23bd0f46a797b2d75ef0c533c756b9caf
--- /dev/null
+++ b/tools/turbolizer/turbo-visualizer.css
@@ -0,0 +1,326 @@
+.visible-transition {
+    transition-delay: 0s;
+    transition-duration: 1s;
+    transition-property: all;
+    transition-timing-function: ease;
+}
+
+.collapse-pane {
+    background: #A0A0A0;
+    bottom: 0;
+    position: absolute;
+    margin-bottom: 0.5em;
+    margin-right: 0.5em;
+    margin-left: 0.5em;
+    border-radius: 5px;
+    padding: 0.5em;
+    z-index: 5;
+    opacity: 0.7;
+}
+
+.search-input {
+    vertical-align: middle;
+    width: 145px;
+    opacity: 1;
+}
+
+.button-input {
+    vertical-align: middle;
+    width: 24px;
+    opacity: 0.4;
+    cursor: pointer;
+}
+
+.button-input-toggled {
+    border-radius: 5px;
+    background-color: #505050;
+}
+
+.button-input:focus {
+    outline: none;
+}
+
+.button-input-invisible {
+    vertical-align: middle;
+    width: 0px;
+    visibility: hidden;
+}
+
+
+.selected {
+    background-color: #FFFF33;
+}
+
+.prettyprint ol.linenums > li {
+    list-style-type: decimal;
+    !important
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    overflow:hidden;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+p { 
+    text-align: center; 
+    overflow: overlay;
+    position: relative;
+}
+
+marker {
+    fill: #080808;
+}
+
+g rect {
+    fill: #F0F0F0;
+    stroke: #080808;
+    stroke-width: 2px;
+}
+
+g.unsorted rect {
+    opacity: 0.5;
+}
+
+div.scrollable {
+    overflow-y: _croll; overflow-x: hidden;
+}
+
+g.control rect { 
+    fill: #EFCC00;
+    stroke: #080808;
+    stroke-width: 5px;
+}
+
+g.javascript rect { 
+    fill: #DD7E6B;
+}
+
+g.simplified rect { 
+    fill: #3C78D8;
+}
+
+g.machine rect { 
+    fill: #6AA84F;
+}
+
+g.input rect {
+    fill: #CFE2F3;
+}
+
+g.selected rect {
+    fill: #FFFF33;
+}
+
+circle.bubbleStyle {
+    fill: #080808;
+    fill-opacity: 0.0;
+    stroke: #080808;
+    stroke-width: 2px;
+}
+
+circle.bubbleStyle:hover {
+    stroke-width: 3px;
+}
+
+circle.filledBubbleStyle {
+    fill: #080808;
+    stroke: #080808;
+    stroke-width: 2px;
+}
+
+circle.filledBubbleStyle:hover {
+    fill: #080808;
+    stroke-width: 3px;
+}
+
+circle.halfFilledBubbleStyle {
+    fill: #808080;
+    stroke: #101010;
+    stroke-width: 2px;
+}
+
+circle.halfFilledBubbleStyle:hover {
+    fill: #808080;
+    stroke-width: 3px;
+}
+
+path.effect {
+    fill: none;
+    stroke: #080808;
+    stroke-width: 4px;
+    cursor: default;
+}
+
+path.effect:hover {
+    stroke-width: 6px;
+}
+
+path.control {
+    fill: none;
+    stroke: #080808;
+    stroke-width: 4px;
+    cursor: default;
+}
+
+path.control:hover {
+    stroke-width: 6px;
+}
+
+path.value {
+    fill: none;
+    stroke: #888888;
+    stroke-width: 4px;
+    cursor: default;
+}
+
+path.value:hover {
+    stroke-width: 6px;
+}
+
+path.frame-state {
+    fill: none;
+    stroke: #080808;
+    stroke-width: 4px;
+    cursor: default;
+}
+
+path.frame-state:hover{
+    stroke-width: 6px;
+}
+
+path.hidden {
+    fill: none;
+    stroke-width: 0;
+}
+
+path.link.selected {
+    stroke: #FFFF33;
+}
+
+pre.prettyprint {
+  border: none !important;
+  padding: 0px;
+}
+
+li.L1,
+li.L3,
+li.L5,
+li.L7,
+li.L9 {
+    background: none !important
+}
+
+li.nolinenums {
+  list-style-type:none;
+}
+
+ul.noindent {
+  -webkit-padding-start: 0px;
+  -webkit-margin-before: 0px;
+  -webkit-margin-after: 0px;
+}
+
+input:hover {
+    opacity: 1;
+    cursor: pointer;
+}
+
+span.linkable-text {
+    text-decoration: underline;
+}
+
+span.linkable-text:hover {
+    cursor: pointer;
+    font-weight: bold;
+}
+
+#left {
+    float: left; height: 100%; background-color: #FFFFFF;
+    -webkit-transition: all 1s ease-in-out;
+    -moz-transition: all 1s ease-in-out;
+    -o-transition: all 1s ease-in-out;
+    transition: all 1s ease-in-out;
+    transition-property: width;
+    transition-duration: 1s, 1s;
+}
+
+#middle {
+    float:left; height: 100%; background-color: #F8F8F8; 
+    -webkit-transition: all 1s ease-in-out;
+    -moz-transition: all 1s ease-in-out;
+    -o-transition: all 1s ease-in-out;
+    transition: all 1s ease-in-out;
+    transition-property: width;
+    transition-duration: 1s, 1s;
+}
+
+#right {
+    float: right; background-color: #FFFFFF; 
+    -webkit-transition: all 1s ease-in-out;
+    -moz-transition: all 1s ease-in-out;
+    -o-transition: all 1s ease-in-out;
+    transition: all 1s ease-in-out;
+    transition-property: width;
+    transition-duration: 1s, 1s;
+}
+
+#disassembly-collapse {
+    right: 0;
+}
+
+#source-collapse {
+    left: 0;
+}
+
+#graph-toolbox {
+    position: relative;
+    top: 1em;
+    left: 0.7em;
+    border: 2px solid #eee8d5;
+    border-radius: 5px;
+    padding: 0.7em;
+    z-index: 5;
+}
+
+#disassembly-collapse {
+    right: 0;
+}
+
+#source-collapse {
+    left: 0;
+}
+
+#graph-toolbox {
+    position: relative;
+    top: 1em;
+    left: 0.7em;
+    border: 2px solid #eee8d5;
+    border-radius: 5px;
+    padding: 0.7em;
+    z-index: 5;
+}
+
+#load-file {
+    background: #A0A0A0;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin-top: 0.5em;
+    margin-right: 0.5em;
+    border-radius: 5px;
+    padding: 0.5em;
+    z-index: 5;
+    opacity: 0.7;
+}
+
+#hidden-file-upload{
+    display: none;
+}
+