Break Preferences > Advanced into its own file; move the new zoom s…

…etting there

Auditors: @cezaraugusto, @NejcZdovc

Test Plan:
1. Open preferences and visit the `Advanced` tab
2. Settings should work as expected; there should be no console errors

Add configurable UI scaling. This doesn't affect page size; scaling is only for the browser UI elements

Fixes #1937

Auditors: @bradleyrichter, @alexwykoff, @NejcZdovc

Test Plan:
1. Open preferences and visit the `Advanced` tab
2. Change the new `Toolbar and UI elements scale` setting.
  - verify default is `Normal`
  - choose a smaller size and verify URL bar, nav buttons, etc get smaller
  - choose a larger size and verify URL bar, nav buttons, etc get larger
  - verify size of page content does not change

This commit incorporates feedback from PR
- organize imports
- translations for the new drop down values
- moved "requires restart" style to commonStyles
- switch advancedTab to use aphrodite/no-important
- updated zoom values per convo w/ @bradleyrichter

app/common/constants/toolbarUserInterfaceScale.js

@@ -0,0 +1,21 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const scaleSize = {
+  SMALLER: 'smaller',
+  NORMAL: 'normal',
+  LARGER: 'larger',
+  SUPERSIZE: 'supersize'
+}
+
+let zoomLevel = {}
+zoomLevel[scaleSize.SMALLER] = -0.5
+zoomLevel[scaleSize.NORMAL] = 0.0
+zoomLevel[scaleSize.LARGER] = 1.0
+zoomLevel[scaleSize.SUPERSIZE] = 3.0
+
+module.exports = {
+  scaleSize,
+  zoomLevel
+}

app/extensions/brave/locales/en-US/preferences.properties

@@ -259,6 +259,7 @@ enableVimium=Enable Vimium
 useHardwareAcceleration=Use hardware acceleration when available *
 useSmoothScroll=Enable smooth scrolling *
 defaultZoomLevel=Default zoom level
+toolbarUserInterfaceScale=Toolbar and UI elements scale
 en-US=English (U.S.)
 nl-NL=Dutch (Netherlands)
 pt-BR=Portuguese (Brazil)
@@ -358,3 +359,7 @@ dashboardShowImages=Show images
 requiresRestart=* Requires browser restart
 showAll=Show all
 hideLower=Hide lower
+scaleSizeSmaller=Smaller
+scaleSizeNormal=Normal
+scaleSizeLarger=Larger
+scaleSizeSuper=Supersize

app/renderer/components/preferences/advancedTab.js

