Add Opacity & Variable Height to Minimap

[IMBurbank]

trafficstars

I'm looking for a way to change my VSCode Editor Minimap to behave more like the Atom Minimap.

Specifically, to have container opacity and variable height as the file grows in length. The opacity is what is most important to me, but the variable container length would help a lot as well.

Currently, my Atom minimap allows opacity and only grows in length as needed.

While my VSCode minimap covers my code and maintains full pane height no matter how many lines are in the file.

I tried asking a question about this on stackoverflow and looking through these issues. So far the closest I've found to this question is issue #21255, which points to issue #21229 and then to issue #21359, which lead to the implementation of a box shadow to make the minimap separation more prominent.

Unfortunately, the box shadow doesn't allow me to recover that text editor width while keeping my minimap enabled. This makes the difference between being able to see all my code using 2 panes and having my code cut off by the minimap.

I'm sure a lot of people transitioning from Atom to VSCode would appreciate being able to maintain this editor workspace, particularly when working with a lot of smaller files.

EDIT:

Adding what information I can in case you consider feature implementation:

Atom uses a gear icon that appears over the minimap on mouseover allows for 'absolute-mode' to be toggled on and off. This option toggles between a VSCode-like minimap and the one I showed above.

From what I understand of the VSCode design paradigm so far, I think a similar feature could be toggled as a User Setting such as "editor.minimap.absolutePosition": true,

[IMBurbank]

I know this is a big project and don't want to bug you guys - I'm not sure how long is standard for a response and don't want to jump the gun - but as it's been a week I have to ask: is there anything I can do to aid in a decision or implementation? Or help this along generally?

Unfortunately, I have no experience contributing to open-source projects. But I am an engineer, and I've been teaching myself to code for the last year. I'm just starting to approach a low level of usefulness in my coding endeavors.

[ghost]

Variable height might be related to https://github.com/Microsoft/vscode/issues/21773.

I find Atom's minimap actually useful as it clearly outlines the structure of a file, whereas in vscode the minimap needs me to strain my eyes to view the same content.

While everything else is scalable, you can't modify the size of the minimap at all. That means people who suffer from poor eyesight or those who have hdpi screens just have to accept poor accessibility.

[naclonts]

I've started doing a bit of work on this issue. When the minimap's background is transparent, I think the variable height could take care of itself, as in this screenshot:

The minimap height in this short file seems short, because only the editor is visible where the minimap has no code. (In this example, I've also set the scrollbar.shadow option in settings.json to transparent.)

So far, I'm looking at adding settings.json options for minimap.backgroundAlpha and minimap.textAlpha, so that the text/block's transparency can be controlled as well the background's. Definitely open to ideas on what would be most useful in controlling the settings!

Edit: Just opened PR #61021 for this feature.

[ghost]

Hi @kokopelli314 ! I semi-recently PR'd this feature as well (with a more limited customization, as I was following the previous changes that were committed for tooltip opacity) in #58324, and the discussion has died off there with the UI clash being dismissed outright. This is a feature that I'd really like to see, whether it's my personal contribution or not, and I'm commenting here mostly in the hopes that it helps this feature to not get overlooked :)

I added some additional comments in that original PR, but I'll reiterate here that this is a feature available in other editors already, specifically with Atom's minimap opacity options and Sublime Text's ability to override the class names and their opacity values.

[naclonts]

@gloss-water Thanks for sharing! The option enabled in your PR looks good to me as well.

I agree this would be highly useful, and other editors I've used (especially Atom) already have this as a setting.

[RJSonnenberg]

@alexandrudima When is this going to be merged? Looks like the PR is just waiting. This would be an awesome feature that I would use right away!

[tommyalatalo]

Also waiting for this one, please merge if PR is done :)

[dmmello1989]

Any news on this? The minimap blocking my lines is really bugging me, I'd love some opacity settings to be available :)

[opensas]

Hate to be one of those 'me too' guys, but I'm also waiting for this to be merged. Minimap is prety useful WHEN yo need it, but with the current implementation it always ends up eating precious screen space, setting the opacity level would be great, on mouse over it could come back without opacity...

[ghost]

@opensas at this point the feature has been PR'd multiple times over the last couple years, with varying methods of implementing it. the PRs got ignored each time, the only real response i've seen so far isn't particularly promising or helpful for moving forward either

[IMBurbank]

This feature is just as important today as it was 2.5 years ago.

It's quite disappointing that this feature request has never been directly addressed, even in response to PRs, particularly since it's an opt-in feature - minimap opacity would only change if set to less than 100%.

If there's a reason this feature request won't be accepted, I think a lot of people would appreciate knowing that so they can act accordingly. If this feature would be accepted in some form, I would be more than happy to submit a new PR for it.

[jgburet]

up 💃

[LucasBonafe]

Any solution?

[jdr-face]

Yes. See: https://github.com/Microsoft/vscode/pull/61021#issuecomment-582520247 and https://github.com/microsoft/vscode/pull/58324 .

[robinmacharg]

To save a click-through for anyone landing here, CMD-SHIFT-P -> Open Settings (JSON), and paste the following into the top level of the JSON:

"workbench.colorCustomizations": {
    "minimap.background": "#ffffff33"
}

This fixes the opacity (I use #000000 instead of white). I can live without the variable height.

[jaquinocode]

Try "#1e1e1e33" which is the exact color of vscode's default theme background (at least on my mac) which makes it look a lot nicer.

For those who don't know, this is a hexadecimal format for red, green, blue, and opacity. Last two digits controls the opacity.

[hlizard]

"#4b384d5e" with SynthWave '84 and GlassIt-VSC

[dailytabs]

Really don't like clicking in from another window and being taken to the bottom of the file unexpectedly, because the minimap extends invisibly to the bottom of the editor. This is not expected nor intuitive.