Attached a screenshot in the question that shows the wonky ratio.

What code are you using in Stylish or userChrome.css?

If you specify the width and the height with the same value then you shouldn't get such squash issues.

#personal-bookmarks > toolbarbutton.bookmark-item > .toolbarbutton-icon {
 height: 24px !important;
 width: 24px !important;
}

cor-el said

What code are you using in Stylish or userChrome.css? If you specify the width and the height with the same value then you shouldn't get such squash issues.

Hi cor-el, that's just it, regardless of specifying the exact height and width in userChrome.css, Stylish or Roomy Bookmarks, i.e. 24x24, they all come out squashed. This happens even if I change the theme from Simple White to the default Firefox theme, so I know it's not theme related.

I just can't figure out why the bookmarks bar doesn't expand.

Did you try to increase the height of the Bookmarks Toolbar and possible other items?

#PersonalToolbar, #personal-bookmarks { height: 35px !important; }

You may also have to check what margin and padding is applied to .bookmark-item.

Did you check in the DOM Inspector what rules are currently applied to various elements in the Bookmarks Toolbar?

• DOM Inspector: https://addons.mozilla.org/firefox/addon/dom-inspector-6622/
• https://developer.mozilla.org/Introduction_to_DOM_Inspector

Hi cor-el, thanks for your reply.

Yes, I tried dynamically manipulating the toolbar, the hboxes and the scrollbox (see screenshot) with increased height and additional padding via the DOM Inspector. Both worked but the icons remained squashed.

The toolbar itself doesn't seem to be the problem.

In the D.I. the hboxes flashed red as follows:

1. Around the icons, but the entire width of browser; 2. Around the icons, but only to the last icon;

The scrollbox also flashed the same as the second hbox.

I can't see anything else that would restrict the icon height. Unless there's something missing in the css, or a flow setting I don't know about.

But so far no amount of additional height or padding changes the icons in any way.

Interestingly, when I used the Roomy Bookmarks Toolbar add-on to decrease the icon size, the icons became narrower, i.e. horizontally squashed.

I don't know what that means, but it appears that anything other than 16x16 is simply not allowed.

Try the code without the ">":

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

#personal-bookmarks toolbarbutton.bookmark-item .toolbarbutton-icon {
 height: 24px !important;
 width: 24px !important;
}

Tried, thanks, but no change.

I also disabled Roomy Bookmarks Toolbar add-on in testing, no difference.

Lastly, I tried Stylish extension again, no change.

Did you check in the DOM inspector that Firefox is applying the rules to the images (i.e. the selector is correct)?

I'm afraid you've lost me; I'm not very conversant with the DOM Inspector.

Under all the listings of xul:image it says:

xbl:inherits="validate,src=image,label,consumeanchor"

Don't know what that means.

You need to switch the right Object pane to CSS rules to see what rules get applied to the selected element. You can also check the width and height and margins and padding values in the Box model tab (a padding will squash or stretch the image as well).

Some interesting things in Box Model/CSS:

Under 'hbox > hbox > hbox > image' Box Model shows a height of 18 and a width of 0. The css is: chrome://global/content/xul.css

hbox and 'hbox > hbox' is 1876 x 24; css is: chrome://global/content/minimal-xul.css

Scrollbox is also 1876 x 24, the css is: chrome://global/content/xul.css

and also: chrome://aios/skin/css/aios.css --

1. personal-bookmarks, #PlacesToolbarItems {

 -moz-box-orient: horizontal; }

In no instances is any padding shown on top or bottom. Margins are all zero.

As a test I disabled AOIS and restarted to see if the extension was causing the squashed icons, but it made no difference.

I'm wondering if the hbox > image height at 18 is causing the problem?

Do you have the height rule I posted above and does it show if you select either of those?

#PersonalToolbar, #personal-bookmarks { height: 35px !important; }

(best is to put a space before the # to start a pre tag)

Okay, here's my current setup:

1. userChrome.css (with a space before the '#'):

@namespace url("https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

#PersonalToolbar, #personal-bookmarks { height: 35px !important; }

#personal-bookmarks toolbarbutton.bookmark-item .toolbarbutton-icon {
height: 24px !important;
width: 24px !important;

}

2. hbox > image still shows a width of 0 and height of 18 with Dom Inspector Box Model; everything else now lists as 1876 x 24

The hbox itself shows as width 0 and height 0.

After restarting FF, the icons still appear as 16x16.

If I use Roomy Bookmarks add-on to increase the icon size to 24x24, they appear squashed.

When I disable the add-on and restart, the icons stay at 16 x16.

3. Something else I discovered:

Scrollbox shows as a height of 24 in Box Model, however the individual toolbarbutton nodes (class: bookmark-item) lists as height of 22, and the xul:image within shows width 16 and height 16.

It appears that the toolbar is resizing properly; I can see more height.

But despite userChrome.css, the icons are not resizing to 24x24, although the Box Model appears to be increasing to 24.