From e901efcb97187a228d30dac249c659b4b7ed3359 Mon Sep 17 00:00:00 2001
From: mmktomato <mkt.motohashi@gmail.com>
Date: Mon, 17 Dec 2018 07:36:23 +0900
Subject: [PATCH] Invert dark favicons (#114)

---
 data/theme/base.css                 |  4 ++++
 lib/fast-average-color-4.2.0.min.js |  2 ++
 sidebar.js                          | 16 +++++++++++++++-
 vtr.html                            |  1 +
 4 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 lib/fast-average-color-4.2.0.min.js

diff --git a/data/theme/base.css b/data/theme/base.css
index 801f35b..3874932 100644
--- a/data/theme/base.css
+++ b/data/theme/base.css
@@ -145,3 +145,7 @@ body[data-tab-buttons-position="right"] .tabbrowser-tab .tab-buttons .tab-close-
     image-rendering: -moz-crisp-edges;
   }
 }
+
+.invert {
+    filter: invert(1);
+}
diff --git a/lib/fast-average-color-4.2.0.min.js b/lib/fast-average-color-4.2.0.min.js
new file mode 100644
index 0000000..fe81962
--- /dev/null
+++ b/lib/fast-average-color-4.2.0.min.js
@@ -0,0 +1,2 @@
+/*! Fast Average Color | © 2018 Denis Seleznev | MIT License | https://github.com/hcodes/fast-average-color/ */
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.FastAverageColor=e()}(this,function(){"use strict";var _=function(t,e){if(Array.isArray(t))return t;if(Symbol.iterator in Object(t))return function(t,e){var r=[],n=!0,i=!1,o=void 0;try{for(var a,s=t[Symbol.iterator]();!(n=(a=s.next()).done)&&(r.push(a.value),!e||r.length!==e);n=!0);}catch(t){i=!0,o=t}finally{try{!n&&s.return&&s.return()}finally{if(i)throw o}}return r}(t,e);throw new TypeError("Invalid attempt to destructure non-iterable instance")},e=function(){function n(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(t,e,r){return e&&n(t.prototype,e),r&&n(t,r),t}}();return function(){function t(){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t)}return e(t,[{key:"getColorAsync",value:function(t,e,r){t.complete?e.call(t,this.getColor(t,r),r&&r.data):this._bindImageEvents(t,e,r)}},{key:"getColor",value:function(t,e){e=e||{};var r=this._getDefaultColor(e),n=this._getOriginalSize(t),i=this._prepareSizeAndPosition(n,e),o=null,a=r;if(!(i.srcWidth&&i.srcHeight&&i.destWidth&&i.destHeight))return this._prepareResult(r,new Error("FastAverageColor: Incorrect sizes."));if(!this._ctx&&(this._canvas=document.createElement("canvas"),this._ctx=this._canvas.getContext&&this._canvas.getContext("2d"),!this._ctx))return this._prepareResult(r,new Error("FastAverageColor: Canvas Context 2D is not supported in this browser."));this._canvas.width=i.destWidth,this._canvas.height=i.destHeight;try{this._ctx.clearRect(0,0,i.destWidth,i.destHeight),this._ctx.drawImage(t,i.srcLeft,i.srcTop,i.srcWidth,i.srcHeight,0,0,i.destWidth,i.destHeight);var s=this._ctx.getImageData(0,0,i.destWidth,i.destHeight).data;a=this.getColorFromArray4(s,e)}catch(t){o=t}return this._prepareResult(a,o)}},{key:"getColorFromArray4",value:function(t,e){e=e||{};var r=t.length;if(r<4)return this._getDefaultColor(e);var n=r-r%4,i=4*(e.step||1),o="_"+(e.algorithm||"sqrt")+"Algorithm";if("function"!=typeof this[o])throw new Error("FastAverageColor: "+e.algorithm+" is unknown algorithm.");return this[o](t,n,i)}},{key:"destroy",value:function(){delete this._canvas,delete this._ctx}},{key:"_getDefaultColor",value:function(t){return this._getOption(t,"defaultColor",[255,255,255,255])}},{key:"_getOption",value:function(t,e,r){return void 0===t[e]?r:t[e]}},{key:"_prepareSizeAndPosition",value:function(t,e){var r=this._getOption(e,"left",0),n=this._getOption(e,"top",0),i=this._getOption(e,"width",t.width),o=this._getOption(e,"height",t.height),a=i,s=o;if("precision"===e.mode)return{srcLeft:r,srcTop:n,srcWidth:i,srcHeight:o,destWidth:a,destHeight:s};var h=void 0;return o<i?(h=i/o,a=100,s=Math.round(a/h)):(h=o/i,s=100,a=Math.round(s/h)),(i<a||o<s||a<10||s<10)&&(a=i,s=o),{srcLeft:r,srcTop:n,srcWidth:i,srcHeight:o,destWidth:a,destHeight:s}}},{key:"_simpleAlgorithm",value:function(t,e,r){for(var n=0,i=0,o=0,a=0,s=0,h=0;h<e;h+=r){var u=t[h+3];n+=t[h]*u,i+=t[h+1]*u,o+=t[h+2]*u,a+=u,s++}return a?[Math.round(n/a),Math.round(i/a),Math.round(o/a),Math.round(a/s)]:[0,0,0,0]}},{key:"_sqrtAlgorithm",value:function(t,e,r){for(var n=0,i=0,o=0,a=0,s=0,h=0;h<e;h+=r){var u=t[h],l=t[h+1],c=t[h+2],d=t[h+3];n+=u*u*d,i+=l*l*d,o+=c*c*d,a+=d,s++}return a?[Math.round(Math.sqrt(n/a)),Math.round(Math.sqrt(i/a)),Math.round(Math.sqrt(o/a)),Math.round(a/s)]:[0,0,0,0]}},{key:"_dominantAlgorithm",value:function(t,e,r){for(var n={},i=0;i<e;i+=r){var o=t[i],a=t[i+1],s=t[i+2],h=t[i+3],u=Math.round(o/24)+","+Math.round(a/24)+","+Math.round(s/24);n[u]?n[u]=[n[u][0]+o*h,n[u][1]+a*h,n[u][2]+s*h,n[u][3]+h,n[u][4]+1]:n[u]=[o*h,a*h,s*h,h,1]}var l=Object.keys(n).map(function(t){return n[t]}).sort(function(t,e){var r=t[4],n=e[4];return n<r?-1:r===n?0:1}),c=_(l[0],5),d=c[0],f=c[1],g=c[2],v=c[3],p=c[4];return v?[Math.round(d/v),Math.round(f/v),Math.round(g/v),Math.round(v/p)]:[0,0,0,0]}},{key:"_bindImageEvents",value:function(t,e,r){var n=this,i=(r=r||{})&&r.data,o=this._getDefaultColor(r),a=function(){u(),e.call(t,n.getColor(t,r),i)},s=function(){u(),e.call(t,n._prepareResult(o,new Error("Image error")),i)},h=function(){u(),e.call(t,n._prepareResult(o,new Error("Image abort")),i)},u=function(){t.removeEventListener("load",a),t.removeEventListener("error",s),t.removeEventListener("abort",h)};t.addEventListener("load",a),t.addEventListener("error",s),t.addEventListener("abort",h)}},{key:"_prepareResult",value:function(t,e){var r=t.slice(0,3),n=[].concat(r,t[3]/255),i=this._isDark(t);return{error:e,value:t,rgb:"rgb("+r.join(",")+")",rgba:"rgba("+n.join(",")+")",hex:this._arrayToHex(r),hexa:this._arrayToHex(t),isDark:i,isLight:!i}}},{key:"_getOriginalSize",value:function(t){return t instanceof HTMLImageElement?{width:t.naturalWidth,height:t.naturalHeight}:t instanceof HTMLVideoElement?{width:t.videoWidth,height:t.videoHeight}:{width:t.width,height:t.height}}},{key:"_toHex",value:function(t){var e=t.toString(16);return 1===e.length?"0"+e:e}},{key:"_arrayToHex",value:function(t){return"#"+t.map(this._toHex).join("")}},{key:"_isDark",value:function(t){return(299*t[0]+587*t[1]+114*t[2])/1e3<128}}]),t}()});
\ No newline at end of file
diff --git a/sidebar.js b/sidebar.js
index c2d55cf..7210178 100644
--- a/sidebar.js
+++ b/sidebar.js
@@ -359,7 +359,21 @@ let VerticalTabsReloaded = class VerticalTabsReloaded
 
                 if(tabElement.getAttribute("status") != "loading")
                 {
-                    document.getElementById("tab-icon-" + tabID).setAttribute("src", value);
+                    const imgEl = document.getElementById("tab-icon-" + tabID);
+                    imgEl.setAttribute("src", value);
+
+                    const theme = this.preferences("theme");
+                    if(theme === "dark" || theme === "darwin")
+                    {
+                        const fac = new FastAverageColor();
+                        fac.getColorAsync(imgEl, (color) => {
+                            if(color.isDark)
+                            {
+                                imgEl.classList.add("invert");
+                            }
+                            fac.destroy();
+                        });
+                    }
                 }
 
                 log.debug("status: " + tabElement.getAttribute("status"));
diff --git a/vtr.html b/vtr.html
index cb369f1..bb5b2a0 100644
--- a/vtr.html
+++ b/vtr.html
@@ -45,6 +45,7 @@
 
     <script src="lib/browser-polyfill.js"></script>
     <script src="lib/arrive.js"></script>
+    <script src="lib/fast-average-color-4.2.0.min.js"></script>
     <script src="utils/namespace-sidebar.js"></script>
     <script src="utils/log.js"></script>
     <script src="utils/options.js"></script>