Modified components ui to address concern of all the time disabled check update button.

chrome/browser/resources/components.js

Index: chrome/browser/resources/components.js
diff --git a/chrome/browser/resources/components.js b/chrome/browser/resources/components.js
index 8753e3192ab210b51c8f2d1ea813a50ca67c33bd..4185feadd99cec0044b6c282b2da2e91becb0762 100644
--- a/chrome/browser/resources/components.js
+++ b/chrome/browser/resources/components.js
@@ -14,8 +14,11 @@
 function renderTemplate(componentsData) {
   // This is the javascript code that processes the template:
   var input = new JsEvalContext(componentsData);
-  var output = $('componentTemplate');
+  var output = $('component-template').cloneNode(true);
+  $('component-placeholder').innerHTML = '';
+  $('component-placeholder').appendChild(output);
   jstProcess(input, output);
+  output.removeAttribute('hidden');
 }
 
 /**
@@ -73,18 +76,61 @@ function returnComponentsData(componentsData) {
 }
 
 /**
+ * This is a fallback function, which handles the case when

[Sorin Jianu, 2014/04/28 22:46:11]

Do we have to do have the fallback function at all and do the timeout tricks?

+ * component updater service doesn't fire onComponentEvent in response
+ * to checkUpdate.
+ * @param {HTMLElement} node The HTML element representing the component.
+ */
+function updateComponentStatus(node) {
+  if (node.disabled) {
+    // If component button is still disabled, we
+    // report status as timeout and re-enable button.
+    $('status-' + node.id).textContent = 'timeout';
+    node.disabled = false;
+  }
+}
+
+var timeoutMonitor = new Object();
+
+/**
+ * This event function is called from component ui indicating changed state
+ * of component updater service.
+ * @param {Object} eventArgs Contains event and component id. Component id is
+ * optional.
+ */
+function onComponentEvent(eventArgs) {
+  if (eventArgs['id']) {
+    var id = eventArgs['id'];
+    $('status-' + id).textContent = eventArgs['event'];
+
+    if (eventArgs['event'] != 'UpdateFound' &&
+        eventArgs['event'] != 'UpdateReady') {
+      $(id).disabled = false;
+      timeoutMonitor[id] && clearTimeout(timeoutMonitor[id]);
+    }
+  }
+}
+
+// 5 second refresh interval.
+var STATUS_REFRESH_INTERVAL = 5000;
+
+/**
  * Handles an 'enable' or 'disable' button getting clicked.
  * @param {HTMLElement} node The HTML element representing the component
  *     being checked for update.
  */
 function handleCheckUpdate(node) {
   node.disabled = true;
+
+  $('status-' + String(node.id)).textContent = 'Checking for update...';
+
   // Tell the C++ ComponentssDOMHandler to check for update.
   chrome.send('checkUpdate', [String(node.id)]);
+
+  timeoutMonitor[node.id] = window.setTimeout(
+                            function() { updateComponentStatus(node); },
+                            STATUS_REFRESH_INTERVAL);
 }
 
 // Get data and have it displayed upon loading.
 document.addEventListener('DOMContentLoaded', requestComponentsData);
-
-// Add handlers to static HTML elements.
-$('button-check-update').onclick = handleCheckUpdate;