Make the analysis page more useful
[WebKit-https.git] / Websites / webkit.org / misc / DatabaseTester.html
1 <html>
2 <head>
3 <title>Database Tester</title>
4 <style>
5 div.Experiment { border: 1px solid black; 
6                  padding: 1 1 1 1; }
7 </style>
8 <script>
9
10 var junkDB;
11
12 openJunkDatabase();
13
14 function openJunkDatabase()
15 {
16     if (!window.openDatabase)
17         return;
18         
19     try {
20         junkDB = openDatabase("JunkDataTest", "1.0", "Repository for junk data to test quota management", 1);
21     } catch(err) { alert("Failed to open database - " + err); }
22     
23     junkDB.transaction(function(tx) {
24         tx.executeSql("SELECT COUNT(*) FROM JunkDataTable", [], null, function(tx, error) {
25             tx.executeSql("CREATE TABLE JunkDataTable (data TEXT)", []);
26         });
27     }, function(err) {
28         alert("Error - " + err.code);
29     });
30     
31     return junkDB;
32 }
33
34 var totalAdded = 0;
35
36 function addData()
37 {
38     if (!junkDB && !openJunkDatabase())
39         return;
40         
41     var length = Number(dataSizeElement().value);
42     var data = makeStringOfLength(length);
43     
44     junkDB.transaction(function(tx) {
45         tx.executeSql("INSERT INTO JunkDataTable (data) VALUES (?)", [data], function(tx, result) {
46             totalAdded += length;
47             updateTotal();
48         }, function(tx, err) {
49             alert("Failed to insert data into database - (" + err.code + ") " + err.message);
50         });
51     }, function(err) {
52         alert("Failed to open transaction with junk database - (" + err.code + ") " + err.message);
53     });
54 }
55
56 function makeStringOfLength(n)
57 {
58     var str = "X";
59     while (str.length < n)
60         str += ((str.length << 1) < n ? str : makeStringOfLength(n - str.length));
61
62     return str;
63 }
64
65 var _dataSizeElement;
66 function dataSizeElement()
67 {
68     if (!_dataSizeElement)
69         _dataSizeElement = document.getElementById("DataSize");
70     
71     return _dataSizeElement;
72 }
73
74 function updateDataSize()
75 {
76     var num = Number(dataSizeElement().value);
77     document.getElementById("DataSizeDisplay").value = "Data size: " + num; 
78 }
79
80 function updateTotal()
81 {
82     document.getElementById("TotalAdded").innerHTML = "Total characters added: " + totalAdded;
83 }
84
85 </script>
86 </head>
87 <body>
88 <p>This page is a dumping ground for various tests and features for the HTML5 client side database storage spec.</p>
89 <p>Any manual tests or experiments needing for development of the storage API can be placed here so they are accessible on a live web page</p>
90
91 <div class="Experiment">
92 <input id="DataSize" type="range" min="0" max="1048576" step="1024" value="1024" oninput="updateDataSize();"><br>
93 <textarea id="DataSizeDisplay" rows="1" cols="15" readonly style="resize:none"></textarea><br>
94 <textarea id="TotalAdded" rows="1" cols="25" readonly style="resize:none">Total characters added: 0</textarea><br>
95 <script>updateDataSize();</script>
96 <button onclick="addData();">Add Data</button>
97 </div>
98 </body>
99 </html>