Vulcanize MD History to improve page-load performance

chrome/browser/resources/md_history/app.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.
-
-/**
- * @fileoverview Assertion support.
- */
-
-/**
- * Verify |condition| is truthy and return |condition| if so.
- * @template T
- * @param {T} condition A condition to check for truthiness.  Note that this
- *     may be used to test whether a value is defined or not, and we don't want
- *     to force a cast to Boolean.
- * @param {string=} opt_message A message to show on failure.
- * @return {T} A non-null |condition|.
- */
-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; }();
-    if (global.traceAssertionsForTesting)
-      console.warn(error.stack);
-    throw error;
-  }
-  return condition;
-}
-
-/**
- * Call this from places in the code that should never be reached.
- *
- * For example, handling all the values of enum with a switch() like this:
- *
- *   function getValueFromEnum(enum) {
- *     switch (enum) {
- *       case ENUM_FIRST_OF_TWO:
- *         return first
- *       case ENUM_LAST_OF_TWO:
- *         return last;
- *     }
- *     assertNotReached();
- *     return document;
- *   }
- *
- * This code should only be hit in the case of serious programmer error or
- * unexpected input.
- *
- * @param {string=} opt_message A message to show when this is hit.
- */
-function assertNotReached(opt_message) {
-  assert(false, opt_message || 'Unreachable code hit');
-}
-
-/**
- * @param {*} value The value to check.
- * @param {function(new: T, ...)} type A user-defined constructor.
- * @param {string=} opt_message A message to show when this is hit.
- * @return {T}
- * @template T
- */
-function assertInstanceof(value, type, opt_message) {
-  // We don't use assert immediately here so that we avoid constructing an error
-  // message if we don't have to.
-  if (!(value instanceof type)) {
-    assertNotReached(opt_message || 'Value ' + value +
-                     ' is not a[n] ' + (type.name || typeof type));
-  }
-  return value;
-};
 // 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.
 
 /**
  * @fileoverview PromiseResolver is a helper class that allows creating a
  * Promise that will be fulfilled (resolved or rejected) some time later.
  *
  * Example:
  *  var resolver = new PromiseResolver();
@@ skipping 1056 matching lines @@
       this.preventDefault();
     }
   };
 
   // Export
   return {
     Command: Command,
     CanExecuteEvent: CanExecuteEvent
   };
 });
-// Copyright (c) 2012 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.
-
-// <include src="../../../../ui/webui/resources/js/assert.js">
-
-/**
- * Alias for document.getElementById. Found elements must be HTMLElements.
- * @param {string} id The ID of the element to find.
- * @return {HTMLElement} The found element or null if not found.
- */
-function $(id) {
-  var el = document.getElementById(id);
-  return el ? assertInstanceof(el, HTMLElement) : null;
-}
-
-// TODO(devlin): This should return SVGElement, but closure compiler is missing
-// those externs.
-/**
- * Alias for document.getElementById. Found elements must be SVGElements.
- * @param {string} id The ID of the element to find.
- * @return {Element} The found element or null if not found.
- */
-function getSVGElement(id) {
-  var el = document.getElementById(id);
-  return el ? assertInstanceof(el, Element) : null;
-}
-
-/**
- * Add an accessible message to the page that will be announced to
- * users who have spoken feedback on, but will be invisible to all
- * other users. It's removed right away so it doesn't clutter the DOM.
- * @param {string} msg The text to be pronounced.
- */
-function announceAccessibleMessage(msg) {
-  var element = document.createElement('div');
-  element.setAttribute('aria-live', 'polite');
-  element.style.position = 'relative';
-  element.style.left = '-9999px';
-  element.style.height = '0px';
-  element.innerText = msg;
-  document.body.appendChild(element);
-  window.setTimeout(function() {
-    document.body.removeChild(element);
-  }, 0);
-}
-
-/**
- * Generates a CSS url string.
- * @param {string} s The URL to generate the CSS url for.
- * @return {string} The CSS url string.
- */
-function url(s) {
-  // http://www.w3.org/TR/css3-values/#uris
-  // Parentheses, commas, whitespace characters, single quotes (') and double
-  // quotes (") appearing in a URI must be escaped with a backslash
-  var s2 = s.replace(/(\(|\)|\,|\s|\'|\"|\\)/g, '\\$1');
-  // WebKit has a bug when it comes to URLs that end with \
-  // https://bugs.webkit.org/show_bug.cgi?id=28885
-  if (/\\\\$/.test(s2)) {
-    // Add a space to work around the WebKit bug.
-    s2 += ' ';
-  }
-  return 'url("' + s2 + '")';
-}
-
-/**
- * Parses query parameters from Location.
- * @param {Location} location The URL to generate the CSS url for.
- * @return {Object} Dictionary containing name value pairs for URL
- */
-function parseQueryParams(location) {
-  var params = {};
-  var query = unescape(location.search.substring(1));
-  var vars = query.split('&');
-  for (var i = 0; i < vars.length; i++) {
-    var pair = vars[i].split('=');
-    params[pair[0]] = pair[1];
-  }
-  return params;
-}
-
-/**
- * Creates a new URL by appending or replacing the given query key and value.
- * Not supporting URL with username and password.
- * @param {Location} location The original URL.
- * @param {string} key The query parameter name.
- * @param {string} value The query parameter value.
- * @return {string} The constructed new URL.
- */
-function setQueryParam(location, key, value) {
-  var query = parseQueryParams(location);
-  query[encodeURIComponent(key)] = encodeURIComponent(value);
-
-  var newQuery = '';
-  for (var q in query) {
-    newQuery += (newQuery ? '&' : '?') + q + '=' + query[q];
-  }
-
-  return location.origin + location.pathname + newQuery + location.hash;
-}
-
-/**
- * @param {Node} el A node to search for ancestors with |className|.
- * @param {string} className A class to search for.
- * @return {Element} A node with class of |className| or null if none is found.
- */
-function findAncestorByClass(el, className) {
-  return /** @type {Element} */(findAncestor(el, function(el) {
-    return el.classList && el.classList.contains(className);
-  }));
-}
-
-/**
- * Return the first ancestor for which the {@code predicate} returns true.
- * @param {Node} node The node to check.
- * @param {function(Node):boolean} predicate The function that tests the
- *     nodes.
- * @return {Node} The found ancestor or null if not found.
- */
-function findAncestor(node, predicate) {
-  var last = false;
-  while (node != null && !(last = predicate(node))) {
-    node = node.parentNode;
-  }
-  return last ? node : null;
-}
-
-function swapDomNodes(a, b) {
-  var afterA = a.nextSibling;
-  if (afterA == b) {
-    swapDomNodes(b, a);
-    return;
-  }
-  var aParent = a.parentNode;
-  b.parentNode.replaceChild(a, b);
-  aParent.insertBefore(b, afterA);
-}
-
-/**
- * Disables text selection and dragging, with optional whitelist callbacks.
- * @param {function(Event):boolean=} opt_allowSelectStart Unless this function
- *    is defined and returns true, the onselectionstart event will be
- *    surpressed.
- * @param {function(Event):boolean=} opt_allowDragStart Unless this function
- *    is defined and returns true, the ondragstart event will be surpressed.
- */
-function disableTextSelectAndDrag(opt_allowSelectStart, opt_allowDragStart) {
-  // Disable text selection.
-  document.onselectstart = function(e) {
-    if (!(opt_allowSelectStart && opt_allowSelectStart.call(this, e)))
-      e.preventDefault();
-  };
-
-  // Disable dragging.
-  document.ondragstart = function(e) {
-    if (!(opt_allowDragStart && opt_allowDragStart.call(this, e)))
-      e.preventDefault();
-  };
-}
-
-/**
- * TODO(dbeam): DO NOT USE. THIS IS DEPRECATED. Use an action-link instead.
- * Call this to stop clicks on <a href="#"> links from scrolling to the top of
- * the page (and possibly showing a # in the link).
- */
-function preventDefaultOnPoundLinkClicks() {
-  document.addEventListener('click', function(e) {
-    var anchor = findAncestor(/** @type {Node} */(e.target), function(el) {
-      return el.tagName == 'A';
+Polymer({
+      is: 'app-drawer',
+
+      properties: {
+        /**
+         * The opened state of the drawer.
+         */
+        opened: {
+          type: Boolean,
+          value: false,
+          notify: true,
+          reflectToAttribute: true
+        },
+
+        /**
+         * The drawer does not have a scrim and cannot be swiped close.
+         */
+        persistent: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true
+        },
+
+        /**
+         * The alignment of the drawer on the screen ('left', 'right', 'start' or 'end').
+         * 'start' computes to left and 'end' to right in LTR layout and vice versa in RTL
+         * layout.
+         */
+        align: {
+          type: String,
+          value: 'left'
+        },
+
+        /**
+         * The computed, read-only position of the drawer on the screen ('left' or 'right').
+         */
+        position: {
+          type: String,
+          readOnly: true,
+          value: 'left',
+          reflectToAttribute: true
+        },
+
+        /**
+         * Create an area at the edge of the screen to swipe open the drawer.
+         */
+        swipeOpen: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true
+        },
+
+        /**
+         * Trap keyboard focus when the drawer is opened and not persistent.
+         */
+        noFocusTrap: {
+          type: Boolean,
+          value: false
+        }
+      },
+
+      observers: [
+        'resetLayout(position)',
+        '_resetPosition(align, isAttached)'
+      ],
+
+      _translateOffset: 0,
+
+      _trackDetails: null,
+
+      _drawerState: 0,
+
+      _boundEscKeydownHandler: null,
+
+      _firstTabStop: null,
+
+      _lastTabStop: null,
+
+      ready: function() {
+        // Set the scroll direction so you can vertically scroll inside the drawer.
+        this.setScrollDirection('y');
+
+        // Only transition the drawer after its first render (e.g. app-drawer-layout
+        // may need to set the initial opened state which should not be transitioned).
+        this._setTransitionDuration('0s');
+      },
+
+      attached: function() {
+        // Only transition the drawer after its first render (e.g. app-drawer-layout
+        // may need to set the initial opened state which should not be transitioned).
+        Polymer.RenderStatus.afterNextRender(this, function() {
+          this._setTransitionDuration('');
+          this._boundEscKeydownHandler = this._escKeydownHandler.bind(this);
+          this._resetDrawerState();
+
+          this.listen(this, 'track', '_track');
+          this.addEventListener('transitionend', this._transitionend.bind(this));
+          this.addEventListener('keydown', this._tabKeydownHandler.bind(this))
+        });
+      },
+
+      detached: function() {
+        document.removeEventListener('keydown', this._boundEscKeydownHandler);
+      },
+
+      /**
+       * Opens the drawer.
+       */
+      open: function() {
+        this.opened = true;
+      },
+
+      /**
+       * Closes the drawer.
+       */
+      close: function() {
+        this.opened = false;
+      },
+
+      /**
+       * Toggles the drawer open and close.
+       */
+      toggle: function() {
+        this.opened = !this.opened;
+      },
+
+      /**
+       * Gets the width of the drawer.
+       *
+       * @return {number} The width of the drawer in pixels.
+       */
+      getWidth: function() {
+        return this.$.contentContainer.offsetWidth;
+      },
+
+      /**
+       * Resets the layout. If you changed the size of app-header via CSS
+       * you can notify the changes by either firing the `iron-resize` event
+       * or calling `resetLayout` directly.
+       *
+       * @method resetLayout
+       */
+      resetLayout: function() {
+        this.debounce('_resetLayout', function() {
+          this.fire('app-drawer-reset-layout');
+        }, 1);
+      },
+
+      _isRTL: function() {
+        return window.getComputedStyle(this).direction === 'rtl';
+      },
+
+      _resetPosition: function() {
+        switch (this.align) {
+          case 'start':
+            this._setPosition(this._isRTL() ? 'right' : 'left');
+            return;
+          case 'end':
+            this._setPosition(this._isRTL() ? 'left' : 'right');
+            return;
+        }
+        this._setPosition(this.align);
+      },
+
+      _escKeydownHandler: function(event) {
+        var ESC_KEYCODE = 27;
+        if (event.keyCode === ESC_KEYCODE) {
+          // Prevent any side effects if app-drawer closes.
+          event.preventDefault();
+          this.close();
+        }
+      },
+
+      _track: function(event) {
+        if (this.persistent) {
+          return;
+        }
+
+        // Disable user selection on desktop.
+        event.preventDefault();
+
+        switch (event.detail.state) {
+          case 'start':
+            this._trackStart(event);
+            break;
+          case 'track':
+            this._trackMove(event);
+            break;
+          case 'end':
+            this._trackEnd(event);
+            break;
+        }
+      },
+
+      _trackStart: function(event) {
+        this._drawerState = this._DRAWER_STATE.TRACKING;
+
+        // Disable transitions since style attributes will reflect user track events.
+        this._setTransitionDuration('0s');
+        this.style.visibility = 'visible';
+
+        var rect = this.$.contentContainer.getBoundingClientRect();
+        if (this.position === 'left') {
+          this._translateOffset = rect.left;
+        } else {
+          this._translateOffset = rect.right - window.innerWidth;
+        }
+
+        this._trackDetails = [];
+      },
+
+      _trackMove: function(event) {
+        this._translateDrawer(event.detail.dx + this._translateOffset);
+
+        // Use Date.now() since event.timeStamp is inconsistent across browsers (e.g. most
+        // browsers use milliseconds but FF 44 uses microseconds).
+        this._trackDetails.push({
+          dx: event.detail.dx,
+          timeStamp: Date.now()
+        });
+      },
+
+      _trackEnd: function(event) {
+        var x = event.detail.dx + this._translateOffset;
+        var drawerWidth = this.getWidth();
+        var isPositionLeft = this.position === 'left';
+        var isInEndState = isPositionLeft ? (x >= 0 || x <= -drawerWidth) :
+          (x <= 0 || x >= drawerWidth);
+
+        if (!isInEndState) {
+          // No longer need the track events after this method returns - allow them to be GC'd.
+          var trackDetails = this._trackDetails;
+          this._trackDetails = null;
+
+          this._flingDrawer(event, trackDetails);
+          if (this._drawerState === this._DRAWER_STATE.FLINGING) {
+            return;
+          }
+        }
+
+        // If the drawer is not flinging, toggle the opened state based on the position of
+        // the drawer.
+        var halfWidth = drawerWidth / 2;
+        if (event.detail.dx < -halfWidth) {
+          this.opened = this.position === 'right';
+        } else if (event.detail.dx > halfWidth) {
+          this.opened = this.position === 'left';
+        }
+
+        // Trigger app-drawer-transitioned now since there will be no transitionend event.
+        if (isInEndState) {
+          this._resetDrawerState();
+        }
+
+        this._setTransitionDuration('');
+        this._resetDrawerTranslate();
+        this.style.visibility = '';
+      },
+
+      _calculateVelocity: function(event, trackDetails) {
+        // Find the oldest track event that is within 100ms using binary search.
+        var now = Date.now();
+        var timeLowerBound = now - 100;
+        var trackDetail;
+        var min = 0;
+        var max = trackDetails.length - 1;
+
+        while (min <= max) {
+          // Floor of average of min and max.
+          var mid = (min + max) >> 1;
+          var d = trackDetails[mid];
+          if (d.timeStamp >= timeLowerBound) {
+            trackDetail = d;
+            max = mid - 1;
+          } else {
+            min = mid + 1;
+          }
+        }
+
+        if (trackDetail) {
+          var dx = event.detail.dx - trackDetail.dx;
+          var dt = (now - trackDetail.timeStamp) || 1;
+          return dx / dt;
+        }
+        return 0;
+      },
+
+      _flingDrawer: function(event, trackDetails) {
+        var velocity = this._calculateVelocity(event, trackDetails);
+
+        // Do not fling if velocity is not above a threshold.
+        if (Math.abs(velocity) < this._MIN_FLING_THRESHOLD) {
+          return;
+        }
+
+        this._drawerState = this._DRAWER_STATE.FLINGING;
+
+        var x = event.detail.dx + this._translateOffset;
+        var drawerWidth = this.getWidth();
+        var isPositionLeft = this.position === 'left';
+        var isVelocityPositive = velocity > 0;
+        var isClosingLeft = !isVelocityPositive && isPositionLeft;
+        var isClosingRight = isVelocityPositive && !isPositionLeft;
+        var dx;
+        if (isClosingLeft) {
+          dx = -(x + drawerWidth);
+        } else if (isClosingRight) {
+          dx = (drawerWidth - x);
+        } else {
+          dx = -x;
+        }
+
+        // Enforce a minimum transition velocity to make the drawer feel snappy.
+        if (isVelocityPositive) {
+          velocity = Math.max(velocity, this._MIN_TRANSITION_VELOCITY);
+          this.opened = this.position === 'left';
+        } else {
+          velocity = Math.min(velocity, -this._MIN_TRANSITION_VELOCITY);
+          this.opened = this.position === 'right';
+        }
+
+        // Calculate the amount of time needed to finish the transition based on the
+        // initial slope of the timing function.
+        this._setTransitionDuration((this._FLING_INITIAL_SLOPE * dx / velocity) + 'ms');
+        this._setTransitionTimingFunction(this._FLING_TIMING_FUNCTION);
+
+        this._resetDrawerTranslate();
+      },
+
+      _transitionend: function(event) {
+        // contentContainer will transition on opened state changed, and scrim will
+        // transition on persistent state changed when opened - these are the
+        // transitions we are interested in.
+        var target = Polymer.dom(event).rootTarget;
+        if (target === this.$.contentContainer || target === this.$.scrim) {
+
+          // If the drawer was flinging, we need to reset the style attributes.
+          if (this._drawerState === this._DRAWER_STATE.FLINGING) {
+            this._setTransitionDuration('');
+            this._setTransitionTimingFunction('');
+            this.style.visibility = '';
+          }
+
+          this._resetDrawerState();
+        }
+      },
+
+      _setTransitionDuration: function(duration) {
+        this.$.contentContainer.style.transitionDuration = duration;
+        this.$.scrim.style.transitionDuration = duration;
+      },
+
+      _setTransitionTimingFunction: function(timingFunction) {
+        this.$.contentContainer.style.transitionTimingFunction = timingFunction;
+        this.$.scrim.style.transitionTimingFunction = timingFunction;
+      },
+
+      _translateDrawer: function(x) {
+        var drawerWidth = this.getWidth();
+
+        if (this.position === 'left') {
+          x = Math.max(-drawerWidth, Math.min(x, 0));
+          this.$.scrim.style.opacity = 1 + x / drawerWidth;
+        } else {
+          x = Math.max(0, Math.min(x, drawerWidth));
+          this.$.scrim.style.opacity = 1 - x / drawerWidth;
+        }
+
+        this.translate3d(x + 'px', '0', '0', this.$.contentContainer);
+      },
+
+      _resetDrawerTranslate: function() {
+        this.$.scrim.style.opacity = '';
+        this.transform('', this.$.contentContainer);
+      },
+
+      _resetDrawerState: function() {
+        var oldState = this._drawerState;
+        if (this.opened) {
+          this._drawerState = this.persistent ?
+            this._DRAWER_STATE.OPENED_PERSISTENT : this._DRAWER_STATE.OPENED;
+        } else {
+          this._drawerState = this._DRAWER_STATE.CLOSED;
+        }
+
+        if (oldState !== this._drawerState) {
+          if (this._drawerState === this._DRAWER_STATE.OPENED) {
+            this._setKeyboardFocusTrap();
+            document.addEventListener('keydown', this._boundEscKeydownHandler);
+            document.body.style.overflow = 'hidden';
+          } else {
+            document.removeEventListener('keydown', this._boundEscKeydownHandler);
+            document.body.style.overflow = '';
+          }
+
+          // Don't fire the event on initial load.
+          if (oldState !== this._DRAWER_STATE.INIT) {
+            this.fire('app-drawer-transitioned');
+          }
+        }
+      },
+
+      _setKeyboardFocusTrap: function() {
+        if (this.noFocusTrap) {
+          return;
+        }
+
+        // NOTE: Unless we use /deep/ (which we shouldn't since it's deprecated), this will
+        // not select focusable elements inside shadow roots.
+        var focusableElementsSelector = [
+            'a[href]:not([tabindex="-1"])',
+            'area[href]:not([tabindex="-1"])',
+            'input:not([disabled]):not([tabindex="-1"])',
+            'select:not([disabled]):not([tabindex="-1"])',
+            'textarea:not([disabled]):not([tabindex="-1"])',
+            'button:not([disabled]):not([tabindex="-1"])',
+            'iframe:not([tabindex="-1"])',
+            '[tabindex]:not([tabindex="-1"])',
+            '[contentEditable=true]:not([tabindex="-1"])'
+          ].join(',');
+        var focusableElements = Polymer.dom(this).querySelectorAll(focusableElementsSelector);
+
+        if (focusableElements.length > 0) {
+          this._firstTabStop = focusableElements[0];
+          this._lastTabStop = focusableElements[focusableElements.length - 1];
+        } else {
+          // Reset saved tab stops when there are no focusable elements in the drawer.
+          this._firstTabStop = null;
+          this._lastTabStop = null;
+        }
+
+        // Focus on app-drawer if it has non-zero tabindex. Otherwise, focus the first focusable
+        // element in the drawer, if it exists. Use the tabindex attribute since the this.tabIndex
+        // property in IE/Edge returns 0 (instead of -1) when the attribute is not set.
+        var tabindex = this.getAttribute('tabindex');
+        if (tabindex && parseInt(tabindex, 10) > -1) {
+          this.focus();
+        } else if (this._firstTabStop) {
+          this._firstTabStop.focus();
+        }
+      },
+
+      _tabKeydownHandler: function(event) {
+        if (this.noFocusTrap) {
+          return;
+        }
+
+        var TAB_KEYCODE = 9;
+        if (this._drawerState === this._DRAWER_STATE.OPENED && event.keyCode === TAB_KEYCODE) {
+          if (event.shiftKey) {
+            if (this._firstTabStop && Polymer.dom(event).localTarget === this._firstTabStop) {
+              event.preventDefault();
+              this._lastTabStop.focus();
+            }
+          } else {
+            if (this._lastTabStop && Polymer.dom(event).localTarget === this._lastTabStop) {
+              event.preventDefault();
+              this._firstTabStop.focus();
+            }
+          }
+        }
+      },
+
+      _MIN_FLING_THRESHOLD: 0.2,
+
+      _MIN_TRANSITION_VELOCITY: 1.2,
+
+      _FLING_TIMING_FUNCTION: 'cubic-bezier(0.667, 1, 0.667, 1)',
+
+      _FLING_INITIAL_SLOPE: 1.5,
+
+      _DRAWER_STATE: {
+        INIT: 0,
+        OPENED: 1,
+        OPENED_PERSISTENT: 2,
+        CLOSED: 3,
+        TRACKING: 4,
+        FLINGING: 5
+      }
+
+      /**
+       * Fired when the layout of app-drawer has changed.
+       *
+       * @event app-drawer-reset-layout
+       */
+
+      /**
+       * Fired when app-drawer has finished transitioning.
+       *
+       * @event app-drawer-transitioned
+       */
     });
-    // Use getAttribute() to prevent URL normalization.
-    if (anchor && anchor.getAttribute('href') == '#')
-      e.preventDefault();
-  });
-}
-
-/**
- * Check the directionality of the page.
- * @return {boolean} True if Chrome is running an RTL UI.
- */
-function isRTL() {
-  return document.documentElement.dir == 'rtl';
-}
-
-/**
- * Get an element that's known to exist by its ID. We use this instead of just
- * calling getElementById and not checking the result because this lets us
- * satisfy the JSCompiler type system.
- * @param {string} id The identifier name.
- * @return {!HTMLElement} the Element.
- */
-function getRequiredElement(id) {
-  return assertInstanceof($(id), HTMLElement,
-                          'Missing required element: ' + id);
-}
-
-/**
- * Query an element that's known to exist by a selector. We use this instead of
- * just calling querySelector and not checking the result because this lets us
- * satisfy the JSCompiler type system.
- * @param {string} selectors CSS selectors to query the element.
- * @param {(!Document|!DocumentFragment|!Element)=} opt_context An optional
- *     context object for querySelector.
- * @return {!HTMLElement} the Element.
- */
-function queryRequiredElement(selectors, opt_context) {
-  var element = (opt_context || document).querySelector(selectors);
-  return assertInstanceof(element, HTMLElement,
-                          'Missing required element: ' + selectors);
-}
-
-// Handle click on a link. If the link points to a chrome: or file: url, then
-// call into the browser to do the navigation.
-document.addEventListener('click', function(e) {
-  if (e.defaultPrevented)
-    return;
-
-  var el = e.target;
-  if (el.nodeType == Node.ELEMENT_NODE &&
-      el.webkitMatchesSelector('A, A *')) {
-    while (el.tagName != 'A') {
-      el = el.parentElement;
-    }
-
-    if ((el.protocol == 'file:' || el.protocol == 'about:') &&
-        (e.button == 0 || e.button == 1)) {
-      chrome.send('navigateToUrl', [
-        el.href,
-        el.target,
-        e.button,
-        e.altKey,
-        e.ctrlKey,
-        e.metaKey,
-        e.shiftKey
-      ]);
-      e.preventDefault();
-    }
-  }
-});
-
-/**
- * Creates a new URL which is the old URL with a GET param of key=value.
- * @param {string} url The base URL. There is not sanity checking on the URL so
- *     it must be passed in a proper format.
- * @param {string} key The key of the param.
- * @param {string} value The value of the param.
- * @return {string} The new URL.
- */
-function appendParam(url, key, value) {
-  var param = encodeURIComponent(key) + '=' + encodeURIComponent(value);
-
-  if (url.indexOf('?') == -1)
-    return url + '?' + param;
-  return url + '&' + param;
-}
-
-/**
- * Creates an element of a specified type with a specified class name.
- * @param {string} type The node type.
- * @param {string} className The class name to use.
- * @return {Element} The created element.
- */
-function createElementWithClassName(type, className) {
-  var elm = document.createElement(type);
-  elm.className = className;
-  return elm;
-}
-
-/**
- * webkitTransitionEnd does not always fire (e.g. when animation is aborted
- * or when no paint happens during the animation). This function sets up
- * a timer and emulate the event if it is not fired when the timer expires.
- * @param {!HTMLElement} el The element to watch for webkitTransitionEnd.
- * @param {number=} opt_timeOut The maximum wait time in milliseconds for the
- *     webkitTransitionEnd to happen. If not specified, it is fetched from |el|
- *     using the transitionDuration style value.
- */
-function ensureTransitionEndEvent(el, opt_timeOut) {
-  if (opt_timeOut === undefined) {
-    var style = getComputedStyle(el);
-    opt_timeOut = parseFloat(style.transitionDuration) * 1000;
-
-    // Give an additional 50ms buffer for the animation to complete.
-    opt_timeOut += 50;
-  }
-
-  var fired = false;
-  el.addEventListener('webkitTransitionEnd', function f(e) {
-    el.removeEventListener('webkitTransitionEnd', f);
-    fired = true;
-  });
-  window.setTimeout(function() {
-    if (!fired)
-      cr.dispatchSimpleEvent(el, 'webkitTransitionEnd', true);
-  }, opt_timeOut);
-}
-
-/**
- * Alias for document.scrollTop getter.
- * @param {!HTMLDocument} doc The document node where information will be
- *     queried from.
- * @return {number} The Y document scroll offset.
- */
-function scrollTopForDocument(doc) {
-  return doc.documentElement.scrollTop || doc.body.scrollTop;
-}
-
-/**
- * Alias for document.scrollTop setter.
- * @param {!HTMLDocument} doc The document node where information will be
- *     queried from.
- * @param {number} value The target Y scroll offset.
- */
-function setScrollTopForDocument(doc, value) {
-  doc.documentElement.scrollTop = doc.body.scrollTop = value;
-}
-
-/**
- * Alias for document.scrollLeft getter.
- * @param {!HTMLDocument} doc The document node where information will be
- *     queried from.
- * @return {number} The X document scroll offset.
- */
-function scrollLeftForDocument(doc) {
-  return doc.documentElement.scrollLeft || doc.body.scrollLeft;
-}
-
-/**
- * Alias for document.scrollLeft setter.
- * @param {!HTMLDocument} doc The document node where information will be
- *     queried from.
- * @param {number} value The target X scroll offset.
- */
-function setScrollLeftForDocument(doc, value) {
-  doc.documentElement.scrollLeft = doc.body.scrollLeft = value;
-}
-
-/**
- * Replaces '&', '<', '>', '"', and ''' characters with their HTML encoding.
- * @param {string} original The original string.
- * @return {string} The string with all the characters mentioned above replaced.
- */
-function HTMLEscape(original) {
-  return original.replace(/&/g, '&amp;')
-                 .replace(/</g, '&lt;')
-                 .replace(/>/g, '&gt;')
-                 .replace(/"/g, '&quot;')
-                 .replace(/'/g, '&#39;');
-}
-
-/**
- * Shortens the provided string (if necessary) to a string of length at most
- * |maxLength|.
- * @param {string} original The original string.
- * @param {number} maxLength The maximum length allowed for the string.
- * @return {string} The original string if its length does not exceed
- *     |maxLength|. Otherwise the first |maxLength| - 1 characters with '...'
- *     appended.
- */
-function elide(original, maxLength) {
-  if (original.length <= maxLength)
-    return original;
-  return original.substring(0, maxLength - 1) + '\u2026';
-}
-
-/**
- * Quote a string so it can be used in a regular expression.
- * @param {string} str The source string.
- * @return {string} The escaped string.
- */
-function quoteString(str) {
-  return str.replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:])/g, '\\$1');
-}
-
-// <if expr="is_ios">
-// Polyfill 'key' in KeyboardEvent for iOS.
-// This function is not intended to be complete but should
-// be sufficient enough to have iOS work correctly while
-// it does not support key yet.
-if (!('key' in KeyboardEvent.prototype)) {
-  Object.defineProperty(KeyboardEvent.prototype, 'key', {
-    /** @this {KeyboardEvent} */
-    get: function () {
-      // 0-9
-      if (this.keyCode >= 0x30 && this.keyCode <= 0x39)
-        return String.fromCharCode(this.keyCode);
-
-      // A-Z
-      if (this.keyCode >= 0x41 && this.keyCode <= 0x5a) {
-        var result = String.fromCharCode(this.keyCode).toLowerCase();
-        if (this.shiftKey)
-          result = result.toUpperCase();
-        return result;
-      }
-
-      // Special characters
-      switch(this.keyCode) {
-        case 0x08: return 'Backspace';
-        case 0x09: return 'Tab';
-        case 0x0d: return 'Enter';
-        case 0x10: return 'Shift';
-        case 0x11: return 'Control';
-        case 0x12: return 'Alt';
-        case 0x1b: return 'Escape';
-        case 0x20: return ' ';
-        case 0x21: return 'PageUp';
-        case 0x22: return 'PageDown';
-        case 0x23: return 'End';
-        case 0x24: return 'Home';
-        case 0x25: return 'ArrowLeft';
-        case 0x26: return 'ArrowUp';
-        case 0x27: return 'ArrowRight';
-        case 0x28: return 'ArrowDown';
-        case 0x2d: return 'Insert';
-        case 0x2e: return 'Delete';
-        case 0x5b: return 'Meta';
-        case 0x70: return 'F1';
-        case 0x71: return 'F2';
-        case 0x72: return 'F3';
-        case 0x73: return 'F4';
-        case 0x74: return 'F5';
-        case 0x75: return 'F6';
-        case 0x76: return 'F7';
-        case 0x77: return 'F8';
-        case 0x78: return 'F9';
-        case 0x79: return 'F10';
-        case 0x7a: return 'F11';
-        case 0x7b: return 'F12';
-        case 0xbb: return '=';
-        case 0xbd: return '-';
-        case 0xdb: return '[';
-        case 0xdd: return ']';
-      }
-      return 'Unidentified';
+(function() {
+    'use strict';
+
+    Polymer({
+      is: 'iron-location',
+      properties: {
+        /**
+         * The pathname component of the URL.
+         */
+        path: {
+          type: String,
+          notify: true,
+          value: function() {
+            return window.decodeURIComponent(window.location.pathname);
+          }
+        },
+        /**
+         * The query string portion of the URL.
+         */
+        query: {
+          type: String,
+          notify: true,
+          value: function() {
+            return window.decodeURIComponent(window.location.search.slice(1));
+          }
+        },
+        /**
+         * The hash component of the URL.
+         */
+        hash: {
+          type: String,
+          notify: true,
+          value: function() {
+            return window.decodeURIComponent(window.location.hash.slice(1));
+          }
+        },
+        /**
+         * If the user was on a URL for less than `dwellTime` milliseconds, it
+         * won't be added to the browser's history, but instead will be replaced
+         * by the next entry.
+         *
+         * This is to prevent large numbers of entries from clogging up the user's
+         * browser history. Disable by setting to a negative number.
+         */
+        dwellTime: {
+          type: Number,
+          value: 2000
+        },
+
+        /**
+         * A regexp that defines the set of URLs that should be considered part
+         * of this web app.
+         *
+         * Clicking on a link that matches this regex won't result in a full page
+         * navigation, but will instead just update the URL state in place.
+         *
+         * This regexp is given everything after the origin in an absolute
+         * URL. So to match just URLs that start with /search/ do:
+         *     url-space-regex="^/search/"
+         *
+         * @type {string|RegExp}
+         */
+        urlSpaceRegex: {
+          type: String,
+          value: ''
+        },
+
+        /**
+         * urlSpaceRegex, but coerced into a regexp.
+         *
+         * @type {RegExp}
+         */
+        _urlSpaceRegExp: {
+          computed: '_makeRegExp(urlSpaceRegex)'
+        },
+
+        _lastChangedAt: {
+          type: Number
+        },
+
+        _initialized: {
+          type: Boolean,
+          value: false
+        }
+      },
+      hostAttributes: {
+        hidden: true
+      },
+      observers: [
+        '_updateUrl(path, query, hash)'
+      ],
+      attached: function() {
+        this.listen(window, 'hashchange', '_hashChanged');
+        this.listen(window, 'location-changed', '_urlChanged');
+        this.listen(window, 'popstate', '_urlChanged');
+        this.listen(/** @type {!HTMLBodyElement} */(document.body), 'click', '_globalOnClick');
+        // Give a 200ms grace period to make initial redirects without any
+        // additions to the user's history.
+        this._lastChangedAt = window.performance.now() - (this.dwellTime - 200);
+
+        this._initialized = true;
+        this._urlChanged();
+      },
+      detached: function() {
+        this.unlisten(window, 'hashchange', '_hashChanged');
+        this.unlisten(window, 'location-changed', '_urlChanged');
+        this.unlisten(window, 'popstate', '_urlChanged');
+        this.unlisten(/** @type {!HTMLBodyElement} */(document.body), 'click', '_globalOnClick');
+        this._initialized = false;
+      },
+      _hashChanged: function() {
+        this.hash = window.decodeURIComponent(window.location.hash.substring(1));
+      },
+      _urlChanged: function() {
+        // We want to extract all info out of the updated URL before we
+        // try to write anything back into it.
+        //
+        // i.e. without _dontUpdateUrl we'd overwrite the new path with the old
+        // one when we set this.hash. Likewise for query.
+        this._dontUpdateUrl = true;
+        this._hashChanged();
+        this.path = window.decodeURIComponent(window.location.pathname);
+        this.query = window.decodeURIComponent(
+            window.location.search.substring(1));
+        this._dontUpdateUrl = false;
+        this._updateUrl();
+      },
+      _getUrl: function() {
+        var partiallyEncodedPath = window.encodeURI(
+            this.path).replace(/\#/g, '%23').replace(/\?/g, '%3F');
+        var partiallyEncodedQuery = '';
+        if (this.query) {
+          partiallyEncodedQuery = '?' + window.encodeURI(
+              this.query).replace(/\#/g, '%23');
+        }
+        var partiallyEncodedHash = '';
+        if (this.hash) {
+          partiallyEncodedHash = '#' + window.encodeURI(this.hash);
+        }
+        return (
+            partiallyEncodedPath + partiallyEncodedQuery + partiallyEncodedHash);
+      },
+      _updateUrl: function() {
+        if (this._dontUpdateUrl || !this._initialized) {
+          return;
+        }
+        if (this.path === window.decodeURIComponent(window.location.pathname) &&
+            this.query === window.decodeURIComponent(
+                window.location.search.substring(1)) &&
+            this.hash === window.decodeURIComponent(
+                window.location.hash.substring(1))) {
+          // Nothing to do, the current URL is a representation of our properties.
+          return;
+        }
+        var newUrl = this._getUrl();
+        // Need to use a full URL in case the containing page has a base URI.
+        var fullNewUrl = new URL(
+            newUrl, window.location.protocol + '//' + window.location.host).href;
+        var now = window.performance.now();
+        var shouldReplace =
+            this._lastChangedAt + this.dwellTime > now;
+        this._lastChangedAt = now;
+        if (shouldReplace) {
+          window.history.replaceState({}, '', fullNewUrl);
+        } else {
+          window.history.pushState({}, '', fullNewUrl);
+        }
+        this.fire('location-changed', {}, {node: window});
+      },
+      /**
+       * A necessary evil so that links work as expected. Does its best to
+       * bail out early if possible.
+       *
+       * @param {MouseEvent} event .
+       */
+      _globalOnClick: function(event) {
+        // If another event handler has stopped this event then there's nothing
+        // for us to do. This can happen e.g. when there are multiple
+        // iron-location elements in a page.
+        if (event.defaultPrevented) {
+          return;
+        }
+        var href = this._getSameOriginLinkHref(event);
+        if (!href) {
+          return;
+        }
+        event.preventDefault();
+        // If the navigation is to the current page we shouldn't add a history
+        // entry or fire a change event.
+        if (href === window.location.href) {
+          return;
+        }
+        window.history.pushState({}, '', href);
+        this.fire('location-changed', {}, {node: window});
+      },
+      /**
+       * Returns the absolute URL of the link (if any) that this click event
+       * is clicking on, if we can and should override the resulting full
+       * page navigation. Returns null otherwise.
+       *
+       * @param {MouseEvent} event .
+       * @return {string?} .
+       */
+      _getSameOriginLinkHref: function(event) {
+        // We only care about left-clicks.
+        if (event.button !== 0) {
+          return null;
+        }
+        // We don't want modified clicks, where the intent is to open the page
+        // in a new tab.
+        if (event.metaKey || event.ctrlKey) {
+          return null;
+        }
+        var eventPath = Polymer.dom(event).path;
+        var anchor = null;
+        for (var i = 0; i < eventPath.length; i++) {
+          var element = eventPath[i];
+          if (element.tagName === 'A' && element.href) {
+            anchor = element;
+            break;
+          }
+        }
+
+        // If there's no link there's nothing to do.
+        if (!anchor) {
+          return null;
+        }
+
+        // Target blank is a new tab, don't intercept.
+        if (anchor.target === '_blank') {
+          return null;
+        }
+        // If the link is for an existing parent frame, don't intercept.
+        if ((anchor.target === '_top' ||
+             anchor.target === '_parent') &&
+            window.top !== window) {
+          return null;
+        }
+
+        var href = anchor.href;
+
+        // It only makes sense for us to intercept same-origin navigations.
+        // pushState/replaceState don't work with cross-origin links.
+        var url;
+        if (document.baseURI != null) {
+          url = new URL(href, /** @type {string} */(document.baseURI));
+        } else {
+          url = new URL(href);
+        }
+
+        var origin;
+
+        // IE Polyfill
+        if (window.location.origin) {
+          origin = window.location.origin;
+        } else {
+          origin = window.location.protocol + '//' + window.location.hostname;
+
+          if (window.location.port) {
+            origin += ':' + window.location.port;
+          }
+        }
+
+        if (url.origin !== origin) {
+          return null;
+        }
+        var normalizedHref = url.pathname + url.search + url.hash;
+
+        // If we've been configured not to handle this url... don't handle it!
+        if (this._urlSpaceRegExp &&
+            !this._urlSpaceRegExp.test(normalizedHref)) {
+          return null;
+        }
+        // Need to use a full URL in case the containing page has a base URI.
+        var fullNormalizedHref = new URL(
+            normalizedHref, window.location.href).href;
+        return fullNormalizedHref;
+      },
+      _makeRegExp: function(urlSpaceRegex) {
+        return RegExp(urlSpaceRegex);
+      }
+    });
+  })();
+'use strict';
+
+  Polymer({
+    is: 'iron-query-params',
+    properties: {
+      paramsString: {
+        type: String,
+        notify: true,
+        observer: 'paramsStringChanged',
+      },
+      paramsObject: {
+        type: Object,
+        notify: true,
+        value: function() {
+          return {};
+        }
+      },
+      _dontReact: {
+        type: Boolean,
+        value: false
+      }
+    },
+    hostAttributes: {
+      hidden: true
+    },
+    observers: [
+      'paramsObjectChanged(paramsObject.*)'
+    ],
+    paramsStringChanged: function() {
+      this._dontReact = true;
+      this.paramsObject = this._decodeParams(this.paramsString);
+      this._dontReact = false;
+    },
+    paramsObjectChanged: function() {
+      if (this._dontReact) {
+        return;
+      }
+      this.paramsString = this._encodeParams(this.paramsObject);
+    },
+    _encodeParams: function(params) {
+      var encodedParams = [];
+      for (var key in params) {
+        var value = params[key];
+        if (value === '') {
+          encodedParams.push(encodeURIComponent(key));
+        } else if (value) {
+          encodedParams.push(
+              encodeURIComponent(key) +
+              '=' +
+              encodeURIComponent(value.toString())
+          );
+        }
+      }
+      return encodedParams.join('&');
+    },
+    _decodeParams: function(paramString) {
+      var params = {};
+
+      // Work around a bug in decodeURIComponent where + is not
+      // converted to spaces:
+      paramString = (paramString || '').replace(/\+/g, '%20');
+
+      var paramList = paramString.split('&');
+      for (var i = 0; i < paramList.length; i++) {
+        var param = paramList[i].split('=');
+        if (param[0]) {
+          params[decodeURIComponent(param[0])] =
+              decodeURIComponent(param[1] || '');
+        }
+      }
+      return params;
     }
   });
-} else {
-  window.console.log("KeyboardEvent.Key polyfill not required");
-}
-// </if>  /* is_ios */
+'use strict';
+
+  /**
+   * Provides bidirectional mapping between `path` and `queryParams` and a
+   * app-route compatible `route` object.
+   *
+   * For more information, see the docs for `app-route-converter`.
+   *
+   * @polymerBehavior
+   */
+  Polymer.AppRouteConverterBehavior = {
+    properties: {
+      /**
+       * A model representing the deserialized path through the route tree, as
+       * well as the current queryParams.
+       *
+       * A route object is the kernel of the routing system. It is intended to
+       * be fed into consuming elements such as `app-route`.
+       *
+       * @type {?Object}
+       */
+      route: {
+        type: Object,
+        notify: true
+      },
+
+      /**
+       * A set of key/value pairs that are universally accessible to branches of
+       * the route tree.
+       *
+       * @type {?Object}
+       */
+      queryParams: {
+        type: Object,
+        notify: true
+      },
+
+      /**
+       * The serialized path through the route tree. This corresponds to the
+       * `window.location.pathname` value, and will update to reflect changes
+       * to that value.
+       */
+      path: {
+        type: String,
+        notify: true,
+      }
+    },
+
+    observers: [
+      '_locationChanged(path, queryParams)',
+      '_routeChanged(route.prefix, route.path)',
+      '_routeQueryParamsChanged(route.__queryParams)'
+    ],
+
+    created: function() {
+      this.linkPaths('route.__queryParams', 'queryParams');
+      this.linkPaths('queryParams', 'route.__queryParams');
+    },
+
+    /**
+     * Handler called when the path or queryParams change.
+     */
+    _locationChanged: function() {
+      if (this.route &&
+          this.route.path === this.path &&
+          this.queryParams === this.route.__queryParams) {
+        return;
+      }
+      this.route = {
+        prefix: '',
+        path: this.path,
+        __queryParams: this.queryParams
+      };
+    },
+
+    /**
+     * Handler called when the route prefix and route path change.
+     */
+    _routeChanged: function() {
+      if (!this.route) {
+        return;
+      }
+
+      this.path = this.route.prefix + this.route.path;
+    },
+
+    /**
+     * Handler called when the route queryParams change.
+     *
+     * @param  {Object} queryParams A set of key/value pairs that are
+     * universally accessible to branches of the route tree.
+     */
+    _routeQueryParamsChanged: function(queryParams) {
+      if (!this.route) {
+        return;
+      }
+      this.queryParams = queryParams;
+    }
+  };
+'use strict';
+
+    Polymer({
+      is: 'app-location',
+
+      properties: {
+        /**
+         * A model representing the deserialized path through the route tree, as
+         * well as the current queryParams.
+         */
+        route: {
+          type: Object,
+          notify: true
+        },
+
+        /**
+         * In many scenarios, it is convenient to treat the `hash` as a stand-in
+         * alternative to the `path`. For example, if deploying an app to a static
+         * web server (e.g., Github Pages) - where one does not have control over
+         * server-side routing - it is usually a better experience to use the hash
+         * to represent paths through one's app.
+         *
+         * When this property is set to true, the `hash` will be used in place of
+
+         * the `path` for generating a `route`.
+         */
+        useHashAsPath: {
+          type: Boolean,
+          value: false
+        },
+
+        /**
+         * A regexp that defines the set of URLs that should be considered part
+         * of this web app.
+         *
+         * Clicking on a link that matches this regex won't result in a full page
+         * navigation, but will instead just update the URL state in place.
+         *
+         * This regexp is given everything after the origin in an absolute
+         * URL. So to match just URLs that start with /search/ do:
+         *     url-space-regex="^/search/"
+         *
+         * @type {string|RegExp}
+         */
+        urlSpaceRegex: {
+          type: String,
+          notify: true
+        },
+
+        /**
+         * A set of key/value pairs that are universally accessible to branches
+         * of the route tree.
+         */
+        __queryParams: {
+          type: Object
+        },
+
+        /**
+         * The pathname component of the current URL.
+         */
+        __path: {
+          type: String
+        },
+
+        /**
+         * The query string portion of the current URL.
+         */
+        __query: {
+          type: String
+        },
+
+        /**
+         * The hash portion of the current URL.
+         */
+        __hash: {
+          type: String
+        },
+
+        /**
+         * The route path, which will be either the hash or the path, depending
+         * on useHashAsPath.
+         */
+        path: {
+          type: String,
+          observer: '__onPathChanged'
+        }
+      },
+
+      behaviors: [Polymer.AppRouteConverterBehavior],
+
+      observers: [
+        '__computeRoutePath(useHashAsPath, __hash, __path)'
+      ],
+
+      __computeRoutePath: function() {
+        this.path = this.useHashAsPath ? this.__hash : this.__path;
+      },
+
+      __onPathChanged: function() {
+        if (!this._readied) {
+          return;
+        }
+
+        if (this.useHashAsPath) {
+          this.__hash = this.path;
+        } else {
+          this.__path = this.path;
+        }
+      }
+    });
+'use strict';
+
+  Polymer({
+    is: 'app-route',
+
+    properties: {
+      /**
+       * The URL component managed by this element.
+       */
+      route: {
+        type: Object,
+        notify: true
+      },
+
+      /**
+       * The pattern of slash-separated segments to match `path` against.
+       *
+       * For example the pattern "/foo" will match "/foo" or "/foo/bar"
+       * but not "/foobar".
+       *
+       * Path segments like `/:named` are mapped to properties on the `data` object.
+       */
+      pattern: {
+        type: String
+      },
+
+      /**
+       * The parameterized values that are extracted from the route as
+       * described by `pattern`.
+       */
+      data: {
+        type: Object,
+        value: function() {return {};},
+        notify: true
+      },
+
+      /**
+       * @type {?Object}
+       */
+      queryParams: {
+        type: Object,
+        value: function() {
+          return {};
+        },
+        notify: true
+      },
+
+      /**
+       * The part of `path` NOT consumed by `pattern`.
+       */
+      tail: {
+        type: Object,
+        value: function() {return {path: null, prefix: null, __queryParams: null};},
+        notify: true
+      },
+
+      active: {
+        type: Boolean,
+        notify: true,
+        readOnly: true
+      },
+
+      _queryParamsUpdating: {
+        type: Boolean,
+        value: false
+      },
+      /**
+       * @type {?string}
+       */
+      _matched: {
+        type: String,
+        value: ''
+      }
+    },
+
+    observers: [
+      '__tryToMatch(route.path, pattern)',
+      '__updatePathOnDataChange(data.*)',
+      '__tailPathChanged(tail.path)',
+      '__routeQueryParamsChanged(route.__queryParams)',
+      '__tailQueryParamsChanged(tail.__queryParams)',
+      '__queryParamsChanged(queryParams.*)'
+    ],
+
+    created: function() {
+      this.linkPaths('route.__queryParams', 'tail.__queryParams');
+      this.linkPaths('tail.__queryParams', 'route.__queryParams');
+    },
+
+    /**
+     * Deal with the query params object being assigned to wholesale.
+     * @export
+     */
+    __routeQueryParamsChanged: function(queryParams) {
+      if (queryParams && this.tail) {
+        this.set('tail.__queryParams', queryParams);
+
+        if (!this.active || this._queryParamsUpdating) {
+          return;
+        }
+
+        // Copy queryParams and track whether there are any differences compared
+        // to the existing query params.
+        var copyOfQueryParams = {};
+        var anythingChanged = false;
+        for (var key in queryParams) {
+          copyOfQueryParams[key] = queryParams[key];
+          if (anythingChanged ||
+              !this.queryParams ||
+              queryParams[key] !== this.queryParams[key]) {
+            anythingChanged = true;
+          }
+        }
+        // Need to check whether any keys were deleted
+        for (var key in this.queryParams) {
+          if (anythingChanged || !(key in queryParams)) {
+            anythingChanged = true;
+            break;
+          }
+        }
+
+        if (!anythingChanged) {
+          return;
+        }
+        this._queryParamsUpdating = true;
+        this.set('queryParams', copyOfQueryParams);
+        this._queryParamsUpdating = false;
+      }
+    },
+
+    /**
+     * @export
+     */
+    __tailQueryParamsChanged: function(queryParams) {
+      if (queryParams && this.route) {
+        this.set('route.__queryParams', queryParams);
+      }
+    },
+
+    /**
+     * @export
+     */
+    __queryParamsChanged: function(changes) {
+      if (!this.active || this._queryParamsUpdating) {
+        return;
+      }
+
+      this.set('route.__' + changes.path, changes.value);
+    },
+
+    __resetProperties: function() {
+      this._setActive(false);
+      this._matched = null;
+      //this.tail = { path: null, prefix: null, queryParams: null };
+      //this.data = {};
+    },
+
+    /**
+     * @export
+     */
+    __tryToMatch: function() {
+      if (!this.route) {
+        return;
+      }
+      var path = this.route.path;
+      var pattern = this.pattern;
+      if (!pattern) {
+        return;
+      }
+
+      if (!path) {
+        this.__resetProperties();
+        return;
+      }
+
+      var remainingPieces = path.split('/');
+      var patternPieces = pattern.split('/');
+
+      var matched = [];
+      var namedMatches = {};
+
+      for (var i=0; i < patternPieces.length; i++) {
+        var patternPiece = patternPieces[i];
+        if (!patternPiece && patternPiece !== '') {
+          break;
+        }
+        var pathPiece = remainingPieces.shift();
+
+        // We don't match this path.
+        if (!pathPiece && pathPiece !== '') {
+          this.__resetProperties();
+          return;
+        }
+        matched.push(pathPiece);
+
+        if (patternPiece.charAt(0) == ':') {
+          namedMatches[patternPiece.slice(1)] = pathPiece;
+        } else if (patternPiece !== pathPiece) {
+          this.__resetProperties();
+          return;
+        }
+      }
+
+      this._matched = matched.join('/');
+
+      // Properties that must be updated atomically.
+      var propertyUpdates = {};
+
+      //this.active
+      if (!this.active) {
+        propertyUpdates.active = true;
+      }
+
+      // this.tail
+      var tailPrefix = this.route.prefix + this._matched;
+      var tailPath = remainingPieces.join('/');
+      if (remainingPieces.length > 0) {
+        tailPath = '/' + tailPath;
+      }
+      if (!this.tail ||
+          this.tail.prefix !== tailPrefix ||
+          this.tail.path !== tailPath) {
+        propertyUpdates.tail = {
+          prefix: tailPrefix,
+          path: tailPath,
+          __queryParams: this.route.__queryParams
+        };
+      }
+
+      // this.data
+      propertyUpdates.data = namedMatches;
+      this._dataInUrl = {};
+      for (var key in namedMatches) {
+        this._dataInUrl[key] = namedMatches[key];
+      }
+
+      this.__setMulti(propertyUpdates);
+    },
+
+    /**
+     * @export
+     */
+    __tailPathChanged: function() {
+      if (!this.active) {
+        return;
+      }
+      var tailPath = this.tail.path;
+      var newPath = this._matched;
+      if (tailPath) {
+        if (tailPath.charAt(0) !== '/') {
+          tailPath = '/' + tailPath;
+        }
+        newPath += tailPath;
+      }
+      this.set('route.path', newPath);
+    },
+
+    /**
+     * @export
+     */
+    __updatePathOnDataChange: function() {
+      if (!this.route || !this.active) {
+        return;
+      }
+      var newPath = this.__getLink({});
+      var oldPath = this.__getLink(this._dataInUrl);
+      if (newPath === oldPath) {
+        return;
+      }
+      this.set('route.path', newPath);
+    },
+
+    __getLink: function(overrideValues) {
+      var values = {tail: null};
+      for (var key in this.data) {
+        values[key] = this.data[key];
+      }
+      for (var key in overrideValues) {
+        values[key] = overrideValues[key];
+      }
+      var patternPieces = this.pattern.split('/');
+      var interp = patternPieces.map(function(value) {
+        if (value[0] == ':') {
+          value = values[value.slice(1)];
+        }
+        return value;
+      }, this);
+      if (values.tail && values.tail.path) {
+        if (interp.length > 0 && values.tail.path.charAt(0) === '/') {
+          interp.push(values.tail.path.slice(1));
+        } else {
+          interp.push(values.tail.path);
+        }
+      }
+      return interp.join('/');
+    },
+
+    __setMulti: function(setObj) {
+      // HACK(rictic): skirting around 1.0's lack of a setMulti by poking at
+      //     internal data structures. I would not advise that you copy this
+      //     example.
+      //
+      //     In the future this will be a feature of Polymer itself.
+      //     See: https://github.com/Polymer/polymer/issues/3640
+      //
+      //     Hacking around with private methods like this is juggling footguns,
+      //     and is likely to have unexpected and unsupported rough edges.
+      //
+      //     Be ye so warned.
+      for (var property in setObj) {
+        this._propertySetter(property, setObj[property]);
+      }
+
+      for (var property in setObj) {
+        this._pathEffector(property, this[property]);
+        this._notifyPathUp(property, this[property]);
+      }
+    }
+  });
+Polymer({
+
+    is: 'iron-media-query',
+
+    properties: {
+
+      /**
+       * The Boolean return value of the media query.
+       */
+      queryMatches: {
+        type: Boolean,
+        value: false,
+        readOnly: true,
+        notify: true
+      },
+
+      /**
+       * The CSS media query to evaluate.
+       */
+      query: {
+        type: String,
+        observer: 'queryChanged'
+      },
+
+      /**
+       * If true, the query attribute is assumed to be a complete media query
+       * string rather than a single media feature.
+       */
+      full: {
+        type: Boolean,
+        value: false
+      },
+
+      /**
+       * @type {function(MediaQueryList)}
+       */
+      _boundMQHandler: {
+        value: function() {
+          return this.queryHandler.bind(this);
+        }
+      },
+
+      /**
+       * @type {MediaQueryList}
+       */
+      _mq: {
+        value: null
+      }
+    },
+
+    attached: function() {
+      this.style.display = 'none';
+      this.queryChanged();
+    },
+
+    detached: function() {
+      this._remove();
+    },
+
+    _add: function() {
+      if (this._mq) {
+        this._mq.addListener(this._boundMQHandler);
+      }
+    },
+
+    _remove: function() {
+      if (this._mq) {
+        this._mq.removeListener(this._boundMQHandler);
+      }
+      this._mq = null;
+    },
+
+    queryChanged: function() {
+      this._remove();
+      var query = this.query;
+      if (!query) {
+        return;
+      }
+      if (!this.full && query[0] !== '(') {
+        query = '(' + query + ')';
+      }
+      this._mq = window.matchMedia(query);
+      this._add();
+      this.queryHandler(this._mq);
+    },
+
+    queryHandler: function(mq) {
+      this._setQueryMatches(mq.matches);
+    }
+
+  });
 /**
    * `IronResizableBehavior` is a behavior that can be used in Polymer elements to
    * coordinate the flow of resize events between "resizers" (elements that control the
    * size or hidden state of their children) and "resizables" (elements that need to be
    * notified when they are resized or un-hidden by their parents in order to take
    * action on their new measurements).
    *
    * Elements that perform measurement should add the `IronResizableBehavior` behavior to
    * their element definition and listen for the `iron-resize` event on themselves.
    * This event will be fired when they become showing after having been hidden,
@@ skipping 160 matching lines @@
       // else they will get redundantly notified when the parent attaches).
       if (!this.isAttached) {
         return;
       }
 
       this._notifyingDescendant = true;
       descendant.notifyResize();
       this._notifyingDescendant = false;
     }
   };
+/**
+   * @param {!Function} selectCallback
+   * @constructor
+   */
+  Polymer.IronSelection = function(selectCallback) {
+    this.selection = [];
+    this.selectCallback = selectCallback;
+  };
+
+  Polymer.IronSelection.prototype = {
+
+    /**
+     * Retrieves the selected item(s).
+     *
+     * @method get
+     * @returns Returns the selected item(s). If the multi property is true,
+     * `get` will return an array, otherwise it will return
+     * the selected item or undefined if there is no selection.
+     */
+    get: function() {
+      return this.multi ? this.selection.slice() : this.selection[0];
+    },
+
+    /**
+     * Clears all the selection except the ones indicated.
+     *
+     * @method clear
+     * @param {Array} excludes items to be excluded.
+     */
+    clear: function(excludes) {
+      this.selection.slice().forEach(function(item) {
+        if (!excludes || excludes.indexOf(item) < 0) {
+          this.setItemSelected(item, false);
+        }
+      }, this);
+    },
+
+    /**
+     * Indicates if a given item is selected.
+     *
+     * @method isSelected
+     * @param {*} item The item whose selection state should be checked.
+     * @returns Returns true if `item` is selected.
+     */
+    isSelected: function(item) {
+      return this.selection.indexOf(item) >= 0;
+    },
+
+    /**
+     * Sets the selection state for a given item to either selected or deselected.
+     *
+     * @method setItemSelected
+     * @param {*} item The item to select.
+     * @param {boolean} isSelected True for selected, false for deselected.
+     */
+    setItemSelected: function(item, isSelected) {
+      if (item != null) {
+        if (isSelected !== this.isSelected(item)) {
+          // proceed to update selection only if requested state differs from current
+          if (isSelected) {
+            this.selection.push(item);
+          } else {
+            var i = this.selection.indexOf(item);
+            if (i >= 0) {
+              this.selection.splice(i, 1);
+            }
+          }
+          if (this.selectCallback) {
+            this.selectCallback(item, isSelected);
+          }
+        }
+      }
+    },
+
+    /**
+     * Sets the selection state for a given item. If the `multi` property
+     * is true, then the selected state of `item` will be toggled; otherwise
+     * the `item` will be selected.
+     *
+     * @method select
+     * @param {*} item The item to select.
+     */
+    select: function(item) {
+      if (this.multi) {
+        this.toggle(item);
+      } else if (this.get() !== item) {
+        this.setItemSelected(this.get(), false);
+        this.setItemSelected(item, true);
+      }
+    },
+
+    /**
+     * Toggles the selection state for `item`.
+     *
+     * @method toggle
+     * @param {*} item The item to toggle.
+     */
+    toggle: function(item) {
+      this.setItemSelected(item, !this.isSelected(item));
+    }
+
+  };
+/** @polymerBehavior */
+  Polymer.IronSelectableBehavior = {
+
+      /**
+       * Fired when iron-selector is activated (selected or deselected).
+       * It is fired before the selected items are changed.
+       * Cancel the event to abort selection.
+       *
+       * @event iron-activate
+       */
+
+      /**
+       * Fired when an item is selected
+       *
+       * @event iron-select
+       */
+
+      /**
+       * Fired when an item is deselected
+       *
+       * @event iron-deselect
+       */
+
+      /**
+       * Fired when the list of selectable items changes (e.g., items are
+       * added or removed). The detail of the event is a mutation record that
+       * describes what changed.
+       *
+       * @event iron-items-changed
+       */
+
+    properties: {
+
+      /**
+       * If you want to use an attribute value or property of an element for
+       * `selected` instead of the index, set this to the name of the attribute
+       * or property. Hyphenated values are converted to camel case when used to
+       * look up the property of a selectable element. Camel cased values are
+       * *not* converted to hyphenated values for attribute lookup. It's
+       * recommended that you provide the hyphenated form of the name so that
+       * selection works in both cases. (Use `attr-or-property-name` instead of
+       * `attrOrPropertyName`.)
+       */
+      attrForSelected: {
+        type: String,
+        value: null
+      },
+
+      /**
+       * Gets or sets the selected element. The default is to use the index of the item.
+       * @type {string|number}
+       */
+      selected: {
+        type: String,
+        notify: true
+      },
+
+      /**
+       * Returns the currently selected item.
+       *
+       * @type {?Object}
+       */
+      selectedItem: {
+        type: Object,
+        readOnly: true,
+        notify: true
+      },
+
+      /**
+       * The event that fires from items when they are selected. Selectable
+       * will listen for this event from items and update the selection state.
+       * Set to empty string to listen to no events.
+       */
+      activateEvent: {
+        type: String,
+        value: 'tap',
+        observer: '_activateEventChanged'
+      },
+
+      /**
+       * This is a CSS selector string.  If this is set, only items that match the CSS selector
+       * are selectable.
+       */
+      selectable: String,
+
+      /**
+       * The class to set on elements when selected.
+       */
+      selectedClass: {
+        type: String,
+        value: 'iron-selected'
+      },
+
+      /**
+       * The attribute to set on elements when selected.
+       */
+      selectedAttribute: {
+        type: String,
+        value: null
+      },
+
+      /**
+       * Default fallback if the selection based on selected with `attrForSelected`
+       * is not found.
+       */
+      fallbackSelection: {
+        type: String,
+        value: null
+      },
+
+      /**
+       * The list of items from which a selection can be made.
+       */
+      items: {
+        type: Array,
+        readOnly: true,
+        notify: true,
+        value: function() {
+          return [];
+        }
+      },
+
+      /**
+       * The set of excluded elements where the key is the `localName`
+       * of the element that will be ignored from the item list.
+       *
+       * @default {template: 1}
+       */
+      _excludedLocalNames: {
+        type: Object,
+        value: function() {
+          return {
+            'template': 1
+          };
+        }
+      }
+    },
+
+    observers: [
+      '_updateAttrForSelected(attrForSelected)',
+      '_updateSelected(selected)',
+      '_checkFallback(fallbackSelection)'
+    ],
+
+    created: function() {
+      this._bindFilterItem = this._filterItem.bind(this);
+      this._selection = new Polymer.IronSelection(this._applySelection.bind(this));
+    },
+
+    attached: function() {
+      this._observer = this._observeItems(this);
+      this._updateItems();
+      if (!this._shouldUpdateSelection) {
+        this._updateSelected();
+      }
+      this._addListener(this.activateEvent);
+    },
+
+    detached: function() {
+      if (this._observer) {
+        Polymer.dom(this).unobserveNodes(this._observer);
+      }
+      this._removeListener(this.activateEvent);
+    },
+
+    /**
+     * Returns the index of the given item.
+     *
+     * @method indexOf
+     * @param {Object} item
+     * @returns Returns the index of the item
+     */
+    indexOf: function(item) {
+      return this.items.indexOf(item);
+    },
+
+    /**
+     * Selects the given value.
+     *
+     * @method select
+     * @param {string|number} value the value to select.
+     */
+    select: function(value) {
+      this.selected = value;
+    },
+
+    /**
+     * Selects the previous item.
+     *
+     * @method selectPrevious
+     */
+    selectPrevious: function() {
+      var length = this.items.length;
+      var index = (Number(this._valueToIndex(this.selected)) - 1 + length) % length;
+      this.selected = this._indexToValue(index);
+    },
+
+    /**
+     * Selects the next item.
+     *
+     * @method selectNext
+     */
+    selectNext: function() {
+      var index = (Number(this._valueToIndex(this.selected)) + 1) % this.items.length;
+      this.selected = this._indexToValue(index);
+    },
+
+    /**
+     * Selects the item at the given index.
+     *
+     * @method selectIndex
+     */
+    selectIndex: function(index) {
+      this.select(this._indexToValue(index));
+    },
+
+    /**
+     * Force a synchronous update of the `items` property.
+     *
+     * NOTE: Consider listening for the `iron-items-changed` event to respond to
+     * updates to the set of selectable items after updates to the DOM list and
+     * selection state have been made.
+     *
+     * WARNING: If you are using this method, you should probably consider an
+     * alternate approach. Synchronously querying for items is potentially
+     * slow for many use cases. The `items` property will update asynchronously
+     * on its own to reflect selectable items in the DOM.
+     */
+    forceSynchronousItemUpdate: function() {
+      this._updateItems();
+    },
+
+    get _shouldUpdateSelection() {
+      return this.selected != null;
+    },
+
+    _checkFallback: function() {
+      if (this._shouldUpdateSelection) {
+        this._updateSelected();
+      }
+    },
+
+    _addListener: function(eventName) {
+      this.listen(this, eventName, '_activateHandler');
+    },
+
+    _removeListener: function(eventName) {
+      this.unlisten(this, eventName, '_activateHandler');
+    },
+
+    _activateEventChanged: function(eventName, old) {
+      this._removeListener(old);
+      this._addListener(eventName);
+    },
+
+    _updateItems: function() {
+      var nodes = Polymer.dom(this).queryDistributedElements(this.selectable || '*');
+      nodes = Array.prototype.filter.call(nodes, this._bindFilterItem);
+      this._setItems(nodes);
+    },
+
+    _updateAttrForSelected: function() {
+      if (this._shouldUpdateSelection) {
+        this.selected = this._indexToValue(this.indexOf(this.selectedItem));
+      }
+    },
+
+    _updateSelected: function() {
+      this._selectSelected(this.selected);
+    },
+
+    _selectSelected: function(selected) {
+      this._selection.select(this._valueToItem(this.selected));
+      // Check for items, since this array is populated only when attached
+      // Since Number(0) is falsy, explicitly check for undefined
+      if (this.fallbackSelection && this.items.length && (this._selection.get() === undefined)) {
+        this.selected = this.fallbackSelection;
+      }
+    },
+
+    _filterItem: function(node) {
+      return !this._excludedLocalNames[node.localName];
+    },
+
+    _valueToItem: function(value) {
+      return (value == null) ? null : this.items[this._valueToIndex(value)];
+    },
+
+    _valueToIndex: function(value) {
+      if (this.attrForSelected) {
+        for (var i = 0, item; item = this.items[i]; i++) {
+          if (this._valueForItem(item) == value) {
+            return i;
+          }
+        }
+      } else {
+        return Number(value);
+      }
+    },
+
+    _indexToValue: function(index) {
+      if (this.attrForSelected) {
+        var item = this.items[index];
+        if (item) {
+          return this._valueForItem(item);
+        }
+      } else {
+        return index;
+      }
+    },
+
+    _valueForItem: function(item) {
+      var propValue = item[Polymer.CaseMap.dashToCamelCase(this.attrForSelected)];
+      return propValue != undefined ? propValue : item.getAttribute(this.attrForSelected);
+    },
+
+    _applySelection: function(item, isSelected) {
+      if (this.selectedClass) {
+        this.toggleClass(this.selectedClass, isSelected, item);
+      }
+      if (this.selectedAttribute) {
+        this.toggleAttribute(this.selectedAttribute, isSelected, item);
+      }
+      this._selectionChange();
+      this.fire('iron-' + (isSelected ? 'select' : 'deselect'), {item: item});
+    },
+
+    _selectionChange: function() {
+      this._setSelectedItem(this._selection.get());
+    },
+
+    // observe items change under the given node.
+    _observeItems: function(node) {
+      return Polymer.dom(node).observeNodes(function(mutation) {
+        this._updateItems();
+
+        if (this._shouldUpdateSelection) {
+          this._updateSelected();
+        }
+
+        // Let other interested parties know about the change so that
+        // we don't have to recreate mutation observers everywhere.
+        this.fire('iron-items-changed', mutation, {
+          bubbles: false,
+          cancelable: false
+        });
+      });
+    },
+
+    _activateHandler: function(e) {
+      var t = e.target;
+      var items = this.items;
+      while (t && t != this) {
+        var i = items.indexOf(t);
+        if (i >= 0) {
+          var value = this._indexToValue(i);
+          this._itemActivate(value, t);
+          return;
+        }
+        t = t.parentNode;
+      }
+    },
+
+    _itemActivate: function(value, item) {
+      if (!this.fire('iron-activate',
+          {selected: value, item: item}, {cancelable: true}).defaultPrevented) {
+        this.select(value);
+      }
+    }
+
+  };
+Polymer({
+
+      is: 'iron-pages',
+
+      behaviors: [
+        Polymer.IronResizableBehavior,
+        Polymer.IronSelectableBehavior
+      ],
+
+      properties: {
+
+        // as the selected page is the only one visible, activateEvent
+        // is both non-sensical and problematic; e.g. in cases where a user
+        // handler attempts to change the page and the activateEvent
+        // handler immediately changes it back
+        activateEvent: {
+          type: String,
+          value: null
+        }
+
+      },
+
+      observers: [
+        '_selectedPageChanged(selected)'
+      ],
+
+      _selectedPageChanged: function(selected, old) {
+        this.async(this.notifyResize);
+      }
+    });
 (function() {
     'use strict';
 
     /**
      * Chrome uses an older version of DOM Level 3 Keyboard Events
      *
      * Most keys are labeled as text, but some are Unicode codepoints.
      * Values taken from: http://www.w3.org/TR/2007/WD-DOM-Level-3-Events-20071221/keyset.html#KeySet-Set
      */
     var KEY_IDENTIFIER = {
@@ skipping 459 matching lines @@
           cancelable: true
         });
         this[handlerName].call(this, event);
         if (event.defaultPrevented) {
           keyboardEvent.preventDefault();
         }
       }
     };
   })();
 /**
-   * `Polymer.IronScrollTargetBehavior` allows an element to respond to scroll events from a
-   * designated scroll target.
-   *
-   * Elements that consume this behavior can override the `_scrollHandler`
-   * method to add logic on the scroll event.
-   *
-   * @demo demo/scrolling-region.html Scrolling Region
-   * @demo demo/document.html Document Element
+   * @demo demo/index.html
    * @polymerBehavior
    */
-  Polymer.IronScrollTargetBehavior = {
+  Polymer.IronControlState = {
 
     properties: {
 
       /**
-       * Specifies the element that will handle the scroll event
-       * on the behalf of the current element. This is typically a reference to an element,
-       * but there are a few more posibilities:
-       *
-       * ### Elements id
-       *
-       *```html
-       * <div id="scrollable-element" style="overflow: auto;">
-       *  <x-element scroll-target="scrollable-element">
-       *    \x3c!-- Content--\x3e
-       *  </x-element>
-       * </div>
-       *```
-       * In this case, the `scrollTarget` will point to the outer div element.
-       *
-       * ### Document scrolling
-       *
-       * For document scrolling, you can use the reserved word `document`:
-       *
-       *```html
-       * <x-element scroll-target="document">
-       *   \x3c!-- Content --\x3e
-       * </x-element>
-       *```
-       *
-       * ### Elements reference
-       *
-       *```js
-       * appHeader.scrollTarget = document.querySelector('#scrollable-element');
-       *```
-       *
-       * @type {HTMLElement}
-       */
-      scrollTarget: {
-        type: HTMLElement,
+       * If true, the element currently has focus.
+       */
+      focused: {
+        type: Boolean,
+        value: false,
+        notify: true,
+        readOnly: true,
+        reflectToAttribute: true
+      },
+
+      /**
+       * If true, the user cannot interact with this element.
+       */
+      disabled: {
+        type: Boolean,
+        value: false,
+        notify: true,
+        observer: '_disabledChanged',
+        reflectToAttribute: true
+      },
+
+      _oldTabIndex: {
+        type: Number
+      },
+
+      _boundFocusBlurHandler: {
+        type: Function,
         value: function() {
-          return this._defaultScrollTarget;
-        }
-      }
+          return this._focusBlurHandler.bind(this);
+        }
+      }
+
     },
 
     observers: [
-      '_scrollTargetChanged(scrollTarget, isAttached)'
+      '_changedControlState(focused, disabled)'
     ],
 
-    _scrollTargetChanged: function(scrollTarget, isAttached) {
-      var eventTarget;
-
-      if (this._oldScrollTarget) {
-        eventTarget = this._oldScrollTarget === this._doc ? window : this._oldScrollTarget;
-        eventTarget.removeEventListener('scroll', this._boundScrollHandler);
-        this._oldScrollTarget = null;
-      }
-
-      if (!isAttached) {
-        return;
-      }
-      // Support element id references
-      if (scrollTarget === 'document') {
-
-        this.scrollTarget = this._doc;
-
-      } else if (typeof scrollTarget === 'string') {
-
-        this.scrollTarget = this.domHost ? this.domHost.$[scrollTarget] :
-            Polymer.dom(this.ownerDocument).querySelector('#' + scrollTarget);
-
-      } else if (this._isValidScrollTarget()) {
-
-        eventTarget = scrollTarget === this._doc ? window : scrollTarget;
-        this._boundScrollHandler = this._boundScrollHandler || this._scrollHandler.bind(this);
-        this._oldScrollTarget = scrollTarget;
-
-        eventTarget.addEventListener('scroll', this._boundScrollHandler);
-      }
-    },
-
-    /**
-     * Runs on every scroll event. Consumer of this behavior may override this method.
-     *
-     * @protected
-     */
-    _scrollHandler: function scrollHandler() {},
-
-    /**
-     * The default scroll target. Consumers of this behavior may want to customize
-     * the default scroll target.
-     *
-     * @type {Element}
-     */
-    get _defaultScrollTarget() {
-      return this._doc;
-    },
-
-    /**
-     * Shortcut for the document element
-     *
-     * @type {Element}
-     */
-    get _doc() {
-      return this.ownerDocument.documentElement;
-    },
-
-    /**
-     * Gets the number of pixels that the content of an element is scrolled upward.
-     *
-     * @type {number}
-     */
-    get _scrollTop() {
-      if (this._isValidScrollTarget()) {
-        return this.scrollTarget === this._doc ? window.pageYOffset : this.scrollTarget.scrollTop;
-      }
-      return 0;
-    },
-
-    /**
-     * Gets the number of pixels that the content of an element is scrolled to the left.
-     *
-     * @type {number}
-     */
-    get _scrollLeft() {
-      if (this._isValidScrollTarget()) {
-        return this.scrollTarget === this._doc ? window.pageXOffset : this.scrollTarget.scrollLeft;
-      }
-      return 0;
-    },
-
-    /**
-     * Sets the number of pixels that the content of an element is scrolled upward.
-     *
-     * @type {number}
-     */
-    set _scrollTop(top) {
-      if (this.scrollTarget === this._doc) {
-        window.scrollTo(window.pageXOffset, top);
-      } else if (this._isValidScrollTarget()) {
-        this.scrollTarget.scrollTop = top;
-      }
-    },
-
-    /**
-     * Sets the number of pixels that the content of an element is scrolled to the left.
-     *
-     * @type {number}
-     */
-    set _scrollLeft(left) {
-      if (this.scrollTarget === this._doc) {
-        window.scrollTo(left, window.pageYOffset);
-      } else if (this._isValidScrollTarget()) {
-        this.scrollTarget.scrollLeft = left;
-      }
-    },
-
-    /**
-     * Scrolls the content to a particular place.
-     *
-     * @method scroll
-     * @param {number} left The left position
-     * @param {number} top The top position
-     */
-    scroll: function(left, top) {
-       if (this.scrollTarget === this._doc) {
-        window.scrollTo(left, top);
-      } else if (this._isValidScrollTarget()) {
-        this.scrollTarget.scrollLeft = left;
-        this.scrollTarget.scrollTop = top;
-      }
-    },
-
-    /**
-     * Gets the width of the scroll target.
-     *
-     * @type {number}
-     */
-    get _scrollTargetWidth() {
-      if (this._isValidScrollTarget()) {
-        return this.scrollTarget === this._doc ? window.innerWidth : this.scrollTarget.offsetWidth;
-      }
-      return 0;
-    },
-
-    /**
-     * Gets the height of the scroll target.
-     *
-     * @type {number}
-     */
-    get _scrollTargetHeight() {
-      if (this._isValidScrollTarget()) {
-        return this.scrollTarget === this._doc ? window.innerHeight : this.scrollTarget.offsetHeight;
-      }
-      return 0;
-    },
-
-    /**
-     * Returns true if the scroll target is a valid HTMLElement.
-     *
-     * @return {boolean}
-     */
-    _isValidScrollTarget: function() {
-      return this.scrollTarget instanceof HTMLElement;
+    ready: function() {
+      this.addEventListener('focus', this._boundFocusBlurHandler, true);
+      this.addEventListener('blur', this._boundFocusBlurHandler, true);
+    },
+
+    _focusBlurHandler: function(event) {
+      // NOTE(cdata):  if we are in ShadowDOM land, `event.target` will
+      // eventually become `this` due to retargeting; if we are not in
+      // ShadowDOM land, `event.target` will eventually become `this` due
+      // to the second conditional which fires a synthetic event (that is also
+      // handled). In either case, we can disregard `event.path`.
+
+      if (event.target === this) {
+        this._setFocused(event.type === 'focus');
+      } else if (!this.shadowRoot) {
+        var target = /** @type {Node} */(Polymer.dom(event).localTarget);
+        if (!this.isLightDescendant(target)) {
+          this.fire(event.type, {sourceEvent: event}, {
+            node: this,
+            bubbles: event.bubbles,
+            cancelable: event.cancelable
+          });
+        }
+      }
+    },
+
+    _disabledChanged: function(disabled, old) {
+      this.setAttribute('aria-disabled', disabled ? 'true' : 'false');
+      this.style.pointerEvents = disabled ? 'none' : '';
+      if (disabled) {
+        this._oldTabIndex = this.tabIndex;
+        this._setFocused(false);
+        this.tabIndex = -1;
+        this.blur();
+      } else if (this._oldTabIndex !== undefined) {
+        this.tabIndex = this._oldTabIndex;
+      }
+    },
+
+    _changedControlState: function() {
+      // _controlStateChanged is abstract, follow-on behaviors may implement it
+      if (this._controlStateChanged) {
+        this._controlStateChanged();
+      }
     }
+
   };
-(function() {
-
-  var IOS = navigator.userAgent.match(/iP(?:hone|ad;(?: U;)? CPU) OS (\d+)/);
-  var IOS_TOUCH_SCROLLING = IOS && IOS[1] >= 8;
-  var DEFAULT_PHYSICAL_COUNT = 3;
-  var HIDDEN_Y = '-10000px';
-  var DEFAULT_GRID_SIZE = 200;
-  var SECRET_TABINDEX = -100;
-
-  Polymer({
-
-    is: 'iron-list',
+/**
+   * @demo demo/index.html
+   * @polymerBehavior Polymer.IronButtonState
+   */
+  Polymer.IronButtonStateImpl = {
 
     properties: {
 
       /**
-       * An array containing items determining how many instances of the template
-       * to stamp and that that each template instance should bind to.
-       */
-      items: {
-        type: Array
-      },
-
-      /**
-       * The max count of physical items the pool can extend to.
-       */
-      maxPhysicalCount: {
-        type: Number,
-        value: 500
-      },
-
-      /**
-       * The name of the variable to add to the binding scope for the array
-       * element associated with a given template instance.
-       */
-      as: {
-        type: String,
-        value: 'item'
-      },
-
-      /**
-       * The name of the variable to add to the binding scope with the index
-       * for the row.
-       */
-      indexAs: {
-        type: String,
-        value: 'index'
-      },
-
-      /**
-       * The name of the variable to add to the binding scope to indicate
-       * if the row is selected.
-       */
-      selectedAs: {
-        type: String,
-        value: 'selected'
-      },
-
-      /**
-       * When true, the list is rendered as a grid. Grid items must have
-       * fixed width and height set via CSS. e.g.
-       *
-       * ```html
-       * <iron-list grid>
-       *   <template>
-       *      <div style="width: 100px; height: 100px;"> 100x100 </div>
-       *   </template>
-       * </iron-list>
-       * ```
-       */
-      grid: {
+       * If true, the user is currently holding down the button.
+       */
+      pressed: {
+        type: Boolean,
+        readOnly: true,
+        value: false,
+        reflectToAttribute: true,
+        observer: '_pressedChanged'
+      },
+
+      /**
+       * If true, the button toggles the active state with each tap or press
+       * of the spacebar.
+       */
+      toggles: {
         type: Boolean,
         value: false,
         reflectToAttribute: true
       },
 
       /**
-       * When true, tapping a row will select the item, placing its data model
-       * in the set of selected items retrievable via the selection property.
+       * If true, the button is a toggle and is currently in the active state.
+       */
+      active: {
+        type: Boolean,
+        value: false,
+        notify: true,
+        reflectToAttribute: true
+      },
+
+      /**
+       * True if the element is currently being pressed by a "pointer," which
+       * is loosely defined as mouse or touch input (but specifically excluding
+       * keyboard input).
+       */
+      pointerDown: {
+        type: Boolean,
+        readOnly: true,
+        value: false
+      },
+
+      /**
+       * True if the input device that caused the element to receive focus
+       * was a keyboard.
+       */
+      receivedFocusFromKeyboard: {
+        type: Boolean,
+        readOnly: true
+      },
+
+      /**
+       * The aria attribute to be set if the button is a toggle and in the
+       * active state.
+       */
+      ariaActiveAttribute: {
+        type: String,
+        value: 'aria-pressed',
+        observer: '_ariaActiveAttributeChanged'
+      }
+    },
+
+    listeners: {
+      down: '_downHandler',
+      up: '_upHandler',
+      tap: '_tapHandler'
+    },
+
+    observers: [
+      '_detectKeyboardFocus(focused)',
+      '_activeChanged(active, ariaActiveAttribute)'
+    ],
+
+    keyBindings: {
+      'enter:keydown': '_asyncClick',
+      'space:keydown': '_spaceKeyDownHandler',
+      'space:keyup': '_spaceKeyUpHandler',
+    },
+
+    _mouseEventRe: /^mouse/,
+
+    _tapHandler: function() {
+      if (this.toggles) {
+       // a tap is needed to toggle the active state
+        this._userActivate(!this.active);
+      } else {
+        this.active = false;
+      }
+    },
+
+    _detectKeyboardFocus: function(focused) {
+      this._setReceivedFocusFromKeyboard(!this.pointerDown && focused);
+    },
+
+    // to emulate native checkbox, (de-)activations from a user interaction fire
+    // 'change' events
+    _userActivate: function(active) {
+      if (this.active !== active) {
+        this.active = active;
+        this.fire('change');
+      }
+    },
+
+    _downHandler: function(event) {
+      this._setPointerDown(true);
+      this._setPressed(true);
+      this._setReceivedFocusFromKeyboard(false);
+    },
+
+    _upHandler: function() {
+      this._setPointerDown(false);
+      this._setPressed(false);
+    },
+
+    /**
+     * @param {!KeyboardEvent} event .
+     */
+    _spaceKeyDownHandler: function(event) {
+      var keyboardEvent = event.detail.keyboardEvent;
+      var target = Polymer.dom(keyboardEvent).localTarget;
+
+      // Ignore the event if this is coming from a focused light child, since that
+      // element will deal with it.
+      if (this.isLightDescendant(/** @type {Node} */(target)))
+        return;
+
+      keyboardEvent.preventDefault();
+      keyboardEvent.stopImmediatePropagation();
+      this._setPressed(true);
+    },
+
+    /**
+     * @param {!KeyboardEvent} event .
+     */
+    _spaceKeyUpHandler: function(event) {
+      var keyboardEvent = event.detail.keyboardEvent;
+      var target = Polymer.dom(keyboardEvent).localTarget;
+
+      // Ignore the event if this is coming from a focused light child, since that
+      // element will deal with it.
+      if (this.isLightDescendant(/** @type {Node} */(target)))
+        return;
+
+      if (this.pressed) {
+        this._asyncClick();
+      }
+      this._setPressed(false);
+    },
+
+    // trigger click asynchronously, the asynchrony is useful to allow one
+    // event handler to unwind before triggering another event
+    _asyncClick: function() {
+      this.async(function() {
+        this.click();
+      }, 1);
+    },
+
+    // any of these changes are considered a change to button state
+
+    _pressedChanged: function(pressed) {
+      this._changedButtonState();
+    },
+
+    _ariaActiveAttributeChanged: function(value, oldValue) {
+      if (oldValue && oldValue != value && this.hasAttribute(oldValue)) {
+        this.removeAttribute(oldValue);
+      }
+    },
+
+    _activeChanged: function(active, ariaActiveAttribute) {
+      if (this.toggles) {
+        this.setAttribute(this.ariaActiveAttribute,
+                          active ? 'true' : 'false');
+      } else {
+        this.removeAttribute(this.ariaActiveAttribute);
+      }
+      this._changedButtonState();
+    },
+
+    _controlStateChanged: function() {
+      if (this.disabled) {
+        this._setPressed(false);
+      } else {
+        this._changedButtonState();
+      }
+    },
+
+    // provide hook for follow-on behaviors to react to button-state
+
+    _changedButtonState: function() {
+      if (this._buttonStateChanged) {
+        this._buttonStateChanged(); // abstract
+      }
+    }
+
+  };
+
+  /** @polymerBehavior */
+  Polymer.IronButtonState = [
+    Polymer.IronA11yKeysBehavior,
+    Polymer.IronButtonStateImpl
+  ];
+(function() {
+    var Utility = {
+      distance: function(x1, y1, x2, y2) {
+        var xDelta = (x1 - x2);
+        var yDelta = (y1 - y2);
+
+        return Math.sqrt(xDelta * xDelta + yDelta * yDelta);
+      },
+
+      now: window.performance && window.performance.now ?
+          window.performance.now.bind(window.performance) : Date.now
+    };
+
+    /**
+     * @param {HTMLElement} element
+     * @constructor
+     */
+    function ElementMetrics(element) {
+      this.element = element;
+      this.width = this.boundingRect.width;
+      this.height = this.boundingRect.height;
+
+      this.size = Math.max(this.width, this.height);
+    }
+
+    ElementMetrics.prototype = {
+      get boundingRect () {
+        return this.element.getBoundingClientRect();
+      },
+
+      furthestCornerDistanceFrom: function(x, y) {
+        var topLeft = Utility.distance(x, y, 0, 0);
+        var topRight = Utility.distance(x, y, this.width, 0);
+        var bottomLeft = Utility.distance(x, y, 0, this.height);
+        var bottomRight = Utility.distance(x, y, this.width, this.height);
+
+        return Math.max(topLeft, topRight, bottomLeft, bottomRight);
+      }
+    };
+
+    /**
+     * @param {HTMLElement} element
+     * @constructor
+     */
+    function Ripple(element) {
+      this.element = element;
+      this.color = window.getComputedStyle(element).color;
+
+      this.wave = document.createElement('div');
+      this.waveContainer = document.createElement('div');
+      this.wave.style.backgroundColor = this.color;
+      this.wave.classList.add('wave');
+      this.waveContainer.classList.add('wave-container');
+      Polymer.dom(this.waveContainer).appendChild(this.wave);
+
+      this.resetInteractionState();
+    }
+
+    Ripple.MAX_RADIUS = 300;
+
+    Ripple.prototype = {
+      get recenters() {
+        return this.element.recenters;
+      },
+
+      get center() {
+        return this.element.center;
+      },
+
+      get mouseDownElapsed() {
+        var elapsed;
+
+        if (!this.mouseDownStart) {
+          return 0;
+        }
+
+        elapsed = Utility.now() - this.mouseDownStart;
+
+        if (this.mouseUpStart) {
+          elapsed -= this.mouseUpElapsed;
+        }
+
+        return elapsed;
+      },
+
+      get mouseUpElapsed() {
+        return this.mouseUpStart ?
+          Utility.now () - this.mouseUpStart : 0;
+      },
+
+      get mouseDownElapsedSeconds() {
+        return this.mouseDownElapsed / 1000;
+      },
+
+      get mouseUpElapsedSeconds() {
+        return this.mouseUpElapsed / 1000;
+      },
+
+      get mouseInteractionSeconds() {
+        return this.mouseDownElapsedSeconds + this.mouseUpElapsedSeconds;
+      },
+
+      get initialOpacity() {
+        return this.element.initialOpacity;
+      },
+
+      get opacityDecayVelocity() {
+        return this.element.opacityDecayVelocity;
+      },
+
+      get radius() {
+        var width2 = this.containerMetrics.width * this.containerMetrics.width;
+        var height2 = this.containerMetrics.height * this.containerMetrics.height;
+        var waveRadius = Math.min(
+          Math.sqrt(width2 + height2),
+          Ripple.MAX_RADIUS
+        ) * 1.1 + 5;
+
+        var duration = 1.1 - 0.2 * (waveRadius / Ripple.MAX_RADIUS);
+        var timeNow = this.mouseInteractionSeconds / duration;
+        var size = waveRadius * (1 - Math.pow(80, -timeNow));
+
+        return Math.abs(size);
+      },
+
+      get opacity() {
+        if (!this.mouseUpStart) {
+          return this.initialOpacity;
+        }
+
+        return Math.max(
+          0,
+          this.initialOpacity - this.mouseUpElapsedSeconds * this.opacityDecayVelocity
+        );
+      },
+
+      get outerOpacity() {
+        // Linear increase in background opacity, capped at the opacity
+        // of the wavefront (waveOpacity).
+        var outerOpacity = this.mouseUpElapsedSeconds * 0.3;
+        var waveOpacity = this.opacity;
+
+        return Math.max(
+          0,
+          Math.min(outerOpacity, waveOpacity)
+        );
+      },
+
+      get isOpacityFullyDecayed() {
+        return this.opacity < 0.01 &&
+          this.radius >= Math.min(this.maxRadius, Ripple.MAX_RADIUS);
+      },
+
+      get isRestingAtMaxRadius() {
+        return this.opacity >= this.initialOpacity &&
+          this.radius >= Math.min(this.maxRadius, Ripple.MAX_RADIUS);
+      },
+
+      get isAnimationComplete() {
+        return this.mouseUpStart ?
+          this.isOpacityFullyDecayed : this.isRestingAtMaxRadius;
+      },
+
+      get translationFraction() {
+        return Math.min(
+          1,
+          this.radius / this.containerMetrics.size * 2 / Math.sqrt(2)
+        );
+      },
+
+      get xNow() {
+        if (this.xEnd) {
+          return this.xStart + this.translationFraction * (this.xEnd - this.xStart);
+        }
+
+        return this.xStart;
+      },
+
+      get yNow() {
+        if (this.yEnd) {
+          return this.yStart + this.translationFraction * (this.yEnd - this.yStart);
+        }
+
+        return this.yStart;
+      },
+
+      get isMouseDown() {
+        return this.mouseDownStart && !this.mouseUpStart;
+      },
+
+      resetInteractionState: function() {
+        this.maxRadius = 0;
+        this.mouseDownStart = 0;
+        this.mouseUpStart = 0;
+
+        this.xStart = 0;
+        this.yStart = 0;
+        this.xEnd = 0;
+        this.yEnd = 0;
+        this.slideDistance = 0;
+
+        this.containerMetrics = new ElementMetrics(this.element);
+      },
+
+      draw: function() {
+        var scale;
+        var translateString;
+        var dx;
+        var dy;
+
+        this.wave.style.opacity = this.opacity;
+
+        scale = this.radius / (this.containerMetrics.size / 2);
+        dx = this.xNow - (this.containerMetrics.width / 2);
+        dy = this.yNow - (this.containerMetrics.height / 2);
+
+
+        // 2d transform for safari because of border-radius and overflow:hidden clipping bug.
+        // https://bugs.webkit.org/show_bug.cgi?id=98538
+        this.waveContainer.style.webkitTransform = 'translate(' + dx + 'px, ' + dy + 'px)';
+        this.waveContainer.style.transform = 'translate3d(' + dx + 'px, ' + dy + 'px, 0)';
+        this.wave.style.webkitTransform = 'scale(' + scale + ',' + scale + ')';
+        this.wave.style.transform = 'scale3d(' + scale + ',' + scale + ',1)';
+      },
+
+      /** @param {Event=} event */
+      downAction: function(event) {
+        var xCenter = this.containerMetrics.width / 2;
+        var yCenter = this.containerMetrics.height / 2;
+
+        this.resetInteractionState();
+        this.mouseDownStart = Utility.now();
+
+        if (this.center) {
+          this.xStart = xCenter;
+          this.yStart = yCenter;
+          this.slideDistance = Utility.distance(
+            this.xStart, this.yStart, this.xEnd, this.yEnd
+          );
+        } else {
+          this.xStart = event ?
+              event.detail.x - this.containerMetrics.boundingRect.left :
+              this.containerMetrics.width / 2;
+          this.yStart = event ?
+              event.detail.y - this.containerMetrics.boundingRect.top :
+              this.containerMetrics.height / 2;
+        }
+
+        if (this.recenters) {
+          this.xEnd = xCenter;
+          this.yEnd = yCenter;
+          this.slideDistance = Utility.distance(
+            this.xStart, this.yStart, this.xEnd, this.yEnd
+          );
+        }
+
+        this.maxRadius = this.containerMetrics.furthestCornerDistanceFrom(
+          this.xStart,
+          this.yStart
+        );
+
+        this.waveContainer.style.top =
+          (this.containerMetrics.height - this.containerMetrics.size) / 2 + 'px';
+        this.waveContainer.style.left =
+          (this.containerMetrics.width - this.containerMetrics.size) / 2 + 'px';
+
+        this.waveContainer.style.width = this.containerMetrics.size + 'px';
+        this.waveContainer.style.height = this.containerMetrics.size + 'px';
+      },
+
+      /** @param {Event=} event */
+      upAction: function(event) {
+        if (!this.isMouseDown) {
+          return;
+        }
+
+        this.mouseUpStart = Utility.now();
+      },
+
+      remove: function() {
+        Polymer.dom(this.waveContainer.parentNode).removeChild(
+          this.waveContainer
+        );
+      }
+    };
+
+    Polymer({
+      is: 'paper-ripple',
+
+      behaviors: [
+        Polymer.IronA11yKeysBehavior
+      ],
+
+      properties: {
+        /**
+         * The initial opacity set on the wave.
+         *
+         * @attribute initialOpacity
+         * @type number
+         * @default 0.25
+         */
+        initialOpacity: {
+          type: Number,
+          value: 0.25
+        },
+
+        /**
+         * How fast (opacity per second) the wave fades out.
+         *
+         * @attribute opacityDecayVelocity
+         * @type number
+         * @default 0.8
+         */
+        opacityDecayVelocity: {
+          type: Number,
+          value: 0.8
+        },
+
+        /**
+         * If true, ripples will exhibit a gravitational pull towards
+         * the center of their container as they fade away.
+         *
+         * @attribute recenters
+         * @type boolean
+         * @default false
+         */
+        recenters: {
+          type: Boolean,
+          value: false
+        },
+
+        /**
+         * If true, ripples will center inside its container
+         *
+         * @attribute recenters
+         * @type boolean
+         * @default false
+         */
+        center: {
+          type: Boolean,
+          value: false
+        },
+
+        /**
+         * A list of the visual ripples.
+         *
+         * @attribute ripples
+         * @type Array
+         * @default []
+         */
+        ripples: {
+          type: Array,
+          value: function() {
+            return [];
+          }
+        },
+
+        /**
+         * True when there are visible ripples animating within the
+         * element.
+         */
+        animating: {
+          type: Boolean,
+          readOnly: true,
+          reflectToAttribute: true,
+          value: false
+        },
+
+        /**
+         * If true, the ripple will remain in the "down" state until `holdDown`
+         * is set to false again.
+         */
+        holdDown: {
+          type: Boolean,
+          value: false,
+          observer: '_holdDownChanged'
+        },
+
+        /**
+         * If true, the ripple will not generate a ripple effect
+         * via pointer interaction.
+         * Calling ripple's imperative api like `simulatedRipple` will
+         * still generate the ripple effect.
+         */
+        noink: {
+          type: Boolean,
+          value: false
+        },
+
+        _animating: {
+          type: Boolean
+        },
+
+        _boundAnimate: {
+          type: Function,
+          value: function() {
+            return this.animate.bind(this);
+          }
+        }
+      },
+
+      get target () {
+        return this.keyEventTarget;
+      },
+
+      keyBindings: {
+        'enter:keydown': '_onEnterKeydown',
+        'space:keydown': '_onSpaceKeydown',
+        'space:keyup': '_onSpaceKeyup'
+      },
+
+      attached: function() {
+        // Set up a11yKeysBehavior to listen to key events on the target,
+        // so that space and enter activate the ripple even if the target doesn't
+        // handle key events. The key handlers deal with `noink` themselves.
+        if (this.parentNode.nodeType == 11) { // DOCUMENT_FRAGMENT_NODE
+          this.keyEventTarget = Polymer.dom(this).getOwnerRoot().host;
+        } else {
+          this.keyEventTarget = this.parentNode;
+        }
+        var keyEventTarget = /** @type {!EventTarget} */ (this.keyEventTarget);
+        this.listen(keyEventTarget, 'up', 'uiUpAction');
+        this.listen(keyEventTarget, 'down', 'uiDownAction');
+      },
+
+      detached: function() {
+        this.unlisten(this.keyEventTarget, 'up', 'uiUpAction');
+        this.unlisten(this.keyEventTarget, 'down', 'uiDownAction');
+        this.keyEventTarget = null;
+      },
+
+      get shouldKeepAnimating () {
+        for (var index = 0; index < this.ripples.length; ++index) {
+          if (!this.ripples[index].isAnimationComplete) {
+            return true;
+          }
+        }
+
+        return false;
+      },
+
+      simulatedRipple: function() {
+        this.downAction(null);
+
+        // Please see polymer/polymer#1305
+        this.async(function() {
+          this.upAction();
+        }, 1);
+      },
+
+      /**
+       * Provokes a ripple down effect via a UI event,
+       * respecting the `noink` property.
+       * @param {Event=} event
+       */
+      uiDownAction: function(event) {
+        if (!this.noink) {
+          this.downAction(event);
+        }
+      },
+
+      /**
+       * Provokes a ripple down effect via a UI event,
+       * *not* respecting the `noink` property.
+       * @param {Event=} event
+       */
+      downAction: function(event) {
+        if (this.holdDown && this.ripples.length > 0) {
+          return;
+        }
+
+        var ripple = this.addRipple();
+
+        ripple.downAction(event);
+
+        if (!this._animating) {
+          this._animating = true;
+          this.animate();
+        }
+      },
+
+      /**
+       * Provokes a ripple up effect via a UI event,
+       * respecting the `noink` property.
+       * @param {Event=} event
+       */
+      uiUpAction: function(event) {
+        if (!this.noink) {
+          this.upAction(event);
+        }
+      },
+
+      /**
+       * Provokes a ripple up effect via a UI event,
+       * *not* respecting the `noink` property.
+       * @param {Event=} event
+       */
+      upAction: function(event) {
+        if (this.holdDown) {
+          return;
+        }
+
+        this.ripples.forEach(function(ripple) {
+          ripple.upAction(event);
+        });
+
+        this._animating = true;
+        this.animate();
+      },
+
+      onAnimationComplete: function() {
+        this._animating = false;
+        this.$.background.style.backgroundColor = null;
+        this.fire('transitionend');
+      },
+
+      addRipple: function() {
+        var ripple = new Ripple(this);
+
+        Polymer.dom(this.$.waves).appendChild(ripple.waveContainer);
+        this.$.background.style.backgroundColor = ripple.color;
+        this.ripples.push(ripple);
+
+        this._setAnimating(true);
+
+        return ripple;
+      },
+
+      removeRipple: function(ripple) {
+        var rippleIndex = this.ripples.indexOf(ripple);
+
+        if (rippleIndex < 0) {
+          return;
+        }
+
+        this.ripples.splice(rippleIndex, 1);
+
+        ripple.remove();
+
+        if (!this.ripples.length) {
+          this._setAnimating(false);
+        }
+      },
+
+      animate: function() {
+        if (!this._animating) {
+          return;
+        }
+        var index;
+        var ripple;
+
+        for (index = 0; index < this.ripples.length; ++index) {
+          ripple = this.ripples[index];
+
+          ripple.draw();
+
+          this.$.background.style.opacity = ripple.outerOpacity;
+
+          if (ripple.isOpacityFullyDecayed && !ripple.isRestingAtMaxRadius) {
+            this.removeRipple(ripple);
+          }
+        }
+
+        if (!this.shouldKeepAnimating && this.ripples.length === 0) {
+          this.onAnimationComplete();
+        } else {
+          window.requestAnimationFrame(this._boundAnimate);
+        }
+      },
+
+      _onEnterKeydown: function() {
+        this.uiDownAction();
+        this.async(this.uiUpAction, 1);
+      },
+
+      _onSpaceKeydown: function() {
+        this.uiDownAction();
+      },
+
+      _onSpaceKeyup: function() {
+        this.uiUpAction();
+      },
+
+      // note: holdDown does not respect noink since it can be a focus based
+      // effect.
+      _holdDownChanged: function(newVal, oldVal) {
+        if (oldVal === undefined) {
+          return;
+        }
+        if (newVal) {
+          this.downAction();
+        } else {
+          this.upAction();
+        }
+      }
+
+      /**
+      Fired when the animation finishes.
+      This is useful if you want to wait until
+      the ripple animation finishes to perform some action.
+
+      @event transitionend
+      @param {{node: Object}} detail Contains the animated node.
+      */
+    });
+  })();
+/**
+   * `Polymer.PaperRippleBehavior` dynamically implements a ripple
+   * when the element has focus via pointer or keyboard.
+   *
+   * NOTE: This behavior is intended to be used in conjunction with and after
+   * `Polymer.IronButtonState` and `Polymer.IronControlState`.
+   *
+   * @polymerBehavior Polymer.PaperRippleBehavior
+   */
+  Polymer.PaperRippleBehavior = {
+    properties: {
+      /**
+       * If true, the element will not produce a ripple effect when interacted
+       * with via the pointer.
+       */
+      noink: {
+        type: Boolean,
+        observer: '_noinkChanged'
+      },
+
+      /**
+       * @type {Element|undefined}
+       */
+      _rippleContainer: {
+        type: Object,
+      }
+    },
+
+    /**
+     * Ensures a `<paper-ripple>` element is available when the element is
+     * focused.
+     */
+    _buttonStateChanged: function() {
+      if (this.focused) {
+        this.ensureRipple();
+      }
+    },
+
+    /**
+     * In addition to the functionality provided in `IronButtonState`, ensures
+     * a ripple effect is created when the element is in a `pressed` state.
+     */
+    _downHandler: function(event) {
+      Polymer.IronButtonStateImpl._downHandler.call(this, event);
+      if (this.pressed) {
+        this.ensureRipple(event);
+      }
+    },
+
+    /**
+     * Ensures this element contains a ripple effect. For startup efficiency
+     * the ripple effect is dynamically on demand when needed.
+     * @param {!Event=} optTriggeringEvent (optional) event that triggered the
+     * ripple.
+     */
+    ensureRipple: function(optTriggeringEvent) {
+      if (!this.hasRipple()) {
+        this._ripple = this._createRipple();
+        this._ripple.noink = this.noink;
+        var rippleContainer = this._rippleContainer || this.root;
+        if (rippleContainer) {
+          Polymer.dom(rippleContainer).appendChild(this._ripple);
+        }
+        if (optTriggeringEvent) {
+          // Check if the event happened inside of the ripple container
+          // Fall back to host instead of the root because distributed text
+          // nodes are not valid event targets
+          var domContainer = Polymer.dom(this._rippleContainer || this);
+          var target = Polymer.dom(optTriggeringEvent).rootTarget;
+          if (domContainer.deepContains( /** @type {Node} */(target))) {
+            this._ripple.uiDownAction(optTriggeringEvent);
+          }
+        }
+      }
+    },
+
+    /**
+     * Returns the `<paper-ripple>` element used by this element to create
+     * ripple effects. The element's ripple is created on demand, when
+     * necessary, and calling this method will force the
+     * ripple to be created.
+     */
+    getRipple: function() {
+      this.ensureRipple();
+      return this._ripple;
+    },
+
+    /**
+     * Returns true if this element currently contains a ripple effect.
+     * @return {boolean}
+     */
+    hasRipple: function() {
+      return Boolean(this._ripple);
+    },
+
+    /**
+     * Create the element's ripple effect via creating a `<paper-ripple>`.
+     * Override this method to customize the ripple element.
+     * @return {!PaperRippleElement} Returns a `<paper-ripple>` element.
+     */
+    _createRipple: function() {
+      return /** @type {!PaperRippleElement} */ (
+          document.createElement('paper-ripple'));
+    },
+
+    _noinkChanged: function(noink) {
+      if (this.hasRipple()) {
+        this._ripple.noink = noink;
+      }
+    }
+  };
+/** @polymerBehavior Polymer.PaperButtonBehavior */
+  Polymer.PaperButtonBehaviorImpl = {
+    properties: {
+      /**
+       * The z-depth of this element, from 0-5. Setting to 0 will remove the
+       * shadow, and each increasing number greater than 0 will be "deeper"
+       * than the last.
        *
-       * Note that tapping focusable elements within the list item will not
-       * result in selection, since they are presumed to have their * own action.
-       */
-      selectionEnabled: {
-        type: Boolean,
-        value: false
-      },
-
-      /**
-       * When `multiSelection` is false, this is the currently selected item, or `null`
-       * if no item is selected.
-       */
-      selectedItem: {
-        type: Object,
-        notify: true
-      },
-
-      /**
-       * When `multiSelection` is true, this is an array that contains the selected items.
-       */
-      selectedItems: {
-        type: Object,
-        notify: true
-      },
-
-      /**
-       * When `true`, multiple items may be selected at once (in this case,
-       * `selected` is an array of currently selected items).  When `false`,
-       * only one item may be selected at a time.
-       */
-      multiSelection: {
-        type: Boolean,
-        value: false
+       * @attribute elevation
+       * @type number
+       * @default 1
+       */
+      elevation: {
+        type: Number,
+        reflectToAttribute: true,
+        readOnly: true
       }
     },
 
     observers: [
-      '_itemsChanged(items.*)',
-      '_selectionEnabledChanged(selectionEnabled)',
-      '_multiSelectionChanged(multiSelection)',
-      '_setOverflow(scrollTarget)'
+      '_calculateElevation(focused, disabled, active, pressed, receivedFocusFromKeyboard)',
+      '_computeKeyboardClass(receivedFocusFromKeyboard)'
     ],
 
-    behaviors: [
-      Polymer.Templatizer,
-      Polymer.IronResizableBehavior,
-      Polymer.IronA11yKeysBehavior,
-      Polymer.IronScrollTargetBehavior
-    ],
-
-    keyBindings: {
-      'up': '_didMoveUp',
-      'down': '_didMoveDown',
-      'enter': '_didEnter'
-    },
-
-    /**
-     * The ratio of hidden tiles that should remain in the scroll direction.
-     * Recommended value ~0.5, so it will distribute tiles evely in both directions.
-     */
-    _ratio: 0.5,
-
-    /**
-     * The padding-top value for the list.
-     */
-    _scrollerPaddingTop: 0,
-
-    /**
-     * This value is the same as `scrollTop`.
-     */
-    _scrollPosition: 0,
-
-    /**
-     * The sum of the heights of all the tiles in the DOM.
-     */
-    _physicalSize: 0,
-
-    /**
-     * The average `offsetHeight` of the tiles observed till now.
-     */
-    _physicalAverage: 0,
-
-    /**
-     * The number of tiles which `offsetHeight` > 0 observed until now.
-     */
-    _physicalAverageCount: 0,
-
-    /**
-     * The Y position of the item rendered in the `_physicalStart`
-     * tile relative to the scrolling list.
-     */
-    _physicalTop: 0,
-
-    /**
-     * The number of items in the list.
-     */
-    _virtualCount: 0,
-
-    /**
-     * A map between an item key and its physical item index
-     */
-    _physicalIndexForKey: null,
-
-    /**
-     * The estimated scroll height based on `_physicalAverage`
-     */
-    _estScrollHeight: 0,
-
-    /**
-     * The scroll height of the dom node
-     */
-    _scrollHeight: 0,
-
-    /**
-     * The height of the list. This is referred as the viewport in the context of list.
-     */
-    _viewportHeight: 0,
-
-    /**
-     * The width of the list. This is referred as the viewport in the context of list.
-     */
-    _viewportWidth: 0,
-
-    /**
-     * An array of DOM nodes that are currently in the tree
-     * @type {?Array<!TemplatizerNode>}
-     */
-    _physicalItems: null,
-
-    /**
-     * An array of heights for each item in `_physicalItems`
-     * @type {?Array<number>}
-     */
-    _physicalSizes: null,
-
-    /**
-     * A cached value for the first visible index.
-     * See `firstVisibleIndex`
-     * @type {?number}
-     */
-    _firstVisibleIndexVal: null,
-
-    /**
-     * A cached value for the last visible index.
-     * See `lastVisibleIndex`
-     * @type {?number}
-     */
-    _lastVisibleIndexVal: null,
-
-    /**
-     * A Polymer collection for the items.
-     * @type {?Polymer.Collection}
-     */
-    _collection: null,
-
-    /**
-     * True if the current item list was rendered for the first time
-     * after attached.
-     */
-    _itemsRendered: false,
-
-    /**
-     * The page that is currently rendered.
-     */
-    _lastPage: null,
-
-    /**
-     * The max number of pages to render. One page is equivalent to the height of the list.
-     */
-    _maxPages: 3,
-
-    /**
-     * The currently focused physical item.
-     */
-    _focusedItem: null,
-
-    /**
-     * The index of the `_focusedItem`.
-     */
-    _focusedIndex: -1,
-
-    /**
-     * The the item that is focused if it is moved offscreen.
-     * @private {?TemplatizerNode}
-     */
-    _offscreenFocusedItem: null,
-
-    /**
-     * The item that backfills the `_offscreenFocusedItem` in the physical items
-     * list when that item is moved offscreen.
-     */
-    _focusBackfillItem: null,
-
-    /**
-     * The maximum items per row
-     */
-    _itemsPerRow: 1,
-
-    /**
-     * The width of each grid item
-     */
-    _itemWidth: 0,
-
-    /**
-     * The height of the row in grid layout.
-     */
-    _rowHeight: 0,
-
-    /**
-     * The bottom of the physical content.
-     */
-    get _physicalBottom() {
-      return this._physicalTop + this._physicalSize;
-    },
-
-    /**
-     * The bottom of the scroll.
-     */
-    get _scrollBottom() {
-      return this._scrollPosition + this._viewportHeight;
-    },
-
-    /**
-     * The n-th item rendered in the last physical item.
-     */
-    get _virtualEnd() {
-      return this._virtualStart + this._physicalCount - 1;
-    },
-
-    /**
-     * The height of the physical content that isn't on the screen.
-     */
-    get _hiddenContentSize() {
-      var size = this.grid ? this._physicalRows * this._rowHeight : this._physicalSize;
-      return size - this._viewportHeight;
-    },
-
-    /**
-     * The maximum scroll top value.
-     */
-    get _maxScrollTop() {
-      return this._estScrollHeight - this._viewportHeight + this._scrollerPaddingTop;
-    },
-
-    /**
-     * The lowest n-th value for an item such that it can be rendered in `_physicalStart`.
-     */
-    _minVirtualStart: 0,
-
-    /**
-     * The largest n-th value for an item such that it can be rendered in `_physicalStart`.
-     */
-    get _maxVirtualStart() {
-      return Math.max(0, this._virtualCount - this._physicalCount);
-    },
-
-    /**
-     * The n-th item rendered in the `_physicalStart` tile.
-     */
-    _virtualStartVal: 0,
-
-    set _virtualStart(val) {
-      this._virtualStartVal = Math.min(this._maxVirtualStart, Math.max(this._minVirtualStart, val));
-    },
-
-    get _virtualStart() {
-      return this._virtualStartVal || 0;
-    },
-
-    /**
-     * The k-th tile that is at the top of the scrolling list.
-     */
-    _physicalStartVal: 0,
-
-    set _physicalStart(val) {
-      this._physicalStartVal = val % this._physicalCount;
-      if (this._physicalStartVal < 0) {
-        this._physicalStartVal = this._physicalCount + this._physicalStartVal;
-      }
-      this._physicalEnd = (this._physicalStart + this._physicalCount - 1) % this._physicalCount;
-    },
-
-    get _physicalStart() {
-      return this._physicalStartVal || 0;
-    },
-
-    /**
-     * The number of tiles in the DOM.
-     */
-    _physicalCountVal: 0,
-
-    set _physicalCount(val) {
-      this._physicalCountVal = val;
-      this._physicalEnd = (this._physicalStart + this._physicalCount - 1) % this._physicalCount;
-    },
-
-    get _physicalCount() {
-      return this._physicalCountVal;
-    },
-
-    /**
-     * The k-th tile that is at the bottom of the scrolling list.
-     */
-    _physicalEnd: 0,
-
-    /**
-     * An optimal physical size such that we will have enough physical items
-     * to fill up the viewport and recycle when the user scrolls.
+    hostAttributes: {
+      role: 'button',
+      tabindex: '0',
+      animated: true
+    },
+
+    _calculateElevation: function() {
+      var e = 1;
+      if (this.disabled) {
+        e = 0;
+      } else if (this.active || this.pressed) {
+        e = 4;
+      } else if (this.receivedFocusFromKeyboard) {
+        e = 3;
+      }
+      this._setElevation(e);
+    },
+
+    _computeKeyboardClass: function(receivedFocusFromKeyboard) {
+      this.toggleClass('keyboard-focus', receivedFocusFromKeyboard);
+    },
+
+    /**
+     * In addition to `IronButtonState` behavior, when space key goes down,
+     * create a ripple down effect.
      *
-     * This default value assumes that we will at least have the equivalent
-     * to a viewport of physical items above and below the user's viewport.
-     */
-    get _optPhysicalSize() {
-      if (this.grid) {
-        return this._estRowsInView * this._rowHeight * this._maxPages;
-      }
-      return this._viewportHeight * this._maxPages;
-    },
-
-    get _optPhysicalCount() {
-      return this._estRowsInView * this._itemsPerRow * this._maxPages;
-    },
-
-   /**
-    * True if the current list is visible.
-    */
-    get _isVisible() {
-      return this.scrollTarget && Boolean(this.scrollTarget.offsetWidth || this.scrollTarget.offsetHeight);
-    },
-
-    /**
-     * Gets the index of the first visible item in the viewport.
+     * @param {!KeyboardEvent} event .
+     */
+    _spaceKeyDownHandler: function(event) {
+      Polymer.IronButtonStateImpl._spaceKeyDownHandler.call(this, event);
+      // Ensure that there is at most one ripple when the space key is held down.
+      if (this.hasRipple() && this.getRipple().ripples.length < 1) {
+        this._ripple.uiDownAction();
+      }
+    },
+
+    /**
+     * In addition to `IronButtonState` behavior, when space key goes up,
+     * create a ripple up effect.
      *
-     * @type {number}
-     */
-    get firstVisibleIndex() {
-      if (this._firstVisibleIndexVal === null) {
-        var physicalOffset = Math.floor(this._physicalTop + this._scrollerPaddingTop);
-
-        this._firstVisibleIndexVal = this._iterateItems(
-          function(pidx, vidx) {
-            physicalOffset += this._getPhysicalSizeIncrement(pidx);
-
-            if (physicalOffset > this._scrollPosition) {
-              return this.grid ? vidx - (vidx % this._itemsPerRow) : vidx;
-            }
-            // Handle a partially rendered final row in grid mode
-            if (this.grid && this._virtualCount - 1 === vidx) {
-              return vidx - (vidx % this._itemsPerRow);
-            }
-          }) || 0;
-      }
-      return this._firstVisibleIndexVal;
-    },
-
-    /**
-     * Gets the index of the last visible item in the viewport.
-     *
-     * @type {number}
-     */
-    get lastVisibleIndex() {
-      if (this._lastVisibleIndexVal === null) {
-        if (this.grid) {
-          var lastIndex = this.firstVisibleIndex + this._estRowsInView * this._itemsPerRow - 1;
-          this._lastVisibleIndexVal = Math.min(this._virtualCount, lastIndex);
+     * @param {!KeyboardEvent} event .
+     */
+    _spaceKeyUpHandler: function(event) {
+      Polymer.IronButtonStateImpl._spaceKeyUpHandler.call(this, event);
+      if (this.hasRipple()) {
+        this._ripple.uiUpAction();
+      }
+    }
+  };
+
+  /** @polymerBehavior */
+  Polymer.PaperButtonBehavior = [
+    Polymer.IronButtonState,
+    Polymer.IronControlState,
+    Polymer.PaperRippleBehavior,
+    Polymer.PaperButtonBehaviorImpl
+  ];
+Polymer({
+      is: 'paper-button',
+
+      behaviors: [
+        Polymer.PaperButtonBehavior
+      ],
+
+      properties: {
+        /**
+         * If true, the button should be styled with a shadow.
+         */
+        raised: {
+          type: Boolean,
+          reflectToAttribute: true,
+          value: false,
+          observer: '_calculateElevation'
+        }
+      },
+
+      _calculateElevation: function() {
+        if (!this.raised) {
+          this._setElevation(0);
         } else {
-          var physicalOffset = this._physicalTop;
-          this._iterateItems(function(pidx, vidx) {
-            if (physicalOffset < this._scrollBottom) {
-              this._lastVisibleIndexVal = vidx;
-            } else {
-              // Break _iterateItems
-              return true;
-            }
-            physicalOffset += this._getPhysicalSizeIncrement(pidx);
-          });
-        }
-      }
-      return this._lastVisibleIndexVal;
-    },
-
-    get _defaultScrollTarget() {
-      return this;
-    },
-    get _virtualRowCount() {
-      return Math.ceil(this._virtualCount / this._itemsPerRow);
-    },
-
-    get _estRowsInView() {
-      return Math.ceil(this._viewportHeight / this._rowHeight);
-    },
-
-    get _physicalRows() {
-      return Math.ceil(this._physicalCount / this._itemsPerRow);
-    },
-
-    ready: function() {
-      this.addEventListener('focus', this._didFocus.bind(this), true);
-    },
-
-    attached: function() {
-      this.updateViewportBoundaries();
-      this._render();
-      // `iron-resize` is fired when the list is attached if the event is added
-      // before attached causing unnecessary work.
-      this.listen(this, 'iron-resize', '_resizeHandler');
-    },
-
-    detached: function() {
-      this._itemsRendered = false;
-      this.unlisten(this, 'iron-resize', '_resizeHandler');
-    },
-
-    /**
-     * Set the overflow property if this element has its own scrolling region
-     */
-    _setOverflow: function(scrollTarget) {
-      this.style.webkitOverflowScrolling = scrollTarget === this ? 'touch' : '';
-      this.style.overflow = scrollTarget === this ? 'auto' : '';
-    },
-
-    /**
-     * Invoke this method if you dynamically update the viewport's
-     * size or CSS padding.
-     *
-     * @method updateViewportBoundaries
-     */
-    updateViewportBoundaries: function() {
-      this._scrollerPaddingTop = this.scrollTarget === this ? 0 :
-          parseInt(window.getComputedStyle(this)['padding-top'], 10);
-
-      this._viewportHeight = this._scrollTargetHeight;
-      if (this.grid) {
-        this._updateGridMetrics();
-      }
-    },
-
-    /**
-     * Update the models, the position of the
-     * items in the viewport and recycle tiles as needed.
-     */
-    _scrollHandler: function() {
-      // clamp the `scrollTop` value
-      var scrollTop = Math.max(0, Math.min(this._maxScrollTop, this._scrollTop));
-      var delta = scrollTop - this._scrollPosition;
-      var tileHeight, tileTop, kth, recycledTileSet, scrollBottom, physicalBottom;
-      var ratio = this._ratio;
-      var recycledTiles = 0;
-      var hiddenContentSize = this._hiddenContentSize;
-      var currentRatio = ratio;
-      var movingUp = [];
-
-      // track the last `scrollTop`
-      this._scrollPosition = scrollTop;
-
-      // clear cached visible indexes
-      this._firstVisibleIndexVal = null;
-      this._lastVisibleIndexVal = null;
-
-      scrollBottom = this._scrollBottom;
-      physicalBottom = this._physicalBottom;
-
-      // random access
-      if (Math.abs(delta) > this._physicalSize) {
-        this._physicalTop += delta;
-        recycledTiles =  Math.round(delta / this._physicalAverage);
-      }
-      // scroll up
-      else if (delta < 0) {
-        var topSpace = scrollTop - this._physicalTop;
-        var virtualStart = this._virtualStart;
-
-        recycledTileSet = [];
-
-        kth = this._physicalEnd;
-        currentRatio = topSpace / hiddenContentSize;
-
-        // move tiles from bottom to top
-        while (
-            // approximate `currentRatio` to `ratio`
-            currentRatio < ratio &&
-            // recycle less physical items than the total
-            recycledTiles < this._physicalCount &&
-            // ensure that these recycled tiles are needed
-            virtualStart - recycledTiles > 0 &&
-            // ensure that the tile is not visible
-            physicalBottom - this._getPhysicalSizeIncrement(kth) > scrollBottom
-        ) {
-
-          tileHeight = this._getPhysicalSizeIncrement(kth);
-          currentRatio += tileHeight / hiddenContentSize;
-          physicalBottom -= tileHeight;
-          recycledTileSet.push(kth);
-          recycledTiles++;
-          kth = (kth === 0) ? this._physicalCount - 1 : kth - 1;
-        }
-
-        movingUp = recycledTileSet;
-        recycledTiles = -recycledTiles;
-      }
-      // scroll down
-      else if (delta > 0) {
-        var bottomSpace = physicalBottom - scrollBottom;
-        var virtualEnd = this._virtualEnd;
-        var lastVirtualItemIndex = this._virtualCount-1;
-
-        recycledTileSet = [];
-
-        kth = this._physicalStart;
-        currentRatio = bottomSpace / hiddenContentSize;
-
-        // move tiles from top to bottom
-        while (
-            // approximate `currentRatio` to `ratio`
-            currentRatio < ratio &&
-            // recycle less physical items than the total
-            recycledTiles < this._physicalCount &&
-            // ensure that these recycled tiles are needed
-            virtualEnd + recycledTiles < lastVirtualItemIndex &&
-            // ensure that the tile is not visible
-            this._physicalTop + this._getPhysicalSizeIncrement(kth) < scrollTop
-          ) {
-
-          tileHeight = this._getPhysicalSizeIncrement(kth);
-          currentRatio += tileHeight / hiddenContentSize;
-
-          this._physicalTop += tileHeight;
-          recycledTileSet.push(kth);
-          recycledTiles++;
-          kth = (kth + 1) % this._physicalCount;
-        }
-      }
-
-      if (recycledTiles === 0) {
-        // Try to increase the pool if the list's client height isn't filled up with physical items
-        if (physicalBottom < scrollBottom || this._physicalTop > scrollTop) {
-          this._increasePoolIfNeeded();
-        }
-      } else {
-        this._virtualStart = this._virtualStart + recycledTiles;
-        this._physicalStart = this._physicalStart + recycledTiles;
-        this._update(recycledTileSet, movingUp);
-      }
-    },
-
-    /**
-     * Update the list of items, starting from the `_virtualStart` item.
-     * @param {!Array<number>=} itemSet
-     * @param {!Array<number>=} movingUp
-     */
-    _update: function(itemSet, movingUp) {
-      // manage focus
-      this._manageFocus();
-      // update models
-      this._assignModels(itemSet);
-      // measure heights
-      this._updateMetrics(itemSet);
-      // adjust offset after measuring
-      if (movingUp) {
-        while (movingUp.length) {
-          var idx = movingUp.pop();
-          this._physicalTop -= this._getPhysicalSizeIncrement(idx);
-        }
-      }
-      // update the position of the items
-      this._positionItems();
-      // set the scroller size
-      this._updateScrollerSize();
-      // increase the pool of physical items
-      this._increasePoolIfNeeded();
-    },
-
-    /**
-     * Creates a pool of DOM elements and attaches them to the local dom.
-     */
-    _createPool: function(size) {
-      var physicalItems = new Array(size);
-
-      this._ensureTemplatized();
-
-      for (var i = 0; i < size; i++) {
-        var inst = this.stamp(null);
-        // First element child is item; Safari doesn't support children[0]
-        // on a doc fragment
-        physicalItems[i] = inst.root.querySelector('*');
-        Polymer.dom(this).appendChild(inst.root);
-      }
-      return physicalItems;
-    },
-
-    /**
-     * Increases the pool of physical items only if needed.
-     *
-     * @return {boolean} True if the pool was increased.
-     */
-    _increasePoolIfNeeded: function() {
-      // Base case 1: the list has no height.
-      if (this._viewportHeight === 0) {
-        return false;
-      }
-      // Base case 2: If the physical size is optimal and the list's client height is full
-      // with physical items, don't increase the pool.
-      var isClientHeightFull = this._physicalBottom >= this._scrollBottom && this._physicalTop <= this._scrollPosition;
-      if (this._physicalSize >= this._optPhysicalSize && isClientHeightFull) {
-        return false;
-      }
-      // this value should range between [0 <= `currentPage` <= `_maxPages`]
-      var currentPage = Math.floor(this._physicalSize / this._viewportHeight);
-
-      if (currentPage === 0) {
-        // fill the first page
-        this._debounceTemplate(this._increasePool.bind(this, Math.round(this._physicalCount * 0.5)));
-      } else if (this._lastPage !== currentPage && isClientHeightFull) {
-        // paint the page and defer the next increase
-        // wait 16ms which is rough enough to get paint cycle.
-        Polymer.dom.addDebouncer(this.debounce('_debounceTemplate', this._increasePool.bind(this, this._itemsPerRow), 16));
-      } else {
-        // fill the rest of the pages
-        this._debounceTemplate(this._increasePool.bind(this, this._itemsPerRow));
-      }
-
-      this._lastPage = currentPage;
-
-      return true;
-    },
-
-    /**
-     * Increases the pool size.
-     */
-    _increasePool: function(missingItems) {
-      var nextPhysicalCount = Math.min(
-          this._physicalCount + missingItems,
-          this._virtualCount - this._virtualStart,
-          Math.max(this.maxPhysicalCount, DEFAULT_PHYSICAL_COUNT)
-        );
-      var prevPhysicalCount = this._physicalCount;
-      var delta = nextPhysicalCount - prevPhysicalCount;
-
-      if (delta <= 0) {
-        return;
-      }
-
-      [].push.apply(this._physicalItems, this._createPool(delta));
-      [].push.apply(this._physicalSizes, new Array(delta));
-
-      this._physicalCount = prevPhysicalCount + delta;
-
-      // update the physical start if we need to preserve the model of the focused item.
-      // In this situation, the focused item is currently rendered and its model would
-      // have changed after increasing the pool if the physical start remained unchanged.
-      if (this._physicalStart > this._physicalEnd &&
-          this._isIndexRendered(this._focusedIndex) &&
-          this._getPhysicalIndex(this._focusedIndex) < this._physicalEnd) {
-        this._physicalStart = this._physicalStart + delta;
-      }
-      this._update();
-    },
-
-    /**
-     * Render a new list of items. This method does exactly the same as `update`,
-     * but it also ensures that only one `update` cycle is created.
-     */
-    _render: function() {
-      var requiresUpdate = this._virtualCount > 0 || this._physicalCount > 0;
-
-      if (this.isAttached && !this._itemsRendered && this._isVisible && requiresUpdate) {
-        this._lastPage = 0;
-        this._update();
-        this._itemsRendered = true;
-      }
-    },
-
-    /**
-     * Templetizes the user template.
-     */
-    _ensureTemplatized: function() {
-      if (!this.ctor) {
-        // Template instance props that should be excluded from forwarding
-        var props = {};
-        props.__key__ = true;
-        props[this.as] = true;
-        props[this.indexAs] = true;
-        props[this.selectedAs] = true;
-        props.tabIndex = true;
-
-        this._instanceProps = props;
-        this._userTemplate = Polymer.dom(this).querySelector('template');
-
-        if (this._userTemplate) {
-          this.templatize(this._userTemplate);
-        } else {
-          console.warn('iron-list requires a template to be provided in light-dom');
-        }
-      }
-    },
-
-    /**
-     * Implements extension point from Templatizer mixin.
-     */
-    _getStampedChildren: function() {
-      return this._physicalItems;
-    },
-
-    /**
-     * Implements extension point from Templatizer
-     * Called as a side effect of a template instance path change, responsible
-     * for notifying items.<key-for-instance>.<path> change up to host.
-     */
-    _forwardInstancePath: function(inst, path, value) {
-      if (path.indexOf(this.as + '.') === 0) {
-        this.notifyPath('items.' + inst.__key__ + '.' +
-          path.slice(this.as.length + 1), value);
-      }
-    },
-
-    /**
-     * Implements extension point from Templatizer mixin
-     * Called as side-effect of a host property change, responsible for
-     * notifying parent path change on each row.
-     */
-    _forwardParentProp: function(prop, value) {
-      if (this._physicalItems) {
-        this._physicalItems.forEach(function(item) {
-          item._templateInstance[prop] = value;
-        }, this);
-      }
-    },
-
-    /**
-     * Implements extension point from Templatizer
-     * Called as side-effect of a host path change, responsible for
-     * notifying parent.<path> path change on each row.
-     */
-    _forwardParentPath: function(path, value) {
-      if (this._physicalItems) {
-        this._physicalItems.forEach(function(item) {
-          item._templateInstance.notifyPath(path, value, true);
-        }, this);
-      }
-    },
-
-    /**
-     * Called as a side effect of a host items.<key>.<path> path change,
-     * responsible for notifying item.<path> changes.
-     */
-    _forwardItemPath: function(path, value) {
-      if (!this._physicalIndexForKey) {
-        return;
-      }
-      var dot = path.indexOf('.');
-      var key = path.substring(0, dot < 0 ? path.length : dot);
-      var idx = this._physicalIndexForKey[key];
-      var offscreenItem = this._offscreenFocusedItem;
-      var el = offscreenItem && offscreenItem._templateInstance.__key__ === key ?
-          offscreenItem : this._physicalItems[idx];
-
-      if (!el || el._templateInstance.__key__ !== key) {
-        return;
-      }
-      if (dot >= 0) {
-        path = this.as + '.' + path.substring(dot+1);
-        el._templateInstance.notifyPath(path, value, true);
-      } else {
-        // Update selection if needed
-        var currentItem = el._templateInstance[this.as];
-        if (Array.isArray(this.selectedItems)) {
-          for (var i = 0; i < this.selectedItems.length; i++) {
-            if (this.selectedItems[i] === currentItem) {
-              this.set('selectedItems.' + i, value);
-              break;
-            }
-          }
-        } else if (this.selectedItem === currentItem) {
-          this.set('selectedItem', value);
-        }
-        el._templateInstance[this.as] = value;
-      }
-    },
-
-    /**
-     * Called when the items have changed. That is, ressignments
-     * to `items`, splices or updates to a single item.
-     */
-    _itemsChanged: function(change) {
-      if (change.path === 'items') {
-        // reset items
-        this._virtualStart = 0;
-        this._physicalTop = 0;
-        this._virtualCount = this.items ? this.items.length : 0;
-        this._collection = this.items ? Polymer.Collection.get(this.items) : null;
-        this._physicalIndexForKey = {};
-        this._firstVisibleIndexVal = null;
-        this._lastVisibleIndexVal = null;
-
-        this._resetScrollPosition(0);
-        this._removeFocusedItem();
-        // create the initial physical items
-        if (!this._physicalItems) {
-          this._physicalCount = Math.max(1, Math.min(DEFAULT_PHYSICAL_COUNT, this._virtualCount));
-          this._physicalItems = this._createPool(this._physicalCount);
-          this._physicalSizes = new Array(this._physicalCount);
-        }
-
-        this._physicalStart = 0;
-
-      } else if (change.path === 'items.splices') {
-
-        this._adjustVirtualIndex(change.value.indexSplices);
-        this._virtualCount = this.items ? this.items.length : 0;
-
-      } else {
-        // update a single item
-        this._forwardItemPath(change.path.split('.').slice(1).join('.'), change.value);
-        return;
-      }
-
-      this._itemsRendered = false;
-      this._debounceTemplate(this._render);
-    },
-
-    /**
-     * @param {!Array<!PolymerSplice>} splices
-     */
-    _adjustVirtualIndex: function(splices) {
-      splices.forEach(function(splice) {
-        // deselect removed items
-        splice.removed.forEach(this._removeItem, this);
-        // We only need to care about changes happening above the current position
-        if (splice.index < this._virtualStart) {
-          var delta = Math.max(
-              splice.addedCount - splice.removed.length,
-              splice.index - this._virtualStart);
-
-          this._virtualStart = this._virtualStart + delta;
-
-          if (this._focusedIndex >= 0) {
-            this._focusedIndex = this._focusedIndex + delta;
-          }
-        }
-      }, this);
-    },
-
-    _removeItem: function(item) {
-      this.$.selector.deselect(item);
-      // remove the current focused item
-      if (this._focusedItem && this._focusedItem._templateInstance[this.as] === item) {
-        this._removeFocusedItem();
-      }
-    },
-
-    /**
-     * Executes a provided function per every physical index in `itemSet`
-     * `itemSet` default value is equivalent to the entire set of physical indexes.
-     *
-     * @param {!function(number, number)} fn
-     * @param {!Array<number>=} itemSet
-     */
-    _iterateItems: function(fn, itemSet) {
-      var pidx, vidx, rtn, i;
-
-      if (arguments.length === 2 && itemSet) {
-        for (i = 0; i < itemSet.length; i++) {
-          pidx = itemSet[i];
-          vidx = this._computeVidx(pidx);
-          if ((rtn = fn.call(this, pidx, vidx)) != null) {
-            return rtn;
-          }
-        }
-      } else {
-        pidx = this._physicalStart;
-        vidx = this._virtualStart;
-
-        for (; pidx < this._physicalCount; pidx++, vidx++) {
-          if ((rtn = fn.call(this, pidx, vidx)) != null) {
-            return rtn;
-          }
-        }
-        for (pidx = 0; pidx < this._physicalStart; pidx++, vidx++) {
-          if ((rtn = fn.call(this, pidx, vidx)) != null) {
-            return rtn;
-          }
-        }
-      }
-    },
-
-    /**
-     * Returns the virtual index for a given physical index
-     *
-     * @param {number} pidx Physical index
-     * @return {number}
-     */
-    _computeVidx: function(pidx) {
-      if (pidx >= this._physicalStart) {
-        return this._virtualStart + (pidx - this._physicalStart);
-      }
-      return this._virtualStart + (this._physicalCount - this._physicalStart) + pidx;
-    },
-
-    /**
-     * Assigns the data models to a given set of items.
-     * @param {!Array<number>=} itemSet
-     */
-    _assignModels: function(itemSet) {
-      this._iterateItems(function(pidx, vidx) {
-        var el = this._physicalItems[pidx];
-        var inst = el._templateInstance;
-        var item = this.items && this.items[vidx];
-
-        if (item != null) {
-          inst[this.as] = item;
-          inst.__key__ = this._collection.getKey(item);
-          inst[this.selectedAs] = /** @type {!ArraySelectorElement} */ (this.$.selector).isSelected(item);
-          inst[this.indexAs] = vidx;
-          inst.tabIndex = this._focusedIndex === vidx ? 0 : -1;
-          this._physicalIndexForKey[inst.__key__] = pidx;
-          el.removeAttribute('hidden');
-        } else {
-          inst.__key__ = null;
-          el.setAttribute('hidden', '');
-        }
-      }, itemSet);
-    },
-
-    /**
-     * Updates the height for a given set of items.
-     *
-     * @param {!Array<number>=} itemSet
-     */
-     _updateMetrics: function(itemSet) {
-      // Make sure we distributed all the physical items
-      // so we can measure them
-      Polymer.dom.flush();
-
-      var newPhysicalSize = 0;
-      var oldPhysicalSize = 0;
-      var prevAvgCount = this._physicalAverageCount;
-      var prevPhysicalAvg = this._physicalAverage;
-
-      this._iterateItems(function(pidx, vidx) {
-
-        oldPhysicalSize += this._physicalSizes[pidx] || 0;
-        this._physicalSizes[pidx] = this._physicalItems[pidx].offsetHeight;
-        newPhysicalSize += this._physicalSizes[pidx];
-        this._physicalAverageCount += this._physicalSizes[pidx] ? 1 : 0;
-
-      }, itemSet);
-
-      this._viewportHeight = this._scrollTargetHeight;
-      if (this.grid) {
-        this._updateGridMetrics();
-        this._physicalSize = Math.ceil(this._physicalCount / this._itemsPerRow) * this._rowHeight;
-      } else {
-        this._physicalSize = this._physicalSize + newPhysicalSize - oldPhysicalSize;
-      }
-
-      // update the average if we measured something
-      if (this._physicalAverageCount !== prevAvgCount) {
-        this._physicalAverage = Math.round(
-            ((prevPhysicalAvg * prevAvgCount) + newPhysicalSize) /
-            this._physicalAverageCount);
-      }
-    },
-
-    _updateGridMetrics: function() {
-      this._viewportWidth = this.$.items.offsetWidth;
-      // Set item width to the value of the _physicalItems offsetWidth
-      this._itemWidth = this._physicalCount > 0 ? this._physicalItems[0].getBoundingClientRect().width : DEFAULT_GRID_SIZE;
-      // Set row height to the value of the _physicalItems offsetHeight
-      this._rowHeight = this._physicalCount > 0 ? this._physicalItems[0].offsetHeight : DEFAULT_GRID_SIZE;
-      // If in grid mode compute how many items with exist in each row
-      this._itemsPerRow = this._itemWidth ? Math.floor(this._viewportWidth / this._itemWidth) : this._itemsPerRow;
-    },
-
-    /**
-     * Updates the position of the physical items.
-     */
-    _positionItems: function() {
-      this._adjustScrollPosition();
-
-      var y = this._physicalTop;
-
-      if (this.grid) {
-        var totalItemWidth = this._itemsPerRow * this._itemWidth;
-        var rowOffset = (this._viewportWidth - totalItemWidth) / 2;
-
-        this._iterateItems(function(pidx, vidx) {
-
-          var modulus = vidx % this._itemsPerRow;
-          var x = Math.floor((modulus * this._itemWidth) + rowOffset);
-
-          this.translate3d(x + 'px', y + 'px', 0, this._physicalItems[pidx]);
-
-          if (this._shouldRenderNextRow(vidx)) {
-            y += this._rowHeight;
-          }
-
-        });
-      } else {
-        this._iterateItems(function(pidx, vidx) {
-
-          this.translate3d(0, y + 'px', 0, this._physicalItems[pidx]);
-          y += this._physicalSizes[pidx];
-
-        });
-      }
-    },
-
-    _getPhysicalSizeIncrement: function(pidx) {
-      if (!this.grid) {
-        return this._physicalSizes[pidx];
-      }
-      if (this._computeVidx(pidx) % this._itemsPerRow !== this._itemsPerRow - 1) {
-        return 0;
-      }
-      return this._rowHeight;
-    },
-
-    /**
-     * Returns, based on the current index,
-     * whether or not the next index will need
-     * to be rendered on a new row.
-     *
-     * @param {number} vidx Virtual index
-     * @return {boolean}
-     */
-    _shouldRenderNextRow: function(vidx) {
-      return vidx % this._itemsPerRow === this._itemsPerRow - 1;
-    },
-
-    /**
-     * Adjusts the scroll position when it was overestimated.
-     */
-    _adjustScrollPosition: function() {
-      var deltaHeight = this._virtualStart === 0 ? this._physicalTop :
-          Math.min(this._scrollPosition + this._physicalTop, 0);
-
-      if (deltaHeight) {
-        this._physicalTop = this._physicalTop - deltaHeight;
-        // juking scroll position during interial scrolling on iOS is no bueno
-        if (!IOS_TOUCH_SCROLLING && this._physicalTop !== 0) {
-          this._resetScrollPosition(this._scrollTop - deltaHeight);
-        }
-      }
-    },
-
-    /**
-     * Sets the position of the scroll.
-     */
-    _resetScrollPosition: function(pos) {
-      if (this.scrollTarget) {
-        this._scrollTop = pos;
-        this._scrollPosition = this._scrollTop;
-      }
-    },
-
-    /**
-     * Sets the scroll height, that's the height of the content,
-     *
-     * @param {boolean=} forceUpdate If true, updates the height no matter what.
-     */
-    _updateScrollerSize: function(forceUpdate) {
-      if (this.grid) {
-        this._estScrollHeight = this._virtualRowCount * this._rowHeight;
-      } else {
-        this._estScrollHeight = (this._physicalBottom +
-            Math.max(this._virtualCount - this._physicalCount - this._virtualStart, 0) * this._physicalAverage);
-      }
-
-      forceUpdate = forceUpdate || this._scrollHeight === 0;
-      forceUpdate = forceUpdate || this._scrollPosition >= this._estScrollHeight - this._physicalSize;
-      forceUpdate = forceUpdate || this.grid && this.$.items.style.height < this._estScrollHeight;
-
-      // amortize height adjustment, so it won't trigger repaints very often
-      if (forceUpdate || Math.abs(this._estScrollHeight - this._scrollHeight) >= this._optPhysicalSize) {
-        this.$.items.style.height = this._estScrollHeight + 'px';
-        this._scrollHeight = this._estScrollHeight;
-      }
-    },
-
-    /**
-     * Scroll to a specific item in the virtual list regardless
-     * of the physical items in the DOM tree.
-     *
-     * @method scrollToItem
-     * @param {(Object)} item The item to be scrolled to
-     */
-    scrollToItem: function(item){
-      return this.scrollToIndex(this.items.indexOf(item));
-    },
-
-    /**
-     * Scroll to a specific index in the virtual list regardless
-     * of the physical items in the DOM tree.
-     *
-     * @method scrollToIndex
-     * @param {number} idx The index of the item
-     */
-    scrollToIndex: function(idx) {
-      if (typeof idx !== 'number' || idx < 0 || idx > this.items.length - 1) {
-        return;
-      }
-
-      Polymer.dom.flush();
-
-      idx = Math.min(Math.max(idx, 0), this._virtualCount-1);
-      // update the virtual start only when needed
-      if (!this._isIndexRendered(idx) || idx >= this._maxVirtualStart) {
-        this._virtualStart = this.grid ? (idx - this._itemsPerRow * 2) : (idx - 1);
-      }
-      // manage focus
-      this._manageFocus();
-      // assign new models
-      this._assignModels();
-      // measure the new sizes
-      this._updateMetrics();
-
-      // estimate new physical offset
-      var estPhysicalTop = Math.floor(this._virtualStart / this._itemsPerRow)  * this._physicalAverage;
-      this._physicalTop = estPhysicalTop;
-
-      var currentTopItem = this._physicalStart;
-      var currentVirtualItem = this._virtualStart;
-      var targetOffsetTop = 0;
-      var hiddenContentSize = this._hiddenContentSize;
-
-      // scroll to the item as much as we can
-      while (currentVirtualItem < idx && targetOffsetTop <= hiddenContentSize) {
-        targetOffsetTop = targetOffsetTop + this._getPhysicalSizeIncrement(currentTopItem);
-        currentTopItem = (currentTopItem + 1) % this._physicalCount;
-        currentVirtualItem++;
-      }
-      // update the scroller size
-      this._updateScrollerSize(true);
-      // update the position of the items
-      this._positionItems();
-      // set the new scroll position
-      this._resetScrollPosition(this._physicalTop + this._scrollerPaddingTop + targetOffsetTop);
-      // increase the pool of physical items if needed
-      this._increasePoolIfNeeded();
-      // clear cached visible index
-      this._firstVisibleIndexVal = null;
-      this._lastVisibleIndexVal = null;
-    },
-
-    /**
-     * Reset the physical average and the average count.
-     */
-    _resetAverage: function() {
-      this._physicalAverage = 0;
-      this._physicalAverageCount = 0;
-    },
-
-    /**
-     * A handler for the `iron-resize` event triggered by `IronResizableBehavior`
-     * when the element is resized.
-     */
-    _resizeHandler: function() {
-      // iOS fires the resize event when the address bar slides up
-      if (IOS && Math.abs(this._viewportHeight - this._scrollTargetHeight) < 100) {
-        return;
-      }
-      // In Desktop Safari 9.0.3, if the scroll bars are always shown,
-      // changing the scroll position from a resize handler would result in
-      // the scroll position being reset. Waiting 1ms fixes the issue.
-      Polymer.dom.addDebouncer(this.debounce('_debounceTemplate', function() {
-        this.updateViewportBoundaries();
-        this._render();
-
-        if (this._itemsRendered && this._physicalItems && this._isVisible) {
-          this._resetAverage();
-          this.scrollToIndex(this.firstVisibleIndex);
-        }
-      }.bind(this), 1));
-    },
-
-    _getModelFromItem: function(item) {
-      var key = this._collection.getKey(item);
-      var pidx = this._physicalIndexForKey[key];
-
-      if (pidx != null) {
-        return this._physicalItems[pidx]._templateInstance;
-      }
-      return null;
-    },
-
-    /**
-     * Gets a valid item instance from its index or the object value.
-     *
-     * @param {(Object|number)} item The item object or its index
-     */
-    _getNormalizedItem: function(item) {
-      if (this._collection.getKey(item) === undefined) {
-        if (typeof item === 'number') {
-          item = this.items[item];
-          if (!item) {
-            throw new RangeError('<item> not found');
-          }
-          return item;
-        }
-        throw new TypeError('<item> should be a valid item');
-      }
-      return item;
-    },
-
-    /**
-     * Select the list item at the given index.
-     *
-     * @method selectItem
-     * @param {(Object|number)} item The item object or its index
-     */
-    selectItem: function(item) {
-      item = this._getNormalizedItem(item);
-      var model = this._getModelFromItem(item);
-
-      if (!this.multiSelection && this.selectedItem) {
-        this.deselectItem(this.selectedItem);
-      }
-      if (model) {
-        model[this.selectedAs] = true;
-      }
-      this.$.selector.select(item);
-      this.updateSizeForItem(item);
-    },
-
-    /**
-     * Deselects the given item list if it is already selected.
-     *
-
-     * @method deselect
-     * @param {(Object|number)} item The item object or its index
-     */
-    deselectItem: function(item) {
-      item = this._getNormalizedItem(item);
-      var model = this._getModelFromItem(item);
-
-      if (model) {
-        model[this.selectedAs] = false;
-      }
-      this.$.selector.deselect(item);
-      this.updateSizeForItem(item);
-    },
-
-    /**
-     * Select or deselect a given item depending on whether the item
-     * has already been selected.
-     *
-     * @method toggleSelectionForItem
-     * @param {(Object|number)} item The item object or its index
-     */
-    toggleSelectionForItem: function(item) {
-      item = this._getNormalizedItem(item);
-      if (/** @type {!ArraySelectorElement} */ (this.$.selector).isSelected(item)) {
-        this.deselectItem(item);
-      } else {
-        this.selectItem(item);
-      }
-    },
-
-    /**
-     * Clears the current selection state of the list.
-     *
-     * @method clearSelection
-     */
-    clearSelection: function() {
-      function unselect(item) {
-        var model = this._getModelFromItem(item);
-        if (model) {
-          model[this.selectedAs] = false;
-        }
-      }
-
-      if (Array.isArray(this.selectedItems)) {
-        this.selectedItems.forEach(unselect, this);
-      } else if (this.selectedItem) {
-        unselect.call(this, this.selectedItem);
-      }
-
-      /** @type {!ArraySelectorElement} */ (this.$.selector).clearSelection();
-    },
-
-    /**
-     * Add an event listener to `tap` if `selectionEnabled` is true,
-     * it will remove the listener otherwise.
-     */
-    _selectionEnabledChanged: function(selectionEnabled) {
-      var handler = selectionEnabled ? this.listen : this.unlisten;
-      handler.call(this, this, 'tap', '_selectionHandler');
-    },
-
-    /**
-     * Select an item from an event object.
-     */
-    _selectionHandler: function(e) {
-      var model = this.modelForElement(e.target);
-      if (!model) {
-        return;
-      }
-      var modelTabIndex, activeElTabIndex;
-      var target = Polymer.dom(e).path[0];
-      var activeEl = Polymer.dom(this.domHost ? this.domHost.root : document).activeElement;
-      var physicalItem = this._physicalItems[this._getPhysicalIndex(model[this.indexAs])];
-      // Safari does not focus certain form controls via mouse
-      // https://bugs.webkit.org/show_bug.cgi?id=118043
-      if (target.localName === 'input' ||
-          target.localName === 'button' ||
-          target.localName === 'select') {
-        return;
-      }
-      // Set a temporary tabindex
-      modelTabIndex = model.tabIndex;
-      model.tabIndex = SECRET_TABINDEX;
-      activeElTabIndex = activeEl ? activeEl.tabIndex : -1;
-      model.tabIndex = modelTabIndex;
-      // Only select the item if the tap wasn't on a focusable child
-      // or the element bound to `tabIndex`
-      if (activeEl && physicalItem.contains(activeEl) && activeElTabIndex !== SECRET_TABINDEX) {
-        return;
-      }
-      this.toggleSelectionForItem(model[this.as]);
-    },
-
-    _multiSelectionChanged: function(multiSelection) {
-      this.clearSelection();
-      this.$.selector.multi = multiSelection;
-    },
-
-    /**
-     * Updates the size of an item.
-     *
-     * @method updateSizeForItem
-     * @param {(Object|number)} item The item object or its index
-     */
-    updateSizeForItem: function(item) {
-      item = this._getNormalizedItem(item);
-      var key = this._collection.getKey(item);
-      var pidx = this._physicalIndexForKey[key];
-
-      if (pidx != null) {
-        this._updateMetrics([pidx]);
-        this._positionItems();
-      }
-    },
-
-    /**
-     * Creates a temporary backfill item in the rendered pool of physical items
-     * to replace the main focused item. The focused item has tabIndex = 0
-     * and might be currently focused by the user.
-     *
-     * This dynamic replacement helps to preserve the focus state.
-     */
-    _manageFocus: function() {
-      var fidx = this._focusedIndex;
-
-      if (fidx >= 0 && fidx < this._virtualCount) {
-        // if it's a valid index, check if that index is rendered
-        // in a physical item.
-        if (this._isIndexRendered(fidx)) {
-          this._restoreFocusedItem();
-        } else {
-          this._createFocusBackfillItem();
-        }
-      } else if (this._virtualCount > 0 && this._physicalCount > 0) {
-        // otherwise, assign the initial focused index.
-        this._focusedIndex = this._virtualStart;
-        this._focusedItem = this._physicalItems[this._physicalStart];
-      }
-    },
-
-    _isIndexRendered: function(idx) {
-      return idx >= this._virtualStart && idx <= this._virtualEnd;
-    },
-
-    _isIndexVisible: function(idx) {
-      return idx >= this.firstVisibleIndex && idx <= this.lastVisibleIndex;
-    },
-
-    _getPhysicalIndex: function(idx) {
-      return this._physicalIndexForKey[this._collection.getKey(this._getNormalizedItem(idx))];
-    },
-
-    _focusPhysicalItem: function(idx) {
-      if (idx < 0 || idx >= this._virtualCount) {
-        return;
-      }
-      this._restoreFocusedItem();
-      // scroll to index to make sure it's rendered
-      if (!this._isIndexRendered(idx)) {
-        this.scrollToIndex(idx);
-      }
-
-      var physicalItem = this._physicalItems[this._getPhysicalIndex(idx)];
-      var model = physicalItem._templateInstance;
-      var focusable;
-
-      // set a secret tab index
-      model.tabIndex = SECRET_TABINDEX;
-      // check if focusable element is the physical item
-      if (physicalItem.tabIndex === SECRET_TABINDEX) {
-       focusable = physicalItem;
-      }
-      // search for the element which tabindex is bound to the secret tab index
-      if (!focusable) {
-        focusable = Polymer.dom(physicalItem).querySelector('[tabindex="' + SECRET_TABINDEX + '"]');
-      }
-      // restore the tab index
-      model.tabIndex = 0;
-      // focus the focusable element
-      this._focusedIndex = idx;
-      focusable && focusable.focus();
-    },
-
-    _removeFocusedItem: function() {
-      if (this._offscreenFocusedItem) {
-        Polymer.dom(this).removeChild(this._offscreenFocusedItem);
-      }
-      this._offscreenFocusedItem = null;
-      this._focusBackfillItem = null;
-      this._focusedItem = null;
-      this._focusedIndex = -1;
-    },
-
-    _createFocusBackfillItem: function() {
-      var pidx, fidx = this._focusedIndex;
-      if (this._offscreenFocusedItem || fidx < 0) {
-        return;
-      }
-      if (!this._focusBackfillItem) {
-        // create a physical item, so that it backfills the focused item.
-        var stampedTemplate = this.stamp(null);
-        this._focusBackfillItem = stampedTemplate.root.querySelector('*');
-        Polymer.dom(this).appendChild(stampedTemplate.root);
-      }
-      // get the physical index for the focused index
-      pidx = this._getPhysicalIndex(fidx);
-
-      if (pidx != null) {
-        // set the offcreen focused physical item
-        this._offscreenFocusedItem = this._physicalItems[pidx];
-        // backfill the focused physical item
-        this._physicalItems[pidx] = this._focusBackfillItem;
-        // hide the focused physical
-        this.translate3d(0, HIDDEN_Y, 0, this._offscreenFocusedItem);
-      }
-    },
-
-    _restoreFocusedItem: function() {
-      var pidx, fidx = this._focusedIndex;
-
-      if (!this._offscreenFocusedItem || this._focusedIndex < 0) {
-        return;
-      }
-      // assign models to the focused index
-      this._assignModels();
-      // get the new physical index for the focused index
-      pidx = this._getPhysicalIndex(fidx);
-
-      if (pidx != null) {
-        // flip the focus backfill
-        this._focusBackfillItem = this._physicalItems[pidx];
-        // restore the focused physical item
-        this._physicalItems[pidx] = this._offscreenFocusedItem;
-        // reset the offscreen focused item
-        this._offscreenFocusedItem = null;
-        // hide the physical item that backfills
-        this.translate3d(0, HIDDEN_Y, 0, this._focusBackfillItem);
-      }
-    },
-
-    _didFocus: function(e) {
-      var targetModel = this.modelForElement(e.target);
-      var focusedModel = this._focusedItem ? this._focusedItem._templateInstance : null;
-      var hasOffscreenFocusedItem = this._offscreenFocusedItem !== null;
-      var fidx = this._focusedIndex;
-
-      if (!targetModel || !focusedModel) {
-        return;
-      }
-      if (focusedModel === targetModel) {
-        // if the user focused the same item, then bring it into view if it's not visible
-        if (!this._isIndexVisible(fidx)) {
-          this.scrollToIndex(fidx);
-        }
-      } else {
-        this._restoreFocusedItem();
-        // restore tabIndex for the currently focused item
-        focusedModel.tabIndex = -1;
-        // set the tabIndex for the next focused item
-        targetModel.tabIndex = 0;
-        fidx = targetModel[this.indexAs];
-        this._focusedIndex = fidx;
-        this._focusedItem = this._physicalItems[this._getPhysicalIndex(fidx)];
-
-        if (hasOffscreenFocusedItem && !this._offscreenFocusedItem) {
-          this._update();
-        }
-      }
-    },
-
-    _didMoveUp: function() {
-      this._focusPhysicalItem(this._focusedIndex - 1);
-    },
-
-    _didMoveDown: function(e) {
-      // disable scroll when pressing the down key
-      e.detail.keyboardEvent.preventDefault();
-      this._focusPhysicalItem(this._focusedIndex + 1);
-    },
-
-    _didEnter: function(e) {
-      this._focusPhysicalItem(this._focusedIndex);
-      this._selectionHandler(e.detail.keyboardEvent);
-    }
-  });
-
-})();
-// 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() {
-  /**
-   * @param {string} chromeSendName
-   * @return {function(string):void} A chrome.send() callback with curried name.
-   */
-  function chromeSendWithId(chromeSendName) {
-    return function(id) { chrome.send(chromeSendName, [id]); };
-  }
-
-  /** @constructor */
-  function ActionService() {
-    /** @private {Array<string>} */
-    this.searchTerms_ = [];
-  }
-
-  /**
-   * @param {string} s
-   * @return {string} |s| without whitespace at the beginning or end.
-   */
-  function trim(s) { return s.trim(); }
-
-  /**
-   * @param {string|undefined} value
-   * @return {boolean} Whether |value| is truthy.
-   */
-  function truthy(value) { return !!value; }
-
-  /**
-   * @param {string} searchText Input typed by the user into a search box.
-   * @return {Array<string>} A list of terms extracted from |searchText|.
-   */
-  ActionService.splitTerms = function(searchText) {
-    // Split quoted terms (e.g., 'The "lazy" dog' => ['The', 'lazy', 'dog']).
-    return searchText.split(/"([^"]*)"/).map(trim).filter(truthy);
-  };
-
-  ActionService.prototype = {
-    /** @param {string} id ID of the download to cancel. */
-    cancel: chromeSendWithId('cancel'),
-
-    /** Instructs the browser to clear all finished downloads. */
-    clearAll: function() {
-      if (loadTimeData.getBoolean('allowDeletingHistory')) {
-        chrome.send('clearAll');
-        this.search('');
-      }
-    },
-
-    /** @param {string} id ID of the dangerous download to discard. */
-    discardDangerous: chromeSendWithId('discardDangerous'),
-
-    /** @param {string} url URL of a file to download. */
-    download: function(url) {
-      var a = document.createElement('a');
-      a.href = url;
-      a.setAttribute('download', '');
-      a.click();
-    },
-
-    /** @param {string} id ID of the download that the user started dragging. */
-    drag: chromeSendWithId('drag'),
-
-    /** Loads more downloads with the current search terms. */
-    loadMore: function() {
-      chrome.send('getDownloads', this.searchTerms_);
-    },
-
-    /**
-     * @return {boolean} Whether the user is currently searching for downloads
-     *     (i.e. has a non-empty search term).
-     */
-    isSearching: function() {
-      return this.searchTerms_.length > 0;
-    },
-
-    /** Opens the current local destination for downloads. */
-    openDownloadsFolder: chrome.send.bind(chrome, 'openDownloadsFolder'),
-
-    /**
-     * @param {string} id ID of the download to run locally on the user's box.
-     */
-    openFile: chromeSendWithId('openFile'),
-
-    /** @param {string} id ID the of the progressing download to pause. */
-    pause: chromeSendWithId('pause'),
-
-    /** @param {string} id ID of the finished download to remove. */
-    remove: chromeSendWithId('remove'),
-
-    /** @param {string} id ID of the paused download to resume. */
-    resume: chromeSendWithId('resume'),
-
-    /**
-     * @param {string} id ID of the dangerous download to save despite
-     *     warnings.
-     */
-    saveDangerous: chromeSendWithId('saveDangerous'),
-
-    /** @param {string} searchText What to search for. */
-    search: function(searchText) {
-      var searchTerms = ActionService.splitTerms(searchText);
-      var sameTerms = searchTerms.length == this.searchTerms_.length;
-
-      for (var i = 0; sameTerms && i < searchTerms.length; ++i) {
-        if (searchTerms[i] != this.searchTerms_[i])
-          sameTerms = false;
-      }
-
-      if (sameTerms)
-        return;
-
-      this.searchTerms_ = searchTerms;
-      this.loadMore();
-    },
-
-    /**
-     * Shows the local folder a finished download resides in.
-     * @param {string} id ID of the download to show.
-     */
-    show: chromeSendWithId('show'),
-
-    /** Undo download removal. */
-    undo: chrome.send.bind(chrome, 'undo'),
-  };
-
-  cr.addSingletonGetter(ActionService);
-
-  return {ActionService: ActionService};
-});
-// 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() {
-  /**
-   * Explains why a download is in DANGEROUS state.
-   * @enum {string}
-   */
-  var DangerType = {
-    NOT_DANGEROUS: 'NOT_DANGEROUS',
-    DANGEROUS_FILE: 'DANGEROUS_FILE',
-    DANGEROUS_URL: 'DANGEROUS_URL',
-    DANGEROUS_CONTENT: 'DANGEROUS_CONTENT',
-    UNCOMMON_CONTENT: 'UNCOMMON_CONTENT',
-    DANGEROUS_HOST: 'DANGEROUS_HOST',
-    POTENTIALLY_UNWANTED: 'POTENTIALLY_UNWANTED',
-  };
-
-  /**
-   * The states a download can be in. These correspond to states defined in
-   * DownloadsDOMHandler::CreateDownloadItemValue
-   * @enum {string}
-   */
-  var States = {
-    IN_PROGRESS: 'IN_PROGRESS',
-    CANCELLED: 'CANCELLED',
-    COMPLETE: 'COMPLETE',
-    PAUSED: 'PAUSED',
-    DANGEROUS: 'DANGEROUS',
-    INTERRUPTED: 'INTERRUPTED',
-  };
-
-  return {
-    DangerType: DangerType,
-    States: States,
-  };
-});
-// Copyright 2014 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.
-
-// Action links are elements that are used to perform an in-page navigation or
-// action (e.g. showing a dialog).
-//
-// They look like normal anchor (<a>) tags as their text color is blue. However,
-// they're subtly different as they're not initially underlined (giving users a
-// clue that underlined links navigate while action links don't).
-//
-// Action links look very similar to normal links when hovered (hand cursor,
-// underlined). This gives the user an idea that clicking this link will do
-// something similar to navigation but in the same page.
-//
-// They can be created in JavaScript like this:
-//
-//   var link = document.createElement('a', 'action-link');  // Note second arg.
-//
-// or with a constructor like this:
-//
-//   var link = new ActionLink();
-//
-// They can be used easily from HTML as well, like so:
-//
-//   <a is="action-link">Click me!</a>
-//
-// NOTE: <action-link> and document.createElement('action-link') don't work.
-
-/**
- * @constructor
- * @extends {HTMLAnchorElement}
- */
-var ActionLink = document.registerElement('action-link', {
-  prototype: {
-    __proto__: HTMLAnchorElement.prototype,
-
-    /** @this {ActionLink} */
-    createdCallback: function() {
-      // Action links can start disabled (e.g. <a is="action-link" disabled>).
-      this.tabIndex = this.disabled ? -1 : 0;
-
-      if (!this.hasAttribute('role'))
-        this.setAttribute('role', 'link');
-
-      this.addEventListener('keydown', function(e) {
-        if (!this.disabled && e.key == 'Enter' && !this.href) {
-          // Schedule a click asynchronously because other 'keydown' handlers
-          // may still run later (e.g. document.addEventListener('keydown')).
-          // Specifically options dialogs break when this timeout isn't here.
-          // NOTE: this affects the "trusted" state of the ensuing click. I
-          // haven't found anything that breaks because of this (yet).
-          window.setTimeout(this.click.bind(this), 0);
-        }
-      });
-
-      function preventDefault(e) {
-        e.preventDefault();
-      }
-
-      function removePreventDefault() {
-        document.removeEventListener('selectstart', preventDefault);
-        document.removeEventListener('mouseup', removePreventDefault);
-      }
-
-      this.addEventListener('mousedown', function() {
-        // This handlers strives to match the behavior of <a href="...">.
-
-        // While the mouse is down, prevent text selection from dragging.
-        document.addEventListener('selectstart', preventDefault);
-        document.addEventListener('mouseup', removePreventDefault);
-
-        // If focus started via mouse press, don't show an outline.
-        if (document.activeElement != this)
-          this.classList.add('no-outline');
-      });
-
-      this.addEventListener('blur', function() {
-        this.classList.remove('no-outline');
-      });
-    },
-
-    /** @type {boolean} */
-    set disabled(disabled) {
-      if (disabled)
-        HTMLAnchorElement.prototype.setAttribute.call(this, 'disabled', '');
-      else
-        HTMLAnchorElement.prototype.removeAttribute.call(this, 'disabled');
-      this.tabIndex = disabled ? -1 : 0;
-    },
-    get disabled() {
-      return this.hasAttribute('disabled');
-    },
-
-    /** @override */
-    setAttribute: function(attr, val) {
-      if (attr.toLowerCase() == 'disabled')
-        this.disabled = true;
-      else
-        HTMLAnchorElement.prototype.setAttribute.apply(this, arguments);
-    },
-
-    /** @override */
-    removeAttribute: function(attr) {
-      if (attr.toLowerCase() == 'disabled')
-        this.disabled = false;
-      else
-        HTMLAnchorElement.prototype.removeAttribute.apply(this, arguments);
-    },
-  },
-
-  extends: 'a',
-});
+          Polymer.PaperButtonBehaviorImpl._calculateElevation.apply(this);
+        }
+      }
+
+      /**
+      Fired when the animation finishes.
+      This is useful if you want to wait until
+      the ripple animation finishes to perform some action.
+
+      @event transitionend
+      Event param: {{node: Object}} detail Contains the animated node.
+      */
+    });
 (function() {
 
     // monostate data
     var metaDatas = {};
     var metaArrays = {};
     var singleton = null;
 
     Polymer.IronMeta = Polymer({
 
       is: 'iron-meta',
@@ skipping 355 matching lines @@
             this._img.style.height = '100%';
             this._img.draggable = false;
           }
           this._img.src = this.src;
           Polymer.dom(this.root).appendChild(this._img);
         }
       }
 
     });
 /**
-   * @demo demo/index.html
-   * @polymerBehavior
+   * `Polymer.PaperInkyFocusBehavior` implements a ripple when the element has keyboard focus.
+   *
+   * @polymerBehavior Polymer.PaperInkyFocusBehavior
    */
-  Polymer.IronControlState = {
-
-    properties: {
-
-      /**
-       * If true, the element currently has focus.
-       */
-      focused: {
-        type: Boolean,
-        value: false,
-        notify: true,
-        readOnly: true,
-        reflectToAttribute: true
-      },
-
-      /**
-       * If true, the user cannot interact with this element.
-       */
-      disabled: {
-        type: Boolean,
-        value: false,
-        notify: true,
-        observer: '_disabledChanged',
-        reflectToAttribute: true
-      },
-
-      _oldTabIndex: {
-        type: Number
-      },
-
-      _boundFocusBlurHandler: {
-        type: Function,
-        value: function() {
-          return this._focusBlurHandler.bind(this);
-        }
-      }
-
-    },
-
+  Polymer.PaperInkyFocusBehaviorImpl = {
     observers: [
-      '_changedControlState(focused, disabled)'
+      '_focusedChanged(receivedFocusFromKeyboard)'
     ],
 
-    ready: function() {
-      this.addEventListener('focus', this._boundFocusBlurHandler, true);
-      this.addEventListener('blur', this._boundFocusBlurHandler, true);
-    },
-
-    _focusBlurHandler: function(event) {
-      // NOTE(cdata):  if we are in ShadowDOM land, `event.target` will
-      // eventually become `this` due to retargeting; if we are not in
-      // ShadowDOM land, `event.target` will eventually become `this` due
-      // to the second conditional which fires a synthetic event (that is also
-      // handled). In either case, we can disregard `event.path`.
-
-      if (event.target === this) {
-        this._setFocused(event.type === 'focus');
-      } else if (!this.shadowRoot) {
-        var target = /** @type {Node} */(Polymer.dom(event).localTarget);
-        if (!this.isLightDescendant(target)) {
-          this.fire(event.type, {sourceEvent: event}, {
-            node: this,
-            bubbles: event.bubbles,
-            cancelable: event.cancelable
-          });
-        }
-      }
-    },
-
-    _disabledChanged: function(disabled, old) {
-      this.setAttribute('aria-disabled', disabled ? 'true' : 'false');
-      this.style.pointerEvents = disabled ? 'none' : '';
-      if (disabled) {
-        this._oldTabIndex = this.tabIndex;
-        this._setFocused(false);
-        this.tabIndex = -1;
-        this.blur();
-      } else if (this._oldTabIndex !== undefined) {
-        this.tabIndex = this._oldTabIndex;
-      }
-    },
-
-    _changedControlState: function() {
-      // _controlStateChanged is abstract, follow-on behaviors may implement it
-      if (this._controlStateChanged) {
-        this._controlStateChanged();
-      }
-    }
-
-  };
-/**
-   * @demo demo/index.html
-   * @polymerBehavior Polymer.IronButtonState
-   */
-  Polymer.IronButtonStateImpl = {
-
-    properties: {
-
-      /**
-       * If true, the user is currently holding down the button.
-       */
-      pressed: {
-        type: Boolean,
-        readOnly: true,
-        value: false,
-        reflectToAttribute: true,
-        observer: '_pressedChanged'
-      },
-
-      /**
-       * If true, the button toggles the active state with each tap or press
-       * of the spacebar.
-       */
-      toggles: {
-        type: Boolean,
-        value: false,
-        reflectToAttribute: true
-      },
-
-      /**
-       * If true, the button is a toggle and is currently in the active state.
-       */
-      active: {
-        type: Boolean,
-        value: false,
-        notify: true,
-        reflectToAttribute: true
-      },
-
-      /**
-       * True if the element is currently being pressed by a "pointer," which
-       * is loosely defined as mouse or touch input (but specifically excluding
-       * keyboard input).
-       */
-      pointerDown: {
-        type: Boolean,
-        readOnly: true,
-        value: false
-      },
-
-      /**
-       * True if the input device that caused the element to receive focus
-       * was a keyboard.
-       */
-      receivedFocusFromKeyboard: {
-        type: Boolean,
-        readOnly: true
-      },
-
-      /**
-       * The aria attribute to be set if the button is a toggle and in the
-       * active state.
-       */
-      ariaActiveAttribute: {
-        type: String,
-        value: 'aria-pressed',
-        observer: '_ariaActiveAttributeChanged'
-      }
-    },
-
-    listeners: {
-      down: '_downHandler',
-      up: '_upHandler',
-      tap: '_tapHandler'
-    },
-
-    observers: [
-      '_detectKeyboardFocus(focused)',
-      '_activeChanged(active, ariaActiveAttribute)'
-    ],
-
-    keyBindings: {
-      'enter:keydown': '_asyncClick',
-      'space:keydown': '_spaceKeyDownHandler',
-      'space:keyup': '_spaceKeyUpHandler',
-    },
-
-    _mouseEventRe: /^mouse/,
-
-    _tapHandler: function() {
-      if (this.toggles) {
-       // a tap is needed to toggle the active state
-        this._userActivate(!this.active);
-      } else {
-        this.active = false;
-      }
-    },
-
-    _detectKeyboardFocus: function(focused) {
-      this._setReceivedFocusFromKeyboard(!this.pointerDown && focused);
-    },
-
-    // to emulate native checkbox, (de-)activations from a user interaction fire
-    // 'change' events
-    _userActivate: function(active) {
-      if (this.active !== active) {
-        this.active = active;
-        this.fire('change');
-      }
-    },
-
-    _downHandler: function(event) {
-      this._setPointerDown(true);
-      this._setPressed(true);
-      this._setReceivedFocusFromKeyboard(false);
-    },
-
-    _upHandler: function() {
-      this._setPointerDown(false);
-      this._setPressed(false);
-    },
-
-    /**
-     * @param {!KeyboardEvent} event .
-     */
-    _spaceKeyDownHandler: function(event) {
-      var keyboardEvent = event.detail.keyboardEvent;
-      var target = Polymer.dom(keyboardEvent).localTarget;
-
-      // Ignore the event if this is coming from a focused light child, since that
-      // element will deal with it.
-      if (this.isLightDescendant(/** @type {Node} */(target)))
-        return;
-
-      keyboardEvent.preventDefault();
-      keyboardEvent.stopImmediatePropagation();
-      this._setPressed(true);
-    },
-
-    /**
-     * @param {!KeyboardEvent} event .
-     */
-    _spaceKeyUpHandler: function(event) {
-      var keyboardEvent = event.detail.keyboardEvent;
-      var target = Polymer.dom(keyboardEvent).localTarget;
-
-      // Ignore the event if this is coming from a focused light child, since that
-      // element will deal with it.
-      if (this.isLightDescendant(/** @type {Node} */(target)))
-        return;
-
-      if (this.pressed) {
-        this._asyncClick();
-      }
-      this._setPressed(false);
-    },
-
-    // trigger click asynchronously, the asynchrony is useful to allow one
-    // event handler to unwind before triggering another event
-    _asyncClick: function() {
-      this.async(function() {
-        this.click();
-      }, 1);
-    },
-
-    // any of these changes are considered a change to button state
-
-    _pressedChanged: function(pressed) {
-      this._changedButtonState();
-    },
-
-    _ariaActiveAttributeChanged: function(value, oldValue) {
-      if (oldValue && oldValue != value && this.hasAttribute(oldValue)) {
-        this.removeAttribute(oldValue);
-      }
-    },
-
-    _activeChanged: function(active, ariaActiveAttribute) {
-      if (this.toggles) {
-        this.setAttribute(this.ariaActiveAttribute,
-                          active ? 'true' : 'false');
-      } else {
-        this.removeAttribute(this.ariaActiveAttribute);
-      }
-      this._changedButtonState();
-    },
-
-    _controlStateChanged: function() {
-      if (this.disabled) {
-        this._setPressed(false);
-      } else {
-        this._changedButtonState();
-      }
-    },
-
-    // provide hook for follow-on behaviors to react to button-state
-
-    _changedButtonState: function() {
-      if (this._buttonStateChanged) {
-        this._buttonStateChanged(); // abstract
-      }
-    }
-
-  };
-
-  /** @polymerBehavior */
-  Polymer.IronButtonState = [
-    Polymer.IronA11yKeysBehavior,
-    Polymer.IronButtonStateImpl
-  ];
-(function() {
-    var Utility = {
-      distance: function(x1, y1, x2, y2) {
-        var xDelta = (x1 - x2);
-        var yDelta = (y1 - y2);
-
-        return Math.sqrt(xDelta * xDelta + yDelta * yDelta);
-      },
-
-      now: window.performance && window.performance.now ?
-          window.performance.now.bind(window.performance) : Date.now
-    };
-
-    /**
-     * @param {HTMLElement} element
-     * @constructor
-     */
-    function ElementMetrics(element) {
-      this.element = element;
-      this.width = this.boundingRect.width;
-      this.height = this.boundingRect.height;
-
-      this.size = Math.max(this.width, this.height);
-    }
-
-    ElementMetrics.prototype = {
-      get boundingRect () {
-        return this.element.getBoundingClientRect();
-      },
-
-      furthestCornerDistanceFrom: function(x, y) {
-        var topLeft = Utility.distance(x, y, 0, 0);
-        var topRight = Utility.distance(x, y, this.width, 0);
-        var bottomLeft = Utility.distance(x, y, 0, this.height);
-        var bottomRight = Utility.distance(x, y, this.width, this.height);
-
-        return Math.max(topLeft, topRight, bottomLeft, bottomRight);
-      }
-    };
-
-    /**
-     * @param {HTMLElement} element
-     * @constructor
-     */
-    function Ripple(element) {
-      this.element = element;
-      this.color = window.getComputedStyle(element).color;
-
-      this.wave = document.createElement('div');
-      this.waveContainer = document.createElement('div');
-      this.wave.style.backgroundColor = this.color;
-      this.wave.classList.add('wave');
-      this.waveContainer.classList.add('wave-container');
-      Polymer.dom(this.waveContainer).appendChild(this.wave);
-
-      this.resetInteractionState();
-    }
-
-    Ripple.MAX_RADIUS = 300;
-
-    Ripple.prototype = {
-      get recenters() {
-        return this.element.recenters;
-      },
-
-      get center() {
-        return this.element.center;
-      },
-
-      get mouseDownElapsed() {
-        var elapsed;
-
-        if (!this.mouseDownStart) {
-          return 0;
-        }
-
-        elapsed = Utility.now() - this.mouseDownStart;
-
-        if (this.mouseUpStart) {
-          elapsed -= this.mouseUpElapsed;
-        }
-
-        return elapsed;
-      },
-
-      get mouseUpElapsed() {
-        return this.mouseUpStart ?
-          Utility.now () - this.mouseUpStart : 0;
-      },
-
-      get mouseDownElapsedSeconds() {
-        return this.mouseDownElapsed / 1000;
-      },
-
-      get mouseUpElapsedSeconds() {
-        return this.mouseUpElapsed / 1000;
-      },
-
-      get mouseInteractionSeconds() {
-        return this.mouseDownElapsedSeconds + this.mouseUpElapsedSeconds;
-      },
-
-      get initialOpacity() {
-        return this.element.initialOpacity;
-      },
-
-      get opacityDecayVelocity() {
-        return this.element.opacityDecayVelocity;
-      },
-
-      get radius() {
-        var width2 = this.containerMetrics.width * this.containerMetrics.width;
-        var height2 = this.containerMetrics.height * this.containerMetrics.height;
-        var waveRadius = Math.min(
-          Math.sqrt(width2 + height2),
-          Ripple.MAX_RADIUS
-        ) * 1.1 + 5;
-
-        var duration = 1.1 - 0.2 * (waveRadius / Ripple.MAX_RADIUS);
-        var timeNow = this.mouseInteractionSeconds / duration;
-        var size = waveRadius * (1 - Math.pow(80, -timeNow));
-
-        return Math.abs(size);
-      },
-
-      get opacity() {
-        if (!this.mouseUpStart) {
-          return this.initialOpacity;
-        }
-
-        return Math.max(
-          0,
-          this.initialOpacity - this.mouseUpElapsedSeconds * this.opacityDecayVelocity
-        );
-      },
-
-      get outerOpacity() {
-        // Linear increase in background opacity, capped at the opacity
-        // of the wavefront (waveOpacity).
-        var outerOpacity = this.mouseUpElapsedSeconds * 0.3;
-        var waveOpacity = this.opacity;
-
-        return Math.max(
-          0,
-          Math.min(outerOpacity, waveOpacity)
-        );
-      },
-
-      get isOpacityFullyDecayed() {
-        return this.opacity < 0.01 &&
-          this.radius >= Math.min(this.maxRadius, Ripple.MAX_RADIUS);
-      },
-
-      get isRestingAtMaxRadius() {
-        return this.opacity >= this.initialOpacity &&
-          this.radius >= Math.min(this.maxRadius, Ripple.MAX_RADIUS);
-      },
-
-      get isAnimationComplete() {
-        return this.mouseUpStart ?
-          this.isOpacityFullyDecayed : this.isRestingAtMaxRadius;
-      },
-
-      get translationFraction() {
-        return Math.min(
-          1,
-          this.radius / this.containerMetrics.size * 2 / Math.sqrt(2)
-        );
-      },
-
-      get xNow() {
-        if (this.xEnd) {
-          return this.xStart + this.translationFraction * (this.xEnd - this.xStart);
-        }
-
-        return this.xStart;
-      },
-
-      get yNow() {
-        if (this.yEnd) {
-          return this.yStart + this.translationFraction * (this.yEnd - this.yStart);
-        }
-
-        return this.yStart;
-      },
-
-      get isMouseDown() {
-        return this.mouseDownStart && !this.mouseUpStart;
-      },
-
-      resetInteractionState: function() {
-        this.maxRadius = 0;
-        this.mouseDownStart = 0;
-        this.mouseUpStart = 0;
-
-        this.xStart = 0;
-        this.yStart = 0;
-        this.xEnd = 0;
-        this.yEnd = 0;
-        this.slideDistance = 0;
-
-        this.containerMetrics = new ElementMetrics(this.element);
-      },
-
-      draw: function() {
-        var scale;
-        var translateString;
-        var dx;
-        var dy;
-
-        this.wave.style.opacity = this.opacity;
-
-        scale = this.radius / (this.containerMetrics.size / 2);
-        dx = this.xNow - (this.containerMetrics.width / 2);
-        dy = this.yNow - (this.containerMetrics.height / 2);
-
-
-        // 2d transform for safari because of border-radius and overflow:hidden clipping bug.
-        // https://bugs.webkit.org/show_bug.cgi?id=98538
-        this.waveContainer.style.webkitTransform = 'translate(' + dx + 'px, ' + dy + 'px)';
-        this.waveContainer.style.transform = 'translate3d(' + dx + 'px, ' + dy + 'px, 0)';
-        this.wave.style.webkitTransform = 'scale(' + scale + ',' + scale + ')';
-        this.wave.style.transform = 'scale3d(' + scale + ',' + scale + ',1)';
-      },
-
-      /** @param {Event=} event */
-      downAction: function(event) {
-        var xCenter = this.containerMetrics.width / 2;
-        var yCenter = this.containerMetrics.height / 2;
-
-        this.resetInteractionState();
-        this.mouseDownStart = Utility.now();
-
-        if (this.center) {
-          this.xStart = xCenter;
-          this.yStart = yCenter;
-          this.slideDistance = Utility.distance(
-            this.xStart, this.yStart, this.xEnd, this.yEnd
-          );
-        } else {
-          this.xStart = event ?
-              event.detail.x - this.containerMetrics.boundingRect.left :
-              this.containerMetrics.width / 2;
-          this.yStart = event ?
-              event.detail.y - this.containerMetrics.boundingRect.top :
-              this.containerMetrics.height / 2;
-        }
-
-        if (this.recenters) {
-          this.xEnd = xCenter;
-          this.yEnd = yCenter;
-          this.slideDistance = Utility.distance(
-            this.xStart, this.yStart, this.xEnd, this.yEnd
-          );
-        }
-
-        this.maxRadius = this.containerMetrics.furthestCornerDistanceFrom(
-          this.xStart,
-          this.yStart
-        );
-
-        this.waveContainer.style.top =
-          (this.containerMetrics.height - this.containerMetrics.size) / 2 + 'px';
-        this.waveContainer.style.left =
-          (this.containerMetrics.width - this.containerMetrics.size) / 2 + 'px';
-
-        this.waveContainer.style.width = this.containerMetrics.size + 'px';
-        this.waveContainer.style.height = this.containerMetrics.size + 'px';
-      },
-
-      /** @param {Event=} event */
-      upAction: function(event) {
-        if (!this.isMouseDown) {
-          return;
-        }
-
-        this.mouseUpStart = Utility.now();
-      },
-
-      remove: function() {
-        Polymer.dom(this.waveContainer.parentNode).removeChild(
-          this.waveContainer
-        );
-      }
-    };
-
-    Polymer({
-      is: 'paper-ripple',
-
-      behaviors: [
-        Polymer.IronA11yKeysBehavior
-      ],
-
-      properties: {
-        /**
-         * The initial opacity set on the wave.
-         *
-         * @attribute initialOpacity
-         * @type number
-         * @default 0.25
-         */
-        initialOpacity: {
-          type: Number,
-          value: 0.25
-        },
-
-        /**
-         * How fast (opacity per second) the wave fades out.
-         *
-         * @attribute opacityDecayVelocity
-         * @type number
-         * @default 0.8
-         */
-        opacityDecayVelocity: {
-          type: Number,
-          value: 0.8
-        },
-
-        /**
-         * If true, ripples will exhibit a gravitational pull towards
-         * the center of their container as they fade away.
-         *
-         * @attribute recenters
-         * @type boolean
-         * @default false
-         */
-        recenters: {
-          type: Boolean,
-          value: false
-        },
-
-        /**
-         * If true, ripples will center inside its container
-         *
-         * @attribute recenters
-         * @type boolean
-         * @default false
-         */
-        center: {
-          type: Boolean,
-          value: false
-        },
-
-        /**
-         * A list of the visual ripples.
-         *
-         * @attribute ripples
-         * @type Array
-         * @default []
-         */
-        ripples: {
-          type: Array,
-          value: function() {
-            return [];
-          }
-        },
-
-        /**
-         * True when there are visible ripples animating within the
-         * element.
-         */
-        animating: {
-          type: Boolean,
-          readOnly: true,
-          reflectToAttribute: true,
-          value: false
-        },
-
-        /**
-         * If true, the ripple will remain in the "down" state until `holdDown`
-         * is set to false again.
-         */
-        holdDown: {
-          type: Boolean,
-          value: false,
-          observer: '_holdDownChanged'
-        },
-
-        /**
-         * If true, the ripple will not generate a ripple effect
-         * via pointer interaction.
-         * Calling ripple's imperative api like `simulatedRipple` will
-         * still generate the ripple effect.
-         */
-        noink: {
-          type: Boolean,
-          value: false
-        },
-
-        _animating: {
-          type: Boolean
-        },
-
-        _boundAnimate: {
-          type: Function,
-          value: function() {
-            return this.animate.bind(this);
-          }
-        }
-      },
-
-      get target () {
-        return this.keyEventTarget;
-      },
-
-      keyBindings: {
-        'enter:keydown': '_onEnterKeydown',
-        'space:keydown': '_onSpaceKeydown',
-        'space:keyup': '_onSpaceKeyup'
-      },
-
-      attached: function() {
-        // Set up a11yKeysBehavior to listen to key events on the target,
-        // so that space and enter activate the ripple even if the target doesn't
-        // handle key events. The key handlers deal with `noink` themselves.
-        if (this.parentNode.nodeType == 11) { // DOCUMENT_FRAGMENT_NODE
-          this.keyEventTarget = Polymer.dom(this).getOwnerRoot().host;
-        } else {
-          this.keyEventTarget = this.parentNode;
-        }
-        var keyEventTarget = /** @type {!EventTarget} */ (this.keyEventTarget);
-        this.listen(keyEventTarget, 'up', 'uiUpAction');
-        this.listen(keyEventTarget, 'down', 'uiDownAction');
-      },
-
-      detached: function() {
-        this.unlisten(this.keyEventTarget, 'up', 'uiUpAction');
-        this.unlisten(this.keyEventTarget, 'down', 'uiDownAction');
-        this.keyEventTarget = null;
-      },
-
-      get shouldKeepAnimating () {
-        for (var index = 0; index < this.ripples.length; ++index) {
-          if (!this.ripples[index].isAnimationComplete) {
-            return true;
-          }
-        }
-
-        return false;
-      },
-
-      simulatedRipple: function() {
-        this.downAction(null);
-
-        // Please see polymer/polymer#1305
-        this.async(function() {
-          this.upAction();
-        }, 1);
-      },
-
-      /**
-       * Provokes a ripple down effect via a UI event,
-       * respecting the `noink` property.
-       * @param {Event=} event
-       */
-      uiDownAction: function(event) {
-        if (!this.noink) {
-          this.downAction(event);
-        }
-      },
-
-      /**
-       * Provokes a ripple down effect via a UI event,
-       * *not* respecting the `noink` property.
-       * @param {Event=} event
-       */
-      downAction: function(event) {
-        if (this.holdDown && this.ripples.length > 0) {
-          return;
-        }
-
-        var ripple = this.addRipple();
-
-        ripple.downAction(event);
-
-        if (!this._animating) {
-          this._animating = true;
-          this.animate();
-        }
-      },
-
-      /**
-       * Provokes a ripple up effect via a UI event,
-       * respecting the `noink` property.
-       * @param {Event=} event
-       */
-      uiUpAction: function(event) {
-        if (!this.noink) {
-          this.upAction(event);
-        }
-      },
-
-      /**
-       * Provokes a ripple up effect via a UI event,
-       * *not* respecting the `noink` property.
-       * @param {Event=} event
-       */
-      upAction: function(event) {
-        if (this.holdDown) {
-          return;
-        }
-
-        this.ripples.forEach(function(ripple) {
-          ripple.upAction(event);
-        });
-
-        this._animating = true;
-        this.animate();
-      },
-
-      onAnimationComplete: function() {
-        this._animating = false;
-        this.$.background.style.backgroundColor = null;
-        this.fire('transitionend');
-      },
-
-      addRipple: function() {
-        var ripple = new Ripple(this);
-
-        Polymer.dom(this.$.waves).appendChild(ripple.waveContainer);
-        this.$.background.style.backgroundColor = ripple.color;
-        this.ripples.push(ripple);
-
-        this._setAnimating(true);
-
-        return ripple;
-      },
-
-      removeRipple: function(ripple) {
-        var rippleIndex = this.ripples.indexOf(ripple);
-
-        if (rippleIndex < 0) {
-          return;
-        }
-
-        this.ripples.splice(rippleIndex, 1);
-
-        ripple.remove();
-
-        if (!this.ripples.length) {
-          this._setAnimating(false);
-        }
-      },
-
-      animate: function() {
-        if (!this._animating) {
-          return;
-        }
-        var index;
-        var ripple;
-
-        for (index = 0; index < this.ripples.length; ++index) {
-          ripple = this.ripples[index];
-
-          ripple.draw();
-
-          this.$.background.style.opacity = ripple.outerOpacity;
-
-          if (ripple.isOpacityFullyDecayed && !ripple.isRestingAtMaxRadius) {
-            this.removeRipple(ripple);
-          }
-        }
-
-        if (!this.shouldKeepAnimating && this.ripples.length === 0) {
-          this.onAnimationComplete();
-        } else {
-          window.requestAnimationFrame(this._boundAnimate);
-        }
-      },
-
-      _onEnterKeydown: function() {
-        this.uiDownAction();
-        this.async(this.uiUpAction, 1);
-      },
-
-      _onSpaceKeydown: function() {
-        this.uiDownAction();
-      },
-
-      _onSpaceKeyup: function() {
-        this.uiUpAction();
-      },
-
-      // note: holdDown does not respect noink since it can be a focus based
-      // effect.
-      _holdDownChanged: function(newVal, oldVal) {
-        if (oldVal === undefined) {
-          return;
-        }
-        if (newVal) {
-          this.downAction();
-        } else {
-          this.upAction();
-        }
-      }
-
-      /**
-      Fired when the animation finishes.
-      This is useful if you want to wait until
-      the ripple animation finishes to perform some action.
-
-      @event transitionend
-      @param {{node: Object}} detail Contains the animated node.
-      */
-    });
-  })();
-/**
-   * `Polymer.PaperRippleBehavior` dynamically implements a ripple
-   * when the element has focus via pointer or keyboard.
-   *
-   * NOTE: This behavior is intended to be used in conjunction with and after
-   * `Polymer.IronButtonState` and `Polymer.IronControlState`.
-   *
-   * @polymerBehavior Polymer.PaperRippleBehavior
-   */
-  Polymer.PaperRippleBehavior = {
-    properties: {
-      /**
-       * If true, the element will not produce a ripple effect when interacted
-       * with via the pointer.
-       */
-      noink: {
-        type: Boolean,
-        observer: '_noinkChanged'
-      },
-
-      /**
-       * @type {Element|undefined}
-       */
-      _rippleContainer: {
-        type: Object,
-      }
-    },
-
-    /**
-     * Ensures a `<paper-ripple>` element is available when the element is
-     * focused.
-     */
-    _buttonStateChanged: function() {
-      if (this.focused) {
+    _focusedChanged: function(receivedFocusFromKeyboard) {
+      if (receivedFocusFromKeyboard) {
         this.ensureRipple();
       }
-    },
-
-    /**
-     * In addition to the functionality provided in `IronButtonState`, ensures
-     * a ripple effect is created when the element is in a `pressed` state.
-     */
-    _downHandler: function(event) {
-      Polymer.IronButtonStateImpl._downHandler.call(this, event);
-      if (this.pressed) {
-        this.ensureRipple(event);
-      }
-    },
-
-    /**
-     * Ensures this element contains a ripple effect. For startup efficiency
-     * the ripple effect is dynamically on demand when needed.
-     * @param {!Event=} optTriggeringEvent (optional) event that triggered the
-     * ripple.
-     */
-    ensureRipple: function(optTriggeringEvent) {
-      if (!this.hasRipple()) {
-        this._ripple = this._createRipple();
-        this._ripple.noink = this.noink;
-        var rippleContainer = this._rippleContainer || this.root;
-        if (rippleContainer) {
-          Polymer.dom(rippleContainer).appendChild(this._ripple);
-        }
-        if (optTriggeringEvent) {
-          // Check if the event happened inside of the ripple container
-          // Fall back to host instead of the root because distributed text
-          // nodes are not valid event targets
-          var domContainer = Polymer.dom(this._rippleContainer || this);
-          var target = Polymer.dom(optTriggeringEvent).rootTarget;
-          if (domContainer.deepContains( /** @type {Node} */(target))) {
-            this._ripple.uiDownAction(optTriggeringEvent);
-          }
-        }
-      }
-    },
-
-    /**
-     * Returns the `<paper-ripple>` element used by this element to create
-     * ripple effects. The element's ripple is created on demand, when
-     * necessary, and calling this method will force the
-     * ripple to be created.
-     */
-    getRipple: function() {
-      this.ensureRipple();
-      return this._ripple;
-    },
-
-    /**
-     * Returns true if this element currently contains a ripple effect.
-     * @return {boolean}
-     */
-    hasRipple: function() {
-      return Boolean(this._ripple);
-    },
-
-    /**
-     * Create the element's ripple effect via creating a `<paper-ripple>`.
-     * Override this method to customize the ripple element.
-     * @return {!PaperRippleElement} Returns a `<paper-ripple>` element.
-     */
+      if (this.hasRipple()) {
+        this._ripple.holdDown = receivedFocusFromKeyboard;
+      }
+    },
+
     _createRipple: function() {
-      return /** @type {!PaperRippleElement} */ (
-          document.createElement('paper-ripple'));
-    },
-
-    _noinkChanged: function(noink) {
-      if (this.hasRipple()) {
-        this._ripple.noink = noink;
-      }
+      var ripple = Polymer.PaperRippleBehavior._createRipple();
+      ripple.id = 'ink';
+      ripple.setAttribute('center', '');
+      ripple.classList.add('circle');
+      return ripple;
     }
   };
-/** @polymerBehavior Polymer.PaperButtonBehavior */
-  Polymer.PaperButtonBehaviorImpl = {
-    properties: {
-      /**
-       * The z-depth of this element, from 0-5. Setting to 0 will remove the
-       * shadow, and each increasing number greater than 0 will be "deeper"
-       * than the last.
-       *
-       * @attribute elevation
-       * @type number
-       * @default 1
-       */
-      elevation: {
-        type: Number,
-        reflectToAttribute: true,
-        readOnly: true
-      }
-    },
-
-    observers: [
-      '_calculateElevation(focused, disabled, active, pressed, receivedFocusFromKeyboard)',
-      '_computeKeyboardClass(receivedFocusFromKeyboard)'
-    ],
-
-    hostAttributes: {
-      role: 'button',
-      tabindex: '0',
-      animated: true
-    },
-
-    _calculateElevation: function() {
-      var e = 1;
-      if (this.disabled) {
-        e = 0;
-      } else if (this.active || this.pressed) {
-        e = 4;
-      } else if (this.receivedFocusFromKeyboard) {
-        e = 3;
-      }
-      this._setElevation(e);
-    },
-
-    _computeKeyboardClass: function(receivedFocusFromKeyboard) {
-      this.toggleClass('keyboard-focus', receivedFocusFromKeyboard);
-    },
-
-    /**
-     * In addition to `IronButtonState` behavior, when space key goes down,
-     * create a ripple down effect.
-     *
-     * @param {!KeyboardEvent} event .
-     */
-    _spaceKeyDownHandler: function(event) {
-      Polymer.IronButtonStateImpl._spaceKeyDownHandler.call(this, event);
-      // Ensure that there is at most one ripple when the space key is held down.
-      if (this.hasRipple() && this.getRipple().ripples.length < 1) {
-        this._ripple.uiDownAction();
-      }
-    },
-
-    /**
-     * In addition to `IronButtonState` behavior, when space key goes up,
-     * create a ripple up effect.
-     *
-     * @param {!KeyboardEvent} event .
-     */
-    _spaceKeyUpHandler: function(event) {
-      Polymer.IronButtonStateImpl._spaceKeyUpHandler.call(this, event);
-      if (this.hasRipple()) {
-        this._ripple.uiUpAction();
-      }
-    }
-  };
-
-  /** @polymerBehavior */
-  Polymer.PaperButtonBehavior = [
+
+  /** @polymerBehavior Polymer.PaperInkyFocusBehavior */
+  Polymer.PaperInkyFocusBehavior = [
     Polymer.IronButtonState,
     Polymer.IronControlState,
     Polymer.PaperRippleBehavior,
-    Polymer.PaperButtonBehaviorImpl
+    Polymer.PaperInkyFocusBehaviorImpl
   ];
 Polymer({
-      is: 'paper-button',
+      is: 'paper-icon-button',
+
+      hostAttributes: {
+        role: 'button',
+        tabindex: '0'
+      },
 
       behaviors: [
-        Polymer.PaperButtonBehavior
+        Polymer.PaperInkyFocusBehavior
       ],
 
       properties: {
         /**
-         * If true, the button should be styled with a shadow.
+         * The URL of an image for the icon. If the src property is specified,
+         * the icon property should not be.
          */
-        raised: {
-          type: Boolean,
-          reflectToAttribute: true,
-          value: false,
-          observer: '_calculateElevation'
-        }
-      },
-
-      _calculateElevation: function() {
-        if (!this.raised) {
-          this._setElevation(0);
-        } else {
-          Polymer.PaperButtonBehaviorImpl._calculateElevation.apply(this);
-        }
-      }
-
-      /**
-      Fired when the animation finishes.
-      This is useful if you want to wait until
-      the ripple animation finishes to perform some action.
-
-      @event transitionend
-      Event param: {{node: Object}} detail Contains the animated node.
-      */
+        src: {
+          type: String
+        },
+
+        /**
+         * Specifies the icon name or index in the set of icons available in
+         * the icon's icon set. If the icon property is specified,
+         * the src property should not be.
+         */
+        icon: {
+          type: String
+        },
+
+        /**
+         * Specifies the alternate text for the button, for accessibility.
+         */
+        alt: {
+          type: String,
+          observer: "_altChanged"
+        }
+      },
+
+      _altChanged: function(newValue, oldValue) {
+        var label = this.getAttribute('aria-label');
+
+        // Don't stomp over a user-set aria-label.
+        if (!label || oldValue == label) {
+          this.setAttribute('aria-label', newValue);
+        }
+      }
     });
 Polymer({
-      is: 'paper-icon-button-light',
-      extends: 'button',
+      is: 'paper-tab',
 
       behaviors: [
+        Polymer.IronControlState,
+        Polymer.IronButtonState,
         Polymer.PaperRippleBehavior
       ],
 
+      properties: {
+
+        /**
+         * If true, the tab will forward keyboard clicks (enter/space) to
+         * the first anchor element found in its descendants
+         */
+        link: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true
+        }
+
+      },
+
+      hostAttributes: {
+        role: 'tab'
+      },
+
       listeners: {
-        'down': '_rippleDown',
-        'up': '_rippleUp',
-        'focus': '_rippleDown',
-        'blur': '_rippleUp',
-      },
-
-      _rippleDown: function() {
-        this.getRipple().downAction();
-      },
-
-      _rippleUp: function() {
-        this.getRipple().upAction();
-      },
-
-      /**
-       * @param {...*} var_args
-       */
-      ensureRipple: function(var_args) {
-        var lastRipple = this._ripple;
-        Polymer.PaperRippleBehavior.ensureRipple.apply(this, arguments);
-        if (this._ripple && this._ripple !== lastRipple) {
-          this._ripple.center = true;
-          this._ripple.classList.add('circle');
-        }
-      }
+        down: '_updateNoink',
+        tap: '_onTap'
+      },
+
+      attached: function() {
+        this._updateNoink();
+      },
+
+      get _parentNoink () {
+        var parent = Polymer.dom(this).parentNode;
+        return !!parent && !!parent.noink;
+      },
+
+      _updateNoink: function() {
+        this.noink = !!this.noink || !!this._parentNoink;
+      },
+
+      _onTap: function(event) {
+        if (this.link) {
+          var anchor = this.queryEffectiveChildren('a');
+
+          if (!anchor) {
+            return;
+          }
+
+          // Don't get stuck in a loop delegating
+          // the listener from the child anchor
+          if (event.target === anchor) {
+            return;
+          }
+
+          anchor.click();
+        }
+      }
+
     });
-/**
- * `iron-range-behavior` provides the behavior for something with a minimum to maximum range.
- *
- * @demo demo/index.html
- * @polymerBehavior
- */
- Polymer.IronRangeBehavior = {
-
-  properties: {
-
-    /**
-     * The number that represents the current value.
-     */
-    value: {
-      type: Number,
-      value: 0,
-      notify: true,
-      reflectToAttribute: true
-    },
-
-    /**
-     * The number that indicates the minimum value of the range.
-     */
-    min: {
-      type: Number,
-      value: 0,
-      notify: true
-    },
-
-    /**
-     * The number that indicates the maximum value of the range.
-     */
-    max: {
-      type: Number,
-      value: 100,
-      notify: true
-    },
-
-    /**
-     * Specifies the value granularity of the range's value.
-     */
-    step: {
-      type: Number,
-      value: 1,
-      notify: true
-    },
-
-    /**
-     * Returns the ratio of the value.
-     */
-    ratio: {
-      type: Number,
-      value: 0,
-      readOnly: true,
-      notify: true
-    },
-  },
-
-  observers: [
-    '_update(value, min, max, step)'
-  ],
-
-  _calcRatio: function(value) {
-    return (this._clampValue(value) - this.min) / (this.max - this.min);
-  },
-
-  _clampValue: function(value) {
-    return Math.min(this.max, Math.max(this.min, this._calcStep(value)));
-  },
-
-  _calcStep: function(value) {
-    // polymer/issues/2493
-    value = parseFloat(value);
-
-    if (!this.step) {
-      return value;
-    }
-
-    var numSteps = Math.round((value - this.min) / this.step);
-    if (this.step < 1) {
-     /**
-      * For small values of this.step, if we calculate the step using
-      * `Math.round(value / step) * step` we may hit a precision point issue
-      * eg. 0.1 * 0.2 =  0.020000000000000004
-      * http://docs.oracle.com/cd/E19957-01/806-3568/ncg_goldberg.html
-      *
-      * as a work around we can divide by the reciprocal of `step`
-      */
-      return numSteps / (1 / this.step) + this.min;
-    } else {
-      return numSteps * this.step + this.min;
-    }
-  },
-
-  _validateValue: function() {
-    var v = this._clampValue(this.value);
-    this.value = this.oldValue = isNaN(v) ? this.oldValue : v;
-    return this.value !== v;
-  },
-
-  _update: function() {
-    this._validateValue();
-    this._setRatio(this._calcRatio(this.value) * 100);
-  }
-
-};
-Polymer({
-    is: 'paper-progress',
-
-    behaviors: [
-      Polymer.IronRangeBehavior
-    ],
-
+/** @polymerBehavior Polymer.IronMultiSelectableBehavior */
+  Polymer.IronMultiSelectableBehaviorImpl = {
     properties: {
-      /**
-       * The number that represents the current secondary progress.
-       */
-      secondaryProgress: {
-        type: Number,
-        value: 0
-      },
-
-      /**
-       * The secondary ratio
-       */
-      secondaryRatio: {
-        type: Number,
-        value: 0,
-        readOnly: true
-      },
-
-      /**
-       * Use an indeterminate progress indicator.
-       */
-      indeterminate: {
+
+      /**
+       * If true, multiple selections are allowed.
+       */
+      multi: {
         type: Boolean,
         value: false,
-        observer: '_toggleIndeterminate'
-      },
-
-      /**
-       * True if the progress is disabled.
-       */
-      disabled: {
-        type: Boolean,
-        value: false,
-        reflectToAttribute: true,
-        observer: '_disabledChanged'
-      }
+        observer: 'multiChanged'
+      },
+
+      /**
+       * Gets or sets the selected elements. This is used instead of `selected` when `multi`
+       * is true.
+       */
+      selectedValues: {
+        type: Array,
+        notify: true
+      },
+
+      /**
+       * Returns an array of currently selected items.
+       */
+      selectedItems: {
+        type: Array,
+        readOnly: true,
+        notify: true
+      },
+
     },
 
     observers: [
-      '_progressChanged(secondaryProgress, value, min, max)'
+      '_updateSelected(selectedValues.splices)'
     ],
 
+    /**
+     * Selects the given value. If the `multi` property is true, then the selected state of the
+     * `value` will be toggled; otherwise the `value` will be selected.
+     *
+     * @method select
+     * @param {string|number} value the value to select.
+     */
+    select: function(value) {
+      if (this.multi) {
+        if (this.selectedValues) {
+          this._toggleSelected(value);
+        } else {
+          this.selectedValues = [value];
+        }
+      } else {
+        this.selected = value;
+      }
+    },
+
+    multiChanged: function(multi) {
+      this._selection.multi = multi;
+    },
+
+    get _shouldUpdateSelection() {
+      return this.selected != null ||
+        (this.selectedValues != null && this.selectedValues.length);
+    },
+
+    _updateAttrForSelected: function() {
+      if (!this.multi) {
+        Polymer.IronSelectableBehavior._updateAttrForSelected.apply(this);
+      } else if (this._shouldUpdateSelection) {
+        this.selectedValues = this.selectedItems.map(function(selectedItem) {
+          return this._indexToValue(this.indexOf(selectedItem));
+        }, this).filter(function(unfilteredValue) {
+          return unfilteredValue != null;
+        }, this);
+      }
+    },
+
+    _updateSelected: function() {
+      if (this.multi) {
+        this._selectMulti(this.selectedValues);
+      } else {
+        this._selectSelected(this.selected);
+      }
+    },
+
+    _selectMulti: function(values) {
+      if (values) {
+        var selectedItems = this._valuesToItems(values);
+        // clear all but the current selected items
+        this._selection.clear(selectedItems);
+        // select only those not selected yet
+        for (var i = 0; i < selectedItems.length; i++) {
+          this._selection.setItemSelected(selectedItems[i], true);
+        }
+        // Check for items, since this array is populated only when attached
+        if (this.fallbackSelection && this.items.length && !this._selection.get().length) {
+          var fallback = this._valueToItem(this.fallbackSelection);
+          if (fallback) {
+            this.selectedValues = [this.fallbackSelection];
+          }
+        }
+      } else {
+        this._selection.clear();
+      }
+    },
+
+    _selectionChange: function() {
+      var s = this._selection.get();
+      if (this.multi) {
+        this._setSelectedItems(s);
+      } else {
+        this._setSelectedItems([s]);
+        this._setSelectedItem(s);
+      }
+    },
+
+    _toggleSelected: function(value) {
+      var i = this.selectedValues.indexOf(value);
+      var unselected = i < 0;
+      if (unselected) {
+        this.push('selectedValues',value);
+      } else {
+        this.splice('selectedValues',i,1);
+      }
+    },
+
+    _valuesToItems: function(values) {
+      return (values == null) ? null : values.map(function(value) {
+        return this._valueToItem(value);
+      }, this);
+    }
+  };
+
+  /** @polymerBehavior */
+  Polymer.IronMultiSelectableBehavior = [
+    Polymer.IronSelectableBehavior,
+    Polymer.IronMultiSelectableBehaviorImpl
+  ];
+/**
+   * `Polymer.IronMenuBehavior` implements accessible menu behavior.
+   *
+   * @demo demo/index.html
+   * @polymerBehavior Polymer.IronMenuBehavior
+   */
+  Polymer.IronMenuBehaviorImpl = {
+
+    properties: {
+
+      /**
+       * Returns the currently focused item.
+       * @type {?Object}
+       */
+      focusedItem: {
+        observer: '_focusedItemChanged',
+        readOnly: true,
+        type: Object
+      },
+
+      /**
+       * The attribute to use on menu items to look up the item title. Typing the first
+       * letter of an item when the menu is open focuses that item. If unset, `textContent`
+       * will be used.
+       */
+      attrForItemTitle: {
+        type: String
+      }
+    },
+
     hostAttributes: {
-      role: 'progressbar'
-    },
-
-    _toggleIndeterminate: function(indeterminate) {
-      // If we use attribute/class binding, the animation sometimes doesn't translate properly
-      // on Safari 7.1. So instead, we toggle the class here in the update method.
-      this.toggleClass('indeterminate', indeterminate, this.$.primaryProgress);
-    },
-
-    _transformProgress: function(progress, ratio) {
-      var transform = 'scaleX(' + (ratio / 100) + ')';
-      progress.style.transform = progress.style.webkitTransform = transform;
-    },
-
-    _mainRatioChanged: function(ratio) {
-      this._transformProgress(this.$.primaryProgress, ratio);
-    },
-
-    _progressChanged: function(secondaryProgress, value, min, max) {
-      secondaryProgress = this._clampValue(secondaryProgress);
-      value = this._clampValue(value);
-
-      var secondaryRatio = this._calcRatio(secondaryProgress) * 100;
-      var mainRatio = this._calcRatio(value) * 100;
-
-      this._setSecondaryRatio(secondaryRatio);
-      this._transformProgress(this.$.secondaryProgress, secondaryRatio);
-      this._transformProgress(this.$.primaryProgress, mainRatio);
-
-      this.secondaryProgress = secondaryProgress;
-
-      this.setAttribute('aria-valuenow', value);
-      this.setAttribute('aria-valuemin', min);
-      this.setAttribute('aria-valuemax', max);
-    },
-
-    _disabledChanged: function(disabled) {
-      this.setAttribute('aria-disabled', disabled ? 'true' : 'false');
-    },
-
-    _hideSecondaryProgress: function(secondaryRatio) {
-      return secondaryRatio === 0;
+      'role': 'menu',
+      'tabindex': '0'
+    },
+
+    observers: [
+      '_updateMultiselectable(multi)'
+    ],
+
+    listeners: {
+      'focus': '_onFocus',
+      'keydown': '_onKeydown',
+      'iron-items-changed': '_onIronItemsChanged'
+    },
+
+    keyBindings: {
+      'up': '_onUpKey',
+      'down': '_onDownKey',
+      'esc': '_onEscKey',
+      'shift+tab:keydown': '_onShiftTabDown'
+    },
+
+    attached: function() {
+      this._resetTabindices();
+    },
+
+    /**
+     * Selects the given value. If the `multi` property is true, then the selected state of the
+     * `value` will be toggled; otherwise the `value` will be selected.
+     *
+     * @param {string|number} value the value to select.
+     */
+    select: function(value) {
+      // Cancel automatically focusing a default item if the menu received focus
+      // through a user action selecting a particular item.
+      if (this._defaultFocusAsync) {
+        this.cancelAsync(this._defaultFocusAsync);
+        this._defaultFocusAsync = null;
+      }
+      var item = this._valueToItem(value);
+      if (item && item.hasAttribute('disabled')) return;
+      this._setFocusedItem(item);
+      Polymer.IronMultiSelectableBehaviorImpl.select.apply(this, arguments);
+    },
+
+    /**
+     * Resets all tabindex attributes to the appropriate value based on the
+     * current selection state. The appropriate value is `0` (focusable) for
+     * the default selected item, and `-1` (not keyboard focusable) for all
+     * other items.
+     */
+    _resetTabindices: function() {
+      var selectedItem = this.multi ? (this.selectedItems && this.selectedItems[0]) : this.selectedItem;
+
+      this.items.forEach(function(item) {
+        item.setAttribute('tabindex', item === selectedItem ? '0' : '-1');
+      }, this);
+    },
+
+    /**
+     * Sets appropriate ARIA based on whether or not the menu is meant to be
+     * multi-selectable.
+     *
+     * @param {boolean} multi True if the menu should be multi-selectable.
+     */
+    _updateMultiselectable: function(multi) {
+      if (multi) {
+        this.setAttribute('aria-multiselectable', 'true');
+      } else {
+        this.removeAttribute('aria-multiselectable');
+      }
+    },
+
+    /**
+     * Given a KeyboardEvent, this method will focus the appropriate item in the
+     * menu (if there is a relevant item, and it is possible to focus it).
+     *
+     * @param {KeyboardEvent} event A KeyboardEvent.
+     */
+    _focusWithKeyboardEvent: function(event) {
+      for (var i = 0, item; item = this.items[i]; i++) {
+        var attr = this.attrForItemTitle || 'textContent';
+        var title = item[attr] || item.getAttribute(attr);
+
+        if (!item.hasAttribute('disabled') && title &&
+            title.trim().charAt(0).toLowerCase() === String.fromCharCode(event.keyCode).toLowerCase()) {
+          this._setFocusedItem(item);
+          break;
+        }
+      }
+    },
+
+    /**
+     * Focuses the previous item (relative to the currently focused item) in the
+     * menu, disabled items will be skipped.
+     * Loop until length + 1 to handle case of single item in menu.
+     */
+    _focusPrevious: function() {
+      var length = this.items.length;
+      var curFocusIndex = Number(this.indexOf(this.focusedItem));
+      for (var i = 1; i < length + 1; i++) {
+        var item = this.items[(curFocusIndex - i + length) % length];
+        if (!item.hasAttribute('disabled')) {
+          this._setFocusedItem(item);
+          return;
+        }
+      }
+    },
+
+    /**
+     * Focuses the next item (relative to the currently focused item) in the
+     * menu, disabled items will be skipped.
+     * Loop until length + 1 to handle case of single item in menu.
+     */
+    _focusNext: function() {
+      var length = this.items.length;
+      var curFocusIndex = Number(this.indexOf(this.focusedItem));
+      for (var i = 1; i < length + 1; i++) {
+        var item = this.items[(curFocusIndex + i) % length];
+        if (!item.hasAttribute('disabled')) {
+          this._setFocusedItem(item);
+          return;
+        }
+      }
+    },
+
+    /**
+     * Mutates items in the menu based on provided selection details, so that
+     * all items correctly reflect selection state.
+     *
+     * @param {Element} item An item in the menu.
+     * @param {boolean} isSelected True if the item should be shown in a
+     * selected state, otherwise false.
+     */
+    _applySelection: function(item, isSelected) {
+      if (isSelected) {
+        item.setAttribute('aria-selected', 'true');
+      } else {
+        item.removeAttribute('aria-selected');
+      }
+      Polymer.IronSelectableBehavior._applySelection.apply(this, arguments);
+    },
+
+    /**
+     * Discretely updates tabindex values among menu items as the focused item
+     * changes.
+     *
+     * @param {Element} focusedItem The element that is currently focused.
+     * @param {?Element} old The last element that was considered focused, if
+     * applicable.
+     */
+    _focusedItemChanged: function(focusedItem, old) {
+      old && old.setAttribute('tabindex', '-1');
+      if (focusedItem) {
+        focusedItem.setAttribute('tabindex', '0');
+        focusedItem.focus();
+      }
+    },
+
+    /**
+     * A handler that responds to mutation changes related to the list of items
+     * in the menu.
+     *
+     * @param {CustomEvent} event An event containing mutation records as its
+     * detail.
+     */
+    _onIronItemsChanged: function(event) {
+      if (event.detail.addedNodes.length) {
+        this._resetTabindices();
+      }
+    },
+
+    /**
+     * Handler that is called when a shift+tab keypress is detected by the menu.
+     *
+     * @param {CustomEvent} event A key combination event.
+     */
+    _onShiftTabDown: function(event) {
+      var oldTabIndex = this.getAttribute('tabindex');
+
+      Polymer.IronMenuBehaviorImpl._shiftTabPressed = true;
+
+      this._setFocusedItem(null);
+
+      this.setAttribute('tabindex', '-1');
+
+      this.async(function() {
+        this.setAttribute('tabindex', oldTabIndex);
+        Polymer.IronMenuBehaviorImpl._shiftTabPressed = false;
+        // NOTE(cdata): polymer/polymer#1305
+      }, 1);
+    },
+
+    /**
+     * Handler that is called when the menu receives focus.
+     *
+     * @param {FocusEvent} event A focus event.
+     */
+    _onFocus: function(event) {
+      if (Polymer.IronMenuBehaviorImpl._shiftTabPressed) {
+        // do not focus the menu itself
+        return;
+      }
+
+      // Do not focus the selected tab if the deepest target is part of the
+      // menu element's local DOM and is focusable.
+      var rootTarget = /** @type {?HTMLElement} */(
+          Polymer.dom(event).rootTarget);
+      if (rootTarget !== this && typeof rootTarget.tabIndex !== "undefined" && !this.isLightDescendant(rootTarget)) {
+        return;
+      }
+
+      // clear the cached focus item
+      this._defaultFocusAsync = this.async(function() {
+        // focus the selected item when the menu receives focus, or the first item
+        // if no item is selected
+        var selectedItem = this.multi ? (this.selectedItems && this.selectedItems[0]) : this.selectedItem;
+
+        this._setFocusedItem(null);
+
+        if (selectedItem) {
+          this._setFocusedItem(selectedItem);
+        } else if (this.items[0]) {
+          // We find the first none-disabled item (if one exists)
+          this._focusNext();
+        }
+      });
+    },
+
+    /**
+     * Handler that is called when the up key is pressed.
+     *
+     * @param {CustomEvent} event A key combination event.
+     */
+    _onUpKey: function(event) {
+      // up and down arrows moves the focus
+      this._focusPrevious();
+      event.detail.keyboardEvent.preventDefault();
+    },
+
+    /**
+     * Handler that is called when the down key is pressed.
+     *
+     * @param {CustomEvent} event A key combination event.
+     */
+    _onDownKey: function(event) {
+      this._focusNext();
+      event.detail.keyboardEvent.preventDefault();
+    },
+
+    /**
+     * Handler that is called when the esc key is pressed.
+     *
+     * @param {CustomEvent} event A key combination event.
+     */
+    _onEscKey: function(event) {
+      // esc blurs the control
+      this.focusedItem.blur();
+    },
+
+    /**
+     * Handler that is called when a keydown event is detected.
+     *
+     * @param {KeyboardEvent} event A keyboard event.
+     */
+    _onKeydown: function(event) {
+      if (!this.keyboardEventMatchesKeys(event, 'up down esc')) {
+        // all other keys focus the menu item starting with that character
+        this._focusWithKeyboardEvent(event);
+      }
+      event.stopPropagation();
+    },
+
+    // override _activateHandler
+    _activateHandler: function(event) {
+      Polymer.IronSelectableBehavior._activateHandler.call(this, event);
+      event.stopPropagation();
     }
-  });
+  };
+
+  Polymer.IronMenuBehaviorImpl._shiftTabPressed = false;
+
+  /** @polymerBehavior Polymer.IronMenuBehavior */
+  Polymer.IronMenuBehavior = [
+    Polymer.IronMultiSelectableBehavior,
+    Polymer.IronA11yKeysBehavior,
+    Polymer.IronMenuBehaviorImpl
+  ];
+/**
+   * `Polymer.IronMenubarBehavior` implements accessible menubar behavior.
+   *
+   * @polymerBehavior Polymer.IronMenubarBehavior
+   */
+  Polymer.IronMenubarBehaviorImpl = {
+
+    hostAttributes: {
+      'role': 'menubar'
+    },
+
+    keyBindings: {
+      'left': '_onLeftKey',
+      'right': '_onRightKey'
+    },
+
+    _onUpKey: function(event) {
+      this.focusedItem.click();
+      event.detail.keyboardEvent.preventDefault();
+    },
+
+    _onDownKey: function(event) {
+      this.focusedItem.click();
+      event.detail.keyboardEvent.preventDefault();
+    },
+
+    get _isRTL() {
+      return window.getComputedStyle(this)['direction'] === 'rtl';
+    },
+
+    _onLeftKey: function(event) {
+      if (this._isRTL) {
+        this._focusNext();
+      } else {
+        this._focusPrevious();
+      }
+      event.detail.keyboardEvent.preventDefault();
+    },
+
+    _onRightKey: function(event) {
+      if (this._isRTL) {
+        this._focusPrevious();
+      } else {
+        this._focusNext();
+      }
+      event.detail.keyboardEvent.preventDefault();
+    },
+
+    _onKeydown: function(event) {
+      if (this.keyboardEventMatchesKeys(event, 'up down left right esc')) {
+        return;
+      }
+
+      // all other keys focus the menu item starting with that character
+      this._focusWithKeyboardEvent(event);
+    }
+
+  };
+
+  /** @polymerBehavior Polymer.IronMenubarBehavior */
+  Polymer.IronMenubarBehavior = [
+    Polymer.IronMenuBehavior,
+    Polymer.IronMenubarBehaviorImpl
+  ];
 /**
    * The `iron-iconset-svg` element allows users to define their own icon sets
    * that contain svg icons. The svg icon elements should be children of the
    * `iron-iconset-svg` element. Multiple icons should be given distinct id's.
    *
    * Using svg elements to create icons has a few advantages over traditional
    * bitmap graphics like jpg or png. Icons that use svg are vector based so
    * they are resolution independent and should look good on any device. They
    * are stylable via css. Icons can be themed, colorized, and even animated.
    *
@@ skipping 159 matching lines @@
         // TODO(dfreedm): `pointer-events: none` works around https://crbug.com/370136
         // TODO(sjmiles): inline style may not be ideal, but avoids requiring a shadow-root
         svg.style.cssText = 'pointer-events: none; display: block; width: 100%; height: 100%;';
         svg.appendChild(content).removeAttribute('id');
         return svg;
       }
       return null;
     }
 
   });
+Polymer({
+      is: 'paper-tabs',
+
+      behaviors: [
+        Polymer.IronResizableBehavior,
+        Polymer.IronMenubarBehavior
+      ],
+
+      properties: {
+        /**
+         * If true, ink ripple effect is disabled. When this property is changed,
+         * all descendant `<paper-tab>` elements have their `noink` property
+         * changed to the new value as well.
+         */
+        noink: {
+          type: Boolean,
+          value: false,
+          observer: '_noinkChanged'
+        },
+
+        /**
+         * If true, the bottom bar to indicate the selected tab will not be shown.
+         */
+        noBar: {
+          type: Boolean,
+          value: false
+        },
+
+        /**
+         * If true, the slide effect for the bottom bar is disabled.
+         */
+        noSlide: {
+          type: Boolean,
+          value: false
+        },
+
+        /**
+         * If true, tabs are scrollable and the tab width is based on the label width.
+         */
+        scrollable: {
+          type: Boolean,
+          value: false
+        },
+
+        /**
+         * If true, tabs expand to fit their container. This currently only applies when
+         * scrollable is true.
+         */
+        fitContainer: {
+          type: Boolean,
+          value: false
+        },
+
+        /**
+         * If true, dragging on the tabs to scroll is disabled.
+         */
+        disableDrag: {
+          type: Boolean,
+          value: false
+        },
+
+        /**
+         * If true, scroll buttons (left/right arrow) will be hidden for scrollable tabs.
+         */
+        hideScrollButtons: {
+          type: Boolean,
+          value: false
+        },
+
+        /**
+         * If true, the tabs are aligned to bottom (the selection bar appears at the top).
+         */
+        alignBottom: {
+          type: Boolean,
+          value: false
+        },
+
+        selectable: {
+          type: String,
+          value: 'paper-tab'
+        },
+
+        /**
+         * If true, tabs are automatically selected when focused using the
+         * keyboard.
+         */
+        autoselect: {
+          type: Boolean,
+          value: false
+        },
+
+        /**
+         * The delay (in milliseconds) between when the user stops interacting
+         * with the tabs through the keyboard and when the focused item is
+         * automatically selected (if `autoselect` is true).
+         */
+        autoselectDelay: {
+          type: Number,
+          value: 0
+        },
+
+        _step: {
+          type: Number,
+          value: 10
+        },
+
+        _holdDelay: {
+          type: Number,
+          value: 1
+        },
+
+        _leftHidden: {
+          type: Boolean,
+          value: false
+        },
+
+        _rightHidden: {
+          type: Boolean,
+          value: false
+        },
+
+        _previousTab: {
+          type: Object
+        }
+      },
+
+      hostAttributes: {
+        role: 'tablist'
+      },
+
+      listeners: {
+        'iron-resize': '_onTabSizingChanged',
+        'iron-items-changed': '_onTabSizingChanged',
+        'iron-select': '_onIronSelect',
+        'iron-deselect': '_onIronDeselect'
+      },
+
+      keyBindings: {
+        'left:keyup right:keyup': '_onArrowKeyup'
+      },
+
+      created: function() {
+        this._holdJob = null;
+        this._pendingActivationItem = undefined;
+        this._pendingActivationTimeout = undefined;
+        this._bindDelayedActivationHandler = this._delayedActivationHandler.bind(this);
+        this.addEventListener('blur', this._onBlurCapture.bind(this), true);
+      },
+
+      ready: function() {
+        this.setScrollDirection('y', this.$.tabsContainer);
+      },
+
+      detached: function() {
+        this._cancelPendingActivation();
+      },
+
+      _noinkChanged: function(noink) {
+        var childTabs = Polymer.dom(this).querySelectorAll('paper-tab');
+        childTabs.forEach(noink ? this._setNoinkAttribute : this._removeNoinkAttribute);
+      },
+
+      _setNoinkAttribute: function(element) {
+        element.setAttribute('noink', '');
+      },
+
+      _removeNoinkAttribute: function(element) {
+        element.removeAttribute('noink');
+      },
+
+      _computeScrollButtonClass: function(hideThisButton, scrollable, hideScrollButtons) {
+        if (!scrollable || hideScrollButtons) {
+          return 'hidden';
+        }
+
+        if (hideThisButton) {
+          return 'not-visible';
+        }
+
+        return '';
+      },
+
+      _computeTabsContentClass: function(scrollable, fitContainer) {
+        return scrollable ? 'scrollable' + (fitContainer ? ' fit-container' : '') : ' fit-container';
+      },
+
+      _computeSelectionBarClass: function(noBar, alignBottom) {
+        if (noBar) {
+          return 'hidden';
+        } else if (alignBottom) {
+          return 'align-bottom';
+        }
+
+        return '';
+      },
+
+      // TODO(cdata): Add `track` response back in when gesture lands.
+
+      _onTabSizingChanged: function() {
+        this.debounce('_onTabSizingChanged', function() {
+          this._scroll();
+          this._tabChanged(this.selectedItem);
+        }, 10);
+      },
+
+      _onIronSelect: function(event) {
+        this._tabChanged(event.detail.item, this._previousTab);
+        this._previousTab = event.detail.item;
+        this.cancelDebouncer('tab-changed');
+      },
+
+      _onIronDeselect: function(event) {
+        this.debounce('tab-changed', function() {
+          this._tabChanged(null, this._previousTab);
+          this._previousTab = null;
+        // See polymer/polymer#1305
+        }, 1);
+      },
+
+      _activateHandler: function() {
+        // Cancel item activations scheduled by keyboard events when any other
+        // action causes an item to be activated (e.g. clicks).
+        this._cancelPendingActivation();
+
+        Polymer.IronMenuBehaviorImpl._activateHandler.apply(this, arguments);
+      },
+
+      /**
+       * Activates an item after a delay (in milliseconds).
+       */
+      _scheduleActivation: function(item, delay) {
+        this._pendingActivationItem = item;
+        this._pendingActivationTimeout = this.async(
+            this._bindDelayedActivationHandler, delay);
+      },
+
+      /**
+       * Activates the last item given to `_scheduleActivation`.
+       */
+      _delayedActivationHandler: function() {
+        var item = this._pendingActivationItem;
+        this._pendingActivationItem = undefined;
+        this._pendingActivationTimeout = undefined;
+        item.fire(this.activateEvent, null, {
+          bubbles: true,
+          cancelable: true
+        });
+      },
+
+      /**
+       * Cancels a previously scheduled item activation made with
+       * `_scheduleActivation`.
+       */
+      _cancelPendingActivation: function() {
+        if (this._pendingActivationTimeout !== undefined) {
+          this.cancelAsync(this._pendingActivationTimeout);
+          this._pendingActivationItem = undefined;
+          this._pendingActivationTimeout = undefined;
+        }
+      },
+
+      _onArrowKeyup: function(event) {
+        if (this.autoselect) {
+          this._scheduleActivation(this.focusedItem, this.autoselectDelay);
+        }
+      },
+
+      _onBlurCapture: function(event) {
+        // Cancel a scheduled item activation (if any) when that item is
+        // blurred.
+        if (event.target === this._pendingActivationItem) {
+          this._cancelPendingActivation();
+        }
+      },
+
+      get _tabContainerScrollSize () {
+        return Math.max(
+          0,
+          this.$.tabsContainer.scrollWidth -
+            this.$.tabsContainer.offsetWidth
+        );
+      },
+
+      _scroll: function(e, detail) {
+        if (!this.scrollable) {
+          return;
+        }
+
+        var ddx = (detail && -detail.ddx) || 0;
+        this._affectScroll(ddx);
+      },
+
+      _down: function(e) {
+        // go one beat async to defeat IronMenuBehavior
+        // autorefocus-on-no-selection timeout
+        this.async(function() {
+          if (this._defaultFocusAsync) {
+            this.cancelAsync(this._defaultFocusAsync);
+            this._defaultFocusAsync = null;
+          }
+        }, 1);
+      },
+
+      _affectScroll: function(dx) {
+        this.$.tabsContainer.scrollLeft += dx;
+
+        var scrollLeft = this.$.tabsContainer.scrollLeft;
+
+        this._leftHidden = scrollLeft === 0;
+        this._rightHidden = scrollLeft === this._tabContainerScrollSize;
+      },
+
+      _onLeftScrollButtonDown: function() {
+        this._scrollToLeft();
+        this._holdJob = setInterval(this._scrollToLeft.bind(this), this._holdDelay);
+      },
+
+      _onRightScrollButtonDown: function() {
+        this._scrollToRight();
+        this._holdJob = setInterval(this._scrollToRight.bind(this), this._holdDelay);
+      },
+
+      _onScrollButtonUp: function() {
+        clearInterval(this._holdJob);
+        this._holdJob = null;
+      },
+
+      _scrollToLeft: function() {
+        this._affectScroll(-this._step);
+      },
+
+      _scrollToRight: function() {
+        this._affectScroll(this._step);
+      },
+
+      _tabChanged: function(tab, old) {
+        if (!tab) {
+          // Remove the bar without animation.
+          this.$.selectionBar.classList.remove('expand');
+          this.$.selectionBar.classList.remove('contract');
+          this._positionBar(0, 0);
+          return;
+        }
+
+        var r = this.$.tabsContent.getBoundingClientRect();
+        var w = r.width;
+        var tabRect = tab.getBoundingClientRect();
+        var tabOffsetLeft = tabRect.left - r.left;
+
+        this._pos = {
+          width: this._calcPercent(tabRect.width, w),
+          left: this._calcPercent(tabOffsetLeft, w)
+        };
+
+        if (this.noSlide || old == null) {
+          // Position the bar without animation.
+          this.$.selectionBar.classList.remove('expand');
+          this.$.selectionBar.classList.remove('contract');
+          this._positionBar(this._pos.width, this._pos.left);
+          return;
+        }
+
+        var oldRect = old.getBoundingClientRect();
+        var oldIndex = this.items.indexOf(old);
+        var index = this.items.indexOf(tab);
+        var m = 5;
+
+        // bar animation: expand
+        this.$.selectionBar.classList.add('expand');
+
+        var moveRight = oldIndex < index;
+        var isRTL = this._isRTL;
+        if (isRTL) {
+          moveRight = !moveRight;
+        }
+
+        if (moveRight) {
+          this._positionBar(this._calcPercent(tabRect.left + tabRect.width - oldRect.left, w) - m,
+              this._left);
+        } else {
+          this._positionBar(this._calcPercent(oldRect.left + oldRect.width - tabRect.left, w) - m,
+              this._calcPercent(tabOffsetLeft, w) + m);
+        }
+
+        if (this.scrollable) {
+          this._scrollToSelectedIfNeeded(tabRect.width, tabOffsetLeft);
+        }
+      },
+
+      _scrollToSelectedIfNeeded: function(tabWidth, tabOffsetLeft) {
+        var l = tabOffsetLeft - this.$.tabsContainer.scrollLeft;
+        if (l < 0) {
+          this.$.tabsContainer.scrollLeft += l;
+        } else {
+          l += (tabWidth - this.$.tabsContainer.offsetWidth);
+          if (l > 0) {
+            this.$.tabsContainer.scrollLeft += l;
+          }
+        }
+      },
+
+      _calcPercent: function(w, w0) {
+        return 100 * w / w0;
+      },
+
+      _positionBar: function(width, left) {
+        width = width || 0;
+        left = left || 0;
+
+        this._width = width;
+        this._left = left;
+        this.transform(
+            'translateX(' + left + '%) scaleX(' + (width / 100) + ')',
+            this.$.selectionBar);
+      },
+
+      _onBarTransitionEnd: function(e) {
+        var cl = this.$.selectionBar.classList;
+        // bar animation: expand -> contract
+        if (cl.contains('expand')) {
+          cl.remove('expand');
+          cl.add('contract');
+          this._positionBar(this._pos.width, this._pos.left);
+        // bar animation done
+        } else if (cl.contains('contract')) {
+          cl.remove('contract');
+        }
+      }
+    });
+(function() {
+      'use strict';
+
+      Polymer.IronA11yAnnouncer = Polymer({
+        is: 'iron-a11y-announcer',
+
+        properties: {
+
+          /**
+           * The value of mode is used to set the `aria-live` attribute
+           * for the element that will be announced. Valid values are: `off`,
+           * `polite` and `assertive`.
+           */
+          mode: {
+            type: String,
+            value: 'polite'
+          },
+
+          _text: {
+            type: String,
+            value: ''
+          }
+        },
+
+        created: function() {
+          if (!Polymer.IronA11yAnnouncer.instance) {
+            Polymer.IronA11yAnnouncer.instance = this;
+          }
+
+          document.body.addEventListener('iron-announce', this._onIronAnnounce.bind(this));
+        },
+
+        /**
+         * Cause a text string to be announced by screen readers.
+         *
+         * @param {string} text The text that should be announced.
+         */
+        announce: function(text) {
+          this._text = '';
+          this.async(function() {
+            this._text = text;
+          }, 100);
+        },
+
+        _onIronAnnounce: function(event) {
+          if (event.detail && event.detail.text) {
+            this.announce(event.detail.text);
+          }
+        }
+      });
+
+      Polymer.IronA11yAnnouncer.instance = null;
+
+      Polymer.IronA11yAnnouncer.requestAvailability = function() {
+        if (!Polymer.IronA11yAnnouncer.instance) {
+          Polymer.IronA11yAnnouncer.instance = document.createElement('iron-a11y-announcer');
+        }
+
+        document.body.appendChild(Polymer.IronA11yAnnouncer.instance);
+      };
+    })();
+/**
+   * Singleton IronMeta instance.
+   */
+  Polymer.IronValidatableBehaviorMeta = null;
+
+  /**
+   * `Use Polymer.IronValidatableBehavior` to implement an element that validates user input.
+   * Use the related `Polymer.IronValidatorBehavior` to add custom validation logic to an iron-input.
+   *
+   * By default, an `<iron-form>` element validates its fields when the user presses the submit button.
+   * To validate a form imperatively, call the form's `validate()` method, which in turn will
+   * call `validate()` on all its children. By using `Polymer.IronValidatableBehavior`, your
+   * custom element will get a public `validate()`, which
+   * will return the validity of the element, and a corresponding `invalid` attribute,
+   * which can be used for styling.
+   *
+   * To implement the custom validation logic of your element, you must override
+   * the protected `_getValidity()` method of this behaviour, rather than `validate()`.
+   * See [this](https://github.com/PolymerElements/iron-form/blob/master/demo/simple-element.html)
+   * for an example.
+   *
+   * ### Accessibility
+   *
+   * Changing the `invalid` property, either manually or by calling `validate()` will update the
+   * `aria-invalid` attribute.
+   *
+   * @demo demo/index.html
+   * @polymerBehavior
+   */
+  Polymer.IronValidatableBehavior = {
+
+    properties: {
+
+      /**
+       * Name of the validator to use.
+       */
+      validator: {
+        type: String
+      },
+
+      /**
+       * True if the last call to `validate` is invalid.
+       */
+      invalid: {
+        notify: true,
+        reflectToAttribute: true,
+        type: Boolean,
+        value: false
+      },
+
+      /**
+       * This property is deprecated and should not be used. Use the global
+       * validator meta singleton, `Polymer.IronValidatableBehaviorMeta` instead.
+       */
+      _validatorMeta: {
+        type: Object
+      },
+
+      /**
+       * Namespace for this validator. This property is deprecated and should
+       * not be used. For all intents and purposes, please consider it a
+       * read-only, config-time property.
+       */
+      validatorType: {
+        type: String,
+        value: 'validator'
+      },
+
+      _validator: {
+        type: Object,
+        computed: '__computeValidator(validator)'
+      }
+    },
+
+    observers: [
+      '_invalidChanged(invalid)'
+    ],
+
+    registered: function() {
+      Polymer.IronValidatableBehaviorMeta = new Polymer.IronMeta({type: 'validator'});
+    },
+
+    _invalidChanged: function() {
+      if (this.invalid) {
+        this.setAttribute('aria-invalid', 'true');
+      } else {
+        this.removeAttribute('aria-invalid');
+      }
+    },
+
+    /**
+     * @return {boolean} True if the validator `validator` exists.
+     */
+    hasValidator: function() {
+      return this._validator != null;
+    },
+
+    /**
+     * Returns true if the `value` is valid, and updates `invalid`. If you want
+     * your element to have custom validation logic, do not override this method;
+     * override `_getValidity(value)` instead.
+
+     * @param {Object} value The value to be validated. By default, it is passed
+     * to the validator's `validate()` function, if a validator is set.
+     * @return {boolean} True if `value` is valid.
+     */
+    validate: function(value) {
+      this.invalid = !this._getValidity(value);
+      return !this.invalid;
+    },
+
+    /**
+     * Returns true if `value` is valid.  By default, it is passed
+     * to the validator's `validate()` function, if a validator is set. You
+     * should override this method if you want to implement custom validity
+     * logic for your element.
+     *
+     * @param {Object} value The value to be validated.
+     * @return {boolean} True if `value` is valid.
+     */
+
+    _getValidity: function(value) {
+      if (this.hasValidator()) {
+        return this._validator.validate(value);
+      }
+      return true;
+    },
+
+    __computeValidator: function() {
+      return Polymer.IronValidatableBehaviorMeta &&
+          Polymer.IronValidatableBehaviorMeta.byKey(this.validator);
+    }
+  };
+/*
+`<iron-input>` adds two-way binding and custom validators using `Polymer.IronValidatorBehavior`
+to `<input>`.
+
+### Two-way binding
+
+By default you can only get notified of changes to an `input`'s `value` due to user input:
+
+    <input value="{{myValue::input}}">
+
+`iron-input` adds the `bind-value` property that mirrors the `value` property, and can be used
+for two-way data binding. `bind-value` will notify if it is changed either by user input or by script.
+
+    <input is="iron-input" bind-value="{{myValue}}">
+
+### Custom validators
+
+You can use custom validators that implement `Polymer.IronValidatorBehavior` with `<iron-input>`.
+
+    <input is="iron-input" validator="my-custom-validator">
+
+### Stopping invalid input
+
+It may be desirable to only allow users to enter certain characters. You can use the
+`prevent-invalid-input` and `allowed-pattern` attributes together to accomplish this. This feature
+is separate from validation, and `allowed-pattern` does not affect how the input is validated.
+
+    \x3c!-- only allow characters that match [0-9] --\x3e
+    <input is="iron-input" prevent-invalid-input allowed-pattern="[0-9]">
+
+@hero hero.svg
+@demo demo/index.html
+*/
+
+  Polymer({
+
+    is: 'iron-input',
+
+    extends: 'input',
+
+    behaviors: [
+      Polymer.IronValidatableBehavior
+    ],
+
+    properties: {
+
+      /**
+       * Use this property instead of `value` for two-way data binding.
+       */
+      bindValue: {
+        observer: '_bindValueChanged',
+        type: String
+      },
+
+      /**
+       * Set to true to prevent the user from entering invalid input. If `allowedPattern` is set,
+       * any character typed by the user will be matched against that pattern, and rejected if it's not a match.
+       * Pasted input will have each character checked individually; if any character
+       * doesn't match `allowedPattern`, the entire pasted string will be rejected.
+       * If `allowedPattern` is not set, it will use the `type` attribute (only supported for `type=number`).
+       */
+      preventInvalidInput: {
+        type: Boolean
+      },
+
+      /**
+       * Regular expression that list the characters allowed as input.
+       * This pattern represents the allowed characters for the field; as the user inputs text,
+       * each individual character will be checked against the pattern (rather than checking
+       * the entire value as a whole). The recommended format should be a list of allowed characters;
+       * for example, `[a-zA-Z0-9.+-!;:]`
+       */
+      allowedPattern: {
+        type: String,
+        observer: "_allowedPatternChanged"
+      },
+
+      _previousValidInput: {
+        type: String,
+        value: ''
+      },
+
+      _patternAlreadyChecked: {
+        type: Boolean,
+        value: false
+      }
+
+    },
+
+    listeners: {
+      'input': '_onInput',
+      'keypress': '_onKeypress'
+    },
+
+    /** @suppress {checkTypes} */
+    registered: function() {
+      // Feature detect whether we need to patch dispatchEvent (i.e. on FF and IE).
+      if (!this._canDispatchEventOnDisabled()) {
+        this._origDispatchEvent = this.dispatchEvent;
+        this.dispatchEvent = this._dispatchEventFirefoxIE;
+      }
+    },
+
+    created: function() {
+      Polymer.IronA11yAnnouncer.requestAvailability();
+    },
+
+    _canDispatchEventOnDisabled: function() {
+      var input = document.createElement('input');
+      var canDispatch = false;
+      input.disabled = true;
+
+      input.addEventListener('feature-check-dispatch-event', function() {
+        canDispatch = true;
+      });
+
+      try {
+        input.dispatchEvent(new Event('feature-check-dispatch-event'));
+      } catch(e) {}
+
+      return canDispatch;
+    },
+
+    _dispatchEventFirefoxIE: function() {
+      // Due to Firefox bug, events fired on disabled form controls can throw
+      // errors; furthermore, neither IE nor Firefox will actually dispatch
+      // events from disabled form controls; as such, we toggle disable around
+      // the dispatch to allow notifying properties to notify
+      // See issue #47 for details
+      var disabled = this.disabled;
+      this.disabled = false;
+      this._origDispatchEvent.apply(this, arguments);
+      this.disabled = disabled;
+    },
+
+    get _patternRegExp() {
+      var pattern;
+      if (this.allowedPattern) {
+        pattern = new RegExp(this.allowedPattern);
+      } else {
+        switch (this.type) {
+          case 'number':
+            pattern = /[0-9.,e-]/;
+            break;
+        }
+      }
+      return pattern;
+    },
+
+    ready: function() {
+      this.bindValue = this.value;
+    },
+
+    /**
+     * @suppress {checkTypes}
+     */
+    _bindValueChanged: function() {
+      if (this.value !== this.bindValue) {
+        this.value = !(this.bindValue || this.bindValue === 0 || this.bindValue === false) ? '' : this.bindValue;
+      }
+      // manually notify because we don't want to notify until after setting value
+      this.fire('bind-value-changed', {value: this.bindValue});
+    },
+
+    _allowedPatternChanged: function() {
+      // Force to prevent invalid input when an `allowed-pattern` is set
+      this.preventInvalidInput = this.allowedPattern ? true : false;
+    },
+
+    _onInput: function() {
+      // Need to validate each of the characters pasted if they haven't
+      // been validated inside `_onKeypress` already.
+      if (this.preventInvalidInput && !this._patternAlreadyChecked) {
+        var valid = this._checkPatternValidity();
+        if (!valid) {
+          this._announceInvalidCharacter('Invalid string of characters not entered.');
+          this.value = this._previousValidInput;
+        }
+      }
+
+      this.bindValue = this.value;
+      this._previousValidInput = this.value;
+      this._patternAlreadyChecked = false;
+    },
+
+    _isPrintable: function(event) {
+      // What a control/printable character is varies wildly based on the browser.
+      // - most control characters (arrows, backspace) do not send a `keypress` event
+      //   in Chrome, but the *do* on Firefox
+      // - in Firefox, when they do send a `keypress` event, control chars have
+      //   a charCode = 0, keyCode = xx (for ex. 40 for down arrow)
+      // - printable characters always send a keypress event.
+      // - in Firefox, printable chars always have a keyCode = 0. In Chrome, the keyCode
+      //   always matches the charCode.
+      // None of this makes any sense.
+
+      // For these keys, ASCII code == browser keycode.
+      var anyNonPrintable =
+        (event.keyCode == 8)   ||  // backspace
+        (event.keyCode == 9)   ||  // tab
+        (event.keyCode == 13)  ||  // enter
+        (event.keyCode == 27);     // escape
+
+      // For these keys, make sure it's a browser keycode and not an ASCII code.
+      var mozNonPrintable =
+        (event.keyCode == 19)  ||  // pause
+        (event.keyCode == 20)  ||  // caps lock
+        (event.keyCode == 45)  ||  // insert
+        (event.keyCode == 46)  ||  // delete
+        (event.keyCode == 144) ||  // num lock
+        (event.keyCode == 145) ||  // scroll lock
+        (event.keyCode > 32 && event.keyCode < 41)   || // page up/down, end, home, arrows
+        (event.keyCode > 111 && event.keyCode < 124); // fn keys
+
+      return !anyNonPrintable && !(event.charCode == 0 && mozNonPrintable);
+    },
+
+    _onKeypress: function(event) {
+      if (!this.preventInvalidInput && this.type !== 'number') {
+        return;
+      }
+      var regexp = this._patternRegExp;
+      if (!regexp) {
+        return;
+      }
+
+      // Handle special keys and backspace
+      if (event.metaKey || event.ctrlKey || event.altKey)
+        return;
+
+      // Check the pattern either here or in `_onInput`, but not in both.
+      this._patternAlreadyChecked = true;
+
+      var thisChar = String.fromCharCode(event.charCode);
+      if (this._isPrintable(event) && !regexp.test(thisChar)) {
+        event.preventDefault();
+        this._announceInvalidCharacter('Invalid character ' + thisChar + ' not entered.');
+      }
+    },
+
+    _checkPatternValidity: function() {
+      var regexp = this._patternRegExp;
+      if (!regexp) {
+        return true;
+      }
+      for (var i = 0; i < this.value.length; i++) {
+        if (!regexp.test(this.value[i])) {
+          return false;
+        }
+      }
+      return true;
+    },
+
+    /**
+     * Returns true if `value` is valid. The validator provided in `validator` will be used first,
+     * then any constraints.
+     * @return {boolean} True if the value is valid.
+     */
+    validate: function() {
+      // First, check what the browser thinks. Some inputs (like type=number)
+      // behave weirdly and will set the value to "" if something invalid is
+      // entered, but will set the validity correctly.
+      var valid =  this.checkValidity();
+
+      // Only do extra checking if the browser thought this was valid.
+      if (valid) {
+        // Empty, required input is invalid
+        if (this.required && this.value === '') {
+          valid = false;
+        } else if (this.hasValidator()) {
+          valid = Polymer.IronValidatableBehavior.validate.call(this, this.value);
+        }
+      }
+
+      this.invalid = !valid;
+      this.fire('iron-input-validate');
+      return valid;
+    },
+
+    _announceInvalidCharacter: function(message) {
+      this.fire('iron-announce', { text: message });
+    }
+  });
+
+  /*
+  The `iron-input-validate` event is fired whenever `validate()` is called.
+  @event iron-input-validate
+  */
+Polymer({
+    is: 'paper-input-container',
+
+    properties: {
+      /**
+       * Set to true to disable the floating label. The label disappears when the input value is
+       * not null.
+       */
+      noLabelFloat: {
+        type: Boolean,
+        value: false
+      },
+
+      /**
+       * Set to true to always float the floating label.
+       */
+      alwaysFloatLabel: {
+        type: Boolean,
+        value: false
+      },
+
+      /**
+       * The attribute to listen for value changes on.
+       */
+      attrForValue: {
+        type: String,
+        value: 'bind-value'
+      },
+
+      /**
+       * Set to true to auto-validate the input value when it changes.
+       */
+      autoValidate: {
+        type: Boolean,
+        value: false
+      },
+
+      /**
+       * True if the input is invalid. This property is set automatically when the input value
+       * changes if auto-validating, or when the `iron-input-validate` event is heard from a child.
+       */
+      invalid: {
+        observer: '_invalidChanged',
+        type: Boolean,
+        value: false
+      },
+
+      /**
+       * True if the input has focus.
+       */
+      focused: {
+        readOnly: true,
+        type: Boolean,
+        value: false,
+        notify: true
+      },
+
+      _addons: {
+        type: Array
+        // do not set a default value here intentionally - it will be initialized lazily when a
+        // distributed child is attached, which may occur before configuration for this element
+        // in polyfill.
+      },
+
+      _inputHasContent: {
+        type: Boolean,
+        value: false
+      },
+
+      _inputSelector: {
+        type: String,
+        value: 'input,textarea,.paper-input-input'
+      },
+
+      _boundOnFocus: {
+        type: Function,
+        value: function() {
+          return this._onFocus.bind(this);
+        }
+      },
+
+      _boundOnBlur: {
+        type: Function,
+        value: function() {
+          return this._onBlur.bind(this);
+        }
+      },
+
+      _boundOnInput: {
+        type: Function,
+        value: function() {
+          return this._onInput.bind(this);
+        }
+      },
+
+      _boundValueChanged: {
+        type: Function,
+        value: function() {
+          return this._onValueChanged.bind(this);
+        }
+      }
+    },
+
+    listeners: {
+      'addon-attached': '_onAddonAttached',
+      'iron-input-validate': '_onIronInputValidate'
+    },
+
+    get _valueChangedEvent() {
+      return this.attrForValue + '-changed';
+    },
+
+    get _propertyForValue() {
+      return Polymer.CaseMap.dashToCamelCase(this.attrForValue);
+    },
+
+    get _inputElement() {
+      return Polymer.dom(this).querySelector(this._inputSelector);
+    },
+
+    get _inputElementValue() {
+      return this._inputElement[this._propertyForValue] || this._inputElement.value;
+    },
+
+    ready: function() {
+      if (!this._addons) {
+        this._addons = [];
+      }
+      this.addEventListener('focus', this._boundOnFocus, true);
+      this.addEventListener('blur', this._boundOnBlur, true);
+    },
+
+    attached: function() {
+      if (this.attrForValue) {
+        this._inputElement.addEventListener(this._valueChangedEvent, this._boundValueChanged);
+      } else {
+        this.addEventListener('input', this._onInput);
+      }
+
+      // Only validate when attached if the input already has a value.
+      if (this._inputElementValue != '') {
+        this._handleValueAndAutoValidate(this._inputElement);
+      } else {
+        this._handleValue(this._inputElement);
+      }
+    },
+
+    _onAddonAttached: function(event) {
+      if (!this._addons) {
+        this._addons = [];
+      }
+      var target = event.target;
+      if (this._addons.indexOf(target) === -1) {
+        this._addons.push(target);
+        if (this.isAttached) {
+          this._handleValue(this._inputElement);
+        }
+      }
+    },
+
+    _onFocus: function() {
+      this._setFocused(true);
+    },
+
+    _onBlur: function() {
+      this._setFocused(false);
+      this._handleValueAndAutoValidate(this._inputElement);
+    },
+
+    _onInput: function(event) {
+      this._handleValueAndAutoValidate(event.target);
+    },
+
+    _onValueChanged: function(event) {
+      this._handleValueAndAutoValidate(event.target);
+    },
+
+    _handleValue: function(inputElement) {
+      var value = this._inputElementValue;
+
+      // type="number" hack needed because this.value is empty until it's valid
+      if (value || value === 0 || (inputElement.type === 'number' && !inputElement.checkValidity())) {
+        this._inputHasContent = true;
+      } else {
+        this._inputHasContent = false;
+      }
+
+      this.updateAddons({
+        inputElement: inputElement,
+        value: value,
+        invalid: this.invalid
+      });
+    },
+
+    _handleValueAndAutoValidate: function(inputElement) {
+      if (this.autoValidate) {
+        var valid;
+        if (inputElement.validate) {
+          valid = inputElement.validate(this._inputElementValue);
+        } else {
+          valid = inputElement.checkValidity();
+        }
+        this.invalid = !valid;
+      }
+
+      // Call this last to notify the add-ons.
+      this._handleValue(inputElement);
+    },
+
+    _onIronInputValidate: function(event) {
+      this.invalid = this._inputElement.invalid;
+    },
+
+    _invalidChanged: function() {
+      if (this._addons) {
+        this.updateAddons({invalid: this.invalid});
+      }
+    },
+
+    /**
+     * Call this to update the state of add-ons.
+     * @param {Object} state Add-on state.
+     */
+    updateAddons: function(state) {
+      for (var addon, index = 0; addon = this._addons[index]; index++) {
+        addon.update(state);
+      }
+    },
+
+    _computeInputContentClass: function(noLabelFloat, alwaysFloatLabel, focused, invalid, _inputHasContent) {
+      var cls = 'input-content';
+      if (!noLabelFloat) {
+        var label = this.querySelector('label');
+
+        if (alwaysFloatLabel || _inputHasContent) {
+          cls += ' label-is-floating';
+          // If the label is floating, ignore any offsets that may have been
+          // applied from a prefix element.
+          this.$.labelAndInputContainer.style.position = 'static';
+
+          if (invalid) {
+            cls += ' is-invalid';
+          } else if (focused) {
+            cls += " label-is-highlighted";
+          }
+        } else {
+          // When the label is not floating, it should overlap the input element.
+          if (label) {
+            this.$.labelAndInputContainer.style.position = 'relative';
+          }
+        }
+      } else {
+        if (_inputHasContent) {
+          cls += ' label-is-hidden';
+        }
+      }
+      return cls;
+    },
+
+    _computeUnderlineClass: function(focused, invalid) {
+      var cls = 'underline';
+      if (invalid) {
+        cls += ' is-invalid';
+      } else if (focused) {
+        cls += ' is-highlighted'
+      }
+      return cls;
+    },
+
+    _computeAddOnContentClass: function(focused, invalid) {
+      var cls = 'add-on-content';
+      if (invalid) {
+        cls += ' is-invalid';
+      } else if (focused) {
+        cls += ' is-highlighted'
+      }
+      return cls;
+    }
+  });
+/** @polymerBehavior */
+  Polymer.PaperSpinnerBehavior = {
+
+    listeners: {
+      'animationend': '__reset',
+      'webkitAnimationEnd': '__reset'
+    },
+
+    properties: {
+      /**
+       * Displays the spinner.
+       */
+      active: {
+        type: Boolean,
+        value: false,
+        reflectToAttribute: true,
+        observer: '__activeChanged'
+      },
+
+      /**
+       * Alternative text content for accessibility support.
+       * If alt is present, it will add an aria-label whose content matches alt when active.
+       * If alt is not present, it will default to 'loading' as the alt value.
+       */
+      alt: {
+        type: String,
+        value: 'loading',
+        observer: '__altChanged'
+      },
+
+      __coolingDown: {
+        type: Boolean,
+        value: false
+      }
+    },
+
+    __computeContainerClasses: function(active, coolingDown) {
+      return [
+        active || coolingDown ? 'active' : '',
+        coolingDown ? 'cooldown' : ''
+      ].join(' ');
+    },
+
+    __activeChanged: function(active, old) {
+      this.__setAriaHidden(!active);
+      this.__coolingDown = !active && old;
+    },
+
+    __altChanged: function(alt) {
+      // user-provided `aria-label` takes precedence over prototype default
+      if (alt === this.getPropertyInfo('alt').value) {
+        this.alt = this.getAttribute('aria-label') || alt;
+      } else {
+        this.__setAriaHidden(alt==='');
+        this.setAttribute('aria-label', alt);
+      }
+    },
+
+    __setAriaHidden: function(hidden) {
+      var attr = 'aria-hidden';
+      if (hidden) {
+        this.setAttribute(attr, 'true');
+      } else {
+        this.removeAttribute(attr);
+      }
+    },
+
+    __reset: function() {
+      this.active = false;
+      this.__coolingDown = false;
+    }
+  };
+Polymer({
+      is: 'paper-spinner-lite',
+
+      behaviors: [
+        Polymer.PaperSpinnerBehavior
+      ]
+    });
+// 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.
+
+/**
+ * Implements an incremental search field which can be shown and hidden.
+ * Canonical implementation is <cr-search-field>.
+ * @polymerBehavior
+ */
+var CrSearchFieldBehavior = {
+  properties: {
+    label: {
+      type: String,
+      value: '',
+    },
+
+    clearLabel: {
+      type: String,
+      value: '',
+    },
+
+    showingSearch: {
+      type: Boolean,
+      value: false,
+      notify: true,
+      observer: 'showingSearchChanged_',
+      reflectToAttribute: true
+    },
+
+    /** @private */
+    lastValue_: {
+      type: String,
+      value: '',
+    },
+  },
+
+  /**
+   * @abstract
+   * @return {!HTMLInputElement} The input field element the behavior should
+   * use.
+   */
+  getSearchInput: function() {},
+
+  /**
+   * @return {string} The value of the search field.
+   */
+  getValue: function() {
+    return this.getSearchInput().value;
+  },
+
+  /**
+   * Sets the value of the search field.
+   * @param {string} value
+   */
+  setValue: function(value) {
+    // Use bindValue when setting the input value so that changes propagate
+    // correctly.
+    this.getSearchInput().bindValue = value;
+    this.onValueChanged_(value);
+  },
+
+  showAndFocus: function() {
+    this.showingSearch = true;
+    this.focus_();
+  },
+
+  /** @private */
+  focus_: function() {
+    this.getSearchInput().focus();
+  },
+
+  onSearchTermSearch: function() {
+    this.onValueChanged_(this.getValue());
+  },
+
+  /**
+   * Updates the internal state of the search field based on a change that has
+   * already happened.
+   * @param {string} newValue
+   * @private
+   */
+  onValueChanged_: function(newValue) {
+    if (newValue == this.lastValue_)
+      return;
+
+    this.fire('search-changed', newValue);
+    this.lastValue_ = newValue;
+  },
+
+  onSearchTermKeydown: function(e) {
+    if (e.key == 'Escape')
+      this.showingSearch = false;
+  },
+
+  /** @private */
+  showingSearchChanged_: function() {
+    if (this.showingSearch) {
+      this.focus_();
+      return;
+    }
+
+    this.setValue('');
+    this.getSearchInput().blur();
+  }
+};
+// 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.
+
+// TODO(tsergeant): Add tests for cr-toolbar-search-field.
+Polymer({
+  is: 'cr-toolbar-search-field',
+
+  behaviors: [CrSearchFieldBehavior],
+
+  properties: {
+    narrow: {
+      type: Boolean,
+      reflectToAttribute: true,
+    },
+
+    // Prompt text to display in the search field.
+    label: String,
+
+    // Tooltip to display on the clear search button.
+    clearLabel: String,
+
+    // When true, show a loading spinner to indicate that the backend is
+    // processing the search. Will only show if the search field is open.
+    spinnerActive: {
+      type: Boolean,
+      reflectToAttribute: true
+    },
+
+    /** @private */
+    hasSearchText_: Boolean,
+  },
+
+  listeners: {
+    'tap': 'showSearch_',
+    'searchInput.bind-value-changed': 'onBindValueChanged_',
+  },
+
+  /** @return {!HTMLInputElement} */
+  getSearchInput: function() {
+    return this.$.searchInput;
+  },
+
+  /** @return {boolean} */
+  isSearchFocused: function() {
+    return this.$.searchTerm.focused;
+  },
+
+  /**
+   * @param {boolean} narrow
+   * @return {number}
+   * @private
+   */
+  computeIconTabIndex_: function(narrow) {
+    return narrow ? 0 : -1;
+  },
+
+  /**
+   * @param {boolean} spinnerActive
+   * @param {boolean} showingSearch
+   * @return {boolean}
+   * @private
+   */
+  isSpinnerShown_: function(spinnerActive, showingSearch) {
+    return spinnerActive && showingSearch;
+  },
+
+  /** @private */
+  onInputBlur_: function() {
+    if (!this.hasSearchText_)
+      this.showingSearch = false;
+  },
+
+  /**
+   * Update the state of the search field whenever the underlying input value
+   * changes. Unlike onsearch or onkeypress, this is reliably called immediately
+   * after any change, whether the result of user input or JS modification.
+   * @private
+   */
+  onBindValueChanged_: function() {
+    var newValue = this.$.searchInput.bindValue;
+    this.hasSearchText_ = newValue != '';
+    if (newValue != '')
+      this.showingSearch = true;
+  },
+
+  /**
+   * @param {Event} e
+   * @private
+   */
+  showSearch_: function(e) {
+    if (e.target != this.$.clearSearch)
+      this.showingSearch = true;
+  },
+
+  /**
+   * @param {Event} e
+   * @private
+   */
+  hideSearch_: function(e) {
+    this.showingSearch = false;
+    e.stopPropagation();
+  }
+});
+// 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: {
+    // Name to display in the toolbar, in titlecase.
+    pageName: String,
+
+    // Prompt text to display in the search field.
+    searchPrompt: String,
+
+    // Tooltip to display on the clear search button.
+    clearLabel: String,
+
+    // Value is proxied through to cr-toolbar-search-field. When true,
+    // the search field will show a processing spinner.
+    spinnerActive: Boolean,
+
+    // Controls whether the menu button is shown at the start of the menu.
+    showMenu: {
+      type: Boolean,
+      reflectToAttribute: true,
+      value: true
+    },
+
+    /** @private */
+    narrow_: {
+      type: Boolean,
+      reflectToAttribute: true
+    },
+
+    /** @private */
+    showingSearch_: {
+      type: Boolean,
+      reflectToAttribute: true,
+    },
+  },
+
+  /** @return {!CrToolbarSearchFieldElement} */
+  getSearchField: function() {
+    return this.$.search;
+  },
+
+  /** @private */
+  onMenuTap_: function(e) {
+    this.fire('cr-menu-tap');
+  }
+});
 // 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 Item = Polymer({
-    is: 'downloads-item',
-
-    properties: {
-      data: {
-        type: Object,
-      },
-
-      completelyOnDisk_: {
-        computed: 'computeCompletelyOnDisk_(' +
-            'data.state, data.file_externally_removed)',
-        type: Boolean,
-        value: true,
-      },
-
-      controlledBy_: {
-        computed: 'computeControlledBy_(data.by_ext_id, data.by_ext_name)',
-        type: String,
-        value: '',
-      },
-
-      isActive_: {
-        computed: 'computeIsActive_(' +
-            'data.state, data.file_externally_removed)',
-        type: Boolean,
-        value: true,
-      },
-
-      isDangerous_: {
-        computed: 'computeIsDangerous_(data.state)',
-        type: Boolean,
-        value: false,
-      },
-
-      isMalware_: {
-        computed: 'computeIsMalware_(isDangerous_, data.danger_type)',
-        type: Boolean,
-        value: false,
-      },
-
-      isInProgress_: {
-        computed: 'computeIsInProgress_(data.state)',
-        type: Boolean,
-        value: false,
-      },
-
-      pauseOrResumeText_: {
-        computed: 'computePauseOrResumeText_(isInProgress_, data.resume)',
-        type: String,
-      },
-
-      showCancel_: {
-        computed: 'computeShowCancel_(data.state)',
-        type: Boolean,
-        value: false,
-      },
-
-      showProgress_: {
-        computed: 'computeShowProgress_(showCancel_, data.percent)',
-        type: Boolean,
-        value: false,
-      },
-    },
-
-    observers: [
-      // TODO(dbeam): this gets called way more when I observe data.by_ext_id
-      // and data.by_ext_name directly. Why?
-      'observeControlledBy_(controlledBy_)',
-      'observeIsDangerous_(isDangerous_, data)',
-    ],
-
-    ready: function() {
-      this.content = this.$.content;
-    },
-
-    /** @private */
-    computeClass_: function() {
-      var classes = [];
-
-      if (this.isActive_)
-        classes.push('is-active');
-
-      if (this.isDangerous_)
-        classes.push('dangerous');
-
-      if (this.showProgress_)
-        classes.push('show-progress');
-
-      return classes.join(' ');
-    },
-
-    /** @private */
-    computeCompletelyOnDisk_: function() {
-      return this.data.state == downloads.States.COMPLETE &&
-             !this.data.file_externally_removed;
-    },
-
-    /** @private */
-    computeControlledBy_: function() {
-      if (!this.data.by_ext_id || !this.data.by_ext_name)
-        return '';
-
-      var url = 'chrome://extensions#' + this.data.by_ext_id;
-      var name = this.data.by_ext_name;
-      return loadTimeData.getStringF('controlledByUrl', url, name);
-    },
-
-    /** @private */
-    computeDangerIcon_: function() {
-      if (!this.isDangerous_)
-        return '';
-
-      switch (this.data.danger_type) {
-        case downloads.DangerType.DANGEROUS_CONTENT:
-        case downloads.DangerType.DANGEROUS_HOST:
-        case downloads.DangerType.DANGEROUS_URL:
-        case downloads.DangerType.POTENTIALLY_UNWANTED:
-        case downloads.DangerType.UNCOMMON_CONTENT:
-          return 'downloads:remove-circle';
-        default:
-          return 'cr:warning';
-      }
-    },
-
-    /** @private */
-    computeDate_: function() {
-      assert(typeof this.data.hideDate == 'boolean');
-      if (this.data.hideDate)
-        return '';
-      return assert(this.data.since_string || this.data.date_string);
-    },
-
-    /** @private */
-    computeDescription_: function() {
-      var data = this.data;
-
-      switch (data.state) {
-        case downloads.States.DANGEROUS:
-          var fileName = data.file_name;
-          switch (data.danger_type) {
-            case downloads.DangerType.DANGEROUS_FILE:
-              return loadTimeData.getStringF('dangerFileDesc', fileName);
-            case downloads.DangerType.DANGEROUS_URL:
-              return loadTimeData.getString('dangerUrlDesc');
-            case downloads.DangerType.DANGEROUS_CONTENT:  // Fall through.
-            case downloads.DangerType.DANGEROUS_HOST:
-              return loadTimeData.getStringF('dangerContentDesc', fileName);
-            case downloads.DangerType.UNCOMMON_CONTENT:
-              return loadTimeData.getStringF('dangerUncommonDesc', fileName);
-            case downloads.DangerType.POTENTIALLY_UNWANTED:
-              return loadTimeData.getStringF('dangerSettingsDesc', fileName);
-          }
-          break;
-
-        case downloads.States.IN_PROGRESS:
-        case downloads.States.PAUSED:  // Fallthrough.
-          return data.progress_status_text;
-      }
-
-      return '';
-    },
-
-    /** @private */
-    computeIsActive_: function() {
-      return this.data.state != downloads.States.CANCELLED &&
-             this.data.state != downloads.States.INTERRUPTED &&
-             !this.data.file_externally_removed;
-    },
-
-    /** @private */
-    computeIsDangerous_: function() {
-      return this.data.state == downloads.States.DANGEROUS;
-    },
-
-    /** @private */
-    computeIsInProgress_: function() {
-      return this.data.state == downloads.States.IN_PROGRESS;
-    },
-
-    /** @private */
-    computeIsMalware_: function() {
-      return this.isDangerous_ &&
-          (this.data.danger_type == downloads.DangerType.DANGEROUS_CONTENT ||
-           this.data.danger_type == downloads.DangerType.DANGEROUS_HOST ||
-           this.data.danger_type == downloads.DangerType.DANGEROUS_URL ||
-           this.data.danger_type == downloads.DangerType.POTENTIALLY_UNWANTED);
-    },
-
-    /** @private */
-    computePauseOrResumeText_: function() {
-      if (this.isInProgress_)
-        return loadTimeData.getString('controlPause');
-      if (this.data.resume)
-        return loadTimeData.getString('controlResume');
-      return '';
-    },
-
-    /** @private */
-    computeRemoveStyle_: function() {
-      var canDelete = loadTimeData.getBoolean('allowDeletingHistory');
-      var hideRemove = this.isDangerous_ || this.showCancel_ || !canDelete;
-      return hideRemove ? 'visibility: hidden' : '';
-    },
-
-    /** @private */
-    computeShowCancel_: function() {
-      return this.data.state == downloads.States.IN_PROGRESS ||
-             this.data.state == downloads.States.PAUSED;
-    },
-
-    /** @private */
-    computeShowProgress_: function() {
-      return this.showCancel_ && this.data.percent >= -1;
-    },
-
-    /** @private */
-    computeTag_: function() {
-      switch (this.data.state) {
-        case downloads.States.CANCELLED:
-          return loadTimeData.getString('statusCancelled');
-
-        case downloads.States.INTERRUPTED:
-          return this.data.last_reason_text;
-
-        case downloads.States.COMPLETE:
-          return this.data.file_externally_removed ?
-              loadTimeData.getString('statusRemoved') : '';
-      }
-
-      return '';
-    },
-
-    /** @private */
-    isIndeterminate_: function() {
-      return this.data.percent == -1;
-    },
-
-    /** @private */
-    observeControlledBy_: function() {
-      this.$['controlled-by'].innerHTML = this.controlledBy_;
-    },
-
-    /** @private */
-    observeIsDangerous_: function() {
-      if (!this.data)
-        return;
-
-      if (this.isDangerous_) {
-        this.$.url.removeAttribute('href');
-      } else {
-        this.$.url.href = assert(this.data.url);
-        var filePath = encodeURIComponent(this.data.file_path);
-        var scaleFactor = '?scale=' + window.devicePixelRatio + 'x';
-        this.$['file-icon'].src = 'chrome://fileicon/' + filePath + scaleFactor;
-      }
-    },
-
-    /** @private */
-    onCancelTap_: function() {
-      downloads.ActionService.getInstance().cancel(this.data.id);
-    },
-
-    /** @private */
-    onDiscardDangerousTap_: function() {
-      downloads.ActionService.getInstance().discardDangerous(this.data.id);
-    },
-
-    /**
-     * @private
-     * @param {Event} e
-     */
-    onDragStart_: function(e) {
-      e.preventDefault();
-      downloads.ActionService.getInstance().drag(this.data.id);
-    },
-
-    /**
-     * @param {Event} e
-     * @private
-     */
-    onFileLinkTap_: function(e) {
-      e.preventDefault();
-      downloads.ActionService.getInstance().openFile(this.data.id);
-    },
-
-    /** @private */
-    onPauseOrResumeTap_: function() {
-      if (this.isInProgress_)
-        downloads.ActionService.getInstance().pause(this.data.id);
-      else
-        downloads.ActionService.getInstance().resume(this.data.id);
-    },
-
-    /** @private */
-    onRemoveTap_: function() {
-      downloads.ActionService.getInstance().remove(this.data.id);
-    },
-
-    /** @private */
-    onRetryTap_: function() {
-      downloads.ActionService.getInstance().download(this.data.url);
-    },
-
-    /** @private */
-    onSaveDangerousTap_: function() {
-      downloads.ActionService.getInstance().saveDangerous(this.data.id);
-    },
-
-    /** @private */
-    onShowTap_: function() {
-      downloads.ActionService.getInstance().show(this.data.id);
-    },
-  });
-
-  return {Item: Item};
+Polymer({
+  is: 'history-toolbar',
+  properties: {
+    // Number of history items currently selected.
+    // TODO(calamity): bind this to
+    // listContainer.selectedItem.selectedPaths.length.
+    count: {
+      type: Number,
+      value: 0,
+      observer: 'changeToolbarView_'
+    },
+
+    // True if 1 or more history items are selected. When this value changes
+    // the background colour changes.
+    itemsSelected_: {
+      type: Boolean,
+      value: false,
+      reflectToAttribute: true
+    },
+
+    // The most recent term entered in the search field. Updated incrementally
+    // as the user types.
+    searchTerm: {
+      type: String,
+      notify: true,
+    },
+
+    // True if the backend is processing and a spinner should be shown in the
+    // toolbar.
+    spinnerActive: {
+      type: Boolean,
+      value: false
+    },
+
+    hasDrawer: {
+      type: Boolean,
+      observer: 'hasDrawerChanged_',
+      reflectToAttribute: true,
+    },
+
+    // Whether domain-grouped history is enabled.
+    isGroupedMode: {
+      type: Boolean,
+      reflectToAttribute: true,
+    },
+
+    // The period to search over. Matches BrowsingHistoryHandler::Range.
+    groupedRange: {
+      type: Number,
+      value: 0,
+      reflectToAttribute: true,
+      notify: true
+    },
+
+    // The start time of the query range.
+    queryStartTime: String,
+
+    // The end time of the query range.
+    queryEndTime: String,
+  },
+
+  /**
+   * Changes the toolbar background color depending on whether any history items
+   * are currently selected.
+   * @private
+   */
+  changeToolbarView_: function() {
+    this.itemsSelected_ = this.count > 0;
+  },
+
+  /**
+   * When changing the search term externally, update the search field to
+   * reflect the new search term.
+   * @param {string} search
+   */
+  setSearchTerm: function(search) {
+    if (this.searchTerm == search)
+      return;
+
+    this.searchTerm = search;
+    var searchField = /** @type {!CrToolbarElement} */(this.$['main-toolbar'])
+                          .getSearchField();
+    searchField.showAndFocus();
+    searchField.setValue(search);
+  },
+
+  /**
+   * @param {!CustomEvent} event
+   * @private
+   */
+  onSearchChanged_: function(event) {
+    this.searchTerm = /** @type {string} */ (event.detail);
+  },
+
+  onClearSelectionTap_: function() {
+    this.fire('unselect-all');
+  },
+
+  onDeleteTap_: function() {
+    this.fire('delete-selected');
+  },
+
+  get searchBar() {
+    return this.$['main-toolbar'].getSearchField();
+  },
+
+  showSearchField: function() {
+    /** @type {!CrToolbarElement} */(this.$['main-toolbar'])
+        .getSearchField()
+        .showAndFocus();
+  },
+
+  /**
+   * If the user is a supervised user the delete button is not shown.
+   * @private
+   */
+  deletingAllowed_: function() {
+    return loadTimeData.getBoolean('allowDeletingHistory');
+  },
+
+  numberOfItemsSelected_: function(count) {
+    return count > 0 ? loadTimeData.getStringF('itemsSelected', count) : '';
+  },
+
+  getHistoryInterval_: function(queryStartTime, queryEndTime) {
+    // TODO(calamity): Fix the format of these dates.
+    return loadTimeData.getStringF(
+      'historyInterval', queryStartTime, queryEndTime);
+  },
+
+  /** @private */
+  hasDrawerChanged_: function() {
+    this.updateStyles();
+  },
 });
-/** @polymerBehavior Polymer.PaperItemBehavior */
-  Polymer.PaperItemBehaviorImpl = {
-    hostAttributes: {
-      role: 'option',
-      tabindex: '0'
-    }
-  };
-
-  /** @polymerBehavior */
-  Polymer.PaperItemBehavior = [
-    Polymer.IronButtonState,
-    Polymer.IronControlState,
-    Polymer.PaperItemBehaviorImpl
-  ];
+// 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.
+
+/**
+ * @fileoverview 'cr-dialog' is a component for showing a modal dialog. If the
+ * dialog is closed via close(), a 'close' event is fired. If the dialog is
+ * canceled via cancel(), a 'cancel' event is fired followed by a 'close' event.
+ * Additionally clients can inspect the dialog's |returnValue| property inside
+ * the 'close' event listener to determine whether it was canceled or just
+ * closed, where a truthy value means success, and a falsy value means it was
+ * canceled.
+ */
 Polymer({
-      is: 'paper-item',
-
-      behaviors: [
-        Polymer.PaperItemBehavior
-      ]
-    });
-/**
-   * @param {!Function} selectCallback
-   * @constructor
-   */
-  Polymer.IronSelection = function(selectCallback) {
-    this.selection = [];
-    this.selectCallback = selectCallback;
-  };
-
-  Polymer.IronSelection.prototype = {
-
-    /**
-     * Retrieves the selected item(s).
-     *
-     * @method get
-     * @returns Returns the selected item(s). If the multi property is true,
-     * `get` will return an array, otherwise it will return
-     * the selected item or undefined if there is no selection.
-     */
-    get: function() {
-      return this.multi ? this.selection.slice() : this.selection[0];
-    },
-
-    /**
-     * Clears all the selection except the ones indicated.
-     *
-     * @method clear
-     * @param {Array} excludes items to be excluded.
-     */
-    clear: function(excludes) {
-      this.selection.slice().forEach(function(item) {
-        if (!excludes || excludes.indexOf(item) < 0) {
-          this.setItemSelected(item, false);
-        }
-      }, this);
-    },
-
-    /**
-     * Indicates if a given item is selected.
-     *
-     * @method isSelected
-     * @param {*} item The item whose selection state should be checked.
-     * @returns Returns true if `item` is selected.
-     */
-    isSelected: function(item) {
-      return this.selection.indexOf(item) >= 0;
-    },
-
-    /**
-     * Sets the selection state for a given item to either selected or deselected.
-     *
-     * @method setItemSelected
-     * @param {*} item The item to select.
-     * @param {boolean} isSelected True for selected, false for deselected.
-     */
-    setItemSelected: function(item, isSelected) {
-      if (item != null) {
-        if (isSelected !== this.isSelected(item)) {
-          // proceed to update selection only if requested state differs from current
-          if (isSelected) {
-            this.selection.push(item);
-          } else {
-            var i = this.selection.indexOf(item);
-            if (i >= 0) {
-              this.selection.splice(i, 1);
-            }
-          }
-          if (this.selectCallback) {
-            this.selectCallback(item, isSelected);
-          }
-        }
-      }
-    },
-
-    /**
-     * Sets the selection state for a given item. If the `multi` property
-     * is true, then the selected state of `item` will be toggled; otherwise
-     * the `item` will be selected.
-     *
-     * @method select
-     * @param {*} item The item to select.
-     */
-    select: function(item) {
-      if (this.multi) {
-        this.toggle(item);
-      } else if (this.get() !== item) {
-        this.setItemSelected(this.get(), false);
-        this.setItemSelected(item, true);
-      }
-    },
-
-    /**
-     * Toggles the selection state for `item`.
-     *
-     * @method toggle
-     * @param {*} item The item to toggle.
-     */
-    toggle: function(item) {
-      this.setItemSelected(item, !this.isSelected(item));
-    }
-
-  };
-/** @polymerBehavior */
-  Polymer.IronSelectableBehavior = {
-
-      /**
-       * Fired when iron-selector is activated (selected or deselected).
-       * It is fired before the selected items are changed.
-       * Cancel the event to abort selection.
-       *
-       * @event iron-activate
-       */
-
-      /**
-       * Fired when an item is selected
-       *
-       * @event iron-select
-       */
-
-      /**
-       * Fired when an item is deselected
-       *
-       * @event iron-deselect
-       */
-
-      /**
-       * Fired when the list of selectable items changes (e.g., items are
-       * added or removed). The detail of the event is a mutation record that
-       * describes what changed.
-       *
-       * @event iron-items-changed
-       */
-
-    properties: {
-
-      /**
-       * If you want to use an attribute value or property of an element for
-       * `selected` instead of the index, set this to the name of the attribute
-       * or property. Hyphenated values are converted to camel case when used to
-       * look up the property of a selectable element. Camel cased values are
-       * *not* converted to hyphenated values for attribute lookup. It's
-       * recommended that you provide the hyphenated form of the name so that
-       * selection works in both cases. (Use `attr-or-property-name` instead of
-       * `attrOrPropertyName`.)
-       */
-      attrForSelected: {
-        type: String,
-        value: null
-      },
-
-      /**
-       * Gets or sets the selected element. The default is to use the index of the item.
-       * @type {string|number}
-       */
-      selected: {
-        type: String,
-        notify: true
-      },
-
-      /**
-       * Returns the currently selected item.
-       *
-       * @type {?Object}
-       */
-      selectedItem: {
-        type: Object,
-        readOnly: true,
-        notify: true
-      },
-
-      /**
-       * The event that fires from items when they are selected. Selectable
-       * will listen for this event from items and update the selection state.
-       * Set to empty string to listen to no events.
-       */
-      activateEvent: {
-        type: String,
-        value: 'tap',
-        observer: '_activateEventChanged'
-      },
-
-      /**
-       * This is a CSS selector string.  If this is set, only items that match the CSS selector
-       * are selectable.
-       */
-      selectable: String,
-
-      /**
-       * The class to set on elements when selected.
-       */
-      selectedClass: {
-        type: String,
-        value: 'iron-selected'
-      },
-
-      /**
-       * The attribute to set on elements when selected.
-       */
-      selectedAttribute: {
-        type: String,
-        value: null
-      },
-
-      /**
-       * Default fallback if the selection based on selected with `attrForSelected`
-       * is not found.
-       */
-      fallbackSelection: {
-        type: String,
-        value: null
-      },
-
-      /**
-       * The list of items from which a selection can be made.
-       */
-      items: {
-        type: Array,
-        readOnly: true,
-        notify: true,
-        value: function() {
-          return [];
-        }
-      },
-
-      /**
-       * The set of excluded elements where the key is the `localName`
-       * of the element that will be ignored from the item list.
-       *
-       * @default {template: 1}
-       */
-      _excludedLocalNames: {
-        type: Object,
-        value: function() {
-          return {
-            'template': 1
-          };
-        }
-      }
-    },
-
-    observers: [
-      '_updateAttrForSelected(attrForSelected)',
-      '_updateSelected(selected)',
-      '_checkFallback(fallbackSelection)'
-    ],
-
-    created: function() {
-      this._bindFilterItem = this._filterItem.bind(this);
-      this._selection = new Polymer.IronSelection(this._applySelection.bind(this));
-    },
-
-    attached: function() {
-      this._observer = this._observeItems(this);
-      this._updateItems();
-      if (!this._shouldUpdateSelection) {
-        this._updateSelected();
-      }
-      this._addListener(this.activateEvent);
-    },
-
-    detached: function() {
-      if (this._observer) {
-        Polymer.dom(this).unobserveNodes(this._observer);
-      }
-      this._removeListener(this.activateEvent);
-    },
-
-    /**
-     * Returns the index of the given item.
-     *
-     * @method indexOf
-     * @param {Object} item
-     * @returns Returns the index of the item
-     */
-    indexOf: function(item) {
-      return this.items.indexOf(item);
-    },
-
-    /**
-     * Selects the given value.
-     *
-     * @method select
-     * @param {string|number} value the value to select.
-     */
-    select: function(value) {
-      this.selected = value;
-    },
-
-    /**
-     * Selects the previous item.
-     *
-     * @method selectPrevious
-     */
-    selectPrevious: function() {
-      var length = this.items.length;
-      var index = (Number(this._valueToIndex(this.selected)) - 1 + length) % length;
-      this.selected = this._indexToValue(index);
-    },
-
-    /**
-     * Selects the next item.
-     *
-     * @method selectNext
-     */
-    selectNext: function() {
-      var index = (Number(this._valueToIndex(this.selected)) + 1) % this.items.length;
-      this.selected = this._indexToValue(index);
-    },
-
-    /**
-     * Selects the item at the given index.
-     *
-     * @method selectIndex
-     */
-    selectIndex: function(index) {
-      this.select(this._indexToValue(index));
-    },
-
-    /**
-     * Force a synchronous update of the `items` property.
-     *
-     * NOTE: Consider listening for the `iron-items-changed` event to respond to
-     * updates to the set of selectable items after updates to the DOM list and
-     * selection state have been made.
-     *
-     * WARNING: If you are using this method, you should probably consider an
-     * alternate approach. Synchronously querying for items is potentially
-     * slow for many use cases. The `items` property will update asynchronously
-     * on its own to reflect selectable items in the DOM.
-     */
-    forceSynchronousItemUpdate: function() {
-      this._updateItems();
-    },
-
-    get _shouldUpdateSelection() {
-      return this.selected != null;
-    },
-
-    _checkFallback: function() {
-      if (this._shouldUpdateSelection) {
-        this._updateSelected();
-      }
-    },
-
-    _addListener: function(eventName) {
-      this.listen(this, eventName, '_activateHandler');
-    },
-
-    _removeListener: function(eventName) {
-      this.unlisten(this, eventName, '_activateHandler');
-    },
-
-    _activateEventChanged: function(eventName, old) {
-      this._removeListener(old);
-      this._addListener(eventName);
-    },
-
-    _updateItems: function() {
-      var nodes = Polymer.dom(this).queryDistributedElements(this.selectable || '*');
-      nodes = Array.prototype.filter.call(nodes, this._bindFilterItem);
-      this._setItems(nodes);
-    },
-
-    _updateAttrForSelected: function() {
-      if (this._shouldUpdateSelection) {
-        this.selected = this._indexToValue(this.indexOf(this.selectedItem));
-      }
-    },
-
-    _updateSelected: function() {
-      this._selectSelected(this.selected);
-    },
-
-    _selectSelected: function(selected) {
-      this._selection.select(this._valueToItem(this.selected));
-      // Check for items, since this array is populated only when attached
-      // Since Number(0) is falsy, explicitly check for undefined
-      if (this.fallbackSelection && this.items.length && (this._selection.get() === undefined)) {
-        this.selected = this.fallbackSelection;
-      }
-    },
-
-    _filterItem: function(node) {
-      return !this._excludedLocalNames[node.localName];
-    },
-
-    _valueToItem: function(value) {
-      return (value == null) ? null : this.items[this._valueToIndex(value)];
-    },
-
-    _valueToIndex: function(value) {
-      if (this.attrForSelected) {
-        for (var i = 0, item; item = this.items[i]; i++) {
-          if (this._valueForItem(item) == value) {
-            return i;
-          }
-        }
-      } else {
-        return Number(value);
-      }
-    },
-
-    _indexToValue: function(index) {
-      if (this.attrForSelected) {
-        var item = this.items[index];
-        if (item) {
-          return this._valueForItem(item);
-        }
-      } else {
-        return index;
-      }
-    },
-
-    _valueForItem: function(item) {
-      var propValue = item[Polymer.CaseMap.dashToCamelCase(this.attrForSelected)];
-      return propValue != undefined ? propValue : item.getAttribute(this.attrForSelected);
-    },
-
-    _applySelection: function(item, isSelected) {
-      if (this.selectedClass) {
-        this.toggleClass(this.selectedClass, isSelected, item);
-      }
-      if (this.selectedAttribute) {
-        this.toggleAttribute(this.selectedAttribute, isSelected, item);
-      }
-      this._selectionChange();
-      this.fire('iron-' + (isSelected ? 'select' : 'deselect'), {item: item});
-    },
-
-    _selectionChange: function() {
-      this._setSelectedItem(this._selection.get());
-    },
-
-    // observe items change under the given node.
-    _observeItems: function(node) {
-      return Polymer.dom(node).observeNodes(function(mutation) {
-        this._updateItems();
-
-        if (this._shouldUpdateSelection) {
-          this._updateSelected();
-        }
-
-        // Let other interested parties know about the change so that
-        // we don't have to recreate mutation observers everywhere.
-        this.fire('iron-items-changed', mutation, {
-          bubbles: false,
-          cancelable: false
-        });
-      });
-    },
-
-    _activateHandler: function(e) {
-      var t = e.target;
-      var items = this.items;
-      while (t && t != this) {
-        var i = items.indexOf(t);
-        if (i >= 0) {
-          var value = this._indexToValue(i);
-          this._itemActivate(value, t);
-          return;
-        }
-        t = t.parentNode;
-      }
-    },
-
-    _itemActivate: function(value, item) {
-      if (!this.fire('iron-activate',
-          {selected: value, item: item}, {cancelable: true}).defaultPrevented) {
-        this.select(value);
-      }
-    }
-
-  };
-/** @polymerBehavior Polymer.IronMultiSelectableBehavior */
-  Polymer.IronMultiSelectableBehaviorImpl = {
-    properties: {
-
-      /**
-       * If true, multiple selections are allowed.
-       */
-      multi: {
-        type: Boolean,
-        value: false,
-        observer: 'multiChanged'
-      },
-
-      /**
-       * Gets or sets the selected elements. This is used instead of `selected` when `multi`
-       * is true.
-       */
-      selectedValues: {
-        type: Array,
-        notify: true
-      },
-
-      /**
-       * Returns an array of currently selected items.
-       */
-      selectedItems: {
-        type: Array,
-        readOnly: true,
-        notify: true
-      },
-
-    },
-
-    observers: [
-      '_updateSelected(selectedValues.splices)'
-    ],
-
-    /**
-     * Selects the given value. If the `multi` property is true, then the selected state of the
-     * `value` will be toggled; otherwise the `value` will be selected.
-     *
-     * @method select
-     * @param {string|number} value the value to select.
-     */
-    select: function(value) {
-      if (this.multi) {
-        if (this.selectedValues) {
-          this._toggleSelected(value);
-        } else {
-          this.selectedValues = [value];
-        }
-      } else {
-        this.selected = value;
-      }
-    },
-
-    multiChanged: function(multi) {
-      this._selection.multi = multi;
-    },
-
-    get _shouldUpdateSelection() {
-      return this.selected != null ||
-        (this.selectedValues != null && this.selectedValues.length);
-    },
-
-    _updateAttrForSelected: function() {
-      if (!this.multi) {
-        Polymer.IronSelectableBehavior._updateAttrForSelected.apply(this);
-      } else if (this._shouldUpdateSelection) {
-        this.selectedValues = this.selectedItems.map(function(selectedItem) {
-          return this._indexToValue(this.indexOf(selectedItem));
-        }, this).filter(function(unfilteredValue) {
-          return unfilteredValue != null;
-        }, this);
-      }
-    },
-
-    _updateSelected: function() {
-      if (this.multi) {
-        this._selectMulti(this.selectedValues);
-      } else {
-        this._selectSelected(this.selected);
-      }
-    },
-
-    _selectMulti: function(values) {
-      if (values) {
-        var selectedItems = this._valuesToItems(values);
-        // clear all but the current selected items
-        this._selection.clear(selectedItems);
-        // select only those not selected yet
-        for (var i = 0; i < selectedItems.length; i++) {
-          this._selection.setItemSelected(selectedItems[i], true);
-        }
-        // Check for items, since this array is populated only when attached
-        if (this.fallbackSelection && this.items.length && !this._selection.get().length) {
-          var fallback = this._valueToItem(this.fallbackSelection);
-          if (fallback) {
-            this.selectedValues = [this.fallbackSelection];
-          }
-        }
-      } else {
-        this._selection.clear();
-      }
-    },
-
-    _selectionChange: function() {
-      var s = this._selection.get();
-      if (this.multi) {
-        this._setSelectedItems(s);
-      } else {
-        this._setSelectedItems([s]);
-        this._setSelectedItem(s);
-      }
-    },
-
-    _toggleSelected: function(value) {
-      var i = this.selectedValues.indexOf(value);
-      var unselected = i < 0;
-      if (unselected) {
-        this.push('selectedValues',value);
-      } else {
-        this.splice('selectedValues',i,1);
-      }
-    },
-
-    _valuesToItems: function(values) {
-      return (values == null) ? null : values.map(function(value) {
-        return this._valueToItem(value);
-      }, this);
-    }
-  };
-
-  /** @polymerBehavior */
-  Polymer.IronMultiSelectableBehavior = [
-    Polymer.IronSelectableBehavior,
-    Polymer.IronMultiSelectableBehaviorImpl
-  ];
-/**
-   * `Polymer.IronMenuBehavior` implements accessible menu behavior.
-   *
-   * @demo demo/index.html
-   * @polymerBehavior Polymer.IronMenuBehavior
-   */
-  Polymer.IronMenuBehaviorImpl = {
-
-    properties: {
-
-      /**
-       * Returns the currently focused item.
-       * @type {?Object}
-       */
-      focusedItem: {
-        observer: '_focusedItemChanged',
-        readOnly: true,
-        type: Object
-      },
-
-      /**
-       * The attribute to use on menu items to look up the item title. Typing the first
-       * letter of an item when the menu is open focuses that item. If unset, `textContent`
-       * will be used.
-       */
-      attrForItemTitle: {
-        type: String
-      }
-    },
-
-    hostAttributes: {
-      'role': 'menu',
-      'tabindex': '0'
-    },
-
-    observers: [
-      '_updateMultiselectable(multi)'
-    ],
-
-    listeners: {
-      'focus': '_onFocus',
-      'keydown': '_onKeydown',
-      'iron-items-changed': '_onIronItemsChanged'
-    },
-
-    keyBindings: {
-      'up': '_onUpKey',
-      'down': '_onDownKey',
-      'esc': '_onEscKey',
-      'shift+tab:keydown': '_onShiftTabDown'
-    },
-
-    attached: function() {
-      this._resetTabindices();
-    },
-
-    /**
-     * Selects the given value. If the `multi` property is true, then the selected state of the
-     * `value` will be toggled; otherwise the `value` will be selected.
-     *
-     * @param {string|number} value the value to select.
-     */
-    select: function(value) {
-      // Cancel automatically focusing a default item if the menu received focus
-      // through a user action selecting a particular item.
-      if (this._defaultFocusAsync) {
-        this.cancelAsync(this._defaultFocusAsync);
-        this._defaultFocusAsync = null;
-      }
-      var item = this._valueToItem(value);
-      if (item && item.hasAttribute('disabled')) return;
-      this._setFocusedItem(item);
-      Polymer.IronMultiSelectableBehaviorImpl.select.apply(this, arguments);
-    },
-
-    /**
-     * Resets all tabindex attributes to the appropriate value based on the
-     * current selection state. The appropriate value is `0` (focusable) for
-     * the default selected item, and `-1` (not keyboard focusable) for all
-     * other items.
-     */
-    _resetTabindices: function() {
-      var selectedItem = this.multi ? (this.selectedItems && this.selectedItems[0]) : this.selectedItem;
-
-      this.items.forEach(function(item) {
-        item.setAttribute('tabindex', item === selectedItem ? '0' : '-1');
-      }, this);
-    },
-
-    /**
-     * Sets appropriate ARIA based on whether or not the menu is meant to be
-     * multi-selectable.
-     *
-     * @param {boolean} multi True if the menu should be multi-selectable.
-     */
-    _updateMultiselectable: function(multi) {
-      if (multi) {
-        this.setAttribute('aria-multiselectable', 'true');
-      } else {
-        this.removeAttribute('aria-multiselectable');
-      }
-    },
-
-    /**
-     * Given a KeyboardEvent, this method will focus the appropriate item in the
-     * menu (if there is a relevant item, and it is possible to focus it).
-     *
-     * @param {KeyboardEvent} event A KeyboardEvent.
-     */
-    _focusWithKeyboardEvent: function(event) {
-      for (var i = 0, item; item = this.items[i]; i++) {
-        var attr = this.attrForItemTitle || 'textContent';
-        var title = item[attr] || item.getAttribute(attr);
-
-        if (!item.hasAttribute('disabled') && title &&
-            title.trim().charAt(0).toLowerCase() === String.fromCharCode(event.keyCode).toLowerCase()) {
-          this._setFocusedItem(item);
-          break;
-        }
-      }
-    },
-
-    /**
-     * Focuses the previous item (relative to the currently focused item) in the
-     * menu, disabled items will be skipped.
-     * Loop until length + 1 to handle case of single item in menu.
-     */
-    _focusPrevious: function() {
-      var length = this.items.length;
-      var curFocusIndex = Number(this.indexOf(this.focusedItem));
-      for (var i = 1; i < length + 1; i++) {
-        var item = this.items[(curFocusIndex - i + length) % length];
-        if (!item.hasAttribute('disabled')) {
-          this._setFocusedItem(item);
-          return;
-        }
-      }
-    },
-
-    /**
-     * Focuses the next item (relative to the currently focused item) in the
-     * menu, disabled items will be skipped.
-     * Loop until length + 1 to handle case of single item in menu.
-     */
-    _focusNext: function() {
-      var length = this.items.length;
-      var curFocusIndex = Number(this.indexOf(this.focusedItem));
-      for (var i = 1; i < length + 1; i++) {
-        var item = this.items[(curFocusIndex + i) % length];
-        if (!item.hasAttribute('disabled')) {
-          this._setFocusedItem(item);
-          return;
-        }
-      }
-    },
-
-    /**
-     * Mutates items in the menu based on provided selection details, so that
-     * all items correctly reflect selection state.
-     *
-     * @param {Element} item An item in the menu.
-     * @param {boolean} isSelected True if the item should be shown in a
-     * selected state, otherwise false.
-     */
-    _applySelection: function(item, isSelected) {
-      if (isSelected) {
-        item.setAttribute('aria-selected', 'true');
-      } else {
-        item.removeAttribute('aria-selected');
-      }
-      Polymer.IronSelectableBehavior._applySelection.apply(this, arguments);
-    },
-
-    /**
-     * Discretely updates tabindex values among menu items as the focused item
-     * changes.
-     *
-     * @param {Element} focusedItem The element that is currently focused.
-     * @param {?Element} old The last element that was considered focused, if
-     * applicable.
-     */
-    _focusedItemChanged: function(focusedItem, old) {
-      old && old.setAttribute('tabindex', '-1');
-      if (focusedItem) {
-        focusedItem.setAttribute('tabindex', '0');
-        focusedItem.focus();
-      }
-    },
-
-    /**
-     * A handler that responds to mutation changes related to the list of items
-     * in the menu.
-     *
-     * @param {CustomEvent} event An event containing mutation records as its
-     * detail.
-     */
-    _onIronItemsChanged: function(event) {
-      if (event.detail.addedNodes.length) {
-        this._resetTabindices();
-      }
-    },
-
-    /**
-     * Handler that is called when a shift+tab keypress is detected by the menu.
-     *
-     * @param {CustomEvent} event A key combination event.
-     */
-    _onShiftTabDown: function(event) {
-      var oldTabIndex = this.getAttribute('tabindex');
-
-      Polymer.IronMenuBehaviorImpl._shiftTabPressed = true;
-
-      this._setFocusedItem(null);
-
-      this.setAttribute('tabindex', '-1');
-
-      this.async(function() {
-        this.setAttribute('tabindex', oldTabIndex);
-        Polymer.IronMenuBehaviorImpl._shiftTabPressed = false;
-        // NOTE(cdata): polymer/polymer#1305
-      }, 1);
-    },
-
-    /**
-     * Handler that is called when the menu receives focus.
-     *
-     * @param {FocusEvent} event A focus event.
-     */
-    _onFocus: function(event) {
-      if (Polymer.IronMenuBehaviorImpl._shiftTabPressed) {
-        // do not focus the menu itself
-        return;
-      }
-
-      // Do not focus the selected tab if the deepest target is part of the
-      // menu element's local DOM and is focusable.
-      var rootTarget = /** @type {?HTMLElement} */(
-          Polymer.dom(event).rootTarget);
-      if (rootTarget !== this && typeof rootTarget.tabIndex !== "undefined" && !this.isLightDescendant(rootTarget)) {
-        return;
-      }
-
-      // clear the cached focus item
-      this._defaultFocusAsync = this.async(function() {
-        // focus the selected item when the menu receives focus, or the first item
-        // if no item is selected
-        var selectedItem = this.multi ? (this.selectedItems && this.selectedItems[0]) : this.selectedItem;
-
-        this._setFocusedItem(null);
-
-        if (selectedItem) {
-          this._setFocusedItem(selectedItem);
-        } else if (this.items[0]) {
-          // We find the first none-disabled item (if one exists)
-          this._focusNext();
-        }
-      });
-    },
-
-    /**
-     * Handler that is called when the up key is pressed.
-     *
-     * @param {CustomEvent} event A key combination event.
-     */
-    _onUpKey: function(event) {
-      // up and down arrows moves the focus
-      this._focusPrevious();
-      event.detail.keyboardEvent.preventDefault();
-    },
-
-    /**
-     * Handler that is called when the down key is pressed.
-     *
-     * @param {CustomEvent} event A key combination event.
-     */
-    _onDownKey: function(event) {
-      this._focusNext();
-      event.detail.keyboardEvent.preventDefault();
-    },
-
-    /**
-     * Handler that is called when the esc key is pressed.
-     *
-     * @param {CustomEvent} event A key combination event.
-     */
-    _onEscKey: function(event) {
-      // esc blurs the control
-      this.focusedItem.blur();
-    },
-
-    /**
-     * Handler that is called when a keydown event is detected.
-     *
-     * @param {KeyboardEvent} event A keyboard event.
-     */
-    _onKeydown: function(event) {
-      if (!this.keyboardEventMatchesKeys(event, 'up down esc')) {
-        // all other keys focus the menu item starting with that character
-        this._focusWithKeyboardEvent(event);
-      }
-      event.stopPropagation();
-    },
-
-    // override _activateHandler
-    _activateHandler: function(event) {
-      Polymer.IronSelectableBehavior._activateHandler.call(this, event);
-      event.stopPropagation();
-    }
-  };
-
-  Polymer.IronMenuBehaviorImpl._shiftTabPressed = false;
-
-  /** @polymerBehavior Polymer.IronMenuBehavior */
-  Polymer.IronMenuBehavior = [
-    Polymer.IronMultiSelectableBehavior,
-    Polymer.IronA11yKeysBehavior,
-    Polymer.IronMenuBehaviorImpl
-  ];
-(function() {
-      Polymer({
-        is: 'paper-menu',
-
-        behaviors: [
-          Polymer.IronMenuBehavior
-        ]
-      });
-    })();
+  is: 'cr-dialog',
+  extends: 'dialog',
+
+  cancel: function() {
+    this.fire('cancel');
+    HTMLDialogElement.prototype.close.call(this, '');
+  },
+
+  /**
+   * @param {string=} opt_returnValue
+   * @override
+   */
+  close: function(opt_returnValue) {
+    HTMLDialogElement.prototype.close.call(this, 'success');
+  },
+
+  /** @return {!PaperIconButtonElement} */
+  getCloseButton: function() {
+    return this.$.close;
+  },
+});
 /**
 `Polymer.IronFitBehavior` fits an element in another element using `max-height` and `max-width`, and
 optionally centers it in the window or another element.
 
 The element will only be sized and/or positioned if it has not already been sized and/or positioned
 by CSS.
 
 CSS properties               | Action
 -----------------------------|-------------------------------------------
 `position` set               | Element is not centered horizontally or vertically
@@ skipping 2734 matching lines @@
         height: height + 'px',
         transform: 'translateY(0)'
       }, {
         height: height / 2 + 'px',
         transform: 'translateY(-20px)'
       }], this.timingFromConfig(config));
 
       return this._effect;
     }
   });
-(function() {
-      'use strict';
-
-      var config = {
-        ANIMATION_CUBIC_BEZIER: 'cubic-bezier(.3,.95,.5,1)',
-        MAX_ANIMATION_TIME_MS: 400
-      };
-
-      var PaperMenuButton = Polymer({
-        is: 'paper-menu-button',
-
-        /**
-         * Fired when the dropdown opens.
-         *
-         * @event paper-dropdown-open
-         */
-
-        /**
-         * Fired when the dropdown closes.
-         *
-         * @event paper-dropdown-close
-         */
-
-        behaviors: [
-          Polymer.IronA11yKeysBehavior,
-          Polymer.IronControlState
-        ],
-
-        properties: {
-          /**
-           * True if the content is currently displayed.
-           */
-          opened: {
-            type: Boolean,
-            value: false,
-            notify: true,
-            observer: '_openedChanged'
-          },
-
-          /**
-           * The orientation against which to align the menu dropdown
-           * horizontally relative to the dropdown trigger.
-           */
-          horizontalAlign: {
-            type: String,
-            value: 'left',
-            reflectToAttribute: true
-          },
-
-          /**
-           * The orientation against which to align the menu dropdown
-           * vertically relative to the dropdown trigger.
-           */
-          verticalAlign: {
-            type: String,
-            value: 'top',
-            reflectToAttribute: true
-          },
-
-          /**
-           * If true, the `horizontalAlign` and `verticalAlign` properties will
-           * be considered preferences instead of strict requirements when
-           * positioning the dropdown and may be changed if doing so reduces
-           * the area of the dropdown falling outside of `fitInto`.
-           */
-          dynamicAlign: {
-            type: Boolean
-          },
-
-          /**
-           * A pixel value that will be added to the position calculated for the
-           * given `horizontalAlign`. Use a negative value to offset to the
-           * left, or a positive value to offset to the right.
-           */
-          horizontalOffset: {
-            type: Number,
-            value: 0,
-            notify: true
-          },
-
-          /**
-           * A pixel value that will be added to the position calculated for the
-           * given `verticalAlign`. Use a negative value to offset towards the
-           * top, or a positive value to offset towards the bottom.
-           */
-          verticalOffset: {
-            type: Number,
-            value: 0,
-            notify: true
-          },
-
-          /**
-           * If true, the dropdown will be positioned so that it doesn't overlap
-           * the button.
-           */
-          noOverlap: {
-            type: Boolean
-          },
-
-          /**
-           * Set to true to disable animations when opening and closing the
-           * dropdown.
-           */
-          noAnimations: {
-            type: Boolean,
-            value: false
-          },
-
-          /**
-           * Set to true to disable automatically closing the dropdown after
-           * a selection has been made.
-           */
-          ignoreSelect: {
-            type: Boolean,
-            value: false
-          },
-
-          /**
-           * Set to true to enable automatically closing the dropdown after an
-           * item has been activated, even if the selection did not change.
-           */
-          closeOnActivate: {
-            type: Boolean,
-            value: false
-          },
-
-          /**
-           * An animation config. If provided, this will be used to animate the
-           * opening of the dropdown.
-           */
-          openAnimationConfig: {
-            type: Object,
-            value: function() {
-              return [{
-                name: 'fade-in-animation',
-                timing: {
-                  delay: 100,
-                  duration: 200
-                }
-              }, {
-                name: 'paper-menu-grow-width-animation',
-                timing: {
-                  delay: 100,
-                  duration: 150,
-                  easing: config.ANIMATION_CUBIC_BEZIER
-                }
-              }, {
-                name: 'paper-menu-grow-height-animation',
-                timing: {
-                  delay: 100,
-                  duration: 275,
-                  easing: config.ANIMATION_CUBIC_BEZIER
-                }
-              }];
-            }
-          },
-
-          /**
-           * An animation config. If provided, this will be used to animate the
-           * closing of the dropdown.
-           */
-          closeAnimationConfig: {
-            type: Object,
-            value: function() {
-              return [{
-                name: 'fade-out-animation',
-                timing: {
-                  duration: 150
-                }
-              }, {
-                name: 'paper-menu-shrink-width-animation',
-                timing: {
-                  delay: 100,
-                  duration: 50,
-                  easing: config.ANIMATION_CUBIC_BEZIER
-                }
-              }, {
-                name: 'paper-menu-shrink-height-animation',
-                timing: {
-                  duration: 200,
-                  easing: 'ease-in'
-                }
-              }];
-            }
-          },
-
-          /**
-           * By default, the dropdown will constrain scrolling on the page
-           * to itself when opened.
-           * Set to true in order to prevent scroll from being constrained
-           * to the dropdown when it opens.
-           */
-          allowOutsideScroll: {
-            type: Boolean,
-            value: false
-          },
-
-          /**
-           * Whether focus should be restored to the button when the menu closes.
-           */
-          restoreFocusOnClose: {
-            type: Boolean,
-            value: true
-          },
-
-          /**
-           * This is the element intended to be bound as the focus target
-           * for the `iron-dropdown` contained by `paper-menu-button`.
-           */
-          _dropdownContent: {
-            type: Object
+// 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.
+
+/** Same as paper-menu-button's custom easing cubic-bezier param. */
+var SLIDE_CUBIC_BEZIER = 'cubic-bezier(0.3, 0.95, 0.5, 1)';
+
+Polymer({
+  is: 'cr-shared-menu',
+
+  behaviors: [Polymer.IronA11yKeysBehavior],
+
+  properties: {
+    menuOpen: {
+      type: Boolean,
+      observer: 'menuOpenChanged_',
+      value: false,
+    },
+
+    /**
+     * The contextual item that this menu was clicked for.
+     *  e.g. the data used to render an item in an <iron-list> or <dom-repeat>
+     * @type {?Object}
+     */
+    itemData: {
+      type: Object,
+      value: null,
+    },
+
+    /** @override */
+    keyEventTarget: {
+      type: Object,
+      value: function() {
+        return this.$.menu;
+      }
+    },
+
+    openAnimationConfig: {
+      type: Object,
+      value: function() {
+        return [{
+          name: 'fade-in-animation',
+          timing: {
+            delay: 50,
+            duration: 200
           }
-        },
-
-        hostAttributes: {
-          role: 'group',
-          'aria-haspopup': 'true'
-        },
-
-        listeners: {
-          'iron-activate': '_onIronActivate',
-          'iron-select': '_onIronSelect'
-        },
-
-        /**
-         * The content element that is contained by the menu button, if any.
-         */
-        get contentElement() {
-          return Polymer.dom(this.$.content).getDistributedNodes()[0];
-        },
-
-        /**
-         * Toggles the drowpdown content between opened and closed.
-         */
-        toggle: function() {
-          if (this.opened) {
-            this.close();
-          } else {
-            this.open();
+        }, {
+          name: 'paper-menu-grow-width-animation',
+          timing: {
+            delay: 50,
+            duration: 150,
+            easing: SLIDE_CUBIC_BEZIER
           }
-        },
-
-        /**
-         * Make the dropdown content appear as an overlay positioned relative
-         * to the dropdown trigger.
-         */
-        open: function() {
-          if (this.disabled) {
-            return;
+        }, {
+          name: 'paper-menu-grow-height-animation',
+          timing: {
+            delay: 100,
+            duration: 275,
+            easing: SLIDE_CUBIC_BEZIER
           }
-
-          this.$.dropdown.open();
-        },
-
-        /**
-         * Hide the dropdown content.
-         */
-        close: function() {
-          this.$.dropdown.close();
-        },
-
-        /**
-         * When an `iron-select` event is received, the dropdown should
-         * automatically close on the assumption that a value has been chosen.
-         *
-         * @param {CustomEvent} event A CustomEvent instance with type
-         * set to `"iron-select"`.
-         */
-        _onIronSelect: function(event) {
-          if (!this.ignoreSelect) {
-            this.close();
+        }];
+      }
+    },
+
+    closeAnimationConfig: {
+      type: Object,
+      value: function() {
+        return [{
+          name: 'fade-out-animation',
+          timing: {
+            duration: 150
           }
-        },
-
-        /**
-         * Closes the dropdown when an `iron-activate` event is received if
-         * `closeOnActivate` is true.
-         *
-         * @param {CustomEvent} event A CustomEvent of type 'iron-activate'.
-         */
-        _onIronActivate: function(event) {
-          if (this.closeOnActivate) {
-            this.close();
-          }
-        },
-
-        /**
-         * When the dropdown opens, the `paper-menu-button` fires `paper-open`.
-         * When the dropdown closes, the `paper-menu-button` fires `paper-close`.
-         *
-         * @param {boolean} opened True if the dropdown is opened, otherwise false.
-         * @param {boolean} oldOpened The previous value of `opened`.
-         */
-        _openedChanged: function(opened, oldOpened) {
-          if (opened) {
-            // TODO(cdata): Update this when we can measure changes in distributed
-            // children in an idiomatic way.
-            // We poke this property in case the element has changed. This will
-            // cause the focus target for the `iron-dropdown` to be updated as
-            // necessary:
-            this._dropdownContent = this.contentElement;
-            this.fire('paper-dropdown-open');
-          } else if (oldOpened != null) {
-            this.fire('paper-dropdown-close');
-          }
-        },
-
-        /**
-         * If the dropdown is open when disabled becomes true, close the
-         * dropdown.
-         *
-         * @param {boolean} disabled True if disabled, otherwise false.
-         */
-        _disabledChanged: function(disabled) {
-          Polymer.IronControlState._disabledChanged.apply(this, arguments);
-          if (disabled && this.opened) {
-            this.close();
-          }
-        },
-
-        __onIronOverlayCanceled: function(event) {
-          var uiEvent = event.detail;
-          var target = Polymer.dom(uiEvent).rootTarget;
-          var trigger = this.$.trigger;
-          var path = Polymer.dom(uiEvent).path;
-
-          if (path.indexOf(trigger) > -1) {
-            event.preventDefault();
-          }
-        }
-      });
-
-      Object.keys(config).forEach(function (key) {
-        PaperMenuButton[key] = config[key];
-      });
-
-      Polymer.PaperMenuButton = PaperMenuButton;
-    })();
-/**
-   * `Polymer.PaperInkyFocusBehavior` implements a ripple when the element has keyboard focus.
-   *
-   * @polymerBehavior Polymer.PaperInkyFocusBehavior
-   */
-  Polymer.PaperInkyFocusBehaviorImpl = {
-    observers: [
-      '_focusedChanged(receivedFocusFromKeyboard)'
-    ],
-
-    _focusedChanged: function(receivedFocusFromKeyboard) {
-      if (receivedFocusFromKeyboard) {
-        this.ensureRipple();
-      }
-      if (this.hasRipple()) {
-        this._ripple.holdDown = receivedFocusFromKeyboard;
-      }
-    },
-
-    _createRipple: function() {
-      var ripple = Polymer.PaperRippleBehavior._createRipple();
-      ripple.id = 'ink';
-      ripple.setAttribute('center', '');
-      ripple.classList.add('circle');
-      return ripple;
+        }];
+      }
+    }
+  },
+
+  keyBindings: {
+    'tab': 'onTabPressed_',
+  },
+
+  listeners: {
+    'dropdown.iron-overlay-canceled': 'onOverlayCanceled_',
+  },
+
+  /**
+   * The last anchor that was used to open a menu. It's necessary for toggling.
+   * @private {?Element}
+   */
+  lastAnchor_: null,
+
+  /**
+   * The first focusable child in the menu's light DOM.
+   * @private {?Element}
+   */
+  firstFocus_: null,
+
+  /**
+   * The last focusable child in the menu's light DOM.
+   * @private {?Element}
+   */
+  lastFocus_: null,
+
+  /** @override */
+  attached: function() {
+    window.addEventListener('resize', this.closeMenu.bind(this));
+  },
+
+  /** Closes the menu. */
+  closeMenu: function() {
+    if (this.root.activeElement == null) {
+      // Something else has taken focus away from the menu. Do not attempt to
+      // restore focus to the button which opened the menu.
+      this.$.dropdown.restoreFocusOnClose = false;
+    }
+    this.menuOpen = false;
+  },
+
+  /**
+   * Opens the menu at the anchor location.
+   * @param {!Element} anchor The location to display the menu.
+   * @param {!Object} itemData The contextual item's data.
+   */
+  openMenu: function(anchor, itemData) {
+    if (this.lastAnchor_ == anchor && this.menuOpen)
+      return;
+
+    if (this.menuOpen)
+      this.closeMenu();
+
+    this.itemData = itemData;
+    this.lastAnchor_ = anchor;
+    this.$.dropdown.restoreFocusOnClose = true;
+
+    var focusableChildren = Polymer.dom(this).querySelectorAll(
+        '[tabindex]:not([hidden]),button:not([hidden])');
+    if (focusableChildren.length > 0) {
+      this.$.dropdown.focusTarget = focusableChildren[0];
+      this.firstFocus_ = focusableChildren[0];
+      this.lastFocus_ = focusableChildren[focusableChildren.length - 1];
+    }
+
+    // Move the menu to the anchor.
+    this.$.dropdown.positionTarget = anchor;
+    this.menuOpen = true;
+  },
+
+  /**
+   * Toggles the menu for the anchor that is passed in.
+   * @param {!Element} anchor The location to display the menu.
+   * @param {!Object} itemData The contextual item's data.
+   */
+  toggleMenu: function(anchor, itemData) {
+    if (anchor == this.lastAnchor_ && this.menuOpen)
+      this.closeMenu();
+    else
+      this.openMenu(anchor, itemData);
+  },
+
+  /**
+   * Trap focus inside the menu. As a very basic heuristic, will wrap focus from
+   * the first element with a nonzero tabindex to the last such element.
+   * TODO(tsergeant): Use iron-focus-wrap-behavior once it is available
+   * (https://github.com/PolymerElements/iron-overlay-behavior/issues/179).
+   * @param {CustomEvent} e
+   */
+  onTabPressed_: function(e) {
+    if (!this.firstFocus_ || !this.lastFocus_)
+      return;
+
+    var toFocus;
+    var keyEvent = e.detail.keyboardEvent;
+    if (keyEvent.shiftKey && keyEvent.target == this.firstFocus_)
+      toFocus = this.lastFocus_;
+    else if (keyEvent.target == this.lastFocus_)
+      toFocus = this.firstFocus_;
+
+    if (!toFocus)
+      return;
+
+    e.preventDefault();
+    toFocus.focus();
+  },
+
+  /**
+   * Ensure the menu is reset properly when it is closed by the dropdown (eg,
+   * clicking outside).
+   * @private
+   */
+  menuOpenChanged_: function() {
+    if (!this.menuOpen) {
+      this.itemData = null;
+      this.lastAnchor_ = null;
+    }
+  },
+
+  /**
+   * Prevent focus restoring when tapping outside the menu. This stops the
+   * focus moving around unexpectedly when closing the menu with the mouse.
+   * @param {CustomEvent} e
+   * @private
+   */
+  onOverlayCanceled_: function(e) {
+    if (e.detail.type == 'tap')
+      this.$.dropdown.restoreFocusOnClose = false;
+  },
+});
+/** @polymerBehavior Polymer.PaperItemBehavior */
+  Polymer.PaperItemBehaviorImpl = {
+    hostAttributes: {
+      role: 'option',
+      tabindex: '0'
     }
   };
 
-  /** @polymerBehavior Polymer.PaperInkyFocusBehavior */
-  Polymer.PaperInkyFocusBehavior = [
+  /** @polymerBehavior */
+  Polymer.PaperItemBehavior = [
     Polymer.IronButtonState,
     Polymer.IronControlState,
-    Polymer.PaperRippleBehavior,
-    Polymer.PaperInkyFocusBehaviorImpl
+    Polymer.PaperItemBehaviorImpl
   ];
 Polymer({
-      is: 'paper-icon-button',
+      is: 'paper-item',
+
+      behaviors: [
+        Polymer.PaperItemBehavior
+      ]
+    });
+Polymer({
+
+    is: 'iron-collapse',
+
+    behaviors: [
+      Polymer.IronResizableBehavior
+    ],
+
+    properties: {
+
+      /**
+       * If true, the orientation is horizontal; otherwise is vertical.
+       *
+       * @attribute horizontal
+       */
+      horizontal: {
+        type: Boolean,
+        value: false,
+        observer: '_horizontalChanged'
+      },
+
+      /**
+       * Set opened to true to show the collapse element and to false to hide it.
+       *
+       * @attribute opened
+       */
+      opened: {
+        type: Boolean,
+        value: false,
+        notify: true,
+        observer: '_openedChanged'
+      },
+
+      /**
+       * Set noAnimation to true to disable animations
+       *
+       * @attribute noAnimation
+       */
+      noAnimation: {
+        type: Boolean
+      },
+
+    },
+
+    get dimension() {
+      return this.horizontal ? 'width' : 'height';
+    },
+
+    /**
+     * `maxWidth` or `maxHeight`.
+     * @private
+     */
+    get _dimensionMax() {
+      return this.horizontal ? 'maxWidth' : 'maxHeight';
+    },
+
+    /**
+     * `max-width` or `max-height`.
+     * @private
+     */
+    get _dimensionMaxCss() {
+      return this.horizontal ? 'max-width' : 'max-height';
+    },
+
+    hostAttributes: {
+      role: 'group',
+      'aria-hidden': 'true',
+      'aria-expanded': 'false'
+    },
+
+    listeners: {
+      transitionend: '_transitionEnd'
+    },
+
+    attached: function() {
+      // It will take care of setting correct classes and styles.
+      this._transitionEnd();
+    },
+
+    /**
+     * Toggle the opened state.
+     *
+     * @method toggle
+     */
+    toggle: function() {
+      this.opened = !this.opened;
+    },
+
+    show: function() {
+      this.opened = true;
+    },
+
+    hide: function() {
+      this.opened = false;
+    },
+
+    /**
+     * Updates the size of the element.
+     * @param {string} size The new value for `maxWidth`/`maxHeight` as css property value, usually `auto` or `0px`.
+     * @param {boolean=} animated if `true` updates the size with an animation, otherwise without.
+     */
+    updateSize: function(size, animated) {
+      // No change!
+      var curSize = this.style[this._dimensionMax];
+      if (curSize === size || (size === 'auto' && !curSize)) {
+        return;
+      }
+
+      this._updateTransition(false);
+      // If we can animate, must do some prep work.
+      if (animated && !this.noAnimation && this._isDisplayed) {
+        // Animation will start at the current size.
+        var startSize = this._calcSize();
+        // For `auto` we must calculate what is the final size for the animation.
+        // After the transition is done, _transitionEnd will set the size back to `auto`.
+        if (size === 'auto') {
+          this.style[this._dimensionMax] = '';
+          size = this._calcSize();
+        }
+        // Go to startSize without animation.
+        this.style[this._dimensionMax] = startSize;
+        // Force layout to ensure transition will go. Set scrollTop to itself
+        // so that compilers won't remove it.
+        this.scrollTop = this.scrollTop;
+        // Enable animation.
+        this._updateTransition(true);
+      }
+      // Set the final size.
+      if (size === 'auto') {
+        this.style[this._dimensionMax] = '';
+      } else {
+        this.style[this._dimensionMax] = size;
+      }
+    },
+
+    /**
+     * enableTransition() is deprecated, but left over so it doesn't break existing code.
+     * Please use `noAnimation` property instead.
+     *
+     * @method enableTransition
+     * @deprecated since version 1.0.4
+     */
+    enableTransition: function(enabled) {
+      Polymer.Base._warn('`enableTransition()` is deprecated, use `noAnimation` instead.');
+      this.noAnimation = !enabled;
+    },
+
+    _updateTransition: function(enabled) {
+      this.style.transitionDuration = (enabled && !this.noAnimation) ? '' : '0s';
+    },
+
+    _horizontalChanged: function() {
+      this.style.transitionProperty = this._dimensionMaxCss;
+      var otherDimension = this._dimensionMax === 'maxWidth' ? 'maxHeight' : 'maxWidth';
+      this.style[otherDimension] = '';
+      this.updateSize(this.opened ? 'auto' : '0px', false);
+    },
+
+    _openedChanged: function() {
+      this.setAttribute('aria-expanded', this.opened);
+      this.setAttribute('aria-hidden', !this.opened);
+
+      this.toggleClass('iron-collapse-closed', false);
+      this.toggleClass('iron-collapse-opened', false);
+      this.updateSize(this.opened ? 'auto' : '0px', true);
+
+      // Focus the current collapse.
+      if (this.opened) {
+        this.focus();
+      }
+      if (this.noAnimation) {
+        this._transitionEnd();
+      }
+    },
+
+    _transitionEnd: function() {
+      if (this.opened) {
+        this.style[this._dimensionMax] = '';
+      }
+      this.toggleClass('iron-collapse-closed', !this.opened);
+      this.toggleClass('iron-collapse-opened', this.opened);
+      this._updateTransition(false);
+      this.notifyResize();
+    },
+
+    /**
+     * Simplistic heuristic to detect if element has a parent with display: none
+     *
+     * @private
+     */
+    get _isDisplayed() {
+      var rect = this.getBoundingClientRect();
+      for (var prop in rect) {
+        if (rect[prop] !== 0) return true;
+      }
+      return false;
+    },
+
+    _calcSize: function() {
+      return this.getBoundingClientRect()[this.dimension] + 'px';
+    }
+
+  });
+/**
+  Polymer.IronFormElementBehavior enables a custom element to be included
+  in an `iron-form`.
+
+  @demo demo/index.html
+  @polymerBehavior
+  */
+  Polymer.IronFormElementBehavior = {
+
+    properties: {
+      /**
+       * Fired when the element is added to an `iron-form`.
+       *
+       * @event iron-form-element-register
+       */
+
+      /**
+       * Fired when the element is removed from an `iron-form`.
+       *
+       * @event iron-form-element-unregister
+       */
+
+      /**
+       * The name of this element.
+       */
+      name: {
+        type: String
+      },
+
+      /**
+       * The value for this element.
+       */
+      value: {
+        notify: true,
+        type: String
+      },
+
+      /**
+       * Set to true to mark the input as required. If used in a form, a
+       * custom element that uses this behavior should also use
+       * Polymer.IronValidatableBehavior and define a custom validation method.
+       * Otherwise, a `required` element will always be considered valid.
+       * It's also strongly recommended to provide a visual style for the element
+       * when its value is invalid.
+       */
+      required: {
+        type: Boolean,
+        value: false
+      },
+
+      /**
+       * The form that the element is registered to.
+       */
+      _parentForm: {
+        type: Object
+      }
+    },
+
+    attached: function() {
+      // Note: the iron-form that this element belongs to will set this
+      // element's _parentForm property when handling this event.
+      this.fire('iron-form-element-register');
+    },
+
+    detached: function() {
+      if (this._parentForm) {
+        this._parentForm.fire('iron-form-element-unregister', {target: this});
+      }
+    }
+
+  };
+/**
+   * Use `Polymer.IronCheckedElementBehavior` to implement a custom element
+   * that has a `checked` property, which can be used for validation if the
+   * element is also `required`. Element instances implementing this behavior
+   * will also be registered for use in an `iron-form` element.
+   *
+   * @demo demo/index.html
+   * @polymerBehavior Polymer.IronCheckedElementBehavior
+   */
+  Polymer.IronCheckedElementBehaviorImpl = {
+
+    properties: {
+      /**
+       * Fired when the checked state changes.
+       *
+       * @event iron-change
+       */
+
+      /**
+       * Gets or sets the state, `true` is checked and `false` is unchecked.
+       */
+      checked: {
+        type: Boolean,
+        value: false,
+        reflectToAttribute: true,
+        notify: true,
+        observer: '_checkedChanged'
+      },
+
+      /**
+       * If true, the button toggles the active state with each tap or press
+       * of the spacebar.
+       */
+      toggles: {
+        type: Boolean,
+        value: true,
+        reflectToAttribute: true
+      },
+
+      /* Overriden from Polymer.IronFormElementBehavior */
+      value: {
+        type: String,
+        value: 'on',
+        observer: '_valueChanged'
+      }
+    },
+
+    observers: [
+      '_requiredChanged(required)'
+    ],
+
+    created: function() {
+      // Used by `iron-form` to handle the case that an element with this behavior
+      // doesn't have a role of 'checkbox' or 'radio', but should still only be
+      // included when the form is serialized if `this.checked === true`.
+      this._hasIronCheckedElementBehavior = true;
+    },
+
+    /**
+     * Returns false if the element is required and not checked, and true otherwise.
+     * @param {*=} _value Ignored.
+     * @return {boolean} true if `required` is false or if `checked` is true.
+     */
+    _getValidity: function(_value) {
+      return this.disabled || !this.required || this.checked;
+    },
+
+    /**
+     * Update the aria-required label when `required` is changed.
+     */
+    _requiredChanged: function() {
+      if (this.required) {
+        this.setAttribute('aria-required', 'true');
+      } else {
+        this.removeAttribute('aria-required');
+      }
+    },
+
+    /**
+     * Fire `iron-changed` when the checked state changes.
+     */
+    _checkedChanged: function() {
+      this.active = this.checked;
+      this.fire('iron-change');
+    },
+
+    /**
+     * Reset value to 'on' if it is set to `undefined`.
+     */
+    _valueChanged: function() {
+      if (this.value === undefined || this.value === null) {
+        this.value = 'on';
+      }
+    }
+  };
+
+  /** @polymerBehavior Polymer.IronCheckedElementBehavior */
+  Polymer.IronCheckedElementBehavior = [
+    Polymer.IronFormElementBehavior,
+    Polymer.IronValidatableBehavior,
+    Polymer.IronCheckedElementBehaviorImpl
+  ];
+/**
+   * Use `Polymer.PaperCheckedElementBehavior` to implement a custom element
+   * that has a `checked` property similar to `Polymer.IronCheckedElementBehavior`
+   * and is compatible with having a ripple effect.
+   * @polymerBehavior Polymer.PaperCheckedElementBehavior
+   */
+  Polymer.PaperCheckedElementBehaviorImpl = {
+    /**
+     * Synchronizes the element's checked state with its ripple effect.
+     */
+    _checkedChanged: function() {
+      Polymer.IronCheckedElementBehaviorImpl._checkedChanged.call(this);
+      if (this.hasRipple()) {
+        if (this.checked) {
+          this._ripple.setAttribute('checked', '');
+        } else {
+          this._ripple.removeAttribute('checked');
+        }
+      }
+    },
+
+    /**
+     * Synchronizes the element's `active` and `checked` state.
+     */
+    _buttonStateChanged: function() {
+      Polymer.PaperRippleBehavior._buttonStateChanged.call(this);
+      if (this.disabled) {
+        return;
+      }
+      if (this.isAttached) {
+        this.checked = this.active;
+      }
+    }
+  };
+
+  /** @polymerBehavior Polymer.PaperCheckedElementBehavior */
+  Polymer.PaperCheckedElementBehavior = [
+    Polymer.PaperInkyFocusBehavior,
+    Polymer.IronCheckedElementBehavior,
+    Polymer.PaperCheckedElementBehaviorImpl
+  ];
+Polymer({
+      is: 'paper-checkbox',
+
+      behaviors: [
+        Polymer.PaperCheckedElementBehavior
+      ],
 
       hostAttributes: {
-        role: 'button',
-        tabindex: '0'
-      },
-
-      behaviors: [
-        Polymer.PaperInkyFocusBehavior
-      ],
+        role: 'checkbox',
+        'aria-checked': false,
+        tabindex: 0
+      },
 
       properties: {
         /**
-         * The URL of an image for the icon. If the src property is specified,
-         * the icon property should not be.
+         * Fired when the checked state changes due to user interaction.
+         *
+         * @event change
          */
-        src: {
-          type: String
-        },
 
         /**
-         * Specifies the icon name or index in the set of icons available in
-         * the icon's icon set. If the icon property is specified,
-         * the src property should not be.
+         * Fired when the checked state changes.
+         *
+         * @event iron-change
          */
-        icon: {
-          type: String
-        },
-
-        /**
-         * Specifies the alternate text for the button, for accessibility.
-         */
-        alt: {
+        ariaActiveAttribute: {
           type: String,
-          observer: "_altChanged"
-        }
-      },
-
-      _altChanged: function(newValue, oldValue) {
-        var label = this.getAttribute('aria-label');
-
-        // Don't stomp over a user-set aria-label.
-        if (!label || oldValue == label) {
-          this.setAttribute('aria-label', newValue);
+          value: 'aria-checked'
+        }
+      },
+
+      _computeCheckboxClass: function(checked, invalid) {
+        var className = '';
+        if (checked) {
+          className += 'checked ';
+        }
+        if (invalid) {
+          className += 'invalid';
+        }
+        return className;
+      },
+
+      _computeCheckmarkClass: function(checked) {
+        return checked ? '' : 'hidden';
+      },
+
+      // create ripple inside the checkboxContainer
+      _createRipple: function() {
+        this._rippleContainer = this.$.checkboxContainer;
+        return Polymer.PaperInkyFocusBehaviorImpl._createRipple.call(this);
+      }
+
+    });
+Polymer({
+      is: 'paper-icon-button-light',
+      extends: 'button',
+
+      behaviors: [
+        Polymer.PaperRippleBehavior
+      ],
+
+      listeners: {
+        'down': '_rippleDown',
+        'up': '_rippleUp',
+        'focus': '_rippleDown',
+        'blur': '_rippleUp',
+      },
+
+      _rippleDown: function() {
+        this.getRipple().downAction();
+      },
+
+      _rippleUp: function() {
+        this.getRipple().upAction();
+      },
+
+      /**
+       * @param {...*} var_args
+       */
+      ensureRipple: function(var_args) {
+        var lastRipple = this._ripple;
+        Polymer.PaperRippleBehavior.ensureRipple.apply(this, arguments);
+        if (this._ripple && this._ripple !== lastRipple) {
+          this._ripple.center = true;
+          this._ripple.classList.add('circle');
         }
       }
     });
 // 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('cr.icon', function() {
+  /**
+   * @return {!Array<number>} The scale factors supported by this platform for
+   *     webui resources.
+   */
+  function getSupportedScaleFactors() {
+    var supportedScaleFactors = [];
+    if (cr.isMac || cr.isChromeOS || cr.isWindows || cr.isLinux) {
+      // All desktop platforms support zooming which also updates the
+      // renderer's device scale factors (a.k.a devicePixelRatio), and
+      // these platforms has high DPI assets for 2.0x. Use 1x and 2x in
+      // image-set on these platforms so that the renderer can pick the
+      // closest image for the current device scale factor.
+      supportedScaleFactors.push(1);
+      supportedScaleFactors.push(2);
+    } else {
+      // For other platforms that use fixed device scale factor, use
+      // the window's device pixel ratio.
+      // TODO(oshima): Investigate if Android/iOS need to use image-set.
+      supportedScaleFactors.push(window.devicePixelRatio);
+    }
+    return supportedScaleFactors;
+  }
+
+  /**
+   * Returns the URL of the image, or an image set of URLs for the profile
+   * avatar. Default avatars have resources available for multiple scalefactors,
+   * whereas the GAIA profile image only comes in one size.
+   *
+   * @param {string} path The path of the image.
+   * @return {string} The url, or an image set of URLs of the avatar image.
+   */
+  function getProfileAvatarIcon(path) {
+    var chromeThemePath = 'chrome://theme';
+    var isDefaultAvatar =
+        (path.slice(0, chromeThemePath.length) == chromeThemePath);
+    return isDefaultAvatar ? imageset(path + '@scalefactorx'): url(path);
+  }
+
+  /**
+   * Generates a CSS -webkit-image-set for a chrome:// url.
+   * An entry in the image set is added for each of getSupportedScaleFactors().
+   * The scale-factor-specific url is generated by replacing the first instance
+   * of 'scalefactor' in |path| with the numeric scale factor.
+   * @param {string} path The URL to generate an image set for.
+   *     'scalefactor' should be a substring of |path|.
+   * @return {string} The CSS -webkit-image-set.
+   */
+  function imageset(path) {
+    var supportedScaleFactors = getSupportedScaleFactors();
+
+    var replaceStartIndex = path.indexOf('scalefactor');
+    if (replaceStartIndex < 0)
+      return url(path);
+
+    var s = '';
+    for (var i = 0; i < supportedScaleFactors.length; ++i) {
+      var scaleFactor = supportedScaleFactors[i];
+      var pathWithScaleFactor = path.substr(0, replaceStartIndex) +
+          scaleFactor + path.substr(replaceStartIndex + 'scalefactor'.length);
+
+      s += url(pathWithScaleFactor) + ' ' + scaleFactor + 'x';
+
+      if (i != supportedScaleFactors.length - 1)
+        s += ', ';
+    }
+    return '-webkit-image-set(' + s + ')';
+  }
+
+  /**
+   * A regular expression for identifying favicon URLs.
+   * @const {!RegExp}
+   */
+  var FAVICON_URL_REGEX = /\.ico$/i;
+
+  /**
+   * Creates a CSS -webkit-image-set for a favicon request.
+   * @param {string} url Either the URL of the original page or of the favicon
+   *     itself.
+   * @param {number=} opt_size Optional preferred size of the favicon.
+   * @param {string=} opt_type Optional type of favicon to request. Valid values
+   *     are 'favicon' and 'touch-icon'. Default is 'favicon'.
+   * @return {string} -webkit-image-set for the favicon.
+   */
+  function getFaviconImageSet(url, opt_size, opt_type) {
+    var size = opt_size || 16;
+    var type = opt_type || 'favicon';
+
+    return imageset(
+        'chrome://' + type + '/size/' + size + '@scalefactorx/' +
+        // Note: Literal 'iconurl' must match |kIconURLParameter| in
+        // components/favicon_base/favicon_url_parser.cc.
+        (FAVICON_URL_REGEX.test(url) ? 'iconurl/' : '') + url);
+  }
+
+  return {
+    getSupportedScaleFactors: getSupportedScaleFactors,
+    getProfileAvatarIcon: getProfileAvatarIcon,
+    getFaviconImageSet: getFaviconImageSet,
+  };
+});
+// 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.
+
 /**
- * Implements an incremental search field which can be shown and hidden.
- * Canonical implementation is <cr-search-field>.
- * @polymerBehavior
+ * @fileoverview Defines a singleton object, md_history.BrowserService, which
+ * provides access to chrome.send APIs.
  */
-var CrSearchFieldBehavior = {
+
+cr.define('md_history', function() {
+  /** @constructor */
+  function BrowserService() {
+    /** @private {Array<!HistoryEntry>} */
+    this.pendingDeleteItems_ = null;
+    /** @private {PromiseResolver} */
+    this.pendingDeletePromise_ = null;
+  }
+
+  BrowserService.prototype = {
+    /**
+     * @param {!Array<!HistoryEntry>} items
+     * @return {Promise<!Array<!HistoryEntry>>}
+     */
+    deleteItems: function(items) {
+      if (this.pendingDeleteItems_ != null) {
+        // There's already a deletion in progress, reject immediately.
+        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;
+    },
+
+    /**
+     * @param {!string} url
+     */
+    removeBookmark: function(url) {
+      chrome.send('removeBookmark', [url]);
+    },
+
+    /**
+     * @param {string} sessionTag
+     */
+    openForeignSessionAllTabs: function(sessionTag) {
+      chrome.send('openForeignSession', [sessionTag]);
+    },
+
+    /**
+     * @param {string} sessionTag
+     * @param {number} windowId
+     * @param {number} tabId
+     * @param {MouseEvent} e
+     */
+    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
+      ]);
+    },
+
+    /**
+     * @param {string} sessionTag
+     */
+    deleteForeignSession: function(sessionTag) {
+      chrome.send('deleteForeignSession', [sessionTag]);
+    },
+
+    openClearBrowsingData: function() {
+      chrome.send('clearBrowsingData');
+    },
+
+    /**
+     * @param {boolean} successful
+     * @private
+     */
+    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};
+});
+
+/**
+ * Called by the history backend when deletion was succesful.
+ */
+function deleteComplete() {
+  md_history.BrowserService.getInstance().resolveDelete_(true);
+}
+
+/**
+ * Called by the history backend when the deletion failed.
+ */
+function deleteFailed() {
+  md_history.BrowserService.getInstance().resolveDelete_(false);
+};
+// 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: 'history-searched-label',
+
   properties: {
-    label: {
-      type: String,
-      value: '',
-    },
-
-    clearLabel: {
-      type: String,
-      value: '',
-    },
-
-    showingSearch: {
-      type: Boolean,
-      value: false,
-      notify: true,
-      observer: 'showingSearchChanged_',
-      reflectToAttribute: true
-    },
-
-    /** @private */
-    lastValue_: {
-      type: String,
-      value: '',
-    },
-  },
-
-  /**
-   * @abstract
-   * @return {!HTMLInputElement} The input field element the behavior should
-   * use.
-   */
-  getSearchInput: function() {},
-
-  /**
-   * @return {string} The value of the search field.
-   */
-  getValue: function() {
-    return this.getSearchInput().value;
-  },
-
-  /**
-   * Sets the value of the search field.
-   * @param {string} value
-   */
-  setValue: function(value) {
-    // Use bindValue when setting the input value so that changes propagate
-    // correctly.
-    this.getSearchInput().bindValue = value;
-    this.onValueChanged_(value);
-  },
-
-  showAndFocus: function() {
-    this.showingSearch = true;
-    this.focus_();
-  },
-
-  /** @private */
-  focus_: function() {
-    this.getSearchInput().focus();
-  },
-
-  onSearchTermSearch: function() {
-    this.onValueChanged_(this.getValue());
-  },
-
-  /**
-   * Updates the internal state of the search field based on a change that has
-   * already happened.
-   * @param {string} newValue
+    // The text to show in this label.
+    title: String,
+
+    // The search term to bold within the title.
+    searchTerm: String,
+  },
+
+  observers: ['setSearchedTextToBold_(title, searchTerm)'],
+
+  /**
+   * Updates the page title. If a search term is specified, highlights any
+   * occurrences of the search term in bold.
    * @private
    */
-  onValueChanged_: function(newValue) {
-    if (newValue == this.lastValue_)
-      return;
-
-    this.fire('search-changed', newValue);
-    this.lastValue_ = newValue;
-  },
-
-  onSearchTermKeydown: function(e) {
-    if (e.key == 'Escape')
-      this.showingSearch = false;
-  },
-
-  /** @private */
-  showingSearchChanged_: function() {
-    if (this.showingSearch) {
-      this.focus_();
+  setSearchedTextToBold_: function() {
+    var i = 0;
+    var titleElem = this.$.container;
+    var titleText = this.title;
+
+    if (this.searchTerm == '' || this.searchTerm == null) {
+      titleElem.textContent = titleText;
       return;
     }
 
-    this.setValue('');
-    this.getSearchInput().blur();
-  }
+    var re = new RegExp(quoteString(this.searchTerm), 'gim');
+    var match;
+    titleElem.textContent = '';
+    while (match = re.exec(titleText)) {
+      if (match.index > i)
+        titleElem.appendChild(document.createTextNode(
+            titleText.slice(i, match.index)));
+      i = re.lastIndex;
+      // Mark the highlighted text in bold.
+      var b = document.createElement('b');
+      b.textContent = titleText.substring(match.index, i);
+      titleElem.appendChild(b);
+    }
+    if (i < titleText.length)
+      titleElem.appendChild(
+          document.createTextNode(titleText.slice(i)));
+  },
+});
+// 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('md_history', function() {
+  var HistoryItem = Polymer({
+    is: 'history-item',
+
+    properties: {
+      // Underlying HistoryEntry data for this item. Contains read-only fields
+      // from the history backend, as well as fields computed by history-list.
+      item: {type: Object, observer: 'showIcon_'},
+
+      // Search term used to obtain this history-item.
+      searchTerm: {type: String},
+
+      selected: {type: Boolean, notify: true},
+
+      isFirstItem: {type: Boolean, reflectToAttribute: true},
+
+      isCardStart: {type: Boolean, reflectToAttribute: true},
+
+      isCardEnd: {type: Boolean, reflectToAttribute: true},
+
+      // True if the item is being displayed embedded in another element and
+      // should not manage its own borders or size.
+      embedded: {type: Boolean, reflectToAttribute: true},
+
+      hasTimeGap: {type: Boolean},
+
+      numberOfItems: {type: Number},
+
+      // The path of this history item inside its parent.
+      path: String,
+    },
+
+    /**
+     * When a history-item is selected the toolbar is notified and increases
+     * or decreases its count of selected items accordingly.
+     * @private
+     */
+    onCheckboxSelected_: function() {
+      // TODO(calamity): Fire this event whenever |selected| changes.
+      this.fire('history-checkbox-select', {
+        element: this,
+        countAddition: this.$.checkbox.checked ? 1 : -1
+      });
+    },
+
+    /**
+     * Remove bookmark of current item when bookmark-star is clicked.
+     * @private
+     */
+    onRemoveBookmarkTap_: function() {
+      if (!this.item.starred)
+        return;
+
+      if (this.$$('#bookmark-star') == this.root.activeElement)
+        this.$['menu-button'].focus();
+
+      md_history.BrowserService.getInstance()
+        .removeBookmark(this.item.url);
+      this.fire('remove-bookmark-stars', this.item.url);
+    },
+
+    /**
+     * Fires a custom event when the menu button is clicked. Sends the details
+     * of the history item and where the menu should appear.
+     */
+    onMenuButtonTap_: function(e) {
+      this.fire('toggle-menu', {
+        target: Polymer.dom(e).localTarget,
+        item: this.item,
+      });
+
+      // Stops the 'tap' event from closing the menu when it opens.
+      e.stopPropagation();
+    },
+
+    /**
+     * Set the favicon image, based on the URL of the history item.
+     * @private
+     */
+    showIcon_: function() {
+      this.$.icon.style.backgroundImage =
+          cr.icon.getFaviconImageSet(this.item.url);
+    },
+
+    selectionNotAllowed_: function() {
+      return !loadTimeData.getBoolean('allowDeletingHistory');
+    },
+
+    /**
+     * Generates the title for this history card.
+     * @param {number} numberOfItems The number of items in the card.
+     * @param {string} search The search term associated with these results.
+     * @private
+     */
+    cardTitle_: function(numberOfItems, historyDate, search) {
+      if (!search)
+        return this.item.dateRelativeDay;
+
+      var resultId = numberOfItems == 1 ? 'searchResult' : 'searchResults';
+      return loadTimeData.getStringF('foundSearchResults', numberOfItems,
+          loadTimeData.getString(resultId), search);
+    },
+
+    /**
+     * Crop long item titles to reduce their effect on layout performance. See
+     * crbug.com/621347.
+     * @param {string} title
+     * @return {string}
+     */
+    cropItemTitle_: function(title) {
+      return (title.length > TITLE_MAX_LENGTH) ?
+          title.substr(0, TITLE_MAX_LENGTH) :
+          title;
+    }
+  });
+
+  /**
+   * Check whether the time difference between the given history item and the
+   * next one is large enough for a spacer to be required.
+   * @param {Array<HistoryEntry>} visits
+   * @param {number} currentIndex
+   * @param {string} searchedTerm
+   * @return {boolean} Whether or not time gap separator is required.
+   * @private
+   */
+  HistoryItem.needsTimeGap = function(visits, currentIndex, searchedTerm) {
+    if (currentIndex >= visits.length - 1 || visits.length == 0)
+      return false;
+
+    var currentItem = visits[currentIndex];
+    var nextItem = visits[currentIndex + 1];
+
+    if (searchedTerm)
+      return currentItem.dateShort != nextItem.dateShort;
+
+    return currentItem.time - nextItem.time > BROWSING_GAP_TIME &&
+        currentItem.dateRelativeDay == nextItem.dateRelativeDay;
+  };
+
+  return { HistoryItem: HistoryItem };
+});
+// 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.
+
+/**
+ * @constructor
+ * @param {string} currentPath
+ */
+var SelectionTreeNode = function(currentPath) {
+  /** @type {string} */
+  this.currentPath = currentPath;
+  /** @type {boolean} */
+  this.leaf = false;
+  /** @type {Array<number>} */
+  this.indexes = [];
+  /** @type {Array<SelectionTreeNode>} */
+  this.children = [];
 };
+
+/**
+ * @param {number} index
+ * @param {string} path
+ */
+SelectionTreeNode.prototype.addChild = function(index, path) {
+  this.indexes.push(index);
+  this.children[index] = new SelectionTreeNode(path);
+};
+
+/** @polymerBehavior */
+var HistoryListBehavior = {
+  properties: {
+    /**
+     * Polymer paths to the history items contained in this list.
+     * @type {Array<string>} selectedPaths
+     */
+    selectedPaths: {
+      type: Array,
+      value: /** @return {Array<string>} */ function() { return []; }
+    },
+  },
+
+  listeners: {
+    'history-checkbox-select': 'itemSelected_',
+  },
+
+  /**
+   * @param {number} historyDataLength
+   * @return {boolean}
+   * @private
+   */
+  hasResults: function(historyDataLength) { return historyDataLength > 0; },
+
+  /**
+   * @param {string} searchedTerm
+   * @param {boolean} isLoading
+   * @return {string}
+   * @private
+   */
+  noResultsMessage: function(searchedTerm, isLoading) {
+    if (isLoading)
+      return '';
+
+    var messageId = searchedTerm !== '' ? 'noSearchResults' : 'noResults';
+    return loadTimeData.getString(messageId);
+  },
+
+  /**
+   * Deselect each item in |selectedPaths|.
+   */
+  unselectAllItems: function() {
+    this.selectedPaths.forEach(function(path) {
+      this.set(path + '.selected', false);
+    }.bind(this));
+
+    this.selectedPaths = [];
+  },
+
+  /**
+   * Performs a request to the backend to delete all selected items. If
+   * successful, removes them from the view. Does not prompt the user before
+   * deleting -- see <history-list-container> for a version of this method which
+   * does prompt.
+   */
+  deleteSelected: function() {
+    var toBeRemoved = this.selectedPaths.map(function(path) {
+      return this.get(path);
+    }.bind(this));
+    md_history.BrowserService.getInstance()
+        .deleteItems(toBeRemoved)
+        .then(function() {
+          this.removeItemsByPath(this.selectedPaths);
+          this.fire('unselect-all');
+        }.bind(this));
+  },
+
+  /**
+   * Removes the history items in |paths|. Assumes paths are of a.0.b.0...
+   * structure.
+   *
+   * We want to use notifySplices to update the arrays for performance reasons
+   * which requires manually batching and sending the notifySplices for each
+   * level. To do this, we build a tree where each node is an array and then
+   * depth traverse it to remove items. Each time a node has all children
+   * deleted, we can also remove the node.
+   *
+   * @param {Array<string>} paths
+   * @private
+   */
+  removeItemsByPath: function(paths) {
+    if (paths.length == 0)
+      return;
+
+    this.removeItemsBeneathNode_(this.buildRemovalTree_(paths));
+  },
+
+  /**
+   * Creates the tree to traverse in order to remove |paths| from this list.
+   * Assumes paths are of a.0.b.0...
+   * structure.
+   *
+   * @param {Array<string>} paths
+   * @return {SelectionTreeNode}
+   * @private
+   */
+  buildRemovalTree_: function(paths) {
+    var rootNode = new SelectionTreeNode(paths[0].split('.')[0]);
+
+    // Build a tree to each history item specified in |paths|.
+    paths.forEach(function(path) {
+      var components = path.split('.');
+      var node = rootNode;
+      components.shift();
+      while (components.length > 1) {
+        var index = Number(components.shift());
+        var arrayName = components.shift();
+
+        if (!node.children[index])
+          node.addChild(index, [node.currentPath, index, arrayName].join('.'));
+
+        node = node.children[index];
+      }
+      node.leaf = true;
+      node.indexes.push(Number(components.shift()));
+    });
+
+    return rootNode;
+  },
+
+  /**
+   * Removes the history items underneath |node| and deletes container arrays as
+   * they become empty.
+   * @param {SelectionTreeNode} node
+   * @return {boolean} Whether this node's array should be deleted.
+   * @private
+   */
+  removeItemsBeneathNode_: function(node) {
+    var array = this.get(node.currentPath);
+    var splices = [];
+
+    node.indexes.sort(function(a, b) { return b - a; });
+    node.indexes.forEach(function(index) {
+      if (node.leaf || this.removeItemsBeneathNode_(node.children[index])) {
+        var item = array.splice(index, 1);
+        splices.push({
+          index: index,
+          removed: [item],
+          addedCount: 0,
+          object: array,
+          type: 'splice'
+        });
+      }
+    }.bind(this));
+
+    if (array.length == 0)
+      return true;
+
+    // notifySplices gives better performance than individually splicing as it
+    // batches all of the updates together.
+    this.notifySplices(node.currentPath, splices);
+    return false;
+  },
+
+  /**
+   * @param {Event} e
+   * @private
+   */
+  itemSelected_: function(e) {
+    var item = e.detail.element;
+    var path = item.path;
+    if (item.selected) {
+      this.push('selectedPaths', path);
+      return;
+    }
+
+    var index = this.selectedPaths.indexOf(path);
+    if (index != -1)
+      this.splice('selectedPaths', index, 1);
+  },
+};
+// 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.
+
+/**
+ * @typedef {{domain: string,
+ *            visits: !Array<HistoryEntry>,
+ *            rendered: boolean,
+ *            expanded: boolean}}
+ */
+var HistoryDomain;
+
+/**
+ * @typedef {{title: string,
+ *            domains: !Array<HistoryDomain>}}
+ */
+var HistoryGroup;
+
+Polymer({
+  is: 'history-grouped-list',
+
+  behaviors: [HistoryListBehavior],
+
+  properties: {
+    // An array of history entries in reverse chronological order.
+    historyData: {
+      type: Array,
+    },
+
+    /**
+     * @type {Array<HistoryGroup>}
+     */
+    groupedHistoryData_: {
+      type: Array,
+    },
+
+    searchedTerm: {
+      type: String,
+      value: ''
+    },
+
+    range: {
+      type: Number,
+    },
+
+    queryStartTime: String,
+    queryEndTime: String,
+  },
+
+  observers: [
+    'updateGroupedHistoryData_(range, historyData)'
+  ],
+
+  /**
+   * Make a list of domains from visits.
+   * @param {!Array<!HistoryEntry>} visits
+   * @return {!Array<!HistoryDomain>}
+   */
+  createHistoryDomains_: function(visits) {
+    var domainIndexes = {};
+    var domains = [];
+
+    // Group the visits into a dictionary and generate a list of domains.
+    for (var i = 0, visit; visit = visits[i]; i++) {
+      var domain = visit.domain;
+      if (domainIndexes[domain] == undefined) {
+        domainIndexes[domain] = domains.length;
+        domains.push({
+          domain: domain,
+          visits: [],
+          expanded: false,
+          rendered: false,
+        });
+      }
+      domains[domainIndexes[domain]].visits.push(visit);
+    }
+    var sortByVisits = function(a, b) {
+      return b.visits.length - a.visits.length;
+    };
+    domains.sort(sortByVisits);
+
+    return domains;
+  },
+
+  updateGroupedHistoryData_: function() {
+    if (this.historyData.length == 0) {
+      this.groupedHistoryData_ = [];
+      return;
+    }
+
+    if (this.range == HistoryRange.WEEK) {
+      // Group each day into a list of results.
+      var days = [];
+      var currentDayVisits = [this.historyData[0]];
+
+      var pushCurrentDay = function() {
+        days.push({
+          title: this.searchedTerm ? currentDayVisits[0].dateShort :
+              currentDayVisits[0].dateRelativeDay,
+          domains: this.createHistoryDomains_(currentDayVisits),
+        });
+      }.bind(this);
+
+      var visitsSameDay = function(a, b) {
+        if (this.searchedTerm)
+          return a.dateShort == b.dateShort;
+
+        return a.dateRelativeDay == b.dateRelativeDay;
+      }.bind(this);
+
+      for (var i = 1; i < this.historyData.length; i++) {
+        var visit = this.historyData[i];
+        if (!visitsSameDay(visit, currentDayVisits[0])) {
+          pushCurrentDay();
+          currentDayVisits = [];
+        }
+        currentDayVisits.push(visit);
+      }
+      pushCurrentDay();
+
+      this.groupedHistoryData_ = days;
+    } else if (this.range == HistoryRange.MONTH) {
+      // Group each all visits into a single list.
+      this.groupedHistoryData_ = [{
+        title: this.queryStartTime + ' – ' + this.queryEndTime,
+        domains: this.createHistoryDomains_(this.historyData)
+      }];
+    }
+  },
+
+  /**
+   * @param {{model:Object, currentTarget:IronCollapseElement}} e
+   */
+  toggleDomainExpanded_: function(e) {
+    var collapse = e.currentTarget.parentNode.querySelector('iron-collapse');
+    e.model.set('domain.rendered', true);
+
+    // Give the history-items time to render.
+    setTimeout(function() { collapse.toggle() }, 0);
+  },
+
+  /**
+   * Check whether the time difference between the given history item and the
+   * next one is large enough for a spacer to be required.
+   * @param {number} groupIndex
+   * @param {number} domainIndex
+   * @param {number} itemIndex
+   * @return {boolean} Whether or not time gap separator is required.
+   * @private
+   */
+  needsTimeGap_: function(groupIndex, domainIndex, itemIndex) {
+    var visits =
+        this.groupedHistoryData_[groupIndex].domains[domainIndex].visits;
+
+    return md_history.HistoryItem.needsTimeGap(
+        visits, itemIndex, this.searchedTerm);
+  },
+
+  /**
+   * @param {number} groupIndex
+   * @param {number} domainIndex
+   * @param {number} itemIndex
+   * @return {string}
+   * @private
+   */
+  pathForItem_: function(groupIndex, domainIndex, itemIndex) {
+    return [
+      'groupedHistoryData_', groupIndex, 'domains', domainIndex, 'visits',
+      itemIndex
+    ].join('.');
+  },
+
+  /**
+   * @param {HistoryDomain} domain
+   * @return {string}
+   * @private
+   */
+  getWebsiteIconStyle_: function(domain) {
+    return 'background-image: ' +
+        cr.icon.getFaviconImageSet(domain.visits[0].url);
+  },
+
+  /**
+   * @param {boolean} expanded
+   * @return {string}
+   * @private
+   */
+  getDropdownIcon_: function(expanded) {
+    return expanded ? 'cr:expand-less' : 'cr:expand-more';
+  },
+});
+/**
+   * `Polymer.IronScrollTargetBehavior` allows an element to respond to scroll events from a
+   * designated scroll target.
+   *
+   * Elements that consume this behavior can override the `_scrollHandler`
+   * method to add logic on the scroll event.
+   *
+   * @demo demo/scrolling-region.html Scrolling Region
+   * @demo demo/document.html Document Element
+   * @polymerBehavior
+   */
+  Polymer.IronScrollTargetBehavior = {
+
+    properties: {
+
+      /**
+       * Specifies the element that will handle the scroll event
+       * on the behalf of the current element. This is typically a reference to an element,
+       * but there are a few more posibilities:
+       *
+       * ### Elements id
+       *
+       *```html
+       * <div id="scrollable-element" style="overflow: auto;">
+       *  <x-element scroll-target="scrollable-element">
+       *    \x3c!-- Content--\x3e
+       *  </x-element>
+       * </div>
+       *```
+       * In this case, the `scrollTarget` will point to the outer div element.
+       *
+       * ### Document scrolling
+       *
+       * For document scrolling, you can use the reserved word `document`:
+       *
+       *```html
+       * <x-element scroll-target="document">
+       *   \x3c!-- Content --\x3e
+       * </x-element>
+       *```
+       *
+       * ### Elements reference
+       *
+       *```js
+       * appHeader.scrollTarget = document.querySelector('#scrollable-element');
+       *```
+       *
+       * @type {HTMLElement}
+       */
+      scrollTarget: {
+        type: HTMLElement,
+        value: function() {
+          return this._defaultScrollTarget;
+        }
+      }
+    },
+
+    observers: [
+      '_scrollTargetChanged(scrollTarget, isAttached)'
+    ],
+
+    _scrollTargetChanged: function(scrollTarget, isAttached) {
+      var eventTarget;
+
+      if (this._oldScrollTarget) {
+        eventTarget = this._oldScrollTarget === this._doc ? window : this._oldScrollTarget;
+        eventTarget.removeEventListener('scroll', this._boundScrollHandler);
+        this._oldScrollTarget = null;
+      }
+
+      if (!isAttached) {
+        return;
+      }
+      // Support element id references
+      if (scrollTarget === 'document') {
+
+        this.scrollTarget = this._doc;
+
+      } else if (typeof scrollTarget === 'string') {
+
+        this.scrollTarget = this.domHost ? this.domHost.$[scrollTarget] :
+            Polymer.dom(this.ownerDocument).querySelector('#' + scrollTarget);
+
+      } else if (this._isValidScrollTarget()) {
+
+        eventTarget = scrollTarget === this._doc ? window : scrollTarget;
+        this._boundScrollHandler = this._boundScrollHandler || this._scrollHandler.bind(this);
+        this._oldScrollTarget = scrollTarget;
+
+        eventTarget.addEventListener('scroll', this._boundScrollHandler);
+      }
+    },
+
+    /**
+     * Runs on every scroll event. Consumer of this behavior may override this method.
+     *
+     * @protected
+     */
+    _scrollHandler: function scrollHandler() {},
+
+    /**
+     * The default scroll target. Consumers of this behavior may want to customize
+     * the default scroll target.
+     *
+     * @type {Element}
+     */
+    get _defaultScrollTarget() {
+      return this._doc;
+    },
+
+    /**
+     * Shortcut for the document element
+     *
+     * @type {Element}
+     */
+    get _doc() {
+      return this.ownerDocument.documentElement;
+    },
+
+    /**
+     * Gets the number of pixels that the content of an element is scrolled upward.
+     *
+     * @type {number}
+     */
+    get _scrollTop() {
+      if (this._isValidScrollTarget()) {
+        return this.scrollTarget === this._doc ? window.pageYOffset : this.scrollTarget.scrollTop;
+      }
+      return 0;
+    },
+
+    /**
+     * Gets the number of pixels that the content of an element is scrolled to the left.
+     *
+     * @type {number}
+     */
+    get _scrollLeft() {
+      if (this._isValidScrollTarget()) {
+        return this.scrollTarget === this._doc ? window.pageXOffset : this.scrollTarget.scrollLeft;
+      }
+      return 0;
+    },
+
+    /**
+     * Sets the number of pixels that the content of an element is scrolled upward.
+     *
+     * @type {number}
+     */
+    set _scrollTop(top) {
+      if (this.scrollTarget === this._doc) {
+        window.scrollTo(window.pageXOffset, top);
+      } else if (this._isValidScrollTarget()) {
+        this.scrollTarget.scrollTop = top;
+      }
+    },
+
+    /**
+     * Sets the number of pixels that the content of an element is scrolled to the left.
+     *
+     * @type {number}
+     */
+    set _scrollLeft(left) {
+      if (this.scrollTarget === this._doc) {
+        window.scrollTo(left, window.pageYOffset);
+      } else if (this._isValidScrollTarget()) {
+        this.scrollTarget.scrollLeft = left;
+      }
+    },
+
+    /**
+     * Scrolls the content to a particular place.
+     *
+     * @method scroll
+     * @param {number} left The left position
+     * @param {number} top The top position
+     */
+    scroll: function(left, top) {
+       if (this.scrollTarget === this._doc) {
+        window.scrollTo(left, top);
+      } else if (this._isValidScrollTarget()) {
+        this.scrollTarget.scrollLeft = left;
+        this.scrollTarget.scrollTop = top;
+      }
+    },
+
+    /**
+     * Gets the width of the scroll target.
+     *
+     * @type {number}
+     */
+    get _scrollTargetWidth() {
+      if (this._isValidScrollTarget()) {
+        return this.scrollTarget === this._doc ? window.innerWidth : this.scrollTarget.offsetWidth;
+      }
+      return 0;
+    },
+
+    /**
+     * Gets the height of the scroll target.
+     *
+     * @type {number}
+     */
+    get _scrollTargetHeight() {
+      if (this._isValidScrollTarget()) {
+        return this.scrollTarget === this._doc ? window.innerHeight : this.scrollTarget.offsetHeight;
+      }
+      return 0;
+    },
+
+    /**
+     * Returns true if the scroll target is a valid HTMLElement.
+     *
+     * @return {boolean}
+     */
+    _isValidScrollTarget: function() {
+      return this.scrollTarget instanceof HTMLElement;
+    }
+  };
 (function() {
-      'use strict';
-
-      Polymer.IronA11yAnnouncer = Polymer({
-        is: 'iron-a11y-announcer',
-
-        properties: {
-
-          /**
-           * The value of mode is used to set the `aria-live` attribute
-           * for the element that will be announced. Valid values are: `off`,
-           * `polite` and `assertive`.
-           */
-          mode: {
-            type: String,
-            value: 'polite'
-          },
-
-          _text: {
-            type: String,
-            value: ''
-          }
-        },
-
-        created: function() {
-          if (!Polymer.IronA11yAnnouncer.instance) {
-            Polymer.IronA11yAnnouncer.instance = this;
-          }
-
-          document.body.addEventListener('iron-announce', this._onIronAnnounce.bind(this));
-        },
-
-        /**
-         * Cause a text string to be announced by screen readers.
-         *
-         * @param {string} text The text that should be announced.
-         */
-        announce: function(text) {
-          this._text = '';
-          this.async(function() {
-            this._text = text;
-          }, 100);
-        },
-
-        _onIronAnnounce: function(event) {
-          if (event.detail && event.detail.text) {
-            this.announce(event.detail.text);
-          }
-        }
-      });
-
-      Polymer.IronA11yAnnouncer.instance = null;
-
-      Polymer.IronA11yAnnouncer.requestAvailability = function() {
-        if (!Polymer.IronA11yAnnouncer.instance) {
-          Polymer.IronA11yAnnouncer.instance = document.createElement('iron-a11y-announcer');
-        }
-
-        document.body.appendChild(Polymer.IronA11yAnnouncer.instance);
-      };
-    })();
-/**
-   * Singleton IronMeta instance.
-   */
-  Polymer.IronValidatableBehaviorMeta = null;
-
-  /**
-   * `Use Polymer.IronValidatableBehavior` to implement an element that validates user input.
-   * Use the related `Polymer.IronValidatorBehavior` to add custom validation logic to an iron-input.
-   *
-   * By default, an `<iron-form>` element validates its fields when the user presses the submit button.
-   * To validate a form imperatively, call the form's `validate()` method, which in turn will
-   * call `validate()` on all its children. By using `Polymer.IronValidatableBehavior`, your
-   * custom element will get a public `validate()`, which
-   * will return the validity of the element, and a corresponding `invalid` attribute,
-   * which can be used for styling.
-   *
-   * To implement the custom validation logic of your element, you must override
-   * the protected `_getValidity()` method of this behaviour, rather than `validate()`.
-   * See [this](https://github.com/PolymerElements/iron-form/blob/master/demo/simple-element.html)
-   * for an example.
-   *
-   * ### Accessibility
-   *
-   * Changing the `invalid` property, either manually or by calling `validate()` will update the
-   * `aria-invalid` attribute.
-   *
-   * @demo demo/index.html
-   * @polymerBehavior
-   */
-  Polymer.IronValidatableBehavior = {
+
+  var IOS = navigator.userAgent.match(/iP(?:hone|ad;(?: U;)? CPU) OS (\d+)/);
+  var IOS_TOUCH_SCROLLING = IOS && IOS[1] >= 8;
+  var DEFAULT_PHYSICAL_COUNT = 3;
+  var HIDDEN_Y = '-10000px';
+  var DEFAULT_GRID_SIZE = 200;
+  var SECRET_TABINDEX = -100;
+
+  Polymer({
+
+    is: 'iron-list',
 
     properties: {
 
       /**
-       * Name of the validator to use.
+       * An array containing items determining how many instances of the template
+       * to stamp and that that each template instance should bind to.
        */
-      validator: {
-        type: String
+      items: {
+        type: Array
       },
 
       /**
-       * True if the last call to `validate` is invalid.
+       * The max count of physical items the pool can extend to.
        */
-      invalid: {
-        notify: true,
-        reflectToAttribute: true,
+      maxPhysicalCount: {
+        type: Number,
+        value: 500
+      },
+
+      /**
+       * The name of the variable to add to the binding scope for the array
+       * element associated with a given template instance.
+       */
+      as: {
+        type: String,
+        value: 'item'
+      },
+
+      /**
+       * The name of the variable to add to the binding scope with the index
+       * for the row.
+       */
+      indexAs: {
+        type: String,
+        value: 'index'
+      },
+
+      /**
+       * The name of the variable to add to the binding scope to indicate
+       * if the row is selected.
+       */
+      selectedAs: {
+        type: String,
+        value: 'selected'
+      },
+
+      /**
+       * When true, the list is rendered as a grid. Grid items must have
+       * fixed width and height set via CSS. e.g.
+       *
+       * ```html
+       * <iron-list grid>
+       *   <template>
+       *      <div style="width: 100px; height: 100px;"> 100x100 </div>
+       *   </template>
+       * </iron-list>
+       * ```
+       */
+      grid: {
+        type: Boolean,
+        value: false,
+        reflectToAttribute: true
+      },
+
+      /**
+       * When true, tapping a row will select the item, placing its data model
+       * in the set of selected items retrievable via the selection property.
+       *
+       * Note that tapping focusable elements within the list item will not
+       * result in selection, since they are presumed to have their * own action.
+       */
+      selectionEnabled: {
         type: Boolean,
         value: false
       },
 
       /**
-       * This property is deprecated and should not be used. Use the global
-       * validator meta singleton, `Polymer.IronValidatableBehaviorMeta` instead.
+       * When `multiSelection` is false, this is the currently selected item, or `null`
+       * if no item is selected.
        */
-      _validatorMeta: {
-        type: Object
+      selectedItem: {
+        type: Object,
+        notify: true
       },
 
       /**
-       * Namespace for this validator. This property is deprecated and should
-       * not be used. For all intents and purposes, please consider it a
-       * read-only, config-time property.
+       * When `multiSelection` is true, this is an array that contains the selected items.
        */
-      validatorType: {
-        type: String,
-        value: 'validator'
-      },
-
-      _validator: {
+      selectedItems: {
         type: Object,
-        computed: '__computeValidator(validator)'
-      }
-    },
-
-    observers: [
-      '_invalidChanged(invalid)'
-    ],
-
-    registered: function() {
-      Polymer.IronValidatableBehaviorMeta = new Polymer.IronMeta({type: 'validator'});
-    },
-
-    _invalidChanged: function() {
-      if (this.invalid) {
-        this.setAttribute('aria-invalid', 'true');
-      } else {
-        this.removeAttribute('aria-invalid');
-      }
-    },
-
-    /**
-     * @return {boolean} True if the validator `validator` exists.
-     */
-    hasValidator: function() {
-      return this._validator != null;
-    },
-
-    /**
-     * Returns true if the `value` is valid, and updates `invalid`. If you want
-     * your element to have custom validation logic, do not override this method;
-     * override `_getValidity(value)` instead.
-
-     * @param {Object} value The value to be validated. By default, it is passed
-     * to the validator's `validate()` function, if a validator is set.
-     * @return {boolean} True if `value` is valid.
-     */
-    validate: function(value) {
-      this.invalid = !this._getValidity(value);
-      return !this.invalid;
-    },
-
-    /**
-     * Returns true if `value` is valid.  By default, it is passed
-     * to the validator's `validate()` function, if a validator is set. You
-     * should override this method if you want to implement custom validity
-     * logic for your element.
-     *
-     * @param {Object} value The value to be validated.
-     * @return {boolean} True if `value` is valid.
-     */
-
-    _getValidity: function(value) {
-      if (this.hasValidator()) {
-        return this._validator.validate(value);
-      }
-      return true;
-    },
-
-    __computeValidator: function() {
-      return Polymer.IronValidatableBehaviorMeta &&
-          Polymer.IronValidatableBehaviorMeta.byKey(this.validator);
-    }
-  };
-/*
-`<iron-input>` adds two-way binding and custom validators using `Polymer.IronValidatorBehavior`
-to `<input>`.
-
-### Two-way binding
-
-By default you can only get notified of changes to an `input`'s `value` due to user input:
-
-    <input value="{{myValue::input}}">
-
-`iron-input` adds the `bind-value` property that mirrors the `value` property, and can be used
-for two-way data binding. `bind-value` will notify if it is changed either by user input or by script.
-
-    <input is="iron-input" bind-value="{{myValue}}">
-
-### Custom validators
-
-You can use custom validators that implement `Polymer.IronValidatorBehavior` with `<iron-input>`.
-
-    <input is="iron-input" validator="my-custom-validator">
-
-### Stopping invalid input
-
-It may be desirable to only allow users to enter certain characters. You can use the
-`prevent-invalid-input` and `allowed-pattern` attributes together to accomplish this. This feature
-is separate from validation, and `allowed-pattern` does not affect how the input is validated.
-
-    \x3c!-- only allow characters that match [0-9] --\x3e
-    <input is="iron-input" prevent-invalid-input allowed-pattern="[0-9]">
-
-@hero hero.svg
-@demo demo/index.html
-*/
-
-  Polymer({
-
-    is: 'iron-input',
-
-    extends: 'input',
-
-    behaviors: [
-      Polymer.IronValidatableBehavior
-    ],
-
-    properties: {
+        notify: true
+      },
 
       /**
-       * Use this property instead of `value` for two-way data binding.
+       * When `true`, multiple items may be selected at once (in this case,
+       * `selected` is an array of currently selected items).  When `false`,
+       * only one item may be selected at a time.
        */
-      bindValue: {
-        observer: '_bindValueChanged',
-        type: String
-      },
-
-      /**
-       * Set to true to prevent the user from entering invalid input. If `allowedPattern` is set,
-       * any character typed by the user will be matched against that pattern, and rejected if it's not a match.
-       * Pasted input will have each character checked individually; if any character
-       * doesn't match `allowedPattern`, the entire pasted string will be rejected.
-       * If `allowedPattern` is not set, it will use the `type` attribute (only supported for `type=number`).
-       */
-      preventInvalidInput: {
-        type: Boolean
-      },
-
-      /**
-       * Regular expression that list the characters allowed as input.
-       * This pattern represents the allowed characters for the field; as the user inputs text,
-       * each individual character will be checked against the pattern (rather than checking
-       * the entire value as a whole). The recommended format should be a list of allowed characters;
-       * for example, `[a-zA-Z0-9.+-!;:]`
-       */
-      allowedPattern: {
-        type: String,
-        observer: "_allowedPatternChanged"
-      },
-
-      _previousValidInput: {
-        type: String,
-        value: ''
-      },
-
-      _patternAlreadyChecked: {
+      multiSelection: {
         type: Boolean,
         value: false
       }
-
-    },
-
-    listeners: {
-      'input': '_onInput',
-      'keypress': '_onKeypress'
-    },
-
-    /** @suppress {checkTypes} */
-    registered: function() {
-      // Feature detect whether we need to patch dispatchEvent (i.e. on FF and IE).
-      if (!this._canDispatchEventOnDisabled()) {
-        this._origDispatchEvent = this.dispatchEvent;
-        this.dispatchEvent = this._dispatchEventFirefoxIE;
-      }
-    },
-
-    created: function() {
-      Polymer.IronA11yAnnouncer.requestAvailability();
-    },
-
-    _canDispatchEventOnDisabled: function() {
-      var input = document.createElement('input');
-      var canDispatch = false;
-      input.disabled = true;
-
-      input.addEventListener('feature-check-dispatch-event', function() {
-        canDispatch = true;
-      });
-
-      try {
-        input.dispatchEvent(new Event('feature-check-dispatch-event'));
-      } catch(e) {}
-
-      return canDispatch;
-    },
-
-    _dispatchEventFirefoxIE: function() {
-      // Due to Firefox bug, events fired on disabled form controls can throw
-      // errors; furthermore, neither IE nor Firefox will actually dispatch
-      // events from disabled form controls; as such, we toggle disable around
-      // the dispatch to allow notifying properties to notify
-      // See issue #47 for details
-      var disabled = this.disabled;
-      this.disabled = false;
-      this._origDispatchEvent.apply(this, arguments);
-      this.disabled = disabled;
-    },
-
-    get _patternRegExp() {
-      var pattern;
-      if (this.allowedPattern) {
-        pattern = new RegExp(this.allowedPattern);
+    },
+
+    observers: [
+      '_itemsChanged(items.*)',
+      '_selectionEnabledChanged(selectionEnabled)',
+      '_multiSelectionChanged(multiSelection)',
+      '_setOverflow(scrollTarget)'
+    ],
+
+    behaviors: [
+      Polymer.Templatizer,
+      Polymer.IronResizableBehavior,
+      Polymer.IronA11yKeysBehavior,
+      Polymer.IronScrollTargetBehavior
+    ],
+
+    keyBindings: {
+      'up': '_didMoveUp',
+      'down': '_didMoveDown',
+      'enter': '_didEnter'
+    },
+
+    /**
+     * The ratio of hidden tiles that should remain in the scroll direction.
+     * Recommended value ~0.5, so it will distribute tiles evely in both directions.
+     */
+    _ratio: 0.5,
+
+    /**
+     * The padding-top value for the list.
+     */
+    _scrollerPaddingTop: 0,
+
+    /**
+     * This value is the same as `scrollTop`.
+     */
+    _scrollPosition: 0,
+
+    /**
+     * The sum of the heights of all the tiles in the DOM.
+     */
+    _physicalSize: 0,
+
+    /**
+     * The average `offsetHeight` of the tiles observed till now.
+     */
+    _physicalAverage: 0,
+
+    /**
+     * The number of tiles which `offsetHeight` > 0 observed until now.
+     */
+    _physicalAverageCount: 0,
+
+    /**
+     * The Y position of the item rendered in the `_physicalStart`
+     * tile relative to the scrolling list.
+     */
+    _physicalTop: 0,
+
+    /**
+     * The number of items in the list.
+     */
+    _virtualCount: 0,
+
+    /**
+     * A map between an item key and its physical item index
+     */
+    _physicalIndexForKey: null,
+
+    /**
+     * The estimated scroll height based on `_physicalAverage`
+     */
+    _estScrollHeight: 0,
+
+    /**
+     * The scroll height of the dom node
+     */
+    _scrollHeight: 0,
+
+    /**
+     * The height of the list. This is referred as the viewport in the context of list.
+     */
+    _viewportHeight: 0,
+
+    /**
+     * The width of the list. This is referred as the viewport in the context of list.
+     */
+    _viewportWidth: 0,
+
+    /**
+     * An array of DOM nodes that are currently in the tree
+     * @type {?Array<!TemplatizerNode>}
+     */
+    _physicalItems: null,
+
+    /**
+     * An array of heights for each item in `_physicalItems`
+     * @type {?Array<number>}
+     */
+    _physicalSizes: null,
+
+    /**
+     * A cached value for the first visible index.
+     * See `firstVisibleIndex`
+     * @type {?number}
+     */
+    _firstVisibleIndexVal: null,
+
+    /**
+     * A cached value for the last visible index.
+     * See `lastVisibleIndex`
+     * @type {?number}
+     */
+    _lastVisibleIndexVal: null,
+
+    /**
+     * A Polymer collection for the items.
+     * @type {?Polymer.Collection}
+     */
+    _collection: null,
+
+    /**
+     * True if the current item list was rendered for the first time
+     * after attached.
+     */
+    _itemsRendered: false,
+
+    /**
+     * The page that is currently rendered.
+     */
+    _lastPage: null,
+
+    /**
+     * The max number of pages to render. One page is equivalent to the height of the list.
+     */
+    _maxPages: 3,
+
+    /**
+     * The currently focused physical item.
+     */
+    _focusedItem: null,
+
+    /**
+     * The index of the `_focusedItem`.
+     */
+    _focusedIndex: -1,
+
+    /**
+     * The the item that is focused if it is moved offscreen.
+     * @private {?TemplatizerNode}
+     */
+    _offscreenFocusedItem: null,
+
+    /**
+     * The item that backfills the `_offscreenFocusedItem` in the physical items
+     * list when that item is moved offscreen.
+     */
+    _focusBackfillItem: null,
+
+    /**
+     * The maximum items per row
+     */
+    _itemsPerRow: 1,
+
+    /**
+     * The width of each grid item
+     */
+    _itemWidth: 0,
+
+    /**
+     * The height of the row in grid layout.
+     */
+    _rowHeight: 0,
+
+    /**
+     * The bottom of the physical content.
+     */
+    get _physicalBottom() {
+      return this._physicalTop + this._physicalSize;
+    },
+
+    /**
+     * The bottom of the scroll.
+     */
+    get _scrollBottom() {
+      return this._scrollPosition + this._viewportHeight;
+    },
+
+    /**
+     * The n-th item rendered in the last physical item.
+     */
+    get _virtualEnd() {
+      return this._virtualStart + this._physicalCount - 1;
+    },
+
+    /**
+     * The height of the physical content that isn't on the screen.
+     */
+    get _hiddenContentSize() {
+      var size = this.grid ? this._physicalRows * this._rowHeight : this._physicalSize;
+      return size - this._viewportHeight;
+    },
+
+    /**
+     * The maximum scroll top value.
+     */
+    get _maxScrollTop() {
+      return this._estScrollHeight - this._viewportHeight + this._scrollerPaddingTop;
+    },
+
+    /**
+     * The lowest n-th value for an item such that it can be rendered in `_physicalStart`.
+     */
+    _minVirtualStart: 0,
+
+    /**
+     * The largest n-th value for an item such that it can be rendered in `_physicalStart`.
+     */
+    get _maxVirtualStart() {
+      return Math.max(0, this._virtualCount - this._physicalCount);
+    },
+
+    /**
+     * The n-th item rendered in the `_physicalStart` tile.
+     */
+    _virtualStartVal: 0,
+
+    set _virtualStart(val) {
+      this._virtualStartVal = Math.min(this._maxVirtualStart, Math.max(this._minVirtualStart, val));
+    },
+
+    get _virtualStart() {
+      return this._virtualStartVal || 0;
+    },
+
+    /**
+     * The k-th tile that is at the top of the scrolling list.
+     */
+    _physicalStartVal: 0,
+
+    set _physicalStart(val) {
+      this._physicalStartVal = val % this._physicalCount;
+      if (this._physicalStartVal < 0) {
+        this._physicalStartVal = this._physicalCount + this._physicalStartVal;
+      }
+      this._physicalEnd = (this._physicalStart + this._physicalCount - 1) % this._physicalCount;
+    },
+
+    get _physicalStart() {
+      return this._physicalStartVal || 0;
+    },
+
+    /**
+     * The number of tiles in the DOM.
+     */
+    _physicalCountVal: 0,
+
+    set _physicalCount(val) {
+      this._physicalCountVal = val;
+      this._physicalEnd = (this._physicalStart + this._physicalCount - 1) % this._physicalCount;
+    },
+
+    get _physicalCount() {
+      return this._physicalCountVal;
+    },
+
+    /**
+     * The k-th tile that is at the bottom of the scrolling list.
+     */
+    _physicalEnd: 0,
+
+    /**
+     * An optimal physical size such that we will have enough physical items
+     * to fill up the viewport and recycle when the user scrolls.
+     *
+     * This default value assumes that we will at least have the equivalent
+     * to a viewport of physical items above and below the user's viewport.
+     */
+    get _optPhysicalSize() {
+      if (this.grid) {
+        return this._estRowsInView * this._rowHeight * this._maxPages;
+      }
+      return this._viewportHeight * this._maxPages;
+    },
+
+    get _optPhysicalCount() {
+      return this._estRowsInView * this._itemsPerRow * this._maxPages;
+    },
+
+   /**
+    * True if the current list is visible.
+    */
+    get _isVisible() {
+      return this.scrollTarget && Boolean(this.scrollTarget.offsetWidth || this.scrollTarget.offsetHeight);
+    },
+
+    /**
+     * Gets the index of the first visible item in the viewport.
+     *
+     * @type {number}
+     */
+    get firstVisibleIndex() {
+      if (this._firstVisibleIndexVal === null) {
+        var physicalOffset = Math.floor(this._physicalTop + this._scrollerPaddingTop);
+
+        this._firstVisibleIndexVal = this._iterateItems(
+          function(pidx, vidx) {
+            physicalOffset += this._getPhysicalSizeIncrement(pidx);
+
+            if (physicalOffset > this._scrollPosition) {
+              return this.grid ? vidx - (vidx % this._itemsPerRow) : vidx;
+            }
+            // Handle a partially rendered final row in grid mode
+            if (this.grid && this._virtualCount - 1 === vidx) {
+              return vidx - (vidx % this._itemsPerRow);
+            }
+          }) || 0;
+      }
+      return this._firstVisibleIndexVal;
+    },
+
+    /**
+     * Gets the index of the last visible item in the viewport.
+     *
+     * @type {number}
+     */
+    get lastVisibleIndex() {
+      if (this._lastVisibleIndexVal === null) {
+        if (this.grid) {
+          var lastIndex = this.firstVisibleIndex + this._estRowsInView * this._itemsPerRow - 1;
+          this._lastVisibleIndexVal = Math.min(this._virtualCount, lastIndex);
+        } else {
+          var physicalOffset = this._physicalTop;
+          this._iterateItems(function(pidx, vidx) {
+            if (physicalOffset < this._scrollBottom) {
+              this._lastVisibleIndexVal = vidx;
+            } else {
+              // Break _iterateItems
+              return true;
+            }
+            physicalOffset += this._getPhysicalSizeIncrement(pidx);
+          });
+        }
+      }
+      return this._lastVisibleIndexVal;
+    },
+
+    get _defaultScrollTarget() {
+      return this;
+    },
+    get _virtualRowCount() {
+      return Math.ceil(this._virtualCount / this._itemsPerRow);
+    },
+
+    get _estRowsInView() {
+      return Math.ceil(this._viewportHeight / this._rowHeight);
+    },
+
+    get _physicalRows() {
+      return Math.ceil(this._physicalCount / this._itemsPerRow);
+    },
+
+    ready: function() {
+      this.addEventListener('focus', this._didFocus.bind(this), true);
+    },
+
+    attached: function() {
+      this.updateViewportBoundaries();
+      this._render();
+      // `iron-resize` is fired when the list is attached if the event is added
+      // before attached causing unnecessary work.
+      this.listen(this, 'iron-resize', '_resizeHandler');
+    },
+
+    detached: function() {
+      this._itemsRendered = false;
+      this.unlisten(this, 'iron-resize', '_resizeHandler');
+    },
+
+    /**
+     * Set the overflow property if this element has its own scrolling region
+     */
+    _setOverflow: function(scrollTarget) {
+      this.style.webkitOverflowScrolling = scrollTarget === this ? 'touch' : '';
+      this.style.overflow = scrollTarget === this ? 'auto' : '';
+    },
+
+    /**
+     * Invoke this method if you dynamically update the viewport's
+     * size or CSS padding.
+     *
+     * @method updateViewportBoundaries
+     */
+    updateViewportBoundaries: function() {
+      this._scrollerPaddingTop = this.scrollTarget === this ? 0 :
+          parseInt(window.getComputedStyle(this)['padding-top'], 10);
+
+      this._viewportHeight = this._scrollTargetHeight;
+      if (this.grid) {
+        this._updateGridMetrics();
+      }
+    },
+
+    /**
+     * Update the models, the position of the
+     * items in the viewport and recycle tiles as needed.
+     */
+    _scrollHandler: function() {
+      // clamp the `scrollTop` value
+      var scrollTop = Math.max(0, Math.min(this._maxScrollTop, this._scrollTop));
+      var delta = scrollTop - this._scrollPosition;
+      var tileHeight, tileTop, kth, recycledTileSet, scrollBottom, physicalBottom;
+      var ratio = this._ratio;
+      var recycledTiles = 0;
+      var hiddenContentSize = this._hiddenContentSize;
+      var currentRatio = ratio;
+      var movingUp = [];
+
+      // track the last `scrollTop`
+      this._scrollPosition = scrollTop;
+
+      // clear cached visible indexes
+      this._firstVisibleIndexVal = null;
+      this._lastVisibleIndexVal = null;
+
+      scrollBottom = this._scrollBottom;
+      physicalBottom = this._physicalBottom;
+
+      // random access
+      if (Math.abs(delta) > this._physicalSize) {
+        this._physicalTop += delta;
+        recycledTiles =  Math.round(delta / this._physicalAverage);
+      }
+      // scroll up
+      else if (delta < 0) {
+        var topSpace = scrollTop - this._physicalTop;
+        var virtualStart = this._virtualStart;
+
+        recycledTileSet = [];
+
+        kth = this._physicalEnd;
+        currentRatio = topSpace / hiddenContentSize;
+
+        // move tiles from bottom to top
+        while (
+            // approximate `currentRatio` to `ratio`
+            currentRatio < ratio &&
+            // recycle less physical items than the total
+            recycledTiles < this._physicalCount &&
+            // ensure that these recycled tiles are needed
+            virtualStart - recycledTiles > 0 &&
+            // ensure that the tile is not visible
+            physicalBottom - this._getPhysicalSizeIncrement(kth) > scrollBottom
+        ) {
+
+          tileHeight = this._getPhysicalSizeIncrement(kth);
+          currentRatio += tileHeight / hiddenContentSize;
+          physicalBottom -= tileHeight;
+          recycledTileSet.push(kth);
+          recycledTiles++;
+          kth = (kth === 0) ? this._physicalCount - 1 : kth - 1;
+        }
+
+        movingUp = recycledTileSet;
+        recycledTiles = -recycledTiles;
+      }
+      // scroll down
+      else if (delta > 0) {
+        var bottomSpace = physicalBottom - scrollBottom;
+        var virtualEnd = this._virtualEnd;
+        var lastVirtualItemIndex = this._virtualCount-1;
+
+        recycledTileSet = [];
+
+        kth = this._physicalStart;
+        currentRatio = bottomSpace / hiddenContentSize;
+
+        // move tiles from top to bottom
+        while (
+            // approximate `currentRatio` to `ratio`
+            currentRatio < ratio &&
+            // recycle less physical items than the total
+            recycledTiles < this._physicalCount &&
+            // ensure that these recycled tiles are needed
+            virtualEnd + recycledTiles < lastVirtualItemIndex &&
+            // ensure that the tile is not visible
+            this._physicalTop + this._getPhysicalSizeIncrement(kth) < scrollTop
+          ) {
+
+          tileHeight = this._getPhysicalSizeIncrement(kth);
+          currentRatio += tileHeight / hiddenContentSize;
+
+          this._physicalTop += tileHeight;
+          recycledTileSet.push(kth);
+          recycledTiles++;
+          kth = (kth + 1) % this._physicalCount;
+        }
+      }
+
+      if (recycledTiles === 0) {
+        // Try to increase the pool if the list's client height isn't filled up with physical items
+        if (physicalBottom < scrollBottom || this._physicalTop > scrollTop) {
+          this._increasePoolIfNeeded();
+        }
       } else {
-        switch (this.type) {
-          case 'number':
-            pattern = /[0-9.,e-]/;
-            break;
-        }
-      }
-      return pattern;
-    },
-
-    ready: function() {
-      this.bindValue = this.value;
-    },
-
-    /**
-     * @suppress {checkTypes}
-     */
-    _bindValueChanged: function() {
-      if (this.value !== this.bindValue) {
-        this.value = !(this.bindValue || this.bindValue === 0 || this.bindValue === false) ? '' : this.bindValue;
-      }
-      // manually notify because we don't want to notify until after setting value
-      this.fire('bind-value-changed', {value: this.bindValue});
-    },
-
-    _allowedPatternChanged: function() {
-      // Force to prevent invalid input when an `allowed-pattern` is set
-      this.preventInvalidInput = this.allowedPattern ? true : false;
-    },
-
-    _onInput: function() {
-      // Need to validate each of the characters pasted if they haven't
-      // been validated inside `_onKeypress` already.
-      if (this.preventInvalidInput && !this._patternAlreadyChecked) {
-        var valid = this._checkPatternValidity();
-        if (!valid) {
-          this._announceInvalidCharacter('Invalid string of characters not entered.');
-          this.value = this._previousValidInput;
-        }
-      }
-
-      this.bindValue = this.value;
-      this._previousValidInput = this.value;
-      this._patternAlreadyChecked = false;
-    },
-
-    _isPrintable: function(event) {
-      // What a control/printable character is varies wildly based on the browser.
-      // - most control characters (arrows, backspace) do not send a `keypress` event
-      //   in Chrome, but the *do* on Firefox
-      // - in Firefox, when they do send a `keypress` event, control chars have
-      //   a charCode = 0, keyCode = xx (for ex. 40 for down arrow)
-      // - printable characters always send a keypress event.
-      // - in Firefox, printable chars always have a keyCode = 0. In Chrome, the keyCode
-      //   always matches the charCode.
-      // None of this makes any sense.
-
-      // For these keys, ASCII code == browser keycode.
-      var anyNonPrintable =
-        (event.keyCode == 8)   ||  // backspace
-        (event.keyCode == 9)   ||  // tab
-        (event.keyCode == 13)  ||  // enter
-        (event.keyCode == 27);     // escape
-
-      // For these keys, make sure it's a browser keycode and not an ASCII code.
-      var mozNonPrintable =
-        (event.keyCode == 19)  ||  // pause
-        (event.keyCode == 20)  ||  // caps lock
-        (event.keyCode == 45)  ||  // insert
-        (event.keyCode == 46)  ||  // delete
-        (event.keyCode == 144) ||  // num lock
-        (event.keyCode == 145) ||  // scroll lock
-        (event.keyCode > 32 && event.keyCode < 41)   || // page up/down, end, home, arrows
-        (event.keyCode > 111 && event.keyCode < 124); // fn keys
-
-      return !anyNonPrintable && !(event.charCode == 0 && mozNonPrintable);
-    },
-
-    _onKeypress: function(event) {
-      if (!this.preventInvalidInput && this.type !== 'number') {
+        this._virtualStart = this._virtualStart + recycledTiles;
+        this._physicalStart = this._physicalStart + recycledTiles;
+        this._update(recycledTileSet, movingUp);
+      }
+    },
+
+    /**
+     * Update the list of items, starting from the `_virtualStart` item.
+     * @param {!Array<number>=} itemSet
+     * @param {!Array<number>=} movingUp
+     */
+    _update: function(itemSet, movingUp) {
+      // manage focus
+      this._manageFocus();
+      // update models
+      this._assignModels(itemSet);
+      // measure heights
+      this._updateMetrics(itemSet);
+      // adjust offset after measuring
+      if (movingUp) {
+        while (movingUp.length) {
+          var idx = movingUp.pop();
+          this._physicalTop -= this._getPhysicalSizeIncrement(idx);
+        }
+      }
+      // update the position of the items
+      this._positionItems();
+      // set the scroller size
+      this._updateScrollerSize();
+      // increase the pool of physical items
+      this._increasePoolIfNeeded();
+    },
+
+    /**
+     * Creates a pool of DOM elements and attaches them to the local dom.
+     */
+    _createPool: function(size) {
+      var physicalItems = new Array(size);
+
+      this._ensureTemplatized();
+
+      for (var i = 0; i < size; i++) {
+        var inst = this.stamp(null);
+        // First element child is item; Safari doesn't support children[0]
+        // on a doc fragment
+        physicalItems[i] = inst.root.querySelector('*');
+        Polymer.dom(this).appendChild(inst.root);
+      }
+      return physicalItems;
+    },
+
+    /**
+     * Increases the pool of physical items only if needed.
+     *
+     * @return {boolean} True if the pool was increased.
+     */
+    _increasePoolIfNeeded: function() {
+      // Base case 1: the list has no height.
+      if (this._viewportHeight === 0) {
+        return false;
+      }
+      // Base case 2: If the physical size is optimal and the list's client height is full
+      // with physical items, don't increase the pool.
+      var isClientHeightFull = this._physicalBottom >= this._scrollBottom && this._physicalTop <= this._scrollPosition;
+      if (this._physicalSize >= this._optPhysicalSize && isClientHeightFull) {
+        return false;
+      }
+      // this value should range between [0 <= `currentPage` <= `_maxPages`]
+      var currentPage = Math.floor(this._physicalSize / this._viewportHeight);
+
+      if (currentPage === 0) {
+        // fill the first page
+        this._debounceTemplate(this._increasePool.bind(this, Math.round(this._physicalCount * 0.5)));
+      } else if (this._lastPage !== currentPage && isClientHeightFull) {
+        // paint the page and defer the next increase
+        // wait 16ms which is rough enough to get paint cycle.
+        Polymer.dom.addDebouncer(this.debounce('_debounceTemplate', this._increasePool.bind(this, this._itemsPerRow), 16));
+      } else {
+        // fill the rest of the pages
+        this._debounceTemplate(this._increasePool.bind(this, this._itemsPerRow));
+      }
+
+      this._lastPage = currentPage;
+
+      return true;
+    },
+
+    /**
+     * Increases the pool size.
+     */
+    _increasePool: function(missingItems) {
+      var nextPhysicalCount = Math.min(
+          this._physicalCount + missingItems,
+          this._virtualCount - this._virtualStart,
+          Math.max(this.maxPhysicalCount, DEFAULT_PHYSICAL_COUNT)
+        );
+      var prevPhysicalCount = this._physicalCount;
+      var delta = nextPhysicalCount - prevPhysicalCount;
+
+      if (delta <= 0) {
         return;
       }
-      var regexp = this._patternRegExp;
-      if (!regexp) {
+
+      [].push.apply(this._physicalItems, this._createPool(delta));
+      [].push.apply(this._physicalSizes, new Array(delta));
+
+      this._physicalCount = prevPhysicalCount + delta;
+
+      // update the physical start if we need to preserve the model of the focused item.
+      // In this situation, the focused item is currently rendered and its model would
+      // have changed after increasing the pool if the physical start remained unchanged.
+      if (this._physicalStart > this._physicalEnd &&
+          this._isIndexRendered(this._focusedIndex) &&
+          this._getPhysicalIndex(this._focusedIndex) < this._physicalEnd) {
+        this._physicalStart = this._physicalStart + delta;
+      }
+      this._update();
+    },
+
+    /**
+     * Render a new list of items. This method does exactly the same as `update`,
+     * but it also ensures that only one `update` cycle is created.
+     */
+    _render: function() {
+      var requiresUpdate = this._virtualCount > 0 || this._physicalCount > 0;
+
+      if (this.isAttached && !this._itemsRendered && this._isVisible && requiresUpdate) {
+        this._lastPage = 0;
+        this._update();
+        this._itemsRendered = true;
+      }
+    },
+
+    /**
+     * Templetizes the user template.
+     */
+    _ensureTemplatized: function() {
+      if (!this.ctor) {
+        // Template instance props that should be excluded from forwarding
+        var props = {};
+        props.__key__ = true;
+        props[this.as] = true;
+        props[this.indexAs] = true;
+        props[this.selectedAs] = true;
+        props.tabIndex = true;
+
+        this._instanceProps = props;
+        this._userTemplate = Polymer.dom(this).querySelector('template');
+
+        if (this._userTemplate) {
+          this.templatize(this._userTemplate);
+        } else {
+          console.warn('iron-list requires a template to be provided in light-dom');
+        }
+      }
+    },
+
+    /**
+     * Implements extension point from Templatizer mixin.
+     */
+    _getStampedChildren: function() {
+      return this._physicalItems;
+    },
+
+    /**
+     * Implements extension point from Templatizer
+     * Called as a side effect of a template instance path change, responsible
+     * for notifying items.<key-for-instance>.<path> change up to host.
+     */
+    _forwardInstancePath: function(inst, path, value) {
+      if (path.indexOf(this.as + '.') === 0) {
+        this.notifyPath('items.' + inst.__key__ + '.' +
+          path.slice(this.as.length + 1), value);
+      }
+    },
+
+    /**
+     * Implements extension point from Templatizer mixin
+     * Called as side-effect of a host property change, responsible for
+     * notifying parent path change on each row.
+     */
+    _forwardParentProp: function(prop, value) {
+      if (this._physicalItems) {
+        this._physicalItems.forEach(function(item) {
+          item._templateInstance[prop] = value;
+        }, this);
+      }
+    },
+
+    /**
+     * Implements extension point from Templatizer
+     * Called as side-effect of a host path change, responsible for
+     * notifying parent.<path> path change on each row.
+     */
+    _forwardParentPath: function(path, value) {
+      if (this._physicalItems) {
+        this._physicalItems.forEach(function(item) {
+          item._templateInstance.notifyPath(path, value, true);
+        }, this);
+      }
+    },
+
+    /**
+     * Called as a side effect of a host items.<key>.<path> path change,
+     * responsible for notifying item.<path> changes.
+     */
+    _forwardItemPath: function(path, value) {
+      if (!this._physicalIndexForKey) {
         return;
       }
-
-      // Handle special keys and backspace
-      if (event.metaKey || event.ctrlKey || event.altKey)
+      var dot = path.indexOf('.');
+      var key = path.substring(0, dot < 0 ? path.length : dot);
+      var idx = this._physicalIndexForKey[key];
+      var offscreenItem = this._offscreenFocusedItem;
+      var el = offscreenItem && offscreenItem._templateInstance.__key__ === key ?
+          offscreenItem : this._physicalItems[idx];
+
+      if (!el || el._templateInstance.__key__ !== key) {
         return;
-
-      // Check the pattern either here or in `_onInput`, but not in both.
-      this._patternAlreadyChecked = true;
-
-      var thisChar = String.fromCharCode(event.charCode);
-      if (this._isPrintable(event) && !regexp.test(thisChar)) {
-        event.preventDefault();
-        this._announceInvalidCharacter('Invalid character ' + thisChar + ' not entered.');
-      }
-    },
-
-    _checkPatternValidity: function() {
-      var regexp = this._patternRegExp;
-      if (!regexp) {
-        return true;
-      }
-      for (var i = 0; i < this.value.length; i++) {
-        if (!regexp.test(this.value[i])) {
-          return false;
-        }
-      }
-      return true;
-    },
-
-    /**
-     * Returns true if `value` is valid. The validator provided in `validator` will be used first,
-     * then any constraints.
-     * @return {boolean} True if the value is valid.
-     */
-    validate: function() {
-      // First, check what the browser thinks. Some inputs (like type=number)
-      // behave weirdly and will set the value to "" if something invalid is
-      // entered, but will set the validity correctly.
-      var valid =  this.checkValidity();
-
-      // Only do extra checking if the browser thought this was valid.
-      if (valid) {
-        // Empty, required input is invalid
-        if (this.required && this.value === '') {
-          valid = false;
-        } else if (this.hasValidator()) {
-          valid = Polymer.IronValidatableBehavior.validate.call(this, this.value);
-        }
-      }
-
-      this.invalid = !valid;
-      this.fire('iron-input-validate');
-      return valid;
-    },
-
-    _announceInvalidCharacter: function(message) {
-      this.fire('iron-announce', { text: message });
+      }
+      if (dot >= 0) {
+        path = this.as + '.' + path.substring(dot+1);
+        el._templateInstance.notifyPath(path, value, true);
+      } else {
+        // Update selection if needed
+        var currentItem = el._templateInstance[this.as];
+        if (Array.isArray(this.selectedItems)) {
+          for (var i = 0; i < this.selectedItems.length; i++) {
+            if (this.selectedItems[i] === currentItem) {
+              this.set('selectedItems.' + i, value);
+              break;
+            }
+          }
+        } else if (this.selectedItem === currentItem) {
+          this.set('selectedItem', value);
+        }
+        el._templateInstance[this.as] = value;
+      }
+    },
+
+    /**
+     * Called when the items have changed. That is, ressignments
+     * to `items`, splices or updates to a single item.
+     */
+    _itemsChanged: function(change) {
+      if (change.path === 'items') {
+        // reset items
+        this._virtualStart = 0;
+        this._physicalTop = 0;
+        this._virtualCount = this.items ? this.items.length : 0;
+        this._collection = this.items ? Polymer.Collection.get(this.items) : null;
+        this._physicalIndexForKey = {};
+        this._firstVisibleIndexVal = null;
+        this._lastVisibleIndexVal = null;
+
+        this._resetScrollPosition(0);
+        this._removeFocusedItem();
+        // create the initial physical items
+        if (!this._physicalItems) {
+          this._physicalCount = Math.max(1, Math.min(DEFAULT_PHYSICAL_COUNT, this._virtualCount));
+          this._physicalItems = this._createPool(this._physicalCount);
+          this._physicalSizes = new Array(this._physicalCount);
+        }
+
+        this._physicalStart = 0;
+
+      } else if (change.path === 'items.splices') {
+
+        this._adjustVirtualIndex(change.value.indexSplices);
+        this._virtualCount = this.items ? this.items.length : 0;
+
+      } else {
+        // update a single item
+        this._forwardItemPath(change.path.split('.').slice(1).join('.'), change.value);
+        return;
+      }
+
+      this._itemsRendered = false;
+      this._debounceTemplate(this._render);
+    },
+
+    /**
+     * @param {!Array<!PolymerSplice>} splices
+     */
+    _adjustVirtualIndex: function(splices) {
+      splices.forEach(function(splice) {
+        // deselect removed items
+        splice.removed.forEach(this._removeItem, this);
+        // We only need to care about changes happening above the current position
+        if (splice.index < this._virtualStart) {
+          var delta = Math.max(
+              splice.addedCount - splice.removed.length,
+              splice.index - this._virtualStart);
+
+          this._virtualStart = this._virtualStart + delta;
+
+          if (this._focusedIndex >= 0) {
+            this._focusedIndex = this._focusedIndex + delta;
+          }
+        }
+      }, this);
+    },
+
+    _removeItem: function(item) {
+      this.$.selector.deselect(item);
+      // remove the current focused item
+      if (this._focusedItem && this._focusedItem._templateInstance[this.as] === item) {
+        this._removeFocusedItem();
+      }
+    },
+
+    /**
+     * Executes a provided function per every physical index in `itemSet`
+     * `itemSet` default value is equivalent to the entire set of physical indexes.
+     *
+     * @param {!function(number, number)} fn
+     * @param {!Array<number>=} itemSet
+     */
+    _iterateItems: function(fn, itemSet) {
+      var pidx, vidx, rtn, i;
+
+      if (arguments.length === 2 && itemSet) {
+        for (i = 0; i < itemSet.length; i++) {
+          pidx = itemSet[i];
+          vidx = this._computeVidx(pidx);
+          if ((rtn = fn.call(this, pidx, vidx)) != null) {
+            return rtn;
+          }
+        }
+      } else {
+        pidx = this._physicalStart;
+        vidx = this._virtualStart;
+
+        for (; pidx < this._physicalCount; pidx++, vidx++) {
+          if ((rtn = fn.call(this, pidx, vidx)) != null) {
+            return rtn;
+          }
+        }
+        for (pidx = 0; pidx < this._physicalStart; pidx++, vidx++) {
+          if ((rtn = fn.call(this, pidx, vidx)) != null) {
+            return rtn;
+          }
+        }
+      }
+    },
+
+    /**
+     * Returns the virtual index for a given physical index
+     *
+     * @param {number} pidx Physical index
+     * @return {number}
+     */
+    _computeVidx: function(pidx) {
+      if (pidx >= this._physicalStart) {
+        return this._virtualStart + (pidx - this._physicalStart);
+      }
+      return this._virtualStart + (this._physicalCount - this._physicalStart) + pidx;
+    },
+
+    /**
+     * Assigns the data models to a given set of items.
+     * @param {!Array<number>=} itemSet
+     */
+    _assignModels: function(itemSet) {
+      this._iterateItems(function(pidx, vidx) {
+        var el = this._physicalItems[pidx];
+        var inst = el._templateInstance;
+        var item = this.items && this.items[vidx];
+
+        if (item != null) {
+          inst[this.as] = item;
+          inst.__key__ = this._collection.getKey(item);
+          inst[this.selectedAs] = /** @type {!ArraySelectorElement} */ (this.$.selector).isSelected(item);
+          inst[this.indexAs] = vidx;
+          inst.tabIndex = this._focusedIndex === vidx ? 0 : -1;
+          this._physicalIndexForKey[inst.__key__] = pidx;
+          el.removeAttribute('hidden');
+        } else {
+          inst.__key__ = null;
+          el.setAttribute('hidden', '');
+        }
+      }, itemSet);
+    },
+
+    /**
+     * Updates the height for a given set of items.
+     *
+     * @param {!Array<number>=} itemSet
+     */
+     _updateMetrics: function(itemSet) {
+      // Make sure we distributed all the physical items
+      // so we can measure them
+      Polymer.dom.flush();
+
+      var newPhysicalSize = 0;
+      var oldPhysicalSize = 0;
+      var prevAvgCount = this._physicalAverageCount;
+      var prevPhysicalAvg = this._physicalAverage;
+
+      this._iterateItems(function(pidx, vidx) {
+
+        oldPhysicalSize += this._physicalSizes[pidx] || 0;
+        this._physicalSizes[pidx] = this._physicalItems[pidx].offsetHeight;
+        newPhysicalSize += this._physicalSizes[pidx];
+        this._physicalAverageCount += this._physicalSizes[pidx] ? 1 : 0;
+
+      }, itemSet);
+
+      this._viewportHeight = this._scrollTargetHeight;
+      if (this.grid) {
+        this._updateGridMetrics();
+        this._physicalSize = Math.ceil(this._physicalCount / this._itemsPerRow) * this._rowHeight;
+      } else {
+        this._physicalSize = this._physicalSize + newPhysicalSize - oldPhysicalSize;
+      }
+
+      // update the average if we measured something
+      if (this._physicalAverageCount !== prevAvgCount) {
+        this._physicalAverage = Math.round(
+            ((prevPhysicalAvg * prevAvgCount) + newPhysicalSize) /
+            this._physicalAverageCount);
+      }
+    },
+
+    _updateGridMetrics: function() {
+      this._viewportWidth = this.$.items.offsetWidth;
+      // Set item width to the value of the _physicalItems offsetWidth
+      this._itemWidth = this._physicalCount > 0 ? this._physicalItems[0].getBoundingClientRect().width : DEFAULT_GRID_SIZE;
+      // Set row height to the value of the _physicalItems offsetHeight
+      this._rowHeight = this._physicalCount > 0 ? this._physicalItems[0].offsetHeight : DEFAULT_GRID_SIZE;
+      // If in grid mode compute how many items with exist in each row
+      this._itemsPerRow = this._itemWidth ? Math.floor(this._viewportWidth / this._itemWidth) : this._itemsPerRow;
+    },
+
+    /**
+     * Updates the position of the physical items.
+     */
+    _positionItems: function() {
+      this._adjustScrollPosition();
+
+      var y = this._physicalTop;
+
+      if (this.grid) {
+        var totalItemWidth = this._itemsPerRow * this._itemWidth;
+        var rowOffset = (this._viewportWidth - totalItemWidth) / 2;
+
+        this._iterateItems(function(pidx, vidx) {
+
+          var modulus = vidx % this._itemsPerRow;
+          var x = Math.floor((modulus * this._itemWidth) + rowOffset);
+
+          this.translate3d(x + 'px', y + 'px', 0, this._physicalItems[pidx]);
+
+          if (this._shouldRenderNextRow(vidx)) {
+            y += this._rowHeight;
+          }
+
+        });
+      } else {
+        this._iterateItems(function(pidx, vidx) {
+
+          this.translate3d(0, y + 'px', 0, this._physicalItems[pidx]);
+          y += this._physicalSizes[pidx];
+
+        });
+      }
+    },
+
+    _getPhysicalSizeIncrement: function(pidx) {
+      if (!this.grid) {
+        return this._physicalSizes[pidx];
+      }
+      if (this._computeVidx(pidx) % this._itemsPerRow !== this._itemsPerRow - 1) {
+        return 0;
+      }
+      return this._rowHeight;
+    },
+
+    /**
+     * Returns, based on the current index,
+     * whether or not the next index will need
+     * to be rendered on a new row.
+     *
+     * @param {number} vidx Virtual index
+     * @return {boolean}
+     */
+    _shouldRenderNextRow: function(vidx) {
+      return vidx % this._itemsPerRow === this._itemsPerRow - 1;
+    },
+
+    /**
+     * Adjusts the scroll position when it was overestimated.
+     */
+    _adjustScrollPosition: function() {
+      var deltaHeight = this._virtualStart === 0 ? this._physicalTop :
+          Math.min(this._scrollPosition + this._physicalTop, 0);
+
+      if (deltaHeight) {
+        this._physicalTop = this._physicalTop - deltaHeight;
+        // juking scroll position during interial scrolling on iOS is no bueno
+        if (!IOS_TOUCH_SCROLLING && this._physicalTop !== 0) {
+          this._resetScrollPosition(this._scrollTop - deltaHeight);
+        }
+      }
+    },
+
+    /**
+     * Sets the position of the scroll.
+     */
+    _resetScrollPosition: function(pos) {
+      if (this.scrollTarget) {
+        this._scrollTop = pos;
+        this._scrollPosition = this._scrollTop;
+      }
+    },
+
+    /**
+     * Sets the scroll height, that's the height of the content,
+     *
+     * @param {boolean=} forceUpdate If true, updates the height no matter what.
+     */
+    _updateScrollerSize: function(forceUpdate) {
+      if (this.grid) {
+        this._estScrollHeight = this._virtualRowCount * this._rowHeight;
+      } else {
+        this._estScrollHeight = (this._physicalBottom +
+            Math.max(this._virtualCount - this._physicalCount - this._virtualStart, 0) * this._physicalAverage);
+      }
+
+      forceUpdate = forceUpdate || this._scrollHeight === 0;
+      forceUpdate = forceUpdate || this._scrollPosition >= this._estScrollHeight - this._physicalSize;
+      forceUpdate = forceUpdate || this.grid && this.$.items.style.height < this._estScrollHeight;
+
+      // amortize height adjustment, so it won't trigger repaints very often
+      if (forceUpdate || Math.abs(this._estScrollHeight - this._scrollHeight) >= this._optPhysicalSize) {
+        this.$.items.style.height = this._estScrollHeight + 'px';
+        this._scrollHeight = this._estScrollHeight;
+      }
+    },
+
+    /**
+     * Scroll to a specific item in the virtual list regardless
+     * of the physical items in the DOM tree.
+     *
+     * @method scrollToItem
+     * @param {(Object)} item The item to be scrolled to
+     */
+    scrollToItem: function(item){
+      return this.scrollToIndex(this.items.indexOf(item));
+    },
+
+    /**
+     * Scroll to a specific index in the virtual list regardless
+     * of the physical items in the DOM tree.
+     *
+     * @method scrollToIndex
+     * @param {number} idx The index of the item
+     */
+    scrollToIndex: function(idx) {
+      if (typeof idx !== 'number' || idx < 0 || idx > this.items.length - 1) {
+        return;
+      }
+
+      Polymer.dom.flush();
+
+      idx = Math.min(Math.max(idx, 0), this._virtualCount-1);
+      // update the virtual start only when needed
+      if (!this._isIndexRendered(idx) || idx >= this._maxVirtualStart) {
+        this._virtualStart = this.grid ? (idx - this._itemsPerRow * 2) : (idx - 1);
+      }
+      // manage focus
+      this._manageFocus();
+      // assign new models
+      this._assignModels();
+      // measure the new sizes
+      this._updateMetrics();
+
+      // estimate new physical offset
+      var estPhysicalTop = Math.floor(this._virtualStart / this._itemsPerRow)  * this._physicalAverage;
+      this._physicalTop = estPhysicalTop;
+
+      var currentTopItem = this._physicalStart;
+      var currentVirtualItem = this._virtualStart;
+      var targetOffsetTop = 0;
+      var hiddenContentSize = this._hiddenContentSize;
+
+      // scroll to the item as much as we can
+      while (currentVirtualItem < idx && targetOffsetTop <= hiddenContentSize) {
+        targetOffsetTop = targetOffsetTop + this._getPhysicalSizeIncrement(currentTopItem);
+        currentTopItem = (currentTopItem + 1) % this._physicalCount;
+        currentVirtualItem++;
+      }
+      // update the scroller size
+      this._updateScrollerSize(true);
+      // update the position of the items
+      this._positionItems();
+      // set the new scroll position
+      this._resetScrollPosition(this._physicalTop + this._scrollerPaddingTop + targetOffsetTop);
+      // increase the pool of physical items if needed
+      this._increasePoolIfNeeded();
+      // clear cached visible index
+      this._firstVisibleIndexVal = null;
+      this._lastVisibleIndexVal = null;
+    },
+
+    /**
+     * Reset the physical average and the average count.
+     */
+    _resetAverage: function() {
+      this._physicalAverage = 0;
+      this._physicalAverageCount = 0;
+    },
+
+    /**
+     * A handler for the `iron-resize` event triggered by `IronResizableBehavior`
+     * when the element is resized.
+     */
+    _resizeHandler: function() {
+      // iOS fires the resize event when the address bar slides up
+      if (IOS && Math.abs(this._viewportHeight - this._scrollTargetHeight) < 100) {
+        return;
+      }
+      // In Desktop Safari 9.0.3, if the scroll bars are always shown,
+      // changing the scroll position from a resize handler would result in
+      // the scroll position being reset. Waiting 1ms fixes the issue.
+      Polymer.dom.addDebouncer(this.debounce('_debounceTemplate', function() {
+        this.updateViewportBoundaries();
+        this._render();
+
+        if (this._itemsRendered && this._physicalItems && this._isVisible) {
+          this._resetAverage();
+          this.scrollToIndex(this.firstVisibleIndex);
+        }
+      }.bind(this), 1));
+    },
+
+    _getModelFromItem: function(item) {
+      var key = this._collection.getKey(item);
+      var pidx = this._physicalIndexForKey[key];
+
+      if (pidx != null) {
+        return this._physicalItems[pidx]._templateInstance;
+      }
+      return null;
+    },
+
+    /**
+     * Gets a valid item instance from its index or the object value.
+     *
+     * @param {(Object|number)} item The item object or its index
+     */
+    _getNormalizedItem: function(item) {
+      if (this._collection.getKey(item) === undefined) {
+        if (typeof item === 'number') {
+          item = this.items[item];
+          if (!item) {
+            throw new RangeError('<item> not found');
+          }
+          return item;
+        }
+        throw new TypeError('<item> should be a valid item');
+      }
+      return item;
+    },
+
+    /**
+     * Select the list item at the given index.
+     *
+     * @method selectItem
+     * @param {(Object|number)} item The item object or its index
+     */
+    selectItem: function(item) {
+      item = this._getNormalizedItem(item);
+      var model = this._getModelFromItem(item);
+
+      if (!this.multiSelection && this.selectedItem) {
+        this.deselectItem(this.selectedItem);
+      }
+      if (model) {
+        model[this.selectedAs] = true;
+      }
+      this.$.selector.select(item);
+      this.updateSizeForItem(item);
+    },
+
+    /**
+     * Deselects the given item list if it is already selected.
+     *
+
+     * @method deselect
+     * @param {(Object|number)} item The item object or its index
+     */
+    deselectItem: function(item) {
+      item = this._getNormalizedItem(item);
+      var model = this._getModelFromItem(item);
+
+      if (model) {
+        model[this.selectedAs] = false;
+      }
+      this.$.selector.deselect(item);
+      this.updateSizeForItem(item);
+    },
+
+    /**
+     * Select or deselect a given item depending on whether the item
+     * has already been selected.
+     *
+     * @method toggleSelectionForItem
+     * @param {(Object|number)} item The item object or its index
+     */
+    toggleSelectionForItem: function(item) {
+      item = this._getNormalizedItem(item);
+      if (/** @type {!ArraySelectorElement} */ (this.$.selector).isSelected(item)) {
+        this.deselectItem(item);
+      } else {
+        this.selectItem(item);
+      }
+    },
+
+    /**
+     * Clears the current selection state of the list.
+     *
+     * @method clearSelection
+     */
+    clearSelection: function() {
+      function unselect(item) {
+        var model = this._getModelFromItem(item);
+        if (model) {
+          model[this.selectedAs] = false;
+        }
+      }
+
+      if (Array.isArray(this.selectedItems)) {
+        this.selectedItems.forEach(unselect, this);
+      } else if (this.selectedItem) {
+        unselect.call(this, this.selectedItem);
+      }
+
+      /** @type {!ArraySelectorElement} */ (this.$.selector).clearSelection();
+    },
+
+    /**
+     * Add an event listener to `tap` if `selectionEnabled` is true,
+     * it will remove the listener otherwise.
+     */
+    _selectionEnabledChanged: function(selectionEnabled) {
+      var handler = selectionEnabled ? this.listen : this.unlisten;
+      handler.call(this, this, 'tap', '_selectionHandler');
+    },
+
+    /**
+     * Select an item from an event object.
+     */
+    _selectionHandler: function(e) {
+      var model = this.modelForElement(e.target);
+      if (!model) {
+        return;
+      }
+      var modelTabIndex, activeElTabIndex;
+      var target = Polymer.dom(e).path[0];
+      var activeEl = Polymer.dom(this.domHost ? this.domHost.root : document).activeElement;
+      var physicalItem = this._physicalItems[this._getPhysicalIndex(model[this.indexAs])];
+      // Safari does not focus certain form controls via mouse
+      // https://bugs.webkit.org/show_bug.cgi?id=118043
+      if (target.localName === 'input' ||
+          target.localName === 'button' ||
+          target.localName === 'select') {
+        return;
+      }
+      // Set a temporary tabindex
+      modelTabIndex = model.tabIndex;
+      model.tabIndex = SECRET_TABINDEX;
+      activeElTabIndex = activeEl ? activeEl.tabIndex : -1;
+      model.tabIndex = modelTabIndex;
+      // Only select the item if the tap wasn't on a focusable child
+      // or the element bound to `tabIndex`
+      if (activeEl && physicalItem.contains(activeEl) && activeElTabIndex !== SECRET_TABINDEX) {
+        return;
+      }
+      this.toggleSelectionForItem(model[this.as]);
+    },
+
+    _multiSelectionChanged: function(multiSelection) {
+      this.clearSelection();
+      this.$.selector.multi = multiSelection;
+    },
+
+    /**
+     * Updates the size of an item.
+     *
+     * @method updateSizeForItem
+     * @param {(Object|number)} item The item object or its index
+     */
+    updateSizeForItem: function(item) {
+      item = this._getNormalizedItem(item);
+      var key = this._collection.getKey(item);
+      var pidx = this._physicalIndexForKey[key];
+
+      if (pidx != null) {
+        this._updateMetrics([pidx]);
+        this._positionItems();
+      }
+    },
+
+    /**
+     * Creates a temporary backfill item in the rendered pool of physical items
+     * to replace the main focused item. The focused item has tabIndex = 0
+     * and might be currently focused by the user.
+     *
+     * This dynamic replacement helps to preserve the focus state.
+     */
+    _manageFocus: function() {
+      var fidx = this._focusedIndex;
+
+      if (fidx >= 0 && fidx < this._virtualCount) {
+        // if it's a valid index, check if that index is rendered
+        // in a physical item.
+        if (this._isIndexRendered(fidx)) {
+          this._restoreFocusedItem();
+        } else {
+          this._createFocusBackfillItem();
+        }
+      } else if (this._virtualCount > 0 && this._physicalCount > 0) {
+        // otherwise, assign the initial focused index.
+        this._focusedIndex = this._virtualStart;
+        this._focusedItem = this._physicalItems[this._physicalStart];
+      }
+    },
+
+    _isIndexRendered: function(idx) {
+      return idx >= this._virtualStart && idx <= this._virtualEnd;
+    },
+
+    _isIndexVisible: function(idx) {
+      return idx >= this.firstVisibleIndex && idx <= this.lastVisibleIndex;
+    },
+
+    _getPhysicalIndex: function(idx) {
+      return this._physicalIndexForKey[this._collection.getKey(this._getNormalizedItem(idx))];
+    },
+
+    _focusPhysicalItem: function(idx) {
+      if (idx < 0 || idx >= this._virtualCount) {
+        return;
+      }
+      this._restoreFocusedItem();
+      // scroll to index to make sure it's rendered
+      if (!this._isIndexRendered(idx)) {
+        this.scrollToIndex(idx);
+      }
+
+      var physicalItem = this._physicalItems[this._getPhysicalIndex(idx)];
+      var model = physicalItem._templateInstance;
+      var focusable;
+
+      // set a secret tab index
+      model.tabIndex = SECRET_TABINDEX;
+      // check if focusable element is the physical item
+      if (physicalItem.tabIndex === SECRET_TABINDEX) {
+       focusable = physicalItem;
+      }
+      // search for the element which tabindex is bound to the secret tab index
+      if (!focusable) {
+        focusable = Polymer.dom(physicalItem).querySelector('[tabindex="' + SECRET_TABINDEX + '"]');
+      }
+      // restore the tab index
+      model.tabIndex = 0;
+      // focus the focusable element
+      this._focusedIndex = idx;
+      focusable && focusable.focus();
+    },
+
+    _removeFocusedItem: function() {
+      if (this._offscreenFocusedItem) {
+        Polymer.dom(this).removeChild(this._offscreenFocusedItem);
+      }
+      this._offscreenFocusedItem = null;
+      this._focusBackfillItem = null;
+      this._focusedItem = null;
+      this._focusedIndex = -1;
+    },
+
+    _createFocusBackfillItem: function() {
+      var pidx, fidx = this._focusedIndex;
+      if (this._offscreenFocusedItem || fidx < 0) {
+        return;
+      }
+      if (!this._focusBackfillItem) {
+        // create a physical item, so that it backfills the focused item.
+        var stampedTemplate = this.stamp(null);
+        this._focusBackfillItem = stampedTemplate.root.querySelector('*');
+        Polymer.dom(this).appendChild(stampedTemplate.root);
+      }
+      // get the physical index for the focused index
+      pidx = this._getPhysicalIndex(fidx);
+
+      if (pidx != null) {
+        // set the offcreen focused physical item
+        this._offscreenFocusedItem = this._physicalItems[pidx];
+        // backfill the focused physical item
+        this._physicalItems[pidx] = this._focusBackfillItem;
+        // hide the focused physical
+        this.translate3d(0, HIDDEN_Y, 0, this._offscreenFocusedItem);
+      }
+    },
+
+    _restoreFocusedItem: function() {
+      var pidx, fidx = this._focusedIndex;
+
+      if (!this._offscreenFocusedItem || this._focusedIndex < 0) {
+        return;
+      }
+      // assign models to the focused index
+      this._assignModels();
+      // get the new physical index for the focused index
+      pidx = this._getPhysicalIndex(fidx);
+
+      if (pidx != null) {
+        // flip the focus backfill
+        this._focusBackfillItem = this._physicalItems[pidx];
+        // restore the focused physical item
+        this._physicalItems[pidx] = this._offscreenFocusedItem;
+        // reset the offscreen focused item
+        this._offscreenFocusedItem = null;
+        // hide the physical item that backfills
+        this.translate3d(0, HIDDEN_Y, 0, this._focusBackfillItem);
+      }
+    },
+
+    _didFocus: function(e) {
+      var targetModel = this.modelForElement(e.target);
+      var focusedModel = this._focusedItem ? this._focusedItem._templateInstance : null;
+      var hasOffscreenFocusedItem = this._offscreenFocusedItem !== null;
+      var fidx = this._focusedIndex;
+
+      if (!targetModel || !focusedModel) {
+        return;
+      }
+      if (focusedModel === targetModel) {
+        // if the user focused the same item, then bring it into view if it's not visible
+        if (!this._isIndexVisible(fidx)) {
+          this.scrollToIndex(fidx);
+        }
+      } else {
+        this._restoreFocusedItem();
+        // restore tabIndex for the currently focused item
+        focusedModel.tabIndex = -1;
+        // set the tabIndex for the next focused item
+        targetModel.tabIndex = 0;
+        fidx = targetModel[this.indexAs];
+        this._focusedIndex = fidx;
+        this._focusedItem = this._physicalItems[this._getPhysicalIndex(fidx)];
+
+        if (hasOffscreenFocusedItem && !this._offscreenFocusedItem) {
+          this._update();
+        }
+      }
+    },
+
+    _didMoveUp: function() {
+      this._focusPhysicalItem(this._focusedIndex - 1);
+    },
+
+    _didMoveDown: function(e) {
+      // disable scroll when pressing the down key
+      e.detail.keyboardEvent.preventDefault();
+      this._focusPhysicalItem(this._focusedIndex + 1);
+    },
+
+    _didEnter: function(e) {
+      this._focusPhysicalItem(this._focusedIndex);
+      this._selectionHandler(e.detail.keyboardEvent);
     }
   });
 
-  /*
-  The `iron-input-validate` event is fired whenever `validate()` is called.
-  @event iron-input-validate
-  */
+})();
 Polymer({
-    is: 'paper-input-container',
+
+    is: 'iron-scroll-threshold',
 
     properties: {
+
       /**
-       * Set to true to disable the floating label. The label disappears when the input value is
-       * not null.
+       * Distance from the top (or left, for horizontal) bound of the scroller
+       * where the "upper trigger" will fire.
        */
-      noLabelFloat: {
+      upperThreshold: {
+        type: Number,
+        value: 100
+      },
+
+      /**
+       * Distance from the bottom (or right, for horizontal) bound of the scroller
+       * where the "lower trigger" will fire.
+       */
+      lowerThreshold: {
+        type: Number,
+        value: 100
+      },
+
+      /**
+       * Read-only value that tracks the triggered state of the upper threshold.
+       */
+      upperTriggered: {
+        type: Boolean,
+        value: false,
+        notify: true,
+        readOnly: true
+      },
+
+      /**
+       * Read-only value that tracks the triggered state of the lower threshold.
+       */
+      lowerTriggered: {
+        type: Boolean,
+        value: false,
+        notify: true,
+        readOnly: true
+      },
+
+      /**
+       * True if the orientation of the scroller is horizontal.
+       */
+      horizontal: {
         type: Boolean,
         value: false
-      },
-
-      /**
-       * Set to true to always float the floating label.
-       */
-      alwaysFloatLabel: {
-        type: Boolean,
-        value: false
-      },
-
-      /**
-       * The attribute to listen for value changes on.
-       */
-      attrForValue: {
-        type: String,
-        value: 'bind-value'
-      },
-
-      /**
-       * Set to true to auto-validate the input value when it changes.
-       */
-      autoValidate: {
-        type: Boolean,
-        value: false
-      },
-
-      /**
-       * True if the input is invalid. This property is set automatically when the input value
-       * changes if auto-validating, or when the `iron-input-validate` event is heard from a child.
-       */
-      invalid: {
-        observer: '_invalidChanged',
-        type: Boolean,
-        value: false
-      },
-
-      /**
-       * True if the input has focus.
-       */
-      focused: {
-        readOnly: true,
-        type: Boolean,
-        value: false,
-        notify: true
-      },
-
-      _addons: {
-        type: Array
-        // do not set a default value here intentionally - it will be initialized lazily when a
-        // distributed child is attached, which may occur before configuration for this element
-        // in polyfill.
-      },
-
-      _inputHasContent: {
-        type: Boolean,
-        value: false
-      },
-
-      _inputSelector: {
-        type: String,
-        value: 'input,textarea,.paper-input-input'
-      },
-
-      _boundOnFocus: {
-        type: Function,
-        value: function() {
-          return this._onFocus.bind(this);
-        }
-      },
-
-      _boundOnBlur: {
-        type: Function,
-        value: function() {
-          return this._onBlur.bind(this);
-        }
-      },
-
-      _boundOnInput: {
-        type: Function,
-        value: function() {
-          return this._onInput.bind(this);
-        }
-      },
-
-      _boundValueChanged: {
-        type: Function,
-        value: function() {
-          return this._onValueChanged.bind(this);
-        }
-      }
-    },
-
-    listeners: {
-      'addon-attached': '_onAddonAttached',
-      'iron-input-validate': '_onIronInputValidate'
-    },
-
-    get _valueChangedEvent() {
-      return this.attrForValue + '-changed';
-    },
-
-    get _propertyForValue() {
-      return Polymer.CaseMap.dashToCamelCase(this.attrForValue);
-    },
-
-    get _inputElement() {
-      return Polymer.dom(this).querySelector(this._inputSelector);
-    },
-
-    get _inputElementValue() {
-      return this._inputElement[this._propertyForValue] || this._inputElement.value;
-    },
-
-    ready: function() {
-      if (!this._addons) {
-        this._addons = [];
-      }
-      this.addEventListener('focus', this._boundOnFocus, true);
-      this.addEventListener('blur', this._boundOnBlur, true);
-    },
-
-    attached: function() {
-      if (this.attrForValue) {
-        this._inputElement.addEventListener(this._valueChangedEvent, this._boundValueChanged);
-      } else {
-        this.addEventListener('input', this._onInput);
-      }
-
-      // Only validate when attached if the input already has a value.
-      if (this._inputElementValue != '') {
-        this._handleValueAndAutoValidate(this._inputElement);
-      } else {
-        this._handleValue(this._inputElement);
-      }
-    },
-
-    _onAddonAttached: function(event) {
-      if (!this._addons) {
-        this._addons = [];
-      }
-      var target = event.target;
-      if (this._addons.indexOf(target) === -1) {
-        this._addons.push(target);
-        if (this.isAttached) {
-          this._handleValue(this._inputElement);
-        }
-      }
-    },
-
-    _onFocus: function() {
-      this._setFocused(true);
-    },
-
-    _onBlur: function() {
-      this._setFocused(false);
-      this._handleValueAndAutoValidate(this._inputElement);
-    },
-
-    _onInput: function(event) {
-      this._handleValueAndAutoValidate(event.target);
-    },
-
-    _onValueChanged: function(event) {
-      this._handleValueAndAutoValidate(event.target);
-    },
-
-    _handleValue: function(inputElement) {
-      var value = this._inputElementValue;
-
-      // type="number" hack needed because this.value is empty until it's valid
-      if (value || value === 0 || (inputElement.type === 'number' && !inputElement.checkValidity())) {
-        this._inputHasContent = true;
-      } else {
-        this._inputHasContent = false;
-      }
-
-      this.updateAddons({
-        inputElement: inputElement,
-        value: value,
-        invalid: this.invalid
-      });
-    },
-
-    _handleValueAndAutoValidate: function(inputElement) {
-      if (this.autoValidate) {
-        var valid;
-        if (inputElement.validate) {
-          valid = inputElement.validate(this._inputElementValue);
-        } else {
-          valid = inputElement.checkValidity();
-        }
-        this.invalid = !valid;
-      }
-
-      // Call this last to notify the add-ons.
-      this._handleValue(inputElement);
-    },
-
-    _onIronInputValidate: function(event) {
-      this.invalid = this._inputElement.invalid;
-    },
-
-    _invalidChanged: function() {
-      if (this._addons) {
-        this.updateAddons({invalid: this.invalid});
-      }
-    },
-
-    /**
-     * Call this to update the state of add-ons.
-     * @param {Object} state Add-on state.
-     */
-    updateAddons: function(state) {
-      for (var addon, index = 0; addon = this._addons[index]; index++) {
-        addon.update(state);
-      }
-    },
-
-    _computeInputContentClass: function(noLabelFloat, alwaysFloatLabel, focused, invalid, _inputHasContent) {
-      var cls = 'input-content';
-      if (!noLabelFloat) {
-        var label = this.querySelector('label');
-
-        if (alwaysFloatLabel || _inputHasContent) {
-          cls += ' label-is-floating';
-          // If the label is floating, ignore any offsets that may have been
-          // applied from a prefix element.
-          this.$.labelAndInputContainer.style.position = 'static';
-
-          if (invalid) {
-            cls += ' is-invalid';
-          } else if (focused) {
-            cls += " label-is-highlighted";
-          }
-        } else {
-          // When the label is not floating, it should overlap the input element.
-          if (label) {
-            this.$.labelAndInputContainer.style.position = 'relative';
-          }
-        }
-      } else {
-        if (_inputHasContent) {
-          cls += ' label-is-hidden';
-        }
-      }
-      return cls;
-    },
-
-    _computeUnderlineClass: function(focused, invalid) {
-      var cls = 'underline';
-      if (invalid) {
-        cls += ' is-invalid';
-      } else if (focused) {
-        cls += ' is-highlighted'
-      }
-      return cls;
-    },
-
-    _computeAddOnContentClass: function(focused, invalid) {
-      var cls = 'add-on-content';
-      if (invalid) {
-        cls += ' is-invalid';
-      } else if (focused) {
-        cls += ' is-highlighted'
-      }
-      return cls;
+      }
+    },
+
+    behaviors: [
+      Polymer.IronScrollTargetBehavior
+    ],
+
+    observers: [
+      '_setOverflow(scrollTarget)',
+      '_initCheck(horizontal, isAttached)'
+    ],
+
+    get _defaultScrollTarget() {
+      return this;
+    },
+
+    _setOverflow: function(scrollTarget) {
+      this.style.overflow = scrollTarget === this ? 'auto' : '';
+    },
+
+    _scrollHandler: function() {
+      // throttle the work on the scroll event
+      var THROTTLE_THRESHOLD = 200;
+      if (!this.isDebouncerActive('_checkTheshold')) {
+        this.debounce('_checkTheshold', function() {
+          this.checkScrollThesholds();
+        }, THROTTLE_THRESHOLD);
+      }
+    },
+
+    _initCheck: function(horizontal, isAttached) {
+      if (isAttached) {
+        this.debounce('_init', function() {
+          this.clearTriggers();
+          this.checkScrollThesholds();
+        });
+      }
+    },
+
+    /**
+     * Checks the scroll thresholds.
+     * This method is automatically called by iron-scroll-threshold.
+     *
+     * @method checkScrollThesholds
+     */
+    checkScrollThesholds: function() {
+      if (!this.scrollTarget || (this.lowerTriggered && this.upperTriggered)) {
+        return;
+      }
+      var upperScrollValue = this.horizontal ? this._scrollLeft : this._scrollTop;
+      var lowerScrollValue = this.horizontal ?
+          this.scrollTarget.scrollWidth - this._scrollTargetWidth - this._scrollLeft :
+              this.scrollTarget.scrollHeight - this._scrollTargetHeight - this._scrollTop;
+
+      // Detect upper threshold
+      if (upperScrollValue <= this.upperThreshold && !this.upperTriggered) {
+        this._setUpperTriggered(true);
+        this.fire('upper-threshold');
+      }
+      // Detect lower threshold
+      if (lowerScrollValue <= this.lowerThreshold && !this.lowerTriggered) {
+        this._setLowerTriggered(true);
+        this.fire('lower-threshold');
+      }
+    },
+
+    /**
+     * Clear the upper and lower threshold states.
+     *
+     * @method clearTriggers
+     */
+    clearTriggers: function() {
+      this._setUpperTriggered(false);
+      this._setLowerTriggered(false);
     }
+
+    /**
+     * Fires when the lower threshold has been reached.
+     *
+     * @event lower-threshold
+     */
+
+    /**
+     * Fires when the upper threshold has been reached.
+     *
+     * @event upper-threshold
+     */
+
   });
 // 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.
 
-var SearchField = Polymer({
-  is: 'cr-search-field',
-
-  behaviors: [CrSearchFieldBehavior],
+Polymer({
+  is: 'history-list',
+
+  behaviors: [HistoryListBehavior],
 
   properties: {
-    value_: String,
-  },
-
-  /** @return {!HTMLInputElement} */
-  getSearchInput: function() {
-    return this.$.searchInput;
-  },
-
-  /** @private */
-  clearSearch_: function() {
-    this.setValue('');
-    this.getSearchInput().focus();
-  },
-
-  /** @private */
-  toggleShowingSearch_: function() {
-    this.showingSearch = !this.showingSearch;
+    // The search term for the current query. Set when the query returns.
+    searchedTerm: {
+      type: String,
+      value: '',
+    },
+
+    lastSearchedTerm_: String,
+
+    querying: Boolean,
+
+    // An array of history entries in reverse chronological order.
+    historyData_: Array,
+
+    resultLoadingDisabled_: {
+      type: Boolean,
+      value: false,
+    },
+  },
+
+  listeners: {
+    'infinite-list.scroll': 'notifyListScroll_',
+    'remove-bookmark-stars': 'removeBookmarkStars_',
+  },
+
+  /** @override */
+  attached: function() {
+    // It is possible (eg, when middle clicking the reload button) for all other
+    // resize events to fire before the list is attached and can be measured.
+    // Adding another resize here ensures it will get sized correctly.
+    /** @type {IronListElement} */(this.$['infinite-list']).notifyResize();
+  },
+
+  /**
+   * Remove bookmark star for history items with matching URLs.
+   * @param {{detail: !string}} e
+   * @private
+   */
+  removeBookmarkStars_: function(e) {
+    var url = e.detail;
+
+    if (this.historyData_ === undefined)
+      return;
+
+    for (var i = 0; i < this.historyData_.length; i++) {
+      if (this.historyData_[i].url == url)
+        this.set('historyData_.' + i + '.starred', false);
+    }
+  },
+
+  /**
+   * Disables history result loading when there are no more history results.
+   */
+  disableResultLoading: function() {
+    this.resultLoadingDisabled_ = true;
+  },
+
+  /**
+   * Adds the newly updated history results into historyData_. Adds new fields
+   * for each result.
+   * @param {!Array<!HistoryEntry>} historyResults The new history results.
+   */
+  addNewResults: function(historyResults) {
+    var results = historyResults.slice();
+    /** @type {IronScrollThresholdElement} */(this.$['scroll-threshold'])
+        .clearTriggers();
+
+    if (this.lastSearchedTerm_ != this.searchedTerm) {
+      this.resultLoadingDisabled_ = false;
+      if (this.historyData_)
+        this.splice('historyData_', 0, this.historyData_.length);
+      this.fire('unselect-all');
+      this.lastSearchedTerm_ = this.searchedTerm;
+    }
+
+    if (this.historyData_) {
+      // If we have previously received data, push the new items onto the
+      // existing array.
+      results.unshift('historyData_');
+      this.push.apply(this, results);
+    } else {
+      // The first time we receive data, use set() to ensure the iron-list is
+      // initialized correctly.
+      this.set('historyData_', results);
+    }
+  },
+
+  /**
+   * Called when the page is scrolled to near the bottom of the list.
+   * @private
+   */
+  loadMoreData_: function() {
+    if (this.resultLoadingDisabled_ || this.querying)
+      return;
+
+    this.fire('load-more-history');
+  },
+
+  /**
+   * Check whether the time difference between the given history item and the
+   * next one is large enough for a spacer to be required.
+   * @param {HistoryEntry} item
+   * @param {number} index The index of |item| in |historyData_|.
+   * @param {number} length The length of |historyData_|.
+   * @return {boolean} Whether or not time gap separator is required.
+   * @private
+   */
+  needsTimeGap_: function(item, index, length) {
+    return md_history.HistoryItem.needsTimeGap(
+        this.historyData_, index, this.searchedTerm);
+  },
+
+  /**
+   * True if the given item is the beginning of a new card.
+   * @param {HistoryEntry} item
+   * @param {number} i Index of |item| within |historyData_|.
+   * @param {number} length
+   * @return {boolean}
+   * @private
+   */
+  isCardStart_: function(item, i, length) {
+    if (length == 0 || i > length - 1)
+      return false;
+    return i == 0 ||
+        this.historyData_[i].dateRelativeDay !=
+        this.historyData_[i - 1].dateRelativeDay;
+  },
+
+  /**
+   * True if the given item is the end of a card.
+   * @param {HistoryEntry} item
+   * @param {number} i Index of |item| within |historyData_|.
+   * @param {number} length
+   * @return {boolean}
+   * @private
+   */
+  isCardEnd_: function(item, i, length) {
+    if (length == 0 || i > length - 1)
+      return false;
+    return i == length - 1 ||
+        this.historyData_[i].dateRelativeDay !=
+        this.historyData_[i + 1].dateRelativeDay;
+  },
+
+  /**
+   * @param {number} index
+   * @return {boolean}
+   * @private
+   */
+  isFirstItem_: function(index) {
+    return index == 0;
+  },
+
+  /**
+   * @private
+   */
+  notifyListScroll_: function() {
+    this.fire('history-list-scrolled');
+  },
+
+  /**
+   * @param {number} index
+   * @return {string}
+   * @private
+   */
+  pathForItem_: function(index) {
+    return 'historyData_.' + index;
   },
 });
-// Copyright 2015 The Chromium Authors. All rights reserved.
+// 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('downloads', function() {
-  var Toolbar = Polymer({
-    is: 'downloads-toolbar',
-
-    attached: function() {
-      // isRTL() only works after i18n_template.js runs to set <html dir>.
-      this.overflowAlign_ = isRTL() ? 'left' : 'right';
-    },
-
-    properties: {
-      downloadsShowing: {
-        reflectToAttribute: true,
-        type: Boolean,
-        value: false,
-        observer: 'downloadsShowingChanged_',
-      },
-
-      overflowAlign_: {
-        type: String,
-        value: 'right',
-      },
-    },
-
-    listeners: {
-      'paper-dropdown-close': 'onPaperDropdownClose_',
-      'paper-dropdown-open': 'onPaperDropdownOpen_',
-    },
-
-    /** @return {boolean} Whether removal can be undone. */
-    canUndo: function() {
-      return this.$['search-input'] != this.shadowRoot.activeElement;
-    },
-
-    /** @return {boolean} Whether "Clear all" should be allowed. */
-    canClearAll: function() {
-      return !this.$['search-input'].getValue() && this.downloadsShowing;
-    },
-
-    onFindCommand: function() {
-      this.$['search-input'].showAndFocus();
-    },
-
-    /** @private */
-    closeMoreActions_: function() {
-      this.$.more.close();
-    },
-
-    /** @private */
-    downloadsShowingChanged_: function() {
-      this.updateClearAll_();
-    },
-
-    /** @private */
-    onClearAllTap_: function() {
-      assert(this.canClearAll());
-      downloads.ActionService.getInstance().clearAll();
-    },
-
-    /** @private */
-    onPaperDropdownClose_: function() {
-      window.removeEventListener('resize', assert(this.boundClose_));
-    },
-
-    /**
-     * @param {!Event} e
-     * @private
-     */
-    onItemBlur_: function(e) {
-      var menu = /** @type {PaperMenuElement} */(this.$$('paper-menu'));
-      if (menu.items.indexOf(e.relatedTarget) >= 0)
-        return;
-
-      this.$.more.restoreFocusOnClose = false;
-      this.closeMoreActions_();
-      this.$.more.restoreFocusOnClose = true;
-    },
-
-    /** @private */
-    onPaperDropdownOpen_: function() {
-      this.boundClose_ = this.boundClose_ || this.closeMoreActions_.bind(this);
-      window.addEventListener('resize', this.boundClose_);
-    },
-
-    /**
-     * @param {!CustomEvent} event
-     * @private
-     */
-    onSearchChanged_: function(event) {
-      downloads.ActionService.getInstance().search(
-          /** @type {string} */ (event.detail));
-      this.updateClearAll_();
-    },
-
-    /** @private */
-    onOpenDownloadsFolderTap_: function() {
-      downloads.ActionService.getInstance().openDownloadsFolder();
-    },
-
-    /** @private */
-    updateClearAll_: function() {
-      this.$$('#actions .clear-all').hidden = !this.canClearAll();
-      this.$$('paper-menu .clear-all').hidden = !this.canClearAll();
-    },
-  });
-
-  return {Toolbar: Toolbar};
+Polymer({
+  is: 'history-list-container',
+
+  properties: {
+    // The path of the currently selected page.
+    selectedPage_: String,
+
+    // Whether domain-grouped history is enabled.
+    grouped: Boolean,
+
+    /** @type {!QueryState} */
+    queryState: Object,
+
+    /** @type {!QueryResult} */
+    queryResult: Object,
+  },
+
+  observers: [
+    'groupedRangeChanged_(queryState.range)',
+  ],
+
+  listeners: {
+    'history-list-scrolled': 'closeMenu_',
+    'load-more-history': 'loadMoreHistory_',
+    'toggle-menu': 'toggleMenu_',
+  },
+
+  /**
+   * @param {HistoryQuery} info An object containing information about the
+   *    query.
+   * @param {!Array<HistoryEntry>} results A list of results.
+   */
+  historyResult: function(info, results) {
+    this.initializeResults_(info, results);
+    this.closeMenu_();
+
+    if (this.selectedPage_ == 'grouped-list') {
+      this.$$('#grouped-list').historyData = results;
+      return;
+    }
+
+    var list = /** @type {HistoryListElement} */(this.$['infinite-list']);
+    list.addNewResults(results);
+    if (info.finished)
+      list.disableResultLoading();
+  },
+
+  /**
+   * Queries the history backend for results based on queryState.
+   * @param {boolean} incremental Whether the new query should continue where
+   *    the previous query stopped.
+   */
+  queryHistory: function(incremental) {
+    var queryState = this.queryState;
+    // Disable querying until the first set of results have been returned. If
+    // there is a search, query immediately to support search query params from
+    // the URL.
+    var noResults = !this.queryResult || this.queryResult.results == null;
+    if (queryState.queryingDisabled ||
+        (!this.queryState.searchTerm && noResults)) {
+      return;
+    }
+
+    // Close any open dialog if a new query is initiated.
+    if (!incremental && this.$.dialog.open)
+      this.$.dialog.close();
+
+    this.set('queryState.querying', true);
+    this.set('queryState.incremental', incremental);
+
+    var lastVisitTime = 0;
+    if (incremental) {
+      var lastVisit = this.queryResult.results.slice(-1)[0];
+      lastVisitTime = lastVisit ? lastVisit.time : 0;
+    }
+
+    var maxResults =
+      queryState.range == HistoryRange.ALL_TIME ? RESULTS_PER_PAGE : 0;
+    chrome.send('queryHistory', [
+      queryState.searchTerm, queryState.groupedOffset, queryState.range,
+      lastVisitTime, maxResults
+    ]);
+  },
+
+  unselectAllItems: function(count) {
+    this.getSelectedList_().unselectAllItems(count);
+  },
+
+  /**
+   * Delete all the currently selected history items. Will prompt the user with
+   * a dialog to confirm that the deletion should be performed.
+   */
+  deleteSelectedWithPrompt: function() {
+    if (!loadTimeData.getBoolean('allowDeletingHistory'))
+      return;
+
+    this.$.dialog.showModal();
+  },
+
+  /**
+   * @param {HistoryRange} range
+   * @private
+   */
+  groupedRangeChanged_: function(range) {
+    this.selectedPage_ = this.queryState.range == HistoryRange.ALL_TIME ?
+      'infinite-list' : 'grouped-list';
+
+    this.queryHistory(false);
+  },
+
+  /** @private */
+  loadMoreHistory_: function() { this.queryHistory(true); },
+
+  /**
+   * @param {HistoryQuery} info
+   * @param {!Array<HistoryEntry>} results
+   * @private
+   */
+  initializeResults_: function(info, results) {
+    if (results.length == 0)
+      return;
+
+    var currentDate = results[0].dateRelativeDay;
+
+    for (var i = 0; i < results.length; i++) {
+      // Sets the default values for these fields to prevent undefined types.
+      results[i].selected = false;
+      results[i].readableTimestamp =
+          info.term == '' ? results[i].dateTimeOfDay : results[i].dateShort;
+
+      if (results[i].dateRelativeDay != currentDate) {
+        currentDate = results[i].dateRelativeDay;
+      }
+    }
+  },
+
+  /** @private */
+  onDialogConfirmTap_: function() {
+    this.getSelectedList_().deleteSelected();
+    this.$.dialog.close();
+  },
+
+  /** @private */
+  onDialogCancelTap_: function() {
+    this.$.dialog.close();
+  },
+
+  /**
+   * Closes the overflow menu.
+   * @private
+   */
+  closeMenu_: function() {
+    /** @type {CrSharedMenuElement} */(this.$.sharedMenu).closeMenu();
+  },
+
+  /**
+   * Opens the overflow menu unless the menu is already open and the same button
+   * is pressed.
+   * @param {{detail: {item: !HistoryEntry, target: !HTMLElement}}} e
+   * @private
+   */
+  toggleMenu_: function(e) {
+    var target = e.detail.target;
+    /** @type {CrSharedMenuElement} */(this.$.sharedMenu).toggleMenu(
+        target, e.detail.item);
+  },
+
+  /** @private */
+  onMoreFromSiteTap_: function() {
+    var menu = /** @type {CrSharedMenuElement} */(this.$.sharedMenu);
+    this.fire('search-domain', {domain: menu.itemData.domain});
+    menu.closeMenu();
+  },
+
+  /** @private */
+  onRemoveFromHistoryTap_: function() {
+    var menu = /** @type {CrSharedMenuElement} */(this.$.sharedMenu);
+    md_history.BrowserService.getInstance()
+        .deleteItems([menu.itemData])
+        .then(function(items) {
+          this.getSelectedList_().removeItemsByPath(items[0].path);
+          // This unselect-all is to reset the toolbar when deleting a selected
+          // item. TODO(tsergeant): Make this automatic based on observing list
+          // modifications.
+          this.fire('unselect-all');
+        }.bind(this));
+    menu.closeMenu();
+  },
+
+  /**
+   * @return {HTMLElement}
+   * @private
+   */
+  getSelectedList_: function() {
+    return this.$.content.selectedItem;
+  },
 });
-// Copyright 2015 The Chromium Authors. All rights reserved.
+// 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('downloads', function() {
-  var Manager = Polymer({
-    is: 'downloads-manager',
-
-    properties: {
-      hasDownloads_: {
-        observer: 'hasDownloadsChanged_',
-        type: Boolean,
-      },
-
-      items_: {
-        type: Array,
-        value: function() { return []; },
-      },
-    },
-
-    hostAttributes: {
-      loading: true,
-    },
-
-    listeners: {
-      'downloads-list.scroll': 'onListScroll_',
-    },
-
-    observers: [
-      'itemsChanged_(items_.*)',
-    ],
-
-    /** @private */
-    clearAll_: function() {
-      this.set('items_', []);
-    },
-
-    /** @private */
-    hasDownloadsChanged_: function() {
-      if (loadTimeData.getBoolean('allowDeletingHistory'))
-        this.$.toolbar.downloadsShowing = this.hasDownloads_;
-
-      if (this.hasDownloads_) {
-        this.$['downloads-list'].fire('iron-resize');
-      } else {
-        var isSearching = downloads.ActionService.getInstance().isSearching();
-        var messageToShow = isSearching ? 'noSearchResults' : 'noDownloads';
-        this.$['no-downloads'].querySelector('span').textContent =
-            loadTimeData.getString(messageToShow);
-      }
-    },
-
-    /**
-     * @param {number} index
-     * @param {!Array<!downloads.Data>} list
-     * @private
-     */
-    insertItems_: function(index, list) {
-      this.splice.apply(this, ['items_', index, 0].concat(list));
-      this.updateHideDates_(index, index + list.length);
-      this.removeAttribute('loading');
-    },
-
-    /** @private */
-    itemsChanged_: function() {
-      this.hasDownloads_ = this.items_.length > 0;
-    },
-
-    /**
-     * @param {Event} e
-     * @private
-     */
-    onCanExecute_: function(e) {
-      e = /** @type {cr.ui.CanExecuteEvent} */(e);
-      switch (e.command.id) {
-        case 'undo-command':
-          e.canExecute = this.$.toolbar.canUndo();
-          break;
-        case 'clear-all-command':
-          e.canExecute = this.$.toolbar.canClearAll();
-          break;
-        case 'find-command':
-          e.canExecute = true;
-          break;
-      }
-    },
-
-    /**
-     * @param {Event} e
-     * @private
-     */
-    onCommand_: function(e) {
-      if (e.command.id == 'clear-all-command')
-        downloads.ActionService.getInstance().clearAll();
-      else if (e.command.id == 'undo-command')
-        downloads.ActionService.getInstance().undo();
-      else if (e.command.id == 'find-command')
-        this.$.toolbar.onFindCommand();
-    },
-
-    /** @private */
-    onListScroll_: function() {
-      var list = this.$['downloads-list'];
-      if (list.scrollHeight - list.scrollTop - list.offsetHeight <= 100) {
-        // Approaching the end of the scrollback. Attempt to load more items.
-        downloads.ActionService.getInstance().loadMore();
-      }
-    },
-
-    /** @private */
-    onLoad_: function() {
-      cr.ui.decorate('command', cr.ui.Command);
-      document.addEventListener('canExecute', this.onCanExecute_.bind(this));
-      document.addEventListener('command', this.onCommand_.bind(this));
-
-      downloads.ActionService.getInstance().loadMore();
-    },
-
-    /**
-     * @param {number} index
-     * @private
-     */
-    removeItem_: function(index) {
-      this.splice('items_', index, 1);
-      this.updateHideDates_(index, index);
-      this.onListScroll_();
-    },
-
-    /**
-     * @param {number} start
-     * @param {number} end
-     * @private
-     */
-    updateHideDates_: function(start, end) {
-      for (var i = start; i <= end; ++i) {
-        var current = this.items_[i];
-        if (!current)
-          continue;
-        var prev = this.items_[i - 1];
-        current.hideDate = !!prev && prev.date_string == current.date_string;
-      }
-    },
-
-    /**
-     * @param {number} index
-     * @param {!downloads.Data} data
-     * @private
-     */
-    updateItem_: function(index, data) {
-      this.set('items_.' + index, data);
-      this.updateHideDates_(index, index);
-      var list = /** @type {!IronListElement} */(this.$['downloads-list']);
-      list.updateSizeForItem(index);
-    },
-  });
-
-  Manager.clearAll = function() {
-    Manager.get().clearAll_();
-  };
-
-  /** @return {!downloads.Manager} */
-  Manager.get = function() {
-    return /** @type {!downloads.Manager} */(
-        queryRequiredElement('downloads-manager'));
-  };
-
-  Manager.insertItems = function(index, list) {
-    Manager.get().insertItems_(index, list);
-  };
-
-  Manager.onLoad = function() {
-    Manager.get().onLoad_();
-  };
-
-  Manager.removeItem = function(index) {
-    Manager.get().removeItem_(index);
-  };
-
-  Manager.updateItem = function(index, data) {
-    Manager.get().updateItem_(index, data);
-  };
-
-  return {Manager: Manager};
+Polymer({
+  is: 'history-synced-device-card',
+
+  properties: {
+    // Name of the synced device.
+    device: String,
+
+    // When the device information was last updated.
+    lastUpdateTime: String,
+
+    /**
+     * The list of tabs open for this device.
+     * @type {!Array<!ForeignSessionTab>}
+     */
+    tabs: {
+      type: Array,
+      value: function() { return []; },
+      observer: 'updateIcons_'
+    },
+
+    /**
+     * The indexes where a window separator should be shown. The use of a
+     * separate array here is necessary for window separators to appear
+     * correctly in search. See http://crrev.com/2022003002 for more details.
+     * @type {!Array<number>}
+     */
+    separatorIndexes: Array,
+
+    // Whether the card is open.
+    cardOpen_: {type: Boolean, value: true},
+
+    searchTerm: String,
+
+    // Internal identifier for the device.
+    sessionTag: String,
+  },
+
+  /**
+   * Open a single synced tab. Listens to 'click' rather than 'tap'
+   * to determine what modifier keys were pressed.
+   * @param {DomRepeatClickEvent} e
+   * @private
+   */
+  openTab_: function(e) {
+    var tab = /** @type {ForeignSessionTab} */(e.model.tab);
+    md_history.BrowserService.getInstance().openForeignSessionTab(
+        this.sessionTag, tab.windowId, tab.sessionId, e);
+    e.preventDefault();
+  },
+
+  /**
+   * Toggles the dropdown display of synced tabs for each device card.
+   */
+  toggleTabCard: function() {
+    this.$.collapse.toggle();
+    this.$['dropdown-indicator'].icon =
+        this.$.collapse.opened ? 'cr:expand-less' : 'cr:expand-more';
+  },
+
+  /**
+   * When the synced tab information is set, the icon associated with the tab
+   * website is also set.
+   * @private
+   */
+  updateIcons_: function() {
+    this.async(function() {
+      var icons = Polymer.dom(this.root).querySelectorAll('.website-icon');
+
+      for (var i = 0; i < this.tabs.length; i++) {
+        icons[i].style.backgroundImage =
+            cr.icon.getFaviconImageSet(this.tabs[i].url);
+      }
+    });
+  },
+
+  /** @private */
+  isWindowSeparatorIndex_: function(index, separatorIndexes) {
+    return this.separatorIndexes.indexOf(index) != -1;
+  },
+
+  /**
+   * @param {boolean} cardOpen
+   * @return {string}
+   */
+  getCollapseTitle_: function(cardOpen) {
+    return cardOpen ? loadTimeData.getString('collapseSessionButton') :
+                      loadTimeData.getString('expandSessionButton');
+  },
+
+  /**
+   * @param {CustomEvent} e
+   * @private
+   */
+  onMenuButtonTap_: function(e) {
+    this.fire('toggle-menu', {
+      target: Polymer.dom(e).localTarget,
+      tag: this.sessionTag
+    });
+    e.stopPropagation();  // Prevent iron-collapse.
+  },
 });
-// Copyright 2015 The Chromium Authors. All rights reserved.
+// 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.
 
-window.addEventListener('load', downloads.Manager.onLoad);
+/**
+ * @typedef {{device: string,
+ *           lastUpdateTime: string,
+ *           separatorIndexes: !Array<number>,
+ *           timestamp: number,
+ *           tabs: !Array<!ForeignSessionTab>,
+ *           tag: string}}
+ */
+var ForeignDeviceInternal;
+
+Polymer({
+  is: 'history-synced-device-manager',
+
+  properties: {
+    /**
+     * @type {?Array<!ForeignSession>}
+     */
+    sessionList: {
+      type: Array,
+      observer: 'updateSyncedDevices'
+    },
+
+    searchTerm: {
+      type: String,
+      observer: 'searchTermChanged'
+    },
+
+    /**
+     * An array of synced devices with synced tab data.
+     * @type {!Array<!ForeignDeviceInternal>}
+     */
+    syncedDevices_: {
+      type: Array,
+      value: function() { return []; }
+    },
+
+    /** @private */
+    signInState_: {
+      type: Boolean,
+      value: loadTimeData.getBoolean('isUserSignedIn'),
+    },
+
+    /** @private */
+    guestSession_: {
+      type: Boolean,
+      value: loadTimeData.getBoolean('isGuestSession'),
+    },
+
+    /** @private */
+    fetchingSyncedTabs_: {
+      type: Boolean,
+      value: false,
+    }
+  },
+
+  listeners: {
+    'toggle-menu': 'onToggleMenu_',
+  },
+
+  /** @override */
+  attached: function() {
+    // Update the sign in state.
+    chrome.send('otherDevicesInitialized');
+  },
+
+  /**
+   * @param {!ForeignSession} session
+   * @return {!ForeignDeviceInternal}
+   */
+  createInternalDevice_: function(session) {
+    var tabs = [];
+    var separatorIndexes = [];
+    for (var i = 0; i < session.windows.length; i++) {
+      var windowId = session.windows[i].sessionId;
+      var newTabs = session.windows[i].tabs;
+      if (newTabs.length == 0)
+        continue;
+
+      newTabs.forEach(function(tab) {
+        tab.windowId = windowId;
+      });
+
+      var windowAdded = false;
+      if (!this.searchTerm) {
+        // Add all the tabs if there is no search term.
+        tabs = tabs.concat(newTabs);
+        windowAdded = true;
+      } else {
+        var searchText = this.searchTerm.toLowerCase();
+        for (var j = 0; j < newTabs.length; j++) {
+          var tab = newTabs[j];
+          if (tab.title.toLowerCase().indexOf(searchText) != -1) {
+            tabs.push(tab);
+            windowAdded = true;
+          }
+        }
+      }
+      if (windowAdded && i != session.windows.length - 1)
+        separatorIndexes.push(tabs.length - 1);
+    }
+    return {
+      device: session.name,
+      lastUpdateTime: '– ' + session.modifiedTime,
+      separatorIndexes: separatorIndexes,
+      timestamp: session.timestamp,
+      tabs: tabs,
+      tag: session.tag,
+    };
+  },
+
+  onSignInTap_: function() {
+    chrome.send('SyncSetupShowSetupUI');
+    chrome.send('SyncSetupStartSignIn', [false]);
+  },
+
+  onToggleMenu_: function(e) {
+    this.$.menu.toggleMenu(e.detail.target, e.detail.tag);
+  },
+
+  onOpenAllTap_: function() {
+    md_history.BrowserService.getInstance().openForeignSessionAllTabs(
+        this.$.menu.itemData);
+    this.$.menu.closeMenu();
+  },
+
+  onDeleteSessionTap_: function() {
+    md_history.BrowserService.getInstance().deleteForeignSession(
+        this.$.menu.itemData);
+    this.$.menu.closeMenu();
+  },
+
+  /** @private */
+  clearDisplayedSyncedDevices_: function() {
+    this.syncedDevices_ = [];
+  },
+
+  /**
+   * Decide whether or not should display no synced tabs message.
+   * @param {boolean} signInState
+   * @param {number} syncedDevicesLength
+   * @param {boolean} guestSession
+   * @return {boolean}
+   */
+  showNoSyncedMessage: function(
+      signInState, syncedDevicesLength, guestSession) {
+    if (guestSession)
+      return true;
+
+    return signInState && syncedDevicesLength == 0;
+  },
+
+  /**
+   * Shows the signin guide when the user is not signed in and not in a guest
+   * session.
+   * @param {boolean} signInState
+   * @param {boolean} guestSession
+   * @return {boolean}
+   */
+  showSignInGuide: function(signInState, guestSession) {
+    return !signInState && !guestSession;
+  },
+
+  /**
+   * Decide what message should be displayed when user is logged in and there
+   * are no synced tabs.
+   * @param {boolean} fetchingSyncedTabs
+   * @return {string}
+   */
+  noSyncedTabsMessage: function(fetchingSyncedTabs) {
+    return loadTimeData.getString(
+        fetchingSyncedTabs ? 'loading' : 'noSyncedResults');
+  },
+
+  /**
+   * Replaces the currently displayed synced tabs with |sessionList|. It is
+   * common for only a single session within the list to have changed, We try to
+   * avoid doing extra work in this case. The logic could be more intelligent
+   * about updating individual tabs rather than replacing whole sessions, but
+   * this approach seems to have acceptable performance.
+   * @param {?Array<!ForeignSession>} sessionList
+   */
+  updateSyncedDevices: function(sessionList) {
+    this.fetchingSyncedTabs_ = false;
+
+    if (!sessionList)
+      return;
+
+    // First, update any existing devices that have changed.
+    var updateCount = Math.min(sessionList.length, this.syncedDevices_.length);
+    for (var i = 0; i < updateCount; i++) {
+      var oldDevice = this.syncedDevices_[i];
+      if (oldDevice.tag != sessionList[i].tag ||
+          oldDevice.timestamp != sessionList[i].timestamp) {
+        this.splice(
+            'syncedDevices_', i, 1, this.createInternalDevice_(sessionList[i]));
+      }
+    }
+
+    // Then, append any new devices.
+    for (var i = updateCount; i < sessionList.length; i++) {
+      this.push('syncedDevices_', this.createInternalDevice_(sessionList[i]));
+    }
+  },
+
+  /**
+   * Get called when user's sign in state changes, this will affect UI of synced
+   * tabs page. Sign in promo gets displayed when user is signed out, and
+   * different messages are shown when there are no synced tabs.
+   * @param {boolean} isUserSignedIn
+   */
+  updateSignInState: function(isUserSignedIn) {
+    // If user's sign in state didn't change, then don't change message or
+    // update UI.
+    if (this.signInState_ == isUserSignedIn)
+      return;
+
+    this.signInState_ = isUserSignedIn;
+
+    // User signed out, clear synced device list and show the sign in promo.
+    if (!isUserSignedIn) {
+      this.clearDisplayedSyncedDevices_();
+      return;
+    }
+    // User signed in, show the loading message when querying for synced
+    // devices.
+    this.fetchingSyncedTabs_ = true;
+  },
+
+  searchTermChanged: function(searchTerm) {
+    this.clearDisplayedSyncedDevices_();
+    this.updateSyncedDevices(this.sessionList);
+  }
+});
+/**
+  `iron-selector` is an element which can be used to manage a list of elements
+  that can be selected.  Tapping on the item will make the item selected.  The `selected` indicates
+  which item is being selected.  The default is to use the index of the item.
+
+  Example:
+
+      <iron-selector selected="0">
+        <div>Item 1</div>
+        <div>Item 2</div>
+        <div>Item 3</div>
+      </iron-selector>
+
+  If you want to use the attribute value of an element for `selected` instead of the index,
+  set `attrForSelected` to the name of the attribute.  For example, if you want to select item by
+  `name`, set `attrForSelected` to `name`.
+
+  Example:
+
+      <iron-selector attr-for-selected="name" selected="foo">
+        <div name="foo">Foo</div>
+        <div name="bar">Bar</div>
+        <div name="zot">Zot</div>
+      </iron-selector>
+
+  You can specify a default fallback with `fallbackSelection` in case the `selected` attribute does
+  not match the `attrForSelected` attribute of any elements.
+
+  Example:
+
+        <iron-selector attr-for-selected="name" selected="non-existing"
+                       fallback-selection="default">
+          <div name="foo">Foo</div>
+          <div name="bar">Bar</div>
+          <div name="default">Default</div>
+        </iron-selector>
+
+  Note: When the selector is multi, the selection will set to `fallbackSelection` iff
+  the number of matching elements is zero.
+
+  `iron-selector` is not styled. Use the `iron-selected` CSS class to style the selected element.
+
+  Example:
+
+      <style>
+        .iron-selected {
+          background: #eee;
+        }
+      </style>
+
+      ...
+
+      <iron-selector selected="0">
+        <div>Item 1</div>
+        <div>Item 2</div>
+        <div>Item 3</div>
+      </iron-selector>
+
+  @demo demo/index.html
+  */
+
+  Polymer({
+
+    is: 'iron-selector',
+
+    behaviors: [
+      Polymer.IronMultiSelectableBehavior
+    ]
+
+  });
+// 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: 'history-side-bar',
+
+  properties: {
+    selectedPage: {
+      type: String,
+      notify: true
+    },
+
+    route: Object,
+
+    showFooter: Boolean,
+
+    // If true, the sidebar is contained within an app-drawer.
+    drawer: {
+      type: Boolean,
+      reflectToAttribute: true
+    },
+  },
+
+  /** @private */
+  onSelectorActivate_: function() {
+    this.fire('history-close-drawer');
+  },
+
+  /**
+   * Relocates the user to the clear browsing data section of the settings page.
+   * @param {Event} e
+   * @private
+   */
+  onClearBrowsingDataTap_: function(e) {
+    md_history.BrowserService.getInstance().openClearBrowsingData();
+    e.preventDefault();
+  },
+
+  /**
+   * @param {Object} route
+   * @private
+   */
+  getQueryString_: function(route) {
+    return window.location.search;
+  }
+});
+// 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: 'history-app',
+
+  properties: {
+    showSidebarFooter: Boolean,
+
+    // The id of the currently selected page.
+    selectedPage_: {type: String, value: 'history', observer: 'unselectAll'},
+
+    // Whether domain-grouped history is enabled.
+    grouped_: {type: Boolean, reflectToAttribute: true},
+
+    /** @type {!QueryState} */
+    queryState_: {
+      type: Object,
+      value: function() {
+        return {
+          // Whether the most recent query was incremental.
+          incremental: false,
+          // A query is initiated by page load.
+          querying: true,
+          queryingDisabled: false,
+          _range: HistoryRange.ALL_TIME,
+          searchTerm: '',
+          // TODO(calamity): Make history toolbar buttons change the offset
+          groupedOffset: 0,
+
+          set range(val) { this._range = Number(val); },
+          get range() { return this._range; },
+        };
+      }
+    },
+
+   /** @type {!QueryResult} */
+    queryResult_: {
+      type: Object,
+      value: function() {
+        return {
+          info: null,
+          results: null,
+          sessionList: null,
+        };
+      }
+    },
+
+    // Route data for the current page.
+    routeData_: Object,
+
+    // The query params for the page.
+    queryParams_: Object,
+
+    // True if the window is narrow enough for the page to have a drawer.
+    hasDrawer_: Boolean,
+  },
+
+  observers: [
+    // routeData_.page <=> selectedPage
+    'routeDataChanged_(routeData_.page)',
+    'selectedPageChanged_(selectedPage_)',
+
+    // queryParams_.q <=> queryState.searchTerm
+    'searchTermChanged_(queryState_.searchTerm)',
+    'searchQueryParamChanged_(queryParams_.q)',
+
+  ],
+
+  // TODO(calamity): Replace these event listeners with data bound properties.
+  listeners: {
+    'cr-menu-tap': 'onMenuTap_',
+    'history-checkbox-select': 'checkboxSelected',
+    'unselect-all': 'unselectAll',
+    'delete-selected': 'deleteSelected',
+    'search-domain': 'searchDomain_',
+    'history-close-drawer': 'closeDrawer_',
+  },
+
+  /** @override */
+  ready: function() {
+    this.grouped_ = loadTimeData.getBoolean('groupByDomain');
+
+    cr.ui.decorate('command', cr.ui.Command);
+    document.addEventListener('canExecute', this.onCanExecute_.bind(this));
+    document.addEventListener('command', this.onCommand_.bind(this));
+
+    // Redirect legacy search URLs to URLs compatible with material history.
+    if (window.location.hash) {
+      window.location.href = window.location.href.split('#')[0] + '?' +
+          window.location.hash.substr(1);
+    }
+  },
+
+  /** @private */
+  onMenuTap_: function() {
+    var drawer = this.$$('#drawer');
+    if (drawer)
+      drawer.toggle();
+  },
+
+  /**
+   * Listens for history-item being selected or deselected (through checkbox)
+   * and changes the view of the top toolbar.
+   * @param {{detail: {countAddition: number}}} e
+   */
+  checkboxSelected: function(e) {
+    var toolbar = /** @type {HistoryToolbarElement} */ (this.$.toolbar);
+    toolbar.count += e.detail.countAddition;
+  },
+
+  /**
+   * Listens for call to cancel selection and loops through all items to set
+   * checkbox to be unselected.
+   * @private
+   */
+  unselectAll: function() {
+    var listContainer =
+        /** @type {HistoryListContainerElement} */ (this.$['history']);
+    var toolbar = /** @type {HistoryToolbarElement} */ (this.$.toolbar);
+    listContainer.unselectAllItems(toolbar.count);
+    toolbar.count = 0;
+  },
+
+  deleteSelected: function() {
+    this.$.history.deleteSelectedWithPrompt();
+  },
+
+  /**
+   * @param {HistoryQuery} info An object containing information about the
+   *    query.
+   * @param {!Array<HistoryEntry>} results A list of results.
+   */
+  historyResult: function(info, results) {
+    this.set('queryState_.querying', false);
+    this.set('queryResult_.info', info);
+    this.set('queryResult_.results', results);
+    var listContainer =
+        /** @type {HistoryListContainerElement} */ (this.$['history']);
+    listContainer.historyResult(info, results);
+  },
+
+  /**
+   * Fired when the user presses 'More from this site'.
+   * @param {{detail: {domain: string}}} e
+   */
+  searchDomain_: function(e) { this.$.toolbar.setSearchTerm(e.detail.domain); },
+
+  /**
+   * @param {Event} e
+   * @private
+   */
+  onCanExecute_: function(e) {
+    e = /** @type {cr.ui.CanExecuteEvent} */(e);
+    switch (e.command.id) {
+      case 'find-command':
+        e.canExecute = true;
+        break;
+      case 'slash-command':
+        e.canExecute = !this.$.toolbar.searchBar.isSearchFocused();
+        break;
+      case 'delete-command':
+        e.canExecute = this.$.toolbar.count > 0;
+        break;
+    }
+  },
+
+  /**
+   * @param {string} searchTerm
+   * @private
+   */
+  searchTermChanged_: function(searchTerm) {
+    this.set('queryParams_.q', searchTerm || null);
+    this.$['history'].queryHistory(false);
+  },
+
+  /**
+   * @param {string} searchQuery
+   * @private
+   */
+  searchQueryParamChanged_: function(searchQuery) {
+    this.$.toolbar.setSearchTerm(searchQuery || '');
+  },
+
+  /**
+   * @param {Event} e
+   * @private
+   */
+  onCommand_: function(e) {
+    if (e.command.id == 'find-command' || e.command.id == 'slash-command')
+      this.$.toolbar.showSearchField();
+    if (e.command.id == 'delete-command')
+      this.deleteSelected();
+  },
+
+  /**
+   * @param {!Array<!ForeignSession>} sessionList Array of objects describing
+   *     the sessions from other devices.
+   * @param {boolean} isTabSyncEnabled Is tab sync enabled for this profile?
+   */
+  setForeignSessions: function(sessionList, isTabSyncEnabled) {
+    if (!isTabSyncEnabled)
+      return;
+
+    this.set('queryResult_.sessionList', sessionList);
+  },
+
+  /**
+   * Update sign in state of synced device manager after user logs in or out.
+   * @param {boolean} isUserSignedIn
+   */
+  updateSignInState: function(isUserSignedIn) {
+    var syncedDeviceManagerElem =
+      /** @type {HistorySyncedDeviceManagerElement} */this
+          .$$('history-synced-device-manager');
+    if (syncedDeviceManagerElem)
+      syncedDeviceManagerElem.updateSignInState(isUserSignedIn);
+  },
+
+  /**
+   * @param {string} selectedPage
+   * @return {boolean}
+   * @private
+   */
+  syncedTabsSelected_: function(selectedPage) {
+    return selectedPage == 'syncedTabs';
+  },
+
+  /**
+   * @param {boolean} querying
+   * @param {boolean} incremental
+   * @param {string} searchTerm
+   * @return {boolean} Whether a loading spinner should be shown (implies the
+   *     backend is querying a new search term).
+   * @private
+   */
+  shouldShowSpinner_: function(querying, incremental, searchTerm) {
+    return querying && !incremental && searchTerm != '';
+  },
+
+  /**
+   * @param {string} page
+   * @private
+   */
+  routeDataChanged_: function(page) {
+    this.selectedPage_ = page;
+  },
+
+  /**
+   * @param {string} selectedPage
+   * @private
+   */
+  selectedPageChanged_: function(selectedPage) {
+    this.set('routeData_.page', selectedPage);
+  },
+
+  /**
+   * This computed binding is needed to make the iron-pages selector update when
+   * the synced-device-manager is instantiated for the first time. Otherwise the
+   * fallback selection will continue to be used after the corresponding item is
+   * added as a child of iron-pages.
+   * @param {string} selectedPage
+   * @param {Array} items
+   * @return {string}
+   * @private
+   */
+  getSelectedPage_: function(selectedPage, items) {
+    return selectedPage;
+  },
+
+  /** @private */
+  closeDrawer_: function() {
+    var drawer = this.$$('#drawer');
+    if (drawer)
+      drawer.close();
+  },
+});