AuroraMiddleware/v8
1
0
Fork 0
Code Issues 2 Pull Requests Releases Wiki Activity

[turbolizer] Remember pane width in session storage

Browse Source 
Turbolizer only remembered the expansion state of the panes,
but not their widths. This CL remembers the relative widths,
and restores them upon reload. This is also useful when the
size of the Turbolizer window changes.

Change-Id: I0fd81c1266bfbddded86da16e2241420cdf73f4e
Notry: true
Bug: v8:7327
Reviewed-on: https://chromium-review.googlesource.com/c/1396421
Commit-Queue: Sigurd Schneider <sigurds@chromium.org>
Reviewed-by: Georg Neis <neis@chromium.org>
Cr-Commit-Position: refs/heads/master@{#58575}
This commit is contained in:
Sigurd Schneider 2019-01-05 12:42:23 +01:00 committed by Commit Bot
parent 9301ea6a2a
commit 8a33859721
3 changed files with 61 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
tools/turbolizer/src/graph-view.ts
View File

@ -178,22 +178,9 @@ export class GraphView extends View implements PhaseView {
}
static get selectedClass() {
return "selected";
}
static get rectClass() {
return "nodeStyle";
}
static get activeEditId() {
return "active-editing";
}
static get nodeRadius() {
return 50;
}
getEdgeFrontier(nodes, inEdges: boolean, edgeFilter: (e: Edge, i: number) => boolean) {
let frontier = new Set();
getEdgeFrontier(nodes: Iterable<GNode>, inEdges: boolean,
edgeFilter: (e: Edge, i: number) => boolean) {
let frontier: Set<Edge> = new Set();
for (const n of nodes) {
const edges = inEdges ? n.inputs : n.outputs;
var edgeNumber = 0;
@ -207,20 +194,21 @@ export class GraphView extends View implements PhaseView {
return frontier;
}
getNodeFrontier(nodes, inEdges, edgeFilter) {
getNodeFrontier(nodes: Iterable<GNode>, inEdges: boolean,
edgeFilter: (e: Edge, i: number) => boolean) {
const view = this;
const frontier = new Set();
const frontier: Set<GNode> = new Set();
let newState = true;
const edgeFrontier = view.getEdgeFrontier(nodes, inEdges, edgeFilter);
// Control key toggles edges rather than just turning them on
if (d3.event.ctrlKey) {
edgeFrontier.forEach(function (edge) {
edgeFrontier.forEach(function (edge: Edge) {
if (edge.visible) {
newState = false;
}
});
}
edgeFrontier.forEach(function (edge) {
edgeFrontier.forEach(function (edge: Edge) {
edge.visible = newState;
if (newState) {
const node = inEdges ? edge.source : edge.target;
@ -286,12 +274,12 @@ export class GraphView extends View implements PhaseView {
connectVisibleSelectedNodes() {
const view = this;
for (const n of view.state.selection) {
n.inputs.forEach(function (edge) {
n.inputs.forEach(function (edge: Edge) {
if (edge.source.visible && edge.target.visible) {
edge.visible = true;
}
});
n.outputs.forEach(function (edge) {
n.outputs.forEach(function (edge: Edge) {
if (edge.source.visible && edge.target.visible) {
edge.visible = true;
}

89
tools/turbolizer/src/turbo-visualizer.ts
View File

@ -19,45 +19,45 @@ class Snapper {
disassemblyCollapse: HTMLElement;
constructor(resizer: Resizer) {
const snapper = this;
snapper.resizer = resizer;
snapper.sourceExpand = document.getElementById(C.SOURCE_EXPAND_ID);
snapper.sourceCollapse = document.getElementById(C.SOURCE_COLLAPSE_ID);
snapper.disassemblyExpand = document.getElementById(C.DISASSEMBLY_EXPAND_ID);
snapper.disassemblyCollapse = document.getElementById(C.DISASSEMBLY_COLLAPSE_ID);
this.resizer = resizer;
this.sourceExpand = document.getElementById(C.SOURCE_EXPAND_ID);
this.sourceCollapse = document.getElementById(C.SOURCE_COLLAPSE_ID);
this.disassemblyExpand = document.getElementById(C.DISASSEMBLY_EXPAND_ID);
this.disassemblyCollapse = document.getElementById(C.DISASSEMBLY_COLLAPSE_ID);
document.getElementById("source-collapse").addEventListener("click", function () {
resizer.snapper.toggleSourceExpanded();
document.getElementById("source-collapse").addEventListener("click", () => {
this.toggleSourceExpanded();
});
document.getElementById("disassembly-collapse").addEventListener("click", function () {
resizer.snapper.toggleDisassemblyExpanded();
document.getElementById("disassembly-collapse").addEventListener("click", () => {
this.toggleDisassemblyExpanded();
});
}
getLastExpandedState(type, default_state) {
restoreExpandedState(): void {
this.setSourceExpanded(this.getLastExpandedState("source", true));
this.setDisassemblyExpanded(this.getLastExpandedState("disassembly", false));
}
getLastExpandedState(type: string, default_state: boolean): boolean {
var state = window.sessionStorage.getItem("expandedState-" + type);
if (state === null) return default_state;
return state === 'true';
}
setLastExpandedState(type, state) {
window.sessionStorage.setItem("expandedState-" + type, state);
}
toggleSourceExpanded(): void {
this.setSourceExpanded(!this.sourceExpand.classList.contains("invisible"));
}
sourceExpandUpdate(newState: boolean) {
this.setLastExpandedState("source", newState);
sourceExpandUpdate(newState: boolean): void {
window.sessionStorage.setItem("expandedState-source", `${newState}`);
this.sourceExpand.classList.toggle("invisible", newState);
this.sourceCollapse.classList.toggle("invisible", !newState);
}
setSourceExpanded(newState) {
setSourceExpanded(newState: boolean): void {
if (this.sourceExpand.classList.contains("invisible") === newState) return;
const resizer = this.resizer;
this.sourceExpandUpdate(newState);
let resizer = this.resizer;
if (newState) {
resizer.sep_left = resizer.sep_left_snap;
resizer.sep_left_snap = 0;
@ -68,20 +68,20 @@ class Snapper {
resizer.updatePanes();
}
toggleDisassemblyExpanded() {
toggleDisassemblyExpanded(): void {
this.setDisassemblyExpanded(!this.disassemblyExpand.classList.contains("invisible"));
}
disassemblyExpandUpdate(newState) {
this.setLastExpandedState("disassembly", newState);
disassemblyExpandUpdate(newState: boolean): void {
window.sessionStorage.setItem("expandedState-disassembly", `${newState}`);
this.disassemblyExpand.classList.toggle("invisible", newState);
this.disassemblyCollapse.classList.toggle("invisible", !newState);
}
setDisassemblyExpanded(newState) {
setDisassemblyExpanded(newState: boolean): void {
if (this.disassemblyExpand.classList.contains("invisible") === newState) return;
const resizer = this.resizer;
this.disassemblyExpandUpdate(newState);
let resizer = this.resizer;
if (newState) {
resizer.sep_right = resizer.sep_right_snap;
resizer.sep_right_snap = resizer.client_width;
@ -92,7 +92,7 @@ class Snapper {
resizer.updatePanes();
}
panesUpated() {
panesUpdated(): void {
this.sourceExpandUpdate(this.resizer.sep_left > this.resizer.dead_width);
this.disassemblyExpandUpdate(this.resizer.sep_right <
(this.resizer.client_width - this.resizer.dead_width));
@ -117,21 +117,18 @@ class Resizer {
constructor(panes_updated_callback: () => void, dead_width: number) {
let resizer = this;
resizer.snapper = new Snapper(resizer)
resizer.panes_updated_callback = panes_updated_callback;
resizer.dead_width = dead_width
resizer.client_width = document.body.getBoundingClientRect().width;
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.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;
this.updateWidths();
let dragResizeLeft = d3.drag()
.on('drag', function () {
@ -147,6 +144,9 @@ class Resizer {
}
})
.on('end', function () {
if (!resizer.isRightSnapped()) {
window.sessionStorage.setItem("source-pane-width", `${resizer.sep_left / resizer.client_width}`);
}
resizer.resizer_left.classed("dragged", false);
});
resizer.resizer_left.call(dragResizeLeft);
@ -165,6 +165,10 @@ class Resizer {
}
})
.on('end', function () {
if (!resizer.isRightSnapped()) {
console.log(`disassembly-pane-width ${resizer.sep_right}`)
window.sessionStorage.setItem("disassembly-pane-width", `${resizer.sep_right / resizer.client_width}`);
}
resizer.resizer_right.classed("dragged", false);
});;
resizer.resizer_right.call(dragResizeRight);
@ -172,11 +176,21 @@ class Resizer {
resizer.updateWidths();
resizer.updatePanes();
};
resizer.snapper = new Snapper(resizer);
resizer.snapper.restoreExpandedState();
}
isLeftSnapped() {
return this.sep_left === 0;
}
isRightSnapped() {
return this.sep_right >= this.client_width - 1;
}
updatePanes() {
let left_snapped = this.sep_left === 0;
let right_snapped = this.sep_right >= this.client_width - 1;
let left_snapped = this.isLeftSnapped();
let right_snapped = this.isRightSnapped();
this.resizer_left.classed("snapped", left_snapped);
this.resizer_right.classed("snapped", right_snapped);
this.left.style.width = this.sep_left + 'px';
@ -185,14 +199,16 @@ class Resizer {
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.snapper.panesUpdated();
this.panes_updated_callback();
}
updateWidths() {
this.client_width = document.body.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);
const sep_left = window.sessionStorage.getItem("source-pane-width");
this.sep_left = this.client_width * (sep_left ? Number.parseFloat(sep_left) : (1 / 3));
const sep_right = window.sessionStorage.getItem("disassembly-pane-width");
this.sep_right = this.client_width * (sep_right ? Number.parseFloat(sep_right) : (2 / 3));
}
}
@ -307,10 +323,5 @@ window.onload = function () {
}
initializeUploadHandlers();
resizer.snapper.setSourceExpanded(resizer.snapper.getLastExpandedState("source", true));
resizer.snapper.setDisassemblyExpanded(resizer.snapper.getLastExpandedState("disassembly", false));
resizer.updatePanes();
};

2
tools/turbolizer/turbo-visualizer.css
View File

@ -569,7 +569,7 @@ text {
.schedule-block .instr-marker {
padding-right: .5ex;
padding-left: .5ex;
min-width: 1ex;
min-width: 1em;
background: #EEEEEE;
/* display: none; */
}