Add initial VR interactive omnibox.

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 939b6e53366488032e28d0337746024ffcd59e5e..dac0786b4fde43505cfaf18a8b175d595ae427db 100644
--- a/chrome/browser/resources/vr_shell/vr_shell_ui.js
+++ b/chrome/browser/resources/vr_shell/vr_shell_ui.js
@@ -47,6 +47,12 @@ var vrShellUi = (function() {
       ui.updateElement(this.elementId, update);
     }
 
+    setOpacity(opacity) {
+      let update = new api.UiElementUpdate();
+      update.setOpacity(opacity);
+      ui.updateElement(this.elementId, update);
+    }
+
     setFullscreen(enabled) {
       let anim = new api.Animation(this.elementId, ANIM_DURATION);
       if (enabled) {
@@ -129,26 +135,25 @@ var vrShellUi = (function() {
   class Controls {
     constructor(contentQuadId) {
       this.enabled = false;
-      this.reloadUiEnabled = false;
 
       this.buttons = [];
       let descriptors = [
         [
           '#back',
           function() {
-            api.doAction(api.Action.HISTORY_BACK);
+            api.doAction(api.Action.HISTORY_BACK, {});
           }
         ],
         [
           '#reload',
           function() {
-            api.doAction(api.Action.RELOAD);
+            api.doAction(api.Action.RELOAD, {});
           }
         ],
         [
           '#forward',
           function() {
-            api.doAction(api.Action.HISTORY_FORWARD);
+            api.doAction(api.Action.HISTORY_FORWARD, {});
           }
         ],
       ];
@@ -173,20 +178,6 @@ var vrShellUi = (function() {
         update.setVisible(false);
         ui.updateElement(element.uiElementId, update);
       }
-
-      this.reloadUiButton = new DomUiElement('#reload-ui-button');

[cjgrant, 2017/01/20 17:25:20]

The reloadUiButton rework in this module is just decoupling it from the actual
controls.  It was originally coupled only for easy positioning.

-      this.reloadUiButton.domElement.addEventListener('click', function() {
-        ui.purge();
-        api.doAction(api.Action.RELOAD_UI);
-      });
-
-      let update = new api.UiElementUpdate();
-      update.setParentId(contentQuadId);
-      update.setVisible(false);
-      update.setScale(2.2, 2.2, 1);
-      update.setTranslation(0, -0.6, 0.3);
-      update.setAnchoring(api.XAnchoring.XNONE, api.YAnchoring.YBOTTOM);
-      ui.updateElement(this.reloadUiButton.uiElementId, update);
     }
 
     setEnabled(enabled) {
@@ -194,20 +185,43 @@ var vrShellUi = (function() {
       this.configure();
     }
 
-    setReloadUiEnabled(enabled) {
-      this.reloadUiEnabled = enabled;
-      this.configure();
-    }
-
     configure() {
       for (let i = 0; i < this.buttons.length; i++) {
         let update = new api.UiElementUpdate();
         update.setVisible(this.enabled);
         ui.updateElement(this.buttons[i].uiElementId, update);
       }
+    }
+  };
+
+  class ReloadUiButton {
+    constructor() {
+      this.enabled = false;
+      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);
+      ui.updateElement(this.uiElement.uiElementId, update);
+    }
+
+    setEnabled(enabled) {
+      this.enabled = enabled;
+      let update = new api.UiElementUpdate();
+      update.setVisible(this.enabled && this.devMode);
+      ui.updateElement(this.uiElement.uiElementId, update);

[bshe, 2017/01/23 16:24:37]

nit: move line 215 to 217 out as a reusable function?

[cjgrant, 2017/01/24 15:31:39]

Done.

+    }
+
+    setDevMode(enabled) {
+      this.devMode = enabled;
       let update = new api.UiElementUpdate();
-      update.setVisible(this.enabled && this.reloadUiEnabled);
-      ui.updateElement(this.reloadUiButton.uiElementId, update);
+      update.setVisible(this.enabled && this.devMode);
+      ui.updateElement(this.uiElement.uiElementId, update);
     }
   };
 
@@ -454,16 +468,88 @@ var vrShellUi = (function() {
     }
   };
 
+  class Omnibox {
+    constructor() {
+      this.enabled = false;
+      this.suggestionUrls = {};
+
+      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);
+
+      // 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) {
+          api.doAction(
+              api.Action.LOAD_URL, {'url': 'http://' + e.target.value});

[bshe, 2017/01/23 16:24:37]

does this mean we always try http request first? Is this the same as normal
omnibox?

[cjgrant, 2017/01/24 15:31:39]

This will have to be improved - this is only a first cut.

+        }
+      });
+
+      // 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.
+      for (var i = 0; i < 5; i++) {

[bshe, 2017/01/23 16:24:37]

avoid use magic number 5

[cjgrant, 2017/01/24 15:31:39]

Done.  I now count the number of available suggestion slots.

+        let element = root.querySelector('#suggestion-' + i);
+        element.addEventListener('click', function(index, e) {
+          let url = this.suggestionUrls[index];
+          console.log('Going to URL: ' + url);

[bshe, 2017/01/23 16:24:37]

nit: remove log in production code

[cjgrant, 2017/01/24 15:31:39]

Done.

+          api.doAction(api.Action.LOAD_URL, {'url': url});
+        }.bind(this, i));
+      }
+    }
+
+    setEnabled(enabled) {
+      this.enabled = enabled;
+
+      let update = new api.UiElementUpdate();
+      update.setVisible(enabled);
+      ui.updateElement(this.domUiElement.uiElementId, update);
+    }
+
+    setURL(url) {
+      let omnibox = this.domUiElement.domElement;

[bshe, 2017/01/23 16:24:37]

omnibox is not used?

[cjgrant, 2017/01/24 15:31:39]

Done.

+      this.inputField.value = url;
+    }
+
+    setSuggestions(suggestions) {
+      this.suggestionUrls = {};
+      for (var i = 0; i < 5; i++) {
+        let element = document.querySelector('#suggestion-' + i);
+        if (i >= suggestions.length) {
+          element.innerHTML = '';

[bshe, 2017/01/23 16:24:37]

nit: use textContent instead of innerHTML

[cjgrant, 2017/01/24 15:31:39]

Done.

+          element.style.visibility = 'hidden';
+        } else {
+          element.innerHTML = suggestions[i].description;
+          element.style.visibility = 'visible';
+          this.suggestionUrls[i] = suggestions[i].url;
+        }
+      }
+    }
+  };
+
   class VirtualKeyboard {
     constructor(contentQuadId) {
       this.domUiElement = new DomUiElement('#vkb');
       let update = new api.UiElementUpdate();
-      update.setParentId(contentQuadId);
       update.setVisible(false);
-      update.setScale(1.8, 1.8, 1.8);
-      update.setTranslation(0, -1.2, 0.1);
-      update.setRotation(1.0, 0.0, 0.0, -0.9);
-      update.setAnchoring(api.XAnchoring.XNONE, api.YAnchoring.YBOTTOM);
+      update.setScale(1.4, 1.4, 1);
+      update.setTranslation(0, -0.8, -1.5);
+      update.setRotation(1.0, 0.0, 0.0, -0.3);
       ui.updateElement(this.domUiElement.uiElementId, update);
     }
 
@@ -487,6 +573,8 @@ var vrShellUi = (function() {
       this.controls = new Controls(contentId);
       this.secureOriginWarnings = new SecureOriginWarnings();
       this.urlIndicator = new UrlIndicator();
+      this.omnibox = new Omnibox();
+      this.reloadUiButton = new ReloadUiButton();
     }
 
     setMode(mode, menuMode, fullscreen) {
@@ -496,9 +584,11 @@ var vrShellUi = (function() {
       this.menuMode = menuMode;
       this.fullscreen = fullscreen;
 
+      this.reloadUiButton.setEnabled(mode == api.Mode.STANDARD);
       this.keyboard.setEnabled(mode == api.Mode.STANDARD);
-      this.contentQuad.setEnabled(mode == api.Mode.STANDARD && !menuMode);
+      this.contentQuad.setEnabled(mode == api.Mode.STANDARD);
       this.contentQuad.setFullscreen(fullscreen);
+      this.contentQuad.setOpacity(menuMode ? 0.2 : 1.0);
       // TODO(crbug/643815): Set aspect ratio on content quad when available.
       // TODO(amp): Don't show controls in fullscreen once MENU mode lands.
       this.controls.setEnabled(mode == api.Mode.STANDARD && !menuMode);
@@ -508,6 +598,7 @@ var vrShellUi = (function() {
           mode == api.Mode.STANDARD && !menuMode ?
               0 :
               URL_INDICATOR_VISIBILITY_TIMEOUT_MS);
+      this.omnibox.setEnabled(menuMode);
       this.secureOriginWarnings.setEnabled(mode == api.Mode.WEB_VR);
 
       api.setUiCssSize(
@@ -521,10 +612,6 @@ var vrShellUi = (function() {
     setWebVRSecureOrigin(secure) {
       this.secureOriginWarnings.setSecure(secure);
     }
-
-    setReloadUiEnabled(enabled) {
-      this.controls.setReloadUiEnabled(enabled);
-    }
   };
 
   function initialize() {
@@ -545,11 +632,12 @@ var vrShellUi = (function() {
       uiManager.setWebVRSecureOrigin(dict['webVRSecureOrigin']);
     }
     if ('enableReloadUi' in dict) {
-      uiManager.setReloadUiEnabled(dict['enableReloadUi']);
+      uiManager.reloadUiButton.setDevMode(dict['enableReloadUi']);
     }
     if ('url' in dict) {
       let url = dict['url'];
       uiManager.urlIndicator.setURL(url['host'], url['path']);
+      uiManager.omnibox.setURL(url['host'] + url['path']);
     }
     if ('loading' in dict) {
       uiManager.urlIndicator.setLoading(dict['loading']);
@@ -557,6 +645,9 @@ var vrShellUi = (function() {
     if ('loadProgress' in dict) {
       uiManager.urlIndicator.setLoadProgress(dict['loadProgress']);
     }
+    if ('suggestions' in dict) {
+      uiManager.omnibox.setSuggestions(dict['suggestions']);
+    }
     ui.flush();
   }
 
@@ -567,14 +658,3 @@ var vrShellUi = (function() {
 })();
 
 document.addEventListener('DOMContentLoaded', vrShellUi.initialize);
-
-var input_field = document.querySelector("#input-field");
-//var events = ["keyup", "blur"];
-var events = ["keydown", "keyup", "changed"];
-for (var i = 0; i < events.length; i++) {
-  input_field.addEventListener(events[i], function(e) {
-    var now = window.performance.now();
-    console.log(e.type + ': ' + now);
-  }.bind(events[i]));
-}
-