Shapes editor stops working

[JeffryBooher]

If I type in the css properties without using code hints to fill in the arguments, the shapes editor does not appear. Then it never works.

1. Start Brackets. This is important that you haven't already invoked the shapes editor so restart Brackets clean.
2. Create a new HTML 5 project using the New Project Extension
3. Open styles.css
4. Start Live Preview
5. In the body rule, add a new line and type shape-inside: circle(); very important to type it in and not select the property name and value from the code hints drop down.
6. Place the cursor inside the parenthesis.

At this point, the shapes editor should open inside the Live Preview browser but it doesn't.
If you go back and remove the css property and let code-hints fill in the property and value with shape-inside: circle(), it still will not work.

If you close the Live Preview browser and restart Live Preview, it will work.

* NOTE*
After retesting the steps a third time I was unable to get it to fail. I was able to do this 3 times in a row then the 4th attempt no longer failed.

[RaymondLim]

I can't reproduce it at all. As soon as I type the closing paren, shapes editor shows up in the browser and the default parameter for the circle appears in the code. I don't even have the chance to type in the ; when the default parameter is auto populating. @oslego Can you try to reproduce it and see whether anything you can improve in the extension?

[njx]

Also, do you have any other extensions installed that might be interfering?

[JeffryBooher]

I did have a rogue extension I had written installed for testing the file system but it just added a menu option so that i could run some filesystem tests back when I was reviewing/testing the file system changes.

I also have my New Project extension but that too just adds a menu item that doesn't do anything until clicked.

I removed the rogue extension and will keep an eye out for this issue but I hadn't been able to repro since that case earlier this morning.

[JeffryBooher]

I was able to reproduce this again today:

1. Create a new HTML 5 project from my New Project Extension
2. Open styles.css
3. Start Live Preview
4. in the body rule, add a new property shape-inside: circle()
   ==> At this point, the cursor jumps back in between the parens, and the shape editor opens and fills in the circle parameters with 50px at 50.95% 50.05%
5. right arrow to the end of the property and type ;
6. in the p rule, add a new property shape-outside: ellipse()
   ==> At this point, the cursor jumps back in between the parens, and the shape editor opens and fills in the circle parameters with 50px at 50.95% 50.05%
7. right arrow to the end of the property and type ;
8. in the h1 rule, add a new property: shape-insd
9. backspace over the d and type 'ide:`
10. type auto
11. Backspace over auto
12. type circle()
    ==> At this point, the cursor jumps back in between the parens, and the shape editor opens and fills in the circle parameters with 19px at 50.95% 50.15%
13. go to the end of the line and type ;
14. select the line and delete it
15. type shape-outside: rectangle()
    ==> At this point the cursor does not jump back and the shape editor does not open

I opened dev tools in the Live Preview to see if the shapes editor plugin had an RTE but there were no errors or warnings. There was some information in the console logs, however:

Style mismatch. Expected:
circle(

Found:
none VM23:136
Style mismatch. Expected:
ellipse(

Found:
none 

Also many RTEs in Brackets WRT shapes editor and Live Preview:
https://gist.github.com/anonymous/8e7de7ccd135e0998011

[oslego]

Hi @JeffryBooher,

rectangle() shapes are no longer supported by the shapes editor. The syntax for CSS Shapes has changed, rectangle() got replaced by inset().

However, support for inset() is not yet implemented. It will come in a future update of the shapes editor.

[njx]

Ah, that explains the last. However, the RTEs seem worrisome - any idea where those might be coming from @oslego?

[oslego]

Auto pre-population of empty circle(), ellipse() and polygon() is a feature to get users started quickly without having to type coordinates, then invoke the editor. This is useful particularly for polygon() where there's a lot of typing. This behavior happens only when the LivePreview mode is on.

@njx What does RTE stand for? Those errors are thrown when trying to use the shapes editor with unsupported values, like auto, rectangle(), shape-outside or plain invalid stuff. The errors should be informative but harmless. The editor UI must turn itself off when encountering invalid cases. Is that not happening?

[njx]

OK, just wanted to make sure that wasn't unexpected behavior. (RTE = runtime exception.)

@JeffryBooher @RaymondLim So it sounds like the second set of steps isn't the bug, but we still have the original (unreproducible) failures to worry about?

[JeffryBooher]

@njx -- I'll bang on it for a few more hours and try to reproduce it. I think @pthiess wants to reconvene later this afternoon to get the team's input on the stability of the release so, if I can't reproduce it by then, then we'll just close the issue and reopen it if it resurfaces with steps.

[redmunds]

Removing Sprint 38 Milestone