Adding the chrome://copresence page

chrome/browser/resources/copresence.css

+/* Copyright 2014 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file. */
+
+body {
+  color: black;
+  font-family: Helvetica,Arial,sans-serif;

[Dan Beam, 2014/12/08 22:41:59]

you should include chrome_shared.css instead

[Charlie, 2014/12/08 23:10:45]

Done.

+  font-size: 10pt;
+  margin: 10px 20px;
+}
+
+section {
+  margin-top: 50px;
+}
+
+table {
+  border: 1px solid gray;
+  border-spacing: 0;
+  width: 600px;
+}
+
+thead {
+  background-color: rgb(220, 240, 255);
+  font-weight: bold;
+}
+
+tbody {
+  border-top: 1px solid gray;
+  height: 200px;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+
+td {
+  padding: 5px;
+  text-align: left;
+}
+
+td::first-letter {
+  text-transform: capitalize;
+}
+
+.confirmed,
+.valid {
+  color: green;
+}
+
+.done {
+  color: darkGray;
+}
+
+.invalid {
+  color: red;
+}
+
+.directive-table td {
+  width: 190px;
+}
+
+.token-table td {
+  width: 140px;
+}
+
+table td.spacer {

[Dan Beam, 2014/12/08 22:41:59]

td:last-of-type instead?

[Charlie, 2014/12/08 23:10:45]

I'm not sure this will work. The HTML includes only table header rows, and the
JS then populates data rows as the data becomes available. Data rows don't have
spacers because the scroll bar is there instead.

Also, I like that the table cells are explicitly labeled as spacers this way.

+  width: 5px;
+}
+
+tbody,
+thead > tr {
+  display: block;
+}