oops, we actually need to cache the fixups in TintableSvg

src/Tinter.js

@@ -93,37 +93,6 @@ function calcCssFixups() {
     }
 }
 
-function calcSvgFixups(svgs) {
-    // go through manually fixing up SVG colours.
-    // we could do this by stylesheets, but keeping the stylesheets
-    // updated would be a PITA, so just brute-force search for the
-    // key colour; cache the element and apply.
-
-    var fixups = [];
-    for (var i = 0; i < svgs.length; i++) {
-        var svgDoc = svgs[i].contentDocument;
-        if (!svgDoc) continue;
-        var tags = svgDoc.getElementsByTagName("*");
-        for (var j = 0; j < tags.length; j++) {
-            var tag = tags[j];
-            for (var k = 0; k < svgAttrs.length; k++) {
-                var attr = svgAttrs[k];
-                for (var l = 0; l < keyHex.length; l++) {
-                    if (tag.getAttribute(attr) && tag.getAttribute(attr).toUpperCase() === keyHex[l]) {
-                        fixups.push({
-                            node: tag,
-                            attr: attr,
-                            index: l,
-                        });
-                    }
-                }
-            }
-        }
-    }
-
-    return fixups;
-}
-
 function applyCssFixups() {
     for (var i = 0; i < cssFixups.length; i++) {
         var cssFixup = cssFixups[i];
@@ -131,13 +100,6 @@ function applyCssFixups() {
     }
 }
 
-function applySvgFixups(fixups) {
-    for (var i = 0; i < fixups.length; i++) {
-        var svgFixup = fixups[i];
-        svgFixup.node.setAttribute(svgFixup.attr, colors[svgFixup.index]);
-    }
-}
-
 function hexToRgb(color) {
     if (color[0] === '#') color = color.slice(1);
     if (color.length === 3) {
@@ -192,12 +154,44 @@ module.exports = {
         dis.dispatch({ action: 'tint_update' });        
     },
 
-    tintSvg: function(svg) {
+    // XXX: we could just move this all into TintableSvg, but as it's so similar
-        // XXX: we should probably faff around with toggling the visibility of the node to avoid flashing the wrong colour.
+    // to the CSS fixup stuff in Tinter (just that the fixups are stored in TintableSvg)
-        // (although this would result in an even worse flicker as the element redraws)
+    // keeping it here for now.
-        var fixups = calcSvgFixups([ svg ]);
+    calcSvgFixups: function(svgs) {
-        if (fixups.length) {
+        // go through manually fixing up SVG colours.
-            applySvgFixups(fixups);
+        // we could do this by stylesheets, but keeping the stylesheets
+        // updated would be a PITA, so just brute-force search for the
+        // key colour; cache the element and apply.
+
+        var fixups = [];
+        for (var i = 0; i < svgs.length; i++) {
+            var svgDoc = svgs[i].contentDocument;
+            if (!svgDoc) continue;
+            var tags = svgDoc.getElementsByTagName("*");
+            for (var j = 0; j < tags.length; j++) {
+                var tag = tags[j];
+                for (var k = 0; k < svgAttrs.length; k++) {
+                    var attr = svgAttrs[k];
+                    for (var l = 0; l < keyHex.length; l++) {
+                        if (tag.getAttribute(attr) && tag.getAttribute(attr).toUpperCase() === keyHex[l]) {
+                            fixups.push({
+                                node: tag,
+                                attr: attr,
+                                index: l,
+                            });
+                        }
+                    }
+                }
+            }
+        }
+
+        return fixups;
+    },
+
+    applySvgFixups: function(fixups) {
+        for (var i = 0; i < fixups.length; i++) {
+            var svgFixup = fixups[i];
+            svgFixup.node.setAttribute(svgFixup.attr, colors[svgFixup.index]);
         }
     },
 };

src/components/views/elements/TintableSvg.js

@@ -24,6 +24,8 @@ var Tinter = require("../../../Tinter");
 module.exports = React.createClass({
     displayName: 'TintableSvg',
 
+    fixups: [],
+
     propTypes: {
         src: React.PropTypes.string.isRequired,
         width: React.PropTypes.string.isRequired,
@@ -48,11 +50,12 @@ module.exports = React.createClass({
 
     onAction: function(payload) {
         if (payload.action !== 'tint_update') return;
-        Tinter.tintSvg(ReactDOM.findDOMNode(this));
+        Tinter.applySvgFixups(this.fixups);
     },
 
     onLoad: function(event) {
-        Tinter.tintSvg(event.target);
+        this.fixups = Tinter.calcSvgFixups([event.target]);
+        Tinter.applySvgFixups(this.fixups);
     },
 
     render: function() {