Merge pull request #2192 from Carreau/notification

Introduce Notification Area

This allow several notification widget to be next one to the other in the notification area.
The Api allow also to register a callback if the user click on the notification. and allows sticky and non sticky notification.

IPython/frontend/html/notebook/static/js/notificationarea.js

@@ -0,0 +1,141 b''
+//----------------------------------------------------------------------------
+//  Copyright (C) 2012 The IPython Development Team
+//
+//  Distributed under the terms of the BSD License.  The full license is in
+//  the file COPYING, distributed as part of this software.
+//----------------------------------------------------------------------------
+
+//============================================================================
+// Notification widget
+//============================================================================
+
+var IPython = (function (IPython) {
+    "use strict";
+    var utils = IPython.utils;
+
+
+    var NotificationArea = function (selector) {
+        this.selector = selector;
+        if (this.selector !== undefined) {
+            this.element = $(selector);
+        }
+        this.widget_dict = {};
+    };
+
+    NotificationArea.prototype.temp_message = function (msg, timeout, css_class) {
+        var uuid = utils.uuid();
+        if( css_class == 'danger') {css_class = 'ui-state-error';}
+        if( css_class == 'warning') {css_class = 'ui-state-highlight';}
+        var tdiv = $('<div>')
+            .attr('id',uuid)
+            .addClass('notification_widget ui-widget ui-widget-content ui-corner-all')
+            .addClass('border-box-sizing')
+            .addClass(css_class)
+            .hide()
+            .text(msg);
+
+        $(this.selector).append(tdiv);
+        var tmout = Math.max(1500,(timeout||1500));
+        tdiv.fadeIn(100);
+
+        setTimeout(function () {
+                tdiv.fadeOut(100, function () {tdiv.remove();});
+            }, tmout);
+    };
+
+    NotificationArea.prototype.widget = function(name) {
+        if(this.widget_dict[name] == undefined) {
+            return this.new_notification_widget(name);
+        }
+    return this.get_widget(name);
+    };
+
+    NotificationArea.prototype.get_widget = function(name) {
+        if(this.widget_dict[name] == undefined) {
+            throw('no widgets with this name');
+        }
+        return this.widget_dict[name];
+    };
+
+    NotificationArea.prototype.new_notification_widget = function(name) {
+        if(this.widget_dict[name] != undefined) {
+            throw('widget with that name already exists ! ');
+        }
+        var div = $('<div/>').attr('id','notification_'+name);
+        $(this.selector).append(div);
+        this.widget_dict[name] = new IPython.NotificationWidget('#notification_'+name);
+        return this.widget_dict[name];
+    };
+
+    NotificationArea.prototype.init_notification_widgets = function() {
+        var knw = this.new_notification_widget('kernel');
+
+        // Kernel events
+        $([IPython.events]).on('status_idle.Kernel',function () {
+            IPython.save_widget.update_document_title();
+            knw.set_message('Kernel Idle',200);
+            }
+        );
+
+        $([IPython.events]).on('status_busy.Kernel',function () {
+            window.document.title='(Busy) '+window.document.title;
+            knw.set_message("Kernel busy");
+        });
+
+        $([IPython.events]).on('status_restarting.Kernel',function () {
+            IPython.save_widget.update_document_title();
+            knw.set_message("Restarting kernel",1000);
+        });
+
+        $([IPython.events]).on('status_interrupting.Kernel',function () {
+            knw.set_message("Interrupting kernel");
+        });
+
+        $([IPython.events]).on('status_dead.Kernel',function () {
+            var dialog = $('<div/>');
+            dialog.html('The kernel has died, would you like to restart it? If you do not restart the kernel, you will be able to save the notebook, but running code will not work until the notebook is reopened.');
+            $(document).append(dialog);
+            dialog.dialog({
+                resizable: false,
+                modal: true,
+                title: "Dead kernel",
+                buttons : {
+                    "Restart": function () {
+                        $([IPython.events]).trigger('status_restarting.Kernel');
+                        IPython.notebook.start_kernel();
+                        $(this).dialog('close');
+                    },
+                    "Continue running": function () {
+                        $(this).dialog('close');
+                    }
+                }
+            });
+        });
+
+        var nnw = this.new_notification_widget('notebook');
+
+        // Notebook events
+        $([IPython.events]).on('notebook_loading.Notebook', function () {
+            nnw.set_message("Loading notebook",500);
+        });
+        $([IPython.events]).on('notebook_loaded.Notebook', function () {
+            nnw.set_message("Notebook loaded",500);
+        });
+        $([IPython.events]).on('notebook_saving.Notebook', function () {
+            nnw.set_message("Saving notebook",500);
+        });
+        $([IPython.events]).on('notebook_saved.Notebook', function () {
+            nnw.set_message("Notebook saved",2000);
+        });
+        $([IPython.events]).on('notebook_save_failed.Notebook', function () {
+            nnw.set_message("Notebook save failed");
+        });
+
+    };
+
+    IPython.NotificationArea = NotificationArea;
+
+    return IPython;
+
+}(IPython));
+

IPython/frontend/html/notebook/static/css/notebook.css

