Bug 1201397 - New layout of XUL Notifications. r=MattN

2025-02-28 13:21:28 +00:00 · 2015-10-15 22:58:56 -04:00 · 2015-10-15 22:58:56 -04:00 · 0124735fc7
commit 0124735fc7
parent 376ea85d2e
14 changed files with 204 additions and 77 deletions
--- a/toolkit/components/alerts/resources/content/alert.css
+++ b/toolkit/components/alerts/resources/content/alert.css
@ -3,15 +3,20 @@
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

 #alertBox[animate] {
-  animation-duration: 4s;
+  animation-duration: 12s;
  animation-fill-mode: both;
  animation-name: alert-animation;
 }

-#alertBox[animate]:hover {
+#alertBox[animate]:not([clicked]):not([closing]):hover {
  animation-play-state: paused;
 }

+#alertBox:not([hasOrigin]) > box > #alertTextBox > #alertFooter,
+#alertImage:not([src]) {
+  display: none;
+}
+
 .alertText {
  white-space: pre-wrap;
 }
--- a/toolkit/components/alerts/resources/content/alert.js
+++ b/toolkit/components/alerts/resources/content/alert.js
@ -9,7 +9,7 @@ const NS_ALERT_HORIZONTAL = 1;
 const NS_ALERT_LEFT = 2;
 const NS_ALERT_TOP = 4;

-const WINDOW_MARGIN = 10;
+const WINDOW_MARGIN = 0;

 Cu.import("resource://gre/modules/Services.jsm");

