opendevbrowser 0.0.16 → 0.0.17

package/extension/dist/ops/dom-bridge.js

@@ -240,6 +240,66 @@ export class DomBridge {
         }
         return payload.value;
     }
+    async applyRuntimePreviewBridge(tabId, bindingId, rootSelector, html) {
+        return await runInTab(tabId, (payload) => {
+            const input = payload;
+            const root = document.querySelector(input.rootSelector);
+            if (!(root instanceof HTMLElement)) {
+                return {
+                    ok: false,
+                    fallbackReason: "runtime_projection_unsupported",
+                    message: `Runtime root not found for selector ${input.rootSelector}.`
+                };
+            }
+            const existingBindingId = root.getAttribute("data-binding-id");
+            if (existingBindingId !== input.bindingId) {
+                return {
+                    ok: false,
+                    fallbackReason: "runtime_instrumentation_missing",
+                    message: "Runtime root is missing the expected data-binding-id instrumentation."
+                };
+            }
+            root.innerHTML = input.html;
+            const nodes = [root, ...Array.from(root.querySelectorAll("[data-node-id]"))]
+                .filter((element) => element instanceof HTMLElement && element.hasAttribute("data-node-id"))
+                .map((element) => {
+                const computed = window.getComputedStyle(element);
+                const childOrder = Array.from(element.children)
+                    .map((child) => child instanceof HTMLElement ? child.getAttribute("data-node-id") ?? child.tagName.toLowerCase() : "")
+                    .join("|");
+                return {
+                    nodeId: element.getAttribute("data-node-id") ?? "",
+                    bindingId: element.getAttribute("data-binding-id") ?? input.bindingId,
+                    text: (element.innerText || "").trim(),
+                    childOrderHash: childOrder,
+                    attributes: {
+                        "data-node-id": element.getAttribute("data-node-id") ?? "",
+                        ...(element.hasAttribute("data-binding-id")
+                            ? { "data-binding-id": element.getAttribute("data-binding-id") ?? "" }
+                            : {})
+                    },
+                    styleProjection: {
+                        color: computed.color,
+                        backgroundColor: computed.backgroundColor,
+                        fontSize: computed.fontSize,
+                        fontWeight: computed.fontWeight,
+                        borderRadius: computed.borderRadius,
+                        display: computed.display
+                    }
+                };
+            });
+            return {
+                ok: true,
+                artifact: {
+                    projection: "bound_app_runtime",
+                    rootBindingId: input.bindingId,
+                    capturedAt: new Date().toISOString(),
+                    hierarchyHash: nodes.map((node) => `${node.nodeId}:${node.childOrderHash}`).join("|"),
+                    nodes
+                }
+            };
+        }, [{ bindingId, rootSelector, html }]);
+    }
 }
 const runWithElement = async (tabId, selector, action) => {
     const result = await runInTab(tabId, (sel, act) => {
@@ -247,6 +307,60 @@ const runWithElement = async (tabId, selector, action) => {
         if (!el) {
             return { ok: false, error: "Element not found" };
         }
+        const dispatchPointer = (target, type, buttons) => {
+            const rect = target.getBoundingClientRect();
+            const init = {
+                bubbles: true,
+                cancelable: true,
+                composed: true,
+                view: window,
+                clientX: rect.left + rect.width / 2,
+                clientY: rect.top + rect.height / 2,
+                button: 0,
+                buttons
+            };
+            if (typeof PointerEvent === "function") {
+                target.dispatchEvent(new PointerEvent(type, init));
+                return;
+            }
+            target.dispatchEvent(new MouseEvent(type.replace(/^pointer/, "mouse"), init));
+        };
+        const dispatchMouse = (target, type, buttons) => {
+            const rect = target.getBoundingClientRect();
+            target.dispatchEvent(new MouseEvent(type, {
+                bubbles: true,
+                cancelable: true,
+                composed: true,
+                view: window,
+                clientX: rect.left + rect.width / 2,
+                clientY: rect.top + rect.height / 2,
+                button: 0,
+                buttons
+            }));
+        };
+        const dispatchHover = (target) => {
+            dispatchPointer(target, "pointerover", 0);
+            dispatchPointer(target, "pointerenter", 0);
+            dispatchMouse(target, "mouseover", 0);
+            dispatchMouse(target, "mouseenter", 0);
+            dispatchPointer(target, "pointermove", 0);
+            dispatchMouse(target, "mousemove", 0);
+        };
+        const dispatchClick = (target) => {
+            dispatchHover(target);
+            dispatchPointer(target, "pointerdown", 1);
+            dispatchMouse(target, "mousedown", 1);
+            if (target instanceof HTMLElement) {
+                target.focus();
+            }
+            dispatchPointer(target, "pointerup", 0);
+            dispatchMouse(target, "mouseup", 0);
+            if (target instanceof HTMLElement) {
+                target.click();
+                return;
+            }
+            target.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true, composed: true, view: window }));
+        };
         const action = act;
         switch (action.type) {
             case "outerHTML":
@@ -271,11 +385,10 @@ const runWithElement = async (tabId, selector, action) => {
                 }
                 return { ok: true, value: false };
             case "click":
-                el.click();
+                dispatchClick(el);
                 return { ok: true, value: true };
             case "hover": {
-                const event = new MouseEvent("mouseover", { bubbles: true, cancelable: true, view: window });
-                el.dispatchEvent(event);
+                dispatchHover(el);
                 return { ok: true, value: true };
             }
             case "focus":