roxxie-proxy-u-prod 0.1.0

package/source/packages/cdp/src/domains/Overlay.ts

@@ -0,0 +1,230 @@
+import { getNode, getNodeId, isValidNode } from '../lib/nodeManager'
+import { pushNodesToFrontend } from './DOM'
+import $ from 'licia/$'
+import h from 'licia/h'
+import evalCss from 'licia/evalCss'
+import defaults from 'licia/defaults'
+import extend from 'licia/extend'
+import connector from '../lib/connector'
+import root from 'licia/root'
+import toBool from 'licia/toBool'
+import cssSupports from 'licia/cssSupports'
+import LunaDomHighlighter from 'luna-dom-highlighter'
+import * as objManager from '../lib/objManager'
+import Protocol from 'devtools-protocol'
+import Overlay = Protocol.Overlay
+
+let domHighlighter: LunaDomHighlighter
+let isCssLoaded = false
+let $container: $.$
+let isEnable = false
+const showInfo = cssSupports(
+  'clip-path',
+  'polygon(50% 0px, 0px 100%, 100% 100%)'
+)
+const hasTouchSupport = 'ontouchstart' in root
+
+const css = require('luna-dom-highlighter/luna-dom-highlighter.css').replace(
+  '/*# sourceMappingURL=luna-dom-highlighter.css.map*/',
+  ''
+)
+
+export function enable() {
+  if (isEnable) {
+    return
+  }
+
+  const container = h('div', {
+    class: '__chobitsu-hide__',
+    style: {
+      all: 'initial',
+    },
+  })
+  $container = $(container)
+  document.documentElement.appendChild(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,
+  })
+
+  window.addEventListener('resize', resizeHandler)
+
+  isEnable = true
+}
+
+export function disable() {
+  domHighlighter.destroy()
+  $container.remove()
+  window.removeEventListener('resize', resizeHandler)
+
+  isEnable = false
+}
+
+export function highlightNode(params: Overlay.HighlightNodeRequest) {
+  const { nodeId, highlightConfig, objectId } = params
+
+  let node: any
+  if (nodeId) {
+    node = getNode(nodeId)
+  }
+  if (objectId) {
+    node = objManager.getObj(objectId)
+  }
+
+  if (node.nodeType !== 1 && node.nodeType !== 3) return
+
+  defaults(highlightConfig, {
+    contentColor: 'transparent',
+    paddingColor: 'transparent',
+    borderColor: 'transparent',
+    marginColor: 'transparent',
+  })
+  if (!showInfo) {
+    extend(highlightConfig, {
+      showInfo: false,
+    })
+  }
+  domHighlighter.highlight(node, highlightConfig as any)
+}
+
+export function hideHighlight() {
+  domHighlighter.hide()
+}
+
+let showViewportSizeOnResize = false
+export function setShowViewportSizeOnResize(
+  params: Overlay.SetShowViewportSizeOnResizeRequest
+) {
+  showViewportSizeOnResize = params.show
+}
+
+let highlightConfig: any = {}
+let inspectMode = 'none'
+export function setInspectMode(params: Overlay.SetInspectModeRequest) {
+  highlightConfig = params.highlightConfig
+  inspectMode = params.mode
+}
+
+function getElementFromPoint(e: any) {
+  if (hasTouchSupport) {
+    const touch = e.touches[0] || e.changedTouches[0]
+    return document.elementFromPoint(touch.clientX, touch.clientY)
+  }
+
+  return document.elementFromPoint(e.clientX, e.clientY)
+}
+
+let lastNodeId = -1
+
+function moveListener(e: any) {
+  if (inspectMode === 'none') return
+
+  const node = getElementFromPoint(e)
+  if (!node || !isValidNode(node)) {
+    return
+  }
+  let nodeId = getNodeId(node)
+
+  if (!nodeId) {
+    nodeId = pushNodesToFrontend(node)
+  }
+
+  highlightNode({
+    nodeId,
+    highlightConfig,
+  })
+  if (nodeId !== lastNodeId) {
+    connector.trigger('Overlay.nodeHighlightRequested', {
+      nodeId,
+    })
+    lastNodeId = nodeId
+  }
+}
+
+function outListener() {
+  if (inspectMode === 'none') return
+
+  hideHighlight()
+}
+
+function clickListener(e: any) {
+  if (inspectMode === 'none') return
+
+  e.preventDefault()
+  e.stopImmediatePropagation()
+
+  const node = getElementFromPoint(e)
+  connector.trigger('Overlay.inspectNodeRequested', {
+    backendNodeId: getNodeId(node),
+  })
+
+  lastNodeId = -1
+  hideHighlight()
+}
+
+function addEvent(type: string, listener: any) {
+  document.documentElement.addEventListener(type, listener, true)
+}
+if (hasTouchSupport) {
+  addEvent('touchstart', moveListener)
+  addEvent('touchmove', moveListener)
+  addEvent('touchend', clickListener)
+} else {
+  addEvent('mousemove', moveListener)
+  addEvent('mouseout', outListener)
+  addEvent('click', clickListener)
+}
+
+const viewportSize = h('div', {
+  class: '__chobitsu-hide__',
+  style: {
+    position: 'fixed',
+    right: 0,
+    top: 0,
+    background: '#fff',
+    fontSize: 13,
+    opacity: 0.5,
+    padding: '4px 6px',
+  },
+})
+
+function resizeHandler() {
+  if (!showViewportSizeOnResize) return
+
+  $viewportSize.text(`${window.innerWidth}px × ${window.innerHeight}px`)
+  if (viewportSizeTimer) {
+    clearTimeout(viewportSizeTimer)
+  } else {
+    document.documentElement.appendChild(viewportSize)
+  }
+  viewportSizeTimer = setTimeout(() => {
+    $viewportSize.remove()
+    viewportSizeTimer = null
+  }, 1000)
+}
+const $viewportSize: any = $(viewportSize)
+let viewportSizeTimer: any

