[GOM] Warn when the roll is running behind

Tools/GardeningServer/scripts/ui.js

 /*
  * Copyright (C) 2011 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  * 1. Redistributions of source code must retain the above copyright
  *    notice, this list of conditions and the following disclaimer.
  * 2. Redistributions in binary form must reproduce the above copyright
  *    notice, this list of conditions and the following disclaimer in the
@@ skipping 333 matching lines @@
             $(this).removeClass('processing');
     },
     newId: function() {
         var id = 'status-content-' + ++this._currentId;
         this._unfinishedIds[id] = 1;
         return id;
     }
 });
 
 ui.revisionDetails = base.extends('span', {
-    updateUIIfDone: function() {
+    // We only support 2 levels of visual escalation levels: warning and critical.
+    warnRollRevisionSpanThreshold: 45,
+    criticalRollRevisionSpanThreshold: 70,
+    styleForUrgencyLevel: function(rollRevisionSpan) {
+        if (rollRevisionSpan < this.criticalRollRevisionSpanThreshold)
+            return { backgroundColor: "orange", fontSize: "2em" };
+        return { backgroundColor: "red", fontSize: "3em" };

[ojan, 2014/06/04 19:58:40]

Nit: can we use the buildbot colors for consistency?

#ffc343 for orange
#e98080 for red

Can we make it blink too? Just for fun. :)

Also, can we use classNames and rules in style-sheets for this instead?

[Julien - ping for review, 2014/06/05 23:20:53]

Good idea!
I was going to agree as it's fun but then I thought about it: we are trying to
_improve_ the usability of the tool. There is a reason why <blink> died and
that's because it introduces a lot of visual distraction. What we want is just
visual contrast and that's what we have with the existing change.
Good idea!

+    },
+    updateUIIfDone: function(totRevision) {
         if (this.roll === undefined || this.lastRolledRevision === undefined)
             return;
 
         this.appendChild(document.createElement("br"));
         this.appendChild(document.createTextNode('Last roll is to '));
         this.appendChild(ui.createLinkNode(trac.changesetURL(this.lastRolledRevision), this.lastRolledRevision));
+        var rollRevisionSpan = totRevision - this.lastRolledRevision;
+        // Don't clutter the UI if we haven't run behind.
+        if (rollRevisionSpan > this.warnRollRevisionSpanThreshold) {
+            var wrapper = document.createElement("b");
+            wrapper.style.color = "white";
+            var wrapperStyle = this.styleForUrgencyLevel(rollRevisionSpan);
+            wrapper.style.backgroundColor = wrapperStyle.backgroundColor;
+            wrapper.style.fontSize = wrapperStyle.fontSize;

[ojan, 2014/06/04 19:58:40]

Ditto on the using stylesheets thing.

[Julien - ping for review, 2014/06/05 23:20:53]

Done.

+            wrapper.appendChild(document.createTextNode("(" + rollRevisionSpan + " revisions behind)"));
+            this.appendChild(wrapper);
+        }
         this.appendChild(document.createTextNode(', current autoroll '));
         if (this.roll) {
             var linkText = "" + this.roll.fromRevision + ":" + this.roll.toRevision;
             this.appendChild(ui.createLinkNode(this.roll.url, linkText));
             if (this.roll.isStopped)
                 this.appendChild(document.createTextNode(' (STOPPED) '));
         } else {
             this.appendChild(document.createTextNode(' None'));
         }
     },
@@ skipping 48 matching lines @@
                 $(revisionsPopUp).removeClass("active");
             }
         });
 
         var totRevision = model.latestRevision();
         theSpan.appendChild(document.createTextNode(', trunk is at '));
         theSpan.appendChild(ui.createLinkNode(trac.changesetURL(totRevision), totRevision));
 
         checkout.lastBlinkRollRevision().then(function(revision) {
             theSpan.lastRolledRevision = revision;
-            theSpan.updateUIIfDone();
+            theSpan.updateUIIfDone(totRevision);
         }, function() {});
 
         rollbot.fetchCurrentRoll().then(function(roll) {
             theSpan.roll = roll;
-            theSpan.updateUIIfDone();
+            theSpan.updateUIIfDone(totRevision);
         });
     }
 });
 
 })();