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..0f4812e4303665280190b0d205c59f33f3801c0c 100644
--- a/chrome/browser/resources/bluetooth_internals/bluetooth_internals.css
+++ b/chrome/browser/resources/bluetooth_internals/bluetooth_internals.css
@@ -13,11 +13,83 @@ body {
   padding: 0;
 }
 
+
+/* Header bar */
+
 header {
-  background-color: blue;
-  padding: 2px;
+  align-items: center;
+  background-color: rgb(33, 150, 243);
+  display: flex;
+  flex-direction: row;
+  font-size: 20pt;
+  height: 56px;
+  justify-content: flex-start;
+  padding: 0 16px;
 }
 
-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;
+  }
+}
+
+/* Device Row */
+table .removed {
+  background-color: #BDBDBD;
 }