search

oddsdk / odd-devtools

An extension to help developers use the Webnative SDK
Apache License 2.0
2 stars 1 forks source link

Add theming that updates with devtools toolbox theme #28

Closed jeffgca closed 1 year ago

jeffgca commented 1 year ago

Looks like we can do this pretty easily:

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools/panels/onThemeChanged

Eg I was able to add this debug code in devtools.js and it worked:

browser.devtools.panels.onThemeChanged.addListener(() => {
  console.log('theme changed?', browser.devtools.panels.themeName)
})
jeffgca commented 1 year ago

Looks like we can do this pretty easily:

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools/panels/onThemeChanged

Eg I was able to add this debug code in devtools.js and it worked:

browser.devtools.panels.onThemeChanged.addListener(() => {
  console.log('theme changed?', browser.devtools.panels.themeName)
})

....this does not work on chrome. What does work is passing the value of browser.devtools.panels.themeName into the panel in the onShown handler.

Chrome has some additional limitations / differences:

  1. In chrome, the value of 'browser.devtools.panels.themeName' doesn't change if the user changes the theme and then goes back to our panel. The user would have to close the devtools and re-open them for this to be updated. On Firefox this value is updated right away.
  2. in chrome, the theme names provided by the platform are either "default" or "dark", whereas in Firefox they are "light" or "dark"

TODO: test Safari I guess