optimize margin around ComboBoxButton's arrow button

[pixelzoom]

Discussed with @ariel-phet.

ComboBoxButton's xMargin and yMargin are currently applied to both the item and the arrow parts of the button. But as xMargin increases, the margin around the arrow becomes unnecessarily large. In general, we want to keep the arrow part of the button looking roughly square. So...

I'll investigate computing the margin around the arrow so it looks square. If that's not possible, I'll add an arrowXMargin. I'd most definitely prefer the former.

[pixelzoom]

ComboBoxButton is now divided into 2 "areas" with a vertical separator between them.

The "item area" is to the left of the separator and displays the selected item. It's margin is determined by options xMargin and yMargin.

The "arrow area" is to the right of the separator and displays an up or down arrow, depending on the value of options.arrowDirection. This area is a square whose side length is maxItemLength + 2 * options.yMarin. The arrow is 0.35 * the side length (value was chosen by consulting with @ariel-phet).

This provides a uniform "look" for the button's arrow without requiring additional options. With the change and the changes in #430, many margin-related options have been reduced to xMargin and yMargin for ComboBox and its subcomponents.

Example in BLL:

Examples in Gas Properties:

Examples in scenery-phet demo:

[pixelzoom]

@ariel-phet please assign someone to review.

[pixelzoom]

@ariel-phet ping. I'd like to get the ComboBox work wrapped up.

[Denz1994]

@pixelzoom These options look great. Just one note and close if this is a non-issue.

Setting xMargin:0 and yMargin:0 causes the edges ComboBoxListItemNode.highlightRectangle to extend beyond the edges of the ComboListBox if the ComboListBox has a cornerRadius > 0.

Perhaps this is a good time to pass ComboBox.cornerRadius to ComboBoxListItemNode.highlightRectangle via const listItemNode = new ComboListItemNode(...) in ComboBoxListBox.js

Here is an example in Gas-Properties:

Also in MAS:

Assigning @pixelzoom for input.

[Denz1994]

Accidently closed.

[pixelzoom]

Thanks @Denz1994, good suggestion about corner radius.

Changes in the above commits:

• I added highlightCornerRadius to ComboBoxListItemNode, and the same value is used for the button, listbox and item highlights in the list. I cleared this design change with @ariel-phet, he gave it a thumbs up.

• This made me realize that xMargin and yMargin must be > 0, so I added assertions. Otherwise the highlights will overlap the edges of the listbox regardless of the cornerRadius. And since the highlight overlap is 1/2 the value of xMargin and yMargin, having zero margins makes no sense.

• This also made me realize that ComboBoxListItemNode should have responsibility for its own highlighting. So I moved the relevant input listener into ComboBoxListItemNode. This cleaned up the API quite a bit.

That said... There are undoubtedly ways to make ComboBox look bad. For example xMargin: 1, yMargin: 1, listLineWidth: 10 will look pretty awful. But rather than try to detect every case that might look bad, the designer and programmer need to take a certain amount of responsibility for looking at what they specified and evaluating whether it looks "good".

Back to you for review.

[Denz1994]

This is a definite improvement and I agree with the below comment:

the designer and programmer need to take a certain amount of responsibility for looking at what they specified and evaluating whether it looks "good".

Closing this one.