buninu-browser 0.7.0 → 0.9.1

package/lib/renderer/bindings.js

@@ -1,3 +1,6 @@
+import {animationProperty} from '../style/animation-values.js';
+import {inputFiles} from './file-input.js';
+import { DataTransfer, dragData, dragEvent, isDraggable } from './html-drag.js';
 /**
  * DOM bindings: the only view page scripts get of the document.
  *
@@ -227,7 +230,7 @@ export class BindingRealm {
     if (!wrapper) {
       wrapper = new EventBinding(CONSTRUCT, event, this, detail);
       if (this.eventPrototype) {
-        const prototype = this.eventPrototypes?.get(this.#messages.has(event) ? "MessageEvent" : event.constructor?.name) ?? this.eventPrototype;
+        const prototype = this.eventPrototypes?.get(this.#messages.has(event) ? "MessageEvent" : dragData(event) !== undefined ? "DragEvent" : event.constructor?.name) ?? this.eventPrototype;
         Object.setPrototypeOf(wrapper, prototype);
         // isTrusted is [LegacyUnforgeable]: an own accessor of every event.
         const isTrusted = Object.getOwnPropertyDescriptor(EventBinding.prototype, "isTrusted");
@@ -525,6 +528,7 @@ class NodeBinding {
   dispatchEvent(event) {
     const real = EventBinding.unwrap(event);
     if (!real) throw new TypeError("dispatchEvent requires an Event");
+    this.#realm.hooks.prepareEvent?.(this.#node, real.type);
     return this.#node.dispatchEvent(real);
   }
 }
@@ -821,7 +825,11 @@ class ElementBinding extends ParentBinding {
   }
 
   get classList() {
-    this.#classList ??= new ClassListBinding(CONSTRUCT, nodeOf(this), realmOf(this));
+    if (!this.#classList) {
+      const realm=realmOf(this);
+      this.#classList=new ClassListBinding(CONSTRUCT,nodeOf(this),realm);
+      if(realm.tokenListPrototype)Object.setPrototypeOf(this.#classList,realm.tokenListPrototype);
+    }
     return this.#classList;
   }
 
@@ -1061,6 +1069,8 @@ class ElementBinding extends ParentBinding {
     inserted(this, list);
   }
 
+  get files(){return inputFiles(nodeOf(this));}
+  showPicker(){const e=nodeOf(this);if(e.disabled)throw new DOMException('The input is disabled','InvalidStateError');realmOf(this).hooks.pickFile?.(e);}
   click() {
     const realm = realmOf(this);
     const element = nodeOf(this);
@@ -1072,6 +1082,7 @@ class ElementBinding extends ParentBinding {
     this.#clickInProgress = true;
     try {
       element.dispatchEvent(event);
+      if (!event.defaultPrevented) realm.hooks.pickFile?.(element);
       if (!event.defaultPrevented && anchor?.hasAttribute("href")) realm.hooks.activateLink?.(anchor);
     } finally {
       this.#clickInProgress = false;
@@ -1112,7 +1123,7 @@ class ElementBinding extends ParentBinding {
     if(!arguments.length)throw new TypeError('setRangeText requires replacement');
     nodeOf(this).setRangeText(String(replacement),...args.map((v,i)=>i<2?Number(v):String(v)));touch(this);
   }
-  select() {nodeOf(this).select();touch(this);}
+  select() {const node=nodeOf(this);node.focus();node.select();touch(this);}
 
   setCustomValidity(message) {
     if (!arguments.length) throw new TypeError("setCustomValidity requires a message");
@@ -1137,6 +1148,9 @@ class ElementBinding extends ParentBinding {
     if (node.ownerDocument.activeElement !== previous) touch(this, [":focus", ":focus-visible"]);
   }
 
+  get draggable() { return isDraggable(nodeOf(this)); }
+  set draggable(value) { nodeOf(this).setAttribute('draggable',Boolean(value) ? 'true' : 'false'); touch(this); }
+
   getBoundingClientRect() {
     const rect = realmOf(this).hooks.boundsOf(nodeOf(this)) ?? { left: 0, top: 0, width: 0, height: 0 };
     return domRect(rect);
@@ -1378,6 +1392,7 @@ function isMedia(wrapper) {
 
 /** on* event handler properties (element.onclick = fn, script.onload = fn). */
 export const EVENT_HANDLER_NAMES = Object.freeze([
+  "dragstart", "drag", "dragenter", "dragleave", "dragover", "drop", "dragend", "pointercancel",
   "click", "auxclick", "dblclick", "mousedown", "mouseup", "mousemove", "mouseover", "mouseout", "mouseenter", "mouseleave",
   "keydown", "keyup", "keypress", "beforeinput", "input", "change", "submit", "reset", "focus", "blur", "load", "error",
   "abort", "scroll", "resize", "wheel", "contextmenu", "touchstart", "touchend", "touchmove",
@@ -1394,11 +1409,13 @@ export function defineEventHandlerProperty(object, type, targetOf, realmFor) {
     configurable: true,
     enumerable: true,
     get() {
+      realmFor(this).hooks.prepareHandler?.(targetOf(this), type);
       return handlers.get(this)?.handler ?? null;
     },
     set(value) {
       const realm = realmFor(this);
       const target = targetOf(this);
+      realm.hooks.prepareHandler?.(target, type);
       const previous = handlers.get(this);
       if (previous) target.removeEventListener(type, previous.listener);
       handlers.delete(this);
@@ -1427,6 +1444,10 @@ for (const property of REFLECTED_PROPERTIES) {
     get() {
       const node = nodeOf(this);
       const value = node[property];
+      if (property === "value" && node.tagName === "INPUT" && node.type === "file") {
+        const file = inputFiles(node)[0];
+        return file ? "C:\\fakepath\\" + file.name : "";
+      }
       if (typeof value === "string" && ["src", "href", "action", "poster"].includes(property)) {
         const attribute = node.getAttribute(property);
         if (property === "action" && !attribute) return node.ownerDocument.URL;
@@ -1531,6 +1552,15 @@ class DocumentBinding extends ParentBinding {
     return realm.wrap(node === realm.window.document && realm.hooks.body ? realm.hooks.body() : node.body);
   }
 
+  execCommand(command, _showUI = false, _value = null) {
+    return Boolean(realmOf(this).hooks.execCommand?.(String(command).toLowerCase()));
+  }
+
+  queryCommandSupported(command) { return String(command).toLowerCase() === 'copy'; }
+  queryCommandEnabled(command) {
+    return this.queryCommandSupported(command) && Boolean(realmOf(this).hooks.copyEnabled?.());
+  }
+
   get title() {
     return nodeOf(this).title;
   }
@@ -1853,11 +1883,15 @@ class EventBinding {
   }
 
   get offsetX() {
-    return this.#event.offsetX ?? 0;
+    // CSSOM View: relative to the target padding edge while dispatching;
+    // outside dispatch offsetX/Y fall back to pageX/Y (also for synthetic events).
+    if (!this.#event.eventPhase) return this.pageX;
+    return this.#realm.hooks.mouseOffset?.(this.#event.target, this.clientX, this.clientY)?.x ?? this.pageX;
   }
 
   get offsetY() {
-    return this.#event.offsetY ?? 0;
+    if (!this.#event.eventPhase) return this.pageY;
+    return this.#realm.hooks.mouseOffset?.(this.#event.target, this.clientX, this.clientY)?.y ?? this.pageY;
   }
 
   get movementX() {
@@ -1868,6 +1902,8 @@ class EventBinding {
     return this.#event.movementY ?? 0;
   }
 
+  get dataTransfer() { return dragData(this.#event) ?? null; }
+
   get relatedTarget() {
     return this.#realm.wrap(this.#event.relatedTarget ?? null) ?? null;
   }
@@ -1918,6 +1954,10 @@ class EventBinding {
     return typeof this.#event.newURL === "string" ? this.#event.newURL : undefined;
   }
 
+  get animationName() { return this.#event.animationName ?? ""; }
+  get elapsedTime() { return this.#event.elapsedTime ?? 0; }
+  get pseudoElement() { return this.#event.pseudoElement ?? ""; }
+
   get key() {
     return this.#event.key;
   }
@@ -2409,17 +2449,17 @@ export function cssStyleDeclarationInterface(realm) {
     get cssFloat() { return styleState(this).style.getPropertyValue("float"); },
     set cssFloat(value) { this.setProperty("float", value); },
     item(index) { return styleState(this).style.item?.(Number(index) >>> 0) ?? ""; },
-    getPropertyValue(property) { return styleState(this).style.getPropertyValue(String(property)); },
-    getPropertyPriority(property) { return styleState(this).style.getPropertyPriority?.(String(property)) ?? ""; },
+    getPropertyValue(property) { return styleState(this).style.getPropertyValue(animationProperty(property)); },
+    getPropertyPriority(property) { return styleState(this).style.getPropertyPriority?.(animationProperty(property)) ?? ""; },
     setProperty(property, value, priority = "") {
       const { style, node, realm: owner } = styleState(this);
       const before = style.cssText;
-      style.setProperty(String(property), value === null ? "" : String(value), String(priority));
+      style.setProperty(animationProperty(property), value === null ? "" : String(value), String(priority));
       if (style.cssText !== before) owner.hooks.touch(node);
     },
     removeProperty(property) {
       const { style, node, realm: owner } = styleState(this);
-      const previous = style.removeProperty(String(property));
+      const previous = style.removeProperty(animationProperty(property));
       owner.hooks.touch(node);
       return previous;
     },
@@ -2443,8 +2483,7 @@ export function cssStyleDeclarationInterface(realm) {
 function styleBinding(node, realm) {
   const style = node.style;
   const prototype = cssStyleDeclarationInterface(realm).prototype;
-  const toKebab = (property) => property.startsWith("--") ? property
-    : property.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+  const toKebab = (property) => property.startsWith("--") ? property : animationProperty(property);
   const proxy = new Proxy(Object.create(prototype), {
     get(target, property, receiver) {
       if (typeof property !== "string" || property in prototype) return Reflect.get(target, property, receiver);
@@ -2460,6 +2499,8 @@ function styleBinding(node, realm) {
     },
     has: (_target, property) => {
       if (typeof property !== "string") return property in prototype;
+      const normalized = animationProperty(property);
+      if(/^animation(?:-(?:name|duration|delay|iteration-count|direction|fill-mode|play-state|timing-function))?$/.test(normalized))return normalized in style || normalized.replace(/-([a-z])/g, (_,letter)=>letter.toUpperCase()) in style;
       const camel = property.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
       return property in prototype || (property in style && !UNRENDERED_STYLE_PROPERTIES.has(camel));
     },
@@ -2779,8 +2820,10 @@ const MOUSE_MEMBERS = ["screenX", "screenY", "clientX", "clientY", "pageX", "pag
 /** Event interface → [parent interface, members it owns], parents first. */
 const EVENT_INTERFACES = {
   CustomEvent: ["Event", ["detail", "initCustomEvent"]],
+  AnimationEvent: ["Event", ["animationName", "elapsedTime", "pseudoElement"]],
   UIEvent: ["Event", ["detail", "view", "which", "initUIEvent"]],
   MouseEvent: ["UIEvent", MOUSE_MEMBERS],
+  DragEvent: ["MouseEvent", ["dataTransfer"]],
   PointerEvent: ["MouseEvent", ["pointerType"]],
   WheelEvent: ["MouseEvent", ["deltaX", "deltaY", "deltaMode"]],
   KeyboardEvent: ["UIEvent", ["key", "code", "keyCode", "charCode", "repeat", ...MODIFIERS]],
@@ -2797,11 +2840,11 @@ const CREATE_EVENT_TYPES = new Map([["event", "Event"], ["events", "Event"], ["h
   ["mouseevents", "MouseEvent"], ["keyboardevent", "KeyboardEvent"], ["focusevent", "FocusEvent"],
   ["messageevent", "MessageEvent"], ["hashchangeevent", "HashChangeEvent"], ["popstateevent", "PopStateEvent"]]);
 
-const UI_EVENT_TYPES = ["UIEvent", "MouseEvent", "PointerEvent", "WheelEvent", "KeyboardEvent", "FocusEvent", "InputEvent"];
+const UI_EVENT_TYPES = ["AnimationEvent", "UIEvent", "MouseEvent", "PointerEvent", "WheelEvent", "KeyboardEvent", "FocusEvent", "InputEvent"];
 const UI_EVENT_FIELDS = [
   ...["detail", "clientX", "clientY", "screenX", "screenY", "button", "buttons", "deltaX", "deltaY", "deltaZ", "deltaMode",
-    "pointerId", "width", "height", "pressure", "location", "keyCode", "which", "charCode"].map((key) => [key, Number]),
-  ...["key", "code", "data", "inputType", "pointerType"].map((key) => [key, String]),
+    "pointerId", "width", "height", "pressure", "location", "keyCode", "which", "charCode", "elapsedTime"].map((key) => [key, Number]),
+  ...["key", "code", "data", "inputType", "pointerType", "animationName", "pseudoElement"].map((key) => [key, String]),
   ...["ctrlKey", "altKey", "shiftKey", "metaKey", "repeat", "isComposing", "isPrimary"].map((key) => [key, Boolean]),
 ];
 
@@ -2854,7 +2897,17 @@ export function eventConstructors(realm) {
   Object.defineProperty(CustomEvent.prototype, "constructor", { value: CustomEvent, writable: true, configurable: true });
   // UI event subclasses: their init dictionaries are copied as primitives only
   // (view and relatedTarget are dropped).
-  const uiEvents = {};
+  function DragEvent(type, options = {}) {
+    if (!new.target) throw new TypeError("Constructor DragEvent requires 'new'");
+    const data=options?.dataTransfer ?? null;
+    if(data!==null && !(data instanceof DataTransfer))throw new TypeError("Invalid dataTransfer");
+    const fields={...init(options)};
+    for(const [key,coerce] of UI_EVENT_FIELDS)if(options?.[key]!==undefined)fields[key]=coerce(options[key]);
+    return realm.wrapEvent(dragEvent(window,String(type),fields,data));
+  }
+  DragEvent.prototype=realm.eventPrototypes.get('DragEvent');
+  Object.defineProperty(DragEvent.prototype,'constructor',{value:DragEvent,writable:true,configurable:true});
+  const uiEvents = {DragEvent,DataTransfer};
   for (const name of UI_EVENT_TYPES) {
     const RealEvent = window[name];
     if (typeof RealEvent !== "function") continue;
@@ -2936,7 +2989,7 @@ function cssEscape(value) {
  * Must run after SES lockdown() (which provides `harden`).
  */
 const BINDINGS = [NodeBinding, CharacterDataBinding, TextBinding, ParentBinding, FragmentBinding, ShadowRootBinding, ElementBinding,
-  DocumentBinding, EventBinding, ClassListBinding, TreeWalkerBinding, NodeIteratorBinding, RangeBinding];
+  DocumentBinding, EventBinding, DataTransfer, ClassListBinding, TreeWalkerBinding, NodeIteratorBinding, RangeBinding];
 
 // Members defined with Object.defineProperty({ get() {...} }) are named
 // "get"; Web IDL names an attribute's accessors "get x" / "set x" and an