[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..e5371035e8809f6578650c55353e2c51f504d6fb 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: {
+    hideSplitter_: Boolean,

[tsergeant, 2017/03/13 02:46:33]

Nit: \n, @private

[calamity, 2017/03/13 07:04:50]

Done.

+    sidebarWidth_: String,
+  },
+
   /** @override */
   attached: function() {
     chrome.bookmarks.getTree(function(results) {
@@ -19,6 +24,45 @@ Polymer({
 
       bookmarks.Store.getInstance().init(initialState);
       bookmarks.ApiListener.init();
+
+      Polymer.RenderStatus.afterNextRender(this, this.updateSplitter_);
     }.bind(this));
+
+    this.initializeSplitter_();
+    bookmarks.Store.getInstance().addObserver(this);

[tsergeant, 2017/03/13 02:46:33]

This line shouldn't be necessary? StoreClient already adds this as an observer

[calamity, 2017/03/13 07:04:50]

Oops. Done.

+  },
+
+  /**
+   * Set up the splitter and set the initial width from localStorage.

[tsergeant, 2017/03/13 02:46:33]

@private

[calamity, 2017/03/13 07:04:50]

Done.

+   */
+  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));
+  },
+
+  /**
+   * Shows/hides the splitter and sets the max and min width of the sidebar when
+   * resized by the splitter.
+   */
+  updateSplitter_: function() {

[tsergeant, 2017/03/13 02:46:33]

This only runs on startup, right?

So if the splitter starts out hidden and the window is resized down, will it
hide? (if not, it probably should)

In the case where it needs to be hidden, is there a flash of unhidden splitter
during startup? (if that does happen, can we made the splitter hidden by
default, then unhide it when necessary?)

[calamity, 2017/03/13 07:04:50]

Removed sneaky hiding behavior as discussed.

+    // TODO(calamity): Make this work when folders are closed on startup.
+    var sidebar = this.$.sidebar;
+    this.hideSplitter_ = sidebar.offsetHeight == sidebar.scrollHeight &&
+        `${sidebar.offsetWidth}px` ==
+            sidebar.getComputedStyleValue('min-width');
   },
 });