Color the VR omnibox security icons.

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 getSecurityIcon(level) {
+    // See security_state.h and getSecurityIconResource() for this mapping.
+    let path = 'images/';
+    switch (level) {
+      case 0: // NONE
+      case 1: // HTTP_SHOW_WARNING
+      case 4: // SECURITY_WARNING
+        return path + 'info.svg';
+      case 2: // SECURE:
+      case 3: // EV_SECURE:
+        return path + 'lock.svg';
+      case 5: // SECURE_WITH_POLICY_INSTALLED_CERT (ChromeOS only)
+      case 6: // DANGEROUS
+      default:
+        return path + 'warning.svg';
+    }
+  }
+
   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 307 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 =
-          (secure ? 'block' : 'none');
-      document.querySelector('#omni-insecure-icon').style.display =
-          (secure ? 'none' : 'block');
+
+      document.querySelector('#omni-icon').src = getSecurityIcon(this.level);

[Dan Beam, 2016/12/13 03:56:59]

nit: $('omni-icon').src if you're using util.js

[cjgrant, 2016/12/19 21:19:09]

I can incorporate util.js, but we should be consistent and use it everywhere in
this file.  That feels like a separate change (which I'm happy to make!).

 
       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 93 matching lines @@
     scene.flush();
   }
 
   return {
     initialize: initialize,
     command: command,
   };
 })();
 
 document.addEventListener('DOMContentLoaded', vrShellUi.initialize);