Use symbols for build status

.editorconfig

@@ -1,6 +1,6 @@
 root = true
 
-[*.{js, scss, css, hbs}]
+[*.{js, scss, css, hbs, svg}]
 indent_style = space
 indent_size = 2
 trim_trailing_whitespace = true

core/src/main/resources/hudson/model/Job/buildTimeTrend.jelly

@@ -31,6 +31,14 @@ THE SOFTWARE.
     <l:breadcrumb title="${%Build Time Trend}" />
     <st:adjunct includes="hudson.model.Job.buildTimeTrend_resources" />
     <l:main-panel>
+      <template id="icons">
+        <l:icon src="symbol-status-blue" id="blue" />
+        <l:icon src="symbol-status-yellow" id="yellow" />
+        <l:icon src="symbol-status-red" id="red" />
+        <l:icon src="symbol-status-nobuilt" id="nobuilt" />
+        <l:icon src="symbol-status-aborted" id="aborted" />
+        <l:icon src="symbol-status-disabled" id="disabled" />
+      </template>
       <h1>${%Build Time Trend}</h1>
           <div align="center">
             <img class="build-time-graph" src="buildTimeGraph/png" width="500" height="400" lazymap="buildTimeGraph/map" alt="[${%Build time graph}]" />

core/src/main/resources/hudson/model/Job/buildTimeTrend_resources.js

