Background correctly adapts to state in Chrome VR.

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;
   let nativeCommandHandler;
@@ skipping 591 matching lines @@
         b: this.HORIZON_COLOR.b,
         a: 0
       };
       groundGrid.setFill(new api.GridGradient(
           transparentHorizonColor, this.HORIZON_COLOR, this.GRIDLINE_COUNT));
       groundGrid.setTranslation(0, -this.SCENE_HEIGHT / 2 + 0.01, 0);
       groundGrid.setRotation(1.0, 0.0, 0.0, -Math.PI / 2);
       groundGrid.setDrawPhase(0);
       this.groundGridId = ui.addElement(groundGrid);
 
+      this.setHiddenBackground();
+    }
+
+    setElementVisible(elementId, visible) {

[tiborg, 2017/03/01 18:28:15]

This method should probably be in some general utility class or in a dedicated
UI element class. Due to the future ownership of this file I'm hesitant to do
this refactor now.

[cjgrant, 2017/03/01 22:30:48]

Agreed.

+      let update = new api.UiElementUpdate();
+      update.setVisible(visible);
+      ui.updateElement(elementId, update);
+    }
+
+    setLightBackground() {
+      this.setElementVisible(this.groundPlaneId, true);
+      this.setElementVisible(this.ceilingPlaneId, true);
+      this.setElementVisible(this.groundGridId, true);
       ui.setBackgroundColor(this.HORIZON_COLOR);
     }
 
-    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);
+    setDarkBackground() {
+      this.setElementVisible(this.groundPlaneId, false);
+      this.setElementVisible(this.ceilingPlaneId, false);
+      this.setElementVisible(this.groundGridId, true);
+      ui.setBackgroundColor(this.FULLSCREEN_BACKGROUND_COLOR);
     }
 
-    setFullscreen(fullscreen) {
-      let groundPlaneUpdate = new api.UiElementUpdate();
-      groundPlaneUpdate.setVisible(!fullscreen);
-      ui.updateElement(this.groundPlaneId, groundPlaneUpdate);
-      let ceilingPlaneUpdate = new api.UiElementUpdate();
-      ceilingPlaneUpdate.setVisible(!fullscreen);
-      ui.updateElement(this.ceilingPlaneId, ceilingPlaneUpdate);
+    setHiddenBackground() {
+      this.setElementVisible(this.groundPlaneId, false);
+      this.setElementVisible(this.ceilingPlaneId, false);
+      this.setElementVisible(this.groundGridId, false);
+      ui.setBackgroundColor(this.FULLSCREEN_BACKGROUND_COLOR);
+    }
 
-      // Set darker background color for fullscreen since the user might
-      // potentially watch a video.
-      if (fullscreen) {
-        ui.setBackgroundColor(this.FULLSCREEN_BACKGROUND_COLOR);
-      } else {
-        ui.setBackgroundColor(this.HORIZON_COLOR);
+    setState(mode, menuMode, fullscreen) {
+      switch (mode) {
+        case api.Mode.STANDARD:

[cjgrant, 2017/03/01 22:30:48]

For another change (possibly by me) - Mode used to have more options, but now
it's WebVR or not.  I think we should return this to a boolean.  There may be
some extra bit needed to make sure that we don't draw one or the other, before
we know which mode we're in initially.

[cjgrant, 2017/03/01 22:30:48]

I could be wrong, but this appears to be:

if (menu) {
  Light
} else if (webVr) {
  Hidden
} else if (fullscreen) {
  Dark
} else {
  Light
}

Is that simpler?  Also, if in fullscreen, when we enter menu, do we want the
menu to stay dark?

[tiborg, 2017/03/02 20:39:29]

I played around with it a bit and I agree that the background should stay dark
for menu mode in fullscreen so that it's not so disruptive when you quickly go
to menu mode and back. Changed it accordingly.

[tiborg, 2017/03/02 20:39:29]

Regarding the mode boolean: sounds good to me.

+          if (fullscreen) {
+            if (menuMode) {
+              this.setLightBackground();
+            } else {
+              this.setDarkBackground();
+            }
+          } else {
+            this.setLightBackground();
+          }
+          break;
+        case api.Mode.WEB_VR:
+          if (menuMode) {
+            this.setLightBackground();
+          } else {
+            this.setHiddenBackground();
+          }
+          break;
       }
     }
   };
 
   class Omnibox {
     constructor() {
       this.enabled = false;
 
       this.domUiElement = new DomUiElement('#omnibox-ui-element');
       let root = this.domUiElement.domElement;
@@ skipping 241 matching lines @@
     handleAppButtonClicked() {
       this.menuMode = !this.menuMode;
       this.updateState();
     }
 
     updateState() {
       /** @const */ var URL_INDICATOR_VISIBILITY_TIMEOUT_MS = 5000;
 
       let mode = this.mode;
       let menuMode = this.menuMode;
+      let fullscreen = this.fullscreen;
 
       api.doAction(api.Action.SET_CONTENT_PAUSED, {'paused': menuMode});
 
-      this.background.setEnabled(mode == api.Mode.STANDARD);
       this.contentQuad.setEnabled(mode == api.Mode.STANDARD);
-      this.contentQuad.setFullscreen(this.fullscreen);
+      this.contentQuad.setFullscreen(fullscreen);
       this.contentQuad.setMenuMode(menuMode);
       // TODO(crbug/643815): Set aspect ratio on content quad when available.
       this.controls.setEnabled(menuMode);
       this.omnibox.setEnabled(menuMode);
       this.urlIndicator.setEnabled(mode == api.Mode.STANDARD && !menuMode);
       this.urlIndicator.setVisibilityTimeout(
           URL_INDICATOR_VISIBILITY_TIMEOUT_MS);
       this.secureOriginWarnings.setEnabled(
           mode == api.Mode.WEB_VR && !menuMode);
-      this.background.setEnabled(mode == api.Mode.STANDARD || menuMode);
-      this.background.setFullscreen(this.fullscreen);
+      this.background.setState(mode, menuMode, fullscreen);
       this.tabContainer.setEnabled(mode == api.Mode.STANDARD && menuMode);
 
       this.reloadUiButton.setEnabled(mode == api.Mode.STANDARD);
 
       api.setUiCssSize(
           uiRootElement.clientWidth, uiRootElement.clientHeight, UI_DPR);
     }
 
     setSecurityLevel(level) {
       this.urlIndicator.setSecurityLevel(level);
@@ skipping 98 matching lines @@
     nativeCommandHandler.handleCommand(dict);
   }
 
   return {
     initialize: initialize,
     command: command,
   };
 })();
 
 window.addEventListener('load', vrShellUi.initialize);