MD History: Add responsive layout which hides the sidebar in thin windows

ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.js

Index: ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.js
diff --git a/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.js b/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.js
index 83e6536d4d6f4cc7ba9ad21693165900e21ba446..b3c5ded788e684801681c369209314f0cef9c148 100644
--- a/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.js
+++ b/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.js
@@ -28,12 +28,65 @@ Polymer({
     /** @private */
     showingSearch_: {
       type: Boolean,
-      reflectToAttribute: true,
+      observer: 'onShowingSearchChanged_',
+      reflectToAttribute: true
     },
   },
 
+  /** @const {number} */
+  SEARCH_FIELD_DEFAULT_WIDTH: 580,
+
+  /**
+   * @type {?function()}
+   * @private
+   */
+  resizeListener_: null,

[calamity, 2016/06/17 03:02:00]

Can you just set the value here?

[tsergeant, 2016/06/20 05:05:57]

Nope, this.setSearchFieldPosition_ is undefined at this point.

+
+  /** @override */
+  attached: function() {
+    this.resizeListener_ = this.setSearchFieldPosition_.bind(this);
+    window.addEventListener('resize', this.resizeListener_);
+    this.setSearchFieldPosition_();
+  },
+
+  /** @override */
+  detached: function() {
+    window.removeEventListener('resize', this.resizeListener_);
+  },
+
   /** @return {!CrToolbarSearchFieldElement} */
   getSearchField: function() {
     return this.$.search;
-  }
+  },
+
+  /**
+   * @param {boolean} showingSearch
+   * @private

[calamity, 2016/06/17 03:02:00]

This insanity deserves a comment.

// Sets position of the search field based on its show state.

In fact, this method should probably be renamed to setSearchFieldPosition_ and
the one below should be updateSearchFieldPositionNoAnimate_ or similar.

[tsergeant, 2016/06/20 05:05:57]

Done. I went with updateSearchFieldPosition_ and
updateSearchFieldPositionNoAnimate_.

+   */
+  onShowingSearchChanged_: function(showingSearch) {
+    var searchField = this.$.search;
+    if (showingSearch) {
+      searchField.style.left = 0;
+      return;
+    }
+
+    var left = (window.innerWidth - this.SEARCH_FIELD_DEFAULT_WIDTH) / 2 -
+        this.$.centeredContent.offsetLeft;
+    searchField.style.left = left + 'px';
+  },
+
+  /** @private */
+  setSearchFieldPosition_: function() {
+    var searchFieldStyle = this.$.search.style;
+    searchFieldStyle.transition = 'none';
+    this.onShowingSearchChanged_(this.showingSearch_);
+    setTimeout(function() {
+      searchFieldStyle.transition = '';
+    }, 0);
+  },
+
+  /** @private */
+  onMenuClick_: function(e) {
+    this.fire('cr-toolbar-menu-click');
+  },
 });