@@ -67,76 +67,11 @@ window.buildTimeTrend_displayBuilds = function (data) {
 /**
  * Generate SVG Icon
  */
-function generateSVGIcon(iconName, iconSizeClass) {
-  const imagesURL = document.head.getAttribute("data-imagesurl");
-
-  const isInProgress = iconName.endsWith("anime");
-  let buildStatus = "never-built";
-  switch (iconName) {
-    case "red":
-    case "red-anime":
-      buildStatus = "last-failed";
-      break;
-    case "yellow":
-    case "yellow-anime":
-      buildStatus = "last-unstable";
-      break;
-    case "blue":
-    case "blue-anime":
-      buildStatus = "last-successful";
-      break;
-    case "grey":
-    case "grey-anime":
-    case "disabled":
-    case "disabled-anime":
-      buildStatus = "last-disabled";
-      break;
-    case "aborted":
-    case "aborted-anime":
-      buildStatus = "last-aborted";
-      break;
-    case "nobuilt":
-    case "nobuilt-anime":
-      buildStatus = "never-built";
-      break;
-  }
+function generateSVGIcon(iconName) {
+  const icons = document.querySelector("#icons");
+  iconName = iconName.replace("-anime", "");
 
-  const svg1 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-  svg1.setAttribute("class", "svg-icon");
-  svg1.setAttribute("viewBox", "0 0 24 24");
-  const use1 = document.createElementNS("http://www.w3.org/2000/svg", "use");
-  use1.setAttribute(
-    "href",
-    imagesURL +
-      "/build-status/build-status-sprite.svg#build-status-" +
-      (isInProgress ? "in-progress" : "static"),
-  );
-  svg1.appendChild(use1);
-
-  const svg2 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-  svg2.setAttribute(
-    "class",
-    "svg-icon icon-" + iconName + " " + (iconSizeClass || "icon-sm"),
-  );
-  svg2.setAttribute("viewBox", "0 0 24 24");
-  const use2 = document.createElementNS("http://www.w3.org/2000/svg", "use");
-  use2.setAttribute(
-    "href",
-    imagesURL + "/build-status/build-status-sprite.svg#" + buildStatus,
-  );
-  svg2.appendChild(use2);
-
-  const span = document.createElement("span");
-  span.classList.add("build-status-icon__wrapper", "icon-" + iconName);
-
-  let span2 = document.createElement("span");
-  span2.classList.add("build-status-icon__outer");
-  span2.appendChild(svg1);
-
-  span.appendChild(span2);
-  span.appendChild(svg2);
-
-  return span;
+  return icons.content.querySelector(`#${iconName}`).cloneNode(true);
 }
 
 /**
@@ -155,7 +90,7 @@ window.displayBuilds = function (data) {
     td1.classList.add("jenkins-table__cell--tight", "jenkins-table__icon");
     var div1 = document.createElement("div");
     div1.classList.add("jenkins-table__cell__button-wrapper");
-    var svg = generateSVGIcon(e.iconName, p.dataset.iconSizeClass);
+    var svg = generateSVGIcon(e.iconName);
     div1.appendChild(svg);
     td1.appendChild(div1);
     tr.appendChild(td1);

core/src/main/resources/hudson/views/StatusColumn/column.jelly

@@ -23,6 +23,18 @@ THE SOFTWARE.
 -->
 
 <?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:t="/lib/hudson">
-    <t:ballColorTd it="${job.iconColor}" />
-</j:jelly>
+<j:jelly xmlns:j="jelly:core" xmlns:l="/lib/layout">
+  <td class="jenkins-table__cell--tight jenkins-table__icon" data="${job.iconColor.ordinal()}">
+    <div class="jenkins-table__cell__button-wrapper">
+      <j:choose>
+        <j:when test="${job.iconColor.iconName != null}">
+          <l:icon src="symbol-status-${job.iconColor.iconName}" tooltip="${job.iconColor.description}" />
+        </j:when>
+        <j:otherwise>
+          <!-- This is for special conditions, such as folders -->
+          <l:icon src="${job.iconColor.iconClassName}" />
+        </j:otherwise>
+      </j:choose>
+    </div>
+  </td>
+</j:jelly>

core/src/main/resources/hudson/widgets/HistoryWidget/entry.jelly

@@ -39,7 +39,7 @@ THE SOFTWARE.
       <div class="pane build-name">
         <div class="build-icon">
           <a class="build-status-link" href="${h.getConsoleUrl(build)}" tooltip="${build.iconColor.description} > ${%Console Output}">
-            <l:icon class="${build.buildStatusIconClassName} icon-sm" />
+            <l:icon src="symbol-status-${build.iconColor.iconName}" />
           </a>
         </div>
         <a class="model-link inside build-link display-name" update-parent-class=".build-row" href="${link}">${build.displayName}</a>

core/src/main/resources/jenkins/model/Jenkins/_legend.jelly

@@ -29,87 +29,87 @@ THE SOFTWARE.
 
   <dl class="app-icon-legend">
     <dt>
-      <l:icon class="icon-blue icon-lg"/>
+      <l:icon src="symbol-status-blue" />
     </dt>
     <dd>
       ${%blue}
     </dd>
 
     <dt>
-      <l:icon class="icon-blue-anime icon-lg"/>
+      <l:icon src="symbol-status-blue-anime" />
     </dt>
     <dd>
       ${%blue_anime}
     </dd>
 
     <dt>
-      <l:icon class="icon-yellow icon-lg"/>
+      <l:icon src="symbol-status-yellow" />
     </dt>
     <dd>
       ${%yellow}
     </dd>
 
     <dt>
-      <l:icon class="icon-yellow-anime icon-lg"/>
+      <l:icon src="symbol-status-yellow-anime" />
     </dt>
     <dd>
       ${%yellow_anime}
     </dd>
 
     <dt>
-      <l:icon class="icon-red icon-lg"/>
+      <l:icon src="symbol-status-red" />
     </dt>
     <dd>
       ${%red}
     </dd>
 
     <dt>
-      <l:icon class="icon-red-anime icon-lg"/>
+      <l:icon src="symbol-status-red-anime" />
     </dt>
     <dd>
       ${%red_anime}
     </dd>
 
     <dt>
-      <l:icon class="icon-nobuilt icon-lg"/>
+      <l:icon src="symbol-status-nobuilt" />
     </dt>
     <dd>
       ${%lightgrey}
     </dd>
 
     <dt>
-      <l:icon class="icon-nobuilt-anime icon-lg"/>
+      <l:icon src="symbol-status-nobuilt-anime" />
     </dt>
     <dd>
       ${%lightgrey_anime}
     </dd>
 
     <dt>
-      <l:icon class="icon-disabled icon-lg"/>
+      <l:icon src="symbol-status-aborted" />
     </dt>
     <dd>
-      ${%grey}
+      ${%darkgrey}
     </dd>
 
     <dt>
-      <l:icon class="icon-disabled-anime icon-lg"/>
+      <l:icon src="symbol-status-aborted-anime" />
     </dt>
     <dd>
-      ${%grey_anime}
+      ${%darkgrey_anime}
     </dd>
 
     <dt>
-      <l:icon class="icon-aborted icon-lg"/>
+      <l:icon src="symbol-status-disabled" />
     </dt>
     <dd>
-      ${%darkgrey}
+      ${%grey}
     </dd>
 
     <dt>
-      <l:icon class="icon-aborted-anime icon-lg"/>
+      <l:icon src="symbol-status-disabled-anime" />
     </dt>
     <dd>
-      ${%darkgrey_anime}
+      ${%grey_anime}
     </dd>
   </dl>
 

core/src/main/resources/lib/hudson/buildListTable.jelly

@@ -30,6 +30,15 @@ THE SOFTWARE.
       A collection of builds to be displayed.
     </st:attribute>
   </st:documentation>
+  <template id="icons">
+    <l:icon src="symbol-status-blue" id="blue" />
+    <l:icon src="symbol-status-yellow" id="yellow" />
+    <l:icon src="symbol-status-red" id="red" />
+    <l:icon src="symbol-status-nobuilt" id="nobuilt" />
+    <l:icon src="symbol-status-aborted" id="aborted" />
+    <l:icon src="symbol-status-disabled" id="disabled" />
+    <l:icon src="symbol-terminal" id="console" />
+  </template>
 
   <t:setIconSize/>
   <st:adjunct includes="hudson.model.Job.buildTimeTrend_resources" />

core/src/main/resources/lib/hudson/projectView.jelly

@@ -93,7 +93,15 @@ THE SOFTWARE.
           <div class="jenkins-jobs-list__item">
             <a class="jenkins-jobs-list__item__details" href="${jobBaseUrl}${job.shortUrl}">
               <div class="jenkins-jobs-list__item__icons">
-                <t:ballColorTd it="${job.iconColor}" />
+                <j:choose>
+                  <j:when test="${job.iconColor.iconName != null}">
+                    <l:icon src="symbol-status-${job.iconColor.iconName}" tooltip="${job.iconColor.description}" />
+                  </j:when>
+                  <j:otherwise>
+                    <!-- This is for special conditions, such as folders -->
+                    <l:icon src="${job.iconColor.iconClassName}" />
+                  </j:otherwise>
+                </j:choose>
               </div>
               <div class="jenkins-jobs-list__item__details__text">
                 <p class="jenkins-jobs-list__item__label">${job.displayName}</p>

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

@@ -866,13 +866,22 @@ table.progress-bar.red td.progress-bar-done {
 
 /* 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) translateZ(0);
+    transform: rotate(0deg);
   }
 
   to {
-    transform: rotate(360deg) translateZ(0);
+    transform: rotate(360deg);
   }
 }
 

war/src/main/scss/pages/_dashboard.scss

@@ -169,3 +169,14 @@ $min-button-size: 36px;
     }
   }
 }
+
+.build-status-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+  }
+}