From 9d894618a8f5d820a9f7f22c1a692c2f44442a83 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Fri, 10 Feb 2017 22:22:27 +0900
Subject: [PATCH] Create <TextArea> and <AboutAdblockTextArea> with Aphrodite

Closes 7163

Auditors:

Test Plan:
1. Open about:adblock
2. Input some strings inside the textarea
3. Make sure the font size is set to 14.5px
4. Make sure 10px margin is applied to the top and the bottom of the textarea
5. Open about:styles
6. Make sure <TextForm> and <AboutAdblockTextForm> are correctly displayed
---
 .../components/styles/commonStyles.js         |  2 +-
 app/renderer/components/styles/global.js      |  1 +
 app/renderer/components/textbox.js            | 32 ++++++++++++++++++-
 js/about/adblock.js                           |  5 +--
 js/about/styles.js                            | 19 +++++++++++
 less/about/adblock.less                       | 10 +++---
 test/components/braveryPanelTest.js           | 10 +++---
 test/lib/selectors.js                         |  3 +-
 8 files changed, 67 insertions(+), 15 deletions(-)

diff --git a/app/renderer/components/styles/commonStyles.js b/app/renderer/components/styles/commonStyles.js
index 73938b51144..f9582c3d228 100644
--- a/app/renderer/components/styles/commonStyles.js
+++ b/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',
diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js
index f36dda17b32..025d105af05 100644
--- a/app/renderer/components/styles/global.js
+++ b/app/renderer/components/styles/global.js
@@ -72,6 +72,7 @@ const globalStyles = {
     defaultSpacing: '12px',
     defaultFontSize: '13px',
     contextMenuFontSize: '14px',
+    textAreaFontSize: '14.5px',
     dragSpacing: '50px',
     switchHeight: '16px',
     switchWidth: '45px',
diff --git a/app/renderer/components/textbox.js b/app/renderer/components/textbox.js
index fd8a95955d6..0e88a86ae99 100644
--- a/app/renderer/components/textbox.js
+++ b/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,7 +41,26 @@ class RecoveryKeyTextbox extends ImmutableComponent {
   }
 }
 
+// TextArea
+class TextArea extends ImmutableComponent {
+  render () {
+    const className = css(
+      styles.textArea,
+      this.props['data-isAboutAdblock'] && styles.isAboutAdblock
+    )
+
+    return <textarea className={className} {...this.props} />
+  }
+}
+
+class AboutAdblockTextArea extends ImmutableComponent {
+  render () {
+    return <TextArea data-isAboutAdblock='true' {...this.props} />
+  }
+}
+
 const styles = StyleSheet.create({
+  // Textbox
   'textbox': {
     boxSizing: 'border-box',
     width: 'auto'
@@ -63,6 +83,14 @@ const styles = StyleSheet.create({
   },
   'recoveryKeys': {
     marginBottom: '20px'
+  },
+
+  // TextArea
+  'textArea': {
+    padding: '5px'
+  },
+  'isAboutAdblock': {
+    fontSize: globalStyles.spacing.textAreaFontSize  // Issue #6851
   }
 })
 
@@ -70,5 +98,7 @@ module.exports = {
   Textbox,
   FormTextbox,
   SettingTextbox,
-  RecoveryKeyTextbox
+  RecoveryKeyTextbox,
+  TextArea,
+  AboutAdblockTextArea
 }
diff --git a/js/about/adblock.js b/js/about/adblock.js
index 5217138528d..b3c709d4994 100644
--- a/js/about/adblock.js
+++ b/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 {AboutAdblockTextArea} = 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
+            <AboutAdblockTextArea
               onChange={this.onChangeCustomFilters}
               value={getSetting(ADBLOCK_CUSTOM_RULES, this.state.settings) || ''}
-              className='customFiltersInput'
+              data-test-id='customFiltersInput'
               cols='100'
               rows='10'
               spellCheck='false' />
diff --git a/js/about/styles.js b/js/about/styles.js
index 8b30ca95117..89e47810480 100644
--- a/js/about/styles.js
+++ b/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, AboutAdblockTextArea} = 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>Textarea used on <code>about:adblock</code></h2>
+        <AboutAdblockTextArea placeholder='AboutAdblockTextArea' />
+        <pre><code>
+          const { '{AboutAdblockTextArea}' } = require('../../app/renderer/components/textbox'){'\n'}
+          &lt;AboutAdblockTextArea />
+        </code></pre>
+      </div>
+
       <hr />
 
       <h1 data-l10n-id='dropdowns' />
diff --git a/less/about/adblock.less b/less/about/adblock.less
index 8e50e236eca..82a1c20994b 100644
--- a/less/about/adblock.less
+++ b/less/about/adblock.less
@@ -18,6 +18,10 @@
     -webkit-user-select: text;
   }
 
+  .adblockDetailsPageContent {
+    margin-bottom: 10px;
+  }
+
   .adblockLists {
     margin-top: 10px;
   }
@@ -26,13 +30,9 @@
     margin-left: 15px;
   }
 
-  .customFiltersInput {
-    margin: 10px 0;
-    padding: 5px;
-  }
-
   .adblockSubtext {
     font-size: smaller;
     font-weight: bold;
+    margin-bottom: 10px;
   }
 }
diff --git a/test/components/braveryPanelTest.js b/test/components/braveryPanelTest.js
index 35544a6016c..ebee8585f2a 100644
--- a/test/components/braveryPanelTest.js
+++ b/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) => {
diff --git a/test/lib/selectors.js b/test/lib/selectors.js
index 76220487d36..38d27359f43 100644
--- a/test/lib/selectors.js
+++ b/test/lib/selectors.js
@@ -94,5 +94,6 @@ module.exports = {
   tabsToolbar: '.tabsToolbar',
   hamburgerMenu: '.menuButton',
   contextMenu: '.contextMenu',
-  okButton: '[data-l10n-id="ok"]'
+  okButton: '[data-l10n-id="ok"]',
+  customFiltersInput: '[data-test-id="customFiltersInput"]'
 }