Improve VR omnibox styling and function

chrome/browser/resources/vr_shell/vr_shell_ui.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 {
   background-color: rgba(255, 255, 255, 0);
 }
 
 #ui {
   left: 0;
@@ skipping 62 matching lines @@
   padding: 20px;
   text-align: center;
   width: 512px;
 }
 
 .round-button .button {
   background-color: #eee;
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
-  border-radius: 50%;
+  border-radius: 10%;
   height: 96px;
   margin: auto auto;
   opacity: 0.8;
   transition: opacity 150ms ease-in-out;
   width: 96px;
 }
 
 .round-button .caption {
   color: white;
   font-size: 24px;
@@ skipping 12 matching lines @@
 
 #reload .button {
   background-image: url(../../../../ui/webui/resources/images/vr_reload.svg);
 }
 
 #forward .button {
   transform: scaleX(-1);
 }
 
 #reload-ui-button {
-  --tranX: 0;
-  --tranY: -1.2;
-  --tranZ: -1.2;
   color: white;
   font-size: 24px;
   padding: 12px;
 }
 
+#reload-ui-button:hover {
+  background-color: pink;
+}
+
 #url-indicator-container {
   --tranX: 0;
   --tranY: -0.65;
   --tranZ: -1.2;
 }
 
 #url-indicator-border {
   --fadeTimeMs: 500;
   --fadeYOffset: -0.1;
   --opacity: 0.9;
@@ skipping 52 matching lines @@
   overflow: hidden;
   white-space: nowrap;
 }
 
 #url-indicator #path {
   color: #868686;
 }
 
 #omnibox-ui-element {
   --tranX: 0;
-  --tranY: -0.2;
+  --tranY: -0.1;
   --tranZ: -1.0;
+  background-color: transparent;
+  box-sizing: border-box;
   font-family: arial;
+  font-size: 16px;
+  width: 400px;
 }
 
-#omnibox-url-divider {
-  background-color: black;
-  height: 1px;
+#suggestions {
+  border: 1px solid transparent;
+  box-sizing: border-box;
+}
+
+.suggestion {
+  align-items: center;

[bshe, 2017/02/03 16:37:05]

I am wondering what's the element that you want to center? It doesn't look like
suggestion has any child element?

[cjgrant, 2017/02/03 20:24:25]

This provides vertical alignment of the text within the div.  It works for
display:flex elements.

[bshe, 2017/02/03 21:15:37]

Acknowledged.

+  background-color: white;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;

[bshe, 2017/02/03 16:37:05]

I am not sure why do you need transparent border here. Can you add comment about
it?

[cjgrant, 2017/02/03 20:24:25]

Here's the reason (it's a bit weird):
- We need margin on the suggestions
- The text overflow must be hidden, so we can't use padding (text overflows into
padding).
- The background color needs to extend through this margin, so that when the
suggestion background color changes, the margin changes colour too (due to being
transparent).

In terms of commenting, I'm not sure there's a point.  Technically one could
comment the need for every css property, but it's easy to turn off the
properties and see what breaks.  :-)  Thoughts?

[bshe, 2017/02/03 21:15:37]

I see. So this is not very obvious and that's why I suggest add comment so it is
easier to
understand when reading the code. Turn off the property to see what breaks is
not as efficient
as reading comment. 
That being said, it is my personal style to add comments when my code is not
very obvious. So
I wont impose it on you. Feel free to submit as it is.

[cjgrant, 2017/02/03 22:19:13]

I added a few comments to the odd-looking properties as you suggested.  You are
right that clear code is more important than pretty-looking code.

+  box-sizing: border-box;
+  display: flex;
+  height: 24px;
+  overflow: hidden;
+  visibility: hidden;
+  white-space: nowrap;
+}
+
+.suggestion:hover {
+  background-color: orange;
 }
 
 #omnibox-url-element {
   background-color: white;
+  border: 1px solid grey;
+  box-sizing: border-box;
   display: flex;
+  flex-direction: row-reverse;
+  margin-top: 2px;
   padding: 5px;
-  width: 100%;
-}
-
-.omnibox-suggestion {
-  background-color: white;
-  height: 22px;
-  overflow: hidden;
-  padding-left: 5px;
-  padding-right: 5px;
-  white-space: nowrap;
-  width: 100%;
 }
 
 #omnibox-input-field {
   border: none;
   font-size: 16px;
-  margin: 3px;
+  outline: none;

[bshe, 2017/02/03 16:37:05]

Do you need to specify none here? I would guess none is the default value.

[cjgrant, 2017/02/03 20:24:24]

This is needed for input fields - otherwise, when the field is selected, Chrome
draws an orange border on the field to "help us".  I'll double check that the
border property is also needed.

[cjgrant, 2017/02/03 20:28:15]

Re-verified.  Both border:none and outline:none are needed to prevent the
browser from putting a box around the input field at certain times.

[bshe, 2017/02/03 21:15:37]

Interesing. ack

   overflow: hidden;
-  padding: 0;
   white-space: nowrap;
-  width: 280px;
+  width: 100%;
 }
 
 #omnibox-clear-button {
   background: url(../../../../ui/webui/resources/images/x-hover.png) no-repeat center center;
-  width: 15px;
+  width: 18px;
 }