Control the VrShell content quad via the HTML UI.

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;
 
+  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);
 
       // 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'));
@@ skipping 34 matching lines @@
     onMouseEnter() {
       this.configure(1, 1, 0.015);
     }
 
     onMouseLeave() {
       this.configure(0.8, 0, 0);
     }
   };
 
   class Controls {
-    constructor() {
+    constructor(contentQuadId) {
       this.buttons = [];
       let descriptors = [
           ['#back', function() {
             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;
 
       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(api.getContentElementId());
+        position.setParentId(contentQuadId);
         position.setVisible(false);
         position.setAnchoring(api.XAnchoring.XNONE, api.YAnchoring.YBOTTOM);
         position.setTranslation(
             startPosition + i * BUTTON_SPACING, -0.3, 0.3);
         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);
@@ skipping 86 matching lines @@
       scene.updateElement(this.transientWarning.uiElementId, update);
       this.secureOriginTimer = null;
       scene.flush();
     }
 
   };
 
   class SceneManager {
     constructor() {
       this.mode = api.Mode.UNKNOWN;
-      this.controls = new Controls();
+
+      this.contentQuad = new ContentQuad();
+      let contentId = this.contentQuad.getElementId();
+
+      this.controls = new Controls(contentId);
       this.secureOriginWarnings = new SecureOriginWarnings();
     }
 
     setMode(mode) {
       this.mode = mode;
+      this.contentQuad.show(mode == api.Mode.STANDARD);
       this.controls.show(mode == api.Mode.STANDARD);
       this.secureOriginWarnings.show(mode == api.Mode.WEB_VR);
     }
 
     setSecureOrigin(secure) {
       this.secureOriginWarnings.setSecureOrigin(secure);
     }
   };
 
   function initialize() {
@@ skipping 19 matching lines @@
     scene.flush();
   }
 
   return {
     initialize: initialize,
     command: command,
   };
 })();
 
 document.addEventListener('DOMContentLoaded', vrShellUi.initialize);