OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <!-- much of this is stolen from omahaproxy.appspot.com/viewer --> |
| 3 <html> |
| 4 <head> |
| 5 <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"> |
| 6 </head> |
| 7 <style type="text/css" media="screen"> |
| 8 body { |
| 9 font-family: monospace; |
| 10 font-size: 10pt; |
| 11 } |
| 12 |
| 13 table { |
| 14 border-collapse: collapse; |
| 15 border-color: rgb(100, 100, 100); |
| 16 border-style: solid; |
| 17 border-width: 1px 0px 1px 0px; |
| 18 } |
| 19 |
| 20 table td { |
| 21 padding: 3px; |
| 22 border-color: rgb(100, 100, 100); |
| 23 border-style: solid; |
| 24 border-width: 0px 1px 0px 1px; |
| 25 } |
| 26 |
| 27 thead { |
| 28 background-color: lightblue; |
| 29 font-weight: bold; |
| 30 border-style: solid; |
| 31 border-color: rgb(100, 100, 100); |
| 32 border-width: 0px 0px 2px 0px; |
| 33 } |
| 34 |
| 35 tbody tr:nth-child(odd) { |
| 36 background-color: rgb(230, 230, 230); |
| 37 } |
| 38 |
| 39 tbody tr:hover { |
| 40 background-color: orange; |
| 41 } |
| 42 </style> |
| 43 <body> |
| 44 <table> |
| 45 <thead id="columns"> |
| 46 </thead> |
| 47 <tbody id="rows"> |
| 48 </tbody> |
| 49 </table> |
| 50 <script type="application/javascript"> |
| 51 function loadJson(url, callback) { |
| 52 var xhr = new XMLHttpRequest(); |
| 53 xhr.open('GET', url, true); |
| 54 xhr.onreadystatechange = function (e) { |
| 55 if (xhr.readyState == 4) { |
| 56 if (xhr.status == 200) { |
| 57 callback(JSON.parse(xhr.responseText)); |
| 58 } else { |
| 59 alert("Failed to load: error " + xhr.status); |
| 60 } |
| 61 } |
| 62 } |
| 63 xhr.send(null); |
| 64 } |
| 65 |
| 66 function removeAllChildren(elm) { |
| 67 while (elm.childNodes.length) { |
| 68 elm.removeChild(elm.firstChild); |
| 69 } |
| 70 } |
| 71 |
| 72 function display(data) { |
| 73 data = data.bundles; |
| 74 |
| 75 var columnsElm = document.getElementById('columns'); |
| 76 var rowsElm = document.getElementById('rows'); |
| 77 removeAllChildren(columnsElm); |
| 78 removeAllChildren(rowsElm); |
| 79 |
| 80 // Create the column headers. |
| 81 var tr = document.createElement('tr'); |
| 82 var columns = ['name', 'version', 'revision']; |
| 83 for (var i = 0; i < columns.length; ++i) { |
| 84 var td = document.createElement('td'); |
| 85 var text = document.createTextNode(columns[i]); |
| 86 td.appendChild(text); |
| 87 tr.appendChild(td); |
| 88 } |
| 89 columnsElm.appendChild(tr); |
| 90 |
| 91 for (var i = 0; i < data.length; ++i) { |
| 92 var tr = document.createElement('tr'); |
| 93 for (var j = 0; j < columns.length; ++j) { |
| 94 var td = document.createElement('td'); |
| 95 var text = document.createTextNode(data[i][columns[j]]); |
| 96 td.appendChild(text); |
| 97 tr.appendChild(td); |
| 98 } |
| 99 rowsElm.appendChild(tr); |
| 100 } |
| 101 } |
| 102 |
| 103 loadJson('naclsdk_manifest2.json', display); |
| 104 </script> |
| 105 </body> |
| 106 </html> |
OLD | NEW |