Custom Scrollbars for Windows #5438

VizuaaLOG · 2013-10-06T21:15:42Z

Using the image on this trello post (https://trello.com/c/jhCb7dvV/909-windows-scroll-bars) i have made the scrollbars in windows prior to windows 8 look like the windows 8 scroll bars as requested.

marcelgerber · 2013-10-07T09:21:47Z

They are also changed a little bit in Win8, the hover effect isn't there. I like the hover effect.
Also, the buttons for up/down (left/right) aren't there. It would be cool if the whole scrollbar looks like in Win8.

VizuaaLOG · 2013-10-07T13:29:39Z

I will have a look into it when I finish college. Thanks for the feedback.

VizuaaLOG · 2013-10-07T17:37:08Z

@SAplayer Do you have Windows 8? If you do is it possible if you could take a screenshot of the scroll bar in normal and hover state. Just i do not have windows 8. Thanks, would be much appreciated.

…to each other, ...

marcelgerber · 2013-10-07T17:53:50Z

I have done it myself, in my opinion the scrollbar now looks pretty good (but it's not best!). I will send you a pr.

EDIT: VizuaaLOG/brackets#1, can you please merge it?

Better behaviour of the win scrollbars: Hover-effect, not running into ...

marcelgerber · 2013-10-07T18:16:07Z

src/styles/brackets_scrollbars.less

For some reason, it doesn't work with :corner-present yet.

VizuaaLOG · 2013-10-07T18:32:17Z

Thanks for the help it looks brilliant. Do you know if it looks the same on XP and Vista? It looks fine on windows 7

marcelgerber · 2013-10-07T18:37:43Z

I can try it on Vista, but my old pc takes a lot of time to start, so I will maybe try it tomorrow (but Vista looks not much different as Win7). Let's let some others try it on XP.

And as I just commented, the :corner-present doesn't work for some reason, so the scrollbar doesn't reach the bottom to not run into an horizontal scrollbar which can be there (I think this is caused by CEF). It would be cool if that was running, too, because then the scrollbar could reach the button if that is possible (that would look much better).

marcelgerber · 2013-10-07T18:43:00Z

src/styles/brackets_scrollbars.less

I made this border that you can differentiate the scrollbar from the grey parts of the gui, for example the sidebar.

VizuaaLOG · 2013-10-07T19:24:38Z

If i am correct you mean that if there is no horizontal scroll then the vertical should extend the full height. If this is correct, could it be done with javascript?

marcelgerber · 2013-10-07T19:41:58Z

Yes, you're right (sorry if I express myself the wrong way, but I'm from germany :D). Currently it looks like this when there are both horizontal and vertical scrollbars:

But if there is only a vertical scrollbar:

This scrollbar should have no margin-bottom, but it has.

This maybe can be fixed within JavaScript, but that won't be a good soultion. I think this will be possible LESS/CSS-only at least when CEF is updated.

VizuaaLOG · 2013-10-07T20:05:32Z

Yes, i understand what you mean. If they fix this when it is updated then i will look into patching the problem if it doesn't fix it automatically.

marcelgerber · 2013-10-07T20:22:40Z

@VizuaaLOG I have just created a test site, with Chrome 30 it works just fine (the code is pretty much the same as in brackets itself). You mustn't even use the :corner-present, it only needs to have a ::-webkit-scrollbar-corner.
So on updating we only have to delete the lines that control the margin.

VizuaaLOG · 2013-10-08T18:01:42Z

@SAplayer Looked at the demo you did and tried changing the code in brackets but the same effect with the horizontal scrollbar being underneath the vertical one. Will just have to wait for CEF to get updated. Thanks for trying it out in chrome though.

marcelgerber · 2013-10-08T18:19:46Z

Yes, that is what I meant. But until this is fixed the current solution is good enough, I think.

VizuaaLOG · 2013-10-08T19:00:14Z

Yes I think it looks brilliant. (Thanks to your help :) )

JeffryBooher · 2013-10-08T19:00:56Z

Small problem with the dead-man's corner in the lower right edge of the editor (the square box where the two scrollbars would intersect)

marcelgerber · 2013-10-08T19:14:34Z

This is what we described, please read the whole conversation. Maybe you know how to fix this.

redmunds · 2013-10-08T20:26:30Z

