1299935 - Define SVG fill from CSS

Status: RESOLVED DUPLICATE of bug 1399886

(DevTools :: General, enhancement, P3)

Comment 1

[Tim Nguyen :ntim]

Attachment: Define SVG fills with CSS

Comment 2

[Tim Nguyen :ntim]

Attachment: Define SVG fills with CSS

Comment 3

[Tim Nguyen :ntim]

Issues I've found:
- icons with hardcoded filters will have the wrong colour
- firebug theme is completely broken

I'll leave the feedback flag for code feedback.

Comment 4

[Brian Grinstead [:bgrins]]

Comment on attachment 8787428 [details] [diff] [review]
Define SVG fills with CSS

Review of attachment 8787428 [details] [diff] [review]:
-----------------------------------------------------------------

Interesting trick.  What does this buy us over the current filter approach though?

::: devtools/client/themes/common.css
@@ +544,5 @@
> +#requests-menu-perf-notice-button .button-icon,
> +#canvas-debugging-empty-notice-button .button-icon,
> +#toggle-breakpoints[checked] > image,
> +.event-tooltip-debugger-icon {
> +  filter: url("images/filters.svg#fill");

Shouldn't this still use the invert filter as before - and only use the #fill filter for checked icon state where we know the color we want to get to?

@@ +545,5 @@
> +#canvas-debugging-empty-notice-button .button-icon,
> +#toggle-breakpoints[checked] > image,
> +.event-tooltip-debugger-icon {
> +  filter: url("images/filters.svg#fill");
> +  fill: currentColor;

I don't think the fill should be related to the text color of these elements, might be why this isn't working in the firebug theme

Comment 5

[Tim Nguyen :ntim]

Not going to work on this anytime soon