Firebug Lite Build Process

From FirebugWiki
Revision as of 09:24, 22 September 2011 by Pedrosimonetti (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search



  • See which parts of the process can be simplified
  • Automate the whole process

Installation and Updates[edit]

Firebug Lite differs from Firebug because there's no actual installation and update like in the software world, except when installed as a browser extension. There are basically four ways of loading Firebug Lite:

  • Bookmarklet
  • Live <script> tag link
  • Local <script> tag link
  • Browser extension

Browser extensions have a defined way to install and update the application.

Web-based versions have to be installed manually and the update scheme depends on how Firebug Lite was loaded:

  • For the Bookmarklet and Live Link case we can update the application by publishing the releases on
  • The Bookmarklet itself is a mini-application and cannot be automatically updated. Each bookmarklet has its own version and Firebug Lite checks the version and warns the user in case of a new bookmarklet version is available.
  • For the Local Link case, there is no auto-updates. It is likely in this case to have a update checker module implemented, which is not yet done at the time of this writing (Mar 2011). It would load a JSONP file from containing the most recent version number and would inform the user in case of a new version is available. This feature must be disabled via Firebug Lite options, so a user can opt-out checking for updates.

Release Channels[edit]

Firebug Lite release channels[edit]

  • Stable - stable
  • Debug - stable with debug settings
  • Beta - beta
  • Developer - real-time (SVN link)

Firebug Lite Stable, Debug and Beta versions are published on Developer versions are directly linked to our SVN repository.

Firebug Lite for Google Chrome release channels[edit]

  • Stable - stable (Chrome extensions gallery)
  • Beta - beta (

Build Variables[edit]

Cross-Browser Stable Channel[edit]

Cross-Browser Debug Channel[edit]

Cross-Browser Beta Channel[edit]

Chrome Extension Stable Channel[edit]

  • <compressed> = false
  • <fileName> = "firebug-lite.js"
  • <fileLocation> = "/lite/branches/firebug<majorVersion>/build/chrome-extension/"
  • <skinLocation> = "chrome-extension://bmagokdooijbeehmkpknfglimnifench/skin/xp/"
  • <publishChannelLocation> = Chrome Extension Gallery
  • <publishVersionLocation> = N/A
  • <publishShortLocation> = N/A

Chrome Extension Beta Channel[edit]

  • <compressed> = false
  • <fileName> = "firebug-lite-beta.js"
  • <fileLocation> = "/lite/branches/firebug<majorVersion>/build/chrome-extension-beta/"
  • <skinLocation> = "chrome-extension://mdaojmoeahmmokaflgbannaopagamgoj/skin/xp/"
  • <publishChannelLocation> = ""
  • <publishVersionLocation> = N/A
  • <publishShortLocation> = N/A

Build Process[edit]

Stage 1. Build application[edit]

  1. process the built-in skin
    1. compress skin HTML
    2. compress skin CSS
    3. replace URLs located in the skin CSS with the correct <skinLocation> depending on the release channel
    4. Combine the processed HTML and CSS into a single file, that should look like the chromeSkin.js file.
  2. update version number in:
    1. lib.js
    2. firebug.js
  3. combine all JavaScript files into one, following the order defined in firebug-lite-dev.js. The chromeSkin.js file should be the penultimate file, and the last one should be the bootstrap.js which is just a call to FBL.initialize()
  4. if it is a stable channel (stable or chrome-stable) then compress JavaScript
  5. save the file with the <fileName> name, in the <fileLocation> directory.

Stage 2. Save progress[edit]

  1. commit files
  2. update changelog with date and revision number

Stage 3. Build package[edit]

Build cross-browser Firebug Lite package[edit]

  1. If exists, remove the "./firebug-lite/" directory
  2. If exists, remove the "./pub/" directory
  3. svn export "/lite/branches/firebug<majorVersion>/" repository to a new "./firebug-lite" directory
  4. Create a "./pub/" directory which will be used to upload release to
  5. Copy entire "./firebug-lite/skin/" directory to "./pub/"
  6. Copy "./firebug-lite/content/changelog.txt" file to "./pub/"
  7. Copy "./firebug-lite/build/*.js" files to "./pub/"
  8. Compress the whole "./firebug-lite/" directory into a file located at the "./pub/" directory, which means "./pub/firebug-lite.tar.tgz"
  9. Remove the "./firebug-lite/" directory

Build Firebug Lite for Google Chrome package[edit]

  1. need to build and commit cross-browser app first in order to get the revision number
  2. copy /lite/branches/firebug<majorVersion>/build/<fileName> to chrome extension's <fileLocation>
  3. update version number / revision number in:
    1. background.html
    2. 2 places in manifest.json

Stage 4. Publish[edit]

Publish cross-browser Firebug Lite application[edit]

  1. Copy "./pub/changelog.txt" file to <publishVersionLocation>
  2. Copy "./pub/firebug-lite.tar.tgz" file to <publishVersionLocation>
  3. Copy "./pub/*.js" files to <publishVersionLocation>
  4. Copy "./pub/skin" directory to <publishVersionLocation>
  5. Repeat the same steps, but using <publishChannelLocation> instead of <publishVersionLocation>
  6. Commit

Publish Firebug Lite for Google Chrome extension[edit]

Publish Firebug Lite for Google Chrome Stable[edit]
  1. svn export the <fileLocation> directory to a temporary location
  2. compress the directory to a .zip file.
  3. publish the .zip file to Chrome Developer dashboard
Publish Firebug Lite for Google Chrome Beta[edit]
  1. svn export the <fileLocation> directory to a temporary location
  2. use Chrome built-in tool to generate .crx file using the proper private key.
  3. copy .crx file to <publishChannelLocation>
  4. edit the version number in "<publishChannelLocation>/updates.xml"
  5. commit

Stage 5. Celebrate[edit]

  1. write blog post
  2. write message on the list for comments
  3. edit link to the list in the blog post
  4. have fun! :)