Stop scrollbars from flickering on/off when resizing windows

[rjwills28]

We noticed that when you resize a window with the mouse you can see scroll bars flicker on and off. See attached screencast showing this:
scrollbar_flicker.webm

You will also see that even when the window is made smaller than the screen in one direction, you still get scroll bars appear in both x and y even though they are only needed in one.

The issue is caused by code that attempts to resize the widget pane to fill the parent scroll pane:

phoebus/app/display/representation-javafx/src/main/java/org/csstudio/display/builder/representation/javafx/JFXRepresentation.java

Line 651 in 11eb814

private void handleViewportChanges()

This is a workaround to another issue of setting the background of a ScrollPane, see comments in code here:

phoebus/app/display/representation-javafx/src/main/java/org/csstudio/display/builder/representation/javafx/JFXRepresentation.java

Line 939 in 11eb814

// Setting the "-fx-background:" of the root node propagates

Essentially you can not set the background of the ScrollPane without it propagating down to the children node. Instead, the background was set on the widget pane and then a listener is added so that whenever the scrollpane is resized, the widget pane gets resized using its setMinSize() method to fill the ScrollPane. This must be causing some race condition where it momentarily thinks the pane is too small for the content and so puts on scroll bars before realising it is not and then removing them.

The fix for the scroll bar issue described above is to remove this listener and the resizing of the widget pane. However this then leaves us with this problem of setting the background. I have been able to fix this by:

• setting the background on the Scroll pane's parent BorderPane.
• then setting the ScrollPane background to be transparent so we see the BorderPane's background underneath.
• Set the widget pane background as well to work around a JFX bug where a transparent ScrollPane causes text to render differently (see https://bugs.openjdk.org/browse/JDK-8118303 and https://bugs.openjdk.org/browse/JDK-8095008).

I have tested this with all widgets and noticed some different behavior for the Tabs widget where the tab label text was white, as was the border. I fixed this by explicitly setting them in the code.

I think my implementation also goes some way to fixing #3677, or at least when you zoom out the background still gets painted all the way out so you wouldn't see the grey background in this example.

Manual tests to run:

• Check that you do not see scroll bars flicker on and off as you resize a window
• Check that scroll bars only appear in the dimensions where the window is too small
• Change the background of the display in the editor and check that this is reflected in both the runtime and editor.
  • Expand the windows to make sure it is still painted out to the boundaries.
  • Try zooming out - is the background still painted out to the boundaries
• Close Phoebus and open again so that it loads from the memento - is the background still drawn out to the boundaries.
• Open some existing BOB files - are the widgets all visible and look the same.
• Test creating a new BOB with a Tab widget. Does this behave as normal.

Checklist

• Testing:

  • The feature has automated tests
  • Tests were run
  • If not, explain how you tested your changes

• Documentation:

  • The feature is documented
  • The documentation is up to date
  • Release notes:
    • Added an entry if the change is breaking or significant
    • Added an entry when adding a new feature

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud