Closed Bug 1221249 Opened 4 years ago Closed 4 years ago

Devtools Bezier Editor has "Ease-in-out" text clipped twice & "Exponential" text clipped

Categories

(DevTools :: General, defect)

defect
Not set

Tracking

(firefox44 fixed, firefox45 fixed, b2g-v2.5 fixed)

RESOLVED FIXED
Firefox 45
Tracking Status
firefox44 --- fixed
firefox45 --- fixed
b2g-v2.5 --- fixed

People

(Reporter: dholbert, Assigned: pbro)

Details

Attachments

(7 files, 1 obsolete file)

Attached file testcase 1
STR:
 1. Load attached testcase.
 2. Right click the text & choose "Inspect Element"
 3. In the Rules pane, click the bezier editor button (after "animation-timing-function")

ACTUAL RESULTS:
As shown in attached screenshots:
 - Both instances of "Ease-in-out" are clipped (final 1 to 1.5 letters aren't visible)
 - "Exponential" is clipped (final 1.5 letters aren't visible)

EXPECTED RESULTS: Letters not clipped. Slightly bigger dialog, or slightly smaller font size.


Note: This section gets overflow scrollbars, so I can see the letters if I scroll. However, it's only *barely* not big enough, so the scrollbars really seem silly.

I'm using the latest linux64 Nightly build, 45.0a1 (2015-11-03), on Ubuntu 15.10
As you can see in the first screenshot, we show scrollbars due to the overflow in this little dialog. If I scroll the scrollbars to their bottom-right extreme, then you can see this content; here's a screenshot showing that.

However, it'd be better if we could make the area a bit bigger or the content a bit smaller to avoid overflow in the first place.
Attachment #8682648 - Attachment description: screenshot → screenshot #1 (showing the overflow/cropping)
I wonder why is the font so big on Ubuntu by default. I just opened my Linux VM and I can see the same problems. After looking for system font settings in the Ubuntu settings app, I found that the "Large Text" option was ON in the "Universal Access" category. And I don't think I've ever changed it so it must be ON by default.

With it OFF, the layout is already a lot better. The "Ease-in-out" preset category name still sticks out, but all of the rest fits nicely and there's no scrollbars.

This thing is, the devtools UI is pretty packed with buttons and tabs and what not, and it sort of assumes that the font will be reasonably small.

The cubic-bezier editor doesn't make use of ellipsis on text, and it should, this would avoid the scrollbars and overflows. Of course we could also make the panel a little wider too.

I'm puzzled by something though, how come some of the fonts in devtools are huge when the "large font" option ON, and others not so huge. For example, on Windows, the font-size of the tabs and the font-size of DOM nodes in the inspector is the same. But on Windows, they're different. I think all fonts in the devtools UI should have the same size as the font used in the inspector.
(In reply to Patrick Brosset [:pbrosset] [:pbro] from comment #3)
> I'm puzzled by something though, how come some of the fonts in devtools are
> huge when the "large font" option ON, and others not so huge. For example,
> on Windows, the font-size of the tabs and the font-size of DOM nodes in the
> inspector is the same. But on Windows, they're different. I think all fonts
> in the devtools UI should have the same size as the font used in the
> inspector.
Looks like that's because some of the UI (rule-view, markup-view, debugger, ...) use the 'devtools-monospace' class, which defines font-size at 80%.
This just fixes the most problematic things: prevents text from overflowing and causing scrollbars.
I think that's a good first fix to have anyway.

I still would like to know why the devtools-monospace things are smaller than the rest of the UI though (and that seems to be only on linux by the way: https://dxr.mozilla.org/mozilla-central/source/devtools/client/themes/common.css#20 )

I'll attach screenshots of the UI with this fix.
Assignee: nobody → pbrosset
Status: NEW → ASSIGNED
Attachment #8683075 - Flags: review?(bgrinstead)
And while I was at it, I cleaned most of the eslint errors/warnings in the widget file.
Attachment #8683076 - Flags: review?(bgrinstead)
Here's the popup, on Linux, with the (default?) Large Fonts accessiblity option ON.
Here's the popup, on Linux, with the (default?) Large Fonts accessiblity option OFF.
So as you can see from the screenshots, it's not ideal yet, but at least it gets rid of the scrollbars and text overflows, and it's a simple enough css fix that we could uplift this easily to 44 for our new users trying out this tool on devtoolschallenger.
(In reply to Patrick Brosset [:pbrosset] [:pbro] from comment #5)
> I still would like to know why the devtools-monospace things are smaller
> than the rest of the UI though (and that seems to be only on linux by the
> way:
> https://dxr.mozilla.org/mozilla-central/source/devtools/client/themes/common.
> css#20 )

See the discussion in Bug 900173
Attachment #8683076 - Flags: review?(bgrinstead) → review+
Comment on attachment 8683075 [details] [diff] [review]
Bug_1221249_-_Fix_the_cubic-bezier_tooltip_layout_.diff

Review of attachment 8683075 [details] [diff] [review]:
-----------------------------------------------------------------

What about also bumping up the width on let dimensions = {width: "410", height: "360"} call in: https://dxr.mozilla.org/mozilla-central/source/devtools/client/shared/widgets/Tooltip.js#833.  Maybe it could be even 500px wide since it's a whole editor thing, and that would give some breathing room to accommodate different platforms, non-default fonts, etc.
Attachment #8683075 - Flags: review?(bgrinstead) → review+
Addressed the review comment. The tooltip looks good with a 500px width.
Also, I just landed both patches on fx-team. This is a css-only changed and we have no tests that exercise this, and tests still pass locally, so I'm not pushing to try.
Attachment #8683075 - Attachment is obsolete: true
Attachment #8683594 - Flags: review+
https://hg.mozilla.org/mozilla-central/rev/ec4ee5193b0d
https://hg.mozilla.org/mozilla-central/rev/6ac369029818
Status: ASSIGNED → RESOLVED
Closed: 4 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 45
Comment on attachment 8683594 [details] [diff] [review]
Bug_1221249_-_Fix_the_cubic-bezier_tooltip_layout_.diff

Approval Request Comment
[Feature/regressing bug #]: Bug 1134568 introduced a new piece of UI that overflows on Linux.
[User impact if declined]: If declined, people using the cubic-bezier popup on dev-edition on Linux will see text overflowing from various labels and buttons. This is especially important because we're promoting this tool heavily in dev-edition with the DevToolsChallenger demo.
[Describe test coverage new/current, TreeHerder]: This is a CSS-only change and we don't have visual tests for this.
[Risks and why]: The patch makes sure labels in various locations get an ellipsis if they don't fit, so I don't see a risk associated with this.
[String/UUID change made/needed]: None

Note that there's a second patch in this bug, but it's just a code cleanup, I don't think it should be uplifted.
Attachment #8683594 - Flags: approval-mozilla-aurora?
Comment on attachment 8683594 [details] [diff] [review]
Bug_1221249_-_Fix_the_cubic-bezier_tooltip_layout_.diff

This fixes a layout issue with the new CSS animation/layout tools in DevEd44, let's uplift to aurora44.
Attachment #8683594 - Flags: approval-mozilla-aurora? → approval-mozilla-aurora+
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.