bluetooth: Add sidebar and page manager 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 0f4812e4303665280190b0d205c59f33f3801c0c..801edac1e4d7c0d92d69ecc2aa47d0a208451734 100644
--- a/chrome/browser/resources/bluetooth_internals/bluetooth_internals.css
+++ b/chrome/browser/resources/bluetooth_internals/bluetooth_internals.css
@@ -13,83 +13,211 @@ body {
   padding: 0;
 }
 
+h1 {
+    -webkit-margin-start: 23px;
+    color: rgb(92, 97, 102);
+    margin-bottom: 1em;
+    margin-top: 21px;
+}
 
-/* Header bar */
+/* Page container */
+#page-container {
+  bottom: 0;
+  overflow-y: auto;
+  position: absolute;
+  top: 56px;
+}
+
+#page-container > * {
+  margin: 18px;
+}
 
+@media screen and (min-width: 601px) {
+  #page-container {
+    left: 155px;
+    width: calc(100% - 155px);
+  }
+}
+
+@media screen and (max-width: 600px) {
+  #page-container {
+    width: 100%;
+  }
+}
+
+/* Header bar */
 header {
-  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;
+  background-image: linear-gradient(
+      white, white 40%, rgba(255, 255, 255, 0.92));
+  border-bottom: 1px solid #eee;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 1;
 }
 
-.title {
-  color: white;
-  display: inline-block;
-  margin-left: 8px;
+header > h1 {
+    margin: 0;
+    padding: 21px 0 13px;
 }
 
+@media screen and (min-width: 601px) {
+  header {
+    left: 155px;
+    width: calc(100% - 155px);
+  }
 
-/* Device table */
+  #menu-btn {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  header {
+    left: 0;
+    width: 100%;
+  }
+
+  header > h1 {
+    padding-left: 80px;
+  }
+}
+
+#menu-btn {
+  cursor: pointer;
+  height: 24px;
+  left: 18px;
+  position: absolute;
+  top: 18px;
+  width: 24px;
+  z-index: 2;
+}
 
+#menu-btn::before {
+  background: rgb(92, 97, 102);
+  box-shadow: 0 0.5em 0 0 rgb(92, 97, 102), 0 1em 0 0 rgb(92, 97, 102);
+  content: '';
+  height: 3px;
+  position: absolute;
+  top: 3px;
+  width: 24px;
+}
+
+/* Sidebar */
+#sidebar {
+  background-color: white;
+  bottom: 0;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 155px;
+}
+
+#sidebar ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+#overlay {
+  display: none;
+}
+
+@media screen and (min-width: 601px) {
+  #sidebar li {
+    line-height: 30px;
+  }
+
+  #sidebar li.selected {
+    cursor: default;
+    pointer-events: none;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  #sidebar {
+    left: -155px;
+    transition: left 195ms;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+    z-index: 4;
+  }
+
+  #sidebar li {
+    line-height: 48px;
+  }
+
+  #sidebar.open {
+    bottom: 0;
+    left: 0;
+    top: 0;
+    transition: left 225ms;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  #overlay.open {
+    background-color: black;
+    bottom: 0;
+    display: block;
+    left: 0;
+    opacity: 0.5;
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 3;
+  }
+}
+
+#sidebar li {
+  -webkit-border-start: 6px solid transparent;
+  -webkit-padding-start: 18px;
+  cursor: pointer;
+  margin: 6px 0;
+}
+
+#sidebar li.selected {
+  -webkit-border-start-color: rgb(78, 87, 100);
+}
+
+#sidebar li:hover {
+  background-color: #E0E0E0;
+}
+
+/* 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;
+  border: 1px solid rgb(217, 217, 217);
+  padding: 7px;
 }
 
 table th {
-  font-size: 14px;
-  letter-spacing: 1px;
-  text-transform: uppercase;
+  background-color: rgb(240, 240, 240);
+  font-weight: normal;
 }
 
 @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;
-}
+}