Update on the status of project

March 23, 2009

So what I have been doing for the past two weeks was to make the extension to work and clean up on the code. In my previous post, I mentioned that the difficulty that I encountered was to retrieve the information (hostname and ActionURL as indicated in Mozilla documentation for findLogins method) of the html form submitted so that I can search for the logins (nsILoginInfo object).

I was kind of stucked until I thought of the way to search for the code that actually saved the login when the form was submitted. This way, I can know how the information was stored and might be able to tell me how to retrieve the information. So, I search for the addLogins method in MXR. It pointed me to two files, nsLoginManager.js and nsLoginManagerPrompter.js. But it was quite difficult to search for which function was called when the login button was clicked. So, I tried to inspect
the notification bar (It contains the prompt “Do you want firefox to remember the password”) that pops up everytime we log in into a website.

So at the location was a button with the value “Remember”. It didn’t help much. I figured that the nsLOginManagerPrompter.js must be in charge of prompting the user, so I tried searching for the “Remember” word in the file. And it brought me to the _showSaveLoginNotification function. After going through the code, I come to the following sequence of function calls:

When a login form is Submitted -> _onFormSubmit() in nsLoginManager.js -> promptToSavePasswords() in nsLoginManagerPrompter.js -> _showSaveLoginNotification() to display the notification bar -> and finally addLogins() in nsLOginManager.js

So I noticed that in the _onFormSubmit function, it retrieves the information from the form submitted by calling the other two functions: _getPasswordOrigin to retrieve the hostname and _getActionOrigin to retrieve the formSubmitURL. I think these two should be the functions that I was looking for. So I extracted from the function, the code that I needed for my extension and it works. I also made use of the _getFormFields() function to get the value of the username field.

So, then I cleaned up the code and added some comments and it is now uploaded to addons.mozilla.org. Please feel free to give your comments and suggestions to me. Thanks.

Some progress and some difficulties

March 1, 2009

I have managed to hook the extra option into the ‘right click’ menu. Below is the screenshot.

I referred to the code of Ubiquity in checking which context was being clicked on. I managed to filter the case such that the option only appears when a text field is being clicked on by using document.popupNode.onTextInput. I also found an example in mozilla documentation that can check whether an image is being clicked on by using instanceof Components.interfaces.nsIImageLoadingContent.

I have been trying to search for a similar example to check for a password field, but I couldn’t find one. I checked out a few websites using DOMinspector  and noticed that the ‘type’ for the password field is usually “password”,  so I used this as one of the condition to determine whether the option should be disabled.

…….
var passValue = document.popupNode.value;
var isHidden = ! (gContextMenu.isContentSelection() || gContextMenu.onTextInput);
var isDisabled = !(type == “password” && passValue);
…….

One possible problem is that the option will be enabled whenever there is value in the password field, i.e it is not empty. Previously, I had wanted to enable it only when there is a password saved on this webpage. But I haven’t been able to do that. Not sure if this is a good way to do it. Please feel free to point out to me if there is a better way.

I have been looking at the passwordmanager related code in the /toolkit/component. As expected, they are not easy to understand. I managed to find a related XPCOM interface nsiLoginManager which provides methods to manage logins.  PasswordManager.js seems to be leveraging on this interface to remove the logins. But there are other parts of the code that I couldn’t really understand the purpose.

Instead, I tried to directly make use of the nsiLoginManager interface. It seemed to be able to delete the passwords saved. What I am trying to do is to use the findLogins() method to find the related logins saved for this webpage that is being visited, and then delete using the removeLogin() method.

I am having difficulty in using the findLogins() to retrieve the password. The arguments needed to search for the logins are ‘hostname’, ‘formSubmitURL’ and ‘httpRealm’. As I am currently only working on logins obtained from HTML form, so httpRealm can be set to null. I haven’t been able to retrieve the hostname of the webpage. Tried ‘document.URL’ and ‘window.location’ and they don’t seem to work. As for the formSubmitURL, I tried using ‘document.popupNode.form.action’ but it returns a full path of the form which is different with what is required.

Lastly, I am not very sure whether using the interface directly would introduce bugs or break other parts of the code. If anyone has any idea, please feel free to let me know.

Finding the relevant part of the code

February 16, 2009

I noticed that the options menu that appear when we right click, differ depending on which area we are right-clicking on. When we right click on a text field (including password text field), the options that pop up are different with when we right click on other area, such as image. So, I think I’ll have to find the relevant part of code that handles the displaying of options according to the area.  I have been exploring the browser using DOMinspector.  Thanks to a clear and helpful guide from Gary.

I tried to inspect the options by right clicking on the password text field. Here is what I get:

Apparently, the part that is highlighted is an HTML element with ID: pass. I think this might be helpful in future, as I can use the element ID to check whether the right click is on a password field. Next, I will need to find the XUL element for the options. I noticed that whenever I right click on the password field, the right click options would not appear, instead the box is highlighted and the same HTML element is inspected. Tried several times, and finally I could get the options to appear. The correct way of doing is to left click on the content of the password field and then right click to display the options. Another left click will inspect the menu.


