glass-easel-devtools-agent 0.9.0

package/src/overlay.ts

@@ -0,0 +1,207 @@
+import * as glassEasel from 'glass-easel'
+
+// eslint-disable-next-line global-require, @typescript-eslint/no-var-requires
+const wxml = require('./overlay.wxml') as Record<string, unknown>
+
+export const enum OverlayState {
+  None = 0,
+  NodeSelect,
+  Highlight,
+}
+
+const space = new glassEasel.ComponentSpace()
+
+type ComponentExport = {
+  startNodeSelect(): void
+  endNodeSelect(): void
+}
+
+export const overlayCompDef = space
+  .define('glass-easel-devtools-agent')
+  .template(wxml)
+  .data(() => ({
+    state: OverlayState.None,
+    selectMoveDetecting: false,
+    highlightRect: null as null | { left: number; top: number; width: number; height: number },
+  }))
+  .init((ctx) => {
+    const { self, data, setData, method, listener } = ctx
+
+    // set host styles
+    self.setNodeStyle(`
+      display: block;
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 0;
+      height: 0;
+      background: red;
+      z-index: 2147483647;
+    `)
+
+    // selection
+    let nodeSelectUpdateCallback:
+      | null
+      | ((elem: glassEasel.Element | null, isFinal: boolean) => void) = null
+    const startNodeSelect = method(
+      (cb: (elem: glassEasel.Element | null, isFinal: boolean) => void) => {
+        if (data.state !== OverlayState.None && data.state !== OverlayState.Highlight) {
+          return false
+        }
+        setData({ state: OverlayState.NodeSelect })
+        nodeSelectUpdateCallback = cb
+        return true
+      },
+    )
+    const endNodeSelect = method(() => {
+      if (data.state !== OverlayState.NodeSelect) {
+        return false
+      }
+      setData({ state: OverlayState.None, highlightRect: null })
+      nodeSelectUpdateCallback = null
+      return true
+    })
+    const nodeSelectMove = listener<{ clientX: number; clientY: number }>(({ detail }) => {
+      if (data.selectMoveDetecting) return
+      const x = detail.clientX
+      const y = detail.clientY
+      const ctx = self.getBackendContext()
+      if (!ctx) {
+        setData({ highlightRect: null })
+        return
+      }
+      setData({ selectMoveDetecting: true })
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      elementFromPointInContext(ctx, x, y)
+        .then(async (elem) => {
+          setData({ selectMoveDetecting: false })
+          if (!elem) {
+            setData({ highlightRect: null })
+            return undefined
+          }
+          const { left, top, width, height } = await getBoundingClientRectInContext(elem)
+          if (data.state === OverlayState.NodeSelect) {
+            setData({ highlightRect: { left, top, width, height } })
+          }
+          nodeSelectUpdateCallback?.(elem, false)
+          return undefined
+        })
+        .catch(() => {
+          setData({ selectMoveDetecting: false, highlightRect: null })
+        })
+    })
+    const nodeSelectDone = listener<{ x: number; y: number }>(({ detail }) => {
+      const cb = nodeSelectUpdateCallback
+      endNodeSelect()
+      const { x, y } = detail
+      const ctx = self.getBackendContext()
+      if (!ctx) {
+        setData({ highlightRect: null })
+        return
+      }
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises, promise/catch-or-return
+      elementFromPointInContext(ctx, x, y).then(async (elem) => {
+        // eslint-disable-next-line promise/no-callback-in-promise
+        cb?.(elem, true)
+        return undefined
+      })
+    })
+
+    // highlight
+    const highlight = method(async (node: glassEasel.Node | null) => {
+      if (node && node.asElement()) {
+        const elem = node.asElement()!
+        const { left, top, width, height } = await getBoundingClientRectInContext(elem)
+        if (data.state !== OverlayState.None) {
+          return false
+        }
+        setData({ state: OverlayState.Highlight, highlightRect: { left, top, width, height } })
+      } else {
+        if (data.state !== OverlayState.Highlight) {
+          return false
+        }
+        setData({ state: OverlayState.None, highlightRect: null })
+      }
+      return true
+    })
+
+    return { startNodeSelect, endNodeSelect, nodeSelectMove, nodeSelectDone, highlight }
+  })
+  .registerComponent()
+
+const elementFromPointInContext = (
+  context: glassEasel.GeneralBackendContext,
+  x: number,
+  y: number,
+) =>
+  new Promise<glassEasel.Element | null>((resolve) => {
+    if (!context?.elementFromPoint) {
+      resolve(null)
+      return
+    }
+    // eslint-disable-next-line
+    context.elementFromPoint(x, y, (elem) => {
+      resolve(elem)
+    })
+  })
+
+const getBoundingClientRectInContext = (elem: glassEasel.Element) =>
+  new Promise<{ left: number; top: number; width: number; height: number }>((resolve) => {
+    elem.getBoundingClientRect((rect) => {
+      resolve(rect)
+    })
+  })
+
+export class OverlayManager {
+  private backendContexts: WeakMap<
+    glassEasel.GeneralBackendContext,
+    glassEasel.Component<any, any, ComponentExport>
+  > = new WeakMap()
+
+  get(ctx: glassEasel.GeneralBackendContext): glassEasel.Component<any, any, ComponentExport> {
+    const comp = this.backendContexts.get(ctx)
+    if (comp) return comp
+
+    // create the component
+    const component = space.createComponentByUrl(
+      'glass-easel-devtools-agent',
+      'glass-easel-devtools-agent',
+      null,
+      ctx,
+    ) as glassEasel.Component<any, any, ComponentExport>
+    this.backendContexts.set(ctx, component)
+
+    // insert into backend
+    let parentElement: glassEasel.GeneralBackendElement
+    let placeholder: glassEasel.GeneralBackendElement
+    if (ctx.mode === glassEasel.BackendMode.Composed) {
+      parentElement = ctx.getRootNode()
+      placeholder = ctx.createElement('glass-easel-devtools-agent', 'glass-easel-devtools-agent')
+      parentElement.appendChild(placeholder)
+    } else if (ctx.mode === glassEasel.BackendMode.Domlike) {
+      parentElement = ctx.getRootNode()
+      placeholder = ctx.document.createElement('glass-easel-devtools-agent')
+      parentElement.appendChild(placeholder)
+    } else if (ctx.mode === glassEasel.BackendMode.Shadow) {
+      const sr = ctx.getRootNode()
+      parentElement = sr
+      if (!sr) throw new Error('the host element should be inside of a shadow tree')
+      placeholder = sr.createElement('glass-easel-devtools-agent', 'glass-easel-devtools-agent')
+      sr.appendChild(placeholder)
+    } else {
+      throw new Error('unrecognized host backend mode')
+    }
+    glassEasel.Element.replaceDocumentElement(component, parentElement, placeholder)
+    if (
+      ctx.mode === glassEasel.BackendMode.Composed ||
+      ctx.mode === glassEasel.BackendMode.Shadow
+    ) {
+      const p = parentElement as glassEasel.composedBackend.Element | glassEasel.backend.Element
+      p.release()
+      const elem = placeholder as glassEasel.composedBackend.Element | glassEasel.backend.Element
+      elem.release()
+    }
+
+    return component
+  }
+}

