Introducing Tab Queue in Firefox for Android

We’ve known for a long time that the average user attention span on mobile is incredibly short; the longer content takes to load, the higher the chance the user will give up. No wonder so much emphasis is placed on load times and the pursuit to get something in front of the user as fast of possible. It ridiculous to think that such great leaps have been made in the world of mobile computing but loading web content on mobile can still be a slow and frustrating experience.

Chris Lacy wrote about a few of the issues surrounding mobile web browsing when he announced Link Bubble in March 2014. Link Bubble loads web pages in the background, providing a minimal user interface to give progress feedback to the user and a way of viewing the content once it’s loaded. It’s a great concept: rather than attempting to fix slow load times; accept that mobile browsing can be slow and work around it. Chris didn’t improve browser performance or provide any page load optimisation but he managed to push mobile web browsing to a new level by removing the point of friction between the user and the inherent issues of the platform.

Inspired by Chris’ work, Anthony Lam and I started thinking about how we could apply a similar thought process to Firefox. In line with our other ongoing work around continuity, we wanted to give users a way of using Firefox which feels more natural and stops them having to work around limitations of the browser. We came up with the idea of a tab queue which will allow users to effortlessly queue up multiple sites of interest and open them at a later time.  

Tab queue notificationThe feature is currently available in our nightly builds for Android. It’s early days and there’s still work to be done before we remove the nightly flags, but we’d love to hear your thoughts, comments and suggestions. For more info check out Anthony’s post about Tab Queue which has more details of the implementation and UX considerations.  You can keep track of the work we’re doing of this front by visiting the Bugzilla page.

Read More

Registers in Vim

Registers in Vim let you run actions or commands on text stored within them. To access a register, you type “a before a command, where a is the name of a register. If you want to copy the current line into register k, you can type


Or you can append to a register by using a capital letter


You can then move through the document and paste it elsewhere using


To access all currently defined registers type


Read More

Bookmarks in Vim

More Vim fun! This time looking at bookmarks.

