Problem/Motivation

With #3420709: Make it more obvious that a Twig template is overridden, Drupal core started using black squares ▪️, checkboxes ✅ , lightbulbs 💡 to increase readability in the DOM. It would be nice to use the same formatting in the CRITICAL CSS DEBUG section

This module's current output:

<style id="critical-css">
/* CRITICAL CSS DEBUG */
/* FILE NAME SUGGESTIONS:
	 * themes/custom/mytheme/css/critical/1.css
	 * themes/custom/mytheme/css/critical/path-node-1.css
	 * themes/custom/mytheme/css/critical/node-1.css
	 * themes/custom/mytheme/css/critical/path-my-article-title.css
	 * themes/custom/mytheme/css/critical/my-article-title.css
	 x themes/custom/mytheme/css/critical/article.css
	 * themes/custom/mytheme/css/critical/default-critical.css
*/
/* BEGIN OUTPUT from themes/custom/mytheme/css/critical/article.css */
[...]
/* END OUTPUT from themes/custom/mytheme/css/critical/article.css */
</style>

Core theme debugging output:

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'page' -->
<!-- FILE NAME SUGGESTIONS:
   ✅ page--node--article.html.twig
   ▪️ page--node--1.html.twig
   ▪️ page--node--%.html.twig
   ▪️ page--node.html.twig
   ▪️ page.html.twig
-->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'path/to/page--node--article.html.twig' -->
[...]
<!-- END CUSTOM TEMPLATE OUTPUT from 'path/to/page--node--article.html.twig' -->

Proposed resolution

  1. Replace the asterisk * with a black dot icon ▪️ for unused file name suggestions.
  2. Replace the asterisk x with a checkmark icon ✅ for the selected filename suggestion.
  3. Add a lightbulb icon 💡 before the BEGIN OUTPUT section.
  4. Change indentation to 3 spaces.

Proposed output:

<style id="critical-css">
/* CRITICAL CSS DEBUG */
/* FILE NAME SUGGESTIONS:
   ▪️ themes/custom/mytheme/css/critical/1.css
   ▪️ themes/custom/mytheme/css/critical/path-node-1.css
   ▪️ themes/custom/mytheme/css/critical/node-1.css
   ▪️ themes/custom/mytheme/css/critical/path-my-article-title.css
   ▪️ themes/custom/mytheme/css/critical/my-article-title.css
   ✅  themes/custom/mytheme/css/critical/article.css
   ▪️ themes/custom/mytheme/css/critical/default-critical.css
*/
/* 💡 BEGIN OUTPUT from themes/custom/mytheme/css/critical/article.css */
[...]
/* END OUTPUT from themes/custom/mytheme/css/critical/article.css */
</style>

Remaining tasks

User interface changes

API changes

Data model changes

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

jwilson3 created an issue. See original summary.

jwilson3’s picture

Issue summary: View changes
jwilson3’s picture

Issue summary: View changes
jwilson3’s picture

Issue summary: View changes

jwilson3’s picture

Status: Active » Needs review
jwilson3’s picture

Title: Follow core's new Twig Debug formatting with icons » Improve Critical CSS debug output readability