Omnibox improvements and fixes.

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 scene = new ui.Scene();
   let sceneManager;
 
   let uiRootElement = document.querySelector('#ui');
   let uiStyle = window.getComputedStyle(uiRootElement);
   /** @const */ var ANIM_DURATION = 150;
 
   // This value should match the one in VrShellImpl.java
   /** @const */ var UI_DPR = 1.2;
 
   function getStyleFloat(style, property) {
     let value = parseFloat(style.getPropertyValue(property));
     return isNaN(value) ? 0 : value;
   }
 
   class ContentQuad {
     constructor() {
       /** @const */ this.SCREEN_HEIGHT = 1.6;
       /** @const */ this.SCREEN_RATIO = 16 / 9;
       /** @const */ this.BROWSING_SCREEN_DISTANCE = 2.0;
-      /** @const */ this.CINEMA_SCREEN_DISTANCE = 3.0;
+      /** @const */ this.FULLSCREEN_DISTANCE = 3.0;
 
       let element = new api.UiElement(0, 0, 0, 0);
       element.setIsContentQuad();
       element.setVisible(false);
       element.setSize(
           this.SCREEN_HEIGHT * this.SCREEN_RATIO, this.SCREEN_HEIGHT);
       element.setTranslation(0, 0, -this.BROWSING_SCREEN_DISTANCE);
       this.elementId = scene.addElement(element);
     }
 
     setEnabled(enabled) {
       let update = new api.UiElementUpdate();
       update.setVisible(enabled);
       scene.updateElement(this.elementId, update);
     }
 
-    setCinemaMode(enabled) {
+    setFullscreen(enabled) {
       let anim = new api.Animation(this.elementId, ANIM_DURATION);
       if (enabled) {
-        anim.setTranslation(0, 0, -this.CINEMA_SCREEN_DISTANCE);
+        anim.setTranslation(0, 0, -this.FULLSCREEN_DISTANCE);
       } else {
         anim.setTranslation(0, 0, -this.BROWSING_SCREEN_DISTANCE);
       }
       scene.addAnimation(anim);
     }
 
     // TODO(crbug/643815): Add a method setting aspect ratio (and possible
     // animation of changing it).
 
     getElementId() {
@@ skipping 59 matching lines @@
     onMouseLeave() {
       this.configure(0.8, 0, 0);
     }
   };
 
   class Controls {
     constructor(contentQuadId) {
       this.buttons = [];
       let descriptors = [
           ['#back', function() {
-            // If we are in cinema mode, revert to standard mode on back press.
-            if (sceneManager.cinemaMode) {
-              // TODO(crbug/644511): Send a message back to native to handle
-              // switching back to standard mode and out of full screen instead
-              // of only changing the mode here.
-              sceneManager.setMode(sceneManager.mode, sceneManager.menuMode,
-                false /* Cinema Mode */);
-            } else {
-              api.doAction(api.Action.HISTORY_BACK);
-            }
+            api.doAction(api.Action.HISTORY_BACK);
           }],
           ['#reload', function() {
             api.doAction(api.Action.RELOAD);
           }],
           ['#forward', function() {
             api.doAction(api.Action.HISTORY_FORWARD);
           }],
       ];
 
       /** @const */ var BUTTON_SPACING = 0.136;
@@ skipping 83 matching lines @@
       update.setVisible(false);
       update.setLockToFieldOfView(true);
       scene.updateElement(this.transientWarning.uiElementId, update);
     }
 
     setEnabled(enabled) {
       this.enabled = enabled;
       this.updateState();
     }
 
-    setSecureOrigin(secure) {
-      this.isSecureOrigin = secure;
+    setSecure(secure) {
+      this.secure = secure;
       this.updateState();
     }
 
     updateState() {
       /** @const */ var TRANSIENT_TIMEOUT_MS = 30000;
 
-      let visible = (this.enabled && !this.isSecureOrigin);
+      let visible = (this.enabled && !this.secure);
       if (this.secureOriginTimer) {
         clearInterval(this.secureOriginTimer);
         this.secureOriginTimer = null;
       }
       if (visible) {
         this.secureOriginTimer = setTimeout(
             this.onTransientTimer.bind(this), TRANSIENT_TIMEOUT_MS);
       }
       this.showOrHideWarnings(visible);
     }
@@ skipping 11 matching lines @@
       let update = new api.UiElementUpdate();
       update.setVisible(false);
       scene.updateElement(this.transientWarning.uiElementId, update);
       this.secureOriginTimer = null;
       scene.flush();
     }
   };
 
   class Omnibox {
     constructor(contentQuadId) {
-      /** @const */ var VISIBILITY_TIMEOUT_MS = 3000;
-
       this.domUiElement = new DomUiElement('#omni-container');
       this.enabled = false;
-      this.secure = false;
-      this.visibilityTimeout = VISIBILITY_TIMEOUT_MS;
+      this.level = 0;
+      this.visibilityTimeout = 0;
       this.visibilityTimer = null;
       this.nativeState = {};
 
       // Initially invisible.
       let update = new api.UiElementUpdate();
       update.setVisible(false);
       scene.updateElement(this.domUiElement.uiElementId, update);
       this.nativeState.visible = false;
 
       // Listen to the end of transitions, so that the box can be natively
@@ skipping 15 matching lines @@
     }
 
     setURL(host, path) {
       let omnibox = this.domUiElement.domElement;
       omnibox.querySelector('#domain').innerHTML = host;
       omnibox.querySelector('#path').innerHTML = path;
       this.resetVisibilityTimer();
       this.updateState();
     }
 
-    setSecureOrigin(secure) {
-      this.secure = secure;
+    setSecurityLevel(level) {
+      this.level = level;
       this.resetVisibilityTimer();
       this.updateState();
     }
 
     setVisibilityTimeout(milliseconds) {
       this.visibilityTimeout = milliseconds;
       this.resetVisibilityTimer();
       this.updateState();
     }
 
@@ skipping 17 matching lines @@
       if (e.propertyName == 'opacity' && !this.visibleAfterTransition) {
         this.setNativeVisibility(false);
       }
     }
 
     updateState() {
       if (!this.enabled) {
         this.setNativeVisibility(false);
         return;
       }
-
+      let secure = this.level == 2 || this.level == 3;
       document.querySelector('#omni-secure-icon').style.display =
-          (this.secure ? 'block' : 'none');
+          (secure ? 'block' : 'none');
       document.querySelector('#omni-insecure-icon').style.display =
-          (this.secure ? 'none' : 'block');
+          (secure ? 'none' : 'block');
 
       let state = 'idle';
       this.visibleAfterTransition = true;
       if (this.loading) {
         state = 'loading';
       } else if (this.visibilityTimeout > 0 && !this.visibilityTimer) {
         state = 'hide';
         this.visibleAfterTransition = false;
       }
       document.querySelector('#omni').className = state;
@@ skipping 10 matching lines @@
       update.setVisible(visible);
       scene.updateElement(this.domUiElement.uiElementId, update);
       scene.flush();
     }
   };
 
   class SceneManager {
     constructor() {
       this.mode = api.Mode.UNKNOWN;
       this.menuMode = false;
-      this.cinemaMode = false;
+      this.fullscreen = false;
 
       this.contentQuad = new ContentQuad();
       let contentId = this.contentQuad.getElementId();
 
       this.controls = new Controls(contentId);
       this.secureOriginWarnings = new SecureOriginWarnings();
       this.omnibox = new Omnibox(contentId);
     }
 
-    setMode(mode, menuMode, cinemaMode) {
+    setMode(mode, menuMode, fullscreen) {
+      /** @const */ var OMNIBOX_VISIBILITY_TIMEOUT_MS = 5000;
+
       this.mode = mode;
       this.menuMode = menuMode;
-      this.cinemaMode = cinemaMode;
+      this.fullscreen = fullscreen;
 
       this.contentQuad.setEnabled(mode == api.Mode.STANDARD && !menuMode);
-      this.contentQuad.setCinemaMode(cinemaMode);
+      this.contentQuad.setFullscreen(fullscreen);
       // TODO(crbug/643815): Set aspect ratio on content quad when available.
-      // TODO(amp): Don't show controls in CINEMA mode once MENU mode lands.
+      // TODO(amp): Don't show controls in fullscreen once MENU mode lands.
       this.controls.setEnabled(mode == api.Mode.STANDARD && !menuMode);
       this.omnibox.setEnabled(mode == api.Mode.STANDARD && !menuMode);
+      // TODO(amp): Don't show controls in CINEMA mode once MENU mode lands.
+      this.omnibox.setVisibilityTimeout(
+          mode == api.Mode.STANDARD && !menuMode ?
+          0 : OMNIBOX_VISIBILITY_TIMEOUT_MS);
       this.secureOriginWarnings.setEnabled(mode == api.Mode.WEB_VR);
 
       api.setUiCssSize(uiRootElement.clientWidth, uiRootElement.clientHeight,
           UI_DPR);
     }
 
-    setSecureOrigin(secure) {
-      this.secureOriginWarnings.setSecureOrigin(secure);
-      this.omnibox.setSecureOrigin(secure);
+    setSecurityLevel(level) {
+      this.omnibox.setSecurityLevel(level);
+    }
+
+    setWebVRSecureOrigin(secure) {
+      this.secureOriginWarnings.setSecure(secure);
     }
 
     setReloadUiEnabled(enabled) {
       this.controls.setReloadUiEnabled(enabled);
     }
   };
 
   function initialize() {
     sceneManager = new SceneManager();
     scene.flush();
 
     api.domLoaded();
   }
 
   function command(dict) {
     if ('mode' in dict) {
-      sceneManager.setMode(dict['mode'], dict['menuMode'], dict['cinemaMode']);
+      sceneManager.setMode(dict['mode'], dict['menuMode'], dict['fullscreen']);
     }
-    if ('secureOrigin' in dict) {
-      sceneManager.setSecureOrigin(dict['secureOrigin']);
+    if ('securityLevel' in dict) {
+      sceneManager.setSecurityLevel(dict['securityLevel']);
+    }
+    if ('webVRSecureOrigin' in dict) {
+      sceneManager.setWebVRSecureOrigin(dict['webVRSecureOrigin']);
     }
     if ('enableReloadUi' in dict) {
       sceneManager.setReloadUiEnabled(dict['enableReloadUi']);
     }
     if ('url' in dict) {
       let url = dict['url'];
       sceneManager.omnibox.setURL(url['host'], url['path']);
     }
     if ('loading' in dict) {
       sceneManager.omnibox.setLoading(dict['loading']);
     }
     scene.flush();
   }
 
   return {
     initialize: initialize,
     command: command,
   };
 })();
 
 document.addEventListener('DOMContentLoaded', vrShellUi.initialize);