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

chrome/browser/resources/md_downloads/crisper.js

 // Copyright (c) 2013 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 function assert(condition, opt_message) {
   if (!condition) {
     var message = 'Assertion failed';
     if (opt_message) message = message + ': ' + opt_message;
     var error = new Error(message);
     var global = function() {
       return this;
@@ skipping 715 matching lines @@
 
 function elide(original, maxLength) {
   if (original.length <= maxLength) return original;
   return original.substring(0, maxLength - 1) + '…';
 }
 
 function quoteString(str) {
   return str.replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:])/g, '\\$1');
 }
 
+function listenOnce(target, eventNames, callback) {
+  if (!Array.isArray(eventNames)) eventNames = eventNames.split(/ +/);
+  var removeAllAndCallCallback = function(event) {
+    eventNames.forEach(function(eventName) {
+      target.removeEventListener(eventName, removeAllAndCallCallback, false);
+    });
+    return callback(event);
+  };
+  eventNames.forEach(function(eventName) {
+    target.addEventListener(eventName, removeAllAndCallCallback, false);
+  });
+}
+
 // <if expr="is_ios">
 if (!('key' in KeyboardEvent.prototype)) {
   Object.defineProperty(KeyboardEvent.prototype, 'key', {
     get: function() {
       if (this.keyCode >= 48 && this.keyCode <= 57) return String.fromCharCode(this.keyCode);
       if (this.keyCode >= 65 && this.keyCode <= 90) {
         var result = String.fromCharCode(this.keyCode).toLowerCase();
         if (this.shiftKey) result = result.toUpperCase();
         return result;
       }
@@ skipping 5350 matching lines @@
     }
     this._mq = window.matchMedia(query);
     this._add();
     this.queryHandler(this._mq);
   },
   queryHandler: function(mq) {
     this._setQueryMatches(mq.matches);
   }
 });
 
