drafts: Remove classes that had the same effect.

In commit 5edc8fc, abstract classes were added to the
drafts overlay, but the classes that were already there
were not removed. This resulted in the same styles being
applied twice.

web/e2e-tests/drafts.test.ts

@@ -13,7 +13,7 @@ async function wait_for_drafts_to_appear(page: Page): Promise<void> {
 }
 
 async function get_drafts_count(page: Page): Promise<number> {
-    return await page.$$eval(".draft-row", (drafts) => drafts.length);
+    return await page.$$eval("#drafts_table .overlay-message-row", (drafts) => drafts.length);
 }
 
 const drafts_button = ".top_left_drafts";
@@ -76,35 +76,35 @@ async function test_previously_created_drafts_rendered(page: Page): Promise<void
     assert.strictEqual(
         await common.get_text_from_selector(
             page,
-            ".draft-row .message_header_stream .stream_label",
+            "#drafts_table .overlay-message-row .message_header_stream .stream_label",
         ),
         "Denmark",
     );
     assert.strictEqual(
         await common.get_text_from_selector(
             page,
-            ".draft-row .message_header_stream .stream_topic",
+            "#drafts_table .overlay-message-row .message_header_stream .stream_topic",
         ),
         "tests",
     );
     assert.strictEqual(
         await common.get_text_from_selector(
             page,
-            ".draft-row:nth-last-child(2) .rendered_markdown.restore-draft",
+            "#drafts_table .overlay-message-row:nth-last-child(2) .rendered_markdown.restore-overlay-message",
         ),
         "Test direct message.",
     );
     assert.strictEqual(
         await common.get_text_from_selector(
             page,
-            ".draft-row .message_header_private_message .stream_label",
+            "#drafts_table .overlay-message-row .message_header_private_message .stream_label",
         ),
         "You and Cordelia, Lear's daughter, King Hamlet",
     );
     assert.strictEqual(
         await common.get_text_from_selector(
             page,
-            ".draft-row:last-child .rendered_markdown.restore-draft",
+            "#drafts_table .overlay-message-row:last-child .rendered_markdown.restore-overlay-message",
         ),
         "Test stream message.",
     );
