Control visibility of 2D VR menu buttons using native state.

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.
 
 cr.define('chrome.vrShellUi', function() {
   'use strict';
 
   var scene = new ui.Scene();
-  var uiElements = [];
+  var state;
 
   class DomUiElement {
     constructor(domId) {
       var domElement = document.querySelector(domId);
       var style = window.getComputedStyle(domElement);
 
       // Pull copy rectangle from DOM element properties.
       var pixelX = domElement.offsetLeft;
       var pixelY = domElement.offsetTop;
       var pixelWidth = parseInt(style.getPropertyValue('width'));
@@ skipping 34 matching lines @@
 
     onMouseEnter() {
       this.configure(1, 1, 0.015);
     }
 
     onMouseLeave() {
       this.configure(0.8, 0, 0);
     }
   };
 
+  class UiState {
+    constructor() {
+      this.mode = -1;
+      this.createMenuButtons();
+      scene.flush();
+    }
+
+    createMenuButtons() {

[mthiesse, 2016/10/19 18:53:50]

Not to be super picky about this (I'm being super picky about this), but this is
a conceptually strange way to structure this. Why is createMenuButtons() a
function on UiState?

Up to you, but maybe a MenuButtons class would structure this better? With
functions like MenuButtons.show(), MenuButtons.hide()

[cjgrant, 2016/10/19 19:37:39]

Picky is good.  :)  I was minimizing the code changes WRT buttons, but you're
right that this is a good time to house them in a Menu class (as they're
changing owner already).  I'll change this.

[cjgrant, 2016/10/20 20:27:30]

Done.

+      this.menuButtons = [];
+      var buttons = [
+          ['#back', function() {
+            api.doAction(api.Action.HISTORY_BACK);
+          }],
+          ['#reload', function() {
+            api.doAction(api.Action.RELOAD);
+          }],
+          ['#forward', function() {
+            api.doAction(api.Action.HISTORY_FORWARD);
+          }],
+      ];
+
+      var buttonSpacing = 0.3;
+      var buttonStartPosition = -buttonSpacing * (buttons.length / 2.0 - 0.5);
+
+      for (var i = 0; i < buttons.length; i++) {
+        // Use an invisible parent to simplify Z-axis movement on hover.
+        var position = new api.UiElement(0, 0, 0, 0);
+        position.setParentId(api.getContentElementId());
+        position.setVisible(false);
+        position.setAnchoring(api.XAnchoring.XNONE, api.YAnchoring.YBOTTOM);
+        position.setTranslation(
+            buttonStartPosition + i * buttonSpacing, -0.3, 0.3);
+        var id = scene.addElement(position);
+
+        var domId = buttons[i][0];
+        var callback = buttons[i][1];
+        var element = new RoundButton(domId, callback);
+        this.menuButtons.push(element);
+
+        var update = new api.UiElementUpdate();
+        update.setParentId(id);
+        update.setVisible(false);
+        update.setScale(2.2, 2.2, 1);
+        scene.updateElement(element.uiElementId, update);
+      }
+    }
+
+    showMenuButtons(visible) {
+      for (var i = 0; i < this.menuButtons.length; i++) {
+        var update = new api.UiElementUpdate();
+        update.setVisible(visible);
+        scene.updateElement(this.menuButtons[i].uiElementId, update);
+      }
+      scene.flush();
+    }
+
+    setMode(mode) {
+      this.showMenuButtons(mode == api.Mode.STANDARD);
+    }
+  };
+
   function initialize() {
 
-    domLoaded();
-
     // Change the body background so that the transparency applies.
     window.setTimeout(function() {
       document.body.parentNode.style.backgroundColor = 'rgba(255,255,255,0)';
     }, 100);
 
-    addControlButtons();
-  }
+    state = new UiState();
 
-  // Build a row of control buttons.
-  function addControlButtons() {
-    var buttons = [
-        ['#back', function() { api.doAction(api.Action.HISTORY_BACK); }],
-        ['#reload', function() { api.doAction(api.Action.RELOAD); }],
-        ['#forward', function() { api.doAction(api.Action.HISTORY_FORWARD); }],
-    ];
-
-    var buttonSpacing = 0.3;
-    var buttonStartPosition = -buttonSpacing * (buttons.length / 2.0 - 0.5);
-
-    for (var i = 0; i < buttons.length; i++) {
-      // Use an invisible parent to simplify Z-axis movement on hover.
-      var position = new api.UiElement(0, 0, 0, 0);
-      position.setParentId(api.getContentElementId());
-      position.setVisible(false);
-      position.setAnchoring(api.XAnchoring.XNONE, api.YAnchoring.YBOTTOM);
-      position.setTranslation(
-          buttonStartPosition + i * buttonSpacing, -0.3, 0.3);
-      var id = scene.addElement(position);
-
-      var domId = buttons[i][0];
-      var callback = buttons[i][1];
-      var element = new RoundButton(domId, callback);
-      uiElements.push(element);
-
-      var update = new api.UiElementUpdate();
-      update.setParentId(id);
-      update.setScale(2.2, 2.2, 1);
-      scene.updateElement(element.uiElementId, update);
-    }
-
-    scene.flush();
-  }
-
-  function domLoaded() {
     api.domLoaded();
   }
 
   function command(dict) {
+    if ('mode' in dict) {
+      state.setMode(dict['mode']);
+    }
   }
 
   return {
     initialize: initialize,
     command: command,
   };
 });
 
 document.addEventListener('DOMContentLoaded', chrome.vrShellUi.initialize);