@jinntec/fore 2.2.0 → 2.3.0

package/src/tools/fx-action-log.js

@@ -1,18 +1,17 @@
-import {XPathUtil} from "../xpath-util";
-import "./fx-log-item.js";
-import {FxLogSettings} from './fx-log-settings.js';
-
+import { XPathUtil } from '../xpath-util';
+import './fx-log-item.js';
+import { FxLogSettings } from './fx-log-settings.js';
 
 export class FxActionLog extends HTMLElement {
-    constructor() {
-        super();
-        this.attachShadow({mode: 'open'});
-        this.listenTo = [];
-        this.listeners = [];
-    }
-
-    connectedCallback() {
-        const style = `
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.listenTo = [];
+    this.listeners = [];
+  }
+
+  connectedCallback() {
+    const style = `
       :host {
         display:block;
         position:relative;
@@ -211,19 +210,19 @@ export class FxActionLog extends HTMLElement {
       }
     `;
 
-        if (localStorage.getItem('fx-action-log-filters')) {
-            this.listenTo = JSON.parse(localStorage.getItem('fx-action-log-filters'));
-        } else {
-            this.listenTo = FxLogSettings.defaultSettings()
-        }
+    if (localStorage.getItem('fx-action-log-filters')) {
+      this.listenTo = JSON.parse(localStorage.getItem('fx-action-log-filters'));
+    } else {
+      this.listenTo = FxLogSettings.defaultSettings();
+    }
 
-        if (localStorage.getItem('fx-log-settings')) {
-            this.listenTo = JSON.parse(localStorage.getItem('fx-log-settings'));
-        } else {
-            this.listenTo = FxLogSettings.defaultSettings();
-        }
+    if (localStorage.getItem('fx-log-settings')) {
+      this.listenTo = JSON.parse(localStorage.getItem('fx-log-settings'));
+    } else {
+      this.listenTo = FxLogSettings.defaultSettings();
+    }
 
-        const html = `
+    const html = `
       <section open class="outer-details">
         <header>Log 
             <span class="buttons">
@@ -236,34 +235,34 @@ export class FxActionLog extends HTMLElement {
       </section>
     `;
 
-        this.shadowRoot.innerHTML = `
+    this.shadowRoot.innerHTML = `
         <style>
             ${style}
         </style>
         ${html}
     `;
 
-        const fore = window.document.querySelector('fx-fore');
-        if (!fore) {
-            console.error('fx-fore element not found in this page.');
-        }
-        const log = this.shadowRoot.querySelector('#log');
-        // fore.classList.add('action-log');
-
-        this.listenTo.forEach(eventName => {
-            if (eventName.show) {
-                document.addEventListener(eventName.name, e => {
-                    this._log(e, log);
-                });
-            }
+    const fore = window.document.querySelector('fx-fore');
+    if (!fore) {
+      console.error('fx-fore element not found in this page.');
+    }
+    const log = this.shadowRoot.querySelector('#log');
+    // fore.classList.add('action-log');
+
+    this.listenTo.forEach(eventName => {
+      if (eventName.show) {
+        document.addEventListener(eventName.name, e => {
+          this._log(e, log);
         });
+      }
+    });
 
-        // const boxes = this.shadowRoot.querySelector('.boxes');
+    // const boxes = this.shadowRoot.querySelector('.boxes');
 
-        /*
+    /*
         build the list of checkboxes for the filtering settings
          */
-        /*
+    /*
                 this.listenTo.forEach(item => {
                     const wrapper = document.createElement('span');
                     boxes.append(wrapper);
@@ -301,184 +300,245 @@ export class FxActionLog extends HTMLElement {
                 });
         */
 
-        document.addEventListener('outermost-action-start', e => {
-            this.outermost = true;
-        }, {capture: true});
-        document.addEventListener('outermost-action-end', e => {
-            this.outermost = false;
-            this.outermostAppender = null;
-        }, {capture: true});
-
-        // buttons
-        const del = this.shadowRoot.querySelector('#del');
-        del.addEventListener('click', e => {
-            this.shadowRoot.querySelector('#log').innerHTML = '';
-        });
-        document.addEventListener('keydown', event => {
-            if (event.ctrlKey && event.key === 'd') {
-                this.shadowRoot.querySelector('#log').innerHTML = '';
-            }
-        });
-    }
-
-    _defaultSettings() {
-        this.listenTo = [
-            {name: "action-performed", show: false, description: 'fires after an action has been performed'},
-            {name: "click", show: false, description: ''},
-            {name: "deleted", show: false, description: 'fires after a delete action has been executed'},
-            {name: "deselect", show: false, description: 'fires when fx-case is deselected'},
-            {name: "dialog-hidden", show: false, description: 'fires after fx-dialog has been hidden'},
-            {name: "dialog-shown", show: false, description: 'fired when a dialog has been shown'},
-            {name: "error", show: false, description: 'fires after an error occurred'},
-            {name: "execute-action", show: true, description: 'fires when an action executes'},
-            {name: "init", show: false, description: 'fires when a control initializes'},
-            {name: "index-changed", show: false, description: 'fires when the repeat index changes'},
-            {name: "insert", show: false, description: 'fires when an fx-insert is executed'},
-            {name: "instance-loaded", show: false, description: 'fires after an fx-instance has been loaded'},
-            {name: "invalid", show: false, description: 'fires after a control became invalid'},
-            {name: "item-changed", show: false, description: 'fires when a repeat item was changed'},
-            {name: "item-created", show: false, description: 'fires when a repeat item was created'},
-            {name: "loaded", show: false, description: 'fires after a fx-load has loaded'},
-            {name: "model-construct", show: false, description: 'fires when a model gets constructed'},
-            {name: "model-construct-done", show: false, description: 'fires after model initialization'},
-            {name: "nonrelevant", show: false, description: 'fires after an fx-control became nonrelevant'},
-            {name: "optional", show: false, description: 'fires after an fx-control became optional'},
-            {
-                name: "outermost-action-end",
-                show: false,
-                description: 'fires when an outermost action block is finished'
-            },
-            {
-                name: "outermost-action-start",
-                show: false,
-                description: 'fires when an outermost action block is started'
-            },
-            {name: "path-mutated", show: false, description: 'fires when a path in a repeat has been mutated'},
-            {name: "readonly", show: false, description: 'fires after an fx-control became readonly'},
-            {name: "readwrite", show: false, description: 'fires after an fx-control became readwrite'},
-            {name: "ready", show: false, description: 'fires after a fx-fore page has been completely initialized'},
-            {name: "rebuild-done", show: false, description: 'fires after a rebuild has taken place'},
-            {name: "recalculate-done", show: false, description: 'fires after a recalculate has taken place'},
-            {name: "refresh-done", show: false, description: 'fires after a refresh has been done'},
-            {name: "relevant", show: false, description: 'fires after a fx-control has become relevant'},
-            {name: "reload", show: false, description: 'fires when a fx-reload action executes'},
-            {name: "required", show: false, description: 'fires after an fx-control has become required'},
-            {name: "return", show: false, description: 'fired by embedded Fore controls to return their bound value'},
-            {name: "select", show: false, description: 'fires when an fx-case has been selected'},
-            {name: "submit", show: false, description: 'fires before a submission takes place'},
-            {name: "submit-done", show: false, description: 'fires after a submission has successfully been executed'},
-            {name: "submit-error", show: false, description: 'fires when a submission returned an error'},
-            {name: "valid", show: false, description: 'fires after a fx-control has become valid'},
-            {name: "value-changed", show: false, description: 'fires after a fx-control has changed its value'}
-        ];
+    document.addEventListener(
+      'outermost-action-start',
+      e => {
+        this.outermost = true;
+      },
+      { capture: true },
+    );
+    document.addEventListener(
+      'outermost-action-end',
+      e => {
+        this.outermost = false;
+        this.outermostAppender = null;
+      },
+      { capture: true },
+    );
+
+    // buttons
+    const del = this.shadowRoot.querySelector('#del');
+    del.addEventListener('click', e => {
+      this.shadowRoot.querySelector('#log').innerHTML = '';
+    });
+    document.addEventListener('keydown', event => {
+      if (event.ctrlKey && event.key === 'd') {
+        this.shadowRoot.querySelector('#log').innerHTML = '';
+      }
+    });
+  }
+
+  _defaultSettings() {
+    this.listenTo = [
+      {
+        name: 'action-performed',
+        show: false,
+        description: 'fires after an action has been performed',
+      },
+      { name: 'click', show: false, description: '' },
+      {
+        name: 'deleted',
+        show: false,
+        description: 'fires after a delete action has been executed',
+      },
+      { name: 'deselect', show: false, description: 'fires when fx-case is deselected' },
+      { name: 'dialog-hidden', show: false, description: 'fires after fx-dialog has been hidden' },
+      { name: 'dialog-shown', show: false, description: 'fired when a dialog has been shown' },
+      { name: 'error', show: false, description: 'fires after an error occurred' },
+      { name: 'execute-action', show: true, description: 'fires when an action executes' },
+      { name: 'init', show: false, description: 'fires when a control initializes' },
+      { name: 'index-changed', show: false, description: 'fires when the repeat index changes' },
+      { name: 'insert', show: false, description: 'fires when an fx-insert is executed' },
+      {
+        name: 'instance-loaded',
+        show: false,
+        description: 'fires after an fx-instance has been loaded',
+      },
+      { name: 'invalid', show: false, description: 'fires after a control became invalid' },
+      { name: 'item-changed', show: false, description: 'fires when a repeat item was changed' },
+      { name: 'item-created', show: false, description: 'fires when a repeat item was created' },
+      { name: 'loaded', show: false, description: 'fires after a fx-load has loaded' },
+      { name: 'model-construct', show: false, description: 'fires when a model gets constructed' },
+      {
+        name: 'model-construct-done',
+        show: false,
+        description: 'fires after model initialization',
+      },
+      {
+        name: 'nonrelevant',
+        show: false,
+        description: 'fires after an fx-control became nonrelevant',
+      },
+      { name: 'optional', show: false, description: 'fires after an fx-control became optional' },
+      {
+        name: 'outermost-action-end',
+        show: false,
+        description: 'fires when an outermost action block is finished',
+      },
+      {
+        name: 'outermost-action-start',
+        show: false,
+        description: 'fires when an outermost action block is started',
+      },
+      {
+        name: 'path-mutated',
+        show: false,
+        description: 'fires when a path in a repeat has been mutated',
+      },
+      { name: 'readonly', show: false, description: 'fires after an fx-control became readonly' },
+      { name: 'readwrite', show: false, description: 'fires after an fx-control became readwrite' },
+      {
+        name: 'ready',
+        show: false,
+        description: 'fires after a fx-fore page has been completely initialized',
+      },
+      { name: 'rebuild-done', show: false, description: 'fires after a rebuild has taken place' },
+      {
+        name: 'recalculate-done',
+        show: false,
+        description: 'fires after a recalculate has taken place',
+      },
+      { name: 'refresh-done', show: false, description: 'fires after a refresh has been done' },
+      {
+        name: 'relevant',
+        show: false,
+        description: 'fires after a fx-control has become relevant',
+      },
+      { name: 'reload', show: false, description: 'fires when a fx-reload action executes' },
+      {
+        name: 'required',
+        show: false,
+        description: 'fires after an fx-control has become required',
+      },
+      {
+        name: 'return',
+        show: false,
+        description: 'fired by embedded Fore controls to return their bound value',
+      },
+      { name: 'select', show: false, description: 'fires when an fx-case has been selected' },
+      { name: 'submit', show: false, description: 'fires before a submission takes place' },
+      {
+        name: 'submit-done',
+        show: false,
+        description: 'fires after a submission has successfully been executed',
+      },
+      {
+        name: 'submit-error',
+        show: false,
+        description: 'fires when a submission returned an error',
+      },
+      { name: 'valid', show: false, description: 'fires after a fx-control has become valid' },
+      {
+        name: 'value-changed',
+        show: false,
+        description: 'fires after a fx-control has changed its value',
+      },
+    ];
+  }
+
+  _log(e, log) {
+    const elementName = e.target.nodeName;
+    if (elementName === 'FX-ACTION-LOG') return;
+    // e.preventDefault();
+    // e.stopPropagation();
+
+    const row = document.createElement('div');
+    row.classList.add('log-row');
+    const logRow = this._logDetails(e);
+    if (
+      e.detail &&
+      Object.keys(e.detail).length === 0 &&
+      Object.getPrototypeOf(e.detail) === Object.prototype
+    ) {
+      row.classList.add('no-detail');
     }
 
-    _log(e, log) {
-        const elementName = e.target.nodeName;
-        if (elementName === 'FX-ACTION-LOG') return;
-        // e.preventDefault();
-        // e.stopPropagation();
-
-        const row = document.createElement('div');
-        row.classList.add('log-row');
-        const logRow = this._logDetails(e);
-        if (e.detail &&
-            Object.keys(e.detail).length === 0 &&
-            Object.getPrototypeOf(e.detail) === Object.prototype) {
-            row.classList.add('no-detail');
-        }
-
-        row.innerHTML = logRow;
-        if (this.outermost) {
-            /*
+    row.innerHTML = logRow;
+    if (this.outermost) {
+      /*
             outermost-action-start and outermost-action-end are use as marker events only to start/end a list.
             They don't have aditional information to log.
              */
-            if (e.type === 'outermost-action-start') return; // we don't want this event to actualy log something
-            if (!this.outermostAppender) {
-                this.outermostAppender = document.createElement('ul');
-                log.append(this.outermostAppender);
-            }
-            const li = document.createElement('li');
-            // li.innerHTML = logRow;
-            li.append(row);
-            this.outermostAppender.append(li);
-        } else {
-            log.append(row);
-        }
-
-        if (this.parentPath && elementName !== 'FX-ACTION') {
-            row.classList.add('nested');
-        }
-
-        const targetElement = e.target;
-        row.addEventListener('click', (ev) => {
-            // console.log('clicked inspect item', targetElement);
-            // console.log('clicked inspect item', ev.target.getAttribute('xpath'));
-
-            this._highlight(targetElement);
-
-        });
-
-
-        const logRowTarget = row.querySelector('.event-target');
-        if (!logRowTarget) return;
-
-        logRowTarget.addEventListener('click', e => {
-            const alreadyLogged = document.querySelectorAll('.fx-action-log-debug');
-            alreadyLogged.forEach(logged => {
-                logged.classList.remove('fx-action-log-debug')
-            });
-
-            targetElement.dispatchEvent(
-                new CustomEvent('log-action', {
-                    composed: false,
-                    bubbles: true,
-                    cancelable: true,
-                    detail: {target: targetElement},
-                }),
-            );
-
-
-            targetElement.classList.add('fx-action-log-debug');
-            targetElement.setAttribute('data-name', targetElement.nodeName)
-            this._highlight(targetElement);
+      if (e.type === 'outermost-action-start') return; // we don't want this event to actualy log something
+      if (!this.outermostAppender) {
+        this.outermostAppender = document.createElement('ul');
+        log.append(this.outermostAppender);
+      }
+      const li = document.createElement('li');
+      // li.innerHTML = logRow;
+      li.append(row);
+      this.outermostAppender.append(li);
+    } else {
+      log.append(row);
+    }
 
-        });
-        // log.append(logElements);
+    if (this.parentPath && elementName !== 'FX-ACTION') {
+      row.classList.add('nested');
     }
 
-    /**
-     * logs all configured events.
-     * Special treatment is given to action-execute event to log out all actions that
-     * are triggered.
-     *
-     * @param e the event to log
-     * @returns {string}
-     * @private
-     */
-    _logDetails(e) {
-        const eventType = e.type;
-        const path = XPathUtil.getDocPath(e.target);
-        // console.log('>>>> _logDetails', path);
-        const cut = path.substring(path.indexOf('/fx-fore'), path.length);
-        const xpath = `/${cut}`;
-        const short = cut.replaceAll('fx-', '');
-
-
-        if (this.parentPath && !xpath.startsWith(this.parentPath)) {
-            this.parentPath = null;
-        }
-        switch (eventType) {
-            case 'deleted':
-                const {deletedNodes} = e.detail;
-                const s = new XMLSerializer();
-                let serialized = '';
-                deletedNodes.forEach(node => {
-                    serialized += s.serializeToString(node);
-                });
+    const targetElement = e.target;
+    row.addEventListener('click', ev => {
+      // console.log('clicked inspect item', targetElement);
+      // console.log('clicked inspect item', ev.target.getAttribute('xpath'));
+
+      this._highlight(targetElement);
+    });
+
+    const logRowTarget = row.querySelector('.event-target');
+    if (!logRowTarget) return;
+
+    logRowTarget.addEventListener('click', e => {
+      const alreadyLogged = document.querySelectorAll('.fx-action-log-debug');
+      alreadyLogged.forEach(logged => {
+        logged.classList.remove('fx-action-log-debug');
+      });
+
+      targetElement.dispatchEvent(
+        new CustomEvent('log-action', {
+          composed: false,
+          bubbles: true,
+          cancelable: true,
+          detail: { target: targetElement },
+        }),
+      );
+
+      targetElement.classList.add('fx-action-log-debug');
+      targetElement.setAttribute('data-name', targetElement.nodeName);
+      this._highlight(targetElement);
+    });
+    // log.append(logElements);
+  }
+
+  /**
+   * logs all configured events.
+   * Special treatment is given to action-execute event to log out all actions that
+   * are triggered.
+   *
+   * @param e the event to log
+   * @returns {string}
+   * @private
+   */
+  _logDetails(e) {
+    const eventType = e.type;
+    const path = XPathUtil.getDocPath(e.target);
+    // console.log('>>>> _logDetails', path);
+    const cut = path.substring(path.indexOf('/fx-fore'), path.length);
+    const xpath = `/${cut}`;
+    const short = cut.replaceAll('fx-', '');
+
+    if (this.parentPath && !xpath.startsWith(this.parentPath)) {
+      this.parentPath = null;
+    }
+    switch (eventType) {
+      case 'deleted':
+        const { deletedNodes } = e.detail;
+        const s = new XMLSerializer();
+        let serialized = '';
+        deletedNodes.forEach(node => {
+          serialized += s.serializeToString(node);
+        });
 
-                return `
+        return `
                 <fx-log-item event-name="${eventType}"
                              xpath="${xpath}"
                              short-info="${e.detail.ref}"
@@ -492,20 +552,20 @@ export class FxActionLog extends HTMLElement {
                     </section>
                 </fx-log-item>
                 `;
-                break;
-            case 'outermost-action-start':
-                return `start`;
-                break;
-            case 'outermost-action-end':
-                return ``;
-                break;
-            case 'execute-action':
-                // ##### here actions will be handled
-                const actionElement = e.detail.action;
-                return this._renderAction(actionElement, xpath, short, e);
-                break;
-            default:
-                return `
+        break;
+      case 'outermost-action-start':
+        return 'start';
+        break;
+      case 'outermost-action-end':
+        return '';
+        break;
+      case 'execute-action':
+        // ##### here actions will be handled
+        const actionElement = e.detail.action;
+        return this._renderAction(actionElement, xpath, short, e);
+        break;
+      default:
+        return `
                 <fx-log-item event-name="${eventType}"
                              xpath="${xpath}"
                              short-name="${e.target.nodeName.toLowerCase()}">
@@ -515,20 +575,24 @@ export class FxActionLog extends HTMLElement {
                     </section>
                 </fx-log-item>
             `;
-        }
-
-        // }
     }
 
-    _renderAction(actionElement, xpath, short, e) {
-        const stripped = actionElement.nodeName.split('-')[1]
-        let eventName;
-        switch (actionElement.nodeName) {
-            case 'FX-ACTION':
-                this.parentPath = xpath;
-                eventName = e.target.currentEvent ? e.target.currentEvent.type : e.detail.event ? e.detail.event:'' ;
-
-                return `
+    // }
+  }
+
+  _renderAction(actionElement, xpath, short, e) {
+    const stripped = actionElement.nodeName.split('-')[1];
+    let eventName;
+    switch (actionElement.nodeName) {
+      case 'FX-ACTION':
+        this.parentPath = xpath;
+        eventName = e.target.currentEvent
+          ? e.target.currentEvent.type
+          : e.detail.event
+            ? e.detail.event
+            : '';
+
+        return `
                 <fx-log-item event-name="${eventName}"
                              xpath="${xpath}"
                              short-name="ACTION"
@@ -537,18 +601,22 @@ export class FxActionLog extends HTMLElement {
                     <section class="details">
                       <header>Attributes</header>
                       <section>
-                      ${Array.from(actionElement.attributes).map((item) => `
+                      ${Array.from(actionElement.attributes)
+                        .map(
+                          item => `
                         <span class="key">${item.nodeName}</span>
                         <span class="value">${item.nodeValue}</span>
-                      `).join('')}                 
+                      `,
+                        )
+                        .join('')}                 
                       </section>
                     </section>
                 </fx-log-item>  
             `;
-            // break;
-            case 'FX-MESSAGE':
-                const message = e.detail.action.messageTextContent;
-                return `
+      // break;
+      case 'FX-MESSAGE':
+        const message = e.detail.action.messageTextContent;
+        return `
                     <fx-log-item event-name="${e.detail.event}"
                                  xpath="${xpath}"
                                  short-name="MESSAGE"
@@ -558,11 +626,11 @@ export class FxActionLog extends HTMLElement {
                         </section>
                     </fx-log-item>
                 `;
-            // break;
-            case 'FX-SEND':
-                const submission = document.querySelector(`#${e.detail.action.getAttribute('submission')}`);
-                const event = e.detail.event ? e.detail.event: '';
-                return `
+      // break;
+      case 'FX-SEND':
+        const submission = document.querySelector(`#${e.detail.action.getAttribute('submission')}`);
+        const event = e.detail.event ? e.detail.event : '';
+        return `
                 <fx-log-item short-name="SEND"
                              short-info="${submission.getAttribute('id')}"
                              event-name="${event}"
@@ -571,19 +639,28 @@ export class FxActionLog extends HTMLElement {
                         <section class="details">
                           <header>Submission</header>
                           <section class="attributes">
-                          ${Array.from(submission.attributes).map((item) => `
+                          ${Array.from(submission.attributes)
+                            .map(
+                              item => `
                             <span class="key">${item.nodeName}</span>
                             <span class="value">${item.nodeValue}</span>
-                          `).join('')}                 
+                          `,
+                            )
+                            .join('')}                 
                           </section>  
                         </section>
                </fx-log-item>
                 `;
-            // break;
-            case 'FX-SETVALUE':
-                const instPath = XPathUtil.getPath(e.target.nodeset);
-                const listensOn = e.target.nodeName === 'FX-CONTROL' ? e.target.updateEvent : e.detail.event ? e.detail.event:'';
-                return `
+      // break;
+      case 'FX-SETVALUE':
+        const instPath = XPathUtil.getPath(e.target.nodeset);
+        const listensOn =
+          e.target.nodeName === 'FX-CONTROL'
+            ? e.target.updateEvent
+            : e.detail.event
+              ? e.detail.event
+              : '';
+        return `
                 <fx-log-item short-name="SETVALUE"
                              short-info="${instPath}"
                              event-name="${listensOn}"
@@ -595,10 +672,14 @@ export class FxActionLog extends HTMLElement {
                       </section>
                 </fx-log-item>
                 `;
-            // break;
-            default:
-                eventName = e.target.currentEvent ? e.target.currentEvent.type : e.detail.event ? e.detail.event:'' ;
-                return `
+      // break;
+      default:
+        eventName = e.target.currentEvent
+          ? e.target.currentEvent.type
+          : e.detail.event
+            ? e.detail.event
+            : '';
+        return `
                     <fx-log-item event-name="${eventName}" 
                                 short-name="${e.target.nodeName}"
                                 xpath="${xpath}"
@@ -608,24 +689,25 @@ export class FxActionLog extends HTMLElement {
                           </section>
                     </fx-log-item>
                     `;
-        }
     }
-
-    _listEventDetails(e) {
-        if (e.detail &&
-            Object.keys(e.detail).length === 0 &&
-            Object.getPrototypeOf(e.detail) === Object.prototype) {
-            return ``;
-        }
-        return `${Object.keys(e.detail).map((item) => `<span>${item}</span>`)}`;
-
+  }
+
+  _listEventDetails(e) {
+    if (
+      e.detail &&
+      Object.keys(e.detail).length === 0 &&
+      Object.getPrototypeOf(e.detail) === Object.prototype
+    ) {
+      return '';
     }
-
-    _listAttributes(e) {
-        // console.log('_listAttributes', e)
-        return ``;
-        // return `${e.detail.model.id}`;
-        /*
+    return `${Object.keys(e.detail).map(item => `<span>${item}</span>`)}`;
+  }
+
+  _listAttributes(e) {
+    // console.log('_listAttributes', e)
+    return '';
+    // return `${e.detail.model.id}`;
+    /*
             if(e.detail &&
                 Object.keys(e.detail).length === 0 &&
                 Object.getPrototypeOf(e.detail) === Object.prototype){
@@ -634,28 +716,28 @@ export class FxActionLog extends HTMLElement {
               return `${e.detail.map((item) => `<span>${item}</span>`)}`;
             }
         */
-    }
-
-    _highlight(element) {
-        const defaultBG = element.style.backgroundColor;
-        const defaultTransition = element.style.transition;
-
-        element.style.transition = "background 1s";
-        element.style.backgroundColor = "#FFA500";
-
-        setTimeout(() => {
-            element.style.backgroundColor = defaultBG;
-            setTimeout(() => {
-                element.style.transition = defaultTransition;
-            }, 400);
-        }, 400);
-
-        window.document.dispatchEvent(new CustomEvent('log-active-element', {detail: {target: element}}));
-
-    }
-
+  }
+
+  _highlight(element) {
+    const defaultBG = element.style.backgroundColor;
+    const defaultTransition = element.style.transition;
+
+    element.style.transition = 'background 1s';
+    element.style.backgroundColor = '#FFA500';
+
+    setTimeout(() => {
+      element.style.backgroundColor = defaultBG;
+      setTimeout(() => {
+        element.style.transition = defaultTransition;
+      }, 400);
+    }, 400);
+
+    window.document.dispatchEvent(
+      new CustomEvent('log-active-element', { detail: { target: element } }),
+    );
+  }
 }
 
 if (!customElements.get('fx-action-log')) {
-    customElements.define('fx-action-log', FxActionLog);
+  customElements.define('fx-action-log', FxActionLog);
 }