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

chrome/browser/resources/bluetooth_internals/bluetooth_internals.css

 /* Copyright 2016 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.
  */
 
 html {
   margin: 0;
   padding: 0;
 }
 
 body {
   margin: 0;
   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 {

[dpapad, 2016/10/21 22:46:21]

Why use a .table CSS class, when you can use the tag name directly?

table {
 ...
}

[mbrunson, 2016/10/24 17:15:08]

Done.

+  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;
 }