Continuously update status in the buildbot extension popup window

chrome/common/extensions/docs/examples/extensions/buildbot/popup.js

Index: chrome/common/extensions/docs/examples/extensions/buildbot/popup.js
diff --git a/chrome/common/extensions/docs/examples/extensions/buildbot/popup.js b/chrome/common/extensions/docs/examples/extensions/buildbot/popup.js
index 1c578dfdf10a2effcc024b03d1356bb7e51f8fa1..c7376f9daca4a5b1004d70fefa172bd55b95cfbc 100644
--- a/chrome/common/extensions/docs/examples/extensions/buildbot/popup.js
+++ b/chrome/common/extensions/docs/examples/extensions/buildbot/popup.js
@@ -2,8 +2,15 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+(function(){
+
 var lkgrURL = 'http://chromium-status.appspot.com/lkgr';
 
+// Interval at which to reload the non-CL bot status.
+var botStatusRefreshIntervalInMs = 60 * 1000;
+// Interval at which to check for LKGR updates.
+var lkgrRefreshIntervalInMs = 60 * 1000;
+
 function getClassForTryJobResult(result) {
   // Some win bots seem to report a null result while building.
   if (result === null)
@@ -135,49 +142,96 @@ function createPatchsetStatusElement(patchset) {
   return iframe;
 }
 
-function addTryStatusRows(table) {
-  var codereviewBaseURL = "https://codereview.chromium.org";
+function getLastFullPatchsetWithTryJobs(issue) {
+  var index = issue.patchsets.length - 1;
+  var full_patchsets = issue.full_patchsets;

[not at google - send to devlin, 2013/07/04 00:37:11]

fullPatchsets

[Mike Wittman, 2013/07/16 17:53:19]

Done.

+  while (index >= 0 &&
+         (!full_patchsets[issue.patchsets[index]] ||
+          !full_patchsets[issue.patchsets[index]].try_job_results ||
+          full_patchsets[issue.patchsets[index]].try_job_results.length == 0)) {
+    index--;
+  }
+
+  return index >= 0 ? full_patchsets[issue.patchsets[index]] : null;
+}
+
+function updateSpacerDisplay() {
+  var postCLRow = document.getElementsByClassName("post-cl-row")[0];
+
+  if (document.getElementsByClassName("hastryjobs").length > 0)
+    postCLRow.classList.add("status-pre-pad");
+  else
+    postCLRow.classList.remove("status-pre-pad");

[not at google - send to devlin, 2013/07/04 00:37:11]

if you added "closerBot" and "otherBot" classes to those rows (or similar) then
you could implement the spacer like

tr.closerBot + tr.otherBot td {
  padding-top: ...;
}

I think that would result in noticeably less code all around.

[Mike Wittman, 2013/07/16 17:53:19]

Done.

+}
 
-  var background = chrome.extension.getBackgroundPage();
+function createTryStatusRow(issue) {
+  var table = document.getElementById("status-table");
 
-  var issues = [];
-  for (var key in background.activeIssues)
-    issues.push(background.activeIssues[key]);
+  // Order by decreasing issue number.
+  var position = document.getElementsByClassName("post-cl-row")[0].rowIndex;
+  while (position > 0 &&
+         parseInt(issue.issue) >
+             parseInt(table.rows[position - 1].getAttribute("data-issue"))) {
+    position--;
+  }
 
-  // Sort issues in descending order.
-  issues.sort(function(a, b) {return parseInt(b.issue) - parseInt(a.issue);});
+  var row = table.insertRow(position);
+  row.id = "issue_" + issue.issue + "_row";
+  row.classList.add("issue");
+  row.setAttribute("data-issue", issue.issue);

[not at google - send to devlin, 2013/07/04 00:37:11]

I don't think you need all of these, just the data-issue is ok.

You can implement getElementsByClassname('issue') like

querySelectorAll('*[data-issue]')

and you can implement getElementById('issue_' + issue.issue) with

querySelector('*[data-issue=' + issue.issue + ']');

something along those lines anyway.

[Mike Wittman, 2013/07/16 17:53:19]

Done.

 
-  issues.forEach(function(issue) {
-    var codereviewURL = codereviewBaseURL + "/" + issue.issue;
+  return row;

[not at google - send to devlin, 2013/07/04 00:37:11]

all that said I think this would all be a lot simpler if you just re-rendered
the whole popup whenever there's an update. you could detect if you need to
first, but yeah, trying to implement this dynamically changing UI is really
complex. statusTable.innerHTML = '' ftw.

[Mike Wittman, 2013/07/16 17:53:19]

I tested rewriting the table and the redraw is visually very obvious and
distracting. With your suggested changes and a redo of the generation of the try
status, I think I've reduced the complexity substantially so the dynamically
updating UI is not too onerous.

+}
 
-    if (!issue.full_patchsets)
-      return;
+function updateIssueDisplay(issue) {
+  if (!issue.full_patchsets)
+    return;
 
-    var lastPatchset = issue.patchsets[issue.patchsets.length - 1];
-    var lastFullPatchset = issue.full_patchsets[lastPatchset];
+  var codereviewBaseURL = "https://codereview.chromium.org";
 
-    if (!lastFullPatchset.try_job_results ||
-        lastFullPatchset.try_job_results.length == 0)
-      return;
+  var row = document.getElementById("issue_" + issue.issue + "_row") ||
+    createTryStatusRow(issue);
 
-    var row = table.insertRow(-1);
-    var label = row.insertCell(-1);
-    label.className = "status-label";
-    var clAnchor = document.createElement("a");
-    clAnchor.textContent = "CL " + issue.issue;
-    clAnchor.href = codereviewURL;
-    clAnchor.title = issue.subject;
-    if (lastFullPatchset.message)
-      clAnchor.title += " | " + lastFullPatchset.message;
-    clAnchor.target = "_blank";
-    label.appendChild(clAnchor);
+  var lastFullPatchset = getLastFullPatchsetWithTryJobs(issue);
+  row.classList.add(lastFullPatchset ? "hastryjobs" : "notryjobs");
+  row.classList.remove(lastFullPatchset ? "notryjobs" : "hastryjobs");
 
-    var status = row.insertCell(-1);
-    status.appendChild(createPatchsetStatusElement(lastFullPatchset));
-  });
+  var label = row.childNodes[0] || row.insertCell(-1);
+  var status = row.childNodes[1] || row.insertCell(-1);
+
+  label.className = "status-label";
+  var clAnchor = label.childNodes[0] ||
+    label.appendChild(document.createElement("a"));
+  clAnchor.textContent = "CL " + issue.issue;
+  clAnchor.href = codereviewBaseURL + "/" + issue.issue;
+  clAnchor.title = issue.subject;
+  if (lastFullPatchset && lastFullPatchset.message)
+    clAnchor.title += " | " + lastFullPatchset.message;
+  clAnchor.target = "_blank";
+
+  if (lastFullPatchset) {
+    var statusElement = createPatchsetStatusElement(lastFullPatchset);
+    if (status.childElementCount < 1)
+      status.appendChild(statusElement);
+    else
+      status.replaceChild(statusElement, status.firstChild);
+  } else {
+    if (status.firstChild)
+      status.removeChild(status.firstChild);
+  }
 
-  if (issues.length > 0)
-    table.insertRow(-1).insertCell().className = "spacer";
+  updateSpacerDisplay();
+}
+
+function removeIssueDisplay(issueNumber) {
+  var row = document.getElementById("issue_" + issueNumber + "_row");
+  row.parentNode.removeChild(row);
+
+  updateSpacerDisplay();
+}
+
+function addTryStatusRows() {
+  getActiveIssues().forEach(updateIssueDisplay);
 }
 
 function updateLKGR(lkgr) {
@@ -185,7 +239,9 @@ function updateLKGR(lkgr) {
   link.textContent = 'LKGR (' + lkgr + ')';
 }
 
-function addBotStatusRow(table, bot) {
+function addBotStatusRow(bot) {
+  var table = document.getElementById("status-table");
+
   var baseURL = "http://build.chromium.org/p/chromium" +
     (bot.id != "" ? "." + bot.id : "");
   var consoleURL = baseURL + "/console";
@@ -204,13 +260,13 @@ function addBotStatusRow(table, bot) {
   var status = row.insertCell(-1);
   status.className = "botstatus";
   var statusIframe = document.createElement("iframe");
-  statusIframe.className = "statusiframe";
+  statusIframe.className = "statusiframe botstatusiframe";
   statusIframe.scrolling = "no";
   statusIframe.src = statusURL;
   status.appendChild(statusIframe);
 }
 
-function addBotStatusRows(table) {
+function addBotStatusRows() {
   var closerBots = [
     {id: "", label: "Chromium"},
     {id: "win", label: "Win"},
@@ -229,26 +285,55 @@ function addBotStatusRows(table) {
     {id: "gpu.fyi", label: "GPU FYI"}
   ];
 
-  closerBots.forEach(function(bot) {
-    addBotStatusRow(table, bot);
-  });
+  var table = document.getElementById("status-table");
+  var preSpacerIndices = [];
 
-  table.insertRow(-1).insertCell().className = "spacer";
+  preSpacerIndices.push(table.rows.length);
+  closerBots.forEach(addBotStatusRow);
 
-  otherBots.forEach(function(bot) {
-    addBotStatusRow(table, bot);
-  });
+  preSpacerIndices.push(table.rows.length);
+  otherBots.forEach(addBotStatusRow);
+
+  table.rows[preSpacerIndices[0]].classList.add("post-cl-row");
+  table.rows[preSpacerIndices[1]].classList.add("status-pre-pad");
 }
 
 function fillStatusTable() {
-  var table = document.getElementById("status-table");
-  addTryStatusRows(table);
-  addBotStatusRows(table);
+  addBotStatusRows();
+  addTryStatusRows();
 }
 
 function main() {
   requestURL(lkgrURL, "text", updateLKGR);
   fillStatusTable();
+
+  var port = getActiveIssues().connectEventsPort();
+  port.onMessage.addListener(function (request) {
+    switch (request.event) {
+    case "issueUpdated":
+    case "issueAdded":
+      updateIssueDisplay(getActiveIssues().getIssue(request.issue));
+      break;
+
+    case "issueRemoved":
+      removeIssueDisplay(request.issue);
+      break;
+    }
+  });
+
+  setInterval(function() {
+    requestURL(lkgrURL, "text", updateLKGR);
+  }, lkgrRefreshIntervalInMs);
+
+  setInterval(function() {
+    var botStatusElements = document.getElementsByClassName("botstatusiframe");
+    for (var i = 0; i < botStatusElements.length; i++)
+      // Force a reload of the iframe in a way that doesn't cause cross-domain
+      // policy violations.
+      botStatusElements.item(i).src = botStatusElements.item(i).src;
+  }, botStatusRefreshIntervalInMs);
 }
 
 main();
+
+})();