MozillaZine

OSX detection question

Discuss application theming and theme development.
patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted January 17th, 2014, 11:08 pm

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?
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

Aris

User avatar
 
Posts: 3057
Joined: February 27th, 2011, 10:14 am

Post Posted January 18th, 2014, 11:25 am

'#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 */
  }
}
Customize Firefox 57+ UI || Classic Theme Restorer (Fx 29-56) || Classic Toolbar Buttons || CustomizeMyBird

How to use legacy add-ons after Firefox 57 release? Switch to Firefox 52 ESR or move to Waterfox browser.

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted January 18th, 2014, 2:01 pm

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 */
  }
}
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted January 18th, 2014, 2:16 pm

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.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted January 19th, 2014, 2:46 pm

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
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted January 19th, 2014, 10:13 pm

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.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted June 5th, 2014, 11:52 pm

I think "-moz-windows-theme-generic" should be "-moz-windows-theme:generic".
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

Return to Theme Development


Who is online

Users browsing this forum: No registered users and 2 guests