diff --git a/devtools/target.html b/devtools/target.html index df434da..3acaa45 100644 --- a/devtools/target.html +++ b/devtools/target.html @@ -49,6 +49,19 @@ console.log('touch') }) +
+ +
+
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies diff --git a/src/domains/DOM.ts b/src/domains/DOM.ts index adca8c8..5d30cd2 100644 --- a/src/domains/DOM.ts +++ b/src/domains/DOM.ts @@ -56,11 +56,43 @@ export function copyTo(params: DOM.CopyToRequest): DOM.CopyToResponse { } } +let isEnable = false + export function enable() { - mutationObserver.observe() + isEnable = true + + mutationObserver.disconnect() + mutationObserver.observe(document.documentElement) nodeManager.clear() } +function hookAttachShadow() { + const origAttachShadow = Element.prototype.attachShadow + if (origAttachShadow) { + Element.prototype.attachShadow = function (init) { + const shadowRoot = origAttachShadow.apply(this, [init]) + if (!nodeManager.isValidNode(this)) { + return shadowRoot + } + + ;(this as any).__shadowRoot__ = shadowRoot + if (isEnable) { + mutationObserver.observe(shadowRoot) + const hostId = getNodeId(this) + if (hostId) { + connector.trigger('DOM.shadowRootPushed', { + hostId, + root: nodeManager.wrap(shadowRoot, { depth: 1 }), + }) + } + } + return shadowRoot + } + } +} + +hookAttachShadow() + export function getDocument() { return { root: nodeManager.wrap(document, { diff --git a/src/lib/mutationObserver.ts b/src/lib/mutationObserver.ts index f1795ad..a410b0c 100644 --- a/src/lib/mutationObserver.ts +++ b/src/lib/mutationObserver.ts @@ -9,17 +9,17 @@ class Observer extends Emitter { each(mutations, mutation => this.handleMutation(mutation)) }) } - observe() { - const { observer } = this - - observer.disconnect() - observer.observe(document.documentElement, { + observe(node: Node) { + this.observer.observe(node, { attributes: true, childList: true, characterData: true, subtree: true, }) } + disconnect() { + this.observer.disconnect() + } private handleMutation(mutation: MutationRecord) { if (mutation.type === 'attributes') { this.emit('attributes', mutation.target, mutation.attributeName) diff --git a/src/lib/nodeManager.ts b/src/lib/nodeManager.ts index dfefc24..9204912 100644 --- a/src/lib/nodeManager.ts +++ b/src/lib/nodeManager.ts @@ -59,6 +59,15 @@ export function wrap(node: any, { depth = 1 } = {}) { ret.attributes = attributes } + if (node.shadowRoot) { + ret.shadowRoots = [wrap(node.shadowRoot, { depth: 1 })] + } else if (node.__shadowRoot__) { + ret.shadowRoots = [wrap(node.__shadowRoot__, { depth: 1 })] + } + if (isShadowRoot(node)) { + ret.shadowRootType = node.mode || 'user-agent' + } + const childNodes = filterNodes(node.childNodes) ret.childNodeCount = childNodes.length const hasOneTextNode = @@ -114,9 +123,17 @@ export function isValidNode(node: Node): boolean { export function getNode(nodeId: number) { const node = nodes.get(nodeId) - if (!node || node.nodeType === 10) { + if (!node || node.nodeType === 10 || node.nodeType === 11) { throw createErr(-32000, 'Could not find node with given id') } return node } + +function isShadowRoot(node: any) { + if (window.ShadowRoot) { + return node instanceof ShadowRoot + } + + return false +}