Refactor about:adblock with Aphrodite

Closes #7320

- Remove itemList.less as it has not been used
- Remove className
  - adblockCount
  - blockedCountTotal
  - adblockLastChecked
  - adblockLastETag
- Edit the test code

TODO: refactor SwitchControl to remove .switchControlRightText in adblock.less

Auditors:

Test Plan:
1. Open about:adblock
2. Make sure the page is properly rendered and not broken

js/about/adblock.js

@@ -13,11 +13,12 @@ const ImmutableComponent = require('../components/immutableComponent')
 const SwitchControl = require('../components/switchControl')
 const {DefaultTextArea} = require('../../app/renderer/components/textbox')
 
+const {StyleSheet, css} = require('aphrodite/no-important')
+
 const ipc = window.chrome.ipcRenderer
 
 // Stylesheets
 require('../../less/switchControls.less')
-require('../../less/about/itemList.less')
 require('../../less/about/adblock.less')
 
 class AdBlockItem extends ImmutableComponent {
@@ -64,33 +65,33 @@ class AboutAdBlock extends React.Component {
   }
   render () {
     const lastUpdateDate = new Date(this.state.adblock.get('lastCheckDate'))
-    return <div className='adblockDetailsPage'>
-      <h2 data-l10n-id='adblock' />
+    return <div className={css(styles.adblockDetailsPage)}>
+      <h2 className={css(styles.adblockDetailsPage__h2)} data-l10n-id='adblock' />
       <list>
         <div role='listitem'>
-          <div className='adblockDetailsPageContent'>
-            <div className='adblockCount'><span data-l10n-id='blockedCountLabel' /> <span className='blockedCountTotal'>{this.state.adblock.get('count') || 0}</span></div>
+          <div className={css(styles.adblockDetailsPageContent)}>
+            <div><span data-l10n-id='blockedCountLabel' /> <span data-test-id='blockedCountTotal'>{this.state.adblock.get('count') || 0}</span></div>
             {
               Number.isNaN(lastUpdateDate.getTime())
               ? null
-              : <div className='adblockLastChecked'><span data-l10n-id='lastUpdateCheckDateLabel' /> <span>{lastUpdateDate.toLocaleDateString()}</span></div>
+              : <div><span data-l10n-id='lastUpdateCheckDateLabel' /> <span>{lastUpdateDate.toLocaleDateString()}</span></div>
             }
             {
               this.state.adblock.get('etag')
-              ? <div className='adblockLastETag'><span data-l10n-id='lastCheckETagLabel' /> <span>{this.state.adblock.get('etag')}</span></div>
+              ? <div><span data-l10n-id='lastCheckETagLabel' /> <span>{this.state.adblock.get('etag')}</span></div>
               : null
             }
-            <h3 data-l10n-id='additionalFilterLists' />
-            <div className='adblockSubtext' data-l10n-id='adblockTooManyListsWarning' />
-            <div className='adblockLists'>
+            <h3 className={css(styles.adblockDetailsPage__h3)} data-l10n-id='additionalFilterLists' />
+            <div className={css(styles.adblockSubtext)} data-l10n-id='adblockTooManyListsWarning' />
+            <div className={css(styles.adblockLists)}>
               {
                 this.state.resources.map((resource) =>
                   <AdBlockItem resource={resource}
                     settings={this.state.settings} />)
               }
             </div>
-            <h3 data-l10n-id='customFilters' />
-            <div className='adblockSubtext' data-l10n-id='customFilterDescription' />
+            <h3 className={css(styles.adblockDetailsPage__h3)} data-l10n-id='customFilters' />
+            <div className={css(styles.adblockSubtext)} data-l10n-id='customFilterDescription' />
             <DefaultTextArea
               onChange={this.onChangeCustomFilters}
               value={getSetting(ADBLOCK_CUSTOM_RULES, this.state.settings) || ''}
@@ -111,4 +112,29 @@ class AboutAdBlock extends React.Component {
   }
 }
 
+const styles = StyleSheet.create({
+  adblockDetailsPage: {
+    margin: '20px',
+    minWidth: '704px'
+  },
+  adblockDetailsPage__h2: {
+    marginBottom: '10px'
+  },
+  adblockDetailsPage__h3: {
+    marginTop: '20px',
+    marginBottom: '10px'
+  },
+  adblockDetailsPageContent: {
+    marginBottom: '10px'
+  },
+  adblockLists: {
+    marginTop: '10px'
+  },
+  adblockSubtext: {
+    fontSize: 'smaller',
+    fontWeight: 'bold',
+    marginBottom: '10px'
+  }
+})
+
 module.exports = <AboutAdBlock />

less/about/adblock.less

@@ -1,38 +1,8 @@
-@import "./itemList.less";
-
-.adblockDetailsPage {
-  margin: 20px;
-  min-width: 704px;
-
-  h2 {
-    margin-bottom: 10px;
-  }
-
-  h3 {
-    margin-top: 20px;
-    margin-bottom: 10px;
-  }
-
-  list .listItem {
-    display: flex;
-    -webkit-user-select: text;
-  }
-
-  .adblockDetailsPageContent {
-    margin-bottom: 10px;
-  }
-
-  .adblockLists {
-    margin-top: 10px;
-  }
+@import "./common.less";
 
+// TODO: refactor SwitchControl to remove this
+div[class^="adblockDetailsPage"] {
   .switchControlRightText {
     margin-left: 15px;
   }
-
-  .adblockSubtext {
-    font-size: smaller;
-    font-weight: bold;
-    margin-bottom: 10px;
-  }
 }

test/about/adblockTest.js

@@ -19,6 +19,6 @@ describe('about:adblock', function () {
 
   it('lists adblock count', function * () {
     yield this.app.client
-      .getText('.blockedCountTotal').should.eventually.be.equal('0')
+      .getText('[data-test-id="blockedCountTotal"]').should.eventually.be.equal('0')
   })
 })