Add an initial omnibox to HTML UI content.

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 2e93531193cb588f7beafc13625d406196bd6238..c00c818200466d6d9aba1e9cba1a5f2d821c6afb 100644
--- a/chrome/browser/resources/vr_shell/vr_shell_ui.js
+++ b/chrome/browser/resources/vr_shell/vr_shell_ui.js
@@ -8,6 +8,15 @@ var vrShellUi = (function() {
   let scene = new ui.Scene();
   let sceneManager;
 
+  let uiRootElement = document.querySelector('#ui');
+  let uiStyle = window.getComputedStyle(uiRootElement);
+  let scaleFactor = uiStyle.getPropertyValue('--scaleFactor');

[bshe, 2016/11/01 22:24:13]

I am not sure I understand why do you want to get the value from css through
--scaleFactor? why not define it in js directly?

[cjgrant, 2016/11/09 16:33:26]

This scaling factor is required to correct for the "transform: scale()" we do in
CSS.  I want to keep the values together, like this:

#ui {
  --scaleFactor: 4;
  transform: scale(0.25, 0.25);
  ...
}

This way, if we change or remove this scaling, it's easy to locate.

+
+  function getStyleFloat(style, property) {
+    let value = parseFloat(style.getPropertyValue(property));
+    return isNaN(value) ? 0 : value;
+  }
+
   class ContentQuad {
     constructor() {
       /** @const */ var SCREEN_HEIGHT = 1.6;
@@ -38,13 +47,22 @@ var vrShellUi = (function() {
       let style = window.getComputedStyle(domElement);

[bshe, 2016/11/01 22:24:12]

huh. Just realize that we call getComputedStyle for each new element. It is not
a very cheap operation:
https://gist.github.com/paulirish/5d52fb081b3570c81e3a#getcomputedstyle
It can be a future TODO, but we probably should try to reduce the number of
calls. 

[cjgrant, 2016/11/09 16:33:26]

That's interesting.  I'll profile this.  We won't be querying many objects at
this point, but from what you posted, maybe there's a better way.  The
information we want should already be computed, and we don't want to cause any
relayout/recomputation if we can avoid it.

[cjgrant, 2016/11/09 18:03:34]

So FWIW, it looks like the impact of getComputedStyle is small.  We seem to
incur < 1 ms per call, while the creation of the UI takes quite a while 50 to
100 ms.  This excludes time required to actually flush the scene updates to
native.  So something is taking a while, but it's not the style calls, I
believe.

[bshe, 2016/11/10 18:06:49]

yah. I would imagine for our simple UI, this shouldn't take a long time. But as
our UI scales, we might need to be careful about this calls.

 
       // Pull copy rectangle from DOM element properties.
-      let pixelX = domElement.offsetLeft;
-      let pixelY = domElement.offsetTop;
-      let pixelWidth = parseInt(style.getPropertyValue('width'));
-      let pixelHeight = parseInt(style.getPropertyValue('height'));
+      let pixelX = Math.round(domElement.offsetLeft / scaleFactor);
+      let pixelY = Math.round(domElement.offsetTop / scaleFactor);
+      let pixelWidth = Math.round(
+          parseInt(style.getPropertyValue('width')) / scaleFactor);
+      let pixelHeight = Math.round(
+          parseInt(style.getPropertyValue('height')) / scaleFactor);
 
       let element = new api.UiElement(pixelX, pixelY, pixelWidth, pixelHeight);
-      element.setSize(pixelWidth / 1000, pixelHeight / 1000);
+      element.setSize(scaleFactor * pixelWidth / 1000,
+          scaleFactor * pixelHeight / 1000);
+
+      // Pull additional custom properties from CSS.
+      element.setTranslation(
+          getStyleFloat(style, '--tranX'),
+          getStyleFloat(style, '--tranY'),
+          getStyleFloat(style, '--tranZ'));
 
       this.uiElementId = scene.addElement(element);
       this.uiAnimationId = -1;
@@ -100,17 +118,14 @@ var vrShellUi = (function() {
           }],
       ];
 
-      /** @const */ var BUTTON_SPACING = 0.3;
+      /** @const */ var BUTTON_SPACING = 0.136;
 
       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.setParentId(contentQuadId);
         position.setVisible(false);
-        position.setAnchoring(api.XAnchoring.XNONE, api.YAnchoring.YBOTTOM);
-        position.setTranslation(
-            startPosition + i * BUTTON_SPACING, -0.3, 0.3);
+        position.setTranslation(startPosition + i * BUTTON_SPACING, -0.68, -1);
         let id = scene.addElement(position);
 
         let domId = descriptors[i][0];
@@ -121,7 +136,6 @@ var vrShellUi = (function() {
         let update = new api.UiElementUpdate();
         update.setParentId(id);
         update.setVisible(false);
-        update.setScale(2.2, 2.2, 1);
         scene.updateElement(element.uiElementId, update);
       }
 
@@ -234,7 +248,38 @@ var vrShellUi = (function() {
       this.secureOriginTimer = null;
       scene.flush();
     }
+  };
+
+  class Omnibox {
+    constructor(contentQuadId) {
+      this.setSecure(false);
+      this.domUiElement = new DomUiElement('#omni');
+      let update = new api.UiElementUpdate();
+      update.setVisible(false);
+      scene.updateElement(this.domUiElement.uiElementId, update);
+    }
+
+    show(visible) {
+      let update = new api.UiElementUpdate();
+      update.setVisible(visible);
+      scene.updateElement(this.domUiElement.uiElementId, update);
+    }
+
+    setLoading(loading) {
+      this.domUiElement.domElement.className = loading ? 'loading' : 'idle';
+    }
 
+    setURL(host, path) {
+      let omnibox = this.domUiElement.domElement;
+      omnibox.querySelector('#domain').innerHTML = host;
+      omnibox.querySelector('#path').innerHTML = path;
+    }
+
+    setSecure(secure) {
+      let image = secure ? 'lock.svg' : 'i_circle.svg';
+      let path = '../../../../ui/webui/resources/images/' + image;
+      document.querySelector('#connection-security').src = path;
+    }
   };
 
   class SceneManager {
@@ -246,12 +291,14 @@ var vrShellUi = (function() {
 
       this.controls = new Controls(contentId);
       this.secureOriginWarnings = new SecureOriginWarnings();
+      this.omnibox = new Omnibox(contentId);
     }
 
     setMode(mode) {
       this.mode = mode;
       this.contentQuad.show(mode == api.Mode.STANDARD);
       this.controls.show(mode == api.Mode.STANDARD);
+      this.omnibox.show(mode == api.Mode.STANDARD);
       this.secureOriginWarnings.show(mode == api.Mode.WEB_VR);
     }
 
@@ -260,7 +307,6 @@ var vrShellUi = (function() {
     }
 
     setReloadUiEnabled(enabled) {
-      console.log('ENABLE');
       this.controls.setReloadUiEnabled(enabled);
     }
   };
@@ -282,6 +328,13 @@ var vrShellUi = (function() {
     if ('enableReloadUi' in dict) {
       sceneManager.setReloadUiEnabled(dict['enableReloadUi']);
     }
+    if ('url' in dict) {
+      let url = dict['url'];
+      sceneManager.omnibox.setURL(url['host'], url['path']);
+    }
+    if ('loading' in dict) {
+      sceneManager.omnibox.setLoading(dict['loading']);
+    }
     scene.flush();
   }