Model link on build name in build history

core/src/main/resources/hudson/widgets/HistoryWidget/entry.jelly

@@ -35,10 +35,10 @@ THE SOFTWARE.
         <div class="build-icon">
           <a class="build-status-link" href="${link}console"><l:icon alt="${build.iconColor.description} &gt; ${%Console Output}" class="${build.buildStatusIconClassName} icon-sm" tooltip="${build.iconColor.description} &gt; ${%Console Output}"/></a>
         </div>
-        <a class="display-name" href="${link}">${build.displayName}</a>
+        <a class="tip model-link inside build-link display-name" update-parent-class=".build-row" href="${link}">${build.displayName}</a>
       </div>
       <div class="pane build-details" time="${build.timestamp.time.time}">
-        <a class="tip model-link inside build-link" href="${link}">
+        <a class="tip model-link inside build-link" href="${link}" update-parent-class=".build-row">
           <i:formatDate value="${build.timestamp.time}" type="both" dateStyle="medium" timeStyle="short" />
         </a>
         <j:if test="${build.building}">

core/src/main/resources/lib/layout/breadcrumbs.js

@@ -93,6 +93,7 @@ var breadcrumbs = (function() {
     var menuSelector = (function() {
         var menuSelector = $(document.createElement("div"));
         var menuSelectorTarget;
+        var parentToUpdate;
 
         document.body.appendChild(menuSelector);
         menuSelector.id = 'menuSelector';
@@ -121,10 +122,15 @@ var breadcrumbs = (function() {
             this.style.visibility = "visible";
 
             menuSelectorTarget = target;
+            var updateParentSelector = menuSelectorTarget.getAttribute('update-parent-class');
+            if (updateParentSelector) {
+                parentToUpdate = $(menuSelectorTarget).up(updateParentSelector);
+            }
         };
         menuSelector.hide = function() {
             this.style.visibility = "hidden";
             menuSelectorTarget = undefined;
+            parentToUpdate = undefined;
         };
         menuSelector.observe("click",function () {
             invokeContextMenu(this.target);
@@ -137,16 +143,20 @@ var breadcrumbs = (function() {
         }.bind(menuSelector), 750);
 
         menuSelector.observe("mouseover",function () {
-            logger("mouse entered 'v'");
             if (menuSelectorTarget) {
+                if (parentToUpdate) {
+                    parentToUpdate.addClassName('model-link-active');
+                }
                 menuSelectorTarget.addClassName('mouseIsOverMenuSelector');
             }
             canceller.cancel();
         });
         menuSelector.observe("mouseout",function () {
-            logger("mouse left 'v'");
             canceller.schedule();
             if (menuSelectorTarget) {
+                if (parentToUpdate) {
+                    parentToUpdate.removeClassName('model-link-active');
+                }
                 menuSelectorTarget.removeClassName('mouseIsOverMenuSelector');
             }
         });

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

@@ -48,7 +48,7 @@ THE SOFTWARE.
       Footer of the box. Can include HTML.
     </st:attribute>
   </st:documentation>
-  <div class="container-fluid pane-frame" id="${attrs.id}">
+  <div class="container-fluid pane-frame track-mouse" id="${attrs.id}">
     <div class="row">
       <div class="col-xs-24 pane-header">
         <a class="collapse" href="${rootURL}/toggleCollapse?paneId=${attrs.id}"

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

@@ -483,7 +483,7 @@ div.dashboard {
   border-radius: 4px;
 }
 
-#side-panel .pane-frame:hover {
+#side-panel .pane-frame:hover, #side-panel .pane-frame.mouseover {
   border: solid 1px #cecece;
 }
 
@@ -950,7 +950,7 @@ table.parameters > tbody:hover {
   padding: 3px 4px 3px 4px;
 }
 
-.build-row:hover {
+.build-row:hover, .build-row.model-link-active {
   background: #e8e8e8 !important;
 }
 
@@ -959,11 +959,11 @@ table.parameters > tbody:hover {
 }
 
 .build-row-cell .pane.build-name {
-  width: 20%;
+  width: 25%;
   font-weight: bold;
 }
 .build-row-cell .pane.build-details {
-  width: 50%;
+  width: 45%;
 }
 .build-row-cell .pane.build-controls {
   width: 30%;

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

@@ -1131,6 +1131,24 @@ var jenkinsRules = {
         new YAHOO.widget.Button(e, { type: "menu", menu: $(e).next() });
     },
 
+    ".track-mouse" : function (element) {
+        var DOM = YAHOO.util.Dom;
+
+        $(element).observe("mouseenter",function () {
+            element.addClassName("mouseover");
+
+            var mousemoveTracker = function (event) {
+                var elementRegion = DOM.getRegion(element);
+                if (event.x < elementRegion.left || event.x > elementRegion.right ||
+                    event.y < elementRegion.top || event.y > elementRegion.bottom) {
+                    element.removeClassName("mouseover");
+                    Element.stopObserving(document, "mousemove", mousemoveTracker);
+                }
+            };
+            Element.observe(document, "mousemove", mousemoveTracker);
+        });
+    },
+
     /*
         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