Test and fix sprotty on various browsers

[JanKoehnlein]

I tested the standalone example on several browsers and was a bit shocked:

• Chrome: Works nicely, as it is our development browser. >60 fps on scramble nodes
• Safari: Major problems with mouse events: When dragging a selection, it starts to dither. Zooming dithers as hell. Only 24 fps on scramble nodes
• Firefox: SVG element doesn't get focus, so no keyboard events. 28fps
• Eclipse internal: right-drag does not work, mouse events seem to come too slow, sluggish performance.

[JanKoehnlein]

Could be related to the fact that I use a trackpad only. Will also have to try with a mouse.

[JanKoehnlein]

Solved focus problem in Firefox

[marcdumais-work]

I noticed that on Firefox the zoom "step" seems much smaller than on Chrome. So you need a lot more ticks of the mouse wheel to accomplish the same zoom-in or zoom-out.

[marcdumais-work]

The difference seems to be that, in the wheel event, field deltaY is much bigger on Chrome vs FF: 53 vs 3. At least on my machine :)

[JanKoehnlein]

Situation has improved: I no longer experience the dithering in any borwser. Apart from performance, all that is left from the original issues is the right-drag in Eclipse.

[matti1234]

I tested the sprotty examples in Chrome, Safari, Opera, Edge and Firefox on Windows 10 and found a couple of Bugs:

1. In Safari and Edge nothing works. The only things you see there are the headlines, the example page and the console for the MulticoreServerLauncher.
2. In Chrome and Opera only a couple errors occur:
   • at "circles and lines" the programm doesn`t react correctly to STRG+c/f
   • at "multicore" STRG+f/c do not work correctly after having selected the box
   • at "flow with xtext" the zoom and the centering don`t really work out, after having selected something, the zoom is too close and if you try to center it either slides too much to the right, down or both
   • at "multicore with xtext" the Programm doesn`t react to STRG+f/c
3. In Firefox browser many things don`t work out correctly.
   • "circles and lines": The buttons react quite slowly. If you try too move a circle insight the box, the numbers in the other circles get assorted. After having pressed a button the programm doesnt react to STRG+f/c any more. Also the programm doesn`t react correctly to STRG+c/f.
   • "class diagramm": The corners are edgy. After having pressed STRG+c/f the box can`t be moved and selected correctly any more.
   • at "multicore" the zoom is quite laggy
   • at "flow with xtext" the programm reacts only very slow and the zoom is too close
   • at "multicore with xtext" the programm doesn`t react to STRG+c/f if you have selected something

[epatpol]

I think having some basic ui test infrastructure for hotkeys/moving could help with testing those issues. wdyt?

[JanKoehnlein]

@epatpol Sure, go ahead. Optimally, it would automatically test using various browsers.

[jbicker]

I've tested again in Firefox, Chrome, Opera, Safari, IE 11 and Edge. Everthing is fine so far. But:

• IE11 don't support most of the ES6-Standard.
• Edge does work only if developer tools are opened unless all console loggers are switched off (use NullLogger)

[JanKoehnlein]

We should not use any ES6 specific stuff. Maybe some polyfils are missing. Could you find out which?

[spoenemann]

Currently we explicitly activated the es6 library in our tsconfig.json. I think Symbol and Promise are part of that library.

[spoenemann]

Theia is using polyfills in the example pages: https://github.com/theia-ide/theia/blob/master/examples/browser/src/frontend/index.html#L6