From 046af3f302bf9f19f02ca8bc8cd18fb418a3de31 Mon Sep 17 00:00:00 2001 From: Brian Clifton Date: Thu, 20 Apr 2017 18:26:12 -0700 Subject: [PATCH] Break `Preferences > Advanced` into its own file; move the new zoom setting 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 https://github.com/brave/browser-laptop/issues/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 --- .../constants/toolbarUserInterfaceScale.js | 21 ++++++ .../locales/en-US/preferences.properties | 5 ++ .../components/preferences/advancedTab.js | 68 +++++++++++++++++++ .../components/styles/commonStyles.js | 4 ++ js/about/preferences.js | 22 ++---- js/constants/appConfig.js | 1 + js/constants/settings.js | 1 + js/entry.js | 2 - js/stores/appStore.js | 10 ++- less/about/preferences.less | 5 -- 10 files changed, 114 insertions(+), 25 deletions(-) create mode 100644 app/common/constants/toolbarUserInterfaceScale.js create mode 100644 app/renderer/components/preferences/advancedTab.js diff --git a/app/common/constants/toolbarUserInterfaceScale.js b/app/common/constants/toolbarUserInterfaceScale.js new file mode 100644 index 00000000000..5aff8f352e7 --- /dev/null +++ b/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 +} diff --git a/app/extensions/brave/locales/en-US/preferences.properties b/app/extensions/brave/locales/en-US/preferences.properties index fd8e256dc24..0cb9c19fc0c 100644 --- a/app/extensions/brave/locales/en-US/preferences.properties +++ b/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 diff --git a/app/renderer/components/preferences/advancedTab.js b/app/renderer/components/preferences/advancedTab.js new file mode 100644 index 00000000000..2c8a40b368c --- /dev/null +++ b/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
+
+
+ + + + + + + +
+ + + data-type='float'> + + +
+
+
+
+
+ } +} + +const styles = StyleSheet.create({ + advancedTabMain: { + paddingBottom: '40px' + }, + + moreInfo: { + display: 'flex', + flex: 1, + alignItems: 'flex-end' + } +}) + +module.exports = AdvancedTab diff --git a/app/renderer/components/styles/commonStyles.js b/app/renderer/components/styles/commonStyles.js index e236134ac51..f6b1949beb1 100644 --- a/app/renderer/components/styles/commonStyles.js +++ b/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: { diff --git a/js/about/preferences.js b/js/about/preferences.js index 4f4bb67aab8..39878b1e0e2 100644 --- a/js/about/preferences.js +++ b/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} /> -
+
} } @@ -648,22 +651,7 @@ class SecurityTab extends ImmutableComponent { -
-
- } -} - -class AdvancedTab extends ImmutableComponent { - render () { - return
- - - - - - - -
+
} } diff --git a/js/constants/appConfig.js b/js/constants/appConfig.js index 25653441aa4..4de1a09e249 100644 --- a/js/constants/appConfig.js +++ b/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, diff --git a/js/constants/settings.js b/js/constants/settings.js index b35c541cdcf..5e4c289c8b7 100644 --- a/js/constants/settings.js +++ b/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', diff --git a/js/entry.js b/js/entry.js index 00fb496704a..351e640d8ac 100644 --- a/js/entry.js +++ b/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() diff --git a/js/stores/appStore.js b/js/stores/appStore.js index 63a39189e2d..33b15c16970 100644 --- a/js/stores/appStore.js +++ b/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: } } diff --git a/less/about/preferences.less b/less/about/preferences.less index a333989aa5d..1c6bbbfb61c 100644 --- a/less/about/preferences.less +++ b/less/about/preferences.less @@ -658,8 +658,3 @@ table.sortableTable { #syncQR { margin: 1em; } - -.requiresRestart { - font-style: italic; - margin-bottom: 2em; -}