diff --git a/desktop-app/app/actions/browser.js b/desktop-app/app/actions/browser.js
index 38e5228f..07253035 100644
--- a/desktop-app/app/actions/browser.js
+++ b/desktop-app/app/actions/browser.js
@@ -18,6 +18,7 @@ import {
} from '../constants/pubsubEvents';
import {getBounds, getDefaultDevToolsWindowSize} from '../reducers/browser';
import {DEVTOOLS_MODES} from '../constants/previewerLayouts';
+import {normalizeZoomLevel} from '../utils/browserUtils';
export const NEW_ADDRESS = 'NEW_ADDRESS';
export const NEW_PAGE_META_FIELD = 'NEW_PAGE_META_FIELD';
@@ -225,12 +226,13 @@ export function onZoomChange(newLevel) {
const {
browser: {zoomLevel},
} = getState();
+ const normalizedZoomLevel = normalizeZoomLevel(newLevel);
- if (newLevel === zoomLevel) {
+ if (normalizedZoomLevel === zoomLevel) {
return;
}
- dispatch(newZoomLevel(newLevel));
+ dispatch(newZoomLevel(normalizedZoomLevel));
};
}
diff --git a/desktop-app/app/components/ZoomInput/index.js b/desktop-app/app/components/ZoomInput/index.js
index 87fff493..bc225e7c 100644
--- a/desktop-app/app/components/ZoomInput/index.js
+++ b/desktop-app/app/components/ZoomInput/index.js
@@ -16,6 +16,7 @@ import styles from './styles.module.css';
import useCommonStyles from '../useCommonStyles';
import './otherStyles.css';
import {Tooltip} from '@material-ui/core';
+import {MIN_ZOOM_LEVEL, MAX_ZOOM_LEVEL} from '../../constants';
function BrowserZoom(props) {
const [showExpanded, setShowExpanded] = useState(false);
@@ -51,7 +52,7 @@ function BrowserZoom(props) {
}
};
- const value = Math.round(props.browser.zoomLevel * 100);
+ const zoomLevel = props.browser.zoomLevel;
return (
-
+
–
- {value}%
+ {Math.round(props.browser.zoomLevel * 100)}%
-
+
+
diff --git a/desktop-app/app/constants/index.js b/desktop-app/app/constants/index.js
new file mode 100644
index 00000000..ccbae3d1
--- /dev/null
+++ b/desktop-app/app/constants/index.js
@@ -0,0 +1,16 @@
+// @flow
+
+/**
+ * Default zoom level for the application.
+ */
+export const DEFAULT_ZOOM_LEVEL = 0.6;
+
+/**
+ * Minimum zoom threshold for the application.
+ */
+export const MIN_ZOOM_LEVEL = 0.2;
+
+/**
+ * Maximum zoom threshold for the application.
+ */
+export const MAX_ZOOM_LEVEL = 2.0;
diff --git a/desktop-app/app/containers/Root.js b/desktop-app/app/containers/Root.js
index dae5c844..6c76efc8 100644
--- a/desktop-app/app/containers/Root.js
+++ b/desktop-app/app/containers/Root.js
@@ -28,6 +28,7 @@ import {toggleBookmarkUrl} from '../actions/bookmarks';
import pubsub from 'pubsub.js';
import {PROXY_AUTH_ERROR} from '../constants/pubsubEvents';
import useCreateTheme from '../components/useCreateTheme';
+import {DEFAULT_ZOOM_LEVEL} from '../constants';
function App() {
const theme = useCreateTheme();
@@ -90,7 +91,7 @@ export default class Root extends Component {
registerShortcut(
{id: 'ZoomReset', title: 'Zoom Reset', accelerators: ['mod+0']},
() => {
- store.dispatch(onZoomChange(0.6));
+ store.dispatch(onZoomChange(DEFAULT_ZOOM_LEVEL));
},
true
);
diff --git a/desktop-app/app/reducers/browser.js b/desktop-app/app/reducers/browser.js
index b4093fa6..04ed7677 100644
--- a/desktop-app/app/reducers/browser.js
+++ b/desktop-app/app/reducers/browser.js
@@ -52,6 +52,8 @@ import {
saveLastOpenedAddress,
} from '../utils/navigatorUtils';
import {updateExistingUrl} from '../services/searchUrlSuggestions';
+import {normalizeZoomLevel} from '../utils/browserUtils';
+import {DEFAULT_ZOOM_LEVEL} from '../constants';
export const FILTER_FIELDS = {
OS: 'OS',
@@ -295,7 +297,8 @@ export default function browser(
? getLastOpenedAddress()
: getHomepage(),
currentPageMeta: {},
- zoomLevel: _getUserPreferences().zoomLevel || 0.6,
+ zoomLevel:
+ normalizeZoomLevel(_getUserPreferences().zoomLevel) || DEFAULT_ZOOM_LEVEL,
theme: _getUserPreferences().theme,
previousZoomLevel: null,
scrollPosition: {x: 0, y: 0},
diff --git a/desktop-app/app/utils/browserUtils.js b/desktop-app/app/utils/browserUtils.js
new file mode 100644
index 00000000..d7d458f1
--- /dev/null
+++ b/desktop-app/app/utils/browserUtils.js
@@ -0,0 +1,19 @@
+// @flow
+
+import {MAX_ZOOM_LEVEL, MIN_ZOOM_LEVEL} from '../constants';
+
+/**
+ * Ensures that the given zoom level stays between MIN_ZOOM_LEVEL and MAX_ZOOM_LEVEL and returns it.
+ * @param zoomLevel The zoom level to be normalized.
+ */
+export function normalizeZoomLevel(zoomLevel: number): number {
+ if (zoomLevel < MIN_ZOOM_LEVEL) {
+ return MIN_ZOOM_LEVEL;
+ }
+
+ if (zoomLevel > MAX_ZOOM_LEVEL) {
+ return MAX_ZOOM_LEVEL;
+ }
+
+ return zoomLevel;
+}