Remove listeners from <amp-facebook*> components when they aren't visible

[nainar]

Part of #14761

[jridgewell]

You also have to remove its assignments.

[nainar]

Removed the later assignments as well.

[cvializ]

Shouldn't we call this.unlistenMessage_ in unlayoutCallback, like amp-3q-player does, instead of deleting it?

amphtml/extensions/amp-3q-player/0.1/amp-3q-player.js

Lines 110 to 117 in ab76625

	unlayoutCallback() {
	if (this.iframe_) {
	removeElement(this.iframe_);
	this.iframe_ = null;
	}
	if (this.unlistenMessage_) {
	this.unlistenMessage_();
	}

[cvializ]

(question above)

[nainar]

Hmm yeah, all other components follow the same pattern, what value does calling it add though? We are already listening for messages.

[cvializ]

unlayoutCallback is a hook so components can free up any expensive browser resources when they aren't visible. Listeners are one kind of resource that isn't needed when the component isn't visible. The iframe message callbacks here don't need to run if e.g. the user swipes to another document in the viewer, and calling this.unlistenMessage_ will cleanup that listener.

amphtml/src/base-element.js

Lines 503 to 511 in 08c581f

	/**
	* Requests the element to unload any expensive resources when the element
	* goes into non-visible state. The scope is up to the actual component.
	* The component must return `true` if it'd like to later receive
	* {@link layoutCallback} in case document becomes active again.
	*
	* @return {boolean}
	*/
	unlayoutCallback() {

I think it is a case-by-case decision which resources to clean up though. If you decide that cleaning up this particular listener is unnecessary when the document is not visible, then feel free to disregard.

[nainar]

@cvializ,
Your suggestion definitely makes sense. Thanks for the explainer :) Made the changes and edited the title of the PR as well. PTAL?