Responsively-app: Add device emulation params for Mobile devices

[manojVivek]

Add the emulation parameters correctly for the devices with touchscreen capability to support touch events like tap, swipe etc. Right now only mouse events are supported by all devices.

[romanakash]

Apparently webview does not support device emulation https://github.com/electron/electron/issues/5488.

[manojVivek]

@romanakash I guess, it is possible by sending an Emulation command to the chromium debugger.

Can you please check this out - https://github.com/AglaiaWang/electron-quick-start/blob/master/main.js#L51 ?

[romanakash]

I tried that out but there is a currently unresolved issue with electron which sets the parent browser window to touch mode as well. https://github.com/electron/electron/issues/18438
So the whole app will have a round touch cursor instead of just the mobile device. Is this the desired behavior?

[manojVivek]

@romanakash Ah, enabling it for the whole app would make it look terrible. But I have an idea to work around this bug, let me know what do you think about the following:

1. Let's have a button which the user can click to enable/disable the touch events.
2. When the user enables the touch events, we will not immediately invoke the emulation command. We will just set a state variable to capture the action.
3. We will have mouseEnter and mouseLeave listener for the .deviceContainer element and whenever the mouse enters the .deviceContainer we will invoke the emulation command and whenever it leaves we will call the command to disable the touch events.

So this way, we will achieve what the user wants.
We can add a button like in the screenshot:

@romanakash Please let me know your thoughts.

[romanakash]

Ok, that sounds good. I'll work on it

[manojVivek]

Great, @romanakash you can use this svg for the icon: https://www.dropbox.com/s/jhdffhwyfoksdsp/touch-icon.svg?dl=1

[romanakash]

Okay, I ran into some issues with this. I was able to enable the touch circle on mouse enter but the mouse leave listener doesn't fire anymore after the cursor has changed into a touch circle. So there wasn't any way of disabling the touch circle without explicitly pressing the toggle button again.

This lead to some confusion from a ux perspective as toggling the touch circle on one web view is just going to toggle the touch circle for the whole app. So I decided to move the toggle button to the scroll buttons container as shown here.

192