VR menu mode styling basics.

chrome/browser/resources/vr_shell/vr_shell_ui.js

Index: chrome/browser/resources/vr_shell/vr_shell_ui.js
diff --git a/chrome/browser/resources/vr_shell/vr_shell_ui.js b/chrome/browser/resources/vr_shell/vr_shell_ui.js
index 3cb3d389b47e3975591d6762a006bf1bf33200af..a219f3ccd78111752132b3949cef14a830cdf79f 100644
--- a/chrome/browser/resources/vr_shell/vr_shell_ui.js
+++ b/chrome/browser/resources/vr_shell/vr_shell_ui.js
@@ -34,6 +34,9 @@ var vrShellUi = (function() {
       /** @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 = 1.2;
+      /** @const */ this.MENU_MODE_SCREEN_HEIGHT = 0.5;
+      /** @const */ this.MENU_MODE_SCREEN_ELEVATION = 0.1;
 
       let element = new api.UiElement(0, 0, 0, 0);
       element.setIsContentQuad();
@@ -57,19 +60,41 @@ var vrShellUi = (function() {
       }
     }
 
-    setOpacity(opacity) {
-      let update = new api.UiElementUpdate();
-      update.setOpacity(opacity);
-      ui.updateElement(this.elementId, update);
+    setMenuMode(enabled) {
+      if (this.menuMode == enabled)
+        return;
+      this.menuMode = enabled;
+      this.updateState()
     }
 
     setFullscreen(enabled) {
-      let anim = new api.Animation(this.elementId, ANIM_DURATION);
-      if (enabled) {
-        anim.setTranslation(0, 0, -this.FULLSCREEN_DISTANCE);
-      } else {
-        anim.setTranslation(0, 0, -this.BROWSING_SCREEN_DISTANCE);
+      if (this.fullscreen == enabled)
+        return;
+      this.fullscreen = enabled;
+      this.updateState()
+    }
+
+    updateState() {
+      // Defaults content quad parameters.
+      let y = 0;
+      let z = -this.BROWSING_SCREEN_DISTANCE;
+      let height = this.SCREEN_HEIGHT;
+
+      // Mode-specific overrides.
+      if (this.menuMode) {
+        y = this.MENU_MODE_SCREEN_ELEVATION;
+        z = -this.MENU_MODE_SCREEN_DISTANCE;
+        height = this.MENU_MODE_SCREEN_HEIGHT;
+      } else if (this.fullscreen) {
+        z = -this.FULLSCREEN_DISTANCE;
       }
+
+      let anim;
+      anim = new api.Animation(this.elementId, ANIM_DURATION);
+      anim.setTranslation(0, y, z);
+      ui.addAnimation(anim);
+      anim = new api.Animation(this.elementId, ANIM_DURATION);
+      anim.setSize(height * this.SCREEN_RATIO, height);
       ui.addAnimation(anim);
     }
 
@@ -168,14 +193,17 @@ var vrShellUi = (function() {
         ],
       ];
 
-      /** @const */ var BUTTON_SPACING = 0.136;
+      /** @const */ var BUTTON_Y = -0.27;
+      /** @const */ var BUTTON_Z = -1;
+      /** @const */ var BUTTON_SPACING = 0.11;
 
       let startPosition = -BUTTON_SPACING * (descriptors.length / 2.0 - 0.5);
       for (let i = 0; i < descriptors.length; i++) {
         // Use an invisible parent to simplify Z-axis movement on hover.
         let position = new api.UiElement(0, 0, 0, 0);
         position.setVisible(false);
-        position.setTranslation(startPosition + i * BUTTON_SPACING, -0.68, -1);
+        position.setTranslation(
+            startPosition + i * BUTTON_SPACING, BUTTON_Y, BUTTON_Z);
         let id = ui.addElement(position);
 
         let domId = descriptors[i][0];
@@ -220,6 +248,9 @@ var vrShellUi = (function() {
 
       let update = new api.UiElementUpdate();
       update.setVisible(false);
+      update.setSize(0.5, 0.2, 1);
+      update.setTranslation(0, -2, -1);
+      update.setRotation(1, 0, 0, -0.8);

[tiborg1, 2017/02/06 16:05:45]

Should these numbers be defined as const? Maybe it's overkill since it's a dev
button anyways.

[cjgrant, 2017/02/06 16:35:56]

I didn't bother here, as it's a dev button, and its location/presentation change
whenever they interfere with the UI.  The Josh meetings this week should help us
pick a better path for defining all such properties in CSS.

       ui.updateElement(this.uiElement.uiElementId, update);
     }
 
@@ -506,6 +537,7 @@ var vrShellUi = (function() {
       // Watch for the enter key to trigger navigation.
       this.inputField.addEventListener('keypress', function(e) {
         if (e.keyCode == 13) {
+          this.setSuggestions([]);
           api.doAction(
               // TODO(crbug.com/683344): Properly choose prefix.
               api.Action.LOAD_URL, {'url': 'http://' + e.target.value});
@@ -518,12 +550,13 @@ var vrShellUi = (function() {
       });
 
       // Clicking on suggestions triggers navigation.
-      let elements = root.querySelectorAll('.omnibox-suggestion');
+      let elements = root.querySelectorAll('.suggestion');
       this.maxSuggestions = elements.length;
       for (var i = 0; i < elements.length; i++) {
         elements[i].addEventListener('click', function(index, e) {
           if (e.target.url) {
             api.doAction(api.Action.LOAD_URL, {'url': e.target.url});
+            this.setSuggestions([]);
           }
         }.bind(this, i));
       }
@@ -592,8 +625,9 @@ var vrShellUi = (function() {
 
       api.doAction(api.Action.SET_CONTENT_PAUSED, {'paused': menuMode});
 
-      this.contentQuad.setEnabled(mode == api.Mode.STANDARD && !menuMode);
+      this.contentQuad.setEnabled(mode == api.Mode.STANDARD);
       this.contentQuad.setFullscreen(this.fullscreen);
+      this.contentQuad.setMenuMode(menuMode);
       // TODO(crbug/643815): Set aspect ratio on content quad when available.
       this.controls.setEnabled(menuMode);
       this.omnibox.setEnabled(menuMode);