Bug 1880835 - Update table row height/density to be font size dependant. r=aleca,freaktechnik

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

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

mail/base/content/about3Pane.js

@@ -4525,12 +4525,12 @@ var threadPane = {
     const currentFontSize = UIFontSize.size;
     const cardRows = 3;
     const cardRowConstant = Math.round(1.43 * cardRows * currentFontSize); // subject line-height * line-height * cardRows * current font-size
+    let rowHeight = Math.ceil(currentFontSize * 1.4);
     let lineGap;
     let densityPaddingConstant;
     let cardRowHeight;
     switch (UIDensity.prefValue) {
       case UIDensity.MODE_COMPACT:
-        rowClass.ROW_HEIGHT = 18;
         // Calculation based on card components:
         lineGap = 1;
         densityPaddingConstant = 3; // card padding-block + 2 * row padding-block
@@ -4538,14 +4538,14 @@ var threadPane = {
           cardRowConstant + lineGap * cardRows + densityPaddingConstant;
         break;
       case UIDensity.MODE_TOUCH:
-        rowClass.ROW_HEIGHT = 30;
+        rowHeight = rowHeight + 13;
         lineGap = 6;
         densityPaddingConstant = 12; // card padding-block + 2 * row padding-block
         cardRowHeight =
           cardRowConstant + lineGap * cardRows + densityPaddingConstant;
         break;
       default:
-        rowClass.ROW_HEIGHT = 24;
+        rowHeight = rowHeight + 7;
         lineGap = 3;
         densityPaddingConstant = 7; // card padding-block + 2 * row padding-block
         cardRowHeight =
@@ -4553,6 +4553,7 @@ var threadPane = {
         break;
     }
     cardClass.ROW_HEIGHT = Math.max(cardRowHeight, 50);
+    rowClass.ROW_HEIGHT = Math.max(rowHeight, 18);
   },
 
   /**

mail/themes/shared/mail/threadPane.css

@@ -379,9 +379,9 @@ tr[is="thread-row"] {
   & .subject-line {
     margin-inline-start: calc(16px * var(--thread-level));
     pointer-events: none;
-    /* Line height px exception to avoid vertical cut off of characters. This
+    /* To avoid vertical cut off of characters, JS in about3Pane's densityChange
-       should follow and match the density variation height of the row. */
+      that needs to be updated if line height value is changed.*/
-    line-height: 22px;
+    line-height: 1.4;
 
     & img {
       visibility: hidden;

mail/themes/shared/mail/tree-listbox.css

@@ -4,7 +4,7 @@
 
 :root {
   --listbox-selected-outline: none;
-  --tree-header-table-height: 30px;
+  --tree-header-table-height: calc(round(up, 1.7em, 1px) + 7px);
   --tree-header-cell-padding: 6px;
   --tree-header-cell-indent: 0;
   --list-item-min-height: 26px;
@@ -15,7 +15,7 @@
   --table-row-cell-button-margin-inline-start: 4px;
 
   &[uidensity="compact"] {
-    --tree-header-table-height: 27px;
+    --tree-header-table-height: max(27px, round(up, 1.4em, 1px));
     --tree-header-cell-padding: 3px;
     --tree-header-cell-indent: 3px;
     --list-item-min-height: 18px;
@@ -28,7 +28,7 @@
   }
 
   &[uidensity="touch"] {
-    --tree-header-table-height: 36px;
+    --tree-header-table-height: calc(round(up, 2em, 1px) + 13px);
     --tree-header-cell-padding: 9px;
     --tree-header-cell-indent: -3px;
     --list-item-min-height: 32px;