@@ -1,394 +1,404 b''
 /**
  * Primary styles
  *
  * Author: IPython Development Team
  */
 
 
 body {
     overflow: hidden;
 }
 
 span#save_widget {
     padding: 5px;
     margin: 0px 0px 0px 300px;
     display:inline-block;
 }
 
 span#notebook_name {
     height: 1em;
     line-height: 1em;
     padding: 3px;
     border: none;
     font-size: 146.5%;
 }
 
 .ui-menubar-item .ui-button .ui-button-text {
     padding: 0.4em 1.0em;
     font-size: 100%;
 }
 
 .ui-menu {
   -moz-box-shadow:    0px 6px 10px -1px #adadad;
   -webkit-box-shadow: 0px 6px 10px -1px #adadad;
   box-shadow:         0px 6px 10px -1px #adadad;
 }
 
 .ui-menu .ui-menu-item a {
     border: 1px solid transparent;
     padding: 2px 1.6em;
 }
 
 .ui-menu .ui-menu-item a.ui-state-focus {
     margin: 0;
 }
 
 .ui-menu hr {
     margin: 0.3em 0;
 }
 
 #menubar_container {
     position: relative;
 }
 
-#notification {
+#notification_area {
     position: absolute;
-    right: 3px;
-    top: 3px;
+    right: 0px;
+    top: 0px;
+    height: 25px;
+    padding: 3px 0px;
+    padding-right: 3px;
+    z-index: 10;
+}
+
+.notification_widget{
+    float : right;
+    right: 0px;
+    top: 1px;
     height: 25px;
     padding: 3px 6px;
     z-index: 10;
 }
 
 #toolbar {
     padding: 3px 15px;
 }
 
 #cell_type {
     font-size: 85%;
 }
 
 
 div#main_app {
     width: 100%;
     position: relative;
 }
 
 span#quick_help_area {
     position: static;
     padding: 5px 0px;
     margin: 0px 0px 0px 0px;
 }
 
 .help_string {
     float: right;
     width: 170px;
     padding: 0px 5px;
     text-align: left;
     font-size: 85%;
 }
 
 .help_string_label {
     float: right;
     font-size: 85%;
 }
 
 div#notebook_panel {
     margin: 0px 0px 0px 0px;
     padding: 0px;
 }
 
 div#notebook {
     overflow-y: scroll;
     overflow-x: auto;
     width: 100%;
     /* This spaces the cell away from the edge of the notebook area */
     padding: 5px 5px 15px 5px;
     margin: 0px;
     background-color: white;
 }
 
 div#pager_splitter {
     height: 8px;
 }
 
 div#pager {
     padding: 15px;
     overflow: auto;
     display: none;
 }
 
 div.ui-widget-content {
     border: 1px solid #aaa;
     outline: none;
 }
 
 .cell {
     border: 1px solid transparent;
 }
 
 div.cell {
     width: 100%;
     padding: 5px 5px 5px 0px;
     /* This acts as a spacer between cells, that is outside the border */
     margin: 2px 0px 2px 0px;
 }
 
 div.code_cell {
     background-color: white;
 }
 
 /* any special styling for code cells that are currently running goes here */
 div.code_cell.running {
 }
 
 div.prompt {
     /* This needs to be wide enough for 3 digit prompt numbers: In[100]: */
     width: 11ex;
     /* This 0.4em is tuned to match the padding on the CodeMirror editor. */
     padding: 0.4em;
     margin: 0px;
     font-family: monospace;
     text-align:right;
 }
 
 div.input {
     page-break-inside: avoid;
 }
 
 /* input_area and input_prompt must match in top border and margin for alignment */
 div.input_area {
     color: black;
     border: 1px solid #ddd;
     border-radius: 3px;
     background: #f7f7f7;
 }
 
 div.input_prompt {
     color: navy;
     border-top: 1px solid transparent;
 }
 
 div.output_wrapper {
     /* This is a spacer between the input and output of each cell */
     margin-top: 5px;
     margin-left: 5px;
     /* FF needs explicit width to stretch */
     width: 100%;
     /* this position must be relative to enable descendents to be absolute within it */
     position: relative;
 }
 
 /* class for the output area when it should be height-limited */
 div.output_scroll {
   /* ideally, this would be max-height, but FF barfs all over that */
   height: 24em;
   /* FF needs this *and the wrapper* to specify full width, or it will shrinkwrap */
   width: 100%;
   
   overflow: auto;
   border-radius: 3px;
   box-shadow: inset 0 2px 8px rgba(0, 0, 0, .8);
 }
 
 /* output div while it is collapsed */
 div.output_collapsed {
   margin-right: 5px;
 }
 
 div.out_prompt_overlay {
   height: 100%;
   padding: 0px;
   position: absolute;
   border-radius: 3px;
 }
 
 div.out_prompt_overlay:hover {
   /* use inner shadow to get border that is computed the same on WebKit/FF */
   box-shadow: inset 0 0 1px #000;
   background: rgba(240, 240, 240, 0.5);
 }
 
 div.output_prompt {
     color: darkred;
     /* 5px right shift to account for margin in parent container */
     margin: 0 5px 0 -5px;
 }
 
 /* This class is the outer container of all output sections. */
 div.output_area {
     padding: 0px;
     page-break-inside: avoid;
 }
 
 /* This class is for the output subarea inside the output_area and after
    the prompt div. */
 div.output_subarea {
     padding: 0.4em 0.4em 0.4em 0.4em;
 }
 
 /* The rest of the output_* classes are for special styling of the different
    output types */
 
 /* all text output has this class: */
 div.output_text {
     text-align: left;
     color: black;
     font-family: monospace;
 }
 
 /* stdout/stderr are 'text' as well as 'stream', but pyout/pyerr are *not* streams */
 div.output_stream {
     padding-top: 0.0em;
     padding-bottom: 0.0em;
 }
 div.output_stdout {
 }
 div.output_stderr {
     background: #fdd; /* very light red background for stderr */
 }
 
 div.output_latex {
     text-align: left;
     color: black;
 }
 
 div.output_html {
 }
 
 div.output_png {
 }
 
 div.output_jpeg {
 }
 
 div.text_cell {
     background-color: white;
     padding: 5px 5px 5px 5px;
 }
 
 div.text_cell_input {
     color: black;
     border: 1px solid #ddd;
     border-radius: 3px;
     background: #f7f7f7;
 }
 
 div.text_cell_render {
     font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
     outline: none;
     resize: none;
     width:  inherit;
     border-style: none;
     padding: 5px;
     color: black;
 }
 
 /* The following gets added to the <head> if it is detected that the user has a
  * monospace font with inconsistent normal/bold/italic height.  See
  * notebookmain.js.  Such fonts will have keywords vertically offset with
  * respect to the rest of the text.  The user should select a better font. 
  * See: https://github.com/ipython/ipython/issues/1503
  *
  * .CodeMirror span {
  *      vertical-align: bottom;
  * }
  */
 
 .CodeMirror {
     line-height: 1.231;  /* Changed from 1em to our global default */
 }
 
 .CodeMirror-scroll {
     height: auto;     /* Changed to auto to autogrow */
     /*  The CodeMirror docs are a bit fuzzy on if overflow-y should be hidden or visible.*/
     /*  We have found that if it is visible, vertical scrollbars appear with font size changes.*/
     overflow-y: hidden;
     overflow-x: auto; /* Changed from auto to remove scrollbar */
 }
 
 /* CSS font colors for translated ANSI colors. */
 
 
 .ansiblack {color: black;}
 .ansired {color: darkred;}
 .ansigreen {color: darkgreen;}
 .ansiyellow {color: brown;}
 .ansiblue {color: darkblue;}
 .ansipurple {color: darkviolet;}
 .ansicyan {color: steelblue;}
 .ansigrey {color: grey;}
 .ansibold {font-weight: bold;}
 
 .completions {
     position: absolute;
     z-index: 10;
     overflow: hidden;
     border: 1px solid grey;
 }
 
 .completions select {
     background: white;
     outline: none;
     border: none;
     padding: 0px;
     margin: 0px;
     overflow: auto;
     font-family: monospace;
 }
 
 option.context {
   background-color: #DEF7FF;
 }
 option.introspection {
   background-color: #EBF4EB;
 }
 
 /*fixed part of the completion*/
 .completions p b {
     font-weight:bold;
 }
 
 .completions p {
     background: #DDF;
     /*outline: none;
     padding: 0px;*/
     border-bottom: black solid 1px;
     padding: 1px;
     font-family: monospace;
 }
 
 pre.dialog {
     background-color: #f7f7f7;
     border: 1px solid #ddd;
     border-radius: 3px;
     padding: 0.4em;
     padding-left: 2em;
 }
 
 p.dialog {
     padding : 0.2em;
 }
 
 .shortcut_key {
     display: inline-block;
     width: 15ex;
     text-align: right;
     font-family: monospace;
 }
 
 .shortcut_descr {
 }
 
 /* Word-wrap output correctly.  This is the CSS3 spelling, though Firefox seems
    to not honor it correctly.  Webkit browsers (Chrome, rekonq, Safari) do.
  */
 pre, code, kbd, samp { white-space: pre-wrap; }
 
 #fonttest {
     font-family: monospace;
 }
 
 .js-error {
     color: darkred;
-}
  No newline at end of file
