Settings: load iframes anew when switching to a non-current one.

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.
@@ skipping 87 matching lines @@
 
   /**
    * Handler for window.onpopstate.
    * @param {Event} e The history event.
    */
   function onPopHistoryState(e) {
     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)
+      // If the page isn't the current page, load it fresh. Even if the page is
+      // already loaded, it may have state not reflected in the URL, such as the
+      // history page's "Remove selected items" overlay. https://crbug.com/377386

[Dan Beam, 2014/05/27 18:01:16]

https://crbug -> http://crbug to fix 80 col (and so the link works)

[davidben, 2014/05/27 19:18:35]

Done. (https://crbug.com works now, actually.)

+      if (getRequiredElement(params.id) !== getSelectedIframe())
         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});
     }
   }
@@ skipping 93 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 {string} pageId Should match an id of one of the iframe containers.
    * @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(pageId, state, 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, pageState: state},
                 '',
                 '/' + pageId + '/' + (path || '')];
     histFunc.apply(window.history, args);
   }
 
   /**
    * 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 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.
     var container = getIframeFromOrigin(origin).parentNode;
     if (container == getSelectedIframe())
-      changePathTo(container.id, state, path, historyOption);
+      changePathTo(state, path, historyOption);
   }
 
   /**
    * Sets the title of the page.
    * @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
@@ skipping 42 matching lines @@
 
   /**
    * 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');

[Dan Beam, 2014/05/27 18:01:16]

lower to right before use

[davidben, 2014/05/27 19:18:35]

Done.

 
     // 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;
     }
 
-    // This must be called before selectPage so that the title change applies to
-    // the new history entry.
-    if (historyOption != HISTORY_STATE_OPTION.NONE)
-      changePathTo(pageId, {}, path, historyOption);
-
-    selectPage(pageId);
-  }
-
-  /**
-   * 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 = getRequiredElement(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);