Update form bottom button bar appearance

core/src/main/resources/hudson/security/GlobalSecurityConfiguration/index.groovy

@@ -21,7 +21,7 @@ l.layout(permission:app.SYSTEM_READ, title:my.displayName, cssclass:request.getP
         div(class:"behavior-loading") {
             l.spinner(text: _("LOADING"))
         }
-        f.form(method:"post",name:"config",action:"configure") {
+        f.form(method:"post",name:"config",action:"configure", class: "jenkins-form") {
             set("instance",my)
             set("descriptor", my.descriptor)
 

core/src/main/resources/jenkins/model/GlobalCloudConfiguration/index.groovy

@@ -25,7 +25,7 @@ l.layout(norefresh:true, permission:app.SYSTEM_READ, title:my.displayName) {
                 l.spinner(text: _("LOADING"))
             }
 
-            f.form(method:"post",name:"config",action:"configure") {
+            f.form(method:"post",name:"config",action:"configure", class: "jenkins-form") {
                 f.block {
                     if (app.clouds.size() == 0 && !h.hasPermission(app.ADMINISTER)) {
                         p(_("No clouds have been configured."))

core/src/main/resources/jenkins/tools/GlobalToolConfiguration/index.groovy

@@ -21,7 +21,7 @@ l.layout(permission:app.SYSTEM_READ, title:my.displayName) {
             l.spinner(text: _("LOADING"))
         }
 
-        f.form(method:"post",name:"config",action:"configure") {
+        f.form(method:"post",name:"config",action:"configure", class: "jenkins-form") {
             Functions.getSortedDescriptorsForGlobalConfigByDescriptor(my.FILTER).each { Descriptor descriptor ->
                 set("descriptor",descriptor)
                 set("instance",descriptor)

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

@@ -27,14 +27,12 @@ THE SOFTWARE.
   <st:documentation>
     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 in the bottom of the screen.
+    This area will always be visible at the bottom of the screen.
   </st:documentation>
 
-  <f:block>
-    <div id="bottom-sticker" >
-      <div class="bottom-sticker-inner">
-        <d:invokeBody />
-      </div>
+  <div id="bottom-sticker">
+    <div class="bottom-sticker-inner">
+      <d:invokeBody />
     </div>
-  </f:block>
+  </div>
 </j:jelly>

core/src/main/resources/lib/form/password/password.js

@@ -32,7 +32,5 @@ Behaviour.specify('.hidden-password', 'hidden-password-button', 0, function (e)
         e.querySelector('.hidden-password-field').setAttribute('type', 'password');
         e.querySelector('.hidden-password-placeholder').remove();
         secretUpdateBtn.remove();
-        // fix UI bug when DOM changes
-        Event.fire(window, 'jenkins:bottom-sticker-adjust');
     };
 });

core/src/main/resources/lib/form/secretTextarea/secret.js

@@ -71,7 +71,5 @@ Behaviour.specify('.secret', 'secret-button', 0, function (e) {
         clearSecretValue();
         replaceUpdateButton();
         removeSecretLegendLabel();
-        // fix UI bug when DOM changes
-        Event.fire(window, 'jenkins:bottom-sticker-adjust');
     };
 });

war/src/main/js/util/page.js

@@ -48,10 +48,6 @@ function breadcrumbBarHeight() {
     return elementHeight('#breadcrumbBar');
 }
 
-function fireBottomStickerAdjustEvent() {
-    Event.fire(window, 'jenkins:bottom-sticker-adjust'); // jshint ignore:line
-}
-
 function removeTextHighlighting(selector) {
     $('span.highlight-split', selector).each(function() {
         var highlightSplit = $(this);
@@ -70,6 +66,5 @@ export default {
     onWinScroll,
     pageHeaderHeight,
     breadcrumbBarHeight,
-    fireBottomStickerAdjustEvent,
     removeTextHighlighting
 }

war/src/main/less/abstracts/theme.less

@@ -307,8 +307,6 @@
   --light-bg-color--hover: rgba(255, 255, 255, 0.65);
   --add-item-btn-decorator-border-color: #acb;
   --add-item-btn-decorator-bg-color: rgba(245, 249, 239, 0.75);
-  --configure-job-bottom-sticker-bg-color: rgba(245, 249, 239, 0.75);
-  --configure-job-bottom-sticker-border-color: var(--line-green);
 
   // Plugin manager
   --plugin-manager-bg-color-already-upgraded: var(--light-grey);

war/src/main/less/base/style.less

@@ -467,25 +467,70 @@ div.behavior-loading {
 
 .bottom-sticker,
 #bottom-sticker {
-    width: 100%;   /* it needs to occupy the entire width or else the underlying content will see through */
-    z-index: 999;
+  position: sticky;
+  // This has to be set to -1px so that IntersectionObserver can add the
+  // &--stuck class when the element is stuck to the bottom of the screen
+  // https://css-tricks.com/how-to-detect-when-a-sticky-element-gets-pinned/
+  bottom: -1px;
+  margin-left: -2rem;
+  width: calc(100% + 4rem);   /* it needs to occupy the entire width or else the underlying content will see through */
+  z-index: 999;
 }
 
 .bottom-sticker-inner {
   position: relative;
-  padding: 1em 0;
+  padding: 1em 2rem;
   z-index: 0;
 
   &::before {
     content: "";
     position: absolute;
     top: 0;
-    left: calc(-2rem - 2px);
+    left: 0;
     bottom: 0;
     right: 0;
     background: var(--background);
+    opacity: 0;
     z-index: -1;
   }
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: -30px;
+    left: 0;
+    right: 0;
+    background: linear-gradient(rgba(black, 0), rgba(#555566, 0.075) 110%);
+    max-width: 100%;
+    height: 30px;
+    opacity: 0;
+    transition: var(--standard-transition);
+    mask-image: linear-gradient(to right, transparent, white 2rem, white calc(100% - 2rem), transparent);
+    pointer-events: none;
+  }
+
+  &--stuck {
+    .bottom-sticker-inner {
+      backdrop-filter: blur(15px);
+
+      &::before {
+        opacity: 0.75 !important;
+
+        @supports not (backdrop-filter: blur(15px)) {
+          opacity: 1 !important;
+        }
+      }
+
+      &::after {
+        opacity: 1 !important;
+      }
+    }
+  }
+
+  .yui-button {
+    margin-left: 0;
+    margin-right: 0.5rem;
+  }
 }
 
 .top-sticker,
@@ -741,7 +786,7 @@ table.parameters > tbody:hover {
 
   table {
     border-radius: 0;
-    min-width: 450px;
+    width: 450px;
     margin-bottom: 0;
     box-sizing: content-box;
     padding-bottom: 2px;

war/src/main/less/form/layout.less

@@ -72,7 +72,7 @@
   }
 
   &--monospace {
-    font-family: monospace;
+    font-family: var(--font-family-mono);
   }
 }
 

war/src/main/less/modules/panes-and-bigtable.less

@@ -92,7 +92,7 @@ table.bigtable {
 }
 
 // Keep this for tables still wrapped by .pane-frame
-.pane-frame table,
+.pane-frame table:not(.jenkins-table),
 .pane-frame .bigtable tr {
   border: none; /* Border will be provided by the pane-frame */
 }

war/src/main/less/modules/table.less

@@ -1,7 +1,7 @@
 .jenkins-table {
   --table-padding: 0.55rem;
 
-  width: calc(100% - 10px);
+  width: 100%;
   background: var(--table-background);
   border-radius: calc(var(--table-border-radius) + 2px);
   border: 5px solid var(--table-background);

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

@@ -1428,44 +1428,18 @@ function rowvgStartEachRow(recursive,f) {
         });
     });
 
-    /*
-        Use on div tag to make it sticky visible on the bottom of the page.
-        When page scrolls it remains in the bottom of the page
-        Convenient on "OK" button and etc for a long form page
-     */
-    Behaviour.specify("#bottom-sticker", "-bottom-sticker", ++p, function(sticker) {
-        var DOM = YAHOO.util.Dom;
-
-        var shadow = document.createElement("div");
-        sticker.parentNode.insertBefore(shadow,sticker);
-
-        var edge = document.createElement("div");
-        edge.className = "bottom-sticker-edge";
-        sticker.insertBefore(edge,sticker.firstElementChild);
-
-        function adjustSticker() {
-            shadow.style.height = sticker.offsetHeight + "px";
-
-            var viewport = DOM.getClientRegion();
-            var pos = DOM.getRegion(shadow);
-
-            sticker.style.position = "fixed";
-
-            var bottomPos = Math.max(0, viewport.bottom - pos.bottom);
-
-            sticker.style.bottom = bottomPos + "px"
-            sticker.style.left = Math.max(0,pos.left-viewport.left) + "px"
-        }
-
-        // react to layout change
-        Element.observe(window,"scroll",adjustSticker);
-        Element.observe(window,"resize",adjustSticker);
-        // initial positioning
-        Element.observe(window,"load",adjustSticker);
-        Event.observe(window, 'jenkins:bottom-sticker-adjust', adjustSticker);
-        adjustSticker();
-        layoutUpdateCallback.add(adjustSticker);
-    });
+  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("#bottom-sticker")
+    if (el) {
+      const observer = new IntersectionObserver(
+        ([e]) => e.target.classList.toggle("bottom-sticker-inner--stuck", e.intersectionRatio < 1),
+        {threshold: [1]}
+      );
+
+      observer.observe(el);
+    }
+  })
 
     Behaviour.specify("#top-sticker", "-top-sticker", ++p, function(sticker) {// legacy
         this[".top-sticker"](sticker);