Observer on the side panel?

KartikTalwar / gmail.js

Gmail JavaScript API

MIT License

3.77k stars 458 forks source link

Observer on the side panel? #636

Open ferreiro opened 3 years ago

ferreiro commented 3 years ago

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?

Screen Shot 2021-02-10 at 11 05 06 AM

josteink commented 3 years ago

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 :smiley:

ferreiro commented 3 years ago

@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 commented 3 years ago

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:

https://github.com/KartikTalwar/gmail.js/blob/f5314db1d2e4c40adf6fd8c238b4532c89ba3a08/src/gmail.js#L2462-L2484