Closed Bug 1135635 Opened 6 years ago Closed 6 years ago

Sidebar tabs "(CSS) Rules|Computed|Fonts|Block model…" are shaking horizontally with large system font size

Categories

(DevTools :: Framework, defect, P2)

x86_64
Linux
defect

Tracking

(firefox40 fixed)

RESOLVED FIXED
Firefox 40
Tracking Status
firefox40 --- fixed

People

(Reporter: Aleksej, Assigned: pbro)

References

Details

(Whiteboard: [bugday-20150223][polish-backlog][difficulty=easy])

Attachments

(5 files, 1 obsolete file)

g 2015-01-16-03-02-03-mozilla-central-firefox-38.0a1.en-US.linux-x86_64 cac6192956ab
b 2015-01-17-03-02-03-mozilla-central-firefox-38.0a1.en-US.linux-x86_64 369a8f14ccf8
b 2015-02-22-03-02-06-mozilla-central-firefox-38.0a1.ru.linux-x86_64
https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=cac6192956ab&tochange=369a8f14ccf8

1. Open Inspector at a non-empty page (Ctrl+Shift+C will do).
* The pointer should be on the page, and move between blocks of it (if you stop moving, the shaking will probably stop after a few seconds).
* Shaking will stop when the pointer is over the bar itself or the adjacent path bar.  It can still move when the pointer moves between the tabs, and the pointer can blink in some places supposed to be between tabs.
* It is more likely to happen when DevTools are in the default horizontal mode, not vertical, and especially not separate.
 

