Icons unrecognisable in the statusbar about vimperator-labs

[juriad]

In order to have small icons which don't expand the statusline (similar to @c6parmak's), this style works for me:

#liberator-statusline toolbarbutton {
    -moz-appearance: none !important;
    border: 0px solid none;
}

Maybe it could be tweaked a little so that at least some hover effect is present.

from vimperator-labs.

[omeid]

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

#liberator-bottombar toolbarbutton {
min-height: 32px;
     padding:0;
     margin:0;
}

This user script makes the statusline as it shows in "customize" mode.

from vimperator-labs.

[c6p]

While using DOM Inspector, I found that toolbarbuttons has strange border-widths, I tried setting them to 0px without any success.

Giving negative margins to icons in toolbarbuttons seems to solve squeezing for me on Firefox 44, margin-right is ignored though.
Edit: Apply to children, not only icon.

/* #liberator-statusline toolbarbutton .toolbarbutton-icon */
#liberator-statusline toolbarbutton > * {
  margin-top: -6px;
  margin-right: -9px;
  margin-bottom: -7px;
  margin-left: -9px;
}

Let's put everything on statusline, yay! (statusline height is16px)

from vimperator-labs.

[maxauthority]

That's a firefox issue, and nothing we can fix, as fix the height of the statusbar, as it would be too high otherwise.

[andrewshadura]

So you mean this can't be worked around? Why does it work with native Firefox toolbars or when toolbar editing mode is on?

[gkatsev]

When in editing mode, when you add the items into the toolbar, firefox will change the height of the toolbar to the tallest thing. When you save and exit that mode, vimperator will reset the height of the toolbar back to match the height that is set to match the text content.

Vimperator can do one of 3 things:

1. nothing
2. have firefox set the height of the toolbar
3. give users the ability to set the height

Option 1 sucks for people like you. Option 2 sucks because firefox might not set the height to be small enough by default for the statusbar to look good. And option 3 sucks because it adds another option to vimperator.

[maxauthority]

At least I don't know a solution how to fix it and also not the reason why
it happens. But I know that our toolbar in "Customize" mode is not
different to the location bar apart from generally being less height.

But yeah, if somebody does know how to fix it without destroying the design
(in terms of padding/margins) of the default Vimperator status bar, please
fix it!

On Mon, Jul 28, 2014 at 5:41 PM, Andrew Shadura [email protected]
wrote:

So you mean this can't be worked around? Why does it work with native
Firefox toolbars or when toolbar editing mode is on?

—
Reply to this email directly or view it on GitHub
#15 (comment)
.

[andrewshadura]

Okay, if that can't be fixed easily, could you please write a CSS changing this so I can add it to userChrome.css? I'm fine with such a solution if it fixes the issue for me.

[gkatsev]

You can actually change it via the :highlight command.
Tweak the pixel value below to be the height you like best.

:highlight CmdLine background: white; color: black; transition: all 0.25s; min-height: 32px !important;

PS.
If you open up chrome://browser/content/browser.xul in a tab, you can then use the firefox developer tools to inspect the vimeprator toolbar directly. It's awesome.

[andrewshadura]

I know I can. I never managed to tune it right, however. This line
doesn't work either, actually.

And yes, I know about XUL DOM inspector and friends, I played with
Mozilla extension development a bit in the past.

[gkatsev]

Wasn't even talking about the XUL DOM Inspector.

Anyway, what do you mean it doesn't work? It doesn't change the height of the status bar or it doesn't make the icons correct themselves?

[andrewshadura]

Right, you weren't, I was. I meant I know how to debug XUL.
It changes the height of the status bar (it's giant now), but the icons remain as compressed vertically as they were previously.

[gkatsev]

Ah, interesting. It's possibly not targeting the right element either.

[omeid]

Still looking for a fix for this.

[timss]

I played around with this a little bit, and it might seem that addons without icons at 24 px breaks, or if the addon doesn't use 24 px for its svg files. Can anyone confirm?

For example Self Destructing Cookies have an icon at 24 px, while µBlock does not and NoScript does not.

Tried to resize the icon in use by µBlock to 24x24, but didn't seem to help. I could have done something wrong though, or overseen some hardcoded 19 px in its source code. Here it is if anyone want to test:

https://github.com/gorhill/uBlock/blob/master/src/img/browsericons/icon19-off.png

For reference here is the icon used by Self Destructing Cookies in the screenshot, and the source code for the addon:

https://addons.mozilla.org/en-US/firefox/files/browse/277030/file/resources/self-destructing-cookies/data/toolbar-r.png

Information regarding addon icon sizes:

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Toolbars/Creating_toolbar_buttons#Icon_size

While a workaround could probably be made in Vimperator, it seems to me that the origin of this bug is poorly behaving addons, or have I misunderstood something?

[timss]

The new version 0.4.7 of Self-Destructing cookies breaks with a large icon.

Diff can be found here if anyone feels like digging further:

• https://addons.mozilla.org/en-US/firefox/files/compare/277030...297496/

[omeid]

After struggling a lot to try and make the vimperator statusline sane, I give up and moved to pentadactyl.

[Stebalien]

The following css fixes it:

#liberator-bottombar toolbarbutton {
    -moz-appearance: none;
    margin: 0px 2px;
}

from vimperator-labs.

[guyhughes]

@Stebalien You got more tipps? I'm getting this 😭

Trying this

#liberator-bottombar toolbarbutton, #liberator-statusline toolbarbutton {
    -moz-appearance: none;
    margin: 0px 2px;
}

from vimperator-labs.

[Stebalien]

For me, it works with noscript, ublock, and self-destructing cookies. I don't know what could be going wrong in your case. Sorry.

[maturanomx]

I'm getting this:

With this code:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

#liberator-bottombar toolbarbutton {
    min-height: 24px;
    padding: 0;
    margin: 0;
}

from vimperator-labs.