Skip to content

Commit

Permalink
Integrate with the move event for window defined by CSSOM-View
Browse files Browse the repository at this point in the history
UAs expose the coordinates of a window (window.screenX, window.screenY),
enabling authors to track window movement and react to it. Without a
corresponding event though, they have to resort to active polling, which
is wasteful of resources, especially if done often enough to have a
responsive UI.

As resolved by the CSSWG (See w3c/csswg-drafts#7693),
this adds an onmove event handler to keep track changes in window
position without such need for active polling. The definition of the
event itself goes to CSSOM-View, along with the geometric attributes
whose changes it tracks.

The privacy concerns related to exposing the window position in the
first place are handled in CSSOM-View, which allows UAs to return fake
information. The addition of the event doesn't change that: UAs that
don't expose the real information continue not to (and the event won't
fire).

See explainer at https://github.com/Igalia/explainers/blob/main/onmove-event-handler/README.md

CSS Part of the change: w3c/csswg-drafts#11278

Tests: web-platform-tests/wpt#49390

Implemented experimentally in Chrome: https://chromium-review.googlesource.com/c/chromium/src/+/6035050
  • Loading branch information
frivoal committed Nov 26, 2024
1 parent dac8ec1 commit 7ead74c
Showing 1 changed file with 16 additions and 0 deletions.
16 changes: 16 additions & 0 deletions source
Original file line number Diff line number Diff line change
Expand Up @@ -4048,9 +4048,11 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<li><dfn data-x-href="https://drafts.csswg.org/cssom/#serialize-a-css-value">Serializing a CSS value</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/cssom-view/#document-run-the-resize-steps">run the resize steps</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/cssom-view/#document-run-the-scroll-steps">run the scroll steps</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/cssom-view/#document-run-the-move-steps">run the move steps</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/cssom-view/#evaluate-media-queries-and-report-changes">evaluate media queries and report changes</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/cssom-view/#scroll-a-target-into-view">Scroll a target into view</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/cssom-view/#scroll-to-the-beginning-of-the-document">Scroll to the beginning of the document</dfn></li>
<li>The <dfn data-x="event-move" data-x-href="https://drafts.csswg.org/cssom-view/#eventdef-window-move"><code>move</code></dfn> event</li>
<li>The <dfn data-x="event-resize" data-x-href="https://drafts.csswg.org/cssom-view/#eventdef-window-resize"><code>resize</code></dfn> event</li>
<li>The <dfn data-x="event-scroll" data-x-href="https://drafts.csswg.org/cssom-view/#eventdef-document-scroll"><code>scroll</code></dfn> event</li>
<li>The <dfn data-x="event-scrollend" data-x-href="https://drafts.csswg.org/cssom-view/#eventdef-document-scrollend"><code>scrollend</code></dfn> event</li>
Expand Down Expand Up @@ -18125,6 +18127,7 @@ console.log(style.disabled); // false</code></pre>
<dd><code data-x="handler-window-onlanguagechange">onlanguagechange</code></dd>
<dd><code data-x="handler-window-onmessage">onmessage</code></dd>
<dd><code data-x="handler-window-onmessageerror">onmessageerror</code></dd>
<dd><code data-x="handler-window-onmove">onmove</code></dd>
<dd><code data-x="handler-window-onoffline">onoffline</code></dd>
<dd><code data-x="handler-window-ononline">ononline</code></dd>
<dd><code data-x="handler-window-onpageswap">onpageswap</code></dd>
Expand Down Expand Up @@ -111863,6 +111866,9 @@ import "https://example.com/foo/../module2.mjs";</code></pre>
<li><p>For each <var>doc</var> of <var>docs</var>, <span>run the scroll steps</span> for
<var>doc</var>. <ref>CSSOMVIEW</ref></p></li>

<li><p>For each <var>doc</var> of <var>docs</var>, <span>run the move steps</span> for
<var>doc</var>. <ref>CSSOMVIEW</ref></p></li>

<li><p>For each <var>doc</var> of <var>docs</var>, <span>evaluate media queries and report
changes</span> for <var>doc</var>. <ref>CSSOMVIEW</ref></p></li>

