From 01c42a3dca39592e20f728ea8f19c67484004d07 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Wed, 20 Dec 2023 21:45:22 +0000
Subject: [PATCH] Update the appearance of the stop button (#8780)

* Init

* Fixes

* Update executors.jelly

* Update _buttons.scss

* Fix i18n

* Tidy up

* Fix test

* Temporary fast build

CI build is too unreliable and I just want an incrementals...

* Revert "Temporary fast build"

This reverts commit 28df8398f3e1a0a82adae7db692b8946a2e281b7.

---------

Co-authored-by: Tim Jacomb <timjacomb1@gmail.com>
Co-authored-by: Alexander Brandes <mc.cache@web.de>
---
 .../hudson/widgets/HistoryWidget/entry.jelly  |  2 +-
 .../resources/lib/hudson/buildCaption.jelly   |  2 +-
 .../lib/hudson/buildCaption.properties        |  1 +
 .../resources/lib/hudson/executors.properties |  1 +
 .../resources/lib/layout/stopButton.jelly     |  8 ++---
 .../jenkins/security/Security2278Test.java    |  4 +--
 war/src/main/scss/components/_buttons.scss    | 30 +++++++++++++++++++
 7 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/core/src/main/resources/hudson/widgets/HistoryWidget/entry.jelly b/core/src/main/resources/hudson/widgets/HistoryWidget/entry.jelly
index d203b8a98344..a77474476625 100644
--- a/core/src/main/resources/hudson/widgets/HistoryWidget/entry.jelly
+++ b/core/src/main/resources/hudson/widgets/HistoryWidget/entry.jelly
@@ -71,7 +71,7 @@ THE SOFTWARE.
           <div class="build-stop">
             <!-- Check CANCEL permission for Project, Admin permission otherwise -->
             <j:if test="${empty(it.widget.owner.CANCEL) ? h.hasPermission(app.ADMINISTER) : it.widget.owner.hasPermission(it.widget.owner.CANCEL)}">
-              <l:stopButton href="${link}stop" alt="[cancel]" confirm="${%confirm(build.fullDisplayName)}" />
+              <l:stopButton href="${link}stop" alt="${%Cancel}" confirm="${%confirm(build.fullDisplayName)}" />
             </j:if>
           </div>
         </j:if>
diff --git a/core/src/main/resources/lib/hudson/buildCaption.jelly b/core/src/main/resources/lib/hudson/buildCaption.jelly
index 2f29e2808f4b..6ae79d3b836e 100644
--- a/core/src/main/resources/lib/hudson/buildCaption.jelly
+++ b/core/src/main/resources/lib/hudson/buildCaption.jelly
@@ -49,7 +49,7 @@ THE SOFTWARE.
               <td>
                 <j:if test="${it.parent.hasAbortPermission()}">
                   <l:stopButton href="stop" confirm="${%confirm(it.fullDisplayName)}"
-                          alt="[${%cancel}]"/>
+                          alt="${%cancel}"/>
                 </j:if>
               </td>
             </tr>
diff --git a/core/src/main/resources/lib/hudson/buildCaption.properties b/core/src/main/resources/lib/hudson/buildCaption.properties
index 6aa3af4cc19b..435f11915242 100644
--- a/core/src/main/resources/lib/hudson/buildCaption.properties
+++ b/core/src/main/resources/lib/hudson/buildCaption.properties
@@ -1 +1,2 @@
 confirm=Are you sure you want to abort {0}?
+cancel=Cancel
diff --git a/core/src/main/resources/lib/hudson/executors.properties b/core/src/main/resources/lib/hudson/executors.properties
index 951d07ec26c1..8438e6602a32 100644
--- a/core/src/main/resources/lib/hudson/executors.properties
+++ b/core/src/main/resources/lib/hudson/executors.properties
@@ -2,3 +2,4 @@
 Computers=built-in node{0,choice,0# ({1} of {2} executors busy)|1# + {0,number} agent ({1} of {2} executors busy)|1< + {0,number} agents ({1} of {2} executors busy)}
 confirm=Are you sure you want to abort {0}?
 launching=launching...
+terminate\ this\ build=Cancel
diff --git a/core/src/main/resources/lib/layout/stopButton.jelly b/core/src/main/resources/lib/layout/stopButton.jelly
index 29f4ebcb6815..336184090622 100644
--- a/core/src/main/resources/lib/layout/stopButton.jelly
+++ b/core/src/main/resources/lib/layout/stopButton.jelly
@@ -39,13 +39,13 @@ THE SOFTWARE.
     </st:documentation>
     <j:choose>
       <j:when test="${confirm == null}">
-        <a class="stop-button-link" href="${href}">
-          <l:icon class="icon-stop icon-sm" alt="${alt}"/>
+        <a class="stop-button-link" href="${href}" tooltip="${alt}">
+          <l:icon src="symbol-close" />
         </a>
       </j:when>
       <j:otherwise>
-        <a class="stop-button-link" href="${href}" data-confirm="${confirm}">
-          <l:icon class="icon-stop icon-sm" alt="${alt}"/>
+        <a class="stop-button-link" href="${href}" data-confirm="${confirm}" tooltip="${alt}">
+          <l:icon src="symbol-close" />
         </a>
       </j:otherwise>
     </j:choose>
diff --git a/test/src/test/java/jenkins/security/Security2278Test.java b/test/src/test/java/jenkins/security/Security2278Test.java
index c556d5d079bf..7811c2afa884 100644
--- a/test/src/test/java/jenkins/security/Security2278Test.java
+++ b/test/src/test/java/jenkins/security/Security2278Test.java
@@ -70,7 +70,7 @@ public void testUi() throws Exception {
         assertThat(contentAsString, containsString("Build Executor Status"));
         assertThat(contentAsString, containsString("Unknown Task"));
         assertThat(contentAsString, not(containsString("job/foo/job/bar")));
-        assertThat(contentAsString, not(containsString("icon-stop")));
+        assertThat(contentAsString, not(containsString("stop-button-link")));
     }
 
     @Test
@@ -81,7 +81,7 @@ public void testUiWithPermission() throws Exception {
         assertThat(contentAsString, containsString("Build Executor Status"));
         assertThat(contentAsString, not(containsString("Unknown Task")));
         assertThat(contentAsString, containsString("job/foo/job/bar"));
-        assertThat(contentAsString, containsString("icon-stop"));
+        assertThat(contentAsString, containsString("stop-button-link"));
     }
 
     @Test
diff --git a/war/src/main/scss/components/_buttons.scss b/war/src/main/scss/components/_buttons.scss
index 0368549deb7d..5108aca2c6eb 100644
--- a/war/src/main/scss/components/_buttons.scss
+++ b/war/src/main/scss/components/_buttons.scss
@@ -299,3 +299,33 @@ $jenkins-split-button-border-radius: 0.2rem;
     }
   }
 }
+
+.stop-button-link {
+  --item-background--hover: color-mix(in sRGB, var(--red) 20%, transparent);
+  --item-background--active: color-mix(in sRGB, var(--red) 25%, transparent);
+  --item-box-shadow--focus: transparent;
+
+  @include mixins.item;
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  border-radius: 0.25rem;
+
+  &::before {
+    background: color-mix(in sRGB, var(--red) 15%, transparent);
+  }
+
+  svg {
+    width: 87.5%;
+    height: 87.5%;
+    color: var(--red);
+
+    * {
+      stroke-width: 40px;
+    }
+  }
+}