Remove fixed positioning of HTML 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 scene = new ui.Scene();
   let sceneManager;
 
@@ skipping 26 matching lines @@
     }
 
     getElementId() {
       return this.elementId;
     }
   };
 
   class DomUiElement {
     constructor(domId) {
       let domElement = document.querySelector(domId);
-      let style = window.getComputedStyle(domElement);
 
-      // Pull copy rectangle from DOM element properties.
-      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);
+      // Pull copy rectangle from the position of the element.
+      let rect = domElement.getBoundingClientRect();
+      let pixelX = Math.floor(rect.left);
+      let pixelY = Math.floor(rect.top);
+      let pixelWidth = Math.ceil(rect.right) - pixelX;
+      let pixelHeight = Math.ceil(rect.bottom) - pixelY;
 
       let element = new api.UiElement(pixelX, pixelY, pixelWidth, pixelHeight);
       element.setSize(scaleFactor * pixelWidth / 1000,
           scaleFactor * pixelHeight / 1000);
 
       // Pull additional custom properties from CSS.
+      let style = window.getComputedStyle(domElement);
       element.setTranslation(
           getStyleFloat(style, '--tranX'),
           getStyleFloat(style, '--tranY'),
           getStyleFloat(style, '--tranZ'));
 
       this.uiElementId = scene.addElement(element);
       this.uiAnimationId = -1;
       this.domElement = domElement;
     }
   };
@@ skipping 173 matching lines @@
       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.setSecureOrigin(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;
+    setSecureOrigin(secure) {
+      document.querySelector('#omni-secure-icon').style.display =
+          (secure ? 'block' : 'none');
+      document.querySelector('#omni-insecure-icon').style.display =
+          (!secure ? 'block' : 'none');
     }
   };
 
   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);
+      this.omnibox.setSecureOrigin(secure);
     }
 
     setReloadUiEnabled(enabled) {
       this.controls.setReloadUiEnabled(enabled);
     }
   };
 
   function initialize() {
     sceneManager = new SceneManager();
     scene.flush();
@@ skipping 21 matching lines @@
     scene.flush();
   }
 
   return {
     initialize: initialize,
     command: command,
   };
 })();
 
 document.addEventListener('DOMContentLoaded', vrShellUi.initialize);