address comments on PR

desktop-app/app/actions/browser.js

@@ -190,18 +190,16 @@ export function toggleDeviceMuted(deviceId, isMuted) {
   };
 }
 
-export function toggleAllDevicesDesignMode(allDevicesInDesignMode) {
+export function toggleAllDevicesDesignMode() {
   return {
     type: TOGGLE_ALL_DEVICES_DESIGN_MODE,
-    allDevicesInDesignMode,
   };
 }
 
-export function toggleDeviceDesignMode(deviceId, designModeOn) {
+export function toggleDeviceDesignMode(deviceId) {
   return {
     type: TOGGLE_DEVICE_DESIGN_MODE,
     deviceId,
-    designModeOn,
   };
 }
 
@@ -718,20 +716,20 @@ export function onDeviceMutedChange(deviceId, isMuted) {
   };
 }
 
-export function onAllDevicesDesignModeChange() {
+export function onToggleAllDeviceDesignMode() {
   return (dispatch: Dispatch, getState: RootStateType) => {
     const {
       browser: {allDevicesInDesignMode},
     } = getState();
     const next = !allDevicesInDesignMode;
     pubsub.publish(TOGGLE_DEVICE_DESIGN_MODE_STATE, [{designMode: next}]);
-    dispatch(toggleAllDevicesDesignMode(next));
+    dispatch(toggleAllDevicesDesignMode());
   };
 }
 
-export function onDeviceDesignModeChange(deviceId, designModeOn) {
+export function onToggleDeviceDesignMode(deviceId) {
   return (dispatch: Dispatch, getState: RootStateType) => {
-    dispatch(toggleDeviceDesignMode(deviceId, designModeOn));
+    dispatch(toggleDeviceDesignMode(deviceId));
   };
 }
 

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

@@ -32,7 +32,7 @@ const ScrollControls = ({
   flipOrientationAllDevices,
   toggleInspector,
   onAllDevicesMutedChange,
-  onAllDevicesDesignModeChange,
+  onToggleAllDeviceDesignMode,
 }) => {
   const classes = useStyles();
   const theme = useTheme();
@@ -121,7 +121,7 @@ const ScrollControls = ({
                 : 'Enable Design Mode on all devices'
             }
           >
-            <div onClick={onAllDevicesDesignModeChange}>
+            <div onClick={onToggleAllDeviceDesignMode}>
               <DesignModeIcon {...{...iconProps, ...{height: 22, width: 22}}} />
             </div>
           </Tooltip>

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

@@ -30,6 +30,7 @@ import {
   TOGGLE_DEVICE_DESIGN_MODE_STATE,
 } from '../../constants/pubsubEvents';
 import {CAPABILITIES} from '../../constants/devices';
+import {DESIGN_MODE_JS_VALUES} from '../../constants/values';
 
 import styles from './style.module.css';
 import {styles as commonStyles} from '../useCommonStyles';
@@ -139,7 +140,7 @@ class WebView extends Component {
     this.subscriptions.push(
       pubsub.subscribe(
         TOGGLE_DEVICE_DESIGN_MODE_STATE,
-        this.processToggleDesignModeEvent
+        this.changeDesignModeState
       )
     );
 
@@ -202,7 +203,7 @@ class WebView extends Component {
         id: this.props.device.id,
         loading: false,
       });
-      this.processToggleDesignModeEvent({
+      this.changeDesignModeState({
         designMode: !!this.props.device.designMode,
       });
     });
@@ -277,7 +278,7 @@ class WebView extends Component {
     }
 
     if (prevProps.device.designMode !== this.props.device.designMode) {
-      this.processToggleDesignModeEvent({
+      this.changeDesignModeState({
         designMode: !!this.props.device.designMode,
       });
     }
@@ -442,10 +443,12 @@ class WebView extends Component {
     this.getWebContents().setAudioMuted(muted);
   };
 
-  processToggleDesignModeEvent = ({designMode}) => {
+  changeDesignModeState = ({designMode}) => {
     this.webviewRef.current
       .executeJavaScript(
-        `document.designMode = "${designMode ? 'on' : 'off'}";`
+        `document.designMode = "${
+          designMode ? DESIGN_MODE_JS_VALUES.ON : DESIGN_MODE_JS_VALUES.OFF
+        }";`
       )
       .catch(captureOnSentry);
   };
@@ -674,8 +677,8 @@ class WebView extends Component {
   };
 
   _toggleDesignMode = () => {
-    const {id: deviceId, designMode: designModeOn} = this.props.device;
-    this.props.onDeviceDesignModeChange(deviceId, !designModeOn);
+    const {id: deviceId} = this.props.device;
+    this.props.onToggleDeviceDesignMode(deviceId);
   };
 
   _focusDevice = () => {

desktop-app/app/constants/values.js

@@ -7,3 +7,8 @@ export const SSL_ERROR_CODES = {
   FIRST: -200,
   LAST: -299,
 };
+
+export const DESIGN_MODE_JS_VALUES = {
+  ON: 'on',
+  OFF: 'off',
+};

desktop-app/app/reducers/browser.js

@@ -218,6 +218,7 @@ function _getActiveDevices() {
     activeDevices.forEach(device => {
       device.loading = false;
       device.isMuted = false;
+      device.designMode = false;
     });
   }
   return activeDevices;
@@ -529,10 +530,11 @@ export default function browser(
       };
     case TOGGLE_ALL_DEVICES_DESIGN_MODE:
       const nextDevices = state.devices;
-      nextDevices.forEach(d => (d.designMode = action.allDevicesInDesignMode));
+      const nextDesginModeForAll = !state.allDevicesInDesignMode;
+      nextDevices.forEach(d => (d.designMode = nextDesginModeForAll));
       return {
         ...state,
-        allDevicesInDesignMode: action.allDevicesInDesignMode,
+        allDevicesInDesignMode: nextDesginModeForAll,
         devices: nextDevices,
       };
     case TOGGLE_DEVICE_DESIGN_MODE:
@@ -540,9 +542,10 @@ export default function browser(
         x => x.id === action.deviceId
       );
       if (deviceIndex === -1) return {...state};
+      const nextDesignModeForDevice = !state.devices[deviceIndex].designMode;
       state.devices[deviceIndex] = {
         ...state.devices[deviceIndex],
-        designMode: action.designModeOn,
+        designMode: nextDesignModeForDevice,
       };
       return {
         ...state,