What you might want to know before doing your first extension

-          Follow the custom toolbar button (here) to know how a simple extension look like.

-          Then, you may want to look out for the followings:

• For structuring your extension: check out XUL  tutorial here
• For functionality and DOM manipulation (what’s DOM?):  check out Javascript tutorial (on MDN)
• For UI styling: CSS
• For data storage: SQLite or preferences
• Debugging your application: Firebug and DOM Inspector

-          And, after you’ve known a bit of everything, go search for simple extensions that you like, or similar to what you are going to build (for example, your extension touches Firefox download bar, go download Download Status, extract the files, look at the source code and see what can help you =) ).

-          Still got questions? Here are some irc channels that you may find useful:

• #extdev – Discussion about extension development
• #xul – Discussion about the XUL programming language
• #js – Discussion about JavaScript programming
• #developers – general Firefox and Gecko development discussion

Sidenote:  How to extract the addon file? (a .xpi file)

• Use winzip or winrar, extract it as normal
• Then go inside the folder, often you will see a .jar file. It’s an important file that contains the source code of the extension. Change it to .zip and extract it too.
• Ok, you have everything you want here. Go take a look how everything above combine into an add-on, and get your extension done quickly! =)

Good luck!

Mock UI picture

Here is the mock UI for the account import wizard of Instantbird.

Project update week 12

It seems like we are at the end of the semester. Yes, week 12. After long hours playing with Firefox source codes, my “Improving Clear Recent History” project is going to finish soon. Hmm, more specifically, I have finished the last bug in my list : bug 625344 : Clear All History dialog window missing accesskey for Clear Now button. Let’s see what I’ve done so far to make it works .

Okay, if you have seen my plan of approaching the problem (available here if you want to visit again ), there is a sad news I have to tell you that none of the approaches can help me to solve this bug (maybe this is not true for you, but for me it is just because after hours of trying 3 approaches, I still cannot take down the problem). Instead, after keep browsing mxr, using “trial and error”, I have found the ‘magic’ file: browser.properties (how can I found this? Search for “Clear Now” on mxr hahas). Having a look in this file, all I have to do is finding a suitable accesskey for the Clear Now button. It’s not easy though, because there’s almost a lot of available accesskeys in Firefox. However, the ‘W’ seems to be a good choice for me. And, it works!

So that’s how I have taken down this bug, although I should have tried to find “Clear Now” on mxr at the first time I saw the problem. However, it is not too bad, because I’ve learn a lot of interesting things on the way I come to the solution : finding out out accesskeys work on XUL, on .dtd files, how to choose a good accesskey for a button, etc. It’s quite a nice trip, isn’t it?

 

One more.

Finally, (after hours having to build Firefox again, for some reasons), bug 624302 has been solved. Personally, I think this bug is harder than the first one in this course, however as I have learn more (comparing to me at the beginning of the course), things now flow a little bit smoother. The outcome of this bug is also not a impressive one, but what I’ve been through, and what I’ve gained, I think.

Ok, let’s talk about what I’ve done to fix the bug. Firstly, as I have said in the previous post, almost everything I searched about “findbar” is about XUL. Thus I’ve been looking for XUL files and seeing how Firefox manipulates the findbar. It helped me to learn a lot, but still cannot help me to solve the bug, because I couldn’t really make a connection between sanitize.js (which handles the Clear History function) with those .XUL files. Then, I moved to learn how others .js files in Firefox use the findbar. Using mxr, what I’ve found there is really amazing, because the findbar actually can be  touched, especially can be cleared throughout .js files (see this link, this is to clear the findbar before leaving the private browsing mode).Learning the code, and apply them into sanitize.js, it is not as painful as finding them . So, I now can clear the findbox after choosing to Clear History!

This is where the source code of the findbar is, if you are curious enough to see how it is built .

Now moving to the last bug of the semester!

Project update week 10

Annoucement! New project goals. I’m trying bug 625344, and bug 624302 (if time permits). So, my overall CP3108 Mozilla project can be described as “Improving some features of Firefox Clear Recent History”, isn’t it?

About bug 625344 : Clear All History dialog window missing accesskeys for Cancel and Clear

I’ve listed the approaches for this problem: first, because I’ve figured out where the exact location of the function Clear Recent History (sanitize.js, see my older post), I tend to call some method that (maybe?) allow an accesskey for the Clear Now and Cancel button. Secondly, I will try to find the XUL file which contains the  Clear Recent History layout, than add the accesskey command (this approach was made after going around MDC). The third approach is, using DOM Inspector to edit the Clear Now and Cancel button (?). The last approach seems like the easiest, however I didn’t use DOM Inspector much before, so everything is still in the dark.

