From 1a442d58db9d9b5d75aa1878161dacd8c5653261 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Mon, 13 Mar 2017 13:41:36 +0900
Subject: [PATCH] Refactor about:extensions with Aphrodite

Closes #7345

- extensions.less is deleted
- itemList.less is unlinked
- globalStyles.spacing.aboutPageDetailsPageWidth is introduced

Auditors:

Test Plan:
1. Open about:preferences#advanced
2. Disable Torrent Viewer
3. Restart the browser
4. Open about:extensions
5. Make sure Torrent Viewer is disabled (grayed out)
6. Enable Torrent Viewer
7. Make sure Torrent Viewer is enabled
---
 app/renderer/components/styles/global.js |  1 +
 js/about/extensions.js                   | 67 ++++++++++++++++++++----
 less/about/extensions.less               | 35 -------------
 3 files changed, 57 insertions(+), 46 deletions(-)
 delete mode 100644 less/about/extensions.less

diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js
index 1837a29a15..418173994c 100644
--- a/app/renderer/components/styles/global.js
+++ b/app/renderer/components/styles/global.js
@@ -106,6 +106,7 @@ const globalStyles = {
     navbarBraveButtonMarginLeft: '80px',
     navbarLeftMarginDarwin: '76px',
     sideBarWidth: '190px',
+    aboutPageDetailsPageWidth: '704px',
     aboutPageSectionPadding: '24px',
     aboutPageSectionMargin: '10px',
     defaultTabPadding: '0 4px',
diff --git a/js/about/extensions.js b/js/about/extensions.js
index e145f8879d..1a6648482b 100644
--- a/js/about/extensions.js
+++ b/js/about/extensions.js
@@ -9,11 +9,14 @@ const ImmutableComponent = require('../components/immutableComponent')
 const messages = require('../constants/messages')
 const aboutActions = require('./aboutActions')
 
+const {StyleSheet, css} = require('aphrodite/no-important')
+const globalStyles = require('../../app/renderer/components/styles/global')
+const commonStyles = require('../../app/renderer/components/styles/commonStyles')
+
 const ipc = window.chrome.ipcRenderer
 
 // Stylesheets
-require('../../less/about/itemList.less')
-require('../../less/about/extensions.less')
+require('../../less/about/common.less')
 require('../../node_modules/font-awesome/css/font-awesome.css')
 
 const bravifyText = (text) => text.replace(/Google Chrome/g, 'Brave')
@@ -32,24 +35,31 @@ class ExtensionItem extends ImmutableComponent {
       this.props.extension.getIn(['manifest', 'icons', '16']) ||
       null
   }
+
   render () {
+    const className = css(
+      commonStyles.listItem,
+      styles.listItem,
+      !this.props.extension.get('enabled') && styles.isDisabled
+    )
     const icon = this.icon
     const permissions = this.props.extension.getIn(['manifest', 'permissions'])
+
     return <div role='listitem'
       disabled={!this.props.extension.get('enabled')}
-      className='listItem'
+      className={className}
       data-extension-id={this.props.extension.get('id')}
       onContextMenu={this.onContextMenu}
       data-context-menu-disable>
-      <div className='extensionImage'>
-        <img src={`${this.props.extension.get('base_path')}/${icon}`} />
+      <div className={css(styles.extensionImage)}>
+        <img className={css(styles.img)} src={`${this.props.extension.get('base_path')}/${icon}`} />
       </div>
-      <div className='extensionDetails'>
-        <h3 className='extensionTitle'>{bravifyText(this.props.extension.get('name'))}</h3>
-        <span className='extensionVersion'>{this.props.extension.get('version')}</span>
+      <div data-test-id='extensionDetails'>
+        <h3 className={css(styles.extensionTitle)}>{bravifyText(this.props.extension.get('name'))}</h3>
+        <span className={css(styles.extensionVersion)}>{this.props.extension.get('version')}</span>
         {
           !['__MSG_extDescriptionGoogleChrome__', '__MSG_appDesc__'].includes(this.props.extension.get('description'))
-          ? <div className='extensionDescription'>{bravifyText(this.props.extension.get('description'))}</div>
+          ? <div data-test-id='extensionDescription'>{bravifyText(this.props.extension.get('description'))}</div>
           : null
         }
         <div className='extensionPath'><span data-l10n-id='extensionPathLabel' /> <span>{this.props.extension.get('base_path')}</span></div>
@@ -113,13 +123,48 @@ class AboutExtensions extends React.Component {
     })
   }
   render () {
-    return <div className='extensionDetailsPage'>
+    return <div className={css(styles.extensionDetailsPage)}>
       <h2 data-l10n-id='extensions' />
-      <div className='extensionDetailsPageContent'>
+      <div data-test-id='extensionDetailsPageContent'>
         <ExtensionList extensions={this.state.extensions} />
       </div>
     </div>
   }
 }
 
+const styles = StyleSheet.create({
+  extensionDetailsPage: {
+    margin: '20px',
+    minWidth: globalStyles.spacing.aboutPageDetailsPageWidth
+  },
+
+  extensionImage: {
+    paddingRight: '10px'
+  },
+
+  extensionTitle: {
+    display: 'inline-block',
+    marginBottom: '5px'
+  },
+
+  extensionVersion: {
+    color: '#999',
+    fontSize: 'smaller',
+    marginLeft: '20px'
+  },
+
+  listItem: {
+    display: 'flex',
+    WebkitUserSelect: 'text'
+  },
+
+  isDisabled: {
+    opacity: '0.3'
+  },
+
+  img: {
+    width: '48px'
+  }
+})
+
 module.exports = <AboutExtensions />
diff --git a/less/about/extensions.less b/less/about/extensions.less
deleted file mode 100644
index e9b683b666..0000000000
--- a/less/about/extensions.less
+++ /dev/null
@@ -1,35 +0,0 @@
-@import "./itemList.less";
-
-.extensionDetailsPage {
-  margin: 20px;
-  min-width: 704px;
-
-  list .listItem {
-    display: flex;
-    -webkit-user-select: text;
-
-    .extensionTitle {
-      display: inline-block;
-      margin-bottom: 5px;
-    }
-
-    .extensionVersion {
-      color: #999;
-      font-size: smaller;
-      margin-left: 20px;
-    }
-
-    .extensionImage {
-      padding-right: 10px;
-
-      img {
-        width: 48px;
-      }
-
-    }
-
-    &[disabled] {
-      opacity: 0.3;
-    }
-  }
-}