Mass boxes misaligned relative to each other

[EthanWJohnson]

Not a big issue or bug, just a graphics/box alignment annoyance. If you look at the mass boxes in the second, third and fourth screens they are inconsistently sized/misaligned with each other This is on a fresh load. Black bars for reference on where they align graphically. The differences are by only a few pixels but fairly noticeable; 1.) On the right boxes (the one with the man and girl) all boxes except for the man are 27 pixels in height. The man's box is 25 pixels tall, and this slightly squashes the lettering inside the box 2.) In the right box, both the present and trash can's mass box is aligned higher than the man and girl's box, by two and three pixels respectively. 3.) In the left box, the refrigerator mass box is 30 pixels tall, compared to the crate mass boxes which are 28 pixels tall. 4.) The refrigerator box is aligned one pixel higher than the crate boxes. 5.) On the fourth screen, the water bucket box is the only box aligned/sized consistently with another object, being aligned with the girl's box

I find the misalignment a bit odd since otherwise in the boxes each object is aligned with each other consistently on their lower sides. It's only a slight misalignment and not really a bug; just annoying to look at. It seems to be based on their full-scale sizes when pulled out as they are all roughly aligned/same sized as each other?

Found? in relation to https://github.com/phetsims/QA/issues/57, but it's technically ancient.

[jessegreenberg]

@ariel-phet should we spend time to clean this up? This is happening because the surrounding rectangles are sized by their value text, and the position of the mass labels is hard coded as

self.labelNode.bottom = normalImageNode.height - 2;

[jessegreenberg]

This is happening because the surrounding rectangles are sized by their value text

That doesn't explain why the standing man's label is smaller than the others. Im not sure why that is yet.

[ariel-phet]

@EthanWJohnson thanks for pointing this out

@jessegreenberg if it is not a huge amount of work to clean up, it would be a nice detail touch. This may be vestigial since this sim was so early on in HTML5 and we did not have some of our nicer alignment strategies developed yet.

I would say if more than 2 hours of work, mark deferred, but if fairly straightforward to clean up go ahead and take care of it.

[jessegreenberg]

Sounds good, I expect about an hour, but maybe less. I recall other alignment issues in the toolbox, here is at least one other that we did with S2015R: https://github.com/phetsims/forces-and-motion-basics/issues/161

For some reason that issue only considered acceleration screen.

[jessegreenberg]

For the sizing issue, i see this param in the constructor:

   // @param {number} homeScale - additional scale factor for when the item is in the toolbox

It is likely scaling down the whole node including the label.

[jessegreenberg]

@ariel-phet also suggested that we move the labels up a bit generally to give more space along the bottom.

[jessegreenberg]

Above commit ensures that the mass labels are always the same size. Still need to make sure that the items are aligned and add a bit more space.

[jessegreenberg]

Done in the above commits.

[jessegreenberg]

These commits need to be cherry-picked into release branches:

• https://github.com/phetsims/forces-and-motion-basics/commit/0b424e912ed12d672c788abbddd408da6389a2c0
• https://github.com/phetsims/forces-and-motion-basics/commit/5b12f116db23a3d94608c593009a2547972e6ad8
• https://github.com/phetsims/forces-and-motion-basics/commit/b72c1f0406ef0e9d8792ea227f8174e4afec8a66

[EthanWJohnson]

Boxes are a lot better; can hardly tell the difference between them. Looks good!