Add a split pane between the tree and the list.

BUG=39093
TEST=Drag the splitter. Reload the bookmark manager and the size of the tree should be persisted.

Review URL: http://codereview.chromium.org/1519016

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@43405 0039d316-1c4b-4281-b951-d872f2087c98

3 files changed, 174 insertions, 11 deletions

diff --git a/chrome/browser/resources/bookmark_manager/css/bmm.css b/chrome/browser/resources/bookmark_manager/css/bmm.css
index d63d427..63cb6e4 100644
--- a/chrome/browser/resources/bookmark_manager/css/bmm.css
+++ b/chrome/browser/resources/bookmark_manager/css/bmm.css
@@ -166,18 +166,22 @@ html[os=mac] .tree-row[selected] > .tree-label {
 
 .main {
   position: absolute;
+  display: -webkit-box;
   top: 85px;
   left: 0;
   right: 0;
   bottom: 0;
 }
 
+.main > * {
+  height: 100%;
+}
+
 #tree-container {
-  position: absolute;
-  left: 5px;
   width: 200px;
-  top: 0;
-  bottom: 0;
+  /* min-width and max-width are used by the split pane. */
+  min-width: 50px;
+  max-width: 50%;
   overflow: auto;
   -webkit-box-sizing: border-box;
   padding: 0px 5px 5px 5px;
@@ -190,15 +194,20 @@ html[os=mac] .tree-row[selected] > .tree-label {
 }
 
 #list {
-  position: absolute;
-  left: 205px;
-  right: 0;
-  top: 0;
-  bottom: 0;
+  -webkit-box-flex: 1;
   -webkit-box-sizing: border-box;
   padding: 0 5px 5px 5px;
 }
 
