[JENKINS-72845]: Fix status icon animation display on Safari

[Lmh-java]

See JENKINS-72845.

The status icon animations are not properly shown on Safari if the user zooms in/out (Command + "+" or "-"). Some bugs related to the Safari browser were reported a few years ago, and it seems this is still not fixed. The main issue is that Safari cannot properly calculate the center value of the property transform-origin, it behaves differently between Safari and Chrome.

By refactoring the structure of SVG icons and using SVG animations instead of CSS animations, this display problem is solved.
I re-made these icon SVGs and centerized every SVG component to an enlarged view window. Therefore, we can directly set transform-origin: 0 0; to make sure the origin pivot is not changing in any cases, so Safari can properly locate the animation.

PS: This is my first time contributing to Jenkins. If I am doing something wrong, please bear with me. Any advice is truly appreciated. :)

Screenshot before:

This is just an example of one status icon. All other animations are similar.
It also happens in the build history section and the timeline section.

Screenshot after:

All occurrences of this are fixed.

Testing done

1. Manual testing on Safari 16.5.1, Chrome 123.0.6312.106.
2. Lightmode unit tests

Proposed changelog entries

• Fix status icon animation display on Safari.

Proposed upgrade guidelines

N/A

Submitter checklist

Beta Give feedback

1. The Jira issue, if it exists, is well-described.
2. The changelog entries and upgrade guidelines are appropriate for the audience affected by the change (users or developers, depending on the change) and are in the imperative mood (see examples). Fill in the Proposed upgrade guidelines section only if there are breaking changes or changes that may require extra steps from users during upgrade.
3. There is automated testing or an explanation as to why this change has no tests.
4. New public classes, fields, and methods are annotated with @Restricted or have @since TODO Javadocs, as appropriate.
5. New deprecations are annotated with @Deprecated(since = "TODO") or @Deprecated(forRemoval = true, since = "TODO"), if applicable.
6. New or substantially changed JavaScript is not defined inline and does not call eval to ease future introduction of Content Security Policy (CSP) directives (see documentation).
7. For dependency updates, there are links to external changelogs and, if possible, full differentials.
8. For new APIs and extension points, there is a link to at least one consumer.

Before the changes are marked as ready-for-merge:

Maintainer checklist

Beta Give feedback

1. There are at least two (2) approvals for the pull request and no outstanding requests for change.
2. Conversations in the pull request are over, or it is explicit that a reviewer is not blocking the change.
3. Changelog entries in the pull request title and/or Proposed changelog entries are accurate, human-readable, and in the imperative mood.
4. Proper changelog labels are set so that the changelog can be generated automatically.
5. If the change needs additional upgrade steps from users, the upgrade-guide-needed label is set and there is a Proposed upgrade guidelines section in the pull request title (see example).
6. If it would make sense to backport the change to LTS, a Jira issue must exist, be a Bug or Improvement, and be labeled as lts-candidate to be considered (see query).

[welcome]

Yay, your first pull request towards Jenkins core was created successfully! Thank you so much!

A contributor will provide feedback soon. Meanwhile, you can join the chats and community forums to connect with other Jenkins users, developers, and maintainers.

[daniel-beck]

Thanks!

Does this mean

jenkins/war/src/main/scss/base/_style.scss

Lines 871 to 900 in bb45b87

	/* Unknown */
	[data-symbol-animation] {
	animation: spin 1s linear infinite;
	transform-origin: center;
	@media (prefers-reduced-motion) {
	animation-duration: 3s;
	}
	}
	@keyframes spin {
	from {
	transform: rotate(0deg);
	}
	to {
	transform: rotate(360deg);
	}
	}
	@keyframes spin-reverse {
	from {
	transform: rotate(360deg);
	}
	to {
	transform: rotate(0deg);
	}
	}

could be deleted? That also references reduced motion, is this something that is being removed with this change?

[Lmh-java]

Thanks!

Does this mean

jenkins/war/src/main/scss/base/_style.scss

Lines 871 to 900 in bb45b87

	/* Unknown */
	[data-symbol-animation] {
	animation: spin 1s linear infinite;
	transform-origin: center;
	@media (prefers-reduced-motion) {
	animation-duration: 3s;
	}
	}
	@keyframes spin {
	from {
	transform: rotate(0deg);
	}
	to {
	transform: rotate(360deg);
	}
	}
	@keyframes spin-reverse {
	from {
	transform: rotate(360deg);
	}
	to {
	transform: rotate(0deg);
	}
	}

could be deleted? That also references reduced motion, is this something that is being removed with this change?

Hi! I didn't notice prefers-reduced-motion at first glance, I will aim to remove this with this PR as well :).

[Lmh-java]

Thanks!

Does this mean

jenkins/war/src/main/scss/base/_style.scss

Lines 871 to 900 in bb45b87

	/* Unknown */
	[data-symbol-animation] {
	animation: spin 1s linear infinite;
	transform-origin: center;
	@media (prefers-reduced-motion) {
	animation-duration: 3s;
	}
	}
	@keyframes spin {
	from {
	transform: rotate(0deg);
	}
	to {
	transform: rotate(360deg);
	}
	}
	@keyframes spin-reverse {
	from {
	transform: rotate(360deg);
	}
	to {
	transform: rotate(0deg);
	}
	}

could be deleted? That also references reduced motion, is this something that is being removed with this change?

Solved by a new method, please take a look :). In the new solution, I am still using the css properties to animate, so no need to remove the original css. The new solution also supports reduced motion mode.

[Lmh-java]

@timja @daniel-beck Please take a look when you have time.

[daniel-beck]

Looking at the "Icon legend" view/popup, this seems to work well in Safari, Chrome and Firefox now. I don't know enough about SVG to judge the technical quality of the fix or predict other problems this might cause.

[timja]

#9123 (review)
Same, but this fix has been sitting here long enough and if it works lets go for it.

---

/label ready-for-merge

---

This PR is now ready for merge, after ~24 hours, we will merge it if there's no negative feedback.

Thanks!

[Lmh-java]

Thank you for both of your responses.

Here is a little more explanation of this change.

This animation is a rotating around one pivot. Specifically, a part of the svg image is rotating around that pivot. I noticed that if we zoom in/out in safari, the new pivot position will not be re-calculated. Therefore, it will still rotate around the old position. This seems to be a bug with Safari since many years ago. To fix this problem, I mapped all the coordinates of the original svg to a new coordinate system, which centered at (0, 0). Therefore, if we zoom in/out, the position of the pivot will not be changed. Without re-calculating the new coordinate, this animation will not shift.

[welcome]

Congratulations on getting your very first Jenkins core pull request merged 🎉🥳

This is a fantastic achievement, and we're thrilled to have you as part of our community! Thank you for your valuable input, and we look forward to seeing more of your contributions in the future!

We would like to invite you to join the community chats and forums to meet other Jenkins contributors 😊
Don't forget to check out the participation page to learn more about how to contribute to Jenkins.