LibWeb: Allow input color to give continuous updates

Ladybird/AppKit/UI/LadybirdWebView.mm

@@ -599,6 +599,8 @@ static void copy_data_to_clipboard(StringView data, NSPasteboardType pasteboard_
         auto* panel = [NSColorPanel sharedColorPanel];
         [panel setColor:Ladybird::gfx_color_to_ns_color(current_color)];
         [panel setShowsAlpha:NO];
+        [panel setTarget:self];
+        [panel setAction:@selector(colorPickerUpdate:)];
 
         NSNotificationCenter* notification_center = [NSNotificationCenter defaultCenter];
         [notification_center addObserver:self
@@ -761,9 +763,14 @@ static void copy_data_to_clipboard(StringView data, NSPasteboardType pasteboard_
         m_web_view_bridge->select_dropdown_closed({});
 }
 
+- (void)colorPickerUpdate:(NSColorPanel*)colorPanel
+{
+    m_web_view_bridge->color_picker_update(Ladybird::ns_color_to_gfx_color(colorPanel.color), Web::HTML::ColorPickerUpdateState::Update);
+}
+
 - (void)colorPickerClosed:(NSNotification*)notification
 {
-    m_web_view_bridge->color_picker_closed(Ladybird::ns_color_to_gfx_color([[NSColorPanel sharedColorPanel] color]));
+    m_web_view_bridge->color_picker_update(Ladybird::ns_color_to_gfx_color([NSColorPanel sharedColorPanel].color), Web::HTML::ColorPickerUpdateState::Closed);
 }
 
 - (NSScrollView*)scrollView

Ladybird/Qt/Tab.cpp

@@ -217,11 +217,14 @@ Tab::Tab(BrowserWindow* window, WebContentOptions const& web_content_options, St
 
         dialog.setWindowTitle("Ladybird");
         dialog.setOption(QColorDialog::ShowAlphaChannel, false);
+        QObject::connect(&dialog, &QColorDialog::currentColorChanged, this, [this](const QColor& color) {
+            view().color_picker_update(Color(color.red(), color.green(), color.blue()), Web::HTML::ColorPickerUpdateState::Update);
+        });
 
         if (dialog.exec() == QDialog::Accepted)
-            view().color_picker_closed(Color(dialog.selectedColor().red(), dialog.selectedColor().green(), dialog.selectedColor().blue()));
+            view().color_picker_update(Color(dialog.selectedColor().red(), dialog.selectedColor().green(), dialog.selectedColor().blue()), Web::HTML::ColorPickerUpdateState::Closed);
         else
-            view().color_picker_closed({});
+            view().color_picker_update({}, Web::HTML::ColorPickerUpdateState::Closed);
 
         m_dialog = nullptr;
     };

Userland/Applications/Browser/Tab.cpp

@@ -569,11 +569,14 @@ Tab::Tab(BrowserWindow& window)
 
         dialog.set_icon(window.icon());
         dialog.set_color_has_alpha_channel(false);
+        dialog.on_color_changed = [this](Color color) {
+            view().color_picker_update(color, Web::HTML::ColorPickerUpdateState::Update);
+        };
 
         if (dialog.exec() == GUI::ColorPicker::ExecResult::OK)
-            view().color_picker_closed(dialog.color());
+            view().color_picker_update(dialog.color(), Web::HTML::ColorPickerUpdateState::Closed);
         else
-            view().color_picker_closed({});
+            view().color_picker_update({}, Web::HTML::ColorPickerUpdateState::Closed);
 
         m_dialog = nullptr;
     };

Userland/Libraries/LibWeb/HTML/ColorPickerUpdateState.h

@@ -0,0 +1,16 @@
+/*
+ * Copyright (c) 2023, Bastiaan van der Plaat <bastiaan.v.d.plaat@gmail.com>
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#pragma once
+
+namespace Web::HTML {
+
+enum class ColorPickerUpdateState {
+    Update,
+    Closed,
+};
+
+}

Userland/Libraries/LibWeb/Page/Page.cpp

@@ -326,15 +326,17 @@ void Page::did_request_color_picker(WeakPtr<HTML::HTMLInputElement> target, Colo
     }
 }
 
-void Page::color_picker_closed(Optional<Color> picked_color)
+void Page::color_picker_update(Optional<Color> picked_color, HTML::ColorPickerUpdateState state)
 {
     if (m_pending_non_blocking_dialog == PendingNonBlockingDialog::ColorPicker) {
-        m_pending_non_blocking_dialog = PendingNonBlockingDialog::None;
+        if (state == HTML::ColorPickerUpdateState::Closed)
+            m_pending_non_blocking_dialog = PendingNonBlockingDialog::None;
 
         if (m_pending_non_blocking_dialog_target) {
             auto& input_element = verify_cast<HTML::HTMLInputElement>(*m_pending_non_blocking_dialog_target);
             input_element.did_pick_color(move(picked_color));
-            m_pending_non_blocking_dialog_target.clear();
+            if (state == HTML::ColorPickerUpdateState::Closed)
+                m_pending_non_blocking_dialog_target.clear();
         }
     }
 }

Userland/Libraries/LibWeb/Page/Page.h

@@ -30,6 +30,7 @@
 #include <LibWeb/Cookie/Cookie.h>
 #include <LibWeb/Forward.h>
 #include <LibWeb/HTML/ActivateTab.h>
+#include <LibWeb/HTML/ColorPickerUpdateState.h>
 #include <LibWeb/HTML/SelectItem.h>
 #include <LibWeb/Loader/FileRequest.h>
 #include <LibWeb/PixelUnits.h>
@@ -128,7 +129,7 @@ public:
     void accept_dialog();
 
     void did_request_color_picker(WeakPtr<HTML::HTMLInputElement> target, Color current_color);
-    void color_picker_closed(Optional<Color> picked_color);
+    void color_picker_update(Optional<Color> picked_color, HTML::ColorPickerUpdateState state);
 
     void did_request_select_dropdown(WeakPtr<HTML::HTMLSelectElement> target, Web::CSSPixelPoint content_position, Web::CSSPixels minimum_width, Vector<Web::HTML::SelectItem> items);
     void select_dropdown_closed(Optional<String> value);

Userland/Libraries/LibWebView/ViewImplementation.cpp

@@ -231,9 +231,9 @@ void ViewImplementation::prompt_closed(Optional<String> response)
     client().async_prompt_closed(move(response));
 }
 
-void ViewImplementation::color_picker_closed(Optional<Color> picked_color)
+void ViewImplementation::color_picker_update(Optional<Color> picked_color, Web::HTML::ColorPickerUpdateState state)
 {
-    client().async_color_picker_closed(picked_color);
+    client().async_color_picker_update(picked_color, state);
 }
 
 void ViewImplementation::select_dropdown_closed(Optional<String> value)

Userland/Libraries/LibWebView/ViewImplementation.h

@@ -16,6 +16,7 @@
 #include <LibGfx/StandardCursor.h>
 #include <LibWeb/Forward.h>
 #include <LibWeb/HTML/ActivateTab.h>
+#include <LibWeb/HTML/ColorPickerUpdateState.h>
 #include <LibWeb/HTML/SelectItem.h>
 #include <LibWebView/Forward.h>
 #include <LibWebView/WebContentClient.h>
@@ -84,7 +85,7 @@ public:
     void alert_closed();
     void confirm_closed(bool accepted);
     void prompt_closed(Optional<String> response);
-    void color_picker_closed(Optional<Color> picked_color);
+    void color_picker_update(Optional<Color> picked_color, Web::HTML::ColorPickerUpdateState state);
     void select_dropdown_closed(Optional<String> value);
 
     void toggle_media_play_state();

Userland/Services/WebContent/ConnectionFromClient.cpp

@@ -1063,9 +1063,9 @@ void ConnectionFromClient::prompt_closed(Optional<String> const& response)
     page().page().prompt_closed(response);
 }
 
-void ConnectionFromClient::color_picker_closed(Optional<Color> const& picked_color)
+void ConnectionFromClient::color_picker_update(Optional<Color> const& picked_color, Web::HTML::ColorPickerUpdateState const& state)
 {
-    page().page().color_picker_closed(picked_color);
+    page().page().color_picker_update(picked_color, state);
 }
 
 void ConnectionFromClient::select_dropdown_closed(Optional<String> const& value)

Userland/Services/WebContent/ConnectionFromClient.h

@@ -109,7 +109,7 @@ private:
     virtual void alert_closed() override;
     virtual void confirm_closed(bool accepted) override;
     virtual void prompt_closed(Optional<String> const& response) override;
-    virtual void color_picker_closed(Optional<Color> const& picked_color) override;
+    virtual void color_picker_update(Optional<Color> const& picked_color, Web::HTML::ColorPickerUpdateState const& state) override;
     virtual void select_dropdown_closed(Optional<String> const& value) override;
 
     virtual void toggle_media_play_state() override;

Userland/Services/WebContent/PageClient.cpp

@@ -417,9 +417,9 @@ void PageClient::prompt_closed(Optional<String> response)
     page().prompt_closed(move(response));
 }
 
-void PageClient::color_picker_closed(Optional<Color> picked_color)
+void PageClient::color_picker_update(Optional<Color> picked_color, Web::HTML::ColorPickerUpdateState state)
 {
-    page().color_picker_closed(picked_color);
+    page().color_picker_update(picked_color, state);
 }
 
 void PageClient::select_dropdown_closed(Optional<String> value)

Userland/Services/WebContent/PageClient.h

@@ -58,7 +58,7 @@ public:
     void alert_closed();
     void confirm_closed(bool accepted);
     void prompt_closed(Optional<String> response);
-    void color_picker_closed(Optional<Color> picked_color);
+    void color_picker_update(Optional<Color> picked_color, Web::HTML::ColorPickerUpdateState state);
     void select_dropdown_closed(Optional<String> value);
 
     [[nodiscard]] Gfx::Color background_color() const;

Userland/Services/WebContent/WebContentServer.ipc

@@ -5,6 +5,7 @@
 #include <LibGfx/ShareableBitmap.h>
 #include <LibWeb/CSS/PreferredColorScheme.h>
 #include <LibWeb/CSS/Selector.h>
+#include <LibWeb/HTML/ColorPickerUpdateState.h>
 #include <LibWeb/WebDriver/ExecuteScript.h>
 #include <LibWebView/Attribute.h>
 
@@ -90,7 +91,7 @@ endpoint WebContentServer
     alert_closed() =|
     confirm_closed(bool accepted) =|
     prompt_closed(Optional<String> response) =|
-    color_picker_closed(Optional<Color> picked_color) =|
+    color_picker_update(Optional<Color> picked_color, Web::HTML::ColorPickerUpdateState state) =|
     select_dropdown_closed(Optional<String> value) =|
 
     toggle_media_play_state() =|