Compared to this, writing an extensions looked like a piece of cake (looking back, this was a rather naïve evaluation, but that’s another story…).

Fast forward a few years: ImageTweak has gotten pretty mature, so the question pops up again. Wouldn’t it be better to tackle the source of all problems (pun intended) and bring at least a subset of ImageTweak to all Firefox users? And so, on a fine spring day, while working on my MSc thesis, I finally found the courage to make a real attempt at producing a patch that would at least bring feature parity with ImageTweak 0.9, i.e. centering stand-alone images on a dark background.

After a few rounds of patches, I finally managed to produce a working patch that had a single, HUGE, issue. It produced an awful lot of failed tests in the regression tests. If you add to this that, by the time the working patch was ready, I was on the eve of my dissertation (that would be followed by a fair amount of AFK holidays and by a close-to-immediate hiring for a consultancy firm) the amount of time I could devote to Mozilla-related tasks dropped rather quickly to nil.

Luckily, my (clumsy) attempt at a patch had the effect of setting the proverbial ball rolling: somebody (Jared Wein) over at BMO picked up where I left off and fixed all regression tests. And, just like that, a couple of weeks ago, I received a notification about the fact that my patch had been pushed to mozilla-central and that it will be part of Firefox 11. Proudness ensued.

Obviously, as with any other user-facing change, this is prone to (hopefully constructive) discussion. And that’s good, I guess, because those are yet more proverbially rolling balls.

update: Unlike Daniel Glazman, Jared Wein seems to like it: Blinded by the light! – An improved image viewing experience in Firefox

It’s a bit of an hack because it does its thing by asking Firefox to rotate all pages by a fraction of degree. This rotation is not really visible but it’s enough to make Firefox stop using the hinting of the font, therefore yielding antialiased text with no hinting (i.e. geometricPrecision).

It’s worth noting that this method can be used also in normal webpages, because all it takes is adding -moz-transform:rotate(0.000575deg); where you would normally apply text-rendering:geometricPrecision;

If you’re on Firefox 4 on windows, you can see the effect of this method (and of FancyText) in this example. In each pair of lines, the top one is the normal Firefox rendering whereas the bottom one is as it appears with FancyText.

The quick brown fox jumps over the lazy dog 0123456789

The quick brown fox jumps over the lazy dog 0123456789

The quick brown fox jumps over the lazy dog 0123456789

The quick brown fox jumps over the lazy dog 0123456789

The quick brown fox jumps over the lazy dog 0123456789

The quick brown fox jumps over the lazy dog 0123456789

Bear in mind that this likely increase the CPU and GPU loads and that I tested it only on computers running Windows 7 with hardware acceleration enabled.

FancyText is available on AMO.

In the repository linked above you will always find the latest source of ImageTweak (modulo local changes not yet pushed to GitHub) with the added bonus that, by leveraging the GitHub infrastructure, you can fork ImageTweak with a single click, make changes to the source and send me pull requests to have them included in the official tree.

It actually works correctly but this change had the side effect of changing the normal mouse pointer used by ImageTweak to indicate that you’re moving an image around the window. I noticed this before releasing the update, but it seemed like a minor annoyance worth the additional functionality. I actually tried to fix it but found no way, and since there were a lot of people writing negative reviews on AMO for the lack of drag&drop support I decided to release it without fixing it.

Fast forward some weeks, and it turns out that actually the new behaviour is quite confusing and many are complaining about the mouse pointer showing the “forbidden” shape while moving the image. Fewer than they were complaining before about the lack of drag&drop, but still…

So I set out to find a solution for this problem but apparently there’s no way to freely control the mouse pointer shape during a drap&drop operation. The only thing that comes closer is setting the mozCursor property of the DOMDataTransfer interface to “default”, but that works only on win32 and simply switch the cursor from “forbidden” to the default arrow.

I’m therefore pretty much stuck in a fix: I have to fix this problem but I have no idea of how. If you know how to do this, or know somebody that might help me in fixing this, please let me know.

To learn what’s new in 0.19, read this post. To download the latest version please head over to AMO.

While waiting for the review process for the 0.19 update to end (apparently the queue is a few weeks long – damn you Mozilla) I got bored and decided to create the ImageTweak page on Facebook.

Go spread the word!

As a result I had to tweak my browser of choice to be able to work nicely on such a small screen. Fortunately enough, Firefox allows you to tailor almost exactly as you want, and to reclaim much of the needed vertical screen space.

So, let’s get started.

I don’t use bookmarks anyway

I never really used bookmarks, and especially since Firefox gained the awesomebar I never felt the need anymore. So the first step is quite simply get rid of the bookmarks toolbar.

To do this go in the View menu, open the Toolbars sub-menu and deselect Bookmarks toolbar.

There you go, you already gained 25px vertically.

Shrink that bar!

Next up is another easy tweak. By default the navigation toolbar (the one with the back and forward button, etc.) is set to use big icons. By using smaller icons, you can gain some more space.

To do this, open again the View menu and Toolbars sub-menu and click on Customize. At the bottom of the window that will appear you’ll find a check box named Use small icons. Select it.

No tabs? No tab bar!

By default Firefox always shows the tab bar (there’s a good reason to this: if it wasn’t like this new users would never learn what tabs are and they would keep opening new pages in different windows) but a tab bar with just one tab is a terrible waste of space… we can do better: let’s make the tab bar appear only if we have more than one tab in the current window!

