Add examples for showing how to use systemInfo API.

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

+// 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 is_started = false;

[Mihai Parparita -not on Chrome, 2012/08/27 23:47:21]

JavaScript naming conventions are to use camelCase.

[Hongbo Min, 2012/08/28 01:54:03]

Done.

+
+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 (is_started) return;
+  systemInfo.storage.onAvailableCapacityChanged.addListener(onStorageChanged);
+  is_started = true;
+}
+
+function stopMonitor() {
+  if (!is_started) return;
+  systemInfo.storage.onAvailableCapacityChanged.removeListener(
+      onStorageChanged);
+  is_started = 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);

[Mihai Parparita -not on Chrome, 2012/08/27 23:47:21]

Why make table a parameter, when you can just say table+=
getStorageInfoForUnit(unit)?

[Hongbo Min, 2012/08/28 01:54:03]

Done.

+    }
+    table += "</table>\n";
+    var div = document.getElementById("storage-list");
+    div.innerHTML = table;
+  });
+}
+
+function showStorageInfo(unit, table) {
+  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);