Bug 1569129 - make mail notification properly formatted for long senders, and make sure long subjects also are properly shown. r+a=jorgk
authorMagnus Melin <mkmelin+mozilla@iki.fi>
Fri, 02 Aug 2019 21:46:14 +0200
changeset 35271 b557db605509cf9a0166a264144268ac021864dc
parent 35270 b84302fec4df8e60a6658d4ce8444e348c1e2cc7
child 35272 67168132906c031451f350790415863493d55c9c
push id2475
push usermozilla@jorgk.com
push dateFri, 02 Aug 2019 20:07:29 +0000
treeherdercomm-beta@c7b7a4c6679d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1569129
Bug 1569129 - make mail notification properly formatted for long senders, and make sure long subjects also are properly shown. r+a=jorgk
mail/base/content/foldersummary.js
mail/themes/linux/mail/newmailalert.css
mail/themes/shared/jar.inc.mn
mail/themes/shared/mail/newmailalert.css
mail/themes/windows/mail/newmailalert.css
--- a/mail/base/content/foldersummary.js
+++ b/mail/base/content/foldersummary.js
@@ -134,21 +134,22 @@ class MozFolderSummary extends MozXULEle
           }
           msgBox.querySelector(".folderSummary-subject").textContent = msgSubject;
         }
 
         if (this.showSender) {
           let addrs = MailServices.headerParser.parseEncodedHeader(
             msgHdr.author, msgHdr.effectiveCharset, false);
           let folderSummarySender = msgBox.querySelector(".folderSummary-sender");
-          folderSummarySender.textContent =
+          // Set the label value instead of textContent to avoid wrapping.
+          folderSummarySender.value =
             (addrs.length > 0) ? (addrs[0].name || addrs[0].email) : "";
           if (addrs.length > 1) {
             let andOthersStr = this.messengerBundle.GetStringFromName("andOthers");
-            folderSummarySender.textContent += " " + andOthersStr;
+            folderSummarySender.value += " " + andOthersStr;
           }
         }
 
         if (this.showPreview) {
           // Get the preview text as a UTF-8 encoded string.
           msgBox.querySelector(".folderSummary-previewText").textContent =
             decodeURIComponent(escape(msgHdr.getStringProperty("preview") || ""));
         }
@@ -162,18 +163,16 @@ class MozFolderSummary extends MozXULEle
     let vbox = document.createXULElement("vbox");
     vbox.setAttribute("class", "folderSummaryMessage");
 
     let hbox = document.createXULElement("hbox");
     hbox.setAttribute("class", "folderSummary-message-row");
 
     let subject = document.createXULElement("label");
     subject.setAttribute("class", "folderSummary-subject");
-    subject.setAttribute("flex", "1");
-    subject.setAttribute("crop", "right");
 
     let sender = document.createXULElement("label");
     sender.setAttribute("class", "folderSummary-sender");
     sender.setAttribute("crop", "right");
 
     hbox.appendChild(subject);
     hbox.appendChild(sender);
 
--- a/mail/themes/linux/mail/newmailalert.css
+++ b/mail/themes/linux/mail/newmailalert.css
@@ -1,89 +1,14 @@
 /* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*-
  * 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/. */
 
-/* ===== alert.css =====================================================
-  == Styles specific to the alerts dialog.
-  ======================================================================= */
-
-@import url("chrome://messenger/skin/");
-
-@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
-
-#newMailAlertNotification {
-  -moz-appearance: none;
-  min-height: 60px;
-  border: 1px solid threedshadow;
-  background-color: -moz-Dialog;
-}
-
-#alertImageBox {
-  padding: 4px;
-  background-image: linear-gradient(rgba(255, 255, 255, .7),
-                                    rgba(255, 255, 255, .6));
-  border-inline-end: 1px solid rgba(0, 0, 0, .1);
-}
-
-#alertImage {
-  list-style-image: url("chrome://branding/content/icon64.png");
-}
-
-#alertTextBox {
-  padding: 4px;
-  padding-inline-end: 25px;
-  background-image: linear-gradient(rgba(255, 255, 255, .2),
-                                    rgba(255, 255, 255, .1));
-}
-
-#alertTitle {
-  font-weight: bold;
-  font-size: 110%;
-  padding-inline-start: 5px;
-  padding-inline-end: 5px;
-}
-
-#alertGroove {
-  margin-inline-start: 11px;
-}
-
-folder-summary {
-  -moz-box-orient: vertical;
-}
-
-.folderSummary-message-row {
-  /* This max width ends up dictating the overall width of the alert window
-     because it controls how large the preview, subject and sender text can be
-     before cropping kicks in */
-  max-width: 450px;
-  padding: 0px 5px;
-}
-
-.folderSummary-subject {
-  font-weight: bold;
-}
-
-.folderSummary-sender, .folderSummary-subject {
-  cursor: inherit;
-}
-
-.folderSummary-previewText {
-  opacity: 0.6;
-}
-
-.folderSummaryMessage:hover > .folderSummary-message-row {
-  cursor: pointer;
-  color: -moz-hyperlinktext;
-}
-
-.folderSummaryMessage:hover:active > .folderSummary-message-row {
-  color: -moz-activehyperlinktext;
-}
+@import url("chrome://messenger/skin/shared/newmailalert.css");
 
 #closeButton {
   list-style-image: url("chrome://messenger/skin/icons/close-button.png");
   -moz-image-region: rect(0px, 16px, 16px, 0px);
   -moz-appearance: none;
   border: none !important;
   padding: 2px;
 }
