Bug 1537729 - remove grid usage from msgHdrView.inc.xul draft
authorKhushil Mistry <khushil324@gmail.com>
Thu, 19 Sep 2019 00:46:29 +0530
changeset 78979 f6eb1bec195f6d981af3c10bf44d62d16f86b47d
parent 78965 2391a7f951eb85e29868d31d8018827b3d25a70b
child 78980 9c1b195d6730bbd5076bfb9a681dbc815f54bae3
push id9328
push userkhushil324@gmail.com
push dateWed, 18 Sep 2019 19:16:46 +0000
treeherdertry-comm-central@9c1b195d6730 [default view] [failures only]
bugs1537729
Bug 1537729 - remove grid usage from msgHdrView.inc.xul
mail/base/content/mailWidgets.js
mail/base/content/messageWindow.xul
mail/base/content/messenger.xul
mail/base/content/msgHdrView.inc.xul
mail/base/content/msgHdrView.js
mail/test/mozmill/message-header/test-message-header.js
mail/themes/linux/mail/messageHeader.css
mail/themes/osx/mail/messageHeader.css
mail/themes/shared/mail/messageHeader.css
mail/themes/windows/mail/messageHeader.css
--- a/mail/base/content/mailWidgets.js
+++ b/mail/base/content/mailWidgets.js
@@ -1191,22 +1191,22 @@
       // Causes different CSS selectors to be used, which allows all of the addresses to be properly
       // displayed and wrapped.
       this.longEmailAddresses.removeAttribute("singleline");
 
       this.clearChildNodes();
 
       // Re-render the node, this time with all the addresses.
       this._fillAddressesNode(true);
