Search Boxes
Working on a Debugger presents new challenges everyday. Some of them are expected and exciting like formatting JS promises. Others surprise you and are in hindsight totally obvious.
Search selections are one of those challenges that in hindsight are totally obvious, but the story is anything but.
Back in August, we started working on a new editor search bar with the help of the great @Helenvholmes. The feature called for a search matches count and search match outlines.
The matches would also have a selected match, which would iterate
as the user typed <enter> or shift <enter>.
The designs called for the selected match to be highlighted in garish yellow!
I worked on a simple first version that showed the match count and selected match in light grey. I didn’t have time to style the match yellow I guess…
I filed an issue in October for outlining matches. @Bomsy grabbed the issue and had a crazy patch in November. I say crazy because it had bonkers regexs and used a streaming CodeMirror tokenizer.
At this point, we thought we were done, but there were two bugs that we had not considered.
The first bug was that while this tokenizer worked nicely for one token searches i.e. this, it
got confused by multiple searches. It did something like this:
Look, I found lots of things!
@Zacquary found that the multiple matches were caused by a CodeMirror opaque property.
Unfortunately, fixing the multiple search outlines meant losing the syntax highlighting for the matches. The reason for that is that CodeMirror applies the syntax highlighting to each token and now that we’re outlining an entire match the tokens no longer got their syntax token classes!
@Bomsy fixed this by making our token highlighter even crazier. We actually borrowed some tips from Chrome’s highlighter.
Here is the working highlighter!
We use software all the time that it we often take the small UI details for granted. I like this feature because it is something that I have enjoyed in almost every editor I’ve used, but never really considered until working on it.
Thank You @Helenvholmes, @Bomsy, @Zacquary.