Bug 1703382 - Adapt the notification box styles to the new Proton UI. r=mkmelin, ui-r=Paenglab

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

--HG--
extra : moz-landing-system : lando

calendar/base/content/dialogs/calendar-event-dialog-reminder.js

@@ -193,8 +193,12 @@ function setupMaxReminders() {
       gReminderNotification.PRIORITY_WARNING_MEDIUM
     );
 
-    let closeButton = notification.messageDetails.nextElementSibling;
-    closeButton.setAttribute("hidden", "true");
+    if (gReminderNotification.gProton) {
+      notification.closeButton.hidden = true;
+    } else {
+      let closeButton = notification.messageDetails.nextElementSibling;
+      closeButton.setAttribute("hidden", "true");
+    }
   } else {
     gReminderNotification.removeAllNotifications();
   }

mail/app/profile/all-thunderbird.js

@@ -254,9 +254,6 @@ pref("browser.preferences.search", true);
 // for everyone.
 pref("browser.urlbar.keepPanelOpenDuringImeComposition", false);
 
-// Disable proton theming for now.
-pref("browser.proton.enabled", false);
-
 pref("accessibility.typeaheadfind", false);
 pref("accessibility.typeaheadfind.timeout", 5000);
 pref("accessibility.typeaheadfind.linksonly", false);

mail/base/content/mailWindowOverlay.js

@@ -3310,6 +3310,14 @@ var gMessageNotificationBar = {
         aCanOverride ? buttons : []
       );
 
+      // Update the button differently based on the Proton pref.
+      if (this.msgNotificationBar.gProton) {
+        notification.buttonContainer.firstElementChild.classList.add(
+          "button-menu-list"
+        );
+        return;
+      }
+
       let button = notification.spacer.nextElementSibling;
       button.classList.add("button-menu-list");
     }
@@ -3351,6 +3359,14 @@ var gMessageNotificationBar = {
         buttons
       );
 
+      // Update the button differently based on the Proton pref.
+      if (this.msgNotificationBar.gProton) {
+        notification.buttonContainer.firstElementChild.classList.add(
+          "button-menu-list"
+        );
+        return;
+      }
+
       let button = notification.spacer.nextElementSibling;
       button.classList.add("button-menu-list");
     }

mail/base/content/specialTabs.js

@@ -1152,7 +1152,8 @@ var specialTabs = {
       this.msgNotificationBar.PRIORITY_INFO_LOW,
       buttons
     );
