Bug 1825013 - Add the spam indicator to the vertical view. r=aleca
authorRichard Marti <richard.marti@gmail.com>
Sat, 01 Apr 2023 21:04:37 +1100 (2023-04-01)
changeset 38606 4fb3fa2bae84b6ad04888b81528510377c8b5c98
parent 38605 94f546210757421a143fc4954e29f0c3035be604
child 38607 b6de385120325525b68e1c2e832b184afa860c06
push id20880
push usermkmelin@iki.fi
push dateSat, 01 Apr 2023 10:37:51 +0000 (2023-04-01)
treeherdercomm-central@b6de38512032 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersaleca
bugs1825013
Bug 1825013 - Add the spam indicator to the vertical view. r=aleca Differential Revision: https://phabricator.services.mozilla.com/D173844
mail/base/content/about3Pane.js
mail/base/content/about3Pane.xhtml
mail/themes/shared/mail/threadPane.css
--- a/mail/base/content/about3Pane.js
+++ b/mail/base/content/about3Pane.js
@@ -2967,17 +2967,17 @@ var threadPane = {
   densityChange() {
     // The class ThreadRow can't be referenced because it's declared in a
     // different scope. But we can get it from customElements.
     let rowClass = customElements.get("thread-row");
     let cardClass = customElements.get("thread-card");
     switch (UIDensity.prefValue) {
       case UIDensity.MODE_COMPACT:
         rowClass.ROW_HEIGHT = 18;
-        cardClass.ROW_HEIGHT = 38;
+        cardClass.ROW_HEIGHT = 40;
         break;
       case UIDensity.MODE_TOUCH:
         rowClass.ROW_HEIGHT = 32;
         cardClass.ROW_HEIGHT = 52;
         break;
       default:
         rowClass.ROW_HEIGHT = 26;
         cardClass.ROW_HEIGHT = 46;
--- a/mail/base/content/about3Pane.xhtml
+++ b/mail/base/content/about3Pane.xhtml
@@ -220,16 +220,19 @@
     <template id="threadPaneCardTemplate">
       <td>
         <div class="thread-card-container">
           <div class="thread-card-row">
             <span class="sender"></span>
             <img class="state replied" src="" data-l10n-id="threadpane-message-replied" />
             <img class="state forwarded" src="" data-l10n-id="threadpane-message-forwarded" />
             <img class="state redirected" src="" data-l10n-id="threadpane-message-redirected" />
+            <button class="button-spam tree-button-spam"
+                    data-l10n-id="tree-list-view-row-spam" tabindex="-1">
+            </button>
             <span class="date"></span>
           </div>
           <div class="thread-card-row">
             <div class="thread-card-subject-container">
               <button type="button"
                       class="button button-flat button-reset twisty"
                       tabindex="-1">
                 <img src="" alt="" class="twisty-icon" />
--- a/mail/themes/shared/mail/threadPane.css
+++ b/mail/themes/shared/mail/threadPane.css
@@ -420,43 +420,78 @@ tr:is([is="thread-row"], [is="thread-car
 }
 
 /* Spam column variations */
 
 #junkStatusCol img {
   content: var(--icon-spam-sm);
 }
 
-.tree-view-row-spam button {
+:is(.tree-view-row-spam button, .button-spam) {
   color: var(--tree-view-color);
   opacity: 0.8;
 }
 
 .tree-view-row-spam img {
   content: var(--icon-spam);
   pointer-events: none;
+}
+
+.button-spam {
+  background-image: var(--icon-spam);
+  -moz-context-properties: fill, stroke;
+}
+
+#threadTree tr:is(:not([data-properties~="junk"]), [data-properties~="notjunk"]) .button-spam {
+  display: none;
+}
+
+:is(.tree-view-row-spam img, .button-spam) {
   fill: color-mix(in srgb, currentColor 10%, transparent);
   stroke: color-mix(in srgb, currentColor 30%, transparent);
 }
 
 @media (prefers-color-scheme: dark) {
-  .tree-view-row-spam img {
+  :is(.tree-view-row-spam img, .button-spam) {
     stroke: color-mix(in srgb, currentColor 40%, transparent);
   }
 }
 
-tr[data-properties~="junk"] .tree-view-row-spam > .tree-button-spam > img {
+tr[data-properties~="junk"] :is(.tree-view-row-spam > .tree-button-spam > img, .button-spam) {
   fill: var(--thread-pane-spam-fill);
   stroke: var(--thread-pane-spam-stroke);
 }
 
-.tree-view-row-spam button:hover {
+:is(.tree-view-row-spam button, .button-spam):hover {
   opacity: 1;
 }
 
+/* Vertical view variations */
+#threadTree tr[data-properties~="junk"] :is(.state, .attachment-icon, .button-star) {
+  display: none;
+}
+
+#threadTree tr[data-properties~="junk"] :is(.date, .subject) {
+  color: var(--color-red-60);
+  font-weight: 600;
+}
+
+@media (prefers-color-scheme: dark) {
+  #threadTree tr[data-properties~="junk"] :is(.date, .subject) {
+    color: var(--color-red-40);
+  }
+}
+
+#threadTree [is="tree-view-table-body"]:focus >
+  .selected[data-properties~="junk"] :is(.date, .subject),
+#threadTree [is="tree-view-table-body"] >
+  .selected[data-properties~="junk"]:focus-within :is(.date, .subject) {
+  color: inherit;
+}
+
 /* Delete column variations */
 /* TODO: Handle delete button color variations for tagged messages */
 
 /* Correspondent column variations */
 
 #correspondentColButton,
 .correspondentcol-column {
   text-indent: 18px;