Add examples for showing how to use systemInfo API.

chrome/common/extensions/docs/examples/api/systemInfo/main.js

Index: chrome/common/extensions/docs/examples/api/systemInfo/main.js
diff --git a/chrome/common/extensions/docs/examples/api/systemInfo/main.js b/chrome/common/extensions/docs/examples/api/systemInfo/main.js
new file mode 100644
index 0000000000000000000000000000000000000000..8225b2a024797bfd1e9cb13f532b000eb92bba6c
--- /dev/null
+++ b/chrome/common/extensions/docs/examples/api/systemInfo/main.js
@@ -0,0 +1,62 @@
+// Copyright (c) 2012 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+var systemInfo = chrome.experimental.systemInfo;
+
+var indicator = {}
+var isStarted = false;
+
+function onStorageChanged(info) {
+  var elem = document.getElementById(info.id);
+  if (indicator[info.id]++ % 2)
+    elem.bgColor = "green";
+  else
+    elem.bgColor = "white";
+  elem.innerHTML = info.availableCapacity;
+}
+
+function startMonitor() {
+  if (isStarted) return;
+  systemInfo.storage.onAvailableCapacityChanged.addListener(onStorageChanged);
+  isStarted = true;
+}
+
+function stopMonitor() {
+  if (!isStarted) return;
+  systemInfo.storage.onAvailableCapacityChanged.removeListener(
+      onStorageChanged);
+  isStarted = false;
+}
+
+function init() {
+  document.getElementById("start-btn").onclick = startMonitor;
+  document.getElementById("stop-btn").onclick = stopMonitor;
+
+  chrome.experimental.systemInfo.storage.get(function(info) {
+    var table = "<table width=65% border=\"1\">\n" +
+      "<tr><td><b>ID</b></td>" +
+      "<td>Type</td>" +
+      "<td>Capacity (bytes)</td>" +
+      "<td>Available (bytes)</td>" +
+      "</tr>\n";
+    for (var i = 0; i < info.units.length; i++) {
+      indicator[info.units[i].id] = 0;
+      table += showStorageInfo(info.units[i]);
+    }
+    table += "</table>\n";
+    var div = document.getElementById("storage-list");
+    div.innerHTML = table;
+  });
+}
+
+function showStorageInfo(unit) {
+  table = "<tr><td>" + unit.id + "</td>" +
+    "<td>" + unit.type + "</td>" +
+    "<td>" + unit.capacity + "</td>" +
+    "<td id=" + "\"" + unit.id + "\">" + unit.availableCapacity + "</td>" +
+    "</tr>\n";
+  return table;
+}
+
+document.addEventListener('DOMContentLoaded', init);