Update icons to Zotero 7 style

[adomasven]

• Chrome, Firefox and Edge gets hi-DPI toolbar images
• Stop generating greyscale icons for Safari, since Safari now supports colored toolbar button images
• Generate pngs from svg for toolbar using rsvg-convert since toolbars do not support svgs
• Update Zotero submodule (for new icons)
• Update utilities submodule (for zoteroTypeSchemaData.json)

Closes #501

[adomasven]

Updated and now also adds icon badges. Closes #503

[adomasven]

@dstillman Would be great to merge this.

[dstillman]

This will need to be rebased, sorry.

[adomasven]

Rebased

[thebluepotato]

I've made a few fixes in adomasven#1 to expand the new icons to the Safari connector, add support for dark mode and fix some missing icons. Beyond that, any ETA on when this PR could be merged?

[adomasven]

@dstillman Pending your review, but really this is good and we should merge. @thebluepotato I'll look into your changes after this is merged.

[dstillman]

I'm not seeing the PDF icon:

[adomasven]

I'm not seeing the PDF icon:

Fixed

[thebluepotato]

Necessary fixes that remain:

• You should rename the preprint SVGs too. They're called "pre-print" whereas the code expects "preprint", so currently they're not showing.
• The icons don't show in the Safari toolbar because the extension looks for them in "images/toolbar/toolbar". Delete .replace('images/', 'images/toolbar/') in global.js

[adomasven]

Necessary fixes that remain:

• You should rename the preprint SVGs too. They're called "pre-print" whereas the code expects "preprint", so currently they're not showing.
• The icons don't show in the Safari toolbar because the extension looks for them in "images/toolbar/toolbar". Delete .replace('images/', 'images/toolbar/') in global.js

Thanks for the notes. All of these are fixed, along with some other issues I've discovered.

[thebluepotato]

For dark mode: if you remove the exclusion from build.sh and just add that to cachedTypes.js:

let isDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
icon = 'images/toolbar/' + icon.replace('.svg', isDark ? '-dark.png' : '.png');

You'll have implemented 99% of the changes from my PR (save for a tweak or two) and I can then delete it 😄
I would then do a new PR with these tweaks or two and find a way for this to work with Safari. By including dark mode already here, you'll ensure the icons remain legible in all contexts (as mentioned here #503 (comment)).

[adomasven]

For dark mode: if you remove the exclusion from build.sh and just add that to cachedTypes.js:

let isDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
icon = 'images/toolbar/' + icon.replace('.svg', isDark ? '-dark.png' : '.png');

This does not work on Chrome, where the background page is a service worker. Thanks for the other notes.

[adomasven]

@dstillman this can be merged

[thebluepotato]

Any ETA on this?

[dstillman]

This, on a non-HiDPI screen, does not look right:

Note the first and third lines. This is what I have in Zotero:

Looking at the assets, it looks like I'm getting downsized 2x versions of icons instead.

[dstillman]

(Let's also update this to the latest zotero submodule and fix the few remaining PNGs that are now missing.)

[adomasven]

Rebased and requests addressed.

This, on a non-HiDPI screen, does not look right:

For the toolbar we have to build pngs from svgs, since svgs are not supported with browserExt. I was building all from @2x versions, switched the 16px version to use the non-2x one.