An interesting keyword that I have noticed is the ‘contentAreaContextMenu’. I searched for the documentation for this word in the Mozilla’s developer website and I found several articles related to what I need to do for my project. Have been reading on these documentations for the past few days. I will start on hooking the extra option this week. Hopefully, I can get it done by the end of this week or next week. Next, I will need to find, read and understand the part of code that handles the storing of password. Haven’t started on this one yet, so if anyone has any idea, please feel free to share with me.

Some thoughts on this course and open source

February 16, 2009

During the session last week, Gary asked us to write something on how we feel about open source. Well, the good thing about open source is that every successes and obstacles are shared by everyone in the community. The experience so far has been great, it was quite tough at the beginning (actually it is also quite tough now). I really learned a lot of new technical skills from the sessions that we’ve had so far.

Students don’t always get a chance to be involved in or exposed to big software engineering projects in school. But I am glad that I got this chance to understand the bigger picture of software development. It was made possible, simply because of ‘open source’. What do I want to achieve at the end of the course? My first priority is to be able to complete the project that I am working on by the end of the course. I hope the extension that I am working on can be useful to people who use it. Learning as many things as I can is also something that I wish to achieve.

Gary also showed us some videos on concept series labs. The Aurora concept shows that a browser can actually be expanded to do more things that simply browsing. Users can interact with each other by using the browser.  I think the Aurora concept is cool. There are more things that we can do with browsing. But the more it can do, there will be higher learning curve for the users in order to be able to make full use of them.

The bookmarking and history concept video provides an enhancement to the conventional functionality that a browser has. It enhances the interface of the browser and makes it more convenient for the user to do certain tasks. It definitely will facilitate users in searching for bookmarks and histories.

Compilation process and plans for the project

February 7, 2009

I had a tough time trying to compile the Firefox source code. My laptop is using Windows XP SP2 with Intel dual-core 1.83 GHz processor and 1 GB of RAM. Gary gave us a few prerequisite softwares that need to be installed for Windows. When I was trying to install the Microsoft Windows Vista SDK, the installation process stopped at a certain step and the progress meter did not proceed any further. I was thinking the cause could be that the step may take longer than other steps. But after half an hour, nothing changed and I closed the installation and tried to compile the source code. The compilation did not succeed. The error message was that it could not find a certain file wpcapi.h. A search on internet brought me to this page.I suspected the reason could be due to the halfway-terminated installation process of the Vista SDK. I tried uninstalling and reinstall again, but it just didn’t succeed.

I asked Gary about this, and he suggested me to put ‘ac_add_options –disable-vista-sdk-requirements’ into the .mozconfig file as a possible workaround. This time the compilation process went further but eventually stopped when it was ‘processing a certain .idl file’. Not sure what the file was, Gary and my fellow classmates suggested me of installing Ubuntu in my laptop instead of using Windows for the development. I went home and gave it a final attempt, uninstalled and installed all the prerequisite softwares (and making sure that the installation is in the order in which Gary told me). This time, I let the Vista SDK installation ran for about 45minute, the progress meter stucked halfway again (but at a different step with previous attempts), but finally a window appeared indicating that it was completed. I tried compiling the source code again after 45 minutes, it was successful. I was quite delighted with it, was on the verge of dropping the course, since I can’t do anything without compiling the code. It was a bit late (week 3 into the semester) and my classmates were all able to compile in week 2. Hopefully,  I can still make it in time before the final submission.

Meanwhile, I have also been doing some reading about extension development, XUL, and DOM  in the Mozilla developer website. Had some thoughts about the project. Just to share with you my plan for the upcoming weeks. I have allocated week 4 and week 5 for readings and familiarization with the Mozilla development technology. My target is to be able to complete the hooking of the extra  option (overlay) by the end of recess week (the week after week 6). The rest of the weeks will be spent on making the option functional and adding enhancements (if any).

Prof Humphrey gave me some links regarding firefox lab in Seneca, I will go through them during the weekend (today and tomorrow). On Thursday during the lesson, Abi (an ubiquity expert in Singapore) came to the class. He suggested me to look at the Ubiquity code to have an understanding about how to add an extra option. Gary also asked me do ‘dissect’ the ‘about’ extension that he developed. Would like to thank them for their input. =)

My Project Description

February 7, 2009

Let me start with a brief introduction of myself. I am Hendrik, a year 3 School of Computing student from National University of Singapore (NUS). I am currently taking a module (Independent work on Mozilla) in this semester under Gary Kwong. In order to fulfill the requirement of this module, we are required to complete a project that is related with Mozilla development and also must contain significant computing content.

This blog is created to track the progress of my work and also to share with fellow Mozilla developers regarding the project that I am working on. I will be describing my experience with Mozilla development and also challenges encountered in the process.  Comments and feedbacks are welcome.

Here is a brief description of what I will be doing during the course.  Special thanks to Prof. David Humphrey from Seneca and Mike Hoye for giving me a good topic for the project.

Project Topic: Building an extension for Mozilla Firefox browser.
Background: Current Firefox version requires users to go Tools -> Options -> Security -> Saved Passwords -> Remove/Remove All, in order to delete the password saved. The extension proposed here will be aimed at making the procedure of deleting password easier. A new menu option will be added whenever user ‘right clicks’ on the text fields that contain the password that had been previously saved. By selecting the new option, the password saved will be deleted. A bug has been filed on this, and here is the link for your reference.

Well, that was the description of what I will be doing for this module. I am still new in this community, your help and advice will be truly appreciated.