xref: /aosp_15_r20/external/cronet/components/metrics/debug/app.html (revision 6777b5387eb2ff775bb5750e3f5d96f37fb7352b)

<style>
  cr-tab-box {
    --tabs-background-color: white;
  }

  .uma-callout {
    font-style: italic;
  }

  th {
    text-align: start;
  }

  .uma-header-type {
    min-width: 100px;
  }

  .uma-header-hash {
    min-width: 300px;
  }

  .uma-header-timestamp {
    min-width: 140px;
  }

  .uma-header-size {
    min-width: 70px;
  }

  .uma-header-status {
    min-width: 500px;
  }

  .uma-log-events {
    width: 100%;
  }

  .uma-log-events-peek {
    display: flex;
  }

  .uma-log-events-peek:hover {
    background-color: #eee;
    cursor: pointer;
  }

  .uma-log-events pre {
    display: none;
    margin: 0;
  }

  .uma-log-events-expanded pre {
    display: block;
    max-height: 100px;
    min-height: 20px;
    overflow-y: scroll;
  }

  .uma-log-events .expand-or-collapse-icon {
    content: url(chrome://resources/images/icon_expand_more.svg);
    margin-inline-start: auto;
    width: 15px;
  }

  .uma-log-events-expanded .expand-or-collapse-icon {
    content: url(chrome://resources/images/icon_expand_less.svg);
  }

  tbody tr:nth-child(odd) {
    background: rgb(239, 243, 255);
  }

  #export-uma-logs {
    margin-top: 10px;
  }
</style>
<cr-tab-box>
  <div slot="tab">UMA</div>
  <div slot="panel">
    <h2>UMA Summary</h2>
    <table>
      <tbody id="uma-summary-body"></tbody>
    </table>
    <h2>Logs</h2>
    <div id="uma-table-caption" class="uma-callout"></div>
    <div class="uma-callout">Proto data is available by exporting.</div>
    <table>
      <thead>
        <tr>
          <th class="uma-header-type">Type</th>
          <th class="uma-header-hash">Hash</th>
          <th class="uma-header-timestamp">Closed Timestamp</th>
          <th class="uma-header-size">Size</th>
          <th class="uma-header-status">Status</th>
        </tr>
      </thead>
      <tbody id="uma-logs-body"></tbody>
    </table>
    <button id="export-uma-logs">Export logs</button>
  </div>
  <div slot="tab">Variations</div>
  <div slot="panel">
    <h2>Variations Summary</h2>
    <table>
      <tbody id="variations-summary-body"></tbody>
    </table>
  </div>
</cr-tab-box>
<template id="uma-log-row-template">
  <tr>
    <td><!-- Type --></td>
    <td><!-- Hash --></td>
    <td><!-- Closed Timestamp --></td>
    <td><!-- Size --></td>
    <td>
      <!-- Status -->
      <div class="uma-log-events">
        <div class="uma-log-events-peek">
          <span class="uma-log-events-peek-text"></span>
          <span class="expand-or-collapse-icon"></span>
        </div>
        <pre class="uma-log-events-text"></pre>
      </div>
    </td>
  </tr>
</template>
<template id="summary-row-template">
  <tr>
    <td><!-- Key --></td>
    <td><!-- Value --></td>
  </tr>
</template>