Incorrect font when in TabPane and focus changes

[mrjfalk]

If the application has the following CSS applied: .root { -fx-font: 2.0em "Arial"; }

And the following JavaFX scene:

Gauge gauge = new Gauge(SkinType.SIMPLE_SECTION);
gauge.setValue(10);
gauge.setTitle("Title");
gauge.setUnit("Unit");

TabPane pane = new TabPane(new Tab("Tab", gauge));

Scene scene = new Scene(pane);
scene.getStylesheets().add(GaugeSample.class.getResource("myStyles.css").toExternalForm());
primaryStage.setScene(scene);
primaryStage.show();

Now comes the interesting part (see image: https://imgur.com/a/sLAnS6U):

1. First click somewhere in the tab header (on the tab, or beside it, see red area in image)
2. Make the window loose focus, e.g. click outside of the window. The valueText of SimpleSectorSkin will now get the font style as specified in the .root class in the CSS file. (see middle image)
3. Make the window regain focus by clicking it again. Now the valueText of SimpleSectionSkin will get the system default font. (see right image)

The reason why only valueText is affected and not titleText or unitText is because valueText only calls setFont() in resize() and not in redraw().

I've tried debugging JavaFX a bit and understand why JavaFX overwrites with the CSS values, and why it only happens if you've first given focus to the tab header, but haven't found a good answer.

My suggestion is to call resizeValueText() inside redraw() instead of resize() for SimpleSectionSkin. And apply similar fixes for other skins which are affected (e.g. SpaceX skin where all labels have the same bug).

I can submit a pull request with those fixes (at least for the skins I've fixed) if you think it sounds like an acceptable workaround?