single_message: Use data-message-id instead of zid.

web/src/echo.js

@@ -461,7 +461,8 @@ function abort_message(message) {
 }
 
 export function display_slow_send_loading_spinner(message) {
-    const $row = $(`div[zid="${CSS.escape(message.id)}"]`);
+    const message_list_id = message_lists.current.id;
+    const $row = $(`#message-row-${message_list_id}-${CSS.escape(message.id)}`);
     if (message.locally_echoed && !message.failed_request) {
         $row.find(".slow-send-spinner").removeClass("hidden");
         // We don't need to do anything special to ensure this gets

web/src/lightbox.js

@@ -491,11 +491,11 @@ export function parse_media_data(media) {
     if (is_compose_preview_media) {
         sender_full_name = people.my_full_name();
     } else {
-        const $message = $parent.closest("[zid]");
-        const zid = rows.id($message);
-        const message = message_store.get(zid);
+        const $message = $parent.closest(".message_row");
+        const message_id = rows.id($message);
+        const message = message_store.get(message_id);
         if (message === undefined) {
-            blueslip.error("Lightbox for unknown message", {zid});
+            blueslip.error("Lightbox for unknown message", {message_id});
         } else {
             sender_full_name = message.sender_full_name;
         }

web/src/message_list_view.js

@@ -1500,7 +1500,7 @@ export class MessageListView {
             const $row = this._rows.get(old_id);
             this._rows.delete(old_id);
 
-            $row.attr("zid", new_id);
+            $row.attr("data-message-id", new_id);
             $row.attr("id", `message-row-${this.list.id}-` + new_id);
             $row.removeClass("local");
             this._rows.set(new_id, $row);
@@ -1688,7 +1688,8 @@ export class MessageListView {
 
     show_messages_as_unread(message_ids) {
         const $rows_to_show_as_unread = this.$list.find(".message_row").filter((_index, $row) => {
-            const message_id = Number.parseFloat($row.getAttribute("zid"));
+            // eslint-disable-next-line unicorn/prefer-dom-node-dataset
+            const message_id = Number.parseFloat($row.getAttribute("data-message-id"));
             return message_ids.includes(message_id);
         });
         $rows_to_show_as_unread.addClass("unread");

web/src/reactions.js

@@ -6,6 +6,7 @@ import * as blueslip from "./blueslip";
 import * as channel from "./channel";
 import * as emoji from "./emoji";
 import {$t} from "./i18n";
+import * as message_lists from "./message_lists";
 import * as message_store from "./message_store";
 import {page_params} from "./page_params";
 import * as people from "./people";
@@ -204,9 +205,10 @@ export function get_reaction_title_data(message_id, local_id) {
 }
 
 export function get_reaction_section(message_id) {
-    const $message_element = $(".message-list").find(`[zid='${CSS.escape(message_id)}']`);
-    const $section = $message_element.find(".message_reactions");
-    return $section;
+    const message_list_id = message_lists.current.id;
+    return $(`#message-row-${message_list_id}-${CSS.escape(message_id)}`).find(
+        ".message_reactions",
+    );
 }
 
 export function find_reaction(message_id, local_id) {

web/src/rows.ts

@@ -80,7 +80,7 @@ export function is_overlay_row($row: JQuery): boolean {
 
 export function id($message_row: JQuery): number | undefined {
     if (is_overlay_row($message_row)) {
-        blueslip.error("Drafts and scheduled messages have no zid");
+        blueslip.error("Drafts and scheduled messages have no message id.");
         return undefined;
     }
 
@@ -88,28 +88,28 @@ export function id($message_row: JQuery): number | undefined {
         throw new Error("Caller should pass in a single row.");
     }
 
-    const zid = $message_row.attr("zid");
+    const message_id = $message_row.attr("data-message-id");
 
-    if (zid === undefined) {
-        throw new Error("Calling code passed rows.id a row with no zid attr.");
+    if (message_id === undefined) {
+        throw new Error("Calling code passed rows.id a row with no `data-message-id` attr.");
     }
 
-    return Number.parseFloat(zid);
+    return Number.parseFloat(message_id);
 }
 
 export function local_echo_id($message_row: JQuery): string | undefined {
-    const zid = $message_row.attr("zid");
+    const message_id = $message_row.attr("data-message-id");
 
-    if (zid === undefined) {
-        blueslip.error("Calling code passed rows.local_id a row with no zid attr.");
+    if (message_id === undefined) {
+        blueslip.error("Calling code passed rows.local_id a row with no `data-message-id` attr.");
         return undefined;
     }
 
-    if (!zid.includes(".0")) {
-        blueslip.error("Trying to get local_id from row that has reified message id", {zid});
+    if (!message_id.includes(".0")) {
+        blueslip.error("Trying to get local_id from row that has reified message id", {message_id});
     }
 
-    return zid;
+    return message_id;
 }
 
 export function get_message_id(elem: string): number | undefined {

web/src/user_card_popover.js

@@ -527,7 +527,7 @@ function toggle_user_card_popover_for_message(element, user, message, on_mount)
             // This is never supposed to happen, not even for deactivated
             // users, so we'll need to debug this error if it occurs.
             blueslip.error("Bad sender in message", {
-                zid: message.id,
+                message_id: message.id,
                 sender_id: message.sender_id,
             });
             return;

web/templates/single_message.hbs

@@ -1,4 +1,4 @@
-<div zid="{{msg/id}}" id="message-row-{{message_list_id}}-{{msg/id}}"
+<div id="message-row-{{message_list_id}}-{{msg/id}}" data-message-id="{{msg/id}}"
   class="message_row{{#unless msg/is_stream}} private-message{{/unless}}{{#include_sender}} include-sender{{/include_sender}}{{#if mention_classname}} {{mention_classname}}{{/if}}{{#msg.unread}} unread{{/msg.unread}} {{#if msg.locally_echoed}}locally-echoed{{/if}} selectable_row"
   role="listitem">
     {{#if want_date_divider}}

web/tests/lightbox.test.js

@@ -46,10 +46,10 @@ test("pan_and_zoom", ({override}) => {
 
     $img.attr("src", "example");
 
-    let fetched_zid;
+    let fetched_message_id;
 
-    message_store.get = (zid) => {
-        fetched_zid = zid;
+    message_store.get = (message_id) => {
+        fetched_message_id = message_id;
         return "message-stub";
     };
 
@@ -60,7 +60,7 @@ test("pan_and_zoom", ({override}) => {
     const open_image = lightbox.build_open_media_function();
     open_image($img);
 
-    assert.equal(fetched_zid, 1234);
+    assert.equal(fetched_message_id, 1234);
 });
 
 test("youtube", ({override}) => {

web/tests/reactions.test.js

@@ -44,6 +44,11 @@ const settings_data = mock_esm("../src/settings_data");
 const spectators = mock_esm("../src/spectators", {
     login_to_access() {},
 });
+mock_esm("../src/message_lists", {
+    current: {
+        id: 1,
+    },
+});
 
 set_global("document", "document-stub");
 
@@ -410,9 +415,8 @@ test("prevent_simultaneous_requests_updating_reaction", ({override, override_rew
 });
 
 function stub_reactions(message_id) {
-    const $message_row = $.create("message-row-stub");
     const $message_reactions = $.create("reactions-stub");
-    $(".message-list").set_find_results(`[zid='${CSS.escape(message_id)}']`, $message_row);
+    const $message_row = $.create(`#message-row-1-${CSS.escape(message_id)}`);
     $message_row.set_find_results(".message_reactions", $message_reactions);
     return $message_reactions;
 }