Fix subsheet RTL.

chrome/browser/resources/options/options_page.js

 // Copyright (c) 2010 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.
@@ skipping 301 matching lines @@
   OptionsPage.initialize = function() {
     chrome.send('coreOptionsInitialize');
     this.initialized_ = true;
 
     // Set up the overlay sheets:
     // Close nested sub-pages when clicking the visible part of an earlier page.
     for (var level = 1; level <= 2; level++) {
       var containerId = 'subpage-sheet-container-' + level;
       $(containerId).onclick = this.subPageClosingClickHandler_(level);
     }
+
+    var self = this;
+    // Close subpages if the user clicks on the html body. Listen in the
+    // capturing phase so that we can stop the click from doing anything.
+    document.body.addEventListener('click',
+                                   this.bodyMouseEventHandler_.bind(this),
+                                   true);
+    // We also need to cancel mousedowns on non-subpage content.
+    document.body.addEventListener('mousedown',
+                                   this.bodyMouseEventHandler_.bind(this),
+                                   true);
+
     // Hook up the close buttons.
-    var self = this;
     subpageCloseButtons = document.querySelectorAll('.close-subpage');
     for (var i = 0; i < subpageCloseButtons.length; i++) {
       subpageCloseButtons[i].onclick = function() {
         self.closeTopSubPage();
       };
-    }
+    };
 
     // Close the top overlay or sub-page on esc.
     document.addEventListener('keydown', function(e) {
       if (e.keyCode == 27) { // Esc
         if (self.isOverlayVisible_())
           self.clearOverlays();
         else
           self.closeTopSubPage();
       }
     });
   };
 
   /**
    * Returns a function to handle clicks behind a subpage at level |level| by
    * closing all subpages down to |level| - 1.
    * @param {number} level The level of the subpage being handled.
-   * @return {function} a function to handle clicks outside the given subpage.
+   * @return {Function} a function to handle clicks outside the given subpage.
    * @private
    */
   OptionsPage.subPageClosingClickHandler_ = function(level) {
     var self = this;
     return function(event) {
-      // Clicks on the visible part of the parent page should close the overlay,
+      // Clicks on the narrow strip between the left of the subpage sheet and
+      // that shows part of the parent page should close the overlay, but
       // not fall through to the parent page.
       if (!$('subpage-sheet-' + level).contains(event.target))
         self.closeSubPagesToLevel(level - 1);
       event.stopPropagation();
+      event.preventDefault();
     };
   };
 
   /**
+   * A function to handle mouse events (mousedown or click) on the html body by
+   * closing subpages and/or stopping event propagation.
+   * @return {Event} a mousedown or click event.
+   * @private
+   */
+  OptionsPage.bodyMouseEventHandler_ = function(event) {
+    // Do nothing if a subpage isn't showing.
+    var topPage = this.getTopmostVisiblePage();
+    if (!(topPage && topPage.parentPage))
+      return;
+
+    // If the click was within a subpage, do nothing.
+    for (var level = 1; level <= 2; level++) {
+      if ($('subpage-sheet-container-' + level).contains(event.target))
+        return;
+    }
+
+    // Close all subpages on click.
+    if (event.type == 'click')
+      this.closeSubPagesToLevel(0);
+
+    // Events should not fall through to the main view,
+    // but they can fall through for the sidebar.
+    if ($('mainview-content').contains(event.target)) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  };
+
+  /**
    * Re-initializes the C++ handlers if necessary. This is called if the
    * handlers are torn down and recreated but the DOM may not have been (in
    * which case |initialize| won't be called again). If |initialize| hasn't been
    * called, this does nothing (since it will be later, once the DOM has
    * finished loading).
    */
   OptionsPage.reinitializeCore = function() {
     if (this.initialized_)
       chrome.send('coreOptionsInitialize');
   }
@@ skipping 156 matching lines @@
       OptionsPage.showOverlay(hash);
     },
   };
 
   // Export
   return {
     OptionsPage: OptionsPage
   };
 
 });