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

Added a mask icon for Safari pinned tab and touchbar #1706

Closed
wants to merge 1 commit into from

Conversation

Projects
None yet
2 participants
@noahsmartin
Copy link
Contributor

commented Jan 12, 2017

This change adds the mask-icon to OctoPrint. Safari uses this icon, as well as the color, to display an image in pinned tabs and the touchbar. Apple's docs explaining this are here: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/pinnedTabs/pinnedTabs.html

With this change it just looks a little nicer to have OctoPrint as a pinned tab or a favorite site in the touchbar.

I made this icon just by tracing a png because the new icon needs to be a black and transparent svg. If anyone already has an svg of the OctoPrint icon I'd be happy to replace it.

Before as a pinned tab:
screen shot 2017-01-11 at 6 14 57 pm

After as a pinned tab:
screen shot 2017-01-11 at 1 52 12 pm

On the left is the new touchbar icon for favorites, and the right is the old one. As you can see, the new icon matches more the expected style of other sites.
touch bar shot 2017-01-11 at 6 12 45 pm

@foosel

This comment has been minimized.

Copy link
Owner

commented Jan 12, 2017

Nice!

Regarding the SVG, I did this one a while ago for a different use case, but I fear the thin line for the differently colored part of the tentacle doesn't really work at that size:

image

Filling in that part looks ok though:

image

Both those screenshots are from Safari 9.1 under El Capitan (on BrowserStack, no actual machine access here) btw. Testing against Safari 10 on Sierra didn't show an icon, neither with one of mine nor your's embedded - any ideas what could be up here?

image

@noahsmartin noahsmartin force-pushed the noahsmartin:nm/maskIcon branch from c41743e to ff02192 Jan 12, 2017

@noahsmartin

This comment has been minimized.

Copy link
Contributor Author

commented Jan 12, 2017

Thanks! I updated the SVG, here is how the new icon looks on the touch bar:

touch bar shot 2017-01-12 at 10 54 36 am

Safari has a separate cache for template icons that needs to be cleared, try deleting the contents of ~/Library/Safari/Template Icons if that is something BrowserStack will let you do. There is also a file, CacheSettings.plist, in that directory that can tell you exactly what image and color is cached.

I tested this on 10.12.2 with Safari 10.0.2 and on 10.11.6 with Safari 10.0.1

@foosel

This comment has been minimized.

Copy link
Owner

commented Jan 13, 2017

I still can't get the Safari 10 on Browser Stack to show the icon and sadly as you already feared BrowserStack won't let me clear that cache. I decided to just trust you on this ;) and have cherry-picked the commit to maintenance to get it among people ASAP. It will be part of the 1.3.1 release.

As already mentioned in #1705, Github doesn't know how to handle cherry picks and will therefore report this PR as "closed" instead of "merged". Please don't be alarmed by this.

@foosel foosel closed this Jan 13, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.