Developer Tools GCLI command for emulating CSS media types

Note: for technical reasons, this is currently a (temporary) static copy of my blog. Comments are disabled, and existing comments are not
visible. Normal service will be resumed as soon as possible.

Published 20 July 2013

I searched Bugzilla last weekend. Nothing new there. I can't remember what this particular search entailed, but there amongst the results was bug 819930, a Developer Tools bug about emulating CSS media types. It wasn't the bug I was looking for, though I did read it. I could see it would be a "nice to have" for web developers, but it simply wasn't an itch I needed to scratch. (My own CSS tweaking efforts tend to be reminiscent of this gif.)

I spent a lazy Saturday evening reading. (Currently: A Distant Mirror by Barbara Tuchman, after listening to an awesome episode of Hardcore History on the Black Death.) At one point, I found myself distracted, pondering "print preview", which must render pages with @media print rules applied. Later still, another uninvited thought arrived about the View->Page Style->No Style menu item in Firefox. My fate was sealed.

So, Sunday morning found me reading code, in an effort to put this foolish notion of fixing the bug out of my mind. Hours later, almost casually, I typed hg qnew 819930_1.patch, and a patch was born. It landed on Thursday, making this feature available in current Nightly builds. All being well, it should ship in Firefox 25.

There haven't been any firm decisions regarding final UI. For now, it is exposed as a command in the Developer Tools command line. (Web Developers, if you are not familiar with the command line, press Shift+F2 now, and type help - it's filled with useful commands!) Type media emulate <type> to emulate a particular medium:

type media emulate in the command line

and the document will be repainted:

BBC News: print style

media reset will restore the normal rendering.

I hope web developers find this useful. As for Mozilla contributors (and prospective contributors!): don't be so quick to dismiss bugs with a thought like "I wouldn't know where to start implementing that". Are you sure? You might be surprised.