LibWeb: Update cursor + fire mouse events while scrolling

[0GreenClover0]

Previously, the cursor and events would only be updated and fired when moving the mouse.

Fixes partially #452.

Before	After

[LalitSinghRana]

This change doesn't work because you're using node/cursor position before scroll event occur and not after.

https://github.com/user-attachments/assets/4c06bd01-7aaf-4216-8278-56b7ffc26939

---

I created a simpler fix: https://github.com/LadybirdBrowser/ladybird/pull/761.

In this PR, we are doing quite a lot of additional stuffs too, which I think are not needed. At least for this bug.

[0GreenClover0]

Sorry this one sat for so long! Is there a way we can add some tests for this behavior? I Know we have some for click events and such, but not sure how feasible that is atm.

Ah, I didn't expect to find scroll tests but sure there are some. I've constructed one that checks for mouseenter event, but I can't find a way to make the mouseleave work with that 🤔

[0GreenClover0]

This change doesn't work because you're using node/cursor position before scroll event occur and not after. do-not-work.mp4

I created a simpler fix: #761.

In this PR, we are doing quite a lot of additional stuffs too, which I think are not needed. At least for this bug.

You're right, there seem to be some subtle differences between touch pad scroll and mouse scroll (I used the first), because of which I haven't spotted the issue. I've fixed the code more or less based on your proposed solution

I've splitted the commit into two, the second one makes the cursor change its appearance based on the hovered node

[0GreenClover0]

This (and #761) is not a fix for the full problem, there are other nuances like firing events for the scrollable element, like in the example below.

<style>
.scrollable {
    overflow-y: scroll;
    width: 100px;
    height: 300px;
    scrollbar-width: none;
}

.item {
    width: 100px;
    height: 100px;
    box-sizing: border-box;
    border: 1px solid black;
}
</style>
<div class="scrollable">
    <div id="test" class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
</div>
<script>
    console.log("Event test");

    function mouseEnter() {
        console.log("mouse enter");
    }

    function mouseLeave() {
        console.log("mouse leave");
    }

    document.querySelector('#test').addEventListener('mouseenter', mouseEnter);
    document.querySelector('#test').addEventListener('mouseleave', mouseLeave);
</script>

Relevant code seems to be https://github.com/LadybirdBrowser/ladybird/blob/c396054c874ca19307ccdad1d9c786ef4ab74547/Userland/Libraries/LibWeb/Page/EventHandler.cpp#L188-L193 but I can't find a proper way to fix it 🤔

[github-actions[bot]]

This pull request has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions!

[github-actions[bot]]

This pull request has been closed because it has not had recent activity. Feel free to re-open if you wish to still contribute these changes. Thank you for your contributions!