Go to the Tools menu and select Options. In the Tabs tab deselect Always show the tab bar.

Let’s get radical: no more status bar

At the bottom of the browser window there has always been the so-called status bar. It’s purpose is to inform you of what the browser is doing (loading the page) or why isn’t doing what you asked to (typically because there are errors on the page).

Now, in general it is good to know what the browser is doing, so you’d probably want to keep the status bar. Luckily for us it exists Fission, a Firefox add-on that moves much of the status bar functionality to the address bar: we can therefore install it and eradicate the status bar.

To install the Fission add-on, follow the link above. To remove the status bar open (again!) the View menu and deselect Status bar.

The final blow: menus

Ok, so we don’t have much stuff left, do we? But we can do better, we can also hide the menu bar!

Again, you’re probably wondering “how am I supposed to do without the menus?”. Fear not: first because I said we’re just hiding and not removing it! In fact, when hidden, it is enough to press the ALT key to show all the menus, and all the keyboard accellerators (like ALT+F to open the File menu, or CTRL+P to print the page) will work just fine. And if you still are all for having some kind of visual clue you can install the Personal Menu add-on that will provide you with menu-buttons that you can place in the navigation bar.

Again, to hide the menu bar go to the View menu, Toolbars sub-menu and deselect Menus toolbar.

One last tip: Luna is ugly

Luna is the default Windows XP theme (the one with the green Start menu and blue applications bar) if you’re wondering. And beside the fact that it makes your computer look like a kid’s toy it has two side effects: it uses more memory (not much, but more than nothing) and it uses more screen space. In my humble opinion, those are three things that don’t help when you’re on a netbook and therefore I strongly encourage you to use the Classic Windows theme.

Just go in the Control panel > Display and from the Themes tab change the theme from Windows XP to Windows Classic and click OK.

The gains

So, you want to know how much you can gain in terms of screen space, right? All right, I attached here on the right two screenshots of the same webpage before and after my tweaks, and those below are the measurements of the height of the visible document area (the percentage refers to the whole screen, that in my case is 600px high)

Default Firefox, one tab: 408px (68.0%)
Default Firefox, multiple tabs: 408px (68.0%)
Tweaked Firefox, one tab: 519px (86.5%)
Tweaked Firefox, multiple tabs: 490px (81.7%)

What those number means is that by default, on a 600 pixel high monitor, about one third of the vertical space of the screen isn’t used to show the pages. With the tweaks described above, you can reduce that figure to less than one seventh while still having a fully usable browser.

Just to give an example what this means is that, as you can see in the screenshots above, in the tweaked version you can see four results instead of three in a Google search.

So where’s the catch?

Actually nowhere. And to prove it, just have a look at what the Firefox developer are working on for the next Firefox versions. Can you spot the little similarities?

I had to scrape all the work I already did for 0.19 because I hit a few roadblocks, and so I had to start over with a minor but longstanding bug: proper drag&drop support. What it means is that you won’t have to hold CTRL anymore when performing drag&drop. The price is that I had to drop support for firefox 2.x and 3.0.x.

I just added it on AMO. As soon as it gets reviewed it will be available for download.

p.s. I also enabled donations on AMO, so if you feel like it please support the development of ImageTweak.

As far as I know, one of the early proposals was about allowing web applications almost complete control over sockets, including the ability to create raw sockets and to listen for incoming connections exactly like a typical network daemon/server, but this proposal was later scraped because of security implications.

Fast forward to today and the Web Sockets API, even if still under development, are starting to get a stable shape and they will probably be implemented soon by the most forward-looking browser vendors.

The problem is, though, that the original proposal got crampled along the way and therefore there won’t be any means to create peer-to-peer connections between users, something that could enable all kinds of cool distributed systems.

That is, unless someone does something: what I’m thinking about right now is a kind of wrapper/extension around the Web Sockets API that does simply a few things:

1. allows a web application to register for incoming connections
2. opens up the required ports on the firewall/NAT
3. when a connection arrives, perform the handshaking required by the ws:// protocol and forwards a WebSocket object representing the connection to the application

Talking IDL, that would mean (the WebSocket interface is the current WHATWG proposal, while WebSocketListener is my addition):

[Constructor(in DOMString url, optional in DOMString protocol)]
interface WebSocket {
  readonly attribute DOMString URL;

  // ready state
  const unsigned short CONNECTING = 0;
  const unsigned short OPEN = 1;
  const unsigned short CLOSED = 2;
  readonly attribute unsigned short readyState;
  readonly attribute unsigned long bufferedAmount;

  // networking
           attribute Function onopen;
           attribute Function onmessage;
           attribute Function onclose;
  boolean send(in DOMString data);
  void close();
};

[Constructor(optional in short port, optional in DOMString protocol)]
interface WebSocketListener {
  readonly attribute short port;

  // ready state
  const unsigned short OPENING = 0;
  const unsigned short LISTENING = 1;
  const unsigned short CLOSED = 2;
  readonly attribute unsigned short readyState;

  // networking
           attribute Function onconnection;
  void close();
};

Talking about the Mozilla platform, points 1 and 3 are straightforward (once the Web Sockets API has been implemented), whereas point 2 will be platform-dependent and, therefore, trickier. Nevertheless, I think that all of this can be handled (with some work) by a Firefox extension.

Once Firefox will gain Web Sockets support I’ll definitely try to see if it is possible to add it.