-      // Compute height of 'expandedHeaderView' from 'expandedHeadersBox'.
       document
         .getElementById("expandedHeaderView")
         .setAttribute(
           "height",
-          document.getElementById("expandedHeadersBox").clientHeight
+          document.getElementById("expandedHeadersTopBox").clientHeight +
+            document.getElementById("expandedHeaders2").clientHeight
         );
       // This attribute will be reinit in the 'UpdateExpandedMessageHeaders()' method.
     }
 
     /**
      * Clears both our divs.
      */
     clearChildNodes() {
--- a/mail/base/content/messageWindow.xul
+++ b/mail/base/content/messageWindow.xul
@@ -55,16 +55,17 @@
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         xmlns:html="http://www.w3.org/1999/xhtml"
         icon="messengerWindow"
         title="&titledefault.label;@PRE_RELEASE_SUFFIX@"
         titlemodifier="&titledefault.label;@PRE_RELEASE_SUFFIX@"
         titlemenuseparator="&titleSeparator.label;"
         onload="OnLoadMessageWindow()"
         onunload="OnUnloadMessageWindow()"
+        onresize="OnResizeExpandedHeaderView()"
         persist="width height screenX screenY sizemode"
         toggletoolbar="true"
         windowtype="mail:messageWindow"
         macanimationtype="document"
         lightweightthemes="true"
         fullscreenbutton="true">
 
   <stringbundleset id="stringbundleset">
--- a/mail/base/content/messenger.xul
+++ b/mail/base/content/messenger.xul
@@ -71,16 +71,17 @@
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         icon="messengerWindow"
         title="&titledefault.label;@PRE_RELEASE_SUFFIX@"
         titlemodifier="&titledefault.label;@PRE_RELEASE_SUFFIX@"
         titlemenuseparator="&titleSeparator.label;"
         defaultTabTitle="&defaultTabTitle.label;"
         onload="OnLoadMessenger()"
         onunload="OnUnloadMessenger()"
+        onresize="OnResizeExpandedHeaderView()"
         screenX="10" screenY="10"
         persist="width height screenX screenY sizemode"
         toggletoolbar="true"
         windowtype="mail:3pane"
         macanimationtype="document"
         lightweightthemes="true"
         fullscreenbutton="true">
 
--- a/mail/base/content/msgHdrView.inc.xul
+++ b/mail/base/content/msgHdrView.inc.xul
@@ -10,17 +10,17 @@
 
                             <!-- a convenience box for ease of extension overlaying -->
                             <vbox id="expandedHeadersBox" flex="1">
 
                               <!-- This hbox has display:block set to imbue it with the HTML layout
                                    model. This lets us float the message header toolbar to the right
                                    so we don't waste space when the From field and the toolbar could
                                    fit alongside each other. -->
-                              <hbox id="expandedHeadersTopBox" flex="1">
+                              <hbox id="expandedHeadersTopBox">
 
                                 <vbox id="header-view-toolbox" class="inline-toolbox">
                                   <hbox id="header-view-toolbar" class="toolbar">
                                     <!-- XXXdmose need to move these commands to a controller, either
                                          on the header view, the message pane, or the default
                                          controller -->
 
                                     <!-- XXXdmose need to audit our shortcut/a11y setup and make sure
@@ -216,153 +216,203 @@
                                 <box id="expandedBoxSpacer"/>
 
                                 <!-- Theoretically, we should be able to replace this grid with just
                                      an hbox.  Unfortunately, doing that makes it very hard to sync
                                      the column sizes between the name columns, because for currently
                                      unclear reasons, the .clientWidth of a column is wider than the
                                      .clientWidth of its largest contained child by an unspecified
                                      amount. -->
-                                <grid id="expandedHeaders">
-
-                                  <columns id="expandedHeadersColumns">
-                                    <column id="expandedHeadersNameColumn"/>
-                                    <column id="expandedHeadersValueColumn" flex="1"/>
-                                  </columns>
-
-                                  <rows id="expandedHeaderRows">
-                                    <row id="expandedfromRow">
+                                <html:table id="expandedHeaders">
+                                  <html:tr id="expandedfromRow">
+                                    <html:th id="expandedfromTableHeader">
                                       <label id="expandedfromLabel" class="headerName"
                                              value="&fromField4.label;"
                                              valueFrom="&fromField4.label;" valueAuthor="&author.label;"
                                              control="expandedfromBox"/>
-                                      <mail-multi-emailheaderfield id="expandedfromBox" flex="1"/>
-                                    </row>
-                                  </rows>
-                                </grid>
+                                    </html:th>
+                                    <html:td>
+                                      <mail-multi-emailheaderfield id="expandedfromBox"/>
+                                    </html:td>
+                                  </html:tr>
+                                </html:table>
                               </hbox>
 
                               <hbox id="expandedHeadersBottomBox">
 
                                 <!-- The grid that contains all headers except the first one,
                                       including any headers created dynamically from JavaScript -->
-                                <grid id="expandedHeaders2" flex="1">
-
-                                  <columns id="expandedHeaders2Columns">
-                                    <column id="expandedHeaders2NameColumn"/>
-                                    <column id="expandedHeaders2ValueColumn" flex="1"/>
-                                  </columns>
-
-                                  <rows id="expandedHeader2Rows">
-
+                                <html:table id="expandedHeaders2">
                                     <!-- Commonly used rows are pre-specified in the XUL to avoid the
                                          performance hit of creating them dynamically. -->
-                                    <row id="expandedsubjectRow">
+                                  <html:tr id="expandedsubjectRow">
+                                    <html:th id="expandedsubjectTableHeader">
                                       <label id="expandedsubjectLabel" class="headerName"
                                              value="&subjectField4.label;"
                                              control="expandedsubjectBox"/>
-                                      <mail-headerfield id="expandedsubjectBox" flex="1"
+                                    </html:th>
+                                    <html:td>
+                                      <mail-headerfield id="expandedsubjectBox"
                                                         headerName="subject"/>
-                                    </row>
-                                    <row id="expandedorganizationRow" collapsed="true">
+                                    </html:td>
+                                  </html:tr>
+                                  <html:tr id="expandedorganizationRow" hidden="hidden">
+                                    <html:th>
                                       <label id="expandedorganizationLabel" class="headerName"
                                              value="&organizationField4.label;"
                                              control="expandedorganizationBox"/>
+                                    </html:th>
+                                    <html:td>
                                       <mail-headerfield id="expandedorganizationBox"/>
-                                    </row>
-                                    <row id="expandedsenderRow" collapsed="true">
+                                    </html:td>
+                                  </html:tr>
+                                  <html:tr id="expandedsenderRow" hidden="hidden">
+                                    <html:th>
                                       <label id="expandedsenderLabel" class="headerName"
                                              value="&senderField4.label;" control="expandedsenderBox"/>
+                                    </html:th>
+                                    <html:td>
                                       <mail-emailheaderfield id="expandedsenderBox"/>
-                                    </row>
-                                    <row id="expandedreply-toRow" collapsed="true">
+                                    </html:td>
+                                  </html:tr>
+                                  <html:tr id="expandedreply-toRow">
+                                    <html:th>
                                       <label id="expandedreply-toLabel" class="headerName"
                                              value="&replyToField4.label;"
                                              control="expandedreply-toBox"/>
+                                    </html:th>
+                                    <html:td>
                                       <mail-multi-emailheaderfield id="expandedreply-toBox"/>
-                                    </row>
-                                    <row id="expandedtoRow" collapsed="true">
+                                    </html:td>
+                                  </html:tr>
+                                  <html:tr id="expandedtoRow">
+                                    <html:th>
                                       <label id="expandedtoLabel" class="headerName"
                                              value="&toField4.label;" control="expandedtoBox"/>
-                                      <mail-multi-emailheaderfield id="expandedtoBox" flex="1"/>
-                                    </row>
-                                    <row id="expandedccRow" collapsed="true">
+                                    </html:th>
+                                    <html:td>
+                                      <mail-multi-emailheaderfield id="expandedtoBox"/>
+                                    </html:td>
+                                  </html:tr>
+                                  <html:tr id="expandedccRow">
+                                    <html:th>
                                       <label id="expandedccLabel" class="headerName"
                                              value="&ccField4.label;" control="expandedccBox"/>
-                                      <mail-multi-emailheaderfield id="expandedccBox" flex="1"/>
-                                    </row>
-                                    <row id="expandedbccRow" collapsed="true">
+                                    </html:th>
+                                    <html:td>
+                                      <mail-multi-emailheaderfield id="expandedccBox"/>
+                                    </html:td>
+                                  </html:tr>
+                                  <html:tr id="expandedbccRow">
+                                    <html:th>
                                       <label id="expandedbccLabel" class="headerName"
                                              value="&bccField4.label;" control="expandedbccBox"/>
+                                    </html:th>
+                                    <html:td>
                                       <mail-multi-emailheaderfield id="expandedbccBox"/>
-                                    </row>
-                                    <row id="expandednewsgroupsRow" collapsed="true">
+                                    </html:td>
+                                  </html:tr>
+                                  <html:tr id="expandednewsgroupsRow" hidden="hidden">
+                                    <html:th>
                                       <label id="expandednewsgroupsLabel" class="headerName"
                                              value="&newsgroupsField4.label;"
                                              control="expandednewsgroupsBox"/>
-                                      <mail-newsgroups-headerfield id="expandednewsgroupsBox" flex="1"/>
-                                    </row>
-                                    <row id="expandedfollowup-toRow" collapsed="true">
+                                    </html:th>
+                                    <html:td>
+                                      <mail-newsgroups-headerfield id="expandednewsgroupsBox"/>
+                                    </html:td>
+                                  </html:tr>
+                                  <html:tr id="expandedfollowup-toRow" hidden="hidden">
+                                    <html:th>
                                       <label id="expandedfollowup-toLabel" class="headerName"
                                              value="&followupToField4.label;"
                                              control="expandedfollowup-toBox"/>
-                                      <mail-newsgroups-headerfield id="expandedfollowup-toBox" flex="1"/>
-                                    </row>
-                                    <row id="expandeddateRow" collapsed="true">
+                                    </html:th>
+                                    <html:td>
+                                      <mail-newsgroups-headerfield id="expandedfollowup-toBox"/>
+                                    </html:td>
+                                  </html:tr>
+                                  <html:tr id="expandeddateRow" hidden="hidden">
+                                    <html:th>
                                       <label id="expandeddateLabel" class="headerName"
                                              value="&dateField4.label;" control="expandeddateBox"/>
-                                      <mail-headerfield id="expandeddateBox" flex="1"/>
-                                    </row>
-                                    <row id="expandedmessage-idRow" collapsed="true">
+                                    </html:th>
+                                    <html:td>
+                                      <mail-headerfield id="expandeddateBox"/>
+                                    </html:td>
+                                  </html:tr>
+                                  <html:tr id="expandedmessage-idRow" hidden="hidden">
+                                    <html:th>
                                       <label id="expandedmessage-idLabel" class="headerName"
                                              value="&messageIdField4.label;"
                                              control="expandedmessage-idBox"/>
+                                    </html:th>
+                                    <html:td>
                                       <mail-messageids-headerfield id="expandedmessage-idBox"/>
-                                    </row>
-                                    <row id="expandedin-reply-toRow" collapsed="true">
+                                    </html:td>
+                                  </html:tr>
+                                  <html:tr id="expandedin-reply-toRow" hidden="hidden">
+                                    <html:th>
                                       <label id="expandedin-reply-toLabel" class="headerName"
                                              value="&inReplyToField4.label;"
                                              control="expandedin-reply-toBox"/>
+                                    </html:th>
+                                    <html:td>
                                       <mail-messageids-headerfield id="expandedin-reply-toBox"/>
-                                    </row>
-                                    <row id="expandedreferencesRow" collapsed="true">
+                                    </html:td>
+                                  </html:tr>
+                                  <html:tr id="expandedreferencesRow" hidden="hidden">
+                                    <html:th>
                                       <label id="expandedreferencesLabel" class="headerName"
                                              value="&referencesField4.label;"
                                              control="expandedreferencesBox"/>
-                                      <mail-messageids-headerfield id="expandedreferencesBox"
-                                                                   flex="1"/>
-                                    </row>
-                                    <row id="expandedtagsRow" collapsed="true">
+                                    </html:th>
+                                    <html:td>
+                                      <mail-messageids-headerfield id="expandedreferencesBox"/>
+                                    </html:td>
+                                  </html:tr>
+                                  <html:tr id="expandedtagsRow" hidden="hidden">
+                                    <html:th>
                                       <label id="expandedtagsLabel" class="headerName"
                                              value="&tagsHdr4.label;" control="expandedtagsBox"/>
+                                    </html:th>
+                                    <html:td>
                                       <mail-tagfield id="expandedtagsBox"/>
-                                    </row>
-                                    <row id="expandedcontent-baseRow" collapsed="true">
+                                    </html:td>
+                                  </html:tr>
+                                  <html:tr id="expandedcontent-baseRow" hidden="hidden">
+                                    <html:th>
                                       <label id="expandedcontent-baseLabel" class="headerName"
                                              value="&originalWebsite4.label;"
                                              control="expandedcontent-baseBox"/>
+                                    </html:th>
+                                    <html:td>
                                       <mail-urlfield id="expandedcontent-baseBox"/>
-                                    </row>
-                                    <row id="expandeduser-agentRow" collapsed="true">
+                                    </html:td>
+                                  </html:tr>
+                                  <html:tr id="expandeduser-agentRow" hidden="hidden">
+                                    <html:th>
                                       <label id="expandeduser-agentLabel" class="headerName"
                                              value="&userAgentField4.label;"
                                              control="expandeduser-agentBox"/>
-                                      <mail-headerfield id="expandeduser-agentBox" flex="1"/>
-                                    </row>
-                                  </rows>
-                                </grid>
+                                    </html:th>
+                                    <html:td>
+                                      <mail-headerfield id="expandeduser-agentBox"/>
+                                    </html:td>
+                                  </html:tr>
+                                </html:table>
 
                                 <!-- perhaps this should be a customizable toolbar too -->
                                 <vbox id="otherActionsBox" align="end">
                                   <hbox id="dateValueBox" align="top" flex="1">  <!--For extensions-->
                                     <hbox id="smimeBox" insertbefore="dateLabel" collapsed="true">
                                       <image id="signedHdrIcon"
-                                            onclick="showMessageReadSecurityInfo();" collapsed="true"/>
+                                             onclick="showMessageReadSecurityInfo();" collapsed="true"/>
                                       <image id="encryptedHdrIcon"
-                                            onclick="showMessageReadSecurityInfo();" collapsed="true"/>
+                                             onclick="showMessageReadSecurityInfo();" collapsed="true"/>
                                     </hbox>
                                     <label id="dateLabel" class="dateLabel" flex="1" role="textbox"
                                            aria-readonly="true"/>
                                   </hbox>
                                 </vbox>
                               </hbox>
                             </vbox>
                           </vbox>
--- a/mail/base/content/msgHdrView.js
+++ b/mail/base/content/msgHdrView.js
@@ -333,16 +333,28 @@ function OnUnloadMsgHeaderPane() {
   // dispatch an event letting any listeners know that we have unloaded
   // the message pane
   var headerViewElement = document.getElementById("msgHeaderView");
   headerViewElement.dispatchEvent(
     new Event("messagepane-unloaded", { bubbles: false, cancelable: true })
   );
 }
 
+function OnResizeExpandedHeaderView() {
+  if (document.getElementById("expandedHeaderView")) {
+    document
+      .getElementById("expandedHeaderView")
+      .setAttribute(
+        "height",
+        document.getElementById("expandedHeadersTopBox").clientHeight +
+          document.getElementById("expandedHeaders2").clientHeight
+      );
+  }
+}
+
 var MsgHdrViewObserver = {
   observe(subject, topic, prefName) {
     // verify that we're changing the mail pane config pref
     if (topic == "nsPref:changed") {
       if (prefName == "mail.showCondensedAddresses") {
         gShowCondensedEmailAddresses = Services.prefs.getBoolPref(
           "mail.showCondensedAddresses"
         );
@@ -893,17 +905,17 @@ function OnTagsChange() {
       if (headerEntry.valid) {
         headerEntry.outputFunction(
           headerEntry,
           currentHeaderData.tags.headerValue
         );
       }
 
       // we may need to collapse or show the tag header row...
-      headerEntry.enclosingRow.collapsed = !headerEntry.valid;
+      headerEntry.enclosingRow.toggleAttribute("hidden", !headerEntry.valid);
       // ... and ensure that all headers remain correctly aligned
       syncGridColumnWidths();
     }
   }
 }
 
 /**
  * Flush out any local state being held by a header entry for a given table.
@@ -924,34 +936,29 @@ function ClearHeaderView(aHeaderTable) {
 /**
  * Make sure that any valid header entry in the table is collapsed.
  *
  * @param aHeaderTable Table of header entries
  */
 function hideHeaderView(aHeaderTable) {
   for (let name in aHeaderTable) {
     let headerEntry = aHeaderTable[name];
-    headerEntry.enclosingRow.collapsed = true;
+    headerEntry.enclosingRow.setAttribute("hidden", "hidden");
   }
 }
 
 /**
  * Make sure that any valid header entry in the table specified is visible.
  *
  * @param aHeaderTable Table of header entries
  */
 function showHeaderView(aHeaderTable) {
   for (let name in aHeaderTable) {
     let headerEntry = aHeaderTable[name];
-    if (headerEntry.valid) {
-      headerEntry.enclosingRow.collapsed = false;
-    } else {
-      // if the entry is invalid, always make sure it's collapsed
-      headerEntry.enclosingRow.collapsed = true;
-    }
+    headerEntry.enclosingRow.toggleAttribute("hidden", !headerEntry.valid);
   }
 }
 
 /**
  * Enumerate through the list of headers and find the number that are visible
  * add empty entries if we don't have the minimum number of rows.
  */
 function EnsureMinimumNumberOfHeaders(headerTable) {
@@ -1026,29 +1033,31 @@ function updateExpandedView() {
 }
 
 /**
  * Ensure that the name columns in both grids are the same size, since the only
  * reason that we're using two grids at all is to workaround the XUL box
  * model's inability to float elements.
  */
 function syncGridColumnWidths() {
-  let nameColumn = document.getElementById("expandedHeadersNameColumn");
-  let nameColumn2 = document.getElementById("expandedHeaders2NameColumn");
+  let fromTH = document.getElementById("expandedfromTableHeader");
+  let subjectTH = document.getElementById("expandedsubjectTableHeader");
 
   // Reset the minimum widths to 0 so that clientWidth will return the
   // preferred intrinsic width of each column.
-  nameColumn.minWidth = nameColumn2.minWidth = 0;
+  fromTH.style.minWidth = subjectTH.style.minWidth = "0px";
 
   // Set minWidth on the smaller of the two columns to be the width of the
   // larger of the two.
-  if (nameColumn.clientWidth > nameColumn2.clientWidth) {
-    nameColumn2.minWidth = nameColumn.clientWidth;
-  } else if (nameColumn.clientWidth < nameColumn2.clientWidth) {
-    nameColumn.minWidth = nameColumn2.clientWidth;
+  if (fromTH.clientWidth > subjectTH.clientWidth) {
+    subjectTH.style.minWidth = fromTH.clientWidth + "px";
+    fromTH.style.minWidth = subjectTH.style.minWidth;
+  } else if (fromTH.clientWidth < subjectTH.clientWidth) {
+    fromTH.style.minWidth = subjectTH.clientWidth + "px";
+    subjectTH.style.minWidth = fromTH.style.minWidth;
   }
 }
 
 /**
  * Default method for updating a header value into a header entry
  *
  * @param aHeaderEntry  A single header from currentHeaderData
  * @param aHeaderValue  The new value for headerEntry
@@ -1069,37 +1078,47 @@ function HeaderView(headerName, label) {
   headerName = headerName.toLowerCase();
   let rowId = "expanded" + headerName + "Row";
   let idName = "expanded" + headerName + "Box";
   let newHeaderNode;
   // If a row for this header already exists, do not create another one.
   let newRowNode = document.getElementById(rowId);
   if (!newRowNode) {
     // Create new collapsed row.
-    newRowNode = document.createXULElement("row");
+    newRowNode = document.createElementNS("http://www.w3.org/1999/xhtml", "tr");
     newRowNode.setAttribute("id", rowId);
-    newRowNode.collapsed = true;
+    newRowNode.setAttribute("hidden", "hidden");
 
     // Create and append the label which contains the header name.
     let newLabelNode = document.createXULElement("label");
     newLabelNode.setAttribute("id", "expanded" + headerName + "Label");
     newLabelNode.setAttribute("value", label);
     newLabelNode.setAttribute("class", "headerName");
     newLabelNode.setAttribute("control", idName);
-    newRowNode.appendChild(newLabelNode);
+    let newTHNode = document.createElementNS(
+      "http://www.w3.org/1999/xhtml",
+      "th"
+    );
+    newTHNode.appendChild(newLabelNode);
+    newRowNode.appendChild(newTHNode);
 
     // Create and append the new header value.
     newHeaderNode = document.createXULElement("mail-headerfield");
     newHeaderNode.setAttribute("id", idName);
     newHeaderNode.setAttribute("flex", "1");
-
-    newRowNode.appendChild(newHeaderNode);
+    let newTDNode = document.createElementNS(
+      "http://www.w3.org/1999/xhtml",
+      "td"
+    );
+    newTDNode.appendChild(newHeaderNode);
+
+    newRowNode.appendChild(newTDNode);
 
     // This new element needs to be inserted into the view...
-    let topViewNode = document.getElementById("expandedHeader2Rows");
+    let topViewNode = document.getElementById("expandedHeaders2");
     topViewNode.appendChild(newRowNode);
     this.isNewHeader = true;
   } else {
     newHeaderNode = document.getElementById(idName);
     this.isNewHeader = false;
   }
 
   this.enclosingBox = newHeaderNode;
--- a/mail/test/mozmill/message-header/test-message-header.js
+++ b/mail/test/mozmill/message-header/test-message-header.js
@@ -125,18 +125,18 @@ function get_last_visible_address(aAddrs
 function test_add_tag_with_really_long_label() {
   be_in_folder(folder);
 
   // select the first message, which will display it
   let curMessage = select_click_row(0);
 
   assert_selected_and_displayed(mc, curMessage);
 
-  let topColumn = mc.eid("expandedHeadersNameColumn").node;
-  let bottomColumn = mc.eid("expandedHeaders2NameColumn").node;
+  let topColumn = mc.eid("expandedfromTableHeader").node;
+  let bottomColumn = mc.eid("expandedsubjectTableHeader").node;
 
   if (topColumn.clientWidth != bottomColumn.clientWidth) {
     throw new Error(
       "Header columns have different widths!  " +
         topColumn.clientWidth +
         " != " +
         bottomColumn.clientWidth
     );
@@ -163,18 +163,17 @@ function test_add_tag_with_really_long_l
       "Header columns changed width!  " +
         topColumn.clientWidth +
         " != " +
         defaultWidth
     );
   }
 
   // Add the first tag, and make sure that the label are the same length.
-  mc.keypress(mc.eid("expandedHeadersNameColumn"), "1", {});
-
+  mc.keypress(mc.eid("expandedfromTableHeader"), "1", {});
   if (topColumn.clientWidth != bottomColumn.clientWidth) {
     tagsLabel.value = oldTagsValue;
     throw new Error(
       "Header columns have different widths!  " +
         topColumn.clientWidth +
         " != " +
         bottomColumn.clientWidth
     );
@@ -187,18 +186,18 @@ function test_add_tag_with_really_long_l
         " == " +
         defaultWidth
     );
   }
 
   // Remove the tag and put it back so that the a11y label gets regenerated
   // with the normal value rather than "taaaaaaaags"
   tagsLabel.value = oldTagsValue;
-  mc.keypress(mc.eid("expandedHeadersNameColumn"), "1", {});
-  mc.keypress(mc.eid("expandedHeadersNameColumn"), "1", {});
+  mc.keypress(mc.eid("expandedfromTableHeader"), "1", {});
+  mc.keypress(mc.eid("expandedfromTableHeader"), "1", {});
 }
 
 /**
  * @param headerName used for pretty-printing in exceptions
  * @param headerValueElement  Function returning the DOM element
  *                            with the data.
  * @param expectedName  Function returning the expected value of
  *                      nsIAccessible.name for the DOM element in question
@@ -446,16 +445,17 @@ function test_more_button_with_many_reci
   // Check the mode of the header.
   let headerBox = mc.eid("expandedHeaderView");
   let previousHeaderMode = headerBox.node.getAttribute("show_header_mode");
 
   // Click the "more" button.
   let moreIndicator = mc.window.document.getElementById("expandedccBox").more;
   moreIndicator = new elementslib.Elem(moreIndicator);
   mc.click(moreIndicator);
+  mc.sleep(60000);
 
   // Check the new mode of the header.
   if (headerBox.node.getAttribute("show_header_mode") != "all") {
     throw new Error(
       "Header Mode didn't change to 'all'!  old=" +
         previousHeaderMode +
         ", new=" +
         headerBox.node.getAttribute("show_header_mode")
@@ -757,17 +757,17 @@ function test_that_msg_without_date_clea
   wait_for_message_display_completion(mc);
   assert_selected_and_displayed(mc, curMessage);
 
   // Since we didn't give create_message an argument that would create a
   // Newsgroups header, the newsgroups <row> element should be collapsed.
   // However, since the previously displayed message _did_ have such a header,
   // certain bugs in the display of this header could cause the collapse
   // never to have happened.
-  if (!mc.e("expandednewsgroupsRow").collapsed) {
+  if (!mc.e("expandednewsgroupsRow").hasAttribute("hidden")) {
     throw new Error(
       "Expected <row> element for Newsgroups header to be " +
         "collapsed, but it wasn't\n!"
     );
   }
 }
 
 /**
--- a/mail/themes/linux/mail/messageHeader.css
+++ b/mail/themes/linux/mail/messageHeader.css
@@ -190,25 +190,24 @@
   list-style-image: url("chrome://messenger/skin/icons/save.svg");
 }
 
 .headerName {
   color: #888a85; /* lower contrast */
   text-align: right;
   background-color: transparent;
   padding: 0px;
-  margin-top: 0;
   margin-inline-end: 3px;
 }
 
 .headerValue {
   min-width: 50px;
   white-space: normal;
   color: WindowText;
-  line-height: 1.5em;
+  line-height: 1.4em;
   -moz-appearance: none !important;
   padding: .1em 0px !important;
   margin: 0px !important;
   margin-bottom: 3px !important;
   margin-inline-start: 3px !important;
   border: none !important;
   background-color: transparent;
 }
--- a/mail/themes/osx/mail/messageHeader.css
+++ b/mail/themes/osx/mail/messageHeader.css
@@ -255,17 +255,17 @@
   padding: 0px;
   margin-top: 0;
   margin-inline-end: 3px;
 }
 
 .headerValue {
   min-width: 50px;
   white-space: normal;
-  line-height: 1.5em;
+  line-height: 1.4em;
   -moz-appearance: none !important;
   padding: .1em 0px !important;
   margin: 0px !important;
   margin-bottom: 3px !important;
 
 
   /* 1px plus 2px of border-radius matches the 3px at the beginning of
     .emailDisplayButton, making email address header values and plain text
--- a/mail/themes/shared/mail/messageHeader.css
+++ b/mail/themes/shared/mail/messageHeader.css
@@ -1,13 +1,14 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace html url("http://www.w3.org/1999/xhtml");
 
 :root[lwt-default-theme-in-dark-mode] #headers-box,
 :root[lwt-default-theme-in-dark-mode] #msgHeaderView {
   background-color: var(--toolbar-bgcolor) !important;
   background-image: none !important;
   color: var(--lwt-text-color);
 }
 
@@ -40,22 +41,16 @@
 }
 
 .msgHeaderView-button[type="menu-button"] > toolbarbutton {
   -moz-box-orient: horizontal;
 }
 
 /* ::::: msg header toolbars ::::: */
 
-#expandedHeaderRows > row,
-#expandedHeader2Rows > row {
-  /* Ensure that the header names and values are aligned with each other. */
-  -moz-box-align: baseline;
-}
-
 #expandedHeadersTopBox {
   /* Use the HTML layout model to allow the message header toolbar to float to
      the right of the From field. */
   display: block;
 }
 
 /* ::::: expanded header pane ::::: */
 
@@ -100,19 +95,56 @@
   display: block;
 }
 
 .headerValue[containsEmail="true"] {
   margin-inline-start: 0px !important;
 }
 
 #otherActionsBox {
+  white-space: nowrap;
   margin-inline-start: 8px;
 }
 
