Add default zoom setting

Audiotrs: @aekeus

Fix #1401

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

@@ -43,8 +43,9 @@ bookmarkToolbarSettings=Bookmarks Toolbar settings:
 bookmarkToolbar=Show Bookmarks Toolbar
 bookmarkToolbarShowFavicon=Show favicon for items in Bookmarks Toolbar
 bookmarkToolbarShowOnlyFavicon=Show only favicon for items in Bookmarks Toolbar
-renderingOptions=Rendering options:
+contentRenderingOptions=Content rendering options:
 useHardwareAcceleration=Use hardware acceleration when available (requires browser restart)
+defaultZoomLevel=Default zoom level
 
 en-US=English (U.S.)
 nl-NL=Dutch (Netherlands)

js/about/preferences.js

@@ -7,6 +7,8 @@ const React = require('react')
 const ImmutableComponent = require('../components/immutableComponent')
 const Immutable = require('immutable')
 const cx = require('../lib/classSet.js')
+const { getZoomValuePercentage } = require('../lib/zoom')
+const config = require('../constants/config')
 const appConfig = require('../constants/appConfig')
 const preferenceTabs = require('../constants/preferenceTabs')
 const messages = require('../constants/messages')
@@ -47,6 +49,8 @@ const changeSetting = (cb, key, e) => {
     let value = e.target.value
     if (e.target.dataset && e.target.dataset.type === 'number') {
       value = parseInt(value, 10)
+    } else if (e.target.dataset && e.target.dataset.type === 'float') {
+      value = parseFloat(value)
     }
     if (e.target.type === 'number') {
       value = value.replace(/\D/g, '')
@@ -336,8 +340,20 @@ class SecurityTab extends ImmutableComponent {
 
 class AdvancedTab extends ImmutableComponent {
   render () {
+    const defaultZoomSetting = getSetting(settings.DEFAULT_ZOOM_LEVEL, this.props.settings)
     return <div>
-      <SettingsList dataL10nId='renderingOptions'>
+      <SettingsList dataL10nId='contentRenderingOptions'>
+        <SettingItem dataL10nId='defaultZoomLevel'>
+          <select
+            value={defaultZoomSetting === undefined ? config.zoom.defaultValue : defaultZoomSetting}
+            data-type='float'
+            onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.DEFAULT_ZOOM_LEVEL)}>
+            {
+              config.zoom.zoomLevels.map((x) =>
+                <option value={x} key={x}>{getZoomValuePercentage(x) + '%'}</option>)
+            }
+          </select>
+        </SettingItem>
         <SettingCheckbox dataL10nId='useHardwareAcceleration' prefKey={settings.HARDWARE_ACCELERATION_ENABLED} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
       </SettingsList>
     </div>

js/components/contextMenu.js

@@ -8,6 +8,8 @@ const ImmutableComponent = require('./immutableComponent')
 const windowActions = require('../actions/windowActions')
 const config = require('../constants/config')
 const cx = require('../lib/classSet.js')
+const getSetting = require('../settings').getSetting
+const settings = require('../constants/settings')
 const { getZoomValuePercentage } = require('../lib/zoom.js')
 
 class ContextMenuItem extends ImmutableComponent {
@@ -86,7 +88,14 @@ class ContextMenuItem extends ImmutableComponent {
     }
     if (item.get('labelDataBind') === 'zoomLevel') {
       // The original zoomLevel is 0 and each increment above or below represents zooming 20% larger or smaller
-      const zoomLevel = this.props.activeSiteSettings && this.props.activeSiteSettings.get('zoomLevel') || config.zoom.defaultValue
+      const activeSiteSettings = this.props.activeSiteSettings
+      let zoomLevel
+      if (!activeSiteSettings || activeSiteSettings.get('zoomLevel') === undefined) {
+        const settingDefaultZoom = getSetting(settings.DEFAULT_ZOOM_LEVEL)
+        zoomLevel = settingDefaultZoom === undefined ? config.zoom.defaultValue : settingDefaultZoom
+      } else {
+        zoomLevel = activeSiteSettings.get('zoomLevel')
+      }
       return `${getZoomValuePercentage(zoomLevel)}%`
     }
     return ''

js/components/frame.js

@@ -172,15 +172,16 @@ class Frame extends ImmutableComponent {
 
   get zoomLevel () {
     const activeSiteSettings = this.props.frameSiteSettings
-    if (!activeSiteSettings || !activeSiteSettings.get('zoomLevel')) {
-      return config.zoom.defaultValue
+    if (!activeSiteSettings || activeSiteSettings.get('zoomLevel') === undefined) {
+      const settingDefaultZoom = getSetting(settings.DEFAULT_ZOOM_LEVEL)
+      return settingDefaultZoom === undefined ? config.zoom.defaultValue : settingDefaultZoom
     }
     return activeSiteSettings.get('zoomLevel')
   }
 
   zoom (zoomIn) {
     const newZoomLevel =
-      zoomIn === undefined ? 0 : getNextZoomLevel(this.zoomLevel, zoomIn)
+      zoomIn === undefined ? undefined : getNextZoomLevel(this.zoomLevel, zoomIn)
     appActions.changeSiteSetting(this.origin, 'zoomLevel', newZoomLevel,
                                  this.props.frame.get('isPrivate'))
   }

js/constants/settings.js

@@ -35,7 +35,8 @@ const settings = {
   SHOW_BOOKMARKS_TOOLBAR_ONLY_FAVICON: 'bookmarks.toolbar.showOnlyFavicon',
   LANGUAGE: 'general.language',
   // Advanced settings
-  HARDWARE_ACCELERATION_ENABLED: 'advanced.hardware-acceleration-enabled'
+  HARDWARE_ACCELERATION_ENABLED: 'advanced.hardware-acceleration-enabled',
+  DEFAULT_ZOOM_LEVEL: 'advanced.default-zoom-level'
 }
 
 module.exports = settings