Style cleanup per recommendation from @luixxiul. Also updated Shields…

… panel to use new styles - Updated selectors for testing shields - added padding to dropdown to cover size of caret - Fixed broken navigationBar test Auditors: @luixxiul
brave · Jan 25, 2017 · 4fb5d5a · 4fb5d5a
1 parent fc93bd6
commit 4fb5d5a
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 35 deletions.
diff --git a/app/renderer/components/dropdown.js b/app/renderer/components/dropdown.js
@@ -46,7 +46,8 @@ const styles = StyleSheet.create({
     boxShadow: `-1px 1px 3px -1px ${globalStyles.color.mediumGray}`,
     height: '2rem',
     outline: 'none',
-    padding: selectPadding,
+    // right padding is larger, to account for the down arrow SVG
+    padding: `${selectPadding} 1.5em ${selectPadding} ${selectPadding}`,
     '-webkit-appearance': 'none',
     width: 'auto'
   },

diff --git a/js/about/preferences.js b/js/about/preferences.js
@@ -832,15 +832,14 @@ class TabsTab extends ImmutableComponent {
           </SettingDropdown>
         </SettingItem>
         <SettingItem dataL10nId='tabCloseAction'>
-          <select
-            className='form-control'
+          <FormDropdown
             value={getSetting(settings.TAB_CLOSE_ACTION, this.props.settings)}
             onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.TAB_CLOSE_ACTION)}>
             <option data-l10n-id='tabCloseActionLastActive' value={tabCloseAction.LAST_ACTIVE} />
             <option data-l10n-id='tabCloseActionNext' value={tabCloseAction.NEXT} />
             <option data-l10n-id='tabCloseActionFirst' value={tabCloseAction.FIRST} />
             <option data-l10n-id='tabCloseActionParent' value={tabCloseAction.PARENT} />
-          </select>
+          </FormDropdown>
         </SettingItem>
         <SettingCheckbox dataL10nId='switchToNewTabs' prefKey={settings.SWITCH_TO_NEW_TABS} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
         <SettingCheckbox dataL10nId='paintTabs' prefKey={settings.PAINT_TABS} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />

diff --git a/js/components/braveryPanel.js b/js/components/braveryPanel.js
@@ -9,6 +9,7 @@ const ImmutableComponent = require('./immutableComponent')
 const config = require('../constants/config')
 const Dialog = require('./dialog')
 const SwitchControl = require('./switchControl')
+const {FormDropdown} = require('../../app/renderer/components/dropdown')
 const windowActions = require('../actions/windowActions')
 const appActions = require('../actions/appActions')
 const urlParse = require('../../app/common/urlParse')
@@ -287,11 +288,11 @@ class BraveryPanel extends ImmutableComponent {
                     braverySelectTitle: true,
                     disabled: !shieldsUp
                   })} data-l10n-id='adControl' />
-                  <select className='adsBlockedControl form-control' value={adControl} onChange={this.onToggleAdControl} disabled={!shieldsUp}>
+                  <FormDropdown data-test-id='adsBlockedControl' value={adControl} onChange={this.onToggleAdControl} disabled={!shieldsUp}>
                     <option data-l10n-id='showBraveAds' value='showBraveAds' />
                     <option data-l10n-id='blockAds' value='blockAds' />
                     <option data-l10n-id='allowAdsAndTracking' value='allowAdsAndTracking' />
-                  </select>
+                  </FormDropdown>
                   <SwitchControl onClick={this.onToggleHTTPSE} rightl10nId='httpsEverywhere' checkedOn={httpseEnabled} disabled={!shieldsUp} />
                   <SwitchControl onClick={this.onToggleNoScript} rightl10nId='noScript' checkedOn={noScriptEnabled} disabled={!shieldsUp} className='noScriptSwitch' />
                 </div>
@@ -300,10 +301,10 @@ class BraveryPanel extends ImmutableComponent {
                     braverySelectTitle: true,
                     disabled: !shieldsUp
                   })} data-l10n-id='cookieControl' />
-                  <select className='form-control' value={this.props.braverySettings.cookieControl} onChange={this.onToggleCookieControl} disabled={!shieldsUp}>
+                  <FormDropdown value={this.props.braverySettings.cookieControl} onChange={this.onToggleCookieControl} disabled={!shieldsUp}>
                     <option data-l10n-id='block3rdPartyCookie' value='block3rdPartyCookie' />
                     <option data-l10n-id='allowAllCookies' value='allowAllCookies' />
-                  </select>
+                  </FormDropdown>
                   <SwitchControl onClick={this.onToggleFp} rightl10nId='fingerprintingProtection' checkedOn={fpEnabled} disabled={!shieldsUp} onInfoClick={this.onInfoClick} infoTitle={config.fingerprintingInfoUrl} className='fingerprintingProtectionSwitch' />
                   <SwitchControl onClick={this.onToggleSafeBrowsing} rightl10nId='safeBrowsing' checkedOn={this.props.braverySettings.safeBrowsing} disabled={!shieldsUp} />
                 </div>

diff --git a/less/about/preferences.less b/less/about/preferences.less
@@ -367,13 +367,6 @@ span.settingsListCopy {
   }
 }
 
-input:not([type="checkbox"]), select {
-  &.form-control {
-    box-sizing: border-box;
-    width: 280px;
-  }
-}
-
 input[type="checkbox"][disabled] {
   opacity: 0.8;
   pointer-events: none;
@@ -742,11 +735,6 @@ table.sortableTable {
                   h3 {
                     margin-bottom: @margin-bottom-header;
                   }
-
-                  .firstRecoveryKey,
-                  .secondRecoveryKey {
-                    margin-bottom: 20px;
-                  }
                 }
               }
             }

diff --git a/less/forms.less b/less/forms.less
@@ -5,20 +5,6 @@ select {
   box-sizing: border-box;
 }
 
-.form-control {
-  display: block;
-  background: white;
-  border: solid 1px @lightGray;
-  border-radius: @borderRadius;
-  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-  box-sizing: border-box;
-  color: @darkGray;
-  font-size: 14.5px;
-  height: 2.25em;
-  padding: 0.4em;
-  width: 100%;
-}
-
 .flyoutDialog {
   background-color: @toolbarBackground;
   border-radius: @borderRadius;

diff --git a/test/lib/selectors.js b/test/lib/selectors.js
@@ -37,7 +37,7 @@ module.exports = {
   braveMenu: '.braveMenu:not(.braveShieldsDisabled)',
   braveMenuDisabled: '.braveMenu.braveShieldsDisabled',
   adsBlockedStat: '.braveryStat.adsBlockedStat',
-  adsBlockedControl: '.adsBlockedControl',
+  adsBlockedControl: '[data-test-id="adsBlockedControl"]',
   showAdsOption: '[data-l10n-id="allowAdsAndTracking"]',
   blockAdsOption: '[data-l10n-id="blockAds"]',
   braveryPanel: '.braveryPanel',