From 95be0dfa0f4affbb753ea78c83acdc7ad7b2e3c9 Mon Sep 17 00:00:00 2001
From: Mark Finkle <mfinkle@mozilla.com>
Date: Wed, 15 Jun 2011 23:09:41 -0400
Subject: [PATCH] Bug 664114 - Context Menu doesn't resize properly when
 switching the window orientation [r=wjohnston]

---
 mobile/chrome/content/MenuListHelperUI.js   |  5 +++--
 mobile/chrome/content/browser.xul           |  2 +-
 mobile/chrome/content/common-ui.js          |  5 +++--
 mobile/themes/core/browser.css              |  8 ++++++++
 mobile/themes/core/defines.inc              |  2 ++
 mobile/themes/core/gingerbread/browser.css  | 13 +++++++++++++
 mobile/themes/core/gingerbread/defines.inc  |  2 ++
 mobile/themes/core/gingerbread/platform.css |  8 ++++----
 mobile/themes/core/platform.css             |  2 +-
 9 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/mobile/chrome/content/MenuListHelperUI.js b/mobile/chrome/content/MenuListHelperUI.js
index 892660088f8..d384c2fca84 100644
--- a/mobile/chrome/content/MenuListHelperUI.js
+++ b/mobile/chrome/content/MenuListHelperUI.js
@@ -59,8 +59,8 @@ var MenuListHelperUI = {
     }
 
     window.addEventListener("resize", this, true);
-    container.hidden = false;
     this.sizeToContent();
+    container.hidden = false;
     BrowserUI.pushPopup(this, [this._popup]);
   },
 
@@ -86,7 +86,8 @@ var MenuListHelperUI = {
   },
 
   sizeToContent: function sizeToContent() {
-    this._popup.width = window.innerWidth * 0.8;
+    let style = document.defaultView.getComputedStyle(this._container, null);
+    this._popup.width = window.innerWidth - (parseInt(style.paddingLeft) + parseInt(style.paddingRight));
   },
 
   handleEvent: function handleEvent(aEvent) {
diff --git a/mobile/chrome/content/browser.xul b/mobile/chrome/content/browser.xul
index 8bf3d4923ba..a784a645b36 100644
--- a/mobile/chrome/content/browser.xul
+++ b/mobile/chrome/content/browser.xul
@@ -597,7 +597,7 @@
       </vbox>
     </vbox>
 
-    <hbox id="context-container" class="window-width window-height context-block" top="0" left="0" hidden="true">
+    <hbox id="context-container" class="window-width window-height context-block" top="0" left="0" hidden="true" flex="1">
       <vbox id="context-popup" class="dialog-dark">
         <hbox id="context-header">
           <label id="context-hint" crop="center" flex="1"/>
diff --git a/mobile/chrome/content/common-ui.js b/mobile/chrome/content/common-ui.js
index e39ca1870ef..9dcbc1b2c09 100644
--- a/mobile/chrome/content/common-ui.js
+++ b/mobile/chrome/content/common-ui.js
@@ -1189,11 +1189,11 @@ var ContextHelper = {
     let label = document.getElementById("context-hint");
     label.value = this.popupState.label || "";
 
+    this.sizeToContent();
     this._panel.hidden = false;
     window.addEventListener("resize", this, true);
     window.addEventListener("keypress", this, true);
 
-    this.sizeToContent();
     BrowserUI.pushPopup(this, [this._popup]);
 
     let event = document.createEvent("Events");
@@ -1215,7 +1215,8 @@ var ContextHelper = {
   },
 
   sizeToContent: function sizeToContent() {
-    this._popup.maxWidth = window.innerWidth * 0.75;
+    let style = document.defaultView.getComputedStyle(this._panel, null);
+    this._popup.width = window.innerWidth - (parseInt(style.paddingLeft) + parseInt(style.paddingRight));
   },
 
   handleEvent: function handleEvent(aEvent) {
diff --git a/mobile/themes/core/browser.css b/mobile/themes/core/browser.css
index 36d9543dd90..5bb2580f1bc 100644
--- a/mobile/themes/core/browser.css
+++ b/mobile/themes/core/browser.css
@@ -1082,9 +1082,17 @@ documenttab[reload="true"] > stack > .documenttab-reload {
   border-top: @border_width_tiny@ solid rgb(205,205,205);
   padding: 0;
   -moz-user-focus: ignore;
+}
+
+.action-buttons,
+#pageactions-container {
   display: inline-block;
 }
 
+#context-commands {
+  display: -moz-box;
+}
+
 .action-button,
 .context-command,
 pageaction {
diff --git a/mobile/themes/core/defines.inc b/mobile/themes/core/defines.inc
index 949c572eaef..4f652578429 100644
--- a/mobile/themes/core/defines.inc
+++ b/mobile/themes/core/defines.inc
@@ -17,6 +17,7 @@
 %define touch_action_minwidth 21.17mozmm
 %define touch_normal 6.77mozmm
 
+%define margin_context_popup 3.39mozmm
 %define margin_large 2.54mozmm
 %define margin_xxxnormal 1.69mozmm
 %define margin_xnormal 1.06mozmm
@@ -104,6 +105,7 @@
 %define touch_action_minwidth 200px
 %define touch_normal 64px
 
+%define margin_context_popup 32px
 %define margin_large 24px
 %define margin_xxxnormal 16px
 %define margin_xnormal 10px
diff --git a/mobile/themes/core/gingerbread/browser.css b/mobile/themes/core/gingerbread/browser.css
index 732c96d46bd..d7963ef4361 100644
--- a/mobile/themes/core/gingerbread/browser.css
+++ b/mobile/themes/core/gingerbread/browser.css
@@ -1048,9 +1048,17 @@ documenttab[reload="true"] > stack > .documenttab-reload {
   border-top: @border_width_tiny@ solid rgb(205,205,205);
   padding: 0;
   -moz-user-focus: ignore;
+}
+
+.action-buttons,
+#pageactions-container {
   display: inline-block;
 }
 
+#context-commands {
+  display: -moz-box;
+}
+
 .action-button,
 .context-command,
 pageaction {
@@ -1154,8 +1162,13 @@ pageaction:not([image]) > hbox >.pageaction-image {
   display: none;
 }
 
+#context-header {
+  background-color: @color_background_default@;
+}
+
 #share-title,
 #context-hint {
