Addons-frontend: Add-on custom icons are not correctly displayed

[ioanarusiczki]

Moving issue https://github.com/mozilla/addons-server/issues/7956

STR:

1. Go to Edit images in dev hub for a submitted ad-on
2. Upload a .jpg sample from edit images using upload a custom icon button
3. Save changes and click on View Listing
4. Observe the icon on the ad-on detail page

Actual result:
Images look a bit squashed.

Expected result:
Images are correctly displayed.

Notes:
This issue was reproducible for the user info card but then fixed here.
This issue is reproducible with .jpg and .png samples with normal size and dimension, it is more obvious for images with a larger width.
This is reproducible on AMO dev with FF59(Win10).

[caitmuenster]

If this is your first contribution, please refer to https://wiki.mozilla.org/Add-ons/Contribute/Code on how to get started.

Mentor: @willdurand

[ShivangiKakkar]

Hey, I am new to contributions for Mozilla. I would love to work on this issue, can I be assigned this issue, please?
@willdurand

[championshuttler]

Hi @ShivangiKakkar, thanks for your interest. Go for it!

First, you need to install the application locally. You can check the requirements here, in short, you need nodejs version 6( 8 also works fine). After that, please install Yarn from here.

After that, you can install the project dependencies by running yarn install and then please run yarn test to make sure project is installed successfully. Now you can start the local dev server by using yarn amo:dev.

If you have any doubt. Feel free to ask here :)

[ShivangiKakkar]

Thank you! @championshuttler
Working on it. :)

[ShivangiKakkar]

Hey @championshuttler, I wanted to clear few doubts I am facing:
1.) Expected result: Images look a bit squashed?
2.) When I click on dev hub it is showing an error saying, "This page does not exist in addons-frontend."
3.) Same error if I try to submit a new add-on.
4.) How to submit a test-addon?
Would you please help me out with these?

[ioanarusiczki]

@ShivangiKakkar 1. I corrected the expected result - I switched the actual with expected - now it's alright. Thanks!

1. &3.&4. For AMO dev https://addons-dev.allizom.org/en-US/firefox/ - I don't encounter this problem just make sure you have an account and sign in then click on Developer Hub and go to Submit an new add-on. Try with https://staticfil.es/webext-generator/ to download a dummy extension to test with.
   Let me know if you succeeded !
   Ioana

[championshuttler]

Hi @ShivangiKakkar
Sorry expected result is Images are correctly displayed. I think @ioanarusiczki mentioned it by mistake ;) .
For devhub you need to go to https://addons-dev.allizom.org/en-US/developers( you need to signup here)
For test-addon you can use this tool https://staticfil.es/webext-generator/

[ShivangiKakkar]

Thanks :) @championshuttler & @ioanarusiczki

[ShivangiKakkar]

Hey, @championshuttler
I am almost done with the issue, I am about to file PR.
Do I need to write a test case for it too?

[championshuttler]

Hey @ShivangiKakkar , it would be great with test case or you can add it while reviewing phase ;)

[willdurand]

Amazing, thanks for contributing @ShivangiKakkar!

[ioanarusiczki]

Verified fixed on AMO dev with FF61(Win10)
It sure looks way better now! Thanks @ShivangiKakkar