Vscode: Enhanced Scrollbar (add minimap)

@jschraub Can you please point out specific features you like or that help you move around more efficiently from the Enhanced Scrollbar of VS 2013/2015 ?

Absolutely, @alexandrudima. The ability to at a glance, get a visual representation of your document/code. Having a "10,000 foot view" makes it easy to glance at your document and immediately click into the piece of code for which you are looking. While the Enhanced Scroll bar from VS 2013/2015 offer more features than that, I don't use many of them.

Many other code editors have similar features, including Sublime and Atom and they all have different sub-features, but I think having an offering for a "10,000 foot view" of your document at a quick glance, gives great advantage over Text Editors that do not have a corresponding feature.

Please let me know if that is what you were looking for, or it you need better/different details.

Great description! Thank you!

Hi @alexandrudima , is anyone from VSCode working on this for the next release? Is this something that the community can contribute to the scrollbar?

I'm guessing it will be some sort of reading the editor model and drawing a minimap representation of it in a canvas. wdyt?

@nojvek We will draft and release the September plan at the end of next week. Given this issue is climbing to the top of this query we use to track community requests (https://github.com/Microsoft/vscode/issues?q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc), it has a high change to make it on the September plan.

Please stay tuned :)

Beta bits plz! It's my favorite feature of and the only thing keeping me tethered to Sublime Text.

Soon™

👍 the minimap feature is dearly missed

I miss it heavily too.

+Infinity

@+1 Minimap is one of the must-have feature for me, it works great on atom with many addons.

see kate's minimap which i see as a good example on this matter: https://docs.kde.org/trunk5/en/applications/katepart/kate-part-scrollbar-minimap.html

+1 for the Minimap. A 'hold middle-mouse button' (scrollbar button) to scroll would be great too

If we have git status, errors, other occurrence of current word, find results, peek preview window indication, basically all Sublime's minimap has + all VSCode's current scrollbar has, it'll be huge!

I don't see why VS Code can't if VS can.

this would be a huge win and one of the last missing features for the sublime holdovers

I recently discovered the use, can't wait till it's implemented

+1 can't wait for this to be implemented in VSCode...

+1 Please add soon.

+1 Please add MiniMap

I can't believe this was not a feature from first release?!

Please add MiniMap for VSCode

+1 Please add MiniMap

+1 to that

