Provide a show / hide headers link / button in the mail display

The expanded header should
- Not display the headers that are already output (from, to, ..)
- Be preformatted, including consideration of line wrappings, in fixed width format

Starts to look good.

Yeah the Expand / Collapse link should be above the headers and stay there.
It should also not eat an extra line, doesn't need to be a block element.

The headers are still not wrapped on new line and should still use a fixed format (preformatted style) font.

1. +++ b/css/message.css
   @@ -19,9 +19,20 @@
   +  content: url(../../../core/misc/menu-collapsed-rtl.png);
   ...
   +  content: url(../../../core/misc/menu-expanded.png);
   

   Is this going to work if Inmail is not installed in /modules directory?

2. +++ b/inmail.libraries.yml
   @@ -3,6 +3,10 @@ message:
   +    - core/jquery.once
   

   Not sure how complex is to implement this without jQuery... It would be cool for future Inmail Message element integrations to use plain JS to reduce dependencies as much as possible. Could be a followup.

3. +++ b/js/inmail.js
   @@ -0,0 +1,34 @@
   +        var $link = $('<a href="#" class="more-link more-link__collapsed">' + Drupal.t('Expand header') + '</a>');
   

   Should we prefix classes with inmail?

Also, we load JS logic in teaser mode as well. I think it should be loaded only for the full view mode. Same applies for "Expand header" button which is now visible in teaser mode.

I've just moved the header link to be displayed before the "All headers" block, thought that by removing the more-link from the a-Tag class removes the "block behaviour" (It should also not eat an extra line, doesn't need to be a block element.).

I was also trying to figure out where to break the "All headers" elements to be displayed each on a separate line but didnt had enough time for it.

Uploading a small progress here, not implementing the observations of comment #10 because I don't actualy know stuff about js/libraries and how they work together, sorry ^^'

EDIT: sorry, I took over this patch/issue because @miro_dietiker told me I could do/try something to make some little progress in here (since @yongt9412 and I work alternatively during Thursday afternoon resp. morning).

+++ b/templates/inmail-message.html.twig
@@ -48,8 +52,7 @@
-      <label>All Headers</label>
-      {{ message.header.toString() }}
+      <pre>{{ message.header.toString() }}</pre>

Oh, that was the way... totally didn't think about this ._.
Nice :)

Actually I'm not sure if I'm missing something, but after applying your last patch and clear all caches, I still have the links eating a line and I don't have the horizontal scroll :/

We are missing this on the preformatted container:

  overflow-x: scroll;
  white-space: pre;

So the lines stay as lines and don't wrap and we have a horizontal scrollbar if they are oversize.

The label "All headers" is semantically needed. We just hide it in CSS.

Using the multiple-attachments.eml example, it turns out the Message-ID line is wrapped into two lines still. We need to investigate where the newline is coming from, but that's a follow-up.

Implemented observations mentioned above.
Do we need a test for this layout ? Followup ?

Created followup: #2822786: multiple-attachments.eml Message-ID line is wrapped into two lines

+++ b/css/message.css
@@ -23,8 +23,13 @@
+  color: transparent;

Awesome, i like, but we do:
display: none

Fixed, committed.