Support showing loading progress in the VR omnibox.

chrome/browser/resources/vr_shell/vr_shell_ui.css

Index: chrome/browser/resources/vr_shell/vr_shell_ui.css
diff --git a/chrome/browser/resources/vr_shell/vr_shell_ui.css b/chrome/browser/resources/vr_shell/vr_shell_ui.css
index bb0b549bd5bec6a5adf9c6b8dfe36f1feeafb986..17f5b0f941eba0a1781a39fc71ad8e91f3a3fef6 100644
--- a/chrome/browser/resources/vr_shell/vr_shell_ui.css
+++ b/chrome/browser/resources/vr_shell/vr_shell_ui.css
@@ -119,39 +119,45 @@ html {
   padding: 12px;
 }
 
-#omni-container {
+#omnibox-container {
   --tranX: 0;
   --tranY: -0.65;
   --tranZ: -1.2;
-  height: 164px;

[mthiesse, 2017/01/06 21:11:18]

these were added when the omnibox wasn't permanent, in order to avoid elements
shifting and causing issues with the texture. Is that not a concern anymore?
We're never hiding the omnibox?

[cjgrant, 2017/01/09 15:44:14]

The size is determined by #omnibox now, even if it's transparent.

-  overflow: hidden;
-  width: 512px;
 }
 
-#omni {
+#omnibox-border {
+  --statusBarColor: rgb(66, 133, 244);
+  background-color: #ececec;
+  border-radius: 200px;
+  opacity: 0.9;
+  padding: 6px;
+  transition: opacity 500ms ease;
+}
+
+#omnibox-border.hidden {
+  opacity: 0;
+}
+
+#omnibox {
   align-items: center;
-  background-color: rgba(255, 255, 255, 0.9);
-  border-radius: 100px;
+  background-color: #ececec;
+  border-radius: 200px;
   box-sizing: border-box;
   display: flex;
-  height: 104px;
+  height: 104x;

[mthiesse, 2017/01/06 21:11:18]

s/x/px?

[cjgrant, 2017/01/09 15:44:14]

Agreed.

[cjgrant, 2017/01/10 15:42:10]

Done.

   justify-content: center;
-  margin-bottom: 60px;
-  margin-top: 0;
-  opacity: 1;
   overflow: hidden;
-  transition: opacity 500ms ease, margin-top 500ms ease;
   white-space: nowrap;
   width: 512px;
 }
 
-#omni-content {
+#omnibox-content {
   align-items: center;
   display: flex;
   max-width: 448px;
 }
 
-.omni-icon {
+.omnibox-icon {
   -webkit-mask-size: 50px;
   display: none;
   flex: none;
@@ -160,46 +166,29 @@ html {
   width: 50px;
 }
 
-#omni-info-icon {
+#omnibox-info-icon {
   -webkit-mask-image: url(../../../../ui/webui/resources/images/i_circle.svg);
   background-color: rgb(90, 90, 90);
 }
 
-#omni-lock-icon {
+#omnibox-lock-icon {
   -webkit-mask-image: url(../../../../ui/webui/resources/images/lock.svg);
   background-color: rgb(11, 128, 67);
 }
 
-#omni-warning-icon {
+#omnibox-warning-icon {
   -webkit-mask-image: url(../../../../ui/webui/resources/images/warning.svg);
   background-color: rgb(199, 56, 33);
 }
 
-#omni #url {
+#omnibox #url {
   color: #252525;
   font-size: 34px;
   overflow: hidden;
   white-space: nowrap;
 }
 
-#omni #path {
+#omnibox #path {
   color: #868686;
 }
 
-#omni.hide {
-  margin-bottom: 0;
-  margin-top: 60px;
-  opacity: 0;
-}
-
-#omni.loading {
-  border: 4px solid rgb(86, 203, 255);
-}
-
-#omni.idle {
-  background-color: #ececec;
-}
-
-#omni.idle #domain {
-  color: black;
-}