Gravity title and Planet X question shift up or down when stringTest=long

[KatieWoe]

Test device: Dell laptop Operating System: Windows 8 and 10 Browser: Firefox and Chrome Problem description: For phetsims/QA/issues/180 When stringTest=long the string that represents the Planet X question shifts up noticeably on the first three screens. On the lab screen the title instead shifts down. In either case the two strings are noticeably closer than they should be. I'm also a bit unsure of the centering of the strings. Steps to reproduce:

1. Set stringTest=long
2. On the vectors screen (screen two) select the Planet X option (second from the bottom) and examine the layout
3. On the lab screen (screen four) select the Planet X option and compare the position of the gravity title string on that selection to its position in another selection.

Screenshots: Vectors Screen Lab Screen

Troubleshooting information (do not edit):

Name: ‪Masses and Springs‬ URL: https://bayes.colorado.edu/dev/html/masses-and-springs/1.0.0-rc.4/phet/masses-and-springs_all_phet.html Version: 1.0.0-rc.4 2018-08-24 22:56:24 UTC Flags: pixelRatioScaling User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36 Language: en-US Window: 1536x737 Pixel Ratio: 2.5/1 WebGL: WebGL 1.0 (OpenGL ES 2.0 Chromium) GLSL: WebGL GLSL ES 1.0 (OpenGL ES GLSL ES 1.0 Chromium) Vendor: WebKit (WebKit WebGL) Vertex: attribs: 16 varying: 30 uniform: 4096 Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 32) Max viewport: 16384x16384 OES_texture_float: true Dependencies JSON: {"assert":{"sha":"928741cf","branch":"HEAD"},"axon":{"sha":"37d5839c","branch":"HEAD"},"brand":{"sha":"89d28f63","branch":"HEAD"},"chipper":{"sha":"bc1f66fe","branch":"HEAD"},"dot":{"sha":"bd4d7035","branch":"HEAD"},"griddle":{"sha":"7be25724","branch":"HEAD"},"joist":{"sha":"8da47b06","branch":"HEAD"},"kite":{"sha":"3b76b24a","branch":"HEAD"},"masses-and-springs":{"sha":"0cd2d603","branch":"HEAD"},"phet-core":{"sha":"e0cec207","branch":"HEAD"},"phet-io":{"sha":"e5c7148f","branch":"HEAD"},"phet-io-wrapper-classroom-activity":{"sha":"5204ea8e","branch":"HEAD"},"phet-io-wrapper-lab-book":{"sha":"ccaaaa4b","branch":"HEAD"},"phet-io-wrappers":{"sha":"f3701e8d","branch":"HEAD"},"phetcommon":{"sha":"80414edb","branch":"HEAD"},"query-string-machine":{"sha":"1f2322e4","branch":"HEAD"},"scenery":{"sha":"3b05db54","branch":"HEAD"},"scenery-phet":{"sha":"f37bff38","branch":"HEAD"},"sherpa":{"sha":"ded365aa","branch":"HEAD"},"sun":{"sha":"00b9c74c","branch":"HEAD"},"tandem":{"sha":"3e1c8fd3","branch":"HEAD"},"twixt":{"sha":"050e8f19","branch":"HEAD"}}

[arouinfar]

@Denz1994 another way to describe this issue is that changing the value in the comboBox shifts the Gravity title on the Lab screen. Compare Planet X (left) to the Moon (right). When the numberControl is replaced with the string, the Gravity title is shifted down. This doesn't happen on other screens, where there's just an HSlider to control gravity.

[KatieWoe]

I've also noticed that the gravity title seems to shift from right to left when different options are selected. This may be easier to see with stringTest=X

[Denz1994]

GravityAndDampingControlNode.js has been refactored to use NumberControl.createLayoutFunction4() and https://phet-dev.colorado.edu/html/masses-and-springs/1.0.0-rc.5/phet/masses-and-springs_en_phet.html can be used to test this fix @KatieWoe.

Notes on implementation: The refactor removed a significant portion of alignments from all node children. Also, the visibility is handled internally within NumberControl. There is no longer a need for separate titles and their respective sliders. @arouinfar Could you also make sure the layout is as desired?

[Denz1994]

If everything looks good. Please assign to me so I can cherry pick the commits into master.

[KatieWoe]

I think it looks much better. @arouinfar final decision

[arouinfar]

Looks good, thanks @Denz1994!

[Denz1994]

Refactors have been cherry-picked into master. Closing.