MD History: promote menu button to show clear browsing data in narrow mode

ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.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: 'cr-toolbar',
 
   properties: {
     // Name to display in the toolbar, in titlecase.
     pageName: String,
 
     // Prompt text to display in the search field.
     searchPrompt: String,
 
     // Tooltip to display on the clear search button.
     clearLabel: String,
 
     // Tooltip to display on the menu button.
     menuLabel: String,
 
+    // Promotional toolstip string, shown in narrow mode if showMenuPromo is
+    // true.
+    menuPromo: String,
+
     // Value is proxied through to cr-toolbar-search-field. When true,
     // the search field will show a processing spinner.
     spinnerActive: Boolean,
 
     // Controls whether the menu button is shown at the start of the menu.
     showMenu: {
       type: Boolean,
       value: false
     },
 
+    // Whether to show menu promo tooltip.
+    showMenuPromo: {
+      type: Boolean,
+      value: false,
+    },
+
+    closeMenuPromo: String,
+
     /** @private */
     narrow_: {
       type: Boolean,
       reflectToAttribute: true
     },
 
     /** @private */
     showingSearch_: {
       type: Boolean,
       reflectToAttribute: true,
     },
   },
 
+  observers: [
+    'possiblyShowMenuPromo_(showMenu, showMenuPromo, showingSearch_)',
+  ],
+
   /** @return {!CrToolbarSearchFieldElement} */
   getSearchField: function() {
     return this.$.search;
   },
 
   /** @private */
-  onMenuTap_: function(e) {
+  onClosePromoTap_: function() {
+    this.showMenuPromo = false;
+  },
+
+  /** @private */
+  onMenuTap_: function() {
     this.fire('cr-menu-tap');
-  }
+    this.onClosePromoTap_();
+  },
+
+  /** @private */
+  possiblyShowMenuPromo_: function() {
+    Polymer.RenderStatus.afterNextRender(this, function() {
+      if (this.showMenu && this.showMenuPromo && !this.showingSearch_) {
+        this.$$('#menuPromo').animate({
+          opacity: [0, .9],
+        }, /** @type {!KeyframeEffectOptions} */({
+          duration: 500,
+          fill: 'forwards'
+        }));
+        this.fire('cr-menu-promo-shown');
+      }
+    }.bind(this));
+  },
+
+  /**
+   * @param {string} title
+   * @param {boolean} showMenuPromo
+   * @return {string} The title if the menu promo isn't showing, else "".
+   */
+  titleIfNotShowMenuPromo_: function(title, showMenuPromo) {
+    return showMenuPromo ? '' : title;
+  },
 });