MD History: Replace app-route with a custom router

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

 // 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.
 function PromiseResolver() {
   this.resolve_;
   this.reject_;
   this.promise_ = new Promise(function(resolve, reject) {
     this.resolve_ = resolve;
     this.reject_ = reject;
   }.bind(this));
@@ skipping 812 matching lines @@
   _DRAWER_STATE: {
     INIT: 0,
     OPENED: 1,
     OPENED_PERSISTENT: 2,
     CLOSED: 3,
     TRACKING: 4,
     FLINGING: 5
   }
 });
 
-(function() {
-  'use strict';
-  Polymer({
-    is: 'iron-location',
-    properties: {
-      path: {
-        type: String,
-        notify: true,
-        value: function() {
-          return window.decodeURIComponent(window.location.pathname);
-        }
-      },
-      query: {
-        type: String,
-        notify: true,
-        value: function() {
-          return window.decodeURIComponent(window.location.search.slice(1));
-        }
-      },
-      hash: {
-        type: String,
-        notify: true,
-        value: function() {
-          return window.decodeURIComponent(window.location.hash.slice(1));
-        }
-      },
-      dwellTime: {
-        type: Number,
-        value: 2e3
-      },
-      urlSpaceRegex: {
-        type: String,
-        value: ''
-      },
-      _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(document.body, 'click', '_globalOnClick');
-      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(document.body, 'click', '_globalOnClick');
-      this._initialized = false;
-    },
-    _hashChanged: function() {
-      this.hash = window.decodeURIComponent(window.location.hash.substring(1));
-    },
-    _urlChanged: function() {
-      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))) {
-        return;
-      }
-      var newUrl = this._getUrl();
-      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
-      });
-    },
-    _globalOnClick: function(event) {
-      if (event.defaultPrevented) {
-        return;
-      }
-      var href = this._getSameOriginLinkHref(event);
-      if (!href) {
-        return;
-      }
-      event.preventDefault();
-      if (href === window.location.href) {
-        return;
-      }
-      window.history.pushState({}, '', href);
-      this.fire('location-changed', {}, {
-        node: window
-      });
-    },
-    _getSameOriginLinkHref: function(event) {
-      if (event.button !== 0) {
-        return null;
-      }
-      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 (!anchor) {
-        return null;
-      }
-      if (anchor.target === '_blank') {
-        return null;
-      }
-      if ((anchor.target === '_top' || anchor.target === '_parent') && window.top !== window) {
-        return null;
-      }
-      var href = anchor.href;
-      var url;
-      if (document.baseURI != null) {
-        url = new URL(href, document.baseURI);
-      } else {
-        url = new URL(href);
-      }
-      var origin;
-      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 (this._urlSpaceRegExp && !this._urlSpaceRegExp.test(normalizedHref)) {
-        return null;
-      }
-      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 = {};
-    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;
-  }
-});
-
-'use strict';
-
-Polymer.AppRouteConverterBehavior = {
-  properties: {
-    route: {
-      type: Object,
-      notify: true
-    },
-    queryParams: {
-      type: Object,
-      notify: true
-    },
-    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');
-  },
-  _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
-    };
-  },
-  _routeChanged: function() {
-    if (!this.route) {
-      return;
-    }
-    this.path = this.route.prefix + this.route.path;
-  },
-  _routeQueryParamsChanged: function(queryParams) {
-    if (!this.route) {
-      return;
-    }
-    this.queryParams = queryParams;
-  }
-};
-
-'use strict';
-
-Polymer({
-  is: 'app-location',
-  properties: {
-    route: {
-      type: Object,
-      notify: true
-    },
-    useHashAsPath: {
-      type: Boolean,
-      value: false
-    },
-    urlSpaceRegex: {
-      type: String,
-      notify: true
-    },
-    __queryParams: {
-      type: Object
-    },
-    __path: {
-      type: String
-    },
-    __query: {
-      type: String
-    },
-    __hash: {
-      type: String
-    },
-    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: {
-    route: {
-      type: Object,
-      notify: true
-    },
-    pattern: {
-      type: String
-    },
-    data: {
-      type: Object,
-      value: function() {
-        return {};
-      },
-      notify: true
-    },
-    queryParams: {
-      type: Object,
-      value: function() {
-        return {};
-      },
-      notify: true
-    },
-    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
-    },
-    _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');
-  },
-  __routeQueryParamsChanged: function(queryParams) {
-    if (queryParams && this.tail) {
-      this.set('tail.__queryParams', queryParams);
-      if (!this.active || this._queryParamsUpdating) {
-        return;
-      }
-      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;
-        }
-      }
-      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;
-    }
-  },
-  __tailQueryParamsChanged: function(queryParams) {
-    if (queryParams && this.route) {
-      this.set('route.__queryParams', queryParams);
-    }
-  },
-  __queryParamsChanged: function(changes) {
-    if (!this.active || this._queryParamsUpdating) {
-      return;
-    }
-    this.set('route.__' + changes.path, changes.value);
-  },
-  __resetProperties: function() {
-    this._setActive(false);
-    this._matched = null;
-  },
-  __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();
-      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('/');
-    var propertyUpdates = {};
-    if (!this.active) {
-      propertyUpdates.active = true;
-    }
-    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
-      };
-    }
-    propertyUpdates.data = namedMatches;
-    this._dataInUrl = {};
-    for (var key in namedMatches) {
-      this._dataInUrl[key] = namedMatches[key];
-    }
-    this.__setMulti(propertyUpdates);
-  },
-  __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);
-  },
-  __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) {
-    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: {
     queryMatches: {
       type: Boolean,
       value: false,
       readOnly: true,
       notify: true
     },
     query: {
@@ skipping 511 matching lines @@
     }
     return 0;
   },
   _isValidScrollTarget: function() {
     return this.scrollTarget instanceof HTMLElement;
   }
 };
 
 (function() {
   'use strict';
+  Polymer({
+    is: 'iron-location',
+    properties: {
+      path: {
+        type: String,
+        notify: true,
+        value: function() {
+          return window.decodeURIComponent(window.location.pathname);
+        }
+      },
+      query: {
+        type: String,
+        notify: true,
+        value: function() {
+          return window.decodeURIComponent(window.location.search.slice(1));
+        }
+      },
+      hash: {
+        type: String,
+        notify: true,
+        value: function() {
+          return window.decodeURIComponent(window.location.hash.slice(1));
+        }
+      },
+      dwellTime: {
+        type: Number,
+        value: 2e3
+      },
+      urlSpaceRegex: {
+        type: String,
+        value: ''
+      },
+      _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(document.body, 'click', '_globalOnClick');
+      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(document.body, 'click', '_globalOnClick');
+      this._initialized = false;
+    },
+    _hashChanged: function() {
+      this.hash = window.decodeURIComponent(window.location.hash.substring(1));
+    },
+    _urlChanged: function() {
+      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))) {
+        return;
+      }
+      var newUrl = this._getUrl();
+      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
+      });
+    },
+    _globalOnClick: function(event) {
+      if (event.defaultPrevented) {
+        return;
+      }
+      var href = this._getSameOriginLinkHref(event);
+      if (!href) {
+        return;
+      }
+      event.preventDefault();
+      if (href === window.location.href) {
+        return;
+      }
+      window.history.pushState({}, '', href);
+      this.fire('location-changed', {}, {
+        node: window
+      });
+    },
+    _getSameOriginLinkHref: function(event) {
+      if (event.button !== 0) {
+        return null;
+      }
+      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 (!anchor) {
+        return null;
+      }
+      if (anchor.target === '_blank') {
+        return null;
+      }
+      if ((anchor.target === '_top' || anchor.target === '_parent') && window.top !== window) {
+        return null;
+      }
+      var href = anchor.href;
+      var url;
+      if (document.baseURI != null) {
+        url = new URL(href, document.baseURI);
+      } else {
+        url = new URL(href);
+      }
+      var origin;
+      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 (this._urlSpaceRegExp && !this._urlSpaceRegExp.test(normalizedHref)) {
+        return null;
+      }
+      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 = {};
+    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;
+  }
+});
+
+// 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-router',
+  properties: {
+    selectedPage: {
+      type: String,
+      observer: 'serializePath_',
+      notify: true
+    },
+    queryState: {
+      type: Object,
+      notify: true
+    },
+    path_: {
+      type: String,
+      observer: 'pathChanged_'
+    },
+    queryParams_: Object
+  },
+  observers: [ 'queryParamsChanged_(queryParams_.*)', 'queryStateChanged_(queryState.searchTerm)' ],
+  attached: function() {
+    if (window.location.hash) {
+      window.location.href = window.location.href.split('#')[0] + '?' + window.location.hash.substr(1);
+    }
+  },
+  serializePath_: function() {
+    var page = this.selectedPage == 'history' ? '' : this.selectedPage;
+    this.path_ = '/' + page;
+  },
+  pathChanged_: function() {
+    var sections = this.path_.substr(1).split('/');
+    this.selectedPage = sections[0] || 'history';
+  },
+  queryParamsChanged_: function() {
+    this.set('queryState.searchTerm', this.queryParams_.q || '');
+  },
+  queryStateChanged_: function() {
+    this.set('queryParams_.q', this.queryState.searchTerm || null);
+  }
+});
+
+(function() {
+  'use strict';
   var KEY_IDENTIFIER = {
     'U+0008': 'backspace',
     'U+0009': 'tab',
     'U+001B': 'esc',
     'U+0020': 'space',
     'U+007F': 'del'
   };
   var KEY_CODE = {
     8: 'backspace',
     9: 'tab',
@@ skipping 4152 matching lines @@
       value: 0,
       observer: 'changeToolbarView_'
     },
     itemsSelected_: {
       type: Boolean,
       value: false,
       reflectToAttribute: true
     },
     searchTerm: {
       type: String,
+      observer: 'searchTermChanged_',
       notify: true
     },
     spinnerActive: {
       type: Boolean,
       value: false
     },
     hasDrawer: {
       type: Boolean,
       observer: 'hasDrawerChanged_',
       reflectToAttribute: true
     },
     showSyncNotice: Boolean,
     isGroupedMode: {
       type: Boolean,
       reflectToAttribute: true
     },
     groupedRange: {
       type: Number,
       value: 0,
       reflectToAttribute: true,
       notify: true
     },
     queryStartTime: String,
     queryEndTime: String
   },
+  get searchBar() {
+    return this.$['main-toolbar'].getSearchField();
+  },
+  showSearchField: function() {
+    this.searchBar.showAndFocus();
+  },
   changeToolbarView_: function() {
     this.itemsSelected_ = this.count > 0;
   },
-  setSearchTerm: function(search) {
-    if (this.searchTerm == search) return;
-    this.searchTerm = search;
-    var searchField = this.$['main-toolbar'].getSearchField();
-    searchField.showAndFocus();
-    searchField.setValue(search);
+  searchTermChanged_: function() {
+    if (this.searchBar.getValue() != this.searchTerm) {
+      this.searchBar.showAndFocus();
+      this.searchBar.setValue(this.searchTerm);
+    }
   },
   onSearchChanged_: function(event) {
     this.searchTerm = event.detail;
   },
   onInfoButtonTap_: function() {
     var dropdown = this.$.syncNotice.get();
     dropdown.positionTarget = this.$$('#info-button-icon');
     if (dropdown.style.display == 'none') dropdown.open();
   },
   onClearSelectionTap_: function() {
     this.fire('unselect-all');
   },
   onDeleteTap_: function() {
     this.fire('delete-selected');
   },
-  get searchBar() {
-    return this.$['main-toolbar'].getSearchField();
-  },
-  showSearchField: function() {
-    this.$['main-toolbar'].getSearchField().showAndFocus();
-  },
   deletingAllowed_: function() {
     return loadTimeData.getBoolean('allowDeletingHistory');
   },
   numberOfItemsSelected_: function(count) {
     return count > 0 ? loadTimeData.getStringF('itemsSelected', count) : '';
   },
   getHistoryInterval_: function(queryStartTime, queryEndTime) {
     return loadTimeData.getStringF('historyInterval', queryStartTime, queryEndTime);
   },
   hasDrawerChanged_: function() {
@@ skipping 2120 matching lines @@
   properties: {
     selectedPage_: String,
     grouped: Boolean,
     groupedRange: {
       type: Number,
       observer: 'groupedRangeChanged_'
     },
     queryState: Object,
     queryResult: Object
   },
+  observers: [ 'searchTermChanged_(queryState.searchTerm)' ],
   listeners: {
     'history-list-scrolled': 'closeMenu_',
     'load-more-history': 'loadMoreHistory_',
     'toggle-menu': 'toggleMenu_'
   },
   historyResult: function(info, results) {
     this.initializeResults_(info, results);
     this.closeMenu_();
     if (this.selectedPage_ == 'grouped-list') {
       this.$$('#grouped-list').historyData = results;
@@ skipping 41 matching lines @@
     browserService.recordAction('RemoveSelected');
     if (this.queryState.searchTerm != '') browserService.recordAction('SearchResultRemove');
     this.$.dialog.get().showModal();
   },
   groupedRangeChanged_: function(range, oldRange) {
     this.selectedPage_ = range == HistoryRange.ALL_TIME ? 'infinite-list' : 'grouped-list';
     if (oldRange == undefined) return;
     this.queryHistory(false);
     this.fire('history-view-changed');
   },
+  searchTermChanged_: function() {
+    this.queryHistory(false);
+    if (this.queryState.searchTerm) md_history.BrowserService.getInstance().recordAction('Search');
+  },
   loadMoreHistory_: function() {
     this.queryHistory(true);
   },
   initializeResults_: function(info, results) {
     if (results.length == 0) return;
     var currentDate = results[0].dateRelativeDay;
     for (var i = 0; i < results.length; i++) {
       results[i].selected = false;
       results[i].readableTimestamp = info.term == '' ? results[i].dateTimeOfDay : results[i].dateShort;
       if (results[i].dateRelativeDay != currentDate) {
@@ skipping 17 matching lines @@
     if (menu) menu.closeMenu();
   },
   toggleMenu_: function(e) {
     var target = e.detail.target;
     var menu = this.$.sharedMenu.get();
     menu.toggleMenu(target, e.detail);
   },
   onMoreFromSiteTap_: function() {
     md_history.BrowserService.getInstance().recordAction('EntryMenuShowMoreFromSite');
     var menu = assert(this.$.sharedMenu.getIfExists());
-    this.fire('search-domain', {
-      domain: menu.itemData.item.domain
-    });
+    this.set('queryState.searchTerm', menu.itemData.item.domain);
     menu.closeMenu();
   },
   onRemoveFromHistoryTap_: function() {
     var browserService = md_history.BrowserService.getInstance();
     browserService.recordAction('EntryMenuRemoveFromHistory');
     var menu = assert(this.$.sharedMenu.getIfExists());
     var itemData = menu.itemData;
     browserService.deleteItems([ itemData.item ]).then(function(items) {
       this.getSelectedList_().removeItemsByPath([ itemData.path ]);
       this.fire('unselect-all');
@@ skipping 251 matching lines @@
 // 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',
   behaviors: [ Polymer.IronA11yKeysBehavior ],
   properties: {
     selectedPage: {
       type: String,
       notify: true
     },
-    route: Object,
     showFooter: Boolean,
     drawer: {
       type: Boolean,
       reflectToAttribute: true
     }
   },
   keyBindings: {
     'space:keydown': 'onSpacePressed_'
   },
   onSpacePressed_: function(e) {
     e.detail.keyboardEvent.path[0].click();
   },
   onSelectorActivate_: function() {
     this.fire('history-close-drawer');
   },
   onClearBrowsingDataTap_: function(e) {
     var browserService = md_history.BrowserService.getInstance();
     browserService.recordAction('InitClearBrowsingData');
     browserService.openClearBrowsingData();
     this.$['cbd-ripple'].upAction();
     e.preventDefault();
   },
-  getQueryString_: function(route) {
-    return window.location.search;
+  onItemClick_: function(e) {
+    e.preventDefault();
   }
 });
 
 // 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',
   behaviors: [ Polymer.IronScrollTargetBehavior ],
   properties: {
     showSidebarFooter: Boolean,
     hasSyncedResults: Boolean,
     selectedPage_: {
       type: String,
-      observer: 'unselectAll'
+      observer: 'selectedPageChanged_'
     },
     grouped_: {
       type: Boolean,
       reflectToAttribute: true
     },
     queryState_: {
       type: Object,
       value: function() {
         return {
           incremental: false,
@@ skipping 14 matching lines @@
     queryResult_: {
       type: Object,
       value: function() {
         return {
           info: null,
           results: null,
           sessionList: null
         };
       }
     },
-    routeData_: Object,
-    queryParams_: Object,
     hasDrawer_: Boolean,
     isUserSignedIn_: {
       type: Boolean,
       value: loadTimeData.getBoolean('isUserSignedIn')
     },
     toolbarShadow_: {
       type: Boolean,
       reflectToAttribute: true,
       notify: true
     }
   },
-  observers: [ 'routeDataChanged_(routeData_.page)', 'selectedPageChanged_(selectedPage_)', 'searchTermChanged_(queryState_.searchTerm)', 'searchQueryParamChanged_(queryParams_.q)' ],
   listeners: {
     'cr-menu-tap': 'onMenuTap_',
     'history-checkbox-select': 'checkboxSelected',
     'unselect-all': 'unselectAll',
     'delete-selected': 'deleteSelected',
     'search-domain': 'searchDomain_',
     'history-close-drawer': 'closeDrawer_',
     'history-view-changed': 'historyViewChanged_'
   },
   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));
-    if (window.location.hash) {
-      window.location.href = window.location.href.split('#')[0] + '?' + window.location.hash.substr(1);
-    }
   },
   onFirstRender: function() {
     requestAnimationFrame(function() {
       chrome.send('metricsHandler:recordTime', [ 'History.ResultsRenderedTime', window.performance.now() ]);
     });
     if (!this.hasDrawer_) {
       this.focusToolbarSearchField();
     }
   },
   _scrollHandler: function() {
-    this.toolbarShadow_ = this.scrollTarget.scrollTop != 0;
+    if (this.scrollTarget) this.toolbarShadow_ = this.scrollTarget.scrollTop != 0;
   },
   onMenuTap_: function() {
     var drawer = this.$$('#drawer');
     if (drawer) drawer.toggle();
   },
   checkboxSelected: function(e) {
     var toolbar = this.$.toolbar;
     toolbar.count = this.$.history.getSelectedItemCount();
   },
   unselectAll: function() {
     var listContainer = this.$.history;
     var toolbar = this.$.toolbar;
     listContainer.unselectAllItems(toolbar.count);
     toolbar.count = 0;
   },
   deleteSelected: function() {
     this.$.history.deleteSelectedWithPrompt();
   },
   historyResult: function(info, results) {
     this.set('queryState_.querying', false);
     this.set('queryResult_.info', info);
     this.set('queryResult_.results', results);
     var listContainer = this.$['history'];
     listContainer.historyResult(info, results);
   },
   focusToolbarSearchField: function() {
     this.$.toolbar.showSearchField();
   },
-  searchDomain_: function(e) {
-    this.$.toolbar.setSearchTerm(e.detail.domain);
-  },
   onCanExecute_: function(e) {
     e = 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;
     }
   },
-  searchTermChanged_: function(searchTerm) {
-    this.set('queryParams_.q', searchTerm || null);
-    this.$['history'].queryHistory(false);
-    if (this.queryState_.searchTerm) md_history.BrowserService.getInstance().recordAction('Search');
-  },
-  searchQueryParamChanged_: function(searchQuery) {
-    this.$.toolbar.setSearchTerm(searchQuery || '');
-  },
   onCommand_: function(e) {
     if (e.command.id == 'find-command' || e.command.id == 'slash-command') this.focusToolbarSearchField();
     if (e.command.id == 'delete-command') this.deleteSelected();
   },
   setForeignSessions: function(sessionList, isTabSyncEnabled) {
     if (!isTabSyncEnabled) {
       var syncedDeviceManagerElem = this.$$('history-synced-device-manager');
       if (syncedDeviceManagerElem) syncedDeviceManagerElem.tabSyncDisabled();
       return;
     }
     this.set('queryResult_.sessionList', sessionList);
   },
   historyDeleted: function() {
     this.$.history.historyDeleted();
   },
   updateSignInState: function(isUserSignedIn) {
     this.isUserSignedIn_ = isUserSignedIn;
   },
   syncedTabsSelected_: function(selectedPage) {
     return selectedPage == 'syncedTabs';
   },
   shouldShowSpinner_: function(querying, incremental, searchTerm) {
     return querying && !incremental && searchTerm != '';
   },
   showSyncNotice_: function(hasSyncedResults, selectedPage) {
     return hasSyncedResults && selectedPage != 'syncedTabs';
   },
-  routeDataChanged_: function(page) {
-    this.selectedPage_ = page;
-  },
-  selectedPageChanged_: function(selectedPage) {
-    this.set('routeData_.page', selectedPage);
+  selectedPageChanged_: function() {
+    this.unselectAll();
     this.historyViewChanged_();
   },
   historyViewChanged_: function() {
     requestAnimationFrame(function() {
-      this.scrollTarget = this.$.content.selectedItem.getContentScrollTarget();
-      this._scrollHandler();
+      if (this.$.content.selectedItem) {
+        this.scrollTarget = this.$.content.selectedItem.getContentScrollTarget();
+        this._scrollHandler();
+      }
     }.bind(this));
     this.recordHistoryPageView_();
   },
   getSelectedPage_: function(selectedPage, items) {
     return selectedPage;
   },
   closeDrawer_: function() {
     var drawer = this.$$('#drawer');
     if (drawer) drawer.close();
   },
@@ skipping 16 matching lines @@
 
        case HistoryRange.MONTH:
         histogramValue = HistoryPageViewHistogram.GROUPED_MONTH;
         break;
       }
       break;
     }
     md_history.BrowserService.getInstance().recordHistogram('History.HistoryPageView', histogramValue, HistoryPageViewHistogram.END);
   }
 });