bluetooth: Add sidebar and page manager 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;
-}
-
+html,
 body {
   margin: 0;
   padding: 0;
 }
 
-
-/* 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;
+h1 {
+    color: rgb(92, 97, 102);
 }
 
-.title {
-  color: white;
-  display: inline-block;
-  margin-left: 8px;
+/* Page container */
+#page-container {
+  margin-left: 155px;

[dpapad, 2016/12/07 19:33:20]

Have you this UI in RTL? These should be -webkit-margin-start instead (so that
they are properly flipped, see examples
https://cs.chromium.org/search/?q=webkit-margin-start+lang:css&sq=package:chr....

[mbrunson, 2016/12/07 21:15:56]

Added -webkit-margin-start, -webkit-border-start, and -webkit-padding-start
where possible.

What's the usual way people view internal pages in RTL? Extensions don't work on
internal pages, right? Do I just change the language?

[dpapad, 2016/12/07 21:34:23]

I run it as follows
LANGUAGE=ar ./out/<your_out_folder>/chrome --user-data-dir=/tmp/debug_chrome
--no-first-run
which launches Chrome in Arabic (and RTL).

 }
 
+@media screen and (max-width: 600px) {
+  #page-container {
+    margin-left: 0;
+  }
+}
+
+/* Page content */
+#page-container section {
+  padding: 24px 16px;
+}
+
+/* Page header */
+.page-header {
+  align-items: center;
+  background-color: white;
+  border-bottom: 1px solid #eee;
+  display: flex;
+  height: 48px;
+  padding-top: 8px;
+  position: sticky;

[dpapad, 2016/12/07 19:33:20]

Interesting!

[mbrunson, 2016/12/07 21:15:56]

And convenient! :D

Looks like it was just enabled by default in Chrome 56.

https://www.chromestatus.com/feature/6190250464378880

+  top: 0;
+}
+
+.page-header > h1 {
+  margin: 13px 0;
+}
+
+#menu-btn {
+  background-color: transparent;
+  background-image: url(../../../../ui/webui/resources/images/menu.svg);
+  background-position: center;
+  background-repeat: no-repeat;
+  border: 0;
+  display: none;
+  height: 48px;
+  margin: 0;
+  width: 48px;
+}
+
+@media screen and (max-width: 600px) {
+  #menu-btn {
+    display: block;
+  }
+
+  .page-header > h1 {
+    margin: 13px 0 13px 24px;
+  }
+}
+
+/* Sidebar */
+#sidebar {
+  bottom: 0;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  transition: visibility 200ms cubic-bezier(.4, 0, .6, 1);
+  width: 155px;
+}
+
+@media screen and (max-width: 600px) {
+  #sidebar {
+    width: auto;
+    visibility: hidden;
+  }
+
+  #sidebar.open {
+    visibility: visible;
+  }
+}
+
+/* Sidebar Contents */
+.sidebar-content {
+  background-color: white;
+  height: 100%;
+  transition-timing-function: cubic-bezier(.4, 0, .6, 1);
+  width: 155px;
+}
+
+.sidebar-content > header > h1 {
+  margin: 0;
+  padding: 21px 0 18px 23px;
+}
+
+.sidebar-content ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+.sidebar-content button {
+  background-color: transparent;
+  border: 0;
+  color: #999;
+  cursor: pointer;
+  font: inherit;
+  height: 40px;
+  padding: 0 0 0 16px;
+  text-align: left;
+  width: 100%;
+}
+
+.sidebar-content .selected button {
+  border-left: 6px solid rgb(78, 87, 100);
+  color: rgb(70, 78, 90);
+  padding: 0 0 0 10px;
+}
+
+.sidebar-content button:hover {
+  background-color: #E0E0E0;
+}
+
+.overlay {
+  background-color: rgba(0, 0, 0, .5);
+  bottom: 0;
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transition: visibility 225ms, opacity 225ms cubic-bezier(.4, 0, .6, 1);
+  visibility: hidden;
+}
+
+@media screen and (max-width: 600px) {
+  .sidebar-content {
+    transform: translate3d(-155px, 0, 0);
+    transition: transform 195ms;
+  }
+
+  .open .sidebar-content {
+    transform: translate3d(0, 0, 0);
+    transition: transform 195ms;

[dpapad, 2016/12/07 19:33:20]

Could you use CSS vars where possible to avoid repeating the same literals? See
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables.

[mbrunson, 2016/12/07 21:15:56]

Oh. That's so convenient! I wish I knew this existed earlier. Done.

+  }
+
+  .open .overlay {
+    opacity: 1;
+    visibility: visible;
+  }
+}
 
 /* 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;
+}
+
+table .removed {
+  background-color: #BDBDBD;
 }
 
 @media screen and (max-width: 600px) {
-  table {
-    border: 0;
-  }
   table thead {
     display: none;
   }
-  table tr {
-    border-bottom: 2px solid #ddd;
+
+  table td {
     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;
-}