crm-ui-debug - If in debug mode, then load pretty-printer for JSON data

Civi/Angular/Manager.php

@@ -111,6 +111,7 @@ public function getModules() {
       $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";

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'] : []
+  ),
 ];

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">';
+            return '<div crm-ui-accordion=\'{title: ts("Debug (%1)", {1: crmUiDebug}), collapsed: true}\'>' + jsonTpl + '</json-formatter></div>';
+          }
+          return '';
         },
         link: function(scope, element, attrs) {
           var args = $location.search();

ang/jsonFormatter.ang.php

@@ -0,0 +1,8 @@
+<?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' => [],
+];

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"]

tests/phpunit/Civi/Angular/ManagerTest.php

@@ -181,8 +181,12 @@ public function testResolveDeps() {
       '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);