[FIX JENKINS-26312] reimpl of layout changes 3e9cdcbc

Attempt to do it in pure CSS ala 3e9cdcbc failed so using CSS and JS combo.

core/src/main/resources/lib/layout/layout.jelly

@@ -156,6 +156,7 @@ ${h.initPageVariables(context)}
     <!-- for accessibility, skip the entire navigation bar and etc and go straight to the head of the content -->
     <a href="#skip2content" class="skiplink">Skip to content</a>
 
+    <div id="page-head">
       <div id="header">
         <div class="logo">
           <a id="jenkins-home-link" href="${rootURL}/">
@@ -216,6 +217,7 @@ ${h.initPageVariables(context)}
           <d:invokeBody/>
         </l:breadcrumbBar>
       </div>
+    </div>
 
     <div id="page-body">
       <div class="row">

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

@@ -74,21 +74,32 @@ body {
   background-color: #f6faf2;
 }
 
+#side-panel {
+  z-index: 1;
+}
+#main-panel {
+  z-index: 0;
+}
+
 #side-panel, #main-panel {
-  margin: 0px 0px 40px 0px;
+  margin: 0px;
   padding: 0px;
 }
 
+.fixedGridLayout #side-panel, .fixedGridLayout #main-panel {
+  position: absolute;
+}
+
 .fixedGridLayout #side-panel {
   float:left;
-  position: fixed;
   width: 360px;
   margin-left: 15px;
 }
 
 .fixedGridLayout #main-panel {
-  margin-left: 370px;
+  padding-left: 370px;
   margin-right: 15px;
+  width: 100%
 }
 
 #side-panel-content, #main-panel-content {
@@ -112,8 +123,6 @@ body {
 }
 
 #footer-container {
-  position: absolute;
-  bottom: 0;
   width: 100%;
   padding: 10px 0px;
   border-top: 1px solid #d3d7cf;

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

@@ -1931,9 +1931,6 @@ function updateBuildHistory(ajaxUrl,nBuild) {
     }
     window.setTimeout(updateBuilds, updateBuildsRefreshInterval);
 
-    onPanelResize(function() {
-        checkAllRowCellOverflows();
-    });
     onBuildHistoryChange(function() {
         checkAllRowCellOverflows();
     });
@@ -2005,43 +2002,68 @@ function removeZeroWidthSpaces(element) {
     }
 }
 
-function onPanelResize(handler) {
-    Event.observe(window, 'jenkins:panelResized', handler);
-}
-function firePanelResized() {
-    Event.fire(window, 'jenkins:panelResized');
-}
-
 Element.observe(document, 'dom:loaded', function(){
     if(isRunAsTest) {
         return;
     }
 
+    var pageHead = $('page-head');
     var pageBody = $('page-body');
     var sidePanel = $(pageBody).getElementsBySelector('#side-panel')[0];
+    var sidePanelContent = $(sidePanel).getElementsBySelector('#side-panel-content')[0];
     var mainPanel = $(pageBody).getElementsBySelector('#main-panel')[0];
+    var mainPanelContent = $(mainPanel).getElementsBySelector('#main-panel-content')[0];
+    var pageFooter = $('footer-container');
 
-    function doPanelResize() {
+    function applyFixedGridLayout() {
         var pageBodyWidth = Element.getWidth(pageBody);
         if (pageBodyWidth > 768) {
             pageBody.addClassName("fixedGridLayout");
             pageBody.removeClassName("container-fluid");
             sidePanel.removeClassName("col-sm-9");
             mainPanel.removeClassName("col-sm-15");
+            return true; // It's a fixedGridLayout
         } else {
             pageBody.removeClassName("fixedGridLayout");
             pageBody.addClassName("container-fluid");
             sidePanel.addClassName("col-sm-9");
             mainPanel.addClassName("col-sm-15");
+            return false; // It's not a fixedGridLayout
+        }
+    }
+
+    function applyFixedGridHeights() {
+        var windowHeight = document.viewport.getDimensions().height;
+        var headHeight = Element.getHeight(pageHead);
+        var footerHeight = Element.getHeight(pageFooter);
+        var sidePanelHeight = Element.getHeight(sidePanel);
+        var mainPanelHeight = Element.getHeight(mainPanel);
+        var minPageBodyHeight = (windowHeight - headHeight - footerHeight);
+
+        minPageBodyHeight = Math.max(minPageBodyHeight, sidePanelHeight);
+        minPageBodyHeight = Math.max(minPageBodyHeight, mainPanelHeight);
+
+        $(pageBody).setStyle({'min-height': minPageBodyHeight + 'px'});
+        $(sidePanel).setStyle({'min-height': minPageBodyHeight + 'px'});
+        $(mainPanel).setStyle({'min-height': minPageBodyHeight + 'px'});
     }
 
-        firePanelResized();
+    var doPanelLayouts = function() {
+        // remove all style
+        pageBody.removeAttribute('style');
+        sidePanel.removeAttribute('style');
+        mainPanel.removeAttribute('style');
+        if (applyFixedGridLayout()) {
+            applyFixedGridHeights();
+        }
     }
-    doPanelResize();
 
-    Event.observe(window, 'resize', function() {
-        doPanelResize();
-    });
+    Event.observe(window, 'resize', doPanelLayouts);
+    elementResizeTracker.onResize(sidePanelContent, doPanelLayouts);
+    elementResizeTracker.onResize(mainPanelContent, doPanelLayouts);
+
+    doPanelLayouts();
+    fireBuildHistoryChanged();
 });
 
 // get the cascaded computed style value. 'a' is the style name like 'backgroundColor'
@@ -2053,6 +2075,44 @@ function getStyle(e,a){
   return null;
 }
 
+function ElementResizeTracker() {
+    this.trackedElements = [];
+
+    if(isRunAsTest) {
+        return;
+    }
+
+    var thisTracker = this;
+    function checkForResize() {
+        for (var i = 0; i < thisTracker.trackedElements.length; i++) {
+            var element = thisTracker.trackedElements[i];
+            var currDims = Element.getDimensions(element);
+            var lastDims = element.lastDimensions;
+            if (currDims.width !== lastDims.width || currDims.height !== lastDims.height) {
+                Event.fire(element, 'jenkins:resize');
+            }
+            element.lastDimensions = currDims;
+        }
+        setTimeout(checkForResize, 200);
+    }
+    checkForResize();
+}
+ElementResizeTracker.prototype.addElement = function(element) {
+    for (var i = 0; i < this.trackedElements.length; i++) {
+        if (this.trackedElements[i] === element) {
+            // we're already tracking it so no need to add it.
+            return;
+        }
+    }
+    this.trackedElements.push(element);
+}
+ElementResizeTracker.prototype.onResize = function(element, handler) {
+    element.lastDimensions = Element.getDimensions(element);
+    Event.observe(element, 'jenkins:resize', handler);
+    this.addElement(element);
+}
+var elementResizeTracker = new ElementResizeTracker();
+
 /**
  * Makes sure the given element is within the viewport.
  *