Update the lag icon

customize.dist/src/less/toolbar.less

@@ -88,6 +88,73 @@
             margin: auto;
         }
     }
+
+.clag () {
+    background: transparent;
+}
+
+
+    #newLag {
+        height: 20px;
+        width: 23px;
+        background: transparent;
+        display: inline-block;
+        padding: 3px;
+        margin: 3px;
+        vertical-align: top;
+        box-sizing: content-box;
+        span {
+            display: inline-block;
+            width: 4px;
+            margin: 0;
+            margin-right: 1px;
+            background: black;
+            vertical-align: bottom;
+            box-sizing: border-box;
+            border: 1px solid black;
+            transition: background 1s, border 1s;
+            &:last-child {
+                margin-right: 0;
+            }
+            &.bar1 { height: 5px; }
+            &.bar2 { height: 10px; }
+            &.bar3 { height: 15px; }
+            &.bar4 { height: 20px; }
+        }
+        &.lag0 {
+            span {
+                .clag();
+                border-color: red;
+            }
+        }
+        &.lag1 {
+            .bar2, .bar3, .bar4 { .clag(); }
+            span {
+                background-color: orange;
+                border-color: orange;
+            }
+        }
+        &.lag2 {
+            .bar3, .bar4 { .clag(); }
+            span {
+                background-color: orange;
+                border-color: orange;
+            }
+        }
+        &.lag3 {
+            .bar4 { .clag(); }
+            span {
+                background-color: green;
+                border-color: green;
+            }
+        }
+        &.lag4 {
+            span {
+                background-color: green;
+                border-color: green;
+            }
+        }
+    }
     div {
         white-space: normal;
         &.cryptpad-back {

customize.dist/toolbar.css

@@ -161,6 +161,74 @@
 .cryptpad-toolbar .cryptpad-lag div {
   margin: auto;
 }
+.cryptpad-toolbar #newLag {
+  height: 20px;
+  width: 23px;
+  background: transparent;
+  display: inline-block;
+  padding: 3px;
+  margin: 3px;
+  vertical-align: top;
+  box-sizing: content-box;
+}
+.cryptpad-toolbar #newLag span {
+  display: inline-block;
+  width: 4px;
+  margin: 0;
+  margin-right: 1px;
+  background: black;
+  vertical-align: bottom;
+  box-sizing: border-box;
+  border: 1px solid black;
+  transition: background 1s, border 1s;
+}
+.cryptpad-toolbar #newLag span:last-child {
+  margin-right: 0;
+}
+.cryptpad-toolbar #newLag span.bar1 {
+  height: 5px;
+}
+.cryptpad-toolbar #newLag span.bar2 {
+  height: 10px;
+}
+.cryptpad-toolbar #newLag span.bar3 {
+  height: 15px;
+}
+.cryptpad-toolbar #newLag span.bar4 {
+  height: 20px;
+}
+.cryptpad-toolbar #newLag.lag0 span {
+  background: transparent;
+  border-color: red;
+}
+.cryptpad-toolbar #newLag.lag1 .bar2,
+.cryptpad-toolbar #newLag.lag1 .bar3,
+.cryptpad-toolbar #newLag.lag1 .bar4 {
+  background: transparent;
+}
+.cryptpad-toolbar #newLag.lag1 span {
+  background-color: orange;
+  border-color: orange;
+}
+.cryptpad-toolbar #newLag.lag2 .bar3,
+.cryptpad-toolbar #newLag.lag2 .bar4 {
+  background: transparent;
+}
+.cryptpad-toolbar #newLag.lag2 span {
+  background-color: orange;
+  border-color: orange;
+}
+.cryptpad-toolbar #newLag.lag3 .bar4 {
+  background: transparent;
+}
+.cryptpad-toolbar #newLag.lag3 span {
+  background-color: green;
+  border-color: green;
+}
+.cryptpad-toolbar #newLag.lag4 span {
+  background-color: green;
+  border-color: green;
+}
 .cryptpad-toolbar div {
   white-space: normal;
 }

www/common/toolbar.js

@@ -342,7 +342,12 @@ define([
             'class': LAG_ELEM_CLS,
             id: uid(),
         });
-        return $lag[0];
+        var $a = $('<span>', {id: 'newLag'});
+        $s1 = $('<span>', {'class': 'bar1'}).appendTo($a);
+        $s2 = $('<span>', {'class': 'bar2'}).appendTo($a);
+        $s3 = $('<span>', {'class': 'bar3'}).appendTo($a);
+        $s4 = $('<span>', {'class': 'bar4'}).appendTo($a);
+        return $a[0];
     };
 
     var checkLag = function (getLag, lagElement) {
@@ -354,29 +359,35 @@ define([
             'class': 'lag'
         });
         var title;
+        var $lag = $(lagElement);
+        $lag.attr('class', '');
         if (lag) {
-            lagErrors = 0;
             firstConnection = false;
             title = Messages.lag + ' : ' + lag + ' ms\n';
-            if (lag && lag.waiting || lag > 1000) {
-                lagLight.addClass('lag-orange');
+            if (lag > 30000) {
+                $lag.addClass('lag0');
+                title = Messages.redLight;
+            } else if (lag > 5000) {
+                $lag.addClass('lag1');
+                title += Messages.orangeLight;
+            } else if (lag > 1000) {
+                $lag.addClass('lag2');
                 title += Messages.orangeLight;
+            } else if (lag > 300) {
+                $lag.addClass('lag3');
+                title += Messages.greenLight;
             } else {
-                lagLight.addClass('lag-green');
+                $lag.addClass('lag4');
                 title += Messages.greenLight;
             }
         }
         else if (!firstConnection) {
             // Display the red light at the 2nd failed attemp to get the lag
-            //if (lagErrors > 1) {
-                lagLight.addClass('lag-red');
-                title = Messages.redLight;
-            //}
+            lagLight.addClass('lag-red');
+            title = Messages.redLight;
         }
         if (title) {
-            lagLight.attr('title', title);
-            $(lagElement).html('');
-            $(lagElement).append(lagLight);
+            $lag.attr('title', title);
         }
     };