Pocket icon is tiny

[favadi]

As the title.

• FireFox version: 46.0.1
• OS: OS X 10.11.4 (macbook pro 2015 retina)

btw, the bookmark, download and home icons look very low quality.

[johngraciliano]

Wow! Yes that is tiny, even smaller than the drop arrow that is next to it; I could not recognize it at first glance. I will do my best to solve this problem,* however, since it does not show in my system, I may need your assistance to test any possible solution. On this regard: Do you know if this happens with Firefox 45? Was this a problem in the previous version of the theme? I suspect the answer to both questions is no. Do you have the extension _Stylish_? It would be useful for trying out a solution by adding a few lines of code. Other ways to try a solution may be much more complicated.

On a separate note, there is issue #26 about the graphics quality. Currently the theme has only 92dpi (1dot=1pixel) images for the standard toolbar buttons\ and many other graphics. I recently changed to the stop/go/reload buttons and the drop arrow that should appear at the end of the address bar. I do not see those icons in your image. Is that because the box on the right of the buttons is the search bar? I really need feedback regarding that issue, otherwise it will remain with low priority.

---

*I suspect the solution is really simple. **Except for Sync Tabs.

[favadi]

Do you know if this happens with Firefox 45? Was this a problem in the previous version of the theme?

I don't know, this is my first time install the theme. But if it is important, I can install old version to test.

Do you have the extension Stylish?

No, but I can install it. Please just tell what you want me to test.

[johngraciliano]

You may install Stylish from its page at AMO. Then you can try a quick and dirty solution by opening to the Add-ons manager, selecting the User Styles section, and writing a new style (button on the top left) with the content:

toolbarbutton#pocket-button > .toolbarbutton-icon{
  min-height: 24px;
  min-width: 32px;
  padding: 2px 6px;
  border: 1px solid transparent;
}

Then give it a name and save it. It that does not work try:

toolbarbutton#pocket-button > .toolbarbutton-icon{
  min-height: 24px !important;
  min-width: 32px !important;
  padding: 2px 6px !important;
  border: 1px solid transparent !important;
}

Also, please make sure this problem is particular to the theme and it is not caused by any extension.
I checked the code trying to find any reason for the problem you experience but I was not able to find anything. If the problem is particular for the mac platform (and it seems it may be) is going to be more difficult for me to find the solution. Are you familiar with _Firefox Developer Tools_ (you access them when you press F12)?

[dev-tee]

I can confirm that your fix works on OSX 10.11.5 and Firefox 47.0. I am also able to report that I didn't have this problem before. After digging around with the dev tools, I found a line that might represent the root of the problem. chrome://pocket/skin/pocket.css starts like this:

@import url("chrome://pocket-shared/skin/pocket.css");

#pocket-button[cui-areatype="toolbar"] > .toolbarbutton-icon {
  max-width: 18px;
  margin: 0;
}

Deactivating the rule on line 3 through the Browser Toolbox also seems to fix this problem. Unfortunately I don't know what this css file looked like on previous releases but I hope I was still able to help. If you need more information I can check previous versions and report what I find, (possibly) by the day after tomorrow.

[johngraciliano]

@dev-tee: Thank you so very much to the information! That rule has nothing to do with _Simple White X_. However, the problem is that _Simple White X_ changes the resources used for the icon in a non-standard way. I probably just have to override the max-width in the theme. I will investigate a bit further and hopefully I will get a proper solution. Sorry for the delayed response. I may take a bit to actually do the change too.

[johngraciliano]

@dev-tee: Again, thank you very much for finding the reason for this problem. Looking carefully, I realized the theme sets a padding of 6px to both sides of the icon when it is in the navigation bar. Setting a max-width of 18px leaves only 4px for the image because there is also a tranparent border, therefore it will be tiny. The css used in the Windows version is different. I sets the max-width only if the button is on the tabs toolbar or in the overflow list. In those cases is not a problem. I am inserting in the code: `

nav-bar #pocket-button[cui-areatype="toolbar"] > .toolbarbutton-icon {

max-width: none; } ` Please try the last pre-release.

[dev-tee]

Pre-release version confirmed working on OSX 10.11.5 and Firefox version 47.0 as well as version 47.0.1. Thanks for taking the time.