Improve title and state toolbar in history and snapshot views

customize.dist/src/less2/include/toolbar.less

@@ -663,6 +663,20 @@
                 display: inline-flex;
                 align-items: center;
             }
+            &.cp-toolbar-unsync {
+                .cp-toolbar-title-edit, .cp-toolbar-title-save {
+                    display: none !important;
+                }
+                .cp-toolbar-title-unsync {
+                    display: inline-flex;
+                }
+                .cp-toolbar-title-editable, .cp-toolbar-title-edit {
+                    border: none !important;
+                }
+            }
+            .cp-toolbar-title-unsync {
+                display: none;
+            }
             .cp-toolbar-title-hoverable {
                 display: inline-flex;
                 overflow: hidden;

www/common/sframe-app-framework.js

@@ -162,6 +162,8 @@ define([
                 } else {
                     state = newState;
                 }
+            } else if (state === STATE.READY) {
+                // Refreshing ready state
             }
             switch (state) {
                 case STATE.DISCONNECTED:
@@ -311,6 +313,7 @@ define([
         };
         var closeSnapshot = function (restore) {
             if (restore && state !== STATE.READY) { return false; }
+            toolbar.setSnapshot(false);
             setUnsyncMode(false); // Unlock onLocal and onRemote
             if (restore) { onLocal(); } // Restore? commit the content
             onRemote(); // Make sure we're back to the realtime content
@@ -318,6 +321,7 @@ define([
         };
         var loadSnapshot = function (hash, data) {
             setUnsyncMode(true);
+            toolbar.setSnapshot(true);
             Snapshots.create(common, {
                 readOnly: readOnly,
                 $toolbar: $(toolbarContainer),
@@ -326,10 +330,8 @@ define([
                 close: closeSnapshot,
                 applyVal: function (val) {
                     var newContent = JSON.parse(val);
-                    /*
                     var meta = extractMetadata(newContent);
                     cpNfInner.metadataMgr.updateMetadata(meta);
-                    */
                     contentUpdate(normalize(newContent) || ["BODY",{},[]], function (h) {
                         return h;
                     });

www/common/toolbar.js

@@ -661,6 +661,8 @@ MessengerUI, Messages) {
                 .text('('+Messages.readonly+')'));
             return $titleContainer;
         }
+        $hoverable.append($('<span>', {'class': 'cp-toolbar-title-readonly cp-toolbar-title-unsync'})
+            .text('('+Messages.readonly+')'));
         var $input = $('<input>', {
             type: 'text',
             placeholder: placeholder
@@ -1348,10 +1350,22 @@ MessengerUI, Messages) {
             }
         };
 
+        toolbar.setSnapshot = function (bool) {
+            toolbar.history = bool;
+            toolbar.title.toggleClass('cp-toolbar-unsync', bool);
+            if (bool && toolbar.spinner) {
+                toolbar.spinner.text("SNAPSHOT"); // XXX
+            } else {
+                kickSpinner(toolbar, config);
+            }
+        };
         toolbar.setHistory = function (bool) {
             toolbar.history = bool;
+            toolbar.title.toggleClass('cp-toolbar-unsync', bool);
             if (bool && toolbar.spinner) {
                 toolbar.spinner.text("HISTORY"); // XXX
+            } else {
+                kickSpinner(toolbar, config);
             }
         };