Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix Safari App Extension Toolbar Icon #319

Open
balmas opened this issue Jan 20, 2021 · 10 comments
Open

Fix Safari App Extension Toolbar Icon #319

balmas opened this issue Jan 20, 2021 · 10 comments
Labels

Comments

@balmas
Copy link
Member

balmas commented Jan 20, 2021

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 balmas changed the title Fix Toolbar Icon Fix Safari App Extension Toolbar Icon Jan 21, 2021
@balmas
Copy link
Member Author

balmas commented Jan 21, 2021

@balmas
Copy link
Member Author

balmas commented Jan 21, 2021

@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
Copy link
Member Author

balmas commented Jan 21, 2021

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

@kirlat
Copy link
Member

kirlat commented Jan 26, 2021

@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
Copy link
Member Author

balmas commented Jan 26, 2021

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
Copy link
Member

kirlat commented Jan 26, 2021

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
Copy link
Member

kirlat commented Jan 28, 2021

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

@kirlat kirlat assigned balmas and unassigned kirlat Jan 28, 2021
@balmas balmas assigned monzug and unassigned balmas Jan 29, 2021
@balmas
Copy link
Member Author

balmas commented Jan 29, 2021

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
Copy link

monzug commented Feb 1, 2021

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.
Screen Shot 2021-02-01 at 2 37 26 PM

@monzug monzug assigned balmas and unassigned monzug Feb 1, 2021
@monzug monzug added verified and removed bug labels Feb 1, 2021
@balmas
Copy link
Member Author

balmas commented Feb 1, 2021

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

@balmas balmas added bug and removed verified labels Feb 1, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants