1 files changed, 83 insertions, 4 deletions

diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js
index efa5fa60c..479f151a6 100644
--- a/src/components/services/tabs/TabItem.js
+++ b/src/components/services/tabs/TabItem.js
@@ -5,9 +5,14 @@ import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
 import { SortableElement } from 'react-sortable-hoc';
+import injectSheet from 'react-jss';
+import ms from 'ms';
 
+import { observable, autorun } from 'mobx';
 import ServiceModel from '../../../models/Service';
-import { ctrlKey } from '../../../environment';
+import { ctrlKey, cmdKey } from '../../../environment';
+
+const IS_SERVICE_DEBUGGING_ENABLED = (localStorage.getItem('debug') || '').includes('Franz:Service');
 
 const { Menu } = remote;
 
@@ -50,9 +55,38 @@ const messages = defineMessages({
   },
 });
 
-@observer
-class TabItem extends Component {
+const styles = {
+  pollIndicator: {
+    position: 'absolute',
+    bottom: 2,
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+    background: 'gray',
+    transition: 'background 0.5s',
+  },
+  pollIndicatorPoll: {
+    left: 2,
+  },
+  pollIndicatorAnswer: {
+    left: 14,
+  },
+  polled: {
+    background: 'yellow !important',
+    transition: 'background 0.1s',
+  },
+  pollAnswered: {
+    background: 'green !important',
+    transition: 'background 0.1s',
+  },
+  stale: {
+    background: 'red !important',
+  },
+};
+
+@injectSheet(styles) @observer class TabItem extends Component {
   static propTypes = {
+    classes: PropTypes.object.isRequired,
     service: PropTypes.instanceOf(ServiceModel).isRequired,
     clickHandler: PropTypes.func.isRequired,
     shortcutIndex: PropTypes.number.isRequired,
@@ -71,8 +105,33 @@ class TabItem extends Component {
     intl: intlShape,
   };
 
+  @observable isPolled = false;
+
+  @observable isPollAnswered = false;
+
+  componentDidMount() {
+    const { service } = this.props;
+
+    if (IS_SERVICE_DEBUGGING_ENABLED) {
+      autorun(() => {
+        if (Date.now() - service.lastPoll < ms('0.2s')) {
+          this.isPolled = true;
+
+          setTimeout(() => { this.isPolled = false; }, ms('1s'));
+        }
+
+        if (Date.now() - service.lastPollAnswer < ms('0.2s')) {
+          this.isPollAnswered = true;
+
+          setTimeout(() => { this.isPollAnswered = false; }, ms('1s'));
+        }
+      });
+    }
+  }
+
   render() {
     const {
+      classes,
       service,
       clickHandler,
       shortcutIndex,
@@ -97,6 +156,7 @@ class TabItem extends Component {
     }, {
       label: intl.formatMessage(messages.reload),
       click: reload,
+      accelerator: `${cmdKey}+R`,
     }, {
       label: intl.formatMessage(messages.edit),
       click: () => openSettings({
@@ -141,7 +201,7 @@ class TabItem extends Component {
                 •
             </span>
           )}
-          {service.isHibernating && !service.disableHibernation && (
+          {service.isHibernating && !service.isHibernationEnabled && (
             <span className="tab-item__message-count hibernating">
               •
             </span>
@@ -153,6 +213,7 @@ class TabItem extends Component {
     return (
       <li
         className={classnames({
+          [classes.stale]: IS_SERVICE_DEBUGGING_ENABLED && service.lostRecipeConnection,
           'tab-item': true,
           'is-active': service.isActive,
           'has-custom-icon': service.hasCustomIcon,
@@ -168,6 +229,24 @@ class TabItem extends Component {
           alt=""
         />
         {notificationBadge}
+        {IS_SERVICE_DEBUGGING_ENABLED && (
+          <>
+            <div
+              className={classnames({
+                [classes.pollIndicator]: true,
+                [classes.pollIndicatorPoll]: true,
+                [classes.polled]: this.isPolled,
+              })}
+            />
+            <div
+              className={classnames({
+                [classes.pollIndicator]: true,
+                [classes.pollIndicatorAnswer]: true,
+                [classes.pollAnswered]: this.isPollAnswered,
+              })}
+            />
+          </>
+        )}
       </li>
     );
   }