I'm so sad this didn't make it in 1.6.0 :( please add this ASAP

Doesn't appear to have made the October plan, either. Fingers crossed for November, I guess. Looks like it's now sitting at the top of the requests list, so that's pretty exciting.

+1

+10

+1

+1

Please no more +1 comment. Upvote the original issue instead.
People subscribed to this thread want to be notified when progress has been made, not when you +1.

You guys can lock the conversation to collaborators.

Thanks & Regards,
Deepu

On Thu, Oct 13, 2016 at 9:13 PM, Pine [email protected] wrote:

Please no more +1 comment. Upvote the original issue instead.
People subscribed to this thread want to be notified when progress has
been made, not when you +1.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/Microsoft/vscode/issues/4865#issuecomment-253552567,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABDlF49KaIi-Lgu1cKv8Zhn1Tjoa-Hruks5qzlGkgaJpZM4H93xs
.

+1

Even when I really don't miss the minimap on @code, if I need to choose I can say I really like the minimap approach on Atom (plus, the code is OS). Is not a zoom-out version of the code, but a schematic representation. That is clever, because what you want is to quick identify sections of the code and not the code itself, and you can visually improve the key elements that make that possible, like color, line lenght, white space...

Pretty much just waiting on this before I make the switch.

And could also make it show the git diff and highlight the current position？

A quick update on this:

Currently the rendering of a line of source code works by:

1. Render lots of spans and each one gets as class name the generated TM scopes:

<span class="token block ts meta arrow expr var leading whitespace" style="width:38.53125px">→&nbsp;&nbsp;&nbsp;</span>
<span class="token block ts meta other constant arrow expr var">TO_USER_SETTINGS_MAP</span>
<span class="token block ts meta arrow brace square expr array literal var">[</span>
<span class="token block ts meta variable other arrow object expr array literal var">KeyCode</span>
<span class="token block ts punctuation meta arrow accessor expr array literal var">.</span>
<span class="token block ts meta variable other arrow property expr array literal var">DownArrow</span>
<span class="token block ts meta arrow brace square expr array literal var">]</span>
<span class="token block ts meta arrow expr var">&nbsp;</span>
<span class="token block ts meta keyword operator arrow assignment expr var">=</span>
<span class="token block ts meta arrow expr var">&nbsp;</span>
<span class="token block ts punctuation definition string quoted single begin meta arrow expr var">'</span>
<span class="token block ts string quoted single meta arrow expr var">Down</span>
<span class="token block ts punctuation definition string quoted single end meta arrow expr var">'</span>
<span class="token block ts punctuation terminator statement meta arrow expr var">;</span>

2. Generate a lot of css rules from the TM themes

.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.comment { color: rgba(117, 113, 94, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.string { color: rgba(230, 219, 116, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.constant.numeric { color: rgba(174, 129, 255, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.constant.language { color: rgba(174, 129, 255, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.constant.character { color: rgba(174, 129, 255, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.constant.other { color: rgba(174, 129, 255, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.variable {  }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.keyword { color: rgba(249, 38, 114, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.storage { color: rgba(249, 38, 114, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.storage.type { font-style: italic; color: rgba(102, 217, 239, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.entity.name.type.class { text-decoration: underline; color: rgba(166, 226, 46, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.entity.other.inherited-class { font-style: italic; text-decoration: underline; color: rgba(166, 226, 46, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.entity.name.function { color: rgba(166, 226, 46, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.variable.parameter { font-style: italic; color: rgba(253, 151, 31, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.entity.name.tag { color: rgba(249, 38, 114, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.entity.other.attribute-name { color: rgba(166, 226, 46, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.support.function { color: rgba(102, 217, 239, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.support.constant { color: rgba(102, 217, 239, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.support.type { font-style: italic; color: rgba(102, 217, 239, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.support.class { font-style: italic; color: rgba(102, 217, 239, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.support.other.variable {  }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.invalid { color: rgba(248, 248, 240, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.invalid.deprecated { color: rgba(248, 248, 240, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.meta.structure.dictionary.json.string.quoted.double.json { color: rgba(207, 207, 194, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.meta.diff { color: rgba(117, 113, 94, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.meta.diff.header { color: rgba(117, 113, 94, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.markup.deleted { color: rgba(249, 38, 114, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.markup.inserted { color: rgba(166, 226, 46, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.markup.changed { color: rgba(230, 219, 116, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.constant.numeric.line-number.find-in-files.-.match { color: rgba(174, 129, 255, 0.63); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.entity.name.filename.find-in-files { color: rgba(230, 219, 116, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.markup.quote { color: rgba(249, 38, 114, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.markup.list { color: rgba(230, 219, 116, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.markup.bold { color: rgba(102, 217, 239, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.markup.italic { color: rgba(102, 217, 239, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.markup.inline.raw { color: rgba(253, 151, 31, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.markup.heading { color: rgba(166, 226, 46, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.markup.heading.setext { color: rgba(166, 226, 46, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .monaco-editor-background { background-color: rgba(39, 40, 34, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .glyph-margin { background-color: rgba(39, 40, 34, 1); }
.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .monaco-workbench .monaco-editor-background { background-color: rgba(39, 40, 34, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token { color: rgba(248, 248, 242, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .cursor { background-color: rgba(248, 248, 240, 1); border-color: rgba(248, 248, 240, 1); color: rgba(7, 7, 15, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.whitespace { color: rgba(59, 58, 50, 1) !important; }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .lines-content .cigr { background: rgba(72, 71, 62, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .current-line { background-color: rgba(62, 61, 50, 1); border: none; }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .focused .selected-text { background-color: rgba(73, 72, 62, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .selected-text { background-color: rgba(73, 72, 62, 0.5); }

3. Let the browser do its magic :)

Discussion

This is highly inefficient:

• we need to store all these scopes per token (high memory usage -- such that scrolling up/down will be a memory lookup operation instead of a call to tokenize with TM)
• we need to paint all these scopes (just look at the huge size of the HTML to render one line)
• we put pressure on the browser to match all this CSS

This was implemented at a time where we did not use TM and it was the best way to have a world where some tokenizers were still manually written, meanwhile others were done with TM. Now that we have finished moving json, css, less, scss, html, razor and handlebars to extensions we can begin optimizing again :).

I want to change it to a model where:

• we immediately (close to where tokenization happens) resolve styles per token
• store only those styles (this means changing the theme will drop all the cached tokens)
• render using only those styles (e.g. there is no need to render the block class name if no rule in the theme will select it), we can either inline them (i.e. style="...") or generate tailored class names (with short unique names that will hopefully help the browser do its magic faster).

Finally, that will allow us to quickly know what color / boldness / emphasis a certain token has. We can then use this information to paint (using a <canvas>) rectangles that approximate the text shape. The rectangles can be painted only for text that is guaranteed to be Left-To-Right (which is something we now track since a couple of days). Bi-Di / RTL text will not get a minimap since our text layout is done by the browser and it would be completely off. Also questionable what we should do with proportional fonts.

Sorry for the long post, just wanted to let you know this is on our radar and it might get prioritized even more due to the possible perf wins.

+1

+1

+1

Github has a way of having thumbs up counts. Please use that. +1's are
really cluttering the thread.

On Thu, Nov 3, 2016 at 10:46 AM, Filiphe Vilar Figueiredo <
[email protected]> wrote:

+1

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/Microsoft/vscode/issues/4865#issuecomment-258219634,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AA-JVK1A3zeRm0CUCePdrkPdqtRdbtMfks5q6h3ZgaJpZM4H93xs
.

Any progress on this, guys? Can the community assist?

Please stop spamming the thread with +1s, FFS. When we follow this issue, we want to get pertinent info about progress on this feature, not get spammed by +1s. Use the thumbs-up reaction on original comment or up vote on UserVoice instead.

I was thinking that it would be great if we could click our middle mouse button and navigate around the editor like we can in a browser like Microsoft Edge, or Visual Studio. Scrolling up and down is great but side to side would be greater! I would love to be able to click the middle mouse button to bring up the up,down,left,right scroll wheel and move around the screen by moving the mouse. Try it in Edge and see exactly what I'm talking about!

Should I post this under something new?

i wont do +1, to get down votes, please please make try to resolve this issue after the upcoming November build so we can see this on January, I miss this alot.
Update : and i get many down votes, too LOL

All @jschraub is saying that we need a Bird Eye View

I am using Sublime in conjunction with VSCode just for this reason that I don't have a way to peek my code of thousand line.

I'm confused. the team seems to have been using reactions to judge interest and prioritize feature requests... they even mentioned as much for "hot exit" in the last blog which got ~332. Yet "Enhanced Scrollbar" currently #1 (I believe) with over 600 has not moved into a milestone yet? so what's up, why does the dev team not share our view of this?

for what it's worth... this is one of the main reasons I stay with Atom... Atom's minimap and the 3rd party plug-ins for it are just fantastic... it without doubt has the best implementation (since there is a full api for it)

An update on this

We are working towards being able to implement this feature:

• part of the work is finished in vscode-textmate on the next branch -- https://github.com/Microsoft/vscode-textmate/tree/next
• there we are now able to get (in a binary encoded format) the result of tokenization + theme matching. i.e. we're getting straight colors, font style, etc, from the tokenizer which can now get the theme information (i.e. theme application can be done in code instead of through CSS)
• we need to adopt this new format in vscode.
  
  
  
  • that means we need to adopt this new format also for the other tokenization providers (there are 3 in total: textmate, monarch and manual). The last two come in play in the monaco-editor.
  
  
  • we are cleaning up the standalone editor tokens .css such that it can be transformed to a JS datastructure (see https://github.com/Microsoft/vscode/commits/master/src/vs/editor/browser/standalone/media/standalone-tokens.css)
  
  
  • we already finished aligning the monaco-languages tokens such that they all emit classic-style tokens.
  
  

left to do:

• [x] transform monarch/manual tokenizers to use theme matching in JS (not in CSS) and to generate the same binary format as vscode-textmate.
• [x] adopt new tokenization binary format in the editor model
• [x] adopt new tokenization format in the editor view
• [x] begin implementing this feature

TL;DR We're working on it, it just sometimes takes a lot of work under the hood before getting to the flashy stuff.

I would just like you to consider showing selections and search results highlighted in the minimap as a feature.

+1

what's the status on it now, someone summarize plz.

This is really what is missing from Visual Studio Code.

@charlesmilette: "Please stop spamming the thread with +1s, FFS. When we follow this issue, we want to get pertinent info about progress on this feature, not get spammed by +1s. Use the thumbs-up reaction on original comment or up vote on UserVoice instead."

Please use 👍 reaction please. Do not comment +1.

+1

Completely off-topic, but after being spam with +1 replies, I cannot blame users for this for multiple reasons :

• Github mobile version does not have an UI for reactions, I had to switch to desktop UI to see them.
• The comment UI is at the bottom of the page and the reaction one is attached on the first post on the top. A reaction shortcut should be attached to the comment UI and automatically linked to the first post.
• "+1" posts should automatically being detected with simple parsing and converted to reaction or at least propose the user to do so.
• Github should propose to receive notifications for post with a minimum of n characters count.

It was good to hear that mini-map function is under developing, which gives me who transferred from sublime text more confidence to stay with vs code.

Is there any reason this wouldn't be implemented as an extension? If that is available - it sounds like a perfect thing for an extension.

extension would be temporary solution not a good solution. Do you really want to install basic features individually via extensions?. First Download VScode, then here is the list of 30 extensions that may not work together at all but will be needed to provide most basic functionalities. (1. copy/paste v3.0, 2. tabs, 3. auto indent, 4. tabstospace, 5. autosave, 6. color highlighter,...... 28. birdeyeview_by_dx3ee_v1.0.1 ...)

Waiting for the implementation of this minimap function to switch from Atom.

@techsin It's not really a basic feature.. it's more of a personal preference.
As far as I've seen however, as of now the API does not allow rendering custom elements to such extent, therefore it's not so feasible to even attempt creating such an extension.

@sapiraz I agree with you, it isn't essential for a text editor, but I also think it's one of the reasons why Sublime Text (or Atom) is so popular. It's a 'key' feature that makes people hooked! As an example, lets say every editor has black text and white background, and a new text editor offer the choice to change that to your will. Of course it's not really crucial for the purpose of a text editor, but it enhance the experience so much that people are ready to leave their good editor to this one. And I think that's what's going on here. UX is essential as well ;)

UX is essencial, makes the diference between a good experience and a super annoying feeling that you get when you feel "this is not right" or "I really miss that".

This is not different than having good shortcuts and search. Are these essencial to code? Not really but then again I can code with text editor...

I need to agree to @sapiraz here, could be a nice feature or even an important one for many people, but lets not call it a basic one. So far Sublime is the only editor that has this as default (on Atom is an extension by abe33), and Sublime lacks the extended functionality on the scrollbar that Code provides.

For me speed and stability are by far better features and truly "basic" ones, and if the team is working on implement this the best way possible, I'll give them all the time they need.

@jfcartier, @JonnyBGod Well of course UX is important.
I too like the minimap feature in other editors and hope to see it in VSCode soon.. but let's not call it what it isn't - a basic feature.

You can't really compare it with shortcuts, search, copy/paste or even color scheme support because these features are so essential and add such obvious value to the working environment (Yes, even color schemes are important - I suffer from eye strain and sitting 9 hours a day in front of a bright white screen doesn't do any good to my eyes) whereas the minimap simply doesn't provide such important usability that you cannot live without.

If anyone asks you what value the minimap adds, could you come up with a good argument other than "looks nice"? I couldn't.
Again, I love the feature, after working with Sublime text & Atom I really liked having it in the side just to have a little perspective of where I am. but is it necessary? nope.
You can scroll, you can see the contents of your file, you see some hints on the current scrollbar, why is seeing your code in a small unreadable version any useful to you?

I'm working with VSCode right now on on multiple projects, and chose it due to lack of real basic features other modern editors have.. among them are performance & stability (ehem, Brackets), multilingual support (Sublime), native support of web languages & Intellisense (sorry Atom) or even native, easy to use extension installer ( again, Sublime )

anyone asks you what value the minimap adds, could you come up with a good argument other than "looks nice"?

Yes. It substantially helps navigate a large file. At least that's why I miss it so dearly.

@fredrikaverpil Well "substantially" in my opinion is a bit of an exaggeration, but sure.
Still can't really compare it with search or copy/paste..

@fredrikaverpil There are other useful ways to navigate a large file. @sapiraz is right in that this is not a basic feature, and that comparing it to truly basic features (like auto-indent on paste.. come on!) is a bit of a stretch.

That said, I think we can _all_ agree that we really want this to be available one way or another.

This thread has taken an onymous turn, look it's a feature I miss in VSCode at the moment. If it could be implemented in a coming version great if not, it would be a shame but I'll try to cope.

@sapiraz I totally agree with your arguments and wouldn't refute them just to refute, because I think any down to earth person would say the same. But there is a but (and this is my last post here, enough spamming lol)

could you come up with a good argument other than "looks nice"? I couldn't.
...
why is seeing your code in a small unreadable version any useful to you?

Lets not say it's not useful, because you don't see it that way. Normally, to tell if something is useful, statistics helps a lot, but I don't have any, so I can only rely on all those people (including myself) who won't use VS only because of this! It isn't nothing. Of course, I think we'd all agree that it's clearly a resistance to change, but we still say it's useful to us and it isn't very scientific to lower the importance of it by a personal judgment.

If i can provide an argument. Here is one :

(Precision) Since I know my code, I know that I've changed Db queries by the shape of it.
(Speed) With one click, I can get there. No scroll.
(UX) If you work in big files, it helps a lot. It gives the feeling to control everything, so you don't have to search.

I'm so glad to see this feature in February Iteration Plan #20021

We will meet this feature at the beginning of March
Thank you for your work @all

Once shipped will users be able to disable this completely?

I don't care to have this moving any bit of performance from one place to another just to render another, smaller view.

I'll stick with /,? searching because I have everything I need with those.

+1 for the Minimap. Rly w8ing

Seems to already be available in the insiders version,
Has to be enabled in the settings though, set "editor.minimap.enabled" to true :)

I tried the minimap in the insiders version, and it's looking great guys!

A couple of suggestions:

• I'd like to be able to click and drag the window region similar to clicking and dragging the scrollbar.
• I'd like a editor.minimap.width setting to play with, the minimap is a bit too wide for me.

PS: Performance is fantastic, kudos to you guys!

Please make sure that highlights are really visible in the minimap (like running a find function) since in Sublime, even though they are highlighted, the highligh is so minimal that you pretty much have to go through the whole file anyway...

Thanks for listening 😄

Being able to scroll up'n'down would be good... (like Sublime)
At the moment it seems to be click on it only :-(

Great work tho' - much appreciated !

On 19 February 2017 at 21:20, Mladen Mihajlović notifications@github.com
wrote:

Please make sure that highlights are really visible in the minimap (like
running a find function) since in Sublime, even though they are
highlighted, the highligh is so minimal that you pretty much have to go
through the whole file anyway...

Thanks for listening 😄

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/Microsoft/vscode/issues/4865#issuecomment-280949966,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AATV7DaFs9W2PNnpIYzmSIQQqaIDv60Sks5reLIJgaJpZM4H93xs
.

Being able to scroll via clicking/dragging the overlay mask. Same as atom, sublime text, brackets, geany etc

Would it be possible to adjust the magnification level? Sometimes I'd like to make it bigger or smaller font sizes depending on what I am working on.

Thank you for your patience on this feature request.

Basics

• We went with a minimap geometry different than Visual Studio's.
• We ship two grayscale "fonts", one where a character is 4x2 (4px high and 2px wide -- abbreviates as x2), and another one where a character is 2x1 (2px high and 1px wide -- abbreviated as x1).
• Based on the devicePixelRatio or on the zoom level, we will pick either the x2 or the x1 minimap font. That means on retina devices or on other high pixel ratio devices (e.g. Surface Books) the x2 font will be picked at zoomLevel 0, while on other devices the x2 font will be picked only when using zoomLevel 4 and above.
• This means that a line gets a fixed amount of vertical screen estate in the minimap, either 4px or 2px.
• If a file has more lines than fit in the minimap, the minimap will scroll:

A note on the fonts

• Each character in the minimap is painted according to these x2 or x1 fonts
• Here is the x2 font at 800% zoom. Can you read what's there:

• If you feel passionate about it, I would love to get your help in fine-tuning these fonts. They live here

Trying it out

"editor.minimap.enabled": true on the insiders channel

What's done

The character/tokens rendering code is in a good enough shape (perf wise) to ship it: pixels from the previous frame are copied over to the next frame as they are needed, making a minimap render mostly take below 1ms. Under certain conditions (e.g. minified word-wrapped file, jumping to a different vertical position) it can take up to a few tens of ms, but overall, I'm somewhat happy with the char rendering code.

What's left to do

There are many things left to do. To name just a few:

• Minimap: Implement dragging the minimap slider. #20935
• Minimap: 2x1 font has too many irregularities #20929
• Minimap: Limit its width to a maximum of 150px #20931
• Minimap: Render more than characters inside the minimap #20934
• Minimap: Add option to render blocks instead of characters #20947

Some are a matter of spending more time, while others are more challenging (e.g. should errors outside the minimap be painted somewhere, can we have the minimap take over the need for an overview ruler, etc.)

We'll track all minimap related issues with the label editor-minimap and I'd like to close this issue at this point.

Let's continue discussions in specific issues covering different aspects, some of them will make it in February, while we'll tackle some other later on.

@alexandrudima

What about this comment? https://github.com/Microsoft/vscode/issues/4865#issuecomment-255368352

I'd prefer it over small unreadable text and it provides the information I need. I'm not sure how difficult it would be but by the sounds of it you could just create a new font where every character is just a solid square, minus whitespace.

@sprinkle131313 I've extracted your comment to a separate issue - #20947.

Let's continue discussions in specific separate issues, please feel free to create new issues if you don't find one existing. I will continue to update my comment above with links so we can all participate in the specific discussions.

Thank you! Willing to see it stable!

Question: is it possible to have the minimap also be a cursor? This is the default behavior in VS, and this is what I see as the main differences between the 2 apps. Also note that I did install the insiders version to test it out

_EDIT_
Nevermind, just realized there's an open issue #20935 for that

@alexandrudima Thanks for #20947. Is it possible to have "editor.minimap.renderCharacters": false as the default to render block instead of text? IMO it looks much more pleasing and has better usability.

I'd like to be able to zoom when I'm over the text or block (it depends on the final approach). Currently, I cannot read anything or know in which part of the code I am, this is useful if you're working on a large piece of code.
Also, I discovered that if I keep the click and try scrolling or moving over the minimap nothing happens, I need to stop to click and choose another section of the code.

@FANMixco I was thinking about your petition, but I'm currently unsure about why you need such a feature, since if you click on the minimap, the code is scrolled to that point without moving the cursor, so it is effectively the same thing as a hover/zoom. Perhaps hovering is more efficient than clicking?

@druellan , I believe that @FANMixco is talking about a minimap zoom feature that is already in the regular Visual Studio as shown below

EDIT
Forgot to mention that the zoom shows up only after staying over the minimap for 2sec. If you go over the minimap and start scrolling, the zoom won't show up, you really need to stop scrolling and wait 2sec to see it.

If @ghiscoding is right about @FANMixco feature, then it definitely should be optional, since I think many people (as I do) don't like popups.

Thanks @ghiscoding, now is more clear. I still kind of believe this is not a huge improvement over the click+slide mechanism, in fact, looks more useful WITHOUT the minimap, on the enhanced scrollbar itself. Kind of a stand-alone feature and not part of the minimap feature.

About @pohmelie suggestion, I totally agree, but I believe this also can be attached to a shortkey modificator, like ctrl+hover on the scrollbar/minimap to trigger the function.

@druellan This is also the same as the https://atom.io/packages/minimap-codeglance extension on Atom. 11,000 downloads seems to suggest lots of people like/need it.

Personally I do not, so if you do implement it, please make it optional. A trigger/hotkey mechanism does sound good though especially if it's implemented on the scrollbar as well as minimap.

Is there a way to toggle it like toggle-sidebar(ctrl-b) toggle-panel(ctrl-j) ?

I like the new minimap. One thing I'm missing is the highlighting of text found with search or find-duplicates. I attached two screenshots to visualize that matter.

Nice feature guys!

💃

@sixenvi I suggest you to add to a separate feature request #21404 that I asked, since your request is very similar to mine and is an open issue, so at least it's tracked.

I'm not sure that the VSCode team read comments or requests on issues that are closed, like this one here.

Hi @druellan ! Yeah, what @ghiscoding is what I meant, maybe we could configure about the time because it's a bit confuse.

Hi everyone! If VS Code just missed one feature it was this and now it's compelete! Such a nice implementation and great performance. (@alexandrudima as always you fascinate me!)

Just one simple thing that I noticed:

Good find. I think you should file a new bug as this is closed. Vscode team
may not see it.

On Fri, Mar 3, 2017 at 7:51 AM Pouya Kary notifications@github.com wrote:

Hi everyone! If VS Code just missed one feature it was this and no has
nothing I could have wished to have! Such a nice implementation and great
performance. (As always you fascinate me!)

Just one simple thing that I noticed:

[image: out-of-screen-scroll]
https://cloud.githubusercontent.com/assets/2157285/23557582/c264e420-0045-11e7-9ea6-8789f30db9de.gif

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/Microsoft/vscode/issues/4865#issuecomment-283990000,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AA-JVANXdhu57m4hlAODRcV6qhsNGzgrks5riDb3gaJpZM4H93xs
.

@nojvek ah didn't notice that! okay one more issue...

One more thing would be great I think - do not hide current position on minimap (currently it is visible only on mouseover).

Probably having one more key in settings for this would be best.

@Andrfas this is tracked under #21404 and #21784.

As a suggestion, you guys should stop writing in a closed issue that is not tracked anymore and search/open new issue.

I want scrollbar buttons.

Can we have map or scrollbar appear only when mouseover on the edges

@gauravsaini this is a closed issue

is there a way to use older version? on one of my online cources, the teacher used map, and it categoriezed code blocks, with so many code, it's not readable at all on the side bar, so that's far far better to ignore seeing code, but have code categorized by their code blocks.

@deadmann if you want to turn the minimap off just go into your settings and find:

// Controls if the minimap is shown
  "editor.minimap.enabled": true,

And set it to false. There is no need to go back to an older version.

@deadmann if you want to turn the minimap off just go into your settings and find:

// Controls if the minimap is shown
"editor.minimap.enabled": true,
And set it to false. There is no need to go back to an older version.

I want mini-map, actually I'm the one who activated it, but i want in a simpler form, when my code grows, and with long lines, it's not simple to look at the mini-map, i mean, can you really read this?

I found it, an another system, where we had a big project, i just wanted to tell you that it can be unreadable in such cases, where it appeared, it may be due use of different version of VS in on that platform, or because the file got too long. but that's what i show in the image.