Archive for the ‘ open source ’ Category

Some Firefox v3.5 bug filled

Been a while since I blogged and as well worked on anything open source due to my job.

As a web developer, I been testing out some of the new CSS3 features of Firefox v3.5. Found some minor bugs, no biggie, but would hopefully be fixed. I wonder if I will have time to really look into them.

Fieldset does not support border-radius property

Text-shadow blur and underline messes up with padding-left –

EDIT: Seems Firefox v3.5 never had border-radius added in so my bug wasn’t a bug. I could of sworn I saw it in the list of added features.

Final thoughts of OSD600

Phew…. The projects are done. Semester is over. Exams are finished (and good thing with the TTC strike coming up). It now time to collect my thoughts and look back about this course. Might be useful for anyone reading this and plan to take OSD soon.

The Tough Beginning

There are lots of projects to choose from. All which would be amazing to add to Mozilla. But then, the fear comes in. Like many who started this course, just the sheer size of the Mozilla codebase is enough to get people scared. Javascript is new to most people (1 week tutorial in INT222 is not enough). And the question that we all have is, how do we begin?!? But like Dave said, you just have to dive into it and start taking baby steps. We all went into the depths of unknown and just started trying, experimenting, coding, whatever!

The Hardest Assignment is the 0.1

Like I said above, the question is how to begin. And that alone is the hardest part of 0.1. Just finding where to actually hack into and start working. What functions to use and what are available. Looking and researching through the codebase like a needle in a haystack. But all the work you do in 0.1 is well worth it. When you start working on 0.2 and 0.3, you just start coding like crazy :D. This is because you already know where to work and what not to touch.

Help is around the corner

There is lots of resources to help you. MXR to search around the code. You can talk to developers on IRC. Both Chris and Dave are there too. And fellow classmates. Unfortunately for us, we all did very different projects that had very little in common.

Final Thoughts

This was a very wonderful experience for me. It is different than other courses in the way it is structured. And I worked on something that I actually WANT to do (unlike other courses where you have to do assignments whether you like it or not). I have to agree with Peter that both Chris and Dave are definitely the right teachers for this.

All right. That’s the last post for OSD. Thanks to all my fellow peers and teachers. See ya around!

Mario in Javascript

Just for fun blog post as I end the course. Here’s a nice Super Mario Bros. done in Javascript! Only 14KB and even has music! It is pretty amazing.

Hmm… maybe there will soon be a Mozilla Game Engine? Code in Javascript. XUL for GUI interfaces. SQLite for data storage. And with Canvas 3D project being worked on… Who knows 😉


Road to Code v0.3

Here is the final version for OSD600. Only a little change from v0.2 though. Not as big as v0.1 to v0.2. Here are my highlights going to v0.3.


Hiding the current image view

This was suppose to be in v0.2 but I was going through over and over and couldn’t get it to work. I was going through each tag in the email (I think) and try to put in a inline style in it but didn’t work. But then I realized, I was like using a bazooka to fix this problem. CSS has a built-in method to do this. It is with the media. I am only hiding this from view and vice-versa hiding my stuff in print. The solution was in my CSS, which styles my stuff, to have only apply to screen which is your display. And it worked. So I just put in some styles to hide the current method of displaying images and that was that 🙂

Apply to also Message View

As Radovan suggested, was to have this work also when viewing a message by itself. I currently have it on only the 3-panel view. So I just did a overlay to messageWindow.xul in my chrome.manifest and it already works like a charm. Nice! No extra work to do 😀

Adding the Next/Prev/Pause buttons

In v0.2, I had to use menu items to use this functions (not very accessible). So I added the buttons in the slideshow gallery. I didn’t have time to actually style them and shift them into correct positions though :S but at least it is functional.

User Preferences

Currently the only user preference is the time delay in the slideshow. Default is 10 seconds and now you can set it as many seconds as you want 😀


  • Using low seconds in the delay like 1 second will display the slideshow weird as the transitions and switch conflict.
  • I didn’t have time to make it autoload. It still has to be manually started by going to Tools>Initialize Slideshow Gallery

Where to go from here?

As stated, this is the end of OSD600. I’m not taking the next course, OSD700 as I’m graduating (yay :D). But that means the end of this extension? Nope. I actually plan to continue this extension as it is still not polished to my liking. As I did this primarly for OSD class to get it done but as I worked on it, I now thought of changes of the design. This extension was done in a whim, with little planning and more try+error and experimenting. Once more polished, I may add it to Thunderbird Add-Ons as suggested by Chris.

