possible Border-image generator UI updates

[jsnkuhn]

The recent MDN redesign has reduced the width available for the Border-image Generator. As an example there is now only room for 2 boxes dedicated to each individual property per grid line instead of the old design that had room to show 3. This makes the page a bit longer and therefore slightly harder to use. Have had some thoughts about changes to help with this:

1. the image selection options at the top (including the UI to upload your own image) seem like they should be in a box similar to all the others titled "border-image-source". Would take up less room and have a more consistent UI. This might need to be 2 grid spots.

2. I'm not entirely sure I understand the point of the area labeled "control box". It's marking a fixed height for the area below it but I don't think it's really necessary. Will explain more in up coming points

3. the visual border-image-slice UI is very nice but it seems like it should just go in the "border-image-slice" titled box with the other border-image-slice controls. This might also then need to be 2 grid spots.

4. All that would leave in the "control box" area is the current drag-able preview element (which by the way is always drag-able even if the drag-able toggle is off) with the live border-image. Maybe we just add the border-image code to each of the individual "border-image-" property boxes so that a preview of the resulting border-image is always on screen? A side benefit of this is seeing the border-image on 2 different sized elements (one gird space wide and 2 grid spaces wide).

5. Dev tools is calling out the heading text color contrast on the individual "border-image-x" properties for not meeting the AA standard. So that should get fixed as well.

Any other thoughts on the UI?