--- a/mail/themes/shared/jar.inc.mn
+++ b/mail/themes/shared/jar.inc.mn
@@ -126,16 +126,17 @@
   skin/classic/messenger/shared/messenger.css                 (../shared/mail/messenger.css)
   skin/classic/messenger/shared/messengercompose.css          (../shared/mail/messengercompose.css)
   skin/classic/messenger/shared/searchBox.css                 (../shared/mail/searchBox.css)
   skin/classic/messenger/shared/tabmail.css                   (../shared/mail/tabmail.css)
   skin/classic/messenger/tagColors.css                        (../shared/mail/tagColors.css)
   skin/classic/messenger/shared/smime/smime-compose.css       (../shared/mail/smime/smime-compose.css)
   skin/classic/messenger/shared/customizableui/panelUI.css    (../shared/customizableui/panelUI.css)
 #ifndef XP_MACOSX
+  skin/classic/messenger/shared/newmailalert.css              (../shared/mail/newmailalert.css)
   skin/classic/messenger/icons/anchor.svg                     (../shared/mail/icons/anchor.svg)
   skin/classic/messenger/icons/bold.svg                       (../shared/mail/icons/bold.svg)
   skin/classic/messenger/icons/bullet-list.svg                (../shared/mail/icons/bullet-list.svg)
   skin/classic/messenger/messengercompose/format-dropmarker.svg (../shared/mail/icons/format-dropmarker.svg)
   skin/classic/messenger/icons/center-align.svg               (../shared/mail/icons/center-align.svg)
   skin/classic/messenger/icons/decrease.svg                   (../shared/mail/icons/decrease.svg)
   skin/classic/messenger/icons/hline.svg                      (../shared/mail/icons/hline.svg)
   skin/classic/messenger/icons/image.svg                      (../shared/mail/icons/image.svg)
copy from mail/themes/windows/mail/newmailalert.css
copy to mail/themes/shared/mail/newmailalert.css
--- a/mail/themes/windows/mail/newmailalert.css
+++ b/mail/themes/shared/mail/newmailalert.css
@@ -62,16 +62,25 @@ folder-summary {
 .folderSummary-subject {
   font-weight: bold;
 }
 
 .folderSummary-sender, .folderSummary-subject {
   cursor: inherit;
 }
 
+.folderSummary-sender {
+  width: 150px;
+}
+
+.folderSummary-subject {
+  width: 300px;
+  overflow-wrap: anywhere;
+}
+
 .folderSummary-previewText {
   color: grey;
 }
 
 .folderSummaryMessage:hover > .folderSummary-message-row {
   cursor: pointer;
   color: -moz-hyperlinktext;
 }
--- a/mail/themes/windows/mail/newmailalert.css
+++ b/mail/themes/windows/mail/newmailalert.css
@@ -1,81 +1,6 @@
 /* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*-
  * 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/. */
 
-/* ===== alert.css =====================================================
-  == Styles specific to the alerts dialog.
-  ======================================================================= */
-
-@import url("chrome://messenger/skin/");
-
-@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
-
-#newMailAlertNotification {
-  min-height: 60px;
-  border: 1px solid threedshadow;
-  border-radius: 3px;
-  background-color: -moz-Dialog;
-}
-
-#alertImageBox {
-  padding: 4px;
-  background-image: linear-gradient(rgba(255, 255, 255, .7),
-                                    rgba(255, 255, 255, .6));
-  border-inline-end: 1px solid rgba(0, 0, 0, .1);
-}
-
-#alertImage {
-  list-style-image: url("chrome://branding/content/icon64.png");
-}
-
-#alertTextBox {
-  padding: 4px;
-  padding-inline-end: 25px;
-  background-image: linear-gradient(rgba(255, 255, 255, .2),
-                                    rgba(255, 255, 255, .1));
-}
-
-#alertTitle {
-  font-weight: bold;
-  font-size: 110%;
-  padding-inline-start: 5px;
-  padding-inline-end: 5px;
-}
-
-#alertGroove {
-  margin-inline-start: 11px;
-}
-
-folder-summary {
-  -moz-box-orient: vertical;
-}
-
-.folderSummary-message-row {
-  /* This max width ends up dictating the overall width of the alert window
-     because it controls how large the preview, subject and sender text can be
-     before cropping kicks in */
-  max-width: 450px;
-  padding: 0 5px;
-}
-
-.folderSummary-subject {
-  font-weight: bold;
-}
-
-.folderSummary-sender, .folderSummary-subject {
-  cursor: inherit;
-}
-
-.folderSummary-previewText {
-  color: grey;
-}
-
-.folderSummaryMessage:hover > .folderSummary-message-row {
-  cursor: pointer;
-  color: -moz-hyperlinktext;
-}
-
-.folderSummaryMessage:hover:active > .folderSummary-message-row {
-  color: -moz-activehyperlinktext;
-}
+@import url("chrome://messenger/skin/shared/newmailalert.css");