So nope this is not the end. I will most likely stay in touch. Like being in IRC or just more blogging.

If you like to help or contribute or anything, by all means contact me.

Here is the extension if you like to give it a try.


Late Blog Posts – Thunderbird Bug Fix Lab

When we were doing this lab in the ORI, we had some initial troubles. First for some reason, we weren’t able to compile Thunderbird in one of the machines. Strange as we used the same .mozconfig that I used to compile Thunderbird on my laptop. But pressed for time, we decided to just used my (slow) laptop.

Our initial plan was to replace the email address detection with a whole new regular expression function to detect only email address (yeah going a bit overboard). But then realize, the function is in C++. IIRC C++ doesn’t have built-in support for regular expressions. Most likely Mozilla included some form of regex in there but we didn’t really check. So we used some C++ function found on the internet to validate emails and just slapped it in. And of course, it doesn’t work. As Mozilla has support for unicode (and is specific to mozilla it seems) and the function we have was meant for ASCII and of course casting won’t help.

So using the list of invalid emails in the wiki, we noticed that the only one that failed were the ones with mutiple consecutive dots like the message example. So it was already smart enough to notice like “s@y” was not an email address. In the message example the reason why it turned to an email link was the dots after “s@y” make it seem like it had a TLD (top level domain) even though it didn’t.

So this time we actually analyzed the code. And here is what we found….

if there is an @ symbol

and after the text if not not found (which mean it is found. really hate that.) a dot (.) then it is a email.

So this why the “s@y…” is turned to an email link. It found a @ and anything after it found a dot.  Really simple way to detect an email. I guess for speed considerations since by the looks of it, (I assume) it breaks the all words in the email by spaces and check each and every word if it is a email or a web address to make it a hyperlink.

Our plan was to do the following… After finding a dot, just check if the next character right after it is dot as well. If so, then don’t convert to a link and if not, then we can assume we have a valid email.

The issue then was how to get the position. It is not as easy as ASCII where we can just put str[pos+1] == ‘.’ (as we thought it would be) as we are dealing with unicode which can be a double byte character. But time ran out for us, and class was over. So we didn’t have a chance to fully test our plan. Hopefully, we will look into it eventually.

Late Blog Posts – MXR/LXR

Well, catching up on late blog posts so you will see a bunch of them as I try to squeeze some marks in :D. This is about searching for code using MXR and LXR for Week 4.

During the progression of my extension, I had to look for code in the mozilla codebase to find like functions that will help me with my extension. I primarly used MXR. For what reason, I don’t know. In fact, I forgot the difference between MXR and LXR (if there are any?). Anyway these tools were definitely helpful because searching through hundreds if not thousand or dare to say millions of files and skimming through lines of codes to find just a snipplet of code would be painful.

How well did it go? Well, in the end I did find the functions that I needed. As well, help understand the layout through the XUL. I even spent time analysing C++ code for the fun of it. But how was it in the beginning? Painful. I went into loops. Functions just calling other functions. A path that leads you one way, that ends up as a dead end. I spent much time searching than I was coding that’s for sure. The main reason for that is that I don’t know what to search for. Luckily names are pretty obvious like getMessageBrowser(). Would be helpful if there is some big guide that tells what each object is and all their methods, what global variables are available and such. Kinda like in our lab where we had to modify adding a new tab to be placed relative to the right. We went through XUL, DTD and to the JS and finally find the actual code of the function is in some XML :S. For me, a beginner, this was pretty confusing. How I wish for something like Intellisense.

Road to Code v0.2

Unfortunately, I been feeling sick all weekend so I didn’t have much time to work on stuff as I was expecting ~_~.

Name Change

I decided to change the name to “Slideshow Gallery”. I think you can figure out why when you abbreviate the previous name 😉

Redone the structure

I used the Extension wizard as the base and port over the stuff I had from v0.1. This is because I was learning from old v1 tutorials before and so I wanted an up to date kind of feel.


Some tales to tell as I worked on v0.2

Click damn you!

