chrome-ui://extensions/ is now populated with data collected from the ExtensionsService and ExtensionErrorReporter

Review URL: http://codereview.chromium.org/39026

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@11233 0039d316-1c4b-4281-b951-d872f2087c98

1 files changed, 192 insertions, 55 deletions

diff --git a/chrome/browser/resources/extensions.html b/chrome/browser/resources/extensions.html
index 2428e14..e719f91 100644
--- a/chrome/browser/resources/extensions.html
+++ b/chrome/browser/resources/extensions.html
@@ -4,43 +4,53 @@
 <meta charset="utf-8">
 <title jscontent="title"></title>
 <script type="text/javascript">
-
-// TODO(rafaelw): Remove. This is stub data. The idea is that the C++ will 
-// populate a similar json structure and hand it to this page with real data 
-// from the extensions system
-var testExtensionData = [
-  {
-    "name": "Dummy Extension",
-    "description": "Does some extremely cool stuff that I won't ever bother " +
-                   "explaining, because it's just that cool.",
-    "version": "1.0.231",
-    "content_scripts": [
-      {
-        "js": ["file1.js", "file2.js"],
-        "matches": ["http://*/*", "http://other.com/*"]
-      },
-      {
-        "js": ["file1.js", "file2.js"],
-        "matches": ["http://*/*", "http://other.com/*"]
-      },
-      {
-        "js": ["file1.js", "file2.js"],
-        "matches": ["http://*/*", "http://other.com/*"]
-      },	
-    ],
-  },	
-  {
-    "name": "PlaceHolder Extension",
-    "description": "",
-    "version": "1.0.231",
-    "content_scripts": [],
-  }
-];
+/**
+ * This variable structure is here to document the structure that the template
+ * expects to correctly populate the page. 
+ */
+var extensionDataFormat = {
+  "extensions": [
+    {
+      "name": "Extension Name",
+      "description": "Extension long format description",
+      "version": "1.0.231",
+      "content_scripts": [
+        {
+          "js": ["script1_file1.js", "script1_file2.js"],
+          "matches": ["http://*/*", "http://other.com/*"]
+        },
+        {
+          "js": ["script2_file1.js", "script2_file2.js"],
+          "matches": ["http://*/*", "http://other.com/*"]
+        }
+      ]
+    },
+    {
+      "name": "Extension Name",
+      "description": "Extension long format description",
+      "version": "1.0.231",
+      "content_scripts": [
+        {
+          "js": ["script1_file1.js", "script1_file2.js"],
+          "matches": ["http://*/*", "http://other.com/*"]
+        },
+        {
+          "js": ["script2_file1.js", "script2_file2.js"],
+          "matches": ["http://*/*", "http://other.com/*"]
+        }
+      ]
+    }
+  ],
+  "errors": [
+    "something failed to happen",
+    "something else failed to happen"
+  ]
+};
 
 /**
  * Takes the |extensionsData| input argument which represents data about the 
  * currently installed/running extensions and populates the html jstemplate with
- * that data
+ * that data. It expects an object structure like the above.
  * @param {Object} extensionsData Detailed info about installed extensions
  */
 function showExtensionsData(extensionsData) {
@@ -49,37 +59,164 @@ function showExtensionsData(extensionsData) {
   var output = document.getElementById('extensionTemplate');
   jstProcess(input, output);
 }
+
+/*
+ * Asks the C++ ExtensionDOMHandler to inspect the installed extensions and 
+ * return detailed data about the configuration. The ExtensionDOMHandler
+ * should reply to returnExtensionsData() (below).
+ */
+function requestExtensionsData() {
+  chrome.send("requestExtensionsData", []);
+}
+function returnExtensionsData(extensionsData) {
+  showExtensionsData(extensionsData);
+  
+  // We are currently hiding the body because the first call to jstProcess() to 
+  // insert localized strings happens prior to this call which runs during the 
+  // body.onload event, causes a flickering.
+  document.getElementById('body-container').style.display = "inline";
+}
 </script>
 <style type="text/css">
-h1 {
+body {
+  background-color: Window;
+  color: WindowText;
+  font: message-box;
+}
+
+div#outside {
+ margin-left: 5%;
+ margin-right: 5%;
+ text-align: justify;
+ width: 90%;
+}
+
+div#installed-extensions {
+  font-size: xx-large;
+  font-weight: bold;
+  text-align: center;
+}
+
+div.extension-name {
+  font-size: large;
+  font-weight: bold;
+  margin-top: 2em;
+  margin-bottom: 1em;
+  text-align: left;
+}
+
+dl {
+  margin: 0px 0px 3px 0px;
+}
+
+table {
+  background-color: Window;
+  border: 1px solid ThreeDShadow;
+  border-spacing: 0px;
+  color: WindowText;
+  font: message-box;
+  margin-bottom: 20px;
+  text-align: left;
+  width: 100%;
+}
+
+th {
+  background-color: Highlight;
+  color: HighlightText;
   text-align: center;
 }
