Fix spacing and font size of inserted headers (#164)

* Fix spacing and font size of inserted headers

- Added missing empty line between reply headers and reply body
- Aligned line space before and after headers for reply and forward
- Removed wrong font-size style from inserted content
- Simplified CSS length units

* Review comments

- Removed unused code
- Brought back unnecessary CSS units on zero lengths
- Brought back initially unset styles that don't change anything

modules/compose.mjs

@@ -15,7 +15,7 @@ import * as rwhI18n from './headers-i18n.mjs';
 import * as rwhAccounts from './accounts.mjs';
 import * as rwhUtils from './utils.mjs';
 
-const positionBeforeBegin = 'beforebegin';
+const positionBeforeEnd = 'beforeend';
 const positionAfterBegin = 'afterbegin';
 const fwdHdrLookupString = '-------- ';
 const plainTextFirstChars = '> ';
@@ -176,7 +176,9 @@ class ReplyWithHeader {
 
         // put back the cleaned up <br> tags as-is
         if (this.isReply) {
-            div.insertAdjacentElement(positionAfterBegin, this._createElement('br'));
+			// Originally, there's no <br> after the (unindented) cite prefix.
+			// With the table style, it looks better with an extra empty line (like everybody else has it).
+            div.insertAdjacentElement(positionBeforeEnd, this._createElement('br'));
 
             // blockquote
             if (await rwhSettings.isCleanAllBlockQuoteColor()) { // all
@@ -192,7 +194,15 @@ class ReplyWithHeader {
         if (this.isForward) {
             let mozForwardContainer = this._getByClassName('moz-forward-container');
             this._cleanNodesUpToClassName(mozForwardContainer, targetNodeClassName);
-            mozForwardContainer.insertAdjacentElement(positionAfterBegin, this._createElement('br'));
+
+			// Insert 2 <br> before the headers to make it look like a reply does.
+			mozForwardContainer.insertAdjacentElement(positionAfterBegin, this._createElement('br'));
+			mozForwardContainer.insertAdjacentElement(positionAfterBegin, this._createElement('br'));
+
+			// There are 2 <br> originally, but none for reply mode.
+			// We add one for replies, so let's remove one for forwards to make it even.
+			let nextBr = mozForwardContainer.querySelector("div.moz-email-headers-table + br");
+			nextBr?.remove();
         }
 
         return {
@@ -282,12 +292,12 @@ class ReplyWithHeader {
             }
 
             if (headers[hdrKey]) {
-                rwhHeaders += '<p style="margin:0cm;font-size:11.5pt"><span><b>' + lbl + '</b> ' + headers[hdrKey] + '</span></p>';
+                rwhHeaders += '<p style="margin:0cm"><span><b>' + lbl + '</b> ' + headers[hdrKey] + '</span></p>';
             }
         }, this);
 
         rwhHeaders += await this._handleAllHeadersFlow(false, true);
-        rwhHeaders += '</div><br>';
+        rwhHeaders += '</div>';
 
         return rwhHeaders;
     }
@@ -481,7 +491,7 @@ class ReplyWithHeader {
             } else {
                 let rwhHeaders = '';
                 for (let [key, value] of Object.entries(remainingHeaders)) {
-                    rwhHeaders += '<p style="margin:0cm;font-size:11.5pt"><span><b>'
+                    rwhHeaders += '<p style="margin:0"><span><b>'
                         + rwhUtils.toPartialCanonicalFormat(key) + ':</b> ' + value + '</span></p>';
                 }
                 return rwhHeaders;