Firefox Mobile 16 & 17: continuous improvements

I updated Firefox Mobile Beta on my Samsung Galaxy SII a couple of days ago to version 16 and out of curiosity I participated in the pissing-contest which is html5test.com. It scored a whopping 372 points, which apparently makes it the best mobile browser (for now).
More important, as it is an immediate and noticeable advantage: reader mode. Reader mode,  as seen in the screenshots on the right, allows me see articles on e.g. the chaotic, non-responsive dewereldmorgen.be in a non-crowded context which is optimal for reading the article.
I also installed the latest Firefox Mobile Aurora (version 17) and I’m pretty pleased to see support for iFrame sandboxing (which would up the html5test.com score to 377) and integration with a.o. the upcoming Firefox Marketplace (which will also be core to Firefox OS).
So yeah, for me Firefox Mobile remains the best mobile browser no-one uses.

Content Security Policy; Great! or Wait?

A couple of days ago I had another look at Content Security Policy, a technology that allows a site to tell a browser resources are allowed to be loaded to protect against XSS and some other types of web application vulnerabilities. CSP was originally devised by the Firefoxians, but is in the process of being standardized by the W3C with support in Firefox, Chrome, Safari and even the upcoming Internet Explorer 10.
Great!
The functionality offered by CSP (blocking requests that are not allowed) is pretty close to what WP DoNotTrack tries to do, so I decided I’d try to integrate CSP in my plugin, based on the following assumptions:

  • CSP-mode will only work for WP DoNotTrack if it is configured to use a whitelist
  • As most WordPress+plugins installations are bound to have pages with at least inline JavaScript and/or style, I have to add “unsafe-inline” to allow those to continue to work (which indeed limits the level of protection against XSS-attacks)
  • Given that a lot (most?) WordPress installations implement WP Super Cache of W3 Total Cache, it will -at least in a first stage- only kick in if WP  DoNotTrack is configured to filter unconditionally
  • Ideally the JavaScript-based component of WP DoNotTrack would “see” that CSP was activated and would not perform those nifty JavaScript AOP trickery

The “proof of concept”-quality code I ended up adding to wp-donottrack.php was pretty simple:

function wp_donottrack_csp() {
 global $listmode;
 if ($listmode==="1") {
  $whitelist=wp_donottrack_getWhiteList(true);
  $csp="default-src 'self' 'unsafe-inline'";
  if (is_array($whitelist)) {
   foreach ($whitelist as $white) {
    $csp.=" *.".$white;
   }
  }
  header("X-Content-Security-Policy: " . $csp); //FF & MSIE10
  header("Content-Security-Policy: ". $csp); //new standard
  header("X-WebKit-CSP: " . $csp); //chrome & safari
 }
}
add_action('init', 'wp_donottrack_csp', 10, 0);

Wait?
With this code on my testblog I started playing around in a couple of browsers. Based on that experience I found the following limitations:

So in this particular context (and specifically the absolute need for “unsafe-inline”), I’ve decided to hold off implementing CSP (I might implement iFrame sandboxing as support for that is coming with IE10 and will probably also land in Firefox 17). But if you have full control over a particular website or -application (meaning you can remove all inline JavaScript and CSS and all instances of evals in insourced JavaScript) and you want to harden your installation to stop cross-site scripting, you really should start thinking about implementing CSP (as Twitter seems to have done already)!

My failed Firefox Mobile Private Browsing AddOn experiment

Nope, there’s no Private Browsing in my favourite mobile browser (yet). But as I have Firefox Sync activated between my 3 Firefox instances (winXP@work, Ubuntu-netbook@home and on my SGS2), I very much want to avoid syncing some of my browsing history over to my work-laptop. Developing addons for Firefox has become very easy and the JavaScript API does include access to the Private Browsing features, I quickly wrote this little addon to switch between Private and Non-Private browsing via the context menu using the online addon-builder:

var pb = require("private-browsing");
var myItem = require("context-menu").Item({
label: "Start Private Browsing",
contentScript: 'self.on("click", self.postMessage);',
onMessage: function () {
 if (pb.isActive) {
  pb.deactivate();
  this.label = "Start Private Browsing";
 } else {
  pb.activate();
  this.label = "Exit Private Browsing";
 }
}
});

