X
Tap here to go to the mobile version of the site.

Support Forum

Can I disable the blue light when a pinned tab updates?

Posted

When I receive a message in Slack or Messenger or Gmail, my pinned tab shows a cute blue dot to let me know that something happened. However, these sites' favicons already change to show the notification—and, in the case of Gmail, it's especially distracting because I don't *want* my immediately eye drawn to every single new email I get.

I'd like to be able to disable this light, or maybe have it only appear when the site doesn't change its own favicon.

When I receive a message in Slack or Messenger or Gmail, my pinned tab shows a cute blue dot to let me know that something happened. However, these sites' favicons already change to show the notification—and, in the case of Gmail, it's especially distracting because I don't *want* my immediately eye drawn to every single new email I get. I'd like to be able to disable this light, or maybe have it only appear when the site doesn't change its own favicon.

Chosen solution

You can use custom style rules to modify many aspects of Firefox's interface. To do that, you'll need to create a file named userChrome.css in a folder named chrome in a particular place. It should only take a few minutes, but you will need to quit/restart Firefox at least once, so you might not want to interrupt what you're doing right now.

The dot effect is added using a background image on the pinned tab. You can shrink the dot or hide it completely. Here are custom style rules for each of those possibilities:

/* Make the "title changed" notification dot on pinned tabs tiny */
  .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged] {
    background-position: center bottom !important;
    background-size: 4px !important;
  }
/* Completely hide the "title changed" notification dot on pinned tabs */
  .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged] {
    background-image: none !important;
  }

I've got the steps for creating a userChrome.css file on Windows in another thread, but I think Finder works a bit differently, so you might need to improvise a bit. cor-el also posted useful information:

https://support.mozilla.org/questions/1180489

Read this answer in context 6

Additional System Details

Application

  • User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:57.0) Gecko/20100101 Firefox/57.0

More Information

jscher2000
  • Top 10 Contributor
8783 solutions 71817 answers

Chosen Solution

You can use custom style rules to modify many aspects of Firefox's interface. To do that, you'll need to create a file named userChrome.css in a folder named chrome in a particular place. It should only take a few minutes, but you will need to quit/restart Firefox at least once, so you might not want to interrupt what you're doing right now.

The dot effect is added using a background image on the pinned tab. You can shrink the dot or hide it completely. Here are custom style rules for each of those possibilities:

/* Make the "title changed" notification dot on pinned tabs tiny */
  .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged] {
    background-position: center bottom !important;
    background-size: 4px !important;
  }
/* Completely hide the "title changed" notification dot on pinned tabs */
  .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged] {
    background-image: none !important;
  }

I've got the steps for creating a userChrome.css file on Windows in another thread, but I think Finder works a bit differently, so you might need to improvise a bit. cor-el also posted useful information:

https://support.mozilla.org/questions/1180489

You can use custom style rules to modify many aspects of Firefox's interface. To do that, you'll need to create a file named userChrome.css in a folder named chrome in a particular place. It should only take a few minutes, but you will need to quit/restart Firefox at least once, so you might not want to interrupt what you're doing right now. The dot effect is added using a background image on the pinned tab. You can shrink the dot or hide it completely. Here are custom style rules for each of those possibilities: /* Make the "title changed" notification dot on pinned tabs tiny */ .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged] { background-position: center bottom !important; background-size: 4px !important; } /* Completely hide the "title changed" notification dot on pinned tabs */ .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged] { background-image: none !important; } I've got the steps for creating a userChrome.css file on Windows in another thread, but I think Finder works a bit differently, so you might need to improvise a bit. cor-el also posted useful information: https://support.mozilla.org/questions/1180489
jscher2000
  • Top 10 Contributor
8783 solutions 71817 answers

I should note that those examples are global. If you want to create a rule specific to a particular website, you can create a separate rule for it, and include an unchanging and relatively unique part of its title (the one that appears when you hover the tab) in the selector as illustrated here:

.tabbrowser-tab[label*="gmail.com"] > .tab-stack > .tab-content[pinned][titlechanged] {

So for example if you wanted a tiny dot on sites other than Gmail:

/* Make the "title changed" notification dot on pinned tabs tiny */
  .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged] {
    background-position: center bottom !important;
    background-size: 4px !important;
  }

/* Completely hide the "title changed" notification dot on pinned Gmail tabs */
  .tabbrowser-tab[label*="gmail.com"] > .tab-stack > .tab-content[pinned][titlechanged] {
    background-image: none !important;
  }
I should note that those examples are global. If you want to create a rule specific to a particular website, you can create a separate rule for it, and include an unchanging and relatively unique part of its title (the one that appears when you hover the tab) in the selector as illustrated here: .tabbrowser-tab'''[label*="gmail''.''com"]''' > .tab-stack > .tab-content[pinned][titlechanged] { So for example if you wanted a tiny dot on sites other than Gmail: /* Make the "title changed" notification dot on pinned tabs tiny */ .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged] { background-position: center bottom !important; background-size: 4px !important; } /* Completely hide the "title changed" notification dot on pinned Gmail tabs */ .tabbrowser-tab[label*="gmail''.''com"] > .tab-stack > .tab-content[pinned][titlechanged] { background-image: none !important; }

Helpful Reply

Yay, thank you! It looks like this selector is a bit out of date (there's some additional conditions on it now), so I added a `!important` and everything worked great :)

I didn't realize there was this much customization power in Firefox! Today I learned how to use the Browser Toolbox to inspect things myself, which opens up some really neat possibilities :) Thanks for your help!!

Yay, thank you! It looks like this selector is a bit out of date (there's some additional conditions on it now), so I added a `!important` and everything worked great :) I didn't realize there was this much customization power in Firefox! Today I learned how to use the Browser Toolbox to inspect things myself, which opens up some really neat possibilities :) Thanks for your help!!
cor-el
  • Top 10 Contributor
  • Moderator
17564 solutions 158869 answers
See also: *https://dxr.mozilla.org/mozilla-release/source/browser/themes/shared/tabs.inc.css#464