From d7c2577ffbae07e310e7b7c78e1c251af22b9d25 Mon Sep 17 00:00:00 2001
From: Steve Howell <showell@zulipchat.com>
Date: Tue, 13 Nov 2018 16:16:02 +0000
Subject: [PATCH] subject -> topic: Rename compose fields.

The stream/topic edit areas now have these ids:

        #stream_message_recipient_stream
        #stream_message_recipient_topic

They are pretty verbose, but being able to grep
for these without noise does have some value.
---
 frontend_tests/casper_lib/common.js           | 10 ++++++
 frontend_tests/casper_tests/04-compose.js     | 36 ++++++++++++++++---
 frontend_tests/casper_tests/11-mention.js     |  4 +--
 frontend_tests/casper_tests/14-drafts.js      | 12 +++----
 frontend_tests/node_tests/compose.js          | 18 +++++-----
 frontend_tests/node_tests/compose_actions.js  | 22 ++++++------
 frontend_tests/node_tests/compose_fade.js     |  4 +--
 .../node_tests/composebox_typeahead.js        | 22 ++++++------
 static/js/compose.js                          | 17 ++++-----
 static/js/compose_actions.js                  | 14 ++++----
 static/js/compose_fade.js                     |  4 +--
 static/js/compose_state.js                    |  4 +--
 static/js/composebox_typeahead.js             | 12 +++----
 static/js/ui_init.js                          |  4 ++-
 static/styles/compose.scss                    |  8 ++---
 static/styles/media.scss                      |  2 +-
 templates/zerver/app/compose.html             |  4 +--
 17 files changed, 118 insertions(+), 79 deletions(-)

