Bug 40022 - Add message size to card view.

mail/base/content/about3Pane.xhtml

@@ -301,7 +301,10 @@
               <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" />
-              <span class="date"></span>
+              <div class="date-size-container">
+                <span class="date"></span>
+                <span class="message-size"></span>
+              </div>
               <button type="button"
                       class="button icon-button icon-only tree-button-more"
                       aria-hidden="true"

mail/base/content/modules/ThreadPaneColumns.mjs

@@ -397,6 +397,20 @@ function getProperSenderForCardsView(folder) {
  * @returns {string[]}
  */
 function getDefaultColumnsForCardsView(folder) {
+  const columns = [
+    "subject",
+    "sender",
+    "date",
+    "size",
+    "tagKeys",
+    "total",
+    "unread",
+  ];
+
+  if (isOutgoing(folder)) {
+    return columns;
+  }
+
   const sender = getProperSenderForCardsView(folder);
   return [
     "subjectCol",

mail/base/content/widgets/treeview/thread-card.mjs

@@ -40,6 +40,7 @@ class ThreadCard extends TreeViewTableRow {
     this.senderLine = this.querySelector(".sender");
     this.subjectLine = this.querySelector(".subject");
     this.dateLine = this.querySelector(".date");
+    this.messageSizeLine = this.querySelector(".message-size");
     this.starButton = this.querySelector(".button-star");
     this.threadCardTagsInfo = this.querySelector(".thread-card-tags-info");
     this.tagIcons = this.querySelectorAll(".tag-icon");
@@ -68,7 +69,7 @@ class ThreadCard extends TreeViewTableRow {
     const ariaLabelPromises = [];
     // Use static mapping instead of threadPane.cardColumns since the name of
     // the sender column changes. (see getProperSenderForCardsView)
-    const KEYS = ["subject", "sender", "date", "tagKeys", "total", "unread"];
+    const KEYS = ["subject", "sender", "date", "size", "tagKeys", "total", "unread"];
     const data = Object.fromEntries(KEYS.map((key, i) => [key, cellTexts[i]]));
 
     if (threadLevel.value) {
@@ -110,6 +111,19 @@ class ThreadCard extends TreeViewTableRow {
     this.senderLine.textContent = data.sender;
     this.senderLine.title = data.sender;
     this.dateLine.textContent = data.date;
+
+    // Format and display message size
+    const sizeInBytes = Number(data.size);
+    let formattedSize;
+    if (sizeInBytes >= 1024 * 1024) {
+      formattedSize = `${(sizeInBytes / (1024 * 1024)).toFixed(1)} MB`;
+    } else if (sizeInBytes >= 1024) {
+      formattedSize = `${Math.round(sizeInBytes / 1024)} KB`;
+    } else {
+      formattedSize = `${sizeInBytes} B`;
+    }
+    this.messageSizeLine.textContent = formattedSize;
+    this.messageSizeLine.title = formattedSize;
 
     const matchedKeys = [];
     const matchedTags = [];

mail/themes/shared/mail/threadCard.css

@@ -416,9 +416,15 @@
           font-size: 0.95rem;
         }
 
-        & .date {
-          flex: 0 0 auto;
-          white-space: nowrap;
+        & .date-size-container {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-end;
+        }
+
+        & .date,
+        & .message-size {
+          color: var(--tree-cell-text-secondary);
           font-size: 0.95rem;
           opacity: 0.85;
         }