@@ -0,0 +1,68 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const React = require('react')
+const ImmutableComponent = require('../immutableComponent')
+const {StyleSheet, css} = require('aphrodite/no-important')
+const commonStyles = require('../styles/commonStyles')
+
+// Actions
+const {getSetting} = require('../../../../js/settings')
+
+// Components
+const {SettingsList, SettingItem, SettingCheckbox} = require('../settings')
+const {SettingDropdown} = require('../dropdown')
+
+// Constants
+const settings = require('../../../../js/constants/settings')
+const {scaleSize} = require('../../../common/constants/toolbarUserInterfaceScale')
+
+// Utils
+const {changeSetting} = require('../../lib/settingsUtil')
+
+class AdvancedTab extends ImmutableComponent {
+  render () {
+    return <div>
+      <main className={css(styles.advancedTabMain)}>
+        <div className='sectionTitle' data-l10n-id='contentSettings' />
+        <SettingsList>
+          <SettingCheckbox dataL10nId='useHardwareAcceleration' prefKey={settings.HARDWARE_ACCELERATION_ENABLED} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
+          <SettingCheckbox dataL10nId='useSmoothScroll' prefKey={settings.SMOOTH_SCROLL_ENABLED} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
+          <SettingCheckbox dataL10nId='sendCrashReports' prefKey={settings.SEND_CRASH_REPORTS} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
+          <SettingCheckbox dataL10nId='sendUsageStatistics' prefKey={settings.SEND_USAGE_STATISTICS} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
+        </SettingsList>
+
+        <div className='sectionTitle' data-l10n-id='toolbarUserInterfaceScale' />
+        <SettingItem>
+          <SettingDropdown
+            value={getSetting(settings.TOOLBAR_UI_SCALE, this.props.settings)}
+            onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.TOOLBAR_UI_SCALE)}>
+            data-type='float'>
+            <option data-l10n-id='scaleSizeSmaller' value={scaleSize.SMALLER} />
+            <option data-l10n-id='scaleSizeNormal' value={scaleSize.NORMAL} />
+            <option data-l10n-id='scaleSizeLarger' value={scaleSize.LARGER} />
+            <option data-l10n-id='scaleSizeSuper' value={scaleSize.SUPERSIZE} />
+          </SettingDropdown>
+        </SettingItem>
+      </main>
+      <footer className={css(styles.moreInfo)}>
+        <div data-l10n-id='requiresRestart' className={css(commonStyles.requiresRestart)} />
+      </footer>
+    </div>
+  }
+}
+
+const styles = StyleSheet.create({
+  advancedTabMain: {
+    paddingBottom: '40px'
+  },
+
+  moreInfo: {
+    display: 'flex',
+    flex: 1,
+    alignItems: 'flex-end'
+  }
+})
+
+module.exports = AdvancedTab

app/renderer/components/styles/commonStyles.js

