Add a progress indicator to 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 ui = new scene.Scene();
   let uiManager;
   let nativeCommandHandler;
 
   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, defaultValue) {
     let value = parseFloat(style.getPropertyValue(property));
     return isNaN(value) ? defaultValue : value;
   }
 
   function getStyleString(style, property) {
     let str = style.getPropertyValue(property);
     return !str || 0 === str.length ? '' : str;
   }
 
+  // Generate a two-color progress bar style background using a gradient.
+  function makeProgressBackground(loading, percentage, color, background) {
+    if (!loading) {
+      return background;
+    }
+    return 'linear-gradient(to right, ' + color + ' 0%, ' + color + ' ' +
+        percentage * 100.0 + '%, ' + background + ' ' + percentage * 100 +
+        '%, ' + background + ' 100%)';
+  }
+
   class ContentQuad {
     constructor() {
       /** @const */ this.SCREEN_HEIGHT = 1.375;
       /** @const */ this.SCREEN_RATIO = 9.6 / 6.4;
       /** @const */ this.BROWSING_SCREEN_ELEVATION = -0.15;
       /** @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;
@@ skipping 626 matching lines @@
     }
 
     updateState() {
       this.setNativeVisibility(this.enabled);
 
       if (!this.enabled) {
         return;
       }
 
       let indicator = document.querySelector('#url-indicator-border');
-      if (this.loading) {
-        // Remap load progress range 0-100 as 5-95 percent, to avoid the
-        // extremities of the rounded ends of the indicator.
-        let percent = Math.round((this.loadProgress * 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;
-      }
+      indicator.style.background = makeProgressBackground(
+          this.loading, this.loadProgress, this.statusBarColor,
+          this.backgroundColor);
 
       let shouldBeHidden =
           !this.loading && this.visibilityTimeout > 0 && !this.visibilityTimer;
       if (shouldBeHidden != this.hidden) {
         // Make the box fade away if it's disappearing.
         this.hidden = shouldBeHidden;
 
         // Fade-out or fade-in the box.
         let opacityAnimation =
             new api.Animation(this.domUiElement.id, this.fadeTimeMs);
@@ skipping 127 matching lines @@
 
   class Omnibox {
     constructor() {
       /** @const */ this.ELEVATION = -0.7;
       /** @const */ this.DISTANCE = -1.99;
       /** @const */ this.SCALE = -this.DISTANCE;
 
       this.enabled = false;
 
       let root = document.querySelector('#omnibox-ui-element');
-      this.domUiElement = new DomUiElement('#omnibox-url-element');
+      this.domUiElement = new DomUiElement('#omnibox-border');
       this.inputField = root.querySelector('#omnibox-input-field');
 
+      let style = window.getComputedStyle(this.domUiElement.domElement);
+      this.statusBarColor = getStyleString(style, '--statusBarColor');
+      this.backgroundColor = style.backgroundColor;
+      this.loading = false;
+      this.loadProgress = 0;
+      this.updateLoadingState();
+
       // Initially invisible.
       let update = new api.UiElementUpdate();
       update.setVisible(false);
       update.setTranslation(0, this.ELEVATION, this.DISTANCE);
       update.setScale(this.SCALE, this.SCALE, this.SCALE);
       ui.updateElement(this.domUiElement.id, update);
 
       // Field-clearing button.
       let clearButton = root.querySelector('#omnibox-clear-button');
       clearButton.addEventListener('click', function() {
@@ skipping 53 matching lines @@
 
     setURL(url) {
       this.inputField.value = url;
     }
 
     setSuggestions(suggestions) {
       this.suggestions = suggestions;
       this.updateSuggestions();
     }
 
+    setLoading(loading) {
+      this.loading = loading;
+      this.loadProgress = 0;
+      this.updateLoadingState();
+    }
+
+    setLoadProgress(progress) {
+      this.loadProgress = progress;
+      this.updateLoadingState();
+    }
+
+    updateLoadingState() {
+      let indicator = document.querySelector('#omnibox-border');
+      indicator.style.background = makeProgressBackground(
+          this.loading, this.loadProgress, this.statusBarColor,
+          this.backgroundColor);
+    }
+
     updateSuggestions() {
       for (var i = 0; i < this.maxSuggestions; i++) {
         let element = document.querySelector('#suggestion-' + i);
         let update = new api.UiElementUpdate();
         if (this.enabled && i < this.suggestions.length) {
           element.textContent = this.suggestions[i].description;
           element.url = this.suggestions[i].url;
           update.setVisible(true);
         } else {
           element.textContent = '';
@@ skipping 335 matching lines @@
 
     /** @override */
     onSetUrl(host, path) {
       this.manager.urlIndicator.setURL(host, path);
       this.manager.omnibox.setURL(host, path);
     }
 
     /** @override */
     onSetLoading(loading) {
       this.manager.urlIndicator.setLoading(loading);
+      this.manager.omnibox.setLoading(loading);
     }
 
     /** @override */
     onSetLoadingProgress(progress) {
       this.manager.urlIndicator.setLoadProgress(progress);
+      this.manager.omnibox.setLoadProgress(progress);
     }
 
     /** @override */
     onSetOmniboxSuggestions(suggestions) {
       this.manager.omnibox.setSuggestions(suggestions);
     }
 
     /** @override */
     onSetTabs(tabs) {
       uiManager.tabContainer.setTabs(tabs);
@@ skipping 28 matching lines @@
     nativeCommandHandler.handleCommand(dict);
   }
 
   return {
     initialize: initialize,
     command: command,
   };
 })();
 
 window.addEventListener('load', vrShellUi.initialize);