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

chrome/browser/resources/md_history/app.crisper.js

Index: chrome/browser/resources/md_history/app.crisper.js
diff --git a/chrome/browser/resources/md_history/app.crisper.js b/chrome/browser/resources/md_history/app.crisper.js
index f6215c824358efa55af672404a9d244faa018c30..0096ee4e7d55a87a4f637f0654ca29fb8f61517f 100644
--- a/chrome/browser/resources/md_history/app.crisper.js
+++ b/chrome/browser/resources/md_history/app.crisper.js
@@ -3863,6 +3863,432 @@ Polymer({
   }
 });
 
+Polymer.NeonAnimatableBehavior = {
+  properties: {
+    animationConfig: {
+      type: Object
+    },
+    entryAnimation: {
+      observer: '_entryAnimationChanged',
+      type: String
+    },
+    exitAnimation: {
+      observer: '_exitAnimationChanged',
+      type: String
+    }
+  },
+  _entryAnimationChanged: function() {
+    this.animationConfig = this.animationConfig || {};
+    this.animationConfig['entry'] = [ {
+      name: this.entryAnimation,
+      node: this
+    } ];
+  },
+  _exitAnimationChanged: function() {
+    this.animationConfig = this.animationConfig || {};
+    this.animationConfig['exit'] = [ {
+      name: this.exitAnimation,
+      node: this
+    } ];
+  },
+  _copyProperties: function(config1, config2) {
+    for (var property in config2) {
+      config1[property] = config2[property];
+    }
+  },
+  _cloneConfig: function(config) {
+    var clone = {
+      isClone: true
+    };
+    this._copyProperties(clone, config);
+    return clone;
+  },
+  _getAnimationConfigRecursive: function(type, map, allConfigs) {
+    if (!this.animationConfig) {
+      return;
+    }
+    if (this.animationConfig.value && typeof this.animationConfig.value === 'function') {
+      this._warn(this._logf('playAnimation', "Please put 'animationConfig' inside of your components 'properties' object instead of outside of it."));
+      return;
+    }
+    var thisConfig;
+    if (type) {
+      thisConfig = this.animationConfig[type];
+    } else {
+      thisConfig = this.animationConfig;
+    }
+    if (!Array.isArray(thisConfig)) {
+      thisConfig = [ thisConfig ];
+    }
+    if (thisConfig) {
+      for (var config, index = 0; config = thisConfig[index]; index++) {
+        if (config.animatable) {
+          config.animatable._getAnimationConfigRecursive(config.type || type, map, allConfigs);
+        } else {
+          if (config.id) {
+            var cachedConfig = map[config.id];
+            if (cachedConfig) {
+              if (!cachedConfig.isClone) {
+                map[config.id] = this._cloneConfig(cachedConfig);
+                cachedConfig = map[config.id];
+              }
+              this._copyProperties(cachedConfig, config);
+            } else {
+              map[config.id] = config;
+            }
+          } else {
+            allConfigs.push(config);
+          }
+        }
+      }
+    }
+  },
+  getAnimationConfig: function(type) {
+    var map = {};
+    var allConfigs = [];
+    this._getAnimationConfigRecursive(type, map, allConfigs);
+    for (var key in map) {
+      allConfigs.push(map[key]);
+    }
+    return allConfigs;
+  }
+};
+
+Polymer.NeonAnimationRunnerBehaviorImpl = {
+  _configureAnimations: function(configs) {
+    var results = [];
+    if (configs.length > 0) {
+      for (var config, index = 0; config = configs[index]; index++) {
+        var neonAnimation = document.createElement(config.name);
+        if (neonAnimation.isNeonAnimation) {
+          var result = null;
+          try {
+            result = neonAnimation.configure(config);
+            if (typeof result.cancel != 'function') {
+              result = document.timeline.play(result);
+            }
+          } catch (e) {
+            result = null;
+            console.warn('Couldnt play', '(', config.name, ').', e);
+          }
+          if (result) {
+            results.push({
+              neonAnimation: neonAnimation,
+              config: config,
+              animation: result
+            });
+          }
+        } else {
+          console.warn(this.is + ':', config.name, 'not found!');
+        }
+      }
+    }
+    return results;
+  },
+  _shouldComplete: function(activeEntries) {
+    var finished = true;
+    for (var i = 0; i < activeEntries.length; i++) {
+      if (activeEntries[i].animation.playState != 'finished') {
+        finished = false;
+        break;
+      }
+    }
+    return finished;
+  },
+  _complete: function(activeEntries) {
+    for (var i = 0; i < activeEntries.length; i++) {
+      activeEntries[i].neonAnimation.complete(activeEntries[i].config);
+    }
+    for (var i = 0; i < activeEntries.length; i++) {
+      activeEntries[i].animation.cancel();
+    }
+  },
+  playAnimation: function(type, cookie) {
+    var configs = this.getAnimationConfig(type);
+    if (!configs) {
+      return;
+    }
+    this._active = this._active || {};
+    if (this._active[type]) {
+      this._complete(this._active[type]);
+      delete this._active[type];
+    }
+    var activeEntries = this._configureAnimations(configs);
+    if (activeEntries.length == 0) {
+      this.fire('neon-animation-finish', cookie, {
+        bubbles: false
+      });
+      return;
+    }
+    this._active[type] = activeEntries;
+    for (var i = 0; i < activeEntries.length; i++) {
+      activeEntries[i].animation.onfinish = function() {
+        if (this._shouldComplete(activeEntries)) {
+          this._complete(activeEntries);
+          delete this._active[type];
+          this.fire('neon-animation-finish', cookie, {
+            bubbles: false
+          });
+        }
+      }.bind(this);
+    }
+  },
+  cancelAnimation: function() {
+    for (var k in this._animations) {
+      this._animations[k].cancel();
+    }
+    this._animations = {};
+  }
+};
+
+Polymer.NeonAnimationRunnerBehavior = [ Polymer.NeonAnimatableBehavior, Polymer.NeonAnimationRunnerBehaviorImpl ];
+
+Polymer.NeonAnimationBehavior = {
+  properties: {
+    animationTiming: {
+      type: Object,
+      value: function() {
+        return {
+          duration: 500,
+          easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
+          fill: 'both'
+        };
+      }
+    }
+  },
+  isNeonAnimation: true,
+  timingFromConfig: function(config) {
+    if (config.timing) {
+      for (var property in config.timing) {
+        this.animationTiming[property] = config.timing[property];
+      }
+    }
+    return this.animationTiming;
+  },
+  setPrefixedProperty: function(node, property, value) {
+    var map = {
+      transform: [ 'webkitTransform' ],
+      transformOrigin: [ 'mozTransformOrigin', 'webkitTransformOrigin' ]
+    };
+    var prefixes = map[property];
+    for (var prefix, index = 0; prefix = prefixes[index]; index++) {
+      node.style[prefix] = value;
+    }
+    node.style[property] = value;
+  },
+  complete: function() {}
+};
+
+Polymer({
+  is: 'fade-in-animation',
+  behaviors: [ Polymer.NeonAnimationBehavior ],
+  configure: function(config) {
+    var node = config.node;
+    this._effect = new KeyframeEffect(node, [ {
+      opacity: '0'
+    }, {
+      opacity: '1'
+    } ], this.timingFromConfig(config));
+    return this._effect;
+  }
+});
+
+Polymer({
+  is: 'fade-out-animation',
+  behaviors: [ Polymer.NeonAnimationBehavior ],
+  configure: function(config) {
+    var node = config.node;
+    this._effect = new KeyframeEffect(node, [ {
+      opacity: '1'
+    }, {
+      opacity: '0'
+    } ], this.timingFromConfig(config));
+    return this._effect;
+  }
+});
+
+Polymer({
+  is: 'paper-tooltip',
+  hostAttributes: {
+    role: 'tooltip',
+    tabindex: -1
+  },
+  behaviors: [ Polymer.NeonAnimationRunnerBehavior ],
+  properties: {
+    "for": {
+      type: String,
+      observer: '_forChanged'
+    },
+    manualMode: {
+      type: Boolean,
+      value: false
+    },
+    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._target = this.target;
+    if (this.manualMode) return;
+    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');
+  },
+  detached: function() {
+    if (this._target && !this.manualMode) {
+      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');
+    }
+  },
+  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.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');
+  },
+  _forChanged: function() {
+    this._target = this.target;
+  },
+  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';
+    }
+  },
+  _onAnimationFinish: function() {
+    this._animationPlaying = false;
+    if (!this._showing) {
+      this.toggleClass('hidden', true, this.$.tooltip);
+    }
+  }
+});
+
 (function() {
   'use strict';
   Polymer.IronA11yAnnouncer = Polymer({
@@ -4497,28 +4923,121 @@ Polymer({
     searchPrompt: String,
     clearLabel: String,
     menuLabel: String,
+    menuPromo: String,
     spinnerActive: Boolean,
-    showMenu: {
+    showMenu: Boolean,
+    showMenuPromo: Boolean,
+    narrow_: {
       type: Boolean,
-      value: false
+      reflectToAttribute: true
+    },
+    showingSearch_: {
+      type: Boolean,
+      reflectToAttribute: true
+    },
+    showingMenuPromo_: {
+      type: Boolean,
+      computed: 'computeShowingMenuPromo_(showMenuPromo, narrow_)',
+      observer: 'showingMenuPromoChanged_'
+    }
+  },
+  getSearchField: function() {
+    return this.$.search;
+  },
+  computeShowingMenuPromo_: function(showMenuPromo, narrow) {
+    return showMenuPromo && narrow;
+  },
+  onMenuTap_: function() {
+    this.fire('cr-menu-tap');
+    this.onMenuPromoCloseTap_();
+  },
+  onMenuPromoCloseTap_: function() {
+    this.fire('cr-menu-promo-shown');
+  },
+  showingMenuPromoChanged_: function() {
+    Polymer.RenderStatus.afterNextRender(this, function() {
+      if (this.showingMenuPromo_) this.$$('paper-tooltip').show();
+    }.bind(this));
+  },
+  titleIfNotShowingMenuPromo_: function(title, showingMenuPromo) {
+    return showingMenuPromo ? '' : title;
+  }
+});
+
+// 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.
+cr.define('md_history', function() {
+  function BrowserService() {
+    this.pendingDeleteItems_ = null;
+    this.pendingDeletePromise_ = null;
+  }
+  BrowserService.prototype = {
+    deleteItems: function(items) {
+      if (this.pendingDeleteItems_ != null) {
+        return new Promise(function(resolve, reject) {
+          reject(items);
+        });
+      }
+      var removalList = items.map(function(item) {
+        return {
+          url: item.url,
+          timestamps: item.allTimestamps
+        };
+      });
+      this.pendingDeleteItems_ = items;
+      this.pendingDeletePromise_ = new PromiseResolver();
+      chrome.send('removeVisits', removalList);
+      return this.pendingDeletePromise_.promise;
     },
-    narrow_: {
-      type: Boolean,
-      reflectToAttribute: true
+    removeBookmark: function(url) {
+      chrome.send('removeBookmark', [ url ]);
     },
-    showingSearch_: {
-      type: Boolean,
-      reflectToAttribute: true
+    openForeignSessionAllTabs: function(sessionTag) {
+      chrome.send('openForeignSession', [ sessionTag ]);
+    },
+    openForeignSessionTab: function(sessionTag, windowId, tabId, e) {
+      chrome.send('openForeignSession', [ sessionTag, String(windowId), String(tabId), e.button || 0, e.altKey, e.ctrlKey, e.metaKey, e.shiftKey ]);
+    },
+    deleteForeignSession: function(sessionTag) {
+      chrome.send('deleteForeignSession', [ sessionTag ]);
+    },
+    openClearBrowsingData: function() {
+      chrome.send('clearBrowsingData');
+    },
+    recordHistogram: function(histogram, value, max) {
+      chrome.send('metricsHandler:recordInHistogram', [ histogram, value, max ]);
+    },
+    recordAction: function(action) {
+      if (action.indexOf('_') == -1) action = 'HistoryPage_' + action;
+      chrome.send('metricsHandler:recordAction', [ action ]);
+    },
+    resolveDelete_: function(successful) {
+      if (this.pendingDeleteItems_ == null || this.pendingDeletePromise_ == null) {
+        return;
+      }
+      if (successful) this.pendingDeletePromise_.resolve(this.pendingDeleteItems_); else this.pendingDeletePromise_.reject(this.pendingDeleteItems_);
+      this.pendingDeleteItems_ = null;
+      this.pendingDeletePromise_ = null;
+    },
+    menuPromoShown: function() {
+      chrome.send('menuPromoShown');
     }
-  },
-  getSearchField: function() {
-    return this.$.search;
-  },
-  onMenuTap_: function(e) {
-    this.fire('cr-menu-tap');
-  }
+  };
+  cr.addSingletonGetter(BrowserService);
+  return {
+    BrowserService: BrowserService
+  };
 });
 
+function deleteComplete() {
+  md_history.BrowserService.getInstance().resolveDelete_(true);
+}
+
+function deleteFailed() {
+  md_history.BrowserService.getInstance().resolveDelete_(false);
+}
+
 // 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.
@@ -4559,7 +5078,13 @@ Polymer({
       notify: true
     },
     queryStartTime: String,
-    queryEndTime: String
+    queryEndTime: String,
+    showMenuPromo_: {
+      type: Boolean,
+      value: function() {
+        return loadTimeData.getBoolean('showMenuPromo');
+      }
+    }
   },
   changeToolbarView_: function() {
     this.itemsSelected_ = this.count > 0;
@@ -4571,6 +5096,10 @@ Polymer({
     searchField.showAndFocus();
     searchField.setValue(search);
   },
+  onMenuPromoShown_: function() {
+    this.showMenuPromo_ = false;
+    md_history.BrowserService.getInstance().menuPromoShown();
+  },
   onSearchChanged_: function(event) {
     this.searchTerm = event.detail;
   },
@@ -5465,292 +5994,76 @@ Polymer.IronOverlayManager = new Polymer.IronOverlayManagerClass();
     },
     _onCaptureFocus: function(event) {
       if (!this.withBackdrop) {
-        return;
-      }
-      var path = Polymer.dom(event).path;
-      if (path.indexOf(this) === -1) {
-        event.stopPropagation();
-        this._applyFocus();
-      } else {
-        this._focusedChild = path[0];
-      }
-    },
-    _onCaptureEsc: function(event) {
-      if (!this.noCancelOnEscKey) {
-        this.cancel(event);
-      }
-    },
-    _onCaptureTab: function(event) {
-      if (!this.withBackdrop) {
-        return;
-      }
-      var shift = event.shiftKey;
-      var nodeToCheck = shift ? this.__firstFocusableNode : this.__lastFocusableNode;
-      var nodeToSet = shift ? this.__lastFocusableNode : this.__firstFocusableNode;
-      var shouldWrap = false;
-      if (nodeToCheck === nodeToSet) {
-        shouldWrap = true;
-      } else {
-        var focusedNode = this._manager.deepActiveElement;
-        shouldWrap = focusedNode === nodeToCheck || focusedNode === this;
-      }
-      if (shouldWrap) {
-        event.preventDefault();
-        this._focusedChild = nodeToSet;
-        this._applyFocus();
-      }
-    },
-    _onIronResize: function() {
-      if (this.opened && !this.__isAnimating) {
-        this.__onNextAnimationFrame(this.refit);
-      }
-    },
-    _onNodesChange: function() {
-      if (this.opened && !this.__isAnimating) {
-        this.notifyResize();
-      }
-    },
-    __openedChanged: function() {
-      if (this.opened) {
-        this._prepareRenderOpened();
-        this._manager.addOverlay(this);
-        this._applyFocus();
-        this._renderOpened();
-      } else {
-        this._manager.removeOverlay(this);
-        this._applyFocus();
-        this._renderClosed();
-      }
-    },
-    __onNextAnimationFrame: function(callback) {
-      if (this.__raf) {
-        window.cancelAnimationFrame(this.__raf);
-      }
-      var self = this;
-      this.__raf = window.requestAnimationFrame(function nextAnimationFrame() {
-        self.__raf = null;
-        callback.call(self);
-      });
-    }
-  };
-  Polymer.IronOverlayBehavior = [ Polymer.IronFitBehavior, Polymer.IronResizableBehavior, Polymer.IronOverlayBehaviorImpl ];
-})();
-
-Polymer.NeonAnimatableBehavior = {
-  properties: {
-    animationConfig: {
-      type: Object
-    },
-    entryAnimation: {
-      observer: '_entryAnimationChanged',
-      type: String
-    },
-    exitAnimation: {
-      observer: '_exitAnimationChanged',
-      type: String
-    }
-  },
-  _entryAnimationChanged: function() {
-    this.animationConfig = this.animationConfig || {};
-    this.animationConfig['entry'] = [ {
-      name: this.entryAnimation,
-      node: this
-    } ];
-  },
-  _exitAnimationChanged: function() {
-    this.animationConfig = this.animationConfig || {};
-    this.animationConfig['exit'] = [ {
-      name: this.exitAnimation,
-      node: this
-    } ];
-  },
-  _copyProperties: function(config1, config2) {
-    for (var property in config2) {
-      config1[property] = config2[property];
-    }
-  },
-  _cloneConfig: function(config) {
-    var clone = {
-      isClone: true
-    };
-    this._copyProperties(clone, config);
-    return clone;
-  },
-  _getAnimationConfigRecursive: function(type, map, allConfigs) {
-    if (!this.animationConfig) {
-      return;
-    }
-    if (this.animationConfig.value && typeof this.animationConfig.value === 'function') {
-      this._warn(this._logf('playAnimation', "Please put 'animationConfig' inside of your components 'properties' object instead of outside of it."));
-      return;
-    }
-    var thisConfig;
-    if (type) {
-      thisConfig = this.animationConfig[type];
-    } else {
-      thisConfig = this.animationConfig;
-    }
-    if (!Array.isArray(thisConfig)) {
-      thisConfig = [ thisConfig ];
-    }
-    if (thisConfig) {
-      for (var config, index = 0; config = thisConfig[index]; index++) {
-        if (config.animatable) {
-          config.animatable._getAnimationConfigRecursive(config.type || type, map, allConfigs);
-        } else {
-          if (config.id) {
-            var cachedConfig = map[config.id];
-            if (cachedConfig) {
-              if (!cachedConfig.isClone) {
-                map[config.id] = this._cloneConfig(cachedConfig);
-                cachedConfig = map[config.id];
-              }
-              this._copyProperties(cachedConfig, config);
-            } else {
-              map[config.id] = config;
-            }
-          } else {
-            allConfigs.push(config);
-          }
-        }
-      }
-    }
-  },
-  getAnimationConfig: function(type) {
-    var map = {};
-    var allConfigs = [];
-    this._getAnimationConfigRecursive(type, map, allConfigs);
-    for (var key in map) {
-      allConfigs.push(map[key]);
-    }
-    return allConfigs;
-  }
-};
-
-Polymer.NeonAnimationRunnerBehaviorImpl = {
-  _configureAnimations: function(configs) {
-    var results = [];
-    if (configs.length > 0) {
-      for (var config, index = 0; config = configs[index]; index++) {
-        var neonAnimation = document.createElement(config.name);
-        if (neonAnimation.isNeonAnimation) {
-          var result = null;
-          try {
-            result = neonAnimation.configure(config);
-            if (typeof result.cancel != 'function') {
-              result = document.timeline.play(result);
-            }
-          } catch (e) {
-            result = null;
-            console.warn('Couldnt play', '(', config.name, ').', e);
-          }
-          if (result) {
-            results.push({
-              neonAnimation: neonAnimation,
-              config: config,
-              animation: result
-            });
-          }
-        } else {
-          console.warn(this.is + ':', config.name, 'not found!');
-        }
+        return;
       }
-    }
-    return results;
-  },
-  _shouldComplete: function(activeEntries) {
-    var finished = true;
-    for (var i = 0; i < activeEntries.length; i++) {
-      if (activeEntries[i].animation.playState != 'finished') {
-        finished = false;
-        break;
+      var path = Polymer.dom(event).path;
+      if (path.indexOf(this) === -1) {
+        event.stopPropagation();
+        this._applyFocus();
+      } else {
+        this._focusedChild = path[0];
       }
-    }
-    return finished;
-  },
-  _complete: function(activeEntries) {
-    for (var i = 0; i < activeEntries.length; i++) {
-      activeEntries[i].neonAnimation.complete(activeEntries[i].config);
-    }
-    for (var i = 0; i < activeEntries.length; i++) {
-      activeEntries[i].animation.cancel();
-    }
-  },
-  playAnimation: function(type, cookie) {
-    var configs = this.getAnimationConfig(type);
-    if (!configs) {
-      return;
-    }
-    this._active = this._active || {};
-    if (this._active[type]) {
-      this._complete(this._active[type]);
-      delete this._active[type];
-    }
-    var activeEntries = this._configureAnimations(configs);
-    if (activeEntries.length == 0) {
-      this.fire('neon-animation-finish', cookie, {
-        bubbles: false
-      });
-      return;
-    }
-    this._active[type] = activeEntries;
-    for (var i = 0; i < activeEntries.length; i++) {
-      activeEntries[i].animation.onfinish = function() {
-        if (this._shouldComplete(activeEntries)) {
-          this._complete(activeEntries);
-          delete this._active[type];
-          this.fire('neon-animation-finish', cookie, {
-            bubbles: false
-          });
-        }
-      }.bind(this);
-    }
-  },
-  cancelAnimation: function() {
-    for (var k in this._animations) {
-      this._animations[k].cancel();
-    }
-    this._animations = {};
-  }
-};
-
-Polymer.NeonAnimationRunnerBehavior = [ Polymer.NeonAnimatableBehavior, Polymer.NeonAnimationRunnerBehaviorImpl ];
-
-Polymer.NeonAnimationBehavior = {
-  properties: {
-    animationTiming: {
-      type: Object,
-      value: function() {
-        return {
-          duration: 500,
-          easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
-          fill: 'both'
-        };
+    },
+    _onCaptureEsc: function(event) {
+      if (!this.noCancelOnEscKey) {
+        this.cancel(event);
       }
-    }
-  },
-  isNeonAnimation: true,
-  timingFromConfig: function(config) {
-    if (config.timing) {
-      for (var property in config.timing) {
-        this.animationTiming[property] = config.timing[property];
+    },
+    _onCaptureTab: function(event) {
+      if (!this.withBackdrop) {
+        return;
       }
+      var shift = event.shiftKey;
+      var nodeToCheck = shift ? this.__firstFocusableNode : this.__lastFocusableNode;
+      var nodeToSet = shift ? this.__lastFocusableNode : this.__firstFocusableNode;
+      var shouldWrap = false;
+      if (nodeToCheck === nodeToSet) {
+        shouldWrap = true;
+      } else {
+        var focusedNode = this._manager.deepActiveElement;
+        shouldWrap = focusedNode === nodeToCheck || focusedNode === this;
+      }
+      if (shouldWrap) {
+        event.preventDefault();
+        this._focusedChild = nodeToSet;
+        this._applyFocus();
+      }
+    },
+    _onIronResize: function() {
+      if (this.opened && !this.__isAnimating) {
+        this.__onNextAnimationFrame(this.refit);
+      }
+    },
+    _onNodesChange: function() {
+      if (this.opened && !this.__isAnimating) {
+        this.notifyResize();
+      }
+    },
+    __openedChanged: function() {
+      if (this.opened) {
+        this._prepareRenderOpened();
+        this._manager.addOverlay(this);
+        this._applyFocus();
+        this._renderOpened();
+      } else {
+        this._manager.removeOverlay(this);
+        this._applyFocus();
+        this._renderClosed();
+      }
+    },
+    __onNextAnimationFrame: function(callback) {
+      if (this.__raf) {
+        window.cancelAnimationFrame(this.__raf);
+      }
+      var self = this;
+      this.__raf = window.requestAnimationFrame(function nextAnimationFrame() {
+        self.__raf = null;
+        callback.call(self);
+      });
     }
-    return this.animationTiming;
-  },
-  setPrefixedProperty: function(node, property, value) {
-    var map = {
-      transform: [ 'webkitTransform' ],
-      transformOrigin: [ 'mozTransformOrigin', 'webkitTransformOrigin' ]
-    };
-    var prefixes = map[property];
-    for (var prefix, index = 0; prefix = prefixes[index]; index++) {
-      node.style[prefix] = value;
-    }
-    node.style[property] = value;
-  },
-  complete: function() {}
-};
+  };
+  Polymer.IronOverlayBehavior = [ Polymer.IronFitBehavior, Polymer.IronResizableBehavior, Polymer.IronOverlayBehaviorImpl ];
+})();
 
 Polymer({
   is: 'opaque-animation',
@@ -6104,34 +6417,6 @@ Polymer({
 })();
 
 Polymer({
-  is: 'fade-in-animation',
-  behaviors: [ Polymer.NeonAnimationBehavior ],
-  configure: function(config) {
-    var node = config.node;
-    this._effect = new KeyframeEffect(node, [ {
-      opacity: '0'
-    }, {
-      opacity: '1'
-    } ], this.timingFromConfig(config));
-    return this._effect;
-  }
-});
-
-Polymer({
-  is: 'fade-out-animation',
-  behaviors: [ Polymer.NeonAnimationBehavior ],
-  configure: function(config) {
-    var node = config.node;
-    this._effect = new KeyframeEffect(node, [ {
-      opacity: '1'
-    }, {
-      opacity: '0'
-    } ], this.timingFromConfig(config));
-    return this._effect;
-  }
-});
-
-Polymer({
   is: 'paper-menu-grow-height-animation',
   behaviors: [ Polymer.NeonAnimationBehavior ],
   configure: function(config) {
@@ -6332,77 +6617,6 @@ Polymer({
   behaviors: [ Polymer.PaperItemBehavior ]
 });
 
-// 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.
-cr.define('md_history', function() {
-  function BrowserService() {
-    this.pendingDeleteItems_ = null;
-    this.pendingDeletePromise_ = null;
-  }
-  BrowserService.prototype = {
-    deleteItems: function(items) {
-      if (this.pendingDeleteItems_ != null) {
-        return new Promise(function(resolve, reject) {
-          reject(items);
-        });
-      }
-      var removalList = items.map(function(item) {
-        return {
-          url: item.url,
-          timestamps: item.allTimestamps
-        };
-      });
-      this.pendingDeleteItems_ = items;
-      this.pendingDeletePromise_ = new PromiseResolver();
-      chrome.send('removeVisits', removalList);
-      return this.pendingDeletePromise_.promise;
-    },
-    removeBookmark: function(url) {
-      chrome.send('removeBookmark', [ url ]);
-    },
-    openForeignSessionAllTabs: function(sessionTag) {
-      chrome.send('openForeignSession', [ sessionTag ]);
-    },
-    openForeignSessionTab: function(sessionTag, windowId, tabId, e) {
-      chrome.send('openForeignSession', [ sessionTag, String(windowId), String(tabId), e.button || 0, e.altKey, e.ctrlKey, e.metaKey, e.shiftKey ]);
-    },
-    deleteForeignSession: function(sessionTag) {
-      chrome.send('deleteForeignSession', [ sessionTag ]);
-    },
-    openClearBrowsingData: function() {
-      chrome.send('clearBrowsingData');
-    },
-    recordHistogram: function(histogram, value, max) {
-      chrome.send('metricsHandler:recordInHistogram', [ histogram, value, max ]);
-    },
-    recordAction: function(action) {
-      if (action.indexOf('_') == -1) action = 'HistoryPage_' + action;
-      chrome.send('metricsHandler:recordAction', [ action ]);
-    },
-    resolveDelete_: function(successful) {
-      if (this.pendingDeleteItems_ == null || this.pendingDeletePromise_ == null) {
-        return;
-      }
-      if (successful) this.pendingDeletePromise_.resolve(this.pendingDeleteItems_); else this.pendingDeletePromise_.reject(this.pendingDeleteItems_);
-      this.pendingDeleteItems_ = null;
-      this.pendingDeletePromise_ = null;
-    }
-  };
-  cr.addSingletonGetter(BrowserService);
-  return {
-    BrowserService: BrowserService
-  };
-});
-
-function deleteComplete() {
-  md_history.BrowserService.getInstance().resolveDelete_(true);
-}
-
-function deleteFailed() {
-  md_history.BrowserService.getInstance().resolveDelete_(false);
-}
-
 Polymer({
   is: 'iron-collapse',
   behaviors: [ Polymer.IronResizableBehavior ],