New Ublock Icon?

[typhoon71]

Hi, after upgrading with firefox 42 I noticed the uBlock Icon looks different (the number of blocked elements is bigger and in the center of the red shield icon (see pic).

Is that normal?

[gorhill]

Are you using the legacy toolbar button? If not, where the badge is position is controlled by Firefox. If yes, the badge is supposed to be bottom left.

[typhoon71]

I don't know if I'm using what you're calling "legacy toolbar button", but with previous firefox (41 and previous) the number were positioned in the bottom right. As you can see I'm using a theme, so I checked what happens if I use the standard firefox 42 one: the badge is on the upper left... So something is wrong I suppose, but I don't know if it's firefox, the theme or uBlock. Personally as long the badge is small I'm happy.

[gorhill]

if I use the standard firefox 42 one: the badge is on the upper left

Looks like you have user styles affecting uBO's badge, Firefox is supposed to position it top-right by default.

[gorhill]

Do you know how to use Developer => Browser Toolbox? You could use it to see what CSS rules are applied to the badge, and from where the rules originate.

[typhoon71]

ops, a typo, with firefox default the badge is in the upper right. let's check plugins and themes one by one...

[typhoon71]

Sadly I don't know how how to use Developer => Browser Toolbox; for now I found out it is indeed a theme (FT DeepDark) causing the glitch. I'll let the Dev know but fixing it will take time (dev doesn't have much time to work on the theme) How to I use Developer => Browser Toolbox? If I could find the rule would you be willing to help me meke a counter rule as a temp fix?

[Halibut80]

@typhoon71 Try in Stylish or userChrome.css this code:

@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");
@namespace svg url(http://www.w3.org/2000/svg);

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

  toolbarbutton > .toolbarbutton-badge-stack {
    display: -moz-box!important;
    box-sizing: border-box!important;
    -moz-box-align: center!important;
    -moz-box-pack: center!important;
  }
  toolbarbutton .toolbarbutton-badge {
    -moz-box-ordinal-group: 1!important;
    background-color: transparent !important;
  }
  toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon {
    -moz-box-ordinal-group: 2!important;
  }
}

Your issue is similar to the causes by Classic Theme Restorer, and style fix this:
 

 

[typhoon71]

Used the stylish fix (by Halibut80) and it now appears like this:

which is way better than before, thanks. Is there a way to put the number on the right? That would be nicer for my tastes, but it's not really important now. Anyway: thanks Halibut80. Btw: where does one find all those style "rules"?

I already let the theme dev know about this, and I suppose he will work on it soon or later since there's other little bugs needing fixes, like the audio icon on tabs not appearing.

[Halibut80]

@typhoon71 just delete -moz-box-ordinal-group rules for right side badge position.

Btw: where does one find all those style "rules"?

Use DOM Inspector and Custom Buttons + Attributes Inspector. Click "Attributes Inspector" button, highlight browser element and middle-click on them. In opened "DOM Inspector" window select "CSS Rules" tab to see all applied rules for this element.

[typhoon71]

OK, numbers on the right now, thanks again Halibut80. I'll try DOM Inspector, Custom Buttons, Attributes Inspector later... I see it's like a hunt... ;) But I guess point and click will be helpful. Thanks for this too. I suppose this can be closed right?

[happysurf]

In any case from Firefox 42 and up, with default theme, clean profile and also in safe mode the uBO icon is bigger than previous one. At moment I have fixed the problem (for all extensions with badge) with this code: .toolbarbutton-badge { font-weight: regular !important; font-size: 11px !important; }

[typhoon71]

happysurf, where do you put that code? I added it to the fix by Halibut80 but I don't see any difference. I think I did it wrong or omitted something...

[happysurf]

You must added the code in your userChrome.css file inside your profile.

[typhoon71]

ehm, I don't have that file in my profile, I suppose it's OK to create aan empty one and past that code? I did that and I can't see the difference. Maybe something else aready taking care of it?

[happysurf]

Create a new folder inside your profile named chrome, then create a new notepad txt file with this code: @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); @namespace html url("http://www.w3.org/1999/xhtml"); @namespace svg url(http://www.w3.org/2000/svg);

.toolbarbutton-badge { font-weight: regular !important; font-size: 11px !important; }

Close the file and rename in userChrome.css , then put this into the new folder. Restart Firefox and enjoy.

[typhoon71]

Thanks.

[typhoon71]

Just saying, it's back to normal, almost, after uBlock0 update.