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

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

 <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>
     <style>
       :host {
         --cr-toolbar-field-width: 580px;
         color: #fff;
         display: flex;
         height: 56px;
       }
@@ skipping 49 matching lines @@
         @apply(--cr-toolbar-right-content-wide);
       }
 
       :host([narrow_]) #centeredContent {
         justify-content: flex-end;
       }
 
       :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>
 
     <div id="centeredContent">
       <cr-toolbar-search-field id="search" narrow="[[narrow_]]"
           label="[[searchPrompt]]" clear-label="[[clearLabel]]"
           spinner-active="[[spinnerActive]]"
           showing-search="{{showingSearch_}}">
       </cr-toolbar-search-field>
       <iron-media-query query="(max-width: 900px)" query-matches="{{narrow_}}">
       </iron-media-query>
     </div>
 
     <div id="rightContent">
       <content select=".more-actions"></content>
     </div>
   </template>
   <script src="cr_toolbar.js"></script>
 </dom-module>