Color Scheme Simulator doesn't work in Inspect Tool for extension debugging?

Developer Tools
,
1

image
image
I’ve noticed that the Color Scheme Simulator is unusable when using the Inspect Tool for debugging extensions.

Specifically, the simulator buttons (light/dark/forced colour modes) are active and functional when inspecting regular web pages, but they are not there at all when inspecting temporary extensions. This makes it harder to test how extensions behave under different colour schemes.

I’ve attached screenshots to show the difference between a regular page and an extension context.

Is this a known limitation, an oversight, or something that I am missing? I feel like the Inspect Tool should support this for extensions as well. Would love to know if there’s a workaround or if this is something that could be fixed in a future release.

Thanks!

Edit: I did also try setting devtools.inspector.color-scheme-simulation.enabled, but that did not seem to affect this.

2

Thanks for the report. Which document would you want to simulation to be applied on? I guess you extension sidebar/popup ?

2 Likes
3

Yes indeed. I was working on the popup of an extension when I realized that I was able to access this when I was testing it served as a normal web-page (unrelated to Firefox tooling) but was unable to when inspecting it loaded as an extension.

So this would be with “Disable Popup Auto-Hide” enabled, and the popups HTML displayed.

1 Like
4

okay, thanks for your input

At the moment, we only show those buttons for the regular tab toolbox:

 * Enables the print and color scheme simulation only for local and remote tab debugging.
 */
async _initSimulationFeatures() {
  if (!this.inspector.commands.descriptorFront.isTabDescriptor) {
    return;
  }
  this.colorSchemeLightSimulationButton.removeAttribute("hidden");
  this.colorSchemeDarkSimulationButton.removeAttribute("hidden");
  this.printSimulationButton.removeAttribute("hidden");

I filed 1959921 - Enable light/dark simulation on webextension sidebar/popup documents to look into this

2 Likes