Turn off new email notification dots in Firefox tabs

I decided recently to try out Firefox again as a daily browser, but almost stopped early in the process when I couldn’t see a setting to turn off the new email notification dots Firefox was placing on my email tabs. I don’t want those pings on my attention to constantly note all the new incoming emails, so I always turn all email notifications off. (See my Productivity blog entries and YouTube series for more on this.) A web search revealed a solution, but it’s not straightforward so I made a video about it and include the instructions here.

1. Turn on the flag that enables customizations.
   new tab -> about:config
   search for UserProfile
   then set toolkit.legacyUserProfileCustomizations.stylesheets to true
   
2. Find your firefox profile directory.
   Menu -> Help -> More Troubleshooting Information
   Find Profile Directory on page
   
3. Go to your profile directory and create a directory named chrome if it doesn’t already exist
   
4. Go to the chrome directory and create userChrome.css, if it doesn’t exist
   
5. Make sure first line in userChrome.css is
   @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
6. Add the following below the @namespace line
   /* Completely hide the "title changed" notification dot on pinned tabs */
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged] {
background-image: none !important;
}
7. restart firefox

Hope this works for you and you find it useful. I did this on Firefox version 88, but it should work for a range of versions.