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

ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.js

Index: ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.js
diff --git a/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.js b/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.js
index 3a1cfd82611a4f1c22a6b2aa85edc973cb9bdf93..d69e634e6efad675b2df266494ae744f1951f205 100644
--- a/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.js
+++ b/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.js
@@ -18,6 +18,10 @@ Polymer({
     // 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,
@@ -28,6 +32,14 @@ Polymer({
       value: false
     },
 
+    // Whether to show menu promo tooltip.
+    showMenuPromo: {
+      type: Boolean,
+      value: false,
+    },
+
+    closeMenuPromo: String,
+
     /** @private */
     narrow_: {
       type: Boolean,
@@ -41,13 +53,47 @@ Polymer({
     },
   },
 
+  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;
+  },
 });