Expand Down Expand Up @@ -113499,6 +113505,7 @@ typedef <span>OnBeforeUnloadEventHandlerNonNull</span>? <dfn typedef>OnBeforeUnl
<tr><td><dfn attribute for="WindowEventHandlers"><code data-x="handler-window-onlanguagechange">onlanguagechange</code></dfn> <td> <code data-x="event-languagechange">languagechange</code> <!-- new -->
<tr><td><dfn attribute for="WindowEventHandlers"><code data-x="handler-window-onmessage">onmessage</code></dfn> <td> <code data-x="event-message">message</code> <!-- new for postMessage -->
<tr><td><dfn attribute for="WindowEventHandlers"><code data-x="handler-window-onmessageerror">onmessageerror</code></dfn> <td> <code data-x="event-messageerror">messageerror</code> <!-- new for SAB -->
<tr><td><dfn attribute for="WindowEventHandlers"><code data-x="handler-window-onmove">onmove</code></dfn> <td> <code data-x="event-move">move</code>
<tr><td><dfn attribute for="WindowEventHandlers"><code data-x="handler-window-onoffline">onoffline</code></dfn> <td> <code data-x="event-offline">offline</code> <!-- new -->
<tr><td><dfn attribute for="WindowEventHandlers"><code data-x="handler-window-ononline">ononline</code></dfn> <td> <code data-x="event-online">online</code> <!-- new -->
<tr><td><dfn attribute for="WindowEventHandlers"><code data-x="handler-window-onpageswap">onpageswap</code></dfn> <td> <code data-x="event-pageswap">pageswap</code> <!-- new -->
Expand Down Expand Up @@ -113628,6 +113635,7 @@ interface mixin <dfn interface>WindowEventHandlers</dfn> {
attribute <span>EventHandler</span> <span data-x="handler-window-onlanguagechange">onlanguagechange</span>;
attribute <span>EventHandler</span> <span data-x="handler-window-onmessage">onmessage</span>;
attribute <span>EventHandler</span> <span data-x="handler-window-onmessageerror">onmessageerror</span>;
attribute <span>EventHandler</span> <span data-x="handler-window-onmove">onmove</span>;
attribute <span>EventHandler</span> <span data-x="handler-window-onoffline">onoffline</span>;
attribute <span>EventHandler</span> <span data-x="handler-window-ononline">ononline</span>;
attribute <span>EventHandler</span> <span data-x="handler-window-onpagehide">onpagehide</span>;
Expand Down Expand Up @@ -140176,6 +140184,7 @@ interface <dfn interface>External</dfn> {
<code data-x="handler-window-onlanguagechange">onlanguagechange</code>;
<code data-x="handler-window-onmessage">onmessage</code>;
<code data-x="handler-window-onmessageerror">onmessageerror</code>;
<code data-x="handler-window-onmove">onmove</code>;
<code data-x="handler-window-onoffline">onoffline</code>;
<code data-x="handler-window-ononline">ononline</code>;
<code data-x="handler-window-onpageswap">onpageswap</code>;
Expand Down Expand Up @@ -143466,6 +143475,12 @@ interface <dfn interface>External</dfn> {
<td> <code data-x="event-mouseup">mouseup</code> event handler
<td> <span data-x="event handler content attributes">Event handler content attribute</span>

<tr>
<th id="ix-handler-window-onmove"> <code data-x="">onmove</code>
<td> <code data-x="handler-window-onmove">body</code>
<td> <code data-x="event-move">move</code> event handler for <code>Window</code> object
<td> <span data-x="event handler content attributes">Event handler content attribute</span>

<tr>
<th id="ix-handler-window-onoffline"> <code data-x="">onoffline</code>
<td> <code data-x="handler-window-onoffline">body</code>
Expand Down Expand Up @@ -145653,6 +145668,7 @@ INSERT INTERFACES HERE
Félix Sanz,
Felix Sasaki,
Fernando Altomare Serboncini,
Florian Rivoal,
Forbes Lindesay,
Francesco Schwarz,
Francis Brosnan Blazquez,
Expand Down

0 comments on commit 7ead74c

Please sign in to comment.