FontEditor: Convert to GML and add new edit commands to GlyphEditor

Adds cut, copy, paste and delete to GlyphEditor. Font preview has
moved to a separate resizable ToolWindow. Font metadata can now be
hidden. FontEditor and glyph widgets can now be re-initialized
instead of resetting window's main widget after loading new fonts.

7 files changed, 483 insertions, 247 deletions

diff --git a/Userland/Applications/FontEditor/CMakeLists.txt b/Userland/Applications/FontEditor/CMakeLists.txt
index 569ab9a9bd..eb760d4401 100644
--- a/Userland/Applications/FontEditor/CMakeLists.txt
+++ b/Userland/Applications/FontEditor/CMakeLists.txt
@@ -1,7 +1,9 @@
 include_directories(${CMAKE_CURRENT_BINARY_DIR})
+compile_gml(FontEditorWindow.gml FontEditorWindowGML.h font_editor_window_gml)
 
 set(SOURCES
     FontEditor.cpp
+    FontEditorWindowGML.h
     GlyphEditorWidget.cpp
     GlyphMapWidget.cpp
     main.cpp
diff --git a/Userland/Applications/FontEditor/FontEditor.cpp b/Userland/Applications/FontEditor/FontEditor.cpp
index 7a43db43e8..7a6babc59c 100644
--- a/Userland/Applications/FontEditor/FontEditor.cpp
+++ b/Userland/Applications/FontEditor/FontEditor.cpp
@@ -28,246 +28,146 @@
 #include "GlyphEditorWidget.h"
 #include "GlyphMapWidget.h"
 #include <AK/StringBuilder.h>
+#include <Applications/FontEditor/FontEditorWindowGML.h>
+#include <LibGUI/Action.h>
 #include <LibGUI/BoxLayout.h>
 #include <LibGUI/Button.h>
 #include <LibGUI/CheckBox.h>
+#include <LibGUI/FilePicker.h>
 #include <LibGUI/GroupBox.h>
 #include <LibGUI/Label.h>
 #include <LibGUI/MessageBox.h>
 #include <LibGUI/Painter.h>
 #include <LibGUI/SpinBox.h>
+#include <LibGUI/StatusBar.h>
 #include <LibGUI/TextBox.h>
+#include <LibGUI/ToolBarContainer.h>
 #include <LibGUI/Window.h>
 #include <LibGfx/BitmapFont.h>
 #include <LibGfx/Palette.h>
 #include <stdlib.h>
 
-FontEditorWidget::FontEditorWidget(const String& path, RefPtr<Gfx::BitmapFont>&& edited_font)
-    : m_edited_font(move(edited_font))
-    , m_path(path)
+static RefPtr<GUI::Window> create_font_preview_window(FontEditorWidget& editor)
 {
-    set_fill_with_background_color(true);
-    set_layout<GUI::VerticalBoxLayout>();
-
-    // Top
-    auto& main_container = add<GUI::Widget>();
-    main_container.set_layout<GUI::HorizontalBoxLayout>();
-    main_container.layout()->set_margins({ 4, 4, 4, 4 });
-    main_container.set_background_role(Gfx::ColorRole::SyntaxKeyword);
-
-    // Top-Left Glyph Editor and info
-    auto& editor_container = main_container.add<GUI::Widget>();
-    editor_container.set_layout<GUI::VerticalBoxLayout>();
-    editor_container.layout()->set_margins({ 4, 4, 4, 4 });
-    editor_container.set_background_role(Gfx::ColorRole::SyntaxKeyword);
-
-    m_glyph_editor_widget = editor_container.add<GlyphEditorWidget>(*m_edited_font);
-    m_glyph_editor_widget->set_fixed_size(m_glyph_editor_widget->preferred_width(), m_glyph_editor_widget->preferred_height());
-
-    editor_container.set_fixed_width(m_glyph_editor_widget->preferred_width());
-
-    auto& glyph_width_label = editor_container.add<GUI::Label>();
-    glyph_width_label.set_fixed_height(22);
-    glyph_width_label.set_text_alignment(Gfx::TextAlignment::CenterLeft);
-    glyph_width_label.set_text("Glyph width:");
-
-    auto& glyph_width_spinbox = editor_container.add<GUI::SpinBox>();
-    glyph_width_spinbox.set_min(0);
-    glyph_width_spinbox.set_max(32);
-    glyph_width_spinbox.set_value(0);
-    glyph_width_spinbox.set_enabled(!m_edited_font->is_fixed_width());
-
-    auto& info_label = editor_container.add<GUI::Label>();
-    info_label.set_fixed_height(22);
-    info_label.set_text_alignment(Gfx::TextAlignment::CenterLeft);
-    info_label.set_text("info_label");
-
-    /// Top-Right glyph map and font meta data
-
-    auto& map_and_test_container = main_container.add<GUI::Widget>();
-    map_and_test_container.set_layout<GUI::VerticalBoxLayout>();
-    map_and_test_container.layout()->set_margins({ 4, 4, 4, 4 });
-
-    m_glyph_map_widget = map_and_test_container.add<GlyphMapWidget>(*m_edited_font);
-    m_glyph_map_widget->set_fixed_size(m_glyph_map_widget->preferred_width(), m_glyph_map_widget->preferred_height());
-
-    auto& font_mtest_group_box = map_and_test_container.add<GUI::GroupBox>();
-    font_mtest_group_box.set_layout<GUI::VerticalBoxLayout>();
-    font_mtest_group_box.layout()->set_margins({ 5, 15, 5, 5 });
-    font_mtest_group_box.set_fixed_height(2 * m_edited_font->glyph_height() + 50);
-    font_mtest_group_box.set_title("Test");
-
-    auto& demo_label_1 = font_mtest_group_box.add<GUI::Label>();
-    demo_label_1.set_font(m_edited_font);
-    demo_label_1.set_text("quick fox jumps nightly above wizard.");
-
-    auto& demo_label_2 = font_mtest_group_box.add<GUI::Label>();
-    demo_label_2.set_font(m_edited_font);
-    demo_label_2.set_text("QUICK FOX JUMPS NIGHTLY ABOVE WIZARD!");
-
-    auto& font_metadata_group_box = map_and_test_container.add<GUI::GroupBox>();
-    font_metadata_group_box.set_layout<GUI::VerticalBoxLayout>();
-    font_metadata_group_box.layout()->set_margins({ 5, 15, 5, 5 });
-    font_metadata_group_box.set_fixed_height(275);
-    font_metadata_group_box.set_title("Font metadata");
-
-    //// Name Row
-    auto& namecontainer = font_metadata_group_box.add<GUI::Widget>();
-    namecontainer.set_layout<GUI::HorizontalBoxLayout>();
-    namecontainer.set_fixed_height(22);
-
-    auto& name_label = namecontainer.add<GUI::Label>();
-    name_label.set_fixed_width(100);
-    name_label.set_text_alignment(Gfx::TextAlignment::CenterLeft);
-    name_label.set_text("Name:");
-
-    auto& name_textbox = namecontainer.add<GUI::TextBox>();
-    name_textbox.set_text(m_edited_font->name());
-    name_textbox.on_change = [&] {
-        m_edited_font->set_name(name_textbox.text());
+    auto window = GUI::Window::construct();
+    window->set_window_type(GUI::WindowType::ToolWindow);
+    window->set_title("Font preview");
+    window->resize(400, 150);
+    window->set_minimum_size(200, 100);
+    window->center_within(*editor.window());
+
+    auto& main_widget = window->set_main_widget<GUI::Widget>();
+    main_widget.set_fill_with_background_color(true);
+    main_widget.set_layout<GUI::VerticalBoxLayout>();
+    main_widget.layout()->set_margins({ 2, 2, 2, 2 });
+    main_widget.layout()->set_spacing(4);
+
+    auto& preview_box = main_widget.add<GUI::GroupBox>();
+    preview_box.set_layout<GUI::VerticalBoxLayout>();
+    preview_box.layout()->set_margins({ 8, 8, 8, 8 });
+
+    auto& preview_label = preview_box.add<GUI::Label>();
+    preview_label.set_text("Five quacking zephyrs jolt my wax bed!");
+    preview_label.set_font(editor.edited_font());
+
+    editor.on_initialize = [&] {
+        preview_label.set_font(editor.edited_font());
     };
 
-    //// Family Row
-    auto& family_container = font_metadata_group_box.add<GUI::Widget>();
-    family_container.set_layout<GUI::HorizontalBoxLayout>();
-    family_container.set_fixed_height(22);
-
-    auto& family_label = family_container.add<GUI::Label>();
-    family_label.set_fixed_width(100);
-    family_label.set_text_alignment(Gfx::TextAlignment::CenterLeft);
-    family_label.set_text("Family:");
+    auto& preview_textbox = main_widget.add<GUI::TextBox>();
+    preview_textbox.set_text("Five quacking zephyrs jolt my wax bed!");
 
-    auto& family_textbox = family_container.add<GUI::TextBox>();
-    family_textbox.set_text(m_edited_font->family());
-    family_textbox.on_change = [&] {
-        m_edited_font->set_family(family_textbox.text());
+    preview_textbox.on_change = [&] {
+        preview_label.set_text(preview_textbox.text());
     };
 
-    //// Presentation size Row
-    auto& presentation_size_container = font_metadata_group_box.add<GUI::Widget>();
-    presentation_size_container.set_layout<GUI::HorizontalBoxLayout>();
-    presentation_size_container.set_fixed_height(22);
-
-    auto& presentation_size_label = presentation_size_container.add<GUI::Label>();
-    presentation_size_label.set_fixed_width(100);
-    presentation_size_label.set_text_alignment(Gfx::TextAlignment::CenterLeft);
-    presentation_size_label.set_text("Presentation size:");
-
-    auto& presentation_size_spinbox = presentation_size_container.add<GUI::SpinBox>();
-    presentation_size_spinbox.set_min(0);
-    presentation_size_spinbox.set_max(255);
-    presentation_size_spinbox.set_value(m_edited_font->presentation_size());
-
-    //// Weight Row
-    auto& weight_container = font_metadata_group_box.add<GUI::Widget>();
-    weight_container.set_layout<GUI::HorizontalBoxLayout>();
-    weight_container.set_fixed_height(22);
-
-    auto& weight_label = weight_container.add<GUI::Label>();
-    weight_label.set_fixed_width(100);
-    weight_label.set_text_alignment(Gfx::TextAlignment::CenterLeft);
-    weight_label.set_text("Weight:");
-
-    auto& weight_spinbox = weight_container.add<GUI::SpinBox>();
-    weight_spinbox.set_min(0);
-    weight_spinbox.set_max(65535);
-    weight_spinbox.set_value(m_edited_font->weight());
-
-    //// Glyph spacing Row
-    auto& glyph_spacing_container = font_metadata_group_box.add<GUI::Widget>();
-    glyph_spacing_container.set_layout<GUI::HorizontalBoxLayout>();
-    glyph_spacing_container.set_fixed_height(22);
-
-    auto& glyph_spacing = glyph_spacing_container.add<GUI::Label>();
-    glyph_spacing.set_fixed_width(100);
-    glyph_spacing.set_text_alignment(Gfx::TextAlignment::CenterLeft);
-    glyph_spacing.set_text("Glyph spacing:");
-
-    auto& spacing_spinbox = glyph_spacing_container.add<GUI::SpinBox>();
-    spacing_spinbox.set_min(0);
-    spacing_spinbox.set_max(255);
-    spacing_spinbox.set_value(m_edited_font->glyph_spacing());
-
-    //// Glyph Height Row
-    auto& glyph_height_container = font_metadata_group_box.add<GUI::Widget>();
-    glyph_height_container.set_layout<GUI::HorizontalBoxLayout>();
-    glyph_height_container.set_fixed_height(22);
-
-    auto& glyph_height = glyph_height_container.add<GUI::Label>();
-    glyph_height.set_fixed_width(100);
-    glyph_height.set_text_alignment(Gfx::TextAlignment::CenterLeft);
-    glyph_height.set_text("Glyph height:");
-
-    auto& glyph_height_spinbox = glyph_height_container.add<GUI::SpinBox>();
-    glyph_height_spinbox.set_min(0);
-    glyph_height_spinbox.set_max(255);
-    glyph_height_spinbox.set_value(m_edited_font->glyph_height());
-    glyph_height_spinbox.set_enabled(false);
-
-    //// Glyph width Row
-    auto& glyph_weight_container = font_metadata_group_box.add<GUI::Widget>();
-    glyph_weight_container.set_layout<GUI::HorizontalBoxLayout>();
-    glyph_weight_container.set_fixed_height(22);
-
-    auto& glyph_header_width_label = glyph_weight_container.add<GUI::Label>();
-    glyph_header_width_label.set_fixed_width(100);
-    glyph_header_width_label.set_text_alignment(Gfx::TextAlignment::CenterLeft);
-    glyph_header_width_label.set_text("Glyph width:");
-
-    auto& glyph_header_width_spinbox = glyph_weight_container.add<GUI::SpinBox>();
-    glyph_header_width_spinbox.set_min(0);
-    glyph_header_width_spinbox.set_max(255);
-    glyph_header_width_spinbox.set_value(m_edited_font->glyph_fixed_width());
-    glyph_header_width_spinbox.set_enabled(false);
-
-    //// Mean line Row
-    auto& mean_line_container = font_metadata_group_box.add<GUI::Widget>();
-    mean_line_container.set_layout<GUI::HorizontalBoxLayout>();
-    mean_line_container.set_fixed_height(22);
-
-    auto& mean_line_label = mean_line_container.add<GUI::Label>();
-    mean_line_label.set_fixed_width(100);
-    mean_line_label.set_text_alignment(Gfx::TextAlignment::CenterLeft);
-    mean_line_label.set_text("Mean line:");
-
-    auto& mean_line_spinbox = mean_line_container.add<GUI::SpinBox>();
-    mean_line_spinbox.set_min(0);
-    mean_line_spinbox.set_max(m_edited_font->glyph_height() - 1);
-    mean_line_spinbox.set_value(m_edited_font->mean_line());
-
-    //// Baseline Row
-    auto& baseline_container = font_metadata_group_box.add<GUI::Widget>();
-    baseline_container.set_layout<GUI::HorizontalBoxLayout>();
-    baseline_container.set_fixed_height(22);
-
-    auto& baseline_label = baseline_container.add<GUI::Label>();
-    baseline_label.set_fixed_width(100);
-    baseline_label.set_text_alignment(Gfx::TextAlignment::CenterLeft);
-    baseline_label.set_text("Baseline:");
-
-    auto& baseline_spinbox = baseline_container.add<GUI::SpinBox>();
-    baseline_spinbox.set_min(0);
-    baseline_spinbox.set_max(m_edited_font->glyph_height() - 1);
-    baseline_spinbox.set_value(m_edited_font->baseline());
-
-    //// Fixed checkbox Row
-    auto& fixed_width_checkbox = font_metadata_group_box.add<GUI::CheckBox>();
-    fixed_width_checkbox.set_text("Fixed width");
-    fixed_width_checkbox.set_checked(m_edited_font->is_fixed_width());
-
-    // Event handlers
+    return window;
+}
+
+FontEditorWidget::FontEditorWidget(const String& path, RefPtr<Gfx::BitmapFont>&& edited_font)
+{
+    load_from_gml(font_editor_window_gml);
+
+    auto& toolbar = *find_descendant_of_type_named<GUI::ToolBar>("toolbar");
+    auto& status_bar = *find_descendant_of_type_named<GUI::StatusBar>("status_bar");
+    auto& glyph_map_container = *find_descendant_of_type_named<GUI::Widget>("glyph_map_container");
+    m_glyph_editor_container = *find_descendant_of_type_named<GUI::Widget>("glyph_editor_container");
+    m_left_column_container = *find_descendant_of_type_named<GUI::Widget>("left_column_container");
+    m_glyph_editor_width_spinbox = *find_descendant_of_type_named<GUI::SpinBox>("glyph_editor_width_spinbox");
+    m_name_textbox = *find_descendant_of_type_named<GUI::TextBox>("name_textbox");
+    m_family_textbox = *find_descendant_of_type_named<GUI::TextBox>("family_textbox");
+    m_presentation_spinbox = *find_descendant_of_type_named<GUI::SpinBox>("presentation_spinbox");
+    m_weight_spinbox = *find_descendant_of_type_named<GUI::SpinBox>("weight_spinbox");
+    m_spacing_spinbox = *find_descendant_of_type_named<GUI::SpinBox>("spacing_spinbox");
+    m_mean_line_spinbox = *find_descendant_of_type_named<GUI::SpinBox>("mean_line_spinbox");
+    m_baseline_spinbox = *find_descendant_of_type_named<GUI::SpinBox>("baseline_spinbox");
+    m_fixed_width_checkbox = *find_descendant_of_type_named<GUI::CheckBox>("fixed_width_checkbox");
+    m_font_metadata_groupbox = *find_descendant_of_type_named<GUI::GroupBox>("font_metadata_groupbox");
+
+    m_glyph_editor_widget = m_glyph_editor_container->add<GlyphEditorWidget>();
+    m_glyph_map_widget = glyph_map_container.add<GlyphMapWidget>();
+
     auto update_demo = [&] {
-        demo_label_1.update();
-        demo_label_2.update();
+        if (m_font_preview_window)
+            m_font_preview_window->update();
     };
 
-    auto calculate_prefed_sizes = [&] {
-        int right_side_width = m_edited_font->width("QUICK FOX JUMPS NIGHTLY ABOVE WIZARD!") + 20;
-        right_side_width = max(right_side_width, m_glyph_map_widget->preferred_width());
+    auto open_action = GUI::CommonActions::make_open_action([&](auto&) {
+        Optional<String> open_path = GUI::FilePicker::get_open_filepath(window(), {}, "/res/fonts/");
+        if (!open_path.has_value())
+            return;
 
-        m_preferred_width = m_glyph_editor_widget->width() + right_side_width + 12;
-        m_preferred_height = m_glyph_map_widget->relative_rect().height() + 2 * m_edited_font->glyph_height() + 346;
-    };
+        auto bitmap_font = Gfx::BitmapFont::load_from_file(open_path.value());
+        if (!bitmap_font) {
+            String message = String::formatted("Couldn't load font: {}\n", open_path.value());
+            GUI::MessageBox::show(window(), message, "Font Editor", GUI::MessageBox::Type::Error);
+            return;
+        }
+        RefPtr<Gfx::BitmapFont> new_font = static_ptr_cast<Gfx::BitmapFont>(bitmap_font->clone());
+        if (!new_font) {
+            String message = String::formatted("Couldn't load font: {}\n", open_path.value());
+            GUI::MessageBox::show(window(), message, "Font Editor", GUI::MessageBox::Type::Error);
+            return;
+        }
+        window()->set_title(String::formatted("{} - Font Editor", open_path.value()));
+        initialize(open_path.value(), move(new_font));
+    });
+    auto save_action = GUI::CommonActions::make_save_action([&](auto&) {
+        save_as(m_path);
+    });
+    auto cut_action = GUI::CommonActions::make_cut_action([&](auto&) {
+        m_glyph_editor_widget->cut_glyph();
+    });
+    auto copy_action = GUI::CommonActions::make_copy_action([&](auto&) {
+        m_glyph_editor_widget->copy_glyph();
+    });
+    auto paste_action = GUI::CommonActions::make_paste_action([&](auto&) {
+        m_glyph_editor_widget->paste_glyph();
+        m_glyph_map_widget->update_glyph(m_glyph_map_widget->selected_glyph());
+    });
+    auto delete_action = GUI::CommonActions::make_delete_action([&](auto&) {
+        m_edited_font->set_glyph_width(m_glyph_map_widget->selected_glyph(), m_edited_font->max_glyph_width());
+        m_glyph_editor_widget->delete_glyph();
+        m_glyph_map_widget->update_glyph(m_glyph_map_widget->selected_glyph());
+        m_glyph_editor_width_spinbox->set_value(m_edited_font->glyph_width(m_glyph_map_widget->selected_glyph()));
+    });
+    auto open_preview_action = GUI::Action::create("Preview", Gfx::Bitmap::load_from_file("/res/icons/16x16/find.png"), [&](auto&) {
+        if (!m_font_preview_window)
+            m_font_preview_window = create_font_preview_window(*this);
+        m_font_preview_window->show();
+        m_font_preview_window->move_to_front();
+    });
+    open_preview_action->set_checked(false);
+
+    toolbar.add_action(*open_action);
+    toolbar.add_action(*save_action);
+    toolbar.add_separator();
+    toolbar.add_action(*cut_action);
+    toolbar.add_action(*copy_action);
+    toolbar.add_action(*paste_action);
+    toolbar.add_action(*delete_action);
+    toolbar.add_separator();
+    toolbar.add_action(*open_preview_action);
 
     m_glyph_editor_widget->on_glyph_altered = [this, update_demo](u8 glyph) {
         m_glyph_map_widget->update_glyph(glyph);
@@ -276,7 +176,7 @@ FontEditorWidget::FontEditorWidget(const String& path, RefPtr<Gfx::BitmapFont>&&
 
     m_glyph_map_widget->on_glyph_selected = [&](size_t glyph) {
         m_glyph_editor_widget->set_glyph(glyph);
-        glyph_width_spinbox.set_value(m_edited_font->glyph_width(m_glyph_map_widget->selected_glyph()));
+        m_glyph_editor_width_spinbox->set_value(m_edited_font->glyph_width(m_glyph_map_widget->selected_glyph()));
         StringBuilder builder;
         builder.appendff("{:#02x} (", glyph);
         if (glyph < 128) {
@@ -286,60 +186,97 @@ FontEditorWidget::FontEditorWidget(const String& path, RefPtr<Gfx::BitmapFont>&&
             builder.append(128 | (glyph % 64));
         }
         builder.append(')');
-        info_label.set_text(builder.to_string());
+        status_bar.set_text(builder.to_string());
+    };
+
+    m_name_textbox->on_change = [&] {
+        m_edited_font->set_name(m_name_textbox->text());
+    };
+
+    m_family_textbox->on_change = [&] {
+        m_edited_font->set_family(m_family_textbox->text());
     };
 
-    fixed_width_checkbox.on_checked = [&, update_demo](bool checked) {
+    m_fixed_width_checkbox->on_checked = [&, update_demo](bool checked) {
         m_edited_font->set_fixed_width(checked);
-        glyph_width_spinbox.set_enabled(!m_edited_font->is_fixed_width());
-        glyph_width_spinbox.set_value(m_edited_font->glyph_width(m_glyph_map_widget->selected_glyph()));
+        m_glyph_editor_width_spinbox->set_enabled(!m_edited_font->is_fixed_width());
+        m_glyph_editor_width_spinbox->set_value(m_edited_font->glyph_width(m_glyph_map_widget->selected_glyph()));
         m_glyph_editor_widget->update();
         update_demo();
     };
 
-    glyph_width_spinbox.on_change = [this, update_demo](int value) {
+    m_glyph_editor_width_spinbox->on_change = [this, update_demo](int value) {
         m_edited_font->set_glyph_width(m_glyph_map_widget->selected_glyph(), value);
         m_glyph_editor_widget->update();
         m_glyph_map_widget->update_glyph(m_glyph_map_widget->selected_glyph());
         update_demo();
     };
 
-    weight_spinbox.on_change = [this, update_demo](int value) {
+    m_weight_spinbox->on_change = [this, update_demo](int value) {
         m_edited_font->set_weight(value);
         update_demo();
     };
 
-    presentation_size_spinbox.on_change = [this, update_demo](int value) {
+    m_presentation_spinbox->on_change = [this, update_demo](int value) {
         m_edited_font->set_presentation_size(value);
         update_demo();
     };
 
-    spacing_spinbox.on_change = [this, update_demo](int value) {
+    m_spacing_spinbox->on_change = [this, update_demo](int value) {
         m_edited_font->set_glyph_spacing(value);
         update_demo();
     };
 
-    baseline_spinbox.on_change = [this, update_demo](int value) {
+    m_baseline_spinbox->on_change = [this, update_demo](int value) {
         m_edited_font->set_baseline(value);
         m_glyph_editor_widget->update();
         update_demo();
     };
 
-    mean_line_spinbox.on_change = [this, update_demo](int value) {
+    m_mean_line_spinbox->on_change = [this, update_demo](int value) {
         m_edited_font->set_mean_line(value);
         m_glyph_editor_widget->update();
         update_demo();
     };
 
-    // init widget
-    calculate_prefed_sizes();
-    m_glyph_map_widget->set_selected_glyph('A');
+    initialize(path, move(edited_font));
 }
 
 FontEditorWidget::~FontEditorWidget()
 {
 }
 
+void FontEditorWidget::initialize(const String& path, RefPtr<Gfx::BitmapFont>&& edited_font)
+{
+    if (m_edited_font == edited_font)
+        return;
+    m_path = path;
+    m_edited_font = edited_font;
+
+    m_glyph_editor_widget->initialize(*m_edited_font);
+    m_glyph_editor_container->set_fixed_size(m_glyph_editor_widget->preferred_width(), m_glyph_editor_widget->preferred_height());
+    m_left_column_container->set_fixed_width(m_glyph_editor_widget->preferred_width());
+    m_glyph_editor_width_spinbox->set_enabled(!m_edited_font->is_fixed_width());
+    m_glyph_editor_width_spinbox->set_max(m_edited_font->max_glyph_width());
+
+    m_glyph_map_widget->initialize(*m_edited_font);
+    m_glyph_map_widget->set_selected_glyph('A');
+
+    m_name_textbox->set_text(m_edited_font->name());
+    m_family_textbox->set_text(m_edited_font->family());
+
+    m_presentation_spinbox->set_value(m_edited_font->presentation_size());
+    m_weight_spinbox->set_value(m_edited_font->weight());
+    m_spacing_spinbox->set_value(m_edited_font->glyph_spacing());
+    m_mean_line_spinbox->set_value(m_edited_font->mean_line());
+    m_baseline_spinbox->set_value(m_edited_font->baseline());
+
+    m_fixed_width_checkbox->set_checked(m_edited_font->is_fixed_width());
+
+    if (on_initialize)
+        on_initialize();
+}
+
 bool FontEditorWidget::save_as(const String& path)
 {
     auto ret_val = m_edited_font->write_to_file(path);
@@ -350,3 +287,11 @@ bool FontEditorWidget::save_as(const String& path)
     m_path = path;
     return true;
 }
+
+void FontEditorWidget::set_show_font_metadata(bool show)
+{
+    if (m_font_metadata == show)
+        return;
+    m_font_metadata = show;
+    m_font_metadata_groupbox->set_visible(m_font_metadata);
+}
diff --git a/Userland/Applications/FontEditor/FontEditor.h b/Userland/Applications/FontEditor/FontEditor.h
index ed904e8e7d..0f2a55041c 100644
--- a/Userland/Applications/FontEditor/FontEditor.h
+++ b/Userland/Applications/FontEditor/FontEditor.h
@@ -26,7 +26,6 @@
 
 #pragma once
 
-#include <AK/Function.h>
 #include <LibGUI/Widget.h>
 #include <LibGfx/BitmapFont.h>
 
@@ -38,12 +37,16 @@ class FontEditorWidget final : public GUI::Widget {
 public:
     virtual ~FontEditorWidget() override;
 
-    int preferred_width() { return m_preferred_width; }
-    int preferred_height() { return m_preferred_height; }
-
     bool save_as(const String&);
 
     const String& path() { return m_path; }
+    const Gfx::BitmapFont& edited_font() { return *m_edited_font; }
+    void initialize(const String& path, RefPtr<Gfx::BitmapFont>&&);
+
+    bool is_showing_font_metadata() { return m_font_metadata; }
+    void set_show_font_metadata(bool b);
+
+    Function<void()> on_initialize;
 
 private:
     FontEditorWidget(const String& path, RefPtr<Gfx::BitmapFont>&&);
@@ -52,7 +55,20 @@ private:
     RefPtr<GlyphMapWidget> m_glyph_map_widget;
     RefPtr<GlyphEditorWidget> m_glyph_editor_widget;
 
+    RefPtr<GUI::Window> m_font_preview_window;
+    RefPtr<GUI::Widget> m_left_column_container;
+    RefPtr<GUI::Widget> m_glyph_editor_container;
+    RefPtr<GUI::SpinBox> m_weight_spinbox;
+    RefPtr<GUI::SpinBox> m_spacing_spinbox;
+    RefPtr<GUI::SpinBox> m_baseline_spinbox;
+    RefPtr<GUI::SpinBox> m_mean_line_spinbox;
+    RefPtr<GUI::SpinBox> m_presentation_spinbox;
+    RefPtr<GUI::SpinBox> m_glyph_editor_width_spinbox;
+    RefPtr<GUI::TextBox> m_name_textbox;
+    RefPtr<GUI::TextBox> m_family_textbox;
+    RefPtr<GUI::CheckBox> m_fixed_width_checkbox;
+    RefPtr<GUI::GroupBox> m_font_metadata_groupbox;
+
     String m_path;
-    int m_preferred_width;
-    int m_preferred_height;
+    bool m_font_metadata { true };
 };
diff --git a/Userland/Applications/FontEditor/FontEditorWindow.gml b/Userland/Applications/FontEditor/FontEditorWindow.gml
new file mode 100644
index 0000000000..c6500eca0d
--- /dev/null
+++ b/Userland/Applications/FontEditor/FontEditorWindow.gml
@@ -0,0 +1,206 @@
+@GUI::Widget {
+    fill_with_background_color: true
+    layout: @GUI::VerticalBoxLayout {
+    }
+
+    @GUI::ToolBarContainer {
+        name: "toolbar_container"
+
+        @GUI::ToolBar {
+            name: "toolbar"
+        }
+    }
+
+    @GUI::Widget {
+        layout: @GUI::HorizontalBoxLayout {
+        }
+
+        @GUI::Widget {
+            name: "left_column_container"
+            layout: @GUI::VerticalBoxLayout {
+            }
+
+            @GUI::Widget {
+                name: "glyph_editor_container"
+                layout: @GUI::VerticalBoxLayout {
+                }
+            }
+
+            @GUI::Widget {
+                fixed_height: 22
+                layout: @GUI::VerticalBoxLayout {
+                }
+
+                @GUI::SpinBox {
+                    name: "glyph_editor_width_spinbox"
+                }
+            }
+
+            @GUI::Widget {
+            }
+        }
+
+        @GUI::Widget {
+            name: "right_column_container"
+            layout: @GUI::VerticalBoxLayout {
+                spacing: 6
+            }
+
+            @GUI::Widget {
+                name: "glyph_map_container"
+                layout: @GUI::VerticalBoxLayout {
+                }
+            }
+
+            @GUI::GroupBox {
+                name: "font_metadata_groupbox"
+                title: "Font metadata"
+                fixed_height: 220
+                layout: @GUI::VerticalBoxLayout {
+                    margins: [8, 16, 8, 4]
+                }
+
+                @GUI::Widget {
+                    layout: @GUI::HorizontalBoxLayout {
+                    }
+
+                    @GUI::Label {
+                        name: "name_label"
+                        fixed_width: 100
+                        text_alignment: "CenterLeft"
+                        text: "Name:"
+                    }
+
+                    @GUI::TextBox {
+                        name: "name_textbox"
+                    }
+                }
+
+                @GUI::Widget {
+                    layout: @GUI::HorizontalBoxLayout {
+                    }
+
+                    @GUI::Label {
+                        name: "family_label"
+                        fixed_width: 100
+                        text_alignment: "CenterLeft"
+                        text: "Family:"
+                    }
+
+                    @GUI::TextBox {
+                        name: "family_textbox"
+                    }
+                }
+
+                @GUI::Widget {
+                    layout: @GUI::HorizontalBoxLayout {
+                    }
+
+                    @GUI::Label {
+                        name: "presentation_label"
+                        fixed_width: 100
+                        text_alignment: "CenterLeft"
+                        text: "Presentation size:"
+                    }
+
+                    @GUI::SpinBox {
+                        name: "presentation_spinbox"
+                        min: 0
+                        max: 255
+                    }
+                }
+
+                @GUI::Widget {
+                    layout: @GUI::HorizontalBoxLayout {
+                    }
+
+                    @GUI::Label {
+                        name: "weight_label"
+                        fixed_width: 100
+                        text_alignment: "CenterLeft"
+                        text: "Weight:"
+                    }
+
+                    @GUI::SpinBox {
+                        name: "weight_spinbox"
+                        min: 0
+                        max: 65535
+                    }
+                }
+
+                @GUI::Widget {
+                    layout: @GUI::HorizontalBoxLayout {
+                    }
+
+                    @GUI::Label {
+                        name: "spacing_label"
+                        fixed_width: 100
+                        text_alignment: "CenterLeft"
+                        text: "Glyph spacing:"
+                    }
+
+                    @GUI::SpinBox {
+                        name: "spacing_spinbox"
+                        min: 0
+                        max: 255
+                    }
+                }
+
+                @GUI::Widget {
+                    layout: @GUI::HorizontalBoxLayout {
+                    }
+
+                    @GUI::Label {
+                        name: "mean_line_label"
+                        fixed_width: 100
+                        text_alignment: "CenterLeft"
+                        text: "Mean line:"
+                    }
+
+                    @GUI::SpinBox {
+                        name: "mean_line_spinbox"
+                        min: 0
+                        max: 32
+                    }
+                }
+
+                @GUI::Widget {
+                    layout: @GUI::HorizontalBoxLayout {
+                    }
+
+                    @GUI::Label {
+                        name: "baseline_label"
+                        fixed_width: 100
+                        text_alignment: "CenterLeft"
+                        text: "Baseline:"
+                    }
+
+                    @GUI::SpinBox {
+                        name: "baseline_spinbox"
+                        min: 0
+                        max: 32
+                    }
+                }
+
+                @GUI::Widget {
+                    fixed_height: 22
+                    layout: @GUI::HorizontalBoxLayout {
+                    }
+
+                    @GUI::CheckBox {
+                        name: "fixed_width_checkbox"
+                        text: "Fixed width"
+                        autosize: true
+                    }
+
+                    @GUI::Widget {
+                    }
+                }
+            }
+        }
+    }
+
+    @GUI::StatusBar {
+        name: "status_bar"
+    }
+}
diff --git a/Userland/Applications/FontEditor/GlyphEditorWidget.cpp b/Userland/Applications/FontEditor/GlyphEditorWidget.cpp
index aeabe6a03d..3d70e98277 100644
--- a/Userland/Applications/FontEditor/GlyphEditorWidget.cpp
+++ b/Userland/Applications/FontEditor/GlyphEditorWidget.cpp
@@ -29,14 +29,19 @@
 #include <LibGfx/BitmapFont.h>
 #include <LibGfx/Palette.h>
 
-GlyphEditorWidget::GlyphEditorWidget(Gfx::BitmapFont& mutable_font)
-    : m_font(mutable_font)
+GlyphEditorWidget::~GlyphEditorWidget()
 {
-    set_relative_rect({ 0, 0, preferred_width(), preferred_height() });
 }
 
-GlyphEditorWidget::~GlyphEditorWidget()
+void GlyphEditorWidget::initialize(Gfx::BitmapFont& mutable_font)
 {
+    if (m_font == mutable_font)
+        return;
+    m_font = mutable_font;
+    set_relative_rect({ 0, 0, preferred_width(), preferred_height() });
+    m_clipboard_font = m_font->clone();
+    m_clipboard_glyph = m_clipboard_font->glyph(0).glyph_bitmap();
+    clear_clipboard_glyph();
 }
 
 void GlyphEditorWidget::set_glyph(int glyph)
@@ -47,6 +52,50 @@ void GlyphEditorWidget::set_glyph(int glyph)
     update();
 }
 
+void GlyphEditorWidget::delete_glyph()
+{
+    auto bitmap = font().glyph(m_glyph).glyph_bitmap();
+    for (int x = 0; x < bitmap.width(); x++)
+        for (int y = 0; y < bitmap.height(); y++)
+            bitmap.set_bit_at(x, y, false);
+    if (on_glyph_altered)
+        on_glyph_altered(m_glyph);
+    update();
+}
+
+void GlyphEditorWidget::cut_glyph()
+{
+    copy_glyph();
+    delete_glyph();
+}
+
+void GlyphEditorWidget::copy_glyph()
+{
+    clear_clipboard_glyph();
+    auto bitmap = font().glyph(m_glyph).glyph_bitmap();
+    for (int x = 0; x < bitmap.width(); x++)
+        for (int y = 0; y < bitmap.height(); y++)
+            m_clipboard_glyph.set_bit_at(x, y, bitmap.bit_at(x, y));
+}
+
+void GlyphEditorWidget::paste_glyph()
+{
+    auto bitmap = font().glyph(m_glyph).glyph_bitmap();
+    for (int x = 0; x < bitmap.width(); x++)
+        for (int y = 0; y < bitmap.height(); y++)
+            bitmap.set_bit_at(x, y, m_clipboard_glyph.bit_at(x, y));
+    if (on_glyph_altered)
+        on_glyph_altered(m_glyph);
+    update();
+}
+
+void GlyphEditorWidget::clear_clipboard_glyph()
+{
+    for (int x = 0; x < m_clipboard_glyph.width(); x++)
+        for (int y = 0; y < m_clipboard_glyph.height(); y++)
+            m_clipboard_glyph.set_bit_at(x, y, false);
+}
+
 void GlyphEditorWidget::paint_event(GUI::PaintEvent& event)
 {
     GUI::Frame::paint_event(event);
diff --git a/Userland/Applications/FontEditor/GlyphEditorWidget.h b/Userland/Applications/FontEditor/GlyphEditorWidget.h
index a54c551642..045e15df6c 100644
--- a/Userland/Applications/FontEditor/GlyphEditorWidget.h
+++ b/Userland/Applications/FontEditor/GlyphEditorWidget.h
@@ -35,9 +35,17 @@ class GlyphEditorWidget final : public GUI::Frame {
 public:
     virtual ~GlyphEditorWidget() override;
 
+    void initialize(Gfx::BitmapFont&);
+
     int glyph() const { return m_glyph; }
     void set_glyph(int);
 
+    void cut_glyph();
+    void copy_glyph();
+    void paste_glyph();
+    void delete_glyph();
+    void clear_clipboard_glyph();
+
     int preferred_width() const;
     int preferred_height() const;
 
@@ -47,7 +55,7 @@ public:
     Function<void(u8)> on_glyph_altered;
 
 private:
-    GlyphEditorWidget(Gfx::BitmapFont&);
+    GlyphEditorWidget() {};
     virtual void paint_event(GUI::PaintEvent&) override;
     virtual void mousedown_event(GUI::MouseEvent&) override;
     virtual void mousemove_event(GUI::MouseEvent&) override;
@@ -55,6 +63,8 @@ private:
     void draw_at_mouse(const GUI::MouseEvent&);
 
     RefPtr<Gfx::BitmapFont> m_font;
+    RefPtr<Gfx::Font> m_clipboard_font;
+    Gfx::GlyphBitmap m_clipboard_glyph;
     int m_glyph { 0 };
     int m_scale { 10 };
 };
diff --git a/Userland/Applications/FontEditor/main.cpp b/Userland/Applications/FontEditor/main.cpp
index db91ce1c51..c18a0a14d9 100644
--- a/Userland/Applications/FontEditor/main.cpp
+++ b/Userland/Applications/FontEditor/main.cpp
@@ -98,23 +98,24 @@ int main(int argc, char** argv)
 
     auto window = GUI::Window::construct();
     window->set_icon(app_icon.bitmap_for_size(16));
+    window->resize(440, 470);
+    window->set_main_widget<FontEditorWidget>(path, move(edited_font));
+    window->set_title(String::formatted("{} - Font Editor", path));
 
-    auto set_edited_font = [&](const String& path, RefPtr<Gfx::BitmapFont>&& font, Gfx::IntPoint point) {
+    auto set_edited_font = [&](const String& path, RefPtr<Gfx::BitmapFont>&& font) {
         // Convert 256 char font to 384 char font.
         if (font->type() == Gfx::FontTypes::Default)
             font->set_type(Gfx::FontTypes::LatinExtendedA);
 
         window->set_title(String::formatted("{} - Font Editor", path));
-        auto& font_editor_widget = window->set_main_widget<FontEditorWidget>(path, move(font));
-        window->set_rect({ point, { font_editor_widget.preferred_width(), font_editor_widget.preferred_height() } });
+        static_cast<FontEditorWidget*>(window->main_widget())->initialize(path, move(font));
     };
-    set_edited_font(path, move(edited_font), window->position());
 
     auto menubar = GUI::MenuBar::construct();
 
     auto& app_menu = menubar->add_menu("File");
     app_menu.add_action(GUI::CommonActions::make_open_action([&](auto&) {
-        Optional<String> open_path = GUI::FilePicker::get_open_filepath(window);
+        Optional<String> open_path = GUI::FilePicker::get_open_filepath(window, {}, "/res/fonts/");
         if (!open_path.has_value())
             return;
 
@@ -131,7 +132,7 @@ int main(int argc, char** argv)
             return;
         }
 
-        set_edited_font(open_path.value(), move(new_font), window->position());
+        set_edited_font(open_path.value(), move(new_font));
     }));
     app_menu.add_action(GUI::CommonActions::make_save_action([&](auto&) {
         FontEditorWidget* editor = static_cast<FontEditorWidget*>(window->main_widget());
@@ -152,6 +153,13 @@ int main(int argc, char** argv)
         app->quit();
     }));
 
+    auto& view_menu = menubar->add_menu("View");
+    auto set_font_metadata = GUI::Action::create_checkable("Font metadata", { Mod_Ctrl, Key_M }, [&](auto& action) {
+        static_cast<FontEditorWidget*>(window->main_widget())->set_show_font_metadata(action.is_checked());
+    });
+    set_font_metadata->set_checked(true);
+    view_menu.add_action(*set_font_metadata);
+
     auto& help_menu = menubar->add_menu("Help");
     help_menu.add_action(GUI::CommonActions::make_help_action([](auto&) {
         Desktop::Launcher::open(URL::create_with_file_protocol("/usr/share/man/man1/FontEditor.md"), "/bin/Help");