glass-easel-devtools-agent 0.9.0 → 0.10.1

package/src/mount_point.ts

@@ -126,7 +126,7 @@ export class MountPointsManager {
           virtual: false,
           is: '',
           id: '',
-          class: '',
+          classes: [],
           slot: '',
           slotName: undefined,
           slotValues: undefined,
@@ -152,7 +152,8 @@ export class MountPointsManager {
       if (nativeNode) is = nativeNode.is
       if (virtualNode) is = virtualNode.is
       const id = elem.id
-      const nodeClass = elem.class
+      const classEdit = backendUtils.classEditContext.createOrGet('', elem)
+      const classes = classEdit.update(elem.class.split(/\s+/g).filter((x) => x)).getClasses()
       const slot = elem.slot
       let slotName
       const maybeSlotName = Reflect.get(elem, '_$slotName') as unknown
@@ -206,7 +207,9 @@ export class MountPointsManager {
       // collect attributes, properties, and external classes
       let normalAttributes: { name: string; value: GlassEaselVar }[] | undefined
       let properties: { name: string; value: GlassEaselVar }[] | undefined
-      let externalClasses: { name: string; value: string }[] | undefined
+      let externalClasses:
+        | { name: string; value: { className: string; disabled?: boolean }[] }[]
+        | undefined
       if (nativeNode) {
         normalAttributes = []
         elem.attributes.forEach(({ name, value }) => {
@@ -224,7 +227,10 @@ export class MountPointsManager {
         if (ec) {
           externalClasses = Object.entries(ec).map(([name, value]) => ({
             name,
-            value: value?.join(' ') ?? '',
+            value: backendUtils.classEditContext
+              .createOrGet(name, elem)
+              .update(value ?? [])
+              .getClasses(),
           }))
         }
       }
@@ -245,7 +251,7 @@ export class MountPointsManager {
         virtual,
         is,
         id,
-        class: nodeClass,
+        classes,
         slot,
         slotName,
         slotValues,
@@ -258,6 +264,67 @@ export class MountPointsManager {
       }
     })
 
+    this.conn.setRequestHandler(
+      'DOM.setAttributeValue',
+      async ({ nodeId, name, value, nameType }) => {
+        const { node } = this.queryActiveNode(nodeId)
+        const elem = node.asElement()
+        if (!elem) return undefined
+        if (nameType === 'normal-attribute') {
+          elem.setAttribute(name, value)
+        } else if (nameType === 'property') {
+          const comp = elem.asGeneralComponent()
+          comp?.setData({ [name]: value })
+        } else if (nameType === 'external-class') {
+          const comp = elem.asGeneralComponent()
+          comp?.setExternalClass(name, value)
+        } else if (name === 'id') {
+          elem.id = value
+        } else if (name === 'class') {
+          elem.class = value
+        } else if (name === 'slot') {
+          elem.slot = value
+        } else if (name.indexOf(':') >= 0) {
+          const [scope, key] = name.split(':', 2)
+          if (scope === 'dataset') {
+            elem.setDataset(key, value)
+          } else if (scope === 'mark') {
+            elem.setMark(key, value)
+          }
+        } else {
+          const comp = elem.asGeneralComponent()
+          if (comp) {
+            const beh = comp.getComponentDefinition().behavior
+            if (beh.listProperties().includes(name)) {
+              comp.setData({ [name]: value })
+            } else if (Object.keys(comp.getExternalClasses()).includes(name)) {
+              comp.setExternalClass(name, value)
+            }
+          }
+          elem.setAttribute(name, value)
+        }
+        return undefined
+      },
+    )
+
+    this.conn.setRequestHandler(
+      'DOM.setGlassEaselClassList',
+      async ({ nodeId, externalClass, classes }) => {
+        const { node } = this.queryActiveNode(nodeId)
+        const elem = node.asElement()
+        if (!elem) return { classes: [] }
+        const edit = backendUtils.classEditContext.createOrGet(externalClass ?? '', elem)
+        edit.setClasses(classes)
+        if (externalClass) {
+          const comp = elem.asGeneralComponent()
+          comp?.setExternalClass(externalClass, edit.stringify())
+        } else {
+          elem.class = edit.stringify()
+        }
+        return { classes: edit.getClasses() }
+      },
+    )
+
     this.conn.setRequestHandler('DOM.getGlassEaselComposedChildren', async ({ nodeId }) => {
       const { node } = this.queryActiveNode(nodeId)
       const elem = node.asElement()
@@ -354,13 +421,11 @@ export class MountPointsManager {
 
     this.conn.setRequestHandler('CSS.getMatchedStylesForNode', async ({ nodeId }) => {
       const { node } = this.queryActiveNode(nodeId)
-      const ctx = node?.getBackendContext()
-      const elem = node?.getBackendElement()
-      if (!ctx || !elem) {
-        throw new Error('no such backend node found')
+      const elem = node.asElement()
+      if (!elem) {
+        throw new Error('not an element')
       }
       const { inline, inlineText, rules, crossOriginFailing } = await backendUtils.getMatchedRules(
-        ctx,
         elem,
       )
       const inlineStyle = { cssProperties: inline, cssText: inlineText }
@@ -370,11 +435,77 @@ export class MountPointsManager {
           style: { cssProperties: rule.properties, cssText: rule.propertyText },
           media: rule.mediaQueries.map((x) => ({ text: x })),
           inactive: rule.inactive || false,
+          styleSheetId: rule.sheetIndex.toString(),
+          ruleIndex: rule.ruleIndex,
+          styleScope: rule.styleScope,
         },
       }))
       return { inlineStyle, matchedCSSRules, inherited: [], crossOriginFailing }
     })
 
+    this.conn.setRequestHandler(
+      'CSS.replaceGlassEaselStyleSheetProperty',
+      async ({ nodeId, styleSheetId, ruleIndex, propertyIndex, styleText }) => {
+        const { node } = this.queryActiveNode(nodeId)
+        const ctx = node?.getBackendContext()
+        const elem = node?.getBackendElement()
+        if (!ctx || !elem) {
+          throw new Error('no such backend node found')
+        }
+        const editFunc = (edit: backendUtils.StyleRuleEdit) => {
+          edit.replace(propertyIndex, styleText)
+        }
+        if (styleSheetId !== undefined) {
+          const sheetIndex = Number(styleSheetId)
+          await backendUtils.styleEditContext.updateRule(ctx, sheetIndex, ruleIndex, editFunc)
+        } else {
+          backendUtils.styleEditContext.updateInline(ctx, elem, editFunc)
+        }
+      },
+    )
+
+    this.conn.setRequestHandler(
+      'CSS.addGlassEaselStyleSheetProperty',
+      async ({ nodeId, styleSheetId, ruleIndex, styleText }) => {
+        const { node } = this.queryActiveNode(nodeId)
+        const ctx = node?.getBackendContext()
+        const elem = node?.getBackendElement()
+        if (!ctx || !elem) {
+          throw new Error('no such backend node found')
+        }
+        const editFunc = (edit: backendUtils.StyleRuleEdit) => {
+          edit.append(styleText)
+        }
+        if (styleSheetId !== undefined) {
+          const sheetIndex = Number(styleSheetId)
+          await backendUtils.styleEditContext.updateRule(ctx, sheetIndex, ruleIndex, editFunc)
+        } else {
+          backendUtils.styleEditContext.updateInline(ctx, elem, editFunc)
+        }
+      },
+    )
+
+    this.conn.setRequestHandler(
+      'CSS.setGlassEaselStyleSheetPropertyDisabled',
+      async ({ nodeId, styleSheetId, ruleIndex, propertyIndex, disabled }) => {
+        const { node } = this.queryActiveNode(nodeId)
+        const ctx = node?.getBackendContext()
+        const elem = node?.getBackendElement()
+        if (!ctx || !elem) {
+          throw new Error('no such backend node found')
+        }
+        const editFunc = (edit: backendUtils.StyleRuleEdit) => {
+          edit.setDisabled(propertyIndex, disabled)
+        }
+        if (styleSheetId !== undefined) {
+          const sheetIndex = Number(styleSheetId)
+          await backendUtils.styleEditContext.updateRule(ctx, sheetIndex, ruleIndex, editFunc)
+        } else {
+          backendUtils.styleEditContext.updateInline(ctx, elem, editFunc)
+        }
+      },
+    )
+
     this.conn.setRequestHandler('Overlay.setInspectMode', async ({ mode }) => {
       if (mode === 'searchForNode') {
         let prevHighlight = 0
@@ -575,8 +706,12 @@ export class MountPointsManager {
             const marks = Reflect.get(elem, '_$marks') as { [key: string]: unknown } | undefined
             v = marks?.[name.slice(5)]
           } else if (nameType === 'external-class') {
-            name = ev.attributeName ?? ''
-            v = elem.asGeneralComponent()?.getExternalClasses()?.[name]?.join(' ') ?? ''
+            const external = ev.attributeName ?? ''
+            const classes = elem.asGeneralComponent()?.getExternalClasses()?.[external]?.join(' ')
+            if (!backendUtils.classEditContext.createOrGet(external, elem)) {
+              name = external
+              v = classes ?? ''
+            }
           } else if (ev.attributeName === 'slot') {
             name = ev.attributeName
             v = elem.slot
@@ -584,8 +719,10 @@ export class MountPointsManager {
             name = ev.attributeName
             v = elem.id
           } else if (ev.attributeName === 'class') {
-            name = ev.attributeName
-            v = elem.class
+            if (!backendUtils.classEditContext.createOrGet('', elem).matches(elem.class)) {
+              name = ev.attributeName
+              v = elem.class
+            }
           } else if (ev.attributeName === 'style') {
             name = ev.attributeName
             v = elem.style
@@ -603,8 +740,6 @@ export class MountPointsManager {
               detail,
               nameType,
             })
-          } else {
-            warn('unknown mutation observer event')
           }
         }
         return

package/src/protocol/css.ts

@@ -22,7 +22,6 @@ export type AgentRequestKind = {
   removeGlassEaselStyleSheetProperty: RemoveGlassEaselStyleSheetProperty
   replaceGlassEaselStyleSheetProperty: ReplaceGlassEaselStyleSheetProperty
   replaceGlassEaselStyleSheetAllProperties: ReplaceGlassEaselStyleSheetAllProperties
-  replaceGlassEaselStyleSheetInlineStyle: ReplaceGlassEaselStyleSheetInlineStyle
 }
 
 export type StyleSheetId = string
@@ -47,11 +46,12 @@ export type CSSStyle = {
 }
 
 export type CSSRule = {
-  styleSheetId?: StyleSheetId
+  styleSheetId: StyleSheetId
   selectorList: { selectors: { text: string }[]; text: string }
   style: CSSStyle
   media?: { styleSheetId?: StyleSheetId; text: string }[]
   inactive?: boolean
+  ruleIndex: number
 }
 
 export type CSSMatchedRule = {
@@ -103,7 +103,7 @@ export interface GetMatchedStylesForNode extends RequestResponse {
  * Add a new CSS rule.
  */
 export interface AddGlassEaselStyleSheetRule extends RequestResponse {
-  request: { mediaQueryText: string; selector: string }
+  request: { nodeId: NodeId; mediaQueryText: string; selector: string }
 }
 
 /**
@@ -111,36 +111,43 @@ export interface AddGlassEaselStyleSheetRule extends RequestResponse {
  */
 export interface GetGlassEaselStyleSheetIndexForNewRules extends RequestResponse {
   request: Record<string, never>
-  response: { styleSheetId: StyleSheetId }
+  response: { nodeId: NodeId; styleSheetId: StyleSheetId }
 }
 
 /**
  * Clear a CSS rule.
+ *
+ * `styleSheetId = undefined` refers to the inline styles.
  */
 export interface ResetGlassEaselStyleSheetRule extends RequestResponse {
-  request: { styleSheetId: StyleSheetId; ruleIndex: number }
+  request: { nodeId: NodeId; styleSheetId?: StyleSheetId; ruleIndex: number }
 }
 
 /**
  * Modify the CSS rule selector.
  */
 export interface ModifyGlassEaselStyleSheetRuleSelector extends RequestResponse {
-  request: { styleSheetId: StyleSheetId; ruleIndex: number; selector: string }
+  request: { nodeId: NodeId; styleSheetId: StyleSheetId; ruleIndex: number; selector: string }
 }
 
 /**
  * Add a new CSS property.
+ *
+ * `styleSheetId = undefined` refers to the inline styles.
  */
 export interface AddGlassEaselStyleSheetProperty extends RequestResponse {
-  request: { styleSheetId: StyleSheetId; ruleIndex: number; styleText: string }
+  request: { nodeId: NodeId; styleSheetId?: StyleSheetId; ruleIndex: number; styleText: string }
 }
 
 /**
  * Set the disabled status of a new CSS property.
+ *
+ * `styleSheetId = undefined` refers to the inline styles.
  */
 export interface SetGlassEaselStyleSheetPropertyDisabled extends RequestResponse {
   request: {
-    styleSheetId: StyleSheetId
+    nodeId: NodeId
+    styleSheetId?: StyleSheetId
     ruleIndex: number
     propertyIndex: number
     disabled: boolean
@@ -149,10 +156,13 @@ export interface SetGlassEaselStyleSheetPropertyDisabled extends RequestResponse
 
 /**
  * Remove a CSS property.
+ *
+ * `styleSheetId = undefined` refers to the inline styles.
  */
 export interface RemoveGlassEaselStyleSheetProperty extends RequestResponse {
   request: {
-    styleSheetId: StyleSheetId
+    nodeId: NodeId
+    styleSheetId?: StyleSheetId
     ruleIndex: number
     propertyIndex: number
   }
@@ -160,10 +170,13 @@ export interface RemoveGlassEaselStyleSheetProperty extends RequestResponse {
 
 /**
  * Replace a CSS property.
+ *
+ * `styleSheetId = undefined` refers to the inline styles.
  */
 export interface ReplaceGlassEaselStyleSheetProperty extends RequestResponse {
   request: {
-    styleSheetId: StyleSheetId
+    nodeId: NodeId
+    styleSheetId?: StyleSheetId
     ruleIndex: number
     propertyIndex: number
     styleText: string
@@ -172,21 +185,14 @@ export interface ReplaceGlassEaselStyleSheetProperty extends RequestResponse {
 
 /**
  * Replace all CSS properties.
+ *
+ * `styleSheetId = undefined` refers to the inline styles.
  */
 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
+    styleSheetId?: StyleSheetId
+    ruleIndex: number
     styleText: string
   }
 }

package/src/protocol/dom.ts

@@ -18,6 +18,7 @@ export type AgentRequestKind = {
   pushNodesByBackendIdsToFrontend: PushNodesByBackendIdsToFrontend
   removeAttribute: RemoveAttribute
   setAttributeValue: SetAttributeValue
+  setGlassEaselClassList: SetGlassEaselClassList
   setAttributesAsText: SetAttributesAsText
   getAttributes: GetAttributes
   getGlassEaselAttributes: GetGlassEaselAttributes
@@ -161,10 +162,30 @@ export interface RemoveAttribute extends RequestResponse {
  * Set an attribute.
  */
 export interface SetAttributeValue extends RequestResponse {
-  request: { nodeId: NodeId; name: string; value: string }
+  request: {
+    nodeId: NodeId
+    name: string
+    value: string
+    nameType?: 'auto' | 'normal-attribute' | 'property' | 'external-class'
+  }
   cdpRequestResponse: [Protocol.DOM.SetAttributeValueRequest, unknown]
 }
 
+/**
+ * Set an attribute.
+ */
+export interface SetGlassEaselClassList extends RequestResponse {
+  request: {
+    nodeId: NodeId
+    externalClass?: string
+    classes: { className: string; disabled?: boolean }[]
+  }
+  response: {
+    classes: { className: string; disabled?: boolean }[]
+  }
+  cdpRequestResponse: [unknown, unknown]
+}
+
 /**
  * Set attributes as text.
  *
@@ -197,7 +218,7 @@ export interface GetGlassEaselAttributes extends RequestResponse {
     virtual: boolean
     is: string
     id: string
-    class: string
+    classes: { className: string; disabled?: boolean }[]
     slot: string
     slotName: string | undefined
     slotValues: { name: string; value: GlassEaselVar }[] | undefined
@@ -210,7 +231,7 @@ export interface GetGlassEaselAttributes extends RequestResponse {
     }[]
     normalAttributes?: { name: string; value: GlassEaselVar }[]
     properties?: { name: string; value: GlassEaselVar }[]
-    externalClasses?: { name: string; value: string }[]
+    externalClasses?: { name: string; value: { className: string; disabled?: boolean }[] }[]
     dataset: { name: string; value: GlassEaselVar }[]
     marks: { name: string; value: GlassEaselVar }[]
   }