Add readonly indicator to notification area.

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

@@ -38,8 +38,18 b' define(['
         var knw = this.new_notification_widget('kernel');
         var $kernel_ind_icon = $("#kernel_indicator_icon");
         var $modal_ind_icon = $("#modal_indicator");
+        var $readonly_ind_icon = $('#readonly-indicator');
         var $body = $('body');
 
+        // Listen for the notebook loaded event.  Set readonly indicator.
+        this.events.on('notebook_loaded.Notebook', function() {
+            if (that.notebook.writable) {
+                $readonly_ind_icon.hide();
+            } else {
+                $readonly_ind_icon.show();
+            }
+        });
+
         // Command/Edit mode
         this.events.on('edit_mode.Notebook', function () {
             that.save_widget.update_document_title();

IPython/html/static/notebook/less/notificationarea.less

@@ -30,6 +30,16 b''
     .indicator_area();
 }
 
+#readonly-indicator {
+    .pull-right();
+    .indicator_area();
+
+    margin-top: 2px;
+    margin-bottom: 0px;
+    margin-left: 0px;
+    margin-right: 0px;
+}
+
 .modal_indicator:before {
     .fa-fw();
 }

IPython/html/templates/notebook.html

@@ -62,6 +62,12 b' data-notebook-path="{{notebook_path}}"'
               <span class="kernel_indicator_name">Kernel</span>
               <i id="kernel_indicator_icon"></i>
             </p>
+            <i id="readonly-indicator" class="navbar-text">
+                <span class="fa-stack">
+                    <i class="fa fa-save fa-stack-1x"></i>
+                    <i class="fa fa-ban fa-stack-2x text-danger"></i>
+                </span>
+            </i>
             <i id="modal_indicator" class="navbar-text"></i>
             <span id="notification_area"></span>
             <div class="navbar-collapse collapse">