End of Support For NNL with Firefox 3.0 (Continuing for 3.5 and Up)

Fair warning, people: the next version of NASA Night Launch will, almost certainly, be the last to support Firefox 3.0. Support for more-current versions of Firefox will continue.

Firefox 3.0 was first released in summer 2008. It has now been superseded by both Firefox 3.5 and Firefox 3.6 and will eventually be superseded by (on the horizon for some unspecified date in the future) Firefox 3.7.

So, NNL is moving on too. If you were thinking about upgrading from Firefox 3.0 to a more modern version, this may be the time.

After this next release, NNL support will look like this:

Windows:
- Firefox 3.5
- Firefox 3.6

Mac:
- Firefox 3.5
- Firefox 3.6

Ubuntu/Linux:
- Firefox 3.5 [1]
- Firefox 3.6 [2]

That is all. Now, back to your regularly-scheduled programming.

[1] Ubuntu 9.04 ships with a custom Firefox build based on Firefox 3.0. Fx3.5 is not shipped with Ubuntu 9.04, but is available as a separate installer.
[2] Ubuntu 9.10 ships with a custom Firefox build based on Firefox 3.5. Fx3.6 is not shipped with Ubuntu 9.10, but you may be able to find it as a separate installer or for other Linux distros.

HOWTO: Download Older Versions of NNL from AMO

These are instructions for downloading older versions of NASA Night Launch from AMO, the Mozilla add-ons site. This may be useful if you're running a version of Firefox no longer supported by NNL, or if you're using some Mozilla app other than Firefox.

This is different from installing straight into Firefox -- instead, this will get you a copy on your hard drive.

Here's how:

1. Go to the "See All Versions" page for NNL on AMO
   
2. For whichever older version you want (all are listed) click the "Add to Firefox" button to take you to the license page
   
3. On the license page, right-click the "Add to Firefox" button
   
4. From the right-click menu, pick "Save Link As..." and save the Jar file to your hard drive.

That should do it.

... with one possible exception: sometimes, if as we do here you want to download instead of installing straight into Firefox, you need to first disable Javascript and reload the AMO page with Javascript disabled. If your first try didn't work, try the following instead.

1. Open the Firefox Options window (Menubar > Tools > Options...)
   
2. In the Options window, pick the Content view
   