+}

IPython/frontend/html/notebook/static/js/kernel.js

@@ -1,391 +1,391 b''
 //----------------------------------------------------------------------------
 //  Copyright (C) 2008-2011  The IPython Development Team
 //
 //  Distributed under the terms of the BSD License.  The full license is in
 //  the file COPYING, distributed as part of this software.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // Kernel
 //============================================================================
 
 var IPython = (function (IPython) {
 
     var utils = IPython.utils;
 
     // Initialization and connection.
 
     var Kernel = function (base_url) {
         this.kernel_id = null;
         this.shell_channel = null;
         this.iopub_channel = null;
         this.base_url = base_url;
         this.running = false;
         this.username = "username";
         this.session_id = utils.uuid();
         this._msg_callbacks = {};
 
         if (typeof(WebSocket) !== 'undefined') {
             this.WebSocket = WebSocket;
         } else if (typeof(MozWebSocket) !== 'undefined') {
             this.WebSocket = MozWebSocket;
         } else {
             alert('Your browser does not have WebSocket support, please try Chrome, Safari or Firefox ≥ 6. Firefox 4 and 5 are also supported by you have to enable WebSockets in about:config.');
         };
     };
 
 
     Kernel.prototype._get_msg = function (msg_type, content) {
         var msg = {
             header : {
                 msg_id : utils.uuid(),
                 username : this.username,
                 session : this.session_id,
                 msg_type : msg_type
             },
             metadata : {},
             content : content,
             parent_header : {}
         };
         return msg;
     };
 
     Kernel.prototype.start = function (notebook_id) {
         var that = this;
         if (!this.running) {
             var qs = $.param({notebook:notebook_id});
             var url = this.base_url + '?' + qs;
             $.post(url,
                 $.proxy(that._kernel_started,that),
                 'json'
             );
         };
     };
 
 
     Kernel.prototype.restart = function () {
         $([IPython.events]).trigger({type: 'status_restarting.Kernel', kernel: this});
         var that = this;
         if (this.running) {
             this.stop_channels();
             var url = this.kernel_url + "/restart";
             $.post(url,
                 $.proxy(that._kernel_started, that),
                 'json'
             );
         };
     };
 
 
     Kernel.prototype._kernel_started = function (json) {
         console.log("Kernel started: ", json.kernel_id);
         this.running = true;
         this.kernel_id = json.kernel_id;
         this.ws_url = json.ws_url;
         this.kernel_url = this.base_url + "/" + this.kernel_id;
         this.start_channels();
         this.shell_channel.onmessage = $.proxy(this._handle_shell_reply,this);
         this.iopub_channel.onmessage = $.proxy(this._handle_iopub_reply,this);
     };
 
 
     Kernel.prototype._websocket_closed = function(ws_url, early){
         var msg;
         var parent_item = $('body');
         if (early) {
             msg = "Websocket connection to " + ws_url + " could not be established." +
             " You will NOT be able to run code." +
             " Your browser may not be compatible with the websocket version in the server," +
             " or if the url does not look right, there could be an error in the" +
             " server's configuration.";
         } else {
-            IPython.notification_widget.set_message('Reconnecting Websockets', 1000);
+            IPython.notification_area.widget('kernel').set_message('Reconnecting Websockets', 1000);
             this.start_channels();
             return;
         }
         var dialog = $('<div/>');
         dialog.html(msg);
         parent_item.append(dialog);
         dialog.dialog({
             resizable: false,
             modal: true,
             title: "Websocket closed",
             closeText: "",
             close: function(event, ui) {$(this).dialog('destroy').remove();},
             buttons : {
                 "OK": function () {
                     $(this).dialog('close');
                 }
             }
         });
 
     };
 
     Kernel.prototype.start_channels = function () {
         var that = this;
         this.stop_channels();
         var ws_url = this.ws_url + this.kernel_url;
         console.log("Starting WS:", ws_url);
         this.shell_channel = new this.WebSocket(ws_url + "/shell");
         this.iopub_channel = new this.WebSocket(ws_url + "/iopub");
         send_cookie = function(){
             this.send(document.cookie);
         };
         var already_called_onclose = false; // only alert once
         ws_closed_early = function(evt){
             if (already_called_onclose){
                 return;
             }
             already_called_onclose = true;
             if ( ! evt.wasClean ){
                 that._websocket_closed(ws_url, true);
             }
         };
         ws_closed_late = function(evt){
             if (already_called_onclose){
                 return;
             }
             already_called_onclose = true;
             if ( ! evt.wasClean ){
                 that._websocket_closed(ws_url, false);
             }
         };
         this.shell_channel.onopen = send_cookie;
         this.shell_channel.onclose = ws_closed_early;
         this.iopub_channel.onopen = send_cookie;
         this.iopub_channel.onclose = ws_closed_early;
         // switch from early-close to late-close message after 1s
         setTimeout(function(){
             that.shell_channel.onclose = ws_closed_late;
             that.iopub_channel.onclose = ws_closed_late;
         }, 1000);
     };
 
 
     Kernel.prototype.stop_channels = function () {
         if (this.shell_channel !== null) {
             this.shell_channel.onclose = function (evt) {};
             this.shell_channel.close();
             this.shell_channel = null;
         };
         if (this.iopub_channel !== null) {
             this.iopub_channel.onclose = function (evt) {};
             this.iopub_channel.close();
             this.iopub_channel = null;
         };
     };
 
     // Main public methods.
 
     Kernel.prototype.object_info_request = function (objname, callbacks) {
         // When calling this method pass a callbacks structure of the form:
         //
         // callbacks = {
         //  'object_info_reply': object_into_reply_callback
         // }
         //
         // The object_info_reply_callback will be passed the content object of the
         // object_into_reply message documented here:
         //
         // http://ipython.org/ipython-doc/dev/development/messaging.html#object-information
         if(typeof(objname)!=null && objname!=null)
         {
             var content = {
                 oname : objname.toString(),
             };
             var msg = this._get_msg("object_info_request", content);
             this.shell_channel.send(JSON.stringify(msg));
             this.set_callbacks_for_msg(msg.header.msg_id, callbacks);
             return msg.header.msg_id;
         }
         return;
     }
 
     Kernel.prototype.execute = function (code, callbacks, options) {
         // The options object should contain the options for the execute call. Its default
         // values are:
         //
         // options = {
         //   silent : true,
         //   user_variables : [],
         //   user_expressions : {},
         //   allow_stdin : false
         // }
         //
         // When calling this method pass a callbacks structure of the form:
         //
         // callbacks = {
         //  'execute_reply': execute_reply_callback,
         //  'output': output_callback,
         //  'clear_output': clear_output_callback,
         //  'set_next_input': set_next_input_callback
         // }
         //
         // The execute_reply_callback will be passed the content and metadata objects of the execute_reply
         // message documented here:
         //
         // http://ipython.org/ipython-doc/dev/development/messaging.html#execute
         //
         // The output_callback will be passed msg_type ('stream','display_data','pyout','pyerr')
         // of the output and the content and metadata objects of the PUB/SUB channel that contains the
         // output:
         //
         // http://ipython.org/ipython-doc/dev/development/messaging.html#messages-on-the-pub-sub-socket
         //
         // The clear_output_callback will be passed a content object that contains
         // stdout, stderr and other fields that are booleans, as well as the metadata object.
         //
         // The set_next_input_callback will be passed the text that should become the next
         // input cell.
 
         var content = {
             code : code,
             silent : true,
             user_variables : [],
             user_expressions : {},
             allow_stdin : false
         };
 		$.extend(true, content, options)
         var msg = this._get_msg("execute_request", content);
         this.shell_channel.send(JSON.stringify(msg));
         this.set_callbacks_for_msg(msg.header.msg_id, callbacks);
         return msg.header.msg_id;
     };
 
 
     Kernel.prototype.complete = function (line, cursor_pos, callbacks) {
         // When calling this method pass a callbacks structure of the form:
         //
         // callbacks = {
         //  'complete_reply': complete_reply_callback
         // }
         //
         // The complete_reply_callback will be passed the content object of the
         // complete_reply message documented here:
         //
         // http://ipython.org/ipython-doc/dev/development/messaging.html#complete
         callbacks = callbacks || {};
         var content = {
             text : '',
             line : line,
             cursor_pos : cursor_pos
         };
         var msg = this._get_msg("complete_request", content);
         this.shell_channel.send(JSON.stringify(msg));
         this.set_callbacks_for_msg(msg.header.msg_id, callbacks);
         return msg.header.msg_id;
     };
 
 
     Kernel.prototype.interrupt = function () {
         if (this.running) {
             $([IPython.events]).trigger({type: 'status_interrupting.Kernel', kernel: this});
             $.post(this.kernel_url + "/interrupt");
         };
     };
 
 
     Kernel.prototype.kill = function () {
         if (this.running) {
             this.running = false;
             var settings = {
                 cache : false,
                 type : "DELETE"
             };
             $.ajax(this.kernel_url, settings);
         };
     };
 
 
     // Reply handlers.
 
     Kernel.prototype.get_callbacks_for_msg = function (msg_id) {
         var callbacks = this._msg_callbacks[msg_id];
         return callbacks;
     };
 
 
     Kernel.prototype.set_callbacks_for_msg = function (msg_id, callbacks) {
         this._msg_callbacks[msg_id] = callbacks || {};
     }
 
 
     Kernel.prototype._handle_shell_reply = function (e) {
         reply = $.parseJSON(e.data);
         var header = reply.header;
         var content = reply.content;
         var metadata = reply.metadata;
         var msg_type = header.msg_type;
         var callbacks = this.get_callbacks_for_msg(reply.parent_header.msg_id);
         if (callbacks !== undefined) {
             var cb = callbacks[msg_type];
             if (cb !== undefined) {
                 cb(content, metadata);
             }
         };
 
         if (content.payload !== undefined) {
             var payload = content.payload || [];
             this._handle_payload(callbacks, payload);
         }
     };
 
 
     Kernel.prototype._handle_payload = function (callbacks, payload) {
         var l = payload.length;
         // Payloads are handled by triggering events because we don't want the Kernel
         // to depend on the Notebook or Pager classes.
         for (var i=0; i<l; i++) {
             if (payload[i].source === 'IPython.zmq.page.page') {
                 var data = {'text':payload[i].text}
                 $([IPython.events]).trigger('open_with_text.Pager', data);
             } else if (payload[i].source === 'IPython.zmq.zmqshell.ZMQInteractiveShell.set_next_input') {
                 if (callbacks.set_next_input !== undefined) {
                     callbacks.set_next_input(payload[i].text)
                 }
             }
         };
     };
 
 
     Kernel.prototype._handle_iopub_reply = function (e) {
         var reply = $.parseJSON(e.data);
         var content = reply.content;
         var msg_type = reply.header.msg_type;
         var metadata = reply.metadata;
         var callbacks = this.get_callbacks_for_msg(reply.parent_header.msg_id);
         if (msg_type !== 'status' && callbacks === undefined) {
             // Message not from one of this notebook's cells and there are no
             // callbacks to handle it.
             return;
         }
         var output_types = ['stream','display_data','pyout','pyerr'];
         if (output_types.indexOf(msg_type) >= 0) {
             var cb = callbacks['output'];
             if (cb !== undefined) {
                 cb(msg_type, content, metadata);
             }
         } else if (msg_type === 'status') {
             if (content.execution_state === 'busy') {
                 $([IPython.events]).trigger({type: 'status_busy.Kernel', kernel: this});
             } else if (content.execution_state === 'idle') {
                 $([IPython.events]).trigger({type: 'status_idle.Kernel', kernel: this});
             } else if (content.execution_state === 'dead') {
                 this.stop_channels();
                 $([IPython.events]).trigger({type: 'status_dead.Kernel', kernel: this});
             };
         } else if (msg_type === 'clear_output') {
             var cb = callbacks['clear_output'];
             if (cb !== undefined) {
                 cb(content, metadata);
             }
         };
     };
 
 
     IPython.Kernel = Kernel;
 
     return IPython;
 
 }(IPython));
 

