I attempted to checkout Motionity some minutes long ago, and was stopped by an unresponsive page, turns out, isChrome detected my browser as Chrome-based even tho it (qutebrowser) is QtWebKit based. Which in turn made it attempt to create an EyeDropper which is non-existent in this browser. Causing a reference error.

Instead of checking the user-agent I would advise checking against Chrome exclusive variables/features, i.e the window.chrome Object.

Replacing the whole isChrome assignment with:

var isChrome = (window.chrome && Object.values(window.chrome).length !== 0)

It fixes it, returning false/undefined on none-Chrome browser like QtWebKit browser, but also Firefox based browsers. And returning true on Chrome based browsers.

On QtWebKit browsers like qutebrowser, the Object is returned but as an empty Object, whereas on actual Chrome based browsers it returns with values. Firefox or some other browser/engine may however not even have the variable defined, hence the first check on whether the Object even exists.

I would've made a PR but it seems this repo is outdated compared to the site? Not entirely sure.

Rename a layer was not working due to the disabled props. Disabled fields do not fire click handlers. On inputs fields, you can use the readonly props instead of disabled.

With the readonly, it works.

Breaking changes

None

Im using chrome 94 which doesn't support EyeDropper (EyeDropper is not defined)

Page doesn't work and everything is broken, might be nice to either check the chrome version, disable EyeDropper or possibly a pollyfill?

This PR adds a high-level overview of the app's architecture to the README. The idea is that future contributors will be able to refer to this to quickly find where to start when improving or debugging a specific feature.