Bug 1227711 - Add a box-shadow to the XUL alerts. ui-r=shorlander r=MattN
authorJared Wein <jwein@mozilla.com>
Wed, 02 Dec 2015 22:21:20 -0500
changeset 309385 10a9cf7c54fadd9073807e863725ee1b32449ba6
parent 309384 89e666316ea0c2cc12976b2bd7f6dc54c566e94f
child 309386 65b735be598fc3ababd09df2f3c167a125a2196e
push id5513
push userraliiev@mozilla.com
push dateMon, 25 Jan 2016 13:55:34 +0000
treeherdermozilla-beta@5ee97dd05b5c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersshorlander, MattN
bugs1227711
milestone45.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1227711 - Add a box-shadow to the XUL alerts. ui-r=shorlander r=MattN
toolkit/components/alerts/resources/content/alert.js
toolkit/themes/windows/global/alerts/alert.css
--- a/toolkit/components/alerts/resources/content/alert.js
+++ b/toolkit/components/alerts/resources/content/alert.js
@@ -1,23 +1,26 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 var {classes: Cc, interfaces: Ci, utils: Cu, results: Cr} = Components;
 
+Cu.import("resource://gre/modules/AppConstants.jsm");
+Cu.import("resource://gre/modules/Services.jsm");
+
 // Copied from nsILookAndFeel.h, see comments on eMetric_AlertNotificationOrigin
 const NS_ALERT_HORIZONTAL = 1;
 const NS_ALERT_LEFT = 2;
 const NS_ALERT_TOP = 4;
 
-const WINDOW_MARGIN = 10;
+const WINDOW_MARGIN = AppConstants.platform == "win" ? 0 : 10;
 const BODY_TEXT_LIMIT = 200;
+const WINDOW_SHADOW_SPREAD = AppConstants.platform == "win" ? 10 : 0;
 
-Cu.import("resource://gre/modules/Services.jsm");
 
 var gOrigin = 0; // Default value: alert from bottom right.
 var gReplacedWindow = null;
 var gAlertListener = null;
 var gAlertTextClickable = false;
 var gAlertCookie = "";
 var gIsReplaced = false;
 
@@ -212,34 +215,34 @@ function moveWindowToEnd() {
           screen.availTop + screen.availHeight - window.outerHeight;
 
   // Position the window at the end of all alerts.
   let windows = Services.wm.getEnumerator("alert:alert");
   while (windows.hasMoreElements()) {
     let alertWindow = windows.getNext();
     if (alertWindow != window) {
       if (gOrigin & NS_ALERT_TOP) {
-        y = Math.max(y, alertWindow.screenY + alertWindow.outerHeight);
+        y = Math.max(y, alertWindow.screenY + alertWindow.outerHeight - WINDOW_SHADOW_SPREAD);
       } else {
-        y = Math.min(y, alertWindow.screenY - window.outerHeight);
+        y = Math.min(y, alertWindow.screenY - window.outerHeight + WINDOW_SHADOW_SPREAD);
       }
     }
   }
 
   // Offset the alert by WINDOW_MARGIN pixels from the edge of the screen
   y += gOrigin & NS_ALERT_TOP ? WINDOW_MARGIN : -WINDOW_MARGIN;
   x += gOrigin & NS_ALERT_LEFT ? WINDOW_MARGIN : -WINDOW_MARGIN;
 
   window.moveTo(x, y);
 }
 
 function onAlertBeforeUnload() {
   if (!gIsReplaced) {
     // Move other alert windows to fill the gap left by closing alert.
-    let heightDelta = window.outerHeight + WINDOW_MARGIN;
+    let heightDelta = window.outerHeight + WINDOW_MARGIN - WINDOW_SHADOW_SPREAD;
     let windows = Services.wm.getEnumerator("alert:alert");
     while (windows.hasMoreElements()) {
       let alertWindow = windows.getNext();
       if (alertWindow != window) {
         if (gOrigin & NS_ALERT_TOP) {
           if (alertWindow.screenY > window.screenY) {
             alertWindow.moveTo(alertWindow.screenX, alertWindow.screenY - heightDelta);
           }
--- a/toolkit/themes/windows/global/alerts/alert.css
+++ b/toolkit/themes/windows/global/alerts/alert.css
@@ -8,23 +8,25 @@
 
 @import url("chrome://global/skin/alerts/alert-common.css");
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 #alertNotification {
   -moz-appearance: none;
   background: transparent;
+  padding: 10px;
 }
 
 #alertBox {
   border: 1px solid ThreeDShadow;
   border-radius: 1px;
   background-color: -moz-Dialog;
   color: -moz-DialogText;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.59);
 }
 
 .alertCloseButton {
   -moz-appearance: none;
   padding: 4px 2px;
   border: none !important;
 }