LibGUI: Convert AboutDialog layout to GML

Userland/Libraries/LibGUI/AboutDialog.cpp

@@ -1,12 +1,14 @@
 /*
  * Copyright (c) 2018-2020, Andreas Kling <kling@serenityos.org>
  * Copyright (c) 2022, the SerenityOS developers.
+ * Copyright (c) 2023, Sam Atkins <atkinssj@serenityos.org>
  *
  * SPDX-License-Identifier: BSD-2-Clause
  */
 
 #include <AK/StringBuilder.h>
 #include <LibGUI/AboutDialog.h>
+#include <LibGUI/AboutDialogGML.h>
 #include <LibGUI/BoxLayout.h>
 #include <LibGUI/Button.h>
 #include <LibGUI/ImageWidget.h>
@@ -31,56 +33,24 @@ AboutDialog::AboutDialog(StringView name, StringView version, Gfx::Bitmap const*
         set_icon(parent_window->icon());
 
     auto widget = set_main_widget<Widget>().release_value_but_fixme_should_propagate_errors();
-    widget->set_fill_with_background_color(true);
+    widget->load_from_gml(about_dialog_gml).release_value_but_fixme_should_propagate_errors();
-    widget->set_layout<VerticalBoxLayout>();
-    widget->layout()->set_spacing(0);
-
-    auto& banner_image = widget->add<GUI::ImageWidget>();
-    banner_image.load_from_file("/res/graphics/brand-banner.png"sv);
-
-    auto& content_container = widget->add<Widget>();
-    content_container.set_layout<HorizontalBoxLayout>();
-
-    auto& left_container = content_container.add<Widget>();
-    left_container.set_fixed_width(60);
-    left_container.set_layout<VerticalBoxLayout>();
-    left_container.layout()->set_margins({ 12, 0, 0 });
 
+    auto icon_wrapper = find_descendant_of_type_named<Widget>("icon_wrapper");
     if (icon) {
-        auto& icon_wrapper = left_container.add<Widget>();
+        icon_wrapper->set_visible(true);
-        icon_wrapper.set_fixed_size(32, 48);
+        auto icon_image = find_descendant_of_type_named<ImageWidget>("icon");
-        icon_wrapper.set_layout<VerticalBoxLayout>();
+        icon_image->set_bitmap(m_icon);
-
+    } else {
-        auto& icon_image = icon_wrapper.add<ImageWidget>();
+        icon_wrapper->set_visible(false);
-        icon_image.set_bitmap(m_icon);
     }
 
-    auto& right_container = content_container.add<Widget>();
+    find_descendant_of_type_named<GUI::Label>("name")->set_text(m_name);
-    right_container.set_layout<VerticalBoxLayout>();
-    right_container.layout()->set_margins({ 12, 4, 4, 0 });
-
-    auto make_label = [&](StringView text, bool bold = false) {
-        auto& label = right_container.add<Label>(text);
-        label.set_text_alignment(Gfx::TextAlignment::CenterLeft);
-        label.set_fixed_height(14);
-        if (bold)
-            label.set_font(Gfx::FontDatabase::default_font().bold_variant());
-    };
-    make_label(m_name, true);
     // If we are displaying a dialog for an application, insert 'SerenityOS' below the application name
-    if (m_name != "SerenityOS")
+    find_descendant_of_type_named<GUI::Label>("serenity_os")->set_visible(m_name != "SerenityOS");
-        make_label("SerenityOS"sv);
+    find_descendant_of_type_named<GUI::Label>("version")->set_text(m_version_string);
-    make_label(m_version_string);
-    make_label("Copyright \xC2\xA9 the SerenityOS developers, 2018-2023"sv);
 
-    right_container.layout()->add_spacer();
+    auto ok_button = find_descendant_of_type_named<DialogButton>("ok_button");
-
+    ok_button->on_click = [this](auto) {
-    auto& button_container = right_container.add<Widget>();
-    button_container.set_fixed_height(22);
-    button_container.set_layout<HorizontalBoxLayout>();
-    button_container.layout()->add_spacer();
-    auto& ok_button = button_container.add<DialogButton>("OK");
-    ok_button.on_click = [this](auto) {
         done(ExecResult::OK);
     };
 }

Userland/Libraries/LibGUI/AboutDialog.gml

@@ -0,0 +1,83 @@
+@GUI::Frame {
+    fill_with_background_color: true
+    layout: @GUI::VerticalBoxLayout {
+        spacing: 0
+    }
+
+    @GUI::ImageWidget {
+        name: "brand_banner"
+        bitmap: "/res/graphics/brand-banner.png"
+    }
+
+    @GUI::Widget {
+        name: "content_container"
+        layout: @GUI::HorizontalBoxLayout {}
+
+        @GUI::Widget {
+            name: "left_container"
+            fixed_width: 60
+            layout: @GUI::VerticalBoxLayout {
+                margins: [12, 0, 0]
+            }
+
+            @GUI::Widget {
+                name: "icon_wrapper"
+                fixed_size: [32, 48]
+                layout: @GUI::VerticalBoxLayout {}
+
+                @GUI::ImageWidget {
+                    name: "icon"
+                }
+            }
+        }
+
+        @GUI::Widget {
+            name: "right_container"
+            layout: @GUI::VerticalBoxLayout {
+                margins: [12, 4, 4, 0]
+            }
+
+            @GUI::Label {
+                name: "name"
+                text_alignment: "CenterLeft"
+                fixed_height: 14
+                font_weight: "Bold"
+            }
+
+            @GUI::Label {
+                name: "serenity_os"
+                text_alignment: "CenterLeft"
+                fixed_height: 14
+                text: "SerenityOS"
+            }
+
+            @GUI::Label {
+                name: "version"
+                text_alignment: "CenterLeft"
+                fixed_height: 14
+            }
+
+            @GUI::Label {
+                name: "copyright"
+                text_alignment: "CenterLeft"
+                fixed_height: 14
+                text: "Copyright © the SerenityOS developers, 2018-2023"
+            }
+
+            @GUI::Layout::Spacer {}
+
+            @GUI::Widget {
+                name: "button_container"
+                fixed_height: 22
+                layout: @GUI::HorizontalBoxLayout {}
+
+                @GUI::Layout::Spacer {}
+
+                @GUI::DialogButton {
+                    name: "ok_button"
+                    text: "OK"
+                }
+            }
+        }
+    }
+}

Userland/Libraries/LibGUI/CMakeLists.txt

@@ -1,3 +1,4 @@
+compile_gml(AboutDialog.gml AboutDialogGML.h about_dialog_gml)
 compile_gml(EmojiInputDialog.gml EmojiInputDialogGML.h emoji_input_dialog_gml)
 compile_gml(FontPickerDialog.gml FontPickerDialogGML.h font_picker_dialog_gml)
 compile_gml(FilePickerDialog.gml FilePickerDialogGML.h file_picker_dialog_gml)
@@ -132,6 +133,7 @@ set(GENERATED_SOURCES
     ../../Services/WindowServer/WindowManagerClientEndpoint.h
     ../../Services/WindowServer/WindowManagerServerEndpoint.h
     ../../Services/WindowServer/WindowServerEndpoint.h
+    AboutDialogGML.h
     EmojiInputDialogGML.h
     FilePickerDialogGML.h
     FontPickerDialogGML.h