IPython/frontend/html/notebook/static/js/notebookmain.js

@@ -1,67 +1,68 b''
 //----------------------------------------------------------------------------
 //  Copyright (C) 2008-2011  The IPython Development Team
 //
 //  Distributed under the terms of the BSD License.  The full license is in
 //  the file COPYING, distributed as part of this software.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // On document ready
 //============================================================================
 
 
 $(document).ready(function () {
 
     IPython.init_mathjax();
 
     IPython.read_only = $('body').data('readOnly') === 'True';
     $('div#main_app').addClass('border-box-sizing ui-widget');
     $('div#notebook_panel').addClass('border-box-sizing ui-widget');
     // The header's bottom border is provided by the menu bar so we remove it.
     $('div#header').css('border-bottom-style','none');
 
     IPython.page = new IPython.Page();
     IPython.markdown_converter = new Markdown.Converter();
     IPython.layout_manager = new IPython.LayoutManager();
     IPython.pager = new IPython.Pager('div#pager', 'div#pager_splitter');
     IPython.quick_help = new IPython.QuickHelp('span#quick_help_area');
     IPython.login_widget = new IPython.LoginWidget('span#login_widget');
     IPython.notebook = new IPython.Notebook('div#notebook');
     IPython.save_widget = new IPython.SaveWidget('span#save_widget');
     IPython.menubar = new IPython.MenuBar('#menubar')
     IPython.toolbar = new IPython.ToolBar('#toolbar')
     IPython.tooltip = new IPython.Tooltip()
-    IPython.notification_widget = new IPython.NotificationWidget('#notification')
+    IPython.notification_area = new IPython.NotificationArea('#notification_area')
+    IPython.notification_area.init_notification_widgets();
 
     IPython.layout_manager.do_resize();
 
     $('body').append('<div id="fonttest"><pre><span id="test1">x</span>'+
                      '<span id="test2" style="font-weight: bold;">x</span>'+
                      '<span id="test3" style="font-style: italic;">x</span></pre></div>')
     var nh = $('#test1').innerHeight();
     var bh = $('#test2').innerHeight();
     var ih = $('#test3').innerHeight();
     if(nh != bh || nh != ih) {
         $('head').append('<style>.CodeMirror span { vertical-align: bottom; }</style>');
     }
     $('#fonttest').remove();
 
     if(IPython.read_only){
         // hide various elements from read-only view
         $('div#pager').remove();
         $('div#pager_splitter').remove();
 
         // set the notebook name field as not modifiable
         $('#notebook_name').attr('disabled','disabled')
     }
 
     IPython.page.show();
 
     IPython.layout_manager.do_resize();
     $([IPython.events]).on('notebook_loaded.Notebook', function () {
         IPython.layout_manager.do_resize();
     })
     IPython.notebook.load_notebook($('body').data('notebookId'));
 
 });
 