@@ -156,6 +156,10 @@ const styles = StyleSheet.create({
   noPaddingRight: {
     paddingRight: 0
   },
+  requiresRestart: {
+    fontStyle: 'italic',
+    marginBottom: '2em'
+  },
 
   // User select
   userSelect: {

js/about/preferences.js

@@ -7,6 +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 commonStyles = require('../../app/renderer/components/styles/commonStyles')
 
 // Components
 const PreferenceNavigation = require('../../app/renderer/components/preferences/preferenceNavigation')
@@ -21,6 +23,7 @@ const PaymentsTab = require('../../app/renderer/components/preferences/paymentsT
 const SyncTab = require('../../app/renderer/components/preferences/syncTab')
 const PluginsTab = require('../../app/renderer/components/preferences/pluginsTab')
 const ExtensionsTab = require('../../app/renderer/components/preferences/extensionsTab')
+const AdvancedTab = require('../../app/renderer/components/preferences/advancedTab')
 const {populateDefaultExtensions} = require('../../app/renderer/lib/extensionsUtil')
 const {getZoomValuePercentage} = require('../lib/zoom')
 
@@ -240,7 +243,7 @@ class GeneralTab extends ImmutableComponent {
             settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
         </SettingItem>
       </SettingsList>
-      <div data-l10n-id='requiresRestart' className='requiresRestart' />
+      <div data-l10n-id='requiresRestart' className={css(commonStyles.requiresRestart)} />
     </SettingsList>
   }
 }
@@ -648,22 +651,7 @@ class SecurityTab extends ImmutableComponent {
         <SettingCheckbox dataL10nId='doNotTrack' prefKey={settings.DO_NOT_TRACK} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
       </SettingsList>
       <SitePermissionsPage siteSettings={this.props.siteSettings} names={permissionNames} />
-      <div data-l10n-id='requiresRestart' className='requiresRestart' />
-    </div>
-  }
-}
-
-class AdvancedTab extends ImmutableComponent {
-  render () {
-    return <div>
-      <DefaultSectionTitle data-l10n-id='contentSettings' />
-      <SettingsList>
-        <SettingCheckbox dataL10nId='useHardwareAcceleration' prefKey={settings.HARDWARE_ACCELERATION_ENABLED} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
-        <SettingCheckbox dataL10nId='useSmoothScroll' prefKey={settings.SMOOTH_SCROLL_ENABLED} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
-        <SettingCheckbox dataL10nId='sendCrashReports' prefKey={settings.SEND_CRASH_REPORTS} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
-        <SettingCheckbox dataL10nId='sendUsageStatistics' prefKey={settings.SEND_USAGE_STATISTICS} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
-      </SettingsList>
-      <div data-l10n-id='requiresRestart' className='requiresRestart' />
+      <div data-l10n-id='requiresRestart' className={css(commonStyles.requiresRestart)} />
     </div>
   }
 }

js/constants/appConfig.js

@@ -188,6 +188,7 @@ module.exports = {
     'advanced.minimum-visits': 1,
     'advanced.auto-suggest-sites': true,
     'advanced.hide-lower-sites': true,
+    'advanced.toolbar-ui-scale': 'normal',
     'shutdown.clear-history': false,
     'shutdown.clear-downloads': false,
     'shutdown.clear-cache': false,

js/constants/settings.js

@@ -69,6 +69,7 @@ const settings = {
   MINIMUM_VISIT_TIME: 'advanced.minimum-visit-time',
   MINIMUM_VISITS: 'advanced.minimum-visits',
   AUTO_SUGGEST_SITES: 'advanced.auto-suggest-sites',
+  TOOLBAR_UI_SCALE: 'advanced.toolbar-ui-scale',
   // Sync settings
   SYNC_ENABLED: 'sync.enabled',
   SYNC_DEVICE_NAME: 'sync.device-name',

js/entry.js

@@ -34,9 +34,7 @@ const patch = require('immutablepatch')
 const l10n = require('./l10n')
 const currentWindow = require('../app/renderer/currentWindow')
 
-// don't allow scaling or zooming of the ui
 webFrame.setPageScaleLimits(1, 1)
-webFrame.setZoomLevelLimits(0, 0)
 
 l10n.init()
 

js/stores/appStore.js

@@ -35,6 +35,7 @@ const basicAuth = require('../../app/browser/basicAuth')
 const webtorrent = require('../../app/browser/webtorrent')
 const assert = require('assert')
 const profiles = require('../../app/browser/profiles')
+const {zoomLevel} = require('../../app/common/constants/toolbarUserInterfaceScale')
 
 // state helpers
 const basicAuthState = require('../../app/common/state/basicAuthState')
@@ -191,6 +192,7 @@ const createWindow = (action) => {
 
   const homepageSetting = getSetting(settings.HOMEPAGE)
   const startupSetting = getSetting(settings.STARTUP_MODE)
+  const toolbarUserInterfaceScale = getSetting(settings.TOOLBAR_UI_SCALE)
 
   setImmediate(() => {
     let mainWindow = new BrowserWindow(Object.assign(windowProps, browserOpts, {disposition: frameOpts.disposition}))
@@ -221,7 +223,7 @@ const createWindow = (action) => {
 
     mainWindow.webContents.on('did-finish-load', (e) => {
       lastEmittedState = appState
-      mainWindow.webContents.setZoomLevel(0.0)
+      mainWindow.webContents.setZoomLevel(zoomLevel[toolbarUserInterfaceScale] || 0.0)
       e.sender.send(messages.INITIALIZE_WINDOW,
         {
           disposition: frameOpts.disposition,
@@ -346,6 +348,12 @@ function handleChangeSettingAction (settingKey, settingValue) {
     case settings.DEFAULT_ZOOM_LEVEL:
       filtering.setDefaultZoomLevel(settingValue)
       break
+    case settings.TOOLBAR_UI_SCALE: {
+      const newZoomLevel = zoomLevel[settingValue] || 0
+      BrowserWindow.getAllWindows().forEach(function (wnd) {
+        wnd.webContents.setZoomLevel(newZoomLevel)
+      })
+    } break
     default:
   }
 }

less/about/preferences.less

@@ -658,8 +658,3 @@ table.sortableTable {
 #syncQR {
   margin: 1em;
 }
-
-.requiresRestart {
-  font-style: italic;
-  margin-bottom: 2em;
-}