hack for overlays in uber page

communicate need to show overlays on uber section of page via postMessage

BUG=100885
TEST=open chrome://chrome, go to options, pop up an overlay, resize browser window, close overlay


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

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

6 files changed, 61 insertions, 21 deletions

diff --git a/chrome/browser/resources/options2/options_page.css b/chrome/browser/resources/options2/options_page.css
index 3dc1183..8641f91 100644
--- a/chrome/browser/resources/options2/options_page.css
+++ b/chrome/browser/resources/options2/options_page.css
@@ -141,23 +141,13 @@ html[touch-optimized] body {
   font-size: 16px;
 }
 
-.overlay {
-  -webkit-box-align: center;
-  -webkit-box-orient: vertical;
-  -webkit-box-pack: center;
-  -webkit-transition: 250ms opacity;
-  background: -webkit-radial-gradient(rgba(127, 127, 127, 0.5),
-                                      rgba(127, 127, 127, 0.5) 35%,
-                                      rgba(0, 0, 0, 0.7));
-  bottom: 0;
-  display: -webkit-box;
-  left: 0;
-  overflow: auto;
-  padding: 20px;
-  padding-bottom: 130px;
-  position: fixed;
-  right: 0;
-  top: 0;
+#overlay {
+  /* -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;
   z-index: 10;
 }
 
@@ -243,7 +233,7 @@ html[dir='rtl'] .action-area {
 }
 
 .overlay .page {
-  -webkit-box-shadow: 0 5px 80px #505050;
+  -webkit-box-shadow: 0 5px 40px #505050;
   background: white;
   border: 1px solid rgb(188, 193, 208);
   border-radius: 2px;
diff --git a/chrome/browser/resources/options2/options_page.js b/chrome/browser/resources/options2/options_page.js
index 737a8cf..35f4e36 100644
--- a/chrome/browser/resources/options2/options_page.js
+++ b/chrome/browser/resources/options2/options_page.js
@@ -229,6 +229,9 @@ cr.define('options', function() {
       if (overlay.didShowPage) overlay.didShowPage();
     }
 
+    if (window.parent)
+      window.parent.postMessage('showOverlay', 'chrome://chrome');
+
     return true;
   };
 
@@ -264,6 +267,9 @@ cr.define('options', function() {
       return;
 
     overlay.visible = false;
+    if (window.parent)
+      window.parent.postMessage('hideOverlay', 'chrome://chrome');
+
     if (overlay.didClosePage) overlay.didClosePage();
     this.updateHistoryState_();
   };
diff --git a/chrome/browser/resources/shared/css/chrome_shared2.css b/chrome/browser/resources/shared/css/chrome_shared2.css
index 39a69ce..5d44ec8 100644
--- a/chrome/browser/resources/shared/css/chrome_shared2.css
+++ b/chrome/browser/resources/shared/css/chrome_shared2.css
@@ -87,3 +87,22 @@ html[dir='rtl'] input.weakrtl::-webkit-input-placeholder,
 html[dir='rtl'] .weakrtl input::-webkit-input-placeholder {
   direction: rtl;
 }
+
+.overlay {
+  -webkit-box-align: center;
+  -webkit-box-orient: vertical;
+  -webkit-box-pack: center;
+  -webkit-transition: 250ms opacity;
+  background: -webkit-radial-gradient(rgba(127, 127, 127, 0.5),
+                                      rgba(127, 127, 127, 0.5) 35%,
+                                      rgba(0, 0, 0, 0.7));
+  bottom: 0;
+  display: -webkit-box;
+  left: 0;
+  overflow: auto;
+  padding: 20px;
+  padding-bottom: 130px;
+  position: fixed;
+  right: 0;
+  top: 0;
+}
diff --git a/chrome/browser/resources/uber/uber.css b/chrome/browser/resources/uber/uber.css
index ea8d16c..d650a6f 100644
--- a/chrome/browser/resources/uber/uber.css
+++ b/chrome/browser/resources/uber/uber.css
@@ -6,7 +6,7 @@
   color: rgb(92, 97, 102);
   font-size: 18px;
   font-weight: normal;
-  padding-left: 23px;
+  margin-left: 20px;
 }
 
 #navigation ol {
@@ -18,8 +18,9 @@
   border-left: 6px solid white;
   color: #999;
   cursor: pointer;
+  line-height: 17px;
   margin: 5px 0;
-  padding-left: 18px;
+  padding-left: 14px;
   text-transform: uppercase;
 }
 
@@ -52,3 +53,14 @@ iframe {
   height: 100%;
   width: 100%;
 }
+
+#uber .overlay {
+  opacity: 0;
+  pointer-events: none;
+  z-index: 1;
+}
+
+#uber .overlay.showing {
+  opacity: 1;
+  pointer-events: visible;
+}
diff --git a/chrome/browser/resources/uber/uber.html b/chrome/browser/resources/uber/uber.html
index 7d38278..b034321 100644
--- a/chrome/browser/resources/uber/uber.html
+++ b/chrome/browser/resources/uber/uber.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html i18n-values="dir:textdirection;">
+<html i18n-values="dir:textdirection;" id="uber">
 <head>
 <meta charset="utf-8">
 <title i18n-content="pageTitle"></title>
@@ -16,6 +16,8 @@
 
 <body>
 
+<div class="overlay"></div>
+
 <div id="navigation">
   <h3 i18n-content="shortProductName"></h3>
   <ol>
diff --git a/chrome/browser/resources/uber/uber.js b/chrome/browser/resources/uber/uber.js
index 10bcf6b..301ad4e 100644
--- a/chrome/browser/resources/uber/uber.js
+++ b/chrome/browser/resources/uber/uber.js
@@ -24,6 +24,8 @@ cr.define('uber', function() {
       var pageId = selectedNavItem.associatedIframe.id;
       window.history.replaceState({pageId: pageId}, '', '/' + pageId);
     }
+
+    window.addEventListener('message', handleWindowMessage);
   }
 
   /**
@@ -71,6 +73,15 @@ cr.define('uber', function() {
       selectPageForNavItem($(e.state.pageId).associatedNavItem);
   }
 
+  function handleWindowMessage(e) {
+    if (e.data === 'showOverlay')
+      document.querySelector('.overlay').classList.add('showing');
+    else if (e.data === 'hideOverlay')
+      document.querySelector('.overlay').classList.remove('showing');
+    else
+      console.error('Received unexpected message: ' + e.data);
+  }
+
   return {
     onLoad: onLoad,
     onPopHistoryState: onPopHistoryState