+Polymer({
+  is: 'paper-tooltip',
+  hostAttributes: {
+    role: 'tooltip',
+    tabindex: -1
+  },
+  behaviors: [ Polymer.NeonAnimationRunnerBehavior ],
+  properties: {
+    "for": {
+      type: String,
+      observer: '_findTarget'
+    },
+    manualMode: {
+      type: Boolean,
+      value: false,
+      observer: '_manualModeChanged'
+    },
+    position: {
+      type: String,
+      value: 'bottom'
+    },
+    fitToVisibleBounds: {
+      type: Boolean,
+      value: false
+    },
+    offset: {
+      type: Number,
+      value: 14
+    },
+    marginTop: {
+      type: Number,
+      value: 14
+    },
+    animationDelay: {
+      type: Number,
+      value: 500
+    },
+    animationConfig: {
+      type: Object,
+      value: function() {
+        return {
+          entry: [ {
+            name: 'fade-in-animation',
+            node: this,
+            timing: {
+              delay: 0
+            }
+          } ],
+          exit: [ {
+            name: 'fade-out-animation',
+            node: this
+          } ]
+        };
+      }
+    },
+    _showing: {
+      type: Boolean,
+      value: false
+    }
+  },
+  listeners: {
+    'neon-animation-finish': '_onAnimationFinish'
+  },
+  get target() {
+    var parentNode = Polymer.dom(this).parentNode;
+    var ownerRoot = Polymer.dom(this).getOwnerRoot();
+    var target;
+    if (this.for) {
+      target = Polymer.dom(ownerRoot).querySelector('#' + this.for);
+    } else {
+      target = parentNode.nodeType == Node.DOCUMENT_FRAGMENT_NODE ? ownerRoot.host : parentNode;
+    }
+    return target;
+  },
+  attached: function() {
+    this._findTarget();
+  },
+  detached: function() {
+    if (!this.manualMode) this._removeListeners();
+  },
+  show: function() {
+    if (this._showing) return;
+    if (Polymer.dom(this).textContent.trim() === '') return;
+    this.cancelAnimation();
+    this._showing = true;
+    this.toggleClass('hidden', false, this.$.tooltip);
+    this.updatePosition();
+    this.animationConfig.entry[0].timing = this.animationConfig.entry[0].timing || {};
+    this.animationConfig.entry[0].timing.delay = this.animationDelay;
+    this._animationPlaying = true;
+    this.playAnimation('entry');
+  },
+  hide: function() {
+    if (!this._showing) {
+      return;
+    }
+    if (this._animationPlaying) {
+      this.cancelAnimation();
+      this._showing = false;
+      this._onAnimationFinish();
+      return;
+    }
+    this._showing = false;
+    this._animationPlaying = true;
+    this.playAnimation('exit');
+  },
+  updatePosition: function() {
+    if (!this._target || !this.offsetParent) return;
+    var offset = this.offset;
+    if (this.marginTop != 14 && this.offset == 14) offset = this.marginTop;
+    var parentRect = this.offsetParent.getBoundingClientRect();
+    var targetRect = this._target.getBoundingClientRect();
+    var thisRect = this.getBoundingClientRect();
+    var horizontalCenterOffset = (targetRect.width - thisRect.width) / 2;
+    var verticalCenterOffset = (targetRect.height - thisRect.height) / 2;
+    var targetLeft = targetRect.left - parentRect.left;
+    var targetTop = targetRect.top - parentRect.top;
+    var tooltipLeft, tooltipTop;
+    switch (this.position) {
+     case 'top':
+      tooltipLeft = targetLeft + horizontalCenterOffset;
+      tooltipTop = targetTop - thisRect.height - offset;
+      break;
+
+     case 'bottom':
+      tooltipLeft = targetLeft + horizontalCenterOffset;
+      tooltipTop = targetTop + targetRect.height + offset;
+      break;
+
+     case 'left':
+      tooltipLeft = targetLeft - thisRect.width - offset;
+      tooltipTop = targetTop + verticalCenterOffset;
+      break;
+
+     case 'right':
+      tooltipLeft = targetLeft + targetRect.width + offset;
+      tooltipTop = targetTop + verticalCenterOffset;
+      break;
+    }
+    if (this.fitToVisibleBounds) {
+      if (tooltipLeft + thisRect.width > window.innerWidth) {
+        this.style.right = '0px';
+        this.style.left = 'auto';
+      } else {
+        this.style.left = Math.max(0, tooltipLeft) + 'px';
+        this.style.right = 'auto';
+      }
+      if (tooltipTop + thisRect.height > window.innerHeight) {
+        this.style.bottom = '0px';
+        this.style.top = 'auto';
+      } else {
+        this.style.top = Math.max(0, tooltipTop) + 'px';
+        this.style.bottom = 'auto';
+      }
+    } else {
+      this.style.left = tooltipLeft + 'px';
+      this.style.top = tooltipTop + 'px';
+    }
+  },
+  _addListeners: function() {
+    if (this._target) {
+      this.listen(this._target, 'mouseenter', 'show');
+      this.listen(this._target, 'focus', 'show');
+      this.listen(this._target, 'mouseleave', 'hide');
+      this.listen(this._target, 'blur', 'hide');
+      this.listen(this._target, 'tap', 'hide');
+    }
+    this.listen(this, 'mouseenter', 'hide');
+  },
+  _findTarget: function() {
+    if (!this.manualMode) this._removeListeners();
+    this._target = this.target;
+    if (!this.manualMode) this._addListeners();
+  },
+  _manualModeChanged: function() {
+    if (this.manualMode) this._removeListeners(); else this._addListeners();
+  },
+  _onAnimationFinish: function() {
+    this._animationPlaying = false;
+    if (!this._showing) {
+      this.toggleClass('hidden', true, this.$.tooltip);
+    }
+  },
+  _removeListeners: function() {
+    if (this._target) {
+      this.unlisten(this._target, 'mouseenter', 'show');
+      this.unlisten(this._target, 'focus', 'show');
+      this.unlisten(this._target, 'mouseleave', 'hide');
+      this.unlisten(this._target, 'blur', 'hide');
+      this.unlisten(this._target, 'tap', 'hide');
+    }
+    this.unlisten(this, 'mouseenter', 'hide');
+  }
+});
+
 (function() {
   'use strict';
   Polymer.IronA11yAnnouncer = Polymer({
     is: 'iron-a11y-announcer',
     properties: {
       mode: {
         type: String,
         value: 'polite'
       },
       _text: {
@@ skipping 618 matching lines @@
 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 Polymer({
   is: 'cr-toolbar',
   properties: {
     pageName: String,
     searchPrompt: String,
     clearLabel: String,
     menuLabel: String,
+    menuPromo: String,
     spinnerActive: Boolean,
     showMenu: {
       type: Boolean,
       value: false
     },
+    showMenuPromo: {
+      type: Boolean,
+      value: false
+    },
     narrow_: {
       type: Boolean,
       reflectToAttribute: true
     },
     showingSearch_: {
       type: Boolean,
       reflectToAttribute: true
     }
   },
+  observers: [ 'possiblyShowMenuPromo_(showMenu, showMenuPromo, showingSearch_)' ],
   getSearchField: function() {
     return this.$.search;
   },
-  onMenuTap_: function(e) {
+  onMenuTap_: function() {
     this.fire('cr-menu-tap');
+    this.onMenuPromoCloseTap_();
+  },
+  onMenuPromoCloseTap_: function() {
+    this.showMenuPromo = false;
+  },
+  possiblyShowMenuPromo_: function() {
+    Polymer.RenderStatus.afterNextRender(this, function() {
+      if (this.showMenu && this.showMenuPromo && !this.showingSearch_) {
+        this.$$('paper-tooltip').show();
+        this.fire('cr-menu-promo-shown');
+      }
+    }.bind(this));
+  },
+  titleIfNotShowMenuPromo_: function(title, showMenuPromo) {
+    return showMenuPromo ? '' : title;
   }
 });
 
 // Copyright 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 cr.define('downloads', function() {
   var Toolbar = Polymer({
     is: 'downloads-toolbar',
     properties: {
@@ skipping 184 matching lines @@
   };
   return {
     Manager: Manager
   };
 });
 
 // Copyright 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 window.addEventListener('load', downloads.Manager.onLoad);