Right_Links icon indicating copy to clipboard operation
Right_Links copied to clipboard

Right Links toolbar button in Menu Panel is blurry

Open Gitoffthelawn opened this issue 10 years ago • 7 comments

When the Right Links toolbar button is placed in the new Firefox Menu Panel (aka App Panel), the icon looks pretty bad. It's because Firefox is scaling up a tiny toolbar button image into a huge Menu Panel button. Maybe you can add a button designed for the Menu Panel?

Gitoffthelawn avatar Nov 20 '14 22:11 Gitoffthelawn

I know... Unfortunately I don't have 32x32 icon (and I'm not a designer to easily draw it myself).

It's possible to resize icon to original 24x24, but there is weird margins (that should be corrected for new size): chrome://browser/skin/customizableui/panelUIOverlay.css

  /* Explanation for the below formula (A / B - C)
     A
       Each button is (22.35em / 3 - 0.1px) wide
     B
       Each button has two margins.
     C (46px / 2 = 23px)
       The button icon is 32 pixels wide.
       The button has 12px of horizontal padding (6 on each side).
       The button has 2px of horizontal border (1 on each side).
       Total width of button's icon + button padding should therefore be 46px,
       which means each horizontal margin should be the half the button's width - (46/2) px.
  */
  margin: 4px calc((22.35em / 3 - 0.1px) / 2 - 23px);

Infocatcher avatar Nov 21 '14 07:11 Infocatcher

Magic margins for userChrome.css or Stylish:

/* Don't resize icon in Australis (menu panel and customization area) */
#rightLinks-toggleStatus-tbutton[cui-areatype="menu-panel"] > .toolbarbutton-icon,
#customization-palette > toolbarpaletteitem[place="palette"] > #rightLinks-toggleStatus-tbutton > .toolbarbutton-icon {
    width: auto !important;
    height: auto !important;
    min-width: 24px !important;
    min-height: 24px !important;
    margin: 11px !important;
}

Infocatcher avatar Nov 21 '14 07:11 Infocatcher

What do you think of this (Right Link, get it?):

right-links

It's much cleaner than the old icon! I made it 32x32 to work in the menu panel.

Gitoffthelawn avatar Nov 22 '14 05:11 Gitoffthelawn

Looks not bad, thanks. But also needed 16x16 for toolbar and 24x24 for SeaMonkey (and for Firefox with Classic Theme Restorer).

Infocatcher avatar Nov 22 '14 14:11 Infocatcher

I strive for "not bad"! :-)

I'll see what I can do for the other sizes. But it will take some work. So let me know if you definitely want to use them before I invest the time.

Also, do they need to have an alpha layer (for transparency)?

Gitoffthelawn avatar Nov 22 '14 23:11 Gitoffthelawn

So let me know if you definitely want to use them before I invest the time.

Your icon is better than old one. :) And it's very easy to restore old appearance using userChrome.css... So, I'll use your icon of course. And thanks again for your efforts and interest.

And also needed special icons for disabled state, like https://github.com/Infocatcher/Right_Links/blob/0.3.8.4/chrome/content/icons16.png https://github.com/Infocatcher/Right_Links/blob/0.3.8.4/chrome/content/icons24.png

Also, do they need to have an alpha layer (for transparency)?

I think, yes, for dark themes (like NASA Night Launch).

Infocatcher avatar Nov 23 '14 15:11 Infocatcher

Sounds good... I'll work on them when I have some free time. There's more there than just one icon, so it will take some time.

Thank YOU for creating Right Links and keeping it maintained. I honestly can't use Firefox without it. Laptops generally don't have middle buttons, and external pointing devices generally use the wheel for a middle button, which makes it hard to press. Right Links is the solution!

Gitoffthelawn avatar Nov 23 '14 19:11 Gitoffthelawn