Using @-moz-document breaks CodeMirror

edited February 2014 in Stylish
Firefox 27, Stylish 1.4.2
Without @-moz-document, tag selectors are .cm-tag and id selectors are .cm-built-in
With @-moz-document, tag selectors are and id selectors are .cm-error
(The red underline in the screenshots is .cm-error)

This is a real nuisance.


  • Also, is there a way to include the mode that codemirror is using in the selector, or maybe the thing that started it? When I enable a style for the stylish editor, which is css, it also changes the scratchpad editor, which is javascript.

    And has anyone else noticed that it gets stuck a little when cursor lands on a data url, or is it just me?
  • edited February 2014
    And also expands indentation (more whitespace, less space for proper code vs limitations of style size on userstyles)... ;)

    Stylish must talk with codemirror about ignoring @-moz-document block :D
  • edited February 2014
    It's already been fixed on Firefox 29.
    Oops. You're right.
  • If I replace "@-moz-document" with "@media", and "regexp" etc. with "print", the colors are right again and .cm-error is gone. Could it be fixed by including the @-moz-document stuff with the @media stuff?
  • That's basically what I said in the Bugzilla ticket. Stylish is just using what Firefox provides, so we have to rely on the Firefox guys to fix it.
  • Yes, I saw that, but what I meant was, if you make those substitutions in a style then CodeMirror accepts it as valid (or at least, valid enough to parse the rest of the style correctly) even though it's not syntactically correct.
    @-moz-document domain(, domain( {
    #style_long_description > DIV, #style_additional_info > DIV, ...

    @media domain(, domain( {
    #style_long_description > DIV, #style_additional_info > DIV, ...

    @media print(, domain( {
    #style_long_description > DIV, #style_additional_info > DIV, ...

    @media print(''), domain( {
    #style_long_description > DIV, #style_additional_info > DIV, ...
    (Red underlines are .cm-error) I thought the Firefox guys might be simply catch "@-moz-document" and coerce it to "@media" in css.js, which could be done quickly and without much thought, then do it right at their leisure.
  • Apparently, that's my code being used as an example (unless others have set the same @-moz-document rules exactly the same as I did).
    Does this mean I should be using "@media print" ?
  • edited March 2014
    If you want to, but don't do it like this . I was just looking for an easy way to stop CodeMirror from wrongly marking code as .cm-error after it sees @-moz-document. I found CodeMirror at chrome://browser/content/devtools/codemirror/, so for now I'll just fix my own install.

    Does anyone know how to get my scrollers back? I just noticed that they're missing.
    614 x 524 - 25K
    615 x 524 - 26K
  • You have transparent scrollbars with translucent thumbs - probably a style you installed, which you can disable or uninstall.
  • edited March 2014
    Floating scrollbars in dev tools are "enabled" by default (probably since Fx27, when cm was added, earlier they are in responsive mode...) and the code for them is taken from firefox\browser\omni.ja\chrome\browser\skin\classic\aero\browser\devtools\floating-scrollbars.css i think (the same file you'll find when you skip "aero" from given path).
    So, if i'm correct you can embrace in comment the code in this file and that should restore old scrollbas style or you can write a style for them.
  • OK, yes, Firefox's floating-scrollbars.css is to blame. It's not applied to DevTools 'Light theme', though, only to 'Dark theme'.
Sign In or Register to comment.