[CLOSED] Larz/linux scrollbar

[core-ai-bot]

Issue by jasonsanjose
Thursday Sep 05, 2013 at 23:22 GMT
Originally opened as adobe/brackets#5083

---

This is for #4884.

Squashed from #5082 for@larz0

---

jasonsanjose included the following code: https://github.com/adobe/brackets/pull/5083/commits

[core-ai-bot]

Comment by jasonsanjose
Thursday Sep 05, 2013 at 23:38 GMT

---

@larz0 initial review complete

[core-ai-bot]

Comment by TomMalbran
Friday Sep 06, 2013 at 01:27 GMT

---

I think that the scrollbars will look a better with some spacing around them, which can be achieved with:

    ::-webkit-scrollbar-thumb {
        border-radius: 999px;
        box-shadow: 0 0 0 4px`@`custom-scrollbar-thumb inset;
        border: 2px solid transparent;
    }

    ::-webkit-scrollbar-thumb:window-inactive {
        box-shadow: 0 0 0 5px`@`custom-scrollbar-thumb-inactive inset;
    }

Note that the padding is added with transparent border.

I think that the PNG images in the quiet scrollbars when used to add a spacing, which can be achieved with this.

[core-ai-bot]

Comment by jasonsanjose
Friday Sep 06, 2013 at 01:46 GMT

---

It seems like we want these scrollbars to appear everywhere for Linux except the project panel. We want scrolling content in other areas like the extension manager dialog. Maybe the project panel should stop being an exception? At least for Linux?

[core-ai-bot]

Comment by TomMalbran
Friday Sep 06, 2013 at 01:59 GMT

---

I was able to fix the scrollbars issue here: https://gist.github.com/TomMalbran/6458648

Which is also using a 2px spacing.

[core-ai-bot]

Comment by larz0
Friday Sep 06, 2013 at 03:20 GMT

---

@TomMalbran I replaced all the scrollbar styles with your brackets_scrollbars.less. Could you test the custom scrollbar? I couldn't get it to show with .platform-mac.

[core-ai-bot]

Comment by TomMalbran
Friday Sep 06, 2013 at 03:45 GMT

---

@larz0 no problem, happy to help.

I think we could also update the quiet scrollbars to get rd of that PNG?

[core-ai-bot]

Comment by larz0
Friday Sep 06, 2013 at 03:46 GMT

---

Alright I'll give that a try.

[core-ai-bot]

Comment by TomMalbran
Friday Sep 06, 2013 at 03:49 GMT

---

should be similar to the other ones, but with a different color. And since it looks like the quiet scrolbars use a 1px padding, maybe that should be used in the linux scrollbars too?

[core-ai-bot]

Comment by larz0
Friday Sep 06, 2013 at 03:57 GMT

---

Looks good on Mac, not sure if it's good on Windows also.

[core-ai-bot]

Comment by TomMalbran
Friday Sep 06, 2013 at 04:18 GMT

---

I can't see scrollbars anymore without the PNGs. You should add a box-shadow and border, in replace of the images, as it was done with the linux scrollbars.

I updated my gist https://gist.github.com/TomMalbran/6458648 and with those changes I can see it again. You can change any colors and sizes.

[core-ai-bot]

Comment by larz0
Friday Sep 06, 2013 at 04:33 GMT

---

@TomMalbran updated. Thanks!

[core-ai-bot]

Comment by jasonsanjose
Friday Sep 06, 2013 at 16:55 GMT

---

Looks good on mac, win and linux. Now all we need is the win8 style scrollbars! Nice work guys. Merging.

[core-ai-bot]

Comment by peterflynn
Thursday Mar 06, 2014 at 00:39 GMT

---

@larz0@TomMalbran I noticed something in this LESS code today while playing with some other scrollbar stuff: there's extra padding at the far end of the Linux scrollbar track (bottom of a vertical scrollbar, right side of a horizontal one). It looks like this was introduced in 7ba7240. Did we intend for the spacing to be asymmetrical like that? It makes it feel a little bit like you can't scroll all the way to the end...

[core-ai-bot]

Comment by larz0
Thursday Mar 06, 2014 at 00:44 GMT

---

@peterflynn could you attach a screenshot? I can't remember…

[core-ai-bot]

Comment by TomMalbran
Thursday Mar 06, 2014 at 00:47 GMT

---

It kind of was intentional since we might need to patch CodeMirror to fix it. The problem seems to be that CodeMirror can't calculate the space used by the scrollbars when use this custom ones. That means that it doesn't add the extra space at the bottom/right of the bars when there are both horizontal and vertical ones. So without the spaces added here the bars overlap on that corner, which is what is currently happening with the windows scrollbars.

We can fix this in CSS if we are able to know when we have both vertical and horizontal bars, which we could know if CodeMirror would add an extra class with this information.