Added a mechanism to show the notification bar.

changelog.html

@@ -58,6 +58,8 @@ Upcoming changes</a>
   <li class=rfe>
     System Message - Doesnt appear on any view other than the default view.
     (<a href="https://issues.jenkins-ci.org/browse/JENKINS-7733">issue 7733</a>)
+  <li class="rfe">
+    Added UI component to show notification bar at the top of the page
 </ul>
 </div><!--=TRUNK-END=-->
 

ui-samples-plugin/src/main/java/jenkins/plugins/ui_samples/NotificationBar.java

+package jenkins.plugins.ui_samples;
+
+import hudson.Extension;
+
+import java.util.Arrays;
+import java.util.List;
+
+/**
+ * @author Kohsuke Kawaguchi
+ */
+@Extension
+public class NotificationBar extends UISample {
+    @Override
+    public String getDescription() {
+        return "Notification bar shows a transient message on the top of the page";
+    }
+
+    public List<SourceFile> getSourceFiles() {
+        // TODO: generate this from index
+        return Arrays.asList(
+                new SourceFile("index.groovy"));
+    }
+
+    @Extension
+    public static final class DescriptorImpl extends UISampleDescriptor {
+    }
+}
+
+

ui-samples-plugin/src/main/resources/jenkins/plugins/ui_samples/NotificationBar/index.groovy

+package jenkins.plugins.ui_samples.NotificationBar;
+
+import lib.JenkinsTagLib
+
+def st=namespace("jelly:stapler")
+
+t=namespace(JenkinsTagLib.class)
+
+namespace("/lib/samples").sample(title:_("Notification Bar")) {
+    p(_("blurb"))
+
+    p("To show a notification bar, call <tt>notificationBar.show('message')");
+    button(onclick:"notificationBar.show('This is a notification');", "Show a notification bar")
+
+    p(_("blurb.hide"))
+    button(onclick:"notificationBar.hide();", "Hide it now")
+}

ui-samples-plugin/src/main/resources/jenkins/plugins/ui_samples/NotificationBar/index.properties

+blurb=Notification bar shows a message that disappears in a few seconds. \
+    It is typically used to provide feedback for asynchronous operations.
+
+blurb.hide=A notification bar will auto-hide itself, but you can programmatically hide it via <tt>notificationBar.hide()</tt>
\ No newline at end of file

war/pom.xml

@@ -394,7 +394,7 @@ THE SOFTWARE.
             <systemProperty>
               <!-- enable the plugins in main by default -->
               <name>hudson.bundled.plugins</name>
-              <value>
+              <value><!-- run "mvn install" once will generate the.hpl -->
                   ${basedir}/../maven-plugin/target/test-classes/the.hpl,
                   ${basedir}/../ui-samples-plugin/target/test-classes/the.hpl,
                   ${project.build.directory}/${project.build.finalName}/WEB-INF/plugins/javadoc.hpi

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

@@ -1002,6 +1002,17 @@ table.progress-bar.red td.progress-bar-done {
   background-color: #cc0000;
 }
 
+/* ========================= notification bar ========================= */
+#notification-bar {
+    width:100%;
+    position:fixed;
+    text-align:center;
+    left:0px;
+    font-size: 2em;
+    z-index:999;
+    border-bottom: 1px solid black;
+}
+
 /* ========================= YUI dialog ========================= */
 
 .dialog .hd {

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

@@ -2539,4 +2539,59 @@ var layoutUpdateCallback = {
         for (var i = 0, length = this.callbacks.length; i < length; i++)
             this.callbacks[i]();
     }
-}
\ No newline at end of file
+}
+
+// notification bar
+var notificationBar = {
+    OPACITY : 0.8,
+    DELAY : 3000,   // milliseconds to auto-close the notification
+    div : null,     // the main 'notification-bar' DIV
+    token : null,   // timer for cancelling auto-close
+
+    init : function() {
+        if (this.div==null) {
+            this.div = document.createElement("div");
+            YAHOO.util.Dom.setStyle(this.div,"opacity",0);
+            this.div.id="notification-bar";
+            document.body.insertBefore(this.div, document.body.firstChild);
+
+            var self = this;
+            this.div.onclick = function() {
+                self.hide();
+            };
+        }
+    },
+    // cancel pending auto-hide timeout
+    clearTimeout : function() {
+        if (this.token)
+            window.clearTimeout(this.token);
+        this.token = null;
+    },
+    // hide the current notification bar, if it's displayed
+    hide : function () {
+        this.clearTimeout();
+        new YAHOO.util.Anim(this.div, {
+            opacity: { to:0 }
+        }, 0.3, YAHOO.util.Easing.easeIn).animate();
+    },
+    // show a notification bar
+    show : function (text,options) {
+        options = options || {}
+
+        this.init();
+        this.div.style.backgroundColor = options.backgroundColor || "#fff";
+        this.div.style.height = this.div.style.lineHeight = options.height || "40px";
+
+        if (options.icon)
+            text = "<img src='"+rootURL+"/images/24x24/"+options.icon+"'> "+text;
+        this.div.innerHTML = text;
+
+        new YAHOO.util.Anim(this.div, {
+            opacity: { to:this.OPACITY }
+        }, 1, YAHOO.util.Easing.easeOut).animate();
+
+        this.clearTimeout();
+        var self = this;
+        this.token = window.setTimeout(function(){self.hide();},this.DELAY);
+    }
+};