switch Tinter from using dispatch to a synchronous update when changing the colourscheme, to avoid CSS getting out of sync with SVG colours

src/Tinter.js

@@ -15,11 +15,14 @@ limitations under the License.
 */
 
 var dis = require("./dispatcher");
+var sdk = require("./index");
 
-// FIXME: these vars should be bundled up and attached to 
+// FIXME: these vars should be bundled up and attached to
 // module.exports otherwise this will break when included by both
 // react-sdk and apps layered on top.
 
+var DEBUG = 0;
+
 // The colour keys to be replaced as referred to in SVGs
 var keyRgb = [
     "rgb(118, 207, 166)", // Vector Green
@@ -75,6 +78,7 @@ var svgAttrs = [
 var cached = false;
 
 function calcCssFixups() {
+    if (DEBUG) console.log("calcSvgFixups start");
     for (var i = 0; i < document.styleSheets.length; i++) {
         var ss = document.styleSheets[i];
         if (!ss) continue; // well done safari >:(
@@ -105,13 +109,16 @@ function calcCssFixups() {
             }
         }
     }
+    if (DEBUG) console.log("calcSvgFixups end");
 }
 
 function applyCssFixups() {
+    if (DEBUG) console.log("applyCssFixups start");
     for (var i = 0; i < cssFixups.length; i++) {
         var cssFixup = cssFixups[i];
         cssFixup.style[cssFixup.attr] = colors[cssFixup.index];
     }
+    if (DEBUG) console.log("applyCssFixups end");
 }
 
 function hexToRgb(color) {
@@ -135,6 +142,7 @@ function rgbToHex(rgb) {
 
 module.exports = {
     tint: function(primaryColor, secondaryColor, tertiaryColor) {
+
         if (!cached) {
             calcCssFixups();
             cached = true;
@@ -173,11 +181,19 @@ module.exports = {
 
         colors = [primaryColor, secondaryColor, tertiaryColor];
 
+        if (DEBUG) console.log("Tinter.tint");
+
         // go through manually fixing up the stylesheets.
         applyCssFixups();
 
         // tell all the SVGs to go fix themselves up
-        dis.dispatch({ action: 'tint_update' });        
+        // we don't do this as a dispatch otherwise it will visually lag
+        var TintableSvg = sdk.getComponent("elements.TintableSvg");
+        if (TintableSvg.mounts) {
+            Object.keys(TintableSvg.mounts).forEach((id) => {
+                TintableSvg.mounts[id].tint();
+            });
+        }
     },
 
     // XXX: we could just move this all into TintableSvg, but as it's so similar
@@ -189,6 +205,7 @@ module.exports = {
         // updated would be a PITA, so just brute-force search for the
         // key colour; cache the element and apply.
 
+        if (DEBUG) console.log("calcSvgFixups start for " + svgs);
         var fixups = [];
         for (var i = 0; i < svgs.length; i++) {
             var svgDoc;
@@ -223,14 +240,17 @@ module.exports = {
                 }
             }
         }
+        if (DEBUG) console.log("calcSvgFixups end");
 
         return fixups;
     },
 
     applySvgFixups: function(fixups) {
+        if (DEBUG) console.log("applySvgFixups start for " + fixups);
         for (var i = 0; i < fixups.length; i++) {
             var svgFixup = fixups[i];
             svgFixup.node.setAttribute(svgFixup.attr, colors[svgFixup.index]);
         }
+        if (DEBUG) console.log("applySvgFixups end");
     },
 };

src/components/structures/MatrixChat.js

@@ -600,13 +600,15 @@ module.exports = React.createClass({
                 var theAlias = MatrixTools.getCanonicalAliasForRoom(room);
                 if (theAlias) presentedId = theAlias;
 
-                var color_scheme_event = room.getAccountData("org.matrix.room.color_scheme");
-                var color_scheme = {};
-                if (color_scheme_event) {
-                    color_scheme = color_scheme_event.getContent();
-                    // XXX: we should validate the event
-                }                
-                Tinter.tint(color_scheme.primary_color, color_scheme.secondary_color);
+                // No need to do this given RoomView triggers it itself...
+                // var color_scheme_event = room.getAccountData("org.matrix.room.color_scheme");
+                // var color_scheme = {};
+                // if (color_scheme_event) {
+                //     color_scheme = color_scheme_event.getContent();
+                //     // XXX: we should validate the event
+                // }
+                // console.log("Tinter.tint from _viewRoom");
+                // Tinter.tint(color_scheme.primary_color, color_scheme.secondary_color);
             }
 
             if (eventId) {

src/components/structures/RoomView.js

@@ -212,7 +212,9 @@ module.exports = React.createClass({
 
         window.removeEventListener('resize', this.onResize);        
 
-        Tinter.tint(); // reset colourscheme
+        // no need to do this as Dir & Settings are now overlays. It just burnt CPU.
+        // console.log("Tinter.tint from RoomView.unmount");
+        // Tinter.tint(); // reset colourscheme
     },
 
     onAction: function(payload) {
@@ -345,7 +347,8 @@ module.exports = React.createClass({
         if (color_scheme_event) {
             color_scheme = color_scheme_event.getContent();
             // XXX: we should validate the event
-        }                
+        }
+        console.log("Tinter.tint from updateTint");
         Tinter.tint(color_scheme.primary_color, color_scheme.secondary_color);
     },
 
@@ -354,6 +357,7 @@ module.exports = React.createClass({
             if (event.getType === "org.matrix.room.color_scheme") {
                 var color_scheme = event.getContent();
                 // XXX: we should validate the event
+                console.log("Tinter.tint from onRoomAccountData");
                 Tinter.tint(color_scheme.primary_color, color_scheme.secondary_color);
             }
         }
@@ -912,6 +916,7 @@ module.exports = React.createClass({
     },
 
     onCancelClick: function() {
+        console.log("updateTint from onCancelClick");
         this.updateTint();
         this.setState({editingRoomSettings: false});
     },
@@ -1179,6 +1184,7 @@ module.exports = React.createClass({
     _gatherTimelinePanelRef: function(r) {
         this.refs.messagePanel = r;
         if(r) {
+            console.log("updateTint from RoomView._gatherTimelinePanelRef");
             this.updateTint();
         }
     },

src/components/views/elements/TintableSvg.js

@@ -18,10 +18,9 @@ limitations under the License.
 
 var React = require('react');
 var ReactDOM = require("react-dom");
-var dis = require("../../../dispatcher");
 var Tinter = require("../../../Tinter");
 
-module.exports = React.createClass({
+var TintableSvg = React.createClass({
     displayName: 'TintableSvg',
 
     propTypes: {
@@ -31,28 +30,42 @@ module.exports = React.createClass({
         className: React.PropTypes.string,
     },
 
+    statics: {
+        // list of currently mounted TintableSvgs
+        mounts: {},
+        idSequence: 0,
+    },
+
     componentWillMount: function() {
         this.fixups = [];
-        this.dispatcherRef = dis.register(this.onAction);
     },
 
     componentDidMount: function() {
+        this.id = TintableSvg.idSequence++;
+        TintableSvg.mounts[this.id] = this;
         // we can't use onLoad on object due to https://github.com/facebook/react/pull/5781
         // so handle it with pure DOM instead
         ReactDOM.findDOMNode(this).addEventListener('load', this.onLoad);
     },
 
     componentWillUnmount: function() {
+        delete TintableSvg.mounts[this.id];
         ReactDOM.findDOMNode(this).removeEventListener('load', this.onLoad);
-        dis.unregister(this.dispatcherRef);
     },
 
-    onAction: function(payload) {
-        if (payload.action !== 'tint_update') return;
+    shouldComponentUpdate: function(nextProps, nextState) {
+        // XXX: no dynamic TintableSvgs for now; speed above all else
+        return false;
+    },
+
+    tint: function() {
+        // TODO: only bother running this if the global tint settings have changed
+        // since we loaded!
         Tinter.applySvgFixups(this.fixups);
     },
 
     onLoad: function(event) {
+        // console.log("TintableSvg.onLoad for " + this.props.src);
         this.fixups = Tinter.calcSvgFixups([event.target]);
         Tinter.applySvgFixups(this.fixups);
     },
@@ -67,3 +80,5 @@ module.exports = React.createClass({
         );
     }
 });
+
+module.exports = TintableSvg;