9 files changed, 199 insertions, 163 deletions

diff --git a/src/components/services/content/ConnectionLostBanner.js b/src/components/services/content/ConnectionLostBanner.js
index ebe863333..423edb3c7 100644
--- a/src/components/services/content/ConnectionLostBanner.js
+++ b/src/components/services/content/ConnectionLostBanner.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
 import { Icon } from '@meetfranz/ui';
-import { intlShape, defineMessages } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 
 import { mdiAlert } from '@mdi/js';
 import { LIVE_API_FERDI_WEBSITE } from '../../../config';
@@ -12,15 +12,15 @@ import { LIVE_API_FERDI_WEBSITE } from '../../../config';
 const messages = defineMessages({
   text: {
     id: 'connectionLostBanner.message',
-    defaultMessage: '!!!Oh no! Ferdi lost the connection to {name}.',
+    defaultMessage: 'Oh no! Ferdi lost the connection to {name}.',
   },
   moreInformation: {
     id: 'connectionLostBanner.informationLink',
-    defaultMessage: '!!!What happened?',
+    defaultMessage: 'What happened?',
   },
   cta: {
     id: 'connectionLostBanner.cta',
-    defaultMessage: '!!!Reload Service',
+    defaultMessage: 'Reload Service',
   },
 });
 
