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 = {};
+
+  /**
    * 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);
+
+      // 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" (e.g. "/createProfile").
+   * @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;
     // Only update the currently displayed path if this is the visible frame.
     if (getIframeFromOrigin(origin).parentNode == getSelectedIframe())
-      changePathTo(path, HISTORY_STATE_OPTION.REPLACE);
+      changePathTo(state, path, historyOption);
   }
 
   /**
    * 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] || [];
+    queuedInvokes[container.id] = undefined;
+    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');
+    var container = getRequiredElement(pageId);
 
     // 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);
+    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);