3. UNcheck "Allow Javascript", so that you temporarily disable Javascript (if it's not disallowed already)
   
4. Say "OK" to close the Options window
   
5. Go to (or reload) the "See All Versions" page for NNL on AMO
   
6. Click the "Download Now" button on the AMO page, which takes you to the license page
   
7. On the license page, right-click the "Download Now" button, then save the Jar file with "Save Link As..." to your hard drive
   
8. Go back to the Firefox Options window and allow Javascript (if you already had it allowed before).

This will get you a copy of NNL to keep. Once it's on your hard drive, you could then install it by dragging and dropping the downloaded Jar file onto your open Firefox Add-ons Manager window.

A Fond Farewell to Firefox 2

Well, Firefox-loving friends and NASA Night Launch neighbors, the time has come to say goodbye to an old friend - Firefox 2. NNL version 0.6.20090524, already released, will be the last NNL version to support Firefox 2. The next NNL release will drop support for Firefox 2, while continuing to support Firefox versions 3.0 and up.

NASA Night Launch has supported Firefox 2 since the first NNL release (over two years ago). However, time has passed, technology has progressed, and the focus of Mozilla's development has now moved on to Firefox 3.5, 3.6, and beyond. Firefox is now a very different and much more advanced kind of browser. Mozilla itself has already said goodbye to Firefox 2, and now we do too.

Future NNL versions will no longer be tested with Fx2; nor will they be marked as installable with Fx2, meaning that Fx2 users will no longer receive updates through the automatic Firefox add-on update mechanism.

Installing an Older NNL Version with Firefox 2

If you're one of the 25,000-or-so people still using NNL on Firefox 2, you'll still be able to go to the AMO "See All Versions" page for NNL and install NNL version 0.6.20090524. However, just be aware that this version, which is code-frozen and no longer changing to adapt to other add-ons and their changes, will fall further and further out of sync with your other add-ons over time.

Onward

It's been a great run with Firefox 2, but the future is calling, and it wants you to use a modern browser. Get Firefox 3.5.

Now Available: NASA Night Launch Version 0.6.20090524

Now available: NASA Night Launch version 0.6.20090524. This release handles several changes in the Stylish add-on. Also adds theme-specific styling for the Update Scanner add-on's sidebar.

OS X users: don't forget you need to take special steps for the Firefox bookmarks menu to look the way it should.

If you already have NNL installed, this update will be available through the usual automatic Firefox theme update method, or you can install it manually from AMO.

Adding the Launch Image to the Background of Firefox Empty Tabs with NASA Night Launch

Far and away the most common support request we get from NASA Night Launch users is for instructions on how to add the night launch image to the background of empty tabs. The news is that the old method is now officially deprecated. You should stop using it and start using the new method instead.

The New and Improved

What new method, you may ask? The new method uses the add-on Stylish and Userstyle 11979 - NASA Night Launch - Launch Image for Empty Tabs. If you want to try this:

1. Install Stylish from AMO
2. Restart Firefox
3. Install Userstyle 11979 in Stylish

It does just what it says: empty tabs, launch image, problem solved.

The main benefit of the new (Stylish-based) method is that it's easy to turn it on and off without restarting Firefox. To turn it off (or back on) just go to Stylish's "Manage Styles" window and disable (or re-enable) Userstyle 11979.

This is important because both the new and old methods share one weakness: they sometimes apply themselves to rectangular regions of common web pages, of which Google Mail is sometimes an example. There's no way (at present, using Firefox theme technologies) to apply the background image to empty tabs without also sometimes applying it to parts of web pages. This is why it's important to be able to turn it on and off: if it's in the way, just disable the style, and if you want it then turn it back on again. No need to restart Firefox. People trying to avoid the retinal burn of a blank white new tab will appreciate this ability.

The Bad Old Way

The old method, now deprecated, involved adding code to Firefox's userContent.css file, which worked but definitely had its problems.

1. You had to restart Firefox for it to take effect after editing userContent.css.
2. If you wanted to undo the effect (such as when switching themes), you had to again edit userContent.css and again restart Firefox.
3. It was all too easy to get confused about whether to edit userContent.css or userChrome.css, and why there were two files with almost identical names doing almost-but-not-quite identical things. The naming makes perfect sense of you're one of the people creating browsers, but not so much otherwise.
4. It was hard for people to even find the file to edit.
5. For most users, not knowing the "programming language" (CSS) of userContent.css, it was hard for them to have confidence that they could edit this file without messing something up. No one should be asked to do that.

Removing Code from the Old Method

If you were using the old and now deprecated userContent.css method, you should remove the relevant code from your userContent.css file. The code to remove looks like this:

@-moz-document url(about:blank) {
  html:not([class]) {
    background:
      url("chrome://global/skin/watermarks/about.blank.sts116-s-021.v010.jpg")
        no-repeat center center fixed black !important;
  }
}

When you edit the file, just remove that code, leave everything else in the file in place, save your changes and then restart Firefox.

If you need any help with this, just post your question on the NNL support thread on MozillaZine. You would almost certainly be asked to post a copy of your current userContent.css file (and to name the folder in which you found it, if possible), after which you would get back a copy of the file with the relevant code removed to save for your own use.

Get Stylish: https://addons.mozilla.org/en-US/firefox/addon/2108
Get Userstyle 11979 - NASA Night Launch - Launch Image for Empty Tabs

Using NASA Night Launch with Firefox 3.0.x on the Mac with OS X

UPDATE: IGNORE THIS POST

People using the current NNL version can ignore everything said in this post. For NNL versions 0.6.20091031 and newer, the described functionality is built-in, and you don't need to do anything extra to get it.

If you've been using userstyle 11097 to fix up the OS X menubar with NNL, you can stop using it. Once you've upgraded, you won't need that any more.

---

Here's a reminder [1] for Mac users: if you're using NASA Night Launch with Firefox 3.0.x on OS X, you need to take special steps to make the Bookmarks and History menus appear as they should in the OS X desktop menubar.

The special steps are:

1 - Install the Stylish Add-on from AMO
2 - Within Stylish, install Userstyle 11097 - OS X Bookmark Menu Icons for NASA Night Launch
3 - Restart Firefox, after which the menus should again be good to go.

This is needed on OS X only (and not on either Windows or Linux). In fact, you should not use this on either Windows or Linux, or else your menubar will look funny.

If you're not familiar with Stylish, see the userstyles.org home page for instructions. That's all you need to know - now go forth and install, if you're a Mac user, or read on for some background.

Background

The problem is that bookmark icons used by NNL on Windows don't work when used in the OS X desktop menubar. The following image shows what we mean.


If you're not an Apple Mac user, the thing you need to know is that Windows and OS X have two very different ways of handling menus and menu bars. Under Windows, each window can have its own menu, displayed at the top of each application's window. In contrast, on the Mac, there's one and only one menubar, displayed at the top of the desktop, changing to show whatever menu pertains to whichever window you're using.

The other relevant fact is that Firefox themes can't touch the appearance of the OS X desktop menubar, other than to change the icons shown next to each menu item for Firefox. The shape, text and background color, and other parts of the menubar appearance are all controlled by OS X settings. OS X uses dark text on a light background.

The upshot is that NNL, as a dark theme designed to work by default with menus having dark backgrounds, needs to use icons for the OS X menubar that work with its light background, which are different from the icons NNL uses for dark-background-color Firefox menus on Windows. There's no good way for NNL to do this from within a single theme file.

There's more (explained below), but you already have the gist of the problem. You don't need to read the technical explanation unless you're a theme developer or add-on developer.

Bottom line: if using NNL on OS X with Firefox 3.0.x, get Stylish and Userstyle 11097.

Geeky Technical Explanation

At a more detailed technical level, there are two major things going on. This section describes the situation with Firefox 3.0.x. FIrefox 3.5 may be different.

This explanation assumes that you're already familiar with

• theme development for Firefox
• differences in the Firefox 3.0 UI for OS X and Windows
• theme packaging with chrome.manifest
• CSS in general
• the use of CSS properties list-style-image and -moz-image-region to apply an icon image from an image file containing multiple icons in a single file

Issue 1 - Unlike with Windows, CSS property -moz-image-region doesn't work when used to assign icons within Firefox's Mac desktop menubar. This feature wasn't needed with Firefox's own default-theme icon implementation and so never made it to the top of the bug-fixing priority list. See Firefox Bug 418774 for further discussion of what Firefox is doing here. (And please keep in mind that Bugzilla posts should be limited to discussion of technical issues about Firefox source code.)

Issue 2 - Even if -moz-image-region did work for the OS X menubar, NNL (possibly in addition to other dark themes) still needs to use different icon sets in the menubar for Windows vs. OS X, and there's no good way using theme technology (chrome packaging, CSS and XBL) alone to detect whether you're running OS X vs. Windows and then to apply the correct icons for the situation.

Regarding Issue 1, the approach taken by many theme developers, and certainly a viable one, is to identify all icon files used within the Firefox menubars, and to split each multiple-icon image file into separate files such that each file contains only one icon. Also required would be to recode (and retest) the CSS rules which apply these icons to the menubars, menus, and to any other places in the UI where the same icons are used.

Regarding Issue 2, preferable would be some XUL element attribute found on the OS X menubar element but not on the Windows version of the menubar. In other words, if the two menubar elements were designed like this in XUL source code:

<!-- osx --> <menubar class="i_am_on_osx"></menubar>
<!-- win --> <menubar></menubar>

then we could write different CSS selectors within the theme to work differently on different platforms, and all would be golden:

menubar #someBookmarksMenuItem {
  list-style-image: url("some-windows-icon.png"); 
}
menubar.i_am_on_osx #someBookmarksMenuItem { 
  list-style-image: url("some-osx-icon.png"); 
}

