Move the omnibox natively when showing or hiding.

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 63 matching lines @@
       let pixelX = Math.floor(rect.left);
       let pixelY = Math.floor(rect.top);
       let pixelWidth = Math.ceil(rect.right) - pixelX;
       let pixelHeight = Math.ceil(rect.bottom) - pixelY;
 
       let element = new api.UiElement(pixelX, pixelY, pixelWidth, pixelHeight);
       element.setSize(pixelWidth / 1000, pixelHeight / 1000);
 
       // 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;
       this.domElement = domElement;
     }
   };
 
   class RoundButton extends DomUiElement {
     constructor(domId, callback) {
       super(domId);
@@ skipping 183 matching lines @@
     onTransientTimer() {
       let update = new api.UiElementUpdate();
       update.setVisible(false);
       ui.updateElement(this.transientWarning.uiElementId, update);
       this.secureOriginTimer = null;
       ui.flush();
     }
   };
 
   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.
       let update = new api.UiElementUpdate();
       update.setVisible(false);
       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.
       document.querySelector('#omnibox')
           .addEventListener('transitionend', this.onAnimationDone.bind(this));
     }
 
     getSecurityIconElementId(level) {
       // See security_state.h and getSecurityIconResource() for this mapping.
       switch (level) {
@@ skipping 64 matching lines @@
             this.onVisibilityTimer.bind(this), this.visibilityTimeout);
       }
     }
 
     onVisibilityTimer() {
       this.visibilityTimer = null;
       this.updateState();
     }
 
     onAnimationDone(e) {
-      if (e.propertyName == 'opacity' && !this.visibleAfterTransition) {
+      if (e.propertyName == 'opacity' && this.hidden) {
         this.setNativeVisibility(false);
       }
     }
 
     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 = '-webkit-linear-gradient(left, ' + this.statusBarColor +
             ' 0%, ' + this.statusBarColor + ' ' + percent + '%, ' +
             this.backgroundColor + ' ' + percent + '%, ' +
             this.backgroundColor + ' 100%)';
         indicator.style.background = gradient;
       } else {
         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);
     }
 
     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);
       ui.flush();
     }
   };
 
   class UiManager {
     constructor() {
       this.mode = api.Mode.UNKNOWN;
       this.menuMode = false;
       this.fullscreen = false;
 
       this.contentQuad = new ContentQuad();
       let contentId = this.contentQuad.getElementId();
 
       this.controls = new Controls(contentId);
       this.secureOriginWarnings = new SecureOriginWarnings();
-      this.omnibox = new Omnibox(contentId);
+      this.omnibox = new Omnibox();
     }
 
     setMode(mode, menuMode, fullscreen) {
       /** @const */ var OMNIBOX_VISIBILITY_TIMEOUT_MS = 5000;
 
       this.mode = mode;
       this.menuMode = menuMode;
       this.fullscreen = fullscreen;
 
       this.contentQuad.setEnabled(mode == api.Mode.STANDARD && !menuMode);
@@ skipping 59 matching lines @@
     ui.flush();
   }
 
   return {
     initialize: initialize,
     command: command,
   };
 })();
 
 document.addEventListener('DOMContentLoaded', vrShellUi.initialize);