feat: support watch inline style changes.

andycall · andycall · commit c5268203fa53 · 2023-11-13T12:56:18.000+08:00
diff --git a/bridge/bindings/qjs/microtask_queue.cc b/bridge/bindings/qjs/microtask_queue.cc
@@ -24,4 +24,8 @@ void MicrotaskQueue::EnqueueMicrotask(webf::MicrotaskCallback callback, void* da
   queue_.emplace_back(std::move(queue_item));
 }
 
+bool MicrotaskQueue::empty() {
+  return queue_.size() == 0;
+}
+
 }
diff --git a/bridge/bindings/qjs/microtask_queue.h b/bridge/bindings/qjs/microtask_queue.h
@@ -22,6 +22,7 @@ class MicrotaskQueue final {
 
   void DrainMicrotaskQueue();
   void EnqueueMicrotask(MicrotaskCallback callback, void* data = nullptr);
+  bool empty();
 
  private:
 
diff --git a/bridge/core/css/inline_css_style_declaration.cc b/bridge/core/css/inline_css_style_declaration.cc
@@ -8,6 +8,9 @@
 #include "core/executing_context.h"
 #include "core/html/parser/html_parser.h"
 #include "css_property_list.h"
+#include "core/dom/mutation_observer_interest_group.h"
+#include "html_names.h"
+#include "element_namespace_uris.h"
 
 namespace webf {
 
@@ -153,6 +156,8 @@ void InlineCssStyleDeclaration::setCssText(const std::string& css_text, webf::Ex
       InternalSetProperty(css_key, AtomicString(ctx(), css_value));
     }
   }
+
+  InlineStyleChanged();
 }
 
 void InlineCssStyleDeclaration::Trace(GCVisitor* visitor) const {
@@ -173,6 +178,18 @@ std::string InlineCssStyleDeclaration::ToString() const {
   return s;
 }
 
+void InlineCssStyleDeclaration::InlineStyleChanged() {
+  assert(owner_element_->IsStyledElement());
+
+  if (std::shared_ptr<MutationObserverInterestGroup> recipients =
+          MutationObserverInterestGroup::CreateForAttributesMutation(
+              *owner_element_, html_names::kStyleAttr)) {
+    AtomicString old_value;
+    recipients->EnqueueMutationRecord(MutationRecord::CreateAttributes(
+        owner_element_, html_names::kStyleAttr, element_namespace_uris::khtml, old_value));
+  }
+}
+
 bool InlineCssStyleDeclaration::NamedPropertyQuery(const AtomicString& key, ExceptionState&) {
   return cssPropertyList.count(key.ToStdString(ctx())) > 0;
 }
@@ -199,8 +216,12 @@ bool InlineCssStyleDeclaration::InternalSetProperty(std::string& name, const Ato
     return true;
   }
 
+  AtomicString old_value = properties_[name];
+
   properties_[name] = value;
 
+  InlineStyleChanged();
+
   std::unique_ptr<SharedNativeString> args_01 = stringToNativeString(name);
   GetExecutingContext()->uiCommandBuffer()->addCommand(
       UICommand::kSetStyle, std::move(args_01), owner_element_->bindingObject(), value.ToNativeString(ctx()).release());
@@ -218,6 +239,8 @@ AtomicString InlineCssStyleDeclaration::InternalRemoveProperty(std::string& name
   AtomicString return_value = properties_[name];
   properties_.erase(name);
 
+  InlineStyleChanged();
+
   std::unique_ptr<SharedNativeString> args_01 = stringToNativeString(name);
   GetExecutingContext()->uiCommandBuffer()->addCommand(UICommand::kSetStyle, std::move(args_01),
                                                        owner_element_->bindingObject(), nullptr);
diff --git a/bridge/core/css/inline_css_style_declaration.h b/bridge/core/css/inline_css_style_declaration.h
@@ -36,6 +36,8 @@ class InlineCssStyleDeclaration : public CSSStyleDeclaration {
 
   [[nodiscard]] std::string ToString() const;
 
+  void InlineStyleChanged();
+
   bool NamedPropertyQuery(const AtomicString&, ExceptionState&) override;
   void NamedPropertyEnumerator(std::vector<AtomicString>& names, ExceptionState&) override;
 
diff --git a/bridge/core/dom/mutation_observer.cc b/bridge/core/dom/mutation_observer.cc
@@ -64,6 +64,7 @@ class MutationObserverAgent {
 
  private:
   void DeliverMutations() {
+    MemberMutationScope scopes{context_};
     // These steps are defined in DOM Standard's "notify mutation observers".
     // https://dom.spec.whatwg.org/#notify-mutation-observers
     MutationObserverVector observers(active_mutation_observers_.begin(), active_mutation_observers_.end());
@@ -144,10 +145,10 @@ void MutationObserver::observe(Node* node, const std::shared_ptr<MutationObserve
                          observer_init->hasCharacterDataOldValue()))
     options |= kMutationTypeCharacterData;
 
-  if (observer_init->childList())
+  if (observer_init->hasChildList() && observer_init->childList())
     options |= kMutationTypeChildList;
 
-  if (observer_init->subtree())
+  if (observer_init->hasSubtree() && observer_init->subtree())
     options |= kSubtree;
 
   if (!(options & kMutationTypeAttributes)) {
diff --git a/bridge/core/dom/node_test.cc b/bridge/core/dom/node_test.cc
@@ -28,6 +28,55 @@ TEST(Node, appendChild) {
   EXPECT_EQ(logCalled, true);
 }
 
+TEST(Node, MutationObserver) {
+  bool static errorCalled = false;
+  bool static logCalled = false;
+  webf::WebFPage::consoleMessageHandler = [](void* ctx, const std::string& message, int logLevel) {
+    logCalled = true;
+  };
+  auto env = TEST_init([](int32_t contextId, const char* errmsg) { errorCalled = true; });
+  auto context = env->page()->GetExecutingContext();
+  const char* code = R"(
+const container = document.createElement('div');
+document.body.appendChild(container);
+
+// Callback function to execute when mutations are observed
+const callback = function (mutationList, observer) {
+  console.log('c');
+};
+
+// Create an observer instance linked to the callback function
+const observer = new MutationObserver(callback);
+
+// Options for the observer (which mutations to observe)
+const config = { attributes: true, childList: true, subtree: true, attributeOldValue: true };
+
+// Start observing the target node for configured mutations
+observer.observe(container, config);
+
+container.appendChild(document.createTextNode('TEXT'));
+
+Promise.resolve().then(() => {
+  console.log('1234');
+  container.appendChild(document.createTextNode('TEXT'));
+  Promise.resolve().then(() => {
+      console.log('444');
+      container.removeChild(container.firstChild);
+      Promise.resolve().then(() => {
+        console.log('555');
+      });
+  });
+});
+)";
+  env->page()->evaluateScript(code, strlen(code), "vm://", 0);
+
+  TEST_runLoop(context);
+
+  EXPECT_EQ(errorCalled, false);
+  EXPECT_EQ(logCalled, true);
+}
+
+
 TEST(Node, nodeName) {
   bool static errorCalled = false;
   bool static logCalled = false;
diff --git a/bridge/core/executing_context.cc b/bridge/core/executing_context.cc
@@ -267,8 +267,11 @@ void ExecutingContext::ReportError(JSValueConst error) {
 }
 
 void ExecutingContext::DrainMicrotasks() {
+  if (is_draining_microtasks_) return;
+  is_draining_microtasks_ = true;
   microtask_queue_->DrainMicrotaskQueue();
   DrainPendingPromiseJobs();
+  is_draining_microtasks_ = false;
 }
 
 void ExecutingContext::EnqueueMicrotask(MicrotaskCallback callback, void* data) {
@@ -280,6 +283,12 @@ void ExecutingContext::DrainPendingPromiseJobs() {
   JSContext* pctx;
   int finished = JS_ExecutePendingJob(script_state_.runtime(), &pctx);
   while (finished != 0) {
+    bool is_microtask_empty = microtask_queue_->empty();
+
+    if (!is_microtask_empty) {
+      microtask_queue_->DrainMicrotaskQueue();
+    }
+
     finished = JS_ExecutePendingJob(script_state_.runtime(), &pctx);
     if (finished == -1) {
       break;
diff --git a/bridge/core/executing_context.h b/bridge/core/executing_context.h
@@ -197,6 +197,7 @@ class ExecutingContext {
   MemberMutationScope* active_mutation_scope{nullptr};
   std::set<ScriptWrappable*> active_wrappers_;
   std::unique_ptr<MicrotaskQueue> microtask_queue_ = std::make_unique<MicrotaskQueue>();
+  bool is_draining_microtasks_ = false;
 };
 
 class ObjectProperty {

Original file line number	Diff line number	Diff line change
`@@ -24,4 +24,8 @@ void MicrotaskQueue::EnqueueMicrotask(webf::MicrotaskCallback callback, void* da`
`24`	`24`	`queue_.emplace_back(std::move(queue_item));`
`25`	`25`	`}`
`26`	`26`
	`27`	`+bool MicrotaskQueue::empty() {`
	`28`	`+ return queue_.size() == 0;`
	`29`	`+}`
	`30`	`+`
`27`	`31`	`}`