mozilla / addons

☂ Umbrella repository for Mozilla Addons ✨
Other
127 stars 41 forks source link

Fix static theme wizard to handle oddly sized images #5220

Closed eviljeff closed 6 years ago

eviljeff commented 6 years ago

During ongoing development of the static theme wizard the ability to handle arbitrary sized background images seems to have to "optimized" out of the code 😞

Currently only images that are 200px high and at least 680px and rendered correctly. A different height or a shorter width and the image is scaled (wrongly).

ioanarusiczki commented 6 years ago

I made some tests using .png and .jpg samples for 680x200, 200x100, 1080x1920, 2016x1512. I've chosen red for the header area background.

680x200 .png and .jpg sized images won't display any changes in theme preview but when theme is installed the chosen red background is visible. The same for 1080x1920, 2016x1512. The small samples 200x100 were the only ones that look the same in theme preview and after installing them.

680x200 .png and .jpg samples in theme preview and after installing the themes

680x200

1080x1920 .png , 2016x1512 .jpg in theme preview and after installing the themes

big samples

200x100 .png and .jpg in theme preview and after installing the themes

200x100

Shouldn't the size of the image be settled at a specific height and width for upload, the same way as for the lightweight themes (3000x200 in their case) ?

eviljeff commented 6 years ago

No, images can be any size. They should be 200 high, like LWT, but it's not enforced and any size is handled in the browser (afaik).
re: the red showing for 680px wide images - I assume you're getting different results because you're using a larger browser window than 680px. The preview is only what you're going to see at that size - if the browser is larger or smaller it's going to be different. Potentially the wizard could be developed to support variable sized windows but that wouldn't help as the preview is rendered into a PNG eventually, and that's obviously a fixed size.

ioanarusiczki commented 6 years ago

@eviljeff I'm not sure that a different browser size is the problem because when I use the 680x200 .jpg sample and only edit the Toolbar Area background ( I selected blue for that area) the theme preview shows the same changes like any browser size after installing the theme. Shouldn't changing colors for the Header Area work like changing them for the Toolbar area?

blue toolbar

eviljeff commented 6 years ago

sorry, I'm lost what the problem is from looking at the videos. can you repeat with STR or come chat on IRC?

ioanarusiczki commented 6 years ago

I used a .png sample which supports transparency. The preview will display the changes for the Header Area Background. This is verified fixed on AMO dev using FF58 (Win 10).

png transparent