Unfortunately, there's no such attribute, nor is there any other readily-apparent way to write CSS selectors which will match on OS X but not Windows.

One could use chrome.manifest with "os" modifiers to mount OS-specific packages from within the theme, but this would require duplicating both the "browser" and "global" packages within the theme -- having one pair for Windows and another almost-identical pair for OS X. This is undesirable because of the resulting increase in theme download size and because of the extra developer burden of maintaining two different versions of the same code. (Additionally -- this would need to be verified -- but this might also render the chrome.manifest file invalid for Firefox 2 use, which again would be a no-go for use with NNL since we're still supporting Firefox 2. If you're a theme developer and you only care about Firefox 3+, it would certainly be technically possible to take this approach, although it would still raise size issues.)

One could decide simply to offer two different versions of the theme or add-on -- one for Windows, one for OS X. Depending on your situation as a developer, this might work for you.

One could define and apply an XBL binding within the theme itself, which binding would apply an OS-identifying attribute to the DOM elements of the OS X menubar. The problem there is that while it would solve the OS X issue, the wrong icons would then be used with Windows -- again, because there's no way to write CSS selectors which would apply the binding with OS X but not with Windows.

Given all of the above, we decided the best approach for now is the one described at the very of top of this post, using Stylish. This has the following advantages:

