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..61b89e6cd88bc45175454b7b75ec0d9fcbb2d57c 100644
--- a/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.js
+++ b/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.js
@@ -18,15 +18,19 @@ 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,
 
     // Controls whether the menu button is shown at the start of the menu.
-    showMenu: {
-      type: Boolean,
-      value: false
-    },
+    showMenu: Boolean,
+
+    // Whether to show menu promo tooltip.
+    showMenuPromo: Boolean,
 
     /** @private */
     narrow_: {
@@ -39,6 +43,13 @@ Polymer({
       type: Boolean,
       reflectToAttribute: true,
     },
+
+    /** @private */
+    showingMenuPromo_: {
+      type: Boolean,
+      computed: 'computeShowingMenuPromo_(showMenuPromo, narrow_)',

[tsergeant, 2016/08/25 04:51:00]

I think you want to tie this to showMenu_ rather than narrow_. The two
breakpoints are different in MD History.

[Dan Beam, 2016/09/09 03:12:08]

well, it's already in a <template is="dom-if" if="[[showMenu]]">, so that
simplifies the code a bit

+      observer: 'showingMenuPromoChanged_',
+    },
   },
 
   /** @return {!CrToolbarSearchFieldElement} */
@@ -46,8 +57,40 @@ Polymer({
     return this.$.search;
   },
 
+  /**
+   * @param {boolean} showMenuPromo
+   * @param {boolean} narrow
+   * @return {boolean} Whether to show the menu promo tooltip.
+   */
+  computeShowingMenuPromo_: function(showMenuPromo, narrow) {
+    return showMenuPromo && narrow;
+  },
+
   /** @private */
-  onMenuTap_: function(e) {
+  onMenuTap_: function() {
     this.fire('cr-menu-tap');
-  }
+    this.onMenuPromoCloseTap_();
+  },
+
+  /** @private */
+  onMenuPromoCloseTap_: function() {
+    this.fire('cr-menu-promo-shown');

[tsergeant, 2016/08/25 04:51:00]

This is potentially confusing, should this be cr-menu-promo-closed rather than
-shown?

[Dan Beam, 2016/09/09 03:12:08]

This didn't actually close it; it just told the parent what qualifies as "shown"
and parent closes.

But I changed the meaning of this to be more in line what you expect, I think.

+  },
+
+  /** @private */
+  showingMenuPromoChanged_: function() {
+    Polymer.RenderStatus.afterNextRender(this, function() {
+      if (this.showingMenuPromo_)
+        this.$$('paper-tooltip').show();
+    }.bind(this));
+  },
+
+  /**
+   * @param {string} title
+   * @param {boolean} showingMenuPromo
+   * @return {string} The title if the menu promo isn't showing, else "".
+   */
+  titleIfNotShowingMenuPromo_: function(title, showingMenuPromo) {
+    return showingMenuPromo ? '' : title;
+  },
 });