However, the determination thereof seems to be a bit erratic. At least, I end up with a situation where a hbox has a width of 105 pixels right up until the point it becomes visible on the screen (I think), when it suddenly leaps by 32 pixels to 137.
Each hbox consists of 4 elements, 2 vboxes containing 16x1px images, a label containing the text to display and a space of width 5.
When the hbox is created, the 2 image vboxes have a width of zero. However the label inside has a width of 89. So it appears that the flex is being treated as 32 px anway. That's not so much of a problem - it's just confusing. More of a problem is the vboxes having a width of zero.
At some point in the proceedings, the vboxes get the correct width. And I'm not at all sure what is going on here. The code to create the image box is:
Code: Select all
_create_icon(icon, enclosure)
{
const vbox = document.createElement("vbox");
{
const spacer = document.createElement("spacer");
spacer.setAttribute("flex", "1");
vbox.appendChild(spacer);
}
const image = document.createElement("image");
image.setAttribute("src", icon);
image.setAttribute("maxwidth", "16");
image.setAttribute("maxheight", "16");
image.style.maxWidth = "16px";
image.style.maxHeight = "16px";
//FIXME Shouldn't set private attributes on the DOM. Should give each of
//these their own event handlers.
if (enclosure !== undefined)
{
image.setAttribute("data-playEnclosure", enclosure);
}
if (icon == "chrome://inforss/skin/closetab.png")
{
image.setAttribute("data-inforss", true);
}
vbox.appendChild(image);
{
const spacer = document.createElement("spacer");
spacer.setAttribute("flex", "1");
vbox.appendChild(spacer);
}
return vbox;
},