@ -37,12 +37,9 @@ function prefillAlertInfo() {
  switch (window.arguments.length) {
    default:
    case 11: {
-      let label = document.getElementById('alertSourceLabel');
      if (window.arguments[10]) {
-        label.hidden = false;
-        label.setAttribute('value', window.arguments[10]);
-      } else {
-        label.hidden = true;
+        document.getElementById('alertBox').setAttribute('hasOrigin', true);
+        document.getElementById('alertSourceLabel').setAttribute('value', window.arguments[10]);
      }
    }
    case 10:
@ -69,11 +66,15 @@ function prefillAlertInfo() {
        document.getElementById('alertTextLabel').setAttribute('clickable', true);
      }
    case 3:
-      document.getElementById('alertTextLabel').textContent = window.arguments[2];
+      if (window.arguments[2]) {
+        document.getElementById('alertBox').setAttribute('hasBodyText', true);
+        document.getElementById('alertTextLabel').textContent = window.arguments[2];
+      }
    case 2:
-      document.getElementById('alertTitleLabel').setAttribute('value', window.arguments[1]);
+      document.getElementById('alertTitleLabel').textContent = window.arguments[1];
    case 1:
      if (window.arguments[0]) {
+        document.getElementById('alertBox').setAttribute('hasImage', true);
        document.getElementById('alertImage').setAttribute('src', window.arguments[0]);
      }
    case 0:
@ -82,7 +83,7 @@ function prefillAlertInfo() {
 }

 function onAlertLoad() {
-  const ALERT_DURATION_IMMEDIATE = 4000;
+  const ALERT_DURATION_IMMEDIATE = 12000;
  let alertTextBox = document.getElementById("alertTextBox");
  let alertImageBox = document.getElementById("alertImageBox");
  alertImageBox.style.minHeight = alertTextBox.scrollHeight + "px";
@ -104,7 +105,9 @@ function onAlertLoad() {
  } else {
    let alertBox = document.getElementById("alertBox");
    alertBox.addEventListener("animationend", function hideAlert(event) {
-      if (event.animationName == "alert-animation") {
+      if (event.animationName == "alert-animation" ||
+          event.animationName == "alert-zoom-animation" ||
+          event.animationName == "alert-fadeout-animation") {
        alertBox.removeEventListener("animationend", hideAlert, false);
        window.close();
      }
@ -205,5 +208,21 @@ function onAlertClick() {
    gAlertListener.observe(null, "alertclickcallback", gAlertCookie);
  }

-  window.close();
+  let alertBox = document.getElementById("alertBox");
+  if (alertBox.getAttribute("animate") == "true") {
+    // Closed when the animation ends.
+    alertBox.setAttribute("clicked", "true");
+  } else {
+    window.close();
+  }
+}
+
+function onAlertClose() {
+  let alertBox = document.getElementById("alertBox");
+  if (alertBox.getAttribute("animate") == "true") {
+    // Closed when the animation ends.
+    alertBox.setAttribute("closing", "true");
+  } else {
+    window.close();
+  }
 }
--- a/toolkit/components/alerts/resources/content/alert.xul
+++ b/toolkit/components/alerts/resources/content/alert.xul
@ -23,27 +23,31 @@

  <script type="application/javascript" src="chrome://global/content/alerts/alert.js"/>

-  <box id="alertBox" class="alertBox">
+  <vbox id="alertBox" class="alertBox">
+    <box id="alertTitleBox">
+      <label id="alertTitleLabel" class="alertTitle plain"/>
+      <vbox class="alertCloseBox">
+        <toolbarbutton class="alertCloseButton close-icon"
+                       tooltiptext="&closeAlert.tooltip;"
+                       onclick="event.stopPropagation();"
+                       oncommand="onAlertClose();"/>
+      </vbox>
+    </box>
    <box>
      <hbox id="alertImageBox" class="alertImageBox" align="center" pack="center">
        <image id="alertImage"/>
      </hbox>

      <vbox id="alertTextBox" class="alertTextBox">
-        <label id="alertTitleLabel" class="alertTitle plain"/>
        <label id="alertTextLabel" class="alertText plain"/>
        <spacer flex="1"/>
-        <label id="alertSourceLabel" class="alertSource plain"/>
+        <box id="alertFooter">
+          <label id="alertSourceLabel" class="alertSource plain"/>
+          <button type="menu" id="alertSettings" tooltiptext="&settings.label;"/>
+        </box>
      </vbox>
    </box>
-
-    <vbox class="alertCloseBox">
-      <toolbarbutton class="alertCloseButton close-icon"
-                     tooltiptext="&closeAlert.tooltip;"
-                     onclick="event.stopPropagation();"
-                     oncommand="close();"/>
-    </vbox>
-  </box>
+  </vbox>

  <!-- This method is called inline because we want to make sure we establish the width
       and height of the alert before we fire the onload handler. -->
--- a/toolkit/locales/en-US/chrome/alerts/alert.dtd
+++ b/toolkit/locales/en-US/chrome/alerts/alert.dtd
@ -3,3 +3,4 @@
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->

 <!ENTITY     closeAlert.tooltip          "Close this notification">
+<!ENTITY     settings.label              "Settings">
--- a/toolkit/locales/en-US/chrome/alerts/alert.properties
+++ b/toolkit/locales/en-US/chrome/alerts/alert.properties
@ -9,6 +9,7 @@ closeButton.title = Close
 # LOCALIZATION NOTE(actionButton.label): Used as the button label to provide more actions on OS X notifications. OS X will truncate this if it's too long.
 actionButton.label = …
 webActions.disable.label = Disable notifications from this site
+
 # LOCALIZATION NOTE(source.label): Used to show the URL of the site that
 # sent the notification (e.g., "via mozilla.org"). "%1$S" is the source host
 # and port.
--- a/toolkit/themes/linux/global/alerts/notification-48.png
+++ b/toolkit/themes/linux/global/alerts/notification-48.png
--- a/toolkit/themes/linux/global/jar.mn
+++ b/toolkit/themes/linux/global/jar.mn
@ -33,7 +33,6 @@ toolkit.jar:
 +  skin/classic/global/toolbarbutton.css
 +  skin/classic/global/tree.css
 +  skin/classic/global/alerts/alert.css                        (alerts/alert.css)
-+  skin/classic/global/alerts/notification-48.png              (alerts/notification-48.png)
 +  skin/classic/global/console/console.css                     (console/console.css)
 +  skin/classic/global/console/console.png                     (console/console.png)
 +  skin/classic/global/console/console-toolbar.png             (console/console-toolbar.png)
--- a/toolkit/themes/osx/global/alerts/alert.css
+++ b/toolkit/themes/osx/global/alerts/alert.css
@ -15,29 +15,56 @@
  background: transparent;
 }

-.alertBox {
-  border-radius: 5px;
-  overflow: hidden;
-  background-color: rgba(240,240,240,0.93);
-  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3);
+#alertBox {
+  border: 1px solid ThreeDShadow;
+  border-radius: 1px;
+  background-color: -moz-Dialog;
+  color: -moz-DialogText;
 }

-.alertTitle,
-.alertTextBox {
-  text-shadow: 0 1px white;
+#alertBox[animate] {
+  animation-timing-function: cubic-bezier(.12,1.23,.48,1.09);
+}
+
+#alertBox[animate][clicked] {
+  animation-duration: .6s;
+  animation-name: alert-zoom-animation;
+}
+
+/* This is used if the close button is clicked
+   before the animation has finished. */
+#alertBox[animate][closing] {
+  animation-duration: .6s;
+  animation-name: alert-fadeout-animation;
 }

@keyframes alert-animation {
  from {
-    opacity: 0;
+    transform: translate(110%, 0) rotate(-20deg);
  }
-  6.25% {
-    opacity: 1;
+  5% {
+    transform: none;
  }
-  93.75% {
+  95% {
+    transform: none;
    opacity: 1;
  }
  to {
+    transform: translate(0, 60px) rotate(15deg);
+    opacity: 0;
+  }
+}
+
+@keyframes alert-zoom-animation {
+  to {
+    transform: scale(1.5);
+    opacity: 0;
+  }
+}
+
+@keyframes alert-fadeout-animation {
+  to {
+    transform: translate(0, 60px) rotate(15deg);
    opacity: 0;
  }
 }
--- a/toolkit/themes/osx/global/alerts/notification-48.png
+++ b/toolkit/themes/osx/global/alerts/notification-48.png
--- a/toolkit/themes/osx/global/jar.mn
+++ b/toolkit/themes/osx/global/jar.mn
@ -51,7 +51,6 @@ toolkit.jar:
 * skin/classic/global/viewbuttons.css
  skin/classic/global/wizard.css
  skin/classic/global/alerts/alert.css                               (alerts/alert.css)
-  skin/classic/global/alerts/notification-48.png                     (alerts/notification-48.png)
  skin/classic/global/arrow/arrow-dn-dis.gif                         (arrow/arrow-dn-dis.gif)
  skin/classic/global/arrow/arrow-dn-dis.png                         (arrow/arrow-dn-dis.png)
  skin/classic/global/arrow/arrow-dn-sharp.gif                       (arrow/arrow-dn-sharp.gif)
--- a/toolkit/themes/shared/alert-common.css
+++ b/toolkit/themes/shared/alert-common.css
@ -10,42 +10,39 @@

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

-.alertImageBox {
-  padding: 8px 0;
-  width: 64px;
-  background-image: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.6));
-  -moz-border-end: 1px solid rgba(0,0,0,.1);
+#alertNotification {
+  padding: 30px;
+  padding-inline-start: 90px;
 }

-.alertTextBox {
-  padding: 8px;
-  -moz-padding-start: 16px;
-  width: 255px;
-}
-
-.alertTextBox,
-.alertCloseBox {
-  background-image: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0.1));
-}
-
-#alertNotification[clickable="true"]:hover .alertTextBox,
-#alertNotification[clickable="true"]:hover .alertCloseBox {
-  background-image: linear-gradient(rgba(255,255,255,0.4), rgba(255,255,255,0.3));
-}
-
-.alertTitle {
-  font-weight: bold;
-  font-size: 110%;
-}
-
-.alertSource {
-  color: gray;
+#alertBox[hasBodyText] > #alertTextBox,
+#alertBox[hasOrigin] > #alertTitleBox {
+  border-bottom: 1px solid ThreeDShadow;
 }

 #alertImage {
