DisplaySettings: Add UI for switching the scale factor

For now, only support 1x and 2x scale.

I tried doing something "smarter" first where the UI would try
to keep the physical resolution constant when toggling between
1x and 2x, but many of the smaller 1x resolutions map to 2x
logical resolutions that Compositor rejects (e.g. 1024x768 becomes
512x384, which is less than the minimum 640x480 that Compositor
wants) and it felt complicated and overly magical.

So this instead just gives you a 1x/2x toggle and a dropdown
with logical (!) resolutions. That is, 800x600 @ 2x gives you
a physical resolution of 1600x1200.

If we don't like this after trying it for a while, we can change
the UI then.

Documentation/HighDPI.md

@@ -31,8 +31,8 @@ The plan is to have all applications use highdpi backbuffers eventually. It'll t
 0. Add some scaling support to Painter. Make it do 2x nearest neighbor scaling of everything at paint time for now.
 1. Add scale factor concept to WindowServer. WindowServer has a scaled framebuffer/backbuffer. All other bitmaps (both other bitmaps in WindowServer, as well as everything WindowServer-client-side) are always stored at 1x and scaled up when they're painted to the framebuffer. Things will look fine at 2x, but pixely (but window gradients will be smooth already).
 2. Let DisplaySettings toggle it WindowServer scale. Now it's possible to switch to and from HighDPI dynamically, using UI.
-2. Come up with a system to have scale-dependent bitmap and font resources. Use that to use a high-res cursor bitmaps and high-res menu bar text painting in window server. Menu text and cursor will look less pixely. (And window frames too, I suppose.)
-3. Let apps opt in to high-res window framebuffers, and convert all apps one-by-one
-4. Remove high-res window framebuffer opt-in since all apps have it now.
+3. Come up with a system to have scale-dependent bitmap and font resources. Use that to use a high-res cursor bitmaps and high-res menu bar text painting in window server. Menu text and cursor will look less pixely. (And window frames too, I suppose.)
+4. Let apps opt in to high-res window framebuffers, and convert all apps one-by-one
+5. Remove high-res window framebuffer opt-in since all apps have it now.
 
-We're currently before point 2.
+We're currently before point 3.

Userland/Applications/DisplaySettings/DisplaySettings.cpp

@@ -39,6 +39,7 @@
 #include <LibGUI/ItemListModel.h>
 #include <LibGUI/Label.h>
 #include <LibGUI/MessageBox.h>
+#include <LibGUI/RadioButton.h>
 #include <LibGUI/WindowServerConnection.h>
 #include <LibGfx/Palette.h>
 #include <LibGfx/SystemTheme.h>
@@ -148,6 +149,21 @@ void DisplaySettingsWidget::create_frame()
         m_monitor_widget->update();
     };
 
+    m_display_scale_radio_1x = *find_descendant_of_type_named<GUI::RadioButton>("scale_1x");
+    m_display_scale_radio_1x->on_checked = [this](bool checked) {
+        if (checked) {
+            m_monitor_widget->set_desktop_scale_factor(1);
+            m_monitor_widget->update();
+        }
+    };
+    m_display_scale_radio_2x = *find_descendant_of_type_named<GUI::RadioButton>("scale_2x");
+    m_display_scale_radio_2x->on_checked = [this](bool checked) {
+        if (checked) {
+            m_monitor_widget->set_desktop_scale_factor(2);
+            m_monitor_widget->update();
+        }
+    };
+
     m_color_input = *find_descendant_of_type_named<GUI::ColorInput>("color_input");
     m_color_input->set_color_has_alpha_channel(false);
     m_color_input->set_color_picker_title("Select color for desktop");
@@ -215,13 +231,19 @@ void DisplaySettingsWidget::load_current_settings()
     index = m_modes.find_first_index(mode).value();
     m_mode_combo->set_selected_index(index);
 
-    /// Resolution ////////////////////////////////////////////////////////////////////////////////
-    Gfx::IntSize find_size;
+    /// Resolution and scale factor ///////////////////////////////////////////////////////////////
+    int scale_factor = ws_config->read_num_entry("Screen", "ScaleFactor", 1);
+    if (scale_factor != 1 && scale_factor != 2) {
+        dbgln("unexpected ScaleFactor {}, setting to 1", scale_factor);
+        scale_factor = 1;
+    }
+    (scale_factor == 1 ? m_display_scale_radio_1x : m_display_scale_radio_2x)->set_checked(true);
+    m_monitor_widget->set_desktop_scale_factor(scale_factor);
 
     // Let's attempt to find the current resolution and select it!
+    Gfx::IntSize find_size;
     find_size.set_width(ws_config->read_num_entry("Screen", "Width", 1024));
     find_size.set_height(ws_config->read_num_entry("Screen", "Height", 768));
-
     index = m_resolutions.find_first_index(find_size).value_or(0);
     Gfx::IntSize m_current_resolution = m_resolutions.at(index);
     m_monitor_widget->set_desktop_resolution(m_current_resolution);
