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

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 381 matching lines @@
     constructor(contentQuadId) {
       this.enabled = false;
 
       this.buttons = {
         backButton: null,
         reloadButton: null,
         forwardButton: null
       };
       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;
       /** @const */ var BUTTON_Z = -2;
       /** @const */ var BUTTON_SPACING = 0.14;
 
       let controls = new api.UiElement(0, 0, 0, 0);
       controls.setName('Controls');
       controls.setVisible(false);
       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;
       }
     }
 
     setEnabled(enabled) {
       this.enabled = enabled;
       this.configure();
     }
 
     configure() {
       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) {
       this.buttons.backButton.setEnabled(enabled);
     }
 
     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();
+    }
   };
 
   /**
    * A button to trigger a reload of the HTML UI for development purposes.
    */
   class ReloadUiButton {
     constructor() {
       this.enabled = false;
       this.devMode = false;
 
@@ skipping 732 matching lines @@
 
       api.doAction(api.Action.SET_CONTENT_PAUSED, {'paused': menuMode});
       ui.setWebVrRenderingModeEnabled(mode == api.Mode.WEB_VR && !menuMode);
 
       this.contentQuad.setEnabled(mode == api.Mode.STANDARD || menuMode);
       this.contentQuad.setFullscreen(fullscreen);
       this.contentQuad.setMenuMode(menuMode);
       // 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);
       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.setState(mode, menuMode, fullscreen);
@@ skipping 122 matching lines @@
     nativeCommandHandler.handleCommand(dict);
   }
 
   return {
     initialize: initialize,
     command: command,
   };
 })();
 
 window.addEventListener('load', vrShellUi.initialize);