Incorporate VR UI styling changes

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;
 
   let uiRootElement = document.querySelector('#ui');
   let uiStyle = window.getComputedStyle(uiRootElement);
   /** @const */ var ANIM_DURATION = 150;
 
   // This value should match the one in VrShellImpl.java
   /** @const */ var UI_DPR = 1.2;
 
-  function getStyleFloat(style, property) {
+  function getStyleFloat(style, property, defaultValue) {
     let value = parseFloat(style.getPropertyValue(property));
-    return isNaN(value) ? 0 : value;
+    return isNaN(value) ? defaultValue : value;
   }
 
   function getStyleString(style, property) {
     let str = style.getPropertyValue(property);
     return !str || 0 === str.length ? '' : str;
   }
 
   class ContentQuad {
     constructor() {
-      /** @const */ this.SCREEN_HEIGHT = 1.6;
-      /** @const */ this.SCREEN_RATIO = 16 / 9;
+      /** @const */ this.SCREEN_HEIGHT = 1.375;
+      /** @const */ this.SCREEN_RATIO = 9.6 / 6.4;
+      /** @const */ this.BROWSING_SCREEN_ELEVATION = -0.15;
       /** @const */ this.BROWSING_SCREEN_DISTANCE = 2.0;
       /** @const */ this.FULLSCREEN_DISTANCE = 3.0;
       /** @const */ this.CSS_WIDTH_PIXELS = 960.0;
       /** @const */ this.CSS_HEIGHT_PIXELS = 640.0;
       /** @const */ this.DPR = 1.2;
       /** @const */ this.MENU_MODE_SCREEN_DISTANCE = 2.0;
-      /** @const */ this.MENU_MODE_SCREEN_HEIGHT = 0.8;
-      /** @const */ this.MENU_MODE_SCREEN_ELEVATION = 0.2;
+      /** @const */ this.MENU_MODE_SCREEN_HEIGHT = 0.48;
+      /** @const */ this.MENU_MODE_SCREEN_ELEVATION = -0.125;
       /** @const */ this.BACKGROUND_DISTANCE_MULTIPLIER = 1.414;
       /** @const */ this.DOM_INTERCEPTOR_SELECTOR = '#content-interceptor';
       /** @const */ this.DOM_INTERCEPTOR_ELEVATION = 0.01;
 
       this.menuMode = false;
       this.fullscreen = false;
 
       let element = new api.UiElement(0, 0, 0, 0);
       element.setFill(new api.Content());
       element.setVisible(false);
       element.setSize(
           this.SCREEN_HEIGHT * this.SCREEN_RATIO, this.SCREEN_HEIGHT);
-      element.setTranslation(0, 0, -this.BROWSING_SCREEN_DISTANCE);
+      element.setTranslation(
+          0, this.BROWSING_SCREEN_ELEVATION, -this.BROWSING_SCREEN_DISTANCE);
       this.elementId = ui.addElement(element);
 
       // Place an invisible (fill none) but hittable plane behind the content
       // quad, to keep the reticle roughly planar with the content if near
       // content.
       let backPlane = new api.UiElement(0, 0, 0, 0);
       backPlane.setSize(1000, 1000);
       backPlane.setTranslation(0, 0, -0.01);
       backPlane.setParentId(this.elementId);
       backPlane.setFill(new api.NoFill());
@@ skipping 42 matching lines @@
 
     setFullscreen(enabled) {
       if (this.fullscreen == enabled)
         return;
       this.fullscreen = enabled;
       this.updateState();
     }
 
     updateState() {
       // Defaults content quad parameters.
-      let y = 0;
+      let y = this.BROWSING_SCREEN_ELEVATION;
       let distance = this.BROWSING_SCREEN_DISTANCE;
       let height = this.SCREEN_HEIGHT;
 
       // Mode-specific overrides.
       if (this.menuMode) {
         y = this.MENU_MODE_SCREEN_ELEVATION;
         distance = this.MENU_MODE_SCREEN_DISTANCE;
         height = this.MENU_MODE_SCREEN_HEIGHT;
       } else if (this.fullscreen) {
         distance = this.FULLSCREEN_DISTANCE;
@@ skipping 33 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);
       this.sizeX = pixelWidth / 1000;
       this.sizeY = pixelHeight / 1000;
       element.setSize(this.sizeX, this.sizeY);
 
-      // Pull additional custom properties from CSS.
+      // Parse element CSS properties.
       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.translationX = getStyleFloat(style, '--tranX', 0);
+      this.translationY = getStyleFloat(style, '--tranY', 0);
+      this.translationZ = getStyleFloat(style, '--tranZ', 0);
+      if (this.translationX != 0 || this.translationY != 0 ||
+          this.translationZ != 0) {
+        element.setTranslation(
+            this.translationX, this.translationY, this.translationZ);
+      }
+
+      this.scale = getStyleFloat(style, '--scale', 1);
+      if (this.scale != 1) {
+        element.setScale(this.scale, this.scale, this.scale);
+      }
+
+      this.rotationX = getStyleFloat(style, '--rotX', 0);
+      this.rotationY = getStyleFloat(style, '--rotY', 0);
+      this.rotationZ = getStyleFloat(style, '--rotZ', 0);
+      if (this.rotationX != 0 || this.rotationY != 0 || this.rotationZ != 0) {
+        element.setRotation(
+            this.rotationX, this.rotationY, this.rotationZ, 2 * Math.PI);
+      }
 
       this.id = ui.addElement(element);
       this.domElement = domElement;
     }
   };
 
   class Button {
     constructor(domId, callback, parentId) {
       let captionId = domId + '-caption';
       this.button = document.querySelector(domId);
@@ skipping 190 matching lines @@
           }
         ],
         [
           'forwardButton', '#forward-button',
           function() {
             api.doAction(api.Action.HISTORY_FORWARD, {});
           }
         ],
       ];
 
-      /** @const */ var BUTTON_Y = -0.27;
-      /** @const */ var BUTTON_Z = -1;
-      /** @const */ var BUTTON_SPACING = 0.11;
+      /** @const */ var BUTTON_Y = -0.53;
+      /** @const */ var BUTTON_Z = -2;
+      /** @const */ var BUTTON_SPACING = 0.14;
 
       let controls = new api.UiElement(0, 0, 0, 0);
       controls.setVisible(false);
       controls.setTranslation(0, BUTTON_Y, BUTTON_Z);
       this.controlsId = ui.addElement(controls);
 
       let startPosition = -BUTTON_SPACING * (descriptors.length / 2.0 - 0.5);
 
       for (let i = 0; i < descriptors.length; i++) {
         let name = descriptors[i][0];
@@ skipping 34 matching lines @@
       this.devMode = false;
 
       this.uiElement = new DomUiElement('#reload-ui-button');
       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.id, update);
     }
 
     setEnabled(enabled) {
       this.enabled = enabled;
       this.updateState();
     }
 
     setDevMode(enabled) {
       this.devMode = enabled;
@@ skipping 102 matching lines @@
       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');
-      this.fadeYOffset = getStyleFloat(style, '--fadeYOffset');
-      this.opacity = getStyleFloat(style, '--opacity');
+      this.fadeTimeMs = getStyleFloat(style, '--fadeTimeMs', 0);
+      this.fadeYOffset = getStyleFloat(style, '--fadeYOffset', 0);
+      this.opacity = getStyleFloat(style, '--opacity', 1);
     }
 
     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 '#url-indicator-info-icon';
         case 2:  // SECURE:
