Color the VR omnibox security icons.

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 82 matching lines @@
   font-size: 24px;
   max-width: 192px;
   opacity: 0;
   overflow: hidden;
   text-align: center;
   transition: opacity 150ms ease-in-out;
   white-space: nowrap;
 }
 
 #back .button {
-  background-image: url(../../../../ui/webui/resources/images/vr_back.svg);
+  background-image: url(images/back.svg);

[cjgrant, 2016/12/05 20:28:35]

The original line was resolved through html-flattening, which is now disabled. 
This lets us manipulate images through Javascript, as well as avoiding possible
size duplication (where we need the image file, and it gets embedded in the HTML
as well).

[bshe, 2016/12/05 21:08:38]

hmm. I think flattening would make loading slightly faster. When is the svg size
duplicated?

[cjgrant, 2016/12/05 22:10:17]

Example:  The "i in a circle" image is used inline by HTML, but also set
programmatically in Javascript (requiring a file).  I thought it'd be better to
not flatten, as our resources are loaded locally anyway.  I could be wrong here
though.

Prior to this, I experimented with making 3 different divs, each with an icon,
then using javascript to set which one is visible.  That seemed a lot more
cumbersome to me, but it works.

 }
 
 #reload .button {
-  background-image: url(../../../../ui/webui/resources/images/vr_reload.svg);
+  background-image: url(images/reload.svg);
 }
 
 #forward .button {
-  background-image: url(../../../../ui/webui/resources/images/vr_back.svg);
+  background-image: url(images/back.svg);
   transform: scaleX(-1);
 }
 
 #reload-ui-button {
   background-color: #555;
   color: white;
   font-size: 24px;
   padding: 12px;
 }
 
@@ skipping 22 matching lines @@
   white-space: nowrap;
   width: 512px;
 }
 
 #omni-content {
   align-items: center;
   display: flex;
   max-width: 448px;
 }
 
-#omni .connection-security {
+#omni-icon {
+  flex: none;
   height: 50px;
   margin-right: 10px;
   width: 50px;
 }
 
 #omni #url {
   color: #252525;
   font-size: 34px;
   overflow: hidden;
   white-space: nowrap;
@@ skipping 13 matching lines @@
   border: 4px solid rgb(86, 203, 255);
 }
 
 #omni.idle {
   background-color: #ececec;
 }
 
 #omni.idle #domain {
   color: black;
 }