settings: Control showing custom font size and line height settings.

web/src/server_events_dispatch.js

@@ -461,6 +461,17 @@ export function dispatch_normal_event(event) {
                     realm_user_settings_defaults,
                 );
             }
+
+            if (
+                ["dense_mode", "web_font_size_px", "web_line_height_percent"].includes(
+                    event.property,
+                )
+            ) {
+                /* istanbul ignore next */
+                settings_preferences.update_information_density_settings_visibility(
+                    $(settings_realm_user_settings_defaults.realm_default_settings_panel.container),
+                );
+            }
             break;
         }
 
@@ -793,6 +804,9 @@ export function dispatch_normal_event(event) {
                 $("body").toggleClass("more-dense-mode");
                 information_density.set_base_typography_css_variables();
                 information_density.calculate_timestamp_widths();
+                settings_preferences.update_information_density_settings_visibility(
+                    $(settings_preferences.user_settings_panel.container),
+                );
             }
             if (
                 event.property === "web_font_size_px" ||
@@ -800,6 +814,9 @@ export function dispatch_normal_event(event) {
             ) {
                 information_density.set_base_typography_css_variables();
                 information_density.calculate_timestamp_widths();
+                settings_preferences.update_information_density_settings_visibility(
+                    $(settings_preferences.user_settings_panel.container),
+                );
             }
             if (event.property === "web_mark_read_on_scroll_policy") {
                 unread_ui.update_unread_banner();

web/src/settings_preferences.ts

@@ -312,6 +312,8 @@ export function set_up(settings_panel: SettingsPanel): void {
             },
         });
     });
+
+    update_information_density_settings_visibility($container);
 }
 
 export async function report_emojiset_change(settings_panel: SettingsPanel): Promise<void> {
@@ -388,6 +390,28 @@ export function update_page(property: UserSettingsProperty): void {
     settings_components.set_input_element_value($input_elem, value);
 }
 
+export function update_information_density_settings_visibility($container: JQuery): void {
+    if (page_params.development_environment) {
+        $container.find(".information-density-settings").show();
+        return;
+    }
+
+    if (user_settings.dense_mode) {
+        $container.find(".information-density-settings").hide();
+        return;
+    }
+
+    if (
+        user_settings.web_font_size_px === NON_COMPACT_MODE_FONT_SIZE_PX &&
+        user_settings.web_line_height_percent === NON_COMPACT_MODE_LINE_HEIGHT_PERCENT
+    ) {
+        $container.find(".information-density-settings").hide();
+        return;
+    }
+
+    $container.find(".information-density-settings").show();
+}
+
 export function initialize(): void {
     const user_language_name = get_language_name(user_settings.default_language);
     set_default_language_name(user_language_name);

web/templates/settings/display_settings_general.hbs

@@ -34,7 +34,6 @@
       label=settings_label.dense_mode
       prefix=prefix}}
 
-    {{#if information_density_settings.render_group}}
     <div class="information-density-settings">
         <div class="title">{{t "Information density settings"}}</div>
         {{#each information_density_settings.settings.user_display_settings}}
@@ -46,5 +45,4 @@
               prefix=../prefix}}
         {{/each}}
     </div>
-    {{/if}}
 </div>

web/tests/dispatch.test.js

@@ -957,7 +957,17 @@ run_test("user_settings", ({override}) => {
 
     event = event_fixtures.user_settings__dense_mode;
     user_settings.dense_mode = false;
+    settings_preferences.user_settings_panel = {
+        container: "#user-preferences",
+    };
     override(information_density, "set_base_typography_css_variables", noop);
+    override(
+        settings_preferences,
+        "update_information_density_settings_visibility",
+        ($container) => {
+            assert.equal($container, $("#user-preferences"));
+        },
+    );
     toggled = [];
     dispatch(event);
     assert_same(user_settings.dense_mode, true);