import ResizeObserver from 'resize-observer-polyfill' ; import { applyStyles } from './css' ; import { getStatics } from './getStatics' ; import { DeveloperToolsOptions , DeveloperToolsOptionsInternal } from './types' ; import { getSize } from './utils' ; import iframeScript from '@neo-one/developer-tools-frame/dist/tools.raw.js' ; let iframeElement ; let iframeWindow ; let created = false ; let initialized = false ; let devToolsOptions ; const updateOptions = ( options ) => { devToolsOptions = options ; if ( created && initialized && iframeWindow !== undefined ) { ( iframeWindow as any ) . updateOptions ( options ) ; } } ; const doRefreshOptions = ( ) => { if ( devToolsOptions !== undefined ) { updateOptions ( createOptions ( devToolsOptions ) ) ; } } ; let refreshOptionsTimeout ; const clearRefreshOptionsTimeout = ( ) => { if ( refreshOptionsTimeout !== undefined ) { clearTimeout ( refreshOptionsTimeout ) ; refreshOptionsTimeout = undefined ; } } ; const refreshOptions = ( ) => { clearRefreshOptionsTimeout ( ) ; refreshOptionsTimeout = setTimeout ( doRefreshOptions , 100 ) as any ; } ; const resizeObserver = new ResizeObserver ( refreshOptions ) ; const BASE_STYLES = { position : 'fixed' , bottom : '0' , left : '0' , width : '40px' , height : '40px' , border : 'none' , 'z-index' : 2147483647 } ; let lastWidth ; let lastHeight ; const createOptions = ( options ) : DeveloperToolsOptionsInternal => ( { ... options , maxWidth : getSize ( ) . width , onResize : ( { width , height } ) => { if ( iframeElement !== undefined && ( lastWidth !== width || lastHeight !== height ) ) { lastWidth = width ; lastHeight = height ; applyStyles ( iframeElement , { ... BASE_STYLES , width , height } ) ; } } } ) ; const enable = ( options ) => { updateOptions ( createOptions ( options ) ) ; if ( created ) { return ; } created = true ; if ( typeof window === 'undefined' ) { return ; } const iframe = window . document . createElement ( 'iframe' ) ; iframeElement = iframe ; applyStyles ( iframe , BASE_STYLES ) ; iframe . onload = ( ) => { const iframeDocument = iframe . contentDocument ; const maybeIFrameWindow = iframe . contentWindow ; if ( iframeDocument !== null && maybeIFrameWindow !== null ) { iframeWindow = maybeIFrameWindow ; const script = iframeWindow . document . createElement ( 'script' ) ; script . type = 'text/javascript' ; script . innerHTML = iframeScript as any ; iframeDocument . body . append ( script ) ; } } ; ( window as any ) . __NEO_ONE_DEVELOPER_TOOLS__ = { initialize : ( ) => { initialized = true ; return devToolsOptions ; } } ; window . document . body . append ( iframe ) ; resizeObserver . observe ( getStatics ( ) . docEl ) ; } ; export const DeveloperToolsDev = { enable } ;