@qualified-salesforce/web 0.0.1-oidc-bootstrap

package/src/mirror/shipper/DOMSerializer.js

@@ -0,0 +1,392 @@
+import { documentContains } from "../../dom.js";
+import { NAMESPACES, VALID_PROPERTIES, TAGNAMES } from "../constants.js";
+import { ShipperHelper } from "./utils.js";
+import { COBROWSE_PSEUDO_CLASSES } from "../constants.generated.js";
+
+/* eslint-disable camelcase */ 
+
+
+// TODO: Use Widget's child.frame and serialize as a different node type so it's easy to receive it.
+class DOMSerializer extends ShipperHelper {
+    clear() {
+        this.knownNodeIds.clear();
+        this.newNodes = [];
+        this.removedNodes = null;
+        this.nextRemovedNodes = null;
+    }
+    // -- Public methods. Entry points for serialization.
+    // Convert a Node to an ID so frames don't need to send full nodes on changes.
+    //
+    // Calling this on a node will mark it for full serialization if it's a node unknown to
+    // Receivers. This automatically ensures any change messages include the proper nodes.
+    //
+    nodeToId(node) {
+        if (!node) {
+            throw new Error("nodeToId called without node");
+        }
+        let id;
+        if (this.nodesToIds.has(node)) {
+            id = this.nodesToIds.get(node);
+        } else {
+            id = this.idSeq++;
+            this.nodesToIds.set(node, id);
+        }
+        if (!this.knownNodeIds.has(id)) {
+            this.newNodes.push(node);
+            this.knownNodeIds.add(id);
+        }
+        if (this.removedNodes) {
+            this.removedNodes.delete(node); // In case the node came back by next frame
+        }
+        return id;
+    }
+    // An array s-expression of Node IDs describing the DOM tree starting at a given Node.
+    idTree(node) {
+        const tree = [
+            this.nodeToId(node)
+        ];
+        if (node instanceof this.window.ShadowRoot) {
+            // Convert adopted stylesheets into a single style element
+            const styleElement = this.createStyleElementFromStyleSheets(node.adoptedStyleSheets);
+            if (styleElement) {
+                tree.push(this.idTree(styleElement));
+            }
+        }
+        if (node.shadowRoot) {
+            tree.push(this.idTree(node.shadowRoot));
+        }
+        if (node.hasChildNodes()) {
+            for(let i = 0; i < node.childNodes.length; i++){
+                const child = node.childNodes[i];
+                tree.push(this.idTree(child));
+            }
+        }
+        return tree;
+    }
+    // Mark a node as potentially removed from the document. MutationObservers are async, so nodes
+    // can remove and come back the next frame.
+    possiblyRemoved(node) {
+        if (!this.nextRemovedNodes) {
+            this.nextRemovedNodes = new Set();
+        }
+        this.nextRemovedNodes.add(node);
+        if (node.shadowRoot) {
+            this.possiblyRemoved(node.shadowRoot);
+        }
+        if (node.hasChildNodes()) {
+            for(let i = 0; i < node.childNodes.length; i++){
+                this.possiblyRemoved(node.childNodes[i]);
+            }
+        }
+    }
+    // After touching any nodes via nodeToId or idTree, take() returns the queue of new nodes and
+    // deletions, fully serialized.
+    takeNew() {
+        const nodes = this.newNodes;
+        this.newNodes = [];
+        return nodes.map((node)=>this.serializeNodeRow(node));
+    }
+    takeDeletions() {
+        // Deletions are always sent one frame later. This inherently guarantees we don't accidently
+        // delete a node in the same frame as updating it. And we recheck the removals on the next frame.
+        const deletedNodeIds = [];
+        if (this.removedNodes) {
+            for (const node of this.removedNodes){
+                const nodeId = this.nodesToIds.get(node);
+                if (nodeId && !documentContains(node, this.document)) {
+                    this.nodesToIds.delete(node);
+                    this.knownNodeIds.delete(nodeId);
+                    deletedNodeIds.push(nodeId);
+                }
+            }
+        }
+        this.removedNodes = this.nextRemovedNodes;
+        this.nextRemovedNodes = null;
+        return deletedNodeIds;
+    }
+    take() {
+        return [
+            this.takeNew(),
+            this.takeDeletions()
+        ];
+    }
+    // --- Raw serialization methods
+    // Serialize any DOM Node as [nodeId, nodeType, ...nodeData];
+    serializeNodeRow(node) {
+        const serializer = DOMSerializer.nodeSerializers[node.nodeType], nodeData = serializer ? this[serializer](node) : [];
+        return [
+            this.nodeToId(node),
+            node.nodeType,
+            ...nodeData
+        ];
+    }
+    // Serialize an attribute as [nodeId, attributeName, attributeNamespace, value]
+    serializeNodeAttributeRow(node, attributeName) {
+        return [
+            this.nodeToId(node),
+            ...this.serializeAttribute(node, attributeName)
+        ];
+    }
+    // Serialize a property as [nodeId, propertyName, value]
+    serializeNodePropertyRow(node, propertyName) {
+        return [
+            this.nodeToId(node),
+            ...this.serializeProperty(node, propertyName)
+        ];
+    }
+    // Serialize node data as [nodeId, data]
+    serializeNodeDataRow(node) {
+        const serializer = DOMSerializer.nodeDataSerializers[node.nodeType], data = serializer ? this[serializer](node) : "";
+        return [
+            this.nodeToId(node),
+            data
+        ];
+    }
+    serialize_Element(node) {
+        var _ref, _TAGNAMES_node_tagName, _NAMESPACES_node_namespaceURI;
+        return [
+            (_ref = (_TAGNAMES_node_tagName = TAGNAMES[node.tagName]) != null ? _TAGNAMES_node_tagName : node.tagName) != null ? _ref : "",
+            (_NAMESPACES_node_namespaceURI = NAMESPACES[node.namespaceURI]) != null ? _NAMESPACES_node_namespaceURI : 0,
+            this.serializeAttributes(node),
+            this.serializeProperties(node)
+        ];
+    }
+    serialize_DocumentType(node) {
+        return [
+            node.name,
+            node.publicId,
+            node.systemId
+        ];
+    }
+    serialize_Text(node) {
+        return [
+            this.serialize_Text_data(node)
+        ];
+    }
+    serialize_DocumentFragment(node) {
+        return [
+            node instanceof this.window.ShadowRoot ? 1 : 0
+        ];
+    }
+    serialize_Text_data(node) {
+        const parent = node.parentNode;
+        if (parent) {
+            if (parent.tagName === "STYLE") {
+                return this.serialize_Text_data_STYLEchild(node);
+            } else if (parent.tagName === "TEXTAREA") {
+                return this.serialize_Text_data_TEXTAREAchild(node);
+            } else if (parent.tagName === "SCRIPT") {
+                return this.serialize_Text_data_SCRIPTchild(node);
+            }
+        }
+        return this.serialize_Text_data_default(node);
+    }
+    serialize_Text_data_default(node) {
+        return String(node.data);
+    }
+    serialize_Text_data_STYLEchild(node) {
+        return this.rewriteStyleSheet(this.styleSheetAsText(node.parentNode, node));
+    }
+    serialize_Text_data_TEXTAREAchild(node) {
+        return this.maskValue(this.serialize_Text_data_default(node));
+    }
+    serialize_Text_data_SCRIPTchild(_node) {
+        return ""; // We don't evaluate inline scripts in the receiver so no point sending.
+    }
+    // Serialize an attribute as [attributeName, attributeNamespace, value]
+    serializeAttribute(node, attributeName) {
+        let val = null, namespace = 0;
+        if (attributeName === "style") {
+            val = node.style.cssText || node.getAttribute("style");
+        } else {
+            const attribute = node.getAttributeNode(attributeName);
+            if (attribute) {
+                var _NAMESPACES_attribute_namespaceURI;
+                attributeName = attribute.name; // Let the browser normalize it for us.
+                val = attribute.value;
+                if (typeof val === "string") {
+                    if (val.length > 2048) {
+                        // We've seen pages with many large inline data images that cause massive perf problems (OysterHR).
+                        // Don't send attributes that are over 2KB.
+                        // TODO: We should display an informative text in live view to indicate we skipped sending an attribute.
+                        val = "";
+                    } else if (!this.isSubmitInput(node) && attributeName === "value") {
+                        val = this.maskValue(val);
+                    }
+                }
+                namespace = (_NAMESPACES_attribute_namespaceURI = NAMESPACES[attribute.namespaceURI]) != null ? _NAMESPACES_attribute_namespaceURI : 0;
+            }
+        }
+        return [
+            attributeName,
+            namespace,
+            val
+        ];
+    }
+    serializeAttributes(node) {
+        const attrs = [];
+        if (node.attributes) {
+            for(let i = 0; i < node.attributes.length; i++){
+                const attr = node.attributes[i];
+                if (attr.specified && (attr.name === "style" || typeof attr.value === "string")) {
+                    attrs.push(this.serializeAttribute(node, attr.name));
+                }
+            }
+        }
+        return attrs.length > 0 ? attrs : 0;
+    }
+    // Serialize a property as [propertyName, value]
+    serializeProperty(node, propertyName) {
+        if (VALID_PROPERTIES.includes(propertyName)) {
+            // For security, only certain props are valid
+            let value;
+            if (!this.isSubmitInput(node) && propertyName === "value" && typeof node.value === "string") {
+                value = this.maskValue(node.value);
+            } else {
+                value = node[propertyName];
+            }
+            return [
+                propertyName,
+                value
+            ];
+        } else {
+            return [
+                0,
+                0
+            ];
+        }
+    }
+    serializeProperties(node) {
+        const props = [];
+        // Minor optimization avoiding serializeProperty validation for static property names
+        if (node.scrollLeft !== 0) {
+            props.push([
+                "scrollLeft",
+                node.scrollLeft
+            ]);
+        }
+        if (node.scrollTop !== 0) {
+            props.push([
+                "scrollTop",
+                node.scrollTop
+            ]);
+        }
+        if (node.value != null) {
+            props.push(this.serializeProperty(node, "value"));
+        }
+        // TODO: break up this method
+        if (node instanceof this.window.HTMLMediaElement) {
+            props.push([
+                "paused",
+                node.paused
+            ]);
+            props.push([
+                "currentTime",
+                node.currentTime
+            ]);
+            props.push([
+                "controls",
+                node.controls
+            ]);
+        }
+        return props.length > 0 ? props : 0;
+    }
+    maskValue(value) {
+        return value && Array(value.length + 1).join("•");
+    }
+    styleSheetAsText(styleElement, textNode) {
+        // Ignore guru extension style nodes
+        // TODO: build better blacklist system?
+        if (styleElement.dataset.guruExtensionId) {
+            return "";
+        }
+        // For style elements with multiple child text nodes
+        // Don't rely on rules, just use text instead
+        if (styleElement.childNodes.length > 1) {
+            return String(textNode.data);
+        }
+        // After a <STYLE> is rendered, JS can insert rules, but our propertySpy, which could tell us
+        // that happened, only kicks in after it's been initialized. And there's no DOM API to know if a
+        // <STYLE> tag's cssRules are part dynamic and part constructed from the textNode. So we always
+        // have to serialize from cssRules.
+        try {
+            let acc = "";
+            for(let i = 0; i < styleElement.sheet.cssRules.length; i++){
+                var _rule_style;
+                const rule = styleElement.sheet.cssRules[i];
+                // Currently, inset is only set by Firefox when it detects a top, right, bottom, and left.
+                // So for now, it's safe to assume that those four styles will exist if inset does since we don't use it anywhere.
+                if ((_rule_style = rule.style) == null ? void 0 : _rule_style.inset) {
+                    const { cssText, selectorText, style: { top, right, bottom, left } } = rule;
+                    acc += cssText + " " + selectorText + " { top: " + top + "; right: " + right + "; bottom: " + bottom + "; left: " + left + "; }";
+                } else {
+                    acc += rule.cssText;
+                }
+            }
+            return acc;
+        } catch (e) {
+            return String(textNode.data);
+        }
+    }
+    rewriteStyleSheet(sheet) {
+        return sheet.replace(/:hover|:focus-within|:focus-visible|:focus|:active/g, this.convertPseudoClass);
+    }
+    convertPseudoClass(pseudoClass) {
+        var _COBROWSE_PSEUDO_CLASSES_pseudoClass;
+        return (_COBROWSE_PSEUDO_CLASSES_pseudoClass = COBROWSE_PSEUDO_CLASSES[pseudoClass]) != null ? _COBROWSE_PSEUDO_CLASSES_pseudoClass : pseudoClass;
+    }
+    createStyleElementFromStyleSheets(styleSheets) {
+        try {
+            // Extract CSS text from all adopted stylesheets
+            let combinedCss = "";
+            for(let i = 0; i < styleSheets.length; i++){
+                const sheet = styleSheets[i];
+                try {
+                    for(let j = 0; j < sheet.cssRules.length; j++){
+                        const rule = sheet.cssRules[j];
+                        combinedCss += rule.cssText;
+                    }
+                } catch (e) {
+                // Cross-origin stylesheets may throw SecurityError when accessing cssRules
+                // Skip this stylesheet and move to the next one
+                }
+            }
+            if (combinedCss) {
+                // Create a synthetic style element with the combined CSS
+                const styleElement = this.document.createElement("style");
+                styleElement.textContent = combinedCss;
+                return styleElement;
+            }
+        } catch (e) {
+            // If anything fails, return null and skip this style element
+            return null;
+        }
+    }
+    isSubmitInput(node) {
+        return node && node.tagName && node.tagName === "INPUT" && node.getAttribute("type") === "submit";
+    }
+    constructor(shipper){
+        super(shipper);
+        // State that persists as long as this object is alive.
+        this.idSeq = 1;
+        this.nodesToIds = new Map();
+        // State that resets on keyframes.
+        this.knownNodeIds = new Set();
+        // State that resets on every frame.
+        this.newNodes = [];
+        this.removedNodes = null;
+        this.nextRemovedNodes = null;
+    }
+}
+// --- Private serialization methods
+DOMSerializer.nodeSerializers = {
+    1: "serialize_Element",
+    3: "serialize_Text",
+    10: "serialize_DocumentType",
+    11: "serialize_DocumentFragment"
+};
+DOMSerializer.nodeDataSerializers = {
+    3: "serialize_Text_data"
+};
+
+export { DOMSerializer };