Closed Bug 1399841 Opened 7 years ago Closed 7 years ago

Some icons are not visible anymore when active

Categories

(DevTools :: Inspector, defect)

defect
Not set
normal

Tracking

(firefox57 verified)

VERIFIED FIXED
Firefox 57
Tracking Status
firefox57 --- verified

People

(Reporter: pbro, Assigned: jdescottes)

References

Details

Attachments

(3 files)

Attached image Capture.PNG
STR:
- switch to the new dark theme
- open a page that has a grid in it: http://labs.jensimmons.com/examples/grid-content-1.html
- select the <main> node in the inspector
- in the rule-view, click on the grid icon (waffle icon) in the display:grid declaration

--> expected: the icon should appear as selected/active
--> actual: the icon becomes invisible
Oh, same in light theme actually. The icon just disappears there too.
I don't understand what doesn't work anymore here. The icon is converted to a different color by using the following SVG color transformation matrix:
http://searchfox.org/mozilla-central/source/devtools/client/themes/images/filters.svg#6-12
This is a more general problem, the selector icon in the rule-view also exposes the symptom. Also the inspector icon inside the console.
Summary: the grid "waffle" icon is not visible anymore with the new dark theme when it is active → Some icons are not visible anymore when active
Assignee: nobody → jdescottes
Status: NEW → ASSIGNED
Comment on attachment 8908148 [details]
Bug 1399841 - use themed SVG filter for all DevTools active icons;

https://reviewboard.mozilla.org/r/179828/#review185040
Attachment #8908148 - Flags: review?(pbrosset) → review+
Comment on attachment 8908149 [details]
Bug 1399841 - add dedicated CSS variable to support filters in Firebug theme;

https://reviewboard.mozilla.org/r/179830/#review185042
Attachment #8908149 - Flags: review?(pbrosset) → review+
I had to use a dirty workaround to avoid applying filters on Firebug theme's checked icons (which are real images, and not SVGs).

I logged Bug 1399886 in order to start using fill-context, which should help us to clean both our filters+remove this Firebug theme specific hack.
See Also: → 1399886
Pushed by jdescottes@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/a413fc1e540f
use themed SVG filter for all DevTools active icons;r=pbro
https://hg.mozilla.org/integration/autoland/rev/0d5051ae4f94
add dedicated CSS variable to support filters in Firebug theme;r=pbro
https://hg.mozilla.org/mozilla-central/rev/a413fc1e540f
https://hg.mozilla.org/mozilla-central/rev/0d5051ae4f94
Status: ASSIGNED → RESOLVED
Closed: 7 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 57
Flags: qe-verify+
QA Contact: iulia.cristescu
Managed to reproduce the initial issue on 57.0a1 (2017-09-14). I can confirm that 57.0b7 build1 (20171009192146) is verified fixed using Windows 10 x64, Ubuntu 16.04 x64 and Mac OS X 10.11.6.
Status: RESOLVED → VERIFIED
Flags: qe-verify+
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.