bug(desktop-app): fix zoom going negative

fixes issue were zoom went negative when zoomed out using scrolling in main window.

Closes: #481

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));
   };
 }
 

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 (
     <div
@@ -69,7 +70,11 @@ function BrowserZoom(props) {
         })}
       >
         <ToggleButtonGroup value={[]} onChange={_zoomChange}>
-          <ToggleButton value="zoomOut" disabled={value === 20} disableRipple>
+          <ToggleButton
+            value="zoomOut"
+            disabled={zoomLevel === MIN_ZOOM_LEVEL}
+            disableRipple
+          >
             &ndash;
           </ToggleButton>
           <Typography
@@ -79,9 +84,13 @@ function BrowserZoom(props) {
               'MuiToggleButton-root'
             )}
           >
-            {value}%
+            {Math.round(props.browser.zoomLevel * 100)}%
           </Typography>
-          <ToggleButton value="zoomIn" disabled={value === 200} disableRipple>
+          <ToggleButton
+            value="zoomIn"
+            disabled={zoomLevel === MAX_ZOOM_LEVEL}
+            disableRipple
+          >
             +
           </ToggleButton>
         </ToggleButtonGroup>

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;

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
     );

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},

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;
+}