/emails: Add option to toggle between HTML and text.

This makes the developer experience of the /emails pages significantly
cleaner, since you don't have to look at both the HTML and the text
for each message at the same time.

Fixes #6844.

templates/zerver/email.html

@@ -5,8 +5,12 @@ <h4>To:
     {% endfor %}
 </h4>
 <h4>Subject: {{subject}}</h4>
-{% autoescape off %}
-{{ html_message }}
-{% endautoescape %}
-<pre>{{ body }}</pre>
+<div class="email-html" style="display: block;">
+    {% autoescape off %}
+    {{ html_message }}
+    {% endautoescape %}
+</div>
+<div class="email-text" style="display: none;">
+    <pre>{{ body }}</pre>
+</div>
 <hr/>

templates/zerver/email_log.html

@@ -1,11 +1,41 @@
 {% extends "zerver/base.html" %}
 {% block content %}
 <div class="container">
-    <div class="alert">
-        All the emails sent in the Zulip development environment are logged here. You can also
-        manually generate most of the emails by clicking <a href="/emails/generate">here</a>.
-        To clear this log click <a href="/emails/clear">here</a>
+    <div style="position: fixed">
+        <div class="alert">
+            All the emails sent in the Zulip development environment are logged here. You can also
+            manually generate most of the emails by clicking <a href="/emails/generate">here</a>.
+            To clear this log click <a href="/emails/clear">here</a>
+        </div>
+        <div style="text-align:right">
+            <label>
+                <input type="checkbox" id="toggle"/>
+                <strong>Show text only version</strong>
+            </label>
+        </div>
+    </div>
+    <script type="text/javascript">
+    $('#toggle').change(function() {
+        if($('.email-text').css('display') == 'none') {
+            $(".email-text").each(function() {
+                $(this).css("display", "block");
+            });
+            $(".email-html").each(function() {
+                $(this).css("display", "none");
+            });
+        }
+        else {
+            $(".email-text").each(function() {
+                $(this).css("display", "none");
+            });
+            $(".email-html").each(function() {
+                $(this).css("display", "block");
+            });
+        }
+    });
+    </script>
+    <div style="padding-top:100px">
+        {{ log |safe }}
     </div>
-    {{ log |safe }}
 </div>
 {% endblock %}