Commit e15e4248 authored by Sigurd Schneider's avatar Sigurd Schneider Committed by Commit Bot

[turbolizer] Make resizing easier to use

Increase width of resizers and clean up CSS.

Drive-by: Add hot recompile watch command. Run
  npm run-script watch
and rollup will recompile on file changes.

Notry: true
Bug: v8:7327
Change-Id: If24e18049ff565a7584b5cca9c64431e4ac03f77
Reviewed-on: https://chromium-review.googlesource.com/c/1320852Reviewed-by: 's avatarGeorg Neis <neis@chromium.org>
Commit-Queue: Sigurd Schneider <sigurds@chromium.org>
Cr-Commit-Position: refs/heads/master@{#57353}
parent 61ddc8d2
......@@ -10,7 +10,7 @@
<body>
<div id="left" class="viewpane scrollable"></div>
<div class="resizer-left"></div>
<div id="resizer-left" class="resizer"></div>
<div id="middle">
<div id="graph-toolbox-anchor">
<div id="graph-toolbox">
......@@ -37,7 +37,7 @@
<input id="upload" type="image" title="load graph" class="button-input" src="upload-icon.png" alt="upload graph">
</div>
</div>
<div class="resizer-right"></div>
<div id="resizer-right" class="resizer"></div>
<div id="right" class="viewpane scrollable"></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">
......
......@@ -4,7 +4,7 @@
"description": "Visualization tool for V8 TurboFan IR graphs",
"scripts": {
"build": "rollup -c",
"watch": "tsc --watch",
"watch": "rollup -c -w",
"deploy": "./deploy.sh",
"format": "tsfmt -r",
"test": "ts-mocha -p tsconfig.test.json test/**/*-test.ts",
......
......@@ -123,8 +123,8 @@ class Resizer {
resizer.left = document.getElementById(C.SOURCE_PANE_ID);
resizer.middle = document.getElementById(C.INTERMEDIATE_PANE_ID);
resizer.right = document.getElementById(C.GENERATED_PANE_ID);
resizer.resizer_left = d3.select('.resizer-left');
resizer.resizer_right = d3.select('.resizer-right');
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;
......
......@@ -396,7 +396,7 @@ text {
dominant-baseline: text-before-edge;
}
.resizer-left {
.resizer {
position:absolute;
width: 4px;
height:100%;
......@@ -404,35 +404,18 @@ text {
cursor: pointer;
}
.resizer-left.snapped {
.resizer.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 {
.resizer.snapped:hover {
width: 12px;
margin-left: 0px;
}
.resizer-right:hover {
background: orange;
}
.resizer-right.dragged {
.resizer:hover, .resizer.dragged {
width: 10px;
margin-left: -4px;
background: orange;
}
......
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