Search history for Firefox DevTools Console

Recently I began contributing to Firefox DevTools, this all started when one day I was curious about how to access open-source communities and involve myself.

If you're thinking of participating in FOSS (Free/Open Source Software) development, find a project that you're interested in working on look for a 'good first bug' to get you started. Just by completing that first bug you would have gone through the workflow of the project, exposed yourself to parts of the codebase, and collaborated with others on the project.

So after landing a small bug into the release candidate, I decided i'd sink my teeth into something with a little more flesh.

I found myself an enhancement! Adding a search history and autocomplete for the console filter I couldn't even count how many autocomplete components i've had to build in my lifetime so hey, what's one more?

I came up with a list of requirements:

  • User should be able to navigate the list using Arrow keys.
  • Storage of 100 most recent searches, but display only 5 most relevant.
  • Search history should persist beyond browser sessions
  • User can manually remove any items from the history

Some things I learned while working on DevTools

  • Always test design changes in both dark/light modes
  • Mercurial is the devil 😈