1105793 - Hamburger button is blurry and too small since bug 1080406 landed

Status: RESOLVED DUPLICATE of bug 1097062

(Firefox :: Theme, defect)

Description

[u428464]

Attachment: Hamburger button smaller and a bit blurry

The hamburger button looks smaller and blurry on Windows 7 at least. Tested with normal DPI.

Comment 1

[:Gijs (he/him)]

Panos/Matteo, can you look into this?

Comment 2

[Panos Astithas (he/him) [:past] (please ni?)]

Unfortunately I'm traveling and don't have a Windows laptop with me. Is this on Nightly? The icon does look crispy on my Linux Nightly.

Comment 3

[Loic]

Attachment: ff33-36-100p.png

Pretty visible with normal DPI (100%) on win 7.

Comment 4

[Loic]

Attachment: ff33-36-125p.png

Comment 5

[:Gijs (he/him)]

The difference is pronounced on Win8 as well, fwiw.

Comment 6

[:Gijs (he/him)]

This happens everywhere, because the reason this happens is:

http://mxr.mozilla.org/mozilla-central/source/browser/base/content/browser.css#850

850 toolbarbutton.badged-button > .toolbarbutton-badge-container > .toolbarbutton-icon,
851 toolbarbutton[type="socialmark"] > .toolbarbutton-icon {
852   max-width: 16px;
853 }

and we should override this for the menu button. I think we can't use :not() because then that rule will be more specific than the one below it, which changes this for the palette (where it sets a 32px max-width).

I don't know how this rule is meant to work for the panel, where I suspect it already won't work well. In fact, looking back, I noted this in bug 994280 comment 12, but nobody seems to have acted on that, and the final reviews weren't done by me. What happens if you move a badged social or SDK button to the panel in Firefox 35?

Comment 7

[Dão Gottwald [:dao]]

(In reply to :Gijs Kruitbosch from comment #6)
> This happens everywhere, because the reason this happens is:
> 
> http://mxr.mozilla.org/mozilla-central/source/browser/base/content/browser.
> css#850
> 
> 850 toolbarbutton.badged-button > .toolbarbutton-badge-container >
> .toolbarbutton-icon,
> 851 toolbarbutton[type="socialmark"] > .toolbarbutton-icon {
> 852   max-width: 16px;
> 853 }
> 
> and we should override this for the menu button.

It's not clear to me why this rule exists in the first place. badged-button shouldn't imply an icon size. toolbarbutton-1 should theoretically do this, although if I remember correctly we stopped doing it there because add-on authors complained about icons getting blurry when resized. Because different people want different things, this was then restored for toolbarbutton[sdk-button="true"] in bug 882910: http://hg.mozilla.org/mozilla-central/annotate/1162e4a4d7a2/browser/themes/windows/browser.css#l734

The bottom line is, if you want your icon sized automatically, make sure you're an SDK button (until we fix toolbarbutton-1 again). Whether or not you have a badge shouldn't matter.

Comment 8

[:Gijs (he/him)]

(In reply to Dão Gottwald [:dao] from comment #7)
> (In reply to :Gijs Kruitbosch from comment #6)
> > This happens everywhere, because the reason this happens is:
> > 
> > http://mxr.mozilla.org/mozilla-central/source/browser/base/content/browser.
> > css#850
> > 
> > 850 toolbarbutton.badged-button > .toolbarbutton-badge-container >
> > .toolbarbutton-icon,
> > 851 toolbarbutton[type="socialmark"] > .toolbarbutton-icon {
> > 852   max-width: 16px;
> > 853 }
> > 
> > and we should override this for the menu button.
> 
> It's not clear to me why this rule exists in the first place.

I can't prove it, but I had a feeling you would chime in and say this. :-)

I would agree, generally speaking. We should check with the SDK folks if just toolbarbutton[sdk-button].badged-button is enough for their uses or not.

Comment 9

[Brian Grinstead [:bgrins]]

This is a duplicate of Bug 1097062 (which is assigned to Matteo)

Comment 10

[Brian Grinstead [:bgrins]]

(I'll let him decide if he wants to dup this bug or the other one)

Comment 11

[Johan C]

Closing this as a duplicate of bug 1097062 since the issue was fixed there.