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

chrome/browser/resources/md_downloads/vulcanized.html

Index: chrome/browser/resources/md_downloads/vulcanized.html
diff --git a/chrome/browser/resources/md_downloads/vulcanized.html b/chrome/browser/resources/md_downloads/vulcanized.html
index 5bf72194c3cf3f84257963b2f77025f6be931e18..29c95e2cd1ed1af5982f369f47d65e7996dff3eb 100644
--- a/chrome/browser/resources/md_downloads/vulcanized.html
+++ b/chrome/browser/resources/md_downloads/vulcanized.html
@@ -1813,6 +1813,49 @@ iron-icon {
   </template>
 
   </dom-module>
+<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 {
@@ -3343,11 +3386,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>