Separate VR omnibox and suggestion UI elements.

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 b9fa59cf5b614eaf25918659e87c96b4d7af1735..dc9b275a693327b8cd2b3813de6894c3da58f60c 100644
--- a/chrome/browser/resources/vr_shell/vr_shell_ui.js
+++ b/chrome/browser/resources/vr_shell/vr_shell_ui.js
@@ -662,13 +662,13 @@ var vrShellUi = (function() {
     constructor() {
       this.enabled = false;
 
-      this.domUiElement = new DomUiElement('#omnibox-ui-element');
-      let root = this.domUiElement.domElement;
+      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(true);
+      update.setVisible(false);
       ui.updateElement(this.domUiElement.id, update);
 
       // Field-clearing button.
@@ -696,6 +696,8 @@ var vrShellUi = (function() {
       // Clicking on suggestions triggers navigation.
       let elements = root.querySelectorAll('.suggestion');
       this.maxSuggestions = elements.length;
+      this.suggestions = [];
+      this.suggestionUiElements = [];
       for (var i = 0; i < elements.length; i++) {
         elements[i].addEventListener('click', function(index, e) {
           if (e.target.url) {
@@ -703,7 +705,19 @@ var vrShellUi = (function() {
             this.setSuggestions([]);
           }
         }.bind(this, i));
+
+        let elem = new DomUiElement('#suggestion-' + i);
+        this.suggestionUiElements.push(elem);
+        let update = new api.UiElementUpdate();
+        update.setVisible(false);
+        update.setParentId(this.domUiElement.id);
+        update.setAnchoring(api.XAnchoring.XNONE, api.YAnchoring.YTOP);
+        // Vertically offset suggestions to stack on top of the omnibox. The 0.5
+        // offset moves each anchor point from center to edge.
+        update.setTranslation(0, elem.sizeY * (i + 0.5), 0);
+        ui.updateElement(elem.id, update);
       }
+      this.setSuggestions([]);
     }
 
     setEnabled(enabled) {
@@ -711,6 +725,7 @@ var vrShellUi = (function() {
       let update = new api.UiElementUpdate();
       update.setVisible(enabled);
       ui.updateElement(this.domUiElement.id, update);
+      this.updateSuggestions();
     }
 
     setURL(url) {
@@ -718,17 +733,24 @@ var vrShellUi = (function() {
     }
 
     setSuggestions(suggestions) {
+      this.suggestions = suggestions;
+      this.updateSuggestions();
+    }
+
+    updateSuggestions() {
       for (var i = 0; i < this.maxSuggestions; i++) {
         let element = document.querySelector('#suggestion-' + i);
-        if (i >= suggestions.length) {
+        let update = new api.UiElementUpdate();
+        if (this.enabled && i < this.suggestions.length) {
+          element.textContent = this.suggestions[i].description;
+          element.url = this.suggestions[i].url;
+          update.setVisible(true);
+        } else {
           element.textContent = '';
-          element.style.visibility = 'hidden';
           element.url = null;
-        } else {
-          element.textContent = suggestions[i].description;
-          element.style.visibility = 'visible';
-          element.url = suggestions[i].url;
+          update.setVisible(false);
         }
+        ui.updateElement(this.suggestionUiElements[i].id, update);
       }
     }
   };