From 4f915d622e77d3732e0d6a7b5e97748d5213406a Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Sun, 3 Jan 2016 22:30:52 +0000
Subject: [PATCH 01/19] switch SVGs from imgs to objects

---
 src/components/structures/RoomView.js         | 22 +++++++++++--------
 src/components/views/rooms/MessageComposer.js |  6 ++---
 src/components/views/rooms/RoomHeader.js      | 18 +++++++--------
 3 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 56dd41d929..f1d408edfd 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -1174,7 +1174,7 @@ module.exports = React.createClass({
                 if (this.state.syncState === "ERROR") {
                     statusBar = (
                         <div className="mx_RoomView_connectionLostBar">
-                            <img src="img/warning.svg" width="24" height="23" alt="/!\ "/>
+                            <img src="img/warning.svg" width="24" height="23" title="/!\ " alt="/!\ "/>
                             <div className="mx_RoomView_connectionLostBar_textArea">
                                 <div className="mx_RoomView_connectionLostBar_title">
                                     Connectivity to the server has been lost.
@@ -1194,7 +1194,7 @@ module.exports = React.createClass({
                             <div className="mx_RoomView_tabCompleteWrapper">
                                 <TabCompleteBar entries={this.tabComplete.peek(6)} />
                                 <div className="mx_RoomView_tabCompleteEol">
-                                    <img src="img/eol.svg" width="22" height="16" alt="->|"/>
+                                    <object type="image/svg+xml" data="img/eol.svg" width="22" height="16" title="->|"/>
                                     Auto-complete
                                 </div>
                             </div>
@@ -1204,7 +1204,7 @@ module.exports = React.createClass({
                 else if (this.state.hasUnsentMessages) {
                     statusBar = (
                         <div className="mx_RoomView_connectionLostBar">
-                            <img src="img/warning.svg" width="24" height="23" alt="/!\ "/>
+                            <img src="img/warning.svg" width="24" height="23" title="/!\ " alt="/!\ "/>
                             <div className="mx_RoomView_connectionLostBar_textArea">
                                 <div className="mx_RoomView_connectionLostBar_title">
                                     Some of your messages have not been sent.
@@ -1268,7 +1268,7 @@ module.exports = React.createClass({
             if (this.state.draggingFile) {
                 fileDropTarget = <div className="mx_RoomView_fileDropTarget">
                                     <div className="mx_RoomView_fileDropTargetLabel">
-                                        <img src="img/upload-big.svg" width="45" height="59" alt="Drop File Here"/><br/>
+                                        <object type="image/svg+xml" data="img/upload-big.svg" width="45" height="59" title="Drop File Here"/><br/>
                                         Drop File Here
                                     </div>
                                  </div>;
@@ -1306,24 +1306,28 @@ module.exports = React.createClass({
                 if (call.type === "video") {
                     zoomButton = (
                         <div className="mx_RoomView_voipButton" onClick={this.onFullscreenClick}>
-                            <img src="img/fullscreen.svg" title="Fill screen" alt="Fill screen" width="29" height="22" style={{ marginTop: 1, marginRight: 4 }}/>
+                            <object type="image/svg+xml" data="img/fullscreen.svg" title="Fill screen" width="29" height="22" style={{ marginTop: 1, marginRight: 4 }}/>
                         </div>
                     );
 
                     videoMuteButton =
                         <div className="mx_RoomView_voipButton" onClick={this.onMuteVideoClick}>
-                            <img src={call.isLocalVideoMuted() ? "img/video-unmute.svg" : "img/video-mute.svg"} width="31" height="27"/>
+                            <img src={call.isLocalVideoMuted() ? "img/video-unmute.svg" : "img/video-mute.svg"}
+                                 alt={call.isLocalVideoMuted() ? "Click to unmute video" : "Click to mute video"}
+                                 width="31" height="27"/>
                         </div>
                 }
                 voiceMuteButton =
                     <div className="mx_RoomView_voipButton" onClick={this.onMuteAudioClick}>
-                        <img src={call.isMicrophoneMuted() ? "img/voice-unmute.svg" : "img/voice-mute.svg"} width="21" height="26"/>
+                        <img src={call.isMicrophoneMuted() ? "img/voice-unmute.svg" : "img/voice-mute.svg"} 
+                             alt={call.isMicrophoneMuted() ? "Click to unmute audio" : "Click to mute audio"} 
+                             width="21" height="26"/>
                     </div>
 
                 if (!statusBar) {
                     statusBar =
                         <div className="mx_RoomView_callBar">
-                            <img src="img/sound-indicator.svg" width="23" height="20" alt=""/>
+                            <img src="img/sound-indicator.svg" width="23" height="20"/>
                             <b>Active call</b>
                         </div>;
                 }
@@ -1334,7 +1338,7 @@ module.exports = React.createClass({
                         { videoMuteButton }
                         { zoomButton }
                         { statusBar }
-                        <img className="mx_RoomView_voipChevron" src="img/voip-chevron.svg" width="22" height="17"/>
+                        <object type="image/svg+xml" className="mx_RoomView_voipChevron" data="img/voip-chevron.svg" width="22" height="17"/>
                     </div>
             }
 
diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index 5ac4a24908..e4bfcf9a41 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -474,11 +474,11 @@ module.exports = React.createClass({
         else {
             callButton =
                 <div className="mx_MessageComposer_voicecall" onClick={this.onVoiceCallClick}>
-                    <img src="img/voice.svg" alt="Voice call" title="Voice call" width="16" height="26"/>
+                    <object type="image/svg+xml" data="img/voice.svg" title="Voice call" width="16" height="26"/>
                 </div>
             videoCallButton =
                 <div className="mx_MessageComposer_videocall" onClick={this.onCallClick}>
-                    <img src="img/call.svg" alt="Video call" title="Video call" width="30" height="22"/>
+                    <object type="image/svg+xml" data="img/call.svg" title="Video call" width="30" height="22"/>
                 </div>
         }
 
@@ -493,7 +493,7 @@ module.exports = React.createClass({
                         <textarea ref="textarea" rows="1" onKeyDown={this.onKeyDown} onKeyUp={this.onKeyUp} placeholder="Type a message..." />
                     </div>
                     <div className="mx_MessageComposer_upload" onClick={this.onUploadClick}>
-                        <img src="img/upload.svg" alt="Upload file" title="Upload file" width="19" height="24"/>
+                        <object type="image/svg+xml" data="img/upload.svg" title="Upload file" width="19" height="24"/>
                         <input type="file" style={uploadInputStyle} ref="uploadInput" onChange={this.onUploadFileSelected} />
                     </div>
                     { hangupButton }
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index 13959a16b9..a3ee4f465a 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -119,7 +119,7 @@ module.exports = React.createClass({
                         <div className="mx_RoomHeader_nametext" title={ this.props.room.name }>{ this.props.room.name }</div>
                         { searchStatus }
                         <div className="mx_RoomHeader_settingsButton">
-                            <img src="img/settings.svg" width="12" height="12"/>
+                            <object type="image/svg+xml" data="img/settings.svg" width="12" height="12"/>
                         </div>
                     </div>
                 if (topic) topic_el = <div className="mx_RoomHeader_topic" title={topic.getContent().topic}>{ topic.getContent().topic }</div>;
@@ -135,18 +135,18 @@ module.exports = React.createClass({
             var leave_button;
             if (this.props.onLeaveClick) {
                 leave_button =
-                    <div className="mx_RoomHeader_button mx_RoomHeader_leaveButton">
-                        <img src="img/leave.svg" title="Leave room" alt="Leave room"
-                            width="26" height="20" onClick={this.props.onLeaveClick}/>
+                    <div className="mx_RoomHeader_button mx_RoomHeader_leaveButton" onClick={this.props.onLeaveClick}>
+                        <object type="image/svg+xml" data="img/leave.svg" title="Leave room"
+                            width="26" height="20"/>
                     </div>;
             }
 
             var forget_button;
             if (this.props.onForgetClick) {
                 forget_button =
-                    <div className="mx_RoomHeader_button mx_RoomHeader_leaveButton">
-                        <img src="img/leave.svg" title="Forget room" alt="Forget room"
-                            width="26" height="20" onClick={this.props.onForgetClick}/>
+                    <div className="mx_RoomHeader_button mx_RoomHeader_leaveButton" onClick={this.props.onForgetClick}>
+                        <object type="image/svg+xml" data="img/leave.svg" title="Forget room"
+                            width="26" height="20"/>
                     </div>;
             }
 
@@ -166,8 +166,8 @@ module.exports = React.createClass({
                     <div className="mx_RoomHeader_rightRow">
                         { forget_button }
                         { leave_button }
-                        <div className="mx_RoomHeader_button">
-                            <img src="img/search.svg" title="Search" alt="Search" width="21" height="19" onClick={this.props.onSearchClick}/>
+                        <div className="mx_RoomHeader_button" onClick={this.props.onSearchClick}>
+                            <object type="image/svg+xml" data="img/search.svg" title="Search" width="21" height="19"/>
                         </div>
                     </div>
                 </div>

From 3009da0b397c54debb144cdfd842791873236467 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Sun, 3 Jan 2016 22:34:56 +0000
Subject: [PATCH 02/19] move title attributes to the div

---
 src/components/structures/RoomView.js         | 12 ++++++------
 src/components/views/rooms/MessageComposer.js | 12 ++++++------
 src/components/views/rooms/RoomHeader.js      | 14 +++++++-------
 3 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index f1d408edfd..ea055e594b 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -1193,8 +1193,8 @@ module.exports = React.createClass({
                             <div className="mx_RoomView_tabCompleteImage">...</div>
                             <div className="mx_RoomView_tabCompleteWrapper">
                                 <TabCompleteBar entries={this.tabComplete.peek(6)} />
-                                <div className="mx_RoomView_tabCompleteEol">
-                                    <object type="image/svg+xml" data="img/eol.svg" width="22" height="16" title="->|"/>
+                                <div className="mx_RoomView_tabCompleteEol" title="->|">
+                                    <object type="image/svg+xml" data="img/eol.svg" width="22" height="16"/>
                                     Auto-complete
                                 </div>
                             </div>
@@ -1267,8 +1267,8 @@ module.exports = React.createClass({
             var fileDropTarget = null;
             if (this.state.draggingFile) {
                 fileDropTarget = <div className="mx_RoomView_fileDropTarget">
-                                    <div className="mx_RoomView_fileDropTargetLabel">
-                                        <object type="image/svg+xml" data="img/upload-big.svg" width="45" height="59" title="Drop File Here"/><br/>
+                                    <div className="mx_RoomView_fileDropTargetLabel" title="Drop File Here">
+                                        <object type="image/svg+xml" data="img/upload-big.svg" width="45" height="59"/><br/>
                                         Drop File Here
                                     </div>
                                  </div>;
@@ -1305,8 +1305,8 @@ module.exports = React.createClass({
 
                 if (call.type === "video") {
                     zoomButton = (
-                        <div className="mx_RoomView_voipButton" onClick={this.onFullscreenClick}>
-                            <object type="image/svg+xml" data="img/fullscreen.svg" title="Fill screen" width="29" height="22" style={{ marginTop: 1, marginRight: 4 }}/>
+                        <div className="mx_RoomView_voipButton" onClick={this.onFullscreenClick} title="Fill screen">
+                            <object type="image/svg+xml" data="img/fullscreen.svg" width="29" height="22" style={{ marginTop: 1, marginRight: 4 }}/>
                         </div>
                     );
 
diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index e4bfcf9a41..d5863cdfef 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -473,12 +473,12 @@ module.exports = React.createClass({
         }
         else {
             callButton =
-                <div className="mx_MessageComposer_voicecall" onClick={this.onVoiceCallClick}>
-                    <object type="image/svg+xml" data="img/voice.svg" title="Voice call" width="16" height="26"/>
+                <div className="mx_MessageComposer_voicecall" onClick={this.onVoiceCallClick} title="Voice call">
+                    <object type="image/svg+xml" data="img/voice.svg" width="16" height="26"/>
                 </div>
             videoCallButton =
-                <div className="mx_MessageComposer_videocall" onClick={this.onCallClick}>
-                    <object type="image/svg+xml" data="img/call.svg" title="Video call" width="30" height="22"/>
+                <div className="mx_MessageComposer_videocall" onClick={this.onCallClick} title="Video call">
+                    <object type="image/svg+xml" data="img/call.svg" width="30" height="22"/>
                 </div>
         }
 
@@ -492,8 +492,8 @@ module.exports = React.createClass({
                     <div className="mx_MessageComposer_input" onClick={ this.onInputClick }>
                         <textarea ref="textarea" rows="1" onKeyDown={this.onKeyDown} onKeyUp={this.onKeyUp} placeholder="Type a message..." />
                     </div>
-                    <div className="mx_MessageComposer_upload" onClick={this.onUploadClick}>
-                        <object type="image/svg+xml" data="img/upload.svg" title="Upload file" width="19" height="24"/>
+                    <div className="mx_MessageComposer_upload" onClick={this.onUploadClick} title="Upload file">
+                        <object type="image/svg+xml" data="img/upload.svg" width="19" height="24"/>
                         <input type="file" style={uploadInputStyle} ref="uploadInput" onChange={this.onUploadFileSelected} />
                     </div>
                     { hangupButton }
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index a3ee4f465a..7f13e8c655 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -118,7 +118,7 @@ module.exports = React.createClass({
                     <div className="mx_RoomHeader_name" onClick={this.props.onSettingsClick}>
                         <div className="mx_RoomHeader_nametext" title={ this.props.room.name }>{ this.props.room.name }</div>
                         { searchStatus }
-                        <div className="mx_RoomHeader_settingsButton">
+                        <div className="mx_RoomHeader_settingsButton" title="Settings">
                             <object type="image/svg+xml" data="img/settings.svg" width="12" height="12"/>
                         </div>
                     </div>
@@ -135,8 +135,8 @@ module.exports = React.createClass({
             var leave_button;
             if (this.props.onLeaveClick) {
                 leave_button =
-                    <div className="mx_RoomHeader_button mx_RoomHeader_leaveButton" onClick={this.props.onLeaveClick}>
-                        <object type="image/svg+xml" data="img/leave.svg" title="Leave room"
+                    <div className="mx_RoomHeader_button mx_RoomHeader_leaveButton" onClick={this.props.onLeaveClick} title="Leave room">
+                        <object type="image/svg+xml" data="img/leave.svg"
                             width="26" height="20"/>
                     </div>;
             }
@@ -144,8 +144,8 @@ module.exports = React.createClass({
             var forget_button;
             if (this.props.onForgetClick) {
                 forget_button =
-                    <div className="mx_RoomHeader_button mx_RoomHeader_leaveButton" onClick={this.props.onForgetClick}>
-                        <object type="image/svg+xml" data="img/leave.svg" title="Forget room"
+                    <div className="mx_RoomHeader_button mx_RoomHeader_leaveButton" onClick={this.props.onForgetClick} title="Forget room">
+                        <object type="image/svg+xml" data="img/leave.svg"
                             width="26" height="20"/>
                     </div>;
             }
@@ -166,8 +166,8 @@ module.exports = React.createClass({
                     <div className="mx_RoomHeader_rightRow">
                         { forget_button }
                         { leave_button }
-                        <div className="mx_RoomHeader_button" onClick={this.props.onSearchClick}>
-                            <object type="image/svg+xml" data="img/search.svg" title="Search" width="21" height="19"/>
+                        <div className="mx_RoomHeader_button" onClick={this.props.onSearchClick} title="Search">
+                            <object type="image/svg+xml" data="img/search.svg" width="21" height="19"/>
                         </div>
                     </div>
                 </div>

From 555abdae30ad632316fe73716e044784a95f3e9e Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Tue, 5 Jan 2016 00:46:52 +0000
Subject: [PATCH 03/19] wire up Tinter.js

---
 src/SlashCommands.js                          |   5 +
 src/Tinter.js                                 | 183 ++++++++++++++++++
 src/components/structures/RoomView.js         |   8 +-
 src/components/views/rooms/MessageComposer.js |   6 +-
 src/components/views/rooms/RoomHeader.js      |   8 +-
 5 files changed, 199 insertions(+), 11 deletions(-)
 create mode 100644 src/Tinter.js

diff --git a/src/SlashCommands.js b/src/SlashCommands.js
index f5eaff9066..d8588170b7 100644
--- a/src/SlashCommands.js
+++ b/src/SlashCommands.js
@@ -18,6 +18,7 @@ var MatrixClientPeg = require("./MatrixClientPeg");
 var MatrixTools = require("./MatrixTools");
 var dis = require("./dispatcher");
 var encryption = require("./encryption");
+var Tinter = require("./Tinter");
 
 var reject = function(msg) {
     return {
@@ -42,6 +43,10 @@ var commands = {
         return reject("Usage: /nick <display_name>");
     },
 
+    tint: function(room_id, args) {
+        Tinter.tint(args);
+    },
+
     encrypt: function(room_id, args) {
         if (args == "on") {
             var client = MatrixClientPeg.get();
diff --git a/src/Tinter.js b/src/Tinter.js
new file mode 100644
index 0000000000..be81abd9c2
--- /dev/null
+++ b/src/Tinter.js
@@ -0,0 +1,183 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+var keyRgb = [
+    "rgb(118, 207, 166)",
+    "rgb(234, 245, 240)",
+    "rgba(118, 207, 166, 0.2)",
+];
+
+// Some algebra workings for calculating the tint % of Vector Green & Light Green
+// x * 118 + (1 - x) * 255 = 234
+// x * 118 + 255 - 255 * x = 234
+// x * 118 - x * 255 = 234 - 255
+// (255 - 118) x = 255 - 234
+// x = (255 - 234) / (255 - 118) = 0.16 
+
+var keyHex = [
+    "#76CFA6",
+    "#EAF5F0",
+];
+
+var cssFixups = [
+    // {
+    //     style: a style object that should be fixed up taken from a stylesheet
+    //     attr: name of the attribute to be clobbered, e.g. 'color'
+    //     index: ordinal of primary, secondary or tertiary
+    // }
+];
+
+// CSS attributes to be fixed up
+var cssAttrs = [
+    "color",
+    "backgroundColor",
+    "borderColor",
+];
+
+var svgFixups = [
+    // {
+    //     node: a SVG node that needs to be fixed up
+    //     attr: name of the attribute to be clobbered, e.g. 'fill'
+    //     index: ordinal of primary, secondary
+    // }
+];
+
+var svgAttrs = [
+    "fill",
+    "stroke",
+];
+
+var cached = false;
+
+function calcCssFixups() {
+    for (var i = 0; i < document.styleSheets.length; i++) {
+        var ss = document.styleSheets[i];
+        for (var j = 0; j < ss.cssRules.length; j++) {
+            var rule = ss.cssRules[j];
+            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]) {
+                        cssFixups.push({
+                            style: rule.style,
+                            attr: attr,
+                            index: l,
+                        });
+                    }
+                }
+            }
+        }
+    }
+}
+
+function calcSvgFixups() {
+    var svgs = document.getElementsByClassName("mx_Svg");
+    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]) {
+                        svgFixups.push({
+                            node: tag,
+                            attr: attr,
+                            index: l,
+                        });
+                    }
+                }
+            }
+        }
+    }
+}
+
+function applyCssFixups(primaryColor, secondaryColor, tertiaryColor) {
+    var colors = [primaryColor, secondaryColor, tertiaryColor];
+
+    for (var i = 0; i < cssFixups.length; i++) {
+        var cssFixup = cssFixups[i];
+        cssFixup.style[cssFixup.attr] = colors[cssFixup.index];
+    }
+}
+
+function applySvgFixups(primaryColor, secondaryColor, tertiaryColor) {
+    var colors = [primaryColor, secondaryColor, tertiaryColor];
+
+    for (var i = 0; i < svgFixups.length; i++) {
+        var svgFixup = svgFixups[i];
+        svgFixup.node.setAttribute(svgFixup.attr, colors[svgFixup.index]);
+    }
+}
+
+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];
+    }
+    var val = parseInt(color, 16);
+    var r = (val >> 16) & 255;
+    var g = (val >> 8) & 255;
+    var b = val & 255;
+    return [r, g, b];
+}
+
+function rgbToHex(rgb) {
+    var val = (rgb[0] << 16) | (rgb[1] << 8) | rgb[2];
+    return '#' + (0x1000000 + val).toString(16).slice(1)
+}
+
+module.exports = {
+    tint: function(primaryColor, secondaryColor, tertiaryColor) {
+        if (!cached) {
+            calcCssFixups();
+            calcSvgFixups();
+            cached = true;
+        }
+
+        if (!secondaryColor) {
+            var x = 0.16; // average weighting factor calculated from vector green & light green
+            var rgb = hexToRgb(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);
+        }
+
+        if (!tertiaryColor) {
+            var x = 0.19;
+            var rgb1 = hexToRgb(primaryColor);
+            var rgb2 = hexToRgb(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);
+        }
+
+        // go through manually fixing up the stylesheets.
+        applyCssFixups(primaryColor, secondaryColor, tertiaryColor);
+
+        // 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.
+        applySvgFixups(primaryColor, secondaryColor, tertiaryColor);
+    }
+};
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index ea055e594b..5dec8c6139 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -1194,7 +1194,7 @@ module.exports = React.createClass({
                             <div className="mx_RoomView_tabCompleteWrapper">
                                 <TabCompleteBar entries={this.tabComplete.peek(6)} />
                                 <div className="mx_RoomView_tabCompleteEol" title="->|">
-                                    <object type="image/svg+xml" data="img/eol.svg" width="22" height="16"/>
+                                    <object className="mx_Svg" type="image/svg+xml" data="img/eol.svg" width="22" height="16"/>
                                     Auto-complete
                                 </div>
                             </div>
@@ -1268,7 +1268,7 @@ module.exports = React.createClass({
             if (this.state.draggingFile) {
                 fileDropTarget = <div className="mx_RoomView_fileDropTarget">
                                     <div className="mx_RoomView_fileDropTargetLabel" title="Drop File Here">
-                                        <object type="image/svg+xml" data="img/upload-big.svg" width="45" height="59"/><br/>
+                                        <object className="mx_Svg" type="image/svg+xml" data="img/upload-big.svg" width="45" height="59"/><br/>
                                         Drop File Here
                                     </div>
                                  </div>;
@@ -1306,7 +1306,7 @@ module.exports = React.createClass({
                 if (call.type === "video") {
                     zoomButton = (
                         <div className="mx_RoomView_voipButton" onClick={this.onFullscreenClick} title="Fill screen">
-                            <object type="image/svg+xml" data="img/fullscreen.svg" width="29" height="22" style={{ marginTop: 1, marginRight: 4 }}/>
+                            <object className="mx_Svg" type="image/svg+xml" data="img/fullscreen.svg" width="29" height="22" style={{ marginTop: 1, marginRight: 4 }}/>
                         </div>
                     );
 
@@ -1338,7 +1338,7 @@ module.exports = React.createClass({
                         { videoMuteButton }
                         { zoomButton }
                         { statusBar }
-                        <object type="image/svg+xml" className="mx_RoomView_voipChevron" data="img/voip-chevron.svg" width="22" height="17"/>
+                        <object className="mx_Svg" type="image/svg+xml" className="mx_RoomView_voipChevron" data="img/voip-chevron.svg" width="22" height="17"/>
                     </div>
             }
 
diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index d5863cdfef..512b2eb109 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -474,11 +474,11 @@ module.exports = React.createClass({
         else {
             callButton =
                 <div className="mx_MessageComposer_voicecall" onClick={this.onVoiceCallClick} title="Voice call">
-                    <object type="image/svg+xml" data="img/voice.svg" width="16" height="26"/>
+                    <object className="mx_Svg" type="image/svg+xml" data="img/voice.svg" width="16" height="26"/>
                 </div>
             videoCallButton =
                 <div className="mx_MessageComposer_videocall" onClick={this.onCallClick} title="Video call">
-                    <object type="image/svg+xml" data="img/call.svg" width="30" height="22"/>
+                    <object className="mx_Svg" type="image/svg+xml" data="img/call.svg" width="30" height="22"/>
                 </div>
         }
 
@@ -493,7 +493,7 @@ module.exports = React.createClass({
                         <textarea ref="textarea" rows="1" onKeyDown={this.onKeyDown} onKeyUp={this.onKeyUp} placeholder="Type a message..." />
                     </div>
                     <div className="mx_MessageComposer_upload" onClick={this.onUploadClick} title="Upload file">
-                        <object type="image/svg+xml" data="img/upload.svg" width="19" height="24"/>
+                        <object className="mx_Svg" type="image/svg+xml" data="img/upload.svg" width="19" height="24"/>
                         <input type="file" style={uploadInputStyle} ref="uploadInput" onChange={this.onUploadFileSelected} />
                     </div>
                     { hangupButton }
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index 7f13e8c655..6f1c884f43 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -119,7 +119,7 @@ module.exports = React.createClass({
                         <div className="mx_RoomHeader_nametext" title={ this.props.room.name }>{ this.props.room.name }</div>
                         { searchStatus }
                         <div className="mx_RoomHeader_settingsButton" title="Settings">
-                            <object type="image/svg+xml" data="img/settings.svg" width="12" height="12"/>
+                            <object className="mx_Svg" type="image/svg+xml" data="img/settings.svg" width="12" height="12"/>
                         </div>
                     </div>
                 if (topic) topic_el = <div className="mx_RoomHeader_topic" title={topic.getContent().topic}>{ topic.getContent().topic }</div>;
@@ -136,7 +136,7 @@ module.exports = React.createClass({
             if (this.props.onLeaveClick) {
                 leave_button =
                     <div className="mx_RoomHeader_button mx_RoomHeader_leaveButton" onClick={this.props.onLeaveClick} title="Leave room">
-                        <object type="image/svg+xml" data="img/leave.svg"
+                        <object className="mx_Svg" type="image/svg+xml" data="img/leave.svg"
                             width="26" height="20"/>
                     </div>;
             }
@@ -145,7 +145,7 @@ module.exports = React.createClass({
             if (this.props.onForgetClick) {
                 forget_button =
                     <div className="mx_RoomHeader_button mx_RoomHeader_leaveButton" onClick={this.props.onForgetClick} title="Forget room">
-                        <object type="image/svg+xml" data="img/leave.svg"
+                        <object className="mx_Svg" type="image/svg+xml" data="img/leave.svg"
                             width="26" height="20"/>
                     </div>;
             }
@@ -167,7 +167,7 @@ module.exports = React.createClass({
                         { forget_button }
                         { leave_button }
                         <div className="mx_RoomHeader_button" onClick={this.props.onSearchClick} title="Search">
-                            <object type="image/svg+xml" data="img/search.svg" width="21" height="19"/>
+                            <object className="mx_Svg" type="image/svg+xml" data="img/search.svg" width="21" height="19"/>
                         </div>
                     </div>
                 </div>

From 001dc8612b992ef4ead906e8563eddeb7046d6cd Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Tue, 5 Jan 2016 03:34:52 +0000
Subject: [PATCH 04/19] support fixing up dynamically loaded SVGs

---
 src/SlashCommands.js                          |  1 +
 src/Tinter.js                                 | 59 ++++++++++++++-----
 src/components/structures/RoomView.js         | 12 ++--
 src/components/views/messages/MFileBody.js    |  7 ++-
 src/components/views/messages/MImageBody.js   |  2 +-
 src/components/views/rooms/MessageComposer.js | 10 +++-
 src/components/views/rooms/RoomHeader.js      |  8 ++-
 7 files changed, 74 insertions(+), 25 deletions(-)

diff --git a/src/SlashCommands.js b/src/SlashCommands.js
index d8588170b7..4b915d00ce 100644
--- a/src/SlashCommands.js
+++ b/src/SlashCommands.js
@@ -45,6 +45,7 @@ var commands = {
 
     tint: function(room_id, args) {
         Tinter.tint(args);
+        return success();
     },
 
     encrypt: function(room_id, args) {
diff --git a/src/Tinter.js b/src/Tinter.js
index be81abd9c2..b2d7b3347a 100644
--- a/src/Tinter.js
+++ b/src/Tinter.js
@@ -14,6 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+var dis = require('./dispatcher');
+
+var registered = false;
+if (!registered) {
+    dis.register(_onAction);
+}
+
 var keyRgb = [
     "rgb(118, 207, 166)",
     "rgb(234, 245, 240)",
@@ -30,6 +37,15 @@ var keyRgb = [
 var keyHex = [
     "#76CFA6",
     "#EAF5F0",
+    "#D3EFE1",
+];
+
+// cache of our replacement colours
+// defaults to our keys.
+var colors = [
+    keyHex[0],
+    keyHex[1],
+    keyHex[2],
 ];
 
 var cssFixups = [
@@ -60,6 +76,8 @@ var svgAttrs = [
     "stroke",
 ];
 
+var svgNodes = {};
+
 var cached = false;
 
 function calcCssFixups() {
@@ -83,9 +101,11 @@ function calcCssFixups() {
     }
 }
 
-function calcSvgFixups() {
-    var svgs = document.getElementsByClassName("mx_Svg");
+function calcSvgFixups(nodes) {
+    var svgs = nodes || document.getElementsByClassName("mx_Svg");
+    var fixups = [];
     for (var i = 0; i < svgs.length; i++) {
+
         var svgDoc = svgs[i].contentDocument;
         if (!svgDoc) continue;
         var tags = svgDoc.getElementsByTagName("*");
@@ -95,7 +115,7 @@ function calcSvgFixups() {
                 var attr = svgAttrs[k];
                 for (var l = 0; l < keyHex.length; l++) {
                     if (tag.getAttribute(attr) && tag.getAttribute(attr).toUpperCase() === keyHex[l]) {
-                        svgFixups.push({
+                        fixups.push({
                             node: tag,
                             attr: attr,
                             index: l,
@@ -105,26 +125,35 @@ function calcSvgFixups() {
             }
         }
     }
+
+    return fixups;
 }
 
-function applyCssFixups(primaryColor, secondaryColor, tertiaryColor) {
-    var colors = [primaryColor, secondaryColor, tertiaryColor];
-
+function applyCssFixups() {
     for (var i = 0; i < cssFixups.length; i++) {
         var cssFixup = cssFixups[i];
         cssFixup.style[cssFixup.attr] = colors[cssFixup.index];
     }
 }
 
-function applySvgFixups(primaryColor, secondaryColor, tertiaryColor) {
-    var colors = [primaryColor, secondaryColor, tertiaryColor];
-
-    for (var i = 0; i < svgFixups.length; i++) {
-        var svgFixup = svgFixups[i];
+function applySvgFixups(fixups) {
+    for (var i = 0; i < fixups.length; i++) {
+        var svgFixup = fixups[i];
         svgFixup.node.setAttribute(svgFixup.attr, colors[svgFixup.index]);
     }
 }
 
+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) {
@@ -148,7 +177,7 @@ module.exports = {
     tint: function(primaryColor, secondaryColor, tertiaryColor) {
         if (!cached) {
             calcCssFixups();
-            calcSvgFixups();
+            svgFixups = calcSvgFixups();
             cached = true;
         }
 
@@ -171,13 +200,15 @@ module.exports = {
             tertiaryColor = rgbToHex(rgb1);
         }
 
+        colors = [primaryColor, secondaryColor, tertiaryColor];
+
         // go through manually fixing up the stylesheets.
-        applyCssFixups(primaryColor, secondaryColor, tertiaryColor);
+        applyCssFixups();
 
         // 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.
-        applySvgFixups(primaryColor, secondaryColor, tertiaryColor);
+        applySvgFixups(svgFixups);
     }
 };
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 5dec8c6139..93d4b0dc2a 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -1093,6 +1093,10 @@ 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');
@@ -1194,7 +1198,7 @@ module.exports = React.createClass({
                             <div className="mx_RoomView_tabCompleteWrapper">
                                 <TabCompleteBar entries={this.tabComplete.peek(6)} />
                                 <div className="mx_RoomView_tabCompleteEol" title="->|">
-                                    <object className="mx_Svg" type="image/svg+xml" data="img/eol.svg" width="22" height="16"/>
+                                    <object onLoad={ this.onSvgLoad } className="mx_Svg" type="image/svg+xml" data="img/eol.svg" width="22" height="16"/>
                                     Auto-complete
                                 </div>
                             </div>
@@ -1268,7 +1272,7 @@ module.exports = React.createClass({
             if (this.state.draggingFile) {
                 fileDropTarget = <div className="mx_RoomView_fileDropTarget">
                                     <div className="mx_RoomView_fileDropTargetLabel" title="Drop File Here">
-                                        <object className="mx_Svg" type="image/svg+xml" data="img/upload-big.svg" width="45" height="59"/><br/>
+                                        <object onLoad={ this.onSvgLoad } className="mx_Svg" type="image/svg+xml" data="img/upload-big.svg" width="45" height="59"/><br/>
                                         Drop File Here
                                     </div>
                                  </div>;
@@ -1306,7 +1310,7 @@ module.exports = React.createClass({
                 if (call.type === "video") {
                     zoomButton = (
                         <div className="mx_RoomView_voipButton" onClick={this.onFullscreenClick} title="Fill screen">
-                            <object className="mx_Svg" type="image/svg+xml" data="img/fullscreen.svg" width="29" height="22" style={{ marginTop: 1, marginRight: 4 }}/>
+                            <object onLoad={ this.onSvgLoad } className="mx_Svg" type="image/svg+xml" data="img/fullscreen.svg" width="29" height="22" style={{ marginTop: 1, marginRight: 4 }}/>
                         </div>
                     );
 
@@ -1338,7 +1342,7 @@ module.exports = React.createClass({
                         { videoMuteButton }
                         { zoomButton }
                         { statusBar }
-                        <object className="mx_Svg" type="image/svg+xml" className="mx_RoomView_voipChevron" data="img/voip-chevron.svg" width="22" height="17"/>
+                        <object onLoad={ this.onSvgLoad } className="mx_Svg" type="image/svg+xml" className="mx_RoomView_voipChevron" data="img/voip-chevron.svg" width="22" height="17"/>
                     </div>
             }
 
diff --git a/src/components/views/messages/MFileBody.js b/src/components/views/messages/MFileBody.js
index 193cafe255..7d6cd3d557 100644
--- a/src/components/views/messages/MFileBody.js
+++ b/src/components/views/messages/MFileBody.js
@@ -19,6 +19,7 @@ limitations under the License.
 var React = require('react');
 var filesize = require('filesize');
 var MatrixClientPeg = require('../../../MatrixClientPeg');
+var dis = require("../../../dispatcher");
 
 module.exports = React.createClass({
     displayName: 'MFileBody',
@@ -45,6 +46,10 @@ 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();
@@ -57,7 +62,7 @@ module.exports = React.createClass({
                 <span className="mx_MFileBody">
                     <div className="mx_MImageBody_download">
                         <a href={cli.mxcUrlToHttp(content.url)} target="_blank">
-                            <img src="img/download.png" width="10" height="12"/>
+                            <object onLoad={ this.onSvgLoad } className="mx_Svg" type="image/svg+xml" data="img/download.svg" width="12" height="14"/>
                             Download {text}
                         </a>
                     </div>
diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index 6afdddc307..520a36501c 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -118,7 +118,7 @@ module.exports = React.createClass({
                     </a>
                     <div className="mx_MImageBody_download">
                         <a href={cli.mxcUrlToHttp(content.url)} target="_blank">
-                            <img src="img/download.png" width="10" height="12"/>
+                            <object onLoad={ this.onSvgLoad } className="mx_Svg" type="image/svg+xml" data="img/download.svg" width="12" height="14"/>
                             Download {content.body} ({ content.info && content.info.size ? filesize(content.info.size) : "Unknown size" })
                         </a>
                     </div>
diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index 512b2eb109..8aa5513bcd 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -457,6 +457,10 @@ 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'};
@@ -474,11 +478,11 @@ module.exports = React.createClass({
         else {
             callButton =
                 <div className="mx_MessageComposer_voicecall" onClick={this.onVoiceCallClick} title="Voice call">
-                    <object className="mx_Svg" type="image/svg+xml" data="img/voice.svg" width="16" height="26"/>
+                    <object onLoad={ this.onSvgLoad } className="mx_Svg" type="image/svg+xml" data="img/voice.svg" width="16" height="26"/>
                 </div>
             videoCallButton =
                 <div className="mx_MessageComposer_videocall" onClick={this.onCallClick} title="Video call">
-                    <object className="mx_Svg" type="image/svg+xml" data="img/call.svg" width="30" height="22"/>
+                    <object onLoad={ this.onSvgLoad } className="mx_Svg" type="image/svg+xml" data="img/call.svg" width="30" height="22"/>
                 </div>
         }
 
@@ -493,7 +497,7 @@ module.exports = React.createClass({
                         <textarea ref="textarea" rows="1" onKeyDown={this.onKeyDown} onKeyUp={this.onKeyUp} placeholder="Type a message..." />
                     </div>
                     <div className="mx_MessageComposer_upload" onClick={this.onUploadClick} title="Upload file">
-                        <object className="mx_Svg" type="image/svg+xml" data="img/upload.svg" width="19" height="24"/>
+                        <object onLoad={ this.onSvgLoad } className="mx_Svg" type="image/svg+xml" data="img/upload.svg" width="19" height="24"/>
                         <input type="file" style={uploadInputStyle} ref="uploadInput" onChange={this.onUploadFileSelected} />
                     </div>
                     { hangupButton }
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index 6f1c884f43..c982b1254f 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -66,6 +66,10 @@ module.exports = React.createClass({
     getRoomName: function() {
         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");
@@ -136,7 +140,7 @@ module.exports = React.createClass({
             if (this.props.onLeaveClick) {
                 leave_button =
                     <div className="mx_RoomHeader_button mx_RoomHeader_leaveButton" onClick={this.props.onLeaveClick} title="Leave room">
-                        <object className="mx_Svg" type="image/svg+xml" data="img/leave.svg"
+                        <object onLoad={ this.onSvgLoad } className="mx_Svg" type="image/svg+xml" data="img/leave.svg"
                             width="26" height="20"/>
                     </div>;
             }
@@ -145,7 +149,7 @@ module.exports = React.createClass({
             if (this.props.onForgetClick) {
                 forget_button =
                     <div className="mx_RoomHeader_button mx_RoomHeader_leaveButton" onClick={this.props.onForgetClick} title="Forget room">
-                        <object className="mx_Svg" type="image/svg+xml" data="img/leave.svg"
+                        <object onLoad={ this.onSvgLoad } className="mx_Svg" type="image/svg+xml" data="img/leave.svg"
                             width="26" height="20"/>
                     </div>;
             }

From 0e98764d825233f5a909b113d1f138280f491be4 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Tue, 5 Jan 2016 03:51:00 +0000
Subject: [PATCH 05/19] oops, no double classNames

---
 src/components/structures/RoomView.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 93d4b0dc2a..8c1e0b3e3a 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -1342,7 +1342,7 @@ module.exports = React.createClass({
                         { videoMuteButton }
                         { zoomButton }
                         { statusBar }
-                        <object onLoad={ this.onSvgLoad } className="mx_Svg" type="image/svg+xml" className="mx_RoomView_voipChevron" data="img/voip-chevron.svg" width="22" height="17"/>
+                        <object onLoad={ this.onSvgLoad } type="image/svg+xml" className="mx_RoomView_voipChevron mx_Svg" data="img/voip-chevron.svg" width="22" height="17"/>
                     </div>
             }
 

From 9cf49eb62d758c793915bf5efc9864548ce05bbe Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Tue, 5 Jan 2016 03:54:44 +0000
Subject: [PATCH 06/19] oops, forgot this

---
 src/components/views/messages/MImageBody.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index 520a36501c..be9db00976 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -96,6 +96,10 @@ 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 content = this.props.mxEvent.getContent();
         var cli = MatrixClientPeg.get();

From aa1012b127cd5ca2eb604a2725b39860b1be973d Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Tue, 5 Jan 2016 03:59:04 +0000
Subject: [PATCH 07/19] oops

---
 src/components/views/messages/MImageBody.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index be9db00976..6936c8ee04 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -22,6 +22,7 @@ var filesize = require('filesize');
 var MatrixClientPeg = require('../../../MatrixClientPeg');
 var Modal = require('../../../Modal');
 var sdk = require('../../../index');
+var dis = require("../../../dispatcher");
 
 module.exports = React.createClass({
     displayName: 'MImageBody',

From 75302b1f971ac1b277f1149caaa962f4982f5b28 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Wed, 23 Dec 2015 10:10:08 +0000
Subject: [PATCH 08/19] Factor out a separate SearchResultTile

---
 src/component-index.js                        |  1 +
 src/components/structures/RoomView.js         | 26 ++------
 .../views/rooms/SearchResultTile.js           | 59 +++++++++++++++++++
 3 files changed, 65 insertions(+), 21 deletions(-)
 create mode 100644 src/components/views/rooms/SearchResultTile.js

diff --git a/src/component-index.js b/src/component-index.js
index f10549ce4d..abb1c054d7 100644
--- a/src/component-index.js
+++ b/src/component-index.js
@@ -66,6 +66,7 @@ module.exports.components['views.rooms.RoomHeader'] = require('./components/view
 module.exports.components['views.rooms.RoomList'] = require('./components/views/rooms/RoomList');
 module.exports.components['views.rooms.RoomSettings'] = require('./components/views/rooms/RoomSettings');
 module.exports.components['views.rooms.RoomTile'] = require('./components/views/rooms/RoomTile');
+module.exports.components['views.rooms.SearchResultTile'] = require('./components/views/rooms/SearchResultTile');
 module.exports.components['views.rooms.TabCompleteBar'] = require('./components/views/rooms/TabCompleteBar');
 module.exports.components['views.settings.ChangeAvatar'] = require('./components/views/settings/ChangeAvatar');
 module.exports.components['views.settings.ChangeDisplayName'] = require('./components/views/settings/ChangeDisplayName');
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index ad30f25b22..daa429d79f 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -574,8 +574,8 @@ module.exports = React.createClass({
 
 
     getSearchResultTiles: function() {
-        var DateSeparator = sdk.getComponent('messages.DateSeparator');
         var EventTile = sdk.getComponent('rooms.EventTile');
+        var SearchResultTile = sdk.getComponent('rooms.SearchResultTile');
         var cli = MatrixClientPeg.get();
 
         // XXX: todo: merge overlapping results somehow?
@@ -615,33 +615,17 @@ module.exports = React.createClass({
                 continue;
             }
 
-            var eventId = mxEv.getId();
-
             if (this.state.searchScope === 'All') {
                 var roomId = mxEv.getRoomId();
                 if(roomId != lastRoomId) {
-                    ret.push(<li key={eventId + "-room"}><h1>Room: { cli.getRoom(roomId).name }</h1></li>);
+                    ret.push(<li key={mxEv.getId() + "-room"}><h1>Room: { cli.getRoom(roomId).name }</h1></li>);
                     lastRoomId = roomId;
                 }
             }
 
-            var ts1 = mxEv.getTs();
-            ret.push(<li key={ts1 + "-search"}><DateSeparator ts={ts1}/></li>); // Rank: {resultList[i].rank}
-
-            var timeline = result.context.getTimeline();
-            for (var j = 0; j < timeline.length; j++) {
-                var ev = timeline[j];
-                var highlights;
-                var contextual = (j != result.context.getOurEventIndex());
-                if (!contextual) {
-                    highlights = this.state.searchHighlights;
-                }
-                if (EventTile.haveTileForEvent(ev)) {
-                    ret.push(<li key={eventId+"+"+j} data-scroll-token={eventId+"+"+j}>
-                             <EventTile mxEvent={ev} contextual={contextual} highlights={highlights} />
-                             </li>);
-                }
-            }
+            ret.push(<SearchResultTile key={mxEv.getId()}
+                     searchResult={result}
+                     searchHighlights={this.state.searchHighlights}/>);
         }
         return ret;
     },
diff --git a/src/components/views/rooms/SearchResultTile.js b/src/components/views/rooms/SearchResultTile.js
new file mode 100644
index 0000000000..73ed74b169
--- /dev/null
+++ b/src/components/views/rooms/SearchResultTile.js
@@ -0,0 +1,59 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var React = require('react');
+var sdk = require('../../../index');
+
+module.exports = React.createClass({
+    displayName: 'SearchResult',
+
+    propTypes: {
+        searchResult: React.PropTypes.object.isRequired,
+        searchHighlights: React.PropTypes.array,
+        onClick: React.PropTypes.func,
+    },
+
+    render: function() {
+        var DateSeparator = sdk.getComponent('messages.DateSeparator');
+        var EventTile = sdk.getComponent('rooms.EventTile');
+        var result = this.props.searchResult;
+        var mxEv = result.context.getEvent();
+        var eventId = mxEv.getId();
+
+        var ts1 = mxEv.getTs();
+        var ret = [<DateSeparator key={ts1 + "-search"} ts={ts1}/>];
+
+        var timeline = result.context.getTimeline();
+        for (var j = 0; j < timeline.length; j++) {
+            var ev = timeline[j];
+            var highlights;
+            var contextual = (j != result.context.getOurEventIndex());
+            if (!contextual) {
+                highlights = this.props.searchHighlights;
+            }
+            if (EventTile.haveTileForEvent(ev)) {
+                ret.push(<EventTile key={eventId+"+"+j} mxEvent={ev} contextual={contextual} highlights={highlights}
+                         onHighlightClick={this.props.onClick}/>)
+            }
+        }
+        return (
+            <li data-scroll-token={eventId+"+"+j}>
+                {ret}
+            </li>);
+    },
+});

From 509ea7c4f3dd7adf9cb17cfa86f24ed29f9439dc Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Wed, 6 Jan 2016 02:11:07 +0000
Subject: [PATCH 09/19] factor out tintable SVGs into their own component, and
 use plain DOM onload rather than react synthetic events

---
 src/Tinter.js                                 |  2 +-
 src/component-index.js                        |  9 +--
 src/components/structures/RoomView.js         |  9 +--
 src/components/views/elements/TintableSvg.js  | 56 +++++++++++++++++++
 src/components/views/messages/MFileBody.js    |  5 +-
 src/components/views/messages/MImageBody.js   |  3 +-
 src/components/views/rooms/MessageComposer.js |  7 ++-
 src/components/views/rooms/RoomHeader.js      | 11 ++--
 8 files changed, 82 insertions(+), 20 deletions(-)
 create mode 100644 src/components/views/elements/TintableSvg.js

diff --git a/src/Tinter.js b/src/Tinter.js
index b2d7b3347a..039a54bff9 100644
--- a/src/Tinter.js
+++ b/src/Tinter.js
@@ -102,7 +102,7 @@ function calcCssFixups() {
 }
 
 function calcSvgFixups(nodes) {
-    var svgs = nodes || document.getElementsByClassName("mx_Svg");
+    var svgs = nodes || document.getElementsByClassName("mx_TintableSvg");
     var fixups = [];
     for (var i = 0; i < svgs.length; i++) {
 
diff --git a/src/component-index.js b/src/component-index.js
index f10549ce4d..9e1a6ccfcf 100644
--- a/src/component-index.js
+++ b/src/component-index.js
@@ -23,14 +23,14 @@ limitations under the License.
 
 module.exports.components = {};
 module.exports.components['structures.CreateRoom'] = require('./components/structures/CreateRoom');
-module.exports.components['structures.login.Login'] = require('./components/structures/login/Login');
-module.exports.components['structures.login.PostRegistration'] = require('./components/structures/login/PostRegistration');
-module.exports.components['structures.login.Registration'] = require('./components/structures/login/Registration');
 module.exports.components['structures.MatrixChat'] = require('./components/structures/MatrixChat');
 module.exports.components['structures.RoomView'] = require('./components/structures/RoomView');
 module.exports.components['structures.ScrollPanel'] = require('./components/structures/ScrollPanel');
 module.exports.components['structures.UploadBar'] = require('./components/structures/UploadBar');
 module.exports.components['structures.UserSettings'] = require('./components/structures/UserSettings');
+module.exports.components['structures.login.Login'] = require('./components/structures/login/Login');
+module.exports.components['structures.login.PostRegistration'] = require('./components/structures/login/PostRegistration');
+module.exports.components['structures.login.Registration'] = require('./components/structures/login/Registration');
 module.exports.components['views.avatars.MemberAvatar'] = require('./components/views/avatars/MemberAvatar');
 module.exports.components['views.avatars.RoomAvatar'] = require('./components/views/avatars/RoomAvatar');
 module.exports.components['views.create_room.CreateRoomButton'] = require('./components/views/create_room/CreateRoomButton');
@@ -41,6 +41,7 @@ module.exports.components['views.dialogs.LogoutPrompt'] = require('./components/
 module.exports.components['views.dialogs.QuestionDialog'] = require('./components/views/dialogs/QuestionDialog');
 module.exports.components['views.elements.EditableText'] = require('./components/views/elements/EditableText');
 module.exports.components['views.elements.ProgressBar'] = require('./components/views/elements/ProgressBar');
+module.exports.components['views.elements.TintableSvg'] = require('./components/views/elements/TintableSvg');
 module.exports.components['views.elements.UserSelector'] = require('./components/views/elements/UserSelector');
 module.exports.components['views.login.CaptchaForm'] = require('./components/views/login/CaptchaForm');
 module.exports.components['views.login.CasLogin'] = require('./components/views/login/CasLogin');
@@ -50,10 +51,10 @@ module.exports.components['views.login.LoginHeader'] = require('./components/vie
 module.exports.components['views.login.PasswordLogin'] = require('./components/views/login/PasswordLogin');
 module.exports.components['views.login.RegistrationForm'] = require('./components/views/login/RegistrationForm');
 module.exports.components['views.login.ServerConfig'] = require('./components/views/login/ServerConfig');
-module.exports.components['views.messages.MessageEvent'] = require('./components/views/messages/MessageEvent');
 module.exports.components['views.messages.MFileBody'] = require('./components/views/messages/MFileBody');
 module.exports.components['views.messages.MImageBody'] = require('./components/views/messages/MImageBody');
 module.exports.components['views.messages.MVideoBody'] = require('./components/views/messages/MVideoBody');
+module.exports.components['views.messages.MessageEvent'] = require('./components/views/messages/MessageEvent');
 module.exports.components['views.messages.TextualBody'] = require('./components/views/messages/TextualBody');
 module.exports.components['views.messages.TextualEvent'] = require('./components/views/messages/TextualEvent');
 module.exports.components['views.messages.UnknownBody'] = require('./components/views/messages/UnknownBody');
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 387ed4b409..d206a06add 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -1104,6 +1104,7 @@ module.exports = React.createClass({
         var RoomSettings = sdk.getComponent("rooms.RoomSettings");
         var SearchBar = sdk.getComponent("rooms.SearchBar");
         var ScrollPanel = sdk.getComponent("structures.ScrollPanel");
+        var TintableSvg = sdk.getComponent("elements.TintableSvg");
 
         if (!this.state.room) {
             if (this.props.roomId) {
@@ -1198,7 +1199,7 @@ module.exports = React.createClass({
                             <div className="mx_RoomView_tabCompleteWrapper">
                                 <TabCompleteBar entries={this.tabComplete.peek(6)} />
                                 <div className="mx_RoomView_tabCompleteEol" title="->|">
-                                    <object onLoad={ this.onSvgLoad } className="mx_Svg" type="image/svg+xml" data="img/eol.svg" width="22" height="16"/>
+                                    <TintableSvg src="img/eol.svg" width="22" height="16"/>
                                     Auto-complete
                                 </div>
                             </div>
@@ -1272,7 +1273,7 @@ module.exports = React.createClass({
             if (this.state.draggingFile) {
                 fileDropTarget = <div className="mx_RoomView_fileDropTarget">
                                     <div className="mx_RoomView_fileDropTargetLabel" title="Drop File Here">
-                                        <object onLoad={ this.onSvgLoad } className="mx_Svg" type="image/svg+xml" data="img/upload-big.svg" width="45" height="59"/><br/>
+                                        <TintableSvg src="img/upload-big.svg" width="45" height="59"/><br/>
                                         Drop File Here
                                     </div>
                                  </div>;
@@ -1310,7 +1311,7 @@ module.exports = React.createClass({
                 if (call.type === "video") {
                     zoomButton = (
                         <div className="mx_RoomView_voipButton" onClick={this.onFullscreenClick} title="Fill screen">
-                            <object onLoad={ this.onSvgLoad } className="mx_Svg" type="image/svg+xml" data="img/fullscreen.svg" width="29" height="22" style={{ marginTop: 1, marginRight: 4 }}/>
+                            <TintableSvg src="img/fullscreen.svg" width="29" height="22" style={{ marginTop: 1, marginRight: 4 }}/>
                         </div>
                     );
 
@@ -1342,7 +1343,7 @@ module.exports = React.createClass({
                         { videoMuteButton }
                         { zoomButton }
                         { statusBar }
-                        <object onLoad={ this.onSvgLoad } type="image/svg+xml" className="mx_RoomView_voipChevron mx_Svg" data="img/voip-chevron.svg" width="22" height="17"/>
+                        <TintableSvg className="mx_RoomView_voipChevron" src="img/voip-chevron.svg" width="22" height="17"/>
                     </div>
             }
 
diff --git a/src/components/views/elements/TintableSvg.js b/src/components/views/elements/TintableSvg.js
new file mode 100644
index 0000000000..a4b66d8114
--- /dev/null
+++ b/src/components/views/elements/TintableSvg.js
@@ -0,0 +1,56 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var React = require('react');
+var ReactDOM = require("react-dom");
+var dis = require("../../../dispatcher");
+
+module.exports = React.createClass({
+    displayName: 'TintableSvg',
+
+    propTypes: {
+        src: React.PropTypes.string.isRequired,
+        width: React.PropTypes.string.isRequired,
+        height: React.PropTypes.string.isRequired,
+        className: React.PropTypes.string,
+    },
+
+    componentDidMount: function() {
+        // 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() {
+        ReactDOM.findDOMNode(this).removeEventListener('load', this.onLoad);
+    },
+
+    onLoad: function(event) {
+        dis.dispatch({ action: "svg_onload", svg: event.target });
+    },
+
+    render: function() {
+        return (
+            <object className={ "mx_TintableSvg " + this.props.className }
+                    type="image/svg+xml"
+                    data={ this.props.src }
+                    width={ this.props.width }
+                    height={ this.props.height }/>
+        );
+    }
+});
diff --git a/src/components/views/messages/MFileBody.js b/src/components/views/messages/MFileBody.js
index 7d6cd3d557..a2dcfc3ff2 100644
--- a/src/components/views/messages/MFileBody.js
+++ b/src/components/views/messages/MFileBody.js
@@ -19,6 +19,7 @@ limitations under the License.
 var React = require('react');
 var filesize = require('filesize');
 var MatrixClientPeg = require('../../../MatrixClientPeg');
+var sdk = require('../../../index');
 var dis = require("../../../dispatcher");
 
 module.exports = React.createClass({
@@ -57,12 +58,14 @@ module.exports = React.createClass({
         var httpUrl = cli.mxcUrlToHttp(content.url);
         var text = this.presentableTextForFile(content);
 
+        var TintableSvg = sdk.getComponent("elements.TintableSvg");
+
         if (httpUrl) {
             return (
                 <span className="mx_MFileBody">
                     <div className="mx_MImageBody_download">
                         <a href={cli.mxcUrlToHttp(content.url)} target="_blank">
-                            <object onLoad={ this.onSvgLoad } className="mx_Svg" type="image/svg+xml" data="img/download.svg" width="12" height="14"/>
+                            <TintableSvg src="img/download.svg" width="12" height="14"/>
                             Download {text}
                         </a>
                     </div>
diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index 6936c8ee04..703a32d40f 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -102,6 +102,7 @@ module.exports = React.createClass({
     },
 
     render: function() {
+        var TintableSvg = sdk.getComponent("elements.TintableSvg");
         var content = this.props.mxEvent.getContent();
         var cli = MatrixClientPeg.get();
 
@@ -123,7 +124,7 @@ module.exports = React.createClass({
                     </a>
                     <div className="mx_MImageBody_download">
                         <a href={cli.mxcUrlToHttp(content.url)} target="_blank">
-                            <object onLoad={ this.onSvgLoad } className="mx_Svg" type="image/svg+xml" data="img/download.svg" width="12" height="14"/>
+                            <TintableSvg src="img/download.svg" width="12" height="14"/>
                             Download {content.body} ({ content.info && content.info.size ? filesize(content.info.size) : "Unknown size" })
                         </a>
                     </div>
diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index 8aa5513bcd..4ea62e75f8 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -465,6 +465,7 @@ module.exports = React.createClass({
         var me = this.props.room.getMember(MatrixClientPeg.get().credentials.userId);
         var uploadInputStyle = {display: 'none'};
         var MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
+        var TintableSvg = sdk.getComponent("elements.TintableSvg");
 
         var callButton, videoCallButton, hangupButton;
         var call = CallHandler.getCallForRoom(this.props.room.roomId);
@@ -478,11 +479,11 @@ module.exports = React.createClass({
         else {
             callButton =
                 <div className="mx_MessageComposer_voicecall" onClick={this.onVoiceCallClick} title="Voice call">
-                    <object onLoad={ this.onSvgLoad } className="mx_Svg" type="image/svg+xml" data="img/voice.svg" width="16" height="26"/>
+                    <TintableSvg src="img/voice.svg" width="16" height="26"/>
                 </div>
             videoCallButton =
                 <div className="mx_MessageComposer_videocall" onClick={this.onCallClick} title="Video call">
-                    <object onLoad={ this.onSvgLoad } className="mx_Svg" type="image/svg+xml" data="img/call.svg" width="30" height="22"/>
+                    <TintableSvg src="img/call.svg" width="30" height="22"/>
                 </div>
         }
 
@@ -497,7 +498,7 @@ module.exports = React.createClass({
                         <textarea ref="textarea" rows="1" onKeyDown={this.onKeyDown} onKeyUp={this.onKeyUp} placeholder="Type a message..." />
                     </div>
                     <div className="mx_MessageComposer_upload" onClick={this.onUploadClick} title="Upload file">
-                        <object onLoad={ this.onSvgLoad } className="mx_Svg" type="image/svg+xml" data="img/upload.svg" width="19" height="24"/>
+                        <TintableSvg src="img/upload.svg" width="19" height="24"/>
                         <input type="file" style={uploadInputStyle} ref="uploadInput" onChange={this.onUploadFileSelected} />
                     </div>
                     { hangupButton }
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index c982b1254f..9e726d01aa 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -74,6 +74,7 @@ module.exports = React.createClass({
     render: function() {
         var EditableText = sdk.getComponent("elements.EditableText");
         var RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
+        var TintableSvg = sdk.getComponent("elements.TintableSvg");
 
         var header;
         if (this.props.simpleHeader) {
@@ -123,7 +124,7 @@ module.exports = React.createClass({
                         <div className="mx_RoomHeader_nametext" title={ this.props.room.name }>{ this.props.room.name }</div>
                         { searchStatus }
                         <div className="mx_RoomHeader_settingsButton" title="Settings">
-                            <object className="mx_Svg" type="image/svg+xml" data="img/settings.svg" width="12" height="12"/>
+                            <TintableSvg src="img/settings.svg" width="12" height="12"/>
                         </div>
                     </div>
                 if (topic) topic_el = <div className="mx_RoomHeader_topic" title={topic.getContent().topic}>{ topic.getContent().topic }</div>;
@@ -140,8 +141,7 @@ module.exports = React.createClass({
             if (this.props.onLeaveClick) {
                 leave_button =
                     <div className="mx_RoomHeader_button mx_RoomHeader_leaveButton" onClick={this.props.onLeaveClick} title="Leave room">
-                        <object onLoad={ this.onSvgLoad } className="mx_Svg" type="image/svg+xml" data="img/leave.svg"
-                            width="26" height="20"/>
+                        <TintableSvg src="img/leave.svg" width="26" height="20"/>
                     </div>;
             }
 
@@ -149,8 +149,7 @@ module.exports = React.createClass({
             if (this.props.onForgetClick) {
                 forget_button =
                     <div className="mx_RoomHeader_button mx_RoomHeader_leaveButton" onClick={this.props.onForgetClick} title="Forget room">
-                        <object onLoad={ this.onSvgLoad } className="mx_Svg" type="image/svg+xml" data="img/leave.svg"
-                            width="26" height="20"/>
+                        <TintableSvg src="img/leave.svg" width="26" height="20"/>
                     </div>;
             }
 
@@ -171,7 +170,7 @@ module.exports = React.createClass({
                         { forget_button }
                         { leave_button }
                         <div className="mx_RoomHeader_button" onClick={this.props.onSearchClick} title="Search">
-                            <object className="mx_Svg" type="image/svg+xml" data="img/search.svg" width="21" height="19"/>
+                            <TintableSvg src="img/search.svg" width="21" height="19"/>
                         </div>
                     </div>
                 </div>

From 44a0fa19ae4a89b81ea057756d64b5d185d39d87 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Wed, 6 Jan 2016 02:12:53 +0000
Subject: [PATCH 10/19] comment /tint

---
 src/SlashCommands.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/SlashCommands.js b/src/SlashCommands.js
index 4b915d00ce..35eec81582 100644
--- a/src/SlashCommands.js
+++ b/src/SlashCommands.js
@@ -43,6 +43,7 @@ var commands = {
         return reject("Usage: /nick <display_name>");
     },
 
+    // Takes an #rrggbb colourcode and retints the UI (just for debugging)
     tint: function(room_id, args) {
         Tinter.tint(args);
         return success();

From f499c60b129a0fc5cd28826d37d04f8b701cae4c Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Wed, 6 Jan 2016 02:29:08 +0000
Subject: [PATCH 11/19] sundry PR feedback

---
 src/Tinter.js                                 | 47 +++++++++----------
 src/components/structures/RoomView.js         |  4 --
 src/components/views/elements/TintableSvg.js  |  3 +-
 src/components/views/messages/MFileBody.js    |  4 --
 src/components/views/messages/MImageBody.js   |  4 --
 src/components/views/rooms/MessageComposer.js |  4 --
 src/components/views/rooms/RoomHeader.js      |  4 --
 7 files changed, 23 insertions(+), 47 deletions(-)

diff --git a/src/Tinter.js b/src/Tinter.js
index 039a54bff9..e623fec93a 100644
--- a/src/Tinter.js
+++ b/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');
-
-var registered = false;
-if (!registered) {
-    dis.register(_onAction);
-}
-
+// The colour keys to be replaced as referred to in SVGs
 var keyRgb = [
-    "rgb(118, 207, 166)",
-    "rgb(234, 245, 240)",
-    "rgba(118, 207, 166, 0.2)",
+    "rgb(118, 207, 166)", // Vector Green
+    "rgb(234, 245, 240)", // Vector Light Green
+    "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",
-    "#EAF5F0",
-    "#D3EFE1",
+    "#76CFA6", // Vector Green
+    "#EAF5F0", // Vector Light Green
+    "#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);
+        }
+    },
 };
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index d206a06add..f8e1aee85b 100644
--- a/src/components/structures/RoomView.js
+++ b/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');
diff --git a/src/components/views/elements/TintableSvg.js b/src/components/views/elements/TintableSvg.js
index a4b66d8114..5bd19b85dc 100644
--- a/src/components/views/elements/TintableSvg.js
+++ b/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() {
diff --git a/src/components/views/messages/MFileBody.js b/src/components/views/messages/MFileBody.js
index a2dcfc3ff2..ed3bd04dcf 100644
--- a/src/components/views/messages/MFileBody.js
+++ b/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();
diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index 703a32d40f..2b47f0a71c 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/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();
diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index 4ea62e75f8..e1a9bbd861 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/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'};
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index 9e726d01aa..01a215f3ec 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/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');

From 8c1bb9034778241e88376893249ab22ae06a077f Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Wed, 6 Jan 2016 02:41:10 +0000
Subject: [PATCH 12/19] add fixme

---
 src/Tinter.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/Tinter.js b/src/Tinter.js
index e623fec93a..10a103f0f4 100644
--- a/src/Tinter.js
+++ b/src/Tinter.js
@@ -14,6 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+
+// 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.
+
 // The colour keys to be replaced as referred to in SVGs
 var keyRgb = [
     "rgb(118, 207, 166)", // Vector Green

From 0d0a379cd8d5228077781cd99cf0f14d3af491c2 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Wed, 6 Jan 2016 15:17:58 +0000
Subject: [PATCH 13/19] VideoView: Fix a dispatcher leak

Make sure we unregister from the dispatcher when the videoview goes
away.
---
 src/components/views/voip/VideoView.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/views/voip/VideoView.js b/src/components/views/voip/VideoView.js
index 0a95e0d0c8..5145f05954 100644
--- a/src/components/views/voip/VideoView.js
+++ b/src/components/views/voip/VideoView.js
@@ -25,8 +25,12 @@ var dis = require('../../../dispatcher');
 module.exports = React.createClass({
     displayName: 'VideoView',
 
-    componentWillMount: function() {
-        dis.register(this.onAction);
+    componentDidMount: function() {
+        this.dispatcherRef = dis.register(this.onAction);
+    },
+
+    componentWillUnmount: function() {
+        dis.unregister(this.dispatcherRef);
     },
 
     getRemoteVideoElement: function() {

From 4624e7a4858807f4b5330291d28818d03942f1c3 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Wed, 6 Jan 2016 16:46:29 +0000
Subject: [PATCH 14/19] Address review comments

s/onClick/onSelect/
---
 src/components/structures/RoomView.js          | 12 +++++++++++-
 src/components/views/rooms/SearchResultTile.js |  9 +++++++--
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index daa429d79f..5f1ce2284d 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -618,7 +618,17 @@ module.exports = React.createClass({
             if (this.state.searchScope === 'All') {
                 var roomId = mxEv.getRoomId();
                 if(roomId != lastRoomId) {
-                    ret.push(<li key={mxEv.getId() + "-room"}><h1>Room: { cli.getRoom(roomId).name }</h1></li>);
+                    var room = cli.getRoom(roomId);
+
+                    // XXX: if we've left the room, we might not know about
+                    // it. We should tell the js sdk to go and find out about
+                    // it. But that's not an issue currently, as synapse only
+                    // returns results for rooms we're joined to.
+                    var roomName = room ? room.name : "Unknown room "+roomId;
+
+                    ret.push(<li key={mxEv.getId() + "-room"}>
+                                 <h1>Room: { roomName }</h1>
+                             </li>);
                     lastRoomId = roomId;
                 }
             }
diff --git a/src/components/views/rooms/SearchResultTile.js b/src/components/views/rooms/SearchResultTile.js
index 73ed74b169..9d3af16ee7 100644
--- a/src/components/views/rooms/SearchResultTile.js
+++ b/src/components/views/rooms/SearchResultTile.js
@@ -23,9 +23,14 @@ module.exports = React.createClass({
     displayName: 'SearchResult',
 
     propTypes: {
+        // a matrix-js-sdk SearchResult containing the details of this result
         searchResult: React.PropTypes.object.isRequired,
+
+        // a list of strings to be highlighted in the results
         searchHighlights: React.PropTypes.array,
-        onClick: React.PropTypes.func,
+
+        // callback to be called when the user selects this result
+        onSelect: React.PropTypes.func,
     },
 
     render: function() {
@@ -48,7 +53,7 @@ module.exports = React.createClass({
             }
             if (EventTile.haveTileForEvent(ev)) {
                 ret.push(<EventTile key={eventId+"+"+j} mxEvent={ev} contextual={contextual} highlights={highlights}
-                         onHighlightClick={this.props.onClick}/>)
+                         onHighlightClick={this.props.onSelect}/>)
             }
         }
         return (

From 0f52c0a514fa27f472418740e099149793f75f43 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Thu, 7 Jan 2016 03:39:00 +0000
Subject: [PATCH 15/19] make TintableSvgs responsible for updating their own
 tints, and stop storing SVG DOM fragments in Tinter to avoid leaking them

---
 src/Tinter.js                                | 29 ++++++--------------
 src/components/views/elements/TintableSvg.js | 10 +++++++
 2 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/src/Tinter.js b/src/Tinter.js
index 10a103f0f4..f5cd43212c 100644
--- a/src/Tinter.js
+++ b/src/Tinter.js
@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+var dis = require("./dispatcher");
 
 // FIXME: these vars should be bundled up and attached to 
 // module.exports otherwise this will break when included by both
@@ -63,21 +64,11 @@ var cssAttrs = [
     "borderColor",
 ];
 
-var svgFixups = [
-    // {
-    //     node: a SVG node that needs to be fixed up
-    //     attr: name of the attribute to be clobbered, e.g. 'fill'
-    //     index: ordinal of primary, secondary
-    // }
-];
-
 var svgAttrs = [
     "fill",
     "stroke",
 ];
 
-var svgNodes = {};
-
 var cached = false;
 
 function calcCssFixups() {
@@ -102,11 +93,14 @@ function calcCssFixups() {
     }
 }
 
-function calcSvgFixups(nodes) {
-    var svgs = nodes || document.getElementsByClassName("mx_TintableSvg");
+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("*");
@@ -167,7 +161,6 @@ module.exports = {
     tint: function(primaryColor, secondaryColor, tertiaryColor) {
         if (!cached) {
             calcCssFixups();
-            svgFixups = calcSvgFixups();
             cached = true;
         }
 
@@ -195,11 +188,8 @@ module.exports = {
         // go through manually fixing up the stylesheets.
         applyCssFixups();
 
-        // 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.
-        applySvgFixups(svgFixups);
+        // tell all the SVGs to go fix themselves up
+        dis.dispatch({ action: 'tint_update' });        
     },
 
     tintSvg: function(svg) {
@@ -207,7 +197,6 @@ module.exports = {
         // (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);
         }
     },
diff --git a/src/components/views/elements/TintableSvg.js b/src/components/views/elements/TintableSvg.js
index 5bd19b85dc..48d0b388d5 100644
--- a/src/components/views/elements/TintableSvg.js
+++ b/src/components/views/elements/TintableSvg.js
@@ -31,6 +31,10 @@ module.exports = React.createClass({
         className: React.PropTypes.string,
     },
 
+    componentWillMount: function() {
+        this.dispatcherRef = dis.register(this.onAction);
+    },
+
     componentDidMount: function() {
         // we can't use onLoad on object due to https://github.com/facebook/react/pull/5781
         // so handle it with pure DOM instead
@@ -39,6 +43,12 @@ module.exports = React.createClass({
 
     componentWillUnmount: function() {
         ReactDOM.findDOMNode(this).removeEventListener('load', this.onLoad);
+        dis.unregister(this.dispatcherRef);
+    },
+
+    onAction: function(payload) {
+        if (payload.action !== 'tint_update') return;
+        Tinter.tintSvg(ReactDOM.findDOMNode(this));
     },
 
     onLoad: function(event) {

From 296b626ed973f66b9aeb32455f3ccecb553664c3 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Thu, 7 Jan 2016 03:59:09 +0000
Subject: [PATCH 16/19] oops, we actually need to cache the fixups in
 TintableSvg

---
 src/Tinter.js                                | 82 +++++++++-----------
 src/components/views/elements/TintableSvg.js |  7 +-
 2 files changed, 43 insertions(+), 46 deletions(-)

diff --git a/src/Tinter.js b/src/Tinter.js
index f5cd43212c..a9b754ffde 100644
--- a/src/Tinter.js
+++ b/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 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) {
-            applySvgFixups(fixups);
+    // XXX: we could just move this all into TintableSvg, but as it's so similar
+    // to the CSS fixup stuff in Tinter (just that the fixups are stored in TintableSvg)
+    // keeping it here for now.
+    calcSvgFixups: function(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;
+    },
+
+    applySvgFixups: function(fixups) {
+        for (var i = 0; i < fixups.length; i++) {
+            var svgFixup = fixups[i];
+            svgFixup.node.setAttribute(svgFixup.attr, colors[svgFixup.index]);
         }
     },
 };
diff --git a/src/components/views/elements/TintableSvg.js b/src/components/views/elements/TintableSvg.js
index 48d0b388d5..91f785d5bc 100644
--- a/src/components/views/elements/TintableSvg.js
+++ b/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() {

From 0772f50fab0200b3d1e8f9416824eafcf8ca8082 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Thu, 7 Jan 2016 04:06:39 +0000
Subject: [PATCH 17/19] update copyright for 2016

---
 header                                                     | 2 +-
 src/Avatar.js                                              | 2 +-
 src/CallHandler.js                                         | 2 +-
 src/ContentMessages.js                                     | 2 +-
 src/ContextualMenu.js                                      | 2 +-
 src/DateUtils.js                                           | 2 +-
 src/HtmlUtils.js                                           | 2 +-
 src/MatrixClientPeg.js                                     | 2 +-
 src/MatrixTools.js                                         | 2 +-
 src/Modal.js                                               | 2 +-
 src/Notifier.js                                            | 2 +-
 src/Presence.js                                            | 2 +-
 src/Resend.js                                              | 2 +-
 src/RoomListSorter.js                                      | 2 +-
 src/Skinner.js                                             | 2 +-
 src/SlashCommands.js                                       | 2 +-
 src/TabComplete.js                                         | 2 +-
 src/TabCompleteEntries.js                                  | 2 +-
 src/UnreadStatus.js                                        | 2 +-
 src/UserActivity.js                                        | 2 +-
 src/UserSettingsStore.js                                   | 2 +-
 src/component-index.js                                     | 2 +-
 src/components/structures/CreateRoom.js                    | 2 +-
 src/components/structures/MatrixChat.js                    | 2 +-
 src/components/structures/RoomView.js                      | 2 +-
 src/components/structures/ScrollPanel.js                   | 2 +-
 src/components/structures/UploadBar.js                     | 2 +-
 src/components/structures/UserSettings.js                  | 2 +-
 src/components/structures/login/Login.js                   | 2 +-
 src/components/structures/login/PostRegistration.js        | 2 +-
 src/components/structures/login/Registration.js            | 2 +-
 src/components/views/avatars/MemberAvatar.js               | 2 +-
 src/components/views/avatars/RoomAvatar.js                 | 2 +-
 src/components/views/create_room/CreateRoomButton.js       | 2 +-
 src/components/views/create_room/Presets.js                | 2 +-
 src/components/views/create_room/RoomAlias.js              | 2 +-
 src/components/views/dialogs/ErrorDialog.js                | 2 +-
 src/components/views/dialogs/LogoutPrompt.js               | 2 +-
 src/components/views/dialogs/QuestionDialog.js             | 2 +-
 src/components/views/elements/EditableText.js              | 2 +-
 src/components/views/elements/ProgressBar.js               | 2 +-
 src/components/views/elements/UserSelector.js              | 2 +-
 src/components/views/login/CaptchaForm.js                  | 2 +-
 src/components/views/login/CasLogin.js                     | 2 +-
 src/components/views/login/CustomServerDialog.js           | 2 +-
 src/components/views/login/LoginFooter.js                  | 2 +-
 src/components/views/login/LoginHeader.js                  | 2 +-
 src/components/views/login/PasswordLogin.js                | 2 +-
 src/components/views/login/RegistrationForm.js             | 2 +-
 src/components/views/login/ServerConfig.js                 | 2 +-
 src/components/views/messages/MFileBody.js                 | 2 +-
 src/components/views/messages/MImageBody.js                | 2 +-
 src/components/views/messages/MVideoBody.js                | 2 +-
 src/components/views/messages/MessageEvent.js              | 2 +-
 src/components/views/messages/TextualBody.js               | 2 +-
 src/components/views/messages/TextualEvent.js              | 2 +-
 src/components/views/messages/UnknownBody.js               | 2 +-
 src/components/views/rooms/EventTile.js                    | 2 +-
 src/components/views/rooms/MemberInfo.js                   | 2 +-
 src/components/views/rooms/MemberList.js                   | 2 +-
 src/components/views/rooms/MemberTile.js                   | 2 +-
 src/components/views/rooms/MessageComposer.js              | 2 +-
 src/components/views/rooms/RoomHeader.js                   | 2 +-
 src/components/views/rooms/RoomList.js                     | 2 +-
 src/components/views/rooms/RoomSettings.js                 | 2 +-
 src/components/views/rooms/RoomTile.js                     | 2 +-
 src/components/views/rooms/TabCompleteBar.js               | 2 +-
 src/components/views/settings/ChangeAvatar.js              | 2 +-
 src/components/views/settings/ChangeDisplayName.js         | 2 +-
 src/components/views/settings/ChangePassword.js            | 2 +-
 src/components/views/settings/EnableNotificationsButton.js | 2 +-
 src/components/views/voip/CallView.js                      | 2 +-
 src/components/views/voip/IncomingCallBox.js               | 2 +-
 src/components/views/voip/VideoFeed.js                     | 2 +-
 src/components/views/voip/VideoView.js                     | 2 +-
 src/dispatcher.js                                          | 2 +-
 src/encryption.js                                          | 2 +-
 src/extend.js                                              | 2 +-
 src/index.js                                               | 2 +-
 src/linkify-matrix.js                                      | 2 +-
 80 files changed, 80 insertions(+), 80 deletions(-)

diff --git a/header b/header
index fd88ee27f7..060709b82e 100644
--- a/header
+++ b/header
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/Avatar.js b/src/Avatar.js
index c919630f96..e97ed6b673 100644
--- a/src/Avatar.js
+++ b/src/Avatar.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/CallHandler.js b/src/CallHandler.js
index 189e99b307..e5bc80246e 100644
--- a/src/CallHandler.js
+++ b/src/CallHandler.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/ContentMessages.js b/src/ContentMessages.js
index 094eff18d9..82c295756b 100644
--- a/src/ContentMessages.js
+++ b/src/ContentMessages.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/ContextualMenu.js b/src/ContextualMenu.js
index a7b1849e18..e720b69eda 100644
--- a/src/ContextualMenu.js
+++ b/src/ContextualMenu.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/DateUtils.js b/src/DateUtils.js
index 3b11b82ccf..208134ee83 100644
--- a/src/DateUtils.js
+++ b/src/DateUtils.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/HtmlUtils.js b/src/HtmlUtils.js
index 95c6a46458..603f595951 100644
--- a/src/HtmlUtils.js
+++ b/src/HtmlUtils.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/MatrixClientPeg.js b/src/MatrixClientPeg.js
index d940b69f27..4a83ed09d9 100644
--- a/src/MatrixClientPeg.js
+++ b/src/MatrixClientPeg.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/MatrixTools.js b/src/MatrixTools.js
index 6c7a9ee9ba..7fded4adea 100644
--- a/src/MatrixTools.js
+++ b/src/MatrixTools.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/Modal.js b/src/Modal.js
index 41b1a9c0ab..d3a5404e1e 100644
--- a/src/Modal.js
+++ b/src/Modal.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/Notifier.js b/src/Notifier.js
index a35c3bb1ee..e52fd252fe 100644
--- a/src/Notifier.js
+++ b/src/Notifier.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/Presence.js b/src/Presence.js
index e776cca078..5c9d6945a3 100644
--- a/src/Presence.js
+++ b/src/Presence.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/Resend.js b/src/Resend.js
index e07e571455..ae5aaa9ea9 100644
--- a/src/Resend.js
+++ b/src/Resend.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/RoomListSorter.js b/src/RoomListSorter.js
index 730a0de18b..09f178dd3f 100644
--- a/src/RoomListSorter.js
+++ b/src/RoomListSorter.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/Skinner.js b/src/Skinner.js
index 3e71d10e2d..4482f2239c 100644
--- a/src/Skinner.js
+++ b/src/Skinner.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/SlashCommands.js b/src/SlashCommands.js
index f5eaff9066..2c1f25a2d4 100644
--- a/src/SlashCommands.js
+++ b/src/SlashCommands.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/TabComplete.js b/src/TabComplete.js
index 94be0193c6..6690802d5d 100644
--- a/src/TabComplete.js
+++ b/src/TabComplete.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/TabCompleteEntries.js b/src/TabCompleteEntries.js
index 6d1a51c9b2..d3efc0d2f1 100644
--- a/src/TabCompleteEntries.js
+++ b/src/TabCompleteEntries.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/UnreadStatus.js b/src/UnreadStatus.js
index c8693c1e50..1227614257 100644
--- a/src/UnreadStatus.js
+++ b/src/UnreadStatus.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/UserActivity.js b/src/UserActivity.js
index b283b9a58e..3048ad4454 100644
--- a/src/UserActivity.js
+++ b/src/UserActivity.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/UserSettingsStore.js b/src/UserSettingsStore.js
index f2ada35b24..1b1e8810a9 100644
--- a/src/UserSettingsStore.js
+++ b/src/UserSettingsStore.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/component-index.js b/src/component-index.js
index abb1c054d7..ed690b2fc5 100644
--- a/src/component-index.js
+++ b/src/component-index.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/structures/CreateRoom.js b/src/components/structures/CreateRoom.js
index f520318a0a..c21bc80c6b 100644
--- a/src/components/structures/CreateRoom.js
+++ b/src/components/structures/CreateRoom.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index 9273e0e03d..d732a54922 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 5f1ce2284d..177b4ab1cc 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/structures/ScrollPanel.js b/src/components/structures/ScrollPanel.js
index 052424529a..042458717d 100644
--- a/src/components/structures/ScrollPanel.js
+++ b/src/components/structures/ScrollPanel.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/structures/UploadBar.js b/src/components/structures/UploadBar.js
index 717c7f57b2..12e502026f 100644
--- a/src/components/structures/UploadBar.js
+++ b/src/components/structures/UploadBar.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index c8916bfd44..c1550f9b6b 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/structures/login/Login.js b/src/components/structures/login/Login.js
index 54cd9e3efb..b7d2d762a4 100644
--- a/src/components/structures/login/Login.js
+++ b/src/components/structures/login/Login.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/structures/login/PostRegistration.js b/src/components/structures/login/PostRegistration.js
index 51625a5971..c95f94cf4f 100644
--- a/src/components/structures/login/PostRegistration.js
+++ b/src/components/structures/login/PostRegistration.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/structures/login/Registration.js b/src/components/structures/login/Registration.js
index 19e55c4d76..7f6e408fef 100644
--- a/src/components/structures/login/Registration.js
+++ b/src/components/structures/login/Registration.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/avatars/MemberAvatar.js b/src/components/views/avatars/MemberAvatar.js
index 42c2f6ca2d..21c717aac5 100644
--- a/src/components/views/avatars/MemberAvatar.js
+++ b/src/components/views/avatars/MemberAvatar.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/avatars/RoomAvatar.js b/src/components/views/avatars/RoomAvatar.js
index 2c1de65bcf..a83bc799a2 100644
--- a/src/components/views/avatars/RoomAvatar.js
+++ b/src/components/views/avatars/RoomAvatar.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/create_room/CreateRoomButton.js b/src/components/views/create_room/CreateRoomButton.js
index 95ba4ac366..bb9406efe1 100644
--- a/src/components/views/create_room/CreateRoomButton.js
+++ b/src/components/views/create_room/CreateRoomButton.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/create_room/Presets.js b/src/components/views/create_room/Presets.js
index ee0d19c357..0cce4a6644 100644
--- a/src/components/views/create_room/Presets.js
+++ b/src/components/views/create_room/Presets.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/create_room/RoomAlias.js b/src/components/views/create_room/RoomAlias.js
index cc7382aadb..6d311db593 100644
--- a/src/components/views/create_room/RoomAlias.js
+++ b/src/components/views/create_room/RoomAlias.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/dialogs/ErrorDialog.js b/src/components/views/dialogs/ErrorDialog.js
index af827340d0..ed9364df60 100644
--- a/src/components/views/dialogs/ErrorDialog.js
+++ b/src/components/views/dialogs/ErrorDialog.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/dialogs/LogoutPrompt.js b/src/components/views/dialogs/LogoutPrompt.js
index ed58542a66..824924e999 100644
--- a/src/components/views/dialogs/LogoutPrompt.js
+++ b/src/components/views/dialogs/LogoutPrompt.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/dialogs/QuestionDialog.js b/src/components/views/dialogs/QuestionDialog.js
index 34f1483cee..f415201e45 100644
--- a/src/components/views/dialogs/QuestionDialog.js
+++ b/src/components/views/dialogs/QuestionDialog.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/elements/EditableText.js b/src/components/views/elements/EditableText.js
index ee88f1a853..beedfc35c8 100644
--- a/src/components/views/elements/EditableText.js
+++ b/src/components/views/elements/EditableText.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/elements/ProgressBar.js b/src/components/views/elements/ProgressBar.js
index bab6a701dd..12b34480f1 100644
--- a/src/components/views/elements/ProgressBar.js
+++ b/src/components/views/elements/ProgressBar.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/elements/UserSelector.js b/src/components/views/elements/UserSelector.js
index ea04de59a9..5f176a3e54 100644
--- a/src/components/views/elements/UserSelector.js
+++ b/src/components/views/elements/UserSelector.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/login/CaptchaForm.js b/src/components/views/login/CaptchaForm.js
index 9b722f463b..fdbe6f1db1 100644
--- a/src/components/views/login/CaptchaForm.js
+++ b/src/components/views/login/CaptchaForm.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/login/CasLogin.js b/src/components/views/login/CasLogin.js
index 9380db9788..5c89fd3706 100644
--- a/src/components/views/login/CasLogin.js
+++ b/src/components/views/login/CasLogin.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/login/CustomServerDialog.js b/src/components/views/login/CustomServerDialog.js
index 3f86bc199c..8a67dfd7e6 100644
--- a/src/components/views/login/CustomServerDialog.js
+++ b/src/components/views/login/CustomServerDialog.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/login/LoginFooter.js b/src/components/views/login/LoginFooter.js
index d486b3597e..5ec57194e0 100644
--- a/src/components/views/login/LoginFooter.js
+++ b/src/components/views/login/LoginFooter.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/login/LoginHeader.js b/src/components/views/login/LoginHeader.js
index c64016413b..3ee3cbea2e 100644
--- a/src/components/views/login/LoginHeader.js
+++ b/src/components/views/login/LoginHeader.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/login/PasswordLogin.js b/src/components/views/login/PasswordLogin.js
index baaf3236d6..3367ac3257 100644
--- a/src/components/views/login/PasswordLogin.js
+++ b/src/components/views/login/PasswordLogin.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/login/RegistrationForm.js b/src/components/views/login/RegistrationForm.js
index 5c4887955b..bc461dd1bb 100644
--- a/src/components/views/login/RegistrationForm.js
+++ b/src/components/views/login/RegistrationForm.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/login/ServerConfig.js b/src/components/views/login/ServerConfig.js
index 54430c7520..741f0ebc69 100644
--- a/src/components/views/login/ServerConfig.js
+++ b/src/components/views/login/ServerConfig.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/messages/MFileBody.js b/src/components/views/messages/MFileBody.js
index 193cafe255..2be62a12d7 100644
--- a/src/components/views/messages/MFileBody.js
+++ b/src/components/views/messages/MFileBody.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index 6afdddc307..483e38a6c4 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/messages/MVideoBody.js b/src/components/views/messages/MVideoBody.js
index ddd3dceca7..cacdf11316 100644
--- a/src/components/views/messages/MVideoBody.js
+++ b/src/components/views/messages/MVideoBody.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/messages/MessageEvent.js b/src/components/views/messages/MessageEvent.js
index 63e77e9652..2490d9be8b 100644
--- a/src/components/views/messages/MessageEvent.js
+++ b/src/components/views/messages/MessageEvent.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js
index 0c9710f06e..fe763d06bf 100644
--- a/src/components/views/messages/TextualBody.js
+++ b/src/components/views/messages/TextualBody.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/messages/TextualEvent.js b/src/components/views/messages/TextualEvent.js
index a2db21cfae..f82fafa242 100644
--- a/src/components/views/messages/TextualEvent.js
+++ b/src/components/views/messages/TextualEvent.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/messages/UnknownBody.js b/src/components/views/messages/UnknownBody.js
index f831e08a2c..00784b18b0 100644
--- a/src/components/views/messages/UnknownBody.js
+++ b/src/components/views/messages/UnknownBody.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index 67daebccbc..cfac6cc9b2 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/rooms/MemberInfo.js b/src/components/views/rooms/MemberInfo.js
index bf17195664..b5f0b88b40 100644
--- a/src/components/views/rooms/MemberInfo.js
+++ b/src/components/views/rooms/MemberInfo.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/rooms/MemberList.js b/src/components/views/rooms/MemberList.js
index 719e4af9b3..b0e2baa3d3 100644
--- a/src/components/views/rooms/MemberList.js
+++ b/src/components/views/rooms/MemberList.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/rooms/MemberTile.js b/src/components/views/rooms/MemberTile.js
index 38d9285c0c..32cc619f13 100644
--- a/src/components/views/rooms/MemberTile.js
+++ b/src/components/views/rooms/MemberTile.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index 5ac4a24908..bc740dd6d0 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index 513b4bf192..bf5a117200 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/rooms/RoomList.js b/src/components/views/rooms/RoomList.js
index 6a19e21d27..9f9232e9dd 100644
--- a/src/components/views/rooms/RoomList.js
+++ b/src/components/views/rooms/RoomList.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/rooms/RoomSettings.js b/src/components/views/rooms/RoomSettings.js
index eb9bfd90c8..211ecbd71a 100644
--- a/src/components/views/rooms/RoomSettings.js
+++ b/src/components/views/rooms/RoomSettings.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js
index 37a77f9561..16d798cb87 100644
--- a/src/components/views/rooms/RoomTile.js
+++ b/src/components/views/rooms/RoomTile.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/rooms/TabCompleteBar.js b/src/components/views/rooms/TabCompleteBar.js
index 9668c4b3ac..c640d6aa5b 100644
--- a/src/components/views/rooms/TabCompleteBar.js
+++ b/src/components/views/rooms/TabCompleteBar.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/settings/ChangeAvatar.js b/src/components/views/settings/ChangeAvatar.js
index ee2b5ad5e1..f024f53a9a 100644
--- a/src/components/views/settings/ChangeAvatar.js
+++ b/src/components/views/settings/ChangeAvatar.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/settings/ChangeDisplayName.js b/src/components/views/settings/ChangeDisplayName.js
index 9410b02290..8b31fbf1e3 100644
--- a/src/components/views/settings/ChangeDisplayName.js
+++ b/src/components/views/settings/ChangeDisplayName.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/settings/ChangePassword.js b/src/components/views/settings/ChangePassword.js
index 219ad10714..1ef3eff205 100644
--- a/src/components/views/settings/ChangePassword.js
+++ b/src/components/views/settings/ChangePassword.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/settings/EnableNotificationsButton.js b/src/components/views/settings/EnableNotificationsButton.js
index 426daec26e..246334085f 100644
--- a/src/components/views/settings/EnableNotificationsButton.js
+++ b/src/components/views/settings/EnableNotificationsButton.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/voip/CallView.js b/src/components/views/voip/CallView.js
index d67147dd1e..bc82556163 100644
--- a/src/components/views/voip/CallView.js
+++ b/src/components/views/voip/CallView.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/voip/IncomingCallBox.js b/src/components/views/voip/IncomingCallBox.js
index a9601931bb..d7e608a816 100644
--- a/src/components/views/voip/IncomingCallBox.js
+++ b/src/components/views/voip/IncomingCallBox.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/voip/VideoFeed.js b/src/components/views/voip/VideoFeed.js
index 9cf28d1ba4..e4833dba9f 100644
--- a/src/components/views/voip/VideoFeed.js
+++ b/src/components/views/voip/VideoFeed.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/voip/VideoView.js b/src/components/views/voip/VideoView.js
index 5145f05954..15ce14a299 100644
--- a/src/components/views/voip/VideoView.js
+++ b/src/components/views/voip/VideoView.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/dispatcher.js b/src/dispatcher.js
index a989351a5e..f35639c3be 100644
--- a/src/dispatcher.js
+++ b/src/dispatcher.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/encryption.js b/src/encryption.js
index 954bc030db..cbe92d36de 100644
--- a/src/encryption.js
+++ b/src/encryption.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/extend.js b/src/extend.js
index 178748d72b..e39e9e9be9 100644
--- a/src/extend.js
+++ b/src/extend.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/index.js b/src/index.js
index a631538622..4b920d95d4 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/linkify-matrix.js b/src/linkify-matrix.js
index 90b1938d51..abb51e85d8 100644
--- a/src/linkify-matrix.js
+++ b/src/linkify-matrix.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

From fd32362aa6d77974e13f5184aa2061e0a03a3421 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Thu, 7 Jan 2016 10:18:18 +0000
Subject: [PATCH 18/19] oops, initialise fixups per-object, not per-prototype

---
 src/components/views/elements/TintableSvg.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/views/elements/TintableSvg.js b/src/components/views/elements/TintableSvg.js
index 91f785d5bc..81fbed1921 100644
--- a/src/components/views/elements/TintableSvg.js
+++ b/src/components/views/elements/TintableSvg.js
@@ -24,8 +24,6 @@ var Tinter = require("../../../Tinter");
 module.exports = React.createClass({
     displayName: 'TintableSvg',
 
-    fixups: [],
-
     propTypes: {
         src: React.PropTypes.string.isRequired,
         width: React.PropTypes.string.isRequired,
@@ -34,6 +32,7 @@ module.exports = React.createClass({
     },
 
     componentWillMount: function() {
+        this.fixups = [];
         this.dispatcherRef = dis.register(this.onAction);
     },
 

From ef473dec729165f7f6fa060523e2d419e04572b0 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 7 Jan 2016 11:18:41 +0000
Subject: [PATCH 19/19] Add read-up-to green* line

* not actually green without CSS in vector-web
---
 src/components/structures/RoomView.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 177b4ab1cc..d32b11abfd 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -650,6 +650,7 @@ module.exports = React.createClass({
 
 
         var prevEvent = null; // the last event we showed
+        var readReceiptEventId = this.state.room.getEventReadUpTo(MatrixClientPeg.get().credentials.userId);
         var startIdx = Math.max(0, this.state.room.timeline.length - this.state.messageCap);
         for (var i = startIdx; i < this.state.room.timeline.length; i++) {
             var mxEv = this.state.room.timeline[i];
@@ -700,6 +701,10 @@ module.exports = React.createClass({
                 </li>
             );
 
+            if (eventId == readReceiptEventId) {
+                ret.push(<hr className="mx_RoomView_myReadMarker" />);
+            }
+
             prevEvent = mxEv;
         }