From dbf540074d61008607c26ccc40ca30d4c3253f2b Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Sun, 24 Feb 2019 04:28:42 +0000
Subject: [PATCH 1/3] replace text Inputs in Devtools with Field bcuz prettier

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

diff --git a/src/components/views/dialogs/DevtoolsDialog.js b/src/components/views/dialogs/DevtoolsDialog.js
index ea198461c5..ff118792fb 100644
--- a/src/components/views/dialogs/DevtoolsDialog.js
+++ b/src/components/views/dialogs/DevtoolsDialog.js
@@ -20,6 +20,7 @@ import sdk from '../../../index';
 import SyntaxHighlight from '../elements/SyntaxHighlight';
 import { _t } from '../../../languageHandler';
 import MatrixClientPeg from '../../../MatrixClientPeg';
+import Field from "../elements/Field";
 
 class DevtoolsComponent extends React.Component {
     static contextTypes = {
@@ -56,14 +57,8 @@ class GenericEditor extends DevtoolsComponent {
     }
 
     textInput(id, label) {
-        return <div className="mx_DevTools_inputRow">
-            <div className="mx_DevTools_inputLabelCell">
-                <label htmlFor={id}>{ label }</label>
-            </div>
-            <div className="mx_DevTools_inputCell">
-                <input id={id} className="mx_TextInputDialog_input" onChange={this._onChange} value={this.state[id]} size="32" autoFocus={true} />
-            </div>
-        </div>;
+        return <Field id={id} label={label} size="32" autoFocus={true} type="text" autoComplete="on"
+                      value={this.state[id]} onChange={this._onChange} />;
     }
 }
 
@@ -138,12 +133,9 @@ class SendCustomEvent extends GenericEditor {
 
                 <br />
 
-                <div className="mx_DevTools_inputLabelCell">
-                    <label htmlFor="evContent"> { _t('Event Content') } </label>
-                </div>
-                <div>
-                    <textarea id="evContent" onChange={this._onChange} value={this.state.evContent} className="mx_DevTools_textarea" />
-                </div>
+                <Field id="evContent" label={_t("Event Content")} type="text" className="mx_DevTools_textarea"
+                       autoComplete="off" value={this.state.evContent} onChange={this._onChange} element="textarea" />
+
             </div>
             <div className="mx_Dialog_buttons">
                 <button onClick={this.onBack}>{ _t('Back') }</button>
@@ -302,14 +294,12 @@ class FilteredList extends React.Component {
     render() {
         const TruncatedList = sdk.getComponent("elements.TruncatedList");
         return <div>
-            <input size="64"
-                   autoFocus={true}
-                   onChange={this.onQuery}
-                   value={this.props.query}
-                   placeholder={_t('Filter results')}
+            <Field id="DevtoolsDialog_FilteredList_filter" label={_t('Filter results')} autoFocus={true} size={64}
+                   type="text" autoComplete="off" value={this.props.query} onChange={this.onQuery}
                    className="mx_TextInputDialog_input mx_DevTools_RoomStateExplorer_query"
                    // force re-render so that autoFocus is applied when this component is re-used
                    key={this.props.children[0] ? this.props.children[0].key : ''} />
+
             <TruncatedList getChildren={this.getChildren}
                            getChildCount={this.getChildCount}
                            truncateAt={this.state.truncateAt}

From 5bdd61111d61ce6b841a6cb3bf80838b446b1036 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 25 Feb 2019 22:12:06 +0000
Subject: [PATCH 2/3] Fix textareas

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 res/css/views/dialogs/_DevtoolsDialog.scss     | 2 +-
 src/components/views/dialogs/DevtoolsDialog.js | 9 ++-------
 2 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/res/css/views/dialogs/_DevtoolsDialog.scss b/res/css/views/dialogs/_DevtoolsDialog.scss
index 572d6ee8c7..f8c863505a 100644
--- a/res/css/views/dialogs/_DevtoolsDialog.scss
+++ b/res/css/views/dialogs/_DevtoolsDialog.scss
@@ -67,7 +67,7 @@ limitations under the License.
 
 .mx_DevTools_textarea {
     font-size: 12px;
-    max-width: 624px;
+    max-width: 684px;
     min-height: 250px;
     padding: 10px;
     width: 100%;
diff --git a/src/components/views/dialogs/DevtoolsDialog.js b/src/components/views/dialogs/DevtoolsDialog.js
index ff118792fb..8bf9310dca 100644
--- a/src/components/views/dialogs/DevtoolsDialog.js
+++ b/src/components/views/dialogs/DevtoolsDialog.js
@@ -135,7 +135,6 @@ class SendCustomEvent extends GenericEditor {
 
                 <Field id="evContent" label={_t("Event Content")} type="text" className="mx_DevTools_textarea"
                        autoComplete="off" value={this.state.evContent} onChange={this._onChange} element="textarea" />
-
             </div>
             <div className="mx_Dialog_buttons">
                 <button onClick={this.onBack}>{ _t('Back') }</button>
@@ -215,12 +214,8 @@ class SendAccountData extends GenericEditor {
                 { this.textInput('eventType', _t('Event Type')) }
                 <br />
 
-                <div className="mx_DevTools_inputLabelCell">
-                    <label htmlFor="evContent"> { _t('Event Content') } </label>
-                </div>
-                <div>
-                    <textarea id="evContent" onChange={this._onChange} value={this.state.evContent} className="mx_DevTools_textarea" />
-                </div>
+                <Field id="evContent" label={_t("Event Content")} type="text" className="mx_DevTools_textarea"
+                       autoComplete="off" value={this.state.evContent} onChange={this._onChange} element="textarea" />
             </div>
             <div className="mx_Dialog_buttons">
                 <button onClick={this.onBack}>{ _t('Back') }</button>

From 56d58f86003f4a78aa490cdf4a1abe4ab07d5edd Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 25 Feb 2019 22:38:33 +0000
Subject: [PATCH 3/3] make better use of space

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 res/css/views/dialogs/_DevtoolsDialog.scss     | 8 ++++++++
 src/components/views/dialogs/DevtoolsDialog.js | 2 +-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/res/css/views/dialogs/_DevtoolsDialog.scss b/res/css/views/dialogs/_DevtoolsDialog.scss
index f8c863505a..815e8408b5 100644
--- a/res/css/views/dialogs/_DevtoolsDialog.scss
+++ b/res/css/views/dialogs/_DevtoolsDialog.scss
@@ -73,6 +73,14 @@ limitations under the License.
     width: 100%;
 }
 
+.mx_DevTools_content .mx_Field_input {
+    display: inline-block;
+}
+
+.mx_DevTools_content .mx_Field_input + .mx_Field_input {
+    margin-left: 42px;
+}
+
 .mx_DevTools_tgl {
     display: none;
 
diff --git a/src/components/views/dialogs/DevtoolsDialog.js b/src/components/views/dialogs/DevtoolsDialog.js
index 8bf9310dca..3db516a74d 100644
--- a/src/components/views/dialogs/DevtoolsDialog.js
+++ b/src/components/views/dialogs/DevtoolsDialog.js
@@ -57,7 +57,7 @@ class GenericEditor extends DevtoolsComponent {
     }
 
     textInput(id, label) {
-        return <Field id={id} label={label} size="32" autoFocus={true} type="text" autoComplete="on"
+        return <Field id={id} label={label} size="42" autoFocus={true} type="text" autoComplete="on"
                       value={this.state[id]} onChange={this._onChange} />;
     }
 }