16 files changed, 396 insertions, 45 deletions

diff --git a/.travis.yml b/.travis.yml
index dc97cc119..124a6fc8a 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,16 +1,17 @@
 matrix:
   include:
-    - os: linux
-      dist: xenial
-      addons:
-        apt:
-          packages:
-            - libx11-dev
-            - libxext-dev
-            - libxss-dev
-            - libxkbfile-dev
-    - os: osx
-      osx_image: xcode10.3
+  - os: linux
+    dist: xenial
+    addons:
+      apt:
+        packages:
+        - libx11-dev
+        - libxext-dev
+        - libxss-dev
+        - libxkbfile-dev
+  - os: osx
+    osx_image: xcode11
+
 language: node_js
 install:
   - echo do nothing
diff --git a/package.json b/package.json
index 467ae3099..9f014a8e4 100644
--- a/package.json
+++ b/package.json
@@ -51,8 +51,8 @@
     "du": "^0.1.0",
     "electron-dl": "1.14.0",
     "electron-fetch": "1.3.0",
-    "electron-hunspell": "0.1.1",
-    "electron-is-dev": "1.1.0",
+    "electron-hunspell": "1.0.0",
+    "electron-is-dev": "1.0.1",
     "electron-react-titlebar": "0.8.1",
     "electron-updater": "4.1.2",
     "electron-window-state": "5.0.3",
diff --git a/src/api/server/LocalApi.js b/src/api/server/LocalApi.js
index c4abc00e9..2d9af416f 100644
--- a/src/api/server/LocalApi.js
+++ b/src/api/server/LocalApi.js
@@ -45,13 +45,13 @@ export default class LocalApi {
     const s = session.fromPartition(`persist:service-${serviceId}`);
 
     debug('LocalApi::clearCache resolves', serviceId);
-    return new Promise(resolve => s.clearCache(resolve));
+    return s.clearCache();
   }
 
   async clearAppCache() {
     const s = session.defaultSession;
 
     debug('LocalApi::clearCache clearAppCache');
-    return new Promise(resolve => s.clearCache(resolve));
+    return s.clearCache();
   }
 }
diff --git a/src/components/services/content/ServiceView.js b/src/components/services/content/ServiceView.js
index c45acc961..0cfefc92b 100644
--- a/src/components/services/content/ServiceView.js
+++ b/src/components/services/content/ServiceView.js
@@ -13,6 +13,7 @@ import WebviewErrorHandler from './ErrorHandlers/WebviewErrorHandler';
 import ServiceDisabled from './ServiceDisabled';
 import ServiceWebview from './ServiceWebview';
 import SettingsStore from '../../../stores/SettingsStore';
