Details
-
Type:
Task
-
Status: To-Do (View Workflow)
-
Priority:
Major
-
Resolution: Unresolved
-
Affects Version/s: None
-
Fix Version/s: None
-
Labels:None
-
Story Points:1
-
Epic Link:
-
Sprint:Spring 1, Spring 2, Spring 3
Description
Situation: The IGB desktop icon on MacOS 26 appears with a grey border.
Task: Investigate why this grey border is appearing and if we can fix it.
Link to Apple App Icons documentation: https://developer.apple.com/design/human-interface-guidelines/app-icons
Attachments
Activity
Branch: https://bitbucket.org/pkulzer-lorainelab/integrated-genome-browser/branch/IGBF-4390
PR: https://bitbucket.org/lorainelab/integrated-genome-browser/pull-requests/1100
I am still unable to build installers from my branches, so I've created a pull request to a new branch within the loraine lab IGB repo for testing.
The squircle-ized logo looks a little weird to me. I actually think the non-squirquelized logo looks better because there's more padding separating the logo letters from the boundary of the image.
There's a circular logo we've used sometimes that I bet would look better after squirquelizing it, so long as there's enough negative space (padding) between the edge of the circle and the icon edge.
Next steps:
- Find the circular icon and see how it looks once squirquelized.
The Squircle app requires a square app icon, so unfortunately I can't use any circular or rounded logos we've made. I simply edited the square igb logo to shrink the font and increase the padding and created a new squricle logo from there. My branch has been updated and is ready for review!
Request: Update the images attached to the issue.
attn: Paige Kulzer
The Squircle-logo.png image has been updated to reflect my most recent changes!
Request for Paige Kulzer:
Please rebase your branch on the latest main. While this issue was in flight, we updated the version of IGB.
Before you rebase, do this:
- make sure your local clone's main branch is up-to-date with the team repository's main branch (do a git pull after switching to main on your local)
- then make sure your personal remote repo has the most up-to-date main branch by pushing your now-up-to-date local clone's main branch to your remote repo
After everybody's main branches are up-to-date with the latest code, rebase your feature branch on the main branch.
To rebase with confidence, first read this: https://www.atlassian.com/git/tutorials/merging-vs-rebasing
In a nutshell, to rebase your topic branch, you first switch to your topic branch on your local. Next, you run the rebase command like so: "git rebase main"
Then, you push your freshly rebased topic branch up to your fork. Note that you'll have changed the history of your branch and so the commit hashes won't match what's in your remote repository for that branch. You might have to use a "force" option when you push your new branch to your remote repo.
When the rebase is done, re-assign to me and I'll take it from there.
Done! I've declined the old PR and made a new PR to the main branch, as well. Ready for review!
PR: https://bitbucket.org/lorainelab/integrated-genome-browser/pull-requests/1101
One last request!
Please add the Jira issue number to the commit message.
Done, thank you for catching that!
The bitbucket pipeline failed with this error:
[INFO] install4j: compilation failed. Reason: java.io.IOException: Image file "/opt/atlassian/pipelines/agent/build/distribution/branding/igb_48.png" for application icon does not exist. [INFO] Compiling launcher 'IntegratedGenomeBrowser':
attn: Paige Kulzer
Squircle didn't output an icon with the 48x48 pixel dimensions, so I've resized one of the squircles and saved it as igb_48.png. This should fix the issue!
My branch/PR has been updated.
Two other files were also deleted in the commit. Can you confirm that the deleted files are not needed anywhere in the code base?
Also, there are several new files. Will these files be used anywhere?
No other code was changed with the commit, so I am wondering how or if IGB will be using those files for anything.
Please clarify.
I will proceed with trying to build the installers.
Without a code change it won't use those new files. It will only use the 16x16, 32x32, 48x48, and 128x128 logos. I've saved all of the generated squircles in Dropbox (IGB > Logo > IGB > icons > 2026 > branding_NEW) so I can delete them from the commit if desired.
As for the deleted files, I think I will have to add them back to the branding folder because the compilers do reference them. They just won't be squircles, so I'm not sure what effect that will have on the final IGB icon appearance.
Ann Loraine, would you like me to go ahead and make those changes?
Thanks for the clarification!
To make testing and updates easier, I recommend this:
- Don't add any new files (since they probably will not be used anywhere)
- Edit all files that are actually used so that they have the new appearance
Also, be aware that file formats need to be respect, and that different platforms may use different files in different formats. And you can tell what format a file has by looking at the file extension.
As always, please squash commits or re-create the branch as needed to give us a single commit with only the required changes included.
attn: Paige Kulzer
Dr. Freese and I worked out a way to create updated versions of igb_128.ico and igb_128.icns with the squircle logos. To do this, I referenced this guide: https://eshop.macsales.com/blog/28492-create-your-own-custom-icons-in-10-7-5-or-later
First, I added all of the squircle PNG files to a new folder called Applcon.iconset. Then, I renamed the PNG files in that folder to follow the format "icon_16x16.png". Finally, from the terminal I ran the following line of code which produced a .icns file:
iconutil -c icns ./AppIcon.iconset
I also simply grabbed the old igb_128.ico and put it back in the branding folder since that's the Windows icon and it doesn't need to be updated to a squircle.
New PR: https://bitbucket.org/lorainelab/integrated-genome-browser/pull-requests/1101
Another doubt I have:
When I used the "diff" view to compare the images, I noticed that logo area is now smaller, with newly transparent area surrounding the blue rounded-edge-box.
See:
https://bitbucket.org/lorainelab/integrated-genome-browser/pull-requests/1101/diff
For the bigger images, it seems OK. But for the tinier images, it's really hard to see what the image is supposed to show. The text is very hard to distinguish in the littlest one - it looks blurry.
Do we know which of these images are actually going to show up on the MacOS - is it just the larger one or ?
All three of the installers will need to be tested and scoured for places where the IGB logo images might be shown. It will likely be different on different platforms, so testing this will likely take a lot of effort!
During scrum today, we discussed where in the IGB codebase the four .png files in the branding folder were being used. It appears that they're only being used in install4j-related files, so rather than squircle-ifying everything, I've reverted those back to square images.
The only change in the branch should now be that .icns (Apple Icon Image) file which has been turned into a squircle. The PR has been updated so new installers can now be built.
Update:
- I updated the copy of Paige's branch on my fork.
- I re-ran the pipeline to re-build the installers.
- Installers are ready for testing! Please see preceding comment for links to the installers.
attn:
The new installers for Windows and Linux has no icon issues or noticeable changes.
Note: Windows Defender SmartScreen did came up because the new installer is not signed.
There was an issue with the Mac icons not updating on the toolbar. After further investigating, Dr. Freese found another spot in the code base where IGB images are being stored and we've confirmed that these are the images that need to be updated for the toolbar icon to appear correctly as a squircle. The PR has been updated to incorporate those changes. Please re-build the installers and re-test the Mac installer for any issues.
New installers are built and ready for re-testing.
attn:
Next step:
- Let's push the branch to the main repository for safekeeping
- Revisit later when closer to making a new release
To-do:
- Push branch IGBF-4390 to lorainelab team repo
Apple has mandated that app icons must fit their "squircle" shape guidelines as of the latest MacOS update. I've used Apple's free app Squircle: Resize App Icons to convert our logo to the required squircle format.
I have tested the look of this new logo locally. To do this, I followed instructions I found online which said to right-click the IGB app in Finder, select "Get Info," and drag the new squircle icon file onto the small app icon in the top-left corner of the Info window. See attached for the results.