Transition from tables to divs for the message list.

This breaks our casperjs tests.

(imported from commit c63181c73a24eed4a80bfa56966d1f0871c5edb2)

static/js/message_list_view.js

@@ -106,7 +106,7 @@ MessageListView.prototype = {
             // Delete the leftover recipient label.
             table.find('.recipient_row:first').remove();
         } else {
-            var last_row = table.find('tr[zid]:last');
+            var last_row = table.find('div[zid]:last');
             last_message_id = rows.id(last_row);
             prev = self.get_message(last_message_id);
 
@@ -314,7 +314,7 @@ MessageListView.prototype = {
 
         var rendered_elems = $(templates.render('message', {
             messages: messages_to_render,
-            include_layout_row: (table.find('tr:first').length === 0),
+            include_layout_row: (table.find('div:first').length === 0),
             use_match_properties: list.filter.is_search()
         }));
 
@@ -384,7 +384,7 @@ MessageListView.prototype = {
             // though, as resizing the window doesn't make them go away).
             // So, we add an empty row and then garbage collect them
             // later when the user is idle.
-            var dummy = $("<tr></tr>");
+            var dummy = $("<div></div>");
             table.find('.ztable_layout_row').after(dummy);
             $(document).idle({'idle': 1000*10,
                               'onIdle': function () {
@@ -453,7 +453,7 @@ MessageListView.prototype = {
         _.each(rendered_elems.toArray().reverse(), function (elem) {
             // Sometimes there are non-DOM elements in rendered_elems; only
             // try to get the heights of actual trs.
-            if ($(elem).is("tr")) {
+            if ($(elem).is("div")) {
                 new_messages_height += elem.offsetHeight;
                 // starting from the last message, ignore message heights that weren't sent by me.
                 if(id_of_last_message_sent_by_us > -1) {

static/js/rows.js

@@ -56,7 +56,7 @@ exports.get_closest_row = function (element) {
     // This gets the closest message row to an element, whether it's
     // a summary bar, recipient bar, or message.  With our current markup,
     // this is the most reliable way to do it.
-    return $(element).closest("tr");
+    return $(element).closest(".message_row");
 };
 
 return exports;

static/js/search.js

@@ -140,7 +140,7 @@ exports.initiate_search = function () {
 exports.clear_search = function () {
     narrow.deactivate();
 
-    $('table tr').removeHighlight();
+    $('.message_table').removeHighlight();
     $('#search_query').blur();
     exports.update_button_visibility();
 };

static/js/stream_color.js

@@ -47,7 +47,7 @@ function update_table_stream_color(table, stream_name, color) {
     var stream_labels = $("#floating_recipient_bar").add(table).find(".stream_label");
     _.each(stream_labels, function (label) {
         if ($.trim($(label).text()) === stream_name) {
-            fixup($(label).parent("td").parent("tr").prev("tr")
+            fixup($(label).parent("div.selectable_row").prev("div")
                           .nextUntil(".bookend_tr")
                           .children(".messagebox_colorblock,.message_header_colorblock"));
         }

static/js/ui.js

@@ -135,7 +135,7 @@ function copy_handler(e) {
         ranges.push(range);
 
         startc = $(range.startContainer);
-        start_data = find_boundary_tr($(startc.parents('tr')[0]), function (row) {
+        start_data = find_boundary_tr($(startc.parents('div.selectable_row')[0]), function (row) {
             return row.next();
         });
         if (start_data === undefined) {
@@ -147,10 +147,10 @@ function copy_handler(e) {
         // If the selection ends in the bottom whitespace, we should act as
         // though the selection ends on the final message
         if (endc.attr('id') === "bottom_whitespace") {
-            initial_end_tr = $("tr.message_row:last");
+            initial_end_tr = $("div.message_row:last");
             skip_same_td_check = true;
         } else {
-            initial_end_tr = $(endc.parents('tr')[0]);
+            initial_end_tr = $(endc.parents('div.selectable_row')[0]);
         }
         end_data = find_boundary_tr(initial_end_tr, function (row) {
             return row.prev();
@@ -167,7 +167,7 @@ function copy_handler(e) {
         // If the selection starts and ends in the same td,
         // we want to let the browser handle the copy-paste mostly on its own
         if (!skip_same_td_check &&
-            startc.parents('td')[0] === endc.parents('td')[0]) {
+            startc.parents('div.selectable_row>div')[0] === endc.parents('div.selectable_row>div')[0]) {
 
             // If the user is not running the desktop app, let the browser handle
             // the copy entirely on its own
@@ -585,7 +585,7 @@ function replace_floating_recipient_bar(desired_label) {
             other_label = $("#current_label_private_message");
             header = desired_label.children(".message_header_stream.right_part");
 
-            $("#current_label_stream td:first").css(
+            $("#current_label_stream .message_header_colorblock").css(
                 "background-color",
                 desired_label.children(".message_header_colorblock")
                              .css("background-color"));
@@ -594,9 +594,9 @@ function replace_floating_recipient_bar(desired_label) {
             other_label = $("#current_label_stream");
             header = desired_label.children(".message_header_private_message.right_part");
         }
-        new_label.find("td:last").replaceWith(header.clone());
+        new_label.find(".right_part").replaceWith(header.clone());
         other_label.css('display', 'none');
-        new_label.css('display', 'table-row');
+        new_label.css('display', 'block');
         new_label.attr("zid", rows.id(desired_label));
 
         new_label.toggleClass('faded', desired_label.hasClass('faded'));

static/js/viewport.js

@@ -158,8 +158,8 @@ exports.visible_messages = function (require_fully_visible) {
     // We do this explicitly without merges and without recalculating
     // the feed bounds to keep this computation as cheap as possible.
     var visible_messages = [];
-    var messages_above_pointer = selected_row.prevAll("tr.message_row[zid]:lt(" + num_neighbors + ")");
-    var messages_below_pointer = selected_row.nextAll("tr.message_row[zid]:lt(" + num_neighbors + ")");
+    var messages_above_pointer = selected_row.prevAll("div.message_row[zid]:lt(" + num_neighbors + ")");
+    var messages_below_pointer = selected_row.nextAll("div.message_row[zid]:lt(" + num_neighbors + ")");
     add_to_visible_messages(selected_row, visible_messages,
                             top_of_feed.get(), bottom_of_feed.get(), require_fully_visible);
     add_to_visible_messages(messages_above_pointer, visible_messages,