1. avoids the effort of having to split multi-icon images into separate images
2. avoids the effort of recoding the theme to use single-icon images (what we scientists refer to using the technical term royal pain)
3. avoids the risk and need to retest coming from any coding change
4. avoids the delay and/or visible flash that can occur while loading an image to show an icon in the hover state, which could happen with icons stored one-to-a-file but not when storing multiple icons in a single image file
5. avoids the size increase and download time increase that would come with duplicated packages within the theme
6. provides platform-specific styling as required
7. Just Works, with no action required, for the vast majority of NNL users, namely, those using NNL with Firefox on Windows
8. completely avoids impacting Firefox when the user switches to other themes (because they're not written with CSS to use the attribute added by the Stylish stylesheet).

The downside, obviously, is that it puts the burden on certain users -- that is, people using NNL on OS X, of which there are 36,846, as of today's AMO statistics. That's a lot of people. We're not totally wild about having to ask them to do this, but it's only a little extra effort, as long as you know to do it. Further, these menubar issues may be resolved in future versions of Firefox such that there's no action needed by users at all.

The Code

There are three places where code was added or changed. The relevant code follows.

1 - in new NNL theme file global/skin/macMenus.xml
2 - in NNL theme file browser.css
3 - in Stylish userstyle 11097

In new theme file chrome://global/skin/macMenus.xml

<?xml version="1.0"?>

<bindings id="macMenus"
  xmlns="http://www.mozilla.org/xbl"
  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
  xmlns:xbl="http://www.mozilla.org/xbl">

  <binding id="mac-desktop-menu" extends="chrome://global/content/bindings/menu.xml#menu-menubar">
      <content class="mac-desktop-menu">
        <xul:label class="menubar-text" xbl:inherits="value=label,accesskey,crop" crop="right"/>
        <children includes="menupopup"/>
        </content>
  </binding>

</bindings>

In existing theme file chrome://browser/skin/browser.css:

/* ::::: for Fx3 Mac OSX ::::: */

#unified-back-forward-button #back-button dropmarker,
#unified-back-forward-button #forward-button dropmarker {
   display: none !important;
}

/* For Mac-specific Bookmarks menu icons, apply the following binding in userChrome.css or as a Stylish style:
 *
 * #history-menu, #bookmarksMenu { -moz-binding: url(chrome://global/skin/macMenus.xml#mac-desktop-menu) !important } 
 *
 * This will add the class "mac-desktop-menu" to the history and bookmarks menus and trigger the following
 * Mac-specific rules.  We do it this way so we can write rules that only apply on OSX.
 *
 * These rules are written for Mac+Fx3 only, and don't even consider the Fx2-on-OSX and/or RTL cases.
 *
 * It appears that the only thing to handle in the history menu is the plain document icon, while
 * the bookmarks menu presents other several cases as well.
 */
 
#bookmarksMenu.mac-desktop-menu .menuitem-iconic,
#history-menu.mac-desktop-menu .menuitem-iconic {
  list-style-image: url("chrome://global/skin/icons/osx.document-item.png");
  -moz-image-region: auto;
}

#bookmarksMenu.mac-desktop-menu .menu-iconic[container] {
  list-style-image: url("chrome://global/skin/icons/osx.folder-item.png");
  -moz-image-region: auto;
}

#bookmarksMenu.mac-desktop-menu .menu-iconic[container][livemark] {
  /* needs !important because other livemark rules have important */
  list-style-image: url("chrome://browser/skin/osx.livemark-folder.png") !important;
  -moz-image-region: auto;
}

#bookmarksMenu.mac-desktop-menu .menu-iconic[container][livemark] .menuitem-iconic {
  list-style-image: url("chrome://browser/skin/osx.livemark-item.png");
  -moz-image-region: auto;
}

#bookmarksMenu.mac-desktop-menu .menu-iconic[container][query] {
  list-style-image: url("chrome://browser/skin/places/osx.query.png");
  -moz-image-region: auto;
}

#bookmarksMenu.mac-desktop-menu .menu-iconic[container][tagContainer] {
  list-style-image: url("chrome://mozapps/skin/places/osx.tagContainerIcon.png");
  -moz-image-region: auto;
}

#bookmarksMenu.mac-desktop-menu #bookmarksToolbarFolderMenu {
  list-style-image: url("chrome://browser/skin/places/osx.bookmarksToolbar.png");
  -moz-image-region: auto;
}

And, finally, the Stylish stylesheet which, when added to Stylish, applies the binding from within the theme to add the attribute which triggers the CSS rules which apply the appropriate icons for OS X. That Jack built.

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
#history-menu, #bookmarksMenu { 
  -moz-binding: url(chrome://global/skin/macMenus.xml#mac-desktop-menu) !important 
  }

If you're a theme developer, feel free to use any of the code in this post. And if you have a better solution, feel free to let us know about that too. :)

Footnotes

[1] Or maybe a first introduction, since it wasn't widely publicized when first made available.

Firefox 3.5 Beta 4 Now Available

A new Firefox 3.5 beta is available - for testing purposes only, as always with betas. Most users should simply wait for the official release of Firefox 3.5 itself.

Get Firefox 3.5 Beta 4: http://www.mozilla.com/en-US/firefox/all-beta.html