MD History: Show sidebar next to content on wide screens

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.
 
 Polymer({
   is: 'history-app',
 
   properties: {
+    showSidebarFooter: Boolean,
+
     // The id of the currently selected page.
     selectedPage_: {type: String, value: 'history', observer: 'unselectAll'},
 
     // Whether domain-grouped history is enabled.
     grouped_: {type: Boolean, reflectToAttribute: true},
 
     /** @type {!QueryState} */
     queryState_: {
       type: Object,
       value: function() {
@@ skipping 24 matching lines @@
           sessionList: null,
         };
       }
     },
 
     // Route data for the current page.
     routeData_: Object,
 
     // The query params for the page.
     queryParams_: Object,
+
+    // True if the window is narrow enough for the page to have a drawer.
+    hasDrawer_: Boolean,
   },
 
   observers: [
     // routeData_.page <=> selectedPage
     'routeDataChanged_(routeData_.page)',
     'selectedPageChanged_(selectedPage_)',
 
     // queryParams_.q <=> queryState.searchTerm
     'searchTermChanged_(queryState_.searchTerm)',
     'searchQueryParamChanged_(queryParams_.q)',
 
   ],
 
   // 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_',
+    'history-close-drawer': 'closeDrawer_',
   },
 
   /** @override */
   ready: function() {
     this.grouped_ = loadTimeData.getBoolean('groupByDomain');
 
     cr.ui.decorate('command', cr.ui.Command);
     document.addEventListener('canExecute', this.onCanExecute_.bind(this));
     document.addEventListener('command', this.onCommand_.bind(this));
 
     // Redirect legacy search URLs to URLs compatible with material history.
     if (window.location.hash) {
       window.location.href = window.location.href.split('#')[0] + '?' +
           window.location.hash.substr(1);
     }
   },
 
   /** @private */
-  onMenuTap_: function() { this.$['side-bar'].toggle(); },
+  onMenuTap_: function() {
+    var drawer = this.$$('#drawer');
+    if (drawer)
+      drawer.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;
   },
 
   /**
-   * @return {HistorySideBarElement} The side bar of this history app.
-   */
-  getSideBar: function() {
-    return this.$['side-bar'];
-  },
-
-  /**
    * Listens for call to cancel selection and loops through all items to set
    * checkbox to be unselected.
    * @private
    */
   unselectAll: function() {
     var listContainer =
         /** @type {HistoryListContainerElement} */ (this.$['history']);
     var toolbar = /** @type {HistoryToolbarElement} */ (this.$.toolbar);
     listContainer.unselectAllItems(toolbar.count);
     toolbar.count = 0;
@@ skipping 35 matching lines @@
         break;
       case 'slash-command':
         e.canExecute = !this.$.toolbar.searchBar.isSearchFocused();
         break;
       case 'delete-command':
         e.canExecute = this.$.toolbar.count > 0;
         break;
     }
   },
 
+  /** @private */
+  onDrawerFocus_: function() {
+    var sideBar = this.$$('#drawer-side-bar');
+    if (sideBar)
+      sideBar.focusCurrentPage();
+  },
+
   /**
    * @param {string} searchTerm
    * @private
    */
   searchTermChanged_: function(searchTerm) {
     this.set('queryParams_.q', searchTerm || null);
     this.$['history'].queryHistory(false);
   },
 
   /**
@@ skipping 28 matching lines @@
   },
 
   /**
    * Update sign in state of synced device manager after user logs in or out.
    * @param {boolean} isUserSignedIn
    */
   updateSignInState: function(isUserSignedIn) {
     var syncedDeviceManagerElem =
       /** @type {HistorySyncedDeviceManagerElement} */this
           .$$('history-synced-device-manager');
-    syncedDeviceManagerElem.updateSignInState(isUserSignedIn);
+    if (syncedDeviceManagerElem)
+      syncedDeviceManagerElem.updateSignInState(isUserSignedIn);
   },
 
   /**
    * @param {string} selectedPage
    * @return {boolean}
    * @private
    */
   syncedTabsSelected_: function(selectedPage) {
     return selectedPage == 'syncedTabs';
   },
@@ skipping 32 matching lines @@
    * fallback selection will continue to be used after the corresponding item is
    * added as a child of iron-pages.
    * @param {string} selectedPage
    * @param {Array} items
    * @return {string}
    * @private
    */
   getSelectedPage_(selectedPage, items) {
     return selectedPage;
   },
+
+  /** @private */
+  closeDrawer_: function() {
+    var drawer = this.$$('#drawer');
+    if (drawer)
+      drawer.close();
+  },
 });