CSS Inline editor shows incorrect rule and content after creating a new rule.

[RaymondLim]

• Create a new project folder with an html file. I just copy the one from default "Getting Started" project.
• Create a new css file and paste the following code into the new css file. Note that you don't have a new line character (LF or CRLF) after the last }. That is, you only have seven lines exactly in the file.

html {
    height: 100%;
}

.resizing-container > .horz-resizing {
    cursor: col-resize;
}

• Open your html file and add class="horz-resizing" in any tag.
• Set cursor in that attribute value and press Ctrl/Cmd+E to bring up CSS inline editor.
• Click on the New button.

Result: You will get a new rule added into your css file and inline editor will show you a rule list with two rules as in the following screenshot. If you click on the other rule, then you get the exact content as in the screenshot. That is, the content is wrong and the rule name is also wrong.

[peterflynn]

UTR for me, starting on a basically blank project. I was testing on a slightly older SHA (34c37ee), but it seems unlikely anything's changed in this area since then...

@RaymondLim If you set a breakpoint in CSSInlineEditor._handleNewRuleClick(), who's calling it?

[RaymondLim]

Hmm. I can reproduce it on Windows 7 too with the release build even though I found this on mac. @peterflynn When you bring up the CSS inline editor in class="horz-resizing", you should see an existing rule shows up in the inline. You don't make any changes in there and just directly click on the New Rule button. When you see the new empty rule, you will see the rule list at the same time. Are you not seeing the rule list? Or are you not seeing the screenshot when you click on the other rule from the rule list?

[peterflynn]

Ugh, sorry -- somehow I missed that you're clicking the New Rule button explicitly. You're right, I can repro too.

I think this bug might have existed ever since the New Rule button was added. The way inline editor ranges are maintained, any text that's inserted on the "inside" of a text marker is usually just included into the range without destroying it. Since the range goes to the end of the file in this case, appending anything to the end of the file is guaranteed to include it inside the range.

No idea where the "html" label is coming from though... that's pretty weird.

[peterflynn]

Ah -- and I can indeed repro this in Sprint 33, when New Rule was first added.

[RaymondLim]

html selector is the very first rule in the css file, but the line number in the rule list shows 5 pointing to the correct line number of the existing rule for that class name.