VrShell: Allow native control of UI element opacity.

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 ui = new scene.Scene();
   let uiManager;
 
@@ skipping 297 matching lines @@
 
       // 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.
-      document.querySelector('#omnibox')
-          .addEventListener('transitionend', this.onAnimationDone.bind(this));
+      this.opacity = getStyleFloat(style, '--opacity');
     }
 
     getSecurityIconElementId(level) {
       // See security_state.h and getSecurityIconResource() for this mapping.
       switch (level) {
         case 0:  // NONE
         case 1:  // HTTP_SHOW_WARNING
         case 4:  // SECURITY_WARNING
           return '#omnibox-info-icon';
         case 2:  // SECURE:
@@ skipping 58 matching lines @@
         this.visibilityTimer = setTimeout(
             this.onVisibilityTimer.bind(this), this.visibilityTimeout);
       }
     }
 
     onVisibilityTimer() {
       this.visibilityTimer = null;
       this.updateState();
     }
 
-    onAnimationDone(e) {
-      if (e.propertyName == 'opacity' && this.hidden) {
-        this.setNativeVisibility(false);
-      }
-    }
+    updateState() {
+      this.setNativeVisibility(this.enabled);
 
-    updateState() {
       if (!this.enabled) {
-        this.setNativeVisibility(false);
         return;
       }
 
       let indicator = document.querySelector('#omnibox-border');
       if (this.loading) {
         // Remap load progress range 0-100 as 5-95 percent, to avoid the
         // extremities of the rounded ends of the omnibox.
         let percent = Math.round((this.loadingProgress * 0.9 + 0.05) * 100);
         let gradient = 'linear-gradient(to right, ' + this.statusBarColor +
             ' 0%, ' + this.statusBarColor + ' ' + percent + '%, ' +
             this.backgroundColor + ' ' + percent + '%, ' +
             this.backgroundColor + ' 100%)';
         indicator.style.background = gradient;
       } else {
         indicator.style.background = this.backgroundColor;
       }
 
       let shouldBeHidden =
           !this.loading && this.visibilityTimeout > 0 && !this.visibilityTimer;
       if (shouldBeHidden != this.hidden) {
         // Make the box fade away if it's disappearing.
         this.hidden = shouldBeHidden;
-        document.querySelector('#omnibox-border').className =
-            this.hidden ? 'hidden' : '';
+
+        // Fade-out or fade-in the box.
+        let opacityAnimation =
+            new api.Animation(this.domUiElement.uiElementId, this.fadeTimeMs);
+        opacityAnimation.setOpacity(this.hidden ? 0.0 : this.opacity);
+        ui.addAnimation(opacityAnimation);
 
         // Drop the position as it fades, or raise the position if appearing.
         let yOffset = this.hidden ? this.fadeYOffset : 0;
-        let animation =
+        let positionAnimation =
             new api.Animation(this.domUiElement.uiElementId, this.fadeTimeMs);
-        animation.setTranslation(
+        positionAnimation.setTranslation(
             this.domUiElement.translationX,
             this.domUiElement.translationY + yOffset,
             this.domUiElement.translationZ);
-        ui.addAnimation(animation);
-        ui.flush();
+        ui.addAnimation(positionAnimation);
       }
 
-      this.setNativeVisibility(true);
+      ui.flush();
     }
 
     setNativeVisibility(visible) {
       if (visible == this.nativeState.visible) {
         return;
       }
       this.nativeState.visible = visible;
       let update = new api.UiElementUpdate();
       update.setVisible(visible);
       ui.updateElement(this.domUiElement.uiElementId, update);
@@ skipping 85 matching lines @@
     ui.flush();
   }
 
   return {
     initialize: initialize,
     command: command,
   };
 })();
 
 document.addEventListener('DOMContentLoaded', vrShellUi.initialize);