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 373 matching lines @@
       ui.addAnimation(anim);
       anim = new api.Animation(this.element.id, this.ANIM_DURATION * 2);
       anim.setScale(1, 1, 1);
       ui.addAnimation(anim);
     }
   }
 
   class Controls {
     constructor(contentQuadId) {
       this.enabled = false;
+      this.exitPresentButtonVisible = 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',
+          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.exitPresentButtonVisible);
+        this.buttons['backButton'].setVisible(!this.exitPresentButtonVisible);
+      }
     }
 
     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. */
+    setExitPresentButtonVisible(visible) {
+      this.exitPresentButtonVisible = visible;
+      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.setExitPresentButtonVisible(mode == api.Mode.WEB_VR);
       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);