Merge mut-observer

Author: corevo

packages/selenium-ide/src/content/record-api.js

@@ -27,6 +27,7 @@ function Recorder(window) {
 }
 
 Recorder.eventHandlers = {};
+Recorder.mutationObservers = {};
 Recorder.addEventHandler = function(handlerName, eventName, handler, options) {
   handler.handlerName = handlerName;
   if (!options) options = false;
@@ -37,6 +38,13 @@ Recorder.addEventHandler = function(handlerName, eventName, handler, options) {
   this.eventHandlers[key].push(handler);
 };
 
+Recorder.addMutationObserver = function(observerName, callback, config) {
+  const observer = new MutationObserver(callback);
+  observer.observerName = observerName;
+  observer.config = config;
+  this.mutationObservers[observerName] = observer;
+};
+
 Recorder.prototype.parseEventKey = function(eventKey) {
   if (eventKey.match(/^C_/)) {
     return { eventName: eventKey.substring(2), capture: true };
@@ -59,6 +67,10 @@ Recorder.prototype.attach = function() {
         this.eventListeners[eventKey].push(handlers[i]);
       }
     }
+    for (let observerName in Recorder.mutationObservers) {
+      const observer = Recorder.mutationObservers[observerName];
+      observer.observe(this.window.document.body, observer.config);
+    }
     this.attached = true;
   }
 };
@@ -72,6 +84,10 @@ Recorder.prototype.detach = function() {
       this.window.document.removeEventListener(eventName, this.eventListeners[eventKey][i], capture);
     }
   }
+  for (let observerName in Recorder.mutationObservers) {
+    const observer = Recorder.mutationObservers[observerName];
+    observer.disconnect();
+  }
   this.eventListeners = {};
   this.attached = false;
 };

packages/selenium-ide/src/content/record.js

@@ -389,21 +389,30 @@ let mouseoutLocator = undefined;
 // © Shuo-Heng Shih, SideeX Team
 Recorder.addEventHandler("mouseOut", "mouseout", function(event) {
   if (mouseoutLocator !== null && event.target === mouseoutLocator) {
-    record("mouseOut", locatorBuilders.buildAll(event.target), '');
+    record("mouseOut", locatorBuilders.buildAll(event.target), "");
   }
   mouseoutLocator = undefined;
 }, true);
 // END
 
-// © Shuo-Heng Shih, SideeX Team
-Recorder.addEventHandler("mouseOver", "DOMNodeInserted", function(event) {
+Recorder.addMutationObserver("DOMNodeInserted", function(mutations) {
   if (pageLoaded === true && window.document.documentElement.getElementsByTagName("*").length > nowNode) {
+    // Get list of inserted nodes from the mutations list to simulate 'DOMNodeInserted'.
+    const insertedNodes = mutations.reduce((nodes, mutation) => {
+      if (mutation.type === "childList") {
+        nodes.push.apply(nodes, mutation.addedNodes);
+      }
+      return nodes;
+    }, []);
+    // If no nodes inserted, just bail.
+    if (!insertedNodes.length) {
+      return;
+    }
+
     if (scrollDetector) {
       //TODO: fix target
       record("runScript", [
-        [
-          ["window.scrollTo(0," + window.scrollY + ")"]
-        ]
+        ["window.scrollTo(0," + window.scrollY + ")" ]
       ], "");
       pageLoaded = false;
       setTimeout(function() {
@@ -419,8 +428,7 @@ Recorder.addEventHandler("mouseOver", "DOMNodeInserted", function(event) {
       mouseoverLocator = undefined;
     }
   }
-}, true);
-// END
+}, { childList: true, subtree: true });
 
 // © Shuo-Heng Shih, SideeX Team
 let readyTimeOut = null;