Options: maintain history entries on the parent frame.

chrome/browser/resources/uber/uber.js

 // 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.
 
 cr.define('uber', function() {
   /**
    * Options for how web history should be handled.
    */
   var HISTORY_STATE_OPTION = {
     PUSH: 1,    // Push a new history state.
     REPLACE: 2, // Replace the current history state.
     NONE: 3,    // Ignore this history state change.
   };
 
   /**
    * We cache a reference to the #navigation frame here so we don't need to grab
    * it from the DOM on each scroll.
    * @type {Node}
    * @private
    */
   var navFrame;
 
   /**
+   * A queue of method invocations on one of the iframes; if the iframe has not
+   * loaded by the time there is a method to invoke, delay the invocation until
+   * it is ready.
+   * @type {Object}
+   * @private
+   */
+  var queuedInvokes = {};

[davidben, 2014/05/19 22:38:33]

This may not be strictly necessary? The only page that cares about state (the
settings page) makes all the state redundant with the URL. So we don't actually
need to follow "load" with a simulated "popstate". But this does match how Blink
does it. The queuing is kinda icky but there's a race otherwise. (Why didn't we
define it to work that way to begin with? I guess it's not clear whether you
want to signal the current page or the provisional load, but still...)

+
+  /**
    * Handles page initialization.
    */
   function onLoad(e) {
     navFrame = $('navigation');
     navFrame.dataset.width = navFrame.offsetWidth;
 
     // Select a page based on the page-URL.
     var params = resolvePageInfo();
     showPage(params.id, HISTORY_STATE_OPTION.NONE, params.path);
 
@@ skipping 51 matching lines @@
       params.id = getDefaultIframe().id;
 
     return params;
   }
 
   /**
    * Handler for window.onpopstate.
    * @param {Event} e The history event.
    */
   function onPopHistoryState(e) {
-    if (e.state && e.state.pageId)
-      showPage(e.state.pageId, HISTORY_STATE_OPTION.NONE);
+    if (e.state && e.state.pageId) {
+      var params = resolvePageInfo();
+      assert(params.id === e.state.pageId);
+
+      // If the page doesn't exist, create it. Otherwise, swap it in.
+      var frame = $(params.id).querySelector('iframe');
+      if (!frame) {
+        showPage(params.id, HISTORY_STATE_OPTION.NONE, params.path);
+      } else {
+        selectPage(params.id);
+      }

[Dan Beam, 2014/05/19 23:06:49]

nit: no curlies

[davidben, 2014/05/19 23:32:28]

Done.

+
+      // Either way, send the state down to it.
+      //
+      // Note: This assumes that the state and path parameters for every page
+      // under this origin are compatible. All of the downstream pages which
+      // navigate use pushState and replaceState.
+      invokeMethodOnPage(e.state.pageId, 'popState',
+                         {state: e.state.pageState, path: params.path});
+    }
   }
 
   /**
    * @return {Object} The default iframe container.
    */
   function getDefaultIframe() {
     return $(loadTimeData.getString('helpHost'));
   }
 
   /**
@@ skipping 16 matching lines @@
    * |method| is required, while |params| is optional. Extra parameters required
    * by a method must be specified by that method's documentation.
    *
    * @param {Event} e The posted object.
    */
   function handleWindowMessage(e) {
     if (e.data.method === 'beginInterceptingEvents') {
       backgroundNavigation();
     } else if (e.data.method === 'stopInterceptingEvents') {
       foregroundNavigation();
-    } else if (e.data.method === 'setPath') {
-      setPath(e.origin, e.data.params.path);
+    } else if (e.data.method === 'ready') {
+      pageReady(e.origin);
+    } else if (e.data.method === 'updateHistory') {
+      updateHistory(e.origin, e.data.params.state, e.data.params.path,
+                    e.data.params.replace);
     } else if (e.data.method === 'setTitle') {
       setTitle(e.origin, e.data.params.title);
     } else if (e.data.method === 'showPage') {
       showPage(e.data.params.pageId,
                HISTORY_STATE_OPTION.PUSH,
                e.data.params.path);
     } else if (e.data.method === 'navigationControlsLoaded') {
       onNavigationControlsLoaded();
     } else if (e.data.method === 'adjustToScroll') {
       adjustToScroll(e.data.params);
@@ skipping 43 matching lines @@
    * @return {!HTMLElement} The frame associated to |origin| or null.
    */
   function getIframeFromOrigin(origin) {
     assert(origin.substr(-1) != '/', 'invalid origin given');
     var query = '.iframe-container > iframe[src^="' + origin + '/"]';
     return document.querySelector(query);
   }
 
   /**
    * Changes the path past the page title (i.e. chrome://chrome/settings/(.*)).
+   * @param {Object} state The page's state object for the navigation.
    * @param {string} path The new /path/ to be set after the page name.
    * @param {number} historyOption The type of history modification to make.
    */
-  function changePathTo(path, historyOption) {
+  function changePathTo(state, path, historyOption) {
     assert(!path || path.substr(-1) != '/', 'invalid path given');
 
     var histFunc;
     if (historyOption == HISTORY_STATE_OPTION.PUSH)
       histFunc = window.history.pushState;
     else if (historyOption == HISTORY_STATE_OPTION.REPLACE)
       histFunc = window.history.replaceState;
 
     assert(histFunc, 'invalid historyOption given ' + historyOption);
 
     var pageId = getSelectedIframe().id;
-    var args = [{pageId: pageId}, '', '/' + pageId + '/' + (path || '')];
+    var args = [{pageId: pageId, pageState: state},
+                '',
+                '/' + pageId + '/' + (path || '')];
     histFunc.apply(window.history, args);
   }
 
   /**
-   * Sets the "path" of the page (actually the path after the first '/' char).
-   * @param {Object} origin The origin of the source iframe.
-   * @param {string} title The new "path".
+   * Adds or replaces the current history entry based on a navigation from the
+   * source iframe.
+   * @param {string} origin The origin of the source iframe.
+   * @param {Object} state The source iframe's state object.
+   * @param {string} path The new "path".

[Dan Beam, 2014/05/19 23:06:49]

@param {string} path The new "path" (e.g. "/createProfile").

[davidben, 2014/05/19 23:32:28]

Done.

+   * @param {boolean} replace Whether to replace the current history entry.
    */
-  function setPath(origin, path) {
+  function updateHistory(origin, state, path, replace) {
     assert(!path || path[0] != '/', 'invalid path sent from ' + origin);
+    var historyOption =
+      replace ? HISTORY_STATE_OPTION.REPLACE : HISTORY_STATE_OPTION.PUSH;

[Dan Beam, 2014/05/19 23:06:49]

nit: 4 \s indent

[davidben, 2014/05/19 23:32:28]

Done.

     // Only update the currently displayed path if this is the visible frame.
-    if (getIframeFromOrigin(origin).parentNode == getSelectedIframe())
-      changePathTo(path, HISTORY_STATE_OPTION.REPLACE);
+    if (getIframeFromOrigin(origin).parentNode == getSelectedIframe()) {
+      changePathTo(state, path, historyOption);
+    }

[Dan Beam, 2014/05/19 23:06:49]

nit: no curlies

[davidben, 2014/05/19 23:32:28]

Done.

   }
 
   /**
    * Sets the title of the page.
-   * @param {Object} origin The origin of the source iframe.
+   * @param {string} origin The origin of the source iframe.
    * @param {string} title The title of the page.
    */
   function setTitle(origin, title) {
     // Cache the title for the client iframe, i.e., the iframe setting the
     // title. querySelector returns the actual iframe element, so use parentNode
     // to get back to the container.
     var container = getIframeFromOrigin(origin).parentNode;
     container.dataset.title = title;
 
     // Only update the currently displayed title if this is the visible frame.
     if (container == getSelectedIframe())
       document.title = title;
   }
 
   /**
-   * Selects a subpage. This is called from uber-frame.
+   * Invokes a method on a subpage. If the subpage has not signaled readiness,
+   * queue the message for when it does.
+   * @param {string} pageId Should match an id of one of the iframe containers.
+   * @param {string} method The name of the method to invoke.
+   * @param {Object=} opt_params Optional property page of parameters to pass to
+   *     the invoked method.
+   */
+  function invokeMethodOnPage(pageId, method, opt_params) {
+    var frame = $(pageId).querySelector('iframe');
+    if (!frame || !frame.dataset.ready) {
+      queuedInvokes[pageId] = (queuedInvokes[pageId] || []);
+      queuedInvokes[pageId].push([method, opt_params]);
+    } else {
+      uber.invokeMethodOnWindow(frame.contentWindow, method, opt_params);
+    }
+  }
+
+  /**
+   * Called in response to a page declaring readiness. Calls any deferred method
+   * invocations from invokeMethodOnPage.
+   * @param {string} origin The origin of the source iframe.
+   */
+  function pageReady(origin) {
+    var frame = getIframeFromOrigin(origin);
+    var container = frame.parentNode;
+    frame.dataset.ready = true;
+    var queue = queuedInvokes[container.id] || [];
+    delete queuedInvokes[container.id];

[Dan Beam, 2014/05/19 23:06:49]

arguably this should be

  queuedInvokes[container.id] = undefined;

because we're not supposed to use `delete` in chrome code.

[davidben, 2014/05/19 23:32:28]

Done.

+    for (var i = 0; i < queue.length; i++) {
+      uber.invokeMethodOnWindow(frame.contentWindow, queue[i][0], queue[i][1]);
+    }
+  }
+
+  /**
+   * Selects and navigates a subpage. This is called from uber-frame.
    * @param {string} pageId Should match an id of one of the iframe containers.
    * @param {integer} historyOption Indicates whether we should push or replace
    *     browser history.
    * @param {string} path A sub-page path.
    */
   function showPage(pageId, historyOption, path) {
     var container = $(pageId);
-    var lastSelected = document.querySelector('.iframe-container.selected');
 
     // Lazy load of iframe contents.
     var sourceUrl = container.dataset.url + (path || '');
     var frame = container.querySelector('iframe');
     if (!frame) {
       frame = container.ownerDocument.createElement('iframe');
       frame.name = pageId;
       container.appendChild(frame);
       frame.src = sourceUrl;
     } else {
       // There's no particularly good way to know what the current URL of the
       // content frame is as we don't have access to its contentWindow's
       // location, so just replace every time until necessary to do otherwise.
       frame.contentWindow.location.replace(sourceUrl);
+      frame.dataset.ready = false;
     }
 
+    selectPage(pageId);
+
+    if (historyOption != HISTORY_STATE_OPTION.NONE)
+      changePathTo({}, path, historyOption);
+  }
+
+  /**
+   * Switches to a subpage. The subpage must already exist.
+   * @param {string} pageId Should match an id of one of the iframe containers.
+   */
+  function selectPage(pageId) {
+    var container = $(pageId);

[Dan Beam, 2014/05/19 23:06:49]

nit: $ -> getRequiredElement

[davidben, 2014/05/19 23:32:28]

Done.

[Dan Beam, 2014/05/19 23:49:10]

I think you did this on L325 instead of L354

[davidben, 2014/05/20 00:12:55]

Oops, so I did. Done.

+    var lastSelected = document.querySelector('.iframe-container.selected');
+
     // If the last selected container is already showing, ignore the rest.
     if (lastSelected === container)
       return;
 
     if (lastSelected) {
       lastSelected.classList.remove('selected');
       // Setting aria-hidden hides the container from assistive technology
       // immediately. The 'hidden' attribute is set after the transition
       // finishes - that ensures it's not possible to accidentally focus
       // an element in an unselected container.
       lastSelected.setAttribute('aria-hidden', 'true');
     }
 
     // Containers that aren't selected have to be hidden so that their
     // content isn't focusable.
     container.hidden = false;
     container.setAttribute('aria-hidden', 'false');
 
     // Trigger a layout after making it visible and before setting
     // the class to 'selected', so that it animates in.
     container.offsetTop;
     container.classList.add('selected');
 
     setContentChanging(true);
     adjustToScroll(0);
 
     var selectedFrame = getSelectedIframe().querySelector('iframe');
     uber.invokeMethodOnWindow(selectedFrame.contentWindow, 'frameSelected');
 
-    if (historyOption != HISTORY_STATE_OPTION.NONE)
-      changePathTo(path, historyOption);
-
     if (container.dataset.title)
       document.title = container.dataset.title;
     $('favicon').href = 'chrome://theme/' + container.dataset.favicon;
     $('favicon2x').href = 'chrome://theme/' + container.dataset.favicon + '@2x';
 
     updateNavigationControls();
   }
 
   function onNavigationControlsLoaded() {
     updateNavigationControls();
@@ skipping 64 matching lines @@
   }
 
   return {
     onLoad: onLoad,
     onPopHistoryState: onPopHistoryState
   };
 });
 
 window.addEventListener('popstate', uber.onPopHistoryState);
 document.addEventListener('DOMContentLoaded', uber.onLoad);