All seemed great on my desktop Firefox, but it doesn’t work on Firefox Mobile. I could have known, if only I had read the documentation a bit more carefully: the context-menu and private-browsing modules aren’t functional on Firefox Mobile yet. Guess we’ll have to be good boys (and girls) while browsing on synced Firefox Mobile. But instead we can play around with the online Firefox addon-builder, that’s (another kind of) fun as well!

WP YouTube Lyte on Android: native or in-browser playback?

With the latest release of WP YouTube Lyte I fixed a problem where iOS users had to click twice to view a LYTE-embedded video; once to activate the iOS YouTube player and once to start the actual playing. On Android that problem does not exist, as LYTE embeds can be played inline in the browser.
Based on my own tests however, performance and quality aren’t always optimal when compared to the experience the native YouTube app provides. So now I’m wondering; wouldn’t it be better to not only detect iOS, but also Android and have both of them play in their respective a native players, even if on Android this isn’t an absolute requirement?
Advantages:

  1. better video playback performance/ quality
  2. somehow feels more professional (it’s the way the YouTube mobile site seems to work as well for example)

Disadvantages:

  1. you force visitors out of the context of your webpage
  2. a small percentage of Android visitors will get an ugly error message as they do not have a native YouTube player
  3. only works for single video’s, not for playlists (or at least so it seems) and the audio-only trick obviously won’t work either

What do you think? Speak now or be silent forever!
And let me throw in a vid (Spiritualized with “Hey Jane” live) just for the heck of it;

Spiritualized - Hey Jane (live @ Maida Vale for BBC 6 Music)

And if you’re on Android you can click here to trigger the YouTube app to see the exact same thing.

Workaround for Mobile Safari quirk in WP YouTube Lyte

Yesterday I released WP YouTube Lyte 1.1.5, which amongst other things has a workaround for the bug that required 2 clicks to play an Lyte-embedded Youtube on an iOS-device. The reason for the bug: WP YouTube Lyte replaces the “lyte player” with an autoplaying YouTube embed upon the first click, but Mobile Safari does not allow any media to autoplay. 1.1.5 now checks for the useragent (yeah, I know) and immediately adds a normal YouTube embed instead of the Lyte one if that useragent contains the strings iPhone, iPad or iPod.
So there you have it, only one click to hear and see this great “Here we go Magic“-clip  on your iPad.

Here We Go Magic - "How Do I Know"

Neat huh? 😉

Extreme battery drain on Galaxy SII

[Update: Firefox Sync does not drain my battery any more, but I’ve had similar experiences with Exchange Sync and Soundcloud. My latest discovery is Juice Defender, my battery now lasts between 36 and 48 hours!]
From May 29th until yesterday I was experiencing unacceptable high battery drain on my Samsung Galaxy S II with Ice Cream Samsung. Instead of the normal 24-36 hours, my phone only lasted for 5-7 hours. According to the battery stats, “Android OS” was responsible for up to 80% of total power consumption, where one normally would expect the “Screen” to be the biggest consumer. CPUSpy showed that my phone only rarely entered “Deep Sleep”. The problem only disappeared when I disabled “Data” entirely, not when just disabling “Synchronization”.
Based on information in this issue on the Android-bugtracker, I wasn’t the only one to experience this problem. There seemed to be multiple solutions which worked for some but not for others. Apparently “Android OS” was just the poor sucker to get the blame, while in fact other applications can keep your phone awake.
If you ever experience a similar problem, here’s how I finally stopped the battery drain: I uninstalled a number of applications and checked battery usage. If the discharging continued at the same rate, I re-installed the application and went for the next bunch. And just before uninstalling my beloved Firefox Mobile, I deactivated Firefox Sync, which I (only then) noticed was trying to sync continuously. Ouch! I removed Firefox Sync from the Synchronization services and battery life is back to normal since. One of these days I’ll re-enable Firefox Sync to see if the problem returns. If it does, I guess I’ll have to dive into ADB for debugging info and report back to Bugzilla? Good times!

Firefox Mobile Beta: native UI at last!

