Skip to content

V
V8
Commit 43d588cc authored by Sigurd Schneider's avatar Sigurd Schneider Committed by Commit Bot
Browse files
Options

[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: 's avatarDaniel Clifford <danno@chromium.org>
Cr-Commit-Position: refs/heads/master@{#50523}
parent 73ba170a
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 290 additions and 174 deletions
tools/turbolizer/code-view.js
View file @ 43d588cc
...@@ -164,8 +164,6 @@ class CodeView extends View { ...@@ -164,8 +164,6 @@ class CodeView extends View {
} }
} }
} }
view.resizeToParent();
} }
deleteContent() {} deleteContent() {}
......
tools/turbolizer/graph-view.js
View file @ 43d588cc
...@@ -706,6 +706,7 @@ class GraphView extends View { ...@@ -706,6 +706,7 @@ class GraphView extends View {
.on("mousedown", function(d){ .on("mousedown", function(d){
graph.pathMouseDown.call(graph, d3.select(this), d); graph.pathMouseDown.call(graph, d3.select(this), d);
}) })
.attr("adjacentToHover", "false");
// Set the correct styles on all of the paths // Set the correct styles on all of the paths
visibleEdges.classed('value', function(e) { visibleEdges.classed('value', function(e) {
...@@ -740,7 +741,8 @@ class GraphView extends View { ...@@ -740,7 +741,8 @@ class GraphView extends View {
var newGs = graph.visibleNodes.enter() var newGs = graph.visibleNodes.enter()
.append("g"); .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("live", function(n) { return n.isLive(); })
.classed("dead", function(n) { return !n.isLive(); }) .classed("dead", function(n) { return !n.isLive(); })
.classed("javascript", function(n) { return n.isJavaScript(); }) .classed("javascript", function(n) { return n.isJavaScript(); })
...@@ -754,6 +756,34 @@ class GraphView extends View { ...@@ -754,6 +756,34 @@ class GraphView extends View {
.on("mouseup", function(d){ .on("mouseup", function(d){
graph.nodeMouseUp.call(graph, d3.select(this), 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); .call(graph.drag);
newGs.append("rect") newGs.append("rect")
......
tools/turbolizer/index.html
View file @ 43d588cc
...@@ -4,13 +4,14 @@ ...@@ -4,13 +4,14 @@
<title>Turbolizer</title> <title>Turbolizer</title>
<link rel="stylesheet" href="turbo-visualizer.css" /> <link rel="stylesheet" href="turbo-visualizer.css" />
</head> </head>
<body width="100%"> <body>
<div id="left"> <div id="left">
<div id='source-text'> <div id='source-text'>
<pre id='source-text-pre'\> <pre id='source-text-pre'\>
</div> </div>
</div> </div>
<div id="middle"> <div class="resizer-left"></div>
<div id="middle" class="resizable-pane">
<div id="graph-toolbox-anchor"> <div id="graph-toolbox-anchor">
<span id="graph-toolbox"> <span id="graph-toolbox">
<input id="layout" type="image" title="layout graph" src="layout-icon.png" <input id="layout" type="image" title="layout graph" src="layout-icon.png"
...@@ -47,12 +48,13 @@ ...@@ -47,12 +48,13 @@
<pre id="schedule-text-pre" class='prettyprint prettyprinted'> <pre id="schedule-text-pre" class='prettyprint prettyprinted'>
<ul id="schedule-list" class='nolinenums noindent'> <ul id="schedule-list" class='nolinenums noindent'>
</ul> </ul>
</pre> </pre>
</div> </div>
<div id='text-placeholder' width="0px" height="0px" style="position: absolute; top:100000px;" ><svg><text text-anchor="right"> <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"/> <tspan white-space="inherit" id="text-measure"/>
</text></svg></div> </text></svg></div>
</div> </div>
<div class="resizer-right"></div>
<div id="right"> <div id="right">
<div id='disassembly'> <div id='disassembly'>
<pre id='disassembly-text-pre' class='prettyprint prettyprinted'> <pre id='disassembly-text-pre' class='prettyprint prettyprinted'>
...@@ -63,15 +65,15 @@ ...@@ -63,15 +65,15 @@
</div> </div>
<div id="source-collapse" class="collapse-pane"> <div id="source-collapse" class="collapse-pane">
<input id="source-expand" type="image" title="show source" <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" <input id="source-shrink" type="image" title="hide source"
src="left-arrow.png" class="button-input"> src="left-arrow.png" class="button-input">
</div> </div>
<div id="disassembly-collapse" class="collapse-pane"> <div id="disassembly-collapse" class="collapse-pane">
<input id="disassembly-expand" type="image" title="show disassembly" <input id="disassembly-expand" type="image" title="show disassembly"
src="left-arrow.png" class="button-input"> src="left-arrow.png" class="button-input invisible">
<input id="disassembly-shrink" type="image" title="hide disassembly" <input id="disassembly-shrink" type="image" title="hide disassembly"
src="right-arrow.png" class="button-input-invisible"> src="right-arrow.png" class="button-input">
</div> </div>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script> <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> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
......
tools/turbolizer/turbo-visualizer.css
View file @ 43d588cc
...@@ -41,10 +41,8 @@ ...@@ -41,10 +41,8 @@
outline: none; outline: none;
} }
.button-input-invisible { .invisible {
vertical-align: middle; display: none;
width: 0px;
visibility: hidden;
} }
...@@ -57,9 +55,12 @@ ...@@ -57,9 +55,12 @@
!important !important
} }
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
height: 100vh;
width: 100vw;
overflow:hidden; overflow:hidden;
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
...@@ -69,8 +70,8 @@ body { ...@@ -69,8 +70,8 @@ body {
user-select: none; user-select: none;
} }
p { p {
text-align: center; text-align: center;
overflow: overlay; overflow: overlay;
position: relative; position: relative;
} }
...@@ -97,21 +98,47 @@ div.scrollable { ...@@ -97,21 +98,47 @@ div.scrollable {
overflow-y: _croll; overflow-x: hidden; 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; fill: #EFCC00;
stroke: #080808; stroke: #080808;
stroke-width: 5px; stroke-width: 5px;
} }
g.javascript rect { g.javascript rect {
fill: #DD7E6B; fill: #DD7E6B;
} }
g.simplified rect { g.simplified rect {
fill: #3C78D8; fill: #3C78D8;
} }
g.machine rect { g.machine rect {
fill: #6AA84F; fill: #6AA84F;
} }
...@@ -156,47 +183,14 @@ circle.halfFilledBubbleStyle:hover { ...@@ -156,47 +183,14 @@ circle.halfFilledBubbleStyle:hover {
stroke-width: 3px; stroke-width: 3px;
} }
path.effect { path {
fill: none; fill: none;
stroke: #080808; stroke: #080808;
stroke-width: 4px; stroke-width: 4px;
cursor: default; cursor: default;
} }
path.effect:hover { path: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; stroke-width: 6px;
} }
...@@ -246,33 +240,20 @@ span.linkable-text:hover { ...@@ -246,33 +240,20 @@ span.linkable-text:hover {
font-weight: bold; font-weight: bold;
} }
#left { #left {
float: left; height: 100%; background-color: #FFFFFF; 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 { #middle {
float:left; height: 100%; background-color: #F8F8F8; 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;
} }
#right { #right {
float: right; background-color: #FFFFFF; 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;
} }
#disassembly-collapse { #disassembly-collapse {
right: 0; right: 0;
} }
...@@ -288,7 +269,7 @@ span.linkable-text:hover { ...@@ -288,7 +269,7 @@ span.linkable-text:hover {
#graph-toolbox { #graph-toolbox {
position: relative; position: relative;
top: 1em; top: 1em;
left: 0.7em; left: 25px;
border: 2px solid #eee8d5; border: 2px solid #eee8d5;
border-radius: 5px; border-radius: 5px;
padding: 0.7em; padding: 0.7em;
...@@ -337,4 +318,44 @@ tspan { ...@@ -337,4 +318,44 @@ tspan {
text { text {
dominant-baseline: text-before-edge; 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
tools/turbolizer/turbo-visualizer.js
View file @ 43d588cc
This diff is collapsed.
tools/turbolizer/view.js
View file @ 43d588cc
...@@ -18,21 +18,9 @@ class View { ...@@ -18,21 +18,9 @@ class View {
show(data, rememberedSelection) { show(data, rememberedSelection) {
this.parentNode.appendChild(this.divElement[0][0]); this.parentNode.appendChild(this.divElement[0][0]);
this.initializeContent(data, rememberedSelection); this.initializeContent(data, rememberedSelection);
this.resizeToParent();
this.divElement.attr(VISIBILITY, 'visible'); 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() { hide() {
this.divElement.attr(VISIBILITY, 'hidden'); this.divElement.attr(VISIBILITY, 'hidden');
this.deleteContent(); this.deleteContent();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment