1372055 - 1password ships icon that looks cut-off when viewed against a dark background (like the compact dark theme)

Status: RESOLVED WONTFIX

(WebExtensions :: General, defect)

Description

[Jesse Peden]

Attachment: Screen Shot 2017-06-11 at 7.53.50 PM.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:53.0) Gecko/20100101 Firefox/53.0
Build ID: 20170518000419

Steps to reproduce:

Use Compact Dark and then use Compact Light
Notice the differences


Actual results:

The toolbar height when using Compact Light is different than when using Compact Dark, which cuts off the bottom of certain icons as a result. See screenshots.


Expected results:

Only the coloring should change, not the height of any of the toolbars or any other aspect of the window.

Comment 1

[Jesse Peden]

Attachment: Screen Shot 2017-06-11 at 7.54.09 PM.png

Comment 2

[:Gijs (he/him)]

I don't see any difference in height between compact light/dark. Can you test on a clean profile and/or bisect your add-ons to see which, if any, is interfering with the compact theme styling?

Comment 3

[Jesse Peden]

I disabled all of my add-ons aside from the one with the icon I showed in the screenshot that has its bottom cut off, and the issue is still present.

I also created a new profile to test with, installed ONLY the add-on that I can visibly see this happen with, and it still happened.  This doesn't happen with any other themes/personas, nor does it appear to happen with any other add-on (which would go toward your argument that it must be the add-on itself causing the problem).  I'll reach out to the developers of that app to see what they have to say about it, but when switching between the 2 themes/personas, I don't see any movement of icons or anything, leading me to believe that it must be the dimensions of the themes (but you say they're identical).

Comment 4

[:Gijs (he/him)]

(In reply to Jesse Peden from comment #3)
> I disabled all of my add-ons aside from the one with the icon I showed in
> the screenshot that has its bottom cut off, and the issue is still present.
> 
> I also created a new profile to test with, installed ONLY the add-on that I
> can visibly see this happen with, and it still happened.

Just for my sense of this, which add-on is this? I'm afraid I don't recognize it just from the icon...

>  This doesn't
> happen with any other themes/personas, nor does it appear to happen with any
> other add-on (which would go toward your argument that it must be the add-on
> itself causing the problem).  I'll reach out to the developers of that app
> to see what they have to say about it, but when switching between the 2
> themes/personas, I don't see any movement of icons or anything, leading me
> to believe that it must be the dimensions of the themes (but you say they're
> identical).

Yeah, the code is basically in the same CSS files ( http://searchfox.org/mozilla-central/source/browser/themes/shared/compacttheme.inc.css and http://searchfox.org/mozilla-central/source/browser/themes/osx/compacttheme.css for OS X) , and the main differences are colours. I can't think of anything that would alter the size of the toolbar in there that'd be different between dark/light colours.

The other odd thing about the icon being cut off is that it looks like the separator in the button including pocket (on the left of the problematic button in your screenshots) descends past the point where the icon is being cut off... Because the screenshot is cropped, I can't tell if there are other things that lead you to conclude that it's the toolbar height that's different - are there?

Comment 5

[Jesse Peden]

The one I see it on is the extension icon for 1Password.

No, that's the only thing causing me to think that it's the height.  The bottom being cut off like that, to me, seems like it's not the same on Dark as it is on Light.

Comment 6

[:Gijs (he/him)]

Attachment: 1password icon

Comment 7

[:Gijs (he/him)]

Attachment: View image against black background

Comment 8

[:Gijs (he/him)]

Comment on attachment 8877944 [details]
View image against black background

Attaching this doesn't seem to work, but if you open this URL in a new tab (which just loads the icon I attached against a black background):

data:text/html,%3Cbody style%3D"background%3Ablack"%3E%3Cimg src%3D"https%3A%2F%2Fbug1372055.bmoattachments.org%2Fattachment.cgi%3Fid%3D8877943"%3E

Then you'll see that it's the shadow underneath the icon which is cut off *in the icon*. It's not visible in the light theme because the light theme's background color is the same color as the shadow under the icon.

In other words, this is an issue with the icon shipped by 1password and how it doesn't fit well with the dark theme.

Comment 9

[:Gijs (he/him)]

Andreas, do we have contact info for the 1password folks to make them aware of this? Maybe they can use a different icon in their upcoming webextension version?

Comment 10

[Andreas Wagner [:TheOne] [use NI]]

I have notified the developer.

Comment 11

[Jamie Phelps]

This will be resolved when we move to WebExtensions, which is coming soon.

Comment 12

[Jorge Villalobos [:jorgev] (he/him)]

Mass-closing bugs that relate to legacy versions of add-ons or are otherwise no longer worth tracking. Please comment if you think this bug should be reopened.

Sorry for the bugspam. Made you look, though!