+html|table#expandedHeaders {
+  display: inline-grid;
+  vertical-align: baseline;
+}
+
+html|table#expandedHeaders,
+html|table#expandedHeaders2 {
+  border-spacing: 0;
+}
+
+#expandedHeadersBottomBox {
+  display: flex;
+}
+
+#expandedHeadersTopBox html|th,
+#expandedHeadersBottomBox html|th {
+  font-weight: normal !important;
+  vertical-align: top;
+  text-align: right;
+  padding-top: 2px !important;
+}
+
+#expandedHeadersTopBox html|td,
+#expandedHeadersBottomBox html|td,
+mail-multi-emailheaderfield {
+  width: 100%;
+}
+
+#expandedHeadersTopBox html|th,
+#expandedHeadersBottomBox html|th,
+#expandedHeadersTopBox html|td,
+#expandedHeadersBottomBox html|td {
+  margin: 0;
+  padding: 0;
+}
+
 .headerValueBox {
   overflow: visible;
 }
 
 mail-newsgroups-headerfield.headerValueBox {
   padding: .1em 0;
   margin-bottom: 4px;
 }
--- a/mail/themes/windows/mail/messageHeader.css
+++ b/mail/themes/windows/mail/messageHeader.css
@@ -116,17 +116,17 @@
   margin-top: 0;
   margin-inline-end: 3px;
 }
 
 .headerValue {
   min-width: 50px;
   white-space: normal;
   color: WindowText;
-  line-height: 1.5em;
+  line-height: 1.4em;
   -moz-appearance: none;
   padding: .1em 0;
   margin: 0;
   margin-bottom: 3px !important;
   margin-inline-start: 3px;
   border-width: 0;
   background-color: transparent;
 }