Bug 1692021 - Order infobars by appearance rather than priority r=Gijs

Differential Revision: https://phabricator.services.mozilla.com/D112238

browser/base/content/browser.js

@@ -397,6 +397,7 @@ XPCOMUtils.defineLazyGetter(this, "gHighPriorityNotificationBox", () => {
   return new MozElements.NotificationBox(element => {
     element.classList.add("global-notificationbox");
     element.setAttribute("notificationside", "top");
+    element.toggleAttribute("prepend-notifications", gProton);
     if (gProton) {
       // With Proton enabled all notification boxes are at the top, built into the browser chrome.
       let tabNotifications = document.getElementById("tab-notification-deck");

browser/base/content/moz.build

@@ -94,7 +94,7 @@ with Files("test/sync/**"):
 with Files("test/tabdialogs/**"):
     BUG_COMPONENT = ("Firefox", "Tabbed Browser")
 
-with Files("test/tabnotificationbox/**"):
+with Files("test/notificationbox/**"):
     BUG_COMPONENT = ("Firefox", "Tabbed Browser")
 
 with Files("test/tabPrompts/**"):

browser/base/content/test/notificationbox/browser.ini

@@ -1 +1,2 @@
+[browser_notification_stacking.js]
 [browser_tabnotificationbox_switch_tabs.js]

browser/base/content/test/notificationbox/browser_notification_stacking.js

@@ -0,0 +1,85 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+async function addNotification(box, label, value, priorityName) {
+  let added = BrowserTestUtils.waitForNotificationInNotificationBox(box, value);
+  let priority =
+    gHighPriorityNotificationBox[`PRIORITY_${priorityName}_MEDIUM`];
+  let notification = box.appendNotification(label, value, null, priority);
+  await added;
+  return notification;
+}
+
+add_task(async function setup() {
+  await SpecialPowers.pushPrefEnv({
+    set: [["browser.proton.enabled", true]],
+  });
+});
+
+add_task(async function testStackingOrder() {
+  const tabNotificationBox = gBrowser.getNotificationBox();
+  ok(
+    gHighPriorityNotificationBox.stack.hasAttribute("prepend-notifications"),
+    "Browser stack will prepend"
+  );
+  ok(
+    !tabNotificationBox.stack.hasAttribute("prepend-notifications"),
+    "Tab stack will append"
+  );
+
+  let browserOne = await addNotification(
+    gHighPriorityNotificationBox,
+    "My first browser notification",
+    "browser-one",
+    "INFO"
+  );
+
+  let tabOne = await addNotification(
+    tabNotificationBox,
+    "My first tab notification",
+    "tab-one",
+    "CRITICAL"
+  );
+
+  let browserTwo = await addNotification(
+    gHighPriorityNotificationBox,
+    "My second browser notification",
+    "browser-two",
+    "CRITICAL"
+  );
+  let browserThree = await addNotification(
+    gHighPriorityNotificationBox,
+    "My third browser notification",
+    "browser-three",
+    "WARNING"
+  );
+
+  let tabTwo = await addNotification(
+    tabNotificationBox,
+    "My second tab notification",
+    "tab-two",
+    "INFO"
+  );
+  let tabThree = await addNotification(
+    tabNotificationBox,
+    "My third tab notification",
+    "tab-three",
+    "WARNING"
+  );
+
+  Assert.deepEqual(
+    [browserThree, browserTwo, browserOne],
+    [...gHighPriorityNotificationBox.stack.children],
+    "Browser notifications prepended"
+  );
+  Assert.deepEqual(
+    [tabOne, tabTwo, tabThree],
+    [...tabNotificationBox.stack.children],
+    "Tab notifications appended"
+  );
+
+  gHighPriorityNotificationBox.removeAllNotifications(true);
+  tabNotificationBox.removeAllNotifications(true);
+});

browser/base/moz.build

@@ -32,6 +32,7 @@ BROWSER_CHROME_MANIFESTS += [
     "content/test/keyboard/browser.ini",
     "content/test/menubar/browser.ini",
     "content/test/metaTags/browser.ini",
+    "content/test/notificationbox/browser.ini",
     "content/test/outOfProcess/browser.ini",
     "content/test/pageActions-proton/browser.ini",
     "content/test/pageActions/browser.ini",
@@ -57,7 +58,6 @@ BROWSER_CHROME_MANIFESTS += [
     "content/test/tabcrashed/browser.ini",
     "content/test/tabdialogs/browser.ini",
     "content/test/tabMediaIndicator/browser.ini",
-    "content/test/tabnotificationbox/browser.ini",
     "content/test/tabPrompts/browser.ini",
     "content/test/tabs/browser.ini",
     "content/test/touch/browser.ini",

toolkit/content/tests/chrome/test_notificationbox.xhtml

@@ -416,8 +416,13 @@ var tests =
       return ntf;
     },
     result(nb, ntf) {
+      let expectedValue = "10";
+      if (PROTON_ENABLED) {
+        expectedValue = "3";
+        ntf = nb.getNotificationWithValue(expectedValue);
+      }
       is(nb.currentNotification, ntf, "appendNotification last notification");
-      is(nb.currentNotification.getAttribute("value"), "10", "appendNotification order");
+      is(nb.currentNotification.getAttribute("value"), expectedValue, "appendNotification order");
       return 1;
     }
   },
@@ -425,6 +430,11 @@ var tests =
     // test closing notifications to make sure that the current notification is still set properly
     repeat: true,
     test(nb, testidx) {
+      if (PROTON_ENABLED) {
+        this.repeat = false;
+        return undefined;
+      }
+
       switch (testidx) {
         case 1:
           nb.getNotificationWithValue("10").close();
@@ -448,6 +458,19 @@ var tests =
       return testidx;
     },
     result(nb, arr) {
+      if (PROTON_ENABLED) {
+        let notificationOrder = [4, 7, 2, 8, 5, 6, 1, 9, 10, 3];
+        let allNotificationValues = [...nb.stack.children].map(n => n.getAttribute("value"));
+        is(allNotificationValues.length, notificationOrder.length, "Expected number of notifications");
+        for (let i = 0; i < allNotificationValues.length; i++) {
+          is(
+            allNotificationValues[i],
+            notificationOrder[i].toString(),
+            `Notification ${i} matches`
+          );
+        }
+        return undefined;
+      }
       // arr is [testindex, expectedvalue]
       is(nb.currentNotification.getAttribute("value"), "" + arr[1], "close order " + arr[0]);
       is(nb.allNotifications.length, 10 - arr[0], "close order " + arr[0] + " count");
@@ -557,7 +580,7 @@ function testtag_notification_State(nb, ntf, testid, label, value, image, priori
 function checkPopupTest(nb, ntf)
 {
   if (nb._animating) {
-    setTimeout(checkPopupTest, ntf);
+    setTimeout(checkPopupTest, 50, nb, ntf);
   } else {
     var evt = new Event("");
     ntf.dispatchEvent(evt);

toolkit/content/widgets/notificationbox.js

@@ -165,17 +165,6 @@
         throw new Error("Invalid notification priority " + aPriority);
       }
 
-      // check for where the notification should be inserted according to
-      // priority. If two are equal, the existing one appears on top.
-      var notifications = this.allNotifications;
-      var insertPos = null;
-      for (var n = notifications.length - 1; n >= 0; n--) {
-        if (notifications[n].priority < aPriority) {
-          break;
-        }
-        insertPos = notifications[n];
-      }
-
       MozXULElement.insertFTLIfNeeded("toolkit/global/notification.ftl");
 
       // Create the Custom Element and connect it to the document immediately.
@@ -194,7 +183,27 @@
           aNotificationIs ? { is: aNotificationIs } : {}
         );
       }
-      this.stack.insertBefore(newitem, insertPos);
+
+      if (this.gProton) {
+        // Append or prepend notification, based on stack preference.
+        if (this.stack.hasAttribute("prepend-notifications")) {
+          this.stack.prepend(newitem);
+        } else {
+          this.stack.append(newitem);
+        }
+      } else {
+        // check for where the notification should be inserted according to
+        // priority. If two are equal, the existing one appears on top.
+        var notifications = this.allNotifications;
+        var insertPos = null;
+        for (var n = notifications.length - 1; n >= 0; n--) {
+          if (notifications[n].priority < aPriority) {
+            break;
+          }
+          insertPos = notifications[n];
+        }
+        this.stack.insertBefore(newitem, insertPos);
+      }
 
       // Custom notification classes may not have the messageText property.
       if (newitem.messageText) {
@@ -232,7 +241,10 @@
         newitem.setAttribute("type", "warning");
       }
 
-      if (!insertPos) {
+      // Animate the notification for proton (all notifications visible)
+      // or if this isn't proton and this is the visible notification (it
+      // was inserted at the top of the stack).
+      if (this.gProton || !insertPos) {
         newitem.style.display = "block";
         newitem.style.position = "fixed";
         newitem.style.top = "100%";