display settings: Deduplicate template rendering.

frontend_tests/node_tests/general.js

@@ -54,6 +54,12 @@ const denmark_stream = {
 // We often use IIFEs (immediately invoked function expressions)
 // to make our tests more self-containted.
 
+// Some quick housekeeping:  Let's clear page_params, which is a data
+// structure that the server sends down to us when the app starts.  We
+// prefer to test with a clean slate.
+
+set_global('page_params', {});
+
 zrequire('stream_data');
 set_global('i18n', global.stub_i18n);
 zrequire('settings_display');
@@ -144,13 +150,6 @@ run_test('unread', () => {
 // narrows more broadly, but first let's test out a core piece of
 // code that makes things work.
 
-
-// Some quick housekeeping:  Let's clear page_params, which is a data
-// structure that the server sends down to us when the app starts.  We
-// prefer to test with a clean slate.
-
-set_global('page_params', {});
-
 // We use the second argument of zrequire to find the location of the
 // Filter class.
 zrequire('Filter', 'js/filter');

frontend_tests/node_tests/stream_list.js

@@ -19,6 +19,10 @@ zrequire('stream_list');
 zrequire('topic_zoom');
 zrequire('ui');
 set_global('i18n', global.stub_i18n);
+set_global('page_params', {
+    is_admin: false,
+    realm_users: [],
+});
 zrequire('settings_display');
 
 stream_color.initialize();
@@ -35,11 +39,6 @@ set_global('keydown_util', {
     handle: noop,
 });
 
-set_global('page_params', {
-    is_admin: false,
-    realm_users: [],
-});
-
 run_test('create_sidebar_row', () => {
     // Make a couple calls to create_sidebar_row() and make sure they
     // generate the right markup as well as play nice with get_stream_li().

static/js/settings.js

@@ -135,6 +135,7 @@ exports.build_page = function () {
         notification_settings: settings_notifications.all_notifications.settings,
         push_notification_tooltip:
             settings_notifications.all_notifications.push_notification_tooltip,
+        display_settings: settings_display.all_display_settings,
     });
 
     $(".settings-box").html(rendered_settings_tab);

static/js/settings_display.js

@@ -43,6 +43,23 @@ exports.demote_inactive_streams_values = {
     },
 };
 
+exports.all_display_settings = {
+    settings: {
+        user_display_settings: [
+            "dense_mode",
+            "night_mode",
+            "high_contrast_mode",
+            "left_side_userlist",
+            "starred_message_counts",
+            "fluid_layout_width",
+        ],
+    },
+    render_only: {
+        high_contrast_mode: page_params.development_environment,
+        dense_mode: page_params.development_environment,
+    },
+};
+
 exports.set_up = function () {
     meta.loaded = true;
     $("#display-settings-status").hide();

static/templates/settings/display-settings.handlebars

@@ -23,39 +23,13 @@
             <h3 class="inline-block">{{t "Display settings" }}</h3>
             <div class="alert-notification" id="display-settings-status"></div>
 
-            {{#if page_params.development_environment}}
+            {{#each display_settings.settings.user_display_settings}}
             {{partial "settings_checkbox"
-              "setting_name" "dense_mode"
-              "is_checked" page_params.dense_mode
-              "label" settings_label.dense_mode}}
-            {{/if}}
-
-            {{partial "settings_checkbox"
-              "setting_name" "night_mode"
-              "is_checked" page_params.night_mode
-              "label" settings_label.night_mode}}
-
-            {{#if page_params.development_environment}}
-            {{partial "settings_checkbox"
-              "setting_name" "high_contrast_mode"
-              "is_checked" page_params.high_contrast_mode
-              "label" settings_label.high_contrast_mode}}
-            {{/if}}
-
-            {{partial "settings_checkbox"
-              "setting_name" "left_side_userlist"
-              "is_checked" page_params.left_side_userlist
-              "label" settings_label.left_side_userlist}}
-
-            {{partial "settings_checkbox"
-              "setting_name" "starred_message_counts"
-              "is_checked" page_params.starred_message_counts
-              "label" settings_label.starred_message_counts}}
-
-            {{partial "settings_checkbox"
-              "setting_name" "fluid_layout_width"
-              "is_checked" page_params.fluid_layout_width
-              "label" settings_label.fluid_layout_width}}
+              "setting_name" this
+              "is_checked" (lookup ../page_params this)
+              "label" (lookup ../settings_label this)
+              "render_only" (lookup ../display_settings.render_only this)}}
+            {{/each}}
 
             <div class="input-group">
                 <label for="demote_inactive_streams" class="dropdown-title">{{t "Demote inactive streams" }}

static/templates/settings/settings_checkbox.handlebars

@@ -1,3 +1,5 @@
+{{#is_false render_only}}
+{{else}}
 <div class="input-group {{#if is_nested}}disableable{{/if}} {{#if_not_a_or_b_and_not_c is_parent_setting_enabled push_notifications_tooltip realm_push_notifications_enabled}}control-label-disabled{{/if_not_a_or_b_and_not_c}}">
     <label class="checkbox">
         <input type="checkbox" class="inline-block setting-widget prop-element" name="{{setting_name}}" data-setting-widget-type="bool"
@@ -18,3 +20,4 @@
       title="{{t 'Mobile push notifications are not configured on this server.' }}"></i>
     {{/if}}
 </div>
+{{/is_false}}