renderviz-prototype.patch

 core/lib/Drupal/Core/Render/Renderer.php   |  19 +
 modules/renderviz/css/renderviz.layout.css |  19 ++
 modules/renderviz/css/renderviz.theme.css  |  11 +
 modules/renderviz/js/jquery.comments.js    | 351 +++++++++++++++++++++++++++++
 modules/renderviz/js/renderviz.js          | 102 +++++++++
 modules/renderviz/renderviz.info.yml       |   3 +
 modules/renderviz/renderviz.libraries.yml  |  24 ++
 modules/renderviz/renderviz.module         |  13 ++
 8 files changed, 532 insertions(+)

diff --git a/core/lib/Drupal/Core/Render/Renderer.php b/core/lib/Drupal/Core/Render/Renderer.php
index 09a1bf1..40073c0 100644
--- a/core/lib/Drupal/Core/Render/Renderer.php
+++ b/core/lib/Drupal/Core/Render/Renderer.php
@@ -11,6 +11,7 @@
 use Drupal\Core\Controller\ControllerResolverInterface;
 use Drupal\Core\Theme\ThemeManagerInterface;
 use Symfony\Component\HttpFoundation\RequestStack;
+use Drupal\Component\Serialization\Json;

 /**
  * Turns a render array into a HTML string.
@@ -387,6 +388,8 @@ protected function doRender(&$elements, $is_root_call = FALSE) {
     $elements['#cache']['max-age'] = isset($elements['#cache']['max-age']) ? $elements['#cache']['max-age'] : Cache::PERMANENT;
     $elements['#attached'] = isset($elements['#attached']) ? $elements['#attached'] : array();

+    $elements['#debug']['#cache'] = $elements['#cache'];
+
     // Allow #pre_render to abort rendering.
     if (!empty($elements['#printed'])) {
       // The #printed element contains all the bubbleable rendering metadata for
@@ -551,6 +554,22 @@ protected function doRender(&$elements, $is_root_call = FALSE) {
     // Rendering is finished, all necessary info collected!
     $context->bubble();

+    // Add debug output.
+    $interesting_keys = ['keys', 'contexts', 'tags', 'max-age'];
+    // W3C documentation: HTML Comments are markup,
+    // thus it's not allowed to use HTML Comments inside HTML element attributes.
+    // Example: <a <!--title="need to be comment out"-->>a link</a> is as wrong as <a <span></span>>a link</a>.
+    // Following condition is applied to avoid breaking HTML structure.
+    // In result elements that are used as string value of the parent element attribute are skipped.
+    // (Example, `form_token` value).
+    if ($elements['#markup'] != strip_tags($elements['#markup'])) {
+      if (array_intersect(array_keys($elements['#cache']), $interesting_keys) || array_intersect(array_keys($elements['#debug']['#cache']), $interesting_keys)) {
+        $prefix = '<!--RENDERER_START-->' . '<!--' . Json::encode($elements['#cache']) .  '-->' . '<!--' . Json::encode($elements['#debug']['#cache']) .  '-->';
+        $suffix = '<!--RENDERER_END-->';
+        $elements['#markup'] = $prefix . $elements['#markup'] . $suffix;
+      }
+    }
+
     $elements['#printed'] = TRUE;
     return $elements['#markup'];
   }
diff --git a/modules/renderviz/css/renderviz.layout.css b/modules/renderviz/css/renderviz.layout.css
new file mode 100644
index 0000000..3231646
--- /dev/null
+++ b/modules/renderviz/css/renderviz.layout.css
@@ -0,0 +1,19 @@
+html.renderviz {
+  perspective: 3000px;
+  transition: perspective 1s;
+}
+
+html.renderviz body {
+  transform-style: preserve-3d;
+  transform: rotateY(30deg) rotateX(30deg);
+}
+
+.renderviz-trace-layer {
+  transform: translateZ(10px);
+  transition: transform 2s, outline 0.5s;
+  transform-style: preserve-3d;
+}
+
+.renderviz-trace-focus {
+  transform: rotateX(-30deg) rotateY(-30deg) translateZ(300px);
+}
diff --git a/modules/renderviz/css/renderviz.theme.css b/modules/renderviz/css/renderviz.theme.css
new file mode 100644
index 0000000..7a2886a
--- /dev/null
+++ b/modules/renderviz/css/renderviz.theme.css
@@ -0,0 +1,11 @@
+.renderviz-trace-layer {
+  outline: 1px solid red !important;
+}
+
+.renderviz-trace-layer-root {
+  box-shadow: inset 0 0 100px 30px red !important;
+}
+
+.renderviz-trace-focus {
+  box-shadow: inset 0 0 100px 30px blue !important;
+}
diff --git a/modules/renderviz/js/jquery.comments.js b/modules/renderviz/js/jquery.comments.js
new file mode 100644
index 0000000..bca7c37
--- /dev/null
+++ b/modules/renderviz/js/jquery.comments.js
@@ -0,0 +1,351 @@
+;(function( $ ) {
+
+  "use strict";
+
+  // When invoked, the arguments can be defined in several ways:
+  // --
+  // .comments() - Gets all child comments.
+  // .comments( true ) - Gets all comments (deep search).
+  // .comments( value ) - Gets all child comments with the current value.
+  // .comments( value, true ) - Gets all comments with the current value (deep search).
+  // .comments( name, value ) - Gets all child comments with given name-value pair.
+  // .comments( name, value, true ) - Gets all comments with given name-value pair (deep search).
+  $.fn.comments = function() {
+
+    var settings = normalizeArguments( arguments );
+
+    var comments = [];
+
+    // Search for comments in each of the current context nodes.
+    for ( var i = 0, length = this.length ; i < length ; i++ ) {
+
+      appendAll(
+        comments,
+        findComments( this[ i ], settings.deep, settings.name, settings.value )
+      );
+
+    }
+
+    // If there is more than one comment, make sure the collection is unique.
+    if ( comments.length > 1 ) {
+
+      comments = $.unique( comments );
+
+    }
+
+    // Add the found comments to the stack of jQuery selector execution so that the
+    // user can tranverse back up the stack when done.
+    return( this.pushStack( comments, "comments", arguments ) );
+
+  };
+
+
+  // ---
+  // PRIVATE METHODS.
+  // ---
+
+
+  // I add all items in the incoming collection to the end of the existing collection.
+  // This performs an in-place append; meaning, the existing array is mutated directly.
+  function appendAll( existing, incoming ) {
+
+    for ( var i = 0, length = incoming.length ; i < length ; i++ ) {
+
+      existing.push( incoming[ i ] );
+
+    }
+
+    return( existing );
+
+  }
+
+
+  // I collect the comment nodes contained within the given root node.
+  function collectComments( rootNode, isDeepSearch ) {
+
+    // Check for modern browser optimization.
+    if ( isDeepSearch && document.createTreeWalker ) {
+
+      return( collectCommentsWithTreeWalker( rootNode ) );
+
+    }
+
+    return( collectCommentsWithRecursion( rootNode, isDeepSearch ) );
+
+  }
+
+
+  // I collect the comment nodes contained within the given root node using the
+  // universally supported node API. This method can handle both shallow and deep
+  // searches using recursion.
+  function collectCommentsWithRecursion( rootNode, isDeepSearch ) {
+
+    var comments = [];
+
+    var node = rootNode.firstChild;
+
+    while ( node ) {
+
+      // Is comment node.
+      if ( node.nodeType === 8 ) {
+
+        comments.push( node );
+
+        // Is element node (and we want to recurse).
+      } else if ( isDeepSearch && ( node.nodeType === 1 ) ) {
+
+        appendAll( comments, collectCommentsWithRecursion( node, isDeepSearch ) );
+
+      }
+
+      node = node.nextSibling;
+
+    }
+
+    return( comments );
+
+  }
+
+
+  // I collect the comment nodes contained within the given root node using the newer
+  // TreeWalker API. This method can only handle deep searches since the search cannot
+  // be [easily] limited to a single level of the DOM.
+  function collectCommentsWithTreeWalker( rootNode ) {
+
+    var comments = [];
+
+    // NOTE: Last two arguments use default values but are NOT optional in Internet
+    // Explorer. As such, we have to use them here for broader support.
+    var treeWalker = document.createTreeWalker( rootNode, NodeFilter.SHOW_COMMENT, null, false );
+
+    while ( treeWalker.nextNode() ) {
+
+      comments.push( treeWalker.currentNode );
+
+    }
+
+    return( comments );
+
+  }
+
+
+  // I determine if the given name-value pair is contained within the given text.
+  function containsAttribute( text, name, value ) {
+
+    if ( ! text ) {
+
+      return( false );
+
+    }
+
+    // This is an attempt to quickly disqualify the comment value without having to
+    // incur the overhead of parsing the comment value into name-value pairs.
+    if ( value && ( text.indexOf( value ) === -1 ) ) {
+
+      return( false );
+
+    }
+
+    // NOTE: Using "==" to allow some type coersion.
+    if ( parseAttributes( text )[ name.toLowerCase() ] == value ) {
+
+      return( true );
+
+    }
+
+    return( false );
+
+  }
+
+
+  // I filter the given comments collection based on the existing of a "pseudo"
+  // attributes with the given name-value pair.
+  function filterCommentsByAttribute( comments, name, value ) {
+
+    var filteredComments = [];
+
+    for ( var i = 0, length = comments.length ; i < length ; i++ ) {
+
+      var comment = comments[ i ];
+
+      if ( containsAttribute( comment.nodeValue, name, value ) ) {
+
+        filteredComments.push( comment );
+
+      }
+
+    }
+
+    return( filteredComments );
+
+  }
+
+
+  // I filter the given comments based on the full-text match of the given value.
+  // --
+  // NOTE: Leading and trailing white-space is trimmed from the node content before
+  // being compared to the given value.
+  function filterCommentsByText( comments, value ) {
+
+    var filteredComments = [];
+
+    var whitespace = /^\s+|\s+$/g;
+
+    for ( var i = 0, length = comments.length ; i < length ; i++ ) {
+
+      var comment = comments[ i ];
+      var text = ( comment.nodeValue || "" ).replace( whitespace, "" );
+
+      if ( text === value ) {
+
+        filteredComments.push( comment );
+
+      }
+
+    }
+
+    return( filteredComments );
+
+  }
+
+
+
+  // I find the comments in the given node using the given, normalized settings.
+  function findComments( node, isDeepSearch, name, value ) {
+
+    var comments = collectComments( node, isDeepSearch );
+
+    if ( name ) {
+
+      return( filterCommentsByAttribute( comments, name, value ) );
+
+    } else if ( value ) {
+
+      return( filterCommentsByText( comments, value ) );
+
+    }
+
+    return( comments );
+
+  }
+
+
+  // I convert the invocation arguments into a normalized settings hash that the search
+  // algorithm can use with confidence.
+  function normalizeArguments( argumentCollection ) {
+
+    if ( argumentCollection.length > 3 ) {
+
+      throw( new Error( "Unexpected number of arguments." ) );
+
+    }
+
+    if ( ! argumentCollection.length ) {
+
+      return({
+        deep: false,
+        name: "",
+        value: ""
+      });
+
+    }
+
+    if ( argumentCollection.length === 3 ) {
+
+      return({
+        deep: !! argumentCollection[ 2 ],
+        name: argumentCollection[ 0 ],
+        value: argumentCollection[ 1 ]
+      });
+
+    }
+
+    var lastValue = Array.prototype.pop.call( argumentCollection );
+
+    if ( ( lastValue === true ) || ( lastValue === false ) ) {
+
+      if ( ! argumentCollection.length ) {
+
+        return({
+          deep: lastValue,
+          name: "",
+          value: ""
+        });
+
+      }
+
+      if ( argumentCollection.length === 1 ) {
+
+        return({
+          deep: lastValue,
+          name: "",
+          value: argumentCollection[ 0 ]
+        });
+
+      }
+
+      if ( argumentCollection.length === 2 ) {
+
+        return({
+          deep: lastValue,
+          name: argumentCollection[ 0 ],
+          value: argumentCollection[ 1 ]
+        });
+
+      }
+
+    }
+
+    if ( ! argumentCollection.length ) {
+
+      return({
+        deep: false,
+        name: "",
+        value: lastValue
+      });
+
+    }
+
+    if ( argumentCollection.length === 1 ) {
+
+      return({
+        deep: false,
+        name: argumentCollection[ 0 ],
+        value: lastValue
+      });
+
+    }
+
+    if ( argumentCollection.length === 2 ) {
+
+      return({
+        deep: false,
+        name: argumentCollection[ 1 ],
+        value: lastValue
+      });
+
+    }
+
+  }
+
+
+  // I parse the given text value into a collection of name-value pairs.
+  function parseAttributes( text ) {
+
+    var attributes = {};
+
+    var pairPattern = /([a-zA-Z][^=\s]*)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s]+)))?/gi;
+
+    var matches = null;
+
+    while ( matches = pairPattern.exec( text ) ) {
+
+      attributes[ matches[ 1 ].toLowerCase() ] = ( matches[ 2 ] || matches[ 3 ] || matches[ 4 ] || "" );
+
+    }
+
+    return( attributes );
+
+  }
+
+})( jQuery );
diff --git a/modules/renderviz/js/renderviz.js b/modules/renderviz/js/renderviz.js
new file mode 100644
index 0000000..1a127e4
--- /dev/null
+++ b/modules/renderviz/js/renderviz.js
@@ -0,0 +1,102 @@
+(function ($, _, JSON) {
+
+  "use strict";
+
+  // Map the metadata to data- attributes.
+  function setMetadata(commentNode, element) {
+    var metadata = JSON.parse(commentNode.textContent);
+    for (var key in metadata) {
+      var value = metadata[key];
+      if (value instanceof Array) {
+        if (value.length === 0) {
+          continue;
+        }
+        value = value.join(' ');
+      }
+      element.setAttribute('data-renderviz-' + key, value);
+    }
+  }
+
+  // Map the pre-bubbling metadata to data- attributes.
+  function setPrebubblingMetadata(commentNode, element) {
+    var prebubblingMetadata = JSON.parse(commentNode.textContent);
+    for (var key in prebubblingMetadata) {
+      var value = prebubblingMetadata[key];
+      if (value instanceof Array) {
+        if (value.length === 0) {
+          continue;
+        }
+        value = value.join(' ');
+      }
+      element.setAttribute('data-renderviz-prebubbling-' + key, value);
+    }
+  }
+
+  function visualize(queryMetadataType, queryMetadataValue) {
+    // One-time initialization.
+    $('html').once('renderviz').addClass('renderviz');
+    // Reset.
+    $('.renderviz-trace-layer').removeClass('renderviz-trace-layer');
+    $('.renderviz-trace-layer-root').removeClass('renderviz-trace-layer-root');
+    $('.renderviz-trace-focus').removeClass('renderviz-trace-focus');
+    // Apply the new query.
+    var result = $('[data-renderviz-' + queryMetadataType + '~="' + queryMetadataValue + '"]');
+    console.log('' + result.length + ' matches found.');
+    console.log(result);
+    result.addClass('renderviz-trace-layer');
+    $('[data-renderviz-prebubbling-' + queryMetadataType + '~="' + queryMetadataValue + '"]').addClass('renderviz-trace-layer-root');
+    window.rendervizLastType = queryMetadataType;
+    window.rendervizLastValue = queryMetadataValue;
+  }
+
+  function focus(index) {
+    // Reset.
+    $('.renderviz-trace-focus').removeClass('renderviz-trace-focus');
+    // Apply the new focus.
+    var el = $('[data-renderviz-' + window.rendervizLastType + '~="' + window.rendervizLastValue+ '"]')[index];
+    console.log(el);
+    $(el).addClass('renderviz-trace-focus');
+  }
+
+  Drupal.behaviors.renderviz = {
+    attach: function (context) {
+      // Transplant the data from the HTML comments onto the parent element.
+      var comments = $(context).comments(true);
+      for (var i = 0; i < comments.length; i++) {
+        if (comments[i].textContent === 'RENDERER_START') {
+          var element = comments[i].nextElementSibling;
+          if (element) {
+            // Mark the element for renderviz treatment.
+            element.setAttribute('data-renderviz-element', true);
+            setMetadata(comments[i+1], element);
+            setPrebubblingMetadata(comments[i+2], element);
+          }
+          // @todo improve this; might need some complex merging logic.
+          // If we have renderer metadata, but it's not for an Element node,
+          // then it is for a Text node. In that case, set the pre-bubbling
+          // metadata of the Text node on the parent Element node.
+          // e.g. TimestampFormatter — the node timestamp
+          else {
+            element = comments[i].parentElement;
+            setPrebubblingMetadata(comments[i+2], element);
+          }
+        }
+      }
+
+      $('body').once('renderviz-init').each(function() {
+        var contexts = [], tags = [];
+        $('[data-renderviz-contexts]').each(function (index, element) {
+          contexts = _.union(contexts, element.attributes['data-renderviz-contexts'].value.split(' '));
+        });
+        $('[data-renderviz-tags]').each(function (index, element) {
+          tags = _.union(tags, element.attributes['data-renderviz-tags'].value.split(' '));
+        });
+        console.log('' + $('[data-renderviz-element]').length + ' unique rendered elements on the page.', "\nContexts:", contexts, "\nTags:", tags);
+        console.log("To use:\n- Querying: `renderviz(metadataType, metadataValue)`, e.g. `renderviz('contexts', 'timezone')`.\n- Focusing: `rendervizFocus(index)`, e.g. `rendervizFocus(0)` to focus on the first element of the last query.");
+        window.renderviz = visualize;
+        window.rendervizFocus = focus;
+      });
+    }
+  };
+
+})(jQuery, _, window.JSON);
diff --git a/modules/renderviz/renderviz.info.yml b/modules/renderviz/renderviz.info.yml
new file mode 100644
index 0000000..08030b1
--- /dev/null
+++ b/modules/renderviz/renderviz.info.yml
@@ -0,0 +1,3 @@
+name: Render Visualization
+type: module
+core: 8.x
diff --git a/modules/renderviz/renderviz.libraries.yml b/modules/renderviz/renderviz.libraries.yml
new file mode 100644
index 0000000..ba4aafd
--- /dev/null
+++ b/modules/renderviz/renderviz.libraries.yml
@@ -0,0 +1,22 @@
+jquery.comments:
+  remote: …
+  version: …
+  license:
+    name: …
+    url: …
+    gpl-compatible: true
+  js:
+    js/jquery.comments.js: {}
+  dependencies:
+    - core/jquery
+    - core/underscore
+
+renderviz:
+  css:
+    layout:
+      css/renderviz.layout.css: {}
+    theme:
+      css/renderviz.theme.css: {}
+  js:
+    js/renderviz.js: {}
+  dependencies:
+    - core/underscore
+    - renderviz/jquery.comments
diff --git a/modules/renderviz/renderviz.module b/modules/renderviz/renderviz.module
new file mode 100644
index 0000000..0945f5d
--- /dev/null
+++ b/modules/renderviz/renderviz.module
@@ -0,0 +1,13 @@
+<?php
+
+/**
+ * @file
+ * …
+ */
+
+/**
+ * Implements hook_page_attachments().
+ */
+function renderviz_page_attachments(array &$page) {
+  $page['#attached']['library'][] = 'renderviz/renderviz';
+}