<!doctype html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Quota Internals</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
<link rel="stylesheet" href="quota_internals.css">
<script type="module" src="quota_internals.js" defer></script>
</head>
<body>
<cr-tab-box>
<div id="summary-tab" slot="tab">Summary</div>
<div id="usage-tab" slot="tab">Usage & Quota</div>
<div id="summary-tabpanel" slot="panel">
<!-- Summary -->
<h2>Summary</h2>
<h3>Disk Availability</h3>
<table class="disk-availability-table">
<thead>
<th>Total Space</th>
<th>Available Space</th>
<th>Temporary Storage Usage</th>
<th>Syncable Storage Usage</th>
<th>Temp Pool Size</th>
</thead>
<tbody id="listeners-tbody"></tbody>
</table>
<h3>Eviction Statistics</h3>
<table class="eviction-statistics-table">
<thead class="eviction-statistics-header">
<th>Errors on Getting Usage and Quota</th>
<th>Evicted Buckets</th>
<th>Eviction Rounds</th>
<th>Skipped Eviction Rounds</th>
</thead>
<tbody id="eviction-tbody"></tbody>
</table>
<h2 class="test-storage-pressure-header">
Test Storage Pressure Behavior</h2>
<h3 id="simulate-storage-pressure-activation-message" hidden>
Simulate storage pressure is deactivated in Incognito.</h3>
<form>
<label>Origin to test: </label>
<input type="url" name="origin-to-test" id="origin-to-test"
placeholder="https://example.com" pattern="https://.*"
size="30" required>
<button name="trigger-notification" id="trigger-notification"
type="submit">
Trigger Storage Pressure Notification
</button>
</form>
</div>
<div id="usage-tabpanel" slot="panel">
<!-- Usage and Quota -->
<h2>Bucket Usage Data</h2>
<table>
<thead>
<th>Storage Key</th>
<th>Storage Type</th>
<th>Bucket</th>
<th>Usage (B)</th>
<th>Use Count</th>
<th>Last Accessed</th>
<th>Last Modified</th>
</thead>
<tbody id="usage-and-quota-tbody"></tbody>
</table>
</div>
</cr-tab-box>
<template id="listener-row">
<tr>
<td class="total-space"></td>
<td class="available-space"></td>
<td class="temporary-global-and-unlimited-usage"></td>
<td class="syncable-global-and-unlimited-usage"></td>
<td class="temp-pool-size"></td>
</tr>
</template>
<template id="eviction-row">
<tr class="eviction-tr">
<td class="errors-on-getting-usage-and-quota"></td>
<td class="evicted-buckets"></td>
<td class="eviction-rounds"></td>
<td class="skipped-eviction-rounds"></td>
</tr>
</template>
<template id="usage-and-quota-row">
<tr class="usage-and-quota-template-row">
<td class="storage-key"></td>
<td class="storage-type"></td>
<td class="bucket"></td>
<td class="usage"></td>
<td class="use-count"></td>
<td class="last-accessed"></td>
<td class="last-modified"></td>
</tr>
</template>
</body>
</html>