React-devtools: Scrollsbar in Dark Theme (Firefox) are not the small, floating scrollbars

[jnachtigall]

Since a few days the scrollbars in Dark Theme are not the small, floating ones anymore but the huge ("ugly") native ones:

I use Firefox Nightly (Dark Theme). Not sure this is really a React DevTools bug or a Nightly bug... If so, please let me know (and I'll file a bug at BMO). But in all other Tools like Inspector or Console the usual dark floating bars are working.

[jnachtigall]

Uh, forgot:
OS is Windows 10.
Firefox 56.0a1 (2017-07-20) (64-bit)

[bvaughn]

Since a few days the scrollbars in Dark Theme are not the small, floating ones anymore but the huge ("ugly") native ones:

React DevTools was last updated in the Firefox store on July 12, 2017. The changelog for that release can be seen here:

• Add "Copy element props" option to context menu
• Several new UI themes have been added.
• Extension no longer sets global "script" variable when run
• Edge-case bug fixes:
  
  
  
  • Support case where functional component's displayName is a function
  
  
  • Navigating back and forward with history buttons re-connects DevTools more reliably
  
  

If this was working previously but broke within the past couple of days, I'd say it's unlikely to be caused by React DevTools since the code related to this hasn't really changed. However if you are able to take a look into this we'd welcome any more info you can provide (including a PR!) 😄

Edit: Can confirm that I see the same light-gray scrollbars for a dark theme when running locally on nightly.

[clarkbw]

Yeah, I'd guess this is a Firefox issue with changes in Nightly. Lemme ask internally.

[jnachtigall]

I did test with mozregression, actually back until 2017-06-07. All the same: big scrollbars. Then I tried the last version of React addon before the current one, which is 2.4: Also big scrollbars. And before this, this the addon was not themed at all.

So I am not sure anymore this has ever worked. Don't know, I was pretty sure it worked, but maybe I just dreamed it 😴

[bvaughn]

Well, this _could_ be accomplished by defining styles for -webkit-scrollbar + -webkit-scrollbar-thumb but I'm not sure that's a path we should go down. I'd be curious what Bryan thinks though.

[nt1m]

@clarkbw We have some internal code that handles floating scrollbars: https://dxr.mozilla.org/mozilla-central/source/devtools/client/shared/theme-switching.js#96

The reason why React DevTools can't benefit is because the theme-switching.js script is not loaded inside extensions (and it shouldn't be). The solution here would be creating a new script for extensions that does that bit of code, and then injecting it into extension frames.

[nt1m]

@bvaughn -webkit-scrollbar(-thumb) isn't supported by Firefox.

[bvaughn]

D'oh! Thanks for pointing that out @nt1m! I thought I'd tested Firefox before posting..

[jnachtigall]

So according to @nt1m in https://github.com/facebook/react-devtools/issues/856#issuecomment-318313797 this is more of a Firefox issue. I suspect that this "bug" is also visible for other Firefox DevTool extensions like for Vue.js, Angular or the like. So I went ahead and filed a bug at BMO: https://bugzilla.mozilla.org/show_bug.cgi?id=1388329

@nt1m or @clarkbw Maybe you could triage there or get someone assigned? (BMO always feels a bit like a bug dumping ground to me and unless some very intelligent data mining approaches are used these bugs seem to get lost there forever ;)

Closing here as there seems nothing actionable for the React DevTools

[bvaughn]

Thanks for the update!