IPython/frontend/html/notebook/static/js/notificationwidget.js

@@ -1,123 +1,82 b''
 //----------------------------------------------------------------------------
 //  Copyright (C) 2008-2011  The IPython Development Team
 //
 //  Distributed under the terms of the BSD License.  The full license is in
 //  the file COPYING, distributed as part of this software.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // Notification widget
 //============================================================================
 
 var IPython = (function (IPython) {
-
+    "use strict";
     var utils = IPython.utils;
 
 
     var NotificationWidget = function (selector) {
         this.selector = selector;
         this.timeout = null;
         this.busy = false;
         if (this.selector !== undefined) {
             this.element = $(selector);
             this.style();
-            this.bind_events();
         }
+        this.element.button();
+        this.element.hide();
+        var that = this;
+
     };
 
 
     NotificationWidget.prototype.style = function () {
-        this.element.addClass('ui-widget ui-widget-content ui-corner-all');
+        this.element.addClass('notification_widget ui-widget ui-widget-content ui-corner-all');
         this.element.addClass('border-box-sizing');
     };
 
-
-    NotificationWidget.prototype.bind_events = function () {
-        var that = this;
-        // Kernel events
-        $([IPython.events]).on('status_idle.Kernel',function () {
-            IPython.save_widget.update_document_title();
-            if (that.get_message() === 'Kernel busy') {
-                that.element.fadeOut(100, function () {
-                    that.element.html('');
-                });
-            };
-        });
-        $([IPython.events]).on('status_busy.Kernel',function () {
-            window.document.title='(Busy) '+window.document.title;
-            that.set_message("Kernel busy");
-        });
-        $([IPython.events]).on('status_restarting.Kernel',function () {
-            IPython.save_widget.update_document_title();
-            that.set_message("Restarting kernel",500);
-        });
-        $([IPython.events]).on('status_interrupting.Kernel',function () {
-            that.set_message("Interrupting kernel",500);
-        });
-        $([IPython.events]).on('status_dead.Kernel',function () {
-            var dialog = $('<div/>');
-            dialog.html('The kernel has died, would you like to restart it? If you do not restart the kernel, you will be able to save the notebook, but running code will not work until the notebook is reopened.');
-            $(document).append(dialog);
-            dialog.dialog({
-                resizable: false,
-                modal: true,
-                title: "Dead kernel",
-                buttons : {
-                    "Restart": function () {
-                        $([IPython.events]).trigger('status_restarting.Kernel');
-                        IPython.notebook.start_kernel();
-                        $(this).dialog('close');
-                    },
-                    "Continue running": function () {
-                        $(this).dialog('close');
-                    }
-                }
-            });
-        });
-        // Notebook events
-        $([IPython.events]).on('notebook_loading.Notebook', function () {
-            that.set_message("Loading notebook",500);
-        });
-        $([IPython.events]).on('notebook_loaded.Notebook', function () {
-            that.set_message("Notebook loaded",500);
-        });
-        $([IPython.events]).on('notebook_saving.Notebook', function () {
-            that.set_message("Saving notebook",500);
-        });
-        $([IPython.events]).on('notebook_saved.Notebook', function () {
-            that.set_message("Notebook saved",2000);
-        });
-        $([IPython.events]).on('notebook_save_failed.Notebook', function () {
-            that.set_message("Notebook save failed",2000);
-        });
-    };
-
-
-    NotificationWidget.prototype.set_message = function (msg, timeout) {
+    // msg : message to display
+    // timeout : time in ms before diseapearing
+    //
+    // if timeout <= 0
+    // click_callback : function called if user click on notification
+    // could return false to prevent the notification to be dismissed
+    NotificationWidget.prototype.set_message = function (msg, timeout, click_callback) {
+        var callback = click_callback || function() {return false;};
         var that = this;
         this.element.html(msg);
         this.element.fadeIn(100);
         if (this.timeout !== null) {
             clearTimeout(this.timeout);
             this.timeout = null;
-        };
-        if (timeout !== undefined) {
+        }
+        if (timeout !== undefined && timeout >=0) {
             this.timeout = setTimeout(function () {
                 that.element.fadeOut(100, function () {that.element.html('');});
                 that.timeout = null;
-            }, timeout)
-        };
+            }, timeout);
+        } else {
+            this.element.click(function() {
+                if( callback() != false ) {
+                    that.element.fadeOut(100, function () {that.element.html('');});
+                    that.element.unbind('click');
+                }
+                if (that.timeout !== undefined) {
+                    that.timeout = undefined;
+                    clearTimeout(that.timeout);
+                }
+            });
+        }
     };
 
 
     NotificationWidget.prototype.get_message = function () {
         return this.element.html();
     };
 
 
     IPython.NotificationWidget = NotificationWidget;
 
     return IPython;
 
 }(IPython));
 

