From 9f9cde12cead6ca442a480a694417655c389e8ec Mon Sep 17 00:00:00 2001
From: Richard Lewis <richard@smetco.co.uk>
Date: Wed, 23 May 2018 17:18:33 +0100
Subject: [PATCH 1/4] Make devTools styling more consistent and easier to edit
 event data.

---
 res/css/views/dialogs/_DevtoolsDialog.scss     | 18 ++++++++++++++++--
 src/components/views/dialogs/DevtoolsDialog.js | 10 +++++-----
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/res/css/views/dialogs/_DevtoolsDialog.scss b/res/css/views/dialogs/_DevtoolsDialog.scss
index 8918373ecf..a8e25bb08b 100644
--- a/res/css/views/dialogs/_DevtoolsDialog.scss
+++ b/res/css/views/dialogs/_DevtoolsDialog.scss
@@ -14,8 +14,18 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.mx_DevTools_content {
+    margin: 10px 0;
+}
+
 .mx_DevTools_RoomStateExplorer_button, .mx_DevTools_RoomStateExplorer_query {
     margin-bottom: 10px;
+    max-width: 684px;
+    width: 100%;
+}
+
+.mx_DevTools_LabalCell {
+    font-weight: bold;
 }
 
 .mx_DevTools_label_left {
@@ -38,7 +48,6 @@ limitations under the License.
 
 .mx_DevTools_inputLabelCell
 {
-    padding-bottom: 21px;
     display: table-cell;
     font-weight: bold;
     padding-right: 24px;
@@ -46,7 +55,6 @@ limitations under the License.
 
 .mx_DevTools_inputCell {
     display: table-cell;
-    padding-bottom: 21px;
     width: 240px;
 }
 
@@ -62,6 +70,12 @@ limitations under the License.
     font-size: 16px;
 }
 
+.mx_DevTools_textarea {
+    font-size: 12px;
+    min-height: 250px;
+    width: 100%;
+}
+
 .mx_DevTools_tgl {
     display: none;
 
diff --git a/src/components/views/dialogs/DevtoolsDialog.js b/src/components/views/dialogs/DevtoolsDialog.js
index 1d3c8ecc09..f2a969ef41 100644
--- a/src/components/views/dialogs/DevtoolsDialog.js
+++ b/src/components/views/dialogs/DevtoolsDialog.js
@@ -132,17 +132,17 @@ class SendCustomEvent extends GenericEditor {
         }
 
         return <div>
-            <div className="mx_Dialog_content">
+            <div className="mx_DevTools_content">
                 { this.textInput('eventType', _t('Event Type')) }
                 { this.state.isStateEvent && this.textInput('stateKey', _t('State Key')) }
 
                 <br />
 
-                <div className="mx_UserSettings_profileLabelCell">
+                <div className="mx_DevTools_LabalCell">
                     <label htmlFor="evContent"> { _t('Event Content') } </label>
                 </div>
                 <div>
-                    <textarea id="evContent" onChange={this._onChange} value={this.state.evContent} className="mx_TextInputDialog_input" cols="63" rows="5" />
+                    <textarea id="evContent" onChange={this._onChange} value={this.state.evContent} className="mx_DevTools_textarea" />
                 </div>
             </div>
             <div className="mx_Dialog_buttons">
@@ -227,7 +227,7 @@ class SendAccountData extends GenericEditor {
                     <label htmlFor="evContent"> { _t('Event Content') } </label>
                 </div>
                 <div>
-                    <textarea id="evContent" onChange={this._onChange} value={this.state.evContent} className="mx_TextInputDialog_input" cols="63" rows="5" />
+                    <textarea id="evContent" onChange={this._onChange} value={this.state.evContent} className="mx_DevTools_textarea" />
                 </div>
             </div>
             <div className="mx_Dialog_buttons">
@@ -485,7 +485,7 @@ class AccountDataExplorer extends DevtoolsComponent {
             }
 
             return <div className="mx_ViewSource">
-                <div className="mx_Dialog_content">
+                <div className="mx_DevTools_content">
                     <SyntaxHighlight className="json">
                         { JSON.stringify(this.state.event.event, null, 2) }
                     </SyntaxHighlight>

From 2a9859c7b64dae3d3d345945757b76178aaf8ae7 Mon Sep 17 00:00:00 2001
From: Richard Lewis <richard@smetco.co.uk>
Date: Wed, 23 May 2018 17:40:15 +0100
Subject: [PATCH 2/4] Styling for consistency.

---
 res/css/views/dialogs/_DevtoolsDialog.scss     | 2 ++
 src/components/views/dialogs/DevtoolsDialog.js | 6 +++---
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/res/css/views/dialogs/_DevtoolsDialog.scss b/res/css/views/dialogs/_DevtoolsDialog.scss
index a8e25bb08b..4ae71eed5d 100644
--- a/res/css/views/dialogs/_DevtoolsDialog.scss
+++ b/res/css/views/dialogs/_DevtoolsDialog.scss
@@ -72,7 +72,9 @@ limitations under the License.
 
 .mx_DevTools_textarea {
     font-size: 12px;
+    max-width: 624px;
     min-height: 250px;
+    padding: 10px;
     width: 100%;
 }
 
diff --git a/src/components/views/dialogs/DevtoolsDialog.js b/src/components/views/dialogs/DevtoolsDialog.js
index f2a969ef41..1566302e42 100644
--- a/src/components/views/dialogs/DevtoolsDialog.js
+++ b/src/components/views/dialogs/DevtoolsDialog.js
@@ -138,7 +138,7 @@ class SendCustomEvent extends GenericEditor {
 
                 <br />
 
-                <div className="mx_DevTools_LabalCell">
+                <div className="mx_DevTools_inputLabelCell">
                     <label htmlFor="evContent"> { _t('Event Content') } </label>
                 </div>
                 <div>
@@ -219,11 +219,11 @@ class SendAccountData extends GenericEditor {
         }
 
         return <div>
-            <div className="mx_Dialog_content">
+            <div className="mx_DevTools_content">
                 { this.textInput('eventType', _t('Event Type')) }
                 <br />
 
-                <div className="mx_UserSettings_profileLabelCell">
+                <div className="mx_DevTools_inputLabelCell">
                     <label htmlFor="evContent"> { _t('Event Content') } </label>
                 </div>
                 <div>

From 7db31835b42f3a658518ad0bc9a311a4472f4a8a Mon Sep 17 00:00:00 2001
From: Richard Lewis <richard@smetco.co.uk>
Date: Wed, 23 May 2018 18:24:52 +0100
Subject: [PATCH 3/4] Remove unused / misspelt class.

---
 res/css/views/dialogs/_DevtoolsDialog.scss | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/res/css/views/dialogs/_DevtoolsDialog.scss b/res/css/views/dialogs/_DevtoolsDialog.scss
index 4ae71eed5d..084225397f 100644
--- a/res/css/views/dialogs/_DevtoolsDialog.scss
+++ b/res/css/views/dialogs/_DevtoolsDialog.scss
@@ -24,10 +24,6 @@ limitations under the License.
     width: 100%;
 }
 
-.mx_DevTools_LabalCell {
-    font-weight: bold;
-}
-
 .mx_DevTools_label_left {
     float: left;
 }

From 7da51f2bd4e400fba3259103950af895f7779380 Mon Sep 17 00:00:00 2001
From: Richard Lewis <richard@smetco.co.uk>
Date: Wed, 23 May 2018 18:40:48 +0100
Subject: [PATCH 4/4] Remove max-width restriction (no longer makes sense).

---
 res/css/views/dialogs/_DevtoolsDialog.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/res/css/views/dialogs/_DevtoolsDialog.scss b/res/css/views/dialogs/_DevtoolsDialog.scss
index 084225397f..a4a868bd11 100644
--- a/res/css/views/dialogs/_DevtoolsDialog.scss
+++ b/res/css/views/dialogs/_DevtoolsDialog.scss
@@ -20,7 +20,6 @@ limitations under the License.
 
 .mx_DevTools_RoomStateExplorer_button, .mx_DevTools_RoomStateExplorer_query {
     margin-bottom: 10px;
-    max-width: 684px;
     width: 100%;
 }