Mattermost-server: Use properly styled scrollbars throughout the app on all browsers

[esethna]

If you're interested please comment here and come join our "Contributors" community channel on our daily build server, where you can discuss questions with community members and the Mattermost core team. For technical advice or questions, please join our "Developers" community channel.

New contributors please see our Developer's Guide.

---

Notes: Jira ticket

Some browsers (Firefox, IE11, Edge) use the system scroll bar in some places (the centre channel, modals), but in other places (channel sidebar, RHS), they use a nicer scroll bar like Chrome does. For example, here's a screenshot of the RHS and centre channel in Firefox when both have scrollbars
!image-2018-12-06-15-20-26-699.png|thumbnail!

We should look at unifying the scrollbars throughout the app to use a nicer, more consistent style

[AGMETEOR]

I will take this

[hanzei]

Thanks for working on this @AGMETEOR

[AGMETEOR]

@hanzei I asked for some more clarity on this via the ticket comments. Do you mind taking a look?

[hanzei]

@AGMETEOR I've pinged two developers to get there input on your question.

[AGMETEOR]

@hanzei I am just following up on this. We had sort of forgotten about it.

[hanzei]

Hey @AGMETEOR, just want to check if you are still working on this ticket

[hanzei]

Making this one available for the public again due to inactivity.

[mikeygbd]

I would like to give this a shot.

[hanzei]

Thanks @mikeygbd

[jasonblais]

Hey @mikeygbd, checking in to see how things are going? Any questions so far?

[bharateshwq]

Hey!
I'm a fledgling in the open source world, however I'd love to take on this task if help is still needed. Any feedback / advice along the way would also be greatly appreciated. Thank you!

[jasonblais]

@breditter Welcome! 😄

@hmhealey or @esethna are you open to confirming if this ticket is still valid? Just want to make sure since it was created a while ago.

@breditter In terms of guidance, the developer's guide referenced in the ticket description is a good start, and if you have any questions, join our Contributors community channel.

[hmhealey]

Yeah, it's still valid, but I don't think the details of the ticket have been fleshed out properly.

@esethna Do any of the newer UX designs include a design for how scroll bars in the app should look?

[bharateshwq]

@hmhealey I was wondering the same thing Please let me know the specifics. And also there is a file named _mattermost-webapp/sass/components/_scrollbar.scss_ does it have to do something with global scrollbar.
thank you:)

[esethna]

We should ideally use the nicer scroll bar styling that we have in the RHS: https://i.gyazo.com/22090c7b0cf29216d09bf2d2deec18e7.gif

However, one requirement for this would be how we can make the scroll bar ux on tablet devices easier? For example, can we detect if the device is running Windows in tablet mode and display a permanent and wider scroll bar rather than a hiding scrollbar that makes tablet use more difficult?

See related tickets with some open questions:

• https://mattermost.atlassian.net/browse/MM-22813
• https://mattermost.atlassian.net/browse/MM-22856

@breditter let us know if you'd be interested in taking this on. Likely we'd have to work closer with you on a proposed scroll bar solution that accomplishes the goals of all the related tickets, since we don't want this change to unify the scroll bar styling to negatively impact tablet usability. cc// @andrewbrown00 on design

[esethna]

Also cc// @asaadmahmood on the above

[bharateshwq]

Hey @jasonblais @esethna I'm not entirely sure how to code when multiple devices are involved. I would love to work on this or atleast watch how this gets tackled ( as I'm completely new to web development I suppose someone a bit more experienced should take on this). I wouldn't mind stepping back.
Please let me know where these discussions are done.

[hmhealey]

Yeah, perhaps this is a little bit bigger than we expected. I think we should take some time on our end to discuss exactly what's expected here since it's rather open-ended right now, and there's a few open questions with the design that need to be answered.

@breditter Perhaps you'd be interested in helping us do some code cleanup to have a chance to explore the code base a bit? We've got a number of tickets available to migrate the web app to TypeScript (like this one) and a few to remove some old usage of JQuery and add some end-to-end tests for the affected code (like this one) that should be decent starting points.

[hmhealey]

Closing this ticket for now while we add some more detail to it.