From 24668052b1f1a4700e190ebbe63d41ea0cff9e61 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Esther=20=C3=81lvarez=20Feijoo?=
 <5547479+EstherAF@users.noreply.github.com>
Date: Fri, 12 Jun 2020 16:22:07 +0200
Subject: [PATCH] [JENKINS-62496] Convert arrow pngs to CSS (#4757)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Félix Queiruga <felix.queiruga@gmail.com>
Co-authored-by: Tim Jacomb <timjacomb1+github@gmail.com>
---
 .../main/resources/lib/layout/breadcrumbs.css | 41 +++++++++++++------
 war/src/main/less/abstracts/colors.less       |  1 +
 war/src/main/less/base/yui-compatibility.less | 25 +++++++++++
 3 files changed, 55 insertions(+), 12 deletions(-)

diff --git a/core/src/main/resources/lib/layout/breadcrumbs.css b/core/src/main/resources/lib/layout/breadcrumbs.css
index f0ba7d781913..bb1a69e60658 100644
--- a/core/src/main/resources/lib/layout/breadcrumbs.css
+++ b/core/src/main/resources/lib/layout/breadcrumbs.css
@@ -51,6 +51,7 @@
 
 #breadcrumbs LI:hover, A.breadcrumbBarAnchor.mouseIsOverMenuSelector {
   background-color: #e0e4dc;
+  background-color: var(--breadcrumbs-item-bg-color--hover);
 }
 
 
@@ -91,18 +92,25 @@
     display: inline-block;
     display: inline-flex;
     align-items: center;
-    background-image: url(menu_right_arrow2.png);
-    background-position: center center;
-    background-repeat: no-repeat;
+    justify-content: center;
+}
 
+#breadcrumbs LI.children:after, #breadcrumbs LI.separator:after {
+    /* Right arrow */
+    content: "";
+    border-left: 0.25em solid #bcbcbc;
+    border-top: 0.25em solid transparent;
+    border-bottom: 0.25em solid transparent;
+    border-right: 0;
 }
 
 #breadcrumbs LI.children {
     cursor: pointer;
 }
 
-#breadcrumbs LI.children:hover {
-    background-image: url(menu_right_arrow.png);
+#breadcrumbs LI.children:hover:after {
+    border-left-color: #4d545d;
+    border-left-color: var(--breadcrumbs-text-color);
 }
 
 #breadcrumbs LI.separator:last-child {/* separators are for in-between only */
@@ -110,19 +118,28 @@
 }
 
 #menuSelector {/* used for showing 'v' on the right of the anchor */
-    background-color:transparent;
-    background-image: url(menu_down_arrow.png);
-    background-position: center center;
-    background-repeat: no-repeat;
     width: 15px;
     height:16px;
     position: absolute;
     visibility: hidden;
     cursor: pointer;
     z-index: 2000;
-}
-#menuSelector.inverse {
-    background-image: url(menu_down_arrow2.png);
+    display: inline-block;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+#menuSelector:after {
+    /* Down arrow */
+    content: "";
+    border-top: 0.30em solid #4d545d;
+    border-top: 0.30em solid var(--breadcrumbs-text-color);
+    border-left: 0.30em solid transparent;
+    border-right: 0.30em solid transparent;
+    border-bottom: 0;
+}
+#menuSelector.inverse:after {
+    border-top-color: #bcbcbc;
 }
 
 A.model-link.inside, #breadcrumbs A.inside {/* additional 'inside' class allows pre-allocation of the context menu space */
diff --git a/war/src/main/less/abstracts/colors.less b/war/src/main/less/abstracts/colors.less
index a0f34c0bbee7..913d3089334f 100644
--- a/war/src/main/less/abstracts/colors.less
+++ b/war/src/main/less/abstracts/colors.less
@@ -55,6 +55,7 @@
   --breadcrumbs-bg: #f8f8f8;
   --breadcrumbs-border: #eaeff2;
   --breadcrumbs-text-color: #4d545d;
+  --breadcrumbs-item-bg-color--hover: #e0e4dc;
 
   // Monitor / bell-alert new colors
   --monitor-bg-v2: #f8d7da;
diff --git a/war/src/main/less/base/yui-compatibility.less b/war/src/main/less/base/yui-compatibility.less
index f9807588e9f2..d35d74aa89a2 100644
--- a/war/src/main/less/base/yui-compatibility.less
+++ b/war/src/main/less/base/yui-compatibility.less
@@ -156,3 +156,28 @@ DIV.yahooTree td {
   background: var(--search-box-completion-bg);
   font-weight: bold;
 }
+
+#jenkins.yui-skin-sam .yuimenuitem.yuimenuitem-hassubmenu {
+  background-image: none; //Do not use background image, use CSS arrow instead
+
+  //Center the CSS arrow
+  position: relative;
+  align-items: center;
+  justify-content: center;
+
+  &:after {
+    /* Right arrow */
+    content: "";
+    border-left: 0.35em solid #333;
+    border-left: 0.35em solid var(--text-color);
+    border-top: 0.35em solid transparent;
+    border-bottom: 0.35em solid transparent;
+    border-right: 0;
+
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 0.75em;
+    display: inline-block;
+  }
+}