Ruler's border is not consistent

[spywhere]

• VSCode Version: 0.10.11 (0.10.11) [f291f4a]
• OS Version: El Capitan 10.11.3 (15D21)

Steps to Reproduce:

1. Open a new window
2. Add a lot of lines (to show the ruler)
3. Change editor.hideCursorInOverviewRuler to true

When editor.hideCursorInOverviewRuler is false

When editor.hideCursorInOverviewRuler is true

I am not sure if this is what VS Code intent to be or not. However, I personally like the ruler without border (as OS X's default scrollbars are) but if there is an option to change this would be perfect.

[alexdima]

@bgashler1 The border is rendered when the overview ruler contains something, such as:

• a decoration
• a cursor indicator

It is very easy to remove the border, just comment out the code that paints the border at:
https://github.com/Microsoft/vscode/blob/master/src/vs/editor/browser/viewParts/overviewRuler/decorationsOverviewRuler.ts#L216

Removing the border IMHO makes things appear like they float in mid air:

Giving to you so you could maybe give further guidance. Options I can think of:

• leave it as it is
• hide the overview ruler when the mouse leaves the editor (same as with scrollbars) and keep its border if it has contents
• remove the border as this issue suggests

[spywhere]

I would like it to be hidden when scrollbar is visible and visible when scrollbar is hidden. However, it would be better if it can be set as an option in the configuration as I think offer an option is a lot better than forcing users to use this such tweak.

Possible potential values

• hidden Always hidden border
• when_focus Show when the window is focused
• when_need As in current build (when there is a decoration or a cursor indicator)
• when_scroll Show when scroll the editor (what I wanted)
• visible Always visible, even when the window is lost its focus

[bgashler1]

Thanks for sharing your ideas. So essentially you want the scrollbars to be more like macOS and show themselves (and the decorations also) only when scrolling and hovering over them. Otherwise just show the border. Is that correct? Is this centered on aesthetic preference, or do you have any other reasons for preferring this?

I haven't heard any similar feedback, so let's let this issue be a place for other users to comment on their preference before we make a change.

[spywhere]

There are many scenarios for this issue. I will list them and explain how I preferred (aka. for the when_scroll option)

1. The editor contains no scrollbar
   1.1. When there is nothing in the ruler

   • Ruler's border: Hidden

   1.2. When there is something in the ruler

   • Ruler's border: Visible

2. The editor contains some scrollbars
   2.1. The scrollbars are always visible

   • Ruler's border: Hidden

   2.2. The scrollbars are visible when scroll

   • Ruler's border: Visible

The main point of this issue is not how those borders should be shown but the consistency and how it react to changes of the UI itself. Especially when 1.1 becomes 1.2 where it suddenly appear rather than fade in.

[bgashler1]

@spywhere I think all of 1 is currently working today in VS Code as you described. Since we show the position of the cursor in the ruler by default, you would just need to use the setting "editor.hideCursorInOverviewRuler:" true, otherwise something is always in there (the cursor).

As far as 2, after reading your comment, it seems you would like to see a setting on whether to auto-hide or always show scrollbars when they exist. That makes sense. As to the other part of it, I don't think we need to always show the ruler whenever a scrollbar is present, even if the ruler is empty. The ruler adds no value if there is nothing in it; therefore, I think it makes sense to not show it if you have nothing in it (such as if you had the setting enabled in "1" above and had no other things in the ruler).

[alexdima]

Regarding @bgashler1 comment, there exists today these "hidden" settings for controlling the scrollbar:

"editor.scrollbar.horizontal": "visible"
"editor.scrollbar.vertical": "visible"

Note: you need to restart/reopen the workbench to get these settings to apply.

[nonphoto]

I think this issue could be easily solved by making the border color black when the color theme is dark. Personally, I'd prefer it were hidden entirely, but it would be less awkward looking if it matched the theme.