Re-subimission of https://codereview.chromium.org/1041213003/
[chromium-blink-merge.git] / content / browser / resources / indexed_db / indexeddb_internals.html
blob0beb5f3e5987eac3ad65ce2502b46e5bfa793183
1 <!doctype html>
2 <html i18n-values="dir:textdirection;lang:language">
3 <head>
4 <meta charset="utf-8">
5 <title>IndexedDB</title>
6 <link rel="stylesheet" href="chrome://resources/css/tabs.css">
7 <link rel="stylesheet" href="chrome://resources/css/widgets.css">
8 <link rel="stylesheet" href="indexeddb_internals.css">
9 </head>
10 <body i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize">
11 <!-- templates -->
12 <div style="display:none">
13 <div id="indexeddb-list-template"
14 jsvalues="$partition_path:$this.partition_path">
15 <div class="indexeddb-summary">
16 <span jsdisplay="$this.partition_path">
17 <span>Instances in: </span>
18 <span jscontent="$this.partition_path"></span>
19 </span>
20 <span jsdisplay="!$this.partition_path">
21 <span>Instances: Incognito </span>
22 </span>
23 <span jscontent="'(' + $this.idbs.length + ')'"></span>
24 </div>
25 <div class="indexeddb-item" jsselect="$this.idbs">
26 <a class="indexeddb-url" jscontent="url" jsvalues="href:url"
27 target="_blank"></a>
28 <div class="indexeddb-size">
29 <span>Size:</span>
30 <span jscontent="size"></span>
31 </div>
32 <div class="indexeddb-last-modified">
33 <span>Last modified:</span>
34 <span jscontent="new Date(last_modified)"></span>
35 </div>
36 <div>
37 <span>Open connections:</span>
38 <span class="connection-count"
39 jsvalues=".idb_origin_url:url;.idb_partition_path:$partition_path"
40 jscontent="connection_count">
41 </div>
42 <div class="indexeddb-paths">
43 <span>Paths:</span>
44 <span class="indexeddb-path" jscontent="$this" jsselect="$this.paths"></span>
45 </div>
46 <div class="controls">
47 <a href="#" class="force-close"
48 jsvalues=".idb_origin_url:url;.idb_partition_path:$partition_path">Force close</a>
49 <a href="#" class="download"
50 jsvalues=".idb_origin_url:url;.idb_partition_path:$partition_path">Download</a>
51 <span class="download-status" style="display: none">Loading...</span>
52 </div>
53 <div class="indexeddb-database" jsselect="$this.databases">
55 <span>Open database:</span>
56 <span jscontent="name"></span>
58 <div>
59 <span>Connections:</span>
61 <span class="indexeddb-connection-count"
62 jsdisplay="connection_count">
63 <span>open:</span>
64 <span jscontent="connection_count"></span>
65 </span>
67 <span class="indexeddb-connection-count pending"
68 jsdisplay="pending_opens">
69 <span>pending opens:</span>
70 <span jscontent="pending_opens"></span>
71 </span>
73 <span class="indexeddb-connection-count pending"
74 jsdisplay="pending_upgrades">
75 <span>pending upgrades:</span>
76 <span jscontent="pending_upgrades"></span>
77 </span>
79 <span class="indexeddb-connection-count pending"
80 jsdisplay="running_upgrades">
81 <span>running upgrades:</span>
82 <span jscontent="running_upgrades"></span>
83 </span>
85 <span class="indexeddb-connection-count pending"
86 jsdisplay="pending_deletes">
87 <span>pending deletes:</span>
88 <span jscontent="pending_deletes"></span>
89 </span>
91 </div>
92 <div jsdisplay="$this.transactions &amp;&amp;
93 $this.transactions.length">
94 <span>Transactions:</span>
96 <table class="indexeddb-transaction-list">
97 <tbody>
98 <tr>
99 <th title="Process ID of the tab or SharedWorker that created the transaction">
100 Process ID
101 </th>
102 <th title="Transaction ID (unique within Process)">
104 </th>
105 <th title="Type of transaction">
106 Mode
107 </th>
108 <th title="Names of object stores used by the transaction">
109 Scope
110 </th>
111 <th title="Number of requests that have been executed">
112 Completed Requests
113 </th>
114 <th title="Number of requests that have not yet been executed">
115 Pending Requests
116 </th>
117 <th title="Time since transaction creation">
118 Age (ms)
119 </th>
120 <th title="Time since transaction started">
121 Runtime (ms)
122 </th>
123 <th title="Status in the transaction queue">
124 Status
125 </th>
126 </tr>
127 <tr class="indexeddb-transaction"
128 jsselect="$this.transactions"
129 jseval="this.classList.add($this.status)">
131 <td class="indexeddb-transaction-pid"
132 jscontent="pid">
133 </td>
135 <td class="indexeddb-transaction-tid"
136 jscontent="tid">
137 </td>
139 <td class="indexeddb-transaction-mode"
140 jscontent="mode">
141 </td>
143 <td class="indexeddb-transaction-scope"
144 jscontent="'[ ' + scope.join(', ') + ' ]'">
145 </td>
147 <td class="indexeddb-transaction-requests-complete"
148 jscontent="tasks_completed">
149 </td>
151 <td class="indexeddb-transaction-requests-pending"
152 jscontent="tasks_scheduled - tasks_completed">
153 </td>
155 <td class="indexeddb-transaction-age"
156 jscontent="Math.round(age)">
157 </td>
159 <td class="indexeddb-transaction-age">
160 <span jsdisplay="status == 'started' || status == 'running' || status == 'committing'"
161 jscontent="Math.round(runtime)">
162 </span>
163 </td>
165 <td class="indexeddb-transaction-state"
166 jscontent="status">
167 </td>
168 </tr>
169 </tbody>
170 </table>
171 </div>
172 </div>
173 </div>
174 </div>
175 </div>
176 <h1>IndexedDB</h1>
177 <div class="content">
178 <div id="indexeddb-list">
179 </div>
180 <script src="chrome://resources/js/util.js"></script>
181 <script src="chrome://resources/js/cr.js"></script>
182 <script src="indexeddb_internals.js"></script>
183 <script src="chrome://resources/js/load_time_data.js"></script>
184 <script src="chrome://resources/js/jstemplate_compiled.js"></script>
185 <script src="strings.js"></script>
186 <script src="chrome://resources/js/i18n_template2.js"></script>
187 </body>
188 </html>