Refactor table.sortableTable

Addresses brave#10263

Auditors:

Test Plan:
1. Open about:preferences#search
2. Make sure the custom width is applied to the table
3. Open about:preferences#sync
4. Make sure the custom width is applied to the table
5. Open about:preferences#extensions
6. Make sure '-webkit-fill-available' is applied to the table

Author: Suguru Hirahara

app/renderer/components/common/sortableTable.js

@@ -6,6 +6,8 @@ const React = require('react')
 const Immutable = require('immutable')
 const tableSort = require('tablesort')
 
+const {StyleSheet, css} = require('aphrodite/no-important')
+
 // Utils
 const cx = require('../../../../js/lib/classSet')
 const eventUtil = require('../../../../js/lib/eventUtil')
@@ -418,16 +420,19 @@ class SortableTable extends React.Component {
       return <tbody>{this.generateTableRows(this.props.rows)}</tbody>
     }
   }
+
   render () {
     if (!this.props.headings || !this.props.rows) {
       return false
     }
+
     return <table
       {...this.getTableAttributes()}
       className={cx({
         sort: !this.sortingDisabled,
-        sortableTable: !this.props.overrideDefaultStyle,
-        [this.props.tableClassNames]: !!this.props.tableClassNames
+        sortableTable: true,
+        [this.props.tableClassNames]: !!this.props.tableClassNames,
+        [css(styles.table, this.props.fillAvailable && styles.table_fillAvailable)]: true
       })}
       ref={(node) => { this.table = node }}>
       <thead>
@@ -469,4 +474,20 @@ class SortableTable extends React.Component {
   }
 }
 
+const styles = StyleSheet.create({
+  // By default the width and margin are not specified.
+  // It can be specified by setting css to tableClassNames.
+  // See 'styles.devices__devicesList' on syncTab.js for example.
+  table: {
+    boxSizing: 'border-box',
+    cursor: 'default',
+    borderSpacing: 0
+  },
+
+  // Setting 'fillAvailable' maximizes the width of the table.
+  table_fillAvailable: {
+    width: '-webkit-fill-available'
+  }
+})
+
 module.exports = SortableTable

app/renderer/components/preferences/extensionsTab.js

