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] 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>