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

RESOLVED FIXED in mozilla6

Status

()

defect
P4
normal
RESOLVED FIXED
9 years ago
6 years ago

People

(Reporter: dbaron, Assigned: dbaron)

Tracking

({dev-doc-complete})

Trunk
mozilla6
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(4 attachments, 1 obsolete attachment)

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 2

9 years ago
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.
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

9 years ago
Would that not be expensive? Anyway, put it forward on www-style?
This feature interests a lot of web dev and it would be really useful for mobile development.
Summary: implement window.media.matchMedium API for matching CSS media queries (like window.evaluateMediaQuery proposal) → implement window.styleMedia.matchMedium API for matching CSS media queries (like window.evaluateMediaQuery proposal)
There's a thread on www-style from May through to the present about this, with subject "[cssom-view] addMediumListener / removeMediumListener".
QA Contact: general → style-system
Looks like the spec is now window.matchMedia(), returning an object, rather like what I suggested in the thread in comment 6.
Summary: implement window.styleMedia.matchMedium API for matching CSS media queries (like window.evaluateMediaQuery proposal) → implement window.matchMedia API for matching CSS media queries (like window.evaluateMediaQuery proposal and earlier window.styleMedia.matchMedium draft spec)
Assignee: nobody → dbaron
Priority: -- → P4
Target Milestone: --- → mozilla6
I added a few more code comments to document interesting things.
Attachment #527483 - Attachment is obsolete: true
Attachment #527490 - Flags: review?(bzbarsky)
Attachment #527483 - Flags: review?(bzbarsky)
Comment on attachment 527481 [details] [diff] [review]
patch 1: given infallible malloc, stop checking for failed CSS parser allocation

r=me
Attachment #527481 - Flags: review?(bzbarsky) → review+
Comment on attachment 527482 [details] [diff] [review]
patch 2: allow null media query cache key where needed

r=me
Attachment #527482 - Flags: review?(bzbarsky) → review+
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.
Attachment #527490 - Flags: review?(bzbarsky) → review+
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.
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.
It just occurred to me... should we be calling this MozMatchMedia?
Depends on: 652317
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.)
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.
FWIW, Chrome 12 is shipping with window.matchMedia and window.styleMedia, both unprefixed. It doesn't seem worth it to prefix here.
(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...
Depends on: 670666

Updated

8 years ago
No longer depends on: 670666
marked sec-review-needed and assigned to Jesse to make fuzzer modifications
Whiteboard: [sr:jesse]
Whiteboard: [sr:jesse] → [secr:jesse]
Whiteboard: [secr:jesse] → [sec-assigned:jesse]
Flags: sec-review?(jruderman)
Flags: sec-review?(jruderman)
Whiteboard: [sec-assigned:jesse]
You need to log in before you can comment on or make changes to this bug.