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

chrome/browser/resources/md_history/side_bar.js

Index: chrome/browser/resources/md_history/side_bar.js
diff --git a/chrome/browser/resources/md_history/side_bar.js b/chrome/browser/resources/md_history/side_bar.js
index 77272c8ece1960b4759b188ee296a451a5a48fc9..46291206a7a946a275ea1f235efa49181c46a74d 100644
--- a/chrome/browser/resources/md_history/side_bar.js
+++ b/chrome/browser/resources/md_history/side_bar.js
@@ -9,17 +9,26 @@ Polymer({
     selectedPage: {
       type: String,
       notify: true
-    }
+    },
   },
 
-  /**
-   * Handles menu selection changes.
-   * @param {Event} e
-   * @private
-   */
-  onSelect_: function(e) {
-    this.fire('unselect-all');
-    this.selectedPage = e.detail.item.getAttribute('view-id');
+  toggle: function() {
+    this.$.drawer.toggle();
+  },
+
+  /** @private */
+  onDrawerFocus_: function() {
+    // The desired behavior is for the app-drawer to focus the currently
+    // selected menu item on opening. However, it will always focus the first
+    // focusable child. Therefore, we set tabindex=0 on the app-drawer so that
+    // it will focus itself and then immediately delegate focus to the selected
+    // item in this listener.
+    this.$.menu.selectedItem.focus();
+  },
+
+  /** @private */
+  onSelectorActivate_: function() {
+    this.$.drawer.close();
   },
 
   /**