[MD Bookmarks] Add draggable sidebar.

chrome/browser/resources/md_bookmarks/app.js

Index: chrome/browser/resources/md_bookmarks/app.js
diff --git a/chrome/browser/resources/md_bookmarks/app.js b/chrome/browser/resources/md_bookmarks/app.js
index 23bb4984359987ce975042b8e94972673d61d652..576fa74aff6f15decf7be2ba862c450b06214d9a 100644
--- a/chrome/browser/resources/md_bookmarks/app.js
+++ b/chrome/browser/resources/md_bookmarks/app.js
@@ -9,6 +9,11 @@ Polymer({
     bookmarks.StoreClient,
   ],
 
+  properties: {
+    /** @private */
+    sidebarWidth_: String,
+  },
+
   /** @override */
   attached: function() {
     chrome.bookmarks.getTree(function(results) {
@@ -19,6 +24,32 @@ Polymer({
 
       bookmarks.Store.getInstance().init(initialState);
       bookmarks.ApiListener.init();
+
+    }.bind(this));
+
+    this.initializeSplitter_();
+  },
+
+  /**
+   * Set up the splitter and set the initial width from localStorage.
+   * @private
+   */
+  initializeSplitter_: function() {
+    var splitter = this.$.splitter;
+    cr.ui.Splitter.decorate(splitter);
+    var splitterTarget = splitter.previousElementSibling;
+
+    // The splitter persists the size of the left component in the local store.
+    if ('treeWidth' in window.localStorage) {
+      splitterTarget.style.width = window.localStorage['treeWidth'];
+      this.sidebarWidth_ = splitterTarget.getComputedStyleValue('width');
+    }
+
+    splitter.addEventListener('resize', function(e) {
+      window.localStorage['treeWidth'] = splitterTarget.style.width;
+      // TODO(calamity): This only fires when the resize is complete. This
+      // should be updated on every width change.
+      this.sidebarWidth_ = splitterTarget.getComputedStyleValue('width');
     }.bind(this));
   },
 });