Bug 1374708 - Color and style Quotes in messages. r=IanN,stefanh a=IanN
authorFrank-Rainer Grahl <frgrahl@gmx.net>
Sun, 23 Jul 2017 12:37:34 +0200
changeset 28325 b3081f23868e936bf7836dc31f707c387d32081e
parent 28324 8fd8d7651c7880b0f35a687a18f7319651912bba
child 28326 8bdc38d38a742b53f5f8a0a4446d427426fe461e
push id1979
push userfrgrahl@gmx.net
push dateSun, 23 Jul 2017 10:37:57 +0000
treeherdercomm-beta@b3081f23868e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersIanN, stefanh, IanN
bugs1374708
Bug 1374708 - Color and style Quotes in messages. r=IanN,stefanh a=IanN
suite/mailnews/compose/MsgComposeCommands.js
suite/themes/classic/jar.mn
suite/themes/classic/mac/messenger/messageQuotes.css
suite/themes/classic/messenger/messageBody.css
suite/themes/classic/messenger/messageQuotes.css
suite/themes/modern/jar.mn
suite/themes/modern/messenger/messageBody.css
suite/themes/modern/messenger/messageQuotes.css
--- a/suite/mailnews/compose/MsgComposeCommands.js
+++ b/suite/mailnews/compose/MsgComposeCommands.js
@@ -1252,18 +1252,26 @@ function ComposeStartup(aParams)
 var gMsgEditorCreationObserver =
 {
   observe: function(aSubject, aTopic, aData)
   {
     if (aTopic == "obs_documentCreated")
     {
       var editor = GetCurrentEditor();
       var commandManager = GetCurrentCommandManager();
-      if (editor && commandManager == aSubject)
+      if (editor && commandManager == aSubject) {
+        let editorStyle = editor.QueryInterface(Components.interfaces.nsIEditorStyleSheets);
+        // We use addOverrideStyleSheet rather than addStyleSheet so that we get
+        // a synchronous load, rather than having a late-finishing async load
+        // mark our editor as modified when the user hasn't typed anything yet,
+        // but that means the sheet must not @import slow things, especially
+        // not over the network.
+        editorStyle.addOverrideStyleSheet("chrome://messenger/skin/messageQuotes.css");
         InitEditor(editor);
+      }
       // Now that we know this document is an editor, update commands now if
       // the document has focus, or next time it receives focus via
       // CommandUpdate_MsgCompose()
       if (gLastWindowToHaveFocus == document.commandDispatcher.focusedWindow)
         updateComposeItems();
       else
         gLastWindowToHaveFocus = null;
     }
--- a/suite/themes/classic/jar.mn
+++ b/suite/themes/classic/jar.mn
@@ -233,16 +233,17 @@ classic.jar:
   skin/classic/editor/icons/progress-done.gif                           (editor/icons/progress-done.gif)
   skin/classic/editor/icons/progress-failed.gif                         (editor/icons/progress-failed.gif)
 #ifdef XP_MACOSX
   skin/classic/messenger/accountManage.css                              (mac/messenger/accountManage.css)
   skin/classic/messenger/browserRequest.css                             (mac/messenger/browserRequest.css)
   skin/classic/messenger/filterDialog.css                               (mac/messenger/filterDialog.css)
   skin/classic/messenger/mailWindow1.css                                (mac/messenger/mailWindow1.css)
   skin/classic/messenger/messageHeader.css                              (mac/messenger/messageHeader.css)
+  skin/classic/messenger/messageQuotes.css                              (mac/messenger/messageQuotes.css)
   skin/classic/messenger/primaryToolbar.css                             (mac/messenger/primaryToolbar.css)
   skin/classic/messenger/searchDialog.css                               (mac/messenger/searchDialog.css)
   skin/classic/messenger/icons/messengericons.png                       (mac/messenger/icons/messengericons.png)
   skin/classic/messenger/icons/messengericons-small.png                 (mac/messenger/icons/messengericons-small.png)
   skin/classic/messenger/icons/spin-buttons.png                         (mac/messenger/icons/spin-buttons.png)
   skin/classic/messenger/icons/spin-buttons-active.png                  (mac/messenger/icons/spin-buttons-active.png)
   skin/classic/messenger/icons/tab-arrow-left.png                       (mac/messenger/icons/tab-arrow-left.png)
   skin/classic/messenger/icons/tab-arrow-right.png                      (mac/messenger/icons/tab-arrow-right.png)
@@ -256,16 +257,17 @@ classic.jar:
   skin/classic/messenger/smime/icons/smimeicons.png                     (mac/messenger/smime/icons/smimeicons.png)
   skin/classic/messenger/smime/icons/smimeicons-small.png               (mac/messenger/smime/icons/smimeicons-small.png)
 #else
   skin/classic/messenger/accountManage.css                              (messenger/accountManage.css)
   skin/classic/messenger/browserRequest.css                             (messenger/browserRequest.css)
   skin/classic/messenger/filterDialog.css                               (messenger/filterDialog.css)
   skin/classic/messenger/mailWindow1.css                                (messenger/mailWindow1.css)
   skin/classic/messenger/messageHeader.css                              (messenger/messageHeader.css)
+  skin/classic/messenger/messageQuotes.css                              (messenger/messageQuotes.css)
   skin/classic/messenger/primaryToolbar.css                             (messenger/primaryToolbar.css)
   skin/classic/messenger/searchDialog.css                               (messenger/searchDialog.css)
   skin/classic/messenger/icons/messengericons.png                       (messenger/icons/messengericons.png)
   skin/classic/messenger/icons/messengericons-small.png                 (messenger/icons/messengericons-small.png)
   skin/classic/messenger/icons/twisty-clsd.png                          (messenger/icons/twisty-clsd.png)
   skin/classic/messenger/icons/twisty-open.png                          (messenger/icons/twisty-open.png)
   skin/classic/messenger/addressbook/addressbook.css                    (messenger/addressbook/addressbook.css)
   skin/classic/messenger/addressbook/icons/addressbookicons.png         (messenger/addressbook/icons/addressbookicons.png)
new file mode 100644
--- /dev/null
+++ b/suite/themes/classic/mac/messenger/messageQuotes.css
@@ -0,0 +1,43 @@
+/* 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/. */
+
+/* Because this sheet is loaded synchronously while the user is waiting for the
+   compose window to appear, it must not @import a ton of other things, and
+   especially must not trigger network access. */
+
+/* ===== messageQuotes.css =================================================
+  == Shared styles such as block quote colors and signature style
+  == between the message body during
+  == message display and the mail editor instance for mail compose.
+  ======================================================================= */
+
+/* workaround for MS Outlook mails where the line-height is set to 0 */
+body {
+  line-height: initial !important;
+}
+
+/* ::::: signature ::::: */
+
+@media not print {
+  div.moz-text-flowed > div.moz-txt-sig,
+  div.moz-text-plain > pre > div.moz-txt-sig,
+  pre.moz-signature {
+    opacity: 0.6;
+  }
+}
+
+blockquote[type=cite] {
+  color: blue;
+  border-color: blue;
+}
+
+blockquote[type=cite] blockquote[type=cite] {
+  color: green;
+  border-color: green;
+}
+
+blockquote[type=cite] blockquote[type=cite] blockquote[type=cite] {
+  color: maroon;
+  border-color: maroon;
+}
--- a/suite/themes/classic/messenger/messageBody.css
+++ b/suite/themes/classic/messenger/messageBody.css
@@ -2,16 +2,17 @@
  * 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/. */
 
 /* ===== messageBody.css =================================================
   == Styles for the body of a mail message.
   ======================================================================= */
 
 @import url(chrome://communicator/skin/smileys.css);
+@import url(chrome://messenger/skin/messageQuotes.css);
 
 @namespace url("http://www.w3.org/1999/xhtml");
 
 /* :::: message header ::::: */
 
 .header-part1 {
   background-color: #EFEFEF;
 }
@@ -24,49 +25,41 @@
 .headerdisplayname {
   display: inline;
   font-weight: bold;
   white-space: pre;
 }
 
 /* ::::: message text, incl. quotes ::::: */
 
-.moz-text-flowed blockquote {
-  margin: inherit;
-  border-width: medium;
-  border-color: gray;
+.moz-text-flowed blockquote,
+.moz-text-plain blockquote {
+  margin: 0;
 }
 
 .moz-text-plain pre {
-  margin: inherit;
+  margin: 0;
   font-family: inherit;
 }
 
 .moz-text-plain[wrap="true"] {
   white-space: pre-wrap;
 }
 
 .moz-text-plain[wrap="false"] {
   white-space: pre;
 }
 
 .moz-text-plain[wrap="flow"] .moz-txt-sig {
   white-space: pre-wrap;
 }
 
 .moz-text-plain[graphical-quote="false"] blockquote {
-  margin: inherit;
-  border-left: inherit;
-  padding-inline-start: inherit;
-}
-
-.moz-text-plain[graphical-quote="true"] blockquote {
-  margin: inherit;
-  border-width: medium;
-  border-color: gray;
+  border-style: none;
+  padding: 0;
 }
 
 .moz-text-plain[graphical-quote="true"] .moz-txt-citetags {
   display: none;
 }
 
 .moz-txt-underscore {
   text-decoration: underline;
new file mode 100644
--- /dev/null
+++ b/suite/themes/classic/messenger/messageQuotes.css
@@ -0,0 +1,59 @@
+/* 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/. */
+
+/* Because this sheet is loaded synchronously while the user is waiting for the
+   compose window to appear, it must not @import a ton of other things, and
+   especially must not trigger network access. */
+
+/* ===== messageQuotes.css =================================================
+  == Shared styles such as block quote colors and signature style
+  == between the message body during
+  == message display and the mail editor instance for mail compose.
+  ======================================================================= */
+
+/* workaround for MS Outlook mails where the line-height is set to 0 */
+body {
+  line-height: initial !important;
+}
+
+/* ::::: signature ::::: */
+
+@media not print {
+  div.moz-text-flowed > div.moz-txt-sig,
+  div.moz-text-plain > pre > div.moz-txt-sig,
+  pre.moz-signature {
+    opacity: 0.6;
+  }
+}
+
+/* ::::: Turn on borders and padding for quotes. ::::: */
+blockquote[type=cite] {
+  padding: 0.4ex 1ex;
+  margin: 1ex;
+  border-width: 0px 0px 0px 2px;
+  border-style: none none none solid;
+  border-radius: 2px;
+}
+
+/* ::::: Colorize block quote borders. We only go 5 levels deep. ::::: */
+blockquote[type=cite] {
+  border-color: rgb(114,159,207); /* Sky Blue 1 */
+}
+
+blockquote[type=cite] blockquote[type=cite] {
+  border-color: rgb(173,127,168); /* Plum 1 */
+}
+
+blockquote[type=cite] blockquote[type=cite] blockquote[type=cite] {
+  border-color: rgb(138,226,52); /* Chameleon 1 */
+}
+
+blockquote[type=cite] blockquote[type=cite] blockquote[type=cite] blockquote[type=cite] {
+  border-color: rgb(252,175,62); /* Orange 1 */
+}
+
+blockquote[type=cite] blockquote[type=cite] blockquote[type=cite] blockquote[type=cite] blockquote[type=cite] {
+  border-color: rgb(233,185,110); /* Chocolate 1 */
+}
+
--- a/suite/themes/modern/jar.mn
+++ b/suite/themes/modern/jar.mn
@@ -399,16 +399,17 @@ modern.jar:
   skin/modern/messenger/filterDialog.css                           (messenger/filterDialog.css)
   skin/modern/messenger/folderMenus.css                            (messenger/folderMenus.css)
   skin/modern/messenger/folderPane.css                             (messenger/folderPane.css)
   skin/modern/messenger/folderPaneExtras.css                       (messenger/folderPaneExtras.css)
   skin/modern/messenger/threadPaneExtras.css                       (messenger/threadPaneExtras.css)
   skin/modern/messenger/messageBody.css                            (messenger/messageBody.css)
   skin/modern/messenger/virtualFolderListDialog.css                (messenger/virtualFolderListDialog.css)
   skin/modern/messenger/messageHeader.css                          (messenger/messageHeader.css)
+  skin/modern/messenger/messageQuotes.css                          (messenger/messageQuotes.css)
   skin/modern/messenger/messageKeywords.css                        (messenger/messageKeywords.css)
   skin/modern/messenger/messageWindow.css                          (messenger/messageWindow.css)
   skin/modern/messenger/messenger.css                              (messenger/messenger.css)
   skin/modern/messenger/newmailalert.css                           (messenger/newmailalert.css)
   skin/modern/messenger/prefPanels.css                             (messenger/prefPanels.css)
   skin/modern/messenger/searchDialog.css                           (messenger/searchDialog.css)
   skin/modern/messenger/subscribe.css                              (messenger/subscribe.css)
   skin/modern/messenger/mailWindow1.css                            (messenger/mailWindow1.css)
--- a/suite/themes/modern/messenger/messageBody.css
+++ b/suite/themes/modern/messenger/messageBody.css
@@ -2,16 +2,17 @@
  * 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/. */
 
 /* ===== messageBody.css =================================================
   == Styles for the body of a mail message.
   ======================================================================= */
 
 @import url(chrome://communicator/skin/smileys.css);
+@import url(chrome://messenger/skin/messageQuotes.css);
 
 @namespace url("http://www.w3.org/1999/xhtml");
 
 /* :::: message header ::::: */
 
 .header-part1 {
   background-color: #EFEFEF;
 }
@@ -24,49 +25,41 @@
 .headerdisplayname {
   display: inline;
   font-weight: bold;
   white-space: pre;
 }
 
 /* ::::: message text, incl. quotes ::::: */
 
-.moz-text-flowed blockquote {
-  margin: inherit;
-  border-width: medium;
-  border-color: gray;
+.moz-text-flowed blockquote,
+.moz-text-plain blockquote {
+  margin: 0;
 }
 
 .moz-text-plain pre {
-  margin: inherit;
+  margin: 0;
   font-family: inherit;
 }
 
 .moz-text-plain[wrap="true"] {
   white-space: pre-wrap;
 }
 
 .moz-text-plain[wrap="false"] {
   white-space: pre;
 }
 
 .moz-text-plain[wrap="flow"] .moz-txt-sig {
   white-space: pre-wrap;
 }
 
 .moz-text-plain[graphical-quote="false"] blockquote {
-  margin: inherit;
-  border-left: inherit;
-  padding-inline-start: inherit;
-}
-
-.moz-text-plain[graphical-quote="true"] blockquote {
-  margin: inherit;
-  border-width: medium;
-  border-color: gray;
+  border-style: none;
+  padding: 0;
 }
 
 .moz-text-plain[graphical-quote="true"] .moz-txt-citetags {
   display: none;
 }
 
 .moz-txt-underscore {
   text-decoration: underline;
new file mode 100644
--- /dev/null
+++ b/suite/themes/modern/messenger/messageQuotes.css
@@ -0,0 +1,58 @@
+/* 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/. */
+
+/* Because this sheet is loaded synchronously while the user is waiting for the
+   compose window to appear, it must not @import a ton of other things, and
+   especially must not trigger network access. */
+
+/* ===== messageQuotes.css =================================================
+  == Shared styles such as block quote colors and signature style
+  == between the message body during
+  == message display and the mail editor instance for mail compose.
+  ======================================================================= */
+
+/* workaround for MS Outlook mails where the line-height is set to 0 */
+body {
+  line-height: initial !important;
+}
+
+/* ::::: signature ::::: */
+
+@media not print {
+  div.moz-text-flowed > div.moz-txt-sig,
+  div.moz-text-plain > pre > div.moz-txt-sig,
+  pre.moz-signature {
+    opacity: 0.6;
+  }
+}
+
+/* ::::: Turn on borders and padding for quotes. ::::: */
+blockquote[type=cite] {
+  padding: 0.4ex 1ex;
+  margin: 1ex;
+  border-width: 0px 0px 0px 2px;
+  border-style: none none none solid;
+  border-radius: 2px;
+}
+
+/* ::::: Colorize block quote borders. We only go 5 levels deep. ::::: */
+blockquote[type=cite] {
+  border-color: rgb(131, 165, 201); /* 65% */}
+
+blockquote[type=cite] blockquote[type=cite] {
+  border-color: rgb(149, 178, 208); /* 70% */
+}
+
+blockquote[type=cite] blockquote[type=cite] blockquote[type=cite] {
+  border-color: rgb(166, 190, 216); /* 75% */
+}
+
+blockquote[type=cite] blockquote[type=cite] blockquote[type=cite] blockquote[type=cite] {
+
+  border-color: rgb(184, 203, 224); /* 80% */
+}
+
+blockquote[type=cite] blockquote[type=cite] blockquote[type=cite] blockquote[type=cite] blockquote[type=cite] {
+  border-color: rgb(202, 216, 232); /* 85% */
+}