If you think a bug might affect users in the 57 release, please set the correct tracking and status flags for Release Management.

Open a new tab button shakes after it reaches the right edge of Firefox

RESOLVED FIXED in Firefox 36

Status

()

Firefox
Theme
RESOLVED FIXED
3 years ago
3 years ago

People

(Reporter: bogdan_maris, Assigned: bgrins)

Tracking

35 Branch
Firefox 36
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [devedition-polish])

Attachments

(2 attachments, 1 obsolete attachment)

(Reporter)

Description

3 years ago
Created attachment 8518167 [details]
Screencast showing the issue

STR:
1. Open Firefox Developer Edition.
2. Open new tabs until the '+' button (open a new tab button) reaches the right edge.
3. Click on '+' button to add more tabs.

Expected result: The button does not shake.

Actual result: Button shakes if it`s clicked after it reaches the right edge of FF until navigation arrow buttons appear, after that happens it returns to normal.

I also noticed that on Ubuntu the '+' button is colored blue, is this intended?

Notes:
1. This issue reproduces on Windows and Ubuntu only.
2. Not reproducible on Mac OS X.
3. Screencast showing the issue attached.
(Reporter)

Updated

3 years ago
Blocks: 1053434

Updated

3 years ago
Group: mozilla-employee-confidential
(Assignee)

Comment 1

3 years ago
> I also noticed that on Ubuntu the '+' button is colored blue, is this
> intended?

That's what happens even on lightweight themes on linux.  Take a look at bug 940326 for more information
(Assignee)

Comment 2

3 years ago
(In reply to Bogdan Maris, QA [:bogdan_maris] from comment #0)
> Created attachment 8518167 [details]
> Screencast showing the issue
> 
> STR:
> 1. Open Firefox Developer Edition.
> 2. Open new tabs until the '+' button (open a new tab button) reaches the
> right edge.
> 3. Click on '+' button to add more tabs.
> 
> Expected result: The button does not shake.
> 
> Actual result: Button shakes if it`s clicked after it reaches the right edge
> of FF until navigation arrow buttons appear, after that happens it returns
> to normal.
> 

Thanks for the report, are you talking about the icon subtly moving location during the click, or the button itself disappearing from under the mouse once the 'all tabs' button shows up?
Flags: needinfo?(bogdan.maris)

Comment 3

3 years ago
I can reproduce this, it must be because of the selectors we use for the tabs.

Comment 4

