Milkshake/jQuery.IME extensions for Firefox and Chrome/Project Updates

jQuery.IME extensions for Firefox and Chrome − Project updates

This page briefly describes the progress that I have made regarding my GSoC 2013 project − jQuery.IME extensions for Firefox and Chrome

Source Code

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

Until June 17 (Community Bonding Period)

• Familiarized myself with the jquery.ime coding style and structure
• Setup my development environment and read the relevant documentation of the jquery.ime library
• Studied Chrome and Firefox extension architecture and workflow
• Discussed my approach towards the project with Santhosh
  • I would start off by making working versions of both Chrome and Firefox extensions
  • Afterwards I would work on developing the on-screen keyboard feature
  • Would work towards making jquery.ime work on contenteditable divs
• verified the checklist at Summer_of_Code_2013#Checklist

June 24^th

Progress made since last meeting:

• moved the prototype extensions to separate github repositories
  • Until now I was working on both the extensions in a single github repository: https://github.com/pravee-n/jquery.ime-extensions. I decided it would be better to maintain different repositories for each extensions so that anyone can easily track progress, fork or contribute to each extension individually.
  • Chrome extensions is now available at https://github.com/pravee-n/jquery.ime-chrome-extension.
  • Firefox extension is now available at https://github.com/pravee-n/jquery.ime-firefox-extension.
• Synchronize the extensions with the upstream project
  • We need to synchronize the extensions with the upstream project at regular intervals. I discussed a few possible approaches with Santhosh and we decided to use Git Submodules. The jquery.ime and jquery.uls projects are now included as submodules in the extensions' repositories and can be easily synchronized with their upstream projects respectively.

Goals till next meeting:

• Integrate jquery.uls in Chrome extension
  • Currently a user has to scroll through all the languages in order to select a particular language. Integrating jQuery.uls would allow language selection based on regions.

July 1^st

Progress made since last meeting:

• Integrated Universal Language Selector (jQuery.ULS) in Chrome extension
  • I successfully integrated the Universal Language Selector in Chrome extension. Now, rather than scrolling all the way down to select a language, the user can easily select a particular language using Universal language Selector.
  • A user's last six languages and their respective input methods are now stored in browser's local storage. Replicating jQuery.ime's behavior on mediawiki, jQuery.ime chrome extension is initialized by these six languages only and any other language can be selected using the Universal Language Selector.

Issues faced:

• The CSS of jquery.uls consists of very generic class names and IDs such as search, row etc. The extension injects this CSS into the webpage which might result in conflict in css and produce some erroneous results. For example the jquery.uls contains a search bar whose ID is search. I tested the extension on a google search page. While doing a google search, google appends the search results into a #search element. Rather than injecting into its own #search element it appends the results into jquery.uls's search bar which is also having the same ID. There might be some issues on other webpages as well due to these very generic class names and IDs.
• In order to initialize the ime with only a subset of languages, we need to pass the subset as options to the ime. Now when a user selects a new language, it should be saved as user's last used language in local storage. However there is a conditional check in jquery.ime's code that calls the save preferences method only when the currently selected language is present in ime's list of languages. As a result, user's last used languages are not saved in local storage. I have temporarily commented out that particular condition.

Goals till next meeting:

• Fix all bugs and issues faced while integrating jquery.uls in Chrome extension.
• Replicate the same functionality in Firefox extension.

July 8^th

Progress made since last meeting:

• The bug regarding preferences not being saved when jquery.ime is initialized with a subset of languages was resolved and merged in upstream this week by the Language Engineering team. So I simply synchronized my extensions with the upstream projects to get rid of that bug.
• Replicated Universal Language Selector integration in Firefox extension.
• Currently working on a pull request that would add ime- and uls- prefixes to all class names and IDs so as to avoid having very generic class names.

Goals till next meeting:

• Create a pull request fixing generic class names and IDs in both jquery.ime and jquery.uls upstream repositories.
• Test the extensions made so far on a few more websites and identity some possible bugs/issues.

July 15^th

Progress made in the last week

• To solve the problem associated with generic classes and IDs, I prefixed ime- and uls- to all classes and IDs in jquery.ime and jquery.uls respectively and opened pull requests in respective repositories.
  • jquery.ime pull request - https://github.com/wikimedia/jquery.ime/pull/208.
  • jquery.uls pull request - https://github.com/wikimedia/jquery.uls/pull/105.
