gear_menu: Allow spectators to change font size and line height.

web/src/gear_menu.ts

@@ -8,6 +8,7 @@ import render_navbar_gear_menu_popover from "../templates/popovers/navbar/navbar
 
 import * as blueslip from "./blueslip.ts";
 import * as channel from "./channel.ts";
+import * as information_density from "./information_density.ts";
 import * as popover_menus from "./popover_menus.ts";
 import * as popover_menus_data from "./popover_menus_data.ts";
 import * as popovers from "./popovers.ts";
@@ -185,6 +186,25 @@ export function initialize(): void {
                     theme.set_theme_for_spectator(theme_code);
                 });
             });
+
+            $popper.on("click", ".info-density-controls button", function (this: HTMLElement, e) {
+                const changed_property =
+                    information_density.information_density_properties_schema.parse(
+                        $(this).closest(".button-group").attr("data-property"),
+                    );
+                information_density.update_information_density_settings($(this), changed_property);
+                information_density.enable_or_disable_control_buttons($popper);
+                e.preventDefault();
+            });
+
+            const resizeObserver = new ResizeObserver(() => {
+                requestAnimationFrame(() => {
+                    void instance.popperInstance?.update();
+                });
+            });
+            resizeObserver.observe(document.querySelector("#gear-menu-dropdown")!);
+
+            information_density.enable_or_disable_control_buttons($popper);
         },
         onShow: render,
         onHidden(instance) {

web/src/popover_menus_data.ts

@@ -133,6 +133,8 @@ type GearMenuContext = {
     user_has_billing_access: boolean;
     user_color_scheme: number;
     color_scheme_values: ColorSchemeValues;
+    web_font_size_px: number;
+    web_line_height_percent: number;
 };
 
 type BillingInfo = {
@@ -411,6 +413,9 @@ export function get_gear_menu_content_context(): GearMenuContext {
         // user color scheme
         user_color_scheme: user_settings.color_scheme,
         color_scheme_values: settings_config.color_scheme_values,
+        // information density settings
+        web_font_size_px: user_settings.web_font_size_px,
+        web_line_height_percent: user_settings.web_line_height_percent,
     };
 }
 

web/src/tippyjs.ts

@@ -710,6 +710,7 @@ export function initialize(): void {
             "#personal-menu-dropdown .info-density-button-container",
             "#user-preferences .info-density-button-container",
             "#realm-user-default-settings .information-density-settings:not(.disabled-setting) .info-density-button-container",
+            "#gear-menu-dropdown .info-density-button-container",
         ].join(","),
         delay: LONG_HOVER_DELAY,
         appendTo: () => document.body,

web/styles/popovers.css

@@ -1465,6 +1465,12 @@ ul.popover-group-menu-member-list {
         0.6666/1.0666 em on each side. */
         margin: 0 0.625em;
     }
+
+    .info-density-controls {
+        /* Left and right paddings are set to match the alignment with
+        other items in the menu. */
+        padding: 0.4em 0.6666em 0.25em;
+    }
 }
 
 ul.popover-menu-list {

web/templates/popovers/navbar/navbar_gear_menu_popover.hbs

@@ -102,6 +102,24 @@
                 <span class="slider"></span>
             </div>
         </li>
+        <li role="none" class="popover-menu-list-item only-visible-for-spectators">
+            <div class="info-density-controls">
+                {{> ../../settings/info_density_control_button_group
+                  property="web_font_size_px"
+                  default_icon_class="zulip-icon-type-big"
+                  property_value=web_font_size_px
+                  for_settings_ui=false
+                  prefix="gear_menu_"
+                  }}
+                {{> ../../settings/info_density_control_button_group
+                  property="web_line_height_percent"
+                  default_icon_class="zulip-icon-line-height-big"
+                  property_value=web_line_height_percent
+                  for_settings_ui=false
+                  prefix="gear_menu_"
+                  }}
+            </div>
+        </li>
         <li role="none" class="link-item popover-menu-list-item only-visible-for-spectators">
             <a role="menuitem" tabindex="0" class="change-language-spectator popover-menu-link">
                 <i class="popover-menu-icon zulip-icon zulip-icon-f-globe" aria-hidden="true"></i>