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
Show 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"
...@@ -53,6 +54,7 @@ ...@@ -53,6 +54,7 @@
<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;
...@@ -97,6 +98,32 @@ div.scrollable { ...@@ -97,6 +98,32 @@ div.scrollable {
overflow-y: _croll; overflow-x: hidden; overflow-y: _croll; overflow-x: hidden;
} }
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 { g.control rect {
fill: #EFCC00; fill: #EFCC00;
stroke: #080808; stroke: #080808;
...@@ -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;
...@@ -338,3 +319,43 @@ tspan { ...@@ -338,3 +319,43 @@ 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
// Copyright 2014 the V8 project authors. All rights reserved. // Copyright 2017 the V8 project authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be // Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file. // found in the LICENSE file.
document.onload = (function(d3){ class Snapper {
"use strict";
var jsonObj;
var sourceExpandClassList = document.getElementById(SOURCE_EXPAND_ID).classList;
var sourceCollapseClassList = document.getElementById(SOURCE_COLLAPSE_ID).classList;
var sourceExpanded = sourceCollapseClassList.contains(COLLAPSE_PANE_BUTTON_VISIBLE);
var disassemblyExpandClassList = document.getElementById(DISASSEMBLY_EXPAND_ID).classList;
var disassemblyCollapseClassList = document.getElementById(DISASSEMBLY_COLLAPSE_ID).classList;
var disassemblyExpanded = disassemblyCollapseClassList.contains(COLLAPSE_PANE_BUTTON_VISIBLE);
var svg = null;
var graph = null;
var schedule = null;
var empty = null;
var currentPhaseView = null;
var disassemblyView = null;
var sourceView = null;
var selectionBroker = null;
function updatePanes() { constructor(resizer) {
if (sourceExpanded) { let snapper = this;
if (disassemblyExpanded) { snapper.resizer = resizer;
d3.select("#" + SOURCE_PANE_ID).style(WIDTH, "30%"); snapper.sourceExpand = d3.select("#" + SOURCE_EXPAND_ID);
d3.select("#" + INTERMEDIATE_PANE_ID).style(WIDTH, "40%"); snapper.sourceCollapse = d3.select("#" + SOURCE_COLLAPSE_ID);
d3.select("#" + GENERATED_PANE_ID).style(WIDTH, "30%"); snapper.disassemblyExpand = d3.select("#" + DISASSEMBLY_EXPAND_ID);
} else { snapper.disassemblyCollapse = d3.select("#" + DISASSEMBLY_COLLAPSE_ID);
d3.select("#" + SOURCE_PANE_ID).style(WIDTH, "50%");
d3.select("#" + INTERMEDIATE_PANE_ID).style(WIDTH, "50%"); d3.select("#source-collapse").on("click", function(){
d3.select("#" + GENERATED_PANE_ID).style(WIDTH, "0%"); resizer.snapper.toggleSourceExpanded();
} });
} else { d3.select("#disassembly-collapse").on("click", function(){
if (disassemblyExpanded) { resizer.snapper.toggleDisassemblyExpanded();
d3.select("#" + SOURCE_PANE_ID).style(WIDTH, "0%"); });
d3.select("#" + INTERMEDIATE_PANE_ID).style(WIDTH, "50%");
d3.select("#" + GENERATED_PANE_ID).style(WIDTH, "50%");
} else {
d3.select("#" + SOURCE_PANE_ID).style(WIDTH, "0%");
d3.select("#" + INTERMEDIATE_PANE_ID).style(WIDTH, "100%");
d3.select("#" + GENERATED_PANE_ID).style(WIDTH, "0%");
}
}
} }
function getLastExpandedState(type, default_state) { getLastExpandedState(type, default_state) {
var state = window.sessionStorage.getItem("expandedState-"+type); var state = window.sessionStorage.getItem("expandedState-"+type);
if (state === null) return default_state; if (state === null) return default_state;
return state === 'true'; return state === 'true';
} }
function setLastExpandedState(type, state) { setLastExpandedState(type, state) {
window.sessionStorage.setItem("expandedState-"+type, state); window.sessionStorage.setItem("expandedState-"+type, state);
} }
function toggleSourceExpanded() { toggleSourceExpanded() {
setSourceExpanded(!sourceExpanded); this.setSourceExpanded(!this.sourceExpand.classed("invisible"));
}
sourceExpandUpdate(newState) {
this.setLastExpandedState("source", newState);
this.sourceExpand.classed("invisible", newState);
this.sourceCollapse.classed("invisible", !newState);
} }
function setSourceExpanded(newState) { setSourceExpanded(newState) {
sourceExpanded = newState; if (this.sourceExpand.classed("invisible") === newState) return;
setLastExpandedState("source", newState); this.sourceExpandUpdate(newState);
updatePanes(); let resizer = this.resizer;
if (newState) { if (newState) {
sourceCollapseClassList.add(COLLAPSE_PANE_BUTTON_VISIBLE); resizer.sep_left = resizer.sep_left_snap;
sourceCollapseClassList.remove(COLLAPSE_PANE_BUTTON_INVISIBLE); resizer.sep_left_snap = 0;
sourceExpandClassList.add(COLLAPSE_PANE_BUTTON_INVISIBLE);
sourceExpandClassList.remove(COLLAPSE_PANE_BUTTON_VISIBLE);
} else { } else {
sourceCollapseClassList.add(COLLAPSE_PANE_BUTTON_INVISIBLE); resizer.sep_left_snap = resizer.sep_left;
sourceCollapseClassList.remove(COLLAPSE_PANE_BUTTON_VISIBLE); resizer.sep_left = 0;
sourceExpandClassList.add(COLLAPSE_PANE_BUTTON_VISIBLE); }
sourceExpandClassList.remove(COLLAPSE_PANE_BUTTON_INVISIBLE); resizer.updatePanes();
} }
toggleDisassemblyExpanded() {
this.setDisassemblyExpanded(!this.disassemblyExpand.classed("invisible"));
} }
function toggleDisassemblyExpanded() { disassemblyExpandUpdate(newState) {
setDisassemblyExpanded(!disassemblyExpanded); this.setLastExpandedState("disassembly", newState);
this.disassemblyExpand.classed("invisible", newState);
this.disassemblyCollapse.classed("invisible", !newState);
} }
function setDisassemblyExpanded(newState) { setDisassemblyExpanded(newState) {
disassemblyExpanded = newState; console.log(newState)
setLastExpandedState("disassembly", newState); if (this.disassemblyExpand.classed("invisible") === newState) return;
updatePanes(); this.disassemblyExpandUpdate(newState);
let resizer = this.resizer;
if (newState) { if (newState) {
disassemblyCollapseClassList.add(COLLAPSE_PANE_BUTTON_VISIBLE); resizer.sep_right = resizer.sep_right_snap;
disassemblyCollapseClassList.remove(COLLAPSE_PANE_BUTTON_INVISIBLE); resizer.sep_right_snap = resizer.client_width;
disassemblyExpandClassList.add(COLLAPSE_PANE_BUTTON_INVISIBLE); console.log("set expand")
disassemblyExpandClassList.remove(COLLAPSE_PANE_BUTTON_VISIBLE);
} else { } else {
disassemblyCollapseClassList.add(COLLAPSE_PANE_BUTTON_INVISIBLE); resizer.sep_right_snap = resizer.sep_right;
disassemblyCollapseClassList.remove(COLLAPSE_PANE_BUTTON_VISIBLE); resizer.sep_right = resizer.client_width;
disassemblyExpandClassList.add(COLLAPSE_PANE_BUTTON_VISIBLE); console.log("set collapse")
disassemblyExpandClassList.remove(COLLAPSE_PANE_BUTTON_INVISIBLE); }
resizer.updatePanes();
}
panesUpated() {
this.sourceExpandUpdate(this.resizer.sep_left > this.resizer.dead_width);
this.disassemblyExpandUpdate(this.resizer.sep_right <
(this.resizer.client_width - this.resizer.dead_width));
} }
}
class Resizer {
constructor(panes_updated_callback, dead_width) {
let resizer = this;
resizer.snapper = new Snapper(resizer)
resizer.panes_updated_callback = panes_updated_callback;
resizer.dead_width = dead_width
resizer.client_width = d3.select("body").node().getBoundingClientRect().width;
resizer.left = d3.select("#" + SOURCE_PANE_ID);
resizer.middle = d3.select("#" + INTERMEDIATE_PANE_ID);
resizer.right = d3.select("#" + GENERATED_PANE_ID);
resizer.resizer_left = d3.select('.resizer-left');
resizer.resizer_right = d3.select('.resizer-right');
resizer.sep_left = resizer.client_width/3;
resizer.sep_right = resizer.client_width/3*2;
resizer.sep_left_snap = 0;
resizer.sep_right_snap = 0;
// Offset to prevent resizers from sliding slightly over one another.
resizer.sep_width_offset = 7;
let dragResizeLeft = d3.behavior.drag()
.on('drag', function() {
let x = d3.mouse(this.parentElement)[0];
resizer.sep_left = Math.min(Math.max(0,x), resizer.sep_right-resizer.sep_width_offset);
resizer.updatePanes();
})
.on('dragstart', function() {
resizer.resizer_left.classed("dragged", true);
let x = d3.mouse(this.parentElement)[0];
if (x > dead_width) {
resizer.sep_left_snap = resizer.sep_left;
}
})
.on('dragend', function() {
resizer.resizer_left.classed("dragged", false);
});
resizer.resizer_left.call(dragResizeLeft);
let dragResizeRight = d3.behavior.drag()
.on('drag', function() {
let x = d3.mouse(this.parentElement)[0];
resizer.sep_right = Math.max(resizer.sep_left+resizer.sep_width_offset, Math.min(x, resizer.client_width));
resizer.updatePanes();
})
.on('dragstart', function() {
resizer.resizer_right.classed("dragged", true);
let x = d3.mouse(this.parentElement)[0];
if (x < (resizer.client_width-dead_width)) {
resizer.sep_right_snap = resizer.sep_right;
}
})
.on('dragend', function() {
resizer.resizer_right.classed("dragged", false);
});;
resizer.resizer_right.call(dragResizeRight);
window.onresize = function(){
resizer.updateWidths();
/*fitPanesToParents();*/
resizer.updatePanes();
};
}
updatePanes() {
let left_snapped = this.sep_left === 0;
let right_snapped = this.sep_right >= this.client_width - 1;
this.resizer_left.classed("snapped", left_snapped);
this.resizer_right.classed("snapped", right_snapped);
this.left.style('width', this.sep_left + 'px');
this.middle.style('width', (this.sep_right-this.sep_left) + 'px');
this.right.style('width', (this.client_width - this.sep_right) + 'px');
this.resizer_left.style('left', this.sep_left + 'px');
this.resizer_right.style('right', (this.client_width - this.sep_right - 1) + 'px');
this.snapper.panesUpated();
this.panes_updated_callback();
}
updateWidths() {
this.client_width = d3.select("body").node().getBoundingClientRect().width;
this.sep_right = Math.min(this.sep_right, this.client_width);
this.sep_left = Math.min(Math.max(0, this.sep_left), this.sep_right);
}
}
document.onload = (function(d3){
"use strict";
var jsonObj;
var svg = null;
var graph = null;
var schedule = null;
var empty = null;
var currentPhaseView = null;
var disassemblyView = null;
var sourceView = null;
var selectionBroker = null;
let resizer = new Resizer(panesUpdatedCallback, 100);
function panesUpdatedCallback() {
graph.fitGraphViewToWindow();
} }
function hideCurrentPhase() { function hideCurrentPhase() {
...@@ -128,8 +220,6 @@ document.onload = (function(d3){ ...@@ -128,8 +220,6 @@ document.onload = (function(d3){
d3.select("#right").classed("scrollable", false); d3.select("#right").classed("scrollable", false);
graph.fitGraphViewToWindow(); graph.fitGraphViewToWindow();
disassemblyView.resizeToParent();
sourceView.resizeToParent();
d3.select("#left").classed("scrollable", true); d3.select("#left").classed("scrollable", true);
d3.select("#right").classed("scrollable", true); d3.select("#right").classed("scrollable", true);
...@@ -138,21 +228,6 @@ document.onload = (function(d3){ ...@@ -138,21 +228,6 @@ document.onload = (function(d3){
selectionBroker = new SelectionBroker(); selectionBroker = new SelectionBroker();
function initializeHandlers(g) { function initializeHandlers(g) {
d3.select("#source-collapse").on("click", function(){
toggleSourceExpanded(true);
setTimeout(function(){
g.fitGraphViewToWindow();
}, 300);
});
d3.select("#disassembly-collapse").on("click", function(){
toggleDisassemblyExpanded();
setTimeout(function(){
g.fitGraphViewToWindow();
}, 300);
});
window.onresize = function(){
fitPanesToParents();
};
d3.select("#hidden-file-upload").on("change", function() { d3.select("#hidden-file-upload").on("change", function() {
if (window.File && window.FileReader && window.FileList) { if (window.File && window.FileReader && window.FileList) {
var uploadFile = this.files[0]; var uploadFile = this.files[0];
...@@ -238,9 +313,11 @@ document.onload = (function(d3){ ...@@ -238,9 +313,11 @@ document.onload = (function(d3){
initializeHandlers(graph); initializeHandlers(graph);
setSourceExpanded(getLastExpandedState("source", true)); resizer.snapper.setSourceExpanded(resizer.snapper.getLastExpandedState("source", true));
setDisassemblyExpanded(getLastExpandedState("disassembly", false)); resizer.snapper.setDisassemblyExpanded(resizer.snapper.getLastExpandedState("disassembly", false));
displayPhaseView(empty, null); displayPhaseView(empty, null);
fitPanesToParents(); fitPanesToParents();
resizer.updatePanes();
})(window.d3); })(window.d3);
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