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

chrome/browser/resources/md_history/app.vulcanized.html

Index: chrome/browser/resources/md_history/app.vulcanized.html
diff --git a/chrome/browser/resources/md_history/app.vulcanized.html b/chrome/browser/resources/md_history/app.vulcanized.html
index 1f5df0040318cfe32ad8a1a2b880f5e11e907a07..2289b840193c2df3c436d0a08d41234d743be963 100644
--- a/chrome/browser/resources/md_history/app.vulcanized.html
+++ b/chrome/browser/resources/md_history/app.vulcanized.html
@@ -1460,8 +1460,53 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
     </defs>
   </svg>
 </iron-iconset-svg>
+<script src="chrome://resources/polymer/v1_0/web-animations-js/web-animations-next-lite.min.js"></script>
+
 
+<dom-module id="paper-tooltip" assetpath="chrome://resources/polymer/v1_0/paper-tooltip/">
+  <template>
+    <style>
+      :host {
+        display: block;
+        position: absolute;
+        outline: none;
+        z-index: 1002;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        -webkit-user-select: none;
+        user-select: none;
+        cursor: default;
+      }
+
+      #tooltip {
+        display: block;
+        outline: none;
+        @apply(--paper-font-common-base);
+        font-size: 10px;
+        line-height: 1;
+
+        background-color: var(--paper-tooltip-background, #616161);
+        opacity: var(--paper-tooltip-opacity, 0.9);
+        color: var(--paper-tooltip-text-color, white);
+
+        padding: 8px;
+        border-radius: 2px;
+
+        @apply(--paper-tooltip);
+      }
 
+      /* Thanks IE 10. */
+      .hidden {
+        display: none !important;
+      }
+    </style>
+
+    <div id="tooltip" class="hidden">
+      <content></content>
+    </div>
+  </template>
+
+  </dom-module>
 <dom-module id="iron-a11y-announcer" assetpath="chrome://resources/polymer/v1_0/iron-a11y-announcer/">
   <template>
     <style>
@@ -2436,11 +2481,36 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
       :host([narrow_][showing-search_]) #leftContent {
         opacity: 0;
       }
+
+      paper-tooltip {
+        --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;
+      }
     </style>
     <div id="leftContent">
       <template is="dom-if" if="[[showMenu]]">
-        <paper-icon-button id="menuButton" icon="cr:menu" on-tap="onMenuTap_" title="[[menuLabel]]">
+        <paper-icon-button id="menuButton" icon="cr:menu" on-tap="onMenuTap_" title="[[titleIfNotShowingMenuPromo_(menuLabel,
+                                                 showingMenuPromo_)]]">
         </paper-icon-button>
+        <template is="dom-if" if="[[showingMenuPromo_]]">
+          <paper-tooltip for="menuButton" position="bottom" offset="20" manual-mode="" fit-to-visible-bounds="">
+            [[menuPromo]]
+            <iron-icon icon="cr:clear" on-tap="onMenuPromoCloseTap_">
+            </iron-icon>
+          </paper-tooltip>
+        </template>
       </template>
       <h1>[[pageName]]</h1>
     </div>
@@ -2457,6 +2527,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
     </div>
   </template>
   </dom-module>
+<link rel="import" href="chrome://history/constants.html">
 <iron-iconset-svg size="24" name="history">
   <svg>
     <defs>
@@ -2697,7 +2768,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
       }
     </style>
     <div id="toolbar-container">
-      <cr-toolbar id="main-toolbar" page-name="$i18n{title}" clear-label="$i18n{clearSearch}" search-prompt="$i18n{searchPrompt}" hidden$="[[itemsSelected_]]" spinner-active="[[spinnerActive]]" show-menu="[[hasDrawer]]" menu-label="$i18n{historyMenuButton}" on-search-changed="onSearchChanged_">
+      <cr-toolbar id="main-toolbar" page-name="$i18n{title}" clear-label="$i18n{clearSearch}" search-prompt="$i18n{searchPrompt}" hidden$="[[itemsSelected_]]" spinner-active="[[spinnerActive]]" show-menu="[[hasDrawer]]" menu-label="$i18n{historyMenuButton}" on-search-changed="onSearchChanged_" menu-promo="$i18n{menuPromo}" show-menu-promo="[[showMenuPromo_]]" on-cr-menu-promo-shown="onMenuPromoShown_">
       </cr-toolbar>
       <template is="dom-if" if="[[itemsSelected_]]">
         <div id="overlay-wrapper" hidden$="[[!itemsSelected_]]">
@@ -2860,9 +2931,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 
 </dom-module>
 
-<script src="chrome://resources/polymer/v1_0/web-animations-js/web-animations-next-lite.min.js"></script>
-
-
 <dom-module id="iron-dropdown" assetpath="chrome://resources/polymer/v1_0/iron-dropdown/">
   <template>
     <style>
@@ -3062,7 +3130,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   </template>
 
   </dom-module>
-<link rel="import" href="chrome://history/constants.html">
 <dom-module id="iron-collapse" assetpath="chrome://resources/polymer/v1_0/iron-collapse/">
 
   <template>