Improving Firefox <select> Dropdowns

A few weeks ago marked the beginning of the Fall 2016 Michigan State University Computer Science Capstone Experience. What a mouthful. We’ll just call it Capstone. The capstone program is the last class for a CompSci student, and is in many ways like an internship. Here’s what makes Capstone so groovy:

  • 16 different company sponsors match up with 16 teams of students
  • Students work on a feature or project for the company they match with
  • They have 14 weeks to work
  • Students learn how to work together, to grow as leaders and developers, and to save the world or something like that

The companies range from Amazon to Avata Intelligence, from Ford and GM to Symantec and Whirlpool.

A quick aside — the class is severely and unfortunately lacking gender diversity. This won’t be the subject of this blog as I don’t have enough knowledge or education on the subject to make thoughtful contributions to the conversation, but it might be a point of reflection later on. We’re all still learning.

Mozilla Firefox

Lucky me, our team got matched with Firefox (my first choice). Thrilled about the news to contribute to the open source browser, we got right to work.

In just a few short weeks we’ve done quite a bit. Early on we established weekly conference calls with our two clients Jared Wein and Mike Conley. Both are extremely knowledgeable about the browser and the Mozilla foundation and are really great to talk to.

What else. Oh, I’ve convinced everyone to call me ‘Miguel’, which is a huge win.

Soon I’ll get that ‘Wright’ corrected to ‘Derecho

<select> dropdowns

the mission to make the world as selectable as possible

Quick NOTE: We call these things <select> dropdowns with carrot brackets because that’s how they’re represented in HTML.
HTML <select> element

Our mission is to improve Firefox’s <select> dropdown. If you don’t have Firefox installed, you should go do that, open up the browser, and don’t open up any <select> dropdowns because they look like this:

Okay it’s really not that bad.

But Firefox is a champion of freedom and usability! We can do better!

Firefox wants the dropdown to be highly readable, accessible for (differently-abled) different users, and friendly to use. Maybe something exactly like this:

That’s a mighty good looking dropdown. I wonder what kind of work is going to go into that thing.

Frontend Stuff

After recalling what a quick Google image search for “CSS is awesome” returns, I’m sticking to the backend stuff for now, but I’ll be back around to reckon with my CSS demons.

Backend Stuff — JavaScript, C++, and beyond.

I’m working more on the backend of this <select> dropdown right now. Mozilla is going through its largest code refactor ever: from a single-process to a multi-process architecture. We will be refactoring the <select> dropdown to follow this multi-process path.

a <select> dropdown coming-of-age story

There is a beta-version of this multi-process structure that Firefox has already figured out. Our first task will be to update the single-process architecture to follow the multi-process path.

We’re gonna take a deep technical dive — hold your breath.

This (beautiful) diagram I made shows how a <select> dropdown will be opened in a multi-process manner.

(1)st, a FrameScriptinstalls a <select> dropdown listener into a browser.xml file.

The (2)nd step is fired when a Content Process (read web page or plugin) requests to open a <select> dropdown via amozshowdropdown Event.

The (3)rd step involves the listener select-child.js we talked about in step (1). This listener recognizes the mozshowdropdownevent to finally…

(4) open up the dropdown.

More on this and the Frontend later. But this is the gist of the project scope so far.