Allow the VR omnibox to be transient.

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 1d363bf4f1a3a2326baa0090b98e60a1de821e9b..c3677dbd2be8348c9f9f3710e32ffbe0d74617e2 100644
--- a/chrome/browser/resources/vr_shell/vr_shell_ui.js
+++ b/chrome/browser/resources/vr_shell/vr_shell_ui.js
@@ -251,34 +251,107 @@ var vrShellUi = (function() {
 
   class Omnibox {
     constructor(contentQuadId) {
-      this.setSecureOrigin(false);
-      this.domUiElement = new DomUiElement('#omni');
+      /** @const */ var VISIBILITY_TIMEOUT_MS = 3000;
+
+      this.domUiElement = new DomUiElement('#omni-container');
+      this.enabled = false;
+      this.secure = false;
+      this.visibilityTimeout = VISIBILITY_TIMEOUT_MS;
+      this.visibilityTimer = null;
+      this.nativeState = {};
+
+      // Initially invisible.
       let update = new api.UiElementUpdate();
       update.setVisible(false);
       scene.updateElement(this.domUiElement.uiElementId, update);
+      this.nativeState.visible = false;
+
+      // Listen to the end of transitions, so that the box can be natively
+      // hidden after it finishes hiding itself.
+      document.querySelector('#omni').addEventListener('transitionend',
+          this.onAnimationDone.bind(this));
     }
 
-    show(visible) {
-      let update = new api.UiElementUpdate();
-      update.setVisible(visible);
-      scene.updateElement(this.domUiElement.uiElementId, update);
+    show(enabled) {
+      this.enabled = enabled;
+      this.kickVisibilityTimer();
+      this.updateState();
     }
 
     setLoading(loading) {
-      this.domUiElement.domElement.className = loading ? 'loading' : 'idle';
+      this.loading = loading;
+      this.kickVisibilityTimer();
+      this.updateState();
     }
 
     setURL(host, path) {
       let omnibox = this.domUiElement.domElement;
       omnibox.querySelector('#domain').innerHTML = host;
       omnibox.querySelector('#path').innerHTML = path;
+      this.kickVisibilityTimer();
+      this.updateState();
     }
 
     setSecureOrigin(secure) {
+      this.secure = secure;
+      this.kickVisibilityTimer();
+      this.updateState();
+    }
+
+    kickVisibilityTimer() {

[mthiesse, 2016/11/15 19:42:48]

nit: resetVisibilityTimer()?

[cjgrant, 2016/11/15 20:57:05]

Done.

+      if (this.visibilityTimer) {
+        clearInterval(this.visibilityTimer);
+        this.visibilityTimer = null;
+      }
+      if (this.enabled && this.visibilityTimeout > 0) {
+        this.visibilityTimer = setTimeout(
+          this.onVisibilityTimer.bind(this), this.visibilityTimeout);
+      }
+    }
+
+    onVisibilityTimer() {
+      this.visibilityTimer = null;
+      this.updateState();
+    }
+
+    onAnimationDone(e) {
+      if (e.propertyName == 'opacity' && !this.visibleAfterTransition) {
+        this.setNativeVisibility(false);
+      }
+    }
+
+    updateState() {

[mthiesse, 2016/11/15 19:42:48]

Why have an enabled boolean on top of the NativeVisibility state? Why not set
NativeVisibility directly, rather than updating this.enabled?

Also, this function seems like it's doing too many things. Why not have an
startTimer, resetTimer, and onTimerEnd as separate functions?

[cjgrant, 2016/11/15 20:57:05]

this.enabled -> Whether or not there's an omnibox in the scene.
nativeVisibility -> Whether or not the omnibox is visible at the moment, subject
to idle timeout.
Several things change the omnibox appearance/content, only one of which is a
timer expiry or reset.  I prefer to keep the "state to appearance" logic as
centralized as possible, even if it makes for a bigger function.  Some docs
could help here, but probably not much.

+      if (!this.enabled) {
+        this.setNativeVisibility(false);
+        return;
+      }
+
       document.querySelector('#omni-secure-icon').style.display =
-          (secure ? 'block' : 'none');
+          (this.secure ? 'block' : 'none');
       document.querySelector('#omni-insecure-icon').style.display =
-          (!secure ? 'block' : 'none');
+          (this.secure ? 'none' : 'block');
+
+      let state = 'idle';
+      this.visibleAfterTransition = true;
+      if (this.visibilityTimeout > 0 && !this.visibilityTimer) {
+        state = 'hide';
+        this.visibleAfterTransition = false;
+      } else if (this.loading) {
+        state = 'loading';
+      }
+      document.querySelector('#omni').className = state;
+
+      this.setNativeVisibility(true);
+    }
+
+    setNativeVisibility(visible) {
+      if (visible != this.nativeState.visible) {
+        this.nativeState.visible = visible;
+        let update = new api.UiElementUpdate();
+        update.setVisible(visible);
+        scene.updateElement(this.domUiElement.uiElementId, update);
+        scene.flush();
+      }
     }
   };