Firebug Lite Build Process

From FirebugWiki

Contents 1 Overview 1.1 TODO 1.2 Installation and Updates 1.3 Release Channels 1.3.1 Firebug Lite release channels 1.3.2 Firebug Lite for Google Chrome release channels 2 Build Variables 2.1 Cross-Browser Stable Channel 2.2 Cross-Browser Debug Channel 2.3 Cross-Browser Beta Channel 2.4 Chrome Extension Stable Channel 2.5 Chrome Extension Beta Channel 3 Build Process 3.1 Stage 1. Build application 3.2 Stage 2. Save progress 3.3 Stage 3. Build package 3.3.1 Build cross-browser Firebug Lite package 3.3.2 Build Firebug Lite for Google Chrome package 3.4 Stage 4. Publish 3.4.1 Publish cross-browser Firebug Lite application 3.4.2 Publish Firebug Lite for Google Chrome extension 3.4.2.1 Publish Firebug Lite for Google Chrome Stable 3.4.2.2 Publish Firebug Lite for Google Chrome Beta 3.5 Stage 5. Celebrate

[edit] Overview

[edit] TODO

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

[edit] Installation and Updates

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 getfirebug.com.
• 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 getfirebug.com 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.

[edit] Release Channels

[edit] Firebug Lite release channels

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

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

[edit] Firebug Lite for Google Chrome release channels

• Stable - stable (Chrome extensions gallery)
• Beta - beta (getfirebug.com)

[edit] Build Variables

[edit] Cross-Browser Stable Channel

• <compressed> = true
• <fileName> = "firebug-lite.js"
• <fileLocation> = "/lite/branches/firebug<majorVersion>/build/"
• <skinLocation> = "https://getfirebug.com/releases/lite/latest/skin/xp/"
• <publishChannelLocation> = "https://getfirebug.com/releases/lite/latest/"
• <publishVersionLocation> = "https://getfirebug.com/releases/lite/<majorVersion>/"
• <publishShortLocation> = "https://getfirebug.com/"

[edit] Cross-Browser Debug Channel

• <compressed> = false
• <fileName> = "firebug-lite-debug.js"
• <fileLocation> = "/lite/branches/firebug<majorVersion>/build/"
• <skinLocation> = "https://getfirebug.com/releases/lite/latest/skin/xp/"
• <publishChannelLocation> = "https://getfirebug.com/releases/lite/latest/"
• <publishVersionLocation> = "https://getfirebug.com/releases/lite/<majorVersion>/"
• <publishShortLocation> = "https://getfirebug.com/"

[edit] Cross-Browser Beta Channel

• <compressed> = false
• <fileName> = "firebug-lite-beta.js"
• <fileLocation> = "/lite/branches/firebug<majorVersion>/build/"
• <skinLocation> = "https://getfirebug.com/releases/lite/beta/skin/xp/"
• <publishChannelLocation> = "https://getfirebug.com/releases/lite/beta/"
• <publishVersionLocation> = "https://getfirebug.com/releases/lite/<majorVersion>/"
• <publishShortLocation> = "https://getfirebug.com/"

[edit] Chrome Extension Stable Channel

• <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

[edit] Chrome Extension Beta Channel

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

[edit] Build Process

[edit] Stage 1. Build application

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.

[edit] Stage 2. Save progress

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

[edit] Stage 3. Build package

[edit] Build cross-browser Firebug Lite package

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 getfirebug.com
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

[edit] Build Firebug Lite for Google Chrome package

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

[edit] Stage 4. Publish

[edit] Publish cross-browser Firebug Lite application

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

[edit] Publish Firebug Lite for Google Chrome extension

[edit] Publish Firebug Lite for Google Chrome Stable

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

[edit] Publish Firebug Lite for Google Chrome Beta

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

[edit] Stage 5. Celebrate

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! :)