Add an initial omnibox to HTML UI content.

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 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;
       /** @const */ var SCREEN_DISTANCE = 2.0;
 
       let element = new api.UiElement(0, 0, 0, 0);
       element.setIsContentQuad(false);
       element.setVisible(false);
       element.setSize(SCREEN_HEIGHT * 16 / 9, SCREEN_HEIGHT);
       element.setTranslation(0, 0, -SCREEN_DISTANCE);
       this.elementId = scene.addElement(element);
     }
 
     show(visible) {
       let update = new api.UiElementUpdate();
       update.setVisible(visible);
       scene.updateElement(this.elementId, update);
     }
 
     getElementId() {
       return this.elementId;
     }
   };
 
   class DomUiElement {
     constructor(domId) {
       let domElement = document.querySelector(domId);
       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;
       this.domElement = domElement;
     }
   };
 
   class RoundButton extends DomUiElement {
     constructor(domId, callback) {
       super(domId);
@@ skipping 35 matching lines @@
             api.doAction(api.Action.HISTORY_BACK);
           }],
           ['#reload', function() {
             api.doAction(api.Action.RELOAD);
           }],
           ['#forward', function() {
             api.doAction(api.Action.HISTORY_FORWARD);
           }],
       ];
 
-      /** @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];
         let callback = descriptors[i][1];
         let element = new RoundButton(domId, callback);
         this.buttons.push(element);
 
         let update = new api.UiElementUpdate();
         update.setParentId(id);
         update.setVisible(false);
-        update.setScale(2.2, 2.2, 1);
         scene.updateElement(element.uiElementId, update);
       }
 
       this.reloadUiButton = new DomUiElement('#reload-ui-button');
       this.reloadUiButton.domElement.addEventListener('click', function() {
         scene.purge();
         api.doAction(api.Action.RELOAD_UI);
       });
 
       let update = new api.UiElementUpdate();
@@ skipping 92 matching lines @@
       scene.updateElement(this.transientWarning.uiElementId, update);
     }
 
     onTransientTimer() {
       let update = new api.UiElementUpdate();
       update.setVisible(false);
       scene.updateElement(this.transientWarning.uiElementId, update);
       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 {
     constructor() {
       this.mode = api.Mode.UNKNOWN;
 
       this.contentQuad = new ContentQuad();
       let contentId = this.contentQuad.getElementId();
 
       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);
     }
 
     setSecureOrigin(secure) {
       this.secureOriginWarnings.setSecureOrigin(secure);
     }
 
     setReloadUiEnabled(enabled) {
-      console.log('ENABLE');
       this.controls.setReloadUiEnabled(enabled);
     }
   };
 
   function initialize() {
     sceneManager = new SceneManager();
     scene.flush();
 
     api.domLoaded();
   }
 
   function command(dict) {
     if ('mode' in dict) {
       sceneManager.setMode(dict['mode']);
     }
     if ('secureOrigin' in dict) {
       sceneManager.setSecureOrigin(dict['secureOrigin']);
     }
     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();
   }
 
   return {
     initialize: initialize,
     command: command,
   };
 })();
 
 document.addEventListener('DOMContentLoaded', vrShellUi.initialize);