Problem/Motivation

Twig debugging enables the output of HTML comments summarizing the used Twig template and its suggestions.
This is implemented inside \Drupal\Core\Template\TwigThemeEngine::renderTemplate (and \twig_render_template of core/themes/engines/twig/twig.engine).
The added HTML does not only include comments but also line breaks between the comments.
Whitespace between HTML tags inserts empty text nodes into the DOM which can affect the appearance of the rendered document.

Steps to reproduce

  • Enable Twig debug mode.
  • Look at the DOM of any page with the HTML comments.
  • Compare it to the DOM without the HTML comments. See that the comments aren't the only difference and that there are text nodes containing only whitespace.

Proposed resolution

Do not output whitespace between HTML comment tags when Twig debugging is active.

Remaining tasks

  • Implement test.
  • Implement solution.
  • Update existing tests.
  • Re-implement new test according to #19 (and #15)

User interface changes

No user interface changes.

Introduced terminology

No introduced terminology.

API changes

No API changes. (I hope no one depends on Twig debug adding empty text nodes to the DOM.)

Data model changes

No data model changes.

Release notes snippet

Twig debug mode does not add text nodes only containing whitespace to the DOM anymore.

Issue fork drupal-3563677

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

tgauges created an issue. See original summary.

cilefen’s picture

Issue tags: +Possible duplicate

This looks like it should be a child issue of #2914733: [META] twig debug can break parts of site, and it may actually duplicate one of the issues linked there.

I'm not certain about that, and it's cool to get a test for this.

tgauges’s picture

Issue summary: View changes
tgauges’s picture

Assigned: tgauges » Unassigned
Status: Active » Needs review
tgauges’s picture

tgauges’s picture

Title: Twig Debug can influence rendering visually » Twig debug can influence rendering visually due to whitespace between tags
tgauges’s picture

This issue might be interpreted as a duplicate of #3363487: newline on glossify-link.html.twig causes extra space. But that issue is in the project Glossify and the conclusion is that

[...] if it's all working now, apart from the debugging issue, [which] maybe deserves its own issue in core, [...] there is little to be done on this issue?

(#12 by jacobupal)

So this is now that core issue. I found no other (core) issue specifically regarding whitespace added by the twig debug output.

tgauges’s picture

Assigned: Unassigned » tgauges
Status: Needs review » Needs work
tgauges’s picture

Assigned: tgauges » Unassigned
Status: Needs work » Needs review

I updated the tests a bit so that both TwigDebugMarkupTest classes use the same code to enable Twig debug: https://git.drupalcode.org/project/drupal/-/merge_requests/14122/diffs?diff_id=1883246&start_sha=023eeadb7d4bdf524bf0f0e2c836724deb7acea6

tgauges’s picture

Issue summary: View changes
tgauges’s picture

Issue summary: View changes
jwilson3’s picture

ghost of drupal past’s picture

I must admit I was largely ignorant of the problems here but https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Text/Whitespace lays it out.

However, I am a bit unhappy about adding an entire functional test for this. Is it really necessary?

tgauges’s picture

Is the problem with the new test that it is a browser test?

I think with PHP 8.4 and Dom\Element::textContent one could rewrite the test to not use JavaScript in a browser.

@ghost of drupal past Would that be a solution you are happier with?

One could also simply check for the exact string with the line breaks at the expected positions. But that makes the test more brittle in case of unrelated changes to the HTML comments.

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.

smustgrave’s picture

Status: Needs review » Needs work

Appears to need a rebase.

tgauges’s picture

Status: Needs work » Needs review

Thanks, I merged main into the issue branch. There were no line conflicts. The tests are still good.

ghost of drupal past’s picture

Thanks for the work.

Yes, I was thinking a kernel test should work and would be significantly faster.

You could look at FilterCaptionTwigDebugTest and its register method to see how to enable twig debug in a kernel test. You could look at the TwigAttributesTest (also a kernel test) to see how you could test with inline templates using renderInline.

tgauges’s picture

Issue summary: View changes
Status: Needs review » Needs work

Thanks for the input. I moved the issue back to "Needs work" with a new task to re-implement the new test.

I'm currently not actively working on this. So if someone else wants to do it, feel free.

tgauges’s picture

Status: Needs work » Needs review

I lied. I found time today to work on this. The webdriver test is replaced with a functional test, please take a look.

tgauges’s picture

Issue summary: View changes
smustgrave’s picture

Status: Needs review » Needs work

Sorry appears to need another rebase after the theme engine removals and filter.module moved to hooks (assuming those are the conflicts). Will try and keep an eye out next round.

tgauges’s picture

Status: Needs work » Needs review

Thanks for the feedback. I re-merged main into the issue branch.

As you wrote: The main conflict was the removal of core/modules/filter/filter.module which is now replaced with core/modules/filter/src/Plugin/Filter/FilterAutoP.php.

smustgrave’s picture

Only question is do we need a test trait if that function is only called from 1 file?

tgauges’s picture

No, we don't need that trait. I removed it: ef189d77

smustgrave’s picture

Status: Needs review » Reviewed & tested by the community
Issue tags: -Possible duplicate +Bug Smash Initiative

Feedback appears to be addressed on this one, no additional suggestions.

quietone’s picture

Status: Reviewed & tested by the community » Needs work

I've made suggestions in the MR to correct coding standards. I also think a comment can be removed, so setting to needs work for others to consider.

I updated credit.

tgauges’s picture

Status: Needs work » Reviewed & tested by the community

@quietone Thanks for the coding standards review. I read up on https://project.pages.drupalcode.org/coding_standards/php/documentation/ and agree with your comments. The suggestions are applied and I'm setting this issue back to reviewed and tested.

(I also merged current main into the issue branch to fix a failing test.)

needs-review-queue-bot’s picture

Status: Reviewed & tested by the community » Needs work
StatusFileSize
new91 bytes

The Needs Review Queue Bot tested this issue. It no longer applies to Drupal core. Therefore, this issue status is now "Needs work".

This does not mean that the patch necessarily needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.

Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.

tgauges’s picture

Status: Needs work » Reviewed & tested by the community

I merged main back into the issue branch. It was only a simple conflict.

  • catch committed 47961efd on main
    fix: #3563677 Twig debug can influence rendering visually due to...
catch’s picture

Version: main » 11.x-dev
Status: Reviewed & tested by the community » Patch (to be ported)

Committed/pushed to main, thanks!

Needs a backport MR for 11.x

tgauges’s picture

Status: Patch (to be ported) » Needs review

I created !16853 as backport for 11.x.

It is a cherry-pick and a removal of the test which required PHP 8.4 (Dom\HTMLDocument).

smustgrave’s picture

Status: Needs review » Reviewed & tested by the community

Not sure if we need a new test but we will see!

longwave’s picture

Status: Reviewed & tested by the community » Needs work

In 11.x we also have a copy of the template render function in twig.engine, which we should update here to match.

In two minds whether we should backport that test or not.