@@ -112,7 +112,7 @@ async function test_previously_created_drafts_rendered(page: Page): Promise<void
 
 async function test_restore_message_draft_via_draft_overlay(page: Page): Promise<void> {
     console.log("Restoring stream message draft");
-    await page.click("#drafts_table .message_row:not(.private-message) .restore-draft");
+    await page.click("#drafts_table .message_row:not(.private-message) .restore-overlay-message");
     await wait_for_drafts_to_disappear(page);
     await page.waitForSelector("#stream_message_recipient_topic", {visible: true});
     await page.waitForSelector("#preview_message_area", {hidden: true});
@@ -145,21 +145,21 @@ async function test_edited_draft_message(page: Page): Promise<void> {
     assert.strictEqual(
         await common.get_text_from_selector(
             page,
-            ".draft-row .message_header_stream .stream_label",
+            "#drafts_table .overlay-message-row .message_header_stream .stream_label",
         ),
         "Denmark",
     );
     assert.strictEqual(
         await common.get_text_from_selector(
             page,
-            ".draft-row .message_header_stream .stream_topic",
+            "#drafts_table .overlay-message-row .message_header_stream .stream_topic",
         ),
         "tests",
     );
     assert.strictEqual(
         await common.get_text_from_selector(
             page,
-            ".draft-row .message_row:not(.private-message) .rendered_markdown.restore-draft",
+            "#drafts_table .overlay-message-row .message_row:not(.private-message) .rendered_markdown.restore-overlay-message",
         ),
         "Updated stream message",
     );
@@ -167,7 +167,7 @@ async function test_edited_draft_message(page: Page): Promise<void> {
 
 async function test_restore_private_message_draft_via_draft_overlay(page: Page): Promise<void> {
     console.log("Restoring direct message draft.");
-    await page.click(".message_row.private-message .restore-draft");
+    await page.click(".message_row.private-message .restore-overlay-message");
     await wait_for_drafts_to_disappear(page);
     await page.waitForSelector("#compose-direct-recipient", {visible: true});
     await common.check_compose_state(page, {
@@ -189,7 +189,7 @@ async function test_delete_draft(page: Page): Promise<void> {
     await page.waitForSelector(drafts_button, {visible: true});
     await page.click(drafts_button);
     await wait_for_drafts_to_appear(page);
-    await page.click("#drafts_table .message_row.private-message .delete-draft");
+    await page.click("#drafts_table .message_row.private-message .delete-overlay-message");
     const drafts_count = await get_drafts_count(page);
     assert.strictEqual(drafts_count, 1, "Draft not deleted.");
     await page.waitForSelector("#drafts_table .message_row.private-message", {hidden: true});
@@ -223,14 +223,14 @@ async function test_save_draft_by_reloading(page: Page): Promise<void> {
     assert.strictEqual(
         await common.get_text_from_selector(
             page,
-            ".draft-row .message_header_private_message .stream_label",
+            "#drafts_table .overlay-message-row .message_header_private_message .stream_label",
         ),
         "You and Cordelia, Lear's daughter",
     );
     assert.strictEqual(
         await common.get_text_from_selector(
             page,
-            ".draft-row:nth-last-child(2) .rendered_markdown.restore-draft",
+            "#drafts_table .overlay-message-row:nth-last-child(2) .rendered_markdown.restore-overlay-message",
         ),
         "Test direct message draft.",
     );

web/src/drafts.js

@@ -427,12 +427,12 @@ function remove_draft($draft_row) {
 
     $draft_row.remove();
 
-    if ($("#drafts_table .draft-row").length === 0) {
+    if ($("#drafts_table .overlay-message-row").length === 0) {
         $("#drafts_table .no-drafts").show();
     }
     update_rendered_drafts(
-        $("#drafts-from-conversation .draft-row").length > 0,
-        $("#other-drafts .draft-row").length > 0,
+        $("#drafts-from-conversation .overlay-message-row").length > 0,
+        $("#other-drafts .overlay-message-row").length > 0,
     );
 }
 
@@ -551,8 +551,8 @@ const keyboard_handling_context = {
     },
     items_container_selector: "drafts-container",
     items_list_selector: "drafts-list",
-    row_item_selector: "draft-row",
-    box_item_selector: "draft-info-box",
+    row_item_selector: "overlay-message-row",
+    box_item_selector: "overlay-message-info-box",
     id_attribute_name: "data-draft-id",
 };
 
@@ -606,11 +606,11 @@ export function launch() {
         });
         const $drafts_table = $("#drafts_table");
         $drafts_table.append(rendered);
-        if ($("#drafts_table .draft-row").length > 0) {
+        if ($("#drafts_table .overlay-message-row").length > 0) {
             $("#drafts_table .no-drafts").hide();
             // Update possible dynamic elements.
             const $rendered_drafts = $drafts_table.find(
-                ".message_content.rendered_markdown.restore-draft",
+                ".message_content.rendered_markdown.restore-overlay-message",
             );
             $rendered_drafts.each(function () {
                 rendered_markdown.update_elements($(this));
@@ -620,23 +620,26 @@ export function launch() {
     }
 
     function setup_event_handlers() {
-        $(".restore-draft").on("click", function (e) {
+        $("#drafts_table .restore-overlay-message").on("click", function (e) {
             if (document.getSelection().type === "Range") {
                 return;
             }
 
             e.stopPropagation();
 
-            const $draft_row = $(this).closest(".draft-row");
+            const $draft_row = $(this).closest(".overlay-message-row");
             const $draft_id = $draft_row.data("draft-id");
             restore_draft($draft_id);
         });
 
-        $(".draft_controls .delete-draft").on("click", function () {
-            const $draft_row = $(this).closest(".draft-row");
+        $("#drafts_table .overlay_message_controls .delete-overlay-message").on(
+            "click",
+            function () {
+                const $draft_row = $(this).closest(".overlay-message-row");
 
-            remove_draft($draft_row);
-        });
+                remove_draft($draft_row);
+            },
+        );
     }
 
     const drafts = draft_model.get();
@@ -685,7 +688,7 @@ export function initialize() {
 
     set_count(Object.keys(draft_model.get()).length);
 
-    $("body").on("focus", ".draft-info-box", (e) => {
+    $("body").on("focus", "#drafts_table .overlay-message-info-box", (e) => {
         messages_overlay_ui.activate_element(e.target, keyboard_handling_context);
     });
 }

web/src/messages_overlay_ui.ts

@@ -89,7 +89,7 @@ function row_before_focus(context: Context): JQuery {
         $focused_row.parent().attr("id") === "other-drafts" &&
         $("#drafts-from-conversation").is(":visible")
     ) {
-        return $($("#drafts-from-conversation").children(".draft-row:visible").last());
+        return $($("#drafts-from-conversation").children(".overlay-message-row:visible").last());
     }
 
     return $prev_row;
@@ -106,7 +106,7 @@ function row_after_focus(context: Context): JQuery {
         $focused_row.parent().attr("id") === "drafts-from-conversation" &&
         $("#other-drafts").is(":visible")
     ) {
-        return $("#other-drafts").children(".draft-row:visible").first();
+        return $("#other-drafts").children(".overlay-message-row:visible").first();
     }
     return $next_row;
 }

web/src/rows.js

@@ -71,7 +71,7 @@ export function visible_range(start_id, end_id) {
 }
 
 export function is_draft_row($row) {
-    return $row.find(".restore-draft").length >= 1;
+    return $row.find("#drafts_table .restore-overlay-message").length >= 1;
 }
 
 export function id($message_row) {

web/styles/dark_theme.css

@@ -612,7 +612,7 @@
     #compose-content,
     .message_list .recipient_row,
     .message_row,
-    .draft-row .draft-info-box,
+    .overlay-message-row .overlay-message-info-box,
     .preview_message_area {
         border-color: hsl(0deg 0% 0% / 40%);
     }

web/templates/draft.hbs

@@ -1,5 +1,5 @@
-<div class="draft-row overlay-message-row" data-draft-id="{{draft_id}}">
-    <div class="draft-info-box overlay-message-info-box" tabindex="0">
+<div class="overlay-message-row" data-draft-id="{{draft_id}}">
+    <div class="overlay-message-info-box" tabindex="0">
         {{#if is_stream}}
         <div class="message_header message_header_stream">
             <div class="message-header-contents" style="background: {{recipient_bar_color}};">
@@ -34,12 +34,12 @@
             <div class="messagebox">
                 <div class="messagebox-content">
                     <div class="message_top_line">
-                        <div class="draft_controls overlay_message_controls">
-                            <i class="fa fa-pencil fa-lg restore-draft restore-overlay-message tippy-zulip-tooltip" aria-hidden="true" data-tooltip-template-id="restore-draft-tooltip-template"></i>
-                            <i class="fa fa-trash-o fa-lg delete-draft delete-overlay-message tippy-zulip-tooltip" aria-hidden="true" data-tooltip-template-id="delete-draft-tooltip-template"></i>
+                        <div class="overlay_message_controls">
+                            <i class="fa fa-pencil fa-lg restore-overlay-message tippy-zulip-tooltip" aria-hidden="true" data-tooltip-template-id="restore-draft-tooltip-template"></i>
+                            <i class="fa fa-trash-o fa-lg delete-overlay-message tippy-zulip-tooltip" aria-hidden="true" data-tooltip-template-id="delete-draft-tooltip-template"></i>
                         </div>
                     </div>
-                    <div class="message_content rendered_markdown restore-draft restore-overlay-message tippy-zulip-delayed-tooltip" data-tooltip-template-id="restore-draft-tooltip-template">{{rendered_markdown content}}</div>
+                    <div class="message_content rendered_markdown restore-overlay-message tippy-zulip-delayed-tooltip" data-tooltip-template-id="restore-draft-tooltip-template">{{rendered_markdown content}}</div>
                 </div>
             </div>
         </div>

web/tests/drafts.test.js

@@ -609,11 +609,11 @@ test("format_drafts", ({override_rewire, mock_template}) => {
     const $unread_count = $("<unread-count-stub>");
     $(".top_left_drafts").set_find_results(".unread_count", $unread_count);
 
-    $.create("#drafts_table .draft-row", {children: []});
+    $.create("#drafts_table .overlay-message-row", {children: []});
     drafts.launch();
 
     $.clear_all_elements();
-    $.create("#drafts_table .draft-row", {children: []});
+    $.create("#drafts_table .overlay-message-row", {children: []});
     $("#draft_overlay").css = () => {};
 
     override_rewire(sub_store, "get", (stream_id) => {
@@ -769,6 +769,6 @@ test("filter_drafts", ({override_rewire, mock_template}) => {
     compose_state.set_message_type("private");
     compose_state.private_message_recipient(aaron.email);
 
-    $.create("#drafts_table .draft-row", {children: []});
+    $.create("#drafts_table .overlay-message-row", {children: []});
     drafts.launch();
 });