Adds button to VRShell menu mode, which lets the user manually exit WebVR presentation.

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 4d552f8de283d2847be025771f18e7b4384e5d19..8c11a948a4ee6e84db29af80a472ae0b505989db 100644
--- a/chrome/browser/resources/vr_shell/vr_shell_ui.js
+++ b/chrome/browser/resources/vr_shell/vr_shell_ui.js
@@ -399,23 +399,29 @@ var vrShellUi = (function() {
       };
       let descriptors = [
         [
-          'backButton', '#back-button',
+          0, 'backButton', '#back-button',
           function() {
             api.doAction(api.Action.HISTORY_BACK, {});
           }
         ],
         [
-          'reloadButton', '#reload-button',
+          1, 'reloadButton', '#reload-button',
           function() {
             api.doAction(api.Action.RELOAD, {});
           }
         ],
         [
-          'forwardButton', '#forward-button',
+          2, 'forwardButton', '#forward-button',
           function() {
             api.doAction(api.Action.HISTORY_FORWARD, {});
           }
         ],
+        [
+          0, 'exitPresentButton', '#exit-present-button',

[cjgrant, 2017/03/30 15:35:28]

I'm mulling why we don't just use one button, and change the image+caption on
the fly.  Does translation make that not work easily?

[tiborg, 2017/03/30 20:53:29]

As discussed offline, let's keep separate buttons for now since this plays more
nicely with the sprite sheet.

+          function() {
+            api.doAction(api.Action.EXIT_PRESENT, {});
+          }
+        ],
       ];
 
       /** @const */ var BUTTON_Y = -0.53;
@@ -428,14 +434,19 @@ var vrShellUi = (function() {
       controls.setTranslation(0, BUTTON_Y, BUTTON_Z);
       this.controlsId = ui.addElement(controls);
 
-      let startPosition = -BUTTON_SPACING * (descriptors.length / 2.0 - 0.5);
+      let slotCount = 0;
+      descriptors.forEach(function(descriptor) {
+        slotCount = Math.max(descriptor[0] + 1, slotCount);
+      });
+      let startPosition = -BUTTON_SPACING * (slotCount / 2.0 - 0.5);
 
       for (let i = 0; i < descriptors.length; i++) {
-        let name = descriptors[i][0];
-        let domId = descriptors[i][1];
-        let callback = descriptors[i][2];
+        let slot = descriptors[i][0];
+        let name = descriptors[i][1];
+        let domId = descriptors[i][2];
+        let callback = descriptors[i][3];
         let button = new Button(domId, callback, this.controlsId);
-        button.setTranslation(startPosition + i * BUTTON_SPACING, 0, 0);
+        button.setTranslation(startPosition + slot * BUTTON_SPACING, 0, 0);
         this.buttons[name] = button;
       }
     }
@@ -449,6 +460,11 @@ var vrShellUi = (function() {
       for (let key in this.buttons) {
         this.buttons[key].setVisible(this.enabled);
       }
+      if (this.enabled) {
+        this.buttons['exitPresentButton'].setVisible(
+            this.showExitPresentButton);
+        this.buttons['backButton'].setVisible(!this.showExitPresentButton);
+      }
     }
 
     setBackButtonEnabled(enabled) {
@@ -458,6 +474,12 @@ var vrShellUi = (function() {
     setForwardButtonEnabled(enabled) {
       this.buttons.forwardButton.setEnabled(enabled);
     }
+
+    /** If true shows the exit present button instead of the back button. */

[cjgrant, 2017/03/30 15:35:28]

- "true" isn't the parameter name.
- set and show are saying almost the same thing.  This could be
setExitPresentButtonVisible(visible)

[tiborg, 2017/03/30 20:53:29]

Done.

+    setShowExitPresentButton(showExitPresentButton) {
+      this.showExitPresentButton = showExitPresentButton;
+      this.configure();
+    }
   };
 
   /**
@@ -1210,6 +1232,9 @@ var vrShellUi = (function() {
       // TODO(crbug/643815): Set aspect ratio on content quad when available.
       this.controls.setEnabled(menuMode);
       this.controls.setBackButtonEnabled(this.canGoBack || this.fullscreen);
+      // TODO(crbug/689139): Don't show exit present button if the page
+      // autopresented.
+      this.controls.setShowExitPresentButton(mode == api.Mode.WEB_VR);

[cjgrant, 2017/03/30 15:35:28]

Another thing we need to resolve with the UXEs is the fact that we generate tons
of calls to native that aren't actually changing anything.  We should maybe put
in some generic method of caching state (maybe at the scene layer).  Lets
discuss offline.

[tiborg, 2017/03/30 20:53:29]

Acknowledged. Let's discuss offline.

       let enabledIndicators = {}
       enabledIndicators[api.Direction.LEFT] = this.canGoBack || this.fullscreen;
       this.gestureHandlers.setEnabled(enabledIndicators);