Closed Bug 1708717 Opened 7 months ago Closed 5 months ago

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

Categories

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

Desktop
All
defect

Tracking

()

RESOLVED FIXED
91 Branch
Tracking Status
firefox88 --- disabled
firefox89 --- wontfix
firefox90 --- wontfix
firefox91 --- fixed

People

(Reporter: pablo.muir, Assigned: julianwels)

References

(Blocks 1 open bug)

Details

(Whiteboard: Proton - about:pages)

Attachments

(3 files)

Attached image 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.

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

Severity: -- → S4
Flags: needinfo?(rtestard)
Blocks: 1693819, 1694394
Whiteboard: Proton - about:pages

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

Flags: needinfo?(rtestard)
QA Whiteboard: [priority:2c] [proton-foundations]
Priority: -- → P2
Severity: S4 → --
Component: Theme → Add-ons Manager
Priority: P2 → --
Product: Firefox → Toolkit
Duplicate of this bug: 1713958

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

Flags: needinfo?(awilliamson)
Attached image updated.png

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

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.

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.

Assignee: nobody → julianwels
Severity: -- → S4
Status: NEW → ASSIGNED
Priority: -- → P2

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?

(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 ).

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

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.

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? :)

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

Pushed by rob@robwu.nl:
https://hg.mozilla.org/integration/autoland/rev/4f936e5afaa8
Updated about:addons default theme previews. r=robwu
Status: ASSIGNED → RESOLVED
Closed: 5 months ago
Resolution: --- → FIXED
Target Milestone: --- → 91 Branch
You need to log in before you can comment on or make changes to this bug.