diff --git a/CHANGELOG.md b/CHANGELOG.md index 3eaab53..3412093 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +## 1.4.2 (11 Dec 2022) + +* fix: dom highlighter style encapsulation + ## 1.4.1 (2 Dec 2022) * feat: support android 5.0 diff --git a/package.json b/package.json index fccf090..bb8002b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "chobitsu", - "version": "1.4.1", + "version": "1.4.2", "description": "Chrome devtools protocol JavaScript implementation", "main": "dist/chobitsu.js", "exports": { diff --git a/src/domains/Overlay.ts b/src/domains/Overlay.ts index a907531..6e2962b 100644 --- a/src/domains/Overlay.ts +++ b/src/domains/Overlay.ts @@ -22,26 +22,49 @@ const showInfo = cssSupports( 'polygon(50% 0px, 0px 100%, 100% 100%)' ) +const css = require('luna-dom-highlighter/luna-dom-highlighter.css').replace( + '/*# sourceMappingURL=luna-dom-highlighter.css.map*/', + '' +) + export function enable() { if (isEnable) { return } - if (!isCssLoaded) { - evalCss( - require('luna-dom-highlighter/luna-dom-highlighter.css').replace( - '/*# sourceMappingURL=luna-dom-highlighter.css.map*/', - '' - ) - ) - isCssLoaded = true - } const container = h('div', { class: '__chobitsu-hide__', + style: { + all: 'initial', + }, }) $container = $(container) document.documentElement.appendChild(container) - domHighlighter = new LunaDomHighlighter(container, { + + let domHighlighterContainer: HTMLDivElement | null = null + let shadowRoot: ShadowRoot | null = null + if (container.attachShadow) { + shadowRoot = container.attachShadow({ mode: 'open' }) + } else if ((container as any).createShadowRoot) { + shadowRoot = (container as any).createShadowRoot() + } + if (shadowRoot) { + const style = document.createElement('style') + style.textContent = css + style.type = 'text/css' + shadowRoot.appendChild(style) + domHighlighterContainer = document.createElement('div') + shadowRoot.appendChild(domHighlighterContainer) + } else { + domHighlighterContainer = document.createElement('div') + container.appendChild(domHighlighterContainer) + if (!isCssLoaded) { + evalCss(css) + isCssLoaded = true + } + } + + domHighlighter = new LunaDomHighlighter(domHighlighterContainer, { monitorResize: toBool(root.ResizeObserver), showInfo, }) diff --git a/src/lib/objManager.ts b/src/lib/objManager.ts index 617171a..818f434 100644 --- a/src/lib/objManager.ts +++ b/src/lib/objManager.ts @@ -107,12 +107,8 @@ export function releaseObj(objectId: number) { } export function getProperties(params: any) { - const { - accessorPropertiesOnly, - objectId, - ownProperties, - generatePreview, - } = params + const { accessorPropertiesOnly, objectId, ownProperties, generatePreview } = + params const properties = [] const options = {