Actual results:
The devtools tab bar to the right of the path (like "Headers|Cookies|…" in attachment 8525353 [details]) is shifting left and right, at first rapidly shaking, then slower and slower, until it stops.  It can happen for at least 2 seconds.
Summary: devtools Inspector's section with "(CSS) Rules|Computed|Fonts|Block model…" is shaking horizontally → devtools Inspector's section with tabs "(CSS) Rules|Computed|Fonts|Block model…" is shaking horizontally
Attached video screencast (1)
Most probably due to bug 1101569 which is the bug that added the all-tabs menu to the Sidebar widget.
This menu appears and disappears automatically by listening to overflow/underflow events in its container.
So it might be that we're hitting a case where those events are fired rapidly, in turn.
The attached screencast seems to confirm that the menu appears and disappears.
(In reply to Patrick Brosset [:pbrosset] [:patrick] from comment #2)
> Most probably due to bug 1101569 which is the bug that added the all-tabs
> menu to the Sidebar widget.
> This menu appears and disappears automatically by listening to
> overflow/underflow events in its container.
> So it might be that we're hitting a case where those events are fired
> rapidly, in turn.
> The attached screencast seems to confirm that the menu appears and
> disappears.

Something similar happened with the tab strip in Dev Edition (bug 1111091), and it was due to a ::after element appearing and causing the overflow.  Once the overflow showed up an attribute changed which caused the ::after element to be removed, and it got stuck in a loop of doing this.  It's possible that something similar is happening here.
It is in Beta now.  It is annoying, not obvious how to stop, and might be an accessibility problem.

firefox-38.0b3.ru.linux64
2015-04-10-00-40-10-mozilla-aurora-firefox-39.0a2.ru.linux-x86_64

2015-04-10-03-02-04-mozilla-central-firefox-40.0a1.ru.linux-x86_64
2015-04-11-03-02-07-mozilla-central-firefox-40.0a1.en-US.linux-x86_64
With 1920x1080 and system font DejaVu Sans Book, it happens with system font size 15 and larger.
I've finally been able to reproduce by changing the system font.  Here's how in Ubuntu:

Software Center -> Install unity tweak tool
Change system font: Ubunutu -> 15

At this point, I can reproduce using the same STR as in Comment 1.
Whiteboard: [bugday-20150223] → [bugday-20150223][devedition-40][difficulty=easy]
Component: Developer Tools → Developer Tools: Framework
Summary: devtools Inspector's section with tabs "(CSS) Rules|Computed|Fonts|Block model…" is shaking horizontally → Sidebar tabs "(CSS) Rules|Computed|Fonts|Block model…" are shaking horizontally with large system font size
Priority: -- → P2
Assignee: nobody → pbrosset
Status: NEW → ASSIGNED
When the allTabs menu appears (on overflow), it causes a re-layout of the whole container, because it takes up space in it, and that's what causes an infinite over/underflow loop with some font settings (I can reproduce it quite easily on mac by making my devtools font way big).

My plan to fix this is to use a <stack> as the container element for the both the tabs and the allTabs menu. This way I can absolutely position the allTabs menu in front of the tabs, and therefore avoid causing the overflow/underflow infinite loop.
/r/7321 - Bug 1135635 - Position sidebar allTabs menu absolutely to avoid oveflow jittering

Pull down this commit:

hg pull -r 7b20942319a4e67fc1f92026eea74f6f031958ab https://reviewboard-hg.mozilla.org/gecko/
Attachment #8594784 - Flags: review?(bgrinstead)
Attached image hover-button.png
On linux (with defauly font size of 15px), this patch makes the "..." disappear (see screenshot).   Note that I'm hovering the .devtools-sidebar-alltabs element.
Comment on attachment 8594784 [details]
MozReview Request: bz://1135635/pbrosset

https://reviewboard.mozilla.org/r/7319/#review6087

I like the idea, but there is a problem with the text not showing up in Ubunutu with the patch applied (see https://bug1135635.bugzilla.mozilla.org/attachment.cgi?id=8594881)
Attachment #8594784 - Flags: review?(bgrinstead)
Thanks Brian.
I just realized VMWare Fusion doesn't work for me anymore. I filed a ticket to have it replaced/fixed, so I won't be investigating this until that's fixed first.
Blocks: 1152279
(In reply to Brian Grinstead [:bgrins] from comment #8)
> Created attachment 8594881 [details]
> hover-button.png
> 
> On linux (with defauly font size of 15px), this patch makes the "..."
> disappear (see screenshot).   Note that I'm hovering the
> .devtools-sidebar-alltabs element.
Linux seems to require an extra -moz-appearance:none so at least the button is visible. That doesn't make the ellipsis show, but it's a start.
I have found a way to make the allTabs button look the same across OSs. Since I couldn't make the "..." ellipsis appear on Linux, I reverted to using the default dropmarker that's inside the toolbarbutton by default (and that I had hidden in the original bug). It looks nice and also perhaps more intuitive (... suggested that there was more to show, but the dropmarker suggests that there's a menu to open).
It took a little bit of fiddling with padding in order to center it properly though, and as a result it does look a tiny bit different on Mac and Linux, but not that much, and to be honest, it's not the only thing that looks different in devtools.

Attaching a comparison screenshot.
Attachment #8594784 - Flags: review?(bgrinstead)
Comment on attachment 8594784 [details]
MozReview Request: bz://1135635/pbrosset

/r/7321 - Bug 1135635 - Position sidebar allTabs menu absolutely to avoid oveflow jittering; r=bgrins

Pull down this commit:

hg pull -r cbd78ecca00a737dcd8118119f0a09c497497c3d https://reviewboard-hg.mozilla.org/gecko/
Looks slightly off center in Windows, but overall works well
Comment on attachment 8594784 [details]
MozReview Request: bz://1135635/pbrosset

https://reviewboard.mozilla.org/r/7319/#review6225

This is fine - adding this css will fix Windows alignment:

.devtools-sidebar-alltabs .toolbarbutton-icon {
    display: none;
}

Assuming that change doesn't break other platforms, let's roll with it
Attachment #8594784 - Flags: review?(bgrinstead) → review+
(In reply to Brian Grinstead [:bgrins] from comment #16)
> Comment on attachment 8594784 [details]
> MozReview Request: bz://1135635/pbrosset
> 
> https://reviewboard.mozilla.org/r/7319/#review6225
> 
> This is fine - adding this css will fix Windows alignment:
> 
> .devtools-sidebar-alltabs .toolbarbutton-icon {
>     display: none;
> }
> 
> Assuming that change doesn't break other platforms, let's roll with it
Thanks Brian. Tested on Linux and Mac, looks fine.
https://hg.mozilla.org/mozilla-central/rev/010123b89f29
Status: ASSIGNED → RESOLVED
Closed: 6 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 40
Verified fixed with font size 20 and 2015-04-24-03-02-04-mozilla-central-firefox-40.0a1.ru.linux-x86_64.
Attachment #8594784 - Attachment is obsolete: true
Attachment #8619559 - Flags: review+
Whiteboard: [bugday-20150223][devedition-40][difficulty=easy] → [bugday-20150223][polish-backlog][difficulty=easy]
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.