Background correctly adapts to state in Chrome VR.

chrome/browser/resources/vr_shell/vr_shell_ui.js

Index: chrome/browser/resources/vr_shell/vr_shell_ui.js
diff --git a/chrome/browser/resources/vr_shell/vr_shell_ui.js b/chrome/browser/resources/vr_shell/vr_shell_ui.js
index e212e339bff1a156c327ea6e8f4837ad5014c403..71a82e4605725ca56c68e8f5b494cb8b36378243 100644
--- a/chrome/browser/resources/vr_shell/vr_shell_ui.js
+++ b/chrome/browser/resources/vr_shell/vr_shell_ui.js
@@ -609,35 +609,56 @@ var vrShellUi = (function() {
       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);
-
-      // 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);
+    setHiddenBackground() {
+      this.setElementVisible(this.groundPlaneId, false);
+      this.setElementVisible(this.ceilingPlaneId, false);
+      this.setElementVisible(this.groundGridId, false);
+      ui.setBackgroundColor(this.FULLSCREEN_BACKGROUND_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;
       }
     }
   };
@@ -899,12 +920,12 @@ var vrShellUi = (function() {
 
       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);
@@ -914,8 +935,7 @@ var vrShellUi = (function() {
           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);