To create a bookmark, simply type ‘m‘ where is any lowercase character. You can then use a backtick (`) followed by the letter to take you to the bookmarked position, or a single quote (‘) followed by the letter to take you to the start of the bookmarked line.

To create a global bookmark, useful for when you have multiple files open, just change the letter to uppercase (for example: ‘mA’)

To see all of your bookmarks type ‘:marks’ and to see info about a bookmark type ‘:marks ‘.

And – it wouldn’t be vim without a few hidden goodies – you can replace the letter with a full-stop to jump to the last edit.

  • ma – Creates a bookmark called a
  • mA – Creates a global bookmark called A
  • `a – Jump to the exact location (line and column) of the bookmark a
  • ‘a – Jump to the beginning of the line of the bookmark a
  • :marks – Display all the bookmarks
  • :marks a – Display the details of the bookmark with name a
  • `. – Jump to the exact location (line and column) where the last change was performed
  • ‘. – Jump to the beginning of the line where the last change was performed

Read More

Substitution in Vim

I’m getting to grips with Vim now, using it almost on a daily basis for as a JavaScript editor at Mozilla. One thing that I figured out today was how to do optional text substitution on a range of lines.

Text substitution in Vim is pretty easy using the ‘:substitution’ command (shortened to ‘:s’). The command accepts regular expressions, but can easily do ‘normal’ text replacement. It’s formatted like this:


<RANGE> is the range of effect you want the command to have, <BEFORE> is the word you’re searching for, <AFTER> is the word you want it replaced with and <FLAGS> are various flags which affect how the command works.

Let’s first look at flags.

Given the sentence: “I love giant killer robots and giant monsters. Giant Robots are the best.”

A simple substitution looks like this ‘:s/giant/massive/’ and when executed will change the first instance of the word ‘giant’ with the word ‘massive’.

The first flag I want to introduce is ‘g’, which will tells the command to execute across the entire sentence, not just the first match. So ‘:s/giant/massive/g’ will change the sentence above to “I love massive killer robots and massive monsters. Giant Robots are the best.”. Notice how the ‘Giant’ hasn’t been replaced – that’s because as standard we match in a case sensitive manner.

The next flag is the ‘i’, which will change from case sensitive pattern matching, which is the default, to case insensitive. The command ‘:s/giant/massive/gi’ will change the sentence to “I love massive killer robots and massive monsters. massive Robots are the best.”

Adding the ‘c’ flag will prompt you to confirm each substitution.

The range is where it gets interesting, and if I’m correct I think these range specifications will work on lots of Vim commands.

To execute a command on a range of lines you can simply add the line numbers before the command to execute, with a comma between the two. so ‘:10,20s/giant/massive/g’ will execute that command on lines between 10 and 20.

Vim comes with various non-numeric markers which you can use for the range.For example ‘.’ which refers to the current line and ‘$’ which refers to the end of the file. These can be mixed and matched as you see fit, so to specify between line 20 and the end of the file, my range would be ’20,$’. Vim will automatically assume that if you miss out one of the range values, you mean the current line, ‘.’. So a range of ‘., $’, from the current line to the end of the file, is the same as ‘,$’.

You may see the % marker preceding a command, which is a Vim shortcut for ‘1,$’ – beginning to end, or the entire file. ‘:%s/giant/massive/g’ will substitute every instance of ‘giant’ for ‘massive’ across the file you’re looking at.

If you want to specify a number of lines from where you are, you can use the ‘+’ sign – so ‘.+15’ means for the next 15 lines. As above, the ‘.’ is assumed, so this can be shortened to just ‘+15’.

So with that all in mind, to substitute text from the current line for the next 15 lines, asking for confirmation, you’d want to write something like ‘:,+15s/giant/massive/gc’

As ever is a great place to look at for help

Read More

A parcel from StackExchange

I had a slightly unexpected parcel arrive today, I say slightly because I knew about it a while ago but had since forgotten. I thought I’d do a small unboxing set of pictures.

2013-07-23 12.05.30
The parcel itself

2013-07-23 12.05.53
On opening

2013-07-23 12.12.37
Goodies! A couple of stickers, a couple of pens and a tshirt.

2013-07-23 12.13.33
I’m honoured to get a letter from Joel

So – just want to say thank you to the StackExchange people, very nice to have received this gift from your guys. And thank you Joel Spolsky – you made my day (and my girlfriends – she squeed when she saw who the letter was from. really!)

Read More

Learning Vim – Part 3

Wow – it’s been a long time since my last post on my journey into the world of learning Vim. Since then I’ve started a new job at the wonderful Mozilla as a mobile software engineer and they have a really messed up complicated build system, so even though I’m working on an Android project, I haven’t got the pleasure of being able to use any of the IDEs that I’ve grown to love. The majority of people I’m working with use Emacs or Vi(m), so it’s been a pretty good chance for me to get my learn on!

The first thing I want to go over is tabs – if you’re going to use Vim to develop in then learning your way around the tab commands are essential.

First things first – to open several files from the command line in tabs:
vim -p file1 file2 file3

Next are a few commands to open files in tabs and switch tabs:

  • :tabe <filename> → open file in new tab
  • :tabp → switch to previous tab
  • :tabn → switch to next tab

That’s pretty good, but it makes it a bit of a job to navigate quickly, so below is how to setup a mapping so we can quickly access these keys. I’ve setup these up as two key mappings to reduce the chances of anything conflicting with the new setup. Open up the file ~/.vimrc and at the bottom paste these lines:

map <c-m><c-n> :tabp<CR>
map <c-m><c-p> :tabn<CR>

The <c-m> is the access modifier, it means press the ‘Ctrl’ and the ‘m’ key and yes the ‘m’ is for Martyn :). After that, with the ‘Ctrl’ key still held, press either ‘p’ or ‘n’ for previous and next tabs. The <CR> at the end is required to mark the end of that command.

Next up is better navigation:

  • w → go to start of next work
  • e → go to end of current/next word
  • b → go to start of current/previous word
  • b → go to start of current/previous word
  • 0 → go to start of the current line
  • ^ → go to start of the content in the current line
  • $ → go to the end of the current line

Sticking a number before each of these will repeat the command, so 2w will move you to the start of the next word twice, 2b will move you to the beginning of the previous word.

Searching is quite important, and fairly easy:

  • /<SEARCH TERM> → find the search term in the current file
  • n → after you have searched, this will go to the next occurrence

Search and replace is also essential and again pretty easy:

  • :s/SEARCH TERM/REPLACE TERM/ → replace the next occurrence of the SEARCH TERM in the current line with the REPLACE TERM
  • :s/SEARCH TERM/REPLACE TERM/g → replace every occurrence of the SEARCH TERM in the current line with the REPLACE TERM
  • :%s/SEARCH TERM/REPLACE TERM/g → replace every occurrence of the SEARCH TERM with the REPLACE TERM

Read More

Accepting incoming tcp ip connections in (K)ubuntu

I’ve recently spent a bit of time trying to work out why I could accept incoming connections on my Kubuntu laptop. Initially I tried to get Charles to work but couldn’t get it to see any traffic coming from my Android phone – I put it down as a bug in Charles and left it. Today I tried to get Synergy working and again nothing, which prompted me to investigate further. I know Synergy was working on my laptop as a client, but I was trying to make it a server today, and it wasn’t showing anything being able to connect. This sounded very much like I was behind a firewall – but to the best of my knowledge I don’t have a firewall on my laptop. Anyway, turns out the ports were closed and the following command allowed me to open them (24800 for Synergy, Charles works on port 8888):

sudo iptables -I INPUT -p tcp --dport 24800 -j ACCEPT

Read More

Messages from the cloud with GCM

In May 2010 Google released a monumental update to it’s Android OS with the release of Android 2.2 (Froyo). Alongside the quite ridiculous improvement in performance over the previous version AND a host of amazing extra features (JIT compilation, USB tethering, Wi-Fi hotspot, an improved browser to name but a few) was the announcement of the Cloud to Device Messaging (C2DM) service, or to use it’s more commonly known name – push notifications. Push notifications systems have fast become an industry standard in the world of advanced mobile computing, allowing a central server to push data to individual devices, rather than the power hungry alternative of continually polling a server for updates.

Announced at Google I/O 2012 was the next iteration of C2DM, now called Google Cloud Messaging (GCM). Along with the moniker change, there are a few key changes between C2DM abnd GCM which add functionality and make it easier to use. Of note:

  • Multicast messages: you can broadcast messages of up to 1000 registration IDs at the same time from a single request
  • Multiple senders: messages to the same app can be sent by multiple parties thanks to a change in the way registration is handled
  • Time-to-live (TTL) messages: messages can have a TTL value of between 0 to 4 weeks helping to ensure messages about events that expire don’t reach your users after the fact. The GCM servers will throttle the messages to prevent notification spam. Messages that can’t be instantly delivered will be stored by the Google servers until they are delievered or expire, messages with a TTL of 0 aren’t stored anywhere and also aren’t subject to any throttling.
  • Payload: messages can bundle up to 4Kb (up from 1024 bytes with C2DM) of data to be delivered with the message, up to 100 of these messages can be stored on the GCM servers if they can’t instantly be delivered, after which you’ll receive an error code which your server will have to deal with.

Google states that C2DM will be maintained for moment but won’t accept any new users nor grant new quotas. They also point out that ‘C2DM and GCM are not interoperable. For example, you cannot post notifications from GCM to C2DM registration IDs, nor can you use C2DM registration IDs as GCM registration IDs. Your server-side application must keep keep track of whether a registration ID is from C2DM or GCM and use the proper endpoint.’ fortunately they provide easy to follow instructions as to how to migrate your apps from C2DM to GCM and google has even provided sample GCM apps (both client and server side) for you to look at (something which was sorely missing with C2DM)

If you haven’t yet used Google’s cloud messaging service, it’s now easier than ever – full instructions on getting started with GCM are given on the developer website. Just remember that it requires devices running android 2.2 (sdk version 8) or later.

Read More

Android styling tips

One area that has always been a bit lacking for Android developers is the online documentation at It’s getting better with each new release but is still far from perfect – one area which has left many developers lost is styling. There are now plenty of guides on the internet discussing styling and theming but below are the two tips I wish someone had told me when I’d started Android development:

1, ‘?’
The question mark in a style refers to a dynamically defined theme value. In the following example, taken directly from the Android styles.xml file, the value of ‘android:textColor’ refers to the value of the dynamically defined “textColorPrimary” value:

<style name="TextAppearance">
<item name="android:textColor">?textColorPrimary</item>
<item name="android:textColorHighlight">?textColorHighlight</item>
<item name="android:textColorHint">?textColorHint</item>
<item name="android:textColorLink">?textColorLink</item>
<item name="android:textSize">16sp</item>
<item name="android:textStyle">normal</item>

As can be seen from the following excerpt from the android-16 themes.xml file, the exact value of the ‘textColorPrimary’ within ‘TextAppearance’, and hence the default text colour throughout the app, will vary depending on the theme applied on your application or activity in the AndroidManifest.xml file:

<style name="Theme.Light">
<item name="textColorPrimary">@android:color/primary_text_light</item>
<style name="Theme.Holo">
<item name="textColorPrimary">@android:color/primary_text_holo_dark</item>

So if we were to define our own theme and wanted to change the default text colour – we can easily override the above value in order to achieve that throughout all parts of our application which used our custom theme:

<style name="CustomTheme">
<item name="android:textColorPrimary">@color/custom_primary_colour</item>

2, Read the source code
This is a general tip really, but enough emphasis can’t be placed on how much you will learn by reading the Android source code, which can be downloaded via the SDK Manager. To find the style and theme code, find where you installed the Android SDK and have a look at styles.xml and themes.xml in the <android-sdk>/platforms/android-XX/data/res/values/ directory.

Really! You’ll learn more by looking at, studying, and playing about with the Android style and theme source code than any guide can ever teach you! For example, there’s no comprehensive documentation of what styles are available to change, but have a look at the default theme (search for ‘<style name=”Theme”>’ in the theme.xml file) and you’ll find out how to style every single widget in Android and lots more. This is the best form of guide and documentation rolled in to one – it’s always going to accurately reflect the live code and every single bit of style information is in there. Only the experience of using it will help you get a deeper knowledge of how it works. So…what are you waiting for?

Read More