[uber] make the navigation controls an iframe

chrome/browser/resources/options2/options_page.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('options', function() {
   /////////////////////////////////////////////////////////////////////////////
   // OptionsPage class:
 
   /**
    * Base class for options page.
    * @constructor
    * @param {string} name Options page name, also defines id of the div element
    *     containing the options view and the name of options page navigation bar
    *     item as name+'PageNav'.
    * @param {string} title Options page title, used for navigation bar
    * @extends {EventTarget}
    */
   function OptionsPage(name, title, pageDivName) {
     this.name = name;
     this.title = title;
     this.pageDivName = pageDivName;
     this.pageDiv = $(this.pageDivName);
     this.tab = null;
   }
 
   const SUBPAGE_SHEET_COUNT = 2;
 
+  const HORIZONTAL_OFFSET = 155;
+
   /**
    * Main level option pages. Maps lower-case page names to the respective page
    * object.
    * @protected
    */
   OptionsPage.registeredPages = {};
 
   /**
    * Pages which are meant to behave like modal dialogs. Maps lower-case overlay
    * names to the respective overlay object.
@@ skipping 228 matching lines @@
       return false;
 
     if ((!rootPage || !rootPage.sticky) && overlay.parentPage)
       this.showPageByName(overlay.parentPage.name, false);
 
     if (!overlay.visible) {
       overlay.visible = true;
       if (overlay.didShowPage) overlay.didShowPage();
     }
 
-    uber.invokeMethodOnParent('showOverlay');
-
     return true;
   };
 
   /**
    * Returns whether or not an overlay is visible.
    * @return {boolean} True if an overlay is visible.
    * @private
    */
   OptionsPage.isOverlayVisible_ = function() {
     return this.getVisibleOverlay_() != null;
@@ skipping 15 matching lines @@
   /**
    * Closes the visible overlay. Updates the history state after closing the
    * overlay.
    */
   OptionsPage.closeOverlay = function() {
     var overlay = this.getVisibleOverlay_();
     if (!overlay)
       return;
 
     overlay.visible = false;
-    uber.invokeMethodOnParent('hideOverlay');
 
     if (overlay.didClosePage) overlay.didClosePage();
     this.updateHistoryState_();
   };
 
   /**
    * Hides the visible overlay. Does not affect the history state.
    * @private
    */
   OptionsPage.hideOverlay_ = function() {
     var overlay = this.getVisibleOverlay_();
-    if (overlay) {
+    if (overlay)
       overlay.visible = false;
-      uber.invokeMethodOnParent('hideOverlay');
-    }
   };
 
   /**
    * Returns the pages which are currently visible, ordered by nesting level
    * (ascending).
    * @return {Array.OptionPage} The pages which are currently visible, ordered
    * by nesting level (ascending).
    */
   OptionsPage.getVisiblePages_ = function() {
     var visiblePages = [];
@@ skipping 306 matching lines @@
       };
 
       // Install handler for key presses.
       document.addEventListener('keydown',
                                 this.keyDownEventHandler_.bind(this));
 
       document.addEventListener('focus', this.manageFocusChange_.bind(this),
                                 true);
     }
 
-    // Calculate and store the horizontal locations of elements that may be
-    // frozen later.
-    var sidebarWidth =
-        parseInt(window.getComputedStyle($('mainview')).webkitPaddingStart, 10);
-    $('page-container').horizontalOffset = sidebarWidth +
-        parseInt(window.getComputedStyle(
-            $('mainview-content')).webkitPaddingStart, 10);
-    for (var level = 1; level <= SUBPAGE_SHEET_COUNT; level++) {
-      var containerId = 'subpage-sheet-container-' + level;
-      $(containerId).horizontalOffset = sidebarWidth;
-    }
-    $('subpage-backdrop').horizontalOffset = sidebarWidth;
     // Trigger the resize handler manually to set the initial state.
     this.handleResize_(null);
   };
 
   /**
    * Does a bounds check for the element on the given x, y client coordinates.
    * @param {Element} e The DOM element.
    * @param {number} x The client X to check.
    * @param {number} y The client Y to check.
    * @return {boolean} True if the point falls within the element's bounds.
@@ skipping 36 matching lines @@
    * but should only behave as if they are fixed for vertical scrolling.
    * @param {Event} e The scroll event.
    * @private
    */
   OptionsPage.handleScroll_ = function(e) {
     var scrollHorizontalOffset = document.body.scrollLeft;
     // position:fixed doesn't seem to work for horizontal scrolling in RTL mode,
     // so only adjust in LTR mode (where scroll values will be positive).
     if (scrollHorizontalOffset >= 0) {
       var subpageBackdrop = $('subpage-backdrop');
-      subpageBackdrop.style.left = subpageBackdrop.horizontalOffset -
+      subpageBackdrop.style.left = HORIZONTAL_OFFSET -
           scrollHorizontalOffset + 'px';
       this.updateAllFrozenElementPositions_();
     }
   };
 
   /**
    * Updates all frozen pages to match the horizontal scroll position.
    * @private
    */
   OptionsPage.updateAllFrozenElementPositions_ = function() {
     var frozenElements = document.querySelectorAll('.frozen');
     for (var i = 0; i < frozenElements.length; i++) {
       this.updateFrozenElementHorizontalPosition_(frozenElements[i]);
     }
   };
 
   /**
    * Updates the given frozen element to match the horizontal scroll position.
    * @param {HTMLElement} e The frozen element to update
    * @private
    */
   OptionsPage.updateFrozenElementHorizontalPosition_ = function(e) {
     if (document.documentElement.dir == 'rtl')
-      e.style.right = e.horizontalOffset + 'px';
+      e.style.right = HORIZONTAL_OFFSET + 'px';
     else
-      e.style.left = e.horizontalOffset - document.body.scrollLeft + 'px';
+      e.style.left = HORIZONTAL_OFFSET - document.body.scrollLeft + 'px';
   };
 
   /**
    * Called when the page is resized; adjusts the size of elements that depend
    * on the veiwport.
    * @param {Event} e The resize event.
    * @private
    */
   OptionsPage.handleResize_ = function(e) {
     // Set an explicit height equal to the viewport on all the subpage
@@ skipping 207 matching lines @@
       } else {
         var nestingLevel = this.nestingLevel;
         if (nestingLevel > 0)
           container = $('subpage-sheet-container-' + nestingLevel);
       }
       var isSubpage = !this.isOverlay;
 
       if (!container)
         return;
 
+      if (visible)
+        uber.invokeMethodOnParent('beginInterceptingEvents');
+
       if (container.hidden != visible) {
         if (visible) {
           // If the container is set hidden and then immediately set visible
           // again, the fadeCompleted_ callback would cause it to be erroneously
           // hidden again. Removing the transparent tag avoids that.
           container.classList.remove('transparent');
         }
         return;
       }
 
@@ skipping 21 matching lines @@
         container.classList.add('transparent');
       }
     },
 
     /**
      * Called when a container opacity transition finishes.
      * @param {HTMLElement} container The container element.
      * @private
      */
     fadeCompleted_: function(container) {
-      if (container.classList.contains('transparent'))
+      if (container.classList.contains('transparent')) {
         container.hidden = true;
+        uber.invokeMethodOnParent('stopInterceptingEvents');
+      }
     },
 
     /**
      * Focuses the first control on the page.
      */
     focusFirstElement: function() {
       // Sets focus on the first interactive element in the page.
       var focusElement =
           this.pageDiv.querySelector('button, input, list, select');
       if (focusElement)
@@ skipping 46 matching lines @@
     canShowPage: function() {
       return true;
     },
   };
 
   // Export
   return {
     OptionsPage: OptionsPage
   };
 });