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

chrome/browser/resources/components.html

Index: chrome/browser/resources/components.html
diff --git a/chrome/browser/resources/components.html b/chrome/browser/resources/components.html
index b37425f7ed4f305a60a274c7923387ceca30aa4e..ac5bed142fd2126ab9ab888319c9bfe391070b07 100644
--- a/chrome/browser/resources/components.html
+++ b/chrome/browser/resources/components.html
@@ -13,8 +13,8 @@
 <div id="body-container" style="visibility:hidden">
 
   <div id="header"><h1 i18n-content="componentsTitle">TITLE</h1></div>
-
-  <div id="componentTemplate">
+  <div id="component-placeholder"></div>
+  <div id="component-template" hidden>

[James Hawkins, 2014/05/23 17:38:54]

Please pull this out into a JS class.

There are tons of examples in chrome/browser/resources, but a quick search for
me pulled up [1].

[1]
https://code.google.com/p/chromium/codesearch#chromium/src/chrome/browser/res...

[Shrikant Kelkar, 2014/05/28 19:29:22]

Wondering what are the pros/cons of moving this to JS class?

[James Hawkins, 2014/05/28 23:02:23]

Since this is actually just structure (for the most part) without accompanying
logic, I'm OK with leaving it as-is.  Though in the future this type of stuff
should be moved into a Web Component.

 
     <div id="container" class="vbox-container">
     <div id="top" class="wbox">
@@ -35,7 +35,8 @@
     </div>
 
     <div class="content">
-      <div class="component-name no-components" jsdisplay="components.length === 0">
+      <div class="component-name no-components"
+           jsdisplay="components.length === 0">
         <div i18n-content="noComponents">NO_COMPONENTS_ARE_INSTALLED</div>
       </div>
 
@@ -45,22 +46,43 @@
           <table>
           <tr class='component-enabled'>
           <td>
-            <div class="component-text">
-              <div>
-                <span class="component-name" dir="ltr"
-                      jscontent="name">NAME</span>
-                <span>
-                  - <span i18n-content="componentVersion">VERSION</span>
-                    <span dir="ltr" jscontent="version">x.x.x.x</span>
-                </span>
-              </div>
-              <div class="component-actions" guest-visibility="disabled">
-                <button class="button-check-update" jsvalues=".id:id"
-                        i18n-content="checkUpdate">
-                   CHECK_UPDATE
-                </button>
-              </div>
-            </div>
+            <table>

[James Hawkins, 2014/05/23 17:38:54]

This isn't tabular data, so you should not being use <table>.

[Shrikant Kelkar, 2014/05/28 19:29:22]

Done.

+              <tr>
+                <td>
+                  <div class="component-text">
+                    <div>
+                      <span class="component-name" dir="ltr"
+                          jscontent="name">
+                      </span>
+                      <span>
+                        - <span i18n-content="componentVersion"></span>
+                          <span dir="ltr" jscontent="version"></span>
+                      </span>
+                    </div>
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <div class="component-text">
+                    <span i18n-content="statusLabel"></span>
+                    -
+                    <span dir="ltr"
+                        jscontent="status" jsvalues=".id: 'status-' + id">

[James Hawkins, 2014/05/23 17:38:54]

It appears this value is not translated.  It is coming from
ComponentsUI::ServiceStatusToString.

[Shrikant Kelkar, 2014/05/28 19:29:22]

Done.

+                    <span>
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <div class="component-actions" guest-visibility="disabled">
+                    <button class="button-check-update"
+                        jsvalues=".id:id" i18n-content="checkUpdate">
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            </table>
           </td>
           </tr>
           </table>