MD History: Replace app-drawer with cr-drawer

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.
 
 cr.define('md_history', function() {
   var lazyLoadPromise = null;
   function ensureLazyLoaded() {
     if (!lazyLoadPromise) {
       lazyLoadPromise = new Promise(function(resolve, reject) {
         Polymer.Base.importHref(
@@ skipping 78 matching lines @@
     },
 
     showMenuPromo_: {
       type: Boolean,
       value: function() {
         return loadTimeData.getBoolean('showMenuPromo');
       },
     },
 
     // True if the window is narrow enough for the page to have a drawer.
-    hasDrawer_: Boolean,
+    hasDrawer_: {
+      type: Boolean,
+      observer: 'hasDrawerChanged_',
+    },
 
     // Used to display notices for profile sign-in status.
     showSidebarFooter: Boolean,
 
     hasSyncedResults: Boolean,
   },
 
   listeners: {
     'cr-toolbar-menu-promo-close': 'onCrToolbarMenuPromoClose_',
     'cr-toolbar-menu-promo-shown': 'onCrToolbarMenuPromoShown_',
@@ skipping 64 matching lines @@
     this.showMenuPromo_ = false;
   },
 
   /** @private */
   onCrToolbarMenuPromoShown_: function() {
     md_history.BrowserService.getInstance().menuPromoShown();
   },
 
   /** @private */
   onCrToolbarMenuTap_: function() {
-    var drawer = this.$$('#drawer');
-    if (drawer)
-      drawer.toggle();
+    var drawer = /** @type {!CrDrawerElement} */ (this.$.drawer.get());
+    drawer.align = document.documentElement.dir == 'ltr' ? 'left' : 'right';
+    drawer.toggle();
   },
 
   /**
    * @param {!CustomEvent} e
    * @private
    */
   onOpenedChanged_: function(e) {
     if (e.detail.value)
       this.showMenuPromo_ = false;
   },
@@ skipping 153 matching lines @@
         if (!this.$.content.selectedItem)
           return;
         this.scrollTarget =
             this.$.content.selectedItem.getContentScrollTarget();
         this._scrollHandler();
       }.bind(this));
     }.bind(this));
     this.recordHistoryPageView_();
   },
 
+  /** @private */
+  hasDrawerChanged_: function() {
+    var drawer = /** @type {?CrDrawerElement} */ (this.$.drawer.getIfExists());
+    if (!this.hasDrawer_ && drawer && drawer.open)
+      drawer.closeDrawer();
+  },
+
   /**
    * This computed binding is needed to make the iron-pages selector update when
    * the synced-device-manager is instantiated for the first time. Otherwise the
    * 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_: function(selectedPage, items) {
     return selectedPage;
   },
 
   /** @private */
   closeDrawer_: function() {
-    var drawer = this.$$('#drawer');
-    if (drawer)
-      drawer.close();
+    var drawer = this.$.drawer.get();
+    if (drawer && drawer.open)
+      drawer.closeDrawer();
   },
 
   /** @private */
   recordHistoryPageView_: function() {
     var histogramValue = HistoryPageViewHistogram.END;
     switch (this.selectedPage_) {
       case 'syncedTabs':
         histogramValue = this.isUserSignedIn_ ?
             HistoryPageViewHistogram.SYNCED_TABS :
             HistoryPageViewHistogram.SIGNIN_PROMO;
@@ skipping 11 matching lines @@
             break;
         }
         break;
     }
 
     md_history.BrowserService.getInstance().recordHistogram(
         'History.HistoryPageView', histogramValue,
         HistoryPageViewHistogram.END);
   },
 });