-.extension{
-  padding: 8px;
+
+th + th,
+td + td {
+  border-left: 1px dotted ThreeDShadow; 
+}
+
+td {
+  border-top: 1px dotted ThreeDShadow;
+  text-align: left;
+}
+
+th, td {
+  padding: 3px;
+}
+
+th.type, th.suff {
+  width: 20%;
+}
+
+th.desc {
+  width: 50%;
+}
+
+th.enabled {
+  width: 10%;
+}
+
+#error-box {
+  background-color:#D8D8D8; 
+  margin-top: 8px;
+  padding: 8px; 
+  width: 100%; 
+}
+#error-log {
+  color: #B00000;
+  font-weight: bold; 
 }
-.scriptMatches {
-  padding: 4px;
-  font-size: 12px;
+.error {
+  font-style:italic;
 }
 </style>
 </head>
-<body onload="showExtensionsData(testExtensionData);">
-  <h1>Installed Extensions</h1>
-  <div id="extensionTemplate">
-    <div class="extension" jsselect="$this">
-      <div jscontent="name">Extension Name</div>
-      <div jscontent="description">Extension Description</div>
-      <div>Version: <span jscontent="version">x.x.x.x</span></div>
-      <div class="scriptMatches" jsselect="content_scripts"> 
-        <div>
-          <span jsselect="js" 
-              jscontent="(($index > 0) ? ' ' : '') + $this">
-          </span>
+<body onload="requestExtensionsData();">
+  <div id="body-container" style="display:none;">
+    <div id="outside">
+      <div id="installed-extensions">Installed Extensions</div>
+      <div id="extensionTemplate">
+        
+        <div id="error-box" jsdisplay="errors.length > 0">
+          <div id="error-log">Errors</div>
+          <div class="error" jsselect="errors" jscontent="$this">
+              Error Detail</div>
         </div>
-        <div>
-          <span jsselect="matches" 
-              jscontent="(($index > 0) ? ' ' : '') + $this">
-          </span>
+        
+        <div class="extension-name" jsdisplay="extensions.length === 0">
+            No Extensions Installed</div>
+        
+        <div jsdisplay="extensions.length > 0">
+          <div class="extension" jsselect="extensions">
+            <div class="extension-name" jscontent="name">
+                sExtension Name</div>
+            <dl>
+              <dd>
+                <span jscontent="description">Extension Description</span>
+              </dd>
+              <dd>Version: <span jscontent="version">x.x.x.x</span></dd>
+            </dl>
+            
+            <table jsselect="content_scripts">
+              <thead>
+                <tr><th colspan="2">Content Script</th></tr>
+              </thead>
+              <tbody>
+                <tr> 
+                  <td>JavaScript Files</td>
+                  <td>
+                    <span jsselect="js" 
+                        jscontent="(($index > 0) ? ', ' : '') + $this">
+                    </span>
+                  </td>
+                </tr>
+                <tr> 
+                  <td>URL Match Patterns</td>
+                  <td>
+                    <span jsselect="matches" 
+                        jscontent="(($index > 0) ? ', ' : '') + $this">
+                    </span>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
         </div>
       </div>
     </div>