Milkshake/jQuery.IME extensions for Firefox and Chrome

jQuery.IME extensions for Firefox and Chrome

• Public URL: http://www.mediawiki.org/wiki/User:Prageck/GSoC_2013_Application
• Bugzilla report: https://bugzilla.wikimedia.org/show_bug.cgi?id=46647
• Announcement: http://lists.wikimedia.org/pipermail/wikitech-l/2013-April/068896.html

Name and contact information

Name: Praveen Singh
Email: prageck@gmail.com
IRC or IM networks/handle(s): Prageck
Location: New Delhi, India
Timezone: UTC+5:30 (IST - India)
Typical working hours: 11 am to 6 pm, 10 pm to 1 am (IST) (flexible)

Synopsis

Tracked in Phabricator
Task T48647

jQuery Input Method Editor is a collection of more than 150 input methods across several languages. It is the jQuery version of the input method tool, Narayam, which is used across several Wikimedia projects. Currently jQuery.IME is provided from the Wikimedia servers.

This project mainly aims at:

• Porting jQuery.IME to Firefox and Chrome extensions
• Providing on demand loading of input methods for different languages rather than injecting all 150+ input methods on a web page.
• Working out a solution to update the extension from the upstream project with minimal manual effort

As these extensions would allow the user to use the input methods on any website and not just on MediaWiki enabled websites, these would be of immense help to the users.

Mentors

Santhosh Thottingal would be the primary mentor for this project. Amir E. Aharoni would be co-mentoring this project.

Deliverables

Required deliverables

• Google Chrome extension

• Port the jQuery.IME code to Chrome extension in accordance with Chrome extension architecture and workflows

• Mozilla Firefox extension

• Port the jQuery.IME code to Firefox extension in accordance with Firefox extension architecture and workflows

• Implement on demand loading of input methods for different languages
• Implement a mechanism to update the extensions from the upstream project with minimal manual effort
• Include user preferences/options that would get persisted in the browser
• Getting the extensions reviewed and published on Chrome Web Store and Firefox Add-ons repository
• Writing unit tests for the added functionality
• Documentation

• Architecture overview
• Developer manual

If time permits

• Port jQuery.IME to other major browsers (Internet Explorer, Safari, Opera etc).
• Overall improvements in UI to make the extension more user friendly.

Project Schedule

• 1^st - 3^rd week − Community bonding period

• Study jQuery.IME code in detail and get familiar with the overall coding style and structure.
• Study Google Chrome extension architecture and workflow in detail
• Study Firefox extension architecture and workflow in detail
• Lay down UI mock-ups and project structure and discuss them with the mentors and the community.
• Fix certain open issues to gain a deeper understanding of the code.

• 3^rd - 4^th week − Implement first working iteration for Google Chrome

• Port jQuery.IME to Google Chrome extension according to the discussed mock-ups

• 4^th - 7^th week − Extending the above made plugin with the following features:

• Implement on demand loading of input methods
• Implement update mechanism to synchronize the extension with the upstream project
• Implement persistent user preferences/settings
• Perform unit testing using QUnit

• 7^th - 9^th week − Port jQuery.IME to Firefox extension and replicate all functionality

• Port jQuery.IME to Firefox extension
• Implement update mechanism to synchronize the extension with the upstream project
• Implement persistent user preferences/settings
• Perform unit testing using QUnit

• 9^th - 15^th week − Code review and documentation

• Code review

• Code review by the mentors, Santhosh Thottingal and Amir E. Aharoni

• Testing
• Bug fixes
• Documentation

• An overview explaining the architecture of jQuery.IME extension for Chrome and Firefox
• Developer manual to help future developers contribute to the project

• September 16: Suggested pencils down date

• Leaving a buffer period of one week for any delay in the above schedule

• September 23: Firm pencils down date

About me

I am a student of Master's program at Jaypee Institute of Information Technology (India), Department of Computer Science. I love working on web technologies and have been doing web development for the last 2 years. I have good understanding of javascript, jQuery, CSS and PHP. This project really interests me as I feel that these extensions would prove to be a really helpful tool for the user by providing him/her with the Input Methods on all websites. I chose to work on this project as I have had a prior experience in developing for both the platforms, and my skill set suits the project.

Participation

During my work hours, I am always logged on to IRC and can be easily reached at #mediawiki, #wikimedia-dev and #mediawiki-i18n. I will communicate with the community over the mailing lists (Wikitech-I and mediawiki-i18n) for any feedback, suggestions and queries.
I would discuss the project progress with my mentors using:

