[uber] make the navigation controls an iframe

chrome/browser/resources/options2/options_page.css

Index: chrome/browser/resources/options2/options_page.css
diff --git a/chrome/browser/resources/options2/options_page.css b/chrome/browser/resources/options2/options_page.css
index 99654157ed00bcbdbd7a91a42a4ffbf99c992289..aef0ada097ae58545e7c879c4940033df622d7af 100644
--- a/chrome/browser/resources/options2/options_page.css
+++ b/chrome/browser/resources/options2/options_page.css
@@ -1,3 +1,12 @@
+/* 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;
@@ -131,12 +140,20 @@ html[touch-optimized] body {
 }
 
 #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;
 }