3 years ago
(In reply to Tim Nguyen [:ntim] from comment #3)
> I can reproduce this, it must be because of the selectors we use for the
> tabs.

*tab separators.
(Assignee)

Comment 5

3 years ago
(In reply to Tim Nguyen [:ntim] from comment #4)
> (In reply to Tim Nguyen [:ntim] from comment #3)
> > I can reproduce this, it must be because of the selectors we use for the
> > tabs.
> 
> *tab separators.

I doubt that it is the tab separators, since that is now just changing the background-image and no longer changing widths/margins like the original version did.
(Reporter)

Comment 6

3 years ago
(In reply to Brian Grinstead [:bgrins] from comment #2)
> (In reply to Bogdan Maris, QA [:bogdan_maris] from comment #0)
> > Created attachment 8518167 [details]
> > Screencast showing the issue
> > 
> > STR:
> > 1. Open Firefox Developer Edition.
> > 2. Open new tabs until the '+' button (open a new tab button) reaches the
> > right edge.
> > 3. Click on '+' button to add more tabs.
> > 
> > Expected result: The button does not shake.
> > 
> > Actual result: Button shakes if it`s clicked after it reaches the right edge
> > of FF until navigation arrow buttons appear, after that happens it returns
> > to normal.
> > 
> 
> Thanks for the report, are you talking about the icon subtly moving location
> during the click, or the button itself disappearing from under the mouse
> once the 'all tabs' button shows up?

I`m talking about the button moving during the click.
Flags: needinfo?(bogdan.maris)
(Assignee)

Updated

3 years ago
Group: mozilla-employee-confidential

Updated

3 years ago
Whiteboard: [devedition-polish]
(Assignee)

Comment 7

3 years ago
I believe I've tracked this down when looking at 1093820.  Basically, there is a custom width on .tabs-newtab-button and #new-tab-button.  I think we only want that set on .tabs-newtab-button (at least on Windows).
(Assignee)

Comment 8

3 years ago
Created attachment 8521086 [details] [diff] [review]
tab-shake.patch

There were a few things going on here:
1) There was a margin: 0 that was meant to override the 1px margin-bottom from @tabToolbarNavbarOverlap@.  The problem is it wasn't applied to all buttons that have that overlap.  I've moved that into it's own more specific and limited rule.  (I know this still isn't totally ideal, but until bug 1091001 I think it's an improvement)
2) There was a width of 35px set to #TabsToolbar > #new-tab-button and .tabs-newtab-button. First of all, that should only have been set to .tabs-newtab-button (since the #new-tab-button is skinnier when overflowing in Windows).  Secondly, that width should have been 36 (66px from tabs.inc - 30px for the tab curves).
3)  There was an !important on the background-image rule, but as best as I can tell it is because of :hover rules like this: http://dxr.mozilla.org/mozilla-central/source/browser/themes/shared/tabs.inc.css#269.  By moving it into the :hover rule I got rid of the !important.

I've checked on osx, windows 7 aero / classic / basic, and ubuntu and there is no more shaking in them.
Assignee: nobody → bgrinstead
Status: NEW → ASSIGNED
Attachment #8521086 - Flags: review?(MattN+bmo)
Comment on attachment 8521086 [details] [diff] [review]
tab-shake.patch

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

::: browser/themes/shared/devedition.inc.css
@@ +306,2 @@
>  .tabs-newtab-button {
> +  width: 36px;

Would you mind converting https://mxr.mozilla.org/mozilla-central/source/browser/themes/shared/tabs.inc.css?rev=3adeab7e472d#319 to a calc() using @tabCurveWidth@ so we would catch this in the future?
Attachment #8521086 - Flags: review?(MattN+bmo) → review+
Does this mean we can remove the other workaround for jittering that landed yesterday?
(Assignee)

Comment 11

3 years ago
Created attachment 8521456 [details] [diff] [review]
tab-shake-r=MattN.patch

Using calc() in tabs.inc.css to make sure we don't miss this in the future
Attachment #8521086 - Attachment is obsolete: true
Attachment #8521456 - Flags: review+
(Assignee)

Comment 12

3 years ago
https://hg.mozilla.org/integration/fx-team/rev/882f3497f8aa
Whiteboard: [devedition-polish] → [fixed-in-fx-team][devedition-polish]
(Assignee)

Comment 13

3 years ago
(In reply to Matthew N. [:MattN] (UTC+1 until Nov. 22) from comment #10)
> Does this mean we can remove the other workaround for jittering that landed
> yesterday?

I think that was still an issue even with this fix, but I'll double check.
Flags: needinfo?(bgrinstead)
https://hg.mozilla.org/mozilla-central/rev/882f3497f8aa
Status: ASSIGNED → RESOLVED
Last Resolved: 3 years ago
Resolution: --- → FIXED
Whiteboard: [fixed-in-fx-team][devedition-polish] → [devedition-polish]
Target Milestone: --- → Firefox 36
(Assignee)

Comment 15

3 years ago
(In reply to Brian Grinstead [:bgrins] from comment #13)
> (In reply to Matthew N. [:MattN] (UTC+1 until Nov. 22) from comment #10)
> > Does this mean we can remove the other workaround for jittering that landed
> > yesterday?
> 
> I think that was still an issue even with this fix, but I'll double check.

Nope, sadly still jittering if I set the width back to 0px even with this fix.  It's unfortunate because now I realized that the 2px fix makes the selected tab look a little weird in windows / linux (it's not directly lined up with the side of the browser window anymore).
Flags: needinfo?(bgrinstead)
Sorry, I thought you realized that was a side-effect.

Comment 17

3 years ago
Bugday-20141218 :Button still shakes if it`s clicked after it reaches the right edge of FF until navigation arrow buttons appear, after that happens it returns to normal.
Flags: needinfo?(pratyasmitamishra)

Comment 18

3 years ago
Bugday-20141218 : The button does not shake and behaves as expected.

Comment 19

3 years ago
Bugday-20141218 : The button does not shake and behaves as expected.
Flags: needinfo?(pratyasmitamishra)

Comment 20

3 years ago
Bugday-20141218 : The button does not shake and behaves as expected.
You need to log in before you can comment on or make changes to this bug.