Switch to AccessibleImage in Frames component broke SmartTrace

[nchevobbe]

We used to embed the icon's SVG directly in the markup, so icons were displayed in SmartTrace too.
But since we switched to AccessibleImage, we don't have the SVG anymore, and the icon are displayed via CSS (either with background-image or mask-url).
Because the webconsole (which use the SmartTrace component) don't load the debugger CSS files, images are not displayed in the console anymore.
For now, I plan to simply hide the framework icons, and add only what's needed for the arrow to show up in Group, but we should fix this and find a way to share those images with consumer outside of the debugger (console, maybe in the future netmonitor).

[nchevobbe]

The naive solution would be to simply load the whole debugger.css file, but:

• it's very large, and contain things the other panel maybe not need
• its rules may clashes with other panel content (for example .img, or .arrow are pretty generic and break things).

I'd be in favor of having the Svg.css (and Accessible.css) copied to the debugger folder directly (i.e. not included in the big debugger.css file), so consumers can use them safely.

[jasonLaster]

@nchevobbe could you load Frames.css, Svg.css or something equivelant?

[nchevobbe]

@nchevobbe could you load Frames.css, Svg.css or something equivelant?

Probably, yes. If we go that way, we should be careful of classname clashes though. I'll try that soon.

[fvsch]

The CSS for these icons was in a handful of places, and is now in two stylesheets:

• src/components/shared/AccessibleImage.css
• src/components/shared/SourceIcon.css

we should be careful of classname clashes though

Yep, as mentioned in #7905 the selectors in Debugger are often not built for reusability.
I tried to make sure that when we use e.g. .vue in CSS, it's always scoped by the .img class:

.img.vue {
  background-image: url(/images/sources/vuejs.svg);
  background-color: transparent !important;
}

Then there is the issue of the .img { /* bunch of styles */ } rule itself. "img" is a short and common name, I expect it might be used in other panels, and if we load AccessibleImage.css in those panels it might wreak havoc.

One solution could be to change those selectors to something more specific, e.g.:

.dbg-img {
  /* base style */
}

.dbg-img-vue {
  background-image: url(/images/sources/vuejs.svg);
  background-color: transparent !important;
}

[janodvarko]

Cloned into Bugzilla https://bugzilla.mozilla.org/show_bug.cgi?id=1695634

Firefox Developer Tools (including Debugger tool) development is now entirely happening in Bugzilla and new issues should be reported here: https://bugzilla.mozilla.org/enter_bug.cgi?product=DevTools&component=Debugger

Honza