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

content / browser / resources / quota / quota_internals.html [blame]

<!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>