+import WebControlsScreen from '../../../features/webControls/containers/WebControlsScreen';
 
 export default @observer @inject('stores') class ServiceView extends Component {
   static propTypes = {
@@ -177,6 +178,9 @@ export default @observer @inject('stores') class ServiceView extends Component {
           </Fragment>
         ) : (
           <>
+            {service.recipe.id === 'franz-custom-website' && (
+              <WebControlsScreen service={service} />
+            )}
             {!this.state.hibernate ? (
               <ServiceWebview
                 service={service}
@@ -187,7 +191,7 @@ export default @observer @inject('stores') class ServiceView extends Component {
               <div>
                 <span role="img" aria-label="Sleeping Emoji">😴</span>
                 {' '}
-This service is currently hibernating. If this page doesn&#x27;t close soon, please try reloading Ferdi.
+                This service is currently hibernating. If this page doesn&#x27;t close soon, please try reloading Ferdi.
               </div>
             )}
           </>
diff --git a/src/components/services/content/ServiceWebview.js b/src/components/services/content/ServiceWebview.js
index 647e31d52..03d6d5bcc 100644
--- a/src/components/services/content/ServiceWebview.js
+++ b/src/components/services/content/ServiceWebview.js
@@ -59,6 +59,7 @@ class ServiceWebview extends Component {
         }}
         onUpdateTargetUrl={this.updateTargetUrl}
         useragent={service.userAgent}
+        disablewebsecurity={service.recipe.disablewebsecurity}
         allowpopups
       />
     );
diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js
index c252aff90..35c102220 100644
--- a/src/features/todos/components/TodosWebview.js
+++ b/src/features/todos/components/TodosWebview.js
@@ -37,9 +37,6 @@ const styles = theme => ({
 
     transform: ({ isVisible, width }) => `translateX(${isVisible ? 0 : width}px)`,
 
-    '&:hover $closeTodosButton': {
-      opacity: 1,
-    },
     '& webview': {
       height: '100%',
     },
diff --git a/src/features/todos/store.js b/src/features/todos/store.js
index d507237d1..a05203a04 100644
--- a/src/features/todos/store.js
+++ b/src/features/todos/store.js
@@ -162,6 +162,10 @@ export default class TodoStore extends FeatureStore {
         theme: isDarkThemeActive ? ThemeType.dark : ThemeType.default,
       },
     });
+
+    this.webview.addEventListener('new-window', ({ url }) => {
+      this.actions.app.openExternalUrl({ url });
+    });
   };
 
   _goToService = ({ url, serviceId }) => {
diff --git a/src/features/webControls/components/WebControls.js b/src/features/webControls/components/WebControls.js
new file mode 100644
index 000000000..03f601a17
--- /dev/null
+++ b/src/features/webControls/components/WebControls.js
@@ -0,0 +1,190 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import injectSheet from 'react-jss';
+import { Icon } from '@meetfranz/ui';
+
+import {
+  mdiReload, mdiArrowRight, mdiArrowLeft, mdiHomeOutline,
+} from '@mdi/js';
+
+const styles = theme => ({
+  root: {
+    background: theme.colorBackground,
+    position: 'relative',
+    borderLeft: [1, 'solid', theme.todos.todosLayer.borderLeftColor],
+    zIndex: 300,
+    height: 50,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: [0, 20],
+
+    '& + div': {
+      height: 'calc(100% - 50px)',
+    },
+  },
+  button: {
+    width: 30,
+    height: 50,
+    transition: 'opacity 0.25s',
+
+    '&:hover': {
+      opacity: 0.8,
+    },
+
+    '&:disabled': {
+      opacity: 0.5,
+    },
+  },
+  icon: {
+    width: '20px !important',
+    height: 20,
+    marginTop: 5,
+  },
+  input: {
+    marginBottom: 0,
+    height: 'auto',
+    marginLeft: 10,
+    flex: 1,
+    border: 0,
+    padding: [4, 10],
+    borderRadius: theme.borderRadius,
+    background: theme.inputBackground,
+    color: theme.inputColor,
+  },
+  inputButton: {
+    color: theme.colorText,
+  },
+});
+
+@injectSheet(styles) @observer
+class WebControls extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    goHome: PropTypes.func.isRequired,
+    canGoBack: PropTypes.bool.isRequired,
+    goBack: PropTypes.func.isRequired,
+    canGoForward: PropTypes.bool.isRequired,
+    goForward: PropTypes.func.isRequired,
+    reload: PropTypes.func.isRequired,
+    url: PropTypes.string.isRequired,
+    navigate: PropTypes.func.isRequired,
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    const { url } = props;
+    const { editUrl } = state;
+
+    if (!editUrl) {
+      return {
+        inputUrl: url,
+        editUrl: state.editUrl,
+      };
+    }
+  }
+
+  inputRef = React.createRef();
+
+  state = {
+    inputUrl: '',
+    editUrl: false,
+  }
+
+  render() {
+    const {
+      classes,
+      goHome,
+      canGoBack,
+      goBack,
+      canGoForward,
+      goForward,
+      reload,
+      url,
+      navigate,
+    } = this.props;
+
+    const {
+      inputUrl,
+      editUrl,
+    } = this.state;
+
+    return (
+      <div className={classes.root}>
+        <button
+          onClick={goHome}
+          type="button"
+          className={classes.button}
+        >
+          <Icon
+            icon={mdiHomeOutline}
+            className={classes.icon}
+          />
+        </button>
+        <button
+          onClick={goBack}
+          type="button"
+          className={classes.button}
+          disabled={!canGoBack}
+        >
+          <Icon
+            icon={mdiArrowLeft}
+            className={classes.icon}
+          />
+        </button>
+        <button
+          onClick={goForward}
+          type="button"
+          className={classes.button}
+          disabled={!canGoForward}
+        >
+          <Icon
+            icon={mdiArrowRight}
+            className={classes.icon}
+          />
+        </button>
+        <button
+          onClick={reload}
+          type="button"
+          className={classes.button}
+        >
+          <Icon
+            icon={mdiReload}
+            className={classes.icon}
+          />
+        </button>
+        <input
+          value={editUrl ? inputUrl : url}
+          className={classes.input}
+          onChange={event => this.setState({
+            inputUrl: event.target.value,
+          })}
+          onFocus={(event) => {
+            event.target.select();
+            this.setState({
+              editUrl: true,
+            });
+          }}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') {
+              this.setState({
+                editUrl: false,
+              });
+              navigate(inputUrl);
+              this.inputRef.current.blur();
+            } else if (event.key === 'Escape') {
+              this.setState({
+                editUrl: false,
+                inputUrl: url,
+              });
+              event.target.blur();
+            }
+          }}
+          ref={this.inputRef}
+        />
+      </div>
+    );
+  }
+}
+
+export default WebControls;
diff --git a/src/features/webControls/containers/WebControlsScreen.js b/src/features/webControls/containers/WebControlsScreen.js
new file mode 100644
index 000000000..1452d5a3d
--- /dev/null
+++ b/src/features/webControls/containers/WebControlsScreen.js
@@ -0,0 +1,128 @@
+import React, { Component } from 'react';
+import { observer, inject } from 'mobx-react';
+import PropTypes from 'prop-types';
+
+import { autorun, observable } from 'mobx';
+import WebControls from '../components/WebControls';
+import ServicesStore from '../../../stores/ServicesStore';
+import Service from '../../../models/Service';
+
+const URL_EVENTS = [
+  'load-commit',
+  // 'dom-ready',
+  'will-navigate',
+  'did-navigate',
+  'did-navigate-in-page',
+];
+
+@inject('stores', 'actions') @observer
+class WebControlsScreen extends Component {
+  @observable url = '';
+
+  @observable canGoBack = false;
+
+  @observable canGoForward = false;
+
+  webview = null;
+
+  autorunDisposer = null;
+
+  componentDidMount() {
+    const { service } = this.props;
+
+    this.autorunDisposer = autorun(() => {
+      if (service.isAttached) {
+        this.webview = service.webview;
+
+        URL_EVENTS.forEach((event) => {
+          this.webview.addEventListener(event, (e) => {
+            if (!e.isMainFrame) return;
+
+            this.url = e.url;
+            this.canGoBack = this.webview.canGoBack();
+            this.canGoForward = this.webview.canGoForward();
+          });
+        });
+      }
+    });
+  }
+
+  componentWillUnmount() {
+    this.autorunDisposer();
+  }
+
+  goHome() {
+    const { reloadActive } = this.props.actions.service;
+
+    if (!this.webview) return;
+
+    reloadActive();
+  }
+
+  reload() {
+    if (!this.webview) return;
+
+    this.webview.reload();
+  }
+
+  goBack() {
+    if (!this.webview) return;
+
+    this.webview.goBack();
+  }
+
+  goForward() {
+    if (!this.webview) return;
+
+    this.webview.goForward();
+  }
+
+  navigate(newUrl) {
+    if (!this.webview) return;
+
+    let url = newUrl;
+
+    try {
+      url = new URL(url).toString();
+    } catch (err) {
+      // eslint-disable-next-line no-useless-escape
+      if (url.match(/^((?!-))(xn--)?[a-z0-9][a-z0-9-_]{0,61}[a-z0-9]{0,1}\.(xn--)?([a-z0-9\-]{1,61}|[a-z0-9-]{1,30}\.[a-z]{2,})$/)) {
+        url = `http://${url}`;
+      } else {
+        url = `https://www.google.com/search?query=${url}`;
+      }
+    }
+
+    this.webview.loadURL(url);
+    this.url = url;
+  }
+
+  render() {
+    return (
+      <WebControls
+        goHome={() => this.goHome()}
+        reload={() => this.reload()}
+        canGoBack={this.canGoBack}
+        goBack={() => this.goBack()}
+        canGoForward={this.canGoForward}
+        goForward={() => this.goForward()}
+        navigate={url => this.navigate(url)}
+        url={this.url}
+      />
+    );
+  }
+}
+
+export default WebControlsScreen;
+
+WebControlsScreen.wrappedComponent.propTypes = {
+  service: PropTypes.instanceOf(Service).isRequired,
+  stores: PropTypes.shape({
+    services: PropTypes.instanceOf(ServicesStore).isRequired,
+  }).isRequired,
+  actions: PropTypes.shape({
+    service: PropTypes.shape({
+      reloadActive: PropTypes.func.isRequired,
+    }).isRequired,
+  }).isRequired,
+};
diff --git a/src/lib/Menu.js b/src/lib/Menu.js
index beaafb4d1..7e336c994 100644
--- a/src/lib/Menu.js
+++ b/src/lib/Menu.js
@@ -325,6 +325,9 @@ const _templateFactory = intl => [
         label: intl.formatMessage(menuItems.pasteAndMatchStyle),
         accelerator: 'Cmd+Shift+V',
         selector: 'pasteAndMatchStyle:',
+        click() {
+          getActiveWebview().pasteAndMatchStyle();
+        },
       },
       {
         label: intl.formatMessage(menuItems.delete),
@@ -985,6 +988,10 @@ export default class FranzMenu {
       checked: service.isActive,
       click: () => {
         this.actions.service.setActive({ serviceId: service.id });
+
+        if (isMac && i === 0) {
+          app.mainWindow.restore();
+        }
       },
     })));
 
