Mattermost-server: Remove hard black outline on scrollbar in Firefox/Win10

[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

Summary

Remove hard black outline on scrollbar in Firefox/Win10

Steps to reproduce

Open Mattermost in Firefox/Win10 and type enough messages into Town Square to trigger a scroll bar to the right of the center channel

Observed behavior

Scroll bar in IE has heavy black outline

Expected behavior

No heavy black outline, use outline color from user's theme.

Possible fixes

Update existing scrollbar with react-custom-scrollbars.

Note

There's a plug-in that's used to render the scrollbar in Chrome/Win10 that doesn't work in Firefox, so we just need to style the default scrollbar.

[eunicode]

I'd like to take on this issue.

[amyblais]

Thank you @eunicode!

[hanzei]

Hey @eunicode,

Can we help you with any questions?

[eunicode]

Hi @hanzei, thanks for checking in. I deeply apologize for not updating on my status sooner. I have been having problems setting up my development environment. However, I would love to try tackling this again, and would really appreciate one more week to work on this. If more time cannot be spared, I completely understand.

[hanzei]

Hey @eunicode,
Did you follow the steps on https://developers.mattermost.com/contribute/webapp/developer-setup/ already? You can also join our Community Server and ask for help there. It easier to solve setup problem in a chat room.

We are not in a hurry. I wanted to check if you are still working on this. Take the time you need! And let us know (here or on the community server) if you need help.

[eunicode]

@hanzei Yes, I've done both, but I will try again and experiment with new configurations (I think my problems might stem from using MinTTY), and then ask for help in the community server. Thank you so much for being so understanding.

[andreicristianpetcu]

I managed to make the scrollbars pretty in Firefox with this CSS.

.more-modal__list div, .modal-body, body div { 
  scrollbar-color: #aaaaaa rgba(255, 255, 255, .0);
  scrollbar-width: thin;
}

GNU/Linux, Firefox Nightly v67 (should work in stable also)

[hanzei]

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

[jkl5616]

I'd like to take this!

[andreicristianpetcu]

I don't use MM anymore but this should fix it https://addons.mozilla.org/en-US/firefox/addon/dark-scroll-for-tweetdeck/

[hanzei]

@jasonblais Could you check if this issue still exists, as you are the reporter of the original ticket?

[jasonblais]

@hanzei Thanks for checking, still reproduces on 5.12.

@jkl5616 Thanks for your interest & thanks @andreicristianpetcu for the tip!

[jkl5616]

@hanzei I think I can just apply "Center Text Channel" color as same as in Chrome to FireFox/Win10 and IE11/Win10 to match with themes. As IE11 does not support alpha background, applying "Central Text Channel" color as face and track color and calculated background color as scrollbar background is the best way. Will this approach enough to solve the issue?

[hanzei]

The support of IE11 will be dropped with Mattermost v5.16. You don't have to worry about this special case.

[jasonblais]

@jkl5616 Agree with Hanzei, I've updated the ticket to specify Firefox. We can focus on resolving this ticket for Firefox only.

Thanks for your help on this ticket!

[hanzei]

Hey @jkl5616,

How is your work on this ticket going? Do you have further questions?

[hanzei]

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

[mujz]

Just some notes for whoever picks this ticket up, it seems to me that the work required to resolve this issue is to add scrollbar-color CSS property to _scrollbar.scss.

[mujz]

@esethna @jasonblais @hanzei can one of you folks confirm if this is still happening? We tried to reproduce this using the steps you defined in above and in the JIRA ticket, but weren't able to get the problem to appear. If you can reproduce it, would you mind specifying the version of Firefox you used to reproduce the error?

Thanks! Once we're able to reproduce this, we'll try to get it fixed.

[hanzei]

I can't repo this on Firefox 70.0.1

[jasonblais]

Thanks @mujz and @hanzei. I don't have access to a Windows machine right now, so I'll close this issue and ask QA to help test the Jira ticket. We can reopen if we're able to reproduce it.

Thanks for looking into it!