feat: persist _debugLog in localStorage (#1570)

Author: mwcz

CHANGELOG-1.x.md

@@ -4,8 +4,9 @@
 
 # 1.8.0 (2021-05-18)
 
-- [f1c1176](https://github.com/patternfly/patternfly-elements/commit/f1c1176d9278d6e5b8066b42fc040ea01d98ecb2) feat: pfe-icon now supports setting default icon sets
+- [](https://github.com/patternfly/patternfly-elements/commit/) feat: persist debugLog in localStorage
 - [267ff8e](https://github.com/patternfly/patternfly-elements/commit/267ff8ee7df7cd0512f16c58fdb169f941bfa4cd) feat: Update fetch mixin to support region input (#1328)
+- [f1c1176](https://github.com/patternfly/patternfly-elements/commit/f1c1176d9278d6e5b8066b42fc040ea01d98ecb2) feat: pfe-icon now supports setting default icon sets
 - [56eb55e](https://github.com/patternfly/patternfly-elements/commit/56eb55ec8b4b62aee7d36950d158229cbf50ddef) fix: pfe-accordion IE11 regression; background context should always be white with black text
 - [398003e](https://github.com/patternfly/patternfly-elements/commit/398003e3d805567af826d924bfd5e2e9655425a4) fix: [pfe-icon] Update icon color vs. background color custom property support
 - [63df897](https://github.com/patternfly/patternfly-elements/commit/63df897d5235a2af15733b52a1c0f4d8304dcb96) fix: Add in missing polyfills for pfelement

elements/pfelement/README.md

@@ -125,9 +125,11 @@ If a value is defined at any point of this flow, an `on` attribute will be attac
 
 The `context_update` function will use much the same logic except it updates the context for the component calling the function and triggers an update for all of it's pfelement children.
 
-### Log
+### Debug logging
 
-Prints a message to the console log in a standardized format when debugging is turned on: `[pfe-band]: This is my console message.`.  To invoke this inside an element, you can add `this.log("This is my console message");` to your JS file.
+Debug logging can be enabled by running `localStorage.pfeLog = true` in the console.  This setting is sticky, so you can refresh the page and debug logging will stay enabled on that domain.  To disable debug logging, run `localStorage.removeItem("pfeLog")`.  You can also run `PFElement.debugLog(true)` to enable and `PFElement.debugLog(false)` to disable, however it's almost always easier to use localStorage directly because it can be tedious to get a reference to `PFElement` from the console.
+
+Printing debug log messages can be done with `this.log("This is my debug log message")` within any element's method.  This will produce a console log such as: `[pfe-band]: This is my console message.`.
 
 ### Emit event
 

elements/pfelement/src/pfelement.js

@@ -1,5 +1,5 @@
-import { autoReveal } from "./reveal.js";
-import { isAllowedType, isValidDefaultType } from "./attrDefValidators.js";
+import {autoReveal} from "./reveal.js";
+import {isAllowedType, isValidDefaultType} from "./attrDefValidators.js";
 // Import polyfills: includes
 import "./polyfills--pfelement.js";
 
@@ -19,14 +19,23 @@ class PFElement extends HTMLElement {
   /**
    * A boolean value that indicates if the logging should be printed to the console; used for debugging.
    * For use in a JS file or script tag; can also be added in the constructor of a component during development.
-   * @example PFElement._debugLog = true;
+   * @example PFElement.debugLog(true);
    * @tags debug
    */
   static debugLog(preference = null) {
     if (preference !== null) {
-      PFElement._debugLog = !!preference;
+      // wrap localStorage references in a try/catch; merely referencing it can
+      // throw errors in some locked down environments
+      try {
+        localStorage.pfeLog = !!preference;
+      } catch (e) {
+        // if localStorage fails, fall back to PFElement._debugLog
+        PFElement._debugLog = !!preference;
+        return PFElement._debugLog;
+      }
     }
-    return PFElement._debugLog;
+    // @TODO the reference to _debugLog is for backwards compatibiilty and will be removed in 2.0
+    return localStorage.pfeLog === "true" || PFElement._debugLog;
   }
 
   /**
@@ -353,7 +362,7 @@ class PFElement extends HTMLElement {
     this.on = value;
   }
 
-  constructor(pfeClass, { type = null, delayRender = false } = {}) {
+  constructor(pfeClass, {type = null, delayRender = false} = {}) {
     super();
 
     this._pfeClass = pfeClass;
@@ -386,7 +395,7 @@ class PFElement extends HTMLElement {
     // Initalize the properties and attributes from the property getter
     this._initializeProperties();
 
-    this.attachShadow({ mode: "open" });
+    this.attachShadow({mode: "open"});
 
     // Tracks if the component has been initially rendered. Useful if for debouncing
     // template updates.
@@ -501,7 +510,7 @@ class PFElement extends HTMLElement {
 
     // If the slot definition exists, set up an observer
     if (typeof this.slots === "object" && this._slotsObserver) {
-      this._slotsObserver.observe(this, { childList: true });
+      this._slotsObserver.observe(this, {childList: true});
     }
 
     // If an observer was defined, set it to begin observing here
@@ -519,7 +528,7 @@ class PFElement extends HTMLElement {
   /**
    * A wrapper around an event dispatch to standardize formatting.
    */
-  emitEvent(name, { bubbles = true, cancelable = false, composed = true, detail = {} } = {}) {
+  emitEvent(name, {bubbles = true, cancelable = false, composed = true, detail = {}} = {}) {
     if (detail) this.log(`Custom event: ${name}`, detail);
     else this.log(`Custom event: ${name}`);
 
@@ -792,7 +801,7 @@ class PFElement extends HTMLElement {
 
     this.log("Slots validated.");
 
-    if (this._slotsObserver) this._slotsObserver.observe(this, { childList: true });
+    if (this._slotsObserver) this._slotsObserver.observe(this, {childList: true});
   }
 
   /**
@@ -1036,7 +1045,7 @@ class PFElement extends HTMLElement {
    */
   static _populateCache(pfe) {
     // @TODO add a warning when a component property conflicts with a global property.
-    const mergedProperties = { ...pfe.properties, ...PFElement.properties };
+    const mergedProperties = {...pfe.properties, ...PFElement.properties};
 
     pfe._setCache("componentProperties", pfe.properties);
     pfe._setCache("globalProperties", PFElement.properties);

elements/pfelement/test/pfelement_logging_test.html

@@ -81,6 +81,14 @@
           PFElement.debugLog(false);
         });
 
+        test("logging should begin when localStorage value is present", () => {
+          const test = document.querySelector("pfe-test");
+          localStorage.setItem("pfeLog", true);
+          test.setAttribute(testAttrName, 3);
+          assert.isTrue(logSpy.called);
+          localStorage.removeItem("pfeLog");
+        });
+
         test("logging should end when opted out of", () => {
           const test = document.querySelector("pfe-test");
           PFElement.debugLog(true);