package/source/packages/cdp/src/domains/Page.ts

@@ -0,0 +1,296 @@
+import $ from 'licia/$'
+import contain from 'licia/contain'
+import fetch from 'licia/fetch'
+import now from 'licia/now'
+import Readiness from 'licia/Readiness'
+import map from 'licia/map'
+import { fullUrl } from '../lib/request'
+import { MAIN_FRAME_ID } from '../lib/constants'
+import {
+  getBase64Content,
+  getTextContent,
+  getOrigin,
+  getUrl,
+} from '../lib/util'
+import connector from '../lib/connector'
+import { isValidNode } from '../lib/nodeManager'
+import html2canvas, { Options as html2canvasOptions } from 'html2canvas'
+import * as resources from '../lib/resources'
+import Protocol from 'devtools-protocol'
+import Page = Protocol.Page
+
+
+declare var $chobitsuPageId: string;
+export function getFrameTree(): Page.GetFrameTreeResponse {
+  return {
+    frameTree: {
+      frame: {
+        id: $chobitsuPageId,
+        mimeType: 'text/html',
+        securityOrigin: getOrigin(),
+        url: getUrl(),
+        loaderId: $chobitsuPageId,
+        domainAndRegistry: getOrigin(),
+        secureContextType: 'Secure',
+        crossOriginIsolatedContextType: 'NotIsolated',
+        gatedAPIFeatures: [],
+      },
+      childFrames: [],
+    }
+  }
+}
+export function createIsolatedWorld(params: Page.CreateIsolatedWorldRequest): Page.CreateIsolatedWorldResponse {
+  console.log(params);
+
+  // fake context
+  connector.trigger('Runtime.executionContextCreated', {
+    context: {
+      id: 2,
+      origin: getOrigin(),
+      name: params.worldName,
+      auxData: {
+        isDefault: false,
+        type: 'isolated',
+        frameId: params.frameId,
+      },
+    },
+  })
+  return {
+    executionContextId: 1, // This should be a unique identifier for the execution context
+  }
+}
+
+export function setLifecycleEventsEnabled(params: Page.SetLifecycleEventsEnabledRequest) {
+  return {}
+}
+
+export function addScriptToEvaluateOnNewDocument(params: Page.AddScriptToEvaluateOnNewDocumentRequest): Page.AddScriptToEvaluateOnNewDocumentResponse{
+  console.log(params);
+  return {
+    identifier: '1', // This should be a unique identifier for the script
+  }
+}
+
+let proxy = ''
+
+export function setProxy(params: any) {
+  proxy = params.proxy
+}
+
+export function enable() {
+  stopScreencast()
+}
+
+export function reload() {
+  location.reload()
+}
+
+export function navigate(params: Page.NavigateRequest): Page.NavigateResponse {
+  location.href = params.url
+
+  return {
+    frameId: MAIN_FRAME_ID,
+  }
+}
+
+export function getNavigationHistory() {
+  return {
+    currentIndex: 0,
+    entries: [
+      {
+        id: 0,
+        url: getUrl(),
+        userTypedURL: getUrl(),
+        title: document.title,
+        transitionType: 'link',
+      },
+    ],
+  }
+}
+
+export async function getAppManifest() {
+  const $links = $('link')
+  const ret: any = {
+    errors: [],
+  }
+
+  let url = ''
+  $links.each(function (this: Element) {
+    const $this = $(this)
+
+    if ($this.attr('rel') === 'manifest') {
+      url = fullUrl($this.attr('href'))
+    }
+  })
+  ret.url = url
+
+  if (url) {
+    const res = await fetch(url)
+    ret.data = await res.text()
+  }
+
+  return ret
+}
+
+export function getResourceTree() {
+  const images = map(resources.getImages(), url => {
+    let mimeType = 'image/jpg'
+    if (contain(url, 'png')) {
+      mimeType = 'image/png'
+    } else if (contain(url, 'gif')) {
+      mimeType = 'image/gif'
+    }
+
+    return {
+      url,
+      mimeType,
+      type: 'Image',
+    }
+  })
+
+  return {
+    frameTree: {
+      frame: {
+        id: MAIN_FRAME_ID,
+        mimeType: 'text/html',
+        securityOrigin: getOrigin(),
+        url: getUrl(),
+      },
+      resources: [...images],
+    },
+  }
+}
+
+export async function getResourceContent(
+  params: Page.GetResourceContentRequest
+): Promise<Page.GetResourceContentResponse> {
+  const { frameId, url } = params
+  let base64Encoded = false
+
+  if (frameId === MAIN_FRAME_ID) {
+    let content = ''
+
+    if (url === location.href) {
+      content = await getTextContent(url)
+      if (!content) {
+        content = document.documentElement.outerHTML
+      }
+    } else if (resources.isImage(url)) {
+      content = await getBase64Content(url, proxy)
+      base64Encoded = true
+    }
+
+    return {
+      base64Encoded,
+      content,
+    }
+  }
+
+  return {
+    base64Encoded,
+    content: '',
+  }
+}
+
+let screenshotTimer: any
+let ack: Readiness
+let screencastInterval = 2000
+let isCapturingScreenshot = false
+
+export function screencastFrameAck() {
+  if (ack) {
+    ack.signal('ack')
+  }
+}
+
+export function startScreencast() {
+  if (isCapturingScreenshot) {
+    return
+  }
+  stopScreencast()
+  captureScreenshot()
+}
+
+export function stopScreencast() {
+  if (screenshotTimer) {
+    clearTimeout(screenshotTimer)
+    screenshotTimer = null
+    if (ack) {
+      ack.signal('ack')
+    }
+  }
+}
+
+async function captureScreenshot() {
+  if (document.hidden) {
+    screenshotTimer = setTimeout(captureScreenshot, screencastInterval)
+    return
+  }
+
+  isCapturingScreenshot = true
+
+  const $body = $(document.body)
+  const deviceWidth = window.innerWidth
+  let deviceHeight = window.innerHeight
+  let offsetTop = -window.scrollY
+  const overflowY = $body.css('overflow-y')
+  if (contain(['auto', 'scroll'], overflowY)) {
+    deviceHeight = $body.offset().height
+    offsetTop = -document.body.scrollTop
+  }
+  let width = $body.offset().width
+  if (width < deviceWidth) {
+    width = deviceWidth
+  }
+
+  const options: Partial<html2canvasOptions> = {
+    imageTimeout: 5000,
+    scale: 1,
+    width,
+    logging: false,
+    ignoreElements(node) {
+      return !isValidNode(node)
+    },
+  }
+
+  if (proxy) {
+    options.proxy = proxy
+  } else {
+    options.foreignObjectRendering = true
+    options.useCORS = true
+  }
+
+  const time = now()
+  const canvas = await html2canvas(document.body, options)
+  const duration = now() - time
+  screencastInterval = 2000
+  if (duration * 5 > screencastInterval) {
+    screencastInterval = duration * 5
+  }
+
+  const data = canvas
+    .toDataURL('image/jpeg')
+    .replace(/^data:image\/jpeg;base64,/, '')
+
+  if (ack) {
+    await ack.ready('ack')
+  }
+  ack = new Readiness()
+  connector.trigger('Page.screencastFrame', {
+    data,
+    sessionId: 1,
+    metadata: {
+      deviceWidth,
+      deviceHeight,
+      pageScaleFactor: 1,
+      offsetTop,
+      scrollOffsetX: 0,
+      scrollOffsetY: 0,
+      timestamp: now(),
+    },
+  })
+
+  screenshotTimer = setTimeout(captureScreenshot, screencastInterval)
+
+  isCapturingScreenshot = false
+}