Posted by: digdug2k | May 19, 2012

Porting Cleary to Native Fennec

I’ve had some requests to port Cleary over to Native Fennec (aka the hot new Beta for Android), and thought it would be a good chance to blog about addons in the native Fennec world. Cleary is a pretty simple addon (based on mfinkle’s BootstrapJones tutorials) that gave Fennec some more advanced clear history options, like the ability to only clear certain things:

  1. History (cache,history,downloads,formdata)
  2. Passwords (cookies,passwords,sessions,syncAccount)
  3. Site Preferences (offlineApps,geolocation,siteSettings)

and only clear them for certain time frames (One hour, Two hours, Four hours, a Day, and Forever). Porting it gives a chance to show off some new things we can do. Turned out, porting it was really easy though. In fact, a lot of the code it was using in XUL Fennec isn’t even necessary anymore thanks to some additions to the platform! Quick overview:

Step One: Updating compatibility

This steps pretty easy. We just need to mark Cleary as compatible on our install.rdf

<em:targetApplication>
  <Description>
    <em:id>{aa3c5121-dab2-40e2-81ca-7ea25febc110}</em:id>
    <em:minVersion>14.0b1</em:minVersion>
    <em:maxVersion>15.0</em:maxVersion>
  </Description>
</em:targetApplication>

Updating our UI

Cleary (luckily), is a bootstrapped extension and doesn’t include any overlays. While you could potentially use an overlay in Native Fennec, I’d highly discourage addon authors from doing it.

So to update our UI here basically means altering some scripts so that they only run on XUL Fennec. I decided an easy way to do that here was just to check the app id:

if (Services.appInfo.ID == "{a23983c0-fd0e-11dc-95ff-0800200c9a66}") {
  // setup xul fennec
} else {
  // do nothing!
}

Inside here the XUL Fennec code creates some buttons and rows for the Preferences pane. Overlaying things into prefs isn’t possible in Native yet, so we can basically do nothing! In some cases you might opt to use our NativeWindow interface to add UI elements. Instead, I’m opting to include some inline options for the addon.

settings.xul also happened to already be in Cleary. I just used some trickery to display it in the normal settings list. It also included some things we didn’t want, like a <settings> element, which I’m pretty sure Native Fennec will not like, so I removed that and just created a new options.xul in the root of the addon.

We also need to re hook up our click listeners to the clear buttons in the dialog. This requires a fix for Fennec that hopefully we can push into the beta. In bootstrap.js we need to add a listener for “addon-options-displayed” notifications:

Services.obs.addObserver(observer, "addon-options-displayed", false)

and a little observer to see them trigger:

var observer = {
  observe: function(aSubject, aTopic, aData) {
    if (aTopic == "addon-options-displayed" && aData == "cleary@digdug.org") {
      var doc = aSubject;
      var control = doc.getElementsByClassName("clearButton");
      for (var i = 0; i < control.length; i++) {
        var c = doc.defaultView.gChromeWin.cleary;
        control[i].addEventListener("command", c.doClear.bind(c), false);
      }
    }
  }
};

The old settings.xul was also localized using some JS trickery, which won’t work now. BUT!!! bootstrapped addons now support a chrome.manifest file, so we can add it and save ourselves some work. At the same time, I can remove a bunch of junk I had to register a resource URL and load style sheets. Yay for simplifying! We just add a chrome.manifest file with:

content cleary content/
locale cleary en-US locales/
style chrome://browser/content/browser.xul chrome://cleary/content/dialog.css

Functionality

Most of the functionality we previously had will just work in Native Fennec. Passwords, Form history, Cache, Cookies, Downloads, etc. All of its the same (and the same as desktop).

Except! browsing history is no longer handled in Gecko at all. Its all done in Java. Eventually Fennec should expose an interface for this, ideally that one that mirrors nsIBrowserHistory. I filed bug 731888 awhile ago for a slightly less hacky fix as well, but need to put up a correct patch there (volunteers welcome!).

For now, I had to hack into the database. This is NOT recommended. It will probably break eventually, and it will definitely make kittens cry but you can open the history database using the mozStorage service and tinker around in it. That may crash some phones where Android’s sqlite assuredly won’t match Gecko’s, so be warned! For history I added:

let file = FileUtils.getFile("ProfD", ["browser.db"]);
let dbConn = Services.storage.openDatabase(file);
if (this.range) {
  var statement = dbConn.createStatement("DELETE FROM history WHERE :from_date <= date AND date <= :to_date "
  statement.params.from_date = this.range[0];
  statement.params.to_date = this.range[1];
  statement.executeAsync();
} else {
  dbConn.executeSimpleSQL("DELETE FROM history");
}

And we’re done! There’s a build with this on Dropbox here, but it will not work until bug 756689 is fixed an checked in (and be warned its not on AMO because I’m still testing! Dataloss definitely possible!) There’s some bugs here I need to look into (clicks in the options dialog seem to fire multiple times and there’s some oddity with menulists), and I haven’t tested on XUL Fennec yet. For things that delete your data, there’s always lots and lots and LOTS of testing to do. But for the most part the port was pretty easy.

I’m pumped about Native Fennec. Its a great browser, and having extensions work in it is just icing on the cake. I’m excited to see what some good add-on developers can come up with to do with it in order to fix and enhance the mobile web.

About these ads

Responses

  1. Hi, thanks for the post, but i can’t find the add-on on dropbox, i want really to test it.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: