[IMP] web: refactor debug commands

Rename `Debug Menu` => `Debug tools...`
Remove `Debug tools...` hotkey

The commands in the debug category need to have a search value
to be displayed.

Task-id: 2622240
Part-of: odoo/odoo#74933

addons/web/static/src/core/debug/debug_context.js

@@ -60,25 +60,13 @@ class DebugContext {
     }
 }
 
-let currentDebugContext;
 const debugContextSymbol = Symbol("debugContext");
 export function createDebugContext(env, { categories = [] } = {}) {
     return { [debugContextSymbol]: new DebugContext(env, categories) };
 }
 
 export function useOwnDebugContext({ categories = [] } = {}) {
-    const oldDebugContext = currentDebugContext;
-    const newDebugContext = createDebugContext(useEnv(), { categories });
-    useSubEnv(newDebugContext);
-    useEffect(
-        () => {
-            currentDebugContext = newDebugContext[debugContextSymbol];
-            return () => {
-                currentDebugContext = oldDebugContext;
-            };
-        },
-        () => []
-    );
+    useSubEnv(createDebugContext(useEnv(), { categories }));
 }
 
 export function useEnvDebugContext() {
@@ -89,10 +77,6 @@ export function useEnvDebugContext() {
     return debugContext;
 }
 
-export function getCurrentDebugContext() {
-    return currentDebugContext;
-}
-
 export function useDebugCategory(category, context = {}) {
     const debugContext = useEnvDebugContext();
     useEffect(

addons/web/static/src/core/debug/debug_menu.js

@@ -1,5 +1,7 @@
 /** @odoo-module **/
 
+import { useService } from "@web/core/utils/hooks";
+import { useCommand } from "@web/webclient/commands/command_hook";
 import { useEnvDebugContext } from "./debug_context";
 
 const { Component } = owl;
@@ -11,6 +13,48 @@ export class DebugMenu extends Component {
         this.getElements = async () => {
             this.elements = await debugContext.getItems(this.env);
         };
+        this.command = useService("command");
+        useCommand(
+            this.env._t("Debug tools..."),
+            async () => {
+                const items = await debugContext.getItems(this.env);
+                let index = 0;
+                const defaultCategories = items
+                    .filter((item) => item.type === "separator")
+                    .map(() => (index += 1));
+                const provider = {
+                    async provide() {
+                        const categories = [...defaultCategories];
+                        let category = categories.shift();
+                        const result = [];
+                        items.forEach((item) => {
+                            if (item.type === "item") {
+                                result.push({
+                                    name: item.description.toString(),
+                                    action: item.callback,
+                                    category,
+                                });
+                            } else if (item.type === "separator") {
+                                category = categories.shift();
+                            }
+                        });
+                        return result;
+                    },
+                };
+                const commandPaletteConfig = {
+                    categoriesByNamespace: {
+                        default: defaultCategories,
+                    },
+                    emptyMessageByNamespace: { default: "No commands found" },
+                    placeholder: this.env._t("Choose a debug command..."),
+                    providers: [provider],
+                };
+                return this.command.openPalette(commandPaletteConfig);
+            },
+            {
+                category: "debug",
+            }
+        );
     }
 }
 DebugMenu.template = "web.DebugMenu";

addons/web/static/src/core/debug/debug_providers.js

@@ -3,12 +3,11 @@
 import { registry } from "../registry";
 import { browser } from "../browser/browser";
 import { routeToUrl } from "../browser/router_service";
-import { getCurrentDebugContext } from "./debug_context";
 
 const commandProviderRegistry = registry.category("command_provider");
 
 commandProviderRegistry.add("debug", {
-    provide: (env) => {
+    provide: (env, options) => {
         const result = [];
         if (env.services.user.isAdmin) {
             if (env.debug) {
@@ -19,35 +18,18 @@ commandProviderRegistry.add("debug", {
                         browser.location.href = browser.location.origin + routeToUrl(route);
                     },
                     category: "debug",
-                    name: "Deactivate debug mode",
-                });
-                result.push({
-                    action() {
-                        return {
-                            placeHolder: "Choose a debug action...",
-                            provide: async (env) => {
-                                const debugContext = getCurrentDebugContext();
-                                const items = await debugContext.getItems(env);
-                                return items
-                                    .filter((item) => item.type === "item")
-                                    .map((item) => ({
-                                        action: item.callback,
-                                        name: item.description,
-                                    }));
-                            },
-                        };
-                    },
-                    category: "debug",
-                    name: "Debug menu",
+                    name: env._t("Deactivate debug mode"),
                 });
             } else {
-                result.push({
-                    action() {
-                        browser.location.search = "?debug=assets";
-                    },
-                    category: "debug",
-                    name: "Activate debug mode",
-                });
+                if (options.searchValue.toLowerCase() === "debug") {
+                    result.push({
+                        action() {
+                            browser.location.search = "?debug=assets";
+                        },
+                        category: "debug",
+                        name: env._t("Activate debug mode"),
+                    });
+                }
             }
         }
         return result;

addons/web/static/tests/core/debug/debug_manager_tests.js

@@ -11,7 +11,11 @@ import { ActionDialog } from "@web/webclient/actions/action_dialog";
 import { hotkeyService } from "@web/core/hotkeys/hotkey_service";
 import { registerCleanup } from "../../helpers/cleanup";
 import { makeTestEnv, prepareRegistriesWithCleanup } from "../../helpers/mock_env";
-import { makeFakeDialogService, makeFakeLocalizationService } from "../../helpers/mock_services";
+import {
+    fakeCommandService,
+    makeFakeDialogService,
+    makeFakeLocalizationService,
+} from "../../helpers/mock_services";
 import { click, getFixture, legacyExtraNextTick, patchWithCleanup } from "../../helpers/utils";
 import { createWebClient, doAction, getActionManagerServerData } from "../../webclient/helpers";
 import { openViewItem } from "@web/webclient/debug_items";
@@ -40,7 +44,9 @@ QUnit.module("DebugMenu", (hooks) => {
             .add("hotkey", hotkeyService)
             .add("ui", uiService)
             .add("orm", ormService)
-            .add("dialog", makeFakeDialogService());
+            .add("dialog", makeFakeDialogService())
+            .add("localization", makeFakeLocalizationService())
+            .add("command", fakeCommandService);
         const mockRPC = async (route, args) => {
             if (args.method === "check_access_rights") {
                 return Promise.resolve(true);
@@ -274,7 +280,6 @@ QUnit.module("DebugMenu", (hooks) => {
                 reload: () => assert.step("reloadPage"),
             },
         });
-        registry.category("services").add("localization", makeFakeLocalizationService());
         debugRegistry.category("default").add("regenerateAssets", regenerateAssets);
         const env = await makeTestEnv(testConfig);
         const debugManager = await mount(DebugMenuParent, { env, target });

addons/web/static/tests/webclient/helpers.js

@@ -43,6 +43,7 @@ import Widget from "web.Widget";
 import { userService } from "@web/core/user_service";
 import { uiService } from "@web/core/ui/ui_service";
 import { ClientActionAdapter, ViewAdapter } from "@web/legacy/action_adapters";
+import { commandService } from "@web/webclient/commands/command_service";
 
 const { Component, mount, tags } = owl;
 
@@ -58,6 +59,7 @@ const serviceRegistry = registry.category("services");
 export function setupWebClientServiceRegistry() {
     const services = {
         action: () => actionService,
+        command: () => commandService,
         dialog: () => dialogService,
         effect: () => effectService,
         hotkey: () => hotkeyService,

addons/web_tour/static/tests/debug_manager_tests.js

@@ -12,6 +12,7 @@ import { registerCleanup } from "@web/../tests/helpers/cleanup";
 import { makeTestEnv } from "@web/../tests/helpers/mock_env";
 import { makeFakeLocalizationService } from "@web/../tests/helpers/mock_services";
 import { DebugMenuParent } from "@web/../tests/core/debug/debug_manager_tests";
+import { fakeCommandService } from "@web/../tests/helpers/mock_services";
 
 const { mount } = owl;
 
@@ -29,7 +30,8 @@ QUnit.module("Tours", (hooks) => {
             .add("hotkey", hotkeyService)
             .add("ui", uiService)
             .add("orm", ormService)
-            .add("localization", makeFakeLocalizationService());
+            .add("localization", makeFakeLocalizationService())
+            .add("command", fakeCommandService);
     });
 
     QUnit.test("can disable tours", async (assert) => {