[uber] make the navigation controls an iframe

chrome/browser/resources/options2/options_page.css

+/* 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.
+ */
+
+body {
+  position: relative;
+}
+
 #main-content {
   display: -webkit-box;
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
 }
 
 #mainview {
@@ skipping 112 matching lines @@
 
 /*
  * Override the font-size rule in shared_options.css file.
  * 16 px font-size proved to be more touch friendly. It increases the touchable
  * area for buttons and input boxes.
  */
 html[touch-optimized] body {
   font-size: 16px;
 }
 
 #overlay {

[csilv, 2012/01/20 03:30:11]

This seems useful to other web-ui, why move it out of shared?

[Evan Stade, 2012/01/20 03:36:07]

it is not used by other webui. If another webui wants an overlay, we can
re-share very easily. In general I'd rather not speculate about what may be
useful to share because it's harder to track down if a certain block of CSS is
actually being used (and can be deleted) if it's in a place like
chrome_shared2.css.

[csilv, 2012/01/20 03:55:59]

That's sounds fine.  The extensions page does have a dialog (the 'Pack
extension' dialog) that looks like it might use #overlay, but I don't have the
source in front of me.

-  /* -155px hack compensates for uber navigation area.  */
-  left: -155px;
-  /* This padding keeps the dialog from moving too far to the left.
-   * 155px (navigation area) + 40px (dialog shadow) = 195px */
-  padding-left: 195px;
-  padding-right: 195px;
+  -webkit-box-align: center;
+  -webkit-box-orient: vertical;
+  -webkit-box-pack: center;
+  -webkit-transition: 200ms opacity;
+  background-color: rgba(255, 255, 255, 0.75);
+  bottom: 0;

[Dan Beam, 2012/01/20 00:59:02]

confused, why bottom & top? some magic I'm unaware of?

+  display: -webkit-box;
+  left: 0;
+  overflow: auto;
+  padding: 20px;
+  padding-bottom: 130px;
+  position: fixed;
+  right: 0;
+  top: 0;
   z-index: 10;
 }
 
 .raw-button,
 .raw-button:hover,
 .raw-button:active {
   -webkit-box-shadow: none;
   background-color: transparent;
   background-repeat: no-repeat;
   border: none;
@@ skipping 581 matching lines @@
       url('chrome://theme/IDR_CONTROLLED_SETTING_RECOMMENDED_LARGE');
 }
 
 html[dir='rtl'] .controlled-setting-bubble-text {
   background-position: right top;
 }
 
 .controlled-setting-bubble-action {
   padding: 0 !important;
 }