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 12 matching lines @@
       /** @const */ var SCREEN_DISTANCE = 2.0;
 
       let element = new api.UiElement(0, 0, 0, 0);
       element.setIsContentQuad(false);
       element.setVisible(false);
       element.setSize(SCREEN_HEIGHT * 16 / 9, SCREEN_HEIGHT);
       element.setTranslation(0, 0, -SCREEN_DISTANCE);
       this.elementId = scene.addElement(element);
     }
 
-    show(visible) {
+    setEnabled(enabled) {
       let update = new api.UiElementUpdate();
-      update.setVisible(visible);
+      update.setVisible(enabled);
       scene.updateElement(this.elementId, update);
     }
 
     getElementId() {
       return this.elementId;
     }
   };
 
   class DomUiElement {
     constructor(domId) {
@@ skipping 100 matching lines @@
 
       let update = new api.UiElementUpdate();
       update.setParentId(contentQuadId);
       update.setVisible(false);
       update.setScale(2.2, 2.2, 1);
       update.setTranslation(0, -0.6, 0.3);
       update.setAnchoring(api.XAnchoring.XNONE, api.YAnchoring.YBOTTOM);
       scene.updateElement(this.reloadUiButton.uiElementId, update);
     }
 
-    show(visible) {
-      this.enabled = visible;
+    setEnabled(enabled) {
+      this.enabled = enabled;
       this.configure();
     }
 
     setReloadUiEnabled(enabled) {
       this.reloadUiEnabled = enabled;
       this.configure();
     }
 
     configure() {
       for (let i = 0; i < this.buttons.length; i++) {
@@ skipping 31 matching lines @@
           '#webvr-not-secure-transient');
       update = new api.UiElementUpdate();
       update.setScale(DISTANCE, DISTANCE, 1);
       update.setTranslation(0, 0, -DISTANCE);
       update.setHitTestable(false);
       update.setVisible(false);
       update.setLockToFieldOfView(true);
       scene.updateElement(this.transientWarning.uiElementId, update);
     }
 
-    show(visible) {
-      this.enabled = visible;
+    setEnabled(enabled) {
+      this.enabled = enabled;
       this.updateState();
     }
 
     setSecureOrigin(secure) {
       this.isSecureOrigin = secure;
       this.updateState();
     }
 
     updateState() {
       /** @const */ var TRANSIENT_TIMEOUT_MS = 30000;
@@ skipping 23 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;

[amp, 2016/11/17 21:00:35]

Not affecting the review (which looks like it's already being submitted), but
does using 'const' here (instead of 'let' or 'var') not work?

I saw this in a few other places (as I'm starting to implement cinema mode) and
was wondering if there was a reason for marking these with the const comment but
then using var.

[cjgrant, 2016/11/17 21:13:12]

It keeps the presubmit style checker happy - no other reason.  I originally used
'const', until the presubmit checker yelled at me.  I think the style used here
is a bit gross looking, but it's consistent with code elsewhere in the codebase.
 

+
+      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);
+    setEnabled(enabled) {
+      this.enabled = enabled;
+      this.resetVisibilityTimer();
+      this.updateState();
     }
 
     setLoading(loading) {
-      this.domUiElement.domElement.className = loading ? 'loading' : 'idle';
+      this.loading = loading;
+      this.resetVisibilityTimer();
+      this.updateState();
     }
 
     setURL(host, path) {
       let omnibox = this.domUiElement.domElement;
       omnibox.querySelector('#domain').innerHTML = host;
       omnibox.querySelector('#path').innerHTML = path;
+      this.resetVisibilityTimer();
+      this.updateState();
     }
 
     setSecureOrigin(secure) {
+      this.secure = secure;
+      this.resetVisibilityTimer();
+      this.updateState();
+    }
+
+    setVisibilityTimeout(milliseconds) {
+      this.visibilityTimeout = milliseconds;
+      this.resetVisibilityTimer();
+      this.updateState();
+    }
+
+    resetVisibilityTimer() {
+      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() {
+      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) {
+        return;
+      }
+      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();
 
       this.controls = new Controls(contentId);
       this.secureOriginWarnings = new SecureOriginWarnings();
       this.omnibox = new Omnibox(contentId);
     }
 
     setMode(mode) {
       this.mode = mode;
-      this.contentQuad.show(mode == api.Mode.STANDARD);
-      this.controls.show(mode == api.Mode.STANDARD);
-      this.omnibox.show(mode == api.Mode.STANDARD);
-      this.secureOriginWarnings.show(mode == api.Mode.WEB_VR);
+      this.contentQuad.setEnabled(mode == api.Mode.STANDARD);
+      this.controls.setEnabled(mode == api.Mode.STANDARD);
+      this.omnibox.setEnabled(mode == api.Mode.STANDARD);
+      this.secureOriginWarnings.setEnabled(mode == api.Mode.WEB_VR);
     }
 
     setSecureOrigin(secure) {
       this.secureOriginWarnings.setSecureOrigin(secure);
       this.omnibox.setSecureOrigin(secure);
     }
 
     setReloadUiEnabled(enabled) {
       this.controls.setReloadUiEnabled(enabled);
     }
@@ skipping 26 matching lines @@
     scene.flush();
   }
 
   return {
     initialize: initialize,
     command: command,
   };
 })();
 
 document.addEventListener('DOMContentLoaded', vrShellUi.initialize);