The wait is finally over, no need to go through the daily Aurora upgrade process any more; Firefox Mobile 14 beta (available in the Google Play store) is out with all the improvements that were in the Aurora builds.
The main differences with the previous (non-Aurora) versions: Firefox on Android doesn’t use XUL (the Mozilla cross platform UI toolkit) any more, but switched to native Android UI elements. This (and other less visible changes) results in faster startup time, lower memory usage and better overall performance. There’s Flash in it as well, but with ‘tap to play’ option so the impact, I’m happy to report, is pretty limited. And the start-page is pretty nifty, with “Top Sites”, “Tabs from last time” and “Tabs on other computers” on one nice screen.
I must admit I was slightly worried at first, as I couldn’t get Sync to work at all (“could not connect to server” and similar error messages), but after uninstalling Aurora, Firefox Mobile Beta can sync just fine. All in all Firefox Mobile is an even greater browser than it was before.

Windows 7 does not (always) like IE9

A couple of days ago a neighbor asked if I could have a look at his slightly misbehaving PC; links in emails did not open correctly. He was on an all Microsoft setup, with Windows Seven, IE9 and Outlook. The error was as harsh as it was vague;

According to “wonderfully wise web” that problem is typically caused by a lack of a default browser in Windows 7, but given the fact that IE9 was the only browser installed, that did not make a lot of sense.
I was pretty confused, checking and re-applying settings while searching the web, but then I found a forum thread in which someone replied that the 64-bits version of IE9 just cannot be set as default browser, ever. Must be that Windows 7 does not really like 64-bits IE9? I did not find an easy way to switch to 32-bits IE9 and as the neighbor did not object, so I installed the most recent stable version of Firefox on his PC and set that as default browser and all was well. IE9 might not be a bad browser, but sometimes even Windows 7 wants you to install an alternative and who are we to disagree?

Going against the reflow

You can do great things in JavaScript; accessing the DOM and adding, changing or removing nodes as you please. It is exactly that technology that WP YouTube Lyte is based upon; the PHP-part writes out an almost empty div’s with className “lyte” and with as id the YouTube ID, which the JS-part finds after the main document has loaded to render the “LYTE player”. Great for performance, so I was pretty surprised when DerTux, one of WP YouTube Lyte users wrote;

BTW, Google Page Speed dislikes Lyte:
“The following JavaScript call stack (executed 4 times) caused reflows that took 52 milliseconds: @wp-content/plugins/wp-youtube-lyte/lyte/lyte-min.:1:0

Although 52ms for a page with 3 “LYTE players” is minimal when compared to loading the same page with the full embedded YouTube player, the above statement bugged me enough to search the web for information about reflows and how to prevent them. Some of the more interesting articles:

And this video by Paul Irish does a great job explaining reflows:

HTML5, CSS3, and DOM Performance

Based on these pointers I started reworking lyte.js while testing on Google’s Page Speed Online (as far as I can tell the only tool that can detect reflows and then only as an experimental feature) to minimize reflows. I ended up:

  • adding the pL div, which contains the LYTE player UI (play-button, controls & YouTube thumbnail), only after all styles have been applied
  • adding the tC div, which contains the title, only after the tT div (with the title as received in the YouTUbe jsonp-call) has been added to it
  • replaced el.clientWidth (and el.clientHeight) with el.style.width.match(/\d+/g)[0]
  • some widths and heights did not have a unit specified in the dynamically generated CSS and this sloppy coding apparently also (indirectly) caused reflow

WP YouTube Lyte 1.1.1 will get pushed out in a couple of days (Thursday, probably) and will ship with these performance optimizations (and a fix for a regression which causes some styles not to be applied any more).

Mobile browsers: Opera Mobile 12 shines in html5test

Look at Opera Mobile 12 stealing Chrome Mobile’s & Firefox Mobile’s thunder:

And while there’s more to browsers then just HTML5-support, Opera Mobile 12 also seems to offer greater support for modern web technology features than IE9.

To be honest, Opera Mobile 12 doesn’t shine in the JavaScript performance benchmarks (2843,6ms for Sunspider, 463 on the Google V8 test, both of  which at least Firefox Mobile does a better job at), but with the upcoming Firefox Mobile 12 and the (Android 4-only) Chrome Mobile beta the mobile browser “wars” have certainly shifted into a -much- higher gear. Let’s hope Microsoft (and Apple, but Safari Mobile isn’t too far behind yet) follows suit.