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
brave · Feb 10, 2017 · 4a8bd86 · 4a8bd86
1 parent 5de2834
commit 4a8bd86
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 16 deletions.
diff --git 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
@@ -80,6 +80,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
@@ -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,12 +83,22 @@ const styles = StyleSheet.create({
   },
   'recoveryKeys': {
     marginBottom: '20px'
+  },
+
+  // TextArea
+  'textArea': {
+    padding: '5px'
+  },
+  'isAboutAdblock': {
+    fontSize: globalStyles.spacing.textAreaFontSize  // Issue #6851
   }
 })
 
 module.exports = {
   Textbox,
   FormTextbox,
   SettingTextbox,
-  RecoveryKeyTextbox
+  RecoveryKeyTextbox,
+  TextArea,
+  AboutAdblockTextArea
 }
diff --git 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
@@ -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
@@ -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;
   }
 }
diff --git 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
@@ -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"]'
 }