emails: Inline CSS in missed_message.

As part of this change, we port into the .messages class the work in
4e8e7348da to change overflow-y to auto,
not scroll (skipping that would result in a regression).

templates/zerver/emails/digest.source.html

@@ -39,7 +39,7 @@
         </p>
 
         {% for convo in hot_conversations %}
-        <div id='messages'>
+        <div class='messages'>
             {% for recipient_block in convo.first_few_messages %}
                 <div class='hot_convo_recipient_block'>
                     <div class='hot_convo_recipient_header'>{{ recipient_block.header.html|safe }}</div>

templates/zerver/emails/email.css

@@ -213,11 +213,11 @@ a.button:hover {
     font-weight: normal;
 }
 
-#messages {
+.messages {
     width: 600px;
     font-size: 12px;
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    overflow-y: scroll;
+    overflow-y: auto;
 }
 
 .hot_convo_recipient_block {
@@ -242,6 +242,43 @@ a.button:hover {
     padding-top: 1px;
 }
 
+.recipient_block_with_messages {
+    background-color: hsl(192, 20%, 95%);
+    border: 1px solid black;
+    margin-bottom: 4px;
+}
+
+.recipient_header_with_messages {
+    background-color: hsl(213, 100%, 81%);
+    border-bottom: 1px solid black;
+    font-weight: bold;
+    padding: 2px;
+}
+
+.message_content_with_messages {
+    background-color: hsl(192, 20%, 95%);
+    margin-left: 1px;
+    margin-right: 2px;
+}
+
+.recipient_block_without_messages {
+    border: 1px solid black;
+    margin-bottom: 4px;
+}
+
+.recipient_header_without_messages {
+    color: hsl(0, 0%, 100%);
+    background-color: hsl(0, 0%, 27%);
+    border-bottom: 1px solid black;
+    font-weight: bold;
+    padding: 2px;
+}
+
+.message_content_without_messages {
+    margin-left: 1px;
+    margin-right: 2px;
+}
+
 .hot_convo_message_content_block {
     padding-left: 6px;
     font-weight: normal;

templates/zerver/emails/missed_message.source.html

@@ -18,21 +18,21 @@
     </p>
 
     {% if show_message_content %}
-    <div id='messages' style="width: 600px;font-size: 12px;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;overflow-y: auto;">
+    <div class='messages'>
         {% for recipient_block in messages %}
         {% if not recipient_block.header.stream_message %}
-        <div class='recipient_block' style="background-color: hsl(192, 20%, 95%);border: 1px solid black;margin-bottom: 4px;">
+        <div class='recipient_block_with_messages'>
-            <div class='recipient_header' style="background-color: hsl(213, 100%, 81%);border-bottom: 1px solid black;font-weight: bold;padding: 2px;">{{ recipient_block.header.html|safe }}</div>
+            <div class='recipient_header_with_messages'>{{ recipient_block.header.html|safe }}</div>
-            <div class='message_content' style="background-color: hsl(192, 20%, 95%);margin-left: 1px;margin-right: 2px;">
+            <div class='message_content_with_messages'>
         {% else %}
-        <div class='recipient_block' style="border: 1px solid black;margin-bottom: 4px;">
+        <div class='recipient_block_without_messages'>
-            <div class='recipient_header' style="color: hsl(0, 0%, 100%);background-color: hsl(0, 0%, 27%);border-bottom: 1px solid black;font-weight: bold;padding: 2px;">{{ recipient_block.header.html|safe }}</div>
+            <div class='recipient_header_without_messages'>{{ recipient_block.header.html|safe }}</div>
-            <div class='message_content' style="margin-left: 1px;margin-right: 2px;">
+            <div class='message_content_without_messages'>
         {% endif %}
                 {% for sender_block in recipient_block.senders %}
-                    {% if sender_block.sender %} <div class="message_sender" style="font-weight: bold;padding-top: 1px;">{{ sender_block.sender }}</div>{% endif %}
+                    {% if sender_block.sender %} <div class="message_sender">{{ sender_block.sender }}</div>{% endif %}
                     {% for message_block in sender_block.content %}
-                    <div class='message_content_block' style="padding-left: 6px;font-weight: normal;">
+                    <div class='message_content_block'>
                         {{ message_block.html|safe }}
                     </div>
                     {% endfor %}

tools/check-templates

@@ -17,7 +17,7 @@ EXCLUDED_FILES = [
     ## Test data Files for testing modules in tests
     "tools/tests/test_template_data",
     # Our parser doesn't handle the way its conditionals are layered
-    'templates/zerver/emails/missed_message.html',
+    'templates/zerver/emails/missed_message.source.html',
 ]
 
 def check_our_files(modified_only, all_dups, targets):

tools/linter_lib/custom_check.py

@@ -801,7 +801,6 @@ def build_custom_checkers(by_lang):
              # Old-style email templates need to use inline style
              # attributes; it should be possible to clean these up
              # when we convert these templates to use premailer.
-             'templates/zerver/emails/missed_message.html',
              'templates/zerver/emails/email_base_messages.html',
 
              # Email log templates; should clean up.