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..c457e421e9e60265dbcdf7bc14f44aae102d0b24 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.
+     *     By default, splitter resizes previous (left) element.
+     */
+    set resizeNextElement(resizeNext) {
+      this.resizeNextElement_ = resizeNext;
     },
 
     /**
@@ -129,6 +138,25 @@ cr.define('cr.ui', function() {
     },
 
     /**
+     * @return {Element}
+     * @private
+     */
+    getResizeTarget_: function() {
+      return this.resizeNextElement_ ? this.nextElementSibling :
+                                       this.previousElementSibling;
+    },
+
+    /**
+     * Calculate width to resize target element.
+     * @param {number} deltaX horizontal drag amount
+     * @return {number}
+     * @private
+     */
+    calcDeltaX_: function(deltaX) {
+      return this.resizeNextElement_ ? -deltaX : deltaX;
+    },
+
+    /**
      * Handles the mousedown event which starts the dragging of the splitter.
      * @param {!Event} e The mouse event.
      * @private
@@ -205,10 +233,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 +245,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 +257,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');
     },