For the first approach, after spent quite some time looking on mxr and learn how other source file can use the accesskey, I can see that there is no such method allow accesskey for a button. Instead, they use HTML and XUL to add the accesskey attribute to the button. This is easy to do because you only have to modify one line of code. And this led to the second approach.

For the second approach, I can find the sanitize.xul quite fast, and it contains almost everything of the Clear Recent History dialog, but… the Clear Now button (as you can see in the link). Then I tried to search for more, and find browser.properties, sanitize.dtd, which also contain the Clear Recent History dialog information, but still I couldn’t find out how to edit the ClearNow button. Anyway I think I’ll spend more time in the weekend for this, and hope that I can finish it by the next Monday .

 

About bug 624302: Clear Recent History should clear the Find box

As the tile says, I think you can know that now the Clear Recent History doesn’t clear the Find box (the little find bar appears after you press Ctrl+F on Firefox). So the clear purpose of this bug is to clear anything inside the Find box, which sounds logical to me.

So I spend time figuring out how the find bar is created, initialized and and also how it works. Nevertheless the main use of find bar is for XUL, not Javascript (and the code I want to add to clear the find box is in Javascript, sanitize.js), so I searched to see if any other .js files use the find bar. They do, but after learning and using them into my code, it doesn’t work. I guess I’ll spend more time on this then…

Anyway, that’s it. The project is on the way, and let’s have it done before the final presentation!

 

 

Preference :

https://developer.mozilla.org/en/XUL/Attribute/accesskey

https://developer.mozilla.org/Talk:en/XUL_Tutorial/Keyboard_Shortcuts

http://mxr.mozilla.org/mozilla-central/source/browser/base/content/sanitize.xul#108

http://mxr.mozilla.org/mozilla-central/source/browser/locales/en-US/chrome/browser/browser.properties#126

http://mxr.mozilla.org/mozilla-central/source/browser/base/content/sanitizeDialog.js

http://mxr.mozilla.org/mozilla-central/source/browser/base/content/sanitize.xul#63

 

 

Just want to share with you.

http://books.mozdev.org/html/mozilla-chp-1.html

This is a great site to start with Mozilla, believe me. Almost every basic thing you need to get your first step into the open source world .

What need to be done, is done!

After deciding that finish a bug in my list is a must, I poured all my effort into the second bug last weekend. Finally I completed it, which is adding a confirm dialog before you want to clear the history. Having played around with this bug for the last three weeks, search and learn, adding lines of code here and there, handling with never-see-before types of errors, was such an experience. Personally I think my bug is not a hard one, and the result is not such a “great” achievement itself, but the process. Getting your hand really dirty into the open source world, here in my case is the Firefox core code, is what this course really about, I think.

Let’s talk about what I have done so far. Basically, I divide the process into 2 parts: identify where the source code (specifically a method/function) for the “Clear Recent History” window is, and insert a confirm dialog into it. Sounds easy, isn’t it? Not that easy for me!

The first one, finding the location of the Clear Recent History, actually took me a lot of effort. Using mxr, first I found something very likely to be the target, the RemoveAllPages() method inside nsNavHistory.cpp. It seems logical, isn’t it? Because I was finding something related to clear recent history right? Yeah, and I started to work on the code for about a week, trying to copy the confirm dialog existed in nsSecurityWarningDialogs.cpp, facing “Undefined Reference” and “Multiple Definitions” errors, attempting to edit the Makefile.in, and “phew” when nothing appeared anymore. Build sucessful, but still nothing happened when I press the magical”Clear Now” button. What happened? I need to back a few steps to think, and have a thought that, maybe the RemoveAllPages() doesn’t involve to the Clear Recent History at all.

It turns out that my thought was true last Saturday. And wow, I started everything from scratch again . However, this is not the first time I’ve done this (searching for the location), I was more carefully, and, more effectively doing my job. Again, with the help of DOM inspector, I found a promising function, sanitize.js. Fortunately it is a JS one, I could easily add the alert dialog for testing. This time the “promising” function becomes true, and I now can move on for the second part.

Feeling excited, I search for a JS confirm dialog, and find the confirm() function. However, when it is used in Firefox, the title of the dialog is always “Javascript application”, which we have no right to modify, and that put the confirm() choice out of my plan. I move on, and got this, the nsIPromptService . The rest of the job is quite simple, after playing around with the explanations and examples given there.

Have a look at my demo video here!

Complete this bug, is really a boost for me to continue doing the next bug.