Added a mechanism to add additional breadcrumbs for in-page navigation.

This is useful for adding in-page navigation in a large page.

core/src/main/resources/hudson/model/Job/configure.jelly

@@ -29,7 +29,16 @@ THE SOFTWARE.
 <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form" xmlns:i="jelly:fmt">
   <l:layout title="${it.displayName} Config" norefresh="true" permission="${it.EXTENDED_READ}">
     <st:include page="sidepanel.jelly" />
+    <l:breadcrumb title="${%configuration page}" id="inpage-nav" />
     <l:main-panel>
+      <script>
+        window.addEventListener("load",function(){
+          breadcrumbs.attachMenu('inpage-nav',
+                  new breadcrumbs.ContextMenu().add(
+                          '/',
+                          '${rootURL}${h.resourcePath}/images/24x24/settings.png',"hello world"))
+        });
+      </script>
       <div class="behavior-loading">${%LOADING}</div>
       <f:form method="post" action="configSubmit" name="config">
         <j:set var="descriptor" value="${it.descriptor}" />

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

+<!--
+The MIT License
+
+Copyright (c) 2012- CloudBees, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+-->
+<?jelly escape-by-default='true'?>
+<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:i="jelly:fmt" xmlns:x="jelly:xml">
+  <st:documentation>
+    Used inside &lt;l:layout> to render additional breadcrumb items.
+
+    <st:attribute name="href">
+      URL that the breadcrumb item links to. Can be omitted.
+    </st:attribute>
+    <st:attribute name="id">
+      If specified, this ID will be assigned to the LI element.
+      This is useful for programmatically adding the context menu
+    </st:attribute>
+    <st:attribute name="title" use="required">
+      Display name of the breadcrumb.
+    </st:attribute>
+  </st:documentation>
+
+  <j:if test="${mode=='breadcrumbs'}">
+    <li id="${attrs.id}">
+      <a href="${attrs.href}">
+        ${attrs.title}
+      </a>
+    </li>
+  </j:if>
+</j:jelly>
\ No newline at end of file

core/src/main/resources/lib/layout/breadcrumbs.jelly → core/src/main/resources/lib/layout/breadcrumbBar.jelly

@@ -26,14 +26,17 @@ THE SOFTWARE.
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:i="jelly:fmt" xmlns:x="jelly:xml">
   <st:documentation>
-    Generates breadcrumb, along with its associated dynamic behaviours.
+    Generates the bar that shows breadcrumbs, along with its associated dynamic behaviours.
     This tag is used by l:layout and not expected to be used by anyone else,
     but it's written as separate tag for better readability of code.
+
+    To render additional breadcrumb items (for example to provide in-page navigations),
+    use the &lt;l:breadcrumb> tag.
   </st:documentation>
 
   <tr id="top-nav">
     <td id="left-top-nav" colspan="2">
-      <st:adjunct includes="lib.layout.breadcrumbs_" />
+      <st:adjunct includes="lib.layout.breadcrumbs" />
       <div class="top-sticker noedge">
         <div class="top-sticker-inner">
           <div id="right-top-nav">
@@ -55,15 +58,19 @@ THE SOFTWARE.
           <ul id="breadcrumbs">
             <j:forEach var="anc" items="${request.ancestors}">
               <j:if test="${h.isModel(anc.object) and anc.prev.url!=anc.url}">
-                <li onmouseover="return breadcrumb.activate(this)">
+                <li>
                   <a href="${anc.url}/">
                     ${anc.object.displayName}
                   </a>
                 </li>
               </j:if>
             </j:forEach>
+
+            <!-- render additional breadcrumb items -->
+            <d:invokeBody />
           </ul>
-          <div id="breadcrumb-menu-target"/>
+
+          <div id="breadcrumb-menu-target"/><!-- this is where the menu gets rendered -->
         </div>
       </div>
     </td>

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

