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..0957deba2932633aeae5fdf6cef5be665535aac5 100644
--- a/chrome/browser/resources/md_history/side_bar.js
+++ b/chrome/browser/resources/md_history/side_bar.js
@@ -9,17 +9,24 @@ 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() {
+    // app-drawer will focus its first focusable child when it opens. Instead,
+    // make it focus itself (with tabindex=0), and then immediately delegate
+    // focus to the selected item.

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

I don't fully understand this comment. What problems does focusing the first
focusable child have?

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

I've expanded the comment to try and explain it. Let me know if I need to keep
tweaking it.

+    this.$.menu.selectedItem.focus();
+  },
+
+  /** @private */
+  onSelectorActivate_: function() {
+    this.$.drawer.close();
   },
 
   /**