1 files changed, 166 insertions, 89 deletions
diff --git a/deps/v8/tools/turbolizer/turbo-visualizer.js b/deps/v8/tools/turbolizer/turbo-visualizer.js
index 280caf01db..c04384810b 100644
--- a/deps/v8/tools/turbolizer/turbo-visualizer.js
+++ b/deps/v8/tools/turbolizer/turbo-visualizer.js
@@ -1,99 +1,191 @@
-// 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
 // found in the LICENSE file.
 
-document.onload = (function(d3){
-  "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;
+class Snapper {
 
-  function updatePanes() {
-    if (sourceExpanded) {
-      if (disassemblyExpanded) {
-        d3.select("#" + SOURCE_PANE_ID).style(WIDTH, "30%");
-        d3.select("#" + INTERMEDIATE_PANE_ID).style(WIDTH, "40%");
-        d3.select("#" + GENERATED_PANE_ID).style(WIDTH, "30%");
-      } else {
-        d3.select("#" + SOURCE_PANE_ID).style(WIDTH, "50%");
-        d3.select("#" + INTERMEDIATE_PANE_ID).style(WIDTH, "50%");
-        d3.select("#" + GENERATED_PANE_ID).style(WIDTH, "0%");
-      }
-    } else {
-      if (disassemblyExpanded) {
-        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%");
-      }
-    }
+  constructor(resizer) {
+    let snapper = this;
+    snapper.resizer = resizer;
+    snapper.sourceExpand = d3.select("#" + SOURCE_EXPAND_ID);
+    snapper.sourceCollapse = d3.select("#" + SOURCE_COLLAPSE_ID);
+    snapper.disassemblyExpand = d3.select("#" + DISASSEMBLY_EXPAND_ID);
+    snapper.disassemblyCollapse = d3.select("#" + DISASSEMBLY_COLLAPSE_ID);
+
+    d3.select("#source-collapse").on("click", function(){
+      resizer.snapper.toggleSourceExpanded();
+    });
+    d3.select("#disassembly-collapse").on("click", function(){
+      resizer.snapper.toggleDisassemblyExpanded();
+    });
   }
 
-  function getLastExpandedState(type, default_state) {
+  getLastExpandedState(type, default_state) {
     var state = window.sessionStorage.getItem("expandedState-"+type);
     if (state === null) return default_state;
     return state === 'true';
   }
 
-  function setLastExpandedState(type, state) {
+  setLastExpandedState(type, state) {
     window.sessionStorage.setItem("expandedState-"+type, state);
   }
 
-  function toggleSourceExpanded() {
-    setSourceExpanded(!sourceExpanded);
+  toggleSourceExpanded() {
+    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) {
-    sourceExpanded = newState;
-    setLastExpandedState("source", newState);
-    updatePanes();
+  setSourceExpanded(newState) {
+    if (this.sourceExpand.classed("invisible") === newState) return;
+    this.sourceExpandUpdate(newState);
+    let resizer = this.resizer;
     if (newState) {
-      sourceCollapseClassList.add(COLLAPSE_PANE_BUTTON_VISIBLE);
-      sourceCollapseClassList.remove(COLLAPSE_PANE_BUTTON_INVISIBLE);
-      sourceExpandClassList.add(COLLAPSE_PANE_BUTTON_INVISIBLE);
-      sourceExpandClassList.remove(COLLAPSE_PANE_BUTTON_VISIBLE);
+      resizer.sep_left = resizer.sep_left_snap;
+      resizer.sep_left_snap = 0;
     } else {
-      sourceCollapseClassList.add(COLLAPSE_PANE_BUTTON_INVISIBLE);
-      sourceCollapseClassList.remove(COLLAPSE_PANE_BUTTON_VISIBLE);
-      sourceExpandClassList.add(COLLAPSE_PANE_BUTTON_VISIBLE);
-      sourceExpandClassList.remove(COLLAPSE_PANE_BUTTON_INVISIBLE);
+      resizer.sep_left_snap = resizer.sep_left;
+      resizer.sep_left = 0;
     }
+    resizer.updatePanes();
   }
 
-  function toggleDisassemblyExpanded() {
-    setDisassemblyExpanded(!disassemblyExpanded);
+  toggleDisassemblyExpanded() {
+    this.setDisassemblyExpanded(!this.disassemblyExpand.classed("invisible"));
   }
 
-  function setDisassemblyExpanded(newState) {
-    disassemblyExpanded = newState;
-    setLastExpandedState("disassembly", newState);
-    updatePanes();
+  disassemblyExpandUpdate(newState) {
+    this.setLastExpandedState("disassembly", newState);
+    this.disassemblyExpand.classed("invisible", newState);
+    this.disassemblyCollapse.classed("invisible", !newState);
+  }
+
+  setDisassemblyExpanded(newState) {
+    console.log(newState)
+    if (this.disassemblyExpand.classed("invisible") === newState) return;
+    this.disassemblyExpandUpdate(newState);
+    let resizer = this.resizer;
     if (newState) {
-      disassemblyCollapseClassList.add(COLLAPSE_PANE_BUTTON_VISIBLE);
-      disassemblyCollapseClassList.remove(COLLAPSE_PANE_BUTTON_INVISIBLE);
-      disassemblyExpandClassList.add(COLLAPSE_PANE_BUTTON_INVISIBLE);
-      disassemblyExpandClassList.remove(COLLAPSE_PANE_BUTTON_VISIBLE);
+      resizer.sep_right = resizer.sep_right_snap;
+      resizer.sep_right_snap = resizer.client_width;
+      console.log("set expand")
     } else {
-      disassemblyCollapseClassList.add(COLLAPSE_PANE_BUTTON_INVISIBLE);
-      disassemblyCollapseClassList.remove(COLLAPSE_PANE_BUTTON_VISIBLE);
-      disassemblyExpandClassList.add(COLLAPSE_PANE_BUTTON_VISIBLE);
-      disassemblyExpandClassList.remove(COLLAPSE_PANE_BUTTON_INVISIBLE);
+      resizer.sep_right_snap = resizer.sep_right;
+      resizer.sep_right = resizer.client_width;
+      console.log("set collapse")
     }
+    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() {
@@ -128,8 +220,6 @@ document.onload = (function(d3){
     d3.select("#right").classed("scrollable", false);
 
     graph.fitGraphViewToWindow();
-    disassemblyView.resizeToParent();
-    sourceView.resizeToParent();
 
     d3.select("#left").classed("scrollable", true);
     d3.select("#right").classed("scrollable", true);
@@ -138,21 +228,6 @@ document.onload = (function(d3){
   selectionBroker = new SelectionBroker();
 
   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() {
       if (window.File && window.FileReader && window.FileList) {
         var uploadFile = this.files[0];
@@ -238,9 +313,11 @@ document.onload = (function(d3){
 
   initializeHandlers(graph);
 
-  setSourceExpanded(getLastExpandedState("source", true));
-  setDisassemblyExpanded(getLastExpandedState("disassembly", false));
+  resizer.snapper.setSourceExpanded(resizer.snapper.getLastExpandedState("source", true));
+  resizer.snapper.setDisassemblyExpanded(resizer.snapper.getLastExpandedState("disassembly", false));
 
   displayPhaseView(empty, null);
   fitPanesToParents();
+  resizer.updatePanes();
+
 })(window.d3);