package/src/overlay.wxml

@@ -0,0 +1,40 @@
+<!-- node select -->
+<div
+  wx:if="{{ state === 1 }}"
+  style="
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    {{ selectMoveDetecting ? 'transform: translateY(-200vh)' : '' }}
+  "
+  bind:mousemove="nodeSelectMove"
+  bind:tap="nodeSelectDone"
+>
+  <div
+    wx:if="{{ highlightRect }}"
+    style="
+      position: absolute;
+      left: {{ highlightRect.left }}px;
+      top: {{ highlightRect.top }}px;
+      width: {{ highlightRect.width }}px;
+      height: {{ highlightRect.height }}px;
+      background: rgba(0, 128, 192, 0.25);
+    "
+  />
+</div>
+
+<!-- temporary highlight -->
+<div
+  wx:if="{{ state === 2 && highlightRect }}"
+  style="
+    position: absolute;
+    left: {{ highlightRect.left }}px;
+    top: {{ highlightRect.top }}px;
+    width: {{ highlightRect.width }}px;
+    height: {{ highlightRect.height }}px;
+    background: rgba(0, 128, 192, 0.25);
+  "
+/>

package/src/protocol/css.ts

@@ -0,0 +1,222 @@
+import type { Protocol } from 'devtools-protocol'
+import type { EventDetail, NodeId, RequestResponse } from './index'
+
+export type AgentEventKind = {
+  fontsUpdated: FontsUpdated
+  mediaQueryResultChanged: MediaQueryResultChanged
+  styleSheetAdded: StyleSheetAdded
+  styleSheetChanged: StyleSheetChanged
+  styleSheetRemoved: StyleSheetRemoved
+}
+
+export type AgentRequestKind = {
+  getComputedStyleForNode: GetComputedStyleForNode
+  getInlineStylesForNode: GetInlineStylesForNode
+  getMatchedStylesForNode: GetMatchedStylesForNode
+  addGlassEaselStyleSheetRule: AddGlassEaselStyleSheetRule
+  getGlassEaselStyleSheetIndexForNewRules: GetGlassEaselStyleSheetIndexForNewRules
+  resetGlassEaselStyleSheetRule: ResetGlassEaselStyleSheetRule
+  modifyGlassEaselStyleSheetRuleSelector: ModifyGlassEaselStyleSheetRuleSelector
+  addGlassEaselStyleSheetProperty: AddGlassEaselStyleSheetProperty
+  setGlassEaselStyleSheetPropertyDisabled: SetGlassEaselStyleSheetPropertyDisabled
+  removeGlassEaselStyleSheetProperty: RemoveGlassEaselStyleSheetProperty
+  replaceGlassEaselStyleSheetProperty: ReplaceGlassEaselStyleSheetProperty
+  replaceGlassEaselStyleSheetAllProperties: ReplaceGlassEaselStyleSheetAllProperties
+  replaceGlassEaselStyleSheetInlineStyle: ReplaceGlassEaselStyleSheetInlineStyle
+}
+
+export type StyleSheetId = string
+
+export type CSSNameValue = { name: string; value: string }
+
+export type CSSProperty = CSSNameValue & {
+  /** `!important` status */
+  important?: boolean
+  /** the original style text */
+  text?: string
+  /** parse success or not */
+  parseOk?: boolean
+  /** disabled or not */
+  disabled?: boolean
+}
+
+export type CSSStyle = {
+  styleSheetId?: StyleSheetId
+  cssProperties: CSSProperty[]
+  cssText?: string
+}
+
+export type CSSRule = {
+  styleSheetId?: StyleSheetId
+  selectorList: { selectors: { text: string }[]; text: string }
+  style: CSSStyle
+  media?: { styleSheetId?: StyleSheetId; text: string }[]
+  inactive?: boolean
+}
+
+export type CSSMatchedRule = {
+  rule: CSSRule
+}
+
+/**
+ * Get computed style of a node.
+ */
+export interface GetComputedStyleForNode extends RequestResponse {
+  request: { nodeId: NodeId }
+  response: { computedStyle: CSSNameValue[] }
+  cdpRequestResponse: [
+    Protocol.CSS.GetComputedStyleForNodeRequest,
+    Protocol.CSS.GetComputedStyleForNodeResponse,
+  ]
+}
+
+/**
+ * Get inline styles of a node.
+ */
+export interface GetInlineStylesForNode extends RequestResponse {
+  request: { nodeId: NodeId }
+  response: { inlineStyle: CSSStyle }
+  cdpRequestResponse: [
+    Protocol.CSS.GetInlineStylesForNodeRequest,
+    Protocol.CSS.GetInlineStylesForNodeResponse,
+  ]
+}
+
+/**
+ * Get matched styles of a node.
+ */
+export interface GetMatchedStylesForNode extends RequestResponse {
+  request: { nodeId: NodeId }
+  response: {
+    inlineStyle: CSSStyle
+    matchedCSSRules: CSSMatchedRule[]
+    inherited: { inlineStyle?: CSSStyle; matchedCSSRules: CSSMatchedRule[] }[]
+    crossOriginFailing?: boolean
+  }
+  cdpRequestResponse: [
+    Protocol.CSS.GetMatchedStylesForNodeRequest,
+    Protocol.CSS.GetMatchedStylesForNodeResponse,
+  ]
+}
+
+/**
+ * Add a new CSS rule.
+ */
+export interface AddGlassEaselStyleSheetRule extends RequestResponse {
+  request: { mediaQueryText: string; selector: string }
+}
+
+/**
+ * Get the style sheet for temporary rules.
+ */
+export interface GetGlassEaselStyleSheetIndexForNewRules extends RequestResponse {
+  request: Record<string, never>
+  response: { styleSheetId: StyleSheetId }
+}
+
+/**
+ * Clear a CSS rule.
+ */
+export interface ResetGlassEaselStyleSheetRule extends RequestResponse {
+  request: { styleSheetId: StyleSheetId; ruleIndex: number }
+}
+
+/**
+ * Modify the CSS rule selector.
+ */
+export interface ModifyGlassEaselStyleSheetRuleSelector extends RequestResponse {
+  request: { styleSheetId: StyleSheetId; ruleIndex: number; selector: string }
+}
+
+/**
+ * Add a new CSS property.
+ */
+export interface AddGlassEaselStyleSheetProperty extends RequestResponse {
+  request: { styleSheetId: StyleSheetId; ruleIndex: number; styleText: string }
+}
+
+/**
+ * Set the disabled status of a new CSS property.
+ */
+export interface SetGlassEaselStyleSheetPropertyDisabled extends RequestResponse {
+  request: {
+    styleSheetId: StyleSheetId
+    ruleIndex: number
+    propertyIndex: number
+    disabled: boolean
+  }
+}
+
+/**
+ * Remove a CSS property.
+ */
+export interface RemoveGlassEaselStyleSheetProperty extends RequestResponse {
+  request: {
+    styleSheetId: StyleSheetId
+    ruleIndex: number
+    propertyIndex: number
+  }
+}
+
+/**
+ * Replace a CSS property.
+ */
+export interface ReplaceGlassEaselStyleSheetProperty extends RequestResponse {
+  request: {
+    styleSheetId: StyleSheetId
+    ruleIndex: number
+    propertyIndex: number
+    styleText: string
+  }
+}
+
+/**
+ * Replace all CSS properties.
+ */
+export interface ReplaceGlassEaselStyleSheetAllProperties extends RequestResponse {
+  request: {
+    styleSheetId: StyleSheetId
+    ruleIndex: number
+    styleText: string
+  }
+}
+
+/**
+ * Replace inline style for a node.
+ */
+export interface ReplaceGlassEaselStyleSheetInlineStyle extends RequestResponse {
+  request: {
+    nodeId: NodeId
+    styleText: string
+  }
+}
+
+export interface FontsUpdated extends EventDetail {
+  detail: Record<string, never>
+  cdpEventDetail: unknown
+}
+
+export interface MediaQueryResultChanged extends EventDetail {
+  detail: Record<string, never>
+  cdpEventDetail: unknown
+}
+
+export interface StyleSheetAdded extends EventDetail {
+  detail: {
+    header: {
+      styleSheetId: StyleSheetId
+      sourceURL?: string
+    }
+  }
+  cdpEventDetail: Protocol.CSS.StyleSheetAddedEvent
+}
+
+export interface StyleSheetChanged extends EventDetail {
+  detail: { styleSheetId: string }
+  cdpEventDetail: Protocol.CSS.StyleSheetChangedEvent
+}
+
+export interface StyleSheetRemoved extends EventDetail {
+  detail: { styleSheetId: string }
+  cdpEventDetail: Protocol.CSS.StyleSheetRemovedEvent
+}