Bug 1918699 - Insert in-app-notification-manager into dom based on prefrence. r=freaktechnik

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

mail/base/content/messenger.js

@@ -315,6 +315,16 @@ var gMailInit = {
       // Add a timeout to prevent opening the browser immediately at startup.
       setTimeout(this.showEOYDonationAppeal, 2000);
     }
+
+    if (Services.prefs.getBoolPref("mail.inappnotifications.enabled", false)) {
+      ChromeUtils.importESModule(
+        "chrome://messenger/content/in-app-notification-manager.mjs",
+        { global: "current" }
+      );
+      document
+        .querySelector(".in-app-notification-root")
+        .replaceChildren(document.createElement("in-app-notification-manager"));
+    }
   },
 
   /**

mail/base/content/messenger.xhtml

@@ -109,6 +109,7 @@
   <link rel="localization" href="messenger/chat.ftl" />
   <link rel="localization" href="messenger/messageheader/headerFields.ftl" />
   <link rel="localization" href="messenger/mailWidgets.ftl" />
+  <link rel="localization" href="messenger/inAppNotifications.ftl" />
   <link rel="localization" href="messenger/unifiedToolbar.ftl" />
   <link rel="localization" href="messenger/unifiedToolbarItems.ftl" />
 #ifdef NIGHTLY_BUILD
@@ -469,6 +470,15 @@
 </popupset>
 #endif
 
+<!--
+  Include in app notifications first to make them as easy as possible to get to
+  when navigating via keyboard. This is important if they miss the instructions
+  for the key command to be able to find what was announced.
+-->
+#include ../../components/inappnotifications/content/inAppNotificationTemplates.inc.xhtml
+
+<div class="in-app-notification-root" aria-role="status"></div>
+
 #include ../../../calendar/base/content/calendar-context-menus-and-tooltips.inc.xhtml
 #include ../../components/unifiedtoolbar/content/unifiedToolbarTemplates.inc.xhtml
 

mail/components/inappnotifications/content/in-app-notification-manager.mjs

@@ -14,7 +14,7 @@ ChromeUtils.defineESModuleGetters(lazy, {
 /**
  * Manager element creating in-app notifications.
  */
-class InAppNotificationManager extends HTMLElement {
+export class InAppNotificationManager extends HTMLElement {
   /**
    * @type {?InAppNotification}
    */

mail/components/inappnotifications/content/inAppNotificationTemplates.inc.xhtml

@@ -2,14 +2,14 @@
 # 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/.
 
-<template id="inAppNotificationCloseButtonTemplate">
+<html:template id="inAppNotificationCloseButtonTemplate" xmlns="http://www.w3.org/1999/xhtml">
   <img src="" data-l10n-id="in-app-notification-close-image" />
-</template>
+</html:template>
 
-<template id="inAppNotificationContainerTemplate">
+<html:template id="inAppNotificationContainerTemplate" xmlns="http://www.w3.org/1999/xhtml">
   <div class="in-app-notification-container in-app-notification-donation">
     <button is="in-app-notification-close-button"></button>
-    <img src="" alt="" class="icon">
+    <img src="" alt="" class="icon" />
     <div class="in-app-notification-content">
       <h1 class="in-app-notification-heading"></h1>
       <div class="in-app-notification-description-wrapper">
@@ -21,8 +21,8 @@
       </a>
     </div>
   </div>
-</template>
+</html:template>
 
-<template id="inAppNotificationTemplate">
+<html:template id="inAppNotificationTemplate" xmlns="http://www.w3.org/1999/xhtml">
   <in-app-notification-container></in-app-notification-container>
-</template>
+</html:template>

mail/components/inappnotifications/moz.build

@@ -20,4 +20,5 @@ XPCSHELL_TESTS_MANIFESTS += [
 
 BROWSER_CHROME_MANIFESTS += [
     "test/browser/browser.toml",
+    "test/browser/browser_disabled.toml",
 ]

mail/components/inappnotifications/test/browser/browser.toml

@@ -1,5 +1,6 @@
 [DEFAULT]
 prefs = [
+  "mail.inappnotifications.enabled=true",
   "mail.provider.suppress_dialog_on_startup=true",
   "mail.rights.override=true",
   "mail.spotlight.firstRunDone=true",
@@ -19,3 +20,4 @@ subsuite = "thunderbird"
 ["browser_inAppNotificationCloseButton.js"]
 ["browser_inAppNotificationContainer.js"]
 ["browser_inAppNotificationManager.js"]
+["browser_inAppNotificationMessengerIntegration.js"]

mail/components/inappnotifications/test/browser/browser_disabled.toml

@@ -0,0 +1,12 @@
+[DEFAULT]
+prefs = [
+  "mail.provider.suppress_dialog_on_startup=true",
+  "mail.rights.override=true",
+  "mail.spotlight.firstRunDone=true",
+  "mail.winsearch.firstRunDone=true",
+  "mailnews.start_page.override_url=about:blank",
+  "mailnews.start_page.url=about:blank",
+]
+subsuite = "thunderbird"
+
+["browser_inAppNotificationMessengerIntegrationDisabled.js"]

mail/components/inappnotifications/test/browser/browser_inAppNotificationMessengerIntegration.js

@@ -0,0 +1,44 @@
+/* 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/. */
+
+"use strict";
+
+const { InAppNotificationManager } = ChromeUtils.importESModule(
+  "chrome://messenger/content/in-app-notification-manager.mjs",
+  { global: "current" }
+);
+
+add_task(function test_documentContainsTemplates() {
+  Assert.equal(
+    document.querySelectorAll("#inAppNotificationContainerTemplate").length,
+    1,
+    "Contains 1 container template"
+  );
+  Assert.equal(
+    document.querySelectorAll("#inAppNotificationTemplate").length,
+    1,
+    "Contains 1 notification template"
+  );
+  Assert.equal(
+    document.querySelectorAll("#inAppNotificationCloseButtonTemplate").length,
+    1,
+    "Contains 1 close button template"
+  );
+});
+
+add_task(async function test_documentContainsManagerWhenPrefTrue() {
+  const manager = document.querySelectorAll(
+    "body > .in-app-notification-root > in-app-notification-manager"
+  );
+  Assert.equal(
+    manager.length,
+    1,
+    "Contains notification element in correct position"
+  );
+
+  Assert.ok(
+    manager[0] instanceof InAppNotificationManager,
+    "Is an instance of in-app-notification-manager"
+  );
+});

mail/components/inappnotifications/test/browser/browser_inAppNotificationMessengerIntegrationDisabled.js

@@ -0,0 +1,31 @@
+/* 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/. */
+
+"use strict";
+
+add_task(function test_documentContainsTemplates() {
+  Assert.equal(
+    document.querySelectorAll("#inAppNotificationContainerTemplate").length,
+    1,
+    "Contains 1 container template"
+  );
+  Assert.equal(
+    document.querySelectorAll("#inAppNotificationTemplate").length,
+    1,
+    "Contains 1 notification template"
+  );
+  Assert.equal(
+    document.querySelectorAll("#inAppNotificationCloseButtonTemplate").length,
+    1,
+    "Contains 1 close button template"
+  );
+});
+
+add_task(async function test_documentContainsManagerWhenPrefTrue() {
+  Assert.equal(
+    document.querySelectorAll("in-app-notification-manager").length,
+    0,
+    "Does not contain notification element"
+  );
+});