@@ skipping 122 matching lines @@
       update.setVisible(visible);
       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.GRIDLINE_COUNT = 40;
       /** @const */ this.HORIZON_COLOR = {r: 0.57, g: 0.57, b: 0.57, a: 1.0};
       /** @const */ this.CENTER_COLOR = {r: 0.48, g: 0.48, b: 0.48, a: 1.0};
       /** @const */ this.FULLSCREEN_BACKGROUND_COLOR =
           {r: 0.1, g: 0.1, b: 0.1, a: 1.0};
 
       // Make ground plane.
       let groundPlane = new api.UiElementUpdate();
       groundPlane.setVisible(true);
       groundPlane.setSize(this.SCENE_GROUND_SIZE, this.SCENE_GROUND_SIZE);
       groundPlane.setFill(
           new api.OpaqueGradient(this.HORIZON_COLOR, this.CENTER_COLOR));
       groundPlane.setTranslation(0, -this.SCENE_HEIGHT / 2, 0);
       groundPlane.setRotation(1.0, 0.0, 0.0, -Math.PI / 2);
       groundPlane.setDrawPhase(0);
       this.groundPlaneId = ui.addElement(groundPlane);
 
       // Make ceiling plane.
       let ceilingPlane = new api.UiElementUpdate();
       ceilingPlane.setVisible(true);
       ceilingPlane.setSize(this.SCENE_GROUND_SIZE, this.SCENE_GROUND_SIZE);
       ceilingPlane.setFill(
           new api.OpaqueGradient(this.HORIZON_COLOR, this.CENTER_COLOR));
