A Firefox-only minimap (2021)

VS Code's also shows:

- (Linter) Warnings (in most themes a yellow or orange), like compile errors

- Marks for recently edited sections of code (in most themes a blue). Those marks are also shown in the left hand gutter beside lines but I think they are sometimes too subtle there, but their mini-map counterparts are less subtle.

- Current global search results (a bright gray or sometimes yellow, depending on theme)

- Current file search results (a slightly different gray)

- Current "active token" search results (another gray), such as when you put the cursor mid-word and VS Code naturally highlights all the other uses of that word

- Indicators for all of the lines containing your cursors when using multi-cursor (Alt+click to add additional cursors), which can be very useful to watch in large files with a bunch of shared refactors spread out over some distance

That's just off the top of my head because I use all of those to navigate some source documents.

I think one of the "shape of the code" things not everyone appreciates as well is that some languages create more interesting shapes than others. There are some languages where every file creates a very similar looking waterfall and there are others where the landmarks are much more obvious. Ironically it is sometimes the worst languages that have the most visually distinguishable shapes and where I find I appreciate the minimap most of all. You can visually see sections that began as copied and pasted duplicates, you can see the places where lines are highly repetitive and often those correspond to key patterns of very explicit landmarks ("there's the save code, you can tell because all the field string names are on the left side of assignments; there's the load code, you can tell because all the field string names are on the right side of assignments"). You can't make out the individual words, but you can certainly see those "blocks" like that from that "ten thousand foot view".

There's probably a visual processing/pattern matching thing about minimaps in general that some people have an easier time with than others. I've always liked a good map, regardless of context, so minimaps have always seemed useful to me. Map reading is a large combination of subtle skills, and I have just enough childhood training and natural aptitude that I have a great baseline for just about any map. I appreciate not everyone has those same skills, especially not in the weird arrangement that I do.

And since it is positioned and looks like the Sublime Text minimap, I instinctively tried to click on it to scroll to part of the page, and was saddened that this does not work. That would be the most logical extension, that feature is really cool in general.

In case anyone else had trouble finding it, the minimap is only displayed if the viewport width was ≥1120px when the page was initially loaded.

I agree it feels like something that could be abused, but not with the example you've given. It already only takes a tiny bit of CSS or JS to do those things you mentioned; no need to do anything complex with element canvases. So the reason that most websites don't do those things cannot be that they don't have the ability. It is because they do not, in fact, have the inclination, and that's because there is an economic punishment for having a shitty website: people will start using your competitors instead. (Caveat: this doesn't work out in areas that aren't free markets, like company intranet portals, badly run local council sites etc, which is why those kinds of sites tend to have more user-hostile stuff.) In general it is a mistake to think that we need to purposefully hamstring website operators to make the standard of websites higher: the opposite is true.

It's useful when you search, since you can see where all the matches are distributed in the document at a glance.