Update widget props

[abigailalexander]

Updated the following widget properties:

• Changed Ellipse gradient. It now goes in the same direction as CSS/Phoebus when horizontalFill is set to true/false. Also uses backgroundColor and bgGradientColor for the gradient.
• bgGradientColor and fgGradientColor now use properties bg_gradient_color and fg_gradient_color. Previously they mistakenly used properties background_color and foreground_color, and this caused issues with rules for changing background colours in the Shape widget.
• Added object-fit property to Image, so when stretchToFit is true the image fills the full space of the div and does not maintain aspect ratio. This is the same behaviour seen in CSS/Phoebus
• Added the cornerHeight and cornerWidth properties to Shape widget, allowing for rounded corners on rectangles.

I also updated tests and snapshots affected by the changes to widgets.

[abigailalexander]

The latest commit adds the scroll property to the DynamicPage widget - this is used to set whether the .opi file opened hides overflow or adds a scroll bar. This functionality already exists in EmbeddedDisplay but because it did not exist in DynamicPage, any screens opened through clicking an ActionButton didn't have it passed in.

[abigailalexander]

Also, now added RoundedRectangle to list of widgets parsed. This is identical to the Rectangle widget except for the corner_width and corner_height properties, so is parsed into the same Shape widget.

[rjwills28]

Thanks for the changes. I've tested the different widgets and here are some comments:

• Rectangle corner_width and corner_height work nicely. These can be used by adding the properties to a normal 'Rectangle' shape (as is done in Phoebus) and with a 'Rounded Rectangle' shape in CSS.
• The horizontalFill trigger true/false now works in the same way as CSS.
• I did notice a difference in behaviour between CSS and the web when using a background gradient. See example below where I have blue as the background colour and orange as the gradient colour.
  
  It looks like CSS brings the gradient colour in at the top while the web is bring it in at the bottom?
• I verified that the stretchToFit property works as it does in CSS when the image size is the same or as large as the actual image, i.e. it will stretch to fill the space and not maintain aspect ratio. However the behaviour looks slightly different when you shrink an image so that the div is smaller than the image size. In this case, if stretchToFit is no, then it does not try to shrink the image to the size of the div and instead just shows a smaller portion of the image. In the example below you can see that CSS shows the top-left corner of the DLS building, while the web shows some portion in the middle.
  
  
  I'm not sure this difference is due to changes in this PR but something worth noting. Also this feature may not be used like this as really people should use the crop features of the image widget if they only want to show a portion of it.

[rjwills28]

I've also tested the scroll property on a dynamicpage and this now works as expected.
One small thing I noticed, which is not related to this PR but I'll still mention in case we want to fix it in another issue, is that in json file the scroll and executeAsOne properties take a boolean value, whereas showCloseButton takes a boolean wrapped as a string, i.e.

"scroll": true,
"executeAsOne": false,
"showCloseButton": "true"

I think these should be consistent as it is easy to make a mistake and use the wrong type when creating the json file (I did first off). Presumably showCloseButton should just be a boolean? I can open a new issue if we think this is worth updating.

[abigailalexander]

I've updated the Ellipse gradient so it should now mimic the CSS behaviour. The stretchToFit Image behaviour is very odd, and might be worth its own issue if we think that someone might be using it in that way. I can't see anything immediate in the web code that suggests why it centers the image, or why CSS uses the edge.

I also think it's worth changing showCloseButton to be a boolean as well

[rjwills28]

Perfect. thanks for the changes. I'll create an issue for both of the remaining items.
The actual code and test updates look good to me.