From c4c69e7b691a98118aa3e0697648707f4ea62bd4 Mon Sep 17 00:00:00 2001
From: Tim Otten <totten@civicrm.org>
Date: Mon, 16 Mar 2015 22:38:24 -0700
Subject: [PATCH] CRM-16120 - crmUiDebug - Only display debug fields if
 ?angularDebug=1

We've been outputting a collapsible debug panel by default. This completely
hides (or shows) the debug panel depending on whether parameter
"angularDebug" is set.

Note that there are also browser plugins which are richer, more flexible,
more thorough, and it's probably better to install one of those.  However,
it's tough to standardize on one plugin (b/c they're different for each
browser and because we can't bundle them into buildkit).  In a crunch (e.g.
when debugging on a non-developer's workstation), the parameter could still
be helpful.
---
 js/angular-crm-ui.js                   | 25 +++++++++++++++++++++++++
 partials/crmMailing/edit-unified.html  |  4 +---
 partials/crmMailing/edit-unified2.html |  4 +---
 partials/crmMailing/edit-wizard.html   |  4 +---
 partials/crmMailing/edit-workflow.html |  4 +---
 partials/crmMailing/edit.html          |  4 +---
 partials/crmMailingAB/main.html        |  6 ++----
 7 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/js/angular-crm-ui.js b/js/angular-crm-ui.js
index be4fb45a3d..0876e149a3 100644
--- a/js/angular-crm-ui.js
+++ b/js/angular-crm-ui.js
@@ -85,6 +85,31 @@
       };
     })
 
+    // Display debug information (if available)
+    // For richer DX, checkout Batarang/ng-inspector (Chrome/Safari), or AngScope/ng-inspect (Firefox).
+    // example: <div crm-ui-debug="myobject" />
+    .directive('crmUiDebug', function ($location) {
+      return {
+        restrict: 'AE',
+        scope: {
+          crmUiDebug: '@'
+        },
+        template: function() {
+          var args = $location.search();
+          return (args && args.angularDebug) ? '<div crm-ui-accordion crm-title=\'ts("Debug (%1)", {1: crmUiDebug})\' crm-collapsed="true"><pre>{{data|json}}</pre></div>' : '';
+        },
+        link: function(scope, element, attrs) {
+          var args = $location.search();
+          if (args && args.angularDebug) {
+            scope.ts = CRM.ts(null);
+            scope.$parent.$watch(attrs.crmUiDebug, function(data) {
+              scope.data = data;
+            });
+          }
+        }
+      };
+    })
+
     // Display a field/row in a field list
     // example: <div crm-ui-field crm-title="My Field"> {{mydata}} </div>
     // example: <div crm-ui-field="subform.myfield" crm-title="'My Field'"> <input crm-ui-id="subform.myfield" name="myfield" /> </div>
diff --git a/partials/crmMailing/edit-unified.html b/partials/crmMailing/edit-unified.html
index ef4b2ad66b..35854109ef 100644
--- a/partials/crmMailing/edit-unified.html
+++ b/partials/crmMailing/edit-unified.html
@@ -1,6 +1,4 @@
-<div crm-ui-accordion crm-title="ts('Debug')" crm-collapsed="true">
-  <pre>{{mailing|json}}</pre>
-</div>
+<div crm-ui-debug="mailing"></div>
 
 <div ng-show="isSubmitted()">
   {{ts('This mailing has been submitted.')}}
diff --git a/partials/crmMailing/edit-unified2.html b/partials/crmMailing/edit-unified2.html
index 7f1ef824a2..cc20ff2afb 100644
--- a/partials/crmMailing/edit-unified2.html
+++ b/partials/crmMailing/edit-unified2.html
@@ -1,6 +1,4 @@
-<div crm-ui-accordion crm-title="ts('Debug')" crm-collapsed="true">
-  <pre>{{mailing|json}}</pre>
-</div>
+<div crm-ui-debug="mailing"></div>
 
 <div ng-show="isSubmitted()">
   {{ts('This mailing has been submitted.')}}
diff --git a/partials/crmMailing/edit-wizard.html b/partials/crmMailing/edit-wizard.html
index ef2a8eef0b..4337c859f1 100644
--- a/partials/crmMailing/edit-wizard.html
+++ b/partials/crmMailing/edit-wizard.html
@@ -1,6 +1,4 @@
-<div crm-ui-accordion crm-title="ts('Debug')" crm-collapsed="true">
-  <pre>{{mailing|json}}</pre>
-</div>
+<div crm-ui-debug="mailing"></div>
 
 <div ng-show="isSubmitted()">
   {{ts('This mailing has been submitted.')}}
diff --git a/partials/crmMailing/edit-workflow.html b/partials/crmMailing/edit-workflow.html
index 740f428466..cd530abb80 100644
--- a/partials/crmMailing/edit-workflow.html
+++ b/partials/crmMailing/edit-workflow.html
@@ -1,6 +1,4 @@
-<div crm-ui-accordion crm-title="ts('Debug')" crm-collapsed="true">
-  <pre>{{mailing|json}}</pre>
-</div>
+<div crm-ui-debug="mailing"></div>
 
 <div ng-show="isSubmitted()">
   {{ts('This mailing has been submitted.')}}
diff --git a/partials/crmMailing/edit.html b/partials/crmMailing/edit.html
index 8e581bfaf3..b46a54ca28 100644
--- a/partials/crmMailing/edit.html
+++ b/partials/crmMailing/edit.html
@@ -1,6 +1,4 @@
-<div crm-ui-accordion crm-title="ts('Debug')" crm-collapsed="true">
-  <pre>{{mailing|json}}</pre>
-</div>
+<div crm-ui-debug="mailing"></div>
 
 <div ng-show="isSubmitted()">
   {{ts('This mailing has been submitted.')}}
diff --git a/partials/crmMailingAB/main.html b/partials/crmMailingAB/main.html
index 668df76369..2eabc680bc 100644
--- a/partials/crmMailingAB/main.html
+++ b/partials/crmMailingAB/main.html
@@ -1,10 +1,8 @@
 <!--
   Implicit Controller: CrmMailingABEditCtrl
 -->
-<div crm-ui-accordion crm-title="ts('Debug')" crm-collapsed="true">
-  <pre>{{abtest.ab|json}}</pre>
-  <pre>{{abtest.mailings|json}}</pre>
-</div>
+<div crm-ui-debug="abtest.ab"></div>
+<div crm-ui-debug="abtest.mailings"></div>
 
 <form name="crmMailingAB" novalidate>
   <div ng-include="'~/crmMailingAB/edit.html'" ng-if="!isSubmitted()"></div>
-- 
2.25.1