-  max-width: 48px;
-  max-height: 48px;
-  list-style-image: url(chrome://global/skin/alerts/notification-48.png);
+  margin: 8px 0;
+  width: 64px;
+}
+
+.alertTextBox {
+  padding-top: 8px;
+  padding-inline-start: 8px;
+  /* The text box width is increased to make up for the lack of image when one
+     is not provided. 319px is the text box width when a picture is present,
+     255px, plus the width of the image, 64px. */
+  width: 319px;
+}
+
+#alertBox[hasImage] > box > #alertTextBox {
+  width: 255px;
+}
+
+.alertTitle {
+  -moz-box-flex: 1;
+  font-weight: bold;
+  padding: 6px 8px;
+  width: 255px;
 }

 #alertNotification[clickable="true"] {
@ -55,3 +52,33 @@
 label {
  cursor: inherit;
 }
+
+#alertSourceLabel {
+  -moz-box-flex: 1;
+  font-size: 83.334%;
+  color: GrayText;
+}
+
+#alertSettings {
+  -moz-appearance: none;
+  background-color: transparent;
+  border-width: 0;
+  min-width: 0;
+  list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg#utilities");
+  visibility: hidden; /* Temporary until bug 1209602 or bug 1205172 is fixed. */
+}
+
+#alertSettings:hover {
+  background-color: rgba(107,107,107,.2);
+  border-radius: 20px;
+}
+
+#alertSettings["open"],
+#alertSettings:hover:active {
+  background-color: rgba(107,107,107,.4);
+}
+
+#alertSettings > .button-box > .button-menu-dropmarker,
+#alertSettings > .button-box > .box-inherit > .button-text {
+  display: none;
+}
--- a/toolkit/themes/windows/global/alerts/alert.css
+++ b/toolkit/themes/windows/global/alerts/alert.css
@ -10,23 +10,56 @@

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