-    notification.persistence = 3; // arbitrary number, just so bar sticks around for a bit
+    // Arbitrary number, just so bar sticks around for a bit.
+    notification.persistence = 3;
   },
 
   /**
@@ -1205,15 +1206,15 @@ var specialTabs = {
     let notifyRightsText = await document.l10n.formatValue(
       "about-rights-notification-text"
     );
-    var box = this.msgNotificationBar.appendNotification(
+    let notification = this.msgNotificationBar.appendNotification(
       notifyRightsText,
       "about-rights",
       null,
       this.msgNotificationBar.PRIORITY_INFO_LOW,
       buttons
     );
-    // arbitrary number, just so bar sticks around for a bit
-    box.persistence = 3;
+    // Arbitrary number, just so bar sticks around for a bit.
+    notification.persistence = 3;
 
     // Set the pref to say we've displayed the notification.
     Services.prefs.setIntPref("mail.rights.version", this._kAboutRightsVersion);

mail/components/compose/content/MsgComposeCommands.js

@@ -2848,11 +2848,6 @@ function handleEsc() {
   }
 }
 
-function disableAttachmentReminder() {
-  gDisableAttachmentReminder = true;
-  toggleAttachmentReminder(false);
-}
-
 /**
  * This state machine manages all showing and hiding of the attachment
  * notification bar. It is only called if any change happened so that
@@ -2927,10 +2922,14 @@ function manageAttachmentNotification(aForce = false) {
   // specific keywords to the existing notification instead of creating it
   // from scratch.
   if (notification) {
-    let description = notification.querySelector("#attachmentReminderText");
-    description.setAttribute("value", textValue);
-    description = notification.querySelector("#attachmentKeywords");
-    description.setAttribute("value", keywords);
+    let selector = this.gComposeNotification.gProton
+      ? notification.messageText
+      : notification;
+
+    let msgContainer = selector.querySelector("#attachmentReminderText");
+    msgContainer.setAttribute("value", textValue);
+    let keywordsContainer = selector.querySelector("#attachmentKeywords");
+    keywordsContainer.setAttribute("value", keywords);
     return;
   }
 
@@ -2971,10 +2970,14 @@ function manageAttachmentNotification(aForce = false) {
     "label",
     getComposeBundle().getString("disableAttachmentReminderButton")
   );
-  disableAttachmentReminder.setAttribute(
-    "command",
-    "cmd_doNotRemindForAttachments"
-  );
+  disableAttachmentReminder.addEventListener("click", () => {
+    gDisableAttachmentReminder = true;
+    toggleAttachmentReminder(false);
+  });
+  disableAttachmentReminder.addEventListener("keypress", () => {
+    gDisableAttachmentReminder = true;
+    toggleAttachmentReminder(false);
+  });
   remindLaterMenuPopup.appendChild(disableAttachmentReminder);
 
   let remindButton = {
@@ -2995,6 +2998,15 @@ function manageAttachmentNotification(aForce = false) {
   );
   notification.setAttribute("id", "attachmentNotificationBox");
 
+  // Variation for Proton UI.
+  if (this.gComposeNotification.gProton) {
+    notification.messageText.appendChild(msg);
+    notification.buttonContainer.lastElementChild.appendChild(
+      remindLaterMenuPopup
+    );
+    return;
+  }
+
   notification.messageDetails.querySelector("button").before(msg);
   notification.messageDetails
     .querySelector("button:last-child")

mail/components/compose/content/messengercompose.xhtml

@@ -382,8 +382,6 @@
     <command id="cmd_copyImage" oncommand="goCopyImage()" disabled="false"/>
   </commandset>
 
-  <command id="cmd_doNotRemindForAttachments" oncommand="disableAttachmentReminder();"/>
-
 <keyset id="tasksKeys">
   <!-- File Menu -->
   <key id="key_newMessage" key="&newMessageCmd2.key;" oncommand="goOpenNewMessage(null);" modifiers="accel"/>

mail/test/browser/composition/browser_attachmentReminder.js

@@ -31,6 +31,7 @@ var {
   assert_notification_displayed,
   check_notification_displayed,
   get_notification_button,
+  get_notification,
   wait_for_notification_to_show,
   wait_for_notification_to_stop,
 } = ChromeUtils.import(
@@ -127,15 +128,12 @@ function assert_manual_reminder_state(aCwc, aChecked) {
 /**
  * Returns the keywords string currently shown in the notification message.
  *
- * @param aCwc A compose window controller.
+ * @param {MozMillController} cwc - The compose window controller.
  */