+.splitter {
+  width: 5px;
+  cursor: e-resize;
+}
+
+html[os=mac] .splitter {
+  cursor: col-resize;
+}
+
 .logo {
   -webkit-appearance: none;
   border: 0;
diff --git a/chrome/browser/resources/bookmark_manager/js/cr/ui/splitpane.js b/chrome/browser/resources/bookmark_manager/js/cr/ui/splitpane.js
new file mode 100644
index 0000000..e969afb
--- /dev/null
+++ b/chrome/browser/resources/bookmark_manager/js/cr/ui/splitpane.js
@@ -0,0 +1,145 @@
+// Copyright (c) 2010 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @fileoverview This implements a split pane control.
+ *
+ * The split pane is a hbox (display: -webkit-box) with at least two elements.
+ * The second element is the splitter. The width of the first element determines
+ * the position of the splitter.
+ *
+ * <div class=split-pane>
+ *   <div class=left>...</div>
+ *   <div class=splitter></div>
+ *   ...
+ * </div>
+ *
+ */
+
+cr.define('cr.ui', function() {
+  // TODO(arv): Currently this only supports horizontal layout.
+  // TODO(arv): This ignores min-width and max-width of the elements to the
+  // right of the splitter.
+
+  /**
+   * Returns the computed style width of an element.
+   * @param {!Element} el The element to get the width of.
+   * @return {number} The width in pixels.
+   */
+  function getComputedWidth(el) {
+    return parseInt(el.ownerDocument.defaultView.getComputedStyle(el).width,
+                    10);
+  }
+
+  /**
+   * Creates a new split pane element.
+   * @param {Object=} opt_propertyBag Optional properties.
+   * @constructor
+   * @extends {HTMLDivElement}
+   */
+  var SplitPane = cr.ui.define('div');
+
+  SplitPane.prototype = {
+    __proto__: HTMLDivElement.prototype,
+
+    /**
+     * Initializes the element.
+     */
+    decorate: function() {
+      this.addEventListener('mousedown', cr.bind(this.handleMouseDown_, this),
+                            true);
+    },
+
+    /**
+     * Starts the dragging of the splitter.
+     * @param {!Event} e The mouse event that started the drag.
+     */
+    startDrag: function(e) {
+      if (!this.boundHandleMouseMove_) {
+        this.boundHandleMouseMove_ = cr.bind(this.handleMouseMove_, this);
+        this.boundHandleMouseUp_ = cr.bind(this.handleMouseUp_, this);
+      }
+
+      var doc = this.ownerDocument;
+
+      // Use capturing events on the document to get events when the mouse
+      // leaves the document.
+      doc.addEventListener('mousemove',this.boundHandleMouseMove_, true);
+      doc.addEventListener('mouseup', this.boundHandleMouseUp_, true);
+
+      // Use the computed width style as the base so that we can ignore what
+      // box sizing the element has.
+      var leftComponent = this.firstElementChild;
+      var computedWidth = getComputedWidth(leftComponent);
+      this.startX_ = e.screenX;
+      this.startWidth_ = computedWidth;
+    },
+
+    /**
+     * Ends the dragging of the splitter. This fires a "resize" event if the
+     * size changed.
+     */
+    endDrag: function() {
+      var doc = this.ownerDocument;
+      doc.removeEventListener('mousemove', this.boundHandleMouseMove_, true);
+      doc.removeEventListener('mouseup', this.boundHandleMouseUp_, true);
+
+      // Check if the size changed.
+      var leftComponent = this.firstElementChild;
+      var computedWidth = getComputedWidth(leftComponent);
+      if (this.startWidth_ != computedWidth)
+        cr.dispatchSimpleEvent(this, 'resize');
+    },
+
+    /**
+     * Handles the mouse down event which starts the dragging of the splitter.
+     * @param {!Event} e The mouse event.
+     * @private
+     */
+    handleMouseDown_: function(e) {
+      var splitter = this.splitter;
+      if (splitter && splitter.contains(e.target)) {
+        this.startDrag(e);
+        // Default action is to start selection and to move focus.
+        e.preventDefault();
+      }
+    },
+
+    /**
+     * Handles the mouse move event which moves the splitter as the user moves
+     * the mouse.
+     * @param {!Event} e The mouse event.
+     * @private
+     */
+    handleMouseMove_: function(e) {
+      var leftComponent = this.firstElementChild;
+      var rtl = this.ownerDocument.defaultView.getComputedStyle(this).
+          direction == 'rtl';
+      var dirMultiplier = rtl ? -1 : 1;
+      leftComponent.style.width = this.startWidth_ +
+          dirMultiplier * (e.screenX - this.startX_) + 'px';
+    },
+
+    /**
+     * Handles the mouse up event which ends the dragging of the splitter.
+     * @param {!Event} e The mouse event.
+     * @private
+     */
+    handleMouseUp_: function(e) {
+      this.endDrag();
+    },
+
+    /**
+     * The element used as the splitter.
+     * @type {HTMLElement}
+     */
+    get splitter() {
+      return this.children[1];
+    }
+  };
+
+  return {
+    SplitPane: SplitPane
+  }
+});
diff --git a/chrome/browser/resources/bookmark_manager/main.html b/chrome/browser/resources/bookmark_manager/main.html
index 230fd97..bdff3f1 100644
--- a/chrome/browser/resources/bookmark_manager/main.html
+++ b/chrome/browser/resources/bookmark_manager/main.html
@@ -27,6 +27,7 @@ found in the LICENSE file.
 <script src="js/cr/ui/listitem.js"></script>
 <script src="js/cr/ui/list.js"></script>
 <script src="js/cr/ui/tree.js"></script>
+<script src="js/cr/ui/splitpane.js"></script>
 <script src="js/cr/ui/command.js"></script>
 <script src="js/cr/ui/menuitem.js"></script>
 <script src="js/cr/ui/menu.js"></script>
@@ -75,6 +76,7 @@ if (cr.isMac)
   <div id=tree-container>
     <tree id=tree tabindex=2></tree>
   </div>
+  <div class=splitter></div>
   <list id=list tabindex=2></list>
 </div>
 
@@ -150,8 +152,15 @@ var bookmarkCache = {
   }
 };
 
-</script>
-<script>
+var splitPane = document.querySelector('.main');
+cr.ui.SplitPane.decorate(splitPane);
+
+// The split pane persists the size of the left component in the local store.
+if ('treeWidth' in localStorage)
+  splitPane.firstElementChild.style.width = localStorage['treeWidth'];
+splitPane.addEventListener('resize', function(e) {
+  localStorage['treeWidth'] = splitPane.firstElementChild.style.width;
+});
 
 BookmarkList.decorate(list);