diff --git a/war/src/main/less/modules/breadcrumbs.less b/war/src/main/less/modules/breadcrumbs.less
index abcd92482973..3d30591c52b7 100644
--- a/war/src/main/less/modules/breadcrumbs.less
+++ b/war/src/main/less/modules/breadcrumbs.less
@@ -7,7 +7,7 @@
.jenkins-breadcrumbs {
display: flex;
align-items: center;
- padding: 0.5rem 0.7rem 0.5rem 0.75rem;
+ padding: 0.55rem 0.7rem 0.55rem 0.75rem;
backdrop-filter: blur(15px);
&::before {
@@ -15,7 +15,7 @@
position: absolute;
inset: 0;
background: var(--table-background);
- opacity: 0.95;
+ opacity: 0.85;
}
& > ol {
@@ -30,8 +30,11 @@
& > li {
position: relative;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
color: var(--text-color);
- font-weight: 500;
+ font-weight: 550;
font-size: 0.85rem;
padding: 0.2rem 0.4rem;
@@ -45,13 +48,18 @@
font-size: inherit;
margin: 0;
padding: 0;
- color: inherit;
+ color: var(--text-color-secondary);
text-decoration: none;
margin-right: 0 !important;
+ transition: var(--standard-transition);
&::before, &::after {
inset: -0.25rem -0.6rem;
}
+
+ &:hover, &:active, &:focus, &:focus-visible {
+ color: var(--text-color);
+ }
}
& > .model-link {
@@ -68,9 +76,9 @@
// '>' separator between two items
.children, .separator {
position: relative;
- width: 0.875rem;
- height: 0.875rem;
- margin: 0.375rem;
+ width: 1rem;
+ height: 1rem;
+ margin: 0.375rem 0.2rem;
&::after {
content: "";
@@ -79,10 +87,16 @@
left: 0;
bottom: 0;
right: 0;
- opacity: 0.5;
transition: var(--standard-transition);
- background: currentColor;
+ background: var(--text-color-secondary);
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3EChevron Forward%3C/title%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M184 112l144 144-144 144'/%3E%3C/svg%3E");
+ opacity: 0.6;
+ }
+
+ &:hover, &:active, &:focus, &:focus-visible {
+ &::after {
+ background: var(--text-color);
+ }
}
}
From d0679a4c27e5bde3c8ac09c82d7c8ba28fe8c2ac Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Thu, 14 Jul 2022 20:05:03 +0100
Subject: [PATCH 08/19] Remove stylings
---
.../resources/lib/layout/breadcrumbBar.jelly | 2 +-
.../main/resources/lib/layout/layout.jelly | 10 +++---
war/src/main/less/abstracts/theme.less | 8 ++---
war/src/main/less/modules/breadcrumbs.less | 31 ++++++-------------
4 files changed, 19 insertions(+), 32 deletions(-)
diff --git a/core/src/main/resources/lib/layout/breadcrumbBar.jelly b/core/src/main/resources/lib/layout/breadcrumbBar.jelly
index 9a3ce5485f07..b9ce717cd5bd 100644
--- a/core/src/main/resources/lib/layout/breadcrumbBar.jelly
+++ b/core/src/main/resources/lib/layout/breadcrumbBar.jelly
@@ -36,7 +36,7 @@ THE SOFTWARE.
-
+
diff --git a/core/src/main/resources/lib/layout/layout.jelly b/core/src/main/resources/lib/layout/layout.jelly
index b526bb2b57c0..645349e324cf 100644
--- a/core/src/main/resources/lib/layout/layout.jelly
+++ b/core/src/main/resources/lib/layout/layout.jelly
@@ -180,12 +180,10 @@ THE SOFTWARE.
searchHelpUrl="${%searchBox.url}"
logout="${%logout}"/>
-
-
-
-
-
-
+
+
+
+
diff --git a/war/src/main/less/abstracts/theme.less b/war/src/main/less/abstracts/theme.less
index 52fbc76e43df..ef4d0c67a3ce 100644
--- a/war/src/main/less/abstracts/theme.less
+++ b/war/src/main/less/abstracts/theme.less
@@ -70,11 +70,11 @@
// Header dimensions
--header-item-border-radius: 4px;
- // Breadcrumbs and footer
- --breadcrumbs-bg: #f8f8f8;
+ // Breadcrumbs bar
+ --breadcrumbs-bar-background: hsla(240, 0.2, 0.965, 0.8);
+ // Deprecated
+ --breadcrumbs-bg: var(--light-grey);
--breadcrumbs-border: var(--light-grey);
- --breadcrumbs-text-color: #4d545d;
- --breadcrumbs-item-bg-color--hover: var(--light-grey);
// Alert banners
// Default
diff --git a/war/src/main/less/modules/breadcrumbs.less b/war/src/main/less/modules/breadcrumbs.less
index 3d30591c52b7..a4654979cb7d 100644
--- a/war/src/main/less/modules/breadcrumbs.less
+++ b/war/src/main/less/modules/breadcrumbs.less
@@ -1,34 +1,23 @@
-#breadcrumbBar {
+.jenkins-breadcrumbs {
position: sticky;
top: 0;
z-index: 999;
-}
-
-.jenkins-breadcrumbs {
display: flex;
align-items: center;
padding: 0.55rem 0.7rem 0.55rem 0.75rem;
backdrop-filter: blur(15px);
+ overflow-x: auto;
+ background: var(--breadcrumbs-bar-background);
- &::before {
- content: "";
- position: absolute;
- inset: 0;
- background: var(--table-background);
- opacity: 0.85;
- }
-
- & > ol {
- display: flex;
- align-items: center;
+ &__list {
+ display: contents;
list-style-type: none;
- margin: 0;
- padding: 0;
- flex: 1;
- flex-wrap: wrap;
- z-index: 0;
- & > li {
+ & > * {
+ flex-shrink: 0;
+ }
+
+ &-item {
position: relative;
display: inline-flex;
align-items: center;
From 9e51f38b1a243f6fd3fe713a9b03fe5268d65c41 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Wed, 20 Jul 2022 15:28:18 +0100
Subject: [PATCH 09/19] Fix breadcrumb dropdowns, remove separator hover
---
.../resources/lib/layout/breadcrumbBar.jelly | 4 ++--
war/src/main/less/modules/breadcrumbs.less | 18 ++++++++----------
2 files changed, 10 insertions(+), 12 deletions(-)
diff --git a/core/src/main/resources/lib/layout/breadcrumbBar.jelly b/core/src/main/resources/lib/layout/breadcrumbBar.jelly
index b9ce717cd5bd..e173a5001fef 100644
--- a/core/src/main/resources/lib/layout/breadcrumbBar.jelly
+++ b/core/src/main/resources/lib/layout/breadcrumbBar.jelly
@@ -61,7 +61,7 @@ THE SOFTWARE.
-
-
+
+
diff --git a/war/src/main/less/modules/breadcrumbs.less b/war/src/main/less/modules/breadcrumbs.less
index a4654979cb7d..4417c70d5550 100644
--- a/war/src/main/less/modules/breadcrumbs.less
+++ b/war/src/main/less/modules/breadcrumbs.less
@@ -82,10 +82,8 @@
opacity: 0.6;
}
- &:hover, &:active, &:focus, &:focus-visible {
- &::after {
- background: var(--text-color);
- }
+ &:last-of-type {
+ display: none;
}
}
@@ -105,6 +103,12 @@
opacity: 0.5;
}
}
+
+ &:hover, &:active, &:focus, &:focus-visible {
+ &::after {
+ background: var(--text-color);
+ }
+ }
// Increase the hit target
&::before {
@@ -117,12 +121,6 @@
background: transparent;
}
}
-
- .separator, .children {
- &:last-of-type {
- display: none;
- }
- }
}
}
From b10d355e0d7d47816124ac8fc2b1f315b6c87119 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Wed, 20 Jul 2022 15:31:48 +0100
Subject: [PATCH 10/19] Update top sticker
---
war/src/main/less/modules/breadcrumbs.less | 2 +-
war/src/main/webapp/scripts/hudson-behavior.js | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/war/src/main/less/modules/breadcrumbs.less b/war/src/main/less/modules/breadcrumbs.less
index 4417c70d5550..45a081082c80 100644
--- a/war/src/main/less/modules/breadcrumbs.less
+++ b/war/src/main/less/modules/breadcrumbs.less
@@ -103,7 +103,7 @@
opacity: 0.5;
}
}
-
+
&:hover, &:active, &:focus, &:focus-visible {
&::after {
background: var(--text-color);
diff --git a/war/src/main/webapp/scripts/hudson-behavior.js b/war/src/main/webapp/scripts/hudson-behavior.js
index fbfc5a2ebfd4..b02df73c3b88 100644
--- a/war/src/main/webapp/scripts/hudson-behavior.js
+++ b/war/src/main/webapp/scripts/hudson-behavior.js
@@ -1930,7 +1930,7 @@ function ensureVisible(e) {
}
// if there are any stickers around, subtract them from the viewport
- handleStickers("top-sticker",function (t) {
+ handleStickers("jenkins-breadcrumbs",function (t) {
t = t.clientHeight;
Y+=t; H-=t;
});
From bfc95fa883d28dece4f02832cdd87d5a70daaf86 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Sat, 23 Jul 2022 17:47:19 +0100
Subject: [PATCH 11/19] Potential fix for sidebar child breadcrumbs
---
core/src/main/resources/lib/layout/breadcrumbBar.jelly | 10 +++++++---
1 file changed, 7 insertions(+), 3 deletions(-)
diff --git a/core/src/main/resources/lib/layout/breadcrumbBar.jelly b/core/src/main/resources/lib/layout/breadcrumbBar.jelly
index e173a5001fef..31b14b78e5a0 100644
--- a/core/src/main/resources/lib/layout/breadcrumbBar.jelly
+++ b/core/src/main/resources/lib/layout/breadcrumbBar.jelly
@@ -36,13 +36,17 @@ THE SOFTWARE.
+
+
+
+
-
+
@@ -59,7 +63,7 @@ THE SOFTWARE.
-
+
From e09638dd09385519d1b386cdd2c0faeeeee988f4 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Sun, 24 Jul 2022 16:45:33 +0100
Subject: [PATCH 12/19] Update HudsonTest.java
---
test/src/test/java/hudson/model/HudsonTest.java | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/test/src/test/java/hudson/model/HudsonTest.java b/test/src/test/java/hudson/model/HudsonTest.java
index 4bcf2025f1d4..e1a91155818d 100644
--- a/test/src/test/java/hudson/model/HudsonTest.java
+++ b/test/src/test/java/hudson/model/HudsonTest.java
@@ -151,7 +151,7 @@ public void searchIndex() throws Exception {
public void breadcrumb() throws Exception {
HtmlPage root = j.createWebClient().goTo("");
DomElement navbar = root.getElementById("breadcrumbs");
- assertEquals(1, DomNodeUtil.selectNodes(navbar, "LI/A").size());
+ assertEquals(1, DomNodeUtil.selectNodes(navbar, "LI").size());
}
/**
From d081079232e724f9751a2eb9d6dce48f80511f91 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Sun, 24 Jul 2022 16:50:51 +0100
Subject: [PATCH 13/19] Update page.js
---
war/src/main/js/util/page.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/war/src/main/js/util/page.js b/war/src/main/js/util/page.js
index 629064a0f50b..ea457da2779b 100644
--- a/war/src/main/js/util/page.js
+++ b/war/src/main/js/util/page.js
@@ -45,7 +45,7 @@ function pageHeaderHeight() {
}
function breadcrumbBarHeight() {
- return elementHeight('#breadcrumbBar');
+ return document.querySelector('#breadcrumbBar').offsetHeight;
}
function removeTextHighlighting(selector) {
From f8d3330d16bc456bdf0854de3c546838a3a95a44 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Sun, 24 Jul 2022 16:51:30 +0100
Subject: [PATCH 14/19] Update page.js
---
war/src/main/js/util/page.js | 6 +-----
1 file changed, 1 insertion(+), 5 deletions(-)
diff --git a/war/src/main/js/util/page.js b/war/src/main/js/util/page.js
index ea457da2779b..4788592b668f 100644
--- a/war/src/main/js/util/page.js
+++ b/war/src/main/js/util/page.js
@@ -41,7 +41,7 @@ function onWinScroll(callback) {
}
function pageHeaderHeight() {
- return elementHeight('#page-header') + breadcrumbBarHeight();
+ return document.querySelector('#page-header').offsetHeight + breadcrumbBarHeight();
}
function breadcrumbBarHeight() {
@@ -56,10 +56,6 @@ function removeTextHighlighting(selector) {
});
}
-function elementHeight(selector) {
- return $(selector).height();
-}
-
export default {
onload,
winScrollTop,
From ad891ddbda0c23845dfb24bdc0dcfedd96ab5367 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Sun, 24 Jul 2022 18:54:44 +0100
Subject: [PATCH 15/19] Fix test
---
test/src/test/java/hudson/model/HudsonTest.java | 3 +--
1 file changed, 1 insertion(+), 2 deletions(-)
diff --git a/test/src/test/java/hudson/model/HudsonTest.java b/test/src/test/java/hudson/model/HudsonTest.java
index e1a91155818d..6e34d44ac5a6 100644
--- a/test/src/test/java/hudson/model/HudsonTest.java
+++ b/test/src/test/java/hudson/model/HudsonTest.java
@@ -34,7 +34,6 @@
import com.gargoylesoftware.htmlunit.Page;
import com.gargoylesoftware.htmlunit.WebRequest;
import com.gargoylesoftware.htmlunit.html.DomElement;
-import com.gargoylesoftware.htmlunit.html.DomNodeUtil;
import com.gargoylesoftware.htmlunit.html.HtmlAnchor;
import com.gargoylesoftware.htmlunit.html.HtmlForm;
import com.gargoylesoftware.htmlunit.html.HtmlPage;
@@ -151,7 +150,7 @@ public void searchIndex() throws Exception {
public void breadcrumb() throws Exception {
HtmlPage root = j.createWebClient().goTo("");
DomElement navbar = root.getElementById("breadcrumbs");
- assertEquals(1, DomNodeUtil.selectNodes(navbar, "LI").size());
+ assertEquals(1, navbar.querySelectorAll(".jenkins-breadcrumbs__list-item").size());
}
/**
From 781c76b056825e386ed82e70713ea1c5e0cd48f2 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Mon, 25 Jul 2022 18:49:30 +0100
Subject: [PATCH 16/19] Update footer styling
---
war/src/main/less/abstracts/theme.less | 6 +++---
war/src/main/less/base/layout-commons.less | 4 ----
war/src/main/less/modules/page-footer.less | 3 +--
3 files changed, 4 insertions(+), 9 deletions(-)
diff --git a/war/src/main/less/abstracts/theme.less b/war/src/main/less/abstracts/theme.less
index 0c4b9cb7c497..fbbaf5530132 100644
--- a/war/src/main/less/abstracts/theme.less
+++ b/war/src/main/less/abstracts/theme.less
@@ -72,9 +72,9 @@
// Breadcrumbs bar
--breadcrumbs-bar-background: hsla(240, 0.2, 0.965, 0.8);
- // Deprecated
- --breadcrumbs-bg: var(--light-grey);
- --breadcrumbs-border: var(--light-grey);
+
+ // Footer
+ --footer-background: hsla(240, 0.2, 0.965, 0.8);
// Alert banners
// Default
diff --git a/war/src/main/less/base/layout-commons.less b/war/src/main/less/base/layout-commons.less
index 2efbaead66ad..e796fdfdd29c 100644
--- a/war/src/main/less/base/layout-commons.less
+++ b/war/src/main/less/base/layout-commons.less
@@ -41,10 +41,6 @@ body {
margin-left: 0.25rem;
}
-#footer-container {
- background-color: var(--breadcrumbs-bg);
-}
-
/* -------------------------------------- */
#page-body {
diff --git a/war/src/main/less/modules/page-footer.less b/war/src/main/less/modules/page-footer.less
index af25e8add810..dfc71bb559e6 100644
--- a/war/src/main/less/modules/page-footer.less
+++ b/war/src/main/less/modules/page-footer.less
@@ -1,8 +1,7 @@
@import "../abstracts/theme.less";
.page-footer {
- background-color: var(--breadcrumbs-bg);
- border-top: 1px solid var(--breadcrumbs-border);
+ background-color: var(--footer-background);
width: 100%;
clear: both;
font-size: var(--font-size-sm);
From fcf12214f4373a6b9ae4c7ae4cc882e86d0009c2 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Thu, 1 Sep 2022 21:44:36 +0100
Subject: [PATCH 17/19] Restore last breadcrumb if it is clickable
---
war/src/main/less/modules/breadcrumbs.less | 2 ++
1 file changed, 2 insertions(+)
diff --git a/war/src/main/less/modules/breadcrumbs.less b/war/src/main/less/modules/breadcrumbs.less
index 8297bb7a094e..e281f875fbc7 100644
--- a/war/src/main/less/modules/breadcrumbs.less
+++ b/war/src/main/less/modules/breadcrumbs.less
@@ -86,7 +86,9 @@
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3EChevron Forward%3C/title%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M184 112l144 144-144 144'/%3E%3C/svg%3E");
opacity: 0.6;
}
+ }
+ .separator {
&:last-of-type {
display: none;
}
From 72aa819b9e490b424983df59f10833abf94d5d4a Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Mon, 26 Sep 2022 23:52:00 +0100
Subject: [PATCH 18/19] Add aria labels to breadcrumb bar and current item
---
core/src/main/resources/lib/layout/breadcrumb.jelly | 6 +++---
core/src/main/resources/lib/layout/breadcrumbBar.jelly | 2 +-
2 files changed, 4 insertions(+), 4 deletions(-)
diff --git a/core/src/main/resources/lib/layout/breadcrumb.jelly b/core/src/main/resources/lib/layout/breadcrumb.jelly
index 623c3c3eb58f..384d22fa0338 100644
--- a/core/src/main/resources/lib/layout/breadcrumb.jelly
+++ b/core/src/main/resources/lib/layout/breadcrumb.jelly
@@ -43,10 +43,10 @@ THE SOFTWARE.
- -
+
+
-
-
-
+
${attrs.title}
diff --git a/core/src/main/resources/lib/layout/breadcrumbBar.jelly b/core/src/main/resources/lib/layout/breadcrumbBar.jelly
index 1576091e55bd..9d3a98a453e2 100644
--- a/core/src/main/resources/lib/layout/breadcrumbBar.jelly
+++ b/core/src/main/resources/lib/layout/breadcrumbBar.jelly
@@ -41,7 +41,7 @@ THE SOFTWARE.
-
+
From 94e67bf6b33fa7e9127c68324948078846f45657 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Tue, 27 Sep 2022 19:20:47 +0100
Subject: [PATCH 19/19] Update breadcrumbs.less
---
war/src/main/less/modules/breadcrumbs.less | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/war/src/main/less/modules/breadcrumbs.less b/war/src/main/less/modules/breadcrumbs.less
index e281f875fbc7..1cdbdf008c41 100644
--- a/war/src/main/less/modules/breadcrumbs.less
+++ b/war/src/main/less/modules/breadcrumbs.less
@@ -23,7 +23,7 @@
align-items: center;
justify-content: center;
color: var(--text-color);
- font-weight: 550;
+ font-weight: 500;
font-size: 0.85rem;
padding: 0.2rem 0.4rem;
@@ -37,7 +37,7 @@
font-size: inherit;
margin: 0;
padding: 0;
- color: var(--text-color-secondary);
+ color: var(--text-color);
text-decoration: none;
margin-right: 0 !important;
transition: var(--standard-transition);