LibGUI: Create the emoji buttons only once for EmojiInputDialog

To prevent lag when the displayed code points are redrawn in support of
a search box, only create the GUI::Button objects for the emoji a single
time. Re-use those buttons when adding them to the dialog.

2 files changed, 57 insertions, 43 deletions

diff --git a/Userland/Libraries/LibGUI/EmojiInputDialog.cpp b/Userland/Libraries/LibGUI/EmojiInputDialog.cpp
index f754566c3a..f17dae1e02 100644
--- a/Userland/Libraries/LibGUI/EmojiInputDialog.cpp
+++ b/Userland/Libraries/LibGUI/EmojiInputDialog.cpp
@@ -20,27 +20,6 @@
 
 namespace GUI {
 
-static Vector<u32> supported_emoji_code_points()
-{
-    Vector<u32> code_points;
-    Core::DirIterator dt("/res/emoji", Core::DirIterator::SkipDots);
-    while (dt.has_next()) {
-        auto filename = dt.next_path();
-        auto lexical_path = LexicalPath(filename);
-        if (lexical_path.extension() != "png")
-            continue;
-        auto basename = lexical_path.basename();
-        if (!basename.starts_with("U+"sv))
-            continue;
-        // FIXME: Handle multi code point emojis.
-        if (basename.contains('_'))
-            continue;
-        u32 code_point = strtoul(basename.to_string().characters() + 2, nullptr, 16);
-        code_points.append(code_point);
-    }
-    return code_points;
-}
-
 EmojiInputDialog::EmojiInputDialog(Window* parent_window)
     : Dialog(parent_window)
 {
@@ -53,7 +32,7 @@ EmojiInputDialog::EmojiInputDialog(Window* parent_window)
 
     auto& scrollable_container = *main_widget.find_descendant_of_type_named<GUI::ScrollableContainerWidget>("scrollable_container"sv);
     m_emojis_widget = main_widget.find_descendant_of_type_named<GUI::Widget>("emojis"sv);
-    m_code_points = supported_emoji_code_points();
+    m_emojis = supported_emoji();
 
     scrollable_container.horizontal_scrollbar().set_visible(false);
     update_displayed_emoji();
@@ -64,35 +43,64 @@ EmojiInputDialog::EmojiInputDialog(Window* parent_window)
     };
 }
 
-void EmojiInputDialog::update_displayed_emoji()
+auto EmojiInputDialog::supported_emoji() -> Vector<Emoji>
 {
     constexpr int button_size = 20;
+
+    Vector<Emoji> code_points;
+    Core::DirIterator dt("/res/emoji", Core::DirIterator::SkipDots);
+    while (dt.has_next()) {
+        auto filename = dt.next_path();
+        auto lexical_path = LexicalPath(filename);
+        if (lexical_path.extension() != "png")
+            continue;
+        auto basename = lexical_path.basename();
+        if (!basename.starts_with("U+"sv))
+            continue;
+        // FIXME: Handle multi code point emojis.
+        if (basename.contains('_'))
+            continue;
+
+        u32 code_point = strtoul(basename.to_string().characters() + 2, nullptr, 16);
+
+        // FIXME: Also emit U+FE0F for single code point emojis, currently
+        // they get shown as text glyphs if available.
+        // This will require buttons to don't calculate their length as 2,
+        // currently it just shows an ellipsis. It will also require some
+        // tweaking of the mechanism that is currently being used to insert
+        // which is a key event with a single code point.
+        StringBuilder builder;
+        builder.append(Utf32View(&code_point, 1));
+        auto emoji_text = builder.to_string();
+
+        auto button = Button::construct(move(emoji_text));
+        button->set_fixed_size(button_size, button_size);
+        button->set_button_style(Gfx::ButtonStyle::Coolbar);
+        button->on_click = [this, button = button](auto) {
+            m_selected_emoji_text = button->text();
+            done(ExecResult::OK);
+        };
+
+        code_points.empend(code_point, move(button));
+    }
+
+    return code_points;
+}
+
+void EmojiInputDialog::update_displayed_emoji()
+{
     constexpr size_t columns = 18;
-    size_t rows = ceil_div(m_code_points.size(), columns);
+    size_t rows = ceil_div(m_emojis.size(), columns);
     size_t index = 0;
 
-    for (size_t row = 0; row < rows && index < m_code_points.size(); ++row) {
+    for (size_t row = 0; row < rows && index < m_emojis.size(); ++row) {
         auto& horizontal_container = m_emojis_widget->add<Widget>();
         auto& horizontal_layout = horizontal_container.set_layout<HorizontalBoxLayout>();
         horizontal_layout.set_spacing(0);
         for (size_t column = 0; column < columns; ++column) {
-            if (index < m_code_points.size()) {
-                // FIXME: Also emit U+FE0F for single code point emojis, currently
-                // they get shown as text glyphs if available.
-                // This will require buttons to don't calculate their length as 2,
-                // currently it just shows an ellipsis. It will also require some
-                // tweaking of the mechanism that is currently being used to insert
-                // which is a key event with a single code point.
-                StringBuilder builder;
-                builder.append(Utf32View(&m_code_points[index++], 1));
-                auto emoji_text = builder.to_string();
-                auto& button = horizontal_container.add<Button>(emoji_text);
-                button.set_fixed_size(button_size, button_size);
-                button.set_button_style(Gfx::ButtonStyle::Coolbar);
-                button.on_click = [this, button = &button](auto) {
-                    m_selected_emoji_text = button->text();
-                    done(ExecResult::OK);
-                };
+            if (index < m_emojis.size()) {
+                auto& emoji = m_emojis[index++];
+                horizontal_container.add_child(*emoji.button);
             } else {
                 horizontal_container.add<Widget>();
             }
diff --git a/Userland/Libraries/LibGUI/EmojiInputDialog.h b/Userland/Libraries/LibGUI/EmojiInputDialog.h
index 214d774db8..acf8981270 100644
--- a/Userland/Libraries/LibGUI/EmojiInputDialog.h
+++ b/Userland/Libraries/LibGUI/EmojiInputDialog.h
@@ -13,6 +13,11 @@ namespace GUI {
 class EmojiInputDialog final : public Dialog {
     C_OBJECT(EmojiInputDialog);
 
+    struct Emoji {
+        u32 code_point { 0 };
+        RefPtr<Button> button;
+    };
+
 public:
     String const& selected_emoji_text() const { return m_selected_emoji_text; }
 
@@ -20,10 +25,11 @@ private:
     virtual void event(Core::Event&) override;
     explicit EmojiInputDialog(Window* parent_window);
 
+    Vector<Emoji> supported_emoji();
     void update_displayed_emoji();
 
     RefPtr<Widget> m_emojis_widget;
-    Vector<u32> m_code_points;
+    Vector<Emoji> m_emojis;
     String m_selected_emoji_text;
 };