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 a16b2c99b0b14c2d26eae0677c4b9ba1c8a3ceb3..4e4caf419f4e68199e946346bdce42511c3594aa 100644
--- a/chrome/browser/resources/md_downloads/vulcanized.html
+++ b/chrome/browser/resources/md_downloads/vulcanized.html
@@ -2125,6 +2125,50 @@ paper-button {
   </template>
 
   </dom-module>
+<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>
@@ -2854,17 +2898,10 @@ paper-button {
         width: 100%;
       }
 
-      /*
-       * Margin needs to be animated to prevent jumping around during
-       * opening/closing. -webkit-margin-start is not animatable, so we have to
-       * use regular margin-left/right instead.
-       */
-      :host-context([dir=ltr]):host([narrow][showing-search]) #icon {
-        margin-left: 18px;
-      }
-
-      :host-context([dir=rtl]):host([narrow][showing-search]) #icon {
-        margin-right: 18px;
+      :host-context([dir=ltr]):host([narrow][showing-search]) #icon,
+      :host-context([dir=ltr]):host([narrow][showing-search])
+          paper-spinner-lite {
+        -webkit-margin-start: 18px;
       }
     </style>
     <paper-spinner-lite active="[[isSpinnerShown_(spinnerActive, showingSearch)]]">
@@ -2947,11 +2984,36 @@ paper-button {
       :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>