1648839 - matchMedia matches object not fully updated before first listener fired in Windows Firefox

Status: RESOLVED FIXED

(Core :: DOM: CSS Object Model, defect, P3)

Description

[Zach Saucier]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36

Steps to reproduce:

In Firefox on Windows (Mac seems fine), create more than one matchMedia objects and add listeners to each. Inside of the listeners, loop through ALL of the matchMedia matches objects and check their values.

Demo: https://codepen.io/GreenSock/pen/a032bd02b4a8802b07f65a3b2a814002?editors=0011

Actual results:

In the beginning listeners, the matches values for the later media queries are not yet updated like they should be.

Example result (going from larger than the breakpoint to smaller):
"checking. window.innerWidth:" 752
0 "matches:" false
1 "matches:" false
"checking. window.innerWidth:" 752
0 "matches:" false
1 "matches:" true

Expected results:

All of the matches objects should be updated BEFORE the first listener callback is fired.

Example result (going from larger than the breakpoint to smaller):
"checking. window.innerWidth:" 752
0 "matches:" false
1 "matches:" true
"checking. window.innerWidth:" 752
0 "matches:" false
1 "matches:" true

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Comment 2

[Zach Saucier]

I think Bubbug's classification may be incorrect unless media queries fit under WebRTC...

Comment 3

[Emilio Cobos Álvarez (:emilio)]

Code is: https://searchfox.org/mozilla-central/rev/e11d919cdc8a909354eb2c3e19904d9229c55d88/layout/base/nsPresContext.cpp#1593-1596

MaybeNotify() fires the event synchronously. Should be pretty easy to fix to update them and keep track of the changed ones, then notify in one go.

Comment 4

[Emilio Cobos Álvarez (:emilio)]

Bug 1648064 does some changes to related code so I'll move them here too while at it.

Comment 5

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1648839 - Fix two issues with notifications for media feature value changes. r=#style

We need to notify unconditionally because even if we didn't have
stylesheets, we could have responsive content which needs to change
source.

We need to notify the document even if the pres shell is not
initialized, as it might be our last chance to notify the responsive
content. This happens for printing, and makes my srcset test fail.

Comment 6

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1648839 - Evaluate changes in all media queries, then fire change events. r=#style

This ensures that you can't observe an inconsistent state while we go
through the list.

It should also be marginally better as we don't build an array with all
the media queries unconditionally.

Depends on D81778

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/cff48285254b
Fix two issues with notifications for media feature value changes. r=nordzilla

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/b13a90288742
Evaluate changes in all media queries, then fire change events. r=jwatt

Comment 9

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/24551 for changes under testing/web-platform/tests

Comment 10

[Narcis Beleuzu [:NarcisB]]

https://hg.mozilla.org/mozilla-central/rev/cff48285254b
https://hg.mozilla.org/mozilla-central/rev/b13a90288742

Comment 11

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot