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

chrome/browser/resources/md_history/side_bar.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: 'history-side-bar',
 
   properties: {
     selectedPage: {
       type: String,
       notify: true
-    }
+    },
+  },
+
+  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();
   },
 
   /**
-   * Handles menu selection changes.
-   * @param {Event} e
-   * @private
-   */
-  onSelect_: function(e) {
-    this.fire('unselect-all');
-    this.selectedPage = e.detail.item.getAttribute('view-id');
-  },
-
-  /**
    * Relocates the user to the clear browsing data section of the settings page.
    * @private
    */
   onClearBrowsingDataTap_: function() {
     window.location.href = 'chrome://settings/clearBrowserData';
   },
 });