Zoom like in chrome

desktop-app/app/components/DeviceManager/index.js

@@ -86,14 +86,14 @@ export default function DeviceManager(props) {
       <Dialog fullScreen open={open} onClose={closeDialog}>
         <AppBar className={classes.appBar} color="secondary">
           <Toolbar>
-            <IconButton edge="start" onClick={closeDialog} aria-label="close">
+            {/*<IconButton edge="start" onClick={closeDialog} aria-label="close">
               <CloseIcon />
-            </IconButton>
+             </IconButton>*/}
             <Typography variant="h6" className={classes.title}>
               Manage Devices
             </Typography>
             <Button color="inherit" onClick={closeDialog}>
-              save
+              close
             </Button>
           </Toolbar>
         </AppBar>

desktop-app/app/components/Header/index.js

@@ -24,9 +24,6 @@ const Header = function() {
         <Grid item>
           <ScrollControlsContainer />
         </Grid>
-        <Grid item>
-          <ZoomContainer />
-        </Grid>
       </Grid>
       <HttpAuthDialog />
       <ToastContainer

desktop-app/app/components/ScrollControls/index.js

@@ -11,6 +11,7 @@ import InspectElementIcon from '../icons/InspectElement';
 import styles from './styles.module.css';
 import commonStyles from '../common.styles.css';
 import {iconsColor} from '../../constants/colors';
+import ZoomContainer from '../../containers/ZoomContainer';
 
 class ScrollControls extends Component {
   render() {
@@ -47,6 +48,7 @@ class ScrollControls extends Component {
               <InspectElementIcon {...iconProps} />
             </div>
           </Grid>
+          <ZoomContainer />
         </Grid>
       </div>
     );

desktop-app/app/components/ZoomInput/index.js

@@ -1,12 +1,20 @@
 // @flow
-import React, {Component} from 'react';
+import React, {Component, useState, useRef, useEffect} from 'react';
+import cx from 'classnames';
 import Slider from '@material-ui/core/Slider';
 import ZoomInIcon from '@material-ui/icons/ZoomIn';
 import ZoomOutIcon from '@material-ui/icons/ZoomOut';
+import PlusIcon from '@material-ui/icons/Add';
+import MinusIcon from '@material-ui/icons/Minimize';
 import Grid from '@material-ui/core/Grid';
+import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
+import ToggleButton from '@material-ui/lab/ToggleButton';
+import ZoomIcon from '../icons/Zoom';
 
 import styles from './styles.module.css';
+import commonStyles from '../common.styles.css';
 import './otherStyles.css';
+import {iconsColor} from '../../constants/colors';
 
 const marks = [
   {
@@ -28,27 +36,85 @@ const marks = [
 ];
 
 export default function BrowserZoom(props) {
+  const [showExpanded, setShowExpanded] = useState(false);
+  const zoomRef = useRef();
+  const handleClickOutside = event => {
+    if (!showExpanded) {
+      return;
+    }
+    if (zoomRef.current && !zoomRef.current.contains(event.target)) {
+      setShowExpanded(false);
+    }
+  };
+  useEffect(() => {
+    // Bind the event listener
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      // Unbind the event listener on clean up
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  });
+
+  const _zoomChange = (_, [action]) => {
+    switch (action) {
+      case 'zoomIn':
+        return props.onZoomChange(props.browser.zoomLevel + 0.1);
+      case 'zoomOut':
+        return props.onZoomChange(props.browser.zoomLevel - 0.1);
+    }
+  };
+
+  const value = Math.round(props.browser.zoomLevel * 100);
+
   return (
-    <div className={styles.zoomSlider}>
-      <Grid container spacing={1}>
+    <div
+      ref={zoomRef}
+      className={cx(
+        commonStyles.icons,
+        commonStyles.enabled,
+        styles.zoomSlider,
+        'MuiGrid-item',
+        'MuiGrid-root'
+      )}
+    >
+      <div onClick={() => setShowExpanded(!showExpanded)}>
+        <ZoomIcon width={25} color={iconsColor} />
+      </div>
+
+      {/*<Grid container spacing={1}>
         <Grid item>
           <ZoomOutIcon />
         </Grid>
         <Grid item xs>
           <Slider
-            value={Math.round(props.browser.zoomLevel * 100)}
+            value={value}
             valueLabelDisplay="auto"
             min={10}
             max={100}
-            onChange={(_, value) =>
-              props.onZoomChange && props.onZoomChange(value / 100)
-            }
+            onChange={(_, value) => props.onZoomChange(value / 100)}
           />
         </Grid>
         <Grid item>
           <ZoomInIcon />
         </Grid>
-      </Grid>
+  </Grid>*/}
+      <div
+        className={cx(styles.zoomControls, {
+          [commonStyles.hidden]: !showExpanded,
+        })}
+      >
+        <ToggleButtonGroup value={[]} onChange={_zoomChange}>
+          <ToggleButton value="zoomOut" disabled={value === 20} disableRipple>
+            &ndash;
+          </ToggleButton>
+          <ToggleButton value="value" disabled className={styles.zoomValue}>
+            {value}%
+          </ToggleButton>
+          <ToggleButton value="zoomIn" disabled={value === 200} disableRipple>
+            +
+          </ToggleButton>
+        </ToggleButtonGroup>
+      </div>
     </div>
   );
 }

desktop-app/app/components/ZoomInput/styles.module.css

@@ -1,5 +1,14 @@
 .zoomSlider {
-  width: 150px;
+}
+
+.zoomControls {
+  position: absolute;
+  right: 0;
+}
+
+.zoomValue {
+  width: 75px;
+  color: white !important;
 }
 
 .label {

desktop-app/app/components/common.styles.css

@@ -66,3 +66,7 @@
   align-items: center;
   display: flex;
 }
+
+.hidden {
+  display: none;
+}

desktop-app/app/components/icons/Zoom.js

@@ -0,0 +1,24 @@
+import React, {Fragment} from 'react';
+
+export default ({width, height, color, padding, margin}) => (
+  <Fragment>
+    <svg
+      height={height}
+      width={width}
+      fill={color}
+      style={{padding, margin}}
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      version="1.1"
+      x="0px"
+      y="0px"
+      viewBox="0 0 100 100"
+      enable-background="new 0 0 100 100"
+    >
+      <g>
+        <path d="M91.414,88.586L70.815,67.987C76.522,61.614,80,53.207,80,44C80,24.149,63.851,8,44,8S8,24.149,8,44   s16.149,36,36,36c9.207,0,17.614-3.478,23.987-9.185l20.599,20.599C88.977,91.805,89.488,92,90,92s1.023-0.195,1.414-0.586   C92.195,90.633,92.195,89.367,91.414,88.586z M44,76c-17.645,0-32-14.355-32-32s14.355-32,32-32s32,14.355,32,32S61.645,76,44,76z" />
+        <path d="M62,42H46V26c0-1.104-0.896-2-2-2s-2,0.896-2,2v16H26c-1.104,0-2,0.896-2,2s0.896,2,2,2h16v16   c0,1.104,0.896,2,2,2s2-0.896,2-2V46h16c1.104,0,2-0.896,2-2S63.104,42,62,42z" />
+      </g>
+    </svg>
+  </Fragment>
+);

desktop-app/package.json

@@ -230,6 +230,7 @@
     "@fortawesome/fontawesome-free": "^5.5.0",
     "@material-ui/core": "^4.3.2",
     "@material-ui/icons": "^4.2.1",
+    "@material-ui/lab": "^4.0.0-alpha.26",
     "@sentry/electron": "^0.17.3",
     "bluebird": "^3.5.5",
     "classnames": "^2.2.6",

desktop-app/yarn.lock

@@ -1147,6 +1147,17 @@
   dependencies:
     "@babel/runtime" "^7.2.0"
 
+"@material-ui/lab@^4.0.0-alpha.26":
+  version "4.0.0-alpha.26"
+  resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.26.tgz#8db16de1ab46cda5d06afdd97578536989ed3c4e"
+  integrity sha512-23N43d2/DJkQKbJjg3J9DqORgmvxA9ebqpnqrA6JB8zIiDSoSuZmJu1hHUtINgMechxwWGTf73PMy9ihm0AAQA==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@material-ui/utils" "^4.4.0"
+    clsx "^1.0.4"
+    prop-types "^15.7.2"
+    warning "^4.0.3"
+
 "@material-ui/styles@^4.3.0":
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.3.0.tgz#27f11fbf061d8a20ad5703acb0dbb0e69cc00345"
@@ -1197,6 +1208,15 @@
     prop-types "^15.7.2"
     react-is "^16.8.6"
 
+"@material-ui/utils@^4.4.0":
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.4.0.tgz#9275421e2798a067850d201212d46f12725828ad"
+  integrity sha512-UXoQVwArQEQWXxf2FPs0iJGT+MePQpKr0Qh0CPoLc1OdF0GSMTmQczcqCzwZkeHxHAOq/NkIKM1Pb/ih1Avicg==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    prop-types "^15.7.2"
+    react-is "^16.8.6"
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -3667,7 +3687,7 @@ clone@^2.1.1:
   resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
   integrity sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=
 
-clsx@^1.0.2:
+clsx@^1.0.2, clsx@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.0.4.tgz#0c0171f6d5cb2fe83848463c15fcc26b4df8c2ec"
   integrity sha512-1mQ557MIZTrL/140j+JVdRM6e31/OA4vTYxXgqIIZlndyfjHpyawKZia1Im05Vp9BWmImkcNrNtFYQMyFcgJDg==
@@ -13613,6 +13633,13 @@ warning@^4.0.1:
   dependencies:
     loose-envify "^1.0.0"
 
+warning@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
+  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
+  dependencies:
+    loose-envify "^1.0.0"
+
 watch@~0.18.0:
   version "0.18.0"
   resolved "https://registry.npmjs.org/watch/-/watch-0.18.0.tgz#28095476c6df7c90c963138990c0a5423eb4b986"