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

Status: RESOLVED FIXED

(DevTools :: General, defect)

Description

[Daniel Holbert [:dholbert]]

STR:
 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)

ACTUAL RESULTS:
 (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.

EXPECTED RESULTS:
 * 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)

Comment 1

[Daniel Holbert [:dholbert]]

I'm using the latest linux64 Nightly, btw: version 45.0a1 (2015-11-03)

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: screenshot

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: (same screenshot, w/ issues circled)

Comment 4

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

Comment 5

[Daniel Holbert [:dholbert]]

(Also: my OS is Ubuntu 15.10.)

Comment 6

[Daniel Holbert [:dholbert]]

I can reproduce this bug in the latest Firefox DevEdition (/ Aurora) release, too -- 44.0a2 (2015-11-03)

Comment 7

[Alexandre Poirot [:ochameau]]

Attachment: patch v1

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.

Comment 8

[Alexandre Poirot [:ochameau]]

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

Comment 9

[Patrick Brosset <:pbro>]

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).

Comment 10

[Pulsebot]

https://hg.mozilla.org/integration/fx-team/rev/f4c516bc60ee

Comment 11

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

[Tracking Requested - why for this release]: Ensure we uplift back to 44

Comment 12

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

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

Comment 13

[Patrick Brosset <:pbro>]

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

Comment 14

[Ritu Kothari (:ritu) (Inactive, please n-i to RyanVM, jcristau, or pascal)]

Comment on attachment 8683163 [details] [diff] [review]
patch v1

This is the new stuff in DevEd44, let's uplift to Aurora.

Comment 15

[Ritu Kothari (:ritu) (Inactive, please n-i to RyanVM, jcristau, or pascal)]

Tracked as the new CSS animation editor is planned for FF44.

Comment 16

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/releases/mozilla-aurora/rev/bbd42656aa68

Comment 17

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/releases/mozilla-b2g44_v2_5/rev/bbd42656aa68