Bug 1793794 - Port bug 1792802: Fix tree column picker. r=aleca

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

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

mail/themes/linux/mail/messenger.css

@@ -391,7 +391,7 @@ treecol[sortDirection="descending"]:not([hideheader="true"]) > .treecol-sortdire
 }
 
 :root[lwt-tree] treecol:not([hideheader="true"]),
-:root[lwt-tree] treecolpicker:not([hideheader="true"]) {
+:root[lwt-tree] .tree-columnpicker-button:not([hideheader="true"]) {
   padding-inline-start: 7px;
   padding-inline-end: 6px;
 }

mail/themes/osx/mail/messenger.css

@@ -242,7 +242,7 @@ treechildren::-moz-tree-line(selected, focus) {
 /* message column icons */
 
 :root:not(:-moz-lwtheme) treecol:not([hideheader="true"]),
-:root:not(:-moz-lwtheme) treecolpicker:not([hideheader="true"]) {
+:root:not(:-moz-lwtheme) .tree-columnpicker-button:not([hideheader="true"]) {
   appearance: none;
   color: inherit;
   background-color: transparent;
@@ -255,7 +255,7 @@ treechildren::-moz-tree-line(selected, focus) {
 }
 
 :root:not(:-moz-lwtheme) treecol:hover:active,
-:root:not(:-moz-lwtheme) treecolpicker:hover:active {
+:root:not(:-moz-lwtheme) .tree-columnpicker-button:hover:active {
   background-color: ThreeDFace;
 }
 

mail/themes/shared/mail/messenger.css

@@ -149,8 +149,11 @@ p {
   -moz-box-flex: 2;
 }
 
-.tree-columnpicker-icon {
+.tree-columnpicker-button {
   list-style-image: var(--icon-column-menu);
+  padding-inline: 4px;
+  border-style: none;
+  border-radius: 0;
   -moz-context-properties: stroke, fill;
   fill: color-mix(in srgb, currentColor 20%, transparent);
   stroke: currentColor;
@@ -1067,7 +1070,7 @@ tree > treechildren::-moz-tree-image(primary, dropOn) {
 }
 
 :root:-moz-lwtheme treecol:not([hideheader="true"]),
-:root:-moz-lwtheme treecolpicker:not([hideheader="true"]) {
+:root:-moz-lwtheme .tree-columnpicker-button:not([hideheader="true"]) {
   appearance: none;
   color: inherit;
   background-color: transparent;
@@ -1083,7 +1086,7 @@ tree > treechildren::-moz-tree-image(primary, dropOn) {
 
 @media (prefers-color-scheme: dark) {
   :root:-moz-lwtheme treecol,
-  :root:-moz-lwtheme treecolpicker {
+  :root:-moz-lwtheme .tree-columnpicker-button {
     border-color: var(--splitter-color, rgba(249, 249, 250, 0.2));
   }
 
@@ -1093,13 +1096,13 @@ tree > treechildren::-moz-tree-image(primary, dropOn) {
 }
 
 :root:-moz-lwtheme treecol:hover,
-:root:-moz-lwtheme treecolpicker:hover {
+:root:-moz-lwtheme .tree-columnpicker-button:hover {
   background-color: hsla(0, 0%, 60%, 0.4);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:-moz-lwtheme treecol:hover,
-  :root:-moz-lwtheme treecolpicker:hover {
+  :root:-moz-lwtheme .tree-columnpicker-button:hover {
     background-color: rgba(249, 249, 250, 0.2);
   }
 }

mail/themes/windows/mail/messenger.css

@@ -292,12 +292,12 @@ treechildren::-moz-tree-indentation {
 
 @media (-moz-windows-classic) {
   treecol[hideheader="true"],
-  treecolpicker[hideheader="true"] {
+  .tree-columnpicker-button[hideheader="true"] {
     border-width: 0;
   }
 
   :root[lwt-tree] treecol:not([hideheader="true"]),
-  :root[lwt-tree] treecolpicker:not([hideheader="true"]) {
+  :root[lwt-tree] .tree-columnpicker-button:not([hideheader="true"]) {
     border-top-width: 0;
     border-inline-start-width: 0;
   }