bluetooth: Add device list UI for chrome://bluetooth-internals.

chrome/browser/resources/bluetooth_internals/bluetooth_internals.css

Index: chrome/browser/resources/bluetooth_internals/bluetooth_internals.css
diff --git a/chrome/browser/resources/bluetooth_internals/bluetooth_internals.css b/chrome/browser/resources/bluetooth_internals/bluetooth_internals.css
index 1cd2375dae567b4ff8df989b1872fafa42f74625..c94f3cee90e10b1e6ca24fd39121bfc325395bbc 100644
--- a/chrome/browser/resources/bluetooth_internals/bluetooth_internals.css
+++ b/chrome/browser/resources/bluetooth_internals/bluetooth_internals.css
@@ -13,11 +13,78 @@ body {
   padding: 0;
 }
 
+
+/* Header bar */
+
 header {
-  background-color: blue;
-  padding: 2px;
+  align-items: center;
+  background-color: cornflowerblue;

[ortuno, 2016/10/21 00:56:36]

Should we use the colors at https://material.google.com/style/color.html ?

[mbrunson, 2016/10/21 02:09:33]

Yeah. I'll just use Blue 500.

[scheib, 2016/11/01 16:23:53]

Citing color value source would be nice. Maybe just once at top of CSS

+  display: flex;
+  flex-direction: row;
+  font-size: 20pt;
+  height: 56px;
+  justify-content: flex-start;
+  padding: 0 16px;
 }
 
-header * {
+header .title {
   color: white;
+  display: inline-block;
+  margin-left: 8px;
+}
+
+
+/* Device table */
+
+.table {
+  border: 1px solid #ccc;
+  border-collapse: collapse;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+
+.table tr {
+  border: 1px solid #ddd;
+  padding: 5px;
+}
+
+.table th,
+.table td {
+  padding: 10px;
+  text-align: center;
+}
+
+.table th {
+  font-size: 14px;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+}
+
+@media screen and (max-width: 600px) {
+  .table {
+    border: 0;
+  }
+  .table thead {
+    display: none;
+  }
+  .table tr {
+    border-bottom: 2px solid #ddd;
+    display: block;
+  }
+  .table td {
+    border-bottom: 1px dotted #ccc;
+    display: block;
+    font-size: 13px;
+    text-align: right;
+  }
+  .table td:last-child {
+    border-bottom: 0;
+  }
+  .table td::before {
+    content: attr(data-label);
+    float: left;
+    font-weight: bold;
+    text-transform: uppercase;
+  }
 }