settings: Use checkbox setting to toggle between 14/122 and 16/140.

The "Dense mode" checkbox is renamed to "Compact mode" and is used
to toggle between changing the font-size and line-height settings
between 14/122 and 16/140 configurations.

web/src/information_density.ts

@@ -41,8 +41,12 @@ const MAXIMUM_BLOCK_HEIGHT_IN_EMS = BODY_FONT_CONTENT_BOX / BODY_FONT_EM_SIZE;
 // but in the awkward stage where legacy values are in play for
 // certain things (e.g., calculating line-height-based offsets for
 // emoji alignment), it's necessary to have access to these values.
-const LEGACY_LINE_HEIGHT_UNITLESS = 1.214;
+export const LEGACY_LINE_HEIGHT_UNITLESS = 1.214;
-const LEGACY_FONT_SIZE_PX = 14;
+export const LEGACY_FONT_SIZE_PX = 14;
+export const LEGACY_LINE_HEIGHT_PERCENT = 122;
+
+export const NON_COMPACT_MODE_FONT_SIZE_PX = 16;
+export const NON_COMPACT_MODE_LINE_HEIGHT_PERCENT = 140;
 
 function set_vertical_alignment_values(line_height_unitless: number): void {
     // We work in ems to keep this agnostic to the font size.

web/src/settings_components.ts

@@ -9,6 +9,12 @@ import * as blueslip from "./blueslip";
 import * as compose_banner from "./compose_banner";
 import type {DropdownWidget} from "./dropdown_widget";
 import {$t} from "./i18n";
+import {
+    LEGACY_FONT_SIZE_PX,
+    LEGACY_LINE_HEIGHT_PERCENT,
+    NON_COMPACT_MODE_FONT_SIZE_PX,
+    NON_COMPACT_MODE_LINE_HEIGHT_PERCENT,
+} from "./information_density";
 import {realm_user_settings_defaults} from "./realm_user_settings_defaults";
 import * as scroll_util from "./scroll_util";
 import * as settings_config from "./settings_config";
@@ -1080,6 +1086,15 @@ export function populate_data_for_default_realm_settings_request(
             if (input_value !== undefined && input_value !== null) {
                 const property_name: string = extract_property_name($input_elem, true);
                 data[property_name] = input_value;
+
+                if (property_name === "dense_mode") {
+                    data.web_font_size_px = input_value
+                        ? LEGACY_FONT_SIZE_PX
+                        : NON_COMPACT_MODE_FONT_SIZE_PX;
+                    data.web_line_height_percent = input_value
+                        ? LEGACY_LINE_HEIGHT_PERCENT
+                        : NON_COMPACT_MODE_LINE_HEIGHT_PERCENT;
+                }
             }
         }
     }

web/src/settings_config.ts

@@ -552,7 +552,7 @@ export const user_role_map = new Map(user_role_array.map((role) => [role.code, r
 
 export const preferences_settings_labels = {
     default_language_settings_label: $t({defaultMessage: "Language"}),
-    dense_mode: $t({defaultMessage: "Dense mode"}),
+    dense_mode: $t({defaultMessage: "Compact mode"}),
     display_emoji_reaction_users: new Handlebars.SafeString(
         $t_html({
             defaultMessage:

web/src/settings_preferences.ts

@@ -9,6 +9,12 @@ import * as dialog_widget from "./dialog_widget";
 import * as emojisets from "./emojisets";
 import * as hash_parser from "./hash_parser";
 import {$t_html, get_language_list_columns, get_language_name} from "./i18n";
+import {
+    LEGACY_FONT_SIZE_PX,
+    LEGACY_LINE_HEIGHT_PERCENT,
+    NON_COMPACT_MODE_FONT_SIZE_PX,
+    NON_COMPACT_MODE_LINE_HEIGHT_PERCENT,
+} from "./information_density";
 import * as loading from "./loading";
 import * as overlays from "./overlays";
 import {page_params} from "./page_params";
@@ -236,7 +242,18 @@ export function set_up(settings_panel: SettingsPanel): void {
             const setting = $input_elem.attr("name");
             assert(setting !== undefined);
             const data: Record<string, string | boolean | number> = {};
-            data[setting] = settings_components.get_input_element_value(this)!;
+            const setting_value = settings_components.get_input_element_value(this)!;
+            data[setting] = setting_value;
+
+            if (setting === "dense_mode") {
+                data.web_font_size_px = setting_value
+                    ? LEGACY_FONT_SIZE_PX
+                    : NON_COMPACT_MODE_FONT_SIZE_PX;
+                data.web_line_height_percent = setting_value
+                    ? LEGACY_LINE_HEIGHT_PERCENT
+                    : NON_COMPACT_MODE_LINE_HEIGHT_PERCENT;
+            }
+
             const $status_element = $input_elem
                 .closest(".subsection-parent")
                 .find(".alert-notification");

web/templates/settings/display_settings_general.hbs

@@ -32,7 +32,6 @@
       setting_name="dense_mode"
       is_checked=settings_object.dense_mode
       label=settings_label.dense_mode
-      render_only=settings_render_only.dense_mode
       prefix=prefix}}
 
     {{#if information_density_settings.render_group}}