From 10d00207166f64a6e19bdf7b3b1d0de9830ecf79 Mon Sep 17 00:00:00 2001
From: Tim Otten <totten@civicrm.org>
Date: Thu, 19 Nov 2020 01:35:46 -0800
Subject: [PATCH] crm-ui-debug - If in debug mode, then load pretty-printer for
 JSON data

---
 Civi/Angular/Manager.php                   |  1 +
 ang/crmUi.ang.php                          | 14 ++++++++++----
 ang/crmUi.js                               |  6 +++++-
 ang/jsonFormatter.ang.php                  | 11 +++++++++++
 composer.json                              |  5 +++++
 tests/phpunit/Civi/Angular/ManagerTest.php |  4 ++++
 6 files changed, 36 insertions(+), 5 deletions(-)
 create mode 100644 ang/jsonFormatter.ang.php

diff --git a/Civi/Angular/Manager.php b/Civi/Angular/Manager.php
index 5724bdab68..80eb16d258 100644
--- a/Civi/Angular/Manager.php
+++ b/Civi/Angular/Manager.php
@@ -111,6 +111,7 @@ class Manager {
       $angularModules['crmUi'] = include "$civicrm_root/ang/crmUi.ang.php";
       $angularModules['crmUtil'] = include "$civicrm_root/ang/crmUtil.ang.php";
       $angularModules['dialogService'] = include "$civicrm_root/ang/dialogService.ang.php";
+      $angularModules['jsonFormatter'] = include "$civicrm_root/ang/jsonFormatter.ang.php";
       $angularModules['ngRoute'] = include "$civicrm_root/ang/ngRoute.ang.php";
       $angularModules['ngSanitize'] = include "$civicrm_root/ang/ngSanitize.ang.php";
       $angularModules['ui.utils'] = include "$civicrm_root/ang/ui.utils.ang.php";
diff --git a/ang/crmUi.ang.php b/ang/crmUi.ang.php
index 72c6594aeb..cc7c2149b6 100644
--- a/ang/crmUi.ang.php
+++ b/ang/crmUi.ang.php
@@ -3,12 +3,18 @@
 // in CiviCRM. See also:
 // http://wiki.civicrm.org/confluence/display/CRMDOC/hook_civicrm_angularModules
 
+$isDebug = Civi::settings()->get('debug_enabled');
+
 return [
   'ext' => 'civicrm',
   'js' => ['ang/crmUi.js'],
   'partials' => ['ang/crmUi'],
-  'requires' => [
-    'crmResource',
-    'ui.utils',
-  ],
+  'requires' => array_merge(
+    [
+      'crmResource',
+      'ui.utils',
+    ],
+    // Only require the +10kb if we're likely to need it.
+    $isDebug ? ['jsonFormatter'] : []
+  ),
 ];
diff --git a/ang/crmUi.js b/ang/crmUi.js
index 355939c2dc..87d15f7f60 100644
--- a/ang/crmUi.js
+++ b/ang/crmUi.js
@@ -106,7 +106,11 @@
         },
         template: function() {
           var args = $location.search();
-          return (args && args.angularDebug) ? '<div crm-ui-accordion=\'{title: ts("Debug (%1)", {1: crmUiDebug}), collapsed: true}\'><pre>{{data|json}}</pre></div>' : '';
+          if (args && args.angularDebug) {
+            var jsonTpl = (CRM.angular.modules.indexOf('jsonFormatter') < 0) ? '<pre>{{data|json}}</pre>' : '<json-formatter json="data" open="1"></json-formatter>';
+            return '<div crm-ui-accordion=\'{title: ts("Debug (%1)", {1: crmUiDebug}), collapsed: true}\'>' + jsonTpl + '</div>';
+          }
+          return '';
         },
         link: function(scope, element, attrs) {
           var args = $location.search();
diff --git a/ang/jsonFormatter.ang.php b/ang/jsonFormatter.ang.php
new file mode 100644
index 0000000000..16f220407f
--- /dev/null
+++ b/ang/jsonFormatter.ang.php
@@ -0,0 +1,11 @@
+<?php
+
+return [
+  'ext' => 'civicrm',
+  'js' => ['bower_components/json-formatter/dist/json-formatter.min.js'],
+  'css' => ['bower_components/json-formatter/dist/json-formatter.min.css'],
+  'requires' => [],
+  'exports' => [
+    'json-formatter' => 'E',
+  ],
+];
diff --git a/composer.json b/composer.json
index 867a641f2e..d0fba558f8 100644
--- a/composer.json
+++ b/composer.json
@@ -231,6 +231,11 @@
         "url": "https://github.com/jquery-validation/jquery-validation/archive/1.19.1.zip",
         "ignore": [".*", "node_modules", "bower_components", "test", "demo", "lib"]
       },
+      "json-formatter": {
+        "url": "https://github.com/mohsen1/json-formatter/archive/v{$version}.zip",
+        "version": "0.7.0",
+        "ignore": ["demo", "test", "screenshot.png"]
+      },
       "jstree": {
         "url": "https://github.com/vakata/jstree/archive/3.3.8.zip",
         "ignore": [".*", "docs", "demo", "libs", "node_modules", "test", "libs", "jstree.jquery.json", "gruntfile.js", "package.json", "bower.json", "component.json", "LICENCE-MIT", "README.md"]
diff --git a/tests/phpunit/Civi/Angular/ManagerTest.php b/tests/phpunit/Civi/Angular/ManagerTest.php
index 8cdb52ced1..bd763249a1 100644
--- a/tests/phpunit/Civi/Angular/ManagerTest.php
+++ b/tests/phpunit/Civi/Angular/ManagerTest.php
@@ -181,8 +181,12 @@ class ManagerTest extends \CiviUnitTestCase {
       'ngSanitize',
       'ui.utils',
     ];
+    $ignore = [
+      'jsonFormatter',
+    ];
     $input = ['crmMailing', 'crmCxn'];
     $actual = $this->angular->resolveDependencies($input);
+    $actual = array_diff($actual, $ignore);
     sort($expected);
     sort($actual);
     $this->assertEquals($expected, $actual);
-- 
2.25.1