[Sync] Make about:sync events page more selection friendly

chrome/browser/resources/sync_internals/events.html

Index: chrome/browser/resources/sync_internals/events.html
diff --git a/chrome/browser/resources/sync_internals/events.html b/chrome/browser/resources/sync_internals/events.html
index 43b4d825f98054c72ac33250e6cfa55e06805a98..78649bddafb4ab5e4d2e43d4d6b5cbc5f5472a50 100644
--- a/chrome/browser/resources/sync_internals/events.html
+++ b/chrome/browser/resources/sync_internals/events.html
@@ -1,38 +1,19 @@
-<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>Details</th>
     <th>Submodule</th>
     <th>Event</th>
-    <th>Details</th>
+    <th>Time</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>
+        <button class="toggle-button">Toggle Display</button>
+        <pre jscontent="textDetails" class="details" hidden></pre>
       </td>
+      <td jscontent="submodule" class="attrib-column"></td>
+      <td jscontent="event" class="attrib-column"></td>
+      <td jscontent="date" class="attrib-column"></td>
     </tr>
   </tbody>
 </table>
-
-<script src="chrome://sync-internals/events.js"></script>