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

Status: RESOLVED FIXED

(DevTools :: Framework, defect, P2)

Description

[[:Aleksej]]

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.

Comment 1

[[:Aleksej]]

Attachment: screencast (1)

Comment 2

[Patrick Brosset <:pbro>]

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.

Comment 3

[Brian Grinstead [:bgrins]]

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

Comment 4

[[:Aleksej]]

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.

Comment 5

[Brian Grinstead [:bgrins]]

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.

Comment 6

[Patrick Brosset <:pbro>]

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.

Comment 7

[Patrick Brosset <:pbro>]

Attachment: MozReview Request: bz://1135635/pbrosset

/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/

Comment 8

[Brian Grinstead [:bgrins]]

Attachment: 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 9

[Brian Grinstead [:bgrins]]

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)

Comment 10

[Patrick Brosset <:pbro>]

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.

Comment 11

[Patrick Brosset <:pbro>]

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

Comment 12

[Patrick Brosset <:pbro>]

Attachment: alltabs-menu-button-MAC-LINUX.png

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.

Comment 13

[Patrick Brosset <:pbro>]

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/

Comment 14

[Patrick Brosset <:pbro>]

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

Comment 15

[Brian Grinstead [:bgrins]]

Attachment: alltabs-button-windows-7.png

Looks slightly off center in Windows, but overall works well

Comment 16

[Brian Grinstead [:bgrins]]

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

Comment 17

[Patrick Brosset <:pbro>]

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

Comment 18

[Patrick Brosset <:pbro>]

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

Comment 19

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/010123b89f29

Comment 20

[[:Aleksej]]

Verified fixed with font size 20 and 2015-04-24-03-02-04-mozilla-central-firefox-40.0a1.ru.linux-x86_64.

Comment 22

[Patrick Brosset <:pbro>]

Attachment: MozReview Request: Bug 1135635 - Position sidebar allTabs menu absolutely to avoid oveflow jittering; r=bgrins