I consider myself quite knowledgeable on XHTML and CSS. As I’m working in a browser window (as the email is rendered as a HTML page), I thought it will work just like a webpage. So I got the layout all setup and fine but now I want to have actions. I had little picture previews of the image attachments and when you click on it, I want it to display on-demand. But… it didn’t. I had an onclick attribute and it just won’t fire. I use the DOM inspector to check if it is there (it is) and it also worked in the DOM inspector for some reason. I was about to add either anchors (<A>) or change them to input buttons (ugly :S) but then I realized… wait a minute…. why would they allow javascript in email? Kinda like they disable images from SPAM message to prevent spammers to check if you read their emails. If they allowed javascript then a spammer could use events like the onmouseover (or worse onload) to check if you read their emails. So to work around that I used the AddEventListener() and lo and behold it works. I don’t know if this is the right way to do it so please let me know. As well I don’t know what the third parameter does. I just set it to true which was how I see it used when browsing MXR.


The Extension wizard formatted the JS file (overlay.js) in JSON (I believe is the term). I am not familar with javascript. I use frameworks for AJAX in my websites to basically encapsulate all the hard stuff. From the looks of it, it is like making a class so I went along it with. It makes sense because it organizes the code. I had members and methods and everything is going smoothly until….. back to the previous point. My “click” events won’t fire for some reason. I have no clue how to get it to work. So…. as it is due today, I just went back to original and change it all to functions and global variables (bad programming practice?) as I know it will work.


I had a function that basically walkthroughs the mail message by their tags. As previously stated, the mail just had a bunch of tags like…





But the original inline display of the images were not wrapped around in like a container. So I can’t just say, hide inline images by adding a simple CSS attribute. The reason I have to hide it so that on display, I show my slideshow but in PRINT I hide my slideshow and re-show the original inline images. So I have to go through the tags and add it to a <DIV> to contain it then set a CSS attribute (display) to hide it. But I couldn’t get it to work and pressed for time so I just removed it temporarly (will try for a v0.3 release).

Release v0.2


So what does release v0.2 bring. Well, after installing the extension, you currently have to manually start it in email with image attachments (will eventually make it onload). The commands are in the Tools menu and highlighted in Red, Please note the two commands (resume + pause) should only be used when it started. They are just there temporarily and will be removed eventually. This is again because I didn’t have time to put them in the Slideshow Box.

REAL Slideshow

Yup. It automatically changes the images every 10 seconds (will eventually be a Pref setting) and loops.

Transitions baby!

It currently has a Fade In/Out transition. More to come soon? Maybe…. How about you contribute 😉

So from the Game Plan v0.2 post. Here is what is done…

  • Have a box for the slideshow
  • The image container in the middle
  • Buttons to switch image (not buttons but previews! ^_^)
  • Timer button for play/pause (well should be in the box…. for v0.3)
  • Hide the current method of displaying images. Why hide? Because for printing an email. For printing I will hide my slideshow and show the images regularly. (not done -> for v0.3)
  • ADDED: Transitions!!! (well just one)

I plan to eventually use Canvas as I currently using just IMG tags and CSS. This will add more effects and make it look even more amazing!


  • Only works in the Layout view (not working in the mail window when you open an email in a window) This is because I am not overlaying the XUL of it. I had no time to test it.
  • A small window (or big huge images) will break the layout


Here’s the link. Let me know what you think!


EDIT: Minor grammar and spelling fixes. Never do blogging late at night ~_~.

Lab – Creating an extension

Our lab last week was learning on making an extension. I, of course, already read about it for my v0.1 release but I used old tutorials. Many were the same so all is good. One site that would of made my life easier was Firefox/Thunderbird Extension Wizard that gives you a base XPI file for you to work with, with all you settings set for you. I had a base “Hello Thunderbird” made for v1 that I modified to v2/v3 style and had to manually change the settings.

While doing the lab, I was just doing Copy and Pasting since I read up on most of the extension stuff already and just had a few problems.

  • The Max Version was old (had IIRC a PreAlpha of v3.0) so I modified the Wiki to just be v3.0+
  • The code said to remove leading whitespace when Copying and Pasting code. So I modified the Wiki to have the leading whitespace already removed. So now you can easily copy and paste with no worries.

Other than that, the extension went fine. The “Hello World” statusbar and the “Relative Tab” Extension went without a hitch.

Game Plan v0.2

A simple list for what must be done for v0.2

  • Have a box for the slideshow
  • The image container in the middle
  • Buttons to switch image
  • Timer button for play/pause
  • Hide the current method of displaying images. Why hide? Because for printing an email. For printing I will hide my slideshow and show the images regularly.

That’s should be good for v0.2


