Debugging CSS

[Tom Eugelink]

I have another interesting behavior involving CSS. The gauge has a text representation of the value of the needle, which can be formatted using DecimalFormat. The format string can be set with a styleable property.

In the example this property is set, via setStyle(), to something with a unit postfix, e.g. "##0.0W" so the gauge will show watts. This works. But as soon as totally unrelated classes are removed from the gauge, the styleable property reverts to its initial value, but the style string is unchanged!

This behavior is introduced in 8u20, in 8u00 it works as intended.

Tom

On 4-4-2015 08:14, Tom Eugelink wrote:
> After loads of trail and error I pinned it down to the fact that scaling of the node in question was not taking into account when positioning it; it is centered and I use its width to do that, but it was the width-before-scaling. So it was a miracle it was in the right place at all. What really would be needed here (and I think anyone who has done HTML with CSS will agree) is a which-property-is-set-by-which-CSS-class-and-file, like the debug view in browsers. Does the CSS engine keep track of this information?
>
> Tom
>
>
> On 3-4-2015 22:19, David Grieve wrote:
>> When you add or remove style-classes, CSS for the node (and all its children) is totally re-calculated. This means that cached data for that node is tossed out and the node is styled from scratch, as if it were just added to the scene-graph.
>>
>> You are much better off using pseudo-class state for what you are trying to do. Changes in pseudo-class state just causes evaluation of what styles are applied in that state, which is relatively low overhead compared to re-calculating styles.
>>
>> To debug, you should try using Scenic View (http://fxexperience.com/scenic-view/)
>>
>> You can also use the Node API Map<StyleableProperty<?>,List<Style>> impl_findStyles(Map<StyleableProperty<?>,List<Style>> styleMap). Note that this is deprecated API
>>
>> On 4/3/15 2:13 PM, Tom Eugelink wrote:
>>> One addition: the move happens if, for example, "segment0-active" is added to the skinnable. Even if that class is empty or even not defined in the CSS.
>>>
>>> Tom
>>>
>>> On 3-4-2015 19:48, Tom Eugelink wrote:
>>>> I'm pushing the envelope a bit -I think- concerning the use of CSS. I have setup a control (gauge) in such a way that, depending on the position of the needle, certain CSS classes are added or removed from the control. For example a "errorSegment-active" class if the value comes into the 90-100 value in a 0-100 gauge. In this class a CSS variable -fx-error-indicator-visibility is set to "visible" and that again shows some kind of indicator on the gauge. Works great.
>>>>
>>>> What is strange is when this class is assigned to the control, a totally unrelated node (the value in the needle) suddenly moves out of position. I do not understand this, because the CSS only involves colors and visibility, never any transformation.
>>>> https://github.com/JFXtras/jfxtras-labs/blob/8.0/src/main/resources/jfxtras/labs/internal/scene/control/gauge/linear/SimpleMetroArcGauge.css
>>>>
>>>> Is there any way to debug what CSS settings are applied to nodes? I really would like to find out what causes that node to move.
>>>>
>>>> Tom
>>>
>>
>