From d6fc4ebe3cdde3ede0ff737074b6a7504b90667e Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Wed, 15 Nov 2017 01:01:17 +0000
Subject: [PATCH] fix new tinter problems

correctly handle skinned tertiaryColors (turns out they're used for the RoomSublist divider bars)
handle the fact that some room accountData apparently has ended up with rgb() colors in it...
---
 src/Tinter.js | 65 ++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 44 insertions(+), 21 deletions(-)

diff --git a/src/Tinter.js b/src/Tinter.js
index c926ada591..11dea0170f 100644
--- a/src/Tinter.js
+++ b/src/Tinter.js
@@ -17,23 +17,34 @@ limitations under the License.
 
 const DEBUG = 0;
 
-// utility to turn #rrggbb into [red,green,blue]
-function hexToRgb(color) {
-    if (color[0] === '#') color = color.slice(1);
-    if (color.length === 3) {
-        color = color[0] + color[0] +
-                color[1] + color[1] +
-                color[2] + color[2];
+// utility to turn #rrggbb or rgb(r,g,b) into [red,green,blue]
+function colorToRgb(color) {
+    if (color[0] === '#') {
+        color = color.slice(1);
+        if (color.length === 3) {
+            color = color[0] + color[0] +
+                    color[1] + color[1] +
+                    color[2] + color[2];
+        }
+        const val = parseInt(color, 16);
+        const r = (val >> 16) & 255;
+        const g = (val >> 8) & 255;
+        const b = val & 255;
+        return [r, g, b];
     }
-    const val = parseInt(color, 16);
-    const r = (val >> 16) & 255;
-    const g = (val >> 8) & 255;
-    const b = val & 255;
-    return [r, g, b];
+    else {
+        let match = color.match(/rgb\((.*?),(.*?),(.*?)\)/);
+        if (match) {
+            return [ parseInt(match[1]),
+                     parseInt(match[2]),
+                     parseInt(match[3]) ];
+        }
+    }
+    return [0,0,0];
 }
 
 // utility to turn [red,green,blue] into #rrggbb
-function rgbToHex(rgb) {
+function rgbToColor(rgb) {
     const val = (rgb[0] << 16) | (rgb[1] << 8) | rgb[2];
     return '#' + (0x1000000 + val).toString(16).slice(1);
 }
@@ -45,7 +56,7 @@ class Tinter {
         this.keyRgb = [
             "rgb(118, 207, 166)", // Vector Green
             "rgb(234, 245, 240)", // Vector Light Green
-            "rgb(211, 239, 225)", // Unused: BottomLeftMenu (20% Green overlaid on Light Green)
+            "rgb(211, 239, 225)", // roomsublist-label-bg-color (20% Green overlaid on Light Green)
         ];
 
         // Some algebra workings for calculating the tint % of Vector Green & Light Green
@@ -59,7 +70,7 @@ class Tinter {
         this.keyHex = [
             "#76CFA6", // Vector Green
             "#EAF5F0", // Vector Light Green
-            "#D3EFE1", // Unused: BottomLeftMenu (20% Green overlaid on Light Green)
+            "#D3EFE1", // roomsublist-label-bg-color (20% Green overlaid on Light Green)
             "#FFFFFF", // white highlights of the SVGs (for switching to dark theme)
         ];
 
@@ -132,28 +143,33 @@ class Tinter {
     tint(primaryColor, secondaryColor, tertiaryColor) {
         this.calcCssFixups();
 
+        if (DEBUG) console.log("Tinter.tint(" + primaryColor + ", " +
+                                                secondaryColor + ", " + 
+                                                tertiaryColor + ")");
+
         if (!primaryColor) {
             primaryColor = this.keyRgb[0];
             secondaryColor = this.keyRgb[1];
+            tertiaryColor = this.keyRgb[2];
         }
 
         if (!secondaryColor) {
             const x = 0.16; // average weighting factor calculated from vector green & light green
-            const rgb = hexToRgb(primaryColor);
+            const rgb = colorToRgb(primaryColor);
             rgb[0] = x * rgb[0] + (1 - x) * 255;
             rgb[1] = x * rgb[1] + (1 - x) * 255;
             rgb[2] = x * rgb[2] + (1 - x) * 255;
-            secondaryColor = rgbToHex(rgb);
+            secondaryColor = rgbToColor(rgb);
         }
 
         if (!tertiaryColor) {
             const x = 0.19;
-            const rgb1 = hexToRgb(primaryColor);
-            const rgb2 = hexToRgb(secondaryColor);
+            const rgb1 = colorToRgb(primaryColor);
+            const rgb2 = colorToRgb(secondaryColor);
             rgb1[0] = x * rgb1[0] + (1 - x) * rgb2[0];
             rgb1[1] = x * rgb1[1] + (1 - x) * rgb2[1];
             rgb1[2] = x * rgb1[2] + (1 - x) * rgb2[2];
-            tertiaryColor = rgbToHex(rgb1);
+            tertiaryColor = rgbToColor(rgb1);
         }
 
         if (this.forceTint == false &&
@@ -169,7 +185,9 @@ class Tinter {
         this.colors[1] = secondaryColor;
         this.colors[2] = tertiaryColor;
 
-        if (DEBUG) console.log("Tinter.tint");
+        if (DEBUG) console.log("Tinter.tint final: (" + primaryColor + ", " +
+                                                secondaryColor + ", " + 
+                                                tertiaryColor + ")");
 
         // go through manually fixing up the stylesheets.
         this.applyCssFixups();
@@ -208,6 +226,11 @@ class Tinter {
                 document.getElementById('mx_theme_secondaryAccentColor')
             ).color;
         }
+        if (document.getElementById('mx_theme_tertiaryAccentColor')) {
+            this.keyRgb[2] = window.getComputedStyle(
+                document.getElementById('mx_theme_tertiaryAccentColor')
+            ).color;
+        }
 
         this.calcCssFixups();
         this.forceTint = true;