Adjust HTML VKB positioning.

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;
   let nativeCommandHandler;
@@ skipping 133 matching lines @@
       element.setSize(this.sizeX, this.sizeY);
 
       // 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(
           this.translationX, this.translationY, this.translationZ);
 
-      this.uiElementId = ui.addElement(element);
+      this.id = ui.addElement(element);
       this.domElement = domElement;
     }
   };
 
   class Button {
     constructor(domId, callback, parentId) {
       let captionId = domId + '-caption';
       this.button = document.querySelector(domId);
       this.caption = document.querySelector(captionId);
 
       // Create an invisible parent, from which the button will hover.
       let backing = new api.UiElement(0, 0, 0, 0);
       backing.setParentId(parentId);
       backing.setVisible(false);
       this.backingElementId = ui.addElement(backing);
 
       this.buttonElement = new DomUiElement(domId);
       let update = new api.UiElementUpdate();
       update.setParentId(this.backingElementId);
-      ui.updateElement(this.buttonElement.uiElementId, update);
+      ui.updateElement(this.buttonElement.id, update);
 
       this.captionElement = new DomUiElement(captionId);
       update = new api.UiElementUpdate();
-      update.setParentId(this.buttonElement.uiElementId);
+      update.setParentId(this.buttonElement.id);
       update.setTranslation(0, -this.captionElement.sizeY / 2, 0);
       update.setAnchoring(api.XAnchoring.XNONE, api.YAnchoring.YBOTTOM);
-      ui.updateElement(this.captionElement.uiElementId, update);
+      ui.updateElement(this.captionElement.id, update);
 
       this.button.addEventListener('mouseenter', this.onMouseEnter.bind(this));
       this.button.addEventListener('mouseleave', this.onMouseLeave.bind(this));
       this.button.addEventListener('click', callback);
     }
 
     setTranslation(x, y, z) {
       let update = new api.UiElementUpdate();
       update.setTranslation(x, y, z);
       ui.updateElement(this.backingElementId, update);
     }
 
     setVisible(visible) {
       let update = new api.UiElementUpdate();
       update.setVisible(visible);
-      ui.updateElement(this.buttonElement.uiElementId, update);
+      ui.updateElement(this.buttonElement.id, update);
       update = new api.UiElementUpdate();
       update.setVisible(visible);
-      ui.updateElement(this.captionElement.uiElementId, update);
+      ui.updateElement(this.captionElement.id, update);
     }
 
     configure(buttonOpacity, captionOpacity, distanceForward) {
       this.button.style.opacity = buttonOpacity;
       this.caption.style.opacity = captionOpacity;
 
-      let anim =
-          new api.Animation(this.buttonElement.uiElementId, ANIM_DURATION);
+      let anim = new api.Animation(this.buttonElement.id, ANIM_DURATION);
       anim.setTranslation(0, 0, distanceForward);
       ui.addAnimation(anim);
       ui.flush();
     }
 
     onMouseEnter() {
       this.configure(1, 1, 0.015);
     }
 
     onMouseLeave() {
@@ skipping 71 matching lines @@
       this.uiElement.domElement.addEventListener('click', function() {
         ui.purge();
         api.doAction(api.Action.RELOAD_UI, {});
       });
 
       let update = new api.UiElementUpdate();
       update.setVisible(false);
       update.setSize(0.25, 0.1);
       update.setTranslation(0, -1.0, -1.0);
       update.setRotation(1, 0, 0, -0.8);
-      ui.updateElement(this.uiElement.uiElementId, update);
+      ui.updateElement(this.uiElement.id, update);
     }
 
     setEnabled(enabled) {
       this.enabled = enabled;
       this.updateState();
     }
 
     setDevMode(enabled) {
       this.devMode = enabled;
       this.updateState();
     }
 
     updateState() {
       let update = new api.UiElementUpdate();
       update.setVisible(this.enabled && this.devMode);
-      ui.updateElement(this.uiElement.uiElementId, update);
+      ui.updateElement(this.uiElement.id, update);
     }
   };
 
   class SecureOriginWarnings {
     constructor() {
       /** @const */ var DISTANCE = 0.7;
       /** @const */ var ANGLE_UP = 16.3 * Math.PI / 180.0;
 
       this.enabled = false;
       this.secure = false;
       this.secureOriginTimer = null;
 
       // Permanent WebVR security warning. This warning is shown near the top of
       // the field of view.
       this.webVrSecureWarning = new DomUiElement('#webvr-not-secure-permanent');
       let update = new api.UiElementUpdate();
       update.setScale(DISTANCE, DISTANCE, 1);
       update.setTranslation(
           0, DISTANCE * Math.sin(ANGLE_UP), -DISTANCE * Math.cos(ANGLE_UP));
       update.setRotation(1.0, 0.0, 0.0, ANGLE_UP);
       update.setHitTestable(false);
       update.setVisible(false);
       update.setLockToFieldOfView(true);
-      ui.updateElement(this.webVrSecureWarning.uiElementId, update);
+      ui.updateElement(this.webVrSecureWarning.id, update);
 
       // Temporary WebVR security warning. This warning is shown in the center
       // of the field of view, for a limited period of time.
       this.transientWarning = new DomUiElement('#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);
-      ui.updateElement(this.transientWarning.uiElementId, update);
+      ui.updateElement(this.transientWarning.id, update);
     }
 
     setEnabled(enabled) {
       this.enabled = enabled;
       this.updateState();
     }
 
     setSecure(secure) {
       this.secure = secure;
       this.updateState();
@@ skipping 10 matching lines @@
       if (visible) {
         this.secureOriginTimer =
             setTimeout(this.onTransientTimer.bind(this), TRANSIENT_TIMEOUT_MS);
       }
       this.showOrHideWarnings(visible);
     }
 
     showOrHideWarnings(visible) {
       let update = new api.UiElementUpdate();
       update.setVisible(visible);
-      ui.updateElement(this.webVrSecureWarning.uiElementId, update);
+      ui.updateElement(this.webVrSecureWarning.id, update);
       update = new api.UiElementUpdate();
       update.setVisible(visible);
-      ui.updateElement(this.transientWarning.uiElementId, update);
+      ui.updateElement(this.transientWarning.id, update);
     }
 
     onTransientTimer() {
       let update = new api.UiElementUpdate();
       update.setVisible(false);
-      ui.updateElement(this.transientWarning.uiElementId, update);
+      ui.updateElement(this.transientWarning.id, update);
       this.secureOriginTimer = null;
       ui.flush();
     }
   };
 
   class UrlIndicator {
     constructor() {
       this.domUiElement = new DomUiElement('#url-indicator-container');
       this.enabled = false;
       this.hidden = false;
       this.loading = false;
       this.loadProgress = 0;
       this.level = 0;
       this.visibilityTimeout = 0;
       this.visibilityTimer = null;
       this.nativeState = {};
 
       // Initially invisible.
       let update = new api.UiElementUpdate();
       update.setVisible(false);
-      ui.updateElement(this.domUiElement.uiElementId, update);
+      ui.updateElement(this.domUiElement.id, update);
       this.nativeState.visible = false;
 
       // Pull some CSS properties so that Javascript can reconfigure the
       // indicator programmatically.
       let border =
           this.domUiElement.domElement.querySelector('#url-indicator-border');
       let style = window.getComputedStyle(border);
       this.statusBarColor = getStyleString(style, '--statusBarColor');
       this.backgroundColor = style.backgroundColor;
       this.fadeTimeMs = getStyleFloat(style, '--fadeTimeMs');
@@ skipping 100 matching lines @@
       }
 
       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;
 
         // Fade-out or fade-in the box.
         let opacityAnimation =
-            new api.Animation(this.domUiElement.uiElementId, this.fadeTimeMs);
+            new api.Animation(this.domUiElement.id, 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 positionAnimation =
-            new api.Animation(this.domUiElement.uiElementId, this.fadeTimeMs);
+            new api.Animation(this.domUiElement.id, this.fadeTimeMs);
         positionAnimation.setTranslation(
             this.domUiElement.translationX,
             this.domUiElement.translationY + yOffset,
             this.domUiElement.translationZ);
         ui.addAnimation(positionAnimation);
       }
 
       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);
+      ui.updateElement(this.domUiElement.id, update);
       ui.flush();
     }
   };
 
   class Background {
     constructor() {
       /** @const */ this.SCENE_GROUND_SIZE = 25.0;
       /** @const */ this.SCENE_HEIGHT = 4.0;
       /** @const */ this.GRIDLINE_COUNT = 10;
       /** @const */ this.HORIZON_COLOR = {r: 0.57, g: 0.57, b: 0.57, a: 1.0};
@@ skipping 94 matching lines @@
     constructor() {
       this.enabled = false;
 
       this.domUiElement = new DomUiElement('#omnibox-ui-element');
       let root = this.domUiElement.domElement;
       this.inputField = root.querySelector('#omnibox-input-field');
 
       // Initially invisible.
       let update = new api.UiElementUpdate();
       update.setVisible(true);
-      ui.updateElement(this.domUiElement.uiElementId, update);
+      ui.updateElement(this.domUiElement.id, update);
 
       // Field-clearing button.
       let clearButton = root.querySelector('#omnibox-clear-button');
       clearButton.addEventListener('click', function() {
         this.inputField.value = '';
         api.doAction(api.Action.OMNIBOX_CONTENT, {'text': ''});
       }.bind(this));
 
       // Watch for the enter key to trigger navigation.
       this.inputField.addEventListener('keypress', function(e) {
@@ skipping 20 matching lines @@
             this.setSuggestions([]);
           }
         }.bind(this, i));
       }
     }
 
     setEnabled(enabled) {
       this.enabled = enabled;
       let update = new api.UiElementUpdate();
       update.setVisible(enabled);
-      ui.updateElement(this.domUiElement.uiElementId, update);
+      ui.updateElement(this.domUiElement.id, update);
     }
 
     setURL(url) {
       this.inputField.value = url;
     }
 
     setSuggestions(suggestions) {
       for (var i = 0; i < this.maxSuggestions; i++) {
         let element = document.querySelector('#suggestion-' + i);
         if (i >= suggestions.length) {
@@ skipping 37 matching lines @@
       this.domTabTemplate = document.querySelector(DOM_TAB_TEMPLATE_SELECTOR);
       this.domTabContainer = document.querySelector(DOM_TAB_CONTAINER_SELECTOR);
       this.domTabClip = document.querySelector(DOM_TAB_CLIP_SELECTOR);
 
       // Add tab container to native scene.
       this.tabContainerElement = new DomUiElement(DOM_TAB_CONTAINER_SELECTOR);
       let positionUpdate = new api.UiElementUpdate();
       positionUpdate.setTranslation(
           0, TAB_CONTAINER_Y_OFFSET, TAB_CONTAINER_Z_OFFSET);
       positionUpdate.setVisible(false);
-      ui.updateElement(this.tabContainerElement.uiElementId, positionUpdate);
+      ui.updateElement(this.tabContainerElement.id, positionUpdate);
 
       // Add the new tab buttons to the native scene.
       let buttonConfigs = [
         {
           selector: DOM_NEW_TAB_BUTTON_SELECTOR, x: -0.2, incognito: false
         }, {
           selector: DOM_NEW_INCOGNITO_TAB_BUTTON_SELECTOR,
           x: 0.2,
           incognito: true
         }
       ];
       this.buttonElements = [];
       buttonConfigs.forEach(function(buttonConfig) {
         let buttonElement = new DomUiElement(buttonConfig.selector);
         let update = new api.UiElementUpdate();
         update.setTranslation(buttonConfig.x, 0.1, 0);
         update.setVisible(false);
         update.setAnchoring(api.XAnchoring.XNONE, api.YAnchoring.YTOP);
-        update.setParentId(this.tabContainerElement.uiElementId);
-        ui.updateElement(buttonElement.uiElementId, update);
+        update.setParentId(this.tabContainerElement.id);
+        ui.updateElement(buttonElement.id, update);
         buttonElement.domElement.addEventListener('click', function() {
           api.doAction(
               api.Action.OPEN_NEW_TAB, {'incognito': buttonConfig.incognito});
         });
         this.buttonElements.push(buttonElement);
       }, this);
 
       // Calculate the width of one tab so that we can properly set the clip
       // element's width.
       this.domTabWidth = this.domTabTemplate.offsetWidth;
@@ skipping 58 matching lines @@
       let qualifiedTabId = tab.id;
       let domTab = this.domTabs[qualifiedTabId];
       delete this.domTabs[qualifiedTabId];
       this.domTabClip.removeChild(domTab);
       this.resizeClipElement();
     }
 
     setEnabled(enabled) {
       let update = new api.UiElementUpdate();
       update.setVisible(enabled);
-      ui.updateElement(this.tabContainerElement.uiElementId, update);
+      ui.updateElement(this.tabContainerElement.id, update);
       this.buttonElements.forEach(function(buttonElement) {
         let update = new api.UiElementUpdate();
         update.setVisible(enabled);
-        ui.updateElement(buttonElement.uiElementId, update);
+        ui.updateElement(buttonElement.id, update);
       }, this);
     }
   };
 
   class VirtualKeyboard {
     constructor(contentQuadId) {
-      this.domUiElement = new DomUiElement('#vkb');
+      /** @const */ this.SCENE_GROUND_SIZE = 25.0;
+      /** @const */ this.SCALE = 1.8;
+      /** @const */ this.ANGLE_UP = Math.PI / 6;
+      /** @const */ this.Y_OFFSET = -1.0;
+      /** @const */ this.Z_OFFSET = -1.8;
+
+      this.element = new DomUiElement('#vkb');
       let update = new api.UiElementUpdate();
-      update.setParentId(contentQuadId);
-      update.setVisible(false);
-      update.setRotation(1.0, 0.0, 0.0, -0.9);
-      update.setScale(1.8, 1.8, 1.8);
-      update.setTranslation(0, -1.2, 0.1);
-      update.setAnchoring(api.XAnchoring.XNONE, api.YAnchoring.YBOTTOM);
-      ui.updateElement(this.domUiElement.uiElementId, update);
+      update.setVisible(true);
+      update.setOpacity(0);
+      update.setRotation(1, 0, 0, -this.ANGLE_UP);
+      update.setScale(this.SCALE, this.SCALE, this.SCALE);
+      update.setTranslation(0, this.Y_OFFSET, this.Z_OFFSET);
+      ui.updateElement(this.element.id, update);
     }
 
     setEnabled(enabled) {
-      let update = new api.UiElementUpdate();
-      update.setVisible(enabled);
-      ui.updateElement(this.domUiElement.uiElementId, update);
+      let anim = new api.Animation(this.element.id, ANIM_DURATION);
+      anim.setOpacity(enabled ? 1 : 0);
+      ui.addAnimation(anim);
+      anim = new api.Animation(this.element.id, ANIM_DURATION);
+      let scale = enabled ? this.SCALE : 0;
+      anim.setScale(scale, scale, scale);
+      ui.addAnimation(anim);
     }
   };
 
   class UiManager {
     constructor() {
       this.mode = api.Mode.UNKNOWN;
       this.menuMode = false;
       this.fullscreen = false;
 
       this.background = new Background();
@@ skipping 41 matching lines @@
       this.omnibox.setEnabled(menuMode);
       this.urlIndicator.setEnabled(mode == api.Mode.STANDARD && !menuMode);
       this.urlIndicator.setVisibilityTimeout(
           URL_INDICATOR_VISIBILITY_TIMEOUT_MS);
       this.secureOriginWarnings.setEnabled(
           mode == api.Mode.WEB_VR && !menuMode);
       this.background.setState(mode, menuMode, fullscreen);
       this.tabContainer.setEnabled(mode == api.Mode.STANDARD && menuMode);
 
       this.reloadUiButton.setEnabled(mode == api.Mode.STANDARD);
-      this.keyboard.setEnabled(mode == api.Mode.STANDARD);
+      this.keyboard.setEnabled(mode == api.Mode.STANDARD && menuMode);
 
       api.setUiCssSize(
           uiRootElement.clientWidth, uiRootElement.clientHeight, UI_DPR);
     }
 
     setSecurityLevel(level) {
       this.urlIndicator.setSecurityLevel(level);
     }
 
     setWebVRSecureOrigin(secure) {
@@ skipping 95 matching lines @@
     nativeCommandHandler.handleCommand(dict);
   }
 
   return {
     initialize: initialize,
     command: command,
   };
 })();
 
 window.addEventListener('load', vrShellUi.initialize);