-
Notifications
You must be signed in to change notification settings - Fork 35
/
Copy pathindex.html
205 lines (199 loc) · 10.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" ng-app="BrowserStorageAbuser"> <!--<![endif]-->
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>Browser Storage Abuser</title>
<meta name="description" content=""/>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="styles/united.css"/>
<link rel="stylesheet" href="styles/main.css"/>
<script type="text/ng-template" id="storage-table.html">
<div class="panel panel-default" ng-class="{hover:hover, loading:source.loading, unsupported:!source.supported}">
<div class="panel-heading row">
<h2 class="panel-title col-sm-6 left">{{data.name}}</h2>
<div class="col-sm-6 right">
<span class="size" ng-class="{filled:source.filled}" title="{{source.total}}bytes">Items: {{source.table.length}}, Total: {{source.total|size}}</span>
</div>
</div>
<div class="panel-body">
<details>
<summary>What is {{data.name}}?</summary>
<ul>
<li>{{data.desc}}</li>
<li><a ng-href="{{data.link}}" target="_blank">Read more</a></li>
</ul>
</details>
<div class="info right">
<div class="btn-group btn-group right">
<input type="file" multiple>
<button class="btn btn-default" ng-click="upload()">Upload File</button>
<button class="btn btn-warning" ng-click="open_fill_storage()">Fill Storage</button>
<button class="btn btn-danger" ng-click="delete_all()">Delete All</button>
</div>
</div>
<div class="table">
<table class="table table-condensed" style="background-color:inherit;" ng-show="source.table.length>0">
<thead>
<tr class="row">
<th class="col-sm-8">Name</th>
<th class="col-sm-2">Size</th>
<th class="col-sm-2">Last Update</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in source.table" class="row">
<td class="col-sm-8">{{item.name}}</td>
<td class="col-sm-2" title="{{item.size}}bytes">{{item.size|size}}</td>
<td class="col-sm-2">{{item.date|date:'yyyy/MM/dd HH:mm:ss'}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</script>
<script type="text/ng-template" id="storage-progress.html">
<div id="progress" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Progress</h3>
</div>
<div class="modal-body">
<div class="progress progress-striped active">
<div class="progress-bar" ng-style="{'width':value/max*100+'%'}"></div>
</div>
</div>
<div class="modal-footer"></div>
</div>
</div>
</div>
</script>
<script type="text/ng-template" id="fill-storage.html">
<div id="modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Fill Storage</h3>
</div>
<div class="modal-body form-horizontal row">
<div class="control-group col-sm-4">
<label class="control-label" for="chunk_size">Chunk Size:</label>
<div class="controls">
<select class="form-control" ng-model="chunk_size" ng-options="(selection|size) for selection in chunk_selections" required>
<option id="chunk_size" ng-repeat="selection in chunk_selections" ng-value="selection">{{selection|size}}</option>
</select>
</div>
</div>
<div class="control-group col-sm-4">
<label class="control-label" for="quantity">Quantity:</label>
<div class="controls">
<input type="number" id="quantity" class="form-control" ng-model="quantity" min="1" required>
</div>
</div>
<div class="control-group col-sm-4">
<label class="control-label">Total:</label>
<div class="controls">
<span>{{chunk_size * quantity | size}}</span>
</div>
</div>
</div>
<div class="modal-footer">
<input type="button" class="btn" data-dismiss="modal" value="Cancel"/>
<input type="button" class="btn btn-primary" value="Fill" ng-click="fill()" />
</div>
</div>
</div>
</div>
</script>
</head>
<body ng-controller="MainCtrl">
<!--[if lt IE 7]>
<p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
<![endif]-->
<!--[if lt IE 9]>
<script src="scripts/vendor/es5-shim.min.js"></script>
<script src="scripts/vendor/json3.min.js"></script>
<![endif]-->
<header class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<span class="navbar-brand">Browser Storage Abuser</span>
<button class="btn btn-primary navbar-btn pull-right" ng-click="update()">Reload</button>
</div>
</header>
<!-- Add your site or application content here -->
<div class="container quota">
<div class="page-header">
<br>
<br>
<p>Have you ever wondered what is the limit of your browser's storage? This tool is for you to abuse and experiment that!</p>
<p>I've done a bit of research using this tool to summarize all modern browser's storage size. The result of the research is available on <a href="http://www.html5rocks.com/tutorials/offline/quota-research/">HTML5Rocks</a>.</p>
<h2>How to use</h2>
<ol>
<li>Switch storage type under "Quota" between "Temporary" or "Persistent" if available (Chrome and Opera only).
<ul>
<li>Quota for "Temporary" is predefined depending on the remainig space of your disk.</li>
<li>You can assign arbitrary quota for "Persistent". Press "Request Quota" button after putting requested size.</li>
</ul>
</li>
<li>Choose from storage you wish to experiment with.</li>
<li>Press "Fill Storage".</li>
<li>Choose "Chunk Size" and "Quantity" and then press "Fill".</li>
</ol>
<p>If quota is over for that storage, alert will pop up. That is the upper limit of the storage.</p>
</div>
<div class="panel panel-default" ng-class="{unsupported: !source.supported}" quota-table>
<div class="panel-heading row">
<h2 class="panel-title col-sm-12">Quota</h2>
</div>
<div class="panel-body form-horizontal" ng-cloak>
<details>
<summary>What is Quota Management API?</summary>
<ul>
<li>Quota management API manages usage and availability of local storage resources, and defines a means by which a user agent may grant Web applications permission to use more local space, temporarily or persistently, via various storage APIs.</li>
<li><a href="http://updates.html5rocks.com/2011/11/Quota-Management-API-Fast-Facts" target="_blank">Read more</a></li>
</ul>
</details>
<div class="form-group info row">
<div class="col-sm-6">
<select class="form-control" ng-model="source.storage_type" ng-change="change_file_system()" ng-hide="!source.supported">
<option value="TEMPORARY">Temporary</option>
<option value="PERSISTENT">Persistent</option>
</select>
</div>
<div class="col-sm-6 form-inline">
<div class="progress">
<div class="progress-bar progress-bar-info" ng-style="{width:source.usage/source.quota*100+'%'}"></div>
</div>
<span class="size" title="{{source.usage}}bytes">{{source.usage|size}}</span> / <span ng-hide="source.storage_type=='PERSISTENT'">{{source.quota|size}}</span><span ng-hide="source.storage_type!='PERSISTENT'"><input type="number" ng-model="source.disp_quota">MB</span>
<button class="btn btn-xs btn-warning" ng-click="request_quota()" ng-hide="source.storage_type!='PERSISTENT'">Request Quota</button>
</div>
</div>
</div>
</div>
<storage-table ng-repeat="data in storages"></storage-table>
<fill-storage></fill-storage>
<storage-progress></storage-progress>
<footer>
<hr>
<p>This demo is developed by <a href="http://google.com/+agektmr" target="_blank">Eiji Kitamura</a>. Powered by <a href="http://angularjs.org/" target="_blank">AngularJS</a>.<br>Source code is available on <a href="https://github.com/agektmr/BrowserStorageAbuser" target="_blank">GitHub</a>.</p>
</footer>
</div>
<script src="lib/js/jquery/jquery.min.js" defer></script>
<script src="lib/js/angular/angular.min.js" defer></script>
<script src="lib/js/bootstrap/modal.js" defer></script>
<script src="js/BrowserStorageAbuser.js" defer></script>
<script>
var _gaq=[['_setAccount','UA-31105737-1'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
g.async=true;s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>