[JENKINS-13995] Disabled the automatic pop-up of context menu.

Instead, it shows a small 'v' icon to the right that needs to be clicked
to open a context menu.

changelog.html

@@ -68,6 +68,9 @@ Upcoming changes</a>
   <li class=rfe>
     Promote the use of 'H' in cron.
     (<a href="https://issues.jenkins-ci.org/browse/JENKINS-17311">issue 17311</a>)
+  <li class='major rfe'>
+    Context menu no longer automatically pops up
+    (<a href="https://issues.jenkins-ci.org/browse/JENKINS-13995">issue 13995</a>)
 </ul>
 </div><!--=TRUNK-END=-->
 

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

@@ -47,3 +47,15 @@
 #breadcrumbs LI A:hover, #crumbs LI A:focus {
     color:#3465a4;
 }
+
+#menuSelector {/* used for showing '>' on the right of the anchor */
+  background-color:transparent;
+  background-image: url(menu_down_arrow.png);
+  background-position: center center;
+  background-repeat: no-repeat;
+  width: 14px;
+  height:14px;
+  position: absolute;
+  visibility: hidden;
+  cursor: pointer;
+}
\ No newline at end of file

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

@@ -13,14 +13,6 @@ var breadcrumbs = (function() {
      */
     var xhr;
 
-    /**
-     * When mouse hovers over the anchor that has context menu, we capture its region here.
-     * This is used to to avoid showing menu when the mouse slides over to other elements after a delay.
-     *
-     * @type {YAHOO.util.Region}
-     */
-    var hitTest;
-
     /**
      * Current mouse cursor position in the page coordinate.
      *
@@ -28,11 +20,6 @@ var breadcrumbs = (function() {
      */
     var mouse;
 
-    /**
-     * Timer ID for lazy menu display.
-     */
-    var menuDelay;
-
     function makeMenuHtml(icon,displayName) {
         return (icon!=null ? "<img src='"+icon+"' width=24 height=24 style='margin: 2px;' alt=''> " : "")+displayName;
     }
@@ -46,13 +33,6 @@ var breadcrumbs = (function() {
         mouse = new YAHOO.util.Point(ev.pageX,ev.pageY);
     });
 
-    function cancelMenu() {
-        if (menuDelay) {
-            window.clearTimeout(menuDelay);
-            menuDelay = null;
-        }
-    }
-
     function combinePath(a,b) {
         var qs;
         var i = a.indexOf('?');
@@ -73,6 +53,75 @@ var breadcrumbs = (function() {
         }
     }
 
+    /**
+     * Wraps a delayed action and its cancellation.
+     */
+    function Delayed(action, timeout) {
+        this.schedule = function () {
+            if (this.token != null)
+                window.clearTimeout(this.token);
+            this.token = window.setTimeout(function () {
+                this.token = null;
+                action();
+            }.bind(this), timeout);
+        };
+        this.cancel = function () {
+            if (this.token != null)
+                window.clearTimeout(this.token);
+            this.token = null;
+        };
+    }
+
+    /**
+     * '>' control used to launch context menu.
+     */
+    var menuSelector = (function() {
+        var menuSelector = document.createElement("div");
+        document.body.appendChild(menuSelector);
+        menuSelector.id = 'menuSelector';
+
+        /**
+         * @param target
+         *      DOM node to attach this selector to.
+         */
+        menuSelector.show = function(target) {
+            var xy = YAHOO.util.Dom.getXY(target);
+            xy[0] += target.offsetWidth;
+            YAHOO.util.Dom.setXY(this, xy);
+            this.target = target;
+
+            this.style.visibility = "visible";
+        };
+        menuSelector.hide = function() {
+            this.style.visibility = "hidden";
+        };
+        menuSelector.onclick = function () {
+            this.hide();
+            handleHover(this.target);
+        };
+
+        // if the mouse leaves the selector, hide it
+        canceller = new Delayed(function () {
+            // if the mouse is in the hot spot for the selector, keep showing it
+            var r = this.target ? Dom.getRegion(this.target) : false;
+            if (r && r.contains(mouse))     return;
+            r = Dom.getRegion(menuSelector);
+            if (r && r.contains(mouse))     return;
+
+            menuSelector.hide();
+        }, 750);
+
+        menuSelector.onmouseover = function () {
+            canceller.cancel();
+        };
+        menuSelector.onmouseout = function () {
+            canceller.schedule();
+        };
+        menuSelector.canceller = canceller;
+
+        return menuSelector;
+    })();
+
     /**
      * Called when the mouse cursor comes into the context menu hot spot.
      *
@@ -80,28 +129,18 @@ var breadcrumbs = (function() {
      *
      * @param {HTMLElement} e
      *      anchor tag
-     * @param {Number} delay
-     *      Number of milliseconds to wait before the menu is displayed.
-     *      The mouse needs to be on the same anchor tag after this delay.
      */
-    function handleHover(e,delay) {
+    function handleHover(e) {
         function showMenu(items) {
-            cancelMenu();
-            hitTest = Dom.getRegion(e);
-            menuDelay = window.setTimeout(function() {
-                if (hitTest.contains(mouse)) {
-                    menu.hide();
-                    var pos = [e, "tl", "bl"];
-                    if ($(e).hasClassName("tl-tr"))  pos = [e,"tl","tr"]
-                    menu.cfg.setProperty("context", pos);
-                    menu.clearContent();
-                    menu.addItems(items);
-                    menu.render("breadcrumb-menu-target");
-                    menu.show();
-                    $(menu.getItem(0).element).addClassName("yui-menuitem-tooltip")
-                }
-                menuDelay = null;
-            },delay);
+            menu.hide();
+            var pos = [e, "tl", "bl"];
+            if ($(e).hasClassName("tl-tr"))  pos = [e,"tl","tr"];
+            menu.cfg.setProperty("context", pos);
+            menu.clearContent();
+            menu.addItems(items);
+            menu.render("breadcrumb-menu-target");
+            menu.show();
+            $(menu.getItem(0).element).addClassName("yui-menuitem-tooltip")
         }
 
         if (xhr)
@@ -144,12 +183,19 @@ var breadcrumbs = (function() {
         // when the mouse hovers over LI, activate the menu
         e = $(e);
         if (e.hasClassName("no-context-menu"))  return;
-        e.observe("mouseover", function () { handleHover(e.firstChild,0) });
+        e.observe("mouseover", function () { handleHover(e.firstChild) });
     });
 
     Behaviour.specify("A.model-link", 'breadcrumbs', 0, function (a) {
         // ditto for model-link, but give it a larger delay to avoid unintended menus to be displayed
-        $(a).observe("mouseover", function () { handleHover(a,500); });
+        // $(a).observe("mouseover", function () { handleHover(a,500); });
+
+        a.onmouseover = function () {
+            menuSelector.show(this);
+        };
+        a.onmouseout = function () {
+            menuSelector.canceller.schedule();
+        };
     });
 
     /**