6 files changed, 60 insertions, 31 deletions

diff --git a/src/components/services/content/ServiceDisabled.js b/src/components/services/content/ServiceDisabled.js
index 732b6c003..b5af3743d 100644
--- a/src/components/services/content/ServiceDisabled.js
+++ b/src/components/services/content/ServiceDisabled.js
@@ -35,7 +35,7 @@ export default class ServiceDisabled extends Component {
     const { intl } = this.context;
 
     return (
-      <div className="services__crash-handler">
+      <div className="services__info-layer">
         <h1>{intl.formatMessage(messages.headline, { name })}</h1>
         <Button
           label={intl.formatMessage(messages.action, { name })}
diff --git a/src/components/services/content/ServiceWebview.js b/src/components/services/content/ServiceWebview.js
index abbf21dee..c146abf4e 100644
--- a/src/components/services/content/ServiceWebview.js
+++ b/src/components/services/content/ServiceWebview.js
@@ -65,6 +65,7 @@ export default class ServiceWebview extends Component {
 
     const webviewClasses = classnames({
       services__webview: true,
+      'services__webview-wrapper': true,
       'is-active': service.isActive,
       'services__webview--force-repaint': this.state.forceRepaint,
     });
@@ -85,29 +86,29 @@ export default class ServiceWebview extends Component {
             reload={reload}
           />
         )}
-        {!service.isEnabled && (
+        {!service.isEnabled ? (
           <ServiceDisabled
             name={service.recipe.name}
             webview={service.webview}
             enable={enable}
           />
+        ) : (
+          <Webview
+            ref={(element) => { this.webview = element; }}
+            autosize
+            src={service.url}
+            preload="./webview/plugin.js"
+            partition={`persist:service-${service.id}`}
+            onDidAttach={() => setWebviewReference({
+              serviceId: service.id,
+              webview: this.webview.view,
+            })}
+            onUpdateTargetUrl={this.updateTargetUrl}
+            useragent={service.userAgent}
+            muted={isAppMuted || service.isMuted}
+            allowpopups
+          />
         )}
-        <Webview
-          ref={(element) => { this.webview = element; }}
-          autosize
-          src={service.url}
-          preload="./webview/plugin.js"
-          partition={`persist:service-${service.id}`}
-          onDidAttach={() => setWebviewReference({
-            serviceId: service.id,
-            webview: this.webview.view,
-          })}
-          onUpdateTargetUrl={this.updateTargetUrl}
-          useragent={service.userAgent}
-          muted={isAppMuted || service.isMuted}
-          disablewebsecurity
-          allowpopups
-        />
         {statusBar}
       </div>
     );
diff --git a/src/components/services/content/WebviewCrashHandler.js b/src/components/services/content/WebviewCrashHandler.js
index d48152c18..d3e6951f3 100644
--- a/src/components/services/content/WebviewCrashHandler.js
+++ b/src/components/services/content/WebviewCrashHandler.js
@@ -62,7 +62,7 @@ export default class WebviewCrashHandler extends Component {
     const { intl } = this.context;
 
     return (
-      <div className="services__crash-handler">
+      <div className="services__info-layer">
         <h1>{intl.formatMessage(messages.headline)}</h1>
         <p>{intl.formatMessage(messages.text, { name })}</p>
         <Button
diff --git a/src/components/services/tabs/TabBarSortableList.js b/src/components/services/tabs/TabBarSortableList.js
index 2daf55676..489027d57 100644
--- a/src/components/services/tabs/TabBarSortableList.js
+++ b/src/components/services/tabs/TabBarSortableList.js
@@ -17,6 +17,8 @@ class TabBarSortableList extends Component {
     deleteService: PropTypes.func.isRequired,
     disableService: PropTypes.func.isRequired,
     enableService: PropTypes.func.isRequired,
+    showMessageBadgeWhenMutedSetting: PropTypes.bool.isRequired,
+    showMessageBadgesEvenWhenMuted: PropTypes.bool.isRequired,
   }
 
   render() {
@@ -30,6 +32,8 @@ class TabBarSortableList extends Component {
       disableService,
       enableService,
       openSettings,
+      showMessageBadgeWhenMutedSetting,
+      showMessageBadgesEvenWhenMuted,
     } = this.props;
 
     return (
@@ -50,6 +54,8 @@ class TabBarSortableList extends Component {
             disableService={() => disableService({ serviceId: service.id })}
             enableService={() => enableService({ serviceId: service.id })}
             openSettings={openSettings}
+            showMessageBadgeWhenMutedSetting={showMessageBadgeWhenMutedSetting}
+            showMessageBadgesEvenWhenMuted={showMessageBadgesEvenWhenMuted}
           />
         ))}
         {/* <li>
diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js
index a7136c43f..7aed8fda7 100644
--- a/src/components/services/tabs/TabItem.js
+++ b/src/components/services/tabs/TabItem.js
@@ -63,6 +63,8 @@ class TabItem extends Component {
     deleteService: PropTypes.func.isRequired,
     disableService: PropTypes.func.isRequired,
     enableService: PropTypes.func.isRequired,
+    showMessageBadgeWhenMutedSetting: PropTypes.bool.isRequired,
+    showMessageBadgesEvenWhenMuted: PropTypes.bool.isRequired,
   };
 
   static contextTypes = {
@@ -81,6 +83,8 @@ class TabItem extends Component {
       disableService,
       enableService,
       openSettings,
+      showMessageBadgeWhenMutedSetting,
+      showMessageBadgesEvenWhenMuted,
     } = this.props;
     const { intl } = this.context;
 
@@ -121,6 +125,26 @@ class TabItem extends Component {
     }];
     const menu = Menu.buildFromTemplate(menuTemplate);
 
+    let notificationBadge = null;
+    if ((showMessageBadgeWhenMutedSetting || service.isNotificationEnabled) && showMessageBadgesEvenWhenMuted && service.isBadgeEnabled) {
+      notificationBadge = (
+        <span>
+          {service.unreadDirectMessageCount > 0 && (
+            <span className="tab-item__message-count">
+              {service.unreadDirectMessageCount}
+            </span>
+          )}
+          {service.unreadIndirectMessageCount > 0
+            && service.unreadDirectMessageCount === 0
+            && service.isIndirectMessageBadgeEnabled && (
+              <span className="tab-item__message-count is-indirect">
+                •
+              </span>
+            )}
+        </span>
+      );
+    }
+
     return (
       <li
         className={classnames({
@@ -138,18 +162,7 @@ class TabItem extends Component {
           className="tab-item__icon"
           alt=""
         />
-        {service.unreadDirectMessageCount > 0 && (
-          <span className="tab-item__message-count">
-            {service.unreadDirectMessageCount}
-          </span>
-        )}
-        {service.unreadIndirectMessageCount > 0
-          && service.unreadDirectMessageCount === 0
-          && service.isIndirectMessageBadgeEnabled && (
-            <span className="tab-item__message-count is-indirect">
-            •
-            </span>
-          )}
+        {notificationBadge}
       </li>
     );
   }
diff --git a/src/components/services/tabs/Tabbar.js b/src/components/services/tabs/Tabbar.js
index fd4325107..ceb88c51c 100644
--- a/src/components/services/tabs/Tabbar.js
+++ b/src/components/services/tabs/Tabbar.js
@@ -18,6 +18,8 @@ export default class TabBar extends Component {
     toggleAudio: PropTypes.func.isRequired,
     deleteService: PropTypes.func.isRequired,
     updateService: PropTypes.func.isRequired,
+    showMessageBadgeWhenMutedSetting: PropTypes.bool.isRequired,
+    showMessageBadgesEvenWhenMuted: PropTypes.bool.isRequired,
   }
 
   onSortEnd = ({ oldIndex, newIndex }) => {
@@ -30,6 +32,8 @@ export default class TabBar extends Component {
     reorder({ oldIndex, newIndex });
   };
 
+  shouldPreventSorting = event => event.target.tagName !== 'LI';
+
   toggleService = ({ serviceId, isEnabled }) => {
     const { updateService } = this.props;
 
@@ -62,6 +66,8 @@ export default class TabBar extends Component {
       toggleNotifications,
       toggleAudio,
       deleteService,
+      showMessageBadgeWhenMutedSetting,
+      showMessageBadgesEvenWhenMuted,
     } = this.props;
 
     return (
@@ -71,6 +77,7 @@ export default class TabBar extends Component {
           setActive={setActive}
           onSortEnd={this.onSortEnd}
           onSortStart={disableToolTip}
+          shouldCancelStart={this.shouldPreventSorting}
           reload={reload}
           toggleNotifications={toggleNotifications}
           toggleAudio={toggleAudio}
@@ -82,6 +89,8 @@ export default class TabBar extends Component {
           axis="y"
           lockAxis="y"
           helperClass="is-reordering"
+          showMessageBadgeWhenMutedSetting={showMessageBadgeWhenMutedSetting}
+          showMessageBadgesEvenWhenMuted={showMessageBadgesEvenWhenMuted}
         />
       </div>
     );