[FIXED JENKINS-11834] Build timeline on build history page should be

resizable

Use YUI resize method to add resize handle for build timeline widget.

changelog.html

@@ -70,6 +70,9 @@ Upcoming changes</a>
   <li class=bug>
     Build history time line wasn't working for IE8.
     (<a href="https://issues.jenkins-ci.org/browse/JENKINS-7403">issue 7403</a>)
+  <li class=bug>
+    Build history time line should be resizable
+    (<a href="https://issues.jenkins-ci.org/browse/JENKINS-11834">issue 11834</a>)
 </ul>
 </div><!--=TRUNK-END=-->
 

core/src/main/resources/hudson/model/BuildTimelineWidget/control.jelly

@@ -29,11 +29,18 @@ THE SOFTWARE.
 
   <st:adjunct includes="org.kohsuke.stapler.simile.timeline" />
 
-  <div id="tl" style="height:250px; border:1px solid black;" />
+  <div id="resizeContainer" style="height: 300px; border:1px solid black; padding-bottom: 5px;">
+    <div id="tl" style="height:100%;"/>
+  </div>
   <div id="status" />
+  
+  <link rel="stylesheet" type="text/css" href="/scripts/yui/assets/skins/sam/resize.css"/>
+  <script type="text/javascript" src="/scripts/yui/resize/resize-min.js"></script>
+  
   <script>
     <j:invokeStatic var="tz" className="java.util.TimeZone" method="getDefault"/>
     var tz = ${tz.rawOffset / 3600000};
+    var tl = null;
     <![CDATA[
     function doLoad() {
         var tl_el = document.getElementById("tl");
@@ -75,7 +82,7 @@ THE SOFTWARE.
         var bandInfos = [
             // the bar that shows outline
             Timeline.createBandInfo({
-                width:          "50px", // set to a minimum, autoWidth will then adjust
+                width:          "20%",
                 intervalUnit:   Timeline.DateTime.DAY,
                 intervalPixels: 200,
                 eventSource:    eventSource1,
@@ -85,7 +92,7 @@ THE SOFTWARE.
             }),
             // the main area
             Timeline.createBandInfo({
-                width:          "200px",
+                width:          "80%",
                 eventSource:    eventSource1,
                 timeZone:       tz,
                 theme:          theme1,
@@ -97,7 +104,7 @@ THE SOFTWARE.
         bandInfos[0].syncWith = 1;
 
         // create the Timeline
-        var tl = Timeline.create(tl_el, bandInfos, Timeline.HORIZONTAL);
+        tl = Timeline.create(tl_el, bandInfos, Timeline.HORIZONTAL);
 
         tl.getBand(0).addOnScrollListener(function(band) {
             eventSource1.ensureVisible(band);
@@ -133,5 +140,23 @@ THE SOFTWARE.
     }else if (window.onLoad) {
            window.onload = doLoad;
     }
+    
+    //add resize handle
+    (function() {
+        var Dom = YAHOO.util.Dom,
+            Event = YAHOO.util.Event;
+
+        var resize = new YAHOO.util.Resize('resizeContainer', {
+             handles: 'b',
+             minHeight: 300 // this should be the same as the height of the container div,
+                            // to fix a issue when it's resized to be smaller than the original height
+        });
+
+        //update timeline after resizing
+        resize.on('endResize', function() { 
+            tl.layout(); 
+        }, null, true); 
+    
+    })();
   ]]></script>
 </j:jelly>