Pull request #1273: 3438 make highlighted inputs resizable

Merge in DNS/adguard-home from 3438-inputs-height to master

Squashed commit of the following:

commit a049febdc8490505d665c0939c01a14da997f861
Merge: 7035339b 42b2c3ab
Author: Ildar Kamalov <ik@adguard.com>
Date:   Mon Aug 16 17:36:58 2021 +0300

    Merge branch 'master' into 3438-inputs-height

commit 7035339b26fa205a844e79713179c7b623c90ce0
Merge: 20ef34c4 784bc318
Author: Ildar Kamalov <ik@adguard.com>
Date:   Mon Aug 16 17:28:06 2021 +0300

    Merge branch 'master' into 3438-inputs-height

commit 20ef34c4a6078658c444e310800923b8b3f74c1c
Author: Ildar Kamalov <ik@adguard.com>
Date:   Mon Aug 16 13:41:46 2021 +0300

    client: remove unused

commit f2ace4ef452bbdc4b955e510aa07d1c93ec79ee4
Author: Ildar Kamalov <ik@adguard.com>
Date:   Mon Aug 16 13:30:58 2021 +0300

    client: make highlighted inputs resizable

client/src/components/Filters/CustomRules.js

@@ -1,13 +1,12 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Trans, withTranslation } from 'react-i18next';
-import classnames from 'classnames';
 import Card from '../ui/Card';
 import PageTitle from '../ui/PageTitle';
 import Examples from './Examples';
 import Check from './Check';
 import { getTextareaCommentsHighlight, syncScroll } from '../../helpers/highlightTextareaComments';
-import { COMMENT_LINE_DEFAULT_TOKEN, isFirefox } from '../../helpers/constants';
+import { COMMENT_LINE_DEFAULT_TOKEN } from '../../helpers/constants';
 import '../ui/texareaCommentsHighlight.css';
 
 class CustomRules extends Component {
@@ -52,26 +51,19 @@ class CustomRules extends Component {
         return (
             <>
                 <PageTitle title={t('custom_filtering_rules')} />
-                <Card
+                <Card subtitle={t('custom_filter_rules_hint')}>
-                    subtitle={t('custom_filter_rules_hint')}
-                >
                     <form onSubmit={this.handleSubmit}>
-                        <div className={classnames('col-12 text-edit-container form-control--textarea-large', {
+                        <div className="text-edit-container mb-4">
-                            'mb-4': !isFirefox,
+                            <textarea
-                            'mb-6': isFirefox,
+                                className="form-control font-monospace text-input"
-                        })}>
-                        <textarea
-                                className={classnames('form-control font-monospace text-input form-control--textarea-large', {
-                                    'text-input--largest': isFirefox,
-                                })}
                                 value={userRules}
                                 onChange={this.handleChange}
                                 onScroll={this.onScroll}
-                        />
+                            />
                             {getTextareaCommentsHighlight(
                                 this.ref,
                                 userRules,
-                                classnames({ 'form-control--textarea-large': isFirefox }),
+                                undefined,
                                 [COMMENT_LINE_DEFAULT_TOKEN, '!'],
                             )}
                         </div>

client/src/components/Settings/Dns/Upstream/Form.js

@@ -9,7 +9,6 @@ import { renderRadioField, renderTextareaField, CheckboxField } from '../../../.
 import {
     DNS_REQUEST_OPTIONS,
     FORM_NAME,
-    isFirefox,
     UPSTREAM_CONFIGURATION_WIKI_LINK,
 } from '../../../../helpers/constants';
 import { testUpstreamWithFormValues } from '../../../../actions';
@@ -90,25 +89,10 @@ renderTextareaWithHighlightField.propTypes = {
     normalizeOnBlur: PropTypes.func,
     onScroll: PropTypes.func,
     placeholder: PropTypes.string.isRequired,
-    subtitle: PropTypes.string.isRequired,
     type: PropTypes.string.isRequired,
 };
 
 const INPUT_FIELDS = [
-    {
-        name: UPSTREAM_DNS_NAME,
-        type: 'text',
-        component: renderTextareaWithHighlightField,
-        className: classnames('form-control form-control--textarea font-monospace text-input', {
-            'text-input--larger': isFirefox,
-        }),
-        containerClass: classnames('text-edit-container', {
-            'mb-4': !isFirefox,
-            'mb-6': isFirefox,
-        }),
-        placeholder: 'upstream_dns',
-        normalizeOnBlur: removeEmptyLines,
-    },
     {
         name: UPSTREAM_MODE_NAME,
         type: 'radio',
@@ -176,6 +160,20 @@ const Form = ({
                     dns_providers
                 </Trans>
             </label>
+            <div className="col-12 mb-4">
+                <div className="text-edit-container">
+                    <Field
+                        id={UPSTREAM_DNS_NAME}
+                        name={UPSTREAM_DNS_NAME}
+                        component={renderTextareaWithHighlightField}
+                        type="text"
+                        className="form-control form-control--textarea font-monospace text-input"
+                        placeholder={t('upstream_dns')}
+                        disabled={processingSetConfig || processingTestUpstream}
+                        normalizeOnBlur={removeEmptyLines}
+                    />
+                </div>
+            </div>
             {INPUT_FIELDS.map(renderField)}
             <div className="col-12">
                 <Examples />

client/src/components/ui/texareaCommentsHighlight.css

@@ -1,6 +1,7 @@
 .text-edit-container {
     position: relative;
-    height: 10rem;
+    min-height: 240px;
+    overflow: hidden;
 }
 
 .text-input,
@@ -10,33 +11,20 @@
     left: 0;
     width: 100%;
     height: 100%;
-    padding: 1rem;
+    padding: 16px;
     background: transparent;
     white-space: pre-wrap;
-    line-height: 1.5rem;
+    line-height: 24px;
     word-wrap: break-word;
     font-size: var(--font-size-disable-autozoom);
     margin: 0;
-}
+    overscroll-behavior: none;
-
-.form--upstream .text-input,
-.form--upstream .text-output {
-    width: 98%;
-    left: 1%;
 }
 
 .text-input {
+    position: relative;
     opacity: 1;
-    resize: none;
+    min-height: 240px;
-    height: 10rem;
-}
-
-.text-input--larger {
-    height: 11rem;
-}
-
-.text-input--largest {
-    height: 16rem;
 }
 
 .text-output {