Separate VR omnibox and suggestion UI elements.

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 644 matching lines @@
           }
           break;
       }
     }
   };
 
   class Omnibox {
     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.
       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) {
         if (e.keyCode == 13) {
           this.setSuggestions([]);
           api.doAction(
               // TODO(crbug.com/683344): Properly choose prefix.
               api.Action.LOAD_URL, {'url': 'http://' + e.target.value});
         }
       });
 
       // Watch for field input to generate suggestions.
       this.inputField.addEventListener('input', function(e) {
         api.doAction(api.Action.OMNIBOX_CONTENT, {'text': e.target.value});
       });
 
       // 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) {
             api.doAction(api.Action.LOAD_URL, {'url': e.target.url});
             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) {
       this.enabled = enabled;
       let update = new api.UiElementUpdate();
       update.setVisible(enabled);
       ui.updateElement(this.domUiElement.id, update);
+      this.updateSuggestions();
     }
 
     setURL(url) {
       this.inputField.value = url;
     }
 
     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);
       }
     }
   };
 
   // Shows the open tabs.
   //
   // The tab container is made of three <div> nesting levels. The first is the
   // tab container element, which acts like a scroll view. It has a fixed size
   // and corresponds to a UI element in the scene. The second level is the clip
   // element, which is programmatically set to the total width of all it's
@@ skipping 329 matching lines @@
     nativeCommandHandler.handleCommand(dict);
   }
 
   return {
     initialize: initialize,
     command: command,
   };
 })();
 
 window.addEventListener('load', vrShellUi.initialize);