1441113 - Can only update a mounted or mounting component when closing Memory Tool

Status: RESOLVED FIXED

(DevTools :: Memory, defect, P2)

Description

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

STR:

1. Open Browser Console.
1. Open Memory Tool.
2. Close the DevTools Toolbox.

What happens:
"The following will be displayed in the browser console:
Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op.

Please check the code for the ToolboxController component."

Why does this happen?
Because the toolbox is closing the focus changes to the toolbox buttons and triggers this error.

There are two solutions:

1. Remove button focus listeners on toolbox teardown.
2. Use a mounted flag inside `devtools/client/framework/components/toolbox-controller.js`.

Comment 1

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

In the end I chose option 3: Avoid the code smell and work out why we are trying to access a component when it is no longer mounted.

The onclick handler of the toolbox close button looked like this... spot the deliberate mistake:

```
onClick: () => {
  closeToolbox();
  focusButton(closeButtonId);
},
```

So we were closing the toolbox and then trying to focus the toolbox's close button.

There is also an obvious race condition with setState inside the toolbox controller not using a callback even though the next line calls a function that uses this.state, which could cause intermittent issues.

Comment 2

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Attachment: Bug 1441113 - Can only update a mounted or mounting component when closing Memory Tool

The onclick handler of the toolbox close button looked like this... spot the deliberate mistake:

```
onClick: () => {
  closeToolbox();
  focusButton(closeButtonId);
},
```

So we were closing the toolbox and then trying to focus the toolbox's close button.

There is also an obvious race condition with setState inside the toolbox controller not using a callback even though the next line calls a function that uses this.state, which could cause intermittent issues.

Review commit: https://reviewboard.mozilla.org/r/223120/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/223120/

Comment 3

[Nicolas Chevobbe [:nchevobbe]]

Comment on attachment 8953967 [details]
Bug 1441113 - Can only update a mounted or mounting component when closing Memory Tool

https://reviewboard.mozilla.org/r/223120/#review229050

Looks good, thanks Mike

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/c527412fc7de
Can only update a mounted or mounting component when closing Memory Tool r=nchevobbe

Comment 5

[Tiberius Oros[:tiberius_oros]]

https://hg.mozilla.org/mozilla-central/rev/c527412fc7de