add checkpoint status to notebook header

autosave is also there, but once the dirty flag is an event,
this should stop having the date, and just become 'autosaved / unsaved changes'

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

@@ -870,6 +870,7 body{background-color:#ffffff;}
 body.notebook_app{overflow:hidden;}
 blockquote{border-left:4px solid #DDD;padding:0 15px;color:#777;}
 span#save_widget{padding:5px;margin:0px 0px 0px 300px;display:inline-block;}
+span#checkpoint_status span#autosave_status{font-size:small;}
 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{-webkit-box-shadow:0px 6px 10px -1px #adadad;-moz-box-shadow:0px 6px 10px -1px #adadad;box-shadow:0px 6px 10px -1px #adadad;}

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

@@ -26,7 +26,9 var IPython = (function (IPython) {
     SaveWidget.prototype.style = function () {
         this.element.find('span#save_widget').addClass('ui-widget');
         this.element.find('span#notebook_name').addClass('ui-widget');
-        this.element.find('span#save_status').addClass('ui-widget')
+        this.element.find('span#autosave_status').addClass('ui-widget')
+            .css({border: 'none'});
+        this.element.find('span#checkpoint_status').addClass('ui-widget')
             .css({border: 'none', 'margin-left': '20px'});
     };
 
@@ -54,6 +56,13 var IPython = (function (IPython) {
         $([IPython.events]).on('notebook_save_failed.Notebook', function () {
             that.set_save_status('Last Save Failed!');
         });
+        $([IPython.events]).on('checkpoints_listed.Notebook', function (event, data) {
+            that.set_last_checkpoint(data);
+        });
+        
+        $([IPython.events]).on('checkpoint_created.Notebook', function (event, data) {
+            that.set_last_checkpoint(data);
+        });
     };
 
 
@@ -121,13 +130,23 var IPython = (function (IPython) {
 
 
     SaveWidget.prototype.set_save_status = function (msg) {
-        this.element.find('span#save_status').html(msg);
+        this.element.find('span#autosave_status').html(msg);
+    }
+
+    SaveWidget.prototype.set_checkpoint_status = function (msg) {
+        this.element.find('span#checkpoint_status').html(msg);
     }
 
+    SaveWidget.prototype.set_last_checkpoint = function (checkpoint) {
+        var d = new Date(checkpoint.last_modified);
+        this.set_checkpoint_status(
+            "Last Checkpoint: " + d.format('mmm dd HH:MM')
+        );
+    }
 
     SaveWidget.prototype.set_last_saved = function () {
         var d = new Date();
-        this.set_save_status('Last saved: '+d.format('mmm dd HH:MM'));
+        this.set_save_status('(autosaved: '+d.format('mmm dd HH:MM') + ')');
     };
 
 

IPython/frontend/html/notebook/static/less/notebook.less

@@ -27,6 +27,14 span#save_widget {
     display:inline-block;
 }
 
+span#checkpoint_status span#autosave_status {
+    font-size: small;
+}
+
+/*span#save_widget > span#autosave_status {
+    font-size: x-small;
+}
+*/
 span#notebook_name {
     height: 1em;
     line-height: 1em;
@@ -498,3 +506,4 input.raw_input {
   padding-top: 2px;
   height: 1em;
 }
+

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

@@ -38,7 +38,8 class="notebook_app"
 
 <span id="save_widget">
     <span id="notebook_name"></span>
-    <span id="save_status"></span>
+    <span id="checkpoint_status"></span>
+    <span id="autosave_status"></span>
 </span>
 
 {% endblock %}