Support showing loading progress in the VR omnibox.

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;
   }
 
+  function getStyleString(style, property) {
+    let str = style.getPropertyValue(property);
+    return !str || 0 === str.length ? '' : str;
+  }
+
   class ContentQuad {
     constructor() {
       /** @const */ this.SCREEN_HEIGHT = 1.6;
       /** @const */ this.SCREEN_RATIO = 16 / 9;
       /** @const */ this.BROWSING_SCREEN_DISTANCE = 2.0;
       /** @const */ this.FULLSCREEN_DISTANCE = 3.0;
 
       let element = new api.UiElement(0, 0, 0, 0);
       element.setIsContentQuad();
       element.setVisible(false);
@@ skipping 243 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) {
-      this.domUiElement = new DomUiElement('#omni-container');
+      this.domUiElement = new DomUiElement('#omnibox-container');
       this.enabled = false;
       this.loading = false;
+      this.loadingProgress = 0;
       this.level = 0;
       this.visibilityTimeout = 0;
       this.visibilityTimer = null;
       this.visibleAfterTransition = false;
       this.nativeState = {};
 
       // Initially invisible.
       let update = new api.UiElementUpdate();
       update.setVisible(false);
       scene.updateElement(this.domUiElement.uiElementId, update);
       this.nativeState.visible = false;
 
+      // Pull colors from CSS so that Javascript can set the progress indicator
+      // gradient programmatically.
+      let border =
+          this.domUiElement.domElement.querySelector('#omnibox-border');
+      let style = window.getComputedStyle(border);
+      this.statusBarColor = getStyleString(style, '--statusBarColor');
+      this.backgroundColor = style.backgroundColor;
+
       // Listen to the end of transitions, so that the box can be natively
       // hidden after it finishes hiding itself.
-      document.querySelector('#omni').addEventListener(
-          'transitionend', this.onAnimationDone.bind(this));
+      document.querySelector('#omnibox')
+          .addEventListener('transitionend', this.onAnimationDone.bind(this));
     }
 
     getSecurityIconElementId(level) {
       // See security_state.h and getSecurityIconResource() for this mapping.
       switch (level) {
         case 0:  // NONE
         case 1:  // HTTP_SHOW_WARNING
         case 4:  // SECURITY_WARNING
-          return '#omni-info-icon';
+          return '#omnibox-info-icon';
         case 2:  // SECURE:
         case 3:  // EV_SECURE:
-          return '#omni-lock-icon';
+          return '#omnibox-lock-icon';
         case 5:  // SECURE_WITH_POLICY_INSTALLED_CERT (ChromeOS only)
         case 6:  // DANGEROUS
         default:
-          return '#omni-warning-icon';
+          return '#omnibox-warning-icon';
       }
     }
 
     setEnabled(enabled) {
       this.enabled = enabled;
       this.resetVisibilityTimer();
       this.updateState();
     }
 
     setLoading(loading) {
       this.loading = loading;
+      this.loadingProgress = 0;
       this.resetVisibilityTimer();
       this.updateState();
     }
 
+    setLoadingProgress(progress) {
+      this.loadingProgress = progress;
+      this.updateState();
+    }
+
     setURL(host, path) {
       let omnibox = this.domUiElement.domElement;
       omnibox.querySelector('#domain').innerHTML = host;
       omnibox.querySelector('#path').innerHTML = path;
       this.resetVisibilityTimer();
       this.updateState();
     }
 
     setSecurityLevel(level) {
-      this.level = level;
+      document.querySelector('#omnibox-warning-icon').style.display = 'none';
+      document.querySelector('#omnibox-info-icon').style.display = 'none';
+      document.querySelector('#omnibox-lock-icon').style.display = 'none';
+      let icon = this.getSecurityIconElementId(level);
+      document.querySelector(icon).style.display = 'block';
+
       this.resetVisibilityTimer();
       this.updateState();
     }
 
     setVisibilityTimeout(milliseconds) {
       this.visibilityTimeout = milliseconds;
       this.resetVisibilityTimer();
       this.updateState();
     }
 
@@ skipping 18 matching lines @@
         this.setNativeVisibility(false);
       }
     }
 
     updateState() {
       if (!this.enabled) {
         this.setNativeVisibility(false);
         return;
       }
 
-      document.querySelector('#omni-warning-icon').style.display = 'none';
-      document.querySelector('#omni-info-icon').style.display = 'none';
-      document.querySelector('#omni-lock-icon').style.display = 'none';
-      let icon = this.getSecurityIconElementId(this.level);
-      document.querySelector(icon).style.display = 'block';
+      let indicator = document.querySelector('#omnibox-border');
+      if (this.loading) {
+        // Remap load progress range 0-100 as 5-95 percent, to avoid the
+        // extremities of the rounded ends of the omnibox.
+        let percent = Math.round((this.loadingProgress * 0.9 + 0.05) * 100);
+        let gradient = 'linear-gradient(to right, ' + this.statusBarColor +
+            ' 0%, ' + this.statusBarColor + ' ' + percent + '%, ' +
+            this.backgroundColor + ' ' + percent + '%, ' +
+            this.backgroundColor + ' 100%)';
+        indicator.style.background = gradient;
+      } else {
+        indicator.style.background = this.backgroundColor;
+      }
 
-      let state = 'idle';
-      this.visibleAfterTransition = true;
-      if (this.loading) {
-        state = 'loading';
-      } else if (this.visibilityTimeout > 0 && !this.visibilityTimer) {
-        state = 'hide';
+      // Make the box fade away if it's disappearing.
+      if (!this.loading && this.visibilityTimeout > 0 &&
+          !this.visibilityTimer) {
+        document.querySelector('#omnibox-border').className = 'hidden';
         this.visibleAfterTransition = false;
+      } else {
+        document.querySelector('#omnibox-border').className = '';
+        this.visibleAfterTransition = true;
       }
-      document.querySelector('#omni').className = state;
 
       this.setNativeVisibility(true);
     }
 
     setNativeVisibility(visible) {
       if (visible == this.nativeState.visible) {
         return;
       }
       this.nativeState.visible = visible;
       let update = new api.UiElementUpdate();
@@ skipping 74 matching lines @@
     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']);
     }
+    if ('loadingProgress' in dict) {
+      sceneManager.omnibox.setLoadingProgress(dict['loadingProgress']);
+    }
     scene.flush();
   }
 
   return {
     initialize: initialize,
     command: command,
   };
 })();
 
 document.addEventListener('DOMContentLoaded', vrShellUi.initialize);