Bug 1682065 - Use a new message indicator on the folder icons. r=aleca

mail/themes/addons/dark/manifest.json

@@ -30,7 +30,7 @@
       "toolbar_field_separator": "#5F6670",
       "toolbar_field_text": "rgb(249, 249, 250)",
       "sidebar": "#38383D",
-      "sidebar_text": "#d4d4d5",
+      "sidebar_text": "#d4d4d4",
       "sidebar_highlight": "#45a1ff",
       "sidebar_highlight_text": "#fff",
       "sidebar_border": "#606064"

mail/themes/addons/light/manifest.json

@@ -24,7 +24,7 @@
       "popup_border": "#ccc",
       "tab_line": "#0a84ff",
       "sidebar": "#fff",
-      "sidebar_text": "#000",
+      "sidebar_text": "#333",
       "sidebar_border": "#888",
       "sidebar_highlight": "#2292d0",
       "sidebar_highlight_text": "#fff",

mail/themes/linux/mail/messenger.css

@@ -351,6 +351,10 @@ treechildren::-moz-tree-cell-text {
   padding-inline-start: 5px;
 }
 
+treechildren::-moz-tree-twisty(selected, focus) {
+  color: HighlightText;
+}
+
 /* Status bar */
 
 .statusbar {

mail/themes/shared/jar.inc.mn

@@ -66,6 +66,7 @@
   skin/classic/messenger/icons/connection-insecure.svg        (../shared/mail/icons/connection-insecure.svg)
   skin/classic/messenger/icons/connection-mixed.svg           (../shared/mail/icons/connection-mixed.svg)
   skin/classic/messenger/icons/connection-secure.svg          (../shared/mail/icons/connection-secure.svg)
+  skin/classic/messenger/icons/folder-new-indicator.svg       (../shared/mail/icons/folder-new-indicator.svg)
   skin/classic/messenger/icons/message-encrypted-ok.svg       (../shared/mail/icons/message-encrypted-ok.svg)
   skin/classic/messenger/icons/message-encrypted-notok.svg    (../shared/mail/icons/message-encrypted-notok.svg)
   skin/classic/messenger/icons/contact.svg                    (../shared/mail/icons/contact.svg)

mail/themes/shared/mail/addressbook.css

@@ -68,6 +68,10 @@ toolbox[labelalign="end"] > toolbar[mode="full"] deck .toolbarbutton-text {
   color: -moz-DialogText;
 }
 
+#dirTree {
+  padding-inline-end: 1px;
+}
+
 #dirTree [sortDirection="ascending"],
 #dirTree [sortDirection="descending"] {
   list-style-image: none;

mail/themes/shared/mail/compacttheme.css

@@ -19,6 +19,7 @@
   /* Toolbar buttons */
   --lwt-toolbarbutton-hover-background: rgba(179, 179, 179, 0.4);
   --lwt-toolbarbutton-active-background: rgba(179, 179, 179, 0.6);
+  --unread-folder-color: #fff;
 
   /* !important to override LightweightThemeManager.addBuiltInTheme in
      mailGlue.js */
@@ -53,14 +54,14 @@
   treechildren::-moz-tree-cell-text(folderNameCol, newMessages-true),
 #folderTree:-moz-lwtheme-brighttext
   treechildren::-moz-tree-cell-text(folderNameCol, specialFolder-Inbox, newMessages-true) {
-  color: #0aa5ff !important;
+  color: #45b1ff !important;
 }
 
 #folderTree:-moz-lwtheme-brighttext
   treechildren::-moz-tree-image(folderNameCol, newMessages-true),
 #folderTree:-moz-lwtheme-brighttext
   treechildren::-moz-tree-image(folderNameCol, isServer-true, biffState-NewMail) {
-  fill: #0aa5ff !important;
+  fill: #45b1ff !important;
 }
 
 #folderTree:-moz-lwtheme-brighttext

mail/themes/shared/mail/folderPane.css

