settings: Rename classes for display settings elements.

We rename the class of display setting elements by prefixing
them with 'setting_' for clarity.

frontend_tests/puppeteer_tests/settings.ts

@@ -299,8 +299,8 @@ async function test_alert_words_section(page: Page): Promise<void> {
 }
 
 async function change_language(page: Page, language_data_code: string): Promise<void> {
-    await page.waitForSelector("#user-display-settings .default_language", {visible: true});
-    await page.click("#user-display-settings .default_language");
+    await page.waitForSelector("#user-display-settings .setting_default_language", {visible: true});
+    await page.click("#user-display-settings .setting_default_language");
     await page.waitForSelector("#user_default_language_modal", {visible: true});
     const language_selector = `a[data-code="${CSS.escape(language_data_code)}"]`;
     await page.click(language_selector);
@@ -313,10 +313,10 @@ async function check_language_setting_status(page: Page): Promise<void> {
 }
 
 async function assert_language_changed_to_chinese(page: Page): Promise<void> {
-    await page.waitForSelector("#user-display-settings .default_language", {visible: true});
+    await page.waitForSelector("#user-display-settings .setting_default_language", {visible: true});
     const default_language = await common.get_text_from_selector(
         page,
-        "#user-display-settings .default_language",
+        "#user-display-settings .setting_default_language",
     );
     assert.strictEqual(
         default_language,
@@ -342,7 +342,7 @@ async function test_default_language_setting(page: Page): Promise<void> {
     // Check that the saved indicator appears
     await check_language_setting_status(page);
     await page.click(".reload_link");
-    await page.waitForSelector("#user-display-settings .default_language", {visible: true});
+    await page.waitForSelector("#user-display-settings .setting_default_language", {visible: true});
     await assert_language_changed_to_chinese(page);
     await test_i18n_language_precedence(page);
     await page.waitForSelector(display_settings_section, {visible: true});
@@ -357,7 +357,7 @@ async function test_default_language_setting(page: Page): Promise<void> {
     await page.waitForSelector(display_settings_section, {visible: true});
     await page.click(display_settings_section);
     await page.waitForSelector("#user-display-settings .language-settings-status", {visible: true});
-    await page.waitForSelector("#user-display-settings .default_language", {visible: true});
+    await page.waitForSelector("#user-display-settings .setting_default_language", {visible: true});
 }
 
 async function test_notifications_section(page: Page): Promise<void> {

static/js/settings_display.js

@@ -46,18 +46,18 @@ export function set_up() {
 
     container.find(".display-settings-status").hide();
 
-    container.find(".demote_inactive_streams").val(user_settings.demote_inactive_streams);
+    container.find(".setting_demote_inactive_streams").val(user_settings.demote_inactive_streams);
 
-    container.find(".color_scheme").val(user_settings.color_scheme);
+    container.find(".setting_color_scheme").val(user_settings.color_scheme);
 
-    container.find(".default_view").val(user_settings.default_view);
+    container.find(".setting_default_view").val(user_settings.default_view);
 
     container
-        .find(".twenty_four_hour_time")
+        .find(".setting_twenty_four_hour_time")
         .val(JSON.stringify(user_settings.twenty_four_hour_time));
 
     container
-        .find(`.emojiset_choice[value="${CSS.escape(user_settings.emojiset)}"]`)
+        .find(`.setting_emojiset_choice[value="${CSS.escape(user_settings.emojiset)}"]`)
         .prop("checked", true);
 
     $(`${CSS.escape(language_modal_elem)} [data-dismiss]`).on("click", () => {
@@ -121,23 +121,23 @@ export function set_up() {
             );
         });
 
-    container.find(".default_language").on("click", (e) => {
+    container.find(".setting_default_language").on("click", (e) => {
         e.preventDefault();
         e.stopPropagation();
         overlays.open_modal(language_modal_elem);
     });
 
-    container.find(".demote_inactive_streams").on("change", function () {
+    container.find(".setting_demote_inactive_streams").on("change", function () {
         const data = {demote_inactive_streams: this.value};
         change_display_setting(data, container, patch_url, ".display-settings-status");
     });
 
-    container.find(".color_scheme").on("change", function () {
+    container.find(".setting_color_scheme").on("change", function () {
         const data = {color_scheme: this.value};
         change_display_setting(data, container, patch_url, ".display-settings-status");
     });
 
-    container.find(".default_view").on("change", function () {
+    container.find(".setting_default_view").on("change", function () {
         const data = {default_view: this.value};
         change_display_setting(data, container, patch_url, ".display-settings-status");
     });
@@ -146,12 +146,12 @@ export function set_up() {
         window.location.reload();
     });
 
-    container.find(".twenty_four_hour_time").on("change", function () {
+    container.find(".setting_twenty_four_hour_time").on("change", function () {
         const data = {twenty_four_hour_time: this.value};
         change_display_setting(data, container, patch_url, ".time-settings-status");
     });
 
-    container.find(".emojiset_choice").on("click", function () {
+    container.find(".setting_emojiset_choice").on("click", function () {
         const data = {emojiset: $(this).val()};
         const current_emojiset = user_settings.emojiset;
         if (current_emojiset === data.emojiset) {
@@ -208,10 +208,10 @@ export function update_page() {
     container.find(".default_language_name").text(default_language_name);
     container.find(".translate_emoticons").prop("checked", user_settings.translate_emoticons);
     container
-        .find(".twenty_four_hour_time")
+        .find(".setting_twenty_four_hour_time")
         .val(JSON.stringify(user_settings.twenty_four_hour_time));
-    container.find(".color_scheme").val(JSON.stringify(user_settings.color_scheme));
-    container.find(".default_view").val(user_settings.default_view);
+    container.find(".setting_color_scheme").val(JSON.stringify(user_settings.color_scheme));
+    container.find(".setting_default_view").val(user_settings.default_view);
 
     // TODO: Set emojiset selector here.
     // Longer term, we'll want to automate this function

static/styles/settings.css

@@ -338,7 +338,7 @@ td .button {
         display: inline-block;
     }
 
-    #user-display-settings .default_language {
+    #user-display-settings .setting_default_language {
         text-decoration: none;
     }
 
@@ -485,7 +485,7 @@ input[type="checkbox"] {
     margin-top: 10px;
 }
 
-#user-display-settings .default_language {
+#user-display-settings .setting_default_language {
     margin-left: 20px;
 }
 

static/templates/settings/display_settings.hbs

@@ -7,7 +7,7 @@
 
         <div class="input-group">
             <label class="inline-block title">{{t "Default language" }}</label>
-            <button type="button" class="default_language button btn-link rounded small inline-block">
+            <button type="button" class="setting_default_language button btn-link rounded small inline-block">
                 <span class="default_language_name">{{default_language_name}}</span>
                 <i class="fa fa-pencil"></i>
             </button>
@@ -24,7 +24,7 @@
             <label for="default_view" class="dropdown-title">{{t "Default view" }}
                 {{> ../help_link_widget link="/help/change-default-view" }}
             </label>
-            <select name="default_view" class="default_view">
+            <select name="default_view" class="setting_default_view">
                 {{> dropdown_options_widget option_values=default_view_values}}
             </select>
         </div>
@@ -32,7 +32,7 @@
         <div class="input-group">
             <label for="color_scheme" class="dropdown-title">{{t "Color scheme" }}
             </label>
-            <select name="color_scheme" class="color_scheme">
+            <select name="color_scheme" class="setting_color_scheme">
                 {{> dropdown_options_widget option_values=color_scheme_values}}
             </select>
         </div>
@@ -50,7 +50,7 @@
             <label for="demote_inactive_streams" class="dropdown-title">{{t "Demote inactive streams" }}
                 {{> ../help_link_widget link="/help/manage-inactive-streams" }}
             </label>
-            <select name="demote_inactive_streams" class="demote_inactive_streams">
+            <select name="demote_inactive_streams" class="setting_demote_inactive_streams">
                 {{> dropdown_options_widget option_values=demote_inactive_streams_values}}
             </select>
         </div>
@@ -62,7 +62,7 @@
 
         <div class="input-group">
             <label for="twenty_four_hour_time" class="dropdown-title">{{ settings_label.twenty_four_hour_time }}</label>
-            <select name="twenty_four_hour_time" class="twenty_four_hour_time">
+            <select name="twenty_four_hour_time" class="setting_twenty_four_hour_time">
                 {{#each twenty_four_hour_time_values}}
                 <option value='{{ this.value }}'>{{ this.description }}</option>
                 {{/each}}
@@ -78,7 +78,7 @@
             <div class="emojiset_choices grey-box">
                 {{#each user_settings.emojiset_choices}}
                 <label>
-                    <input type="radio" class="emojiset_choice" name="emojiset_group" value="{{this.key}}" />
+                    <input type="radio" class="setting_emojiset_choice" name="emojiset_group" value="{{this.key}}" />
                     <span>{{this.text}}</span>
                     <span class="right">
                         {{#if (eq this.key "text") }}