Improve the UI with FontAwesome icons

www/common/toolbar.js

@@ -43,6 +43,8 @@ define([
 
     var $style;
 
+    var firstConnection = true;
+
     var styleToolbar = function ($container, href) {
         href = href || '/customize/toolbar.css';
 
@@ -181,8 +183,12 @@ define([
             }
         }
         innerHTML += getViewers(numberOfViewUsers);
-        if (userData[myUserName] && userData[myUserName].name) {
-            innerHTML = '<span class="' + USERNAME_CLS + '">' + userData[myUserName].name + '</span> | ' + innerHTML;
+        if (userData[myUserName]) {
+            var name = userData[myUserName].name;
+            if (!name) {
+                name = '<span title="' + Messages.anonymous + '" class="fa fa-user-secret" style="font-family:FontAwesome"></span>';
+            }
+            innerHTML = '<span class="' + USERNAME_CLS + '">' + name + '</span> | ' + innerHTML;
         }
         listElement.innerHTML = innerHTML;
     };
@@ -197,21 +203,31 @@ define([
     };
 
     var checkLag = function (getLag, lagElement) {
-        if(typeof getLag !== "function") { return; }
-        var lag = getLag();
-        var lagMsg = Messages.lag + ' ';
+        var lag;
+        if(typeof getLag === "function") {
+            lag = getLag();
+        }
+        var lagLight = $('<div>', {
+            'class': 'lag'
+        });
         if(lag) {
-          var lagSec = lag/1000;
-          if (lag.waiting && lagSec > 1) {
-              lagMsg += "?? " + Math.floor(lagSec);
+          firstConnection = false;
+          var title = Messages.lag + ' : ' + lag + ' ms\n';
+          if (lag.waiting || lag > 1000) {
+            lagLight.addClass('lag-orange');
+            title += 'Your connection to the server is slow, it may impact the performance of the collaborative editor.';
           } else {
-              lagMsg += lagSec;
+            lagLight.addClass('lag-green');
+            title += "Everything is working fine";
           }
         }
-        else {
-          lagMsg += "??";
+        else if (!firstConnection){
+          lagLight.addClass('lag-red');
+          title = "You are disconnected from the server!";
         }
-        lagElement.textContent = lagMsg;
+        lagLight.attr('title', title);
+        $(lagElement).html('');
+        $(lagElement).append(lagLight);
     };
 
     var create = Bar.create = function ($container, myUserName, realtime, getLag, userList, config) {
@@ -256,6 +272,7 @@ define([
         // Try to filter out non-patch messages, doesn't have to be perfect this is just the spinner
         realtime.onMessage(function (msg) { if (msg.indexOf(':[2,') > -1) { ks(); } });
 
+        checkLag(getLag, lagElement);
         setInterval(function () {
             if (!connected) { return; }
             checkLag(getLag, lagElement);
@@ -265,13 +282,13 @@ define([
             failed: function () {
                 connected = false;
                 userListElement.textContent = Messages.disconnected;
-                lagElement.textContent = '';
+                checkLag(undefined, lagElement);
             },
             reconnecting: function (userId) {
                 myUserName = userId;
                 connected = false;
                 userListElement.textContent = Messages.reconnecting;
-                lagElement.textContent = '';
+                checkLag(getLag, lagElement);
             },
             connected: function () {
                 connected = true;