The default bug view has changed. See this FAQ.

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

()

Core
DOM: CSS Object Model
P4
normal
RESOLVED FIXED
7 years ago
4 years ago

People

(Reporter: dbaron, Assigned: dbaron)

Tracking

(Depends on: 1 bug, {dev-doc-complete})

Trunk
mozilla6
dev-doc-complete
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(4 attachments, 1 obsolete attachment)

(Assignee)

Description

7 years ago
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.)
(Assignee)

Comment 1

7 years ago
Created attachment 423404 [details]
simple demo page

Comment 2

7 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.
(Assignee)

Comment 3

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

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

Comment 5

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

Updated

7 years ago
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)
(Assignee)

Comment 6

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

Updated

7 years ago
QA Contact: general → style-system
(Assignee)

Comment 7

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

Updated

6 years ago
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)

Updated

6 years ago
Assignee: nobody → dbaron
Priority: -- → P4
Target Milestone: --- → mozilla6
(Assignee)

Comment 8

6 years ago
Sent http://lists.w3.org/Archives/Public/www-style/2011Apr/0599.html
(Assignee)

Comment 9

6 years ago
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
Keywords: dev-doc-needed
(Assignee)

Comment 10

6 years ago
Created attachment 527481 [details] [diff] [review]
patch 1: given infallible malloc, stop checking for failed CSS parser allocation
Attachment #527481 - Flags: review?(bzbarsky)
(Assignee)

Comment 11

6 years ago
Created attachment 527482 [details] [diff] [review]
patch 2: allow null media query cache key where needed
Attachment #527482 - Flags: review?(bzbarsky)
(Assignee)

Comment 12

6 years ago
Created attachment 527483 [details] [diff] [review]
patch 3: implement and test window.matchMedia()
Attachment #527483 - Flags: review?(bzbarsky)
(Assignee)

Comment 13

6 years ago
Created attachment 527490 [details] [diff] [review]
patch 3: implement and test window.matchMedia()

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+
(Assignee)

Comment 17

6 years ago
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.
(Assignee)

Comment 18

6 years ago
https://hg.mozilla.org/mozilla-central/rev/1cd6b2cce8a8
https://hg.mozilla.org/mozilla-central/rev/183330b5a008
https://hg.mozilla.org/mozilla-central/rev/1b37bbdb15b7
Status: NEW → RESOLVED
Last Resolved: 6 years ago
Resolution: --- → FIXED
(Assignee)

Comment 19

6 years ago
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?

Updated

6 years ago
Depends on: 652317
(Assignee)

Comment 21

6 years ago
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...
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
Keywords: dev-doc-needed → dev-doc-complete

Updated

6 years ago
Depends on: 670666

Updated

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