Request: favicon color changes colors based on build status when on build page

[dvdizon]

What you expected to happen: Whenever I leave a browser tab on a build page, and the build is either building, failed, or succeeded, the favicon color of the screwdriver favicon changes.

It gives a little bit of nice context without switching to the tab, even if my build page isn't currently my active tab.

[sugarnaoming]

I've made some favicon ideas. If you have any comments or suggestions, I would appreciate it. Type B and C were the most popular among us.

status\type	A	B	C
Running
Queued
Blocked
Frozen
Unstable
Success
Failed
Aborted

Another idea is to rotate the existing favicon when "Running status".

[jithine]

cc @chasturansky

[tkyi]

Personally I think A is too hard to see when it's a small icon, so I think B/C would be better.

For running/queued I was wondering if blue color (https://github.com/screwdriver-cd/ui/blob/master/app/styles/screwdriver-colors.scss#L47) makes more sense to be consistent with what we have in the UI, and for unstable the color could be yellow.

[chasturansky]

I agree with the current state those icons in A are too hard to read. B/C would be better, but before could we try to switch the SD icon and status. Potentially could we see just the status and no SD icon as well?

[yuichi10]

personally I think A is too hard to see when it's a small icon, so I think B/C would be better. That makes sense

For running/queued I was wondering if blue color (https://github.com/screwdriver-cd/ui/blob/master/app/styles/screwdriver-colors.scss#L47) makes more sense to be consistent with what we have in the UI, and for unstable the color could be yellow.

I see. Unify the color code looks good. However, is it hard to see the blue icon for running/queued because SD icon also uses blue color?

B/C would be better, but before could we try to switch the SD icon and status. Potentially could we see just the status and no SD icon as well?

I think if the SD icon was gone, it makes it hard to detect which tab is SD tab. We will try to switch the SD icon and status.

[chasturansky]

I have tested a bunch of favicons and their proper sizes and it seems that we should go with status icons only. Knowing the use-case is to inform the user of status this should take the priority rather than the icon in each favicon. I tried to add a logo and becomes somewhat cluttered and extremely hard to read.

Given this issue, I think we should also change the title to "SD | " which will come first. This will keep the user informed that this page is for Screwdriver. A few examples of that would be "SD | Login" or for pipeline "SD | denali-design/denali-css"

Here are the proposed icons: (Need to chat with the SD team about frozen)

[yuichi10]

@chasturansky The proposal is awesome!!! However, I have two concerns.

1. I prefer frozen icon have a light blue color(#acd9ff).
2. It is good to add SD to tab title, but some of our users open too many tabs, so even if the title has SD, they cannot see the title.

What do you think about these two concerns?

[chasturansky]

We can change the frozen color I would prefer a little darker blue in the Denali family like #60abef. Gives it a better contrast for accessibility. You can find the other colors here.

For the tabs, I have seen that before, but its not a huge concern for me. A couple of thoughts to this.

1. We can inform the users about this feature with a banner.
2. Once the job runs and is successful we can change it back to the SD logo after a certain amount of time.

These were some tests I did and as you can see at 100% the logo doesn't translate.

[yuichi10]

When I see the favicon with SD icon, I feel the sd icon is annoying to me. Maybe we don't need the SD icon. Thank you.

I have small concerns about the color(#60abef) of frozen. The color is not the same as the color of SD CSS and for me, the color is not icy. However, the color of #60abef is easier to see. Both colors look fine to me. We discuss the color.

Once the job runs and is successful we can change it back to the SD logo after a certain amount of time.

I think users want to know the status of a build, so we don't need to change the favicon to SD icon until the user accesses the build page. If it is difficult to change via user access, we will try to keep the success icon or change it back to the SD logo after a certain amount of time.

Thank you for your help.

[sugarnaoming]

Thank you. I would like to implement it with the following design

• The color of frozen icon is #acd9ff to be consistent with SD CSS.
• I'll use the icon suggested by https://github.com/screwdriver-cd/screwdriver/issues/1009#issuecomment-664717316 .
• When a user accesses the build page after a successful or unsuccessful job, we'll change the favicon back to the original SD icon.

@chasturansky Can you send us the favicon data you used https://github.com/screwdriver-cd/screwdriver/issues/1009#issuecomment-664717316 ?

[sugarnaoming]

• When a user accesses the build page after a successful or unsuccessful job, we'll change the favicon back to the original SD icon.

On the above point, if the implementation of changing the favicon when the user returns to the build page was difficult, it may result in an implementation that does not return to the SD favicon when the user returns to the build page after the job succeeds or fails.

[chasturansky]

@sugarnaoming Just seeing this now. How do you want the files? .png or .ico?

[s-yoshika]

@chasturansky Thank you. Could you share the files with .ico format?

[chasturansky]

@sugarnaoming Here are the files. Sorry for the delay, but I was not receiving notifications from GitHub.

sd-favicons.zip