1708717 - Proton: About:addons and customize toolbar show outdated theme pictures

Status: RESOLVED FIXED

(Toolkit :: Add-ons Manager, defect, P2)

Description

[Pablo]

Attachment: themes.jpg

Affected versions
89.0b6 beta
90.0a1 nightly

Affected platforms
Ubuntu 20 64bit , win10 64bit, MacOS 10.14, windows 7 64bit

Preconditions
Proton ON (by default on nightly and beta)

Steps to reproduce
go to about:addons > click on Themes on left menu
go to hamburger menu > more tools> customize toolbar (check themes box at te bottom)

Actual result
old theme design pictures are shown, For example default is blue, tabs are square with a line at the top
wich does not match proton

Expected result
images should be updated to match proton.

Comment 1

[Pablo]

Hi romain, could you please set a priority for bug?
thanks!

Comment 2

[Romain Testard [:RT]]

Note that the hamburger menu > more tools> customize toolbar part of this bug should now be resolved on nightly.

Comment 4

[Rob Wu [:robwu]]

The theme previews are SVG files at toolkit/mozapps/extensions/content:

• Default theme - https://searchfox.org/mozilla-central/rev/5e955a47c4af398e2a859b34056017764e7a2252/toolkit/mozapps/extensions/content/default-theme.svg
• Dark theme - https://searchfox.org/mozilla-central/rev/5e955a47c4af398e2a859b34056017764e7a2252/toolkit/mozapps/extensions/content/firefox-compact-dark.svg
• Light theme - https://searchfox.org/mozilla-central/rev/5e955a47c4af398e2a859b34056017764e7a2252/toolkit/mozapps/extensions/content/firefox-compact-light.svg
• Alpenglow - https://searchfox.org/mozilla-central/rev/5e955a47c4af398e2a859b34056017764e7a2252/toolkit/mozapps/extensions/content/firefox-alpenglow.svg

AMO added support for Proton theme previews in https://github.com/mozilla/addons-server/pull/17193

Andrew, is it possible to get updated SVG files for the built-in themes?
For Alpenflow we may be able to get them from https://addons.mozilla.org/en-US/firefox/addon/firefox-alpenglow/, but for the built-in themes I'm still looking.

Comment 5

[Andrew Williamson [:eviljeff]]

Note: the SVG files AMO generates for it's previews contain a rasterized jpeg encoded inside for the flattened background image(s) which isn't the same as what is currently in m-c for the built-in themes - those are 100% SVG.

If AMOs previews are good enough then, assuming the in-built themes are also available packaged as xpis, it should be possible to just upload the xpi to AMO and use the svg files generated. (I can assist if it's not obvious where the files are for non-public themes).

Otherwise it'll be a matter of manually changing the xml in each file to reflect the updated design. https://github.com/mozilla/addons-server/files/6508808/theme-preview.svg.zip contains an svg for alpenglow

Comment 6

[Julian Gaibler]

Attachment: Bug 1708717 - Updated about:addons default theme previews.

Comment 7

[Julian Gaibler]

Attachment: updated.png

Hi! I updated the svgs to reflect the changes :)

Comment 8

[Rob Wu [:robwu]]

Thanks Julian, could you explain how you generated these theme previews? And add the description (or reference it) from the commit description for future reference?

I'm not sure if the "default theme" preview is correct; it has an image but I don't recall the default theme to have an image instead of a solid color.

FYI on image sizes:
The built-in theme previews are currently 664x90.
about:addons expects 680 x 92 (and resizes the preview accordingly to fit the width of 664px.
The new svgs are 680x92, which looks reasonable.

Comment 9

[Tomislav Jovanovic :zombie]

I'm not sure if the "default theme" preview is correct; it has an image but I don't recall the default theme to have an image instead of a solid color.

That looks to represent both/switching between light and dark theme, which is what the default "System theme" does.

Comment 10

[Julian Gaibler]

Hi!

I created the files for the AMO version in Figma already, so I just changed the colors and exported them as SVGs. It's filed in Figma under Firefox Desktop > Addons > Theme Preview.

If you have a suggestion on how I can change the commit message for future reference, that'd be great. Otherwise, maybe this comment might also be okay?

Comment 11

[Rob Wu [:robwu]]

(In reply to Julian Gaibler from comment #10)

If you have a suggestion on how I can change the commit message for future reference, that'd be great. Otherwise, maybe this comment might also be okay?

Depends on how you've uploaded the patch to Phabricator. Generally, you can edit the commit message (with git commit --amend or hg commit --amend) and then re-upload the changes with moz-phab submit.

An alternative is to use the web interface and add the commit message. To help future readers with recreating the images, you can add the full explanation or just a link to your comment ( https://bugzilla.mozilla.org/show_bug.cgi?id=1708717#c10 ).

Comment 12

[Julian Gaibler]

Oh sorry for the confusion! I meant it more in the sense of: What should I write to make it clear :)

Comment 13

[Rob Wu [:robwu]]

Is there a public (open source?) way to reproduce the theme previews? The purpose of my request in comment 8 is to enable future readers (who look up the revision history) to create new previews if needed (e.g. in response to theme changes, changes to preview image sizes for example, or new themes). Anything that can be used by future contributors or staff to generate new previews would be OK.

Comment 14

[Julian Gaibler]

Hmm, I see. Well, the original file is in Figma, which is probably the easiest way to change the size and colors of these SVGs (although I cleaned some up a little afterwards). That's why I mentioned the location within the MoCo Figma, because you could just reach out to someone from UX, so they provide the new sizes or colors for you :)

The other way that's slightly less easy but open-source, would be to just edit the existing SVG files. I think especially the dark and light theme previews provide good templates for further editing.

Do you think this is enough context for someone that finds this bug through the revision history? :)

Comment 15

[Rob Wu [:robwu]]

Yup, thanks. I'll just land the patch as is, the context can be found through the bug number.

Comment 16

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/4f936e5afaa8
Updated about:addons default theme previews. r=robwu

Comment 17

[Alexandru Michis [:malexandru]]

https://hg.mozilla.org/mozilla-central/rev/4f936e5afaa8