See this CSS file for the rule that adds the blue dot.

• https://dxr.mozilla.org/mozilla-release/source/browser/themes/shared/tabs.inc.css#601
• chrome://browser/skin/tabbrowser/indicator-tab-attention.svg

There seems to be an extra attribute (:not([selected="true"])) added to the selector:

.tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {}

Unfortunately, adding that extra attribute doesn't seem to have changed anything—the blue dot still appears. Here's the updated rule I used, still without success (please let me know if I made an error):

.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {

 background-image: none !important;

}

I don't have a test website that reloads pages and change the title, so I can check what is going on. If you have one that doesn't require to login then please post a link.

Hmm, the above code works for me:

/* Suppress blue dot on pinned tab */
.tabbrowser-tab > .tab-stack >
 .tab-content[pinned][titlechanged]:not([selected="true"]){
  background-image: none !important;
}

This also works for me:

/* Suppress blue dot on pinned tab */
.tabbrowser-tab > .tab-stack >
 .tab-content[pinned][titlechanged]:not([selected="true"]){
  background-size: 0px 0px;
}

If you want a more subtle sign of changes on the tab, you could apply a bottom border:

/* Suppress blue dot on pinned tab */
.tabbrowser-tab > .tab-stack >
 .tab-content[pinned][titlechanged]:not([selected="true"]){
  background-image: none !important;
  /* blue bottom border at 40% opacity */
  border-bottom: 2px solid rgba(0, 0, 255, 0.4);
}

For testing purposes, I pinned a tab and executed the following in the Web Console to modify the title every 5 seconds:

var titlechanger = window.setInterval(function(){document.title=document.title+'0';}, 5000);

More generally for Firefox 69: https://www.userchrome.org/firefox-changes-userchrome-css.html#fx69

Looks like I was asking the wrong question. As pointed out by jscher2000, starting with Firefox 69, toolkit.legacyUserProfileCustomizations.stylesheets needs to be set to true (in about:config) in order to use userChrome.css

I was having this problem, and didn't understand how to enable the rule in my .css sheet. For others who have the same question, these steps should work:

https://www.reddit.com/r/FirefoxCSS/comments/73dvty/tutorial_how_to_create_and_livedebug_userchromecss/

This is my userChrome.css:

@-moz-document url(chrome://browser/content/browser.xhtml) {

.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {

 background-image: none !important;
 }

}

norbertk said

I was having this problem, and didn't understand how to enable the rule in my .css sheet. For others who have the same question, these steps should work: https://www.reddit.com/r/FirefoxCSS/comments/73dvty/tutorial_how_to_create_and_livedebug_userchromecss/ This is my userChrome.css: @-moz-document url(chrome://browser/content/browser.xhtml) { .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { background-image: none !important; } }

Thank you for including this, didn't find this small, but important step anywhere else.

What would the jscher2000 said

Hmm, the above code works for me:

/* Suppress blue dot on pinned tab */
.tabbrowser-tab > .tab-stack >
 .tab-content[pinned][titlechanged]:not([selected="true"]){
  background-image: none !important;
}

This also works for me:

/* Suppress blue dot on pinned tab */
.tabbrowser-tab > .tab-stack >
 .tab-content[pinned][titlechanged]:not([selected="true"]){
  background-size: 0px 0px;
}

If you want a more subtle sign of changes on the tab, you could apply a bottom border:

/* Suppress blue dot on pinned tab */
.tabbrowser-tab > .tab-stack >
 .tab-content[pinned][titlechanged]:not([selected="true"]){
  background-image: none !important;
  /* blue bottom border at 40% opacity */
  border-bottom: 2px solid rgba(0, 0, 255, 0.4);
}

For testing purposes, I pinned a tab and executed the following in the Web Console to modify the title every 5 seconds:

var titlechanger = window.setInterval(function(){document.title=document.title+'0';}, 5000);

Thank you very much for outlining these style changes.

What would the style need to look like if I only wanted to disable the blue dot on a pinned Gmail tab?

Joshua said

What would the style need to look like if I only wanted to disable the blue dot on a pinned Gmail tab?

You need to match part of the tab text exactly. If you hover the mouse over the tab, a tooltip will show the label. For example, in my test the label contains @gmail.com - Gmail so I used that, but I don't know if it is 100% consistent as you navigate around Gmail, so you might need to adjust the rule.

Note that [label *= "some text"] matches that exact text anywhere in the label so you don't need to create separate rules for Inbox, Sent, etc.

/* Suppress blue dot on pinned Gmail tab */
.tabbrowser-tab[label*="@gmail.com - Gmail"] > .tab-stack >
.tab-content[pinned][titlechanged]:not([selected="true"]){
    background-size: 0px 0px;
}

Brilliant, that worked like a charm jscher2000. Thank you very much!