custom icons downloading

app/scripts/models/file-model.js

@@ -274,12 +274,6 @@ var FileModel = Backbone.Model.extend({
         this.addToLastOpenFiles();
     },
 
-    getCustomIcons: function() {
-        return _.mapObject(this.db.meta.customIcons, function(customIcon) {
-            return IconUrl.toDataUrl(customIcon);
-        });
-    },
-
     setPassword: function(password) {
         this.db.credentials.setPassword(password);
         this.db.meta.keyChanged = new Date();
@@ -380,6 +374,18 @@ var FileModel = Backbone.Model.extend({
             }, this);
             trashGroup.get('entries').reset();
         }
+    },
+
+    getCustomIcons: function() {
+        return _.mapObject(this.db.meta.customIcons, function(customIcon) {
+            return IconUrl.toDataUrl(customIcon);
+        });
+    },
+
+    addCustomIcon: function(iconData) {
+        var id = new kdbxweb.KdbxUuid();
+        this.db.meta.customIcons[id] = kdbxweb.ByteUtils.arrayToBuffer(kdbxweb.ByteUtils.base64ToBytes(iconData));
+        return id.toString();
     }
 });
 

app/scripts/views/icon-select-view.js

@@ -13,6 +13,13 @@ var IconSelectView = Backbone.View.extend({
         'change .icon-select__file-input': 'iconSelected'
     },
 
+    initialize: function() {
+        this.special = {
+            select: null,
+            download: null
+        };
+    },
+
     render: function() {
         this.renderTemplate({
             sel: this.model.iconId,
@@ -26,7 +33,15 @@ var IconSelectView = Backbone.View.extend({
     iconClick: function(e) {
         var target = $(e.target).closest('.icon-select__icon');
         var iconId = target[0].getAttribute('data-val');
-        if (iconId) {
+        if (iconId === 'special') {
+            var iconData = this.special[target.data('special')];
+            if (iconData) {
+                var id = this.model.file.addCustomIcon(iconData.data);
+                this.trigger('select', { id: id, custom: true });
+                e.preventDefault();
+                e.stopImmediatePropagation();
+            }
+        } else if (iconId) {
             var isCustomIcon = target.hasClass('icon-select__icon-custom');
             this.trigger('select', { id: iconId, custom: isCustomIcon });
         }
@@ -41,8 +56,10 @@ var IconSelectView = Backbone.View.extend({
         var that = this;
         var url = this.getIconUrl();
         var img = document.createElement('img');
+        img.crossOrigin = 'Anonymous';
         img.src = url;
         img.onload = function() {
+            that.setSpecialImage(img, 'download');
             that.$el.find('.icon-select__icon-download img').remove();
             that.$el.find('.icon-select__icon-download>i').removeClass('fa-spinner fa-spin');
             that.$el.find('.icon-select__icon-download').addClass('icon-select__icon--custom-selected').append(img);
@@ -64,6 +81,7 @@ var IconSelectView = Backbone.View.extend({
         if (url.indexOf('://') < 0) {
             url = 'http://' + url;
         }
+        url = 'http://www.google.com/s2/favicons?domain_url=' + encodeURIComponent(url);
         return url;
     },
 
@@ -78,15 +96,29 @@ var IconSelectView = Backbone.View.extend({
             var reader = new FileReader();
             reader.onload = function(e) {
                 var img = document.createElement('img');
+                img.onload = function() {
+                    that.setSpecialImage(img, 'select');
+                    that.$el.find('.icon-select__icon-select img').remove();
+                    that.$el.find('.icon-select__icon-select').addClass('icon-select__icon--custom-selected').append(img);
+                };
                 img.src = e.target.result;
-                that.$el.find('.icon-select__icon-select img').remove();
-                that.$el.find('.icon-select__icon-select').addClass('icon-select__icon--custom-selected').append(img);
             };
             reader.readAsDataURL(file);
         } else {
             that.$el.find('.icon-select__icon-select img').remove();
             that.$el.find('.icon-select__icon-select').removeClass('icon-select__icon--custom-selected');
         }
+    },
+
+    setSpecialImage: function(img, name) {
+        var size = Math.min(img.width, 32);
+        var canvas = document.createElement('canvas');
+        var ctx = canvas.getContext('2d');
+        canvas.width = size;
+        canvas.height = size;
+        ctx.drawImage(img, 0, 0, size, size);
+        var data = canvas.toDataURL().replace(/^.*,/, '');
+        this.special[name] = { width: img.width, height: img.height, data: data };
     }
 });
 

app/templates/icon-select.html

@@ -7,11 +7,13 @@
     <div class="icon-select__items icon-select__items--custom">
         <input type="file" class="icon-select__file-input hide-by-pos" accept="image/*" />
         <% if (canDownloadFavicon) { %>
-        <span class="icon-select__icon icon-select__icon-btn icon-select__icon-download" title="Download and use website favicon">
+        <span class="icon-select__icon icon-select__icon-btn icon-select__icon-download"
+              data-val="special" data-special="download" title="Download and use website favicon">
             <i class="fa fa-cloud-download"></i>
         </span>
         <% } %>
-        <span class="icon-select__icon icon-select__icon-btn icon-select__icon-select" title="Select custom icon">
+        <span class="icon-select__icon icon-select__icon-btn icon-select__icon-select"
+              data-val="special" data-special="select" title="Select custom icon">
             <i class="fa fa-ellipsis-h"></i>
         </span>
         <% Object.keys(customIcons).forEach(function(ci) { %>