From MozillaWiki
Jump to: navigation, search

The product-details code is live on several Mozilla sites now, including and


Releasing a new version of Firefox/Thunderbird requires editing hundreds of pages to put the new version in place, as well as some dicey JavaScript.

Our current download interface looks like this with JavaScript disabled:

Download nojs.png

And like this with JavaScript enabled:

Download js.png


Goals are listed in bold, followed by my suggested solutions. Please add more. :)

Adding a new version of Firefox means changes in a single place. (Other than adding release notes, etc.) We can use a PHP file to hold most of the variables in the current JavaScript. Having them in PHP will mean we can echo a current version number on any pages we need to (one of the advantages we talked about when we moved from plain html to php).

We can use an SVN external to share these configuration files across multiple sites and projects (in our case,,,, and any others that want to use them). This means a simple `svn up` will keep all our sites in sync.

Caching won't be a problem for this, because we will only be using it for version numbers.

Let people choose alternative languages and/or platforms Just like most of our current pages have, we'll provide a link to "Other systems and platforms" which will point to a page like the current all.html. I suggest adding this link (as well as release notes and learn more) to the page, even if JavaScript is disabled.

Provide a single, large "Download Now" button We want users to be able to go to the site and just click a single button that will provide them the best build for them. JavaScript will determine which link to use by detecting the platform. Version numbers will be determined by php and cached, and languages will be determined by URL and cached.

Provide a useful fallback when JavaScript is disabled Our current system shows a list of links to each platform for the current version and language (a total of 3 links) in a noscript tag - I think this is fine. (This is an accessible solution)

Provide a way to localize the names of platforms/abbreviations/software Mozilla-Europe is using a custom file to do this. All of the localization can happen in PHP and be cached. JavaScript just needs to rearrange the strings and hide the unneeded specific platform links. (Look at the above two images to see how the strings line up - we'll have the same text on both of them, and not have to deal with string localization in JavaScript at all).


  • All language detection (an exception below) is condensed into non-language specific URLs (like going to or Going to a URL like will do no language detection, either for the content on the page or the builds to offer the visitor.
    • An exception is the uncommon case of us having a page in a language that we don't offer a build for. In this case, the download links will provide an alternate language (either specified by the page author, or a mapping in the svn external)
  • All platform detection is done via JavaScript when a page with a download button is loaded. The JavaScript will provide a "single click" solution. We use JavaScript here since platform detection isn't cacheable. A <noscript> section is provided for graceful fallback.