Add ui_font_size setting (#3199)

This PR adds a new `ui_font_size` setting that can be used to control
the scale of the entire UI.

We use the value in this setting to set the base rem size of the window.

Release Notes:

- N/A

crates/ui2/Cargo.toml

@@ -10,6 +10,7 @@ chrono = "0.4"
 gpui2 = { path = "../gpui2" }
 itertools = { version = "0.11.0", optional = true }
 serde.workspace = true
+settings2 = { path = "../settings2" }
 smallvec.workspace = true
 strum = { version = "0.25.0", features = ["derive"] }
 theme2 = { path = "../theme2" }

crates/ui2/src/components/icon_button.rs

@@ -1,6 +1,6 @@
 use std::sync::Arc;
 
-use gpui2::MouseButton;
+use gpui2::{rems, MouseButton};
 
 use crate::{h_stack, prelude::*};
 use crate::{ClickHandler, Icon, IconColor, IconElement};
@@ -88,8 +88,8 @@ impl<V: 'static> IconButton<V> {
             .id(self.id.clone())
             .justify_center()
             .rounded_md()
-            .py(ui_size(cx, 0.25))
-            .px(ui_size(cx, 6. / 14.))
+            .py(rems(0.21875))
+            .px(rems(0.375))
             .bg(bg_color)
             .hover(|style| style.bg(bg_hover_color))
             .active(|style| style.bg(bg_active_color))

crates/ui2/src/components/workspace.rs

@@ -1,14 +1,16 @@
 use std::sync::Arc;
 
 use chrono::DateTime;
-use gpui2::{px, relative, rems, Div, Render, Size, View, VisualContext};
+use gpui2::{px, relative, Div, Render, Size, View, VisualContext};
+use settings2::Settings;
+use theme2::ThemeSettings;
 
-use crate::{prelude::*, NotificationsPanel};
+use crate::prelude::*;
 use crate::{
-    static_livestream, user_settings_mut, v_stack, AssistantPanel, Button, ChatMessage, ChatPanel,
-    CollabPanel, EditorPane, FakeSettings, Label, LanguageSelector, Pane, PaneGroup, Panel,
-    PanelAllowedSides, PanelSide, ProjectPanel, SettingValue, SplitDirection, StatusBar, Terminal,
-    TitleBar, Toast, ToastOrigin,
+    static_livestream, v_stack, AssistantPanel, Button, ChatMessage, ChatPanel, CollabPanel,
+    EditorPane, Label, LanguageSelector, NotificationsPanel, Pane, PaneGroup, Panel,
+    PanelAllowedSides, PanelSide, ProjectPanel, SplitDirection, StatusBar, Terminal, TitleBar,
+    Toast, ToastOrigin,
 };
 
 #[derive(Clone)]
@@ -150,6 +152,18 @@ impl Workspace {
     pub fn debug_toggle_user_settings(&mut self, cx: &mut ViewContext<Self>) {
         self.debug.enable_user_settings = !self.debug.enable_user_settings;
 
+        let mut theme_settings = ThemeSettings::get_global(cx).clone();
+
+        if self.debug.enable_user_settings {
+            theme_settings.ui_font_size = 18.0.into();
+        } else {
+            theme_settings.ui_font_size = 16.0.into();
+        }
+
+        ThemeSettings::override_global(theme_settings.clone(), cx);
+
+        cx.set_rem_size(theme_settings.ui_font_size);
+
         cx.notify();
     }
 
@@ -179,20 +193,6 @@ impl Render for Workspace {
     type Element = Div<Self>;
 
     fn render(&mut self, cx: &mut ViewContext<Self>) -> Div<Self> {
-        // HACK: This should happen inside of `debug_toggle_user_settings`, but
-        // we don't have `cx.global::<FakeSettings>()` in event handlers at the moment.
-        // Need to talk with Nathan/Antonio about this.
-        {
-            let settings = user_settings_mut(cx);
-
-            if self.debug.enable_user_settings {
-                settings.list_indent_depth = SettingValue::UserDefined(rems(0.5).into());
-                settings.ui_scale = SettingValue::UserDefined(1.25);
-            } else {
-                *settings = FakeSettings::default();
-            }
-        }
-
         let root_group = PaneGroup::new_panes(
             vec![Pane::new(
                 "pane-0",
@@ -321,7 +321,7 @@ impl Render for Workspace {
                 v_stack()
                     .z_index(9)
                     .absolute()
-                    .bottom_10()
+                    .top_20()
                     .left_1_4()
                     .w_40()
                     .gap_2()

crates/ui2/src/elements/button.rs

@@ -1,9 +1,9 @@
 use std::sync::Arc;
 
-use gpui2::{div, DefiniteLength, Hsla, MouseButton, WindowContext};
+use gpui2::{div, rems, DefiniteLength, Hsla, MouseButton, WindowContext};
 
-use crate::{h_stack, Icon, IconColor, IconElement, Label, LabelColor};
-use crate::{prelude::*, LineHeightStyle};
+use crate::prelude::*;
+use crate::{h_stack, Icon, IconColor, IconElement, Label, LabelColor, LineHeightStyle};
 
 #[derive(Default, PartialEq, Clone, Copy)]
 pub enum IconPosition {
@@ -151,7 +151,7 @@ impl<V: 'static> Button<V> {
             .relative()
             .id(SharedString::from(format!("{}", self.label)))
             .p_1()
-            .text_size(ui_size(cx, 1.))
+            .text_size(rems(1.))
             .rounded_md()
             .bg(self.variant.bg_color(cx))
             .hover(|style| style.bg(self.variant.bg_color_hover(cx)))
@@ -198,7 +198,7 @@ impl<V: 'static> ButtonGroup<V> {
     }
 
     fn render(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
-        let mut el = h_stack().text_size(ui_size(cx, 1.));
+        let mut el = h_stack().text_size(rems(1.));
 
         for button in self.buttons {
             el = el.child(button.render(_view, cx));

crates/ui2/src/elements/icon.rs

@@ -1,4 +1,4 @@
-use gpui2::{svg, Hsla};
+use gpui2::{rems, svg, Hsla};
 use strum::EnumIter;
 
 use crate::prelude::*;
@@ -175,8 +175,8 @@ impl IconElement {
     fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
         let fill = self.color.color(cx);
         let svg_size = match self.size {
-            IconSize::Small => ui_size(cx, 12. / 14.),
-            IconSize::Medium => ui_size(cx, 15. / 14.),
+            IconSize::Small => rems(0.75),
+            IconSize::Medium => rems(0.9375),
         };
 
         svg()

crates/ui2/src/elements/label.rs

@@ -1,4 +1,4 @@
-use gpui2::{relative, Hsla, WindowContext};
+use gpui2::{relative, rems, Hsla, WindowContext};
 use smallvec::SmallVec;
 
 use crate::prelude::*;
@@ -86,7 +86,7 @@ impl Label {
                         .bg(LabelColor::Hidden.hsla(cx)),
                 )
             })
-            .text_size(ui_size(cx, 1.))
+            .text_size(rems(1.))
             .when(self.line_height_style == LineHeightStyle::UILabel, |this| {
                 this.line_height(relative(1.))
             })

crates/ui2/src/prelude.rs

@@ -4,21 +4,12 @@ pub use gpui2::{
 };
 
 pub use crate::elevation::*;
-use crate::settings::user_settings;
 pub use crate::ButtonVariant;
 pub use theme2::ActiveTheme;
 
-use gpui2::{rems, Hsla, Rems};
+use gpui2::Hsla;
 use strum::EnumIter;
 
-pub fn ui_size(cx: &mut WindowContext, size: f32) -> Rems {
-    const UI_SCALE_RATIO: f32 = 0.875;
-
-    let settings = user_settings(cx);
-
-    rems(*settings.ui_scale * UI_SCALE_RATIO * size)
-}
-
 #[derive(Debug, Default, PartialEq, Eq, PartialOrd, Ord, Hash, Clone, Copy, EnumIter)]
 pub enum FileSystemStatus {
     #[default]

crates/ui2/src/settings.rs

@@ -58,7 +58,6 @@ pub struct FakeSettings {
     pub list_disclosure_style: SettingValue<DisclosureControlStyle>,
     pub list_indent_depth: SettingValue<AbsoluteLength>,
     pub titlebar: TitlebarSettings,
-    pub ui_scale: SettingValue<f32>,
 }
 
 impl Default for FakeSettings {
@@ -68,7 +67,6 @@ impl Default for FakeSettings {
             list_disclosure_style: SettingValue::Default(DisclosureControlStyle::ChevronOnHover),
             list_indent_depth: SettingValue::Default(rems(0.3).into()),
             default_panel_size: SettingValue::Default(rems(16.).into()),
-            ui_scale: SettingValue::Default(1.),
         }
     }
 }