reload button looks broken when pinned to the overflow menu

VERIFIED FIXED in Firefox 57

Status

()

defect
P1
normal
VERIFIED FIXED
2 years ago
2 years ago

People

(Reporter: zalatik, Assigned: sfoster)

Tracking

57 Branch
Firefox 57
Points:
---

Firefox Tracking Flags

(firefox57 verified)

Details

(Whiteboard: [reserve-photon-structure])

Attachments

(2 attachments)

(Reporter)

Description

2 years ago
Posted image reload_button.png
User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:57.0) Gecko/20100101 Firefox/57.0
Build ID: 20170803100352

Steps to reproduce:

Right click on Reload button -> Pin to Overflow Menu


Actual results:

Reload button appears in Overflow Menu. In label only R letter is visible. There are wide margins on top and bottom of button.


Expected results:

Reload button appears in Overflow Menu. Full text of label is visible. No additinal margins.
Component: Untriaged → Toolbars and Customization

Comment 1

2 years ago
I can't reproduce the additional margins on OS X or on Linux, and text is not cut off for me, but the button still doesn't look completely right (mostly the button doesn't stretch to the edge of the popup).

Your Nightly is just over 2 weeks old - is it a tiny bit better on a more up-to-date build?
Status: UNCONFIRMED → NEW
Component: Toolbars and Customization → Theme
Ever confirmed: true
Flags: needinfo?(zalatik)
Summary: reload button looks weird after pin to overflow menu → reload button looks broken when pinned to the overflow menu
Whiteboard: [reserve-photon-structure]
(Reporter)

Comment 2

2 years ago
Sorry, my fault. After updating firefox the button looks as you described. I think the issue could be closed.
Flags: needinfo?(zalatik)

Comment 3

2 years ago
(In reply to zalatik from comment #2)
> Sorry, my fault. After updating firefox the button looks as you described. I
> think the issue could be closed.

No worries! I think we should still fix the size of the button - all the other items can be hovered further along the popup, and this item's size is too narrow (horizontally) and we should fix that. :-)
Flags: qe-verify+
Priority: -- → P4
QA Contact: gwimberly
(Assignee)

Comment 4

2 years ago
The #reload-button is actually one of 2 buttons in a toolbaritem#stop-reload-button. All the other buttons are children of a vbox, but this one is the child of a toolbaritem, with -moz-box-orient: normal. Giving the toolbaritem -moz-box-orient: vertical fixes the problem, but without knowing more about what can appear in here, I'm going to be guessing at the best patch.
Assignee: nobody → sfoster
Status: NEW → ASSIGNED
Iteration: --- → 57.3 - Sep 19
Priority: P4 → P1

Comment 6

2 years ago
mozreview-review
Comment on attachment 8908721 [details]
Bug 1392066 - #stop-button and #reload-button should fill available width when in the overflow menu.

https://reviewboard.mozilla.org/r/180354/#review185716

Unfortunately I don't think this quite works, see below.

::: browser/themes/shared/customizableui/panelUI.inc.css:1681
(Diff revision 1)
> +.widget-overflow-list > toolbaritem:not(.toolbarbutton-1) {
> +  -moz-box-orient: vertical;
> +}

I think we should only do this for the stop/reload button, because the selector you used here would also apply to the edit/zoom controls, which will look odd when laid out vertically (plus it'll mess with their other styling). I don't know if it works with the search box off-hand.

I also wonder if we could alternatively fix this by just giving both the stop and reload buttons -moz-box-flex: 1 when they're in the overflow list? That may be a simpler solution - I think it's also what we do for the search box, though I'm less sure off-hand.
Attachment #8908721 - Flags: review?(gijskruitbosch+bugs)

Comment 7

2 years ago
mozreview-review-reply
Comment on attachment 8908721 [details]
Bug 1392066 - #stop-button and #reload-button should fill available width when in the overflow menu.

https://reviewboard.mozilla.org/r/180354/#review185716

> I think we should only do this for the stop/reload button, because the selector you used here would also apply to the edit/zoom controls, which will look odd when laid out vertically (plus it'll mess with their other styling). I don't know if it works with the search box off-hand.
> 
> I also wonder if we could alternatively fix this by just giving both the stop and reload buttons -moz-box-flex: 1 when they're in the overflow list? That may be a simpler solution - I think it's also what we do for the search box, though I'm less sure off-hand.

In fact, maybe we give the search box `width: 100%`, which would be another option here.
Comment hidden (mozreview-request)
(Assignee)

Comment 9

2 years ago
I wasnt 100% sure where this rule belongs. The #stop-button and #reload-button may not be a unique case, but there's no similar rules for the contents of .widget-overflow-list that I could find, so this was my best guess. Another option could be near http://searchfox.org/mozilla-central/source/browser/themes/shared/customizableui/panelUI.inc.css#1686 ?

Comment 10

2 years ago
mozreview-review
Comment on attachment 8908721 [details]
Bug 1392066 - #stop-button and #reload-button should fill available width when in the overflow menu.

https://reviewboard.mozilla.org/r/180354/#review186088

Neat, thanks!
Attachment #8908721 - Flags: review?(gijskruitbosch+bugs) → review+

Comment 11

2 years ago
Pushed by sfoster@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/bc0b0b1a63fe
#stop-button and #reload-button should fill available width when in the overflow menu. r=Gijs
https://hg.mozilla.org/mozilla-central/rev/bc0b0b1a63fe
Status: ASSIGNED → RESOLVED
Last Resolved: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 57
I have reproduced this bug with Nightly 57.0a1 (2017-08-03) on Ubuntu 16.04, 64 bit!

The fix is now verified on Latest Nightly 57.0a1 .

Build ID 	20170919100405
User Agent 	Mozilla/5.0 (X11; Linux x86_64; rv:57.0) Gecko/20100101 Firefox/57.0
QA Whiteboard: [bugday-20170920]
Status: RESOLVED → VERIFIED
I can confirm that the reload-button fills the available width in the overflow menu after being hovered using Firefox 57.0b6 (BuildId:20171005195903) on Windows 10 64bit, macOS 10.11.6 and Ubuntu 16.04 64bit.
Flags: qe-verify+
You need to log in before you can comment on or make changes to this bug.