@@ -3,13 +3,14 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 :root {
-  --default: #363959;
-  --primary: #0060df;
+  --default: #4f526d;
+  --primary: #0a84ff;
+  --unread-folder-color: inherit;
 }
 
 :root[lwt-tree-brighttext] {
-  --default: #f9f9fa;
-  --primary: #45a1ff;
+  --default: #dcdcdc;
+  --primary: #45b1ff;
 }
 
 /* ::::: Tabmail ::::: */
@@ -186,6 +187,12 @@ treechildren::-moz-tree-cell-text(folderNameCol, specialFolder-Inbox, newMessage
   font-weight: bold !important;
 }
 
+treechildren::-moz-tree-image(folderNameCol, hasUnreadMessages-true),
+treechildren::-moz-tree-image(folderNameCol, closed, subfoldersHaveUnreadMessages-true) {
+  opacity: 1 !important;
+  fill: var(--unread-folder-color);
+}
+
 treechildren::-moz-tree-image(folderNameCol, newMessages-true),
 treechildren::-moz-tree-image(folderNameCol, isServer-true, biffState-NewMail) {
   opacity: 1 !important;
@@ -216,3 +223,16 @@ treechildren::-moz-tree-cell-text(imapdeleted) {
 .folderSummary-previewText {
   opacity: 0.6;
 }
+
+#folderTree treechildren::-moz-tree-cell-text(folderNameCol, newMessages-true) {
+  margin-inline-start: -20px;
+  padding-inline-start: 22px;
+  background-image: url("chrome://messenger/skin/icons/folder-new-indicator.svg");
+  background-repeat: no-repeat;
+  background-position: left;
+}
+
+#folderTree:-moz-locale-dir(rtl)
+  treechildren::-moz-tree-cell-text(folderNameCol, newMessages-true) {
+  background-position: right;
+}

mail/themes/shared/mail/icons/folder-new-indicator.svg

@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="8" height="16" viewBox="0 0 8 16">
+  <circle r="3" cy="4" cx="4" fill="#ffe900" stroke="#ff9400" stroke-width="1.5"/>
+</svg>

mail/themes/shared/mail/messenger.css

@@ -140,6 +140,10 @@ treechildren::-moz-tree-row(selected, focus) {
   background-color: Highlight;
 }
 
+treechildren::-moz-tree-twisty {
+  color: #505050;
+}
+
 /* LW theme tree styling */
 :root[lwt-tree] #threadTree treechildren::-moz-tree-row(untagged, selected),
 :root[lwt-tree]:-moz-window-inactive #threadTree treechildren::-moz-tree-row(selected),
@@ -609,8 +613,11 @@ html|ul.addon-webext-perm-list:empty {
   border-bottom-color: var(--sidebar-border-color, rgba(249,249,250,.2));
 }
 
+:root[lwt-tree-brighttext] treechildren::-moz-tree-twisty {
+  color: #d4d4d4;
+}
+
 :root[lwt-tree] treechildren::-moz-tree-image,
-:root[lwt-tree] treechildren::-moz-tree-twisty,
 :root[lwt-tree] #threadTree treechildren::-moz-tree-cell-text(untagged),
 :root[lwt-tree] tree:not(#threadTree) treechildren::-moz-tree-cell-text {
   color: var(--sidebar-text-color);
@@ -629,7 +636,6 @@ tree:-moz-lwtheme:not(:focus)
 }
 
 :root[lwt-tree] tree:not(:focus) treechildren::-moz-tree-image(selected),
-:root[lwt-tree] tree:not(:focus) treechildren::-moz-tree-twisty(selected),
 :root[lwt-tree] #threadTree:not(:focus) treechildren::-moz-tree-cell-text(untagged, selected),
 :root[lwt-tree] tree:not(#threadTree,:focus) treechildren::-moz-tree-cell-text(selected) {
   color: var(--sidebar-text-color);

mail/themes/windows/mail/addrbook/addressbook.css

@@ -101,12 +101,6 @@ toolbox > toolbar:last-of-type {
   }
 }
 
-/* Don't use the listbox appearance as that gives us a blue-grey top border
-   that collides with the primary toolbar border */
-#dirTree {
-  border-inline-end: 1px solid transparent;
-}
-
 /* splitters */
 
 #dirTree-splitter {