For contributions, I think the only thing I can think of is testing. Documentation is minimal as it is already easy to use (it is an extension). Other things maybe suggestions for future features. So brainstorming ideas that you would like to have for what you want in a v1.0 release. I will most likely not finish for v1.0 release as I am graduating (and depends on my free time after that). So anyone willing to take the job can have a list of TO DOs already 🙂

The Road to Code v0.1

Prepare for a very long blog post. This might even fill up the whole Planet 🙂

Change of Plans

Originally my slideshow was to open a new window and make the slideshow in there. But apparentlly there is already an extension to do it, uniquely called “Slideshow“. This extension though in my opinion is really an attachment picture viewer. Because it doesn’t automate a slideshow.

Either way, this means I have to make a few changes my extension. So I went back to what I wanted originally. To replace the picture attachments under the email in the messagepane (inline attachments) and to be a true slideshow.


So the research begins. I went and looked at the XUL of Thunderbird to understand it.

  • Looking in the above, the “messagepanebox” is where the email is (in the classic view, it is the bottom right section).
  • “msgNotificationBar” is most likely the bar that pops up like “This is Spam” or “Images are disabled”
  • “msgHeaderView” displays the header information of the email like who sent it, subject, and if expanded the more detailed information
  • “messagepane” is where the actually email is displayed. As you can see it is a “browser” like in Firefox. So it most likely just pointing to a file in your profile (containing the email messages), decoded and then displayed here.
  • “attachment-splitter” is the division from the…
  • “attachmentView” where the attachments are displayed

Anyway, the attachments can be displayed inline in the email or not (which is what I plan to replace) by the user preference “Display Attachments Inline” which can be toggled under the “View” menu.

So I searched for that text ->

Which brought me here ->

And ended here ->

Basically what it says is, change the user pref then just do a reload of the email. Kinda like the lab we had with the “View Image” is really just change the location bar to the path and load it.

I thought, since it is a “browser”, it would just apply a “display: none” or “visibility: hidden” CSS property but I guess not.

So I went to research the actually rendering of the email. If you ever “View Source” of the email with attachments, you will notice that is divided up into sections like the text message and then a bunch of characters under for the attachments. This is because email was originally designed just for text (ASCII) so for images (binary) they have to be encoded.

I went into circles and I ended up actually reading the C++ code that actually does the decoding process. I don’t plan on touching that.

So, I came back where I started and remembered that the messagepane is a “browser” therefore the email is rendered like an HTML page. Using DOM inspector, I looked into it.


As you can see, there are just a bunch of HTML tags. The message is put into a DIV and is displayed according to what is set (HTML or plain text). For the attachments, it is a HR for the horizontal rule, BR, CENTER to center the image and the image, for each attachment (outlined in red). As you can see in the image, there is the SRC for the image which is pointing to the imap path. I assume if it was POP it will will point to the file on the hard drive.

I also noticed if I uncheck “Display Attachments Inline”, it doesn’t render the image attachments (not a hide/visible that I originally thought). Makes sense, as if the images are huge, you don’t want to wait to download, decode and then just hide them.

The Road to Code v0.1

So I read up on how to make an extension. I found a “Hello Thunderbird” extension. It is unfortunately out of date (using old methods like contents.rdf). It will still work fine but I went up and look at how current extensions are made.

There are two goals for my v0.1

  1. To get all the attachments (ideally just the images)
  2. To manipulate the email, to render what I want (which will eventually be the slideshow)

So I went to work, read up some stuff (as I don’t know Javascript) and so forth. Here are the results…


As you can see, the alert in the middle shows the image name, content-type,  URL and URI. If you click ok, and if another image is there, it will display that info. If there are no images, it displays an alert (for debugging purposes) saying no images found as expected 🙂

As well you can see little red “Hi” boxes next to the image. That was added by me so I know where to add code and as well what I can add 🙂 To display the colours, I used the following in my userContent.css

center span {   background-color: #f00;border: 1px solid #000;}

So all is looking good 🙂

Goals for v0.2

Well not that I got the basics done, what to look forward to next?

  • Get the a slideshow box
  • Change images. This should be easy (theoretically), as I will just have to change the IMG SRC to the next image’s SRC and vice versa for the back button
  • Have a real slideshow. A timer to automate the change.
  • User prefs? Like what images to show, etc…

Download v0.1: attachment_slideshow.xpi

NOTE: I only tested it in TB v2.0.0.12. I know I was suppose to use v3.0pre but I am having problems with my build for some reason. Once I have time, I will test it on v3.0pre.