Bug 147275 – Web Inspector: device-pixel-ratio and orientation media queries are red in CodeMirror

• Status: RESOLVED
• Resolution: FIXED
• Component: Web Inspector

[Timothy Hatcher]

The following CSS has red syntax highlights for device-pixel-ratio and orientation.
 
/* iPhone, iPhone 3G/3GS portrait */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 1) and (device-aspect-ratio: 2/3) and (orientation: portrait) {
}

/* iPhone, iPhone 3G/3GS landscape */
@media only screen and (min-device-width: 320px)  and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 1) and (device-aspect-ratio: 2/3) and (orientation: landscape) {
}

[Radar WebKit Bug Importer]

<rdar://problem/21989475>

[Timothy Hatcher]

Created attachment 257480 [details]
Screenshot

[Joseph Pecoraro]

This seems like a CodeMirror insufficiency. CodeMirror's css.js includes a list of supported @media features:

    var mediaFeatures_ = [
      "width", "min-width", "max-width", "height", "min-height", "max-height",
      "device-width", "min-device-width", "max-device-width", "device-height",
      ...
    ], mediaFeatures = keySet(mediaFeatures_);

Even trunk doesn't have these. I think, for standard features like this we should propose CodeMirror update. I'll file a CodeMirror issue and see what other standard features we may want to propose.

[Joseph Pecoraro]

Filed a CodeMirror issue:
https://github.com/codemirror/CodeMirror/issues/3417

Depending on what the CodeMirror developers want to put into main stream, we may need to add WebKit specific media query features like: "-webkit-video-playable-inline"

[Joseph Pecoraro]

CodeMirror added common / legacy media-query features in:
https://github.com/codemirror/CodeMirror/commit/3ef42f71dc1a7c50ab73c39516a0563430eb11e3

We recently updated CodeMirror and that seems to have fixed this.

We haven't customized to include support for new / vendor specific media query features that WebKit supports. We can file a new bug to track that. Note the CodeMirror issue page has some decent analysis about new media query features.