Bug 634173 - Style toaster alerts on Android [r=mbrubeck]

mobile/chrome/content/AlertsHelper.js

@@ -9,10 +9,10 @@ var AlertsHelper = {
 
     // Move the popup on the other side if we are in RTL
     let [leftSidebar, rightSidebar] = [Elements.tabs.getBoundingClientRect(), Elements.controls.getBoundingClientRect()];
-    if (leftSidebar.left > rightSidebar.left) {
-      container.removeAttribute("right");
+    if (leftSidebar.left > rightSidebar.left)
       container.setAttribute("left", "0");
-    }
+    else
+      container.setAttribute("right", "0");
 
     let self = this;
     container.addEventListener("transitionend", function() {
@@ -27,13 +27,35 @@ var AlertsHelper = {
     this._listener = aListener || null;
     this._cookie = aCookie || "";
 
+    // Reset the container settings from the last time so layout can happen naturally
+    let container = this.container;
+    container.removeAttribute("width");
+    let alertText = document.getElementById("alerts-text");
+    alertText.style.whiteSpace = "";
+
     document.getElementById("alerts-image").setAttribute("src", aImageURL);
     document.getElementById("alerts-title").value = aTitle;
-    document.getElementById("alerts-text").textContent = aText;
+    alertText.textContent = aText;
 
-    let container = this.container;
     container.hidden = false;
-    container.height = container.getBoundingClientRect().height;
+    let bcr = container.getBoundingClientRect();
+    if (bcr.width > window.innerWidth - 50) {
+      // If the window isn't wide enough, we need to re-layout
+      container.setAttribute("width", window.innerWidth - 50); // force a max width
+      alertText.style.whiteSpace = "pre-wrap"; // wrap text as needed
+      bcr = container.getBoundingClientRect(); // recalculate the bcr
+    }
+    container.setAttribute("width", bcr.width); // redundant but cheap
+    container.setAttribute("height", bcr.height);
+
+#ifdef ANDROID
+    let offset = (window.innerWidth - container.width) / 2;
+    if (container.hasAttribute("left"))
+      container.setAttribute("left", offset);
+    else
+      container.setAttribute("right", offset);
+#endif
+
     container.classList.add("showing");
 
     let timeout = Services.prefs.getIntPref("alerts.totalOpenTime");

mobile/chrome/content/browser.xul

@@ -661,8 +661,7 @@
     </hbox>
 
     <!-- alerts for content -->
-    <hbox id="alerts-container" hidden="true" align="start" class="dialog-dark" bottom="0" right="0"
-          onclick="AlertsHelper.click(event);">
+    <hbox id="alerts-container" hidden="true" align="start" bottom="0" onclick="AlertsHelper.click(event);">
       <image id="alerts-image"/>
       <vbox flex="1">
         <label id="alerts-title" value=""/>

mobile/chrome/jar.mn

@@ -22,7 +22,7 @@ chrome.jar:
 * content/browser-ui.js                (content/browser-ui.js)
 * content/browser-scripts.js           (content/browser-scripts.js)
 * content/common-ui.js                 (content/common-ui.js)
-  content/AlertsHelper.js              (content/AlertsHelper.js)
+* content/AlertsHelper.js              (content/AlertsHelper.js)
   content/AppMenu.js                   (content/AppMenu.js)
   content/AwesomePanel.js              (content/AwesomePanel.js)
   content/BookmarkHelper.js            (content/BookmarkHelper.js)

mobile/themes/core/browser.css

@@ -1273,36 +1273,37 @@ pageaction:not([image]) > hbox >.pageaction-image {
 
 /* alerts popup ----------------------------------------------------------- */
 #alerts-container {
-  width: 300px;
-}
-
-@media (max-width: 499px) {
-  #alerts-container {
-    width: 200px;
-  }
-}
-
-#alerts-container {
-  -moz-transform: translatex(100%);
-  -moz-transition-property: -moz-transform;
-  -moz-transition-duration: 0.5s;
+  color: white;
+  background-color: #5e6166;
+  border: @border_width_small@ solid #767973;
+  border-radius: @border_radius_normal@;
+  box-shadow: black 0 @border_radius_tiny@ @border_radius_tiny@;
+  padding: @padding_normal@; /* core spacing on top/bottom */
   margin-bottom: @margin_large@;
-  -moz-margin-end: @margin_large@;
-}
-
-#alerts-container:-moz-locale-dir(rtl) {
-  -moz-transform: translatex(-100%);
+  -moz-transition-property: opacity;
+  -moz-transition-duration: 0.5s;
+  opacity: 0;
 }
 
 #alerts-container.showing {
-  -moz-transform: translatex(0);
+  opacity: 1;
+}
+
+#alerts-title {
+  font-size: @font_small@ !important;
 }
 
 #alerts-text {
-  font-size: @font_small@ !important;
-  white-space: pre-wrap;
+  font-size: @font_xsmall@ !important;
+  white-space: pre;
 }
 
+%ifndef ANDROID
+#alerts-container {
+  -moz-margin-end: @margin_large@;
+}
+%endif
+
 /* helperapp (save-as) popup ----------------------------------------------- */
 #helperapp-target {
   font-size: @font_small@ !important;