542058 - implement window.matchMedia API for matching CSS media queries (like window.evaluateMediaQuery proposal and earlier window.styleMedia.matchMedium draft spec)

Status: RESOLVED FIXED

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

Description

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

We should implement a DOM API for matching CSS media queries. This would be useful both for our chrome (e.g., would make bug 498312 easier and more accurate) and useful for Web authors.

It's already possible by adding style sheets and then querying computed style, but it's quite a bit of work (and probably slow for many uses).

There are two proposals I've seen for such an API:

http://webkit.org/specs/MediaQueriesExtensions.html#DOM-Window has a proposal for window.evaluateMediaQuery()

http://dev.w3.org/csswg/cssom-view/#dom-media-matchmedium has a proposal for window.media.matchMedium()

It looks like trunk WebKit (including chromium) has implemented window.media.matchMedium, which I think means the first proposal is obsolete.  (And I hope the rest of that document is obsolete too.)

Comment 1

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Attachment: simple demo page

Comment 2

[Anne (:annevk)]

It is now http://dev.w3.org/csswg/cssom-view/#dom-stylemedia-matchmedium

I didn't know it was already implemented, but Apple told me they are updating because they agree the renaming will help avoid clashes.

Comment 3

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

One addition that could be useful here is a way to register a callback when the result of evaluating a query changes.  (We already have code to optimize such things for CSS's use of media queries, and it requires much less notification than callbacks whenever the value of any media feature changes.)

Comment 4

[Anne (:annevk)]

Would that not be expensive? Anyway, put it forward on www-style?

Comment 5

[Paul Rouget [:paul]]

This feature interests a lot of web dev and it would be really useful for mobile development.

Comment 6

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

There's a thread on www-style from May through to the present about this, with subject "[cssom-view] addMediumListener / removeMediumListener".

Comment 7

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Looks like the spec is now window.matchMedia(), returning an object, rather like what I suggested in the thread in comment 6.

Comment 8

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Sent http://lists.w3.org/Archives/Public/www-style/2011Apr/0599.html

Comment 9

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Current work in progress (remaining work is in the TODOs at the top):
http://hg.mozilla.org/users/dbaron_mozilla.com/patches/raw-file/70e160bb8023/window-matchMedia

Comment 10

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Attachment: patch 1: given infallible malloc, stop checking for failed CSS parser allocation

Comment 11

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Attachment: patch 2: allow null media query cache key where needed

Comment 12

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Attachment: patch 3: implement and test window.matchMedia()

Comment 13

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Attachment: patch 3: implement and test window.matchMedia()

I added a few more code comments to document interesting things.

Comment 14

[Boris Zbarsky [:bzbarsky]]

Comment on attachment 527481 [details] [diff] [review]
patch 1: given infallible malloc, stop checking for failed CSS parser allocation

r=me

Comment 15

[Boris Zbarsky [:bzbarsky]]

Comment on attachment 527482 [details] [diff] [review]
patch 2: allow null media query cache key where needed

r=me

Comment 16

[Boris Zbarsky [:bzbarsky]]

Comment on attachment 527490 [details] [diff] [review]
patch 3: implement and test window.matchMedia()

>+    // Note that we intentionally send the notifications in the order
>+    // (a) media query lists in the order created and (b) each list's
>+    // listeners in the order added.

That first "in the order" bit doesn't really make sense with what follows.... rephrase?

r=me with that nit.

Comment 17

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Rephrased as:
    // Note that we intentionally send the notifications to media query
    // lists in the order they were created and, for each list, to the
    // listeners in the order added.

Comment 18

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

https://hg.mozilla.org/mozilla-central/rev/1cd6b2cce8a8
https://hg.mozilla.org/mozilla-central/rev/183330b5a008
https://hg.mozilla.org/mozilla-central/rev/1b37bbdb15b7

Comment 19

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Oh, and in order to fix a test failure, I made one other change before landing, which was to change the IsSafeToRunScript assertion into:

  if (!nsContentUtils::IsSafeToRunScript()) {
    NS_ABORT_IF_FALSE(mDocument->IsBeingUsedAsImage(),
                      "How did we get here?  Are we failing to notify "
                      "listeners that we should notify?");
    return;
  }

since we do get MediaFeatureValuesChanged notifications in image documents when it's not safe to run script, since their flush implementation allows flushes through when it isn't.

Comment 20

[Boris Zbarsky [:bzbarsky]]

It just occurred to me... should we be calling this MozMatchMedia?

Comment 21

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Blogged at: http://dbaron.org/log/20110422-matchMedia

Regarding prefixes:  I'm generally somewhat skeptical about prefixing DOM APIs, especially ones in draft specs.  But do you think we should?  (And, fwiw, WebKit is currently shipping with the previous draft proposal, window.styleMedia, unprefixed.)

Comment 22

[Eric Shepherd [:sheppy]]

We have prefixed some DOM APIs but not others. I personally am in favor of it, because if things change drastically it makes it easier to clarify documentation.

Comment 23

[:Ms2ger (he/him; ⌚ UTC+1/+2)]

FWIW, Chrome 12 is shipping with window.matchMedia and window.styleMedia, both unprefixed. It doesn't seem worth it to prefix here.

Comment 24

[Dão Gottwald [:dao]]

(In reply to comment #23)
> FWIW, Chrome 12 is shipping with window.matchMedia and window.styleMedia, both
> unprefixed. It doesn't seem worth it to prefix here.

Isn't window.styleMedia obsolete? Seems like a bad example for introducing bleeding-edge stuff non-prefixed...

Comment 25

[Eric Shepherd [:sheppy]]

Documentation added:

https://developer.mozilla.org/en/DOM/MediaQueryList
https://developer.mozilla.org/en/DOM/MediaQueryListListener
https://developer.mozilla.org/en/DOM/window.matchMedia
https://developer.mozilla.org/en/CSS/Using_media_queries_from_code

These pages have been updated with links to the new articles as appropriate:

https://developer.mozilla.org/en/DOM/window
https://developer.mozilla.org/en/CSS/Media_queries
https://developer.mozilla.org/en/Firefox_6_for_developers#DOM

Comment 26

[Curtis Koenig [:curtisk-use curtis.koenig+bzATgmail.com]]]

marked sec-review-needed and assigned to Jesse to make fuzzer modifications