compose: Rename recipient selector classes to be more descriptive.

web/e2e-tests/compose.test.ts

@@ -34,7 +34,7 @@ async function test_send_messages(page: Page): Promise<void> {
 
 async function test_stream_compose_keyboard_shortcut(page: Page): Promise<void> {
     await page.keyboard.press("KeyC");
-    await page.waitForSelector("#stream-message", {visible: true});
+    await page.waitForSelector("#compose-stream-recipient", {visible: true});
     await check_compose_form_empty(page);
     await close_compose_box(page);
 }
@@ -94,14 +94,14 @@ async function test_reply_with_r_shortcut(page: Page): Promise<void> {
 }
 
 async function test_open_close_compose_box(page: Page): Promise<void> {
-    await page.waitForSelector("#stream-message", {visible: true});
+    await page.waitForSelector("#compose-stream-recipient", {visible: true});
     await close_compose_box(page);
-    await page.waitForSelector("#stream-message", {hidden: true});
+    await page.waitForSelector("#compose-stream-recipient", {hidden: true});
 
     await page.keyboard.press("KeyX");
-    await page.waitForSelector("#private-message", {visible: true});
+    await page.waitForSelector("#compose-private-recipient", {visible: true});
     await close_compose_box(page);
-    await page.waitForSelector("#private-message", {hidden: true});
+    await page.waitForSelector("#compose-private-recipient", {hidden: true});
 }
 
 async function test_narrow_to_private_messages_with_cordelia(page: Page): Promise<void> {

web/e2e-tests/drafts.test.ts

@@ -34,7 +34,7 @@ async function test_empty_drafts(page: Page): Promise<void> {
 async function create_stream_message_draft(page: Page): Promise<void> {
     console.log("Creating stream message draft");
     await page.keyboard.press("KeyC");
-    await page.waitForSelector("#stream-message", {visible: true});
+    await page.waitForSelector("#compose-stream-recipient", {visible: true});
     await common.fill_form(page, "form#send_message_form", {
         stream_message_recipient_stream: "Denmark",
         stream_message_recipient_topic: "tests",
@@ -114,7 +114,7 @@ async function test_restore_message_draft_via_draft_overlay(page: Page): Promise
     console.log("Restoring stream message draft");
     await page.click("#drafts_table .message_row:not(.private-message) .restore-draft");
     await wait_for_drafts_to_disappear(page);
-    await page.waitForSelector("#stream-message", {visible: true});
+    await page.waitForSelector("#compose-stream-recipient", {visible: true});
     await page.waitForSelector("#preview_message_area", {hidden: true});
     await common.check_compose_state(page, {
         stream: "Denmark",
@@ -169,7 +169,7 @@ async function test_restore_private_message_draft_via_draft_overlay(page: Page):
     console.log("Restoring private message draft.");
     await page.click(".message_row.private-message .restore-draft");
     await wait_for_drafts_to_disappear(page);
-    await page.waitForSelector("#private-message", {visible: true});
+    await page.waitForSelector("#compose-private-recipient", {visible: true});
     await common.check_compose_state(page, {
         content: "Test private message.",
     });
@@ -201,7 +201,7 @@ async function test_delete_draft(page: Page): Promise<void> {
 async function test_save_draft_by_reloading(page: Page): Promise<void> {
     console.log("Saving draft by reloading.");
     await page.keyboard.press("KeyX");
-    await page.waitForSelector("#private-message", {visible: true});
+    await page.waitForSelector("#compose-private-recipient", {visible: true});
     await common.fill_form(page, "form#send_message_form", {
         content: "Test private message draft.",
     });

web/src/compose_actions.js

@@ -39,8 +39,8 @@ function hide_box() {
     // This is the main hook for saving drafts when closing the compose box.
     drafts.update_draft();
     blur_compose_inputs();
-    $("#stream-message").hide();
-    $("#private-message").hide();
+    $("#compose-stream-recipient").hide();
+    $("#compose-private-recipient").hide();
     $(".new_message_textarea").css("min-height", "");
     compose_fade.clear_compose();
     $(".message_comp").hide();
@@ -80,13 +80,13 @@ export function set_focus(msg_type, opts) {
 
 function show_compose_box(msg_type, opts) {
     if (msg_type === "stream") {
-        $("#private-message").hide();
-        $("#stream-message").show();
+        $("#compose-private-recipient").hide();
+        $("#compose-stream-recipient").show();
         $("#stream_toggle").addClass("active");
         $("#private_message_toggle").removeClass("active");
     } else {
-        $("#private-message").show();
-        $("#stream-message").hide();
+        $("#compose-private-recipient").show();
+        $("#compose-stream-recipient").hide();
         $("#stream_toggle").removeClass("active");
         $("#private_message_toggle").addClass("active");
     }
@@ -199,7 +199,7 @@ export function complete_starting_tasks(msg_type, opts) {
 
     maybe_scroll_up_selected_message();
     compose_fade.start_compose(msg_type);
-    stream_bar.decorate(opts.stream, $("#stream-message .message_header_stream"), true);
+    stream_bar.decorate(opts.stream, $("#compose-stream-recipient .message_header_stream"), true);
     $(document).trigger(new $.Event("compose_started.zulip", opts));
     update_placeholder_text();
     update_narrow_to_recipient_visibility();

web/src/ui_init.js

@@ -367,7 +367,11 @@ export function initialize_kitchen_sink_stuff() {
     });
 
     $("#stream_message_recipient_stream").on("change", function () {
-        stream_bar.decorate(this.value, $("#stream-message .message_header_stream"), true);
+        stream_bar.decorate(
+            this.value,
+            $("#compose-stream-recipient .message_header_stream"),
+            true,
+        );
     });
 
     $(window).on("blur", () => {

web/styles/compose.css

@@ -133,7 +133,7 @@
         width: 100%;
     }
 
-    #private-message .to_text {
+    #compose-private-recipient .to_text {
         vertical-align: middle;
 
         font-weight: 600;
@@ -632,12 +632,12 @@ input.recipient_box {
     }
 }
 
-#stream-message,
-#private-message {
+#compose-stream-recipient,
+#compose-private-recipient {
     display: flex;
 }
 
-#private-message {
+#compose-private-recipient {
     align-items: center;
     width: 100%;
 }

web/templates/compose.hbs

@@ -67,7 +67,7 @@
                                 {{tooltip_hotkey_hints "Esc"}}
                             </template>
                         </div>
-                        <div id="stream-message" class="order-1">
+                        <div id="compose-stream-recipient" class="order-1">
                             <div class="stream-selection-header-colorblock message_header_stream left_part" tab-index="-1"></div>
                             <div class="right_part">
                                 <span id="compose-lock-icon">
@@ -83,7 +83,7 @@
                                 <input type="text" class="recipient_box" name="stream_message_recipient_topic" id="stream_message_recipient_topic" maxlength="{{ max_topic_length }}" value="" placeholder="{{t 'Topic' }}" autocomplete="off" tabindex="0" aria-label="{{t 'Topic' }}" />
                             </div>
                         </div>
-                        <div id="private-message" class="order-1">
+                        <div id="compose-private-recipient" class="order-1">
                             <div class="to_text">
                                 <span>{{t 'To' }}:</span>
                             </div>

web/tests/compose_actions.test.js

@@ -126,8 +126,8 @@ test("start", ({override, override_rewire}) => {
     let opts = {};
     start("stream", opts);
 
-    assert_visible("#stream-message");
-    assert_hidden("#private-message");
+    assert_visible("#compose-stream-recipient");
+    assert_hidden("#compose-private-recipient");
 
     assert.equal(compose_state.stream_name(), "stream1");
     assert.equal(compose_state.topic(), "topic1");
@@ -187,8 +187,8 @@ test("start", ({override, override_rewire}) => {
 
     start("private", opts);
 
-    assert_hidden("#stream-message");
-    assert_visible("#private-message");
+    assert_hidden("#compose-stream-recipient");
+    assert_visible("#compose-private-recipient");
 
     assert.equal(compose_state.private_message_recipient(), "foo@example.com");
     assert.equal($("#compose-textarea").val(), "hello");
@@ -224,7 +224,7 @@ test("start", ({override, override_rewire}) => {
     assert.ok(abort_xhr_called);
     assert.ok(pill_cleared);
     assert_visible("#compose_controls");
-    assert_hidden("#private-message");
+    assert_hidden("#compose-private-recipient");
     assert.ok(!compose_state.composing());
 });