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
+ * component updater service doesn't fire onComponentEvent in response

[Sorin Jianu, 2014/05/08 22:07:24]

I've been thinking about this case. Indeed, we don't guarantee that a
notification is fired every time checkUpdate is called.

First, do we have to disable the button? The code in the component updater
handles successive calls correctly. Related to this, there is currently a period
of cooldown for calling on demand, which will interfere with the operation of
this page. It only allows one call every 30 mins for each component. I am open
to refactor the code so that the page has unrestricted access for OnDemand.
Please double check  this with Carlos and I will make the change.

Second, we could add more notifications for state transitions in
CrxUpdateService::ChangeItemState so that we also get events when the component
goes to kChecking, kDownloading, kDownloadingDiff. Nice to have, I will add
these events as well.

In summary, we should try to not disable the button but make the underlying code
work.

[Shrikant Kelkar, 2014/05/15 23:12:43]

Done.

+ * 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;