added sticky div to help with UI

changelog.html

@@ -55,6 +55,8 @@ Upcoming changes</a>
 <!-- Record your changes in the trunk here. -->
 <div id="trunk" style="display:none"><!--=TRUNK-BEGIN=-->
 <ul class=image>
+  <li class=rfe>
+    Update center UI improvement. "Install" button is now always visisble.
   <li class=rfe>
     Make the matrix configuration table looks like the rest of Jenkins tables.
     (<a href="https://issues.jenkins-ci.org/browse/JENKINS-10251">issue 10251</a>)

core/src/main/resources/hudson/PluginManager/table.jelly

@@ -136,10 +136,12 @@ THE SOFTWARE.
         </table>
 
         <j:if test="${!empty(list)}">
-          <div style="margin-top:1em">
-            <f:submit value="${%Install without restart}" name="dynamicLoad" />
-            <span style="margin-left:2em;"></span>
-            <f:submit value="${%Download now and install after restart}" />
+          <div id="bottom-sticker" >
+            <div style="background:white; padding:1em">
+              <f:submit value="${%Install without restart}" name="dynamicLoad" />
+              <span style="margin-left:2em;"></span>
+              <f:submit value="${%Download now and install after restart}" />
+            </div>
           </div>
         </j:if>
         <d:invokeBody />

war/src/main/webapp/css/style.css

@@ -469,6 +469,15 @@ LABEL.attach-previous {
     margin-left: 0.5em;
 }
 
+#bottom-sticker {
+    width:  100%;   /* it needs to occupy the entire width or else the underlying content will see through */
+}
+.bottom-sticker-top-edge {
+    height:16px;
+    background-image: url("../images/bottom-sticker-top-edge.png");
+    background-repeat: repeat-x;
+}
+
 /* ======================== error/warning message (mainly in the form.) Use them on block elements ======================== */
 .error {
     color: #CC0000;

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

@@ -1233,6 +1233,39 @@ var hudsonRules = {
             $(hidePreview).hide();
             $(previewDiv).hide();
         };
+    },
+
+    /*
+        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
+     */
+    "#bottom-sticker" : function(sticker) {
+        var DOM = YAHOO.util.Dom;
+
+        var shadow = document.createElement("div");
+        sticker.parentNode.insertBefore(shadow,sticker);
+
+        var topedge = document.createElement("div");
+        topedge.className = "bottom-sticker-top-edge";
+        sticker.insertBefore(topedge,sticker.firstChild);
+
+        function adjustSticker() {
+            shadow.style.height = sticker.offsetHeight + "px";
+
+            var viewport = DOM.getClientRegion();
+            var pos = DOM.getRegion(shadow);
+
+            sticker.style.position = "fixed";
+            sticker.style.bottom = Math.max(0, viewport.bottom - pos.bottom) + "px"
+        }
+
+        // react to layout change
+        Element.observe(window,"scroll",adjustSticker);
+        Element.observe(window,"resize",adjustSticker);
+        // initial positioning
+        Element.observe(window,"load",adjustSticker);
+        adjustSticker();
     }
 };