Icons missing in css Filter tooltip with Light theme

RESOLVED FIXED in Firefox 50

Status

defect
RESOLVED FIXED
3 years ago
Last year

People

(Reporter: jdescottes, Assigned: jdescottes)

Tracking

Trunk
Firefox 50

Firefox Tracking Flags

(firefox50 fixed)

Details

Attachments

(1 attachment, 2 obsolete attachments)

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)
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 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/
Attachment #8773285 - Attachment description: Bug 1288375 - add theme classList to tooltip container → Bug 1288375 - bezier&filter tooltips: move theme specific rules to tooltips.css
Attachment #8773285 - Attachment is obsolete: true
Posted patch bug1288375.solution1.patch (obsolete) — Splinter Review
Posted patch bug1288375.solution2.patch (obsolete) — Splinter Review
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/
Attachment #8773285 - Attachment description: Bug 1288375 - bezier&filter tooltips: move theme specific rules to tooltips.css → Bug 1288375 - use css variables for bezier&filter tooltips styling;
Attachment #8773285 - Attachment is obsolete: false
Attachment #8773285 - Flags: review?(pbrosset)
Attachment #8773298 - Attachment is obsolete: true
Attachment #8773300 - Attachment is obsolete: true
(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.
Assignee: nobody → jdescottes
Status: NEW → ASSIGNED
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.
Attachment #8773285 - Flags: review?(pbrosset) → review+
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/
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
Pushed by jdescottes@mozilla.com:
https://hg.mozilla.org/integration/fx-team/rev/c2b31aa815f4
ruleview: fix invisible icons in filter widget tooltip;r=pbro
https://hg.mozilla.org/mozilla-central/rev/c2b31aa815f4
Status: ASSIGNED → RESOLVED
Closed: 3 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 50
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]
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]
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.