[MD Bookmarks] Add draggable sidebar.

chrome/browser/resources/md_bookmarks/app.js

 // Copyright 2016 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.
 
 Polymer({
   is: 'bookmarks-app',
 
   behaviors: [
     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) {
       var nodeList = bookmarks.util.normalizeNodes(results[0]);
       var initialState = bookmarks.util.createEmptyState();
       initialState.nodes = nodeList;
       initialState.selectedFolder = nodeList['0'].children[0];
 
       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');
+  },
 });