Create <TextArea> and <DefaultTextArea> with Aphrodite

app/renderer/components/styles/commonStyles.js

@@ -14,7 +14,7 @@ const styles = StyleSheet.create({
     boxSizing: 'border-box',
     display: 'block',
     color: globalStyles.color.darkGray,
-    fontSize: '14.5px',
+    fontSize: globalStyles.spacing.textAreaFontSize,
     height: '2.25em',
     outline: 'none',
     padding: '0.4em',

app/renderer/components/styles/global.js

@@ -80,6 +80,7 @@ const globalStyles = {
     defaultSpacing: '12px',
     defaultFontSize: '13px',
     contextMenuFontSize: '14px',
+    textAreaFontSize: '14.5px',
     dragSpacing: '50px',
     switchHeight: '16px',
     switchWidth: '45px',

app/renderer/components/textbox.js

@@ -8,6 +8,7 @@ const {StyleSheet, css} = require('aphrodite')
 const globalStyles = require('./styles/global')
 const commonStyles = require('./styles/commonStyles')
 
+// Textbox
 class Textbox extends ImmutableComponent {
   render () {
     const className = css(
@@ -40,35 +41,64 @@ class RecoveryKeyTextbox extends ImmutableComponent {
   }
 }
 
+// TextArea
+class TextArea extends ImmutableComponent {
+  render () {
+    const className = css(
+      styles.textArea,
+      this.props['data-isDefault'] && styles.isDefault
+    )
+
+    return <textarea className={className} {...this.props} />
+  }
+}
+
+class DefaultTextArea extends ImmutableComponent {
+  render () {
+    return <TextArea data-isDefault='true' {...this.props} />
+  }
+}
+
 const styles = StyleSheet.create({
-  'textbox': {
+  // Textbox
+  textbox: {
     boxSizing: 'border-box',
     width: 'auto'
   },
-  'outlineable': {
+  outlineable: {
     ':focus': {
       outlineColor: globalStyles.color.statsBlue,
       outlineOffset: '-4px',
       outlineStyle: 'solid',
       outlineWidth: '1px'
     }
   },
-  'isSettings': {
+  isSettings: {
     width: '280px'
   },
-  'readOnly': {
+  readOnly: {
     background: globalStyles.color.veryLightGray,
     boxShadow: 'none',
     outline: 'none'
   },
-  'recoveryKeys': {
+  recoveryKeys: {
     marginBottom: '20px'
+  },
+
+  // TextArea
+  textArea: {
+    padding: '5px'
+  },
+  isDefault: {
+    fontSize: globalStyles.spacing.textAreaFontSize  // Issue #6851
   }
 })
 
 module.exports = {
   Textbox,
   FormTextbox,
   SettingTextbox,
-  RecoveryKeyTextbox
+  RecoveryKeyTextbox,
+  TextArea,
+  DefaultTextArea
 }

js/about/adblock.js

@@ -11,6 +11,7 @@ const getSetting = require('../settings').getSetting
 const aboutActions = require('./aboutActions')
 const ImmutableComponent = require('../components/immutableComponent')
 const SwitchControl = require('../components/switchControl')
+const {DefaultTextArea} = require('../../app/renderer/components/textbox')
 
 const ipc = window.chrome.ipcRenderer
 
@@ -90,10 +91,10 @@ class AboutAdBlock extends React.Component {
             </div>
             <h3 data-l10n-id='customFilters' />
             <div className='adblockSubtext' data-l10n-id='customFilterDescription' />
-            <textarea
+            <DefaultTextArea
               onChange={this.onChangeCustomFilters}
               value={getSetting(ADBLOCK_CUSTOM_RULES, this.state.settings) || ''}
-              className='customFiltersInput'
+              data-test-id='customFiltersInput'
               cols='100'
               rows='10'
               spellCheck='false' />

js/about/styles.js

@@ -11,6 +11,7 @@ require('../../less/button.less')
 require('../../less/forms.less')
 
 const {Textbox, FormTextbox, SettingTextbox, RecoveryKeyTextbox} = require('../../app/renderer/components/textbox')
+const {TextArea, DefaultTextArea} = require('../../app/renderer/components/textbox')
 const {Dropdown, FormDropdown, SettingDropdown} = require('../../app/renderer/components/dropdown')
 
 class AboutStyle extends ImmutableComponent {
@@ -67,6 +68,24 @@ class AboutStyle extends ImmutableComponent {
         </code></pre>
       </div>
 
+      <div className='container'>
+        <h2>Plain textarea</h2>
+        <TextArea placeholder='TextArea' />
+        <pre><code>
+          const { '{TextArea}' } = require('../../app/renderer/components/textbox'){'\n'}
+          &lt;TextArea />
+        </code></pre>
+      </div>
+
+      <div className='container'>
+        <h2>Default textarea; font size is specified</h2>
+        <DefaultTextArea placeholder='DefaultTextArea' />
+        <pre><code>
+          const { '{DefaultTextArea}' } = require('../../app/renderer/components/textbox'){'\n'}
+          &lt;DefaultTextArea />
+        </code></pre>
+      </div>
+
       <hr />
 
       <h1 data-l10n-id='dropdowns' />

less/about/adblock.less

@@ -18,6 +18,10 @@
     -webkit-user-select: text;
   }
 
+  .adblockDetailsPageContent {
+    margin-bottom: 10px;
+  }
+
   .adblockLists {
     margin-top: 10px;
   }
@@ -26,14 +30,9 @@
     margin-left: 15px;
   }
 
-  .customFiltersInput {
-    margin: 10px 0;
-    padding: 5px;
-    font-size: 14.5px; // Issue #6851
-  }
-
   .adblockSubtext {
     font-size: smaller;
     font-weight: bold;
+    margin-bottom: 10px;
   }
 }

test/components/braveryPanelTest.js

@@ -2,7 +2,7 @@
 
 const Brave = require('../lib/brave')
 const messages = require('../../js/constants/messages')
-const {urlInput, braveMenu, braveMenuDisabled, adsBlockedStat, adsBlockedControl, showAdsOption, blockAdsOption, braveryPanel, httpsEverywhereStat, noScriptStat, noScriptSwitch, fpSwitch, fpStat, noScriptNavButton} = require('../lib/selectors')
+const {urlInput, braveMenu, braveMenuDisabled, adsBlockedStat, adsBlockedControl, showAdsOption, blockAdsOption, braveryPanel, httpsEverywhereStat, noScriptStat, noScriptSwitch, fpSwitch, fpStat, noScriptNavButton, customFiltersInput} = require('../lib/selectors')
 const {getTargetAboutUrl} = require('../../js/lib/appUrlUtil')
 
 describe('Bravery Panel', function () {
@@ -205,8 +205,8 @@ describe('Bravery Panel', function () {
         .tabByIndex(0)
         .loadUrl(aboutAdblockURL)
         .url(aboutAdblockURL)
-        .waitForVisible('.customFiltersInput')
-        .setValue('.customFiltersInput', 'testblock.brave.com')
+        .waitForVisible(customFiltersInput)
+        .setValue(customFiltersInput, 'testblock.brave.com')
         .windowByUrl(Brave.browserWindowUrl)
         .waitUntil(function () {
           return this.getAppState().then((val) => {
@@ -239,8 +239,8 @@ describe('Bravery Panel', function () {
         .tabByIndex(0)
         .loadUrl(aboutAdblockURL)
         .url(aboutAdblockURL)
-        .waitForVisible('.customFiltersInput')
-        .setValue('.customFiltersInput', 'testblock.brave.com')
+        .waitForVisible(customFiltersInput)
+        .setValue(customFiltersInput, 'testblock.brave.com')
         .windowByUrl(Brave.browserWindowUrl)
         .waitUntil(function () {
           return this.getAppState().then((val) => {

test/lib/selectors.js

@@ -86,5 +86,6 @@ module.exports = {
   tabsToolbar: '.tabsToolbar',
   hamburgerMenu: '.menuButton',
   contextMenu: '.contextMenu',
-  okButton: '[data-l10n-id="ok"]'
+  okButton: '[data-l10n-id="ok"]',
+  customFiltersInput: '[data-test-id="customFiltersInput"]'
 }