-function get_reminder_keywords(aCwc) {
-  assert_automatic_reminder_state(aCwc, true);
-  let nBox = aCwc.window.document.querySelector(
-    `#${kBoxId} .notificationbox-stack`
-  )._notificationBox;
-  let notification = nBox.getNotificationWithValue(kNotificationId);
-  return notification
+function get_reminder_keywords(cwc) {
+  assert_automatic_reminder_state(cwc, true);
+  let box = get_notification(cwc, kBoxId, kNotificationId);
+  return box.messageText
     .querySelector("#attachmentKeywords")
     .getAttribute("value");
 }
@@ -167,11 +165,12 @@ add_task(async function test_attachment_reminder_appears_properly() {
   // The manual reminder should be disabled yet.
   assert_manual_reminder_state(cwc, false);
 
+  let box = get_notification(cwc, kBoxId, kNotificationId);
   // Click ok to be notified on send if no attachments are attached.
-  cwc.click(
-    cwc.window.document.querySelector(
-      `#${kBoxId} button[label="Remind Me Later"]`
-    )
+  EventUtils.synthesizeMouseAtCenter(
+    box.buttonContainer.lastElementChild,
+    {},
+    cwc.window
   );
   wait_for_reminder_state(cwc, false);
 
@@ -398,12 +397,9 @@ add_task(async function test_manual_attachment_reminder() {
   wait_for_notification_to_show(mc, "mail-notification-top", "draftMsgContent");
   // Edit the draft again...
   plan_for_new_window("msgcompose");
+  let box = get_notification(mc, "mail-notification-top", "draftMsgContent");
   // ... by clicking Edit in the draft message notification bar.
-  mc.click(
-    mc.window.document.querySelector(
-      "#mail-notification-top button[label='Edit']"
-    )
-  );
+  EventUtils.synthesizeMouseAtCenter(box.buttonContainer.firstElementChild, {});
   cwc = wait_for_compose_window();
 
   // Check the reminder enablement was preserved in the message.
@@ -688,12 +684,9 @@ add_task(function test_reminder_in_draft() {
   wait_for_notification_to_show(mc, "mail-notification-top", "draftMsgContent");
   // Edit the draft again...
   plan_for_new_window("msgcompose");
+  let box = get_notification(mc, "mail-notification-top", "draftMsgContent");
   // ... by clicking Edit in the draft message notification bar.
-  mc.click(
-    mc.window.document.querySelector(
-      "#mail-notification-top button[label='Edit']"
-    )
-  );
+  EventUtils.synthesizeMouseAtCenter(box.buttonContainer.firstElementChild, {});
   cwc = wait_for_compose_window();
 
   // Give the notification time to appear.
@@ -730,9 +723,10 @@ add_task(function test_disabling_attachment_reminder() {
     popup: "reminderBarPopup",
   });
   cwc.click(disableButton.querySelector("dropmarker"));
-  cwc.click_menus_in_sequence(cwc.e("reminderBarPopup"), [
-    { id: "disableReminder" },
-  ]);
+  cwc.click_menus_in_sequence(
+    disableButton.closest("button").querySelector("menupopup"),
+    [{ id: "disableReminder" }]
+  );
 
   wait_for_reminder_state(cwc, false);
 
@@ -761,9 +755,10 @@ add_task(function test_disabling_attachment_reminder() {
     popup: "reminderBarPopup",
   });
   cwc.click(disableButton.querySelector("dropmarker"));
-  cwc.click_menus_in_sequence(cwc.e("reminderBarPopup"), [
-    { id: "disableReminder" },
-  ]);
+  cwc.click_menus_in_sequence(
+    disableButton.closest("button").querySelector("menupopup"),
+    [{ id: "disableReminder" }]
+  );
   wait_for_reminder_state(cwc, false);
 
   // Now send the message.

mail/test/browser/composition/browser_charsetEdit.js

@@ -31,7 +31,7 @@ var {
 var { SyntheticPartLeaf } = ChromeUtils.import(
   "resource://testing-common/mailnews/MessageGenerator.jsm"
 );
-var { wait_for_notification_to_show } = ChromeUtils.import(
+var { wait_for_notification_to_show, get_notification } = ChromeUtils.import(
   "resource://testing-common/mozmill/NotificationBoxHelpers.jsm"
 );
 var { plan_for_new_window } = ChromeUtils.import(
@@ -127,11 +127,10 @@ add_task(function test_wrong_reply_charset() {
   wait_for_notification_to_show(mc, "mail-notification-top", "draftMsgContent");
 
   plan_for_new_window("msgcompose");
-  mc.click(
-    mc.window.document.querySelector(
-      "#mail-notification-top button[label='Edit']"
-    )
-  );
+
+  let box = get_notification(mc, "mail-notification-top", "draftMsgContent");
+  // Click on the "Edit" button in the draft notification.
+  EventUtils.synthesizeMouseAtCenter(box.buttonContainer.firstElementChild, {});
   rwc = wait_for_compose_window();
   EventUtils.synthesizeKey(
     "s",
@@ -198,11 +197,9 @@ add_task(function test_no_mojibake() {
   wait_for_notification_to_show(mc, "mail-notification-top", "draftMsgContent");
 
   plan_for_new_window("msgcompose");
-  mc.click(
-    mc.window.document.querySelector(
-      "#mail-notification-top button[label='Edit']"
-    )
-  );
+  let box = get_notification(mc, "mail-notification-top", "draftMsgContent");
+  // Click on the "Edit" button in the draft notification.
+  EventUtils.synthesizeMouseAtCenter(box.buttonContainer.firstElementChild, {});
   rwc = wait_for_compose_window();
   EventUtils.synthesizeKey(
     "s",

mail/test/browser/composition/browser_drafts.js

@@ -27,7 +27,7 @@ var {
 } = ChromeUtils.import(
   "resource://testing-common/mozmill/FolderDisplayHelpers.jsm"
 );
-var { wait_for_notification_to_show } = ChromeUtils.import(
+var { wait_for_notification_to_show, get_notification } = ChromeUtils.import(
   "resource://testing-common/mozmill/NotificationBoxHelpers.jsm"
 );
 var { plan_for_new_window, wait_for_window_focused } = ChromeUtils.import(
@@ -58,15 +58,17 @@ add_task(function test_open_draft_again() {
 
   // Wait for the notification with the Edit button.
   wait_for_notification_to_show(mc, kBoxId, "draftMsgContent");
+  let box = get_notification(mc, kBoxId, "draftMsgContent");
 
   plan_for_new_window("msgcompose");
-  mc.click(mc.window.document.querySelector(`#${kBoxId} button[label='Edit']`));
+  // Click on the "Edit" button in the draft notification.
+  EventUtils.synthesizeMouseAtCenter(box.buttonContainer.firstElementChild, {});
   let cwc = wait_for_compose_window();
 
   let cwins = [...Services.wm.getEnumerator("msgcompose")].length;
 
   // click edit in main win again
-  mc.click(mc.window.document.querySelector(`#${kBoxId} button[label='Edit']`));
+  EventUtils.synthesizeMouseAtCenter(box.buttonContainer.firstElementChild, {});
 
   mc.sleep(1000); // wait a sec to see if it caused a new window
 
@@ -169,12 +171,14 @@ function internal_check_delivery_format(editDraft) {
 
   // Wait for the notification with the Edit button.
   wait_for_notification_to_show(mc, kBoxId, "draftMsgContent");
+  let box = get_notification(mc, kBoxId, "draftMsgContent");
 
   plan_for_new_window("msgcompose");
   if (editDraft) {
     // Trigger "edit draft".
-    mc.click(
-      mc.window.document.querySelector(`#${kBoxId} button[label='Edit']`)
+    EventUtils.synthesizeMouseAtCenter(
+      box.buttonContainer.firstElementChild,
+      {}
     );
   } else {
     // Trigger "edit as new" resulting in template processing.
@@ -340,9 +344,11 @@ add_task(function test_remove_space_stuffing_format_flowed() {
 
   // Wait for the notification with the Edit button.
   wait_for_notification_to_show(mc, kBoxId, "draftMsgContent");
+  let box = get_notification(mc, kBoxId, "draftMsgContent");
 
   plan_for_new_window("msgcompose");
-  mc.click(mc.window.document.querySelector(`#${kBoxId} button[label='Edit']`));
+  // Click on the "Edit" button in the draft notification.
+  EventUtils.synthesizeMouseAtCenter(box.buttonContainer.firstElementChild, {});
   cwc = wait_for_compose_window();
 
   let bodyText = get_compose_body(cwc).innerHTML;

mail/test/browser/shared-modules/ComposeHelpers.jsm

@@ -40,7 +40,9 @@ var { gMockCloudfileManager } = ChromeUtils.import(
 var windowHelper = ChromeUtils.import(
   "resource://testing-common/mozmill/WindowHelpers.jsm"
 );
-
+var { get_notification } = ChromeUtils.import(
+  "resource://testing-common/mozmill/NotificationBoxHelpers.jsm"
+);
 var EventUtils = ChromeUtils.import(
   "resource://testing-common/mozmill/EventUtils.jsm"
 );
@@ -213,10 +215,15 @@ function open_compose_from_draft(aController) {
   }
 
   windowHelper.plan_for_new_window("msgcompose");
-  aController.click(
-    aController.window.document.querySelector(
-      "#mail-notification-top button[label='Edit']"
-    )
+  let box = get_notification(
+    aController,
+    "mail-notification-top",
+    "draftMsgContent"
+  );
+  EventUtils.synthesizeMouseAtCenter(
+    box.buttonContainer.firstElementChild,
+    {},
+    aController.window
   );
   return wait_for_compose_window();
 }

mail/test/browser/shared-modules/NotificationBoxHelpers.jsm

@@ -11,6 +11,7 @@ const EXPORTED_SYMBOLS = [
   "wait_for_notification_to_stop",
   "wait_for_notification_to_show",
   "get_notification_button",
+  "get_notification",
 ];
 
 /**
@@ -157,6 +158,29 @@ function wait_for_notification_to_show(aController, aBoxId, aValue) {
   );
 }
 
+/**
+ * Return the notification element based on the container ID and the Value type.
+ *
+ * @param {MozMillController} controller - The controller for the window that we
+ *   want the notification to appear in.
+ * @param {string} id - The id of the notification box.
+ * @param {string} val - The value of the notification to fetch.
+ * @returns {?Element} - The notification element if found.
+ */
+function get_notification(controller, id, val) {
+  let nb = controller.window.document.getElementById(id);
+  if (!nb) {
+    throw new Error("Couldn't find a notification box for id=" + id);
+  }
+
+  if (nb.querySelector(".notificationbox-stack")) {
+    let box = nb.querySelector(".notificationbox-stack")._notificationBox;
+    return box.getNotificationWithValue(val);
+  }
+
+  return null;
+}
+
 /**
  * Gets a button in a notification, as those do not have IDs.
  *
@@ -169,14 +193,8 @@ function wait_for_notification_to_show(aController, aBoxId, aValue) {
  *                    similar to click_menus_in_sequence().
  */
 function get_notification_button(aController, aBoxId, aValue, aMatch) {
-  let nb = aController.window.document.getElementById(aBoxId);
-  if (!nb) {
-    throw new Error("Couldn't find a notification box for id=" + aBoxId);
-  }
-
-  let box = nb.querySelector(".notificationbox-stack")._notificationBox;
-  let notification = box.getNotificationWithValue(aValue);
-  let buttons = notification.querySelectorAll("button");
+  let notification = get_notification(aController, aBoxId, aValue);
+  let buttons = notification.buttonContainer.querySelectorAll("button");
   for (let button of buttons) {
     let matchedAll = true;
     for (let name in aMatch) {

mail/themes/osx/mail/message-bar.css

@@ -6,4 +6,14 @@
 
 .notification-button.small {
   padding-block: 4px;
-}
+}
+
+#reminderBarPopup {
+  padding: 2px 5px;
+}
+
+#reminderBarPopup > menuitem[_moz-menuactive="true"] {
+  -moz-font-smoothing-background-color: -moz-mac-active-menuitem;
+  color: -moz-mac-menutextselect;
+  background-color: Highlight;
+}

mail/themes/shared/mail/message-bar.css

@@ -208,7 +208,7 @@
 
 .notification-button-container,
 .notification-message {
-  display: inline-block;
+  display: flex;
 }
 
 .notification-button {
@@ -220,6 +220,54 @@
   border-color: var(--in-content-button-border-active);
 }
 
+/* Button variations */
+
+button.button-menu-list {
+  appearance: none;
+  padding-inline-end: 18px;
+  background-repeat: no-repeat;
+  background-position: right 4px center;
+  background-size: 12px;
+  background-image: url("chrome://global/skin/icons/arrow-dropdown-12.svg");
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+button:-moz-locale-dir(rtl).button-menu-list {
+  background-position-x: left 4px;
+}
+
+button.notification-button[type="menu-button"] {
+  margin-inline: 6px;
+}
+
+button[type="menu-button"] > .button-box > button {
+  margin-block: -5px;
+  margin-inline: -11px 2px;
+  min-height: auto;
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+  padding-block: 2px;
+  font-weight: inherit;
+  border-inline-end: 1px solid var(--in-content-button-border);
+}
+
+.button-menubutton-dropmarker {
+  appearance: none;
+}
+
+button dropmarker::part(icon) {
+  margin-inline-start: 3px;
+}
+
+button.notification-button[is="button-menu-button"] > .button-box > dropmarker {
+  appearance: none;
+  list-style-image: url("chrome://global/skin/icons/arrow-dropdown-12.svg");
+  -moz-context-properties: fill;
+  fill: currentColor;
+  margin-inline-end: -5px;
+}
+
 .close {
   margin: 4px 8px;
   background-size: 16px;
@@ -292,3 +340,33 @@ strong {
   margin-inline-end: 4px;
 }
 } /** END not Proton **/
+
+/* Attachment reminder variations */
+
+#attachmentKeywords {
+  font-weight: bold;
+  margin-inline-start: 3px;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+#reminderBarPopup {
+  appearance: auto;
+  -moz-default-appearance: menupopup;
+  min-width: 1px;
+  color: MenuText;
+}
+
+#reminderBarPopup menuitem {
+  appearance: auto;
+  -moz-default-appearance: menuitem;
+  -moz-box-align: center;
+  max-width: 42em;
+  padding: 5px;
+}
+
+#reminderBarPopup menu[_moz-menuactive="true"],
+#reminderBarPopup menuitem[_moz-menuactive="true"] {
+  color: -moz-MenuHoverText;
+  background-color: -moz-MenuHover;
+}

mail/themes/shared/mail/messenger.css

@@ -593,6 +593,7 @@ button[type="menu-button"] {
   appearance: none;
 }
 
+@media not (-moz-proton) {
 .button-menu-list > .button-box {
   appearance: none;
   padding-inline-end: 14px;
@@ -607,6 +608,7 @@ button[type="menu-button"] {
 button.button-menu-list:-moz-locale-dir(rtl) > .button-box {
   background-position: left;
 }
+} /** END not Proton **/
 
 button[type="menu-button"] > .button-box > button {
   appearance: none;

mail/themes/shared/mail/messengercompose.css

@@ -734,6 +734,10 @@ toolbarbutton.formatting-button[disabled="true"] > .toolbarbutton-icon,
 
 /* :::: attachment notification :::: */
 
+#compose-notification-bottom > .notificationbox-stack {
+  background-color: var(--lwt-toolbar-field-focus);
+}
+
 #attachmentReminderText {
   margin-inline-start: 0;
   cursor: pointer;

mail/themes/windows/mail/message-bar.css

@@ -6,4 +6,27 @@
 
 .notification-button.small {
   padding-block: 3px;
-}
+}
+
+@media (-moz-proton-contextmenus) {
+@media (-moz-windows-default-theme) and (-moz-os-version: windows-win10) {
+  #reminderBarPopup {
+    appearance: none;
+    -moz-window-shadow: cliprounded;
+    background-color: transparent;
+    border-color: transparent;
+    border-radius: 3px;
+    color: var(--menu-color);
+  }
+
+  #reminderBarPopup > menuitem {
+    appearance: none;
+    padding: 0.5em 1em;
+  }
+
+  #reminderBarPopup > menuitem[_moz-menuactive="true"] {
+    background-color: var(--menuitem-hover-background-color);
+    color: var(--menu-color);
+  }
+}
+} /** END not Proton **/