• Changes in jquery.ime were reviewed and merged successfully. Waiting for the changes in jquery.uls to get reviewed and merged.

July 22^th

I discussed the project progress made so far with Santhosh and Amir. The meeting included demo of the project so far, code review and planning for future steps.

Goals till Midterm evaluation (29^th July - 2^nd August)

• Try to store the IME preferences in extension preference area instead of site specific localstorage.
• Remove Chrome and Firefox specific code from jquery.ime and jquery.uls submodules. We need to overload such specific methods and leave the upstream projects unaltered.
• Implement helpHandler for IME the same way it is implemented on MediaWiki.
• Update submodules from upstream.
• Write a blog post explaining all the progress made so far including screenshots of jquery.ime extension in action on a few sites.

July 29^th

Progress made in the last week

• Implemented extension specific local storage.
  • Until now ime preferences were stored in website specific local storage that means we were saving different preferences for google.com, facebook.com and so on. Now preferences are stored in extension's storage area which means it would be common across all websites.
• Removed Chrome and Firefox specific code from submodules.
  • There was some Chrome specific and some Firefox specific code that was needed in ime's load() method. I overloaded that method to move the Chrome and Firefox specific code out of the submodules and leave them unaltered.
• Implemented helpHandler for IME that adds a help link for the selected input method.

Goals till next meeting

• Write a blog post explaining all the progress made so far including screenshots of jquery.ime extension in action on a few sites.
• Launch beta version of both Chrome and Firefox extensions on the Chrome Web Store and Mozilla Addons repository respectively.

Monthly Report: August 2013

I have aggregated and written a single post for the month of August, since the main focus of the month was testing, bug fixes and getting the extensions published in their respective repositories.

I wrote a blog post explaining my GSoC project and the progress made so far. 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.

September 2^nd

Progress made in the last week:

• Minor bugfixes and testing of extensions on different websites.
• Both Chrome and Firefox extensions were published in their respective webstores.
  • Chrome extension is available here: https://chrome.google.com/webstore/detail/wikimedia-input-tools/fjnfifedbeeeibikgpggddmfbaeccaoh
  • Firefox extension is available here: https://addons.mozilla.org/en-US/firefox/addon/wikimedia-input-tools/

Feedback received from users:

• Introduce an option to globally turn the extension on or off. Sometimes it becomes a little annoying for users to see the ime-menu every time they focus on an input field.
• The extension doesn't work in Facebook chat window when the page has been scrolled by some amount.

Goals till next meeting:

• Implement a basic working version of on-screen keyboard.
• Discuss all the deliverables for the on-screen keyboard feature with Santhosh.

September 9^th

Progress made in the last week:

• Santhosh laid down the basic architecture for on-screen keyboard. I went through the architecture and the codebase to get a basic idea of the functionality. A basic working version is available here: http://thottingal.in/projects/js/jquery.ime/examples/osk.html
• Discussed all the deliverables for the on-screen keyboard feature with Santhosh. TODO list for on-screen keyboard is available here: https://etherpad.wikimedia.org/p/osk

Goals till next meeting:

• Finish all the major tasks from on-screen keyboard TODO list.

September 16^th (Soft pencils down date)

Progress made in the last week:

More or less, all the TODOs from the list: https://etherpad.wikimedia.org/p/osk have been implemented (awaiting review).

• Added an entry point in the IME menu, clicking on it shows OSK, clicking again closes it.
• Pressing escape also closes the OSK.
• When focus is on the input field, clicking on the keys of OSK, triggers keypress events to those fields.
• Focus is never shifted to the OSK, it always remains in the input field
• OSK and physical keyboard can be used alternatively, seamlessly.
• When physical keyboard is used, the keypress in physical keyboard is visualized in OSK.
• OSK is draggable, if jQuery.ui is available.
• The keyboard layout is always in sync with current input method

Goals till Firm pencils down date (September 23^rd)

• Wind up a few remaining tasks related to OSK.
• Although most of the documentation for both the extensions and the OSK has been done in parallel while their development, I need to wind up any remaining documentation work.