Closed Bug 1218409 Opened 7 years ago Closed 7 years ago

ESLint rule that checks for balanced addEventListener/removeEventListener and on/off


(DevTools :: General, defect)

Not set


(firefox44 fixed)

Firefox 44
Tracking Status
firefox44 --- fixed


(Reporter: pbro, Assigned: pbro)




(1 file, 1 obsolete file)

It's hard to check by hand when there are many, and I know we do have some added listeners that aren't removed. So at least I would find this rule useful.

We can probably start very simple by just making sure all addEventListener/on have a removeEventListener/off with the same event name without checking objects, callbacks, etc...
We could go further than this, but I believe a simple rule would show a warning/error too, and that's all we need to know something is wrong somewhere.

I'll attach a simple first patch and see what people think.
Mike, what do you think about this?
As the comment at the top of the rule file says, it's simple, but it did already find problems (in style-inspector.js for instance).
Assignee: nobody → pbrosset
Attachment #8678877 - Flags: review?(mratcliffe)
Comment on attachment 8678877 [details] [diff] [review]

Review of attachment 8678877 [details] [diff] [review]:

It would be great if we could add useCapture but I will leave that in your hands.

::: testing/eslint-plugin-mozilla/docs/index.rst
@@ +34,3 @@
>       "mozilla/components-imports": 1,
>       "mozilla/import-headjs-globals": 1,
>       "mozilla/mark-test-function-used": 1,

Nit: I would add this to this block:
"mozilla/balanced-listeners": 2,

::: testing/eslint-plugin-mozilla/lib/rules/balanced-listeners.js
@@ +3,5 @@
> + * addEventListener and an off for each on.
> + * Note that for now, this rule is rather simple in that it only checks that
> + * for each event name there is both an add and remove listener. It doesn't
> + * check that these are called on the right objects or with the same callback
> + * and useCapture arguments.

The function name should be enough but it would be great if we can include useCapture... I guess you know you can use:
var useCapture = node.arguments[2] ? node.arguments[2].value : "";
Attachment #8678877 - Flags: review?(mratcliffe) → review+
Thanks Mike.
This new patch also checks the useCapture flag, and cleans up the warning string (uses {{}} template variables instead of concatenating strings).
Attachment #8678877 - Attachment is obsolete: true
Attachment #8679386 - Flags: review+
Keywords: checkin-needed
Blocks: 1218425
Closed: 7 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 44
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.