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

ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.html

Index: ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.html
diff --git a/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.html b/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.html
index 28200326d9545b53e8d4504805e5f8b19c79a8cb..c48f14e54c0675215d70821058b00d2ac3d3371a 100644
--- a/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.html
+++ b/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.html
@@ -1,7 +1,10 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-media-query/iron-media-query.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-tooltip/paper-tooltip.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html">
+<link rel="import" href="chrome://resources/cr_elements/icons.html">
 
 <dom-module id="cr-toolbar">
   <template>
@@ -71,12 +74,50 @@
       :host([narrow_][showing-search_]) #leftContent {
         opacity: 0;
       }
+
+      paper-tooltip {

[tsergeant, 2016/09/16 01:23:08]

This doesn't layout correctly in RTL -- the tooltip goes off the side of the
screen, and the arrow points at the wrong thing.

(Also, please ignore the fact that the (i) icon is on the wrong side of the
screen in RTL. I'll fix that right now)

[Dan Beam, 2016/09/17 00:21:38]

Done.

+        --paper-tooltip: {
+          align-items: center;
+          display: flex;
+          font-size: 92.3%;
+          font-weight: 500;
+          padding: 6px 12px 6px 8px;
+          white-space: nowrap;
+        };
+      }
+
+      iron-icon {
+        --iron-icon-height: 20px;
+        --iron-icon-width: 20px;
+        -webkit-margin-start: 12px;
+      }
+
+      .arrow {
+        -webkit-clip-path: polygon(0 100%, 100% 100%, 50% 0);  /* Up arrow. */
+        background: inherit;
+        left: 10px;
+        height: 6px;
+        position: absolute;
+        top: -6px;
+        width: 12px;
+      }
     </style>
     <div id="leftContent">
       <template is="dom-if" if="[[showMenu]]">
         <paper-icon-button id="menuButton" icon="cr:menu" on-tap="onMenuTap_"
-            title="[[menuLabel]]">
+            title="[[titleIfNotShowMenuPromo_(menuLabel, showMenuPromo)]]"
+            aria-label$="[[menuLabel]]">
         </paper-icon-button>
+        <template is="dom-if" if="[[showMenuPromo]]">
+          <paper-tooltip for="menuButton" position="bottom" offset="20"
+              manual-mode fit-to-visible-bounds>
+            <div class="arrow"></div>
+            [[menuPromo]]
+            <iron-icon icon="cr:clear" on-tap="onMenuPromoCloseTap_"
+                role="button" tabindex="0" aria-label$="[[closeMenuPromo]]">

[tsergeant, 2016/09/16 01:23:08]

When I tab to the icon, I can't actually interact with it through the keyboard
(space and enter do nothing).

(I'm still okay with it not being tabbable)

[Dan Beam, 2016/09/17 00:21:38]

Done.

+            </iron-icon>
+          </paper-tooltip>
+        </template>
       </template>
       <h1>[[pageName]]</h1>
     </div>