VrShell background implemented in JS.

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 ui = new scene.Scene();
   let uiManager;
 
@@ skipping 435 matching lines @@
       if (visible == this.nativeState.visible) {
         return;
       }
       this.nativeState.visible = visible;
       let update = new api.UiElementUpdate();
       update.setVisible(visible);
       ui.updateElement(this.domUiElement.uiElementId, update);
       ui.flush();
     }
   };
+  
+  class Background {
+    constructor() {
+      // Make ground plane.
+      let groundPlane = new api.UiElementUpdate();
+      groundPlane.setVisible(true);
+      groundPlane.setSize(25.0, 25.0);
+      groundPlane.setFill(new api.OpaqueGradient({r: 0.48, g: 0.48, b: 0.48, a:1},
+        {r: 0.57, g: 0.57, b: 0.57, a:1}));
+      groundPlane.setTranslation(0, -2, 0);
+      groundPlane.setRotation(1.0, 0.0, 0.0, -Math.PI/2);
+      this.groundPlaneId = ui.addElement(groundPlane);
+      
+      // Make ceiling plane.
+      let ceilingPlane = new api.UiElementUpdate();
+      ceilingPlane.setVisible(true);
+      ceilingPlane.setSize(25.0, 25.0);
+      ceilingPlane.setFill(new api.OpaqueGradient({r: 0.48, g: 0.48, b: 0.48, a:1},
+        {r: 0.57, g: 0.57, b: 0.57, a:1}));
+      ceilingPlane.setTranslation(0, 2, 0);
+      ceilingPlane.setRotation(1.0, 0.0, 0.0, Math.PI/2);
+      this.ceilingPlaneId = ui.addElement(ceilingPlane);
+      
+      // Ground grid.
+      let groundGrid = new api.UiElementUpdate();
+      groundGrid.setVisible(true);
+      groundGrid.setSize(25.0, 25.0);
+      groundGrid.setFill(new api.GridGradient({r: 0.57, g: 0.57, b: 0.57, a:1},
+        {r: 0.57, g: 0.57, b: 0.57, a:1}, 10));
+      groundGrid.setTranslation(0, -1.99, 0);
+      groundGrid.setRotation(1.0, 0.0, 0.0, -Math.PI/2);
+      this.groundGridId = ui.addElement(groundGrid);
+    }
+    
+    setEnabled(enabled) {
+      let groundPlaneUpdate = new api.UiElementUpdate();
+      groundPlaneUpdate.setVisible(enabled);
+      ui.updateElement(this.groundPlaneId, groundPlaneUpdate);
+      let ceilingPlaneUpdate = new api.UiElementUpdate();
+      ceilingPlaneUpdate.setVisible(enabled);
+      ui.updateElement(this.ceilingPlaneId, ceilingPlaneUpdate);
+      let groundGridUpdate = new api.UiElementUpdate();
+      groundGridUpdate.setVisible(enabled);
+      ui.updateElement(this.groundGridId, groundGridUpdate);
+    }
+  };
 
   class UiManager {
     constructor() {
       this.mode = api.Mode.UNKNOWN;
       this.menuMode = false;
       this.fullscreen = false;
-
+      

[mthiesse, 2017/01/31 20:54:54]

nit: whitespace here and below

[tiborg1, 2017/02/01 00:22:18]

Done.

+      this.background = new Background();
       this.contentQuad = new ContentQuad();
       let contentId = this.contentQuad.getElementId();
 
       this.controls = new Controls(contentId);
       this.secureOriginWarnings = new SecureOriginWarnings();
       this.urlIndicator = new UrlIndicator();
+      
+      
     }
 
     setMode(mode, menuMode, fullscreen) {
       /** @const */ var URL_INDICATOR_VISIBILITY_TIMEOUT_MS = 5000;
 
       this.mode = mode;
       this.menuMode = menuMode;
       this.fullscreen = fullscreen;
 
       this.contentQuad.setEnabled(mode == api.Mode.STANDARD && !menuMode);
       this.contentQuad.setFullscreen(fullscreen);
       // 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);
       this.urlIndicator.setEnabled(mode == api.Mode.STANDARD && !menuMode);
       // TODO(amp): Don't show controls in CINEMA mode once MENU mode lands.
       this.urlIndicator.setVisibilityTimeout(
           mode == api.Mode.STANDARD && !menuMode ?
               0 :
               URL_INDICATOR_VISIBILITY_TIMEOUT_MS);
       this.secureOriginWarnings.setEnabled(mode == api.Mode.WEB_VR);
+      this.background.setEnabled(mode == api.Mode.STANDARD && !menuMode);
 
       api.setUiCssSize(
           uiRootElement.clientWidth, uiRootElement.clientHeight, UI_DPR);
     }
 
     setSecurityLevel(level) {
       this.urlIndicator.setSecurityLevel(level);
     }
 
     setWebVRSecureOrigin(secure) {
@@ skipping 38 matching lines @@
     ui.flush();
   }
 
   return {
     initialize: initialize,
     command: command,
   };
 })();
 
 window.addEventListener('load', vrShellUi.initialize);