Exiting menu mode when content preview is clicked

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 21 matching lines @@
       /** @const */ this.SCREEN_RATIO = 16 / 9;
       /** @const */ this.BROWSING_SCREEN_DISTANCE = 2.0;
       /** @const */ this.FULLSCREEN_DISTANCE = 3.0;
       /** @const */ this.CSS_WIDTH_PIXELS = 960.0;
       /** @const */ this.CSS_HEIGHT_PIXELS = 640.0;
       /** @const */ this.DPR = 1.2;
       /** @const */ this.MENU_MODE_SCREEN_DISTANCE = 2.0;
       /** @const */ this.MENU_MODE_SCREEN_HEIGHT = 0.8;
       /** @const */ this.MENU_MODE_SCREEN_ELEVATION = 0.2;
       /** @const */ this.BACKGROUND_DISTANCE_MULTIPLIER = 1.414;
+      /** @const */ this.DOM_INTERCEPTOR_SELECTOR = '#content-interceptor';
+      /** @const */ this.DOM_INTERCEPTOR_ELEVATION = 0.01;
 
       this.menuMode = false;
       this.fullscreen = false;
 
       let element = new api.UiElement(0, 0, 0, 0);
       element.setFill(new api.Content());
       element.setVisible(false);
       element.setSize(
           this.SCREEN_HEIGHT * this.SCREEN_RATIO, this.SCREEN_HEIGHT);
       element.setTranslation(0, 0, -this.BROWSING_SCREEN_DISTANCE);
       this.elementId = ui.addElement(element);
 
       // Place an invisible (fill none) but hittable plane behind the content
       // quad, to keep the reticle roughly planar with the content if near
       // content.
       let backPlane = new api.UiElement(0, 0, 0, 0);
       backPlane.setSize(1000, 1000);
       backPlane.setTranslation(0, 0, -0.01);
       backPlane.setParentId(this.elementId);
       backPlane.setFill(new api.NoFill());
       ui.addElement(backPlane);
 
+      // Place invisible plane on top of content quad, to intercept the clicks
+      // while on menu mode.
+      this.interceptor = new DomUiElement(this.DOM_INTERCEPTOR_SELECTOR);
+      let update = new api.UiElementUpdate();
+      update.setTranslation(0, 0, this.DOM_INTERCEPTOR_ELEVATION);
+      update.setVisible(false);
+      update.setParentId(this.elementId);
+      update.setSize(
+          this.MENU_MODE_SCREEN_HEIGHT * this.SCREEN_RATIO,
+          this.MENU_MODE_SCREEN_HEIGHT);
+      ui.updateElement(this.interceptor.id, update);
+      let interceptorButton =
+          document.querySelector(this.DOM_INTERCEPTOR_SELECTOR);
+      interceptorButton.addEventListener('click', function() {
+        uiManager.exitMenuMode();
+        ui.flush();
+      });
+
       this.updateState();
     }
 
     setEnabled(enabled) {
       let update = new api.UiElementUpdate();
       update.setVisible(enabled);
       ui.updateElement(this.elementId, update);
       if (enabled) {
         api.setContentCssSize(
             this.CSS_WIDTH_PIXELS, this.CSS_HEIGHT_PIXELS, this.DPR);
@@ skipping 25 matching lines @@
 
       // Mode-specific overrides.
       if (this.menuMode) {
         y = this.MENU_MODE_SCREEN_ELEVATION;
         distance = this.MENU_MODE_SCREEN_DISTANCE;
         height = this.MENU_MODE_SCREEN_HEIGHT;
       } else if (this.fullscreen) {
         distance = this.FULLSCREEN_DISTANCE;
       }
 
+      let update = new api.UiElementUpdate();
+      update.setVisible(this.menuMode);
+      ui.updateElement(this.interceptor.id, update);
+
       let anim;
       anim = new api.Animation(this.elementId, ANIM_DURATION);
       anim.setTranslation(0, y, -distance);
       anim.setEasing(new api.InOutEasing());
       ui.addAnimation(anim);
       anim = new api.Animation(this.elementId, ANIM_DURATION);
       anim.setSize(height * this.SCREEN_RATIO, height);
       anim.setEasing(new api.InOutEasing());
       ui.addAnimation(anim);
 
@@ skipping 873 matching lines @@
 
     setHistoryButtonsEnabled(canGoBack, canGoForward) {
       this.canGoBack = canGoBack;
       this.canGoForward = canGoForward;
 
       /** No need to call updateState to adjust button properties. */
       this.controls.setBackButtonEnabled(this.canGoBack || this.fullscreen);
       this.controls.setForwardButtonEnabled(this.canGoForward);
     }
 
+    exitMenuMode() {
+      if (this.menuMode) {
+        this.menuMode = false;
+        this.updateState();
+      }
+    }
+
     updateState() {
       /** @const */ var URL_INDICATOR_VISIBILITY_TIMEOUT_MS = 5000;
 
       let mode = this.mode;
       let menuMode = this.menuMode;
       let fullscreen = this.fullscreen;
 
       api.doAction(api.Action.SET_CONTENT_PAUSED, {'paused': menuMode});
 
       this.contentQuad.setEnabled(mode == api.Mode.STANDARD);
@@ skipping 127 matching lines @@
     nativeCommandHandler.handleCommand(dict);
   }
 
   return {
     initialize: initialize,
     command: command,
   };
 })();
 
 window.addEventListener('load', vrShellUi.initialize);