diff --git a/frontend_tests/casper_lib/common.js b/frontend_tests/casper_lib/common.js
index d923b3ac39..57224ba680 100644
--- a/frontend_tests/casper_lib/common.js
+++ b/frontend_tests/casper_lib/common.js
@@ -240,6 +240,16 @@ exports.then_send_message = function (type, params) {
         exports.pm_recipient.set(params.recipient);
         delete params.recipient;
 
+        if (params.stream) {
+            params.stream_message_recipient_stream = params.stream;
+            delete params.stream;
+        }
+
+        if (params.subject) {
+            params.stream_message_recipient_topic = params.subject;
+            delete params.subject;
+        }
+
         casper.fill('form[action^="/json/messages"]', params);
 
         exports.turn_off_press_enter_to_send();
diff --git a/frontend_tests/casper_tests/04-compose.js b/frontend_tests/casper_tests/04-compose.js
index c0801e89d8..23b7caa872 100644
--- a/frontend_tests/casper_tests/04-compose.js
+++ b/frontend_tests/casper_tests/04-compose.js
@@ -39,10 +39,22 @@ casper.then(function () {
     casper.page.sendEvent('keypress', "c");
 });
 
+
+function check_compose_is_cleared() {
+    common.check_form(
+        '#send_message_form',
+        {
+            stream_message_recipient_stream: '',
+            stream_message_recipient_topic: '',
+        },
+        "Stream empty on new compose"
+    );
+}
+
 casper.then(function () {
     casper.waitUntilVisible('#compose', function () {
         casper.test.assertVisible('#stream-message', 'Stream input box visible');
-        common.check_form('#send_message_form', {stream: '', subject: ''}, "Stream empty on new compose");
+        check_compose_is_cleared();
         casper.click('body');
         casper.page.sendEvent('keypress', "x");
     });
@@ -58,7 +70,7 @@ casper.then(function () {
 
 casper.then(function () {
     casper.waitUntilVisible('#stream-message', function () {
-        common.check_form('#send_message_form', {stream: '', subject: ''}, "Stream empty on new compose");
+        check_compose_is_cleared();
 
         // Check that when you reply to a message it pre-populates the stream and subject fields
         casper.click('body');
@@ -73,7 +85,14 @@ casper.then(function () {
 
 casper.then(function () {
     casper.waitUntilVisible('#stream-message', function () {
-        common.check_form('#send_message_form', {stream: "Verona", subject: "Reply test"}, "Stream populated after reply by click");
+        common.check_form(
+            '#send_message_form',
+            {
+                stream_message_recipient_stream: "Verona",
+                stream_message_recipient_topic: "Reply test",
+            },
+            "Stream populated after reply by click"
+        );
         // Or recipient field
         casper.click('body');
         casper.clickLabel("And reply to this message");
@@ -92,7 +111,14 @@ casper.then(function () {
 
 casper.then(function () {
     casper.waitUntilVisible('#stream-message', function () {
-        common.check_form('#send_message_form', {stream: "Verona", subject: "Reply test"}, "Stream populated after reply with `r`");
+        common.check_form(
+            '#send_message_form',
+            {
+                stream_message_recipient_stream: "Verona",
+                stream_message_recipient_topic: "Reply test",
+            },
+            "Stream populated after reply with `r`"
+        );
 
         // Test "closing" the compose box
         casper.click('body');
@@ -124,7 +150,7 @@ casper.waitUntilVisible('li[data-user-ids-string="3"].expanded_private_message.a
 casper.then(function () {
     casper.waitUntilVisible('#compose', function () {
         casper.test.assertEval(function () {
-            return document.activeElement === $('.compose_table #stream')[0];
+            return document.activeElement === $('.compose_table #stream_message_recipient_stream')[0];
         }, 'Stream box focused after narrowing to PMs with a user and pressing `c`');
     });
 });
diff --git a/frontend_tests/casper_tests/11-mention.js b/frontend_tests/casper_tests/11-mention.js
index 675129be65..162e6bc357 100644
--- a/frontend_tests/casper_tests/11-mention.js
+++ b/frontend_tests/casper_tests/11-mention.js
@@ -9,8 +9,8 @@ casper.waitUntilVisible('#zhome', function () {
 
 casper.then(function () {
     casper.fill('form[action^="/json/messages"]', {
-        stream:  'Verona',
-        subject: 'Test mention all',
+        stream_message_recipient_stream:  'Verona',
+        stream_message_recipient_topic: 'Test mention all',
     });
 });
 common.select_item_via_typeahead('#compose-textarea', '@**all**', 'all');
diff --git a/frontend_tests/casper_tests/14-drafts.js b/frontend_tests/casper_tests/14-drafts.js
index ebdf7149a3..07dbc7c0d6 100644
--- a/frontend_tests/casper_tests/14-drafts.js
+++ b/frontend_tests/casper_tests/14-drafts.js
@@ -49,8 +49,8 @@ casper.then(function () {
     casper.page.sendEvent('keypress', "c");
     casper.waitUntilVisible('#stream-message', function () {
         casper.fill('form#send_message_form', {
-            stream: 'all',
-            subject: 'tests',
+            stream_message_recipient_stream: 'all',
+            stream_message_recipient_topic: 'tests',
             content: 'Test Stream Message',
         }, false);
         casper.click("#compose_close");
@@ -107,8 +107,8 @@ casper.then(function () {
         casper.test.assertVisible('#stream-message', 'Stream Message Box Restored');
         casper.test.assertNotVisible('#preview_message_area', 'Preview Was Hidden');
         common.check_form('form#send_message_form', {
-            stream: 'all',
-            subject: 'tests',
+            stream_message_recipient_stream: 'all',
+            stream_message_recipient_topic: 'tests',
             content: 'Test Stream Message',
         }, "Stream message box filled with draft content");
         casper.test.assertSelectorHasText('title', 'tests - Zulip Dev - Zulip', 'Narrowed to topic');
@@ -118,8 +118,8 @@ casper.then(function () {
 casper.then(function () {
     casper.test.info('Editing Stream Message Draft');
     casper.fill('form#send_message_form', {
-        stream: 'all',
-        subject: 'tests',
+        stream_message_recipient_stream: 'all',
+        stream_message_recipient_topic: 'tests',
         content: 'Updated Stream Message',
     }, false);
     casper.click("#compose_close");
diff --git a/frontend_tests/node_tests/compose.js b/frontend_tests/node_tests/compose.js
index f2374c6fca..a639224e15 100644
--- a/frontend_tests/node_tests/compose.js
+++ b/frontend_tests/node_tests/compose.js
@@ -116,7 +116,7 @@ run_test('validate_stream_message_address_info', () => {
     stream_data.add_sub('social', sub);
     assert(compose.validate_stream_message_address_info('social'));
 
-    $('#stream').select(noop);
+    $('#stream_message_recipient_stream').select(noop);
     assert(!compose.validate_stream_message_address_info('foobar'));
     assert.equal($('#compose-error-msg').html(), "translated: <p>The stream <b>foobar</b> does not exist.</p><p>Manage your subscriptions <a href='#streams/all'>on your Streams page</a>.</p>");
 
@@ -253,14 +253,14 @@ run_test('validate', () => {
 
     compose_state.set_message_type('stream');
     compose_state.stream_name('');
-    $("#stream").select(noop);
+    $("#stream_message_recipient_stream").select(noop);
     assert(!compose.validate());
     assert.equal($('#compose-error-msg').html(), i18n.t('Please specify a stream'));
 
     compose_state.stream_name('Denmark');
     page_params.realm_mandatory_topics = true;
     compose_state.topic('');
-    $("#subject").select(noop);
+    $("#stream_message_recipient_topic").select(noop);
     assert(!compose.validate());
     assert.equal($('#compose-error-msg').html(), i18n.t('Please specify a topic'));
 });
@@ -949,7 +949,7 @@ run_test('initialize', () => {
 });
 
 run_test('update_fade', () => {
-    var selector = '#stream,#subject,#private_message_recipient';
+    var selector = '#stream_message_recipient_stream,#stream_message_recipient_topic,#private_message_recipient';
     var keyup_handler_func = $(selector).get_on_handler('keyup');
 
     var set_focused_recipient_checked = false;
@@ -1213,7 +1213,7 @@ run_test('on_events', () => {
 
         // !sub will result false here and we check the failure code path.
         blueslip.set_test_data('warn', 'Stream no longer exists: no-stream');
-        $('#stream').val('no-stream');
+        $('#stream_message_recipient_stream').val('no-stream');
         container.data = function (field) {
             assert.equal(field, 'useremail');
             return 'foo@bar.com';
@@ -1232,7 +1232,7 @@ run_test('on_events', () => {
 
         // !sub will result in true here and we check the success code path.
         stream_data.add_sub('test', subscription);
-        $('#stream').val('test');
+        $('#stream_message_recipient_stream').val('test');
         var all_invite_children_called = false;
         $("#compose_invite_users").children = function () {
             all_invite_children_called = true;
@@ -1292,7 +1292,7 @@ run_test('on_events', () => {
         assert(compose_not_subscribed_called);
 
         stream_data.add_sub('test', subscription);
-        $('#stream').val('test');
+        $('#stream_message_recipient_stream').val('test');
         $("#compose-send-status").show();
 
         handler(event);
@@ -1582,8 +1582,8 @@ run_test('create_message_object', () => {
     stream_data.add_sub('social', sub);
 
     var page = {
-        '#stream': 'social',
-        '#subject': 'lunch',
+        '#stream_message_recipient_stream': 'social',
+        '#stream_message_recipient_topic': 'lunch',
         '#compose-textarea': 'burrito',
     };
 
diff --git a/frontend_tests/node_tests/compose_actions.js b/frontend_tests/node_tests/compose_actions.js
index ac00a4d2ec..3b97ff06ca 100644
--- a/frontend_tests/node_tests/compose_actions.js
+++ b/frontend_tests/node_tests/compose_actions.js
@@ -129,8 +129,8 @@ run_test('start', () => {
     assert_visible('#stream-message');
     assert_hidden('#private-message');
 
-    assert.equal($('#stream').val(), 'stream1');
-    assert.equal($('#subject').val(), 'topic1');
+    assert.equal($('#stream_message_recipient_stream').val(), 'stream1');
+    assert.equal($('#stream_message_recipient_topic').val(), 'topic1');
     assert.equal(compose_state.get_message_type(), 'stream');
     assert(compose_state.composing());
 
@@ -206,7 +206,7 @@ run_test('respond_to_message', () => {
     };
 
     respond_to_message(opts);
-    assert.equal($('#stream').val(), 'devel');
+    assert.equal($('#stream_message_recipient_stream').val(), 'devel');
 });
 
 run_test('reply_with_mention', () => {
@@ -229,7 +229,7 @@ run_test('reply_with_mention', () => {
     };
 
     reply_with_mention(opts);
-    assert.equal($('#stream').val(), 'devel');
+    assert.equal($('#stream_message_recipient_stream').val(), 'devel');
     assert.equal(syntax_to_insert, '@**Bob Roberts**');
     assert(compose_state.has_message_content());
 
@@ -248,7 +248,7 @@ run_test('reply_with_mention', () => {
     people.add_in_realm(bob_2);
 
     reply_with_mention(opts);
-    assert.equal($('#stream').val(), 'devel');
+    assert.equal($('#stream_message_recipient_stream').val(), 'devel');
     assert.equal(syntax_to_insert, '@**Bob Roberts|40**');
     assert(compose_state.has_message_content());
 });
@@ -304,19 +304,19 @@ run_test('quote_and_reply', () => {
 });
 
 run_test('get_focus_area', () => {
-    assert.equal(get_focus_area('private', {}), 'private_message_recipient');
+    assert.equal(get_focus_area('private', {}), '#private_message_recipient');
     assert.equal(get_focus_area('private', {
-        private_message_recipient: 'bob@example.com'}), 'compose-textarea');
-    assert.equal(get_focus_area('stream', {}), 'stream');
+        private_message_recipient: 'bob@example.com'}), '#compose-textarea');
+    assert.equal(get_focus_area('stream', {}), '#stream_message_recipient_stream');
     assert.equal(get_focus_area('stream', {stream: 'fun'}),
-                 'subject');
+                 '#stream_message_recipient_topic');
     assert.equal(get_focus_area('stream', {stream: 'fun',
                                            subject: 'more'}),
-                 'compose-textarea');
+                 '#compose-textarea');
     assert.equal(get_focus_area('stream', {stream: 'fun',
                                            subject: 'more',
                                            trigger: 'new topic button'}),
-                 'subject');
+                 '#stream_message_recipient_topic');
 });
 
 run_test('focus_in_empty_compose', () => {
diff --git a/frontend_tests/node_tests/compose_fade.js b/frontend_tests/node_tests/compose_fade.js
index 9f643c1a08..8016683355 100644
--- a/frontend_tests/node_tests/compose_fade.js
+++ b/frontend_tests/node_tests/compose_fade.js
@@ -43,13 +43,13 @@ run_test('set_focused_recipient', () => {
 
     global.$ = function (selector) {
         switch (selector) {
-        case '#stream':
+        case '#stream_message_recipient_stream':
             return {
                 val: function () {
                     return 'social';
                 },
             };
-        case '#subject':
+        case '#stream_message_recipient_topic':
             return {
                 val: function () {
                     return 'lunch';
diff --git a/frontend_tests/node_tests/composebox_typeahead.js b/frontend_tests/node_tests/composebox_typeahead.js
index 996e5929aa..79e07b59a2 100644
--- a/frontend_tests/node_tests/composebox_typeahead.js
+++ b/frontend_tests/node_tests/composebox_typeahead.js
@@ -384,7 +384,7 @@ run_test('initialize', () => {
     var expected_value;
 
     var stream_typeahead_called = false;
-    $('#stream').typeahead = function (options) {
+    $('#stream_message_recipient_stream').typeahead = function (options) {
         // options.source()
         //
         var actual_value = options.source();
@@ -418,14 +418,14 @@ run_test('initialize', () => {
     };
 
     var subject_typeahead_called = false;
-    $('#subject').typeahead = function (options) {
+    $('#stream_message_recipient_topic').typeahead = function (options) {
         var topics = ['<&>', 'even more ice', 'furniture', 'ice', 'kronor', 'more ice'];
         topic_data.get_recent_names = (stream_id) => {
             assert.equal(stream_id, sweden_stream.stream_id);
             return topics;
         };
 
-        $('#stream').val('Sweden');
+        $('#stream_message_recipient_stream').val('Sweden');
         var actual_value = options.source();
         // Topics should be sorted alphabetically, not by addition order.
         var expected_value = topics;
@@ -818,8 +818,8 @@ run_test('initialize', () => {
     page_params.enter_sends = false;
     // We manually specify it the first time because the click_func
     // doesn't exist yet.
-    $("#stream").select(noop);
-    $("#subject").select(noop);
+    $("#stream_message_recipient_stream").select(noop);
+    $("#stream_message_recipient_topic").select(noop);
     $("#private_message_recipient").select(noop);
 
     ct.initialize();
@@ -833,7 +833,7 @@ run_test('initialize', () => {
         preventDefault: noop,
     };
 
-    $('#subject').data = function () {
+    $('#stream_message_recipient_topic').data = function () {
         return { typeahead: { shown: true }};
     };
     $('form#send_message_form').keydown(event);
@@ -841,8 +841,8 @@ run_test('initialize', () => {
     var stub_typeahead_hidden = function () {
         return { typeahead: { shown: false }};
     };
-    $('#subject').data = stub_typeahead_hidden;
-    $('#stream').data = stub_typeahead_hidden;
+    $('#stream_message_recipient_topic').data = stub_typeahead_hidden;
+    $('#stream_message_recipient_stream').data = stub_typeahead_hidden;
     $('#private_message_recipient').data = stub_typeahead_hidden;
     $('#compose-textarea').data = stub_typeahead_hidden;
     $('form#send_message_form').keydown(event);
@@ -914,7 +914,7 @@ run_test('initialize', () => {
         preventDefault: noop,
     };
     // We execute .keydown() in order to make nextFocus !== false
-    $('#subject').data = function () {
+    $('#stream_message_recipient_topic').data = function () {
         return { typeahead: { shown: true }};
     };
     $('form#send_message_form').keydown(event);
@@ -929,10 +929,10 @@ run_test('initialize', () => {
     // select_on_focus()
     var focus_handler_called = false;
     var stream_one_called = false;
-    $('#stream').focus = function (f) {
+    $('#stream_message_recipient_stream').focus = function (f) {
         // This .one() function emulates the possible infinite recursion that
         // in_handler tries to avoid.
-        $('#stream').one = function (event, handler) {
+        $('#stream_message_recipient_stream').one = function (event, handler) {
             handler({ preventDefault: noop });
             f();  // This time in_handler will already be true.
             stream_one_called = true;
diff --git a/static/js/compose.js b/static/js/compose.js
index 41cc97712c..8f0671fb72 100644
--- a/static/js/compose.js
+++ b/static/js/compose.js
@@ -466,16 +466,17 @@ exports.validation_error = function (error_type, stream_name) {
     switch (error_type) {
     case "does-not-exist":
         response = i18n.t("<p>The stream <b>__stream_name__</b> does not exist.</p><p>Manage your subscriptions <a href='#streams/all'>on your Streams page</a>.</p>", context);
-        compose_error(response, $('#stream'));
+        compose_error(response, $('#stream_message_recipient_stream'));
         return false;
     case "error":
-        compose_error(i18n.t("Error checking subscription"), $("#stream"));
+        compose_error(i18n.t("Error checking subscription"),
+                      $("#stream_message_recipient_stream"));
         return false;
     case "not-subscribed":
         var sub = stream_data.get_sub(stream_name);
         var new_row = templates.render("compose_not_subscribed", {
             should_display_sub_button: sub.should_display_subscription_button});
-        compose_not_subscribed_error(new_row, $('#stream'));
+        compose_not_subscribed_error(new_row, $('#stream_message_recipient_stream'));
         return false;
     }
     return true;
@@ -493,14 +494,14 @@ exports.validate_stream_message_address_info = function (stream_name) {
 function validate_stream_message() {
     var stream_name = compose_state.stream_name();
     if (stream_name === "") {
-        compose_error(i18n.t("Please specify a stream"), $("#stream"));
+        compose_error(i18n.t("Please specify a stream"), $("#stream_message_recipient_stream"));
         return false;
     }
 
     if (page_params.realm_mandatory_topics) {
         var topic = compose_state.topic();
         if (topic === "") {
-            compose_error(i18n.t("Please specify a topic"), $("#subject"));
+            compose_error(i18n.t("Please specify a topic"), $("#stream_message_recipient_topic"));
             return false;
         }
     }
@@ -689,8 +690,8 @@ exports.needs_subscribe_warning = function (email) {
 
 
 exports.initialize = function () {
-    $('#stream,#subject,#private_message_recipient').on('keyup', update_fade);
-    $('#stream,#subject,#private_message_recipient').on('change', update_fade);
+    $('#stream_message_recipient_stream,#stream_message_recipient_topic,#private_message_recipient').on('keyup', update_fade);
+    $('#stream_message_recipient_stream,#stream_message_recipient_topic,#private_message_recipient').on('change', update_fade);
     $('#compose-textarea').on('keydown', function (event) {
         exports.handle_keydown(event, $("#compose-textarea").expectOne());
     });
@@ -775,7 +776,7 @@ exports.initialize = function () {
     $("#compose-send-status").on('click', '.sub_unsub_button', function (event) {
         event.preventDefault();
 
-        var stream_name = $('#stream').val();
+        var stream_name = $('#stream_message_recipient_stream').val();
         if (stream_name === undefined) {
             return;
         }
diff --git a/static/js/compose_actions.js b/static/js/compose_actions.js
index baad5b3a4c..0c014279a4 100644
--- a/static/js/compose_actions.js
+++ b/static/js/compose_actions.js
@@ -4,7 +4,7 @@ var exports = {};
 
 function update_lock_icon_for_stream(stream_name) {
     var icon = $("#compose-lock-icon");
-    var streamfield = $("#stream");
+    var streamfield = $("#stream_message_recipient_stream");
     if (stream_data.get_invite_only(stream_name)) {
         icon.show();
         streamfield.addClass("lock-padding");
@@ -32,19 +32,19 @@ function hide_box() {
 function get_focus_area(msg_type, opts) {
     // Set focus to "Topic" when narrowed to a stream+topic and "New topic" button clicked.
     if (msg_type === 'stream' && opts.stream && !opts.subject) {
-        return 'subject';
+        return '#stream_message_recipient_topic';
     } else if (msg_type === 'stream' && opts.stream
                || msg_type === 'private' && opts.private_message_recipient) {
         if (opts.trigger === "new topic button") {
-            return 'subject';
+            return '#stream_message_recipient_topic';
         }
-        return 'compose-textarea';
+        return '#compose-textarea';
     }
 
     if (msg_type === 'stream') {
-        return 'stream';
+        return '#stream_message_recipient_stream';
     }
-    return 'private_message_recipient';
+    return '#private_message_recipient';
 }
 // Export for testing
 exports._get_focus_area = get_focus_area;
@@ -57,7 +57,7 @@ exports.set_focus = function (msg_type, opts) {
 
     if (window.getSelection().toString() === "" ||
          opts.trigger !== "message click") {
-        var elt = $('#' + focus_area);
+        var elt = $(focus_area);
         elt.focus().select();
     }
 };
diff --git a/static/js/compose_fade.js b/static/js/compose_fade.js
index 33cddf69a8..f902a2ef21 100644
--- a/static/js/compose_fade.js
+++ b/static/js/compose_fade.js
@@ -21,8 +21,8 @@ exports.set_focused_recipient = function (msg_type) {
     };
 
     if (focused_recipient.type === "stream") {
-        var stream_name = $('#stream').val();
-        focused_recipient.subject = $('#subject').val();
+        var stream_name = $('#stream_message_recipient_stream').val();
+        focused_recipient.subject = $('#stream_message_recipient_topic').val();
         focused_recipient.stream = stream_name;
         var sub = stream_data.get_sub(stream_name);
         if (sub) {
diff --git a/static/js/compose_state.js b/static/js/compose_state.js
index e0bb98cbeb..a2d896ad39 100644
--- a/static/js/compose_state.js
+++ b/static/js/compose_state.js
@@ -40,8 +40,8 @@ function get_or_set(fieldname, keep_leading_whitespace) {
 }
 
 // TODO: Break out setters and getter into their own functions.
-exports.stream_name     = get_or_set('stream');
-exports.topic           = get_or_set('subject');
+exports.stream_name     = get_or_set('stream_message_recipient_stream');
+exports.topic           = get_or_set('stream_message_recipient_topic');
 // We can't trim leading whitespace in `compose_textarea` because
 // of the indented syntax for multi-line code blocks.
 exports.message_content = get_or_set('compose-textarea', true);
diff --git a/static/js/composebox_typeahead.js b/static/js/composebox_typeahead.js
index a848115339..bad7c9c240 100644
--- a/static/js/composebox_typeahead.js
+++ b/static/js/composebox_typeahead.js
@@ -146,8 +146,8 @@ function handle_keydown(e) {
         }
 
         // If no typeaheads are shown...
-        if (!($("#subject").data().typeahead.shown ||
-              $("#stream").data().typeahead.shown ||
+        if (!($("#stream_message_recipient_topic").data().typeahead.shown ||
+              $("#stream_message_recipient_stream").data().typeahead.shown ||
               $("#private_message_recipient").data().typeahead.shown ||
               $("#compose-textarea").data().typeahead.shown)) {
 
@@ -540,8 +540,8 @@ exports.initialize_compose_typeahead = function (selector) {
 };
 
 exports.initialize = function () {
-    select_on_focus("stream");
-    select_on_focus("subject");
+    select_on_focus("stream_message_recipient_stream");
+    select_on_focus("stream_message_recipient_topic");
     select_on_focus("private_message_recipient");
 
     // These handlers are at the "form" level so that they are called after typeahead
@@ -573,7 +573,7 @@ exports.initialize = function () {
     }
 
     // limit number of items so the list doesn't fall off the screen
-    $("#stream").typeahead({
+    $("#stream_message_recipient_stream").typeahead({
         source: function () {
             return stream_data.subscribed_streams();
         },
@@ -590,7 +590,7 @@ exports.initialize = function () {
         },
     });
 
-    $("#subject").typeahead({
+    $("#stream_message_recipient_topic").typeahead({
         source: function () {
             var stream_name = compose_state.stream_name();
             return exports.topics_seen_for(stream_name);
diff --git a/static/js/ui_init.js b/static/js/ui_init.js
index 1fbd252606..d223f14531 100644
--- a/static/js/ui_init.js
+++ b/static/js/ui_init.js
@@ -166,7 +166,9 @@ function initialize_kitchen_sink_stuff() {
         $(this).removeClass("active");
     });
 
-    $("#stream").on('blur', function () { compose_actions.decorate_stream_bar(this.value); });
+    $("#stream_message_recipient_stream").on('blur', function () {
+        compose_actions.decorate_stream_bar(this.value);
+    });
 
     $(window).on('blur', function () {
         $(document.body).addClass('window_blurred');
diff --git a/static/styles/compose.scss b/static/styles/compose.scss
index 5e028fca82..c25df6acfe 100644
--- a/static/styles/compose.scss
+++ b/static/styles/compose.scss
@@ -334,7 +334,7 @@ textarea.new_message_textarea:focus,
     -webkit-box-shadow: none;
 }
 
-#stream.recipient_box:focus {
+#stream_message_recipient_stream.recipient_box:focus {
     border-left: none;
 }
 
@@ -344,20 +344,20 @@ input.recipient_box {
     border-radius: 3px;
 }
 
-#stream.recipient_box {
+#stream_message_recipient_stream.recipient_box {
     width: 20%;
     border-radius: 0px 3px 3px 0px;
     border-left: 0px;
     min-width: 120px;
 }
 
-#subject.recipient_box {
+#stream_message_recipient_topic.recipient_box {
     width: calc(20% - -14px);
     min-width: 140px;
     max-width: 165px;
 }
 
-#stream.recipient_box.lock-padding {
+#stream_message_recipient_stream.recipient_box.lock-padding {
     padding-left: 18px;
 }
 
diff --git a/static/styles/media.scss b/static/styles/media.scss
index defd0d31db..5f6729fec5 100644
--- a/static/styles/media.scss
+++ b/static/styles/media.scss
@@ -326,7 +326,7 @@
 }
 
 @media (max-width: 370px) {
-    #subject.recipient_box {
+    #stream_message_recipient_topic.recipient_box {
         width: calc(100% - 175px);
         min-width: 95px;
     }
diff --git a/templates/zerver/app/compose.html b/templates/zerver/app/compose.html
index bfe689db9a..d4dd29106c 100644
--- a/templates/zerver/app/compose.html
+++ b/templates/zerver/app/compose.html
@@ -68,9 +68,9 @@
                                 <span id="compose-lock-icon">
                                     <i class="fa fa-lock" title="{{ _('This is a private stream') }}" aria-hidden="true"></i>
                                 </span>
-                                <input type="text" class="recipient_box" name="stream" id="stream" maxlength="30" value="" placeholder="{{ _('Stream') }}" autocomplete="off" tabindex="0" aria-label="{{ _('Stream') }}" />
+                                <input type="text" class="recipient_box" name="stream_message_recipient_stream" id="stream_message_recipient_stream" maxlength="30" value="" placeholder="{{ _('Stream') }}" autocomplete="off" tabindex="0" aria-label="{{ _('Stream') }}" />
                                 <i class="fa fa-angle-right" aria-hidden="true"></i>
-                                <input type="text" class="recipient_box" name="subject" id="subject" maxlength="60" value="" placeholder="{{ _('Topic') }}" autocomplete="off" tabindex="0" aria-label="{{ _('Topic') }}" />
+                                <input type="text" class="recipient_box" name="stream_message_recipient_topic" id="stream_message_recipient_topic" maxlength="60" value="" placeholder="{{ _('Topic') }}" autocomplete="off" tabindex="0" aria-label="{{ _('Topic') }}" />
                             </div>
                         </div>
                         <div id="private-message">