<style>
#sync-events-table,
#sync-events-table th,
#sync-events-table td {
  border: 1px black solid;
}

#sync-events-table {
  width: 100%;
}

#sync-events > tr {
  vertical-align: top;
}

</style>

<table id="sync-events-table">
  <thead>
    <th>Time</th>
    <th>Submodule</th>
    <th>Event</th>
    <th>Details</th>
  </thead>
  <tbody id="sync-events">
    <tr jsselect="eventList">
      <td jscontent="date" ></td>
      <td jscontent="submodule" ></td>
      <td jscontent="event" ></td>
      <td>
        <button class="toggleButton">Toggle Display</button>
        <pre class="details" jscontent="textDetails" hidden></pre>
      </td>
    </tr>
  </tbody>
</table>

<script src="chrome://sync-internals/events.js"></script>