+  color: @color_text_default@;
   font-size: @font_small@;
   padding: @padding_small@;
 }
diff --git a/mobile/themes/core/gingerbread/defines.inc b/mobile/themes/core/gingerbread/defines.inc
index 9cbf65b411c..31901cf1933 100644
--- a/mobile/themes/core/gingerbread/defines.inc
+++ b/mobile/themes/core/gingerbread/defines.inc
@@ -43,6 +43,7 @@
 %define touch_action_minwidth 21.17mozmm
 %define touch_normal 6.77mozmm
 
+%define margin_context_popup 3.39mozmm
 %define margin_large 2.54mozmm
 %define margin_xxxnormal 1.69mozmm
 %define margin_xnormal 1.06mozmm
@@ -132,6 +133,7 @@
 %define touch_action_minwidth 200px
 %define touch_normal 64px
 
+%define margin_context_popup 32px
 %define margin_large 24px
 %define margin_xxxnormal 16px
 %define margin_xnormal 10px
diff --git a/mobile/themes/core/gingerbread/platform.css b/mobile/themes/core/gingerbread/platform.css
index 645e2fd261d..b87f33087b9 100644
--- a/mobile/themes/core/gingerbread/platform.css
+++ b/mobile/themes/core/gingerbread/platform.css
@@ -118,14 +118,14 @@ textbox[disabled="true"] {
 }
 
 .context-block {
-  padding: @touch_normal@;
+  padding: @margin_context_popup@;
 }
 
 .dialog-dark,
 .panel-arrowcontent {
   background-color: @color_background_inverse@;
   box-shadow: black 0 @border_radius_tiny@ @border_radius_tiny@, black 0 -@border_radius_tiny@ @border_radius_tiny@;
-  padding: @padding_normal@ 0; /* core spacing */
+  padding: 0;
 }
 
 @media (max-width: 499px) {
@@ -613,12 +613,12 @@ dialog {
 
 .panel-arrow[side="top"] {
   list-style-image: url("chrome://browser/skin/images/arrowbox-up.png");
-  margin-bottom: -@margin_normal@;
+  margin-bottom: -@margin_snormal@;
 }
 
 .panel-arrow[side="bottom"] {
   list-style-image: url("chrome://browser/skin/images/arrowbox-down.png");
-  margin-top: -@margin_normal@;
+  margin-top: -@margin_snormal@;
 }
 
 .panel-arrow[side="left"] {
diff --git a/mobile/themes/core/platform.css b/mobile/themes/core/platform.css
index 77bd91a49e4..fc7d76cb790 100644
--- a/mobile/themes/core/platform.css
+++ b/mobile/themes/core/platform.css
@@ -120,7 +120,7 @@ textbox[disabled="true"] {
 }
 
 .context-block {
-  padding: @touch_normal@;
+  padding: @margin_context_popup@;
 }
 
 .dialog-dark,