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
-    },
+    showMenu: Boolean,
+
+    // Whether to show menu promo tooltip.
+    showMenuPromo: Boolean,
 
     /** @private */
     narrow_: {
       type: Boolean,
       reflectToAttribute: true
     },
 
     /** @private */
     showingSearch_: {
       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} */
   getSearchField: function() {
     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;
+  },
 });