Creating a custom theme for Net Usage

This article will provide a walkthrough on how to modify the netusage.svg file to create a custom theme for Net Usage.

In order to modify an SVG file we will first need a program to open the file, the program I use and recommend for this is Inkscape, a free and open source vector graphics editor.

This walkthrough is based upon the theme I created to extend the length of the usage bar as posted on this Whirlpool forum thread: http://forums.whirlpool.net.au/forum-replies.cfm?t=803008&p=37#r737.

1. In the Firefox location bar enter "about:netusage?theme" and press Enter.
   
2. When the Net Usage Theme Building Wizard page is displayed click the New/Open button and select or create a project directory.
3. A new file has now been created in this directory called netusage.svg; we open this file in Inkscape.
4. We can now see each element which makes up the Net Usage bar, to extend the length of the bar we first need to increase the size of the document. Click File > Document Properties on the menu bar of Inkscape, in the dialog box which appears we can increase the width of the document, I chose to increase this to 180 px however you can choose any width you wish, we can close this dialog box.
5. Now that we have increased the documents width we can resize the usage bar. Click on the dark grey border of the outer rectangle and then using the right hand side drag handle increase the width of the bar, now repeat this step for the inner rectangle.
6. Now we need to adjust the clipping of the usage bars themselves, to do this we need to open Inkscape's XML Editor (Shift+Ctrl+X) and take note of the inner rectangles new width (see screenshot), these figures may differ if the rectangles have been resized freehand. This width is what we must adjust our clipping by minus approx 1 px (the stroke width of the inner rectangle).
7. Enter this new clipping width minus approx 1 px and click set (see screenshot).
8. Now we can resize the usage bars themselves, don't forget to resize the green and blue bars to the left initially to expose the orange and yellow bars which represent usage over 100% of peak and off-peak quota respectively.
9. Move the percentage label over and save the file. The next step is to package the file using the wizard.
   
10. Click Load under the Test section of the wizard, if you are happy with your theme move to the next section of the wizard and fill in your theme package information, finally click Make Dist under section 5 of the wizard.
    
11. The final step is to zip the contents of the distribution folder using whatever zip program you wish, I use and recommend 7-Zip another free and open source program. Once zipped the file should be renamed to end with the file extension of .xpi.
    

Congratulations you have just created your own custom theme for Net Usage. Although this walkthrough only covered extending the length of the usage bar, any number of custom themes can be created by making additional modifications to the netusage.svg file, so get creative and see what you can come up with.

Getting the ISP javascript file

If you're going to dig around in the files below be sure to have a backup of your Net Usage directory so you can copy everything back if needed. I'm going to assume an intermediate level of knowledge of computers and Windows for this blog. If I've glossed over too many parts please leave a comment and I will update the blog entry as required.

Information on each Australian ISP is recorded in the isps.js file. If you have installed an additional country pack it will be in a file called isps_xx.js where xx is a two letter country abbreviation. Don't go searching your computer for these files yet, you wont be able to find them because they have been stored in a JAR file.

There is heaps of information on the Internet about Firefox JAR and XPI files. To cut a long story short, the JAR and XPI files are just a normal ZIP file. Therefore if you want to get your ISP javascript files you need to rename your JAR files to a ZIP file and then extract the ISP javascript file you want to edit.

This is how it's done (on XP):

1. Go to the Firefox Profile in your Application Data directory by entering %AppData%\Mozilla\firefox\Profiles\ in the Run command on the Start Menu. Navigate to the Extentions directory in your profile. Mine is at

   C:\Documents and Settings\Gerard\Application Data\Mozilla\firefox\Profiles\8ndbqffi.default\extensions

2. Hit CTRL + F and find netusageitem.jar (if your are using an Additional ISP pack you will need to find netusageisps.jar)
3. In the Find Results window right click on the result and select Open Containing Folder. You should end up in your extensions chrome directory.
   
4. Copy the netusageitem.jar and call it netusageitem.jar.bak so you have a backup in case things go bad.
5. Now copy the netusageitem.jar file again but rename it netusageitem.zip
6. You should now have three files in your chrome directory netusageitem.jar.bak, netusageitem.zip and netusageitem.jar (if you are editing an Additional ISP pack you should have netusageisps.jar.bak, netusageisps.zip and netusageisps.jar)
   
   
7. I use Winzip so you may need to change the process slightly for your compression software. You want to extract the isps.js or the isps_xx.js file from the zip file you have just created. When you extract the file you will need to extract it with folder names. Using Winzip, double click on the netusageitem.zip file. You will be presented with a list of files in the zipfile. Click on isps.js and click the Extract button.
   
   
8. Now ensure the Extract to: path is the chrome path for your extension. Ensure the Selected files/folders is marked and Use folder names is ticked. Click Extract. Close Winzip.
   
   
   
   
9. The chrome folder you are in should now contain a content folder. In the content folder is the isps.js or isps_xx.js file you will need to edit.
   
   
   

I use notepad++ to edit my javascript files. It is small, free, has syntax highlighting and can open more than one file at a time. Open the javascript file and have a look. We still have some more setting up to do before we can start the editing process.