OSX detection question

[patrickjdempsey]

So, we currently have a few media queries which make it possible to detect Windows... although it's not really very elegant, this would appear to work for most cases:

Code: Select all

@media all and (-moz-windows-theme-generic),
  all and (-moz-windows-theme:royale),
  all and (-moz-windows-theme:zune),
  all and (-moz-windows-classic),
  all and (-moz-windows-default-theme) {
    /* code for Windows */
}

According to mcdavis's tests here: http://home.comcast.net/~username54321/ ... 110216.txt

So we can setup a situation where our "normal" code is applied to Linux and OSX, and then the media queried code is applied to Windows. But I'm wondering if there is a way to detect OSX, perhaps with non-traditional methods? For instance, I know that OSX does not use the XUL menu.... but is the menu toolbar element present? If the menu toolbar element is NOT present on OSX then it would be pretty simple to setup a logic chain like this:

Code: Select all

toolbar #back-button {
  /* code for OSX */
}

#toolbar-menubar ~ toolbar #back-button {
  /* code for Linux */
}

@media all and (-moz-windows-theme-generic),
  all and (-moz-windows-theme:royale),
  all and (-moz-windows-theme:zune),
  all and (-moz-windows-classic),
  all and (-moz-windows-default-theme) {
    toolbar #back-button {
      /*code for Windows */
    }
}

Thoughts?

[Aris]

'#toolbar-menubar' is present in browser.xul on MacOSX Fx, but without being used. Your idea works on MacOSX, Linux and Windows as expected. Tested on todays nightly build.

Code: Select all

/* MacOSX*/
#nav-bar #back-button {
  -moz-appearance: none !important;
  background: green !important;
}

/* Linux */
#toolbar-menubar ~ #TabsToolbar ~ #nav-bar #back-button {
  -moz-appearance: none !important;
  background: red !important;
}

/* Windows */
@media all and (-moz-windows-theme:generic),
  all and (-moz-windows-theme:royale),
  all and (-moz-windows-theme:zune),
  all and (-moz-windows-classic),
  all and (-moz-windows-default-theme) {
   #toolbar-menubar ~ #TabsToolbar ~ #nav-bar #back-button {
     -moz-appearance: none !important;
     background: blue !important;
   }
}

An ugly negation like this should also work

Code: Select all

/* Windows */
#nav-bar #back-button {
  -moz-appearance: none !important;
  background: blue !important;
 }

@media  not all and (-moz-os-version: windows-xp){
@media  not all and (-moz-os-version: windows-vista){
@media  not all and (-moz-os-version: windows-win7){
@media  not all and (-moz-os-version: windows-win8){

/* MacOSX*/
#nav-bar #back-button {
  -moz-appearance: none !important;
  background: green !important;
}

/* Linux */
#toolbar-menubar ~ #TabsToolbar ~ #nav-bar #back-button {
  -moz-appearance: none !important;
  background: red !important;
}

}}}}

/* '-moz-os-version: windows-win8' currently does not cover win8.1 so something like this is needed*/
@media all and (-moz-windows-compositor) {
  @media not all and (-moz-windows-glass) {
  /* win 8.1 code */
  }
}

[patrickjdempsey]

So I guess that's helpful for toolbars and anything inside of them in the navigator toolbox on the main window. Anything outside of this area including the bottom bars you will have to use the same code for Linux and OSX. Also the cool thing about putting Windows inside of the media queries is that you can then use different styles for different flavors. For instance, leaving out Classic (-moz-windows-classic) and letting that use the Linux style, which is probably the same, or making a second media query for Aero (-moz-windows-compositor) which probably has different styles. Also, for those curious, you can detect Aero Basic like this:

Code: Select all

@media not all and (-moz-windows-compositor) {
  @media (-moz-windows-theme:aero) {
     /* code for Aero Basic */
  }
}

[patrickjdempsey]

The fact that -moz-os-version doesn't detect 8.1 tells me it's a broken standard. Also, Microsoft is rolling out Windows 9 next year, so they are now on some kind of rapid releases roller coaster themselves... which will make detecting Windows that way a constant support nightmare. I wouldn't recommend that road. It's also fairly useless for detecting the actual THEME of the OS, which especially in terms of Classic, is far more important than the version.

[patrickjdempsey]

So here's an example of the kind of fun we can have with this information. The following code should make the toolbars match the OS better than they usually do. Unfortunately Windows XP and up themes are wonky so they require special support:

Code: Select all

/* OSX */
#main-window toolbar {
  -moz-appearance:none!important;
   background-color:-moz-mac-chrome-active!important;
}
#main-window:-moz-window-inactive toolbar {
   background-color:-moz-mac-chrome-inactive!important;
}

/* Linux and baseline Windows */
#main-window #toolbar-menubar,
#main-window #toolbar-menubar ~ toolbar {
   background-color:ThreeDLightShadow!important;
}

/* Specific Windows themes support */
@media all and (-moz-windows-classic),
   all and (-moz-windows-theme-generic) {
    #main-window #toolbar-menubar,
    #main-window #toolbar-menubar ~ toolbar {
       background-color:-moz-dialog!important; /* required for High Contrast theme support */
    }
}
@media all and (-moz-windows-theme:zune) {
    #main-window #toolbar-menubar,
    #main-window #toolbar-menubar ~ toolbar {
       background-color: #D4D4D4!important; /* 12 lightness values below -mozDialog */
    }
}
@media all and (-moz-windows-theme:luna-silver) {
    #main-window #toolbar-menubar,
    #main-window #toolbar-menubar ~ toolbar {
       background-color: #EAE9ED!important; /* 10 lightness values above -mozDialog */
    }
}
@media all and (-moz-windows-compositor) {
    #main-window #toolbar-menubar,
    #main-window #toolbar-menubar ~ toolbar {
       background-color: #DCDFE4!important; /* #DCDFE4 is XP Royale ThreeDLightShadow color */
    }
}
@media not all and (-moz-windows-compositor) {
  @media (-moz-windows-theme:aero) {
    #main-window #toolbar-menubar,
    #main-window #toolbar-menubar ~ toolbar  {
       background-color: rgb(185,209,234)!important; /* Aero Basic active */
    }
    #main-window:-moz-window-inactive #toolbar-menubar,
    #main-window:-moz-window-inactive #toolbar-menubar ~ toolbar {
       background-color: rgb(215,228,242)!important; /* Aero Basic inactive */
    }
  }
}

You can see my experiments with ThreeDLightShadow here:
viewtopic.php?p=11305193#p11305193

[patrickjdempsey]

If you wanted to expand this rule to cover other windows, the following might work, although it fails on windows that do not have a menubar like the Library:

Code: Select all

window toolbox > .chromeclass-menubar,
window toolbox > .chromeclass-menubar ~ toolbar,
window toolbox > menubar,
window toolbox > menubar ~ toolbar {
  /* non-OSX code */
}

This works in Windows DOM Inspector, Page Source, SeaMonkey History Manager (not Bookmarks), and SeaMonkey Downloads Manager.

[patrickjdempsey]

I think "-moz-windows-theme-generic" should be "-moz-windows-theme:generic".