From cebf9139998077a5168fa19fe64e10c1c8132824 Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Tue, 17 Oct 2017 13:16:05 -0400
Subject: [PATCH] updates to icon component and state init

---
 src/popup/app/components/iconComponent.js | 49 ++++++++++-------------
 src/popup/app/components/views/icon.html  |  4 ++
 src/popup/app/config.js                   |  7 ++--
 src/popup/app/services/stateService.js    |  8 +++-
 4 files changed, 35 insertions(+), 33 deletions(-)
 create mode 100644 src/popup/app/components/views/icon.html

diff --git a/src/popup/app/components/iconComponent.js b/src/popup/app/components/iconComponent.js
index d4ae16b9bf..ef7b6d50ee 100644
--- a/src/popup/app/components/iconComponent.js
+++ b/src/popup/app/components/iconComponent.js
@@ -5,32 +5,28 @@ angular
         bindings: {
             cipher: '<'
         },
-        template: '<div class="icon" ng-if="$ctrl.enabled">' +
-        '<img ng-src="{{$ctrl.image}}" fallback-src="{{$ctrl.fallbackImage}}" ng-if="$ctrl.image" alt="" />' +
-        '<i class="fa fa-fw fa-lg {{$ctrl.icon}}" ng-if="!$ctrl.image"></i>' +
-        '</div>',
+        templateUrl: 'app/components/views/icon.html',
         controller: function (stateService, constantsService) {
             var ctrl = this;
-            ctrl.enabled = stateService.getState('faviconEnabled');
+            ctrl.imageEnabled = stateService.getState('faviconEnabled');
 
             ctrl.$onChanges = function () {
-                if (ctrl.enabled) {
-                    switch (ctrl.cipher.type) {
-                        case constantsService.cipherType.login:
-                            setLoginIcon(ctrl.cipher);
-                            break;
-                        case constantsService.cipherType.secureNote:
-                            ctrl.icon = 'fa-sticky-note-o';
-                            break;
-                        case constantsService.cipherType.card:
-                            ctrl.icon = 'fa-credit-card';
-                            break;
-                        case constantsService.cipherType.identity:
-                            ctrl.icon = 'fa-id-card-o';
-                            break;
-                        default:
-                            break;
-                    }
+                switch (ctrl.cipher.type) {
+                    case constantsService.cipherType.login:
+                        ctrl.icon = 'fa-globe';
+                        setLoginIcon(ctrl.cipher);
+                        break;
+                    case constantsService.cipherType.secureNote:
+                        ctrl.icon = 'fa-sticky-note-o';
+                        break;
+                    case constantsService.cipherType.card:
+                        ctrl.icon = 'fa-credit-card';
+                        break;
+                    case constantsService.cipherType.identity:
+                        ctrl.icon = 'fa-id-card-o';
+                        break;
+                    default:
+                        break;
                 }
             };
 
@@ -47,18 +43,16 @@ angular
                         ctrl.icon = 'fa-apple';
                         ctrl.image = null;
                     }
-                    else if (hostnameUri.indexOf('://') === -1 && hostnameUri.indexOf('http://') !== 0 &&
+                    else if (ctrl.imageEnabled && hostnameUri.indexOf('://') === -1 && hostnameUri.indexOf('http://') !== 0 &&
                         hostnameUri.indexOf('https://') !== 0) {
                         hostnameUri = "http://" + hostnameUri;
                         isWebsite = true;
-                        ctrl.icon = 'fa-globe';
                     }
-                    else {
+                    else if (ctrl.imageEnabled) {
                         isWebsite = hostnameUri.indexOf('http') === 0 && hostnameUri.indexOf('.') > 0;
-                        ctrl.icon = 'fa-globe';
                     }
 
-                    if (isWebsite) {
+                    if (ctrl.imageEnabled && isWebsite) {
                         try {
                             var url = new URL(hostnameUri);
                             ctrl.image = 'https://icons.bitwarden.com/' + url.hostname + '/icon.png';
@@ -68,7 +62,6 @@ angular
                     }
                 }
                 else {
-                    ctrl.icon = 'fa-globe';
                     ctrl.image = null;
                 }
             }
diff --git a/src/popup/app/components/views/icon.html b/src/popup/app/components/views/icon.html
new file mode 100644
index 0000000000..4fba1ccccb
--- /dev/null
+++ b/src/popup/app/components/views/icon.html
@@ -0,0 +1,4 @@
+<div class="icon">
+    <img ng-src="{{$ctrl.image}}" fallback-src="{{$ctrl.fallbackImage}}" ng-if="$ctrl.imageEnabled && $ctrl.image" alt="" />
+    <i class="fa fa-fw fa-lg {{$ctrl.icon}}" ng-if="!$ctrl.imageEnabled || !$ctrl.image"></i>
+</div>
diff --git a/src/popup/app/config.js b/src/popup/app/config.js
index cf69c05ff7..50c9178be8 100644
--- a/src/popup/app/config.js
+++ b/src/popup/app/config.js
@@ -2,7 +2,8 @@
     .module('bit')
 
     .config(function ($stateProvider, $urlRouterProvider, $compileProvider, $sceDelegateProvider, toastrConfig) {
-        $compileProvider.imgSrcSanitizationWhitelist(/^\s*((https?|ftp|file|blob):|data:image\/|(moz|chrome|ms-browser)-extension)/);
+        $compileProvider.imgSrcSanitizationWhitelist(
+            /^\s*((https?|ftp|file|blob):|data:image\/|(moz|chrome|ms-browser)-extension)/);
 
         angular.extend(toastrConfig, {
             closeButton: true,
@@ -258,9 +259,7 @@
             });
     })
     .run(function ($rootScope, userService, $state, constantsService, stateService) {
-        chrome.storage.local.get(constantsService.disableFaviconKey, function(obj) {
-            stateService.saveState('faviconEnabled', !obj[constantsService.disableFaviconKey]);
-        });
+        stateService.init();
 
         $rootScope.$on('$stateChangeStart', function (event, toState, toParams) {
             if ($state.current.name.indexOf('tabs.') > -1 && toState.name.indexOf('tabs.') > -1) {
diff --git a/src/popup/app/services/stateService.js b/src/popup/app/services/stateService.js
index 58b11a1c57..8385faf267 100644
--- a/src/popup/app/services/stateService.js
+++ b/src/popup/app/services/stateService.js
@@ -1,10 +1,16 @@
 angular
     .module('bit.services')
 
-    .factory('stateService', function () {
+    .factory('stateService', function (utilsService, constantsService) {
         var _service = {},
             _state = {};
 
+        _service.init = function () {
+            utilsService.getObjFromStorage(constantsService.disableFaviconKey).then(function (disabledFavicons) {
+                _service.saveState('faviconEnabled', !disabledFavicons);
+            });
+        };
+
         _service.saveState = function (key, data) {
             _state[key] = data;
         };