Fix Safari App Extension Toolbar Icon

[balmas]

Safari 14 adds an awful blue color automatically to any extension when it's active. Previous versions of Safari required us to have only a grayscale icon in for the toolbar in a scalable PDF. With Safari 14, if you provide a single-color icon instead, they will use that color for the "active" state, and grayscale the icon for the "inactive" state. This is a little problematic for backwards compatibility. It might be worthwhile to wait a little before trying to address this to see what else changes.

Originally posted by @balmas in alpheios-project/alpheios-core#559 (comment)

[balmas]

See thread https://developer.apple.com/forums/thread/651500

[balmas]

@kirlat here's where I got with this:

• it seems that the only way the on/off badges will work with a toolbar icon in a safari app extension is with a single color, scalable vector pdf with a transparent background.
• Yuliya made me scalable pdfs of the new icons for Safari (they are in https://github.com/alpheios-project/design-guidelines/tree/master/v3/Icons/MacOS11) . When I made the backgrounds transparent and took everything except the little a out of the image, the new pdf worked, but I ran out of time to try making the lines of the a alpheios blue to see if it would work in Safari 14 (i.e. to see if Safari would appropriately gray-scale the image when the extension is inactive and show the blue from the icon when it is active)
• If we can that to work, I don't know how it will look in pre-Safari 14 - I would need to know that before deciding if we could switch to it
• ideally, we would also make the little a bigger, because it's really tiny in the Safari 14 toolbar.

This item would be a nice one to resolve if you can.

[balmas]

(please create a branch off of the incr-3.3.x branch of the webextension for any work on this)

[kirlat]

@balmas I'm wondering how did you deal with testing it in different Safari versions? Did you install Safari 14? I'm on Safari 13 now and AFIK if I upgrade to Safari 14 there is no way back other than to reinstall the macOS Mojave. Maybe one of us should be on Safari 14 and do the change while the other would test how it would behave on Safari 13?

Also, if we upgrade the extension to webextension format required for Safari 14, would the app store provide an older, Safari App Extension build for users of Safari 13? Would we need to provide two versions of the extensions at the same time: webextension for Safari 14 and Safari App Extension for Safari 13? In that case we probably don't need to check how the upgraded icon would look like in Safari 13 because it will use a different build with the old icon.

What our approach would be here?

[balmas]

I think we need to use browserstack to test different versions. I think you should still have login credentials for our browserstack account. if not let me know and I will send them to you.

We are NOT going to provide two different versions for the app store. So the main thing is to make sure it's okay, if not perfect, on versions prior to Safari 14.

[kirlat]

Understood. So we're trying to make the existing Safari App Extension to look as good as possible on both Safari 13 and 14. My browserstack account is active so I'll give it a try.

[kirlat]

I've added a light blue letter icon into the i319-safari-toolbar-icon. It looks good in Safari 13, let's see how will it be in the next version

[balmas]

I agree it looks okay in Safari 13. @monzug can you test the build in Safari 14 and let us know how the toolbar icon looks? Use the AlpheiosReadingTools-devicon.dmg package in the Alpheios-Safari-Builds dropbox folder. Thank you !

[monzug]

I did install/uninstall twice (and clear cache) to be sure I had the right version. It does not look any different than the prior version.

[balmas]

Sigh ok, we're going to have to let this go for now. We'll address it at some point.