From b4de2bd22fb7bc6f29d9f7e0b1ebbcb31526ba73 Mon Sep 17 00:00:00 2001 From: Nicolas Chevobbe Date: Mon, 9 Sep 2019 09:05:08 +0000 Subject: [PATCH] Bug 1579422 - Disconnect FilterBar resize observer when observed node is disconnected. r=jdescottes. Since we don't properly unmount the Console React app, FilterBar's componentWillUnmount is never called. This was where we planned to disconnect the resize observer, but it was in fact never called. So what we do in this patch instead is in the resize observer callback, check if the observed node is connected, and if it's not, we disconnect the resize observer. This prevent the console from dispatching an action, that may slow down closing the console. Differential Revision: https://phabricator.services.mozilla.com/D45006 --HG-- extra : moz-landing-system : lando --- .../webconsole/components/FilterBar/FilterBar.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/devtools/client/webconsole/components/FilterBar/FilterBar.js b/devtools/client/webconsole/components/FilterBar/FilterBar.js index 33e05f8fcf32..7bba041f7f8d 100644 --- a/devtools/client/webconsole/components/FilterBar/FilterBar.js +++ b/devtools/client/webconsole/components/FilterBar/FilterBar.js @@ -134,10 +134,6 @@ class FilterBar extends Component { return false; } - componentWillUnmount() { - this.resizeObserver.disconnect(); - } - /** * Update the boolean state that informs where the filter buttons should be rendered. * If the filter buttons are rendered inline with the filter input and the filter @@ -149,6 +145,14 @@ class FilterBar extends Component { maybeUpdateLayout() { const { dispatch, displayMode } = this.props; + // If we don't have the wrapperNode reference, or if the wrapperNode isn't connected + // anymore, we disconnect the resize observer (componentWillUnmount is never called + // on this component, so we have to do it here). + if (!this.wrapperNode || !this.wrapperNode.isConnected) { + this.resizeObserver.disconnect(); + return; + } + const filterInput = this.wrapperNode.querySelector(".devtools-searchbox"); const { width: filterInputWidth } = filterInput.getBoundingClientRect();