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 / indexed_db / indexeddb_internals.html [blame]

<!doctype html>
<html dir="ltr" lang="en">

<head>
  <meta charset="utf-8">
  <title>IndexedDB</title>
  <link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
  <link rel="stylesheet" href="indexeddb_internals.css">
</head>

<body>
  <!-- templates -->
  <div style="display:none">
    <div id="indexeddb-list-template" jsvars="stringifymojo:$this.stringifyMojo;originfilter:$this.originFilter">
      <div id="indexeddb-partition" jsselect="$this.partitions">
        <div class="indexeddb-summary">
          <span jsdisplay="partitionPath.path">
            <span>Instances in: </span>
            <span jscontent="partitionPath.path"></span>
          </span>
          <span jsdisplay="!partitionPath.path">
            <span>Instances: Incognito </span>
          </span>
          <span jscontent="`(Bucket count = ${stringifymojo.partitionBucketCount($this)})`"></span>
        </div>
        <div class="indexeddb-origin" jsselect="originList" jsvalues="$url:stringifymojo.origin(origin)"
          jsdisplay="originfilter === '' || stringifymojo.origin(origin).includes(originfilter)">
          <span>
            Origin:
            <a class="indexeddb-url" jscontent="$url" jsvalues="href:$url" target="_blank"></a>
          </span>
          <div class="metadata-list-item" jsselect="storageKeys">
            <span>Storage partition - top level site:
              <span jsvalues="$url:stringifymojo.schemefulSite(topLevelSite)">
                <a class="indexeddb-url" jscontent="$url" jsvalues="href:$url" target="_blank"></a>
              </span>
            </span>
            <div>
              <span>Storage key:</span>
              <span jscontent="serializedStorageKey"></span>
            </div>
            <indexeddb-bucket class="metadata-list-item" jsselect="buckets" jsvars="idbClients:clients;" jsvalues=".idbBucketId:bucketLocator.id;">
              <div>
                <span>Bucket:</span>
                <span jscontent="`'${name}'`"></span>
              </div>
              <div class="indexeddb-size">
                <span>Size:</span>
                <span jscontent="size"></span>
              </div>
              <div class="indexeddb-last-modified">
                <span>Last modified:</span>
                <span jscontent="stringifymojo.time(lastModified)"></span>
              </div>
              <div>
                <span>Open connections:</span>
                <span class="connection-count" jscontent="connectionCount">
              </div>
              <div class="indexeddb-paths">
                <span>Paths:</span>
                <span class="indexeddb-path" jsselect="$this.paths">
                  <span jscontent="path"></span>
                </span>
              </div>
              <div class="controls">
                <span class="control force-close">Force close</span>
                <span class="control download">Download</span>
                <span class="control start-record">Start Recording</span>
                <span class="control stop-record" hidden>Stop Recording</span>
                <span class="download-status" style="display: none">Loading...</span>
              </div>

              <div class="snapshots" hidden>
                <div class="message"></div>
                <div class="controls">
                  <button class="prev">←</button>
                  <input type="range" min="0" max="100" value="50" class="slider">
                  <button class="next">→</button>
                  <span>Snapshot:
                    <span class="current-snapshot"></span> /
                    <span class="total-snapshots"></span>
                    (<span class="snapshot-delta"></span>)
                    </span>
                </div>
              </div>
              <div class="database-view">
                <indexeddb-database class="metadata-list-item" jsselect="$this.databases" jsvalues=".clients:idbClients;.data:$this;">
                </indexeddb-database>
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
  <h1>IndexedDB</h1>
  <input type="text" placeholder="Filter origins..." id="origin-filter">
  <div class="content">
    <div id="indexeddb-list"></div>
  </div>
  <script type="module" src="indexeddb_internals.js"></script>
</body>

</html>