Source: control2/recording/InfoArea.js

(function() {
    /**
     * @typedef {Help4.control2.Control.Params} Help4.control2.recording.InfoArea.Params
     */

    /**
     * Creates and handles the additional author information during recording.
     * @augments Help4.control2.Control
     */
    Help4.control2.recording.InfoArea = class extends Help4.control2.Control {
        /**
         * @override
         * @param {Help4.control2.recording.InfoArea.Params} [params]
         */
        constructor(params) {
            super(params, {
                params: {
                    visible: {init: false}
                },
                statics: {
                    _cache: {init: [[], []], destroy: false}
                },
                config: {
                    css: 'control-captureinfo'
                }
            });
        }

        /**
         * @param {Object} selector
         * @param {Object} info
         * @returns {Help4.control2.recording.InfoArea}
         */
        update(selector, info) {
            const getOutputData = (selector) => {
                return selector ? [
                    selector.rule,
                    info.element ? info.element.nodeName + ' / ' + (info.element.id || '-') : '-',
                    selector.offset ? 'x: ' + selector.offset.x + ', y: ' + selector.offset.y : '-',
                    selector.value
                ] : ['-', '-', '-', '-'];
            }

            const data = [getOutputData(selector)];

            // XRAY-2009: show the deepest information
            while (selector && (selector.iframe || selector.shadow)) {
                selector = selector.iframe || selector.shadow;
                info = info.iframe || info.shadow;
            }

            data.push(getOutputData(selector));

            const d = this.getDom();
            const {_cache} = this;

            for (const [i, p] of Help4.arrayEntries(d.childNodes)) {
                const x = _cache[i];
                const v = data[i];

                for (let j = 0, n = 1; j < v.length; j++, n+=2) {
                    if (v[j] !== x[j]) {
                        p.childNodes[n].firstChild.nodeValue = x[j] = v[j];
                    }
                }
            }

            return this;
        }

        /**
         * @returns {Help4.control2.recording.InfoArea}
         */
        clear() {
            const d = this.getDom();
            const data = ['-', '-', '-', '-'];

            for (const p of d.childNodes) {
                for (let j = 0, n = 1; j < data.length; j++, n+=2) {
                    p.childNodes[n].firstChild.nodeValue = data[j];
                }
            }

            return this;
        }

        /**
         * @override
         * @param {HTMLElement} dom - control DOM
         */
        _onDomCreated(dom) {
            if (this.rtl) this.addCss('rtl');

            const H4L = Help4.Localization;
            const items = [
                H4L.getText('label.capturerule'), '-',
                H4L.getText('label.captureinfo'), '-',
                H4L.getText('label.captureoffset'), '-',
                H4L.getText('label.capturevalue'), '-'
            ];

            const parts = [
                this._createElement('div', {css: 'left', dom: dom}),
                this._createElement('div', {css: 'right', dom: dom})
            ];

            for (const p of parts) {
                for (let j = 0; j < items.length;) {
                    this._createElement('header', {css: 'thead', dom: p, role: 'columnheader', text: items[j++] + ':'});
                    this._createElement('div', {css: 'column-1', dom: p, text: items[j++]});
                }
            }
        }
    }
})();