IPython/frontend/html/notebook/templates/notebook.html

@@ -1,250 +1,252 b''
 {% extends page.html %}
 {% block stylesheet %}
 
 {% if mathjax_url %}
 <script type="text/javascript" src="{{mathjax_url}}?config=TeX-AMS_HTML" charset="utf-8"></script>
 {% end %}
 <script type="text/javascript">
 // MathJax disabled, set as null to distingish from *missing* MathJax,
 // where it will be undefined, and should prompt a dialog later.
 window.mathjax_url = "{{mathjax_url}}";
 </script>
 
 <link rel="stylesheet" href="{{ static_url("codemirror/lib/codemirror.css") }}">
 <link rel="stylesheet" href="{{ static_url("codemirror/theme/ipython.css") }}">
 
 <link rel="stylesheet" href="{{ static_url("prettify/prettify.css") }}"/>
 
 <link rel="stylesheet" href="{{ static_url("css/notebook.css") }}" type="text/css" />
 <link rel="stylesheet" href="{{ static_url("css/tooltip.css") }}" type="text/css" />
 <link rel="stylesheet" href="{{ static_url("css/renderedhtml.css") }}" type="text/css" />
 
 <link rel="stylesheet" href="{{ static_url("css/printnotebook.css") }}" type="text/css" media="print"/>
 
 {% end %}
 
 
 {% block params %}
 
 data-project={{project}}
 data-base-project-url={{base_project_url}}
 data-base-kernel-url={{base_kernel_url}}
 data-read-only={{read_only and not logged_in}}
 data-notebook-id={{notebook_id}}
 
 {% end %}
 
 
 {% block header %}
 
 <span id="save_widget">
     <span id="notebook_name"></span>
     <span id="save_status"></span>
 </span>
 
 {% end %}
 
 
 {% block site %}
 
 <div id="menubar_container">
 <div id="menubar">
     <ul id="menus">
         <li><a href="#">File</a>
             <ul>
                 <li id="new_notebook"><a href="#">New</a></li>
                 <li id="open_notebook"><a href="#">Open...</a></li>
                 <hr/>
                 <li id="copy_notebook"><a href="#">Make a Copy...</a></li>
                 <li id="rename_notebook"><a href="#">Rename...</a></li>
                 <li id="save_notebook"><a href="#">Save</a></li>
                 <hr/>
                 <li><a href="#">Download as</a>
                     <ul>
                         <li id="download_ipynb"><a href="#">IPython (.ipynb)</a></li>
                         <li id="download_py"><a href="#">Python (.py)</a></li>
                     </ul>
                 </li>
                 <hr/>
                 <li id="print_notebook"><a href="/{{notebook_id}}/print" target="_blank">Print View</a></li>
                 <hr/>
                 <li id="kill_and_exit"><a href="#" >Close and halt</a></li>
             </ul>
         </li>
         <li><a href="#">Edit</a>
             <ul>
                 <li id="cut_cell"><a href="#">Cut Cell</a></li>
                 <li id="copy_cell"><a href="#">Copy Cell</a></li>
                 <li id="paste_cell" class="ui-state-disabled"><a href="#">Paste Cell</a></li>
                 <li id="paste_cell_above" class="ui-state-disabled"><a href="#">Paste Cell Above</a></li>
                 <li id="paste_cell_below" class="ui-state-disabled"><a href="#">Paste Cell Below</a></li>
                 <li id="delete_cell"><a href="#">Delete</a></li>
                 <hr/>
                 <li id="split_cell"><a href="#">Split Cell</a></li>
                 <li id="merge_cell_above"><a href="#">Merge Cell Above</a></li>
                 <li id="merge_cell_below"><a href="#">Merge Cell Below</a></li>
                 <hr/>
                 <li id="move_cell_up"><a href="#">Move Cell Up</a></li>
                 <li id="move_cell_down"><a href="#">Move Cell Down</a></li>
                 <hr/>
                 <li id="select_previous"><a href="#">Select Previous Cell</a></li>
                 <li id="select_next"><a href="#">Select Next Cell</a></li>
             </ul>
         </li>
         <li><a href="#">View</a>
             <ul>
                 <li id="toggle_header"><a href="#">Toggle Header</a></li>
                 <li id="toggle_toolbar"><a href="#">Toggle Toolbar</a></li>
             </ul>
         </li>
         <li><a href="#">Insert</a>
             <ul>
                 <li id="insert_cell_above"><a href="#">Insert Cell Above</a></li>
                 <li id="insert_cell_below"><a href="#">Insert Cell Below</a></li>
             </ul>
         </li>
         <li><a href="#">Cell</a>
             <ul>
                 <li id="run_cell"><a href="#">Run</a></li>
                 <li id="run_cell_in_place"><a href="#">Run in Place</a></li>
                 <li id="run_all_cells"><a href="#">Run All</a></li>
                 <hr/>
                 <li id="to_code"><a href="#">Code</a></li>
                 <li id="to_markdown"><a href="#">Markdown </a></li>
                 <li id="to_raw"><a href="#">Raw Text</a></li>
                 <li id="to_heading1"><a href="#">Heading 1</a></li>
                 <li id="to_heading2"><a href="#">Heading 2</a></li>
                 <li id="to_heading3"><a href="#">Heading 3</a></li>
                 <li id="to_heading4"><a href="#">Heading 4</a></li>
                 <li id="to_heading5"><a href="#">Heading 5</a></li>
                 <li id="to_heading6"><a href="#">Heading 6</a></li>
                 <hr/>
                 <li id="toggle_output"><a href="#">Toggle Current Output</a></li>
                 <li id="all_outputs"><a href="#">All Output</a>
                     <ul>
                         <li id="expand_all_output"><a href="#">Expand</a></li>
                         <li id="scroll_all_output"><a href="#">Scroll Long</a></li>
                         <li id="collapse_all_output"><a href="#">Collapse</a></li>
                         <li id="clear_all_output"><a href="#">Clear</a></li>
                     </ul>
                 </li>
             </ul>
         </li>
         <li><a href="#">Kernel</a>
             <ul>
                 <li id="int_kernel"><a href="#">Interrupt</a></li>
                 <li id="restart_kernel"><a href="#">Restart</a></li>
             </ul>
         </li>
         <li><a href="#">Help</a>
             <ul>
                 <li><a href="http://ipython.org/documentation.html" target="_blank">IPython Help</a></li>
                 <li><a href="http://ipython.org/ipython-doc/stable/interactive/htmlnotebook.html" target="_blank">Notebook Help</a></li>
                 <li id="keyboard_shortcuts"><a href="#">Keyboard Shortcuts</a></li>
                 <hr/>
                 <li><a href="http://docs.python.org" target="_blank">Python</a></li>
                 <li><a href="http://docs.scipy.org/doc/numpy/reference/" target="_blank">NumPy</a></li>
                 <li><a href="http://docs.scipy.org/doc/scipy/reference/" target="_blank">SciPy</a></li>
                 <li><a href="http://docs.sympy.org/dev/index.html" target="_blank">SymPy</a></li>
                 <li><a href="http://matplotlib.sourceforge.net/" target="_blank">Matplotlib</a></li>
             </ul>
         </li>
     </ul>
 
 </div>
