In my trials and tribulations to detect when a field has been autofilled, I need to create a shim for monitorEvents so that I can see the event life-cycle of that element and ultimately try to debug it.

One thing that I found is that monitorEvents requires an element but for what I am doing I know that there will be an element with an id at some point but I don’t know when it will be created.

I quickly knocked out a small function called waitForElement that uses the MutationObserver to look for when an element with a given id is added to the DOM. When that element has been detected it will resolve the promise and return the element.

The code is as follows:

function waitForElement(selector) {
  return new Promise(function(resolve, reject) {
    var element = document.querySelector(selector);

    if(element) {
      resolve(element);
      return;
    }

    var observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        var nodes = Array.from(mutation.addedNodes);
        for(var node of nodes) {
          if(node.matches && node.matches(selector)) {
            observer.disconnect();
            resolve(node);
            return;
          }
        };
      });
    });

    observer.observe(document.documentElement, { childList: true, subtree: true });
  });
}

Here is the gist if that is your bag.

It is pretty simple to use this simple API.

waitForElement("#test").then(function(element) {
    console.log("Element Added", element);
});

Now combining in the monitorEvents function from my previous post, I can now set a breakpoint early in the life-cycle of a page (because scripts in the head block) and set up a waitForElement call that can now start logging all the events that are firing on that element.

waitForElement("#test").then(function(element) {
    monitorEvents(element);
});

Technically I still haven’t solved the issue of “how can you tell when Firefox has autocompleted fields” but I have the tools at my disposal.

Pretty chuffed.