[turbolizer] Eye candy that helps readability

- Turbolizer highlights input and output nodes on hover. - The three panes support resizing now (snap to side still works). Bug: Change-Id: Ida1513fd714a02ab772885ea1fdf6d9da8d540f6 Reviewed-on: https://chromium-review.googlesource.com/837068 Commit-Queue: Sigurd Schneider <sigurds@chromium.org> Reviewed-by: Daniel Clifford <danno@chromium.org> Cr-Commit-Position: refs/heads/master@{#50523}

[turbolizer] Eye candy that helps readability
- Turbolizer highlights input and output nodes on hover. - The three panes support resizing now (snap to side still works). Bug: Change-Id: Ida1513fd714a02ab772885ea1fdf6d9da8d540f6 Reviewed-on: https://chromium-review.googlesource.com/837068 Commit-Queue: Sigurd Schneider <sigurds@chromium.org> Reviewed-by: Daniel Clifford <danno@chromium.org> Cr-Commit-Position: refs/heads/master@{#50523}
43d588cc · Sigurd Schneider · Commit Bot · 73ba170a · 43d588cc · 43d588cc
Commit 43d588cc authored Jan 12, 2018 by Sigurd Schneider Committed by Commit Bot Jan 12, 2018
6 changed files
--- a/tools/turbolizer/code-view.js
+++ b/tools/turbolizer/code-view.js
@@ -164,8 +164,6 @@ class CodeView extends View {
        }
      }
    }
-
-    view.resizeToParent();
  }

  deleteContent() {}

