basic splitter -> kick-ass splitter

2 files changed, 44 insertions, 12 deletions

diff --git a/libmproxy/web/static/css/app.css b/libmproxy/web/static/css/app.css
index 4c872711..26ed8c3d 100644
--- a/libmproxy/web/static/css/app.css
+++ b/libmproxy/web/static/css/app.css
@@ -69,16 +69,29 @@ body,
   flex: 1 1 auto;
 }
 .splitter {
-  flex: 0 0 4px;
-  background-color: #ccc;
-  content: "X";
+  flex: 0 0 1px;
+  background-color: #aaa;
+  position: relative;
 }
-.splitter-x {
+.splitter > div {
+  position: absolute;
+}
+.splitter.splitter-x {
   cursor: col-resize;
 }
-.splitter-y {
+.splitter.splitter-x > div {
+  margin-left: -1px;
+  width: 4px;
+  height: 100%;
+}
+.splitter.splitter-y {
   cursor: row-resize;
 }
+.splitter.splitter-y > div {
+  margin-top: -1px;
+  height: 4px;
+  width: 100%;
+}
 .nav-tabs {
   border-bottom: solid #a6a6a6 1px;
 }
diff --git a/libmproxy/web/static/js/app.js b/libmproxy/web/static/js/app.js
index 5e9654bd..8ee7133e 100644
--- a/libmproxy/web/static/js/app.js
+++ b/libmproxy/web/static/js/app.js
@@ -403,15 +403,21 @@ var Splitter = React.createClass({displayName: 'Splitter',
         });
         window.addEventListener("mousemove",this.onMouseMove);
         window.addEventListener("mouseup",this.onMouseUp);
+        // Occasionally, only a dragEnd event is triggered, but no mouseUp.
+        window.addEventListener("dragend",this.onDragEnd);
     },
-    onMouseUp: function(e){
+    onDragEnd: function(){
+        this.getDOMNode().style.transform="";
+        window.removeEventListener("dragend",this.onDragEnd);
         window.removeEventListener("mouseup",this.onMouseUp);
         window.removeEventListener("mousemove",this.onMouseMove);
+    },
+    onMouseUp: function(e){
+        this.onDragEnd();
 
         var node = this.getDOMNode();
         var prev = node.previousElementSibling;
         var next = node.nextElementSibling;
-        this.getDOMNode().style.transform="";
 
         var dX = e.pageX-this.state.startX;
         var dY = e.pageY-this.state.startY;
@@ -438,8 +444,8 @@ var Splitter = React.createClass({displayName: 'Splitter',
         }
         this.getDOMNode().style.transform = "translate("+dX+"px,"+dY+"px)";
     },
-    reset: function(){
-        if(!this.state.applied){
+    reset: function(willUnmount) {
+        if (!this.state.applied) {
             return;
         }
         var node = this.getDOMNode();
@@ -448,6 +454,16 @@ var Splitter = React.createClass({displayName: 'Splitter',
         
         prev.style.flex = "";
         next.style.flex = "";
+
+        if(!willUnmount){
+            this.setState({
+                applied: false
+            });
+        }
+
+    },
+    componentWillUnmount: function(){
+        this.reset(true);
     },
     render: function(){
         var className = "splitter";
@@ -456,7 +472,11 @@ var Splitter = React.createClass({displayName: 'Splitter',
         } else {
             className += " splitter-y";
         }
-        return React.DOM.div({className: className, onMouseDown: this.onMouseDown});
+        return (
+            React.DOM.div({className: className}, 
+                React.DOM.div({onMouseDown: this.onMouseDown, draggable: "true"})
+            )
+        );
     }
 });
 /** @jsx React.DOM */
@@ -991,7 +1011,6 @@ var ProxyAppMain = React.createClass({displayName: 'ProxyAppMain',
         SettingsStore.removeListener("change", this.onSettingsChange);
     },
     onSettingsChange: function () {
-        console.log("onSettingsChange");
         this.setState({settings: SettingsStore.getAll()});
     },
     render: function () {
@@ -999,7 +1018,7 @@ var ProxyAppMain = React.createClass({displayName: 'ProxyAppMain',
             React.DOM.div({id: "container"}, 
                 Header({settings: this.state.settings}), 
                 this.props.activeRouteHandler({settings: this.state.settings}), 
-                Splitter({axis: "y"}), 
+                this.state.settings.showEventLog ? Splitter({axis: "y"}) : null, 
                 this.state.settings.showEventLog ? EventLog(null) : null, 
                 Footer({settings: this.state.settings})
             )