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..00ad355a250fef922bbaac6bdf5414a6a41d5b97 100644
--- a/chrome/browser/resources/components.html
+++ b/chrome/browser/resources/components.html
@@ -13,57 +13,57 @@
 <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>
 
     <div id="container" class="vbox-container">
     <div id="top" class="wbox">
 
       <div class="section-header">
-        <table><tr>
-          <td>
-            <span class="section-header-title" i18n-content="componentsTitle"
-              >TITLE</span>
-            <span class="section-header-title"
-                  jsdisplay="components.length > 0">(<span
-                  jscontent="components.length"></span>)</span>
-          </td>
-        </tr></table>
+        <span class="section-header-title" i18n-content="componentsTitle">
+        </span>
+        <span class="section-header-title"
+              jsdisplay="components.length > 0">(<span
+              jscontent="components.length"></span>)</span>
       </div>
 
     </div>
     </div>
 
     <div class="content">
-      <div class="component-name no-components" jsdisplay="components.length === 0">
-        <div i18n-content="noComponents">NO_COMPONENTS_ARE_INSTALLED</div>
+      <div class="component-name no-components"
+           jsdisplay="components.length === 0">
+        <div i18n-content="noComponents"></div>
       </div>
 
       <div jsdisplay="components.length > 0">
         <div class="component"
              jsselect="components">
-          <table>
-          <tr class='component-enabled'>
-          <td>
+          <div class='component-enabled'>
             <div class="component-text">
               <div>
                 <span class="component-name" dir="ltr"
-                      jscontent="name">NAME</span>
+                    jscontent="name">
+                </span>
                 <span>
-                  - <span i18n-content="componentVersion">VERSION</span>
-                    <span dir="ltr" jscontent="version">x.x.x.x</span>
+                  - <span i18n-content="componentVersion"></span>
+                    <span dir="ltr" jscontent="version"></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>
-          </td>
-          </tr>
-          </table>
+          </div>
+          <div class="component-text">
+            <span i18n-content="statusLabel"></span>
+            -
+            <span dir="ltr"

[James Hawkins, 2014/05/29 16:22:23]

Because the text in this span is localized (we pull translations from
generated_resources), this needs to be RTL compatible, so we need to remove the
dir="ltr".

[Shrikant Kelkar, 2014/05/29 17:35:10]

Done.

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