Improved tabbed options subsheets.

1. Fix subsheet RTL.

for the record, and to whom it may concern:

"""
If neither 'left' nor 'right' is 'auto', the position is over-constrained, and one of them has to be ignored. If the 'direction' property of the containing block is 'ltr, the value of 'left' wins and 'right' becomes -'left'. If 'direction' of the containing block is 'rtl', 'right' wins and 'left' is ignored.
"""

2. add handlers to the body element to remove the subsheets when the user clicks outside them.

BUG=67849
TEST=
1. LANGUAGE=he_IL.utf-8 ./out/Release/chrome (looks right)
2. clicking away from the subsheets to dismiss them should still work.
3. clicking to the right (in ltr) of the subsheets should dismiss them (this is new)

Review URL: http://codereview.chromium.org/6277005

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@71724 0039d316-1c4b-4281-b951-d872f2087c98

chrome/browser/resources/options/options_page.css

@@ -192,23 +192,26 @@ html[hide-menu=true] #mainview {
 }
 
 .subpage-sheet-container {
-  padding: 8px;
-  -webkit-padding-start: 60px;
+  -webkit-margin-start: 60px;
   box-sizing: border-box;
   height: 100%;
+  padding: 8px;
+  /* Must come after padding. */
+  -webkit-padding-start: 0;
   position: absolute;
-  top: 0;
+  /* We set both left and right for the sake of RTL. */
   left: 0;
+  right: 0;
+  top: 0;
+  width: 688px;
 }
 
 #subpage-sheet-container-1 {
-  width: 748px;
   z-index: 5;
 }
 
 #subpage-sheet-container-2 {
-  left: 60px;
-  width: 688px;
+  -webkit-padding-start: 60px;
   z-index: 10;
 }
 

chrome/browser/resources/options/options_page.js

@@ -319,14 +319,25 @@ cr.define('options', function() {
       var containerId = 'subpage-sheet-container-' + level;
       $(containerId).onclick = this.subPageClosingClickHandler_(level);
     }
-    // Hook up the close buttons.
+
     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.
     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) {
@@ -343,20 +354,52 @@ cr.define('options', function() {
    * 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