Non-HTML output generated by Renderer does not need renderviz metadata

I guess because the action url is a placeholder?

Indeed.

Actually, the problem is broader: any non-HTML rendered output cannot be visualized by renderviz (at least not for now that's out of scope), because there's no HTML element to target that we can set a 3D transform, an outline or a box-shadow on. So, don't wrap any output that is not HTML (i.e. that is plain text) in renderviz metadata (which uses HTML comments).

Tested this approach on a page with a node comment form:

@@ -138,8 +138,8 @@
           <div class="highlighted">
         <aside class="layout-container section clearfix" role="complementary">
           <!--RENDERER_START--><!--{"tags":["block_view","config:block.block.bartik_messages"],"max-age":-1,"contexts":["languages:language_interface","theme","user.permissions"]}--><!--{"tags":[],"max-age":-1}-->  <div class="region region-highlighted">
-    <!--RENDERER_START--><!--{"contexts":["languages:language_interface","theme","user.permissions"],"tags":["block_view","config:block.block.bartik_messages"],"max-age":-1,"keys":["entity_view","block","bartik_messages"]}--><!--{"keys":["entity_view","block","bartik_messages"],"contexts":["languages:language_interface","theme","user.permissions"],"tags":["block_view","config:block.block.bartik_messages"],"max-age":-1}--><!--RENDERER_START--><!--{"tags":[],"max-age":-1,"contexts":[]}--><!--{"tags":[],"max-age":-1}--><!--RENDERER_START--><!--{"tags":[],"max-age":-1,"contexts":[]}--><!--{"tags":[],"max-age":-1}--><!--RENDERER_START--><!--{"contexts":["languages:language_interface","theme","user.permissions"],"tags":[],"max-age":-1}--><!--{"tags":[],"max-age":-1,"contexts":["languages:language_interface","theme","user.permissions"]}-->
-  <!--RENDERER_END--><!--RENDERER_END--><!--RENDERER_END-->
+    <!--RENDERER_START--><!--{"contexts":["languages:language_interface","theme","user.permissions"],"tags":["block_view","config:block.block.bartik_messages"],"max-age":-1,"keys":["entity_view","block","bartik_messages"]}--><!--{"keys":["entity_view","block","bartik_messages"],"contexts":["languages:language_interface","theme","user.permissions"],"tags":["block_view","config:block.block.bartik_messages"],"max-age":-1}--><!--RENDERER_START--><!--{"tags":[],"max-age":-1,"contexts":[]}--><!--{"tags":[],"max-age":-1}--><!--RENDERER_START--><!--{"tags":[],"max-age":-1,"contexts":[]}--><!--{"tags":[],"max-age":-1}-->
+  <!--RENDERER_END--><!--RENDERER_END-->
 <!--RENDERER_END-->
   </div>
 <!--RENDERER_END-->
@@ -175,7 +175,7 @@
     <!--RENDERER_START--><!--{"tags":[],"max-age":-1,"contexts":[]}--><!--{"tags":[],"max-age":-1}--><!--RENDERER_START--><!--{"tags":[],"max-age":-1,"contexts":[]}--><!--{"tags":[],"max-age":-1}--><div data-contextual-id="block:block=bartik_page_title:langcode=en"></div><!--RENDERER_END--><!--RENDERER_END-->
       <div class="content">
       <!--RENDERER_START--><!--{"tags":[],"max-age":-1,"contexts":[]}--><!--{"tags":[],"max-age":-1}-->
-  <h1 class="js-quickedit-page-title title page-title"><!--RENDERER_START--><!--{"contexts":["user.permissions"],"tags":[],"max-age":-1}--><!--{"contexts":[],"tags":[],"max-age":-1}--><span property="schema:name" data-quickedit-field-id="node/1/title/en/full" class="field field--name-title field--type-string field--label-hidden"><!--RENDERER_START--><!--{"tags":[],"max-age":-1,"contexts":[]}--><!--{"tags":[],"max-age":-1}-->The awesomest new band: PigPipe<!--RENDERER_END--></span>
+  <h1 class="js-quickedit-page-title title page-title"><!--RENDERER_START--><!--{"contexts":["user.permissions"],"tags":[],"max-age":-1}--><!--{"contexts":[],"tags":[],"max-age":-1}--><span property="schema:name" data-quickedit-field-id="node/1/title/en/full" class="field field--name-title field--type-string field--label-hidden">The awesomest new band: PigPipe</span>
 <!--RENDERER_END--></h1>
 
 <!--RENDERER_END-->
@@ -210,7 +210,7 @@
 <!--RENDERER_END-->
         <span>
           Submitted by <!--RENDERER_START--><!--{"contexts":["user.permissions"],"tags":["user:1"],"max-age":-1}--><!--{"contexts":[],"tags":[],"max-age":-1}--><span data-quickedit-field-id="node/1/uid/en/full" rel="schema:author" class="field field--name-uid field--type-entity-reference field--label-hidden"><!--RENDERER_START--><!--{"tags":["user:1"],"contexts":[],"max-age":-1}--><!--{"tags":["user:1"],"contexts":[],"max-age":-1}--><a title="View user profile." href="/user/1" lang="" about="/user/1" typeof="schema:Person" property="schema:name" datatype="" class="username">root</a><!--RENDERER_END--></span>
-<!--RENDERER_END--> on <!--RENDERER_START--><!--{"contexts":["timezone","user.permissions"],"tags":[],"max-age":-1}--><!--{"contexts":[],"tags":[],"max-age":-1}--><span property="schema:dateCreated" content="2015-12-09T16:36:00+00:00" data-quickedit-field-id="node/1/created/en/full" class="field field--name-created field--type-created field--label-hidden"><!--RENDERER_START--><!--{"contexts":["timezone"],"tags":[],"max-age":-1}--><!--{"contexts":["timezone"],"tags":[],"max-age":-1}-->Wed, 12/09/2015 - 17:36<!--RENDERER_END--></span>
+<!--RENDERER_END--> on <!--RENDERER_START--><!--{"contexts":["timezone","user.permissions"],"tags":[],"max-age":-1}--><!--{"contexts":[],"tags":[],"max-age":-1}--><span property="schema:dateCreated" content="2015-12-09T16:36:00+00:00" data-quickedit-field-id="node/1/created/en/full" class="field field--name-created field--type-created field--label-hidden">Wed, 12/09/2015 - 17:36</span>
 <!--RENDERER_END-->        </span>
         <!--RENDERER_START--><!--{"tags":[],"max-age":-1,"contexts":[]}--><!--{"tags":[],"max-age":-1}-->  <span property="schema:dateCreated" content="2015-12-09T16:36:00+00:00" class="rdf-meta hidden"></span>
 <!--RENDERER_END-->
@@ -230,13 +230,13 @@
 
       <h2 class="title comment-form__title">Add new comment</h2>
     <!--RENDERER_START--><!--{"tags":[],"max-age":-1,"contexts":[]}--><!--{"tags":[],"max-age":-1}--><!--RENDERER_START--><!--{"contexts":["languages:language_interface","session","theme","user.permissions","user.roles:authenticated"],"tags":["config:core.entity_form_display.comment.comment.default","config:field.field.comment.comment.comment_body","config:field.field.node.article.comment","config:field.storage.comment.comment_body","config:user.settings"],"max-age":0}--><!--{"tags":[],"max-age":-1,"contexts":["languages:language_interface","theme","user.permissions"]}--><form class="comment-comment-form comment-form" data-drupal-selector="comment-form" action="/comment/reply/node/1/comment" method="post" id="comment-form" accept-charset="UTF-8">
-  <!--RENDERER_START--><!--{"tags":[],"max-age":-1,"contexts":[]}--><!--{"tags":[],"max-age":-1}--><input data-drupal-selector="form-3uos0aspbqcmvur6i81zrvanvgp4bv4-teqir0ewysg" type="hidden" name="form_build_id" value="form-3UOS0ASPBQcMvur6i81zrVaNvGP4Bv4-teQIR0EWySg" />
-<!--RENDERER_END--><!--RENDERER_START--><!--{"max-age":0,"tags":[],"contexts":[]}--><!--{"max-age":0,"tags":[]}--><input data-drupal-selector="edit-comment-comment-form-form-token" type="hidden" name="form_token" value="<!--RENDERER_START--><!--{"contexts":["languages:language_interface","session","theme","user.permissions"],"tags":[],"max-age":-1}--><!--{"tags":[],"max-age":-1,"contexts":["languages:language_interface","theme","user.permissions"]}-->s6siCfubBW8qet3UzenMUCPFWNT9PQd31r6dNUL6qa0<!--RENDERER_END-->" />
+  <!--RENDERER_START--><!--{"tags":[],"max-age":-1,"contexts":[]}--><!--{"tags":[],"max-age":-1}--><input data-drupal-selector="form-rxdl3r67n-rehwsmu-hwqtgg-bwcumo7rcwq3iapiw" type="hidden" name="form_build_id" value="form-rXdl3R67N--rehWSmu-HWqTGG-BWcuMO7RCwQ3iAPIw" />
+<!--RENDERER_END--><!--RENDERER_START--><!--{"max-age":0,"tags":[],"contexts":[]}--><!--{"max-age":0,"tags":[]}--><input data-drupal-selector="edit-comment-comment-form-form-token" type="hidden" name="form_token" value="s6siCfubBW8qet3UzenMUCPFWNT9PQd31r6dNUL6qa0" />
 <!--RENDERER_END--><!--RENDERER_START--><!--{"tags":[],"max-age":-1,"contexts":[]}--><!--{"tags":[],"max-age":-1}--><input data-drupal-selector="edit-comment-comment-form" type="hidden" name="form_id" value="comment_comment_form" />
-<!--RENDERER_END--><!--RENDERER_START--><!--{"contexts":[],"tags":[],"max-age":-1}--><!--{"contexts":[],"tags":[],"max-age":-1}--><div class="field--type-language field--name-langcode field--widget-language-select js-form-wrapper form-wrapper" data-drupal-selector="edit-langcode-wrapper" id="edit-langcode-wrapper"><!--RENDERER_START--><!--{"tags":[],"max-age":-1,"contexts":[]}--><!--{"tags":[],"max-age":-1}-->      
-  <!--RENDERER_END--></div>
+<!--RENDERER_END--><!--RENDERER_START--><!--{"contexts":[],"tags":[],"max-age":-1}--><!--{"contexts":[],"tags":[],"max-age":-1}--><div class="field--type-language field--name-langcode field--widget-language-select js-form-wrapper form-wrapper" data-drupal-selector="edit-langcode-wrapper" id="edit-langcode-wrapper">      
+  </div>
 <!--RENDERER_END--><!--RENDERER_START--><!--{"contexts":[],"tags":[],"max-age":-1}--><!--{"contexts":[],"tags":[],"max-age":-1}--><div class="field--type-string field--name-subject field--widget-string-textfield js-form-wrapper form-wrapper" data-drupal-selector="edit-subject-wrapper" id="edit-subject-wrapper"><!--RENDERER_START--><!--{"tags":[],"max-age":-1,"contexts":[]}--><!--{"tags":[],"max-age":-1}-->      <!--RENDERER_START--><!--{"tags":[],"max-age":-1,"contexts":[]}--><!--{"tags":[],"max-age":-1}--><!--RENDERER_START--><!--{"tags":[],"max-age":-1,"contexts":[]}--><!--{"tags":[],"max-age":-1}--><div class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-subject-0-value form-item-subject-0-value">
-      <!--RENDERER_START--><!--{"tags":[],"max-age":-1,"contexts":[]}--><!--{"tags":[],"max-age":-1}--><label for="edit-subject-0-value"><!--RENDERER_START--><!--{"tags":[],"max-age":-1,"contexts":[]}--><!--{"tags":[],"max-age":-1}-->Subject<!--RENDERER_END--></label><!--RENDERER_END-->
+      <!--RENDERER_START--><!--{"tags":[],"max-age":-1,"contexts":[]}--><!--{"tags":[],"max-age":-1}--><label for="edit-subject-0-value">Subject</label><!--RENDERER_END-->
         <input class="js-text-full text-full form-text" data-drupal-selector="edit-subject-0-value" type="text" id="edit-subject-0-value" name="subject[0][value]" value="" size="60" maxlength="64" placeholder="" />
 
         </div>
@@ -244,7 +244,7 @@
   <!--RENDERER_END--></div>
 <!--RENDERER_END--><!--RENDERER_START--><!--{"contexts":[],"tags":["config:field.field.comment.comment.comment_body","config:field.storage.comment.comment_body"],"max-age":-1}--><!--{"contexts":[],"tags":["config:field.field.comment.comment.comment_body","config:field.storage.comment.comment_body"],"max-age":-1}--><div class="field--type-text-long field--name-comment-body field--widget-text-textarea js-form-wrapper form-wrapper" data-drupal-selector="edit-comment-body-wrapper" id="edit-comment-body-wrapper"><!--RENDERER_START--><!--{"tags":[],"max-age":-1,"contexts":[]}--><!--{"tags":[],"max-age":-1}-->      <!--RENDERER_START--><!--{"tags":[],"max-age":-1,"contexts":[]}--><!--{"tags":[],"max-age":-1}--><div class="js-text-format-wrapper text-format-wrapper js-form-item form-item">
   <!--RENDERER_START--><!--{"tags":[],"max-age":-1,"contexts":[]}--><!--{"tags":[],"max-age":-1}--><div class="js-form-item form-item js-form-type-textarea form-type-textarea js-form-item-comment-body-0-value form-item-comment-body-0-value">
-      <!--RENDERER_START--><!--{"tags":[],"max-age":-1,"contexts":[]}--><!--{"tags":[],"max-age":-1}--><label for="edit-comment-body-0-value" class="js-form-required form-required"><!--RENDERER_START--><!--{"tags":[],"max-age":-1,"contexts":[]}--><!--{"tags":[],"max-age":-1}-->Comment<!--RENDERER_END--></label><!--RENDERER_END-->
+      <!--RENDERER_START--><!--{"tags":[],"max-age":-1,"contexts":[]}--><!--{"tags":[],"max-age":-1}--><label for="edit-comment-body-0-value" class="js-form-required form-required">Comment</label><!--RENDERER_END-->
         <div class="form-textarea-wrapper">
   <textarea class="js-text-full text-full form-textarea required resize-vertical" data-drupal-selector="edit-comment-body-0-value" id="edit-comment-body-0-value" name="comment_body[0][value]" rows="5" cols="60" placeholder="" required="required" aria-required="true"></textarea>
 </div>
@@ -252,7 +252,7 @@
         </div>
 <!--RENDERER_END--><!--RENDERER_START--><!--{"tags":[],"max-age":-1,"contexts":[]}--><!--{"tags":[],"max-age":-1}--><div class="filter-wrapper js-form-wrapper form-wrapper" data-drupal-selector="edit-comment-body-0-format" id="edit-comment-body-0-format"><!--RENDERER_START--><!--{"tags":[],"max-age":-1,"contexts":[]}--><!--{"tags":[],"max-age":-1}--><div class="filter-help js-form-wrapper form-wrapper" data-drupal-selector="edit-comment-body-0-format-help" id="edit-comment-body-0-format-help"><!--RENDERER_START--><!--{"contexts":[],"tags":[],"max-age":-1}--><!--{"tags":[],"max-age":-1}--><a href="/filter/tips" target="_blank" data-drupal-selector="edit-comment-body-0-format-help-about" id="edit-comment-body-0-format-help-about">About text formats</a><!--RENDERER_END--></div>
 <!--RENDERER_END--><!--RENDERER_START--><!--{"tags":[],"max-age":-1,"contexts":[]}--><!--{"tags":[],"max-age":-1}--><div class="js-form-item form-item js-form-type-select form-type-select js-form-item-comment-body-0-format form-item-comment-body-0-format">
-      <!--RENDERER_START--><!--{"tags":[],"max-age":-1,"contexts":[]}--><!--{"tags":[],"max-age":-1}--><label for="edit-comment-body-0-format--2"><!--RENDERER_START--><!--{"tags":[],"max-age":-1,"contexts":[]}--><!--{"tags":[],"max-age":-1}-->Text format<!--RENDERER_END--></label><!--RENDERER_END-->
+      <!--RENDERER_START--><!--{"tags":[],"max-age":-1,"contexts":[]}--><!--{"tags":[],"max-age":-1}--><label for="edit-comment-body-0-format--2">Text format</label><!--RENDERER_END-->
         <select class="filter-list editor form-select" data-drupal-selector="edit-comment-body-0-format" data-editor-for="edit-comment-body-0-value" id="edit-comment-body-0-format--2" name="comment_body[0][format]"><option value="basic_html" selected="selected">Basic HTML</option><option value="restricted_html">Restricted HTML</option><option value="full_html">Full HTML</option></select>
         </div>
 <!--RENDERER_END--><!--RENDERER_START--><!--{"tags":[],"max-age":-1,"contexts":[]}--><!--{"tags":[],"max-age":-1}--><div class="filter-guidelines js-form-wrapper form-wrapper" data-drupal-selector="edit-comment-body-0-format-guidelines" id="edit-comment-body-0-format-guidelines"><!--RENDERER_START--><!--{"tags":[],"max-age":-1,"contexts":[]}--><!--{"tags":[],"max-age":-1}--><div class="filter-guidelines-item filter-guidelines-restricted_html">
@@ -261,9 +261,9 @@
   
       
           <ul class="tips">
-                      <li><!--RENDERER_START--><!--{"tags":[],"max-age":-1,"contexts":[]}--><!--{"tags":[],"max-age":-1}-->Allowed HTML tags: &lt;a href hreflang&gt; &lt;em&gt; &lt;strong&gt; &lt;cite&gt; &lt;blockquote cite&gt; &lt;code&gt; &lt;ul type&gt; &lt;ol start type&gt; &lt;li&gt; &lt;dl&gt; &lt;dt&gt; &lt;dd&gt; &lt;h2 id&gt; &lt;h3 id&gt; &lt;h4 id&gt; &lt;h5 id&gt; &lt;h6 id&gt;<!--RENDERER_END--></li>
-                      <li><!--RENDERER_START--><!--{"tags":[],"max-age":-1,"contexts":[]}--><!--{"tags":[],"max-age":-1}-->Lines and paragraphs break automatically.<!--RENDERER_END--></li>
-                      <li><!--RENDERER_START--><!--{"tags":[],"max-age":-1,"contexts":[]}--><!--{"tags":[],"max-age":-1}-->Web page addresses and email addresses turn into links automatically.<!--RENDERER_END--></li>
+                      <li>Allowed HTML tags: &lt;a href hreflang&gt; &lt;em&gt; &lt;strong&gt; &lt;cite&gt; &lt;blockquote cite&gt; &lt;code&gt; &lt;ul type&gt; &lt;ol start type&gt; &lt;li&gt; &lt;dl&gt; &lt;dt&gt; &lt;dd&gt; &lt;h2 id&gt; &lt;h3 id&gt; &lt;h4 id&gt; &lt;h5 id&gt; &lt;h6 id&gt;</li>
+                      <li>Lines and paragraphs break automatically.</li>
+                      <li>Web page addresses and email addresses turn into links automatically.</li>
             </ul>
     

As you can see, only plain text has its wrapping renderviz metadata removed.

In fact, both before and after, we get 206 unique rendered elements on the page. — so the jquery.comments.js jQuery Plugin wasn't even able to find those comments anyway in the first place!

I can confirm that this fixes all forms (e.g. comment form, module form, node form, star-to-add-or-remove-shortcut, et cetera).

Hi Wim,

I have faced same issue with debug output and created a patch for it,
have contacted about it on your blog.

Please check the patch attached, it looks safer cause the patch in comment #6 will also exclude an output like "text ..." from debug.
What do you think?

Interesting :)

Why would excluding text… be wrong? It's not HTML, so we wouldn't be able to safely wrap it. So it's behavior would be correct. The behavior of your patch is the same for that particular example.

Can you give an example where your patch does the correct thing and mine (in #6) doesn't?

Hi,

The ... dots in the example in comment #9 are a link.
"text <a>...</a>"

I mean if the result output doesn't start with a tag but contains a tag/tags inside
- then we can consider that the output can be safely wrapped with debug info.

RTBC for #9

+1. But I didn't think the comment was very clear.

The interdiff was wrong.

Assigning credit.

Ugh, I failed to squash the commits. My bad. But no big deal :)

It looks like this caused a serious regression…

Hi Wim,

Tested the latest version (with the patch applied).
Looks good as for me, please see the attached screenshot.

For the test I have used a fresh Drupal installation based the latest version of Drupal core (8.1.10).

Could you confirm that you 've got a regression ?