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..05043639da08eb672b6187157f75d99f6ac8df32 100644
--- a/chrome/browser/resources/bluetooth_internals/bluetooth_internals.css
+++ b/chrome/browser/resources/bluetooth_internals/bluetooth_internals.css
@@ -9,87 +9,213 @@ html {
 }
 
 body {
+  height: 100%;
   margin: 0;
   padding: 0;
 }
 
+h1 {
+    color: rgb(92, 97, 102);
+}
+
+/* Page container */
+#page-container {
+  margin-left: 155px;
+  max-height: calc(100% - 57px); /* Subtract total height of page header */

[ortuno, 2016/12/06 10:16:05]

Why do we want to always keep the header up top? We end up with less pixels for
content :p

If we really wanted to do it right we would hide/show the sidebar as you scroll
but I think that's too much for this page. If you decide to keep the header up
top I would use position sticky instead:

.page-header {
  position: sticky;
  top: 0;
}

Then this would become:

#page-container {
  margin-left: 155px;
}

[mbrunson, 2016/12/07 01:12:13]

Yeah. That's much better. 

Hiding and showing it like Android apps do would be great since I was planning
to put buttons/page-wide controls in the header. 

Nobody would want to scroll through long tables and have to scroll back to the
top to access a button to start a scan, refresh the device, etc. especially on
mobile devices. So, I just fixed it to the top to keep it simple. Done.

+  overflow-y: auto;
+}
+
+@media screen and (max-width: 600px) {
+  #page-container {
+    margin-left: 0;
+  }
+}
 
-/* Header bar */
+/* Page content */
+.page-content {
+  padding: 24px 16px;
+}
 
-header {
+/* Page header */
+.page-header {
   align-items: center;
-  background-color: rgb(33, 150, 243);
+  background-image: linear-gradient(
+      white, white 40%, rgba(255, 255, 255, 0.92));
+  border-bottom: 1px solid #eee;
   display: flex;
-  flex-direction: row;
-  font-size: 20pt;
-  height: 56px;
-  justify-content: flex-start;
-  padding: 0 16px;
+  height: 48px;
+  margin-left: 155px;
+  padding-top: 8px;
 }
 
-.title {
-  color: white;
-  display: inline-block;
-  margin-left: 8px;
+.page-header > h1 {
+  margin: 13px 0;
 }
 
+#menu-btn {
+  background-color: white;
+  background-image: url(../../../../ui/webui/resources/images/vr_overflow.svg);

[ortuno, 2016/12/06 10:16:04]

Per spec, we want the hamburger icon.

[mbrunson, 2016/12/07 01:12:13]

Done.

+  background-position: center;
+  border: 0;
+  display: none;
+  height: 48px;

[ortuno, 2016/12/06 10:16:05]

I think the icon size should be 24px but the target should be 48px

https://material.google.com/layout/metrics-keylines.html#metrics-keylines-tou...

[mbrunson, 2016/12/07 01:12:13]

Done.

+  margin-left: 16px;
+  width: 48px;
+}
 
-/* Device table */
+@media screen and (max-width: 600px) {
+  #menu-btn {
+    display: block;
+  }
+
+  .page-header {
+    margin-left: 0;
+  }
+
+  .page-header > h1 {
+    margin: 13px 0 13px 16px;
+  }
+}
+
+/* Sidebar */
+#sidebar {
+  bottom: 0;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  transition: visibility 200ms ease;

[ortuno, 2016/12/06 10:16:04]

optional: I put in ease as a placeholder (ease is actually the default value).
Feel free to change to more fancy cubic bezier to match other animations.

[mbrunson, 2016/12/07 01:12:13]

Done.

+  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%;
+  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;
+    line-height: 1.417em;

[ortuno, 2016/12/06 10:16:05]

Why use line-height instead of height? Also this number looks really random O.o

[mbrunson, 2016/12/07 01:12:13]

Yes. It is really random. But that's the value chrome://settings uses for its
button size in its sidebar. ¯\_(ツ)_/¯ I'm changing this to 40px as suggested in
another comment. Done.

+    margin: 6px 0;
+    padding: 0;
+}
 
+.sidebar-content li {

[ortuno, 2016/12/06 10:16:05]

How hard would it be to apply the style to the button directly? Or maybe a
combination of both where most of the style is in the button but the border is
in <li>.
 - Seems a bit weird to style the <li> when in reality it is the <button> that
you are pressing.
 - When you tab around only the name is highlighted.
 - When you click on the button the name is highlighted but when you click on
the li nothing is highlighted.
 - We could save some styling rules e.g. cursor: pointer.

[mbrunson, 2016/12/07 01:12:13]

I basically removed all styling from the li. The button has the click event and
the styling now. I had to add some padding around to keep the text from jumping
when the border is added, but, other than that, it should be the same. Done.

[ortuno, 2016/12/07 02:58:17]

Good job! It looks really nice.

+  -webkit-border-start: 6px solid transparent;
+  -webkit-padding-start: 18px;
+  cursor: pointer;
+  margin: 6px 0;
+}
+
+.sidebar-content .selected {
+  -webkit-border-start-color: rgb(78, 87, 100);
+}
+
+.sidebar-content .selected > button {
+  color: rgb(70, 78, 90);
+}
+
+.sidebar-content li:hover {
+  background-color: #E0E0E0;
+}
+
+.overlay {
+  background-color: rgba(0, 0, 0, .5);
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  visibility: hidden;
+}
+
+@media screen and (max-width: 600px) {
+  .sidebar-content {
+    transform: translateX(-155px);

[ortuno, 2016/12/06 10:16:05]

So Polymer does two things differently. They:

1. use translate3d
2. use -100%

When looking into it I found out that

1. translate3d is accelerated by the GPU but translate is not. So we should use
translate3d. [1]
2. If you use percentages in translate it won't be run on the compositor D: So
-155px is good. [2]

(Consider staring http://crbug.com/230229 so we can get some of this information
in dev tools :))

[1] Start of the relevant section: https://youtu.be/q_O9_C2ZjoA?t=9m55s
    How to trigger HW accelerated animations:
https://youtu.be/q_O9_C2ZjoA?t=12m10s
[2] crbug.com/389359

[mbrunson, 2016/12/07 01:12:13]

Yikes! Caveats all over the place D: Ok. I'll use translate3d with pixels from
now on. Done.

+    transition: transform 195ms;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+  }
+
+  .sidebar-content li {
+    line-height: 48px;
+  }
+
+  .open .sidebar-content {
+    transform: translateX(0);

[ortuno, 2016/12/06 10:16:05]

Same here, use translate3d.

[mbrunson, 2016/12/07 01:12:14]

Done.

+    transition: transform 195ms;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);

[ortuno, 2016/12/06 10:16:05]

Curious as to why you split this. The style guide says to use shorthand
properties when possible:
https://google.github.io/styleguide/htmlcssguide.xml#Shorthand_Properties

[mbrunson, 2016/12/07 01:12:13]

Ah ok. Done.

+  }
+
+  .open .overlay {
+    transition: visibility 225ms;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);

[ortuno, 2016/12/06 10:16:05]

If you only have the transition property here there is no animation when going
from .open .overlay to just .overlay.

[mbrunson, 2016/12/07 01:12:14]

I've moved this to .overlay. Done.

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