Firebug Lite Build Process

From FirebugWiki

Revision as of 17:24, 22 September 2011 by Pedrosimonetti (Talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Contents

[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

[edit] Cross-Browser Debug Channel

[edit] Cross-Browser Beta Channel

[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! :)
Personal tools