@@ -56,7 +56,7 @@ class ExtensionsTab extends ImmutableComponent {
 
     return [
       { // Icon
-        html: <img className={css(styles.table__row__column__icon)} src={this.getIcon(extension)} />
+        html: <img className={css(styles.tableRow__column__icon)} src={this.getIcon(extension)} />
       },
       { // Name
         html: <span data-extension-id={extension.get('id')}
@@ -91,12 +91,12 @@ class ExtensionsTab extends ImmutableComponent {
 
   get columnClassNames () {
     return [
-      css(styles.table__row__column, styles.table__row__column_center),
-      css(styles.table__row__column),
-      css(styles.table__row__column),
-      css(styles.table__row__column),
-      css(styles.table__row__column, styles.table__row__column_center)
-      // css(styles.table__row__column, styles.table__row__column_center)
+      css(styles.tableRow__column, styles.tableRow__column_center),
+      css(styles.tableRow__column),
+      css(styles.tableRow__column),
+      css(styles.tableRow__column),
+      css(styles.tableRow__column, styles.tableRow__column_center)
+      // css(styles.tableRow__column, styles.tableRow__column_center)
     ]
   }
 
@@ -107,12 +107,12 @@ class ExtensionsTab extends ImmutableComponent {
     return <section>
       <DefaultSectionTitle data-l10n-id='extensions' />
       <SortableTable
+        fillAvailable
         sortingDisabled
-        tableClassNames={css(styles.table)}
         headings={['icon', 'name', 'description', 'version', 'enabled'] /* 'exclude' */}
         columnClassNames={this.columnClassNames}
         rowClassNames={
-          this.props.extensions.map(entry => css(styles.table__row)).toJS()
+          this.props.extensions.map(entry => css(styles.tableRow)).toJS()
         }
         rows={this.props.extensions.map(entry => this.getRow(entry))} />
       <footer className={css(styles.moreInfo)}>
@@ -129,13 +129,7 @@ class ExtensionsTab extends ImmutableComponent {
 }
 
 const styles = StyleSheet.create({
-  table: {
-    // TODO (Suguru): refactor sortableTable.js to remove !important
-    width: '100% !important',
-    marginBottom: '0 !important'
-  },
-
-  table__row: {
+  tableRow: {
     fontSize: '15px',
     background: '#fff',
 
@@ -151,15 +145,15 @@ const styles = StyleSheet.create({
     }
   },
 
-  table__row__column: {
+  tableRow__column: {
     padding: '0 8px'
   },
 
-  table__row__column_center: {
+  tableRow__column_center: {
     textAlign: 'center'
   },
 
-  table__row__column__icon: {
+  tableRow__column__icon: {
     display: 'flex',
     margin: 'auto',
     width: '32px',

app/renderer/components/preferences/payment/ledgerTable.js

@@ -273,7 +273,7 @@ class LedgerTable extends ImmutableComponent {
         </div>
       </div>
       <SortableTable
-        tableClassNames={css(styles.tableClass)}
+        fillAvailable
         headings={['', 'publisher', 'include', 'views', 'timeSpent', 'percentage', 'actions']}
         defaultHeading='percentage'
         defaultHeadingSortOrder='desc'
@@ -339,13 +339,6 @@ const styles = StyleSheet.create({
     }
   },
 
-  tableClass: {
-    width: '100%',
-    borderCollapse: 'collapse',
-    border: 'none',
-    margin: '0 auto'
-  },
-
   tableTh: {
     color: paymentStylesVariables.tableHeader.fontColor,
     fontSize: '14px',

app/renderer/components/preferences/syncTab.js

@@ -159,8 +159,8 @@ class SyncTab extends ImmutableComponent {
         defaultHeading='syncDeviceLastActive'
         defaultHeadingSortOrder='desc'
         rows={this.devicesTableRows}
-        customCellClasses={css(styles.devices__devicesListCell)}
         tableClassNames={css(styles.devices__devicesList)}
+        customCellClasses={css(styles.devices__devicesListCell)}
       />
     </section>
   }
@@ -590,10 +590,8 @@ const styles = StyleSheet.create({
   },
 
   devices__devicesList: {
-    // TODO: refactor sortableTable to remove !important
-    marginBottom: `${globalStyles.spacing.dialogInsideMargin} !important`,
-    boxSizing: 'border-box',
-    width: '600px !important'
+    marginBottom: globalStyles.spacing.dialogInsideMargin,
+    width: '600px'
   },
   devices__devicesListCell: {
     padding: '4px 8px'

js/about/preferences.js

@@ -7,7 +7,8 @@ const React = require('react')
 const ImmutableComponent = require('../../app/renderer/components/immutableComponent')
 const Immutable = require('immutable')
 const UrlUtil = require('../lib/urlutil')
-const {css} = require('aphrodite/no-important')
+const {StyleSheet, css} = require('aphrodite/no-important')
+const globalStyles = require('../../app/renderer/components/styles/global')
 const commonStyles = require('../../app/renderer/components/styles/commonStyles')
 
 // Components
@@ -323,8 +324,11 @@ class SearchTab extends ImmutableComponent {
       <DefaultSectionTitle data-test-id='searchSettings' data-l10n-id='searchSettings' />
       <SortableTable headings={['default', 'searchEngine', 'engineGoKey']} rows={this.searchProviders}
         defaultHeading='searchEngine'
-        addHoverClass onClick={this.hoverCallback.bind(this)}
-        columnClassNames={['default', 'searchEngine', 'engineGoKey']} />
+        addHoverClass
+        onClick={this.hoverCallback.bind(this)}
+        tableClassNames={css(styles.sortableTable_searchTab)}
+        columnClassNames={['default', 'searchEngine', 'engineGoKey']}
+      />
       <DefaultSectionTitle data-l10n-id='locationBarSettings' />
       <SettingsList>
         <SettingCheckbox dataL10nId='showOpenedTabMatches' prefKey={settings.OPENED_TAB_SUGGESTIONS} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
@@ -941,6 +945,13 @@ class AboutPreferences extends React.Component {
   }
 }
 
+const styles = StyleSheet.create({
+  sortableTable_searchTab: {
+    width: '704px',
+    marginBottom: globalStyles.spacing.settingsListContainerMargin // See syncTab.js for use cases
+  }
+})
+
 module.exports = {
   AboutPreferences: <AboutPreferences />
 }

less/about/preferences.less

@@ -247,8 +247,6 @@ input[type="checkbox"][disabled] {
 }
 
 table.sortableTable {
-  width: 704px;
-
   tbody td:first-of-type {
     text-align: center;
     color: @braveOrange;

less/sortableTable.less

@@ -15,11 +15,6 @@ table.sort {
 }
 
 table.sortableTable {
-  width: 100%;
-  margin-bottom: 40px;
-  cursor: default;
-  border-spacing: 0;
-
   tr {
     height: 1.7em;
     padding: 5px 20px;