Observer on the side panel?

[ferreiro]

Hey team!

First, congrats for making this library, it's rock solid and super helpful!

I'm building an extension that adds a custom panel to the sidebar. I got that working by checking every X milliseconds if the sidebar exists, and if so, inject my custom panel. But I wanted to improve that since it's quite inefficient to run those checks (especially at the first load).

Is there any way to accomplish that with your library? If not, are there any ideas/insights on how to do it?

[josteink]

I'm building an extension that adds a custom panel to the sidebar. I got that working by checking every X milliseconds if the sidebar exists, and if so, inject my custom panel. But I wanted to improve that since it's quite inefficient to run those checks (especially at the first load).

Agreed.

Is there any way to accomplish that with your library?

Not currently.

If not, are there any ideas/insights on how to do it?

It's probably more efficient to use Mutation Observers for this, like we do for other DOM-based events.

If you can make that work, feel free to integrate it into the base library as a DOM-observer, and issue a PR 😃

[ferreiro]

@josteink Actually I'd be more than happy if I have that working! Apart from reading the code, do you have any doc/video, etc explaining how does the library work and manages the state?

A couple of questions to understand how the library works:

• I saw that you do the mutation observers, the tricky part about the sidebar is that it only appears if the sidebar is open. Do you create mutation observers for ALL the page, and then filter out the class selector you want to listen to?
• If there is a node that doesn't appear, can you easily detect that with the mutation observers?

[josteink]

I see that we actually do more than use MutationObservers. We also use a DOMNodeInserted-event (via jQuery), and that might be a better fit for this task:

gmail.js/src/gmail.js

Lines 2462 to 2484 in f5314db

	// this listener will check every element inserted into the DOM
	// for specified classes (as defined in api.tracker.dom_observers above) which indicate
	// related actions which need triggering
	$(window.document).on("DOMNodeInserted", function(e) {
	api.tools.insertion_observer(e.target, api.tracker.dom_observers, api.tracker.dom_observer_map);
	});
	// recipient_change also needs to listen to removals
	var mutationObserver = new MutationObserver(function(mutations) {
	for (var i = 0; i < mutations.length; i++) {
	var mutation = mutations[i];
	var removedNodes = mutation.removedNodes;
	for (var j = 0; j < removedNodes.length; j++) {
	var removedNode = removedNodes[j];
	if (removedNode.className === "vR") {
	var observer = api.tracker.dom_observer_map["vR"];
	var handler = api.tracker.dom_observers.recipient_change.handler;
	api.observe.trigger_dom(observer, $(mutation.target), handler);
	}
	}
	}
	});
	mutationObserver.observe(document.body, {subtree: true, childList: true});