@@ -246,10 +268,9 @@ void DisplaySettingsWidget::load_current_settings()
 
 void DisplaySettingsWidget::send_settings_to_window_server()
 {
-    // FIXME: Add UI for changing the scale factor.
-    auto result = GUI::WindowServerConnection::the().send_sync<Messages::WindowServer::SetResolution>(m_monitor_widget->desktop_resolution(), 1);
+    auto result = GUI::WindowServerConnection::the().send_sync<Messages::WindowServer::SetResolution>(m_monitor_widget->desktop_resolution(), m_monitor_widget->desktop_scale_factor());
     if (!result->success()) {
-        GUI::MessageBox::show(nullptr, String::formatted("Reverting to resolution {}x{}", result->resolution().width(), result->resolution().height()),
+        GUI::MessageBox::show(nullptr, String::formatted("Reverting to resolution {}x{} @ {}x", result->resolution().width(), result->resolution().height(), result->scale_factor()),
             "Unable to set resolution", GUI::MessageBox::Type::Error);
     }
 

Userland/Applications/DisplaySettings/DisplaySettings.h

@@ -29,6 +29,7 @@
 #include "MonitorWidget.h"
 #include <LibGUI/ColorInput.h>
 #include <LibGUI/ComboBox.h>
+#include <LibGUI/RadioButton.h>
 
 class DisplaySettingsWidget : public GUI::Widget {
     C_OBJECT(DisplaySettingsWidget);
@@ -51,5 +52,7 @@ private:
     RefPtr<GUI::ComboBox> m_wallpaper_combo;
     RefPtr<GUI::ComboBox> m_mode_combo;
     RefPtr<GUI::ComboBox> m_resolution_combo;
+    RefPtr<GUI::RadioButton> m_display_scale_radio_1x;
+    RefPtr<GUI::RadioButton> m_display_scale_radio_2x;
     RefPtr<GUI::ColorInput> m_color_input;
 };

Userland/Applications/DisplaySettings/DisplaySettingsWindow.gml

@@ -64,6 +64,26 @@
 
         @GUI::ComboBox {
             name: "resolution_combo"
+            fixed_width: 90
+        }
+
+        @GUI::Widget {
+        }
+
+        @GUI::Label {
+            text: "Display scale:"
+            text_alignment: "CenterLeft"
+            fixed_width: 75
+        }
+
+        @GUI::RadioButton {
+            name: "scale_1x"
+            text: "100%"
+        }
+
+        @GUI::RadioButton {
+            name: "scale_2x"
+            text: "200%"
         }
     }
 

Userland/Applications/DisplaySettings/MonitorWidget.cpp

@@ -27,6 +27,7 @@
 #include "MonitorWidget.h"
 #include <LibGUI/Painter.h>
 #include <LibGfx/Bitmap.h>
+#include <LibGfx/Font.h>
 
 namespace DisplaySettings {
 
@@ -110,8 +111,23 @@ void MonitorWidget::paint_event(GUI::PaintEvent& event)
     painter.draw_scaled_bitmap(m_monitor_rect, *screen_bitmap, screen_bitmap->rect());
 
     if (!m_desktop_resolution.is_null()) {
-        painter.draw_text(m_monitor_rect.translated(1, 1), m_desktop_resolution.to_string(), Gfx::TextAlignment::Center, Color::Black);
-        painter.draw_text(m_monitor_rect, m_desktop_resolution.to_string(), Gfx::TextAlignment::Center, Color::White);
+        auto displayed_resolution_string = Gfx::IntSize { m_desktop_resolution.width(), m_desktop_resolution.height() }.to_string();
+
+        // Render text label scaled with scale factor to hint at its effect.
+        // FIXME: Once bitmaps have intrinsic scale factors, we could create a bitmap with an intrinsic scale factor of m_desktop_scale_factor
+        // and that should give us the same effect with less code.
+        auto text_bitmap = Gfx::Bitmap::create(Gfx::BitmapFormat::RGBA32, Gfx::IntSize { painter.font().width(displayed_resolution_string) + 1, painter.font().glyph_height() + 1 });
+        GUI::Painter text_painter(*text_bitmap);
+        text_painter.set_font(painter.font());
+
+        text_painter.draw_text({}, displayed_resolution_string, Gfx::TextAlignment::BottomRight, Color::Black);
+        text_painter.draw_text({}, displayed_resolution_string, Gfx::TextAlignment::TopLeft, Color::White);
+
+        Gfx::IntRect text_rect = text_bitmap->rect();
+        text_rect.set_width(text_rect.width() * m_desktop_scale_factor);
+        text_rect.set_height(text_rect.height() * m_desktop_scale_factor);
+        text_rect.center_within(m_monitor_rect);
+        painter.draw_scaled_bitmap(text_rect, *text_bitmap, text_bitmap->rect());
     }
 }
 

Userland/Applications/DisplaySettings/MonitorWidget.h

@@ -43,6 +43,9 @@ public:
     void set_desktop_resolution(Gfx::IntSize resolution);
     Gfx::IntSize desktop_resolution();
 
+    void set_desktop_scale_factor(int scale_factor) { m_desktop_scale_factor = scale_factor; }
+    int desktop_scale_factor() const { return m_desktop_scale_factor; }
+
     void set_background_color(Gfx::Color background_color);
     Gfx::Color background_color();
 
@@ -58,6 +61,7 @@ private:
     RefPtr<Gfx::Bitmap> m_desktop_wallpaper_bitmap;
     String m_desktop_wallpaper_mode;
     Gfx::IntSize m_desktop_resolution;
+    int m_desktop_scale_factor { 1 };
     Gfx::Color m_desktop_color;
 };