[turbolizer] Toggling maximize keeps the side panels size consistent

We now keep the same percentage of the window occupied by the panel
when toggling Maximize (both maximizing, or un-maximizing). This
also means that it no longer forces the side panels open when
toggling maximizing.

Also took the opportunity and cleaned up names and resizer.ts.

Bug: v8:7327
Change-Id: I60b574a833f3059e447aa17fae8a687d32ac29d5
Notry: true
Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/1903970Reviewed-by: Sigurd Schneider <sigurds@chromium.org>
Commit-Queue: Santiago Aboy Solanes <solanes@chromium.org>
Cr-Commit-Position: refs/heads/master@{#65085}

tools/turbolizer/index.html

@@ -24,11 +24,11 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
   </div>
   <div id="resizer-right" class="resizer"></div>
   <div id="right" class="content"></div>
-  <div id="source-collapse" class="collapse-pane">
+  <div id="show-hide-source" class="show-hide-pane">
     <input id="source-expand" type="image" title="show source" 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">
+  <div id="show-hide-disassembly" class="show-hide-pane">
     <input id="disassembly-expand" type="image" title="show disassembly" 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>

tools/turbolizer/src/resizer.ts

@@ -19,19 +19,23 @@ class Snapper {
     this.disassemblyExpand = document.getElementById(C.DISASSEMBLY_EXPAND_ID);
     this.disassemblyCollapse = document.getElementById(C.DISASSEMBLY_COLLAPSE_ID);
 
-    document.getElementById("source-collapse").addEventListener("click", () => {
+    document.getElementById("show-hide-source").addEventListener("click", () => {
+      this.resizer.resizerLeft.classed("snapped", !this.resizer.resizerLeft.classed("snapped"));
       this.setSourceExpanded(!this.sourceExpand.classList.contains("invisible"));
       this.resizer.updatePanes();
     });
-    document.getElementById("disassembly-collapse").addEventListener("click", () => {
+    document.getElementById("show-hide-disassembly").addEventListener("click", () => {
+      this.resizer.resizerRight.classed("snapped", !this.resizer.resizerRight.classed("snapped"));
       this.setDisassemblyExpanded(!this.disassemblyExpand.classList.contains("invisible"));
       this.resizer.updatePanes();
     });
   }
 
   restoreExpandedState(): void {
+    this.resizer.resizerLeft.classed("snapped", window.sessionStorage.getItem("expandedState-source") == "false");
+    this.resizer.resizerRight.classed("snapped", window.sessionStorage.getItem("expandedState-disassembly") == "false");
     this.setSourceExpanded(this.getLastExpandedState("source", true));
-    this.setDisassemblyExpanded(this.getLastExpandedState("disassembly", false));
+    this.setDisassemblyExpanded(this.getLastExpandedState("disassembly", true));
   }
 
   getLastExpandedState(type: string, defaultState: boolean): boolean {
@@ -40,55 +44,32 @@ class Snapper {
     return state === 'true';
   }
 
-  sourceExpandUpdate(newState: boolean): void {
-    window.sessionStorage.setItem("expandedState-source", `${newState}`);
-    this.sourceExpand.classList.toggle("invisible", newState);
-    this.sourceCollapse.classList.toggle("invisible", !newState);
+  sourceUpdate(isSourceExpanded: boolean): void {
+    window.sessionStorage.setItem("expandedState-source", `${isSourceExpanded}`);
+    this.sourceExpand.classList.toggle("invisible", isSourceExpanded);
+    this.sourceCollapse.classList.toggle("invisible", !isSourceExpanded);
   }
 
-  setSourceExpanded(newState: boolean): void {
-    if (this.sourceExpand.classList.contains("invisible") === newState) return;
-    const resizer = this.resizer;
-    this.sourceExpandUpdate(newState);
-    if (newState) {
-      resizer.sepLeft = resizer.sepLeftSnap;
-      resizer.sepLeftSnap = 0;
-    } else {
-      resizer.sepLeftSnap = resizer.sepLeft;
-      resizer.sepLeft = 0;
-    }
+  setSourceExpanded(isSourceExpanded: boolean): void {
+    this.sourceUpdate(isSourceExpanded);
+    this.resizer.updateLeftWidth();
   }
 
-  disassemblyExpandUpdate(newState: boolean): void {
-    window.sessionStorage.setItem("expandedState-disassembly", `${newState}`);
-    this.disassemblyExpand.classList.toggle("invisible", newState);
-    this.disassemblyCollapse.classList.toggle("invisible", !newState);
-  }
-
-  setDisassemblyExpanded(newState: boolean): void {
-    if (this.disassemblyExpand.classList.contains("invisible") === newState) return;
-    const resizer = this.resizer;
-    this.disassemblyExpandUpdate(newState);
-    if (newState) {
-      resizer.sepRight = resizer.sepRightSnap;
-      resizer.sepRightSnap = resizer.clientWidth;
-    } else {
-      resizer.sepRightSnap = resizer.sepRight;
-      resizer.sepRight = resizer.clientWidth;
-    }
+  disassemblyUpdate(isDisassemblyExpanded: boolean): void {
+    window.sessionStorage.setItem("expandedState-disassembly", `${isDisassemblyExpanded}`);
+    this.disassemblyExpand.classList.toggle("invisible", isDisassemblyExpanded);
+    this.disassemblyCollapse.classList.toggle("invisible", !isDisassemblyExpanded);
   }
 
-  panesUpdated(): void {
-    this.sourceExpandUpdate(this.resizer.sepLeft > this.resizer.deadWidth);
-    this.disassemblyExpandUpdate(this.resizer.sepRight <
-      (this.resizer.clientWidth - this.resizer.deadWidth));
+  setDisassemblyExpanded(isDisassemblyExpanded: boolean): void {
+    this.disassemblyUpdate(isDisassemblyExpanded);
+    this.resizer.updateRightWidth();
   }
 }
 
 export class Resizer {
   snapper: Snapper;
   deadWidth: number;
-  clientWidth: number;
   left: HTMLElement;
   right: HTMLElement;
   sepLeft: number;
@@ -99,6 +80,9 @@ export class Resizer {
   resizerRight: d3.Selection<HTMLDivElement, any, any, any>;
   resizerLeft: d3.Selection<HTMLDivElement, any, any, any>;
 
+  private readonly SOURCE_PANE_DEFAULT_PERCENT = 1 / 4;
+  private readonly DISASSEMBLY_PANE_DEFAULT_PERCENT = 3 / 4;
+
   constructor(panesUpdatedCallback: () => void, deadWidth: number) {
     const resizer = this;
     resizer.panesUpdatedCallback = panesUpdatedCallback;
@@ -109,6 +93,14 @@ export class Resizer {
     resizer.resizerRight = d3.select('#resizer-right');
     resizer.sepLeftSnap = 0;
     resizer.sepRightSnap = 0;
+    // Set default sizes, if they weren't set.
+    if (window.sessionStorage.getItem("source-pane-percent") === null) {
+      window.sessionStorage.setItem("source-pane-percent", `${this.SOURCE_PANE_DEFAULT_PERCENT}`);
+    }
+    if (window.sessionStorage.getItem("disassembly-pane-percent") === null) {
+      window.sessionStorage.setItem("disassembly-pane-percent", `${this.DISASSEMBLY_PANE_DEFAULT_PERCENT}`);
+    }
+
     this.updateWidths();
 
     const dragResizeLeft = d3.drag()
@@ -125,9 +117,12 @@ export class Resizer {
         }
       })
       .on('end', function () {
-        if (!resizer.isRightSnapped()) {
-          window.sessionStorage.setItem("source-pane-width", `${resizer.sepLeft / resizer.clientWidth}`);
+        // Snap if dragged all the way to the left.
+        resizer.resizerLeft.classed("snapped", resizer.sepLeft === 0);
+        if (!resizer.isLeftSnapped()) {
+          window.sessionStorage.setItem("source-pane-percent", `${resizer.sepLeft / document.body.getBoundingClientRect().width}`);
         }
+        resizer.snapper.setSourceExpanded(!resizer.isLeftSnapped());
         resizer.resizerLeft.classed("dragged", false);
       });
     resizer.resizerLeft.call(dragResizeLeft);
@@ -135,21 +130,23 @@ export class Resizer {
     const dragResizeRight = d3.drag()
       .on('drag', function () {
         const x = d3.mouse(this.parentElement)[0];
-        resizer.sepRight = Math.max(resizer.sepLeft, Math.min(x, resizer.clientWidth));
+        resizer.sepRight = Math.max(resizer.sepLeft, Math.min(x, document.body.getBoundingClientRect().width));
         resizer.updatePanes();
       })
       .on('start', function () {
         resizer.resizerRight.classed("dragged", true);
         const x = d3.mouse(this.parentElement)[0];
-        if (x < (resizer.clientWidth - deadWidth)) {
+        if (x < (document.body.getBoundingClientRect().width - deadWidth)) {
           resizer.sepRightSnap = resizer.sepRight;
         }
       })
       .on('end', function () {
+        // Snap if dragged all the way to the right.
+        resizer.resizerRight.classed("snapped", resizer.sepRight >= document.body.getBoundingClientRect().width - 1);
         if (!resizer.isRightSnapped()) {
-          console.log(`disassembly-pane-width ${resizer.sepRight}`);
-          window.sessionStorage.setItem("disassembly-pane-width", `${resizer.sepRight / resizer.clientWidth}`);
+          window.sessionStorage.setItem("disassembly-pane-percent", `${resizer.sepRight / document.body.getBoundingClientRect().width}`);
         }
+        resizer.snapper.setDisassemblyExpanded(!resizer.isRightSnapped());
         resizer.resizerRight.classed("dragged", false);
       });
     resizer.resizerRight.call(dragResizeRight);
@@ -162,32 +159,42 @@ export class Resizer {
   }
 
   isLeftSnapped() {
-    return this.sepLeft === 0;
+    return this.resizerLeft.classed("snapped");
   }
 
   isRightSnapped() {
-    return this.sepRight >= this.clientWidth - 1;
+    return this.resizerRight.classed("snapped");
   }
 
   updatePanes() {
-    const leftSnapped = this.isLeftSnapped();
-    const rightSnapped = this.isRightSnapped();
-    this.resizerLeft.classed("snapped", leftSnapped);
-    this.resizerRight.classed("snapped", rightSnapped);
     this.left.style.width = this.sepLeft + 'px';
-    this.right.style.width = (this.clientWidth - this.sepRight) + 'px';
     this.resizerLeft.style('left', this.sepLeft + 'px');
-    this.resizerRight.style('right', (this.clientWidth - this.sepRight - 1) + 'px');
+    this.right.style.width = (document.body.getBoundingClientRect().width - this.sepRight) + 'px';
+    this.resizerRight.style('right', (document.body.getBoundingClientRect().width - this.sepRight - 1) + 'px');
 
-    this.snapper.panesUpdated();
     this.panesUpdatedCallback();
   }
 
+  updateLeftWidth() {
+    if (this.isLeftSnapped()) {
+      this.sepLeft = 0;
+    } else {
+      const sepLeft = window.sessionStorage.getItem("source-pane-percent");
+      this.sepLeft = document.body.getBoundingClientRect().width * Number.parseFloat(sepLeft);
+    }
+  }
+
+  updateRightWidth() {
+    if (this.isRightSnapped()) {
+      this.sepRight = document.body.getBoundingClientRect().width;
+    } else {
+      const sepRight = window.sessionStorage.getItem("disassembly-pane-percent");
+      this.sepRight = document.body.getBoundingClientRect().width * Number.parseFloat(sepRight);
+    }
+  }
+
   updateWidths() {
-    this.clientWidth = document.body.getBoundingClientRect().width;
-    const sepLeft = window.sessionStorage.getItem("source-pane-width");
-    this.sepLeft = this.clientWidth * (sepLeft ? Number.parseFloat(sepLeft) : (1 / 3));
-    const sepRight = window.sessionStorage.getItem("disassembly-pane-width");
-    this.sepRight = this.clientWidth * (sepRight ? Number.parseFloat(sepRight) : (2 / 3));
+    this.updateLeftWidth();
+    this.updateRightWidth();
   }
 }

tools/turbolizer/turbo-visualizer.css

@@ -5,7 +5,7 @@
   transition-timing-function: ease;
 }
 
-.collapse-pane {
+.show-hide-pane {
   background: #A0A0A0;
   bottom: 0;
   position: absolute;
@@ -319,7 +319,7 @@ ul.noindent {
 }
 
 input:hover,
-.collapse-pane:hover input {
+.show-hide-pane:hover input {
   opacity: 1;
   cursor: pointer;
 }
@@ -356,11 +356,11 @@ input:hover,
 }
 
 
-#disassembly-collapse {
+#show-hide-disassembly {
   right: 0;
 }
 
-#source-collapse {
+#show-hide-source {
   left: 0;
 }