Condense messages in a fail-safe way.

Messages are now explicitly condensed by our JS, which means that if
we run into some bug where our JS doesn't run, you still see the whole
message (rather than getting a clipped message).

(As of this commit, this can happen when you, e.g. are on the
Settings page and someone sends you a message.)

(imported from commit f3bec97800ea1852c80203e73552ee545fcc7e8a)

zephyr/static/js/message_list.js

@@ -397,7 +397,7 @@ MessageList.prototype = {
                               }});
         }
 
-        $.each(rendered_elems, ui.process_collapsing);
+        $.each(rendered_elems, ui.process_condensing);
 
         // Re-add the fading of messages that is lost when we re-render.
         compose.update_faded_messages();

zephyr/static/js/narrow.js

@@ -418,7 +418,7 @@ exports.activate = function (operators, opts) {
     // above us could change size -- which is problematic, because it
     // could cause us to lose our position. But doing this here, right
     // after showing the table, seems to cause us to win the race.
-    $("tr.message_row").each(ui.process_collapsing);
+    $("tr.message_row").each(ui.process_condensing);
 
     reset_load_more_status();
     if (! defer_selecting_closest) {

zephyr/static/js/ui.js

@@ -919,16 +919,16 @@ $(function () {
 
     $("#home").on("click", ".message_expander", function (e) {
         var row = $(this).closest(".message_row");
-        current_msg_list.get(rows.id(row)).expanded = true;
+        current_msg_list.get(rows.id(row)).condensed = false;
-        row.find(".message_content").addClass("expanded");
+        row.find(".message_content").removeClass("condensed");
         $(this).hide();
-        row.find(".message_collapser").show();
+        row.find(".message_condenser").show();
     });
 
-    $("#home").on("click", ".message_collapser", function (e) {
+    $("#home").on("click", ".message_condenser", function (e) {
         var row = $(this).closest(".message_row");
-        current_msg_list.get(rows.id(row)).expanded = false;
+        current_msg_list.get(rows.id(row)).condensed = true;
-        row.find(".message_content").removeClass("expanded");
+        row.find(".message_content").addClass("condensed");
         $(this).hide();
         row.find(".message_expander").show();
     });
@@ -1338,38 +1338,28 @@ exports.restore_compose_cursor = function () {
         .caret(saved_compose_cursor, saved_compose_cursor);
 };
 
-exports.process_collapsing = function (index, elem) {
+exports.process_condensing = function (index, elem) {
-    var content = $(elem).find(".message_content")[0];
+    var content = $(elem).find(".message_content");
     var message = current_msg_list.get(rows.id($(elem)));
     if (content !== undefined && message !== undefined) {
-        // If message.expanded is defined, then the user has manually
+        // If message.condensed is defined, then the user has manually
-        // specified whether this message should be expanded or collapsed.
+        // specified whether this message should be expanded or condensed.
-        if (message.expanded === true) {
+        if (message.condensed === true) {
-            $(content).addClass("expanded");
+            content.addClass("condensed");
-            $(elem).find(".message_collapser").show();
-            $(elem).find(".message_expander").hide();
-            return;
-        } else if (message.expanded === false) {
-            $(content).removeClass("expanded");
             $(elem).find(".message_expander").show();
-            $(elem).find(".message_collapser").hide();
+            $(elem).find(".message_condenser").hide();
+            return;
+        } else if (message.condensed === false) {
+            content.removeClass("condensed");
+            $(elem).find(".message_condenser").show();
+            $(elem).find(".message_expander").hide();
             return;
         }
 
-        // We've limited the height of all elements in CSS.
+        // Collapse the message if it takes up more than a certain % of the screen
-        // If offsetHeight < scrollHeight, then our CSS height limit has taken
+        if (content.height() > (viewport.height() * 0.65 ) ) {
-        // effect and we should show an expander button.
+            content.addClass("condensed");
-        // If offsetHeight is only slightly smaller than scrollHeight, then we
-        // would only be collapsing by a small amount, which can be annoying.
-        // Instead of showing an expander button, just expand that element instead
-        // of keeping it collapsed.  (This also solves a bug seen on some Mac
-        // systems where offsetHeight == scrollHeight-1 for no apparent reason).
-        if (content.offsetHeight === 0 && content.scrollHeight === 0) {
-            return;
-        } else if (content.offsetHeight + 250 < content.scrollHeight) {
             $(elem).find(".message_expander").show();
-        } else if (content.offsetHeight < content.scrollHeight) {
-            $(content).addClass("expanded");
         }
     }
 };

zephyr/static/styles/zephyr.css

@@ -451,9 +451,6 @@ table.focused_table {
 .message_content {
     margin-left: 5px;
     margin-right: 35px; /* size of the timestamp */
-    line-height: 1.5em;
-    max-height: 9.0em;
-    overflow: hidden;
 }
 @media (max-width: 480px) {
     .message_content {
@@ -461,8 +458,9 @@ table.focused_table {
     }
 }
 
-.message_content.expanded {
+.message_content.condensed {
-    max-height: none;
+    max-height: 8.5em;
+    overflow: hidden;
 }
 
 .message_length_controller {

zephyr/static/templates/message.handlebars

@@ -86,7 +86,7 @@
         </div>
         <div class="message_content">{{#if ../../use_match_properties}}{{{match_content}}}{{else}}{{{content}}}{{/if}}</div>
         <div class="message_expander message_length_controller" title="See the rest of this message">[More...]</div>
-        <div class="message_collapser message_length_controller" title="Make this message take up less space on the screen">[Collapse this message]</div>
+        <div class="message_condenser message_length_controller" title="Make this message take up less space on the screen">[Collapse this message]</div>
     </td>
 </tr>
 {{/with}}