@@ -78,16 +78,12 @@ class ConnectionLostBanner extends Component {
     reload: PropTypes.func.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   inputRef = React.createRef();
 
   render() {
     const { classes, name, reload } = this.props;
 
-    const { intl } = this.context;
+    const { intl } = this.props;
 
     return (
       <div className={classes.root}>
@@ -110,4 +106,4 @@ class ConnectionLostBanner extends Component {
   }
 }
 
-export default ConnectionLostBanner;
+export default injectIntl(ConnectionLostBanner);
diff --git a/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js b/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js
index 36e0ac418..b00db8c3f 100644
--- a/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js
+++ b/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import injectSheet from 'react-jss';
 
 import Button from '../../../ui/Button';
@@ -11,27 +11,29 @@ import styles from './styles';
 const messages = defineMessages({
   headline: {
     id: 'service.errorHandler.headline',
-    defaultMessage: '!!!Oh no!',
+    defaultMessage: 'Oh no!',
   },
   text: {
     id: 'service.errorHandler.text',
-    defaultMessage: '!!!{name} has failed to load.',
+    defaultMessage: '{name} has failed to load.',
   },
   action: {
     id: 'service.errorHandler.action',
-    defaultMessage: '!!!Reload {name}',
+    defaultMessage: 'Reload {name}',
   },
   editAction: {
     id: 'service.errorHandler.editAction',
-    defaultMessage: '!!!Edit {name}',
+    defaultMessage: 'Edit {name}',
   },
   errorMessage: {
     id: 'service.errorHandler.message',
-    defaultMessage: '!!!Error:',
+    defaultMessage: 'Error',
   },
 });
 
-export default @injectSheet(styles) @observer class WebviewErrorHandler extends Component {
+@injectSheet(styles)
+@observer
+class WebviewErrorHandler extends Component {
   static propTypes = {
     name: PropTypes.string.isRequired,
     reload: PropTypes.func.isRequired,
@@ -40,30 +42,16 @@ export default @injectSheet(styles) @observer class WebviewErrorHandler extends
     classes: PropTypes.object.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   render() {
-    const {
-      name,
-      reload,
-      edit,
-      errorMessage,
-      classes,
-    } = this.props;
-    const { intl } = this.context;
+    const { name, reload, edit, errorMessage, classes } = this.props;
+    const { intl } = this.props;
 
     return (
       <div className={classes.component}>
         <h1>{intl.formatMessage(messages.headline)}</h1>
         <p>{intl.formatMessage(messages.text, { name })}</p>
         <p>
-          <strong>
-            {intl.formatMessage(messages.errorMessage)}
-            :
-          </strong>
-          {' '}
+          <strong>{intl.formatMessage(messages.errorMessage)}:</strong>{' '}
           {errorMessage}
         </p>
         <div className={classes.buttonContainer}>
@@ -82,3 +70,5 @@ export default @injectSheet(styles) @observer class WebviewErrorHandler extends
     );
   }
 }
+
+export default injectIntl(WebviewErrorHandler);
diff --git a/src/components/services/content/ServiceDisabled.js b/src/components/services/content/ServiceDisabled.js
index d0f12256e..e59ed58bd 100644
--- a/src/components/services/content/ServiceDisabled.js
+++ b/src/components/services/content/ServiceDisabled.js
@@ -1,38 +1,35 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 
 import Button from '../../ui/Button';
 
 const messages = defineMessages({
   headline: {
     id: 'service.disabledHandler.headline',
-    defaultMessage: '!!!{name} is disabled',
+    defaultMessage: '{name} is disabled',
   },
   action: {
     id: 'service.disabledHandler.action',
-    defaultMessage: '!!!Enable {name}',
+    defaultMessage: 'Enable {name}',
   },
 });
 
-export default @observer class ServiceDisabled extends Component {
+@observer
+class ServiceDisabled extends Component {
   static propTypes = {
     name: PropTypes.string.isRequired,
     enable: PropTypes.func.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   countdownInterval = null;
 
   countdownIntervalTimeout = 1000;
 
   render() {
     const { name, enable } = this.props;
-    const { intl } = this.context;
+    const { intl } = this.props;
 
     return (
       <div className="services__info-layer">
@@ -46,3 +43,5 @@ export default @observer class ServiceDisabled extends Component {
     );
   }
 }
+
+export default injectIntl(ServiceDisabled);
diff --git a/src/components/services/content/ServiceView.js b/src/components/services/content/ServiceView.js
index 3fc084ff0..81401b1d2 100644
--- a/src/components/services/content/ServiceView.js
+++ b/src/components/services/content/ServiceView.js
@@ -15,7 +15,9 @@ import SettingsStore from '../../../stores/SettingsStore';
 import WebControlsScreen from '../../../features/webControls/containers/WebControlsScreen';
 import { CUSTOM_WEBSITE_RECIPE_ID } from '../../../config';
 
-export default @inject('stores', 'actions') @observer class ServiceView extends Component {
+@inject('stores', 'actions')
+@observer
+class ServiceView extends Component {
   static propTypes = {
     service: PropTypes.instanceOf(ServiceModel).isRequired,
     setWebviewReference: PropTypes.func.isRequired,
@@ -63,7 +65,7 @@ export default @inject('stores', 'actions') @observer class ServiceView extends
     clearTimeout(this.hibernationTimer);
   }
 
-  updateTargetUrl = (event) => {
+  updateTargetUrl = event => {
     let visible = true;
     if (event.url === '' || event.url === '#') {
       visible = false;
@@ -86,11 +88,12 @@ export default @inject('stores', 'actions') @observer class ServiceView extends
       isSpellcheckerEnabled,
     } = this.props;
 
-    const {
-      navigationBarBehaviour,
-    } = stores.settings.app;
+    const { navigationBarBehaviour } = stores.settings.app;
 
-    const showNavBar = navigationBarBehaviour === 'always' || (navigationBarBehaviour === 'custom' && service.recipe.id === CUSTOM_WEBSITE_RECIPE_ID);
+    const showNavBar =
+      navigationBarBehaviour === 'always' ||
+      (navigationBarBehaviour === 'custom' &&
+        service.recipe.id === CUSTOM_WEBSITE_RECIPE_ID);
 
     const webviewClasses = classnames({
       services__webview: true,
@@ -101,13 +104,11 @@ export default @inject('stores', 'actions') @observer class ServiceView extends
 
     let statusBar = null;
     if (this.state.statusBarVisible) {
-      statusBar = (
-        <StatusBarTargetUrl text={this.state.targetUrl} />
-      );
+      statusBar = <StatusBarTargetUrl text={this.state.targetUrl} />;
     }
 
     return (
-      <div className={webviewClasses}>
+      <div className={webviewClasses} data-name={service.name}>
         {service.isActive && service.isEnabled && (
           <>
             {service.hasCrashed && (
@@ -117,11 +118,11 @@ export default @inject('stores', 'actions') @observer class ServiceView extends
                 reload={reload}
               />
             )}
-            {service.isEnabled && service.isLoading && service.isFirstLoad && !service.isServiceAccessRestricted && (
-              <WebviewLoader
-                loaded={false}
-                name={service.name}
-              />
+            {service.isEnabled &&
+              service.isLoading &&
+              service.isFirstLoad &&
+              !service.isServiceAccessRestricted && (
+                <WebviewLoader loaded={false} name={service.name} />
             )}
             {service.isError && (
               <WebviewErrorHandler
@@ -147,9 +148,7 @@ export default @inject('stores', 'actions') @observer class ServiceView extends
           <>
             {!service.isHibernating ? (
               <>
-                {showNavBar && (
-                  <WebControlsScreen service={service} />
-                )}
+                {showNavBar && <WebControlsScreen service={service} />}
                 <ServiceWebview
                   service={service}
                   setWebviewReference={setWebviewReference}
@@ -159,9 +158,11 @@ export default @inject('stores', 'actions') @observer class ServiceView extends
               </>
             ) : (
               <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.
+                <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.
               </div>
             )}
           </>
@@ -171,3 +172,5 @@ export default @inject('stores', 'actions') @observer class ServiceView extends
     );
   }
 }
+
+export default ServiceView;
diff --git a/src/components/services/content/ServiceWebview.js b/src/components/services/content/ServiceWebview.js
index c0f48793a..d3170be53 100644
--- a/src/components/services/content/ServiceWebview.js
+++ b/src/components/services/content/ServiceWebview.js
@@ -85,7 +85,8 @@ class ServiceWebview extends Component {
         useragent={service.userAgent}
         disablewebsecurity={service.recipe.disablewebsecurity ? true : undefined}
         allowpopups
-        webpreferences={`spellcheck=${isSpellcheckerEnabled ? 1 : 0}`}
+        nodeintegration
+        webpreferences={`spellcheck=${isSpellcheckerEnabled ? 1 : 0}, contextIsolation=1, enableRemoteModule=1`}
       />
     );
   }
diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.js
index bb93ff7d4..fb43fb816 100644
--- a/src/components/services/content/Services.js
+++ b/src/components/services/content/Services.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes, inject } from 'mobx-react';
 import { Link } from 'react-router';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import Confetti from 'react-confetti';
 import ms from 'ms';
 import injectSheet from 'react-jss';
@@ -14,23 +14,24 @@ import serverlessLogin from '../../../helpers/serverless-helpers';
 const messages = defineMessages({
   welcome: {
     id: 'services.welcome',
-    defaultMessage: '!!!Welcome to Ferdi',
+    defaultMessage: 'Welcome to Ferdi',
   },
   getStarted: {
     id: 'services.getStarted',
-    defaultMessage: '!!!Get started',
+    defaultMessage: 'Get started',
   },
   login: {
     id: 'services.login',
-    defaultMessage: '!!!Please login to use Ferdi.',
+    defaultMessage: 'Please login to use Ferdi.',
   },
   serverless: {
     id: 'services.serverless',
-    defaultMessage: '!!!Use Ferdi without an Account',
+    defaultMessage: 'Use Ferdi without an Account',
   },
   serverInfo: {
     id: 'services.serverInfo',
-    defaultMessage: '!!!Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner. If you are switching over (from one of the hosted servers) to using Ferdi without an account, please be informed that you can export your data from that server and subsequently import it using the Help menu to resurrect all your workspaces and configured services!',
+    defaultMessage:
+      'Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner. If you are switching over (from one of the hosted servers) to using Ferdi without an account, please be informed that you can export your data from that server and subsequently import it using the Help menu to resurrect all your workspaces and configured services!',
   },
 });
 
@@ -43,7 +44,10 @@ const styles = {
   },
 };
 
-export default @injectSheet(styles) @inject('actions') @observer class Services extends Component {
+@injectSheet(styles)
+@inject('actions')
+@observer
+class Services extends Component {
   static propTypes = {
     services: MobxPropTypes.arrayOrObservableArray,
     setWebviewReference: PropTypes.func.isRequired,
@@ -63,10 +67,6 @@ export default @injectSheet(styles) @inject('actions') @observer class Services
     services: [],
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   state = {
     showConfetti: true,
   };
@@ -112,11 +112,9 @@ export default @injectSheet(styles) @inject('actions') @observer class Services
       isSpellcheckerEnabled,
     } = this.props;
 
-    const {
-      showConfetti,
-    } = this.state;
+    const { showConfetti } = this.state;
 
-    const { intl } = this.context;
+    const { intl } = this.props;
     const isLoggedIn = Boolean(localStorage.getItem('authToken'));
 
     return (
@@ -131,25 +129,28 @@ export default @injectSheet(styles) @inject('actions') @observer class Services
           </div>
         )}
         {services.length === 0 && (
-          <Appear
-            timeout={1500}
-            transitionName="slideUp"
-          >
+          <Appear timeout={1500} transitionName="slideUp">
             <div className="services__no-service">
-              <img src="./assets/images/logo.svg" alt="Logo" style={{ maxHeight: '50vh' }} />
+              <img
+                src="./assets/images/logo.svg"
+                alt="Logo"
+                style={{ maxHeight: '50vh' }}
+              />
               <h1>{intl.formatMessage(messages.welcome)}</h1>
-              { !isLoggedIn && (
+              {!isLoggedIn && (
                 <>
                   <p>{intl.formatMessage(messages.login)}</p>
                   <p>{intl.formatMessage(messages.serverInfo)}</p>
                 </>
-              ) }
-              <Appear
-                timeout={300}
-                transitionName="slideUp"
-              >
-                <Link to={isLoggedIn ? '/settings/recipes' : '/auth/welcome'} className="button">
-                  { isLoggedIn ? intl.formatMessage(messages.getStarted) : 'Login' }
+              )}
+              <Appear timeout={300} transitionName="slideUp">
+                <Link
+                  to={isLoggedIn ? '/settings/recipes' : '/auth/welcome'}
+                  className="button"
+                >
+                  {isLoggedIn
+                    ? intl.formatMessage(messages.getStarted)
+                    : 'Login'}
                 </Link>
                 {!isLoggedIn && (
                   <button
@@ -167,27 +168,33 @@ export default @injectSheet(styles) @inject('actions') @observer class Services
             </div>
           </Appear>
         )}
-        {services.filter((service) => !service.isTodosService).map((service) => (
-          <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}` })}
-            enable={() => update({
-              serviceId: service.id,
-              serviceData: {
-                isEnabled: true,
-              },
-              redirect: false,
-            })}
-            isSpellcheckerEnabled={isSpellcheckerEnabled}
-          />
-        ))}
+        {services
+          .filter(service => !service.isTodosService)
+          .map(service => (
+            <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}` })}
+              enable={() =>
+                update({
+                  serviceId: service.id,
+                  serviceData: {
+                    isEnabled: true,
+                  },
+                  redirect: false,
+                })
+              }
+              isSpellcheckerEnabled={isSpellcheckerEnabled}
+            />
+          ))}
       </div>
     );
   }
 }
+
+export default injectIntl(Services);
diff --git a/src/components/services/content/WebviewCrashHandler.js b/src/components/services/content/WebviewCrashHandler.js
index 10ff0bbbb..a332602be 100644
--- a/src/components/services/content/WebviewCrashHandler.js
+++ b/src/components/services/content/WebviewCrashHandler.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import ms from 'ms';
 
 import Button from '../../ui/Button';
@@ -9,35 +9,33 @@ import Button from '../../ui/Button';
 const messages = defineMessages({
   headline: {
     id: 'service.crashHandler.headline',
-    defaultMessage: '!!!Oh no!',
+    defaultMessage: 'Oh no!',
   },
   text: {
     id: 'service.crashHandler.text',
-    defaultMessage: '!!!{name} has caused an error.',
+    defaultMessage: '{name} has caused an error.',
   },
   action: {
     id: 'service.crashHandler.action',
-    defaultMessage: '!!!Reload {name}',
+    defaultMessage: 'Reload {name}',
   },
   autoReload: {
     id: 'service.crashHandler.autoReload',
-    defaultMessage: '!!!Trying to automatically restore {name} in {seconds} seconds',
+    defaultMessage:
+      'Trying to automatically restore {name} in {seconds} seconds',
   },
 });
 
-export default @observer class WebviewCrashHandler extends Component {
+@observer
+class WebviewCrashHandler extends Component {
   static propTypes = {
     name: PropTypes.string.isRequired,
     reload: PropTypes.func.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   state = {
     countdown: ms('10s'),
-  }
+  };
 
   countdownInterval = null;
 
@@ -47,7 +45,7 @@ export default @observer class WebviewCrashHandler extends Component {
     const { reload } = this.props;
 
     this.countdownInterval = setInterval(() => {
-      this.setState((prevState) => ({
+      this.setState(prevState => ({
         countdown: prevState.countdown - this.countdownIntervalTimeout,
       }));
 
@@ -60,7 +58,7 @@ export default @observer class WebviewCrashHandler extends Component {
 
   render() {
     const { name, reload } = this.props;
-    const { intl } = this.context;
+    const { intl } = this.props;
 
     return (
       <div className="services__info-layer">
@@ -82,3 +80,5 @@ export default @observer class WebviewCrashHandler extends Component {
     );
   }
 }
+
+export default injectIntl(WebviewCrashHandler);
diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js
index e5892be5d..2474682df 100644
--- a/src/components/services/tabs/TabItem.js
+++ b/src/components/services/tabs/TabItem.js
@@ -1,6 +1,6 @@
-import { Menu, dialog, app, getCurrentWindow } from '@electron/remote';
+import { Menu, dialog, app } from '@electron/remote';
 import React, { Component } from 'react';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
@@ -20,56 +20,55 @@ const IS_SERVICE_DEBUGGING_ENABLED = (
 const messages = defineMessages({
   reload: {
     id: 'tabs.item.reload',
-    defaultMessage: '!!!Reload',
+    defaultMessage: 'Reload',
   },
   disableNotifications: {
     id: 'tabs.item.disableNotifications',
-    defaultMessage: '!!!Disable notifications',
+    defaultMessage: 'Disable notifications',
   },
   enableNotifications: {
     id: 'tabs.item.enableNotification',
-    defaultMessage: '!!!Enable notifications',
+    defaultMessage: 'Enable notifications',
   },
   disableAudio: {
     id: 'tabs.item.disableAudio',
-    defaultMessage: '!!!Disable audio',
+    defaultMessage: 'Disable audio',
   },
   enableAudio: {
     id: 'tabs.item.enableAudio',
-    defaultMessage: '!!!Enable audio',
+    defaultMessage: 'Enable audio',
   },
   enableDarkMode: {
     id: 'tabs.item.enableDarkMode',
-    defaultMessage: '!!!Enable Dark mode',
+    defaultMessage: 'Enable Dark mode',
   },
   disableDarkMode: {
     id: 'tabs.item.disableDarkMode',
-    defaultMessage: '!!!Disable Dark mode',
+    defaultMessage: 'Disable Dark mode',
   },
   disableService: {
     id: 'tabs.item.disableService',
-    defaultMessage: '!!!Disable Service',
+    defaultMessage: 'Disable service',
   },
   enableService: {
     id: 'tabs.item.enableService',
-    defaultMessage: '!!!Enable Service',
+    defaultMessage: 'Enable service',
   },
   hibernateService: {
     id: 'tabs.item.hibernateService',
-    defaultMessage: '!!!Hibernate Service',
+    defaultMessage: 'Hibernate service',
   },
   wakeUpService: {
     id: 'tabs.item.wakeUpService',
-    defaultMessage: '!!!Wake Up Service',
+    defaultMessage: 'Wake up service',
   },
   deleteService: {
     id: 'tabs.item.deleteService',
-    defaultMessage: '!!!Delete Service',
+    defaultMessage: 'Delete service',
   },
   confirmDeleteService: {
     id: 'tabs.item.confirmDeleteService',
-    defaultMessage:
-      '!!!Do you really want to delete the {serviceName} service?',
+    defaultMessage: 'Do you really want to delete the {serviceName} service?',
   },
 });
 
@@ -134,14 +133,44 @@ class TabItem extends Component {
     showMessageBadgesEvenWhenMuted: PropTypes.bool.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   @observable isPolled = false;
 
   @observable isPollAnswered = false;
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      showShortcutIndex: false,
+    };
+  }
+
+  handleShowShortcutIndex = () => {
+    this.setState({ showShortcutIndex: true });
+  };
+
+  checkForLongPress = () => {
+    let longpressDelay = null;
+    const longpressDelayDuration = 1000;
+
+    document.addEventListener(
+      'keydown',
+      e => {
+        if (e.ctrlKey || e.metaKey) {
+          longpressDelay = setTimeout(
+            this.handleShowShortcutIndex,
+            longpressDelayDuration,
+          );
+        }
+      },
+      { capture: true },
+    );
+
+    document.addEventListener('keyup', () => {
+      clearTimeout(longpressDelay);
+      this.setState({ showShortcutIndex: false });
+    });
+  };
+
   componentDidMount() {
     const { service } = this.props;
 
@@ -164,6 +193,8 @@ class TabItem extends Component {
         }
       });
     }
+
+    this.checkForLongPress();
   }
 
   render() {
@@ -185,7 +216,7 @@ class TabItem extends Component {
       showMessageBadgeWhenMutedSetting,
       showMessageBadgesEvenWhenMuted,
     } = this.props;
-    const { intl } = this.context;
+    const { intl } = this.props;
 
     const menuTemplate = [
       {
@@ -240,8 +271,9 @@ class TabItem extends Component {
             ? messages.wakeUpService
             : messages.hibernateService,
         ),
+        // eslint-disable-next-line no-confusing-arrow
         click: () =>
-          (service.isHibernating ? wakeUpService() : hibernateService()),
+          service.isHibernating ? wakeUpService() : hibernateService(),
         enabled: service.canHibernate,
       },
       {
@@ -256,7 +288,10 @@ class TabItem extends Component {
             detail: intl.formatMessage(messages.confirmDeleteService, {
               serviceName: service.name || service.recipe.name,
             }),
-            buttons: [intl.formatMessage(globalMessages.yes), intl.formatMessage(globalMessages.no)],
+            buttons: [
+              intl.formatMessage(globalMessages.yes),
+              intl.formatMessage(globalMessages.no),
+            ],
           });
           if (selection === 0) {
             deleteService();
@@ -283,7 +318,7 @@ class TabItem extends Component {
             service.unreadDirectMessageCount === 0 &&
             service.isIndirectMessageBadgeEnabled && (
               <span className="tab-item__message-count is-indirect">•</span>
-          )}
+            )}
           {service.isHibernating && (
             <span className="tab-item__message-count hibernating">•</span>
           )}
@@ -302,9 +337,11 @@ class TabItem extends Component {
           'is-disabled': !service.isEnabled,
         })}
         onClick={clickHandler}
-        onContextMenu={() => menu.popup(getCurrentWindow())}
+        onContextMenu={() => menu.popup()}
         data-tip={`${service.name} ${
-          shortcutIndex <= 9 ? `(${cmdOrCtrlShortcutKey(false)}+${shortcutIndex})` : ''
+          shortcutIndex <= 9
+            ? `(${cmdOrCtrlShortcutKey(false)}+${shortcutIndex})`
+            : ''
         }`}
       >
         <img src={service.icon} className="tab-item__icon" alt="" />
@@ -327,9 +364,12 @@ class TabItem extends Component {
             />
           </>
         )}
+        {shortcutIndex && this.state.showShortcutIndex && (
+          <span className="tab-item__shortcut-index">{shortcutIndex}</span>
+        )}
       </li>
     );
   }
 }
 
-export default SortableElement(TabItem);
+export default injectIntl(SortableElement(TabItem));
diff --git a/src/components/services/tabs/Tabbar.js b/src/components/services/tabs/Tabbar.js
index c1421a2b1..a77799819 100644
--- a/src/components/services/tabs/Tabbar.js
+++ b/src/components/services/tabs/Tabbar.js
@@ -4,7 +4,8 @@ import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 
 import TabBarSortableList from './TabBarSortableList';
 
-export default @observer class TabBar extends Component {
+@observer
+class TabBar extends Component {
   static propTypes = {
     services: MobxPropTypes.arrayOrObservableArray.isRequired,
     setActive: PropTypes.func.isRequired,
@@ -26,16 +27,13 @@ export default @observer class TabBar extends Component {
   };
 
   onSortEnd = ({ oldIndex, newIndex }) => {
-    const {
-      enableToolTip,
-      reorder,
-    } = this.props;
+    const { enableToolTip, reorder } = this.props;
 
     enableToolTip();
     reorder({ oldIndex, newIndex });
   };
 
-  shouldPreventSorting = (event) => event.target.tagName !== 'LI';
+  shouldPreventSorting = event => event.target.tagName !== 'LI';
 
   toggleService = ({ serviceId, isEnabled }) => {
     const { updateService } = this.props;
@@ -102,10 +100,10 @@ export default @observer class TabBar extends Component {
           toggleAudio={toggleAudio}
           toggleDarkMode={toggleDarkMode}
           deleteService={deleteService}
-          disableService={(args) => this.disableService(args)}
-          enableService={(args) => this.enableService(args)}
-          hibernateService={(args) => this.hibernateService(args)}
-          wakeUpService={(args) => this.wakeUpService(args)}
+          disableService={args => this.disableService(args)}
+          enableService={args => this.enableService(args)}
+          hibernateService={args => this.hibernateService(args)}
+          wakeUpService={args => this.wakeUpService(args)}
           openSettings={openSettings}
           distance={20}
           axis={axis}
@@ -118,3 +116,5 @@ export default @observer class TabBar extends Component {
     );
   }
 }
+
+export default TabBar;