Retina display support landed in Firefox nightly

Firefox bug 674373 has landed; Firefox nightly builds now natively support the Retina MacBook Pro display!

It also now supports the window.devicePixelRatio interface which my in-progress high-DPI image support for MediaWiki uses to determine which resolution images to load. It looks great on my Retina MacBook Pro! This should land in the final Firefox 18 release in a couple months for those not on the bleeding edge of the upgrade treadmill.

Unfortunately there’s a bug which causes window.devicePixelRatio to report an incorrect value on Android, so hi-dpi support for Firefox mobile is slightly broken pending bugs 794056 and 779527.

Responsive images for high-DPI displays in MediaWiki

I’ve been working on support for natively showing suitable images for high-DPI displays in MediaWiki, starting with basic content images.

On desktops and tablets there’s just a few devices like the Retina MacBook Pro that need this, but in the mobile world there are loads of devices at 1.5x or 2.0x the traditional resolutions.

You can see a live demo of this patch in action on these test articles:

Here are some screenshots from an iPhone 5 simulator showing fragments of the San Francisco Wikipedia article as currently displayed on en.m.wikipedia.org and with my responsive images patch…

These maps are absurdly sharper on the right side:

And this photograph is visibly much sharper on the right, showing detail of the building’s texture and patterns that wasn’t previously visible without clicking through to the detail page:

The current version of the patch uses the ‘srcset’ attribute as defined in the current HTML 5 working group version, only using the density options and not the width/height options. Since browsers don’t yet support this, I also include some JavaScript to check the display density and load the appropriate image from the srcset.

Patch in gerrit:

The current version has been tested with a number of devices and browsers, including:

  • iPhone 3Gs, Safari (low-res 1x)
  • Nexus One, Android browser (medium-res 1.5x)
  • iPod 5th-generation, Safari (high-res 2.0x)
  • Galaxy Nexus, default browser (high-res 2.0x)
  • Galaxy Nexus, Chrome (high-res 2x)
  • Galaxy Nexus, Opera Mobile (high-res 2x)
  • BlackBerry 10 dev alpha, default browser (high-res 2x)

And on a Retina MacBook Pro:

  • Mac OS X, Safari (2x)
  • Mac OS X, Chrome (2x)
  • Windows 8, IE desktop (2x, with desktop zooms set to 200%)
  • Windows 8, IE Metro (2x)

and on an 11″ 1366×768 Windows 8 tablet:

  • Windows 8, IE Metro (1.5x)

Currently unsupported:

  • Opera Mini (we don’t serve any JS)
  • Firefox (can’t yet detect resolution)
  • Windows Phone IE (can’t yet detect resolution)

 

Boot2Gecko testing

Took a quick poke at the desktop builds of Mozilla’s Boot2Gecko (to become Firefox OS)…

Bugs:

Ehh, it’s running straight out of git, so trust nothing yet. ;)

I’ll have to poke at it more when the b2g guys are online and get it worked out so we can do things like play with a version of our Wikipedia app. :)

Nexus 7 quick review

First impressions using the Nexus 7 tablet for a couple days…

image

I used to think the 7″ tablet space was a solution searching for a problem. Prior experience with the Kindle Fire and the Blackberry Playbook — both boxy, awkward slates — hadn’t impressed me. The Nexus 7 is much nicer and feels like it was actually designed to be used by humans… the edges are rounded and beveled so it’s actually comfortable to hold.

Hardware-wise things seem nice enough though I’m surprised by the lack of a rear-facing camera. I’ve actually seen a lot of iPads being used as cameras at museums and such, and the smaller tablet would be much… less unwieldy. Front-facing camera exists for I presume video chat, but you can’t really aim with it at anything else.

The screen seems nice; it packs the pixels in more densely than the older 7″ tablets and — thankfully — uses real square pixels instead of the awful hex pixel layout so many of the Nexus series phones have been cursed with. It’s still not as sharp as the iPad 3, but it’s a noticeable bump. I haven’t investigated in too much detail, but the Nexus 7 appears to be using Android’s existing support for ‘hdpi’ screens with a 1.5 multiplier between virtual and physical pixels, so apps already know how to handle it and should include suitable artwork. Downside: rounding oddities sometimes lead to series of lines like borders jumping between 1 and 2 pixels. Yeah, I’m picky!

Like the Kindle Fire, the Nexus 7 really pushes its master’s online store. Like the Kindle Fire, I have little interest in buying stuff from their store directly though, so it remains to be seen whether that will be a big selling point for other people.

(I tend to buy books through the Kindle store since I can read them on multiple devices from multiple manufacturers — the “least invasive” DRM with cross-platform support wins. My music comes sometimes from iTunes, sometimes from Amazon, and sometimes ripped from CDs — yes they still exist! I don’t tend to buy movies or TV in any format, generally preferring rental options or … shudder… cable.)

