Allow splitter to resize next element

ui/webui/resources/js/cr/ui/splitter.js

Index: ui/webui/resources/js/cr/ui/splitter.js
diff --git a/ui/webui/resources/js/cr/ui/splitter.js b/ui/webui/resources/js/cr/ui/splitter.js
index aacfacee304d46292056389c6814614bac8267eb..7e74203e22fc5ddee77f71efcabe0c54d0064108 100644
--- a/ui/webui/resources/js/cr/ui/splitter.js
+++ b/ui/webui/resources/js/cr/ui/splitter.js
@@ -71,6 +71,15 @@ cr.define('cr.ui', function() {
                             true);
       this.addEventListener('touchstart', this.handleTouchStart_.bind(this),
                             true);
+      this.resizeNextElement_ = false;
+    },
+
+    /**
+     * @param {boolean=} resizeNext True if resize the next element.

[Dan Beam, 2016/03/07 18:14:20]

= means optional.  this should not be optional, so I'd remove the =

[ryoh, 2016/03/08 01:24:32]

Done.

+     *     By default, splitter resizes previous (left) element.
+     */
+    set resizeNextElement(resizeNext) {
+      this.resizeNextElement_ = !!resizeNext;

[Dan Beam, 2016/03/07 18:14:20]

you should only accept booleans (not undefined), so !! should not be needed

[ryoh, 2016/03/08 01:24:32]

Done.

     },
 
     /**
@@ -129,6 +138,26 @@ cr.define('cr.ui', function() {
     },
 
     /**
+     * @return {Element}
+     * @private
+     */
+    getResizeTarget_: function() {
+      return this.resizeNextElement_ ? this.nextElementSibling :
+                                       this.previousElementSibling;
+    },
+
+    /**
+     * Calculate witdh to resize target element.

[Dan Beam, 2016/03/07 18:14:20]

width

[ryoh, 2016/03/08 01:24:32]

Done.

+     * @param {number} deltaX horizontal drag amount
+     * @return {number}
+     * @private
+     */
+    calcDeltaX_: function(deltaX) {
+      return this.resizeNextElement_ ? -deltaX:
+                                       +deltaX;

[Dan Beam, 2016/03/07 18:14:20]

return this.resizeNextElement_ ? -deltaX : deltaX;

[ryoh, 2016/03/08 01:24:32]

Done.

+    },
+
+    /**
      * Handles the mousedown event which starts the dragging of the splitter.
      * @param {!Event} e The mouse event.
      * @private
@@ -205,10 +234,10 @@ cr.define('cr.ui', function() {
     handleSplitterDragStart: function() {
       // Use the computed width style as the base so that we can ignore what
       // box sizing the element has.
-      var leftComponent = this.previousElementSibling;
-      var doc = leftComponent.ownerDocument;
+      var targetElement = this.getResizeTarget_();
+      var doc = targetElement.ownerDocument;
       this.startWidth_ = parseFloat(
-          doc.defaultView.getComputedStyle(leftComponent).width);
+          doc.defaultView.getComputedStyle(targetElement).width);
     },
 
     /**
@@ -217,8 +246,9 @@ cr.define('cr.ui', function() {
      * @protected
      */
     handleSplitterDragMove: function(deltaX) {
-      var leftComponent = this.previousElementSibling;
-      leftComponent.style.width = this.startWidth_ + deltaX + 'px';
+      var targetElement = this.getResizeTarget_();
+      var newWidth = this.startWidth_ + this.calcDeltaX_(deltaX);
+      targetElement.style.width = newWidth + 'px';
     },
 
     /**
@@ -228,10 +258,10 @@ cr.define('cr.ui', function() {
      */
     handleSplitterDragEnd: function() {
       // Check if the size changed.
-      var leftComponent = this.previousElementSibling;
-      var doc = leftComponent.ownerDocument;
+      var targetElement = this.getResizeTarget_();
+      var doc = targetElement.ownerDocument;
       var computedWidth = parseFloat(
-          doc.defaultView.getComputedStyle(leftComponent).width);
+          doc.defaultView.getComputedStyle(targetElement).width);
       if (this.startWidth_ != computedWidth)
         cr.dispatchSimpleEvent(this, 'resize');
     },