Allow the VR omnibox to be transient.

chrome/browser/resources/vr_shell/vr_shell_ui.js

 // 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.
 
 var vrShellUi = (function() {
   'use strict';
 
   let scene = new ui.Scene();
   let sceneManager;
 
@@ skipping 233 matching lines @@
       let update = new api.UiElementUpdate();
       update.setVisible(false);
       scene.updateElement(this.transientWarning.uiElementId, update);
       this.secureOriginTimer = null;
       scene.flush();
     }
   };
 
   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();
+      }
     }
   };
 
   class SceneManager {
     constructor() {
       this.mode = api.Mode.UNKNOWN;
 
       this.contentQuad = new ContentQuad();
       let contentId = this.contentQuad.getElementId();
 
@@ skipping 47 matching lines @@
     scene.flush();
   }
 
   return {
     initialize: initialize,
     command: command,
   };
 })();
 
 document.addEventListener('DOMContentLoaded', vrShellUi.initialize);