+var breadcrumbs = (function() {
+    /** @type {YAHOO.widget.Menu} */
+    var menu;
+
+    /**
+     * Used for fetching the content of the menu asynchronously from the server
+     */
+    var xhr;
+
+    function makeMenuHtml(icon,displayName) {
+        return "<img src='"+icon+"' width=24 height=24 style='margin: 2px;' alt=''> "+displayName;
+    }
+
+    window.addEventListener("load",function(){
+      menu = new YAHOO.widget.Menu("breadcrumb-menu", {position:"dynamic", hidedelay:1000});
+    });
+
+    jenkinsRules["#breadcrumbs LI"] = function (e) {
+        // when the moust hovers over LI, activate the menu
+        e.addEventListener("mouseover", function () {
+            function showMenu(items) {
+                menu.hide();
+                menu.cfg.setProperty("context", [e, "tl", "bl"]);
+                menu.clearContent();
+                menu.addItems(items);
+                menu.render("breadcrumb-menu-target");
+                menu.show();
+            }
+
+            if (xhr)
+                xhr.options.onComplete = function () {
+                };   // ignore the currently pending call
+
+            if (e.items) {// use what's already loaded
+                showMenu(e.items);
+            } else {// fetch menu on demand
+                xhr = new Ajax.Request(e.firstChild.getAttribute("href") + "contextMenu", {
+                    onComplete:function (x) {
+                        var a = x.responseText.evalJSON().items;
+                        a.each(function (e) {
+                            e.text = makeMenuHtml(e.icon, e.displayName);
+                        });
+                        e.items = a;
+                        showMenu(a);
+                    }
+                });
+            }
+
+            return false;
+        });
+    };
+
+    /**
+     * @namespace breadcrumbs
+     * @class ContextMenu
+     * @constructor
+     */
+    var ContextMenu = function () {
+        this.items = [];
+    };
+    ContextMenu.prototype = {
+        /**
+         * Creates a menu item.
+         *
+         * @return {breadcrumbs.MenuItem}
+         */
+        "add" : function (url,icon,displayName) {
+            this.items.push({ url:url, text:makeMenuHtml(icon,displayName) });
+            return this;
+        }
+    };
+
+    return {
+        /**
+         * Activates the context menu for the specified breadcrumb element.
+         *
+         * @param {String|HTMLElement} li
+         *      The LI tag to which you associate the menu (or its ID)
+         * @param {breadcrumbs.ContextMenu}
+         */
+        "attachMenu" : function (li,menu) {
+            $(li).items = menu.items;
+        },
+
+        "ContextMenu" : ContextMenu
+    };
+})();

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

-var breadcrumb = (function() {
-    /** @type {YAHOO.widget.Menu} */
-    var menu;
-
-    /**
-     * Used for fetching the content of the menu asynchronously from the server
-     */
-    var xhr;
-
-    /**
-     * Activates the context menu for the specified breadcrumb element.
-     *
-     * @param {HTMLElement} e
-     *      The LI tag that the mouse has wondered into.
-     */
-    function activate(e) {
-      function showMenu(items) {
-        menu.hide();
-        menu.cfg.setProperty("context",[e,"tl","bl"]);
-        menu.clearContent();
-        menu.addItems(items);
-        menu.render("breadcrumb-menu-target");
-        menu.show();
-      }
-
-      if (xhr)
-        xhr.options.onComplete = function() {};   // ignore the currently pending call
-
-      if (e.items) {// use what's already loaded
-        showMenu(e.items);
-      } else {// fetch menu on demand
-        xhr = new Ajax.Request(e.firstChild.getAttribute("href")+"contextMenu", {
-          onComplete : function (x) {
-            var a = x.responseText.evalJSON().items;
-            a.each(function(e) {
-              e.text = "<img src='"+e.icon+"' width=24 height=24 style='margin: 2px;' alt=''> "+e.displayName;
-            });
-            e.items = a;
-            showMenu(a);
-          }
-        });
-      }
-
-      return false;
-    }
-
-    window.addEventListener("load",function(){
-      menu = new YAHOO.widget.Menu("breadcrumb-menu", {position:"dynamic", hidedelay:1000});
-    });
-
-    return { activate : activate };
-})();

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

@@ -198,7 +198,10 @@ THE SOFTWARE.
           </table>
         </td>
       </tr>
-      <l:breadcrumbs />
+      <l:breadcrumbBar>
+        <j:set var="mode" value="breadcrumbs" />
+        <d:invokeBody />
+      </l:breadcrumbBar>
     </table>
     <table id="main-table" width="100%" height="70%" border="0"
         style="background-image: url(${imagesURL}/jenkins.png);

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

@@ -501,7 +501,7 @@ function sequencer(fs) {
     return next();
 }
 
-var hudsonRules = {
+var jenkinsRules = {
     "BODY" : function() {
         tooltip = new YAHOO.widget.Tooltip("tt", {context:[], zindex:999});
     },
@@ -1437,6 +1437,7 @@ var hudsonRules = {
         adjustSticker();
     }
 };
+var hudsonRules = jenkinsRules; // legacy name
 
 function applyTooltip(e,text) {
         // copied from YAHOO.widget.Tooltip.prototype.configContext to efficiently add a new element