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 {
+  --expandable-list-item-border: 1px solid gray;
   --fade-duration: 225ms;
   --header-height: 48px;
   --md-timing-function: cubic-bezier(.4, 0, .6, 1);
   --sidebar-width: 155px;
   --sidebar-neg-width: calc(var(--sidebar-width) * -1);
 }
 
 html,
 body {
   margin: 0;
   padding: 0;
 }
 
 h1 {
   color: rgb(92, 97, 102);
 }
 
 .toggle-status {
   background-image: url(../../../../ui/webui/resources/images/cancel_red.svg);
   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: var(--expandable-list-item-border);
+  border-right: var(--expandable-list-item-border);
+  border-top: var(--expandable-list-item-border);
+  cursor: pointer;
+  display: flex;
+  font-weight: 600;
+  height: 40px;
+  padding: 8px;
+}
+
+.expandable-list-item.expanded > .brief-content {
+  border-bottom: var(--expandable-list-item-border);
+}
+
+.expandable-list-item:nth-last-child(2) > .brief-content {
+  border-bottom: var(--expandable-list-item-border);
+}
+
+.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;
-}
+}