[html] HTML breadcrumbs don't work right when optional end tags omitted

[dullroar]

• VSCode Version: 1.42.0-insider
• OS Version: Linux Mint 19.3

Steps to Reproduce:

1. Create an HTML document. Sprinkle liberally with <p>, <li> (inside of <ul> or <ol>, obviously), <tr> or <td> inside of <table>, and any other elements noted in the HTML5 spec as having optional end tags (see https://html.spec.whatwg.org/#syntax-tag-omission).
2. If you closed the various tags above with their end tags (e.g., </p>), then run the page through something like HTML Tidy (I am using v5.7.28), passing in the --omit-optional-tags yes argument.
3. Open the reformatted file in VSCode and navigate somewhere where there are multiple <p> or <li> or similar in a row. Note that there will be a breadcrumb for each open tag, because VSCode is apparently looking for end tags to close off the element, even though it is not required.

In a complex document, this make VSCode breadcrumbs pretty worthless. Here is an example, before a Tidy reformat, with focus on the third list item element in the fourth paragraph (note breadcrumbs working as expected):

And here are the breadcrumbs after the Tidy reformat, with focus on the same list item element:

Does this issue occur when all extensions are disabled?: Yes

[aeschli]

Thanks for the pointer. The HTML language service is currently not aware of tags that can be omitted.

[dullroar]

Thanks for making this a feature request. For the time being I have turned off breadcrumbs entirely, but for the one other person on the planet this probably affects, in case they find this through search, I went through all the breadcrumb settings and figured out either setting Symbol Path to last (which then shows only the highlighted element) or turning off Show Fields "fixed" the problem, but with possibly other issues in other file types. I decided to reclaim a line of vertical line space for now by simply switching them off completely.

[nikeee]

It does also affect code formatting (see #94287). When formatting this:

<p>Lorem
<p>ipsum
<p>dolor
<p>sit
<p>amet

you get:

<p>Lorem
    <p>ipsum
        <p>dolor
            <p>sit
                <p>amet

[aeschli]

@nikeee We use beautifyjs as the underlying HTML formatter. Would you mind filing an issue at https://github.com/beautify-web/js-beautify as well?

[nikeee]

@aeschli: There already is an issue regarding this: beautifier/js-beautify#1503

[aeschli]

Thanks for the link, sorry, I didn't check myself.

[bitwiseman]

v1.11.0 of js-beautify fixes the formatting issue that @nikeee commented on. This doesn't fix the breadcrumb issue.

[dullroar]

@bitwiseman I presume you are talking about the js-beautify pretty print issue, because for Code itself, at v 1.44.0-insider the original problem with breadcrumbs is still there.

[bitwiseman]

Updated.

[bitwiseman]

@dullroar @nikeee
Could you try your input files on https://beautifier.io ? To make sure the fix works as you expect?

[dullroar]

@bitwiseman It does, as far as beautifying goes, although that isn't the original bug in VS Code I filed, which was that breadcrumbs are broken. Or is this an essential first step in fixing that?

[bitwiseman]

@dullroar
Oh, I see what happened. @nikeee reported the formatting issue as a comment on this bug (even though they are completely separate. :( I've updated my comment above (again). Thanks for checking on the formatting.

@aeschli
I have a pretty good understanding of the optional closing tags now. I might be able to implement them for https://github.com/microsoft/vscode-html-languageservice/ . I'm assuming the change would go somewhere around here:
https://github.com/microsoft/vscode-html-languageservice/blob/f4777d03d92a79e70d09d3c44e1a835cc356a9f4/src/parser/htmlParser.ts#L79

Right?

[nikeee]

even though they are completely separate

Well, I originally opened a separate issue (#94287) regarding the breadcrumbs and the formatting issue (I assumed that both had the same origin in the code). As it was closed as a duplicate, I put the formatting part into this issue as well. It turned out that they had different origins.

I was thinking too about taking a look into the HTML service, but I lack the time ATM.

[dullroar]

Any progress on this? I like having the breadcrumbs turned on in general, but this issue makes them less than useful for me in HTML.

[aeschli]

Related issue in microsoft/vscode-html-languageservice#63

@bitwiseman Sorry for only see your question now. Yes, that needs to go into the HTML parser. If you want to give it a try, that would be fantastic.