From 6bfdd692790becbd1b9560c82a1279aac8e322ab Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 31 Jul 2017 12:08:41 +0100
Subject: [PATCH 01/11] add devtools dialog

---
 .../views/dialogs/DevtoolsDialog.js           | 206 ++++++++++++++++++
 1 file changed, 206 insertions(+)
 create mode 100644 src/components/views/dialogs/DevtoolsDialog.js

diff --git a/src/components/views/dialogs/DevtoolsDialog.js b/src/components/views/dialogs/DevtoolsDialog.js
new file mode 100644
index 00000000..c4248fa9
--- /dev/null
+++ b/src/components/views/dialogs/DevtoolsDialog.js
@@ -0,0 +1,206 @@
+/*
+Copyright 2017 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.
+*/
+
+import React from 'react';
+import sdk from 'matrix-react-sdk';
+import Modal from 'matrix-react-sdk/lib/Modal';
+import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg';
+
+class SendCustomEvent extends React.Component {
+    static propTypes = {
+        roomId: React.PropTypes.string.isRequired,
+        onFinished: React.PropTypes.func.isRequired,
+    };
+
+    constructor(props, context) {
+        super(props, context);
+        this._send = this._send.bind(this);
+        this.onCancel = this.onCancel.bind(this);
+    }
+
+    async _send() {
+        try {
+            const content = JSON.parse(this.refs.evContent.value);
+            await MatrixClientPeg.get().sendEvent(this.refs.roomId.value, this.refs.eventType.value, content);
+            this.props.onFinished(true);
+        } catch (e) {
+            this.props.onFinished(false);
+            const ErrorDialog = sdk.getComponent('dialogs.ErrorDialog');
+            Modal.createDialog(ErrorDialog, {
+                title: 'Failed to send custom event',
+                description: e.toString(),
+            });
+        }
+    }
+
+    onCancel() {
+        this.props.onFinished(false);
+    }
+
+    render() {
+        return <div>
+            <div className="mx_Dialog_content">
+                <div className="mx_TextInputDialog_label">
+                    <label htmlFor="roomId"> Room ID </label>
+                </div>
+                <div>
+                    <input id="roomId" ref="roomId" className="mx_TextInputDialog_input" defaultValue={this.props.roomId} size="64" />
+                </div>
+
+                <div className="mx_TextInputDialog_label">
+                    <label htmlFor="eventType"> Event Type </label>
+                </div>
+                <div>
+                    <input id="eventType" ref="eventType" className="mx_TextInputDialog_input" size="64" />
+                </div>
+
+                <div className="mx_TextInputDialog_label">
+                    <label htmlFor="evContent"> Event Content </label>
+                </div>
+                <div>
+                    <textarea id="evContent" ref="evContent" className="mx_TextInputDialog_input" defaultValue={"{\n\n}"} size="64" />
+                </div>
+            </div>
+            <div className="mx_Dialog_buttons">
+                <button onClick={this._send}>Send</button>
+                <button onClick={this.onCancel}>Cancel</button>
+            </div>
+        </div>;
+    }
+}
+
+class SendCustomStateEvent extends React.Component {
+    static propTypes = {
+        roomId: React.PropTypes.string.isRequired,
+        onFinished: React.PropTypes.func.isRequired,
+    };
+
+    constructor(props, context) {
+        super(props, context);
+        this._send = this._send.bind(this);
+        this.onCancel = this.onCancel.bind(this);
+    }
+
+    async _send() {
+        try {
+            const content = JSON.parse(this.refs.evContent.value);
+            await MatrixClientPeg.get().sendStateEvent(this.refs.roomId.value, this.refs.eventType.value, content, this.refs.stateKey.value);
+            this.props.onFinished(true);
+        } catch (e) {
+            this.props.onFinished(false);
+            const ErrorDialog = sdk.getComponent('dialogs.ErrorDialog');
+            Modal.createDialog(ErrorDialog, {
+                title: 'Failed to send custom event',
+                description: e.toString(),
+            });
+        }
+    }
+
+    onCancel() {
+        this.props.onFinished(false);
+    }
+
+    render() {
+        return <div>
+            <div className="mx_Dialog_content">
+                <div className="mx_TextInputDialog_label">
+                    <label htmlFor="roomId"> Room ID </label>
+                </div>
+                <div>
+                    <input id="roomId" ref="roomId" className="mx_TextInputDialog_input" defaultValue={this.props.roomId} size="64" />
+                </div>
+
+                <div className="mx_TextInputDialog_label">
+                    <label htmlFor="stateKey"> State Key </label>
+                </div>
+                <div>
+                    <input id="stateKey" ref="stateKey" className="mx_TextInputDialog_input" size="64" />
+                </div>
+
+                <div className="mx_TextInputDialog_label">
+                    <label htmlFor="eventType"> Event Type </label>
+                </div>
+                <div>
+                    <input id="eventType" ref="eventType" className="mx_TextInputDialog_input" size="64" />
+                </div>
+
+                <div className="mx_TextInputDialog_label">
+                    <label htmlFor="evContent"> Event Content </label>
+                </div>
+                <div>
+                    <textarea id="evContent" ref="evContent" className="mx_TextInputDialog_input" defaultValue={"{\n\n}"} size="64" />
+                </div>
+            </div>
+            <div className="mx_Dialog_buttons">
+                <button onClick={this._send}>Send</button>
+                <button onClick={this.onCancel}>Cancel</button>
+            </div>
+        </div>;
+    }
+}
+
+export default class DevtoolsDialog extends React.Component {
+    static propTypes = {
+        roomId: React.PropTypes.string.isRequired,
+        onFinished: React.PropTypes.func.isRequired,
+    };
+
+    state = {
+        mode: null,
+    };
+
+    constructor(props, context) {
+        super(props, context);
+        this.onCancel = this.onCancel.bind(this);
+    }
+
+    componentWillUnmount() {
+        this._unmounted = true;
+    }
+
+    _setMode(mode) {
+        return () => {
+            this.setState({ mode });
+        };
+    }
+
+    onCancel() {
+        this.props.onFinished(false);
+    }
+
+    render() {
+        let body;
+
+        if (this.state.mode) {
+            body = <this.state.mode {...this.props} />;
+        } else {
+            body = <div>
+                <div className="mx_Dialog_content">
+                    <button onClick={this._setMode(SendCustomEvent)}>Send Custom Event</button>
+                    <button onClick={this._setMode(SendCustomStateEvent)}>Send Custom State Event</button>
+                </div>
+                <div className="mx_Dialog_buttons">
+                    <button onClick={this.onCancel}>Cancel</button>
+                </div>
+            </div>;
+        }
+
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        return <BaseDialog className="mx_QuestionDialog" onFinished={this.props.onFinished} title="Developer Tools">
+            { body }
+        </BaseDialog>;
+    }
+}

