chrome/browser/resources/discards/database_tab.html

    <style>
      @media (prefers-color-scheme: dark) {
        :host {
          color: var(--cr-secondary-text-color);
        }
      }

      .add-origin-container {
        display: flex;
        padding-top: 10px;
      }

      table {
        border-collapse: collapse;
      }

      table td,
      table th {
        border: 1px solid #777;
        padding-inline-end: 4px;
        padding-inline-start: 4px;
      }

      table th {
        background: rgb(224, 236, 255);
        color: black;
        padding-bottom: 4px;
        padding-inline-end: 16px;
        padding-top: 4px;
        white-space: nowrap;
      }

      .header-cell-container {
        align-items: center;
        display: flex;
        justify-content: flex-start;
      }

      table th[data-sort-key] {
        cursor: pointer;
      }

      th div.header-cell-container::after {
        content: '▲';
        opacity: 0;
      }

      th.sort-column div.header-cell-container::after {
        content: '▲';
        opacity: 1;
      }

      th.sort-column-reverse div.header-cell-container::after {
        content: '▼';
        opacity: 1;
      }
    </style>
    <div>
      <div>Database Rows: [[optionalIntegerToString_(size_.numRows)]]</div>
      <div>Database Size: [[kilobytesToString_(size_.onDiskSizeKb)]]</div>
    </div>
    <table>
      <thead>
        <tr>
          <th data-sort-key="origin" class="sort-column" on-click="onSortClick">
            <div class="header-cell-container">
              Origin
            </div>
          </th>
          <th data-sort-key="dirty" on-click="onSortClick">
            <div class="header-cell-container">
              Dirty
            </div>
          </th>
          <th data-sort-key="lastLoaded" on-click="onSortClick">
            <div class="header-cell-container">
              Last Loaded
            </div>
          </th>
          <th>
            <div class="header-cell-container">
              <div>
                <div>Updates Favicon</div>
                <div>In Background</div>
              </div>
            </div>
          </th>
          <th>
            <div class="header-cell-container">
              <div>
                <div>Updates Title</div>
                <div>In Background</div>
              </div>
            </div>
          </th>
          <th>
            <div class="header-cell-container">
              <div>
                <div>Used Audio</div>
                <div>In Background</div>
              </div>
            </div>
          </th>
          <th data-sort-key="cpuUsage" on-click="onSortClick">
            <div class="header-cell-container">
              <div>
                <div>Average</div>
                <div>CPU Usage</div>
              </div>
            </div>
          </th>
          <th data-sort-key="memoryUsage" on-click="onSortClick">
            <div class="header-cell-container">
              <div>
                <div>Average Memory</div>
                <div>Footprint</div>
              </div>
            </div>
          </th>
          <th data-sort-key="loadDuration" on-click="onSortClick">
            <div class="header-cell-container">
              <div>
                <div>Average Load</div>
                <div>Time</div>
            </div>
            </div>
          </th>
        </tr>
      </thead>
      <tbody>
        <template is="dom-repeat" items="[[rows_]]"
            sort="[[computeSortFunction_(sortKey, sortReverse)]]">
          <tr>
            <td class="origin-cell">[[item.origin]]</td>
            <td class="dirty-cell">[[boolToString_(item.isDirty)]]</td>
            <td>[[lastUseToString_(item.value.lastLoaded)]]</td>
            <td>[[featureToString_(item.value.updatesFaviconInBackground)]]</td>
            <td>[[featureToString_(item.value.updatesTitleInBackground)]]</td>
            <td>[[featureToString_(item.value.usesAudioInBackground)]]</td>
            <td>[[getLoadTimeEstimate_(item, "avgCpuUsageUs")]]</td>
            <td>[[getLoadTimeEstimate_(item, "avgFootprintKb")]]</td>
            <td>[[getLoadTimeEstimate_(item, "avgLoadDurationUs")]]</td>
          </tr>
        </template>
      </tbody>
    </table>
    <div class="add-origin-container">
      <cr-input id="addOriginInput" label="Add Origin" value="{{newOrigin_}}"
           on-keydown="onOriginKeydown_" placeholder="https://example.org"
           invalid="[[!isEmptyOrValidOrigin_(newOrigin_)]]"
           error-message="The origin must be a valid URL without a path."
           autofocus>
        <button slot="suffix" label="Add Origin"
            on-click="onAddOriginClick_"
            disabled="[[!isValidOrigin_(newOrigin_)]]">
          <iron-icon icon="cr:check"></iron-icon>
        </button>
      </cr-input>
    </div>