Release/5.0.1 beta.1 (#1344)

* Add lerna

* Add theme

* Add forms

* Add misty config to build theme & forms

* reset packages version

* Publish

 - @meetfranz/forms@1.0.0
 - @meetfranz/theme@1.0.0

* Reset package version

* restructure packages

* try ci with lerna

* Fix missing packages in build

* move storybook to root + typescript

TODO: fix modules

* Add lerna instructions

* Merge

* wip

* Make packages work in electron, node and web

* Finalize packages & replace storybook with homegrown `uidev`

* Bring package-lock back in sync

* Publish

 - @meetfranz/forms@1.0.1
 - @meetfranz/theme@1.0.1

* fix webpack issue

* expose legacy styles

* Add toggle element to @meetfranz/forms

* start typings package

* Update package.json

* Add buttons

* Update theme

* add types

* Add mdi icons to buttons

* Publish

 - @meetfranz/forms@1.0.2
 - @meetfranz/theme@1.0.2
 - @meetfranz/typings@0.0.1

* Button, add missing success state

* Update lerna packages

* Try to disable automatic npm ci

* Try to get a working bundle

* Add href and type to button component

* Update packages

* update versions

* cleanup

* Update package versions

[ci skip]

* Update versions

* Add withTheme context to button

* Update & reuse electron-rebuild

* feat(Windows): Add option to quit Franz from Taskbar icon

* Add missing withTheme

* Fix package versions

* Update versions

* Add pageview event

* Simplify analytics calls

* Pin gulp-sass-variables to 1.1.1

* Add onFocus event

* Add modal overlay color

* remove legacy theme files

* remove code

* Add dialog to share franz on social media

* Fix service count

* remove ping

* replace ms time strings with ms module

* remove unused packages

* fix value setter

* new payment flow

* fix module reference

* feat(Spell check): Add en-gb spell check languages (#1306)

* move devmode info

* fix(Windows): Fix losing window when "Keep Franz in background" is enabled

* fix(Service): Fix service zoom (cmd/ctrl+ & cmd/ctrl-)

* fixes appveyor build issue

* feat(App): Update electron to 4.0.7

* ignore intellij idea project files

* Automatic i18n update (i18n.meetfranz.com)

* feat(App): Add security checks for external URLs

* setup react-intl translations managing script

* use same zooming logic for all os

* feat(Linux): Add auto updater for Linux AppImage builds

* Add ctrl+ for zoom in on Windows

* move translation scripts into src/i18n folder

* only manage en-US translations

* manage translations before git pushes

* Fix unused i18n strings

* Bump version to 5.0.1-beta.1

* fix(Service) shortcuts for activating prev/next service fixes #1298

* fix(Service): Fix shortcut for (un)muting notifications & audio

* add missing react-intl files

* correctly update services submenu on language change

* fix(Windows): Fix copy & paste in service context menus

Closes #1316

* fix(Linux): Fix minimized window focusing (#1304) (@skoruppa)

* trigger build

* Check if window is minimized before restoring it

* restore() should be executed only when window is minimized

* fix(Notifications): Fix notifications & notification click when icon is blob

* Fix/service webview unmounting (#1328)

* detach service when underlying webview unmounts

* disable no-param-reassign eslint rule

* Add notification debug events

* Update electron to 4.0.8

Update required in order to fix performance degradation due to memory leak issue https://github.com/electron/electron/pull/16772.

* Automatic i18n update (i18n.meetfranz.com)

* Automatic i18n update (i18n.meetfranz.com)

* 5.0.1-beta.1

4 files changed, 170 insertions, 125 deletions

diff --git a/src/components/services/content/ServiceView.js b/src/components/services/content/ServiceView.js
new file mode 100644
index 000000000..5afc54f9d
--- /dev/null
+++ b/src/components/services/content/ServiceView.js
@@ -0,0 +1,136 @@
+import React, { Component, Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { autorun } from 'mobx';
+import { observer } from 'mobx-react';
+import classnames from 'classnames';
+
+import ServiceModel from '../../../models/Service';
+import StatusBarTargetUrl from '../../ui/StatusBarTargetUrl';
+import WebviewLoader from '../../ui/WebviewLoader';
+import WebviewCrashHandler from './WebviewCrashHandler';
+import WebviewErrorHandler from './ErrorHandlers/WebviewErrorHandler';
+import ServiceDisabled from './ServiceDisabled';
+import ServiceWebview from './ServiceWebview';
+
+export default @observer class ServiceView extends Component {
+  static propTypes = {
+    service: PropTypes.instanceOf(ServiceModel).isRequired,
+    setWebviewReference: PropTypes.func.isRequired,
+    detachService: PropTypes.func.isRequired,
+    reload: PropTypes.func.isRequired,
+    edit: PropTypes.func.isRequired,
+    enable: PropTypes.func.isRequired,
+    isActive: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    isActive: false,
+  };
+
+  state = {
+    forceRepaint: false,
+    targetUrl: '',
+    statusBarVisible: false,
+  };
+
+  autorunDisposer = null;
+
+  componentDidMount() {
+    this.autorunDisposer = autorun(() => {
+      if (this.props.service.isActive) {
+        this.setState({ forceRepaint: true });
+        setTimeout(() => {
+          this.setState({ forceRepaint: false });
+        }, 100);
+      }
+    });
+  }
+
+  componentWillUnmount() {
+    this.autorunDisposer();
+  }
+
+  updateTargetUrl = (event) => {
+    let visible = true;
+    if (event.url === '' || event.url === '#') {
+      visible = false;
+    }
+    this.setState({
+      targetUrl: event.url,
+      statusBarVisible: visible,
+    });
+  };
+
+  render() {
+    const {
+      detachService,
+      service,
+      setWebviewReference,
+      reload,
+      edit,
+      enable,
+    } = this.props;
+
+    const webviewClasses = classnames({
+      services__webview: true,
+      'services__webview-wrapper': true,
+      'is-active': service.isActive,
+      'services__webview--force-repaint': this.state.forceRepaint,
+    });
+
+    let statusBar = null;
+    if (this.state.statusBarVisible) {
+      statusBar = (
+        <StatusBarTargetUrl text={this.state.targetUrl} />
+      );
+    }
+
+    return (
+      <div className={webviewClasses}>
+        {service.isActive && service.isEnabled && (
+          <Fragment>
+            {service.hasCrashed && (
+              <WebviewCrashHandler
+                name={service.recipe.name}
+                webview={service.webview}
+                reload={reload}
+              />
+            )}
+            {service.isEnabled && service.isLoading && service.isFirstLoad && (
+              <WebviewLoader
+                loaded={false}
+                name={service.name}
+              />
+            )}
+            {service.isError && (
+              <WebviewErrorHandler
+                name={service.recipe.name}
+                errorMessage={service.errorMessage}
+                reload={reload}
+                edit={edit}
+              />
+            )}
+          </Fragment>
+        )}
+        {!service.isEnabled ? (
+          <Fragment>
+            {service.isActive && (
+              <ServiceDisabled
+                name={service.recipe.name}
+                webview={service.webview}
+                enable={enable}
+              />
+            )}
+          </Fragment>
+        ) : (
+          <ServiceWebview
+            service={service}
+            setWebviewReference={setWebviewReference}
+            detachService={detachService}
+          />
+        )}
+        {statusBar}
+      </div>
+    );
+  }
+}
diff --git a/src/components/services/content/ServiceWebview.js b/src/components/services/content/ServiceWebview.js
index bb577e4cc..7252c695f 100644
--- a/src/components/services/content/ServiceWebview.js
+++ b/src/components/services/content/ServiceWebview.js
@@ -1,145 +1,50 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { autorun } from 'mobx';
 import { observer } from 'mobx-react';
-import Webview from 'react-electron-web-view';
-import classnames from 'classnames';
+import ElectronWebView from 'react-electron-web-view';
 
 import ServiceModel from '../../../models/Service';
-import StatusBarTargetUrl from '../../ui/StatusBarTargetUrl';
-import WebviewLoader from '../../ui/WebviewLoader';
-import WebviewCrashHandler from './WebviewCrashHandler';
-import WebviewErrorHandler from './ErrorHandlers/WebviewErrorHandler';
-import ServiceDisabled from './ServiceDisabled';
 
-export default @observer class ServiceWebview extends Component {
+@observer
+class ServiceWebview extends Component {
   static propTypes = {
     service: PropTypes.instanceOf(ServiceModel).isRequired,
     setWebviewReference: PropTypes.func.isRequired,
-    reload: PropTypes.func.isRequired,
-    edit: PropTypes.func.isRequired,
-    enable: PropTypes.func.isRequired,
-    isActive: PropTypes.bool,
+    detachService: PropTypes.func.isRequired,
   };
 
-  static defaultProps = {
-    isActive: false,
-  };
-
-  state = {
-    forceRepaint: false,
-    targetUrl: '',
-    statusBarVisible: false,
-  };
-
-  autorunDisposer = null;
-
   webview = null;
 
-  componentDidMount() {
-    this.autorunDisposer = autorun(() => {
-      if (this.props.service.isActive) {
-        this.setState({ forceRepaint: true });
-        setTimeout(() => {
-          this.setState({ forceRepaint: false });
-        }, 100);
-      }
-    });
-  }
-
   componentWillUnmount() {
-    this.autorunDisposer();
-  }
-
-  updateTargetUrl = (event) => {
-    let visible = true;
-    if (event.url === '' || event.url === '#') {
-      visible = false;
-    }
-    this.setState({
-      targetUrl: event.url,
-      statusBarVisible: visible,
-    });
+    const { service, detachService } = this.props;
+    detachService({ service });
   }
 
   render() {
     const {
       service,
       setWebviewReference,
-      reload,
-      edit,
-      enable,
     } = this.props;
 
-    const webviewClasses = classnames({
-      services__webview: true,
-      'services__webview-wrapper': true,
-      'is-active': service.isActive,
-      'services__webview--force-repaint': this.state.forceRepaint,
-    });
-
-    let statusBar = null;
-    if (this.state.statusBarVisible) {
-      statusBar = (
-        <StatusBarTargetUrl text={this.state.targetUrl} />
-      );
-    }
-
     return (
-      <div className={webviewClasses}>
-        {service.isActive && service.isEnabled && (
-          <Fragment>
-            {service.hasCrashed && (
-              <WebviewCrashHandler
-                name={service.recipe.name}
-                webview={service.webview}
-                reload={reload}
-              />
-            )}
-            {service.isEnabled && service.isLoading && service.isFirstLoad && (
-              <WebviewLoader
-                loaded={false}
-                name={service.name}
-              />
-            )}
-            {service.isError && (
-              <WebviewErrorHandler
-                name={service.recipe.name}
-                errorMessage={service.errorMessage}
-                reload={reload}
-                edit={edit}
-              />
-            )}
-          </Fragment>
-        )}
-        {!service.isEnabled ? (
-          <Fragment>
-            {service.isActive && (
-              <ServiceDisabled
-                name={service.recipe.name}
-                webview={service.webview}
-                enable={enable}
-              />
-            )}
-          </Fragment>
-        ) : (
-          <Webview
-            ref={(element) => { this.webview = element; }}
-            autosize
-            src={service.url}
-            preload="./webview/recipe.js"
-            partition={`persist:service-${service.id}`}
-            onDidAttach={() => setWebviewReference({
-              serviceId: service.id,
-              webview: this.webview.view,
-            })}
-            onUpdateTargetUrl={this.updateTargetUrl}
-            useragent={service.userAgent}
-            allowpopups
-          />
-        )}
-        {statusBar}
-      </div>
+      <ElectronWebView
+        ref={(webview) => { this.webview = webview; }}
+        autosize
+        src={service.url}
+        preload="./webview/recipe.js"
+        partition={`persist:service-${service.id}`}
+        onDidAttach={() => {
+          setWebviewReference({
+            serviceId: service.id,
+            webview: this.webview.view,
+          });
+        }}
+        onUpdateTargetUrl={this.updateTargetUrl}
+        useragent={service.userAgent}
+        allowpopups
+      />
     );
   }
 }
+
+export default ServiceWebview;
diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.js
index 54f16ba12..8f8c38a11 100644
--- a/src/components/services/content/Services.js
+++ b/src/components/services/content/Services.js
@@ -4,7 +4,7 @@ import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { Link } from 'react-router';
 import { defineMessages, intlShape } from 'react-intl';
 
-import Webview from './ServiceWebview';
+import ServiceView from './ServiceView';
 import Appear from '../../ui/effects/Appear';
 
 const messages = defineMessages({
@@ -22,6 +22,7 @@ export default @observer class Services extends Component {
   static propTypes = {
     services: MobxPropTypes.arrayOrObservableArray,
     setWebviewReference: PropTypes.func.isRequired,
+    detachService: PropTypes.func.isRequired,
     handleIPCMessage: PropTypes.func.isRequired,
     openWindow: PropTypes.func.isRequired,
     reload: PropTypes.func.isRequired,
@@ -42,6 +43,7 @@ export default @observer class Services extends Component {
       services,
       handleIPCMessage,
       setWebviewReference,
+      detachService,
       openWindow,
       reload,
       openSettings,
@@ -71,11 +73,12 @@ export default @observer class Services extends Component {
           </Appear>
         )}
         {services.map(service => (
-          <Webview
+          <ServiceView
             key={service.id}
             service={service}
             handleIPCMessage={handleIPCMessage}
             setWebviewReference={setWebviewReference}
+            detachService={detachService}
             openWindow={openWindow}
             reload={() => reload({ serviceId: service.id })}
             edit={() => openSettings({ path: `services/edit/${service.id}` })}
diff --git a/src/components/services/content/WebviewCrashHandler.js b/src/components/services/content/WebviewCrashHandler.js
index 42bc3c877..7a69dba87 100644
--- a/src/components/services/content/WebviewCrashHandler.js
+++ b/src/components/services/content/WebviewCrashHandler.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
+import ms from 'ms';
 
 import Button from '../../ui/Button';
 
@@ -35,12 +36,12 @@ export default @observer class WebviewCrashHandler extends Component {
   };
 
   state = {
-    countdown: 10000,
+    countdown: ms('10s'),
   }
 
   countdownInterval = null;
 
-  countdownIntervalTimeout = 1000;
+  countdownIntervalTimeout = ms('1s');
 
 
   componentDidMount() {
@@ -75,7 +76,7 @@ export default @observer class WebviewCrashHandler extends Component {
         <p className="footnote">
           {intl.formatMessage(messages.autoReload, {
             name,
-            seconds: this.state.countdown / 1000,
+            seconds: this.state.countdown / ms('1s'),
           })}
         </p>
       </div>