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 f5584ebc9c3ba802584f52490ddefd88c6a59df3..8670f97393b1c22211d7b55de138a62d9d9b25ee 100644
--- a/chrome/browser/resources/md_history/app.vulcanized.html
+++ b/chrome/browser/resources/md_history/app.vulcanized.html
@@ -1284,6 +1284,49 @@ paper-icon-button {
     </defs>
   </svg>
 </iron-iconset-svg>
+<dom-module id="paper-tooltip" assetpath="chrome://resources/polymer/v1_0/paper-tooltip/" css-build="shadow">
+  <template>
+    <style scope="paper-tooltip">: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;
+        font-family: var(--paper-font-common-base_-_font-family); -webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing);
+        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;
+
+        align-items: var(--paper-tooltip_-_align-items); display: var(--paper-tooltip_-_display, block); font-size: var(--paper-tooltip_-_font-size, 10px); font-weight: var(--paper-tooltip_-_font-weight); padding: var(--paper-tooltip_-_padding, 8px); white-space: var(--paper-tooltip_-_white-space);
+}
+
+.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/" css-build="shadow">
   <template>
     <style scope="iron-a11y-announcer">:host {
@@ -2858,11 +2901,39 @@ h1 {
   opacity: 0;
 }
 
+paper-tooltip {
+  --paper-tooltip_-_align-items:  center; --paper-tooltip_-_display:  flex; --paper-tooltip_-_font-size:  92.3%; --paper-tooltip_-_font-weight:  500; --paper-tooltip_-_padding:  6px 12px 6px 8px; --paper-tooltip_-_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);  
+        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]]">
+        <paper-icon-button id="menuButton" icon="cr:menu" on-tap="onMenuTap_" 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]]">
+            </iron-icon>
+          </paper-tooltip>
+        </template>
       </template>
       <h1>[[pageName]]</h1>
     </div>
@@ -2879,6 +2950,7 @@ h1 {
     </div>
   </template>
   </dom-module>
+<link rel="import" href="chrome://history/constants.html">
 <iron-iconset-svg size="24" name="history">
   <svg>
     <defs>
@@ -3214,7 +3286,7 @@ paper-tabs {
 
 </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]]" show-menu-promo="[[showMenuPromo_]]" menu-label="$i18n{historyMenuButton}" menu-promo="$i18n{menuPromo}" close-menu-promo="$i18n{closeMenuPromo}" on-search-changed="onSearchChanged_" on-cr-menu-promo-shown="onMenuPromoShown_">
         <div class="more-actions">
           <template is="dom-if" if="[[showSyncNotice]]">
             <button is="paper-icon-button-light" id="info-button" on-tap="onInfoButtonTap_" aria-label="$i18n{hasSyncedResultsDescription}">
@@ -3359,8 +3431,6 @@ paper-tabs {
     <content select=".footer"></content>
   </template>
   </dom-module>
-
-
 <link rel="import" href="chrome://resources/html/util.html">
 <dom-module id="cr-shared-menu" assetpath="chrome://resources/cr_elements/cr_shared_menu/" css-build="shadow">
   <template>
@@ -3583,7 +3653,6 @@ paper-tabs {
   </template>
 
   </dom-module>
-<link rel="import" href="chrome://history/constants.html">
 <dom-module id="iron-collapse" assetpath="chrome://resources/polymer/v1_0/iron-collapse/" css-build="shadow">
 
   <template>