-      ceilingPlane.setTranslation(0, this.SCENE_HEIGHT / 2, 0);
+      ceilingPlane.setTranslation(0, this.SCENE_HEIGHT * 2, 0);
       ceilingPlane.setRotation(1.0, 0.0, 0.0, Math.PI / 2);
       ceilingPlane.setDrawPhase(0);
       this.ceilingPlaneId = ui.addElement(ceilingPlane);
 
       // Ground grid.
       let groundGrid = new api.UiElementUpdate();
       groundGrid.setVisible(true);
       groundGrid.setSize(this.SCENE_GROUND_SIZE, this.SCENE_GROUND_SIZE);
       let transparentHorizonColor = {
         r: this.HORIZON_COLOR.r,
@@ skipping 53 matching lines @@
           } else {
             this.setHiddenBackground();
           }
           break;
       }
     }
   };
 
   class Omnibox {
     constructor() {
+      /** @const */ this.ELEVATION = -0.7;
+      /** @const */ this.DISTANCE = -1.99;
+      /** @const */ this.SCALE = -this.DISTANCE;
+
       this.enabled = false;
 
       let root = document.querySelector('#omnibox-ui-element');
       this.domUiElement = new DomUiElement('#omnibox-url-element');
       this.inputField = root.querySelector('#omnibox-input-field');
 
       // Initially invisible.
       let update = new api.UiElementUpdate();
       update.setVisible(false);
+      update.setTranslation(0, this.ELEVATION, this.DISTANCE);
+      update.setScale(this.SCALE, this.SCALE, this.SCALE);
       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.
@@ skipping 86 matching lines @@
   // TODO(crbug/641487): currently, tabs cannot be scrolled because the
   // scrolling event is not sent to UI elements.
   class TabContainer {
     constructor(contentQuadId) {
       /** @const */ var DOM_TAB_TEMPLATE_SELECTOR = '#tab-template';
       /** @const */ var DOM_TAB_CONTAINER_SELECTOR = '#tab-container';
       /** @const */ var DOM_TAB_CLIP_SELECTOR = '#tab-clip';
       /** @const */ var DOM_NEW_TAB_BUTTON_SELECTOR = '#new-tab';
       /** @const */ var DOM_NEW_INCOGNITO_TAB_BUTTON_SELECTOR =
           '#new-incognito-tab';
-      /** @const */ var TAB_CONTAINER_Y_OFFSET = 0.4;
-      /** @const */ var TAB_CONTAINER_Z_OFFSET = -1;
+      /** @const */ var TAB_CONTAINER_Y_OFFSET = 0.3;
+      /** @const */ var TAB_CONTAINER_Z_OFFSET = -2;
 
       this.domTabs = {};
       this.contentQuadId = contentQuadId;
       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();
@@ skipping 105 matching lines @@
         update.setVisible(enabled);
         ui.updateElement(buttonElement.id, update);
       }, this);
     }
   };
 
   class VirtualKeyboard {
     constructor(contentQuadId) {
       /** @const */ this.SCALE = 1.4;
       /** @const */ this.ANGLE_UP = Math.PI / 8;
-      /** @const */ this.Y_OFFSET = -0.9;
+      /** @const */ this.Y_OFFSET = -1.0;
       /** @const */ this.Z_OFFSET = -1.8;
 
       this.element = new DomUiElement('#vkb');
       let update = new api.UiElementUpdate();
       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);
@@ skipping 222 matching lines @@
     nativeCommandHandler.handleCommand(dict);
   }
 
   return {
     initialize: initialize,
     command: command,
   };
 })();
 
 window.addEventListener('load', vrShellUi.initialize);