Bug 1638720 - Implement the hover state for all tree rows on Linux and Mac. r=aleca
authorRichard Marti <richard.marti@gmail.com>
Thu, 28 May 2020 22:05:06 +0300
changeset 39266 4b3e05877240dcc0d92db39a5098d17fa65690ca
parent 39265 7cd276439a22d4447a1da22d0711ff74015596c5
child 39267 f08360126dafebb18534edd9e28caf89666a2863
push id402
push userclokep@gmail.com
push dateMon, 29 Jun 2020 20:48:04 +0000
reviewersaleca
bugs1638720
Bug 1638720 - Implement the hover state for all tree rows on Linux and Mac. r=aleca
mail/themes/linux/mail/mailWindow1.css
mail/themes/osx/mail/mailWindow1.css
mail/themes/osx/mail/messenger.css
mail/themes/shared/mail/messageIcons.css
mail/themes/shared/mail/messenger.css
--- a/mail/themes/linux/mail/mailWindow1.css
+++ b/mail/themes/linux/mail/mailWindow1.css
@@ -120,16 +120,21 @@ menu > #folderLocationPopup > menuitem >
 #threadTree > treechildren::-moz-tree-row(odd) {
   background-color: transparent;
 }
 
 #threadTree > treechildren::-moz-tree-row(dummy, odd) {
   background-color: var(--row-grouped-header-bg-color);
 }
 
+#threadTree > treechildren::-moz-tree-row(odd, hover),
+#threadTree > treechildren::-moz-tree-row(dummy, odd, hover) {
+  background-color: hsla(0, 0%, 50%, 0.15);
+}
+
 #threadTree > treechildren::-moz-tree-row(selected) {
   color: -moz-cellhighlighttext;
   background-color: -moz-cellhighlight;
 }
 
 #threadTree > treechildren::-moz-tree-row(selected, focus) {
   color: HighlightText;
   background-color: Highlight;
--- a/mail/themes/osx/mail/mailWindow1.css
+++ b/mail/themes/osx/mail/mailWindow1.css
@@ -46,16 +46,20 @@
 }
 
 #folderTree treechildren::-moz-tree-row {
   padding-inline-start: 2px !important;
   padding-bottom: 2px;
   background: transparent;
 }
 
+#folderTree treechildren::-moz-tree-row(hover) {
+  background-color: hsla(0, 0%, 50%, 0.15);
+}
+
 :root:not([lwt-tree]) #folderTree treechildren::-moz-tree-row(selected) {
   -moz-appearance: -moz-mac-source-list-selection;
   -moz-font-smoothing-background-color: -moz-mac-source-list-selection;
 }
 
 @media (-moz-mac-yosemite-theme: 0) {
   :root:not([lwt-tree]) #folderTree treechildren::-moz-tree-row(selected, focus) {
     -moz-appearance: -moz-mac-active-source-list-selection;
--- a/mail/themes/osx/mail/messenger.css
+++ b/mail/themes/osx/mail/messenger.css
@@ -487,16 +487,20 @@ treechildren::-moz-tree-cell-text {
 treecol.treecol-image:hover:active {
   padding-inline-start: 1px;
 }
 
 :root[lwt-tree] treechildren::-moz-tree-row(odd) {
   background-color: transparent;
 }
 
+:root[lwt-tree] treechildren::-moz-tree-row(odd, hover) {
+  background-color: hsla(0, 0%, 50%, 0.15);
+}
+
 :root[lwt-tree] #threadTree treechildren::-moz-tree-row(untagged, selected),
 :root[lwt-tree] tree:not(#threadTree) treechildren::-moz-tree-row(selected),
 :root[lwt-tree]:-moz-window-inactive #threadTree treechildren::-moz-tree-row(selected) {
   border-color: var(--sidebar-highlight-background-color, hsla(0,0%,80%,.3));
   background: var(--sidebar-highlight-background-color, hsla(0,0%,80%,.3));
 }
 
 :root[lwt-tree-brighttext] #threadTree treechildren::-moz-tree-row(untagged, selected),
--- a/mail/themes/shared/mail/messageIcons.css
+++ b/mail/themes/shared/mail/messageIcons.css
@@ -51,26 +51,20 @@ treechildren::-moz-tree-image(selectCol,
 
 .deleteColumnHeader {
   list-style-image: url("chrome://messenger/skin/icons/delete-col.svg");
 }
 
 treechildren::-moz-tree-image(deleteCol) {
   list-style-image: url("chrome://messenger/skin/icons/delete.svg");
   fill: currentColor;
-  opacity: 0.3;
+  opacity: 0.5;
   width: 14px;
 }
 
-treechildren::-moz-tree-image(deleteCol, hover),
-treechildren::-moz-tree-image(deleteCol, selected),
-treechildren::-moz-tree-image(deleteCol, imapdeleted) {
-  opacity: 0.6;
-}
-
 treechildren::-moz-tree-image(deleteCol, imapdeleted) {
   list-style-image: url("chrome://messenger/skin/icons/restore.svg");
 }
 
 treechildren::-moz-tree-image(deleteCol, selected, focus) {
   fill: var(--select-focus-text-color);
 }
 
--- a/mail/themes/shared/mail/messenger.css
+++ b/mail/themes/shared/mail/messenger.css
@@ -44,16 +44,28 @@
      mailGlue.js */
   --autocomplete-popup-background: #2a2a2e !important;
   --autocomplete-popup-highlight-background: #0060df;
 
   /* composer header fields bottom border */
   --composer-header-border-color: rgb(127, 127, 128);
 }
 
+treechildren::-moz-tree-row(hover) {
+  background-color: hsla(0, 0%, 50%, 0.15);
+}
+
+treechildren::-moz-tree-row(selected) {
+  background-color: -moz-cellhighlight;
+}
+
+treechildren::-moz-tree-row(selected, focus) {
+  background-color: Highlight;
+}
+
 /* Make the new mail indicator better visible on dark theme */
 :root[lwt-default-theme-in-dark-mode] #folderTree:-moz-lwtheme-brighttext
   treechildren::-moz-tree-cell-text(folderNameCol, isServer-true, biffState-NewMail),
 :root[lwt-default-theme-in-dark-mode] #folderTree:-moz-lwtheme-brighttext
   treechildren::-moz-tree-cell-text(folderNameCol, newMessages-true),
 :root[lwt-default-theme-in-dark-mode] #folderTree:-moz-lwtheme-brighttext
   treechildren::-moz-tree-cell-text(folderNameCol, specialFolder-Inbox, newMessages-true) {
   color: #0aa5ff !important;