diff --git a/src/lib/TouchBar.js b/src/lib/TouchBar.js
index 97c02d194..1de46d2a3 100644
--- a/src/lib/TouchBar.js
+++ b/src/lib/TouchBar.js
@@ -29,7 +29,7 @@ export default class FranzTouchBar {
       const { TouchBarButton, TouchBarSpacer } = TouchBar;
 
       const buttons = [];
-      this.stores.services.enabled.forEach(((service) => {
+      this.stores.services.allDisplayed.forEach(((service) => {
         buttons.push(new TouchBarButton({
           label: `${service.name}${service.unreadDirectMessageCount > 0
             ? ' 🔴' : ''} ${service.unreadDirectMessageCount === 0
@@ -42,7 +42,7 @@ export default class FranzTouchBar {
         }), new TouchBarSpacer({ size: 'small' }));
       }));
 
-      const touchBar = new TouchBar(buttons);
+      const touchBar = new TouchBar({ items: buttons });
       currentWindow.setTouchBar(touchBar);
     } else {
       currentWindow.setTouchBar(null);
diff --git a/src/models/Recipe.js b/src/models/Recipe.js
index 3f7299e34..6655f8310 100644
--- a/src/models/Recipe.js
+++ b/src/models/Recipe.js
@@ -36,6 +36,8 @@ export default class Recipe {
 
   message = '';
 
+  disablewebsecurity = false;
+
   constructor(data) {
     if (!data) {
       throw Error('Recipe config not valid');
@@ -74,6 +76,8 @@ export default class Recipe {
     this.urlInputPrefix = data.config.urlInputPrefix || this.urlInputPrefix;
     this.urlInputSuffix = data.config.urlInputSuffix || this.urlInputSuffix;
 
+    this.disablewebsecurity = data.config.disablewebsecurity || this.disablewebsecurity;
+
     this.message = data.config.message || this.message;
   }
 
diff --git a/src/models/Service.js b/src/models/Service.js
index b48233237..3ab6e2603 100644
--- a/src/models/Service.js
+++ b/src/models/Service.js
@@ -134,6 +134,9 @@ export default class Service {
       id: this.id,
       spellcheckerLanguage: this.spellcheckerLanguage,
       isDarkModeEnabled: this.isDarkModeEnabled,
+      team: this.team,
+      url: this.url,
+      hasCustomIcon: this.hasCustomIcon,
     };
   }
 
diff --git a/src/stores/AppStore.js b/src/stores/AppStore.js
index 5bae6e8d4..40d98cf42 100644
--- a/src/stores/AppStore.js
+++ b/src/stores/AppStore.js
@@ -22,6 +22,7 @@ import { getLocale } from '../helpers/i18n-helpers';
 
 import { getServiceIdsFromPartitions, removeServicePartitionDirectory } from '../helpers/service-helpers.js';
 import { isValidExternalURL } from '../helpers/url-helpers';
+import { sleep } from '../helpers/async-helpers';
 
 const debug = require('debug')('Ferdi:AppStore');
 
@@ -317,6 +318,8 @@ export default class AppStore extends Store {
 
     await clearAppCache._promise;
 
+    await sleep(ms('1s'));
+
     this.getAppCacheSizeRequest.execute();
 
     this.isClearingAllCache = false;
diff --git a/src/webview/contextMenu.js b/src/webview/contextMenu.js
index ec5833848..acd62d675 100644
--- a/src/webview/contextMenu.js
+++ b/src/webview/contextMenu.js
@@ -255,9 +255,9 @@ const buildMenuTpl = (props, suggestions, isSpellcheckEnabled, defaultSpellcheck
       },
       {
         id: 'resetToDefault',
-        label: `Reset to system default (${SPELLCHECKER_LOCALES[defaultSpellcheckerLanguage]})`,
+        label: `Reset to system default (${defaultSpellcheckerLanguage === 'automatic' ? 'Automatic' : SPELLCHECKER_LOCALES[defaultSpellcheckerLanguage]})`,
         type: 'radio',
-        visible: defaultSpellcheckerLanguage !== spellcheckerLanguage,
+        visible: defaultSpellcheckerLanguage !== spellcheckerLanguage || (defaultSpellcheckerLanguage !== 'automatic' && spellcheckerLanguage === 'automatic'),
         click() {
           debug('Resetting service spellchecker to system default');
           ipcRenderer.sendToHost('set-service-spellchecker-language', 'reset');
@@ -297,12 +297,13 @@ const buildMenuTpl = (props, suggestions, isSpellcheckEnabled, defaultSpellcheck
 };
 
 export default function contextMenu(spellcheckProvider, isSpellcheckEnabled, getDefaultSpellcheckerLanguage, getSpellcheckerLanguage) {
-  webContents.on('context-menu', (e, props) => {
+  webContents.on('context-menu', async (e, props) => {
     e.preventDefault();
 
     let suggestions = [];
     if (spellcheckProvider && props.misspelledWord) {
-      suggestions = spellcheckProvider.getSuggestion(props.misspelledWord);
+      debug('Mispelled word', props.misspelledWord);
+      suggestions = await spellcheckProvider.getSuggestion(props.misspelledWord);
 
       debug('Suggestions', suggestions);
     }
diff --git a/src/webview/spellchecker.js b/src/webview/spellchecker.js
index 1b2d60faf..27380676d 100644
--- a/src/webview/spellchecker.js
+++ b/src/webview/spellchecker.js
@@ -1,6 +1,7 @@
 import { webFrame } from 'electron';
-import { SpellCheckerProvider } from 'electron-hunspell';
+import { attachSpellCheckProvider, SpellCheckerProvider } from 'electron-hunspell';
 import path from 'path';
+import { readFileSync } from 'fs';
 
 import { DICTIONARY_PATH } from '../config';
 import { SPELLCHECKER_LOCALES } from '../i18n/languages';
@@ -10,18 +11,21 @@ const debug = require('debug')('Ferdi:spellchecker');
 let provider;
 let currentDict;
 let _isEnabled = false;
+let attached;
+
+const DEFAULT_LOCALE = 'en-us';
 
 async function loadDictionary(locale) {
   try {
     const fileLocation = path.join(DICTIONARY_PATH, `hunspell-dict-${locale}/${locale}`);
-    await provider.loadDictionary(locale, `${fileLocation}.dic`, `${fileLocation}.aff`);
     debug('Loaded dictionary', locale, 'from', fileLocation);
+    return provider.loadDictionary(locale, readFileSync(`${fileLocation}.dic`), readFileSync(`${fileLocation}.aff`));
   } catch (err) {
     console.error('Could not load dictionary', err);
   }
 }
 
-export async function switchDict(locale) {
+export async function switchDict(locale = DEFAULT_LOCALE) {
   try {
     debug('Trying to load dictionary', locale);
 
@@ -40,8 +44,8 @@ export async function switchDict(locale) {
     if (currentDict) {
       provider.unloadDictionary(locale);
     }
-    loadDictionary(locale);
-    provider.switchDictionary(locale);
+    await loadDictionary(locale);
+    await attached.switchLanguage(locale);
 
     debug('Switched dictionary to', locale);
 
@@ -52,18 +56,32 @@ export async function switchDict(locale) {
   }
 }
 
-export default async function initialize(languageCode = 'en-us') {
+export function getSpellcheckerLocaleByFuzzyIdentifier(identifier) {
+  const locales = Object.keys(SPELLCHECKER_LOCALES).filter(key => key === identifier.toLowerCase() || key.split('-')[0] === identifier.toLowerCase());
+
+  if (locales.length >= 1) {
+    return locales[0];
+  }
+
+  return null;
+}
+
+export default async function initialize(languageCode = DEFAULT_LOCALE) {
   try {
     provider = new SpellCheckerProvider();
-    const locale = languageCode.toLowerCase();
+    const locale = getSpellcheckerLocaleByFuzzyIdentifier(languageCode);
 
     debug('Init spellchecker');
     await provider.initialize();
-    // await loadDictionaries();
 
-    debug('Available spellchecker dictionaries', provider.availableDictionaries);
+    debug('Attaching spellcheck provider');
+    attached = await attachSpellCheckProvider(provider);
+
+    const availableDictionaries = await provider.getAvailableDictionaries();
 
-    switchDict(locale);
+    debug('Available spellchecker dictionaries', availableDictionaries);
+
+    await switchDict(locale);
 
     return provider;
   } catch (err) {
@@ -83,13 +101,3 @@ export function disable() {
     currentDict = null;
   }
 }
-
-export function getSpellcheckerLocaleByFuzzyIdentifier(identifier) {
-  const locales = Object.keys(SPELLCHECKER_LOCALES).filter(key => key === identifier.toLowerCase() || key.split('-')[0] === identifier.toLowerCase());
-
-  if (locales.length >= 1) {
-    return locales[0];
-  }
-
-  return null;
-}