-<div id="notification"></div>
+    <div id="notification_area">
+    </div>
 </div>
 
 
 <div id="toolbar">
 
     <span>
         <button id="save_b">Save</button>
     </span>
     <span id="cut_copy_paste">
         <button id="cut_b" title="Cut Cell">Cut Cell</button>
         <button id="copy_b" title="Copy Cell">Copy Cell</button>
         <button id="paste_b" title="Paste Cell">Paste Cell</button>
     </span>
     <span id="move_up_down">
         <button id="move_up_b" title="Move Cell Up">Move Cell Up</button>
         <button id="move_down_b" title="Move Cell Down">Move Down</button>
     </span>
     <span id="insert_above_below">
         <button id="insert_above_b" title="Insert Cell Above">Insert Cell Above</button>
         <button id="insert_below_b" title="Insert Cell Below">Insert Cell Below</button>
     </span>
     <span id="run_int">
         <button id="run_b" title="Run Cell">Run Cell</button>
         <button id="interrupt_b" title="Interrupt">Interrupt</button>
     </span>
     <span>
         <select id="cell_type">
              <option value="code">Code</option>
              <option value="markdown">Markdown</option>
              <option value="raw">Raw Text</option>
              <option value="heading1">Heading 1</option>
              <option value="heading2">Heading 2</option>
              <option value="heading3">Heading 3</option>
              <option value="heading4">Heading 4</option>
              <option value="heading5">Heading 5</option>
              <option value="heading6">Heading 6</option>
         </select>
     </span>
 
 </div>
 
 <div id="main_app">
 
     <div id="notebook_panel">
         <div id="notebook"></div>
         <div id="pager_splitter"></div>
         <div id="pager"></div>
     </div>
 
 </div>
 <div id='tooltip' class='tooltip ui-corner-all' style='display:none'></div>
 
 
 {% end %}
 
 
 {% block script %}
 
 <script src="{{ static_url("codemirror/lib/codemirror.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/mode/python/python.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/mode/htmlmixed/htmlmixed.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/mode/xml/xml.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/mode/javascript/javascript.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/mode/css/css.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/mode/rst/rst.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/mode/markdown/markdown.js") }}" charset="utf-8"></script>
 
 <script src="{{ static_url("pagedown/Markdown.Converter.js") }}" charset="utf-8"></script>
 
 <script src="{{ static_url("prettify/prettify.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("dateformat/date.format.js") }}" charset="utf-8"></script>
 
 <script src="{{ static_url("js/events.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/utils.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/layoutmanager.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/initmathjax.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/outputarea.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/cell.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/codecell.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/completer.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/textcell.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/kernel.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/savewidget.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/quickhelp.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/pager.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/menubar.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/toolbar.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/notebook.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/notificationwidget.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{ static_url("js/notificationarea.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/tooltip.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/notebookmain.js") }}" type="text/javascript" charset="utf-8"></script>
 
 <script src="{{ static_url("js/contexthint.js") }}" charset="utf-8"></script>
 
 {% end %}