Init

Author: janfaracik

core/src/main/resources/lib/form/bottomButtonBar.jelly

@@ -28,9 +28,13 @@ THE SOFTWARE.
     Creates a button bar at the bottom of the page for things like "Submit".
     The actual buttons should be specified as the body of this tag.
     This area will always be visible at the bottom of the screen.
+
+    <st:attribute name="borderless">
+      Hides the border of the bottom app bar unless its overlaying content.
+    </st:attribute>
   </st:documentation>
 
-  <div class="jenkins-bottom-app-bar__shadow"></div>
+  <div class="jenkins-bottom-app-bar__shadow ${attrs.borderless ? 'jenkins-bottom-app-bar__shadow--borderless' : ''}"></div>
   <div id="bottom-sticker">
     <div class="bottom-sticker-inner jenkins-buttons-row jenkins-buttons-row--equal-width">
       <d:invokeBody />

src/main/scss/abstracts/_theme.scss

@@ -77,6 +77,7 @@ $semantics: (
   --header-height: 4.125rem;
 
   // App bar
+  --bottom-app-bar-padding: 0.875rem;
   --bottom-app-bar-shadow: color-mix(
     in sRGB,
     var(--text-color-secondary) 8%,
@@ -201,8 +202,7 @@ $semantics: (
   --dialog-background: var(--card-background);
   --dialog-box-shadow:
     var(--jenkins-border--subtle-shadow), 0 5px 25px rgb(0 0 10 / 0.025),
-    0 0 1.5px color-mix(in sRGB, var(--black) 20%, transparent),
-    inset 0 0 0 1px rgb(255 255 255 / 0.05);
+    0 0 1.5px color-mix(in sRGB, var(--black) 20%, transparent);
 
   ::backdrop {
     --dialog-backdrop-backdrop-filter: blur(0.25px);

src/main/scss/components/_app-bar.scss

@@ -125,25 +125,15 @@
   text-overflow: ellipsis;
 }
 
-$bottom-app-bar-padding: 0.875rem;
-
 .jenkins-bottom-app-bar__shadow {
-  --semi-translucent: color-mix(in sRGB, var(--background) 75%, transparent);
+  --semi-translucent: color-mix(in sRGB, var(--background) 100%, transparent);
 
   position: sticky;
   height: calc(
-    2.375rem + ($bottom-app-bar-padding * 2) + 1px + var(--jenkins-border-width)
+    2.375rem + (var(--bottom-app-bar-padding) * 2) + 1px + var(--jenkins-border-width)
   );
   bottom: -1px;
-  margin-bottom: calc((2.375rem + $bottom-app-bar-padding) * -1);
-  backdrop-filter: blur(20px);
-  background: linear-gradient(
-    to right,
-    var(--background),
-    var(--semi-translucent) 3rem,
-    var(--semi-translucent) calc(100% - 3rem),
-    var(--background)
-  );
+  margin-bottom: calc((2.375rem + calc(var(--bottom-app-bar-padding) * 2)) * -1);
   border-top: var(--jenkins-border-width) solid var(--jenkins-border-color);
   z-index: 997;
 
@@ -167,7 +157,19 @@ $bottom-app-bar-padding: 0.875rem;
     opacity: 0;
   }
 
+  &--borderless:not(&--stuck) {
+    border-top-color: transparent;
+  }
+
   &--stuck {
+    background: linear-gradient(
+      to right,
+      var(--background),
+      var(--semi-translucent) 3rem,
+      var(--semi-translucent) calc(100% - 3rem),
+      var(--background)
+    );
+
     &::after {
       opacity: 1 !important;
     }
@@ -183,5 +185,5 @@ $bottom-app-bar-padding: 0.875rem;
 
 .bottom-sticker-inner {
   position: relative;
-  padding: $bottom-app-bar-padding 0;
+  padding: var(--bottom-app-bar-padding) 0;
 }

src/main/scss/components/_dialogs.scss

@@ -2,6 +2,8 @@ $jenkins-dialog-padding: 1.25rem;
 
 .jenkins-dialog {
   --background: var(--dialog-background);
+  --section-padding: #{$jenkins-dialog-padding};
+  --bottom-app-bar-padding: #{$jenkins-dialog-padding};
 
   border-radius: 1rem;
   border: none;
@@ -13,7 +15,8 @@ $jenkins-dialog-padding: 1.25rem;
   display: flex;
   flex-direction: column;
   gap: $jenkins-dialog-padding;
-  outline: none;
+  // Thin highlight for dark themes to differentiate the dialog from its backdrop
+  outline: 1px solid rgb(255 255 255 / 0.05);
 
   &::backdrop {
     background: color-mix(
@@ -32,7 +35,7 @@ $jenkins-dialog-padding: 1.25rem;
     color: var(--text-color);
     overflow-wrap: anywhere;
     text-box: cap alphabetic;
-    margin-top: 0.5625rem;
+    margin-top: 0.625rem;
   }
 
   &__contents {

war/src/main/webapp/scripts/hudson-behavior.js

@@ -1764,19 +1764,25 @@ function rowvgStartEachRow(recursive, f) {
 
   window.addEventListener("load", function () {
     // Add a class to the bottom bar when it's stuck to the bottom of the screen
-    const el = document.querySelector(".jenkins-bottom-app-bar__shadow");
-    if (el) {
+    Behaviour.specify(".jenkins-bottom-app-bar__shadow", "jenkins-bottom-app-bar__shadow", 0, function (el) {
+      const dialog = el.closest("dialog");
+
       const observer = new IntersectionObserver(
-        ([e]) =>
-          e.target.classList.toggle(
+        function (entries) {
+          const e = entries[0];
+          el.classList.toggle(
             "jenkins-bottom-app-bar__shadow--stuck",
             e.intersectionRatio < 1,
-          ),
-        { threshold: [1] },
+          );
+        },
+        {
+          threshold: [1],
+          root: dialog || null,
+        },
       );
 
       observer.observe(el);
-    }
+    });
   });
 
   /**