--- a/tools/turbolizer/graph-view.js
+++ b/tools/turbolizer/graph-view.js
@@ -706,6 +706,7 @@ class GraphView extends View {
      .on("mousedown", function(d){
        graph.pathMouseDown.call(graph, d3.select(this), d);
      })
+      .attr("adjacentToHover", "false");

    // Set the correct styles on all of the paths
    visibleEdges.classed('value', function(e) {
@@ -740,7 +741,8 @@ class GraphView extends View {
    var newGs = graph.visibleNodes.enter()
      .append("g");

-    newGs.classed("control", function(n) { return n.isControl(); })
+    newGs.classed("turbonode", function(n) { return true; })
+      .classed("control", function(n) { return n.isControl(); })
      .classed("live", function(n) { return n.isLive(); })
      .classed("dead", function(n) { return !n.isLive(); })
      .classed("javascript", function(n) { return n.isJavaScript(); })
@@ -754,6 +756,34 @@ class GraphView extends View {
      .on("mouseup", function(d){
        graph.nodeMouseUp.call(graph, d3.select(this), d);
      })
+      .on('mouseover', function(d){
+        var nodeSelection = d3.select(this);
+        let node = graph.nodeMap[d.id];
+        let adjInputEdges = graph.visibleEdges.filter(e => { return e.target === node; });
+        let adjOutputEdges = graph.visibleEdges.filter(e => { return e.source === node; });
+        adjInputEdges.attr('relToHover', "input");
+        adjOutputEdges.attr('relToHover', "output");
+        let adjInputNodes = adjInputEdges.data().map(e => e.source);
+        graph.visibleNodes.data(adjInputNodes, function(d) {
+          return d.id;
+        }).attr('relToHover', "input");
+        let adjOutputNodes = adjOutputEdges.data().map(e => e.target);
+        graph.visibleNodes.data(adjOutputNodes, function(d) {
+          return d.id;
+        }).attr('relToHover', "output");
+        graph.updateGraphVisibility();
+      })
+      .on('mouseout', function(d){
+        var nodeSelection = d3.select(this);
+        let node = graph.nodeMap[d.id];
+        let adjEdges = graph.visibleEdges.filter(e => { return e.target === node  || e.source === node; });
+        adjEdges.attr('relToHover', "none");
+        let adjNodes = adjEdges.data().map(e => e.target).concat(adjEdges.data().map(e => e.source));
+        let nodes = graph.visibleNodes.data(adjNodes, function(d) {
+          return d.id;
+        }).attr('relToHover', "none");
+        graph.updateGraphVisibility();
+      })
      .call(graph.drag);

    newGs.append("rect")

--- a/tools/turbolizer/index.html
+++ b/tools/turbolizer/index.html
@@ -4,13 +4,14 @@
    <title>Turbolizer</title>
    <link rel="stylesheet" href="turbo-visualizer.css" />
  </head>
-  <body width="100%">
+  <body>
    <div id="left">
      <div id='source-text'>
        <pre id='source-text-pre'\>
      </div>
    </div>
-    <div id="middle">
+    <div class="resizer-left"></div>
+    <div id="middle" class="resizable-pane">
      <div id="graph-toolbox-anchor">
        <span id="graph-toolbox">
          <input id="layout" type="image" title="layout graph" src="layout-icon.png"
@@ -47,12 +48,13 @@
        <pre id="schedule-text-pre" class='prettyprint prettyprinted'>
          <ul id="schedule-list" class='nolinenums noindent'>
          </ul>
-        </pre>        
+        </pre>
      </div>
      <div id='text-placeholder' width="0px" height="0px" style="position: absolute; top:100000px;" ><svg><text text-anchor="right">
          <tspan white-space="inherit" id="text-measure"/>
      </text></svg></div>
    </div>
+    <div class="resizer-right"></div>
    <div id="right">
      <div id='disassembly'>
        <pre id='disassembly-text-pre' class='prettyprint prettyprinted'>
@@ -63,15 +65,15 @@
    </div>
    <div id="source-collapse" class="collapse-pane">
      <input id="source-expand" type="image" title="show source"
-             src="right-arrow.png" class="button-input-invisible">
+             src="right-arrow.png" class="button-input invisible">
      <input id="source-shrink" type="image" title="hide source"
             src="left-arrow.png" class="button-input">
    </div>
    <div id="disassembly-collapse" class="collapse-pane">
      <input id="disassembly-expand" type="image" title="show disassembly"
-             src="left-arrow.png" class="button-input">
-      <input id="disassembly-shrink" type="image" title="hide disassembly" 
-             src="right-arrow.png" class="button-input-invisible">
+             src="left-arrow.png" class="button-input invisible">
+      <input id="disassembly-shrink" type="image" title="hide disassembly"
+             src="right-arrow.png" class="button-input">
    </div>
    <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

--- a/tools/turbolizer/turbo-visualizer.css
+++ b/tools/turbolizer/turbo-visualizer.css
@@ -41,10 +41,8 @@
    outline: none;
 }

-.button-input-invisible {
-    vertical-align: middle;
-    width: 0px;
-    visibility: hidden;
+.invisible {
+    display: none;
 }


@@ -57,9 +55,12 @@
    !important
 }

+
 body {
    margin: 0;
    padding: 0;
+    height: 100vh;
+    width: 100vw;
    overflow:hidden;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
@@ -69,8 +70,8 @@ body {
    user-select: none;
 }

-p { 
-    text-align: center; 
+p {
+    text-align: center;
    overflow: overlay;
    position: relative;
 }
@@ -97,21 +98,47 @@ div.scrollable {
    overflow-y: _croll; overflow-x: hidden;
 }

-g.control rect { 
+g.turbonode[relToHover="input"] rect {
+    stroke: #67e62c;
+    stroke-width: 16px;
+}
+
+g.turbonode[relToHover="output"] rect {
+    stroke: #d23b14;
+    stroke-width: 16px;
+}
+
+path[relToHover="input"] {
+    stroke: #67e62c;
+    stroke-width: 16px;
+}
+
+path[relToHover="output"] {
+    stroke: #d23b14;
+    stroke-width: 16px;
+}
+
+
+g.turbonode:hover rect {
+  stroke: #000000;
+  stroke-width: 7px;
+}
+
+g.control rect {
    fill: #EFCC00;
    stroke: #080808;
    stroke-width: 5px;
 }

-g.javascript rect { 
+g.javascript rect {
    fill: #DD7E6B;
 }

-g.simplified rect { 
+g.simplified rect {
    fill: #3C78D8;
 }

-g.machine rect { 
+g.machine rect {
    fill: #6AA84F;
 }

@@ -156,47 +183,14 @@ circle.halfFilledBubbleStyle:hover {
    stroke-width: 3px;
 }

-path.effect {
+path {
    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{
+path:hover {
    stroke-width: 6px;
 }

@@ -246,33 +240,20 @@ span.linkable-text:hover {
    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 .3s ease-in-out;
-    transition-property: width;
 }

 #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 .3s ease-in-out;
-    transition-property: width;
+    float:left; height: 100%; background-color: #F8F8F8;
 }

 #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 .3s ease-in-out;
-    transition-property: width;
+    float: right; background-color: #FFFFFF;
 }

+
 #disassembly-collapse {
    right: 0;
 }
@@ -288,7 +269,7 @@ span.linkable-text:hover {
 #graph-toolbox {
    position: relative;
    top: 1em;
-    left: 0.7em;
+    left: 25px;
    border: 2px solid #eee8d5;
    border-radius: 5px;
    padding: 0.7em;
@@ -337,4 +318,44 @@ tspan {

 text {
    dominant-baseline: text-before-edge;
+}
+
+.resizer-left {
+    position:absolute;
+    width: 4px;
+    height:100%;
+    background: #a0a0a0;
+    cursor: pointer;
+}
+
+.resizer-left.snapped {
+    width: 12px;
+}
+
+.resizer-left:hover {
+    background: orange;
+}
+
+.resizer-left.dragged {
+    background: orange;
+}
+
+.resizer-right {
+    position:absolute;
+    width: 4px;
+    height:100%;
+    background: #a0a0a0;
+    cursor: pointer;
+}
+
+.resizer-right.snapped {
+    width: 12px;
+}
+
+.resizer-right:hover {
+    background: orange;
+}
+
+.resizer-right.dragged {
+    background: orange;
 }
\ No newline at end of file
--- a/tools/turbolizer/turbo-visualizer.js
+++ b/tools/turbolizer/turbo-visualizer.js
--- a/tools/turbolizer/view.js
+++ b/tools/turbolizer/view.js
@@ -18,21 +18,9 @@ class View {
  show(data, rememberedSelection) {
    this.parentNode.appendChild(this.divElement[0][0]);
    this.initializeContent(data, rememberedSelection);
-    this.resizeToParent();
    this.divElement.attr(VISIBILITY, 'visible');
  }

-  resizeToParent() {
-    var view = this;
-    var documentElement = document.documentElement;
-    var y;
-    if (this.parentNode.clientHeight)
-      y = Math.max(this.parentNode.clientHeight, documentElement.clientHeight);
-    else
-      y = documentElement.clientHeight;
-    this.parentNode.style.height = y + 'px';
-  }
-
  hide() {
    this.divElement.attr(VISIBILITY, 'hidden');
    this.deleteContent();