When is the size of a box (or similar) calculated

Talk about code development, features, specific bugs, enhancements, patches, and similar things.
Forum rules
Please keep everything here strictly on-topic.
This board is meant for Pale Moon source code development related subjects only like code snippets, patches, specific bugs, git, the repositories, etc.

This is not for tech support! Please do not post tech support questions in the "Development" board!
Please make sure not to use this board for support questions. Please post issues with specific websites, extensions, etc. in the relevant boards for those topics.

Please keep things on-topic as this forum will be used for reference for Pale Moon development. Expect topics that aren't relevant as such to be moved or deleted.
thosrtanner
Lunatic
Lunatic
Posts: 395
Joined: 2014-05-10, 18:19
Location: UK

When is the size of a box (or similar) calculated

Unread post by thosrtanner » 2019-10-15, 13:54

In my inforss extension I occasionally need to refer to how big a box is going to be, for such things as determining if scrolling the new is going to be required.

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;
  },

Locked