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.

diff --git a/js/angular-crm-ui.js b/js/angular-crm-ui.js
index be4fb45a3d93a4d4ddac5cdea73ef25b580aa189..0876e149a329f5a6e7407d5a587327550adbd435 100644 (file)
--- 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 ef4b2ad66b2c27c2bf38516a72269adf7ec78728..35854109ef0f57dbd9cd2db7a1aec2e78b719774 100644 (file)
--- 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 7f1ef824a2f812b2a7212718422033e1212ab300..cc20ff2afbe5a4547b7f686a99c4c18d750910d5 100644 (file)
--- 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 ef2a8eef0bf3a7c2143b2996119eae3201abc35b..4337c859f181df5d82ac0b34f061a2bd9cbda7ca 100644 (file)
--- 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 740f42846642594de22f06e9808b700bb2cb5ce0..cd530abb8052c3d0aa3dcf07bafa9a3e5f9a6089 100644 (file)
--- 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 8e581bfaf30c0caae17e56143c8f696495560b9a..b46a54ca28861c67f7d118c5a0be8716d8e11a7c 100644 (file)
--- 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 668df76369388d71cc53b19cb812a210d92bac68..2eabc680bc1a942b9518017facfe4a95bde52d95 100644 (file)
--- 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>