From e2ec9eb3c23a6b4f63c338e634d647486a136f7b Mon Sep 17 00:00:00 2001
From: tfennelly <tom.fennelly@gmail.com>
Date: Thu, 8 Jan 2015 13:09:47 +0000
Subject: [PATCH] [FIX JENKINS-26312] reimpl of layout changes 3e9cdcb

Attempt to do it in pure CSS ala 3e9cdcb failed so using CSS and JS combo.
---
 .../main/resources/lib/layout/layout.jelly    | 116 +++++++++---------
 war/src/main/webapp/css/style.css             |  19 ++-
 .../main/webapp/scripts/hudson-behavior.js    |  92 +++++++++++---
 3 files changed, 149 insertions(+), 78 deletions(-)

diff --git a/core/src/main/resources/lib/layout/layout.jelly b/core/src/main/resources/lib/layout/layout.jelly
index 4ddbbe645d..d41c186864 100644
--- a/core/src/main/resources/lib/layout/layout.jelly
+++ b/core/src/main/resources/lib/layout/layout.jelly
@@ -156,66 +156,68 @@ ${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="header">
-      <div class="logo">
-        <a id="jenkins-home-link" href="${rootURL}/">
-          <img id="jenkins-head-icon" src="${imagesURL}/headshot.png" alt="title" />
-          <img id="jenkins-name-icon" src="${imagesURL}/title.png" alt="title" width="139" height="34" />
-        </a>
-      </div>
-      <div class="login">
-        <!-- login field -->
-        <j:if test="${app.useSecurity}">
-          <st:nbsp/>
-          <j:choose>
-            <j:when test="${!h.isAnonymous()}">
-              <j:invokeStatic var="user" className="hudson.model.User" method="current" />
-              <j:choose>
-                <j:when test="${user.fullName == null || user.fullName.trim().isEmpty()}">
-                  <j:set var="userName" value="${user.id}"/>
-                </j:when>
-                <j:otherwise>
-                  <j:set var="userName" value="${user.fullName}"/>
-                </j:otherwise>
-              </j:choose>
-              <span style="white-space:nowrap">
-                <a href="${rootURL}/user/${user.id}" class="model-link inside inverse"><b>${userName}</b></a>
-                <j:if test="${app.securityRealm.canLogOut()}">
-                  |
-                  <a href="${rootURL}/logout"><b>${%logout}</b></a>
-                </j:if>
-              </span>
-            </j:when>
-            <j:otherwise>
-              <st:include it="${app.securityRealm}" page="loginLink.jelly" />
-            </j:otherwise>
-          </j:choose>
-        </j:if>
+    <div id="page-head">
+      <div id="header">
+        <div class="logo">
+          <a id="jenkins-home-link" href="${rootURL}/">
+            <img id="jenkins-head-icon" src="${imagesURL}/headshot.png" alt="title" />
+            <img id="jenkins-name-icon" src="${imagesURL}/title.png" alt="title" width="139" height="34" />
+          </a>
+        </div>
+        <div class="login">
+          <!-- login field -->
+          <j:if test="${app.useSecurity}">
+            <st:nbsp/>
+            <j:choose>
+              <j:when test="${!h.isAnonymous()}">
+                <j:invokeStatic var="user" className="hudson.model.User" method="current" />
+                <j:choose>
+                  <j:when test="${user.fullName == null || user.fullName.trim().isEmpty()}">
+                    <j:set var="userName" value="${user.id}"/>
+                  </j:when>
+                  <j:otherwise>
+                    <j:set var="userName" value="${user.fullName}"/>
+                  </j:otherwise>
+                </j:choose>
+                <span style="white-space:nowrap">
+                  <a href="${rootURL}/user/${user.id}" class="model-link inside inverse"><b>${userName}</b></a>
+                  <j:if test="${app.securityRealm.canLogOut()}">
+                    |
+                    <a href="${rootURL}/logout"><b>${%logout}</b></a>
+                  </j:if>
+                </span>
+              </j:when>
+              <j:otherwise>
+                <st:include it="${app.securityRealm}" page="loginLink.jelly" />
+              </j:otherwise>
+            </j:choose>
+          </j:if>
+        </div>
+        <div class="searchbox hidden-xs">
+          <!-- search box -->
+          <j:set var="searchURL" value="${h.searchURL}"/>
+          <form action="${searchURL}" method="get" style="position:relative;" class="no-json" name="search">
+            <!-- this div determines the minimum width -->
+            <div id="search-box-minWidth"/>
+            <!-- this div is used to calculate the width of the text box -->
+            <div id="search-box-sizer"/>
+            <div id="searchform">
+              <input name="q" placeholder="${%search}" id="search-box" class="has-default-text" value="${request.getParameter('q')}" />
+              <st:nbsp />
+              <a href="${%searchBox.url}"><l:icon class="icon-help icon-sm" /></a>
+              <div id="search-box-completion" />
+              <script>createSearchBox("${searchURL}");</script>
+            </div>
+          </form>
+        </div>
       </div>
-      <div class="searchbox hidden-xs">
-        <!-- search box -->
-        <j:set var="searchURL" value="${h.searchURL}"/>
-        <form action="${searchURL}" method="get" style="position:relative;" class="no-json" name="search">
-          <!-- this div determines the minimum width -->
-          <div id="search-box-minWidth"/>
-          <!-- this div is used to calculate the width of the text box -->
-          <div id="search-box-sizer"/>
-          <div id="searchform">
-            <input name="q" placeholder="${%search}" id="search-box" class="has-default-text" value="${request.getParameter('q')}" />
-            <st:nbsp />
-            <a href="${%searchBox.url}"><l:icon class="icon-help icon-sm" /></a>
-            <div id="search-box-completion" />
-            <script>createSearchBox("${searchURL}");</script>
-          </div>
-        </form>
+      <div id="breadcrumbBar">
+        <l:breadcrumbBar>
+          <j:set var="mode" value="breadcrumbs" />
+          <d:invokeBody/>
+        </l:breadcrumbBar>
       </div>
     </div>
-    <div id="breadcrumbBar">
-      <l:breadcrumbBar>
-        <j:set var="mode" value="breadcrumbs" />
-        <d:invokeBody/>
-      </l:breadcrumbBar>
-    </div>
 
     <div id="page-body">
       <div class="row">
diff --git a/war/src/main/webapp/css/style.css b/war/src/main/webapp/css/style.css
index 1a99fc5d26..02fcd373ee 100644
--- a/war/src/main/webapp/css/style.css
+++ b/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;
diff --git a/war/src/main/webapp/scripts/hudson-behavior.js b/war/src/main/webapp/scripts/hudson-behavior.js
index 604e6a0b19..53a7977ef0 100644
--- a/war/src/main/webapp/scripts/hudson-behavior.js
+++ b/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);
 
-        firePanelResized();
+        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'});
     }
-    doPanelResize();
 
-    Event.observe(window, 'resize', function() {
-        doPanelResize();
-    });
+    var doPanelLayouts = function() {
+        // remove all style
+        pageBody.removeAttribute('style');
+        sidePanel.removeAttribute('style');
+        mainPanel.removeAttribute('style');
+        if (applyFixedGridLayout()) {
+            applyFixedGridHeights();
+        }
+    }
+
+    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.
  *
-- 
GitLab