1553795 - Fix preset input in filter tooltip

Status: RESOLVED FIXED

(DevTools :: Inspector, defect, P2)

Description

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Attachment: Filter Tooltip issue.webm

Watch the Video as it shows how to reproduce this bug (video and audio).

STR

• Open the rule view.
• Add a filter to an element e.g. filter: blur(5px).
• Click the filter icon.
• Look towards the bottom right of the filter tooltip.
• Click inside the area where there is a small blemish.
• Type some text.

The text appears and pushes the whole tooltip to the left... closing and re-opening the tooltip doesn't fix it.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

:miker, if you think that's a regression, then could you try to find a regression range in using for example mozregression?

Comment 2

[Dace Jansone]

Hello!
I would like to work on this bug. Can I do that?

Comment 3

[Razvan Caliman [:rcaliman]]

(In reply to Dace Jansone from comment #2)

Hello!
I would like to work on this bug. Can I do that?

Hi!

You're welcome to work on this. The relevant files are likely:

• devtools/client/shared/widgets/tooltip/SwatchFilterTooltip.js
• devtools/client/shared/widgets/FilterWidget.js

If you haven't done so already, learn how to get the code and your development environment set up by starting here: https://docs.firefox-dev.tools/

Comment 4

[BugBot [:suhaib / :marco/ :calixte]]

Bugbug thinks this bug is a regression, but please revert this change in case of error.

Comment 5

[Dace Jansone]

Attachment: Bug 1553795 - Fix preset input in filter tooltip. r=rcaliman!

Fixed the problem that part of preset input field in filter widget was vissible
when it shouldn't be.

Comment 6

[Dace Jansone]

I have reproduced the problem in this jsfiddle: https://jsfiddle.net/7yqdn5ta/ (added red border to show where filter widget ends).
The CSS code hiding the preset list is as follows:

#filter-container:not(.show-presets) .presets-list{
  width: 0;
  border-left: none;
  padding-left: 0;
}

But setting width to 0 only hides the element itself and doesn't hide it's children. I assume that is why the tooltip input element is visible.
To fix this I can either add overflow: hidden; rule to the style (as per this SO answer: https://stackoverflow.com/a/47986458/5913386) or I can just hide everything by replacing the rules with display: none;.

Which do you think would be a better solution?

Comment 7

[Razvan Caliman [:rcaliman]]

Thanks for taking the time to look into the issue!
The overflow: hidden on #filter-container .presets-list seems like the most sensible approach.

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/5564cc454394
Fix preset input in filter tooltip. r=rcaliman

Comment 9

[Andreea Pavel [:apavel]]

https://hg.mozilla.org/mozilla-central/rev/5564cc454394

Comment 10

[Ryan VanderMeulen [:RyanVM]]

Does this need uplift?