1288375 - Icons missing in css Filter tooltip with Light theme

Status: RESOLVED FIXED

(DevTools :: Inspector: Rules, defect)

Description

[Julian Descottes [:jdescottes]]

STRs:
- open devtools
- choose light theme
- create a filter property (eg "filter: unset")
- open the filter tooltip (click on button next to filter value)

ER: Icons should be displayed in the tooltip
AR: Icons are not visible (but still clickable)

Comment 1

[Julian Descottes [:jdescottes]]

Looks like this is related to scoped stylesheets. Selectors such as ".theme-light .add" do not work, as the .theme-light container is out of the scope of the stylesheet. The icons used to be gray and therefore were still visible.

One solution is to add the theme classnames to the tooltip container.
Another solution is to move all theme-* rules to tooltips.css, which is not scoped.

Comment 2

[Julian Descottes [:jdescottes]]

Attachment: Bug 1288375 - use css variables for bezier&filter tooltips styling;

Review commit: https://reviewboard.mozilla.org/r/66032/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/66032/

Comment 3

[Julian Descottes [:jdescottes]]

Comment on attachment 8773285 [details]
Bug 1288375 - use css variables for bezier&filter tooltips styling;

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/66032/diff/1-2/

Comment 4

[Julian Descottes [:jdescottes]]

Attachment: bug1288375.solution1.patch

Comment 5

[Julian Descottes [:jdescottes]]

Attachment: bug1288375.solution2.patch

Comment 6

[Julian Descottes [:jdescottes]]

Comment on attachment 8773285 [details]
Bug 1288375 - use css variables for bezier&filter tooltips styling;

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/66032/diff/2-3/

Comment 7

[Julian Descottes [:jdescottes]]

(In reply to Julian Descottes [:jdescottes] from comment #1)
> Looks like this is related to scoped stylesheets. Selectors such as
> ".theme-light .add" do not work, as the .theme-light container is out of the
> scope of the stylesheet. The icons used to be gray and therefore were still
> visible.
> 
> One solution is to add the theme classnames to the tooltip container.
> Another solution is to move all theme-* rules to tooltips.css, which is not
> scoped.

In the end I decided to simplify the current stylesheet rules when possible and to create new theme variables when needed. In the end only two new variables were needed and have been added to tooltips.css.

Comment 8

[Patrick Brosset <:pbro>]

Comment on attachment 8773285 [details]
Bug 1288375 - use css variables for bezier&filter tooltips styling;

https://reviewboard.mozilla.org/r/66032/#review63162

::: devtools/client/shared/widgets/cubic-bezier.css:72
(Diff revision 3)
> +      var(--bezier-curve-color) 49.7%,
> +      var(--bezier-curve-color) 50.3%,

`--bezier-curve-color` is probably not the best name here. This gradient just draws the light grey diagonal straight line that represents the linear timing-function in the background.
I would expect `--bezier-curve-color` to instead refer to the color of the curve that the user creates (which itself is blue-ish).

Maybe `--bezier-diagonal-color`? Or something better if you can find something.

Comment 9

[Julian Descottes [:jdescottes]]

Comment on attachment 8773285 [details]
Bug 1288375 - use css variables for bezier&filter tooltips styling;

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/66032/diff/3-4/

Comment 10

[Julian Descottes [:jdescottes]]

https://reviewboard.mozilla.org/r/66032/#review63162

> `--bezier-curve-color` is probably not the best name here. This gradient just draws the light grey diagonal straight line that represents the linear timing-function in the background.
> I would expect `--bezier-curve-color` to instead refer to the color of the curve that the user creates (which itself is blue-ish).
> 
> Maybe `--bezier-diagonal-color`? Or something better if you can find something.

Works for me! Thanks for the suggestion.

try: https://treeherder.mozilla.org/#/jobs?repo=try&revision=e9aaef6f3951

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/fx-team/rev/c2b31aa815f4
ruleview: fix invisible icons in filter widget tooltip;r=pbro

Comment 12

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/c2b31aa815f4

Comment 13

[Mohammad Maruf Rahman]

I have reproduced this bug Nightly 50.0a1 (2016-07-21) on Windows 7 , 64 Bit !

This bug's fix is verified with latest Developer Edition (Aurora)

Build ID   20160907004009
User Agent Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:50.0) Gecko/20100101 Firefox/50.0
[bugday-20160907]

Comment 14

[Nawaf Chowdhury Akash]

I have reproduced this bug with Nightly 50.0a1 (2016-07-21) on Deepin OS (linux) ,32 bit

This bug's fix is verified now with latest Developer Edition (Aurora) 50.0a2.

Build ID : 20160908004007
User Agent: Mozilla/5.0 (X11; Linux i686; rv:50.0) Gecko/20100101 Firefox/50.0.

[bugday-20160907]