Bug 664114 - Context Menu doesn't resize properly when switching the window orientation [r=wjohnston]

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) {

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"/>

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) {

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 {

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

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@;
 }

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

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"] {

mobile/themes/core/platform.css

@@ -120,7 +120,7 @@ textbox[disabled="true"] {
 }
 
 .context-block {
-  padding: @touch_normal@;
+  padding: @margin_context_popup@;
 }
 
 .dialog-dark,