LibWeb: Partially implement MouseEvent.movementX/movementY

Currently doesn't handle the mouse leaving and entering the window per
the spec, and uses clientX/Y instead of screenX/Y. See FIXMEs.

Userland/Libraries/LibWeb/Page/EventHandler.cpp

@@ -248,15 +248,15 @@ bool EventHandler::handle_mouseup(CSSPixelPoint position, unsigned button, unsig
             auto offset = compute_mouse_event_offset(position, *layout_node);
             auto client_offset = compute_mouse_event_client_offset(position);
             auto page_offset = compute_mouse_event_page_offset(client_offset);
-            node->dispatch_event(UIEvents::MouseEvent::create_from_platform_event(node->realm(), UIEvents::EventNames::mouseup, offset, client_offset, page_offset, buttons, button).release_value_but_fixme_should_propagate_errors());
+            node->dispatch_event(UIEvents::MouseEvent::create_from_platform_event(node->realm(), UIEvents::EventNames::mouseup, offset, client_offset, page_offset, {}, buttons, button).release_value_but_fixme_should_propagate_errors());
             handled_event = true;
 
             bool run_activation_behavior = false;
             if (node.ptr() == m_mousedown_target) {
                 if (button == GUI::MouseButton::Primary)
-                    run_activation_behavior = node->dispatch_event(UIEvents::MouseEvent::create_from_platform_event(node->realm(), UIEvents::EventNames::click, offset, client_offset, page_offset, button).release_value_but_fixme_should_propagate_errors());
+                    run_activation_behavior = node->dispatch_event(UIEvents::MouseEvent::create_from_platform_event(node->realm(), UIEvents::EventNames::click, offset, client_offset, page_offset, {}, button).release_value_but_fixme_should_propagate_errors());
                 else if (button == GUI::MouseButton::Secondary && !(modifiers & Mod_Shift)) // Allow the user to bypass custom context menus by holding shift, like Firefox.
-                    run_activation_behavior = node->dispatch_event(UIEvents::MouseEvent::create_from_platform_event(node->realm(), UIEvents::EventNames::contextmenu, offset, client_offset, page_offset, button).release_value_but_fixme_should_propagate_errors());
+                    run_activation_behavior = node->dispatch_event(UIEvents::MouseEvent::create_from_platform_event(node->realm(), UIEvents::EventNames::contextmenu, offset, client_offset, page_offset, {}, button).release_value_but_fixme_should_propagate_errors());
             }
 
             if (run_activation_behavior) {
@@ -384,7 +384,7 @@ bool EventHandler::handle_mousedown(CSSPixelPoint position, unsigned button, uns
         auto offset = compute_mouse_event_offset(position, *layout_node);
         auto client_offset = compute_mouse_event_client_offset(position);
         auto page_offset = compute_mouse_event_page_offset(client_offset);
-        node->dispatch_event(UIEvents::MouseEvent::create_from_platform_event(node->realm(), UIEvents::EventNames::mousedown, offset, client_offset, page_offset, buttons, button).release_value_but_fixme_should_propagate_errors());
+        node->dispatch_event(UIEvents::MouseEvent::create_from_platform_event(node->realm(), UIEvents::EventNames::mousedown, offset, client_offset, page_offset, {}, buttons, button).release_value_but_fixme_should_propagate_errors());
     }
 
     // NOTE: Dispatching an event may have disturbed the world.
@@ -497,7 +497,9 @@ bool EventHandler::handle_mousemove(CSSPixelPoint position, unsigned buttons, un
             auto offset = compute_mouse_event_offset(position, *layout_node);
             auto client_offset = compute_mouse_event_client_offset(position);
             auto page_offset = compute_mouse_event_page_offset(client_offset);
-            node->dispatch_event(UIEvents::MouseEvent::create_from_platform_event(node->realm(), UIEvents::EventNames::mousemove, offset, client_offset, page_offset, buttons).release_value_but_fixme_should_propagate_errors());
+            auto movement = compute_mouse_event_movement(client_offset);
+            node->dispatch_event(UIEvents::MouseEvent::create_from_platform_event(node->realm(), UIEvents::EventNames::mousemove, offset, client_offset, page_offset, movement, buttons).release_value_but_fixme_should_propagate_errors());
+            m_mousemove_previous_client_offset = client_offset;
             // NOTE: Dispatching an event may have disturbed the world.
             if (!paint_root() || paint_root() != node->document().paintable_box())
                 return true;
@@ -582,7 +584,7 @@ bool EventHandler::handle_doubleclick(CSSPixelPoint position, unsigned button, u
     auto offset = compute_mouse_event_offset(position, *layout_node);
     auto client_offset = compute_mouse_event_client_offset(position);
     auto page_offset = compute_mouse_event_page_offset(client_offset);
-    node->dispatch_event(UIEvents::MouseEvent::create_from_platform_event(node->realm(), UIEvents::EventNames::dblclick, offset, client_offset, page_offset, buttons, button).release_value_but_fixme_should_propagate_errors());
+    node->dispatch_event(UIEvents::MouseEvent::create_from_platform_event(node->realm(), UIEvents::EventNames::dblclick, offset, client_offset, page_offset, {}, buttons, button).release_value_but_fixme_should_propagate_errors());
 
     // NOTE: Dispatching an event may have disturbed the world.
     if (!paint_root() || paint_root() != node->document().paintable_box())
@@ -834,6 +836,23 @@ CSSPixelPoint EventHandler::compute_mouse_event_page_offset(CSSPixelPoint event_
     return event_client_offset.translated(scroll_offset);
 }
 
+CSSPixelPoint EventHandler::compute_mouse_event_movement(CSSPixelPoint event_client_offset) const
+{
+    // https://w3c.github.io/pointerlock/#dom-mouseevent-movementx
+    // The attributes movementX movementY must provide the change in position of the pointer,
+    // as if the values of screenX, screenY, were stored between two subsequent mousemove events eNow and ePrevious and the difference taken movementX = eNow.screenX-ePrevious.screenX.
+    // FIXME: Using client_offset as screenX and screenY is currently equal to clientX and clientY
+
+    if (!m_mousemove_previous_client_offset.has_value())
+        // When unlocked, the system cursor can exit and re-enter the user agent window.
+        // If it does so and the user agent was not the target of operating system mouse move events
+        // then the most recent pointer position will be unknown to the user agent and movementX/movementY can not be computed and must be set to zero.
+        // FIXME: For this to actually work, m_mousemove_previous_client_offset needs to be cleared when the mouse leaves the window
+        return { 0, 0 };
+
+    return { event_client_offset.x() - m_mousemove_previous_client_offset.value().x(), event_client_offset.y() - m_mousemove_previous_client_offset.value().y() };
+}
+
 Optional<EventHandler::Target> EventHandler::target_for_mouse_position(CSSPixelPoint position)
 {
     if (m_mouse_event_tracking_layout_node) {

Userland/Libraries/LibWeb/Page/EventHandler.h

@@ -44,6 +44,7 @@ private:
     bool fire_keyboard_event(FlyString const& event_name, HTML::BrowsingContext& browsing_context, KeyCode key, unsigned modifiers, u32 code_point);
     CSSPixelPoint compute_mouse_event_client_offset(CSSPixelPoint event_page_position) const;
     CSSPixelPoint compute_mouse_event_page_offset(CSSPixelPoint event_client_offset) const;
+    CSSPixelPoint compute_mouse_event_movement(CSSPixelPoint event_client_offset) const;
 
     struct Target {
         JS::GCPtr<Painting::Paintable> paintable;
@@ -63,6 +64,8 @@ private:
     NonnullOwnPtr<EditEventHandler> m_edit_event_handler;
 
     WeakPtr<DOM::EventTarget> m_mousedown_target;
+
+    Optional<CSSPixelPoint> m_mousemove_previous_client_offset;
 };
 
 }

Userland/Libraries/LibWeb/UIEvents/MouseEvent.cpp

@@ -21,6 +21,8 @@ MouseEvent::MouseEvent(JS::Realm& realm, FlyString const& event_name, MouseEvent
     , m_client_y(event_init.client_y)
     , m_page_x(event_init.page_x)
     , m_page_y(event_init.page_y)
+    , m_movement_x(event_init.movement_x)
+    , m_movement_y(event_init.movement_y)
     , m_button(event_init.button)
     , m_buttons(event_init.buttons)
 {
@@ -59,7 +61,7 @@ JS::NonnullGCPtr<MouseEvent> MouseEvent::create(JS::Realm& realm, FlyString cons
     return realm.heap().allocate<MouseEvent>(realm, realm, event_name, event_init);
 }
 
-WebIDL::ExceptionOr<JS::NonnullGCPtr<MouseEvent>> MouseEvent::create_from_platform_event(JS::Realm& realm, FlyString const& event_name, CSSPixelPoint offset, CSSPixelPoint client_offset, CSSPixelPoint page_offset, unsigned buttons, unsigned mouse_button)
+WebIDL::ExceptionOr<JS::NonnullGCPtr<MouseEvent>> MouseEvent::create_from_platform_event(JS::Realm& realm, FlyString const& event_name, CSSPixelPoint offset, CSSPixelPoint client_offset, CSSPixelPoint page_offset, Optional<CSSPixelPoint> movement, unsigned buttons, unsigned mouse_button)
 {
     MouseEventInit event_init {};
     event_init.offset_x = offset.x().to_double();
@@ -68,6 +70,10 @@ WebIDL::ExceptionOr<JS::NonnullGCPtr<MouseEvent>> MouseEvent::create_from_platfo
     event_init.client_y = client_offset.y().to_double();
     event_init.page_x = page_offset.x().to_double();
     event_init.page_y = page_offset.y().to_double();
+    if (movement.has_value()) {
+        event_init.movement_x = movement.value().x().to_double();
+        event_init.movement_y = movement.value().y().to_double();
+    }
     event_init.button = determine_button(mouse_button);
     event_init.buttons = buttons;
     return MouseEvent::create(realm, event_name, event_init);

Userland/Libraries/LibWeb/UIEvents/MouseEvent.h

@@ -20,6 +20,8 @@ struct MouseEventInit : public EventModifierInit {
     double client_y = 0;
     double page_x = 0;
     double page_y = 0;
+    double movement_x = 0;
+    double movement_y = 0;
 
     i16 button = 0;
     u16 buttons = 0;
@@ -30,7 +32,7 @@ class MouseEvent : public UIEvent {
 
 public:
     [[nodiscard]] static JS::NonnullGCPtr<MouseEvent> create(JS::Realm&, FlyString const& event_name, MouseEventInit const& = {});
-    static WebIDL::ExceptionOr<JS::NonnullGCPtr<MouseEvent>> create_from_platform_event(JS::Realm&, FlyString const& event_name, CSSPixelPoint offset, CSSPixelPoint client_offset, CSSPixelPoint page_offset, unsigned buttons, unsigned mouse_button = 1);
+    static WebIDL::ExceptionOr<JS::NonnullGCPtr<MouseEvent>> create_from_platform_event(JS::Realm&, FlyString const& event_name, CSSPixelPoint offset, CSSPixelPoint client_offset, CSSPixelPoint page_offset, Optional<CSSPixelPoint> movement, unsigned buttons, unsigned mouse_button = 1);
 
     virtual ~MouseEvent() override;
 
@@ -50,6 +52,9 @@ public:
     double x() const { return client_x(); }
     double y() const { return client_y(); }
 
+    double movement_x() const { return m_movement_x; }
+    double movement_y() const { return m_movement_y; }
+
     i16 button() const { return m_button; }
     u16 buttons() const { return m_buttons; }
 
@@ -69,6 +74,8 @@ private:
     double m_client_y { 0 };
     double m_page_x { 0 };
     double m_page_y { 0 };
+    double m_movement_x { 0 };
+    double m_movement_y { 0 };
     i16 m_button { 0 };
     u16 m_buttons { 0 };
 };

Userland/Libraries/LibWeb/UIEvents/MouseEvent.idl

@@ -13,6 +13,10 @@ interface MouseEvent : UIEvent {
     readonly attribute double pageX;
     readonly attribute double pageY;
 
+    // https://w3c.github.io/pointerlock/#extensions-to-the-mouseevent-interface
+    readonly attribute double movementX;
+    readonly attribute double movementY;
+
     readonly attribute short button;
     readonly attribute unsigned short buttons;
 };
@@ -25,6 +29,10 @@ dictionary MouseEventInit : EventModifierInit {
     double clientX = 0;
     double clientY = 0;
 
+    // https://w3c.github.io/pointerlock/#extensions-to-the-mouseeventinit-dictionary
+    double movementX = 0;
+    double movementY = 0;
+
     short button = 0;
 
 };