bluetooth: Add service list to DeviceDetailsPage in internals page.

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.
  */
 
 :root {
   --fade-duration: 225ms;
   --header-height: 48px;
   --md-timing-function: cubic-bezier(.4, 0, .6, 1);
   --sidebar-width: 155px;
@@ skipping 15 matching lines @@
   background-repeat: no-repeat;
   min-height: 24px;
   min-width: 24px;
 }
 
 .toggle-status.checked {
   background-image:
       url(../../../../ui/webui/resources/images/check_circle_green.svg);
 }
 
+/* Expandable List */
+list {
+  list-style-type: none;
+  outline: none;
+}
+
+list .spinner {
+  height: 48px;
+  margin: 0 auto;
+  pointer-events: none;
+  width: 48px;
+}
+
+.expandable-list-item .brief-content {
+  align-items: center;
+  background-color: whitesmoke;
+  border-left: 1px solid gray;

[dpapad, 2017/01/13 22:17:20]

Let's use a CSS variable where possible.

[mbrunson, 2017/01/13 23:26:46]

Done.

+  border-right: 1px solid gray;
+  border-top: 1px solid gray;
+  cursor: pointer;
+  display: flex;
+  font-weight: 600;
+  height: 40px;
+  padding: 8px;
+}
+
+.expandable-list-item.expanded > .brief-content {
+  border-bottom: 1px solid gray;
+}
+
+.expandable-list-item:nth-last-child(2) > .brief-content {
+  border-bottom: 1px solid gray;
+}
+
+.expandable-list-item > .expanded-content {
+  height: 0;
+  overflow: hidden;
+}
+
+.expandable-list-item.expanded > .expanded-content {
+  height: auto;
+}
+
+.expandable-list-item .info-container {
+  padding: 0 0 8px;
+}
+
 /* Page container */
 #page-container {
   -webkit-margin-start: var(--sidebar-width);
 }
 
 @media screen and (max-width: 600px) {
   #page-container {
     -webkit-margin-start: 0;
   }
 }
@@ skipping 283 matching lines @@
 .object-fieldset .status div:first-child {
   -webkit-margin-end: 1em;
   white-space: nowrap;
 }
 
 .object-fieldset .status:last-child {
   margin-bottom: 0;
 }
 
 /* Object Fieldset Container */
+.flex {
+  overflow-x: auto;
+}
+
 @media screen and (min-width: 601px) {
   .flex {
     display: flex;
   }
 }
 
 /* Device Details Page */
-.device-details-page section {
+.device-details-page section,
+.info-container fieldset {
   -webkit-margin-start: 1em;
-}
+}