sundry PR feedback

src/Tinter.js

@@ -14,17 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-var dis = require('./dispatcher');
+// The colour keys to be replaced as referred to in SVGs
-
-var registered = false;
-if (!registered) {
-    dis.register(_onAction);
-}
-
 var keyRgb = [
-    "rgb(118, 207, 166)",
+    "rgb(118, 207, 166)", // Vector Green
-    "rgb(234, 245, 240)",
+    "rgb(234, 245, 240)", // Vector Light Green
-    "rgba(118, 207, 166, 0.2)",
+    "rgba(118, 207, 166, 0.2)", // BottomLeftMenu overlay (20% Vector Green)
 ];
 
 // Some algebra workings for calculating the tint % of Vector Green & Light Green
@@ -34,10 +28,11 @@ var keyRgb = [
 // (255 - 118) x = 255 - 234
 // x = (255 - 234) / (255 - 118) = 0.16 
 
+// The colour keys to be replaced as referred to in SVGs
 var keyHex = [
-    "#76CFA6",
+    "#76CFA6", // Vector Green
-    "#EAF5F0",
+    "#EAF5F0", // Vector Light Green
-    "#D3EFE1",
+    "#D3EFE1", // BottomLeftMenu overlay (20% Vector Green overlaid on Vector Light Green)
 ];
 
 // cache of our replacement colours
@@ -85,10 +80,11 @@ function calcCssFixups() {
         var ss = document.styleSheets[i];
         for (var j = 0; j < ss.cssRules.length; j++) {
             var rule = ss.cssRules[j];
+            if (!rule.style) continue;
             for (var k = 0; k < cssAttrs.length; k++) {
                 var attr = cssAttrs[k];
                 for (var l = 0; l < keyRgb.length; l++) {
-                    if (rule.style && rule.style[attr] === keyRgb[l]) {
+                    if (rule.style[attr] === keyRgb[l]) {
                         cssFixups.push({
                             style: rule.style,
                             attr: attr,
@@ -143,17 +139,6 @@ function applySvgFixups(fixups) {
     }
 }
 
-function _onAction(payload) {
-    if (payload.action !== "svg_onload") return;
-    // XXX: we should probably faff around with toggling the visibility of the node to avoid flashing the wrong colour.
-    // (although this would result in an even worse flicker as the element redraws)
-    var fixups = calcSvgFixups([ payload.svg ]);
-    if (fixups.length) {
-        svgFixups = svgFixups.concat(fixups); // XXX: this leaks fixups
-        applySvgFixups(fixups);
-    }
-}
-
 function hexToRgb(color) {
     if (color[0] === '#') color = color.slice(1);
     if (color.length === 3) {
@@ -210,5 +195,15 @@ module.exports = {
         // updated would be a PITA, so just brute-force search for the
         // key colour; cache the element and apply.
         applySvgFixups(svgFixups);
+    },
+
+    tintSvg: function(svg) {
+        // XXX: we should probably faff around with toggling the visibility of the node to avoid flashing the wrong colour.
+        // (although this would result in an even worse flicker as the element redraws)
+        var fixups = calcSvgFixups([ svg ]);
+        if (fixups.length) {
+            svgFixups = svgFixups.concat(fixups); // XXX: this leaks fixups
+            applySvgFixups(fixups);
         }
+    },
 };

src/components/structures/RoomView.js

@@ -1093,10 +1093,6 @@ module.exports = React.createClass({
         });
     },
 
-    onSvgLoad: function(event) {
-        dis.dispatch({ action: "svg_onload", svg: event.target });
-    },
-
     render: function() {
         var RoomHeader = sdk.getComponent('rooms.RoomHeader');
         var MessageComposer = sdk.getComponent('rooms.MessageComposer');

src/components/views/elements/TintableSvg.js

@@ -19,6 +19,7 @@ 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({
     displayName: 'TintableSvg',
@@ -41,7 +42,7 @@ module.exports = React.createClass({
     },
 
     onLoad: function(event) {
-        dis.dispatch({ action: "svg_onload", svg: event.target });
+        Tinter.tintSvg(event.target);
     },
 
     render: function() {

src/components/views/messages/MFileBody.js

@@ -47,10 +47,6 @@ module.exports = React.createClass({
         return linkText;
     },
 
-    onSvgLoad: function(event) {
-        dis.dispatch({ action: "svg_onload", svg: event.target });
-    },
-
     render: function() {
         var content = this.props.mxEvent.getContent();
         var cli = MatrixClientPeg.get();

src/components/views/messages/MImageBody.js

@@ -97,10 +97,6 @@ module.exports = React.createClass({
         return MatrixClientPeg.get().mxcUrlToHttp(content.url, 480, 360);
     },
 
-    onSvgLoad: function(event) {
-        dis.dispatch({ action: "svg_onload", svg: event.target });
-    },
-
     render: function() {
         var TintableSvg = sdk.getComponent("elements.TintableSvg");
         var content = this.props.mxEvent.getContent();

src/components/views/rooms/MessageComposer.js

@@ -457,10 +457,6 @@ module.exports = React.createClass({
         });
     },
 
-    onSvgLoad: function(event) {
-        dis.dispatch({ action: "svg_onload", svg: event.target });
-    },
-
     render: function() {
         var me = this.props.room.getMember(MatrixClientPeg.get().credentials.userId);
         var uploadInputStyle = {display: 'none'};

src/components/views/rooms/RoomHeader.js

@@ -67,10 +67,6 @@ module.exports = React.createClass({
         return this.refs.name_edit.value;
     },
 
-    onSvgLoad: function(event) {
-        dis.dispatch({ action: "svg_onload", svg: event.target });
-    },
-    
     render: function() {
         var EditableText = sdk.getComponent("elements.EditableText");
         var RoomAvatar = sdk.getComponent('avatars.RoomAvatar');