Same issue that Jeff commented on but in the lower-left corner (i.e. shouldn't be a line number next to horizontal scrollbar) unless they're only shown on mouse-over.

marcelgerber · 2013-10-08T20:46:19Z

@redmunds But isn't it the same behaviour on linux?

JeffryBooher · 2013-10-08T21:02:05Z

@larz0 has the vertical scrollbar extended to the bottom working but, when there are both vertical and horizontal scrollbars, it looks kind of strange. Ultimately, though, it's what we want when there is just a vertical or horizontal scrollbar. The extended vertical scrollbar may be good enough but, typically, Windows apps just have dead space there. I suggested that we try an AP div with a white background but it may be too much trouble.

@SAplayer the issue you describe didn't illustrate that the text in the editor shows up in the "neutral-zone" (the corner where the 2 scrollbars would intersect) which is why I commented and illustrated that with a screen grab. If it were just white -- it would have been acceptable as-is but scrolling the document presented a drawing issue which is not acceptable so we must find a way to fix that before it can be merged.

Thanks for helping us out with this issue! Your contributions are helping make Brackets a great editor!

marcelgerber · 2013-10-08T21:11:31Z

So the core problen is that we can't use ::-webkit-scrollbar-corner, which is exactly this corner.

larz0 · 2013-10-08T21:36:44Z

@SAplayer I'm trying to figure out why ::-webkit-scrollbar-corner won't work.

@redmunds any ideas?

redmunds · 2013-10-08T21:50:29Z

@larz0 Not sure. Need to take a closer look.

redmunds · 2013-10-08T21:55:23Z

CodeMirror already fixes the problems that @JeffryBooher and I describe using AP Divs -- take a look at CodeMirror-scrollbar-filler and CodeMirror-gutter-filler classes. So, shouldn't need any scrollbar-filler pseudo-elements.

larz0 · 2013-10-08T21:59:52Z

Schweet. Thanks @redmunds.

marcelgerber · 2013-10-09T08:30:35Z

@redmunds Seems this is already used since #3756, but it doesn't work. (seems this doesn't work with webkit scrollbars?) I just tested out the linux scrollbars, you can see these gutters too, but it's not that important (what about using them scrollbars also for win? They are not looking this bad, maybe we can also add a hover effect.)

VizuaaLOG · 2013-10-09T21:04:32Z

I have just posted a new commit which adds the class to place the filler in the corner i have also made it the same colour as the scrollbars. However, i'm not sure how to put it there if both scrollbars are visible and not if there is only one.

marcelgerber · 2013-10-10T19:56:19Z

I for myself don't see the scrollbar-filler at all...

redmunds · 2013-10-10T20:19:26Z

Watch the word-wrap on my previous comment. The class names are CodeMirror-scrollbar-filler and CodeMirror-gutter-filler. They're already defined in CodeMirror and overridden in brackets_codemirror_override.less. CodeMirror controls when they are hidden and shown. It would be nice if these scrollbars fit into the CodeMirror model, but otherwise you may need to hide/show these elements yourself.

marcelgerber · 2013-10-10T20:32:42Z

But also with .CodeMirror-scrollbar-filler it won't work. I saw the code in the Developer Tools, but they were width: 0px; height: 0px;, also in a file with both horizontal and vertical scrollbars (in my case FindReplace.js). And there is also the problem that the scrollbar isn't reaching the bottom is there is only one scrollbar.

I think we will need some javascript...

VizuaaLOG · 2013-10-10T20:40:37Z

@SAplayer i have been trying to think of how i could do it with javascript but it needs to be checked periodically because onload it might not be enough for a scrollbar but when they have typed a few lines it then needs it. The only way i could think of doing this was with setTimeout() but i think this would cause performance problems.

redmunds · 2013-10-10T21:53:08Z

This looks pretty cool on Win7, except that the arrow buttons at top and bottom of scrollbar are missing. Is that by design?

Unfortunately, I don't have a Win8 machine to look at that bug.

marcelgerber · 2013-10-10T21:59:08Z

This is normally included in Win8, but we would need pictures of arrows to include them (4 directions; 2 states (hovered or not); 4 * 2 = 8 pics).

marcelgerber · 2013-10-10T22:01:30Z

If you want to, I can take screenshots both of the normal Brackets look in Win8 and the current implementation of these scrollbars and share them with you tomorrow, so that we can compare them.

redmunds · 2013-10-10T22:54:30Z

@larz0 Can you provide some arrow icons?
@SAplayer do you need a particular size or format?

larz0 · 2013-10-10T23:15:34Z

@SAplayer @redmunds here are the scrollbar arrows http://cl.ly/image/1K3c2j3j1307

marcelgerber · 2013-10-11T13:43:08Z

Here are the screens:
Default Windows 8 style:

Both horizontal and vertical scrollbars
Only vertical scrollbar

Style from this PR

Both horizontal and vertical scrollbars
Only vertical scrollbar

TomMalbran · 2014-02-07T22:26:48Z

I guess we can close this PR now that #6305 was merged.

peterflynn · 2014-02-07T23:27:46Z

Agreed -- closing

Thomas Erbe added 3 commits October 6, 2013 20:14

Added universal scrollbars

d3f9853

Made the scrollbars win only

8f48470

Fixed a bug where the scrollbar was affecting the sidebar

addbc69

Better behaviour of the win scrollbars: Hover-effect, not running in…

dd121ba

…to each other, ...

Merge pull request #1 from SAPlayer/scrollbars

c6dc395

Better behaviour of the win scrollbars: Hover-effect, not running into ...

marcelgerber reviewed Oct 7, 2013
View reviewed changes

src/styles/brackets_scrollbars.less Outdated

Copy link

Contributor

marcelgerber Oct 7, 2013

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For some reason, it doesn't work with :corner-present yet.

marcelgerber reviewed Oct 7, 2013
View reviewed changes

Added scrollbar-filler class

cde6bff

ghost assigned JeffryBooher Oct 11, 2013

marcelgerber mentioned this pull request Nov 12, 2013

Custom scrollbar #5939

Closed

marcelgerber mentioned this pull request Dec 22, 2013

Custom scrollbars for Windows based on win 8 #6305

Merged

peterflynn closed this Feb 7, 2014

VizuaaLOG deleted the windows-scrollbars branch February 8, 2014 14:31

core-ai-bot mentioned this pull request Aug 30, 2021

[CLOSED] Custom Scrollbars for Windows brackets-archive/bracketsIssues#4993

Open

Custom Scrollbars for Windows #5438

Custom Scrollbars for Windows #5438

Uh oh!

Conversation

VizuaaLOG commented Oct 6, 2013

Uh oh!

marcelgerber commented Oct 7, 2013

Uh oh!

VizuaaLOG commented Oct 7, 2013

Uh oh!

VizuaaLOG commented Oct 7, 2013

Uh oh!

marcelgerber commented Oct 7, 2013

Uh oh!

marcelgerber Oct 7, 2013

Choose a reason for hiding this comment

Uh oh!

VizuaaLOG commented Oct 7, 2013

Uh oh!

marcelgerber commented Oct 7, 2013

Uh oh!

marcelgerber Oct 7, 2013

Choose a reason for hiding this comment

Uh oh!

VizuaaLOG commented Oct 7, 2013

Uh oh!

marcelgerber commented Oct 7, 2013

Uh oh!

VizuaaLOG commented Oct 7, 2013

Uh oh!

marcelgerber commented Oct 7, 2013

Uh oh!

VizuaaLOG commented Oct 8, 2013

Uh oh!

marcelgerber commented Oct 8, 2013

Uh oh!

VizuaaLOG commented Oct 8, 2013

Uh oh!

JeffryBooher commented Oct 8, 2013

Uh oh!

marcelgerber commented Oct 8, 2013

Uh oh!

redmunds commented Oct 8, 2013

Uh oh!

marcelgerber commented Oct 8, 2013

Uh oh!

JeffryBooher commented Oct 8, 2013

Uh oh!

marcelgerber commented Oct 8, 2013

Uh oh!

larz0 commented Oct 8, 2013

Uh oh!

redmunds commented Oct 8, 2013

Uh oh!

redmunds commented Oct 8, 2013

Uh oh!

larz0 commented Oct 8, 2013

Uh oh!

marcelgerber commented Oct 9, 2013

Uh oh!

VizuaaLOG commented Oct 9, 2013

Uh oh!

marcelgerber commented Oct 10, 2013

Uh oh!

redmunds commented Oct 10, 2013

Uh oh!

marcelgerber commented Oct 10, 2013

Uh oh!

VizuaaLOG commented Oct 10, 2013

Uh oh!

redmunds commented Oct 10, 2013

Uh oh!

marcelgerber commented Oct 10, 2013

Uh oh!

marcelgerber commented Oct 10, 2013

Uh oh!

redmunds commented Oct 10, 2013

Uh oh!

larz0 commented Oct 10, 2013

Uh oh!