glass-easel-devtools-agent 0.9.0 → 0.10.2

package/dist/protocol/css.d.ts

@@ -20,7 +20,6 @@ export type AgentRequestKind = {
     removeGlassEaselStyleSheetProperty: RemoveGlassEaselStyleSheetProperty;
     replaceGlassEaselStyleSheetProperty: ReplaceGlassEaselStyleSheetProperty;
     replaceGlassEaselStyleSheetAllProperties: ReplaceGlassEaselStyleSheetAllProperties;
-    replaceGlassEaselStyleSheetInlineStyle: ReplaceGlassEaselStyleSheetInlineStyle;
 };
 export type StyleSheetId = string;
 export type CSSNameValue = {
@@ -43,7 +42,7 @@ export type CSSStyle = {
     cssText?: string;
 };
 export type CSSRule = {
-    styleSheetId?: StyleSheetId;
+    styleSheetId: StyleSheetId;
     selectorList: {
         selectors: {
             text: string;
@@ -56,6 +55,7 @@ export type CSSRule = {
         text: string;
     }[];
     inactive?: boolean;
+    ruleIndex: number;
 };
 export type CSSMatchedRule = {
     rule: CSSRule;
@@ -116,6 +116,7 @@ export interface GetMatchedStylesForNode extends RequestResponse {
  */
 export interface AddGlassEaselStyleSheetRule extends RequestResponse {
     request: {
+        nodeId: NodeId;
         mediaQueryText: string;
         selector: string;
     };
@@ -126,15 +127,19 @@ export interface AddGlassEaselStyleSheetRule extends RequestResponse {
 export interface GetGlassEaselStyleSheetIndexForNewRules extends RequestResponse {
     request: Record<string, never>;
     response: {
+        nodeId: NodeId;
         styleSheetId: StyleSheetId;
     };
 }
 /**
  * Clear a CSS rule.
+ *
+ * `styleSheetId = undefined` refers to the inline styles.
  */
 export interface ResetGlassEaselStyleSheetRule extends RequestResponse {
     request: {
-        styleSheetId: StyleSheetId;
+        nodeId: NodeId;
+        styleSheetId?: StyleSheetId;
         ruleIndex: number;
     };
 }
@@ -143,6 +148,7 @@ export interface ResetGlassEaselStyleSheetRule extends RequestResponse {
  */
 export interface ModifyGlassEaselStyleSheetRuleSelector extends RequestResponse {
     request: {
+        nodeId: NodeId;
         styleSheetId: StyleSheetId;
         ruleIndex: number;
         selector: string;
@@ -150,20 +156,26 @@ export interface ModifyGlassEaselStyleSheetRuleSelector extends RequestResponse
 }
 /**
  * Add a new CSS property.
+ *
+ * `styleSheetId = undefined` refers to the inline styles.
  */
 export interface AddGlassEaselStyleSheetProperty extends RequestResponse {
     request: {
-        styleSheetId: StyleSheetId;
+        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;
@@ -171,20 +183,26 @@ 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;
     };
 }
 /**
  * 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;
@@ -192,20 +210,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/dist/protocol/dom.d.ts

@@ -16,6 +16,7 @@ export type AgentRequestKind = {
     pushNodesByBackendIdsToFrontend: PushNodesByBackendIdsToFrontend;
     removeAttribute: RemoveAttribute;
     setAttributeValue: SetAttributeValue;
+    setGlassEaselClassList: SetGlassEaselClassList;
     setAttributesAsText: SetAttributesAsText;
     getAttributes: GetAttributes;
     getGlassEaselAttributes: GetGlassEaselAttributes;
@@ -161,9 +162,30 @@ export interface SetAttributeValue extends RequestResponse {
         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.
  *
@@ -205,7 +227,10 @@ export interface GetGlassEaselAttributes extends RequestResponse {
         virtual: boolean;
         is: string;
         id: string;
-        class: string;
+        classes: {
+            className: string;
+            disabled?: boolean;
+        }[];
         slot: string;
         slotName: string | undefined;
         slotValues: {
@@ -229,7 +254,10 @@ export interface GetGlassEaselAttributes extends RequestResponse {
         }[];
         externalClasses?: {
             name: string;
-            value: string;
+            value: {
+                className: string;
+                disabled?: boolean;
+            }[];
         }[];
         dataset: {
             name: string;

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "glass-easel-devtools-agent",
-  "version": "0.9.0",
+  "version": "0.10.2",
   "main": "dist/index.js",
   "peerDependencies": {
-    "glass-easel": "^0.9.0"
+    "glass-easel": "^0.10.2"
   },
   "devDependencies": {
     "@csstools/css-tokenizer": "^2.4.1",
     "@csstools/selector-specificity": "^3.1.1",
-    "@types/node": "^20.14.9",
+    "@types/node": "^20.16.5",
     "devtools-protocol": "^0.0.1319565",
-    "glass-easel": "^0.9.0",
-    "glass-easel-template-compiler": "^0.9.0",
-    "postcss-selector-parser": "^6.1.1"
+    "glass-easel": "^0.10.2",
+    "glass-easel-template-compiler": "^0.10.2",
+    "postcss-selector-parser": "^6.1.2"
   },
   "scripts": {
     "build": "webpack --config webpack.config.js",

package/src/backend.ts

@@ -3,7 +3,13 @@
 import * as glassEasel from 'glass-easel'
 import parser from 'postcss-selector-parser'
 import { selectorSpecificity, compare as selectorCompare } from '@csstools/selector-specificity'
-import { tokenize, TokenType, stringify } from '@csstools/css-tokenizer'
+import {
+  tokenize,
+  TokenType,
+  stringify,
+  type CSSToken,
+  type TokenString,
+} from '@csstools/css-tokenizer'
 import { backendUnsupported } from './utils'
 
 export type BoundingClientRect = glassEasel.BoundingClientRect
@@ -141,42 +147,91 @@ export const getBoxModel = (
   })
 }
 
+const expectToken = (
+  token: CSSToken | undefined,
+  type: TokenType,
+  name?: string,
+): string | null => {
+  if (token === undefined) return null
+  if (token[0] !== type) return null
+  if (name === undefined) return token[1]
+  if (name === token[1]) return name
+  return null
+}
+
+const parseNameValueStr = (cssText: string) => {
+  const ret: { name: string; value: string; disabled: boolean }[] = []
+  const tokens = tokenize({ css: cssText })
+  if (tokens.length === 0) return null
+  let nameStart = 0
+  for (let i = 0; i < tokens.length; i += 1) {
+    const t = tokens[i]
+    if (expectToken(t, TokenType.Colon)) {
+      const name = stringify(...tokens.slice(nameStart, i)).trim()
+      i += 1
+      const valueStart = i
+      for (; i < tokens.length; i += 1) {
+        const t = tokens[i]
+        if (expectToken(t, TokenType.Semicolon)) break
+      }
+      const value = stringify(...tokens.slice(valueStart, i)).trim()
+      ret.push({ name, value, disabled: false })
+      nameStart = i + 1
+    }
+  }
+  return ret
+}
+
 export const getMatchedRules = (
-  ctx: glassEasel.GeneralBackendContext,
-  elem: glassEasel.GeneralBackendElement,
+  element: glassEasel.Element,
 ): Promise<{
   inline: glassEasel.CSSProperty[]
   inlineText?: string
   rules: glassEasel.CSSRule[]
   crossOriginFailing?: boolean
 }> => {
-  const parseNameValueStr = (cssText: string) => {
-    const ret: { name: string; value: string }[] = []
-    const tokens = tokenize({ css: cssText })
-    if (tokens.length === 0) return null
-    let nameStart = 0
-    for (let i = 0; i < tokens.length; i += 1) {
-      const t = tokens[i]
-      if (t[0] === TokenType.Colon) {
-        const name = stringify(...tokens.slice(nameStart, i))
-        i += 1
-        const valueStart = i
-        for (; i < tokens.length; i += 1) {
-          const t = tokens[i]
-          if (t[0] === TokenType.Semicolon) break
+  const convertAdapterGeneratedRules = (rules: glassEasel.CSSRule[]) => {
+    rules.forEach((rule) => {
+      const tokens = tokenize({ css: rule.selector })
+      if (
+        expectToken(tokens[0], TokenType.OpenSquare) &&
+        expectToken(tokens[1], TokenType.Ident, 'wx-host') &&
+        expectToken(tokens[2], TokenType.Delim, '=') &&
+        expectToken(tokens[3], TokenType.String) &&
+        expectToken(tokens[4], TokenType.CloseSquare) &&
+        expectToken(tokens[5], TokenType.EOF) !== null
+      ) {
+        // convert host rules
+        rule.selector = ':host'
+        rule.styleScope = (tokens[3] as TokenString)[4].value
+        return
+      }
+      for (let i = 0; i < tokens.length; i += 1) {
+        // convert class prefixes
+        const t = tokens[i]
+        if (expectToken(t, TokenType.Delim, '.')) {
+          const peek = expectToken(tokens[i + 1], TokenType.Ident)
+          if (peek) {
+            i += 1
+            const [prefix, name] = peek.split('--', 2)
+            if (name !== undefined) {
+              rule.styleScope = prefix
+              tokens[i][1] = name
+            }
+          }
         }
-        const value = stringify(...tokens.slice(valueStart, i))
-        ret.push({ name, value })
-        nameStart = i + 1
       }
-    }
-    return ret
+      rule.selector = stringify(...tokens)
+    })
   }
-  const calcRuleWeight = (rules: glassEasel.CSSRule[]): glassEasel.CSSRule[] => {
+
+  const calcRuleWeight = (
+    ctx: glassEasel.GeneralBackendContext,
+    rules: glassEasel.CSSRule[],
+  ): glassEasel.CSSRule[] => {
     const rulesWithSelector = rules.map((rule) => {
-      if (rule.propertyText) {
-        rule.properties = parseNameValueStr(rule.propertyText) ?? rule.properties
-      }
+      const edit = styleEditContext.createOrGetRule(ctx, rule, rule.propertyText)
+      rule.properties = edit.getProps()
       const ps = parser().astSync(rule.selector)
       const specificity = selectorSpecificity(ps)
       return [specificity, rule] as const
@@ -197,15 +252,22 @@ export const getMatchedRules = (
     })
     return rulesWithSelector.map(([_sel, rule]) => rule).reverse()
   }
+
   return new Promise((resolve) => {
+    const ctx = element.getBackendContext()
+    const elem = element.getBackendElement()
+    if (!ctx || !elem) {
+      resolve({ inline: [], rules: [] })
+      return
+    }
     if (ctx.mode === glassEasel.BackendMode.Domlike) {
       if (typeof ctx.getMatchedRules === 'function') {
         try {
           ctx.getMatchedRules(elem as glassEasel.domlikeBackend.Element, (ret) => {
-            ret.rules = calcRuleWeight(ret.rules)
-            if (ret.inlineText) {
-              ret.inline = parseNameValueStr(ret.inlineText) ?? ret.inline
-            }
+            convertAdapterGeneratedRules(ret.rules)
+            ret.rules = calcRuleWeight(ctx, ret.rules)
+            const edit = styleEditContext.createOrGetInline(elem, ret.inline, ret.inlineText)
+            ret.inline = edit.getProps()
             resolve(ret)
           })
         } catch (err) {
@@ -222,7 +284,9 @@ export const getMatchedRules = (
     } else {
       if ('getMatchedRules' in elem) {
         ;(elem as glassEasel.backend.Element).getMatchedRules!((ret) => {
-          ret.rules = calcRuleWeight(ret.rules)
+          ret.rules = calcRuleWeight(ctx, ret.rules)
+          const edit = styleEditContext.createOrGetInline(elem, ret.inline, ret.inlineText)
+          ret.inline = edit.getProps()
           resolve(ret)
         })
       } else {
@@ -231,3 +295,243 @@ export const getMatchedRules = (
     }
   })
 }
+
+const filterCssProperties = (props: glassEasel.CSSProperty[]) => {
+  return props.map((prop) => ({
+    name: prop.name.trim(),
+    value: prop.value.trim(),
+    disabled: false,
+    important: prop.important,
+  }))
+}
+
+export class StyleRuleEdit {
+  private props: { name: string; value: string; disabled: boolean; important?: boolean }[]
+
+  constructor(props: glassEasel.CSSProperty[]) {
+    this.props = filterCssProperties(props)
+  }
+
+  static fromMaybeInlineStyle(props: glassEasel.CSSProperty[], inlineStyle?: string) {
+    if (inlineStyle === undefined) return new StyleRuleEdit(props)
+    const ret = new StyleRuleEdit([])
+    ret.props = parseNameValueStr(inlineStyle) ?? []
+    return ret
+  }
+
+  updateWithProps(props: glassEasel.CSSProperty[], inlineStyle?: string) {
+    const oldProps = this.props
+    this.props =
+      inlineStyle === undefined ? filterCssProperties(props) : parseNameValueStr(inlineStyle) ?? []
+    let i = 0
+    oldProps.forEach((prop) => {
+      if (prop.disabled) {
+        this.props.splice(i, 0, prop)
+        i += 1
+      }
+      while (i < this.props.length) {
+        i += 1
+        if (prop.name === this.props[i - 1].name) {
+          break
+        }
+      }
+    })
+  }
+
+  getProps() {
+    return this.props.slice()
+  }
+
+  clear() {
+    this.props.length = 0
+  }
+
+  countProps() {
+    return this.props.length
+  }
+
+  append(inlineStyle: string) {
+    const list = parseNameValueStr(inlineStyle) ?? []
+    this.props.push(...list)
+  }
+
+  setDisabled(index: number, disabled: boolean): boolean {
+    if (index >= this.props.length) return false
+    this.props[index].disabled = disabled
+    return true
+  }
+
+  remove(index: number): boolean {
+    if (index >= this.props.length) return false
+    this.props.splice(index, 1)
+    return true
+  }
+
+  replace(index: number, inlineStyle: string): boolean {
+    if (index >= this.props.length) return false
+    const list = parseNameValueStr(inlineStyle) ?? []
+    this.props.splice(index, 1, ...list)
+    return true
+  }
+
+  stringify(): string {
+    return this.props
+      .map(({ name, value, important, disabled }) => {
+        if (disabled) return ''
+        if (important) return `${name}: ${value} !important;\n`
+        return `${name}: ${value};\n`
+      })
+      .join('')
+  }
+}
+
+class StyleEditContext {
+  inlineStyleMap = new WeakMap<glassEasel.GeneralBackendElement, StyleRuleEdit>()
+  ruleMap = new WeakMap<glassEasel.GeneralBackendContext, Record<string, StyleRuleEdit>>()
+
+  createOrGetInline(
+    elem: glassEasel.GeneralBackendElement,
+    properties: glassEasel.CSSProperty[],
+    inlineStyle?: string,
+  ): StyleRuleEdit {
+    const r = this.inlineStyleMap.get(elem)
+    if (r) {
+      r.updateWithProps(properties, inlineStyle)
+      return r
+    }
+    const edit = StyleRuleEdit.fromMaybeInlineStyle(properties, inlineStyle)
+    this.inlineStyleMap.set(elem, edit)
+    return edit
+  }
+
+  createOrGetRule(
+    ctx: glassEasel.GeneralBackendContext,
+    rule: glassEasel.CSSRule,
+    inlineStyle?: string,
+  ): StyleRuleEdit {
+    const key = `${rule.sheetIndex}/${rule.ruleIndex}`
+    const map = this.ruleMap.get(ctx)
+    if (!map) {
+      const map = Object.create(null) as Record<string, StyleRuleEdit>
+      map[key] = StyleRuleEdit.fromMaybeInlineStyle(rule.properties, inlineStyle)
+      this.ruleMap.set(ctx, map)
+      return map[key]
+    }
+    if (!map[key]) {
+      map[key] = StyleRuleEdit.fromMaybeInlineStyle(rule.properties, inlineStyle)
+      return map[key]
+    }
+    map[key].updateWithProps(rule.properties, inlineStyle)
+    return map[key]
+  }
+
+  updateInline(
+    ctx: glassEasel.GeneralBackendContext,
+    elem: glassEasel.GeneralBackendElement,
+    f: (edit: StyleRuleEdit) => void,
+  ) {
+    const edit = this.inlineStyleMap.get(elem)
+    if (!edit) return
+    f(edit)
+    const style = edit.stringify()
+    if (ctx.mode === glassEasel.BackendMode.Domlike) {
+      ;(elem as glassEasel.domlikeBackend.Element).setAttribute('style', style)
+    } else if (ctx.mode === glassEasel.BackendMode.Composed) {
+      ;(elem as glassEasel.composedBackend.Element).setStyle(style)
+    } else if (ctx.mode === glassEasel.BackendMode.Shadow) {
+      ;(elem as glassEasel.backend.Element).setStyle(style)
+    }
+  }
+
+  updateRule(
+    ctx: glassEasel.GeneralBackendContext,
+    sheetIndex: number,
+    ruleIndex: number,
+    f: (edit: StyleRuleEdit) => void,
+  ): Promise<void> {
+    const key = `${sheetIndex}/${ruleIndex}`
+    const edit = this.ruleMap.get(ctx)?.[key]
+    if (!edit) return Promise.resolve()
+    f(edit)
+    const style = edit.stringify()
+    return new Promise((resolve) => {
+      ctx.replaceStyleSheetAllProperties?.(sheetIndex, ruleIndex, style, () => {
+        resolve()
+      })
+    })
+  }
+}
+
+export const styleEditContext = new StyleEditContext()
+
+export class ClassListEdit {
+  private list: { className: string; disabled: boolean }[] = []
+
+  update(names: string[]) {
+    const oldList = this.list
+    this.list = names.map((className) => ({ className, disabled: false }))
+    let i = 0
+    oldList.forEach((item) => {
+      if (item.disabled) {
+        this.list.splice(i, 0, item)
+        i += 1
+      }
+      while (i < this.list.length) {
+        i += 1
+        if (item.className === this.list[i - 1].className) {
+          break
+        }
+      }
+    })
+    return this
+  }
+
+  setDisabled(className: string, disabled: boolean) {
+    const item = this.list.find((x) => x.className === className)
+    if (item) item.disabled = disabled
+  }
+
+  getClasses() {
+    return this.list.slice()
+  }
+
+  setClasses(list: { className: string; disabled?: boolean }[]) {
+    this.list = []
+    list.forEach(({ className, disabled }) => {
+      className.split(/\s+/g).forEach((className) => {
+        if (!className) return
+        this.list.push({ className, disabled: !!disabled })
+      })
+    })
+  }
+
+  stringify() {
+    return this.list
+      .filter((x) => !x.disabled)
+      .map((x) => x.className)
+      .join(' ')
+  }
+
+  matches(v: string): boolean {
+    return this.stringify() === v
+  }
+}
+
+export class ClassEditContext {
+  map = new WeakMap<glassEasel.Element, Record<string, ClassListEdit>>()
+
+  createOrGet(external: string, elem: glassEasel.Element): ClassListEdit {
+    if (!this.map.get(elem)) {
+      const group = Object.create(null) as Record<string, ClassListEdit>
+      this.map.set(elem, group)
+    }
+    const group = this.map.get(elem)!
+    const key = external ?? ''
+    if (!group[key]) {
+      group[key] = new ClassListEdit()
+    }
+    return group[key]
+  }
+}
+
+export const classEditContext = new ClassEditContext()