Move the omnibox natively when showing or hiding.

chrome/browser/resources/vr_shell/vr_shell_ui.js

Index: chrome/browser/resources/vr_shell/vr_shell_ui.js
diff --git a/chrome/browser/resources/vr_shell/vr_shell_ui.js b/chrome/browser/resources/vr_shell/vr_shell_ui.js
index 9dfd6f202e6f22635ca6c83fef4c5d7b8a4bfb91..a5361cadc98871452267ad8e69dee2c84b896fa1 100644
--- a/chrome/browser/resources/vr_shell/vr_shell_ui.js
+++ b/chrome/browser/resources/vr_shell/vr_shell_ui.js
@@ -81,9 +81,11 @@ var vrShellUi = (function() {
 
       // Pull additional custom properties from CSS.
       let style = window.getComputedStyle(domElement);
+      this.translationX = getStyleFloat(style, '--tranX');
+      this.translationY = getStyleFloat(style, '--tranY');
+      this.translationZ = getStyleFloat(style, '--tranZ');
       element.setTranslation(
-          getStyleFloat(style, '--tranX'), getStyleFloat(style, '--tranY'),
-          getStyleFloat(style, '--tranZ'));
+          this.translationX, this.translationY, this.translationZ);
 
       this.uiElementId = ui.addElement(element);
       this.uiAnimationId = -1;
@@ -287,15 +289,15 @@ var vrShellUi = (function() {
   };
 
   class Omnibox {
-    constructor(contentQuadId) {
+    constructor() {
       this.domUiElement = new DomUiElement('#omnibox-container');
       this.enabled = false;
+      this.hidden = false;
       this.loading = false;
       this.loadingProgress = 0;
       this.level = 0;
       this.visibilityTimeout = 0;
       this.visibilityTimer = null;
-      this.visibleAfterTransition = false;
       this.nativeState = {};
 
       // Initially invisible.
@@ -304,13 +306,15 @@ var vrShellUi = (function() {
       ui.updateElement(this.domUiElement.uiElementId, update);
       this.nativeState.visible = false;
 
-      // Pull colors from CSS so that Javascript can set the progress indicator
-      // gradient programmatically.
+      // Pull some CSS properties so that Javascript can reconfigure the omnibox
+      // programmatically.
       let border =
           this.domUiElement.domElement.querySelector('#omnibox-border');
       let style = window.getComputedStyle(border);
       this.statusBarColor = getStyleString(style, '--statusBarColor');
       this.backgroundColor = style.backgroundColor;
+      this.fadeTimeMs = getStyleFloat(style, '--fadeTimeMs');
+      this.fadeYOffset = getStyleFloat(style, '--fadeYOffset');
 
       // Listen to the end of transitions, so that the box can be natively
       // hidden after it finishes hiding itself.
@@ -395,7 +399,7 @@ var vrShellUi = (function() {
     }
 
     onAnimationDone(e) {
-      if (e.propertyName == 'opacity' && !this.visibleAfterTransition) {
+      if (e.propertyName == 'opacity' && this.hidden) {
         this.setNativeVisibility(false);
       }
     }
@@ -420,14 +424,24 @@ var vrShellUi = (function() {
         indicator.style.background = this.backgroundColor;
       }
 
-      // Make the box fade away if it's disappearing.
-      if (!this.loading && this.visibilityTimeout > 0 &&
-          !this.visibilityTimer) {
-        document.querySelector('#omnibox-border').className = 'hidden';
-        this.visibleAfterTransition = false;
-      } else {
-        document.querySelector('#omnibox-border').className = '';
-        this.visibleAfterTransition = true;
+      let shouldBeHidden =
+          !this.loading && this.visibilityTimeout > 0 && !this.visibilityTimer;
+      if (shouldBeHidden != this.hidden) {
+        // Make the box fade away if it's disappearing.

[mthiesse, 2017/01/09 16:55:59]

File a bug to do the opacity fading natively as well to keep things in sync and
improve performance.

[cjgrant, 2017/01/10 16:13:06]

Done. crbug/679761

+        this.hidden = shouldBeHidden;
+        document.querySelector('#omnibox-border').className =
+            this.hidden ? 'hidden' : '';
+
+        // Drop the position as it fades.
+        let yOffset = this.hidden ? this.fadeYOffset : 0;

[bshe, 2017/01/09 22:40:51]

perhap only add animation if this.hidden is true instead of add a noop
animation?

[cjgrant, 2017/01/10 14:30:44]

It wouldn't be a noop - it's moving the box from the lowered position back up to
it's normal viewing position.

[bshe, 2017/01/10 15:32:08]

Acknowledged. Perhaps add comment for yOffset to clarify that it is also used
for
restoring position.

[cjgrant, 2017/01/10 16:13:06]

Done.

+        let animation =
+            new api.Animation(this.domUiElement.uiElementId, this.fadeTimeMs);
+        animation.setTranslation(
+            this.domUiElement.translationX,
+            this.domUiElement.translationY + yOffset,
+            this.domUiElement.translationZ);
+        ui.addAnimation(animation);
+        ui.flush();
       }
 
       this.setNativeVisibility(true);
@@ -456,7 +470,7 @@ var vrShellUi = (function() {
 
       this.controls = new Controls(contentId);
       this.secureOriginWarnings = new SecureOriginWarnings();
-      this.omnibox = new Omnibox(contentId);
+      this.omnibox = new Omnibox();
     }
 
     setMode(mode, menuMode, fullscreen) {