[FIX] web: ui service: remove leak in tests

Before this commit, the ui service listened to the "change" event
on several MediaQueryList corresponding to specific window sizes.
However, those event handlers were never removed. Whereas this
isn't an issue in production (services are started once and live
forever), this caused a memory leak in tests, where services are
deployed on demand, test by test.

There is no cleanup function for services (since they live forever
by nature). In the test environment, we have a solution for handlers
bound on window (i.e. window.addEventListener), by monkey patching
the function (thanks to the browser object), and automatically
removing all handlers bound during a test, at the end of that test.

This commit fixes the memory leak by no longer using addEventListener
on MediaQueryList (as this is a deprecated feature anyway [1]), and
simply using window (or browser)'s addEventListener instead. This
leak sometimes produced a timeout in the QUnit test suite [2].

[1] https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener
[2] https://runbot.odoo.com/web#id=2374&action=573&model=runbot.build.error&view_type=form&cids=1&menu_id=405

X-original-commit: d86cc5c016cf4eff9a7e4f8b35a9ed38ddc24636
Part-of: odoo/odoo#78698

addons/web/static/src/core/ui/ui_service.js

@@ -4,6 +4,7 @@ import { useEffect, useService } from "@web/core/utils/hooks";
 import { registry } from "@web/core/registry";
 import { debounce } from "@web/core/utils/timing";
 import { BlockUI } from "./block_ui";
+import { browser } from "@web/core/browser/browser";
 
 const { Component, core, hooks } = owl;
 const { EventBus } = core;
@@ -116,7 +117,7 @@ export const uiService = {
         function updateSize() {
             ui.size = getSize();
         }
-        MEDIAS.forEach((media) => media.addEventListener("change", debounce(updateSize, 100)));
+        browser.addEventListener("resize", debounce(updateSize, 100));
 
         Object.assign(ui, {
             size: getSize(),