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

chrome/browser/resources/md_history/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.
 
 /**
  * @typedef {{querying: boolean,
  *            searchTerm: string,
  *            results: ?Array<!HistoryEntry>,
  *            info: ?HistoryQuery,
  *            incremental: boolean,
  *            range: HistoryRange,
  *            groupedOffset: number,
  *            sessionList: ?Array<!ForeignSession>}}
  */
 var QueryState;
 
 Polymer({
   is: 'history-app',
 
   properties: {
     // The id of the currently selected page.
-    selectedPage_: String,
+    selectedPage_: {
+      type: String,
+      value: 'history-list',
+      observer: 'unselectAll'
+    },
 
     // Whether domain-grouped history is enabled.
     grouped_: {
       type: Boolean,
       reflectToAttribute: true
     },
 
     // Whether the first set of results have returned.
     firstLoad_: { type: Boolean, value: true },
 
@@ skipping 23 matching lines @@
     },
   },
 
   observers: [
     'searchTermChanged_(queryState_.searchTerm)',
     'groupedRangeChanged_(queryState_.range)',
   ],
 
   // TODO(calamity): Replace these event listeners with data bound properties.
   listeners: {
+    'cr-menu-tap': 'onMenuTap_',
     'history-checkbox-select': 'checkboxSelected',
     'unselect-all': 'unselectAll',
     'delete-selected': 'deleteSelected',
     'search-domain': 'searchDomain_',
     'load-more-history': 'loadMoreHistory_',
   },
 
   /** @override */
   ready: function() {
     this.grouped_ = loadTimeData.getBoolean('groupByDomain');
   },
 
+  /** @private */
+  onMenuTap_: function() {
+    this.$['side-bar'].toggle();
+  },
+
   /**
    * Listens for history-item being selected or deselected (through checkbox)
    * and changes the view of the top toolbar.
    * @param {{detail: {countAddition: number}}} e
    */
   checkboxSelected: function(e) {
     var toolbar = /** @type {HistoryToolbarElement} */(this.$.toolbar);
     toolbar.count += e.detail.countAddition;
   },
 
   /**
    * Listens for call to cancel selection and loops through all items to set
    * checkbox to be unselected.
+   * @private
    */
   unselectAll: function() {
     var historyList =
         /** @type {HistoryListElement} */(this.$['history-list']);
     var toolbar = /** @type {HistoryToolbarElement} */(this.$.toolbar);
     historyList.unselectAllItems(toolbar.count);
     toolbar.count = 0;
   },
 
   /**
@@ skipping 148 matching lines @@
    * @param {boolean} incremental
    * @param {string} searchTerm
    * @return {boolean} Whether a loading spinner should be shown (implies the
    *     backend is querying a new search term).
    * @private
    */
   shouldShowSpinner_: function(querying, incremental, searchTerm) {
     return querying && !incremental && searchTerm != '';
   }
 });