From 131d1c74c996253bdf444a9482fffc23dba21e74 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 3 Aug 2017 00:59:40 +0100
Subject: [PATCH 02/11] add room state explorer to devtools

---
 .../views/dialogs/DevtoolsDialog.js           | 91 ++++++++++++++++++-
 1 file changed, 90 insertions(+), 1 deletion(-)

diff --git a/src/components/views/dialogs/DevtoolsDialog.js b/src/components/views/dialogs/DevtoolsDialog.js
index c4248fa9..9a518fd0 100644
--- a/src/components/views/dialogs/DevtoolsDialog.js
+++ b/src/components/views/dialogs/DevtoolsDialog.js
@@ -152,6 +152,89 @@ class SendCustomStateEvent extends React.Component {
     }
 }
 
+class RoomStateExplorer extends React.Component {
+    static propTypes = {
+        roomId: React.PropTypes.string.isRequired,
+        onFinished: React.PropTypes.func.isRequired,
+        onBack: React.PropTypes.func.isRequired,
+    };
+
+    constructor(props, context) {
+        super(props, context);
+
+        this.onBack = this.onBack.bind(this);
+    }
+
+    state = {
+        eventType: null,
+    };
+
+    browseEventType(eventType) {
+        const self = this;
+        return () => {
+            self.setState({ eventType });
+        };
+    }
+
+    onViewSourceClick(ev) {
+        const ViewSource = sdk.getComponent('structures.ViewSource');
+        return () => {
+            Modal.createDialog(ViewSource, {
+                content: ev,
+            }, 'mx_Dialog_viewsource');
+        };
+    }
+
+    onBack() {
+        if (this.state.eventType === null) {
+            this.props.onBack();
+        } else {
+            this.setState({ eventType: null });
+        }
+    }
+
+    render() {
+        const room = MatrixClientPeg.get().getRoom(this.props.roomId);
+        const roomStateEvents = room.currentState.events;
+
+        const rows = [];
+
+        if (this.state.eventType === null) {
+            Object.keys(roomStateEvents).forEach((evType) => {
+                const stateGroup = roomStateEvents[evType];
+                const keys = Object.keys(stateGroup);
+
+                if (keys.length > 1) {
+                    rows.push(<button key={evType} onClick={this.browseEventType(evType)}>{evType}</button>);
+                } else if (keys.length === 1) {
+                    rows.push(<button key={evType} onClick={this.onViewSourceClick(stateGroup[keys[0]])}>{evType}</button>);
+                }
+            });
+        } else {
+            const evType = this.state.eventType;
+            const stateGroup = roomStateEvents[evType];
+            Object.keys(stateGroup).forEach((stateKey) => {
+                const ev = stateGroup[stateKey];
+                rows.push(<button key={stateKey} onClick={this.onViewSourceClick(ev)}>{stateKey}</button>);
+            });
+        }
+
+        return <div>
+            <div className="mx_Dialog_content">
+                <div className="mx_TextInputDialog_label">
+                    Room ID: {this.props.roomId}
+                </div>
+                <div>
+                    {rows}
+                </div>
+            </div>
+            <div className="mx_Dialog_buttons">
+                <button onClick={this.onBack}>Back</button>
+            </div>
+        </div>;
+    }
+}
+
 export default class DevtoolsDialog extends React.Component {
     static propTypes = {
         roomId: React.PropTypes.string.isRequired,
@@ -164,6 +247,7 @@ export default class DevtoolsDialog extends React.Component {
 
     constructor(props, context) {
         super(props, context);
+        this.onBack = this.onBack.bind(this);
         this.onCancel = this.onCancel.bind(this);
     }
 
@@ -177,6 +261,10 @@ export default class DevtoolsDialog extends React.Component {
         };
     }
 
+    onBack() {
+        this.setState({ mode: null });
+    }
+
     onCancel() {
         this.props.onFinished(false);
     }
@@ -185,12 +273,13 @@ export default class DevtoolsDialog extends React.Component {
         let body;
 
         if (this.state.mode) {
-            body = <this.state.mode {...this.props} />;
+            body = <this.state.mode {...this.props} onBack={this.onBack} />;
         } else {
             body = <div>
                 <div className="mx_Dialog_content">
                     <button onClick={this._setMode(SendCustomEvent)}>Send Custom Event</button>
                     <button onClick={this._setMode(SendCustomStateEvent)}>Send Custom State Event</button>
+                    <button onClick={this._setMode(RoomStateExplorer)}>Explore Room State</button>
                 </div>
                 <div className="mx_Dialog_buttons">
                     <button onClick={this.onCancel}>Cancel</button>

From 9ab30b7b1792cdd134d18be92bc44f2e88b6f959 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 3 Aug 2017 01:05:05 +0100
Subject: [PATCH 03/11] fix line-length and copyright header

---
 src/components/views/dialogs/DevtoolsDialog.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/views/dialogs/DevtoolsDialog.js b/src/components/views/dialogs/DevtoolsDialog.js
index 9a518fd0..9ef71c3b 100644
--- a/src/components/views/dialogs/DevtoolsDialog.js
+++ b/src/components/views/dialogs/DevtoolsDialog.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2017 OpenMarket Ltd
+Copyright 2017 Michael Telatynski <7t3chguy@gmail.com>
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -97,7 +97,9 @@ class SendCustomStateEvent extends React.Component {
     async _send() {
         try {
             const content = JSON.parse(this.refs.evContent.value);
-            await MatrixClientPeg.get().sendStateEvent(this.refs.roomId.value, this.refs.eventType.value, content, this.refs.stateKey.value);
+            await MatrixClientPeg.get().sendStateEvent(this.refs.roomId.value, this.refs.eventType.value, content,
+                this.refs.stateKey.value);
+
             this.props.onFinished(true);
         } catch (e) {
             this.props.onFinished(false);
@@ -207,7 +209,9 @@ class RoomStateExplorer extends React.Component {
                 if (keys.length > 1) {
                     rows.push(<button key={evType} onClick={this.browseEventType(evType)}>{evType}</button>);
                 } else if (keys.length === 1) {
-                    rows.push(<button key={evType} onClick={this.onViewSourceClick(stateGroup[keys[0]])}>{evType}</button>);
+                    rows.push(
+                        <button key={evType} onClick={this.onViewSourceClick(stateGroup[keys[0]])}>{evType}</button>
+                    );
                 }
             });
         } else {

From 1b004f170dce0de49d55fa05de9a3a3e84b0b0f4 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 3 Aug 2017 01:10:32 +0100
Subject: [PATCH 04/11] make eslint happy

---
 src/components/views/dialogs/DevtoolsDialog.js | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/views/dialogs/DevtoolsDialog.js b/src/components/views/dialogs/DevtoolsDialog.js
index 9ef71c3b..32cf0c0c 100644
--- a/src/components/views/dialogs/DevtoolsDialog.js
+++ b/src/components/views/dialogs/DevtoolsDialog.js
@@ -204,15 +204,16 @@ class RoomStateExplorer extends React.Component {
         if (this.state.eventType === null) {
             Object.keys(roomStateEvents).forEach((evType) => {
                 const stateGroup = roomStateEvents[evType];
-                const keys = Object.keys(stateGroup);
+                const stateKeys = Object.keys(stateGroup);
 
-                if (keys.length > 1) {
-                    rows.push(<button key={evType} onClick={this.browseEventType(evType)}>{evType}</button>);
-                } else if (keys.length === 1) {
-                    rows.push(
-                        <button key={evType} onClick={this.onViewSourceClick(stateGroup[keys[0]])}>{evType}</button>
-                    );
+                let onClickFn;
+                if (stateKeys.length > 1) {
+                    onClickFn = this.browseEventType(evType);
+                } else if (stateKeys.length === 1) {
+                    onClickFn = this.onViewSourceClick(stateGroup[stateKeys[0]]);
                 }
+
+                rows.push(<button key={evType} onClick={onClickFn}>{ evType }</button>);
             });
         } else {
             const evType = this.state.eventType;

From 3fd1a366bf4eece8cf3de88fd190d08f10a70826 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 10 Aug 2017 23:13:40 +0100
Subject: [PATCH 05/11] add back button to all pages and widen textarea

---
 .../views/dialogs/DevtoolsDialog.js           | 63 ++++++++++---------
 1 file changed, 32 insertions(+), 31 deletions(-)

diff --git a/src/components/views/dialogs/DevtoolsDialog.js b/src/components/views/dialogs/DevtoolsDialog.js
index 32cf0c0c..b384cfdf 100644
--- a/src/components/views/dialogs/DevtoolsDialog.js
+++ b/src/components/views/dialogs/DevtoolsDialog.js
@@ -22,13 +22,12 @@ import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg';
 class SendCustomEvent extends React.Component {
     static propTypes = {
         roomId: React.PropTypes.string.isRequired,
-        onFinished: React.PropTypes.func.isRequired,
+        onBack: React.PropTypes.func.isRequired,
     };
 
     constructor(props, context) {
         super(props, context);
         this._send = this._send.bind(this);
-        this.onCancel = this.onCancel.bind(this);
     }
 
     async _send() {
@@ -46,10 +45,6 @@ class SendCustomEvent extends React.Component {
         }
     }
 
-    onCancel() {
-        this.props.onFinished(false);
-    }
-
     render() {
         return <div>
             <div className="mx_Dialog_content">
@@ -71,12 +66,12 @@ class SendCustomEvent extends React.Component {
                     <label htmlFor="evContent"> Event Content </label>
                 </div>
                 <div>
-                    <textarea id="evContent" ref="evContent" className="mx_TextInputDialog_input" defaultValue={"{\n\n}"} size="64" />
+                    <textarea id="evContent" ref="evContent" className="mx_TextInputDialog_input" defaultValue={"{\n\n}"} cols="64" />
                 </div>
             </div>
             <div className="mx_Dialog_buttons">
+                <button onClick={this.props.onBack}>Back</button>
                 <button onClick={this._send}>Send</button>
-                <button onClick={this.onCancel}>Cancel</button>
             </div>
         </div>;
     }
@@ -85,13 +80,12 @@ class SendCustomEvent extends React.Component {
 class SendCustomStateEvent extends React.Component {
     static propTypes = {
         roomId: React.PropTypes.string.isRequired,
-        onFinished: React.PropTypes.func.isRequired,
+        onBack: React.PropTypes.func.isRequired,
     };
 
     constructor(props, context) {
         super(props, context);
         this._send = this._send.bind(this);
-        this.onCancel = this.onCancel.bind(this);
     }
 
     async _send() {
@@ -105,16 +99,12 @@ class SendCustomStateEvent extends React.Component {
             this.props.onFinished(false);
             const ErrorDialog = sdk.getComponent('dialogs.ErrorDialog');
             Modal.createDialog(ErrorDialog, {
-                title: 'Failed to send custom event',
+                title: 'Failed to send custom state event',
                 description: e.toString(),
             });
         }
     }
 
-    onCancel() {
-        this.props.onFinished(false);
-    }
-
     render() {
         return <div>
             <div className="mx_Dialog_content">
@@ -143,12 +133,12 @@ class SendCustomStateEvent extends React.Component {
                     <label htmlFor="evContent"> Event Content </label>
                 </div>
                 <div>
-                    <textarea id="evContent" ref="evContent" className="mx_TextInputDialog_input" defaultValue={"{\n\n}"} size="64" />
+                    <textarea id="evContent" ref="evContent" className="mx_TextInputDialog_input" defaultValue={"{\n\n}"} cols="64" />
                 </div>
             </div>
             <div className="mx_Dialog_buttons">
+                <button onClick={this.props.onBack}>Back</button>
                 <button onClick={this._send}>Send</button>
-                <button onClick={this.onCancel}>Cancel</button>
             </div>
         </div>;
     }
@@ -157,18 +147,21 @@ class SendCustomStateEvent extends React.Component {
 class RoomStateExplorer extends React.Component {
     static propTypes = {
         roomId: React.PropTypes.string.isRequired,
-        onFinished: React.PropTypes.func.isRequired,
         onBack: React.PropTypes.func.isRequired,
     };
 
     constructor(props, context) {
         super(props, context);
 
+        const room = MatrixClientPeg.get().getRoom(this.props.roomId);
+        this.roomStateEvents = room.currentState.events;
+
         this.onBack = this.onBack.bind(this);
     }
 
     state = {
         eventType: null,
+        event: null,
     };
 
     browseEventType(eventType) {
@@ -178,32 +171,40 @@ class RoomStateExplorer extends React.Component {
         };
     }
 
-    onViewSourceClick(ev) {
-        const ViewSource = sdk.getComponent('structures.ViewSource');
+    onViewSourceClick(event) {
+        const self = this;
         return () => {
-            Modal.createDialog(ViewSource, {
-                content: ev,
-            }, 'mx_Dialog_viewsource');
+            self.setState({ event });
         };
     }
 
     onBack() {
-        if (this.state.eventType === null) {
-            this.props.onBack();
-        } else {
+        if (this.state.event) {
+            this.setState({ event: null });
+        } else if (this.state.eventType) {
             this.setState({ eventType: null });
+        } else {
+            this.props.onBack();
         }
     }
 
     render() {
-        const room = MatrixClientPeg.get().getRoom(this.props.roomId);
-        const roomStateEvents = room.currentState.events;
+        if (this.state.event) {
+            return <div className="mx_ViewSource">
+                <div className="mx_Dialog_content">
+                    <pre>{JSON.stringify(this.state.event, null, 2)}</pre>
+                </div>
+                <div className="mx_Dialog_buttons">
+                    <button onClick={this.onBack}>Back</button>
+                </div>
+            </div>;
+        }
 
         const rows = [];
 
         if (this.state.eventType === null) {
-            Object.keys(roomStateEvents).forEach((evType) => {
-                const stateGroup = roomStateEvents[evType];
+            Object.keys(this.roomStateEvents).forEach((evType) => {
+                const stateGroup = this.roomStateEvents[evType];
                 const stateKeys = Object.keys(stateGroup);
 
                 let onClickFn;
@@ -217,7 +218,7 @@ class RoomStateExplorer extends React.Component {
             });
         } else {
             const evType = this.state.eventType;
-            const stateGroup = roomStateEvents[evType];
+            const stateGroup = this.roomStateEvents[evType];
             Object.keys(stateGroup).forEach((stateKey) => {
                 const ev = stateGroup[stateKey];
                 rows.push(<button key={stateKey} onClick={this.onViewSourceClick(ev)}>{stateKey}</button>);

From 84f4fbe1428cbaea83eca7481459cf1cca179c4e Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 10 Aug 2017 23:55:22 +0100
Subject: [PATCH 06/11] DRY up code and change flow to be less destructive

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 .../views/dialogs/DevtoolsDialog.js           | 130 ++++++++----------
 1 file changed, 61 insertions(+), 69 deletions(-)

diff --git a/src/components/views/dialogs/DevtoolsDialog.js b/src/components/views/dialogs/DevtoolsDialog.js
index b384cfdf..f9ee7c5d 100644
--- a/src/components/views/dialogs/DevtoolsDialog.js
+++ b/src/components/views/dialogs/DevtoolsDialog.js
@@ -16,7 +16,6 @@ limitations under the License.
 
 import React from 'react';
 import sdk from 'matrix-react-sdk';
-import Modal from 'matrix-react-sdk/lib/Modal';
 import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg';
 
 class SendCustomEvent extends React.Component {
@@ -28,33 +27,56 @@ class SendCustomEvent extends React.Component {
     constructor(props, context) {
         super(props, context);
         this._send = this._send.bind(this);
+        this.onBack = this.onBack.bind(this);
     }
 
-    async _send() {
-        try {
-            const content = JSON.parse(this.refs.evContent.value);
-            await MatrixClientPeg.get().sendEvent(this.refs.roomId.value, this.refs.eventType.value, content);
-            this.props.onFinished(true);
-        } catch (e) {
-            this.props.onFinished(false);
-            const ErrorDialog = sdk.getComponent('dialogs.ErrorDialog');
-            Modal.createDialog(ErrorDialog, {
-                title: 'Failed to send custom event',
-                description: e.toString(),
-            });
+    state = {
+        message: null,
+    };
+
+    onBack() {
+        if (this.state.message) {
+            this.setState({ message: null });
+        } else {
+            this.props.onBack();
         }
     }
 
+    _buttons() {
+        return <div className="mx_Dialog_buttons">
+            <button onClick={this.onBack}>Back</button>
+            {!this.state.message && <button onClick={this._send}>Send</button>}
+        </div>;
+    }
+
+    send(content) {
+        return MatrixClientPeg.get().sendEvent(this.props.roomId, this.refs.eventType.value, content);
+    }
+
+    async _send() {
+        let message;
+        try {
+            const content = JSON.parse(this.refs.evContent.value);
+            await this.send(content);
+            message = 'Event sent!';
+        } catch (e) {
+            message = 'Failed to send custom event.' + ` (${e.toString()})`;
+        }
+        this.setState({ message });
+    }
+
     render() {
+        if (this.state.message) {
+            return <div>
+                <div className="mx_Dialog_content">
+                    {this.state.message}
+                </div>
+                {this._buttons()}
+            </div>;
+        }
+
         return <div>
             <div className="mx_Dialog_content">
-                <div className="mx_TextInputDialog_label">
-                    <label htmlFor="roomId"> Room ID </label>
-                </div>
-                <div>
-                    <input id="roomId" ref="roomId" className="mx_TextInputDialog_input" defaultValue={this.props.roomId} size="64" />
-                </div>
-
                 <div className="mx_TextInputDialog_label">
                     <label htmlFor="eventType"> Event Type </label>
                 </div>
@@ -66,55 +88,32 @@ class SendCustomEvent extends React.Component {
                     <label htmlFor="evContent"> Event Content </label>
                 </div>
                 <div>
-                    <textarea id="evContent" ref="evContent" className="mx_TextInputDialog_input" defaultValue={"{\n\n}"} cols="64" />
+                    <textarea id="evContent" ref="evContent" className="mx_TextInputDialog_input" defaultValue={"{\n\n}"} cols="63" rows="5" />
                 </div>
             </div>
-            <div className="mx_Dialog_buttons">
-                <button onClick={this.props.onBack}>Back</button>
-                <button onClick={this._send}>Send</button>
-            </div>
+            {this._buttons()}
         </div>;
     }
 }
 
-class SendCustomStateEvent extends React.Component {
-    static propTypes = {
-        roomId: React.PropTypes.string.isRequired,
-        onBack: React.PropTypes.func.isRequired,
-    };
-
-    constructor(props, context) {
-        super(props, context);
-        this._send = this._send.bind(this);
-    }
-
-    async _send() {
-        try {
-            const content = JSON.parse(this.refs.evContent.value);
-            await MatrixClientPeg.get().sendStateEvent(this.refs.roomId.value, this.refs.eventType.value, content,
-                this.refs.stateKey.value);
-
-            this.props.onFinished(true);
-        } catch (e) {
-            this.props.onFinished(false);
-            const ErrorDialog = sdk.getComponent('dialogs.ErrorDialog');
-            Modal.createDialog(ErrorDialog, {
-                title: 'Failed to send custom state event',
-                description: e.toString(),
-            });
-        }
+class SendCustomStateEvent extends SendCustomEvent {
+    send(content) {
+        return MatrixClientPeg.get().sendStateEvent(this.props.roomId, this.refs.eventType.value, content,
+            this.refs.stateKey.value);
     }
 
     render() {
+        if (this.state.message) {
+            return <div>
+                <div className="mx_Dialog_content">
+                    {this.state.message}
+                </div>
+                {this._buttons()}
+            </div>;
+        }
+
         return <div>
             <div className="mx_Dialog_content">
-                <div className="mx_TextInputDialog_label">
-                    <label htmlFor="roomId"> Room ID </label>
-                </div>
-                <div>
-                    <input id="roomId" ref="roomId" className="mx_TextInputDialog_input" defaultValue={this.props.roomId} size="64" />
-                </div>
-
                 <div className="mx_TextInputDialog_label">
                     <label htmlFor="stateKey"> State Key </label>
                 </div>
@@ -133,13 +132,10 @@ class SendCustomStateEvent extends React.Component {
                     <label htmlFor="evContent"> Event Content </label>
                 </div>
                 <div>
-                    <textarea id="evContent" ref="evContent" className="mx_TextInputDialog_input" defaultValue={"{\n\n}"} cols="64" />
+                    <textarea id="evContent" ref="evContent" className="mx_TextInputDialog_input" defaultValue={"{\n\n}"} cols="63" rows="5" />
                 </div>
             </div>
-            <div className="mx_Dialog_buttons">
-                <button onClick={this.props.onBack}>Back</button>
-                <button onClick={this._send}>Send</button>
-            </div>
+            {this._buttons()}
         </div>;
     }
 }
@@ -227,12 +223,7 @@ class RoomStateExplorer extends React.Component {
 
         return <div>
             <div className="mx_Dialog_content">
-                <div className="mx_TextInputDialog_label">
-                    Room ID: {this.props.roomId}
-                </div>
-                <div>
-                    {rows}
-                </div>
+                {rows}
             </div>
             <div className="mx_Dialog_buttons">
                 <button onClick={this.onBack}>Back</button>
@@ -295,6 +286,7 @@ export default class DevtoolsDialog extends React.Component {
 
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         return <BaseDialog className="mx_QuestionDialog" onFinished={this.props.onFinished} title="Developer Tools">
+            <div>Room ID: {this.props.roomId}</div>
             { body }
         </BaseDialog>;
     }

From a437f23e9df6b63c2dee2d329cb138433a5af25a Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Sat, 26 Aug 2017 18:48:24 +0100
Subject: [PATCH 07/11] add i18n

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 .../views/dialogs/DevtoolsDialog.js           | 33 ++++++++++---------
 src/i18n/strings/en_EN.json                   | 10 ++++++
 2 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/src/components/views/dialogs/DevtoolsDialog.js b/src/components/views/dialogs/DevtoolsDialog.js
index f9ee7c5d..dc8f8769 100644
--- a/src/components/views/dialogs/DevtoolsDialog.js
+++ b/src/components/views/dialogs/DevtoolsDialog.js
@@ -16,6 +16,7 @@ limitations under the License.
 
 import React from 'react';
 import sdk from 'matrix-react-sdk';
+import { _t } from 'matrix-react-sdk/lib/languageHandler';
 import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg';
 
 class SendCustomEvent extends React.Component {
@@ -44,8 +45,8 @@ class SendCustomEvent extends React.Component {
 
     _buttons() {
         return <div className="mx_Dialog_buttons">
-            <button onClick={this.onBack}>Back</button>
-            {!this.state.message && <button onClick={this._send}>Send</button>}
+            <button onClick={this.onBack}>{ _t('Back') }</button>
+            {!this.state.message && <button onClick={this._send}>{ _t('Send') }</button>}
         </div>;
     }
 
@@ -58,9 +59,9 @@ class SendCustomEvent extends React.Component {
         try {
             const content = JSON.parse(this.refs.evContent.value);
             await this.send(content);
-            message = 'Event sent!';
+            message = _t('Event sent!');
         } catch (e) {
-            message = 'Failed to send custom event.' + ` (${e.toString()})`;
+            message = `${_t('Failed to send custom event.')} (${e.toString()})`;
         }
         this.setState({ message });
     }
@@ -78,14 +79,14 @@ class SendCustomEvent extends React.Component {
         return <div>
             <div className="mx_Dialog_content">
                 <div className="mx_TextInputDialog_label">
-                    <label htmlFor="eventType"> Event Type </label>
+                    <label htmlFor="eventType"> { _t('Event Type') } </label>
                 </div>
                 <div>
                     <input id="eventType" ref="eventType" className="mx_TextInputDialog_input" size="64" />
                 </div>
 
                 <div className="mx_TextInputDialog_label">
-                    <label htmlFor="evContent"> Event Content </label>
+                    <label htmlFor="evContent"> { _t('Event Content') } </label>
                 </div>
                 <div>
                     <textarea id="evContent" ref="evContent" className="mx_TextInputDialog_input" defaultValue={"{\n\n}"} cols="63" rows="5" />
@@ -115,21 +116,21 @@ class SendCustomStateEvent extends SendCustomEvent {
         return <div>
             <div className="mx_Dialog_content">
                 <div className="mx_TextInputDialog_label">
-                    <label htmlFor="stateKey"> State Key </label>
+                    <label htmlFor="stateKey"> { _t('State Key') } </label>
                 </div>
                 <div>
                     <input id="stateKey" ref="stateKey" className="mx_TextInputDialog_input" size="64" />
                 </div>
 
                 <div className="mx_TextInputDialog_label">
-                    <label htmlFor="eventType"> Event Type </label>
+                    <label htmlFor="eventType"> { _t('Event Type') } </label>
                 </div>
                 <div>
                     <input id="eventType" ref="eventType" className="mx_TextInputDialog_input" size="64" />
                 </div>
 
                 <div className="mx_TextInputDialog_label">
-                    <label htmlFor="evContent"> Event Content </label>
+                    <label htmlFor="evContent"> { _t('Event Content') } </label>
                 </div>
                 <div>
                     <textarea id="evContent" ref="evContent" className="mx_TextInputDialog_input" defaultValue={"{\n\n}"} cols="63" rows="5" />
@@ -191,7 +192,7 @@ class RoomStateExplorer extends React.Component {
                     <pre>{JSON.stringify(this.state.event, null, 2)}</pre>
                 </div>
                 <div className="mx_Dialog_buttons">
-                    <button onClick={this.onBack}>Back</button>
+                    <button onClick={this.onBack}>{ _t('Back') }</button>
                 </div>
             </div>;
         }
@@ -226,7 +227,7 @@ class RoomStateExplorer extends React.Component {
                 {rows}
             </div>
             <div className="mx_Dialog_buttons">
-                <button onClick={this.onBack}>Back</button>
+                <button onClick={this.onBack}>{ _t('Back') }</button>
             </div>
         </div>;
     }
@@ -274,18 +275,18 @@ export default class DevtoolsDialog extends React.Component {
         } else {
             body = <div>
                 <div className="mx_Dialog_content">
-                    <button onClick={this._setMode(SendCustomEvent)}>Send Custom Event</button>
-                    <button onClick={this._setMode(SendCustomStateEvent)}>Send Custom State Event</button>
-                    <button onClick={this._setMode(RoomStateExplorer)}>Explore Room State</button>
+                    <button onClick={this._setMode(SendCustomEvent)}>{ _t('Send Custom Event') }</button>
+                    <button onClick={this._setMode(SendCustomStateEvent)}>{ _t('Send Custom State Event') }</button>
+                    <button onClick={this._setMode(RoomStateExplorer)}>{ _t('Explore Room State') }</button>
                 </div>
                 <div className="mx_Dialog_buttons">
-                    <button onClick={this.onCancel}>Cancel</button>
+                    <button onClick={this.onCancel}>{ _t('Cancel') }</button>
                 </div>
             </div>;
         }
 
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        return <BaseDialog className="mx_QuestionDialog" onFinished={this.props.onFinished} title="Developer Tools">
+        return <BaseDialog className="mx_QuestionDialog" onFinished={this.props.onFinished} title={_t('Developer Tools')}>
             <div>Room ID: {this.props.roomId}</div>
             { body }
         </BaseDialog>;
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index cecb248c..b755400f 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -9,6 +9,7 @@
   "All Rooms": "All Rooms",
   "All notifications are currently disabled for all targets.": "All notifications are currently disabled for all targets.",
   "An error occurred whilst saving your email notification preferences.": "An error occurred whilst saving your email notification preferences.",
+  "Back": "Back",
   "Call invitation": "Call invitation",
   "Cancel": "Cancel",
   "Cancel Sending": "Cancel Sending",
@@ -25,6 +26,7 @@
   "delete the alias.": "delete the alias.",
   "Delete the room alias %(alias)s and remove %(name)s from the directory?": "Delete the room alias %(alias)s and remove %(name)s from the directory?",
   "Describe your problem here.": "Describe your problem here.",
+  "Developer Tools": "Developer Tools",
   "Direct Chat": "Direct Chat",
   "Directory": "Directory",
   "Dismiss": "Dismiss",
@@ -49,6 +51,7 @@
   "Failed to get public room list": "Failed to get public room list",
   "Failed to join the room": "Failed to join the room",
   "Failed to remove tag %(tagName)s from room": "Failed to remove tag %(tagName)s from room",
+  "Failed to send custom event.": "Failed to send custom event.",
   "Failed to send report: ": "Failed to send report: ",
   "Failed to set direct chat tag": "Failed to set direct chat tag",
   "Failed to set Direct Message status of room": "Failed to set Direct Message status of room",
@@ -116,6 +119,9 @@
   "Search for a room": "Search for a room",
   "Send": "Send",
   "Send logs": "Send logs",
+  "Send Custom Event": "Send Custom Event",
+  "Send Custom State Event": "Send Custom State Event",
+  "Explore Room State": "Explore Room State",
   "Settings": "Settings",
   "Source URL": "Source URL",
   "Sorry, your browser is <b>not</b> able to run Riot.": "Sorry, your browser is <b>not</b> able to run Riot.",
@@ -162,6 +168,10 @@
   "Warning": "Warning",
   "Checking for an update...": "Checking for an update...",
   "Error encountered (%(errorDetail)s).": "Error encountered (%(errorDetail)s).",
+  "Event sent!": "Event sent!",
+  "Event Type": "Event Type",
+  "Event Content": "Event Content",
+  "State Key": "State Key",
   "No update available.": "No update available.",
   "Downloading update...": "Downloading update...",
   "You need to be using HTTPS to place a screen-sharing call.": "You need to be using HTTPS to place a screen-sharing call.",

From d14f16f0e93a2c28444b9d6ac72e8c0e8b4454c0 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Sun, 27 Aug 2017 17:25:51 +0100
Subject: [PATCH 08/11] look at event property of the mxEv, this way we won't
 have all the additional internal keys :)

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/dialogs/DevtoolsDialog.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/dialogs/DevtoolsDialog.js b/src/components/views/dialogs/DevtoolsDialog.js
index dc8f8769..e343f152 100644
--- a/src/components/views/dialogs/DevtoolsDialog.js
+++ b/src/components/views/dialogs/DevtoolsDialog.js
@@ -171,7 +171,7 @@ class RoomStateExplorer extends React.Component {
     onViewSourceClick(event) {
         const self = this;
         return () => {
-            self.setState({ event });
+            self.setState({ event: event.event });
         };
     }
 

From ce0861d5bdc515b8c35b62384875157848b40bac Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 31 Aug 2017 09:25:06 +0100
Subject: [PATCH 09/11] undo `` as its hard to read

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/dialogs/DevtoolsDialog.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/dialogs/DevtoolsDialog.js b/src/components/views/dialogs/DevtoolsDialog.js
index e343f152..83bb910f 100644
--- a/src/components/views/dialogs/DevtoolsDialog.js
+++ b/src/components/views/dialogs/DevtoolsDialog.js
@@ -61,7 +61,7 @@ class SendCustomEvent extends React.Component {
             await this.send(content);
             message = _t('Event sent!');
         } catch (e) {
-            message = `${_t('Failed to send custom event.')} (${e.toString()})`;
+            message = _t('Failed to send custom event.') + ' (' + e.toString() + ')';
         }
         this.setState({ message });
     }

From 68fc2020867a4e501ebe3c5ec7c9d7211638996c Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 31 Aug 2017 09:45:46 +0100
Subject: [PATCH 10/11] remove pointless self vars and DRY render method of
 send custom events

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 .../views/dialogs/DevtoolsDialog.js           | 49 +++++--------------
 1 file changed, 13 insertions(+), 36 deletions(-)

diff --git a/src/components/views/dialogs/DevtoolsDialog.js b/src/components/views/dialogs/DevtoolsDialog.js
index 83bb910f..6b553eed 100644
--- a/src/components/views/dialogs/DevtoolsDialog.js
+++ b/src/components/views/dialogs/DevtoolsDialog.js
@@ -66,6 +66,10 @@ class SendCustomEvent extends React.Component {
         this.setState({ message });
     }
 
+    _additionalFields() {
+        return <div></div>;
+    }
+
     render() {
         if (this.state.message) {
             return <div>
@@ -78,6 +82,7 @@ class SendCustomEvent extends React.Component {
 
         return <div>
             <div className="mx_Dialog_content">
+                {this._additionalFields()}
                 <div className="mx_TextInputDialog_label">
                     <label htmlFor="eventType"> { _t('Event Type') } </label>
                 </div>
@@ -103,40 +108,14 @@ class SendCustomStateEvent extends SendCustomEvent {
             this.refs.stateKey.value);
     }
 
-    render() {
-        if (this.state.message) {
-            return <div>
-                <div className="mx_Dialog_content">
-                    {this.state.message}
-                </div>
-                {this._buttons()}
-            </div>;
-        }
-
+    _additionalFields() {
         return <div>
-            <div className="mx_Dialog_content">
-                <div className="mx_TextInputDialog_label">
-                    <label htmlFor="stateKey"> { _t('State Key') } </label>
-                </div>
-                <div>
-                    <input id="stateKey" ref="stateKey" className="mx_TextInputDialog_input" size="64" />
-                </div>
-
-                <div className="mx_TextInputDialog_label">
-                    <label htmlFor="eventType"> { _t('Event Type') } </label>
-                </div>
-                <div>
-                    <input id="eventType" ref="eventType" className="mx_TextInputDialog_input" size="64" />
-                </div>
-
-                <div className="mx_TextInputDialog_label">
-                    <label htmlFor="evContent"> { _t('Event Content') } </label>
-                </div>
-                <div>
-                    <textarea id="evContent" ref="evContent" className="mx_TextInputDialog_input" defaultValue={"{\n\n}"} cols="63" rows="5" />
-                </div>
+            <div className="mx_TextInputDialog_label">
+                <label htmlFor="stateKey"> { _t('State Key') } </label>
+            </div>
+            <div>
+                <input id="stateKey" ref="stateKey" className="mx_TextInputDialog_input" size="64" />
             </div>
-            {this._buttons()}
         </div>;
     }
 }
@@ -162,16 +141,14 @@ class RoomStateExplorer extends React.Component {
     };
 
     browseEventType(eventType) {
-        const self = this;
         return () => {
-            self.setState({ eventType });
+            this.setState({ eventType });
         };
     }
 
     onViewSourceClick(event) {
-        const self = this;
         return () => {
-            self.setState({ event: event.event });
+            this.setState({ event: event.event });
         };
     }
 

From b84f258f87b41db5138dc527a03e40c885aeec6d Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 31 Aug 2017 13:49:52 +0100
Subject: [PATCH 11/11] add bottom margin to navigation buttons of room state
 explorer

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 .../views/dialogs/DevtoolsDialog.js           |  9 +++++++--
 src/skins/vector/css/_components.scss         |  1 +
 .../views/dialogs/_DevtoolsDialog.scss        | 19 +++++++++++++++++++
 3 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 src/skins/vector/css/vector-web/views/dialogs/_DevtoolsDialog.scss

diff --git a/src/components/views/dialogs/DevtoolsDialog.js b/src/components/views/dialogs/DevtoolsDialog.js
index 6b553eed..a7ac9fb1 100644
--- a/src/components/views/dialogs/DevtoolsDialog.js
+++ b/src/components/views/dialogs/DevtoolsDialog.js
@@ -188,14 +188,19 @@ class RoomStateExplorer extends React.Component {
                     onClickFn = this.onViewSourceClick(stateGroup[stateKeys[0]]);
                 }
 
-                rows.push(<button key={evType} onClick={onClickFn}>{ evType }</button>);
+                rows.push(<button className="mx_DevTools_RoomStateExplorer_button" key={evType} onClick={onClickFn}>
+                    { evType }
+                </button>);
             });
         } else {
             const evType = this.state.eventType;
             const stateGroup = this.roomStateEvents[evType];
             Object.keys(stateGroup).forEach((stateKey) => {
                 const ev = stateGroup[stateKey];
-                rows.push(<button key={stateKey} onClick={this.onViewSourceClick(ev)}>{stateKey}</button>);
+                rows.push(<button className="mx_DevTools_RoomStateExplorer_button" key={stateKey}
+                                  onClick={this.onViewSourceClick(ev)}>
+                    { stateKey }
+                </button>);
             });
         }
 
diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss
index 00c19b13..8caf15ca 100644
--- a/src/skins/vector/css/_components.scss
+++ b/src/skins/vector/css/_components.scss
@@ -74,6 +74,7 @@
 @import "./vector-web/views/context_menus/_MessageContextMenu.scss";
 @import "./vector-web/views/context_menus/_RoomTileContextMenu.scss";
 @import "./vector-web/views/dialogs/_ChangelogDialog.scss";
+@import "./vector-web/views/dialogs/_DevtoolsDialog.scss";
 @import "./vector-web/views/dialogs/_SetEmailDialog.scss";
 @import "./vector-web/views/dialogs/_SetPasswordDialog.scss";
 @import "./vector-web/views/directory/_NetworkDropdown.scss";
diff --git a/src/skins/vector/css/vector-web/views/dialogs/_DevtoolsDialog.scss b/src/skins/vector/css/vector-web/views/dialogs/_DevtoolsDialog.scss
new file mode 100644
index 00000000..c22a3834
--- /dev/null
+++ b/src/skins/vector/css/vector-web/views/dialogs/_DevtoolsDialog.scss
@@ -0,0 +1,19 @@
+/*
+Copyright 2017 Michael Telatynski <7t3chguy@gmail.com>
+
+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.
+*/
+
+.mx_DevTools_RoomStateExplorer_button {
+    margin-bottom: 10px;
+}