-.alertBox {
-  border: 1px solid threedshadow;
-  border-radius: 3px;
+#alertBox {
+  border: 1px solid ThreeDShadow;
+  border-radius: 1px;
  background-color: -moz-Dialog;
+  color: -moz-DialogText;
+}
+
+#alertBox[animate] {
+  animation-timing-function: cubic-bezier(.12,1.23,.48,1.09);
+}
+
+#alertBox[animate][clicked] {
+  animation-duration: .6s;
+  animation-name: alert-zoom-animation;
+}
+
+/* This is used if the close button is clicked
+   before the animation has finished. */
+#alertBox[animate][closing] {
+  animation-duration: .6s;
+  animation-name: alert-fadeout-animation;
 }

@keyframes alert-animation {
  from {
-    opacity: 0;
+    transform: translate(110%, 0) rotate(-20deg);
  }
-  6.25% {
-    opacity: 1;
+  5% {
+    transform: none;
  }
-  93.75% {
+  95% {
+    transform: none;
    opacity: 1;
  }
  to {
+    transform: translate(0, 60px) rotate(15deg);
+    opacity: 0;
+  }
+}
+
+@keyframes alert-zoom-animation {
+  to {
+    transform: scale(1.5);
+    opacity: 0;
+  }
+}
+
+@keyframes alert-fadeout-animation {
+  to {
+    transform: translate(0, 60px) rotate(15deg);
    opacity: 0;
  }
 }
@ -36,3 +69,16 @@
  padding: 4px 2px;
  border: none !important;
 }
+
+@media (-moz-windows-default-theme) {
+  #alertBox[hasBodyText] > #alertTextBox,
+  #alertBox[hasOrigin] > #alertTitleBox {
+    border-bottom-color: rgba(107,107,107,.4);
+  }
+
+  #alertBox {
+    border-color: rgba(107,107,107,.4);
+    background-color: rgba(255,255,255,.9);
+    color: rgba(0,0,0,.9);
+  }
+}
--- a/toolkit/themes/windows/global/alerts/notification-48.png
+++ b/toolkit/themes/windows/global/alerts/notification-48.png
--- a/toolkit/themes/windows/global/jar.mn
+++ b/toolkit/themes/windows/global/jar.mn
@ -51,7 +51,6 @@ toolkit.jar:
 * skin/classic/global/tree.css
  skin/classic/global/wizard.css
  skin/classic/global/alerts/alert.css                     (alerts/alert.css)
-  skin/classic/global/alerts/notification-48.png           (alerts/notification-48.png)
  skin/classic/global/arrow/arrow-dn.gif                   (arrow/arrow-dn.gif)
  skin/classic/global/arrow/arrow-dn-dis.gif               (arrow/arrow-dn-dis.gif)
  skin/classic/global/arrow/arrow-dn-hov.gif               (arrow/arrow-dn-hov.gif)