Enhanced Scrollbar (add minimap)

jschraub commented 8 years ago

Feature Request

Add the Enhanced Scrollbar feature from VS 2013 and VS 2015 into VS Code. It's an extremely efficient way to move around within a file and would be a great feature to have in VS Code.

If this is already an extension or an option, I could not find it.

alexdima commented 8 years ago

@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 ?

jschraub commented 8 years ago

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.

alexdima commented 8 years ago

Great description! Thank you!

nojvek commented 8 years ago

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?

alexdima commented 8 years ago

@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 :)

1RedOne commented 8 years ago

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

sylveon commented 8 years ago

Soon™

deepu105 commented 8 years ago

👍 the minimap feature is dearly missed

salda commented 8 years ago

I miss it heavily too.

leaxoy commented 8 years ago

+Infinity

lednhatkhanh commented 8 years ago

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

sombriks commented 8 years ago

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

Credskiz commented 8 years ago

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

octref commented 8 years ago

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!

slice

sylveon commented 8 years ago

capture

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

benjaminmatthews commented 8 years ago

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

StefanJanssen95 commented 8 years ago

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

emveeoh commented 8 years ago

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

AntonyBaasan commented 8 years ago

+1 Please add soon.

L-Z-Y commented 8 years ago

+1 Please add MiniMap

philglen commented 8 years ago

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

Please add MiniMap for VSCode

sevico commented 8 years ago

+1 Please add MiniMap

MartinZubek commented 8 years ago

+1 to that

adrian-uglean commented 8 years ago

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

Gizmotoy commented 8 years ago

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.

trafferty commented 8 years ago

+1

CourierXD commented 8 years ago

+10

grandeto commented 8 years ago

+1

lampo808 commented 8 years ago

+1

octref commented 8 years ago

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.

deepu105 commented 8 years ago

You guys can lock the conversation to collaborators.

Thanks & Regards, Deepu

On Thu, Oct 13, 2016 at 9:13 PM, Pine notifications@github.com 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 .

ifussa commented 8 years ago

+1

druellan commented 8 years ago

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...

2016-10-21_09h34_59

BenWeigt commented 8 years ago

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

alex-marmot commented 8 years ago

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

alexdima commented 8 years ago

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.

pguillen commented 8 years ago

+1

ddenysov commented 8 years ago

+1

liphvf commented 8 years ago

+1

nojvek commented 8 years ago

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 < notifications@github.com> 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 .

martin-sweeny commented 8 years ago

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

sylveon commented 8 years ago

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.

DanJ210 commented 7 years ago

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?

shanalikhan commented 7 years ago

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

technbuzz commented 7 years ago

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.

dmaz commented 7 years ago

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)

alexdima commented 7 years ago

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.

ghost commented 7 years ago

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

zhaodongxx commented 7 years ago

+1

techsin commented 7 years ago

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

microsoft / vscode