• regular emails
• video chat once every week
• IRC

I might encounter some situations when I will be waiting for a review/response from the mentors or the community. In such situations:

• If mentor's review/response is absolutely necessary and is blocking any further progress, then I will move on to documentation and unit testing until I get the required response.
• Otherwise, I will start working for the next module/functionality in the project schedule. Once I get the required response I will continue working from where I left and will update the project schedule accordingly.

All the code will be hosted on Github, so that anyone can easily track my progress and give feedback.
Amenities: I understand there have been power and internet issues with students from India in the past. I have a stable internet connection and 24-hour power backup, so power and internet issues are taken care of.

Past open source experience

Submitted patches

• Bug 40464: Placeholder attribute of search box is not set until load − Patch (merged)
• Bug 47342: Autocomment formatter section link should be wider than just the one arrow character − Patch
• Issue #143: IME button location not updated on zoom events − Patch (merged)
• Bug 43904: jquery.ime jumps forward after every character when there is pre-existing text in IE − Patch (merged), Patch (merged)
• Bug 45149: AltGr+M doesn't create a µ in jQuery.IME − Patch (merged)
• Bug 48600: Fixed imeselector position when page is scrolled − Patch (merged)
• Issue #148: Keyboard shortcut to toggle between currently using layouts − Patch

I discussed my project with the community through the Wikitech-l mailing list. Project discussions can be found here, here, here and here.

I collaborated on a Google Chrome extension and a Firefox extension earlier. I made a wordpress extension (currently not live) to edit and modify CSS rules like Firebug and save the changes back to the server from the browser itself.
I have been a regular contributor to the Open Source Developers Club of my university. I co-organized several Open Source meet ups in my university including OSSCamp 10.11, and Firefox 4 Launch Meetup. I have been attending a few local community meetups about open source including DrupalCamp. All my code is available on github.

Project updates

Weekly updates and progress can be tracked here: https://www.mediawiki.org/wiki/User:Prageck/GSoC_2013_Application/Project_Updates.

Source code is available on github:

• Chrome extension: https://github.com/pravee-n/jquery.ime-chrome-extension
• Firefox extension: https://github.com/pravee-n/jquery.ime-firefox-extension

Monthly Report: June 2013

In the first half of the month, I mainly focused on getting familiar with the jQuery.IME and jQuery.ULS codebase and the architecture of Chrome and Firefox extensions. After the Community Bonding period, I started working on the prototype extensions that I had already implemented. I moved the source code of each extension into separate repositories rather than working in a single repository. I explored Git Submodules and included jQuery.IME and jQuery.ULS as submodules in the extensions. This would provide a way to synchronize the extensions with the upstream projects in future by simply updating the respective submodules. I am currently working on integrating the Universal Language Selector in Chrome extension.

Monthly Report: July 2013

The Universal Language Selector was integrated successfully in both Chrome and Firefox extensions. The extension remembers a user's 5 most recently selected languages and their corresponding input methods and provides an easy way to choose among those languages. IME preferences are stored in extension's local storage. So as to avoid any possible conflict with the webpage's CSS and DOM, I prefixed ime- to all classes and IDs in jQuery.ime and uls- to all classes and IDs in jQuery.uls. Rather than modifying the jQuery.ime codebase itself (which I earlier did), I overloaded IME's load() method to include browser specific code that was required to implement on demand loading of input methods. I implemented helpHandler for IME the same way it is implemented in Universal Language Selector in Wikipedia. It provides a help link for the selected input method. The Language Engineering Team successully added support for contenteditable elements in jQuery.ime. I synchronized the extensions with the upstream projects. And now the extensions also support contenteditable elements.

Monthly Report: August 2013

The main focus for this month was testing, bug fixes and getting the extensions published in their respective repositories. Contenteditable support was added to jquery.ime by the Language Engineering Team. But due to a known issue in rangy library, I temporarily reverted contenteditable support in Firefox extension. It would be resolved with the next release of rangy library. I successfully published both Chrome and Firefox extensions. Chrome Extension is available on the Chrome Webstore here. Firefox extension is available on the Mozilla Add-ons repository here.

Final Report: September 2013

A wrap-up blog post summarizing the current status of the project, my overall experience throughout the summer, and the thank yous: http://blog.praveensingh.in/articles/gsoc-wrap-up/