Amazon app store works – as usual you have to enable installation of apps from untrusted sources… the kind of switch I seriously wish Apple would just put on iOS so people can stop jumping through hoops jailbreaking. I’ve only got a couple games from there such as Plants vs Zombies, which runs noticeably snappier on the Nexus 7 vs the Kindle Fire.

Typing with thumbs in landscape portrait mode is comfortable, and a bit less surprise-prone for me than the Fire where I often hit the close keyboard button by mistake. :)

Encryption option for storage is pleasing, seems to work reasonably transparently as on the Galaxy Nexus.

Android 4.1 seems overall similar to 4.0 with a fancier notification display. Most visible change is Chrome, which replaced the older default Android Browser app. It feels snappy, looks good, and has all the expected WebKit mobile and CSS goodies.

Some of us want to diversify and run a non-WebKit browser. Opera Mobile installs and appears to run OK though I haven’t used it much.

Surprisingly you cannot install the current release version of Firefox for Android on the Nexus 7. You can install beta or nightlies and they work, but it’s showing the phone interface, none of the tablet goodies like tab thumbnails along the left. Disappointing, but should be remedied in time.

Note that just as in Android 4.0, you can take screenshots by holding down the power and volume-down buttons. This is slightly more awkward to do than on the Galaxy Nexus as the buttons are all on the same side. Blah!

So in short: so far I like it, by far the best 7″ tablet I’ve used. Not 100% sure a 7″ tablet is a necessity, but it’s more portable than the 10″ers, including being easier to type on when lying in bed or on the couch… so it comes down to “do you need a tablet anyway?” It seems a nice web & reader machine and I expect to take it on a lot of flights… might actually replace my iPod Touch if I can get some music loaded on. :)

High-DPI fun with Retina Display and free software

 

How to run Linux on Retina MacBook Pro without dual-booting

Linux tends to be a bit flaky on brand-new models, and dual-booting is tough (impossible?) if you want to use FileVault on your Mac OS X partition. But some of us want to peek into the future, and maybe help Linux-based software prepare for the world of high-resolution displays…

Luckily, you can use standard virtualization tools. Unluckily, for now you’ll have to manually change the Mac’s screen resolution.

  1. Get a tool like SwitchResX that lets you set the desktop to 2880×1800 unscaled. You don’t need to switch resolutions yet; install will be easier at a sane res!
  2. Install Ubuntu or whatever into VirtualBox or other virtualization software
  3. Within Linux, install the ‘gnome-tweak’ (“Advanced settings”) tool
  4. Open up ‘Advanced settings’ and bump ‘Text Scaling’ up to 2.0
  5. Switch to 2880×1800 and go fullscreen!
  6. After leaving, switch resolution back to sane 1440×900 (HiDPI)

This trick works with games like Portal 2 as well. :)

This may also be a good way to run things like Gimp and Inkscape at high-resolution, since X11.app/XQuartz doesn’t yet support HiDPI mode.

Unfortunately, today things are a nasty mix of font-dependent good sizing and pixel-dependent horrible scaling. Boo hoo :( GNOME Shell seems to fare better than Ubuntu’s Unity interface, but it still not perfect. Firefox has UI mostly sized to text, but then you get tiny icons and actual web pages default to tiny scale.

Possibly adjusting screen DPI could help some of these, but not sure…

Mostly mobile monkeying

Mostly poked at mobile today - switched it from an iframe to loading into a div, fixing some of our scroll & click through issues and fixing it for Android 4.

Experimented with iscroll 4 library to handle the scrolling and add zoom, but too slow for now.

A little more poking at EmbedScript experiment; I have a sandbox domain temporarily on a Wikimedia Labs VM. Will show off more on this later.

Wiki script embedding tests: Mandelbrot generator

I’ve been doing some experiments with finding ways to bring more interactive features into Wikipedia and other wikis. Articles can be spruced up nicely in many ways — interactive maps that let you zoom or change time, graphs that allow you to change the parameters, diagrams showing moving parts…

So an extension to sandbox and run custom JavaScript widgets should be a useful direction to go in… my first test is a Mandelbrot set generator:

The extension separates the JavaScript contexts by using an iframe and a small sandbox page hosted on a separate domain, leaving the details of security to the browser’s existing same-origin systems. This gives nearly full power to the script — you could even use 3d WebGL rendering in supported browsers! — without giving it any direct access to users’ sessions on the wiki.

Will try to set up a publicly-usable sandbox page on Wikimedia Labs next week and play with it some more; maybe a gadget to do live-wiki testing with an opt-in. :)