Closed Bug 1221238 Opened 9 years ago Closed 9 years ago

Devtools Filter Editor input fields get squashed / piled on top of, when preset list gets opened


(DevTools :: General, defect)

Not set


(firefox44+ fixed, firefox45 fixed)

Firefox 45
Tracking Status
firefox44 + fixed
firefox45 --- fixed


(Reporter: dholbert, Assigned: ochameau)




(4 files)

 1. Visit this data URL, or any page with a filter:
     data:text/html,<div style="filter:blur(1px)">InspectMe

 2. Right-click the filtered thing ("InspectMe") and choose Inspect.

 3. Click the filter editor icon in devtools inspector "Rules" view.

 4. Click the presets button. (the 3 stacked squares at the bottom-right)

 (a) The "Preset Name" field doesn't fit -- it sticks off the right side.
 (b) When the presets pane slides in, the UI for editing the existing filters (the text-input field, the "x" button) get squashed / piled on top of each other.

 * Preset name field should be smaller (or flexible).
 * Input fields for existing fields shouldn't pile on top of themselves; they should be flexible.

If this is all stuff in a flex container, it might be that we need some "min-width:auto" on some of this UI, to stifle an unreasonable "implied minimum size". (per  bug 1043520)
I'm using the latest linux64 Nightly, btw: version 45.0a1 (2015-11-03)
Attached image screenshot
Attached file testcase 1
(Also: my OS is Ubuntu 15.10.)
I can reproduce this bug in the latest Firefox DevEdition (/ Aurora) release, too -- 44.0a2 (2015-11-03)
Assignee: nobody → poirot.alex
Attached patch patch v1Splinter Review
Tested on linux and windows.
I don't know exactly why, but <input /> seems to have a bigger minimal size on linux.
Setting a smaller width fixes this, without actually resizing the input,
flew-grow still takes the lead and ensure that the input takes the whole horizontal space.
Attachment #8683163 - Flags: review?(pbrosset)
Comment on attachment 8683163 [details] [diff] [review]
patch v1

Review of attachment 8683163 [details] [diff] [review]:

Tested on all 3 platforms, looks good to me. Thanks for fixing this quickly Alex. We'll need to uplift this once it's on m-c (I'll keep track of this bug and request approval).
Attachment #8683163 - Flags: review?(pbrosset) → review+
[Tracking Requested - why for this release]: Ensure we uplift back to 44
Closed: 9 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 45
Comment on attachment 8683163 [details] [diff] [review]
patch v1

Approval Request Comment
[Feature/regressing bug #]: Original bug was bug 1055181. This introduced a new tooltip in devtools to edit CSS Filter values more easily.
This patch fixes the layout on Linux (input fields were too big).
[User impact if declined]: If declined, the layout will feel partly broken to Linux users. This is especially important because the CSS Filter tooltip is one of the heavily marketed pieces of devtools in DevEd 44.
[Describe test coverage new/current, TreeHerder]: Code is in m-c and manual tests have been done on all 3 platforms. There are no automated tests for the layout though (CSS-only).
[Risks and why]: No crash risk with this patch. If this was to fail in any way, the only consequence would be on the size of the inputs in the CSS Filter tooltip.
[String/UUID change made/needed]: None
Attachment #8683163 - Flags: approval-mozilla-aurora?
Comment on attachment 8683163 [details] [diff] [review]
patch v1

This is the new stuff in DevEd44, let's uplift to Aurora.
Attachment #8683163 - Flags: approval-mozilla-aurora? → approval-mozilla-aurora+
Tracked as the new CSS animation editor is planned for FF44.
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.