Favicon unread badge: improve behavior & style

app/soapbox/components/helmet.js

@@ -7,6 +7,8 @@ import { getSettings } from 'soapbox/actions/settings';
 import sourceCode from 'soapbox/utils/code';
 import FaviconService from 'soapbox/utils/favicon_service';
 
+FaviconService.initFaviconService();
+
 const getNotifTotals = state => {
   const notifications = state.getIn(['notifications', 'unread'], 0);
   const chats = state.get('chats').reduce((acc, curr) => acc + Math.min(curr.get('unread', 0), 1), 0);
@@ -34,16 +36,30 @@ class SoapboxHelmet extends React.Component {
     demetricator: PropTypes.bool,
   };
 
-  addCounter = title => {
+  hasUnread = () => {
     const { unreadCount, demetricator } = this.props;
+    return !(unreadCount < 1 || demetricator);
+  }
 
-    if (unreadCount < 1 || demetricator) {
+  addCounter = title => {
-      // Erase badge when there are no notifications
+    const { unreadCount } = this.props;
-      FaviconService.clearFaviconBadge();
+    const hasUnread = this.hasUnread();
-      return title;
+    return hasUnread ? `(${unreadCount}) ${title}` : title;
-    } else {
+  }
+
+  updateFaviconBadge = () => {
+    const hasUnread = this.hasUnread();
+
+    if (hasUnread) {
       FaviconService.drawFaviconBadge();
-      return `(${unreadCount}) ${title}`;
+    } else {
+      FaviconService.clearFaviconBadge();
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.unreadCount !== prevProps.unreadCount || this.props.demetricator !== prevProps.demetricator) {
+      this.updateFaviconBadge();
     }
   }
 

app/soapbox/main.js

@@ -12,7 +12,6 @@ import * as perf from './performance';
 import * as monitoring from './monitoring';
 import ready from './ready';
 import { NODE_ENV } from 'soapbox/build_config';
-import FaviconService from 'soapbox/utils/favicon_service';
 
 function main() {
   perf.start('main()');
@@ -20,9 +19,6 @@ function main() {
   // Sentry
   monitoring.start();
 
-  // Favicon unread badge
-  FaviconService.initFaviconService();
-
   ready(() => {
     const mountNode = document.getElementById('soapbox');
 

app/soapbox/utils/favicon_service.js

@@ -5,7 +5,7 @@ const createFaviconService = () => {
   const favicons = [];
   const faviconWidth = 128;
   const faviconHeight = 128;
-  const badgeRadius = 32;
+  const badgeRadius = 24;
 
   const initFaviconService = () => {
     const nodes = document.querySelectorAll('link[rel="icon"]');
@@ -44,7 +44,7 @@ const createFaviconService = () => {
       if (!favimg || !favcontext || !favcontext) return;
 
       const style = getComputedStyle(document.body);
-      const badgeColor = `${style.getPropertyValue('--badgeNotification') || 'rgb(240, 100, 100)'}`;
+      const badgeColor = `${style.getPropertyValue('--badge-notification') || 'rgb(255, 0, 0)'}`;
 
       if (isImageLoaded(favimg)) {
         favcontext.drawImage(favimg, 0, 0, favimg.width, favimg.height, 0, 0, faviconWidth, faviconHeight);