[IMP] web: add debug command

This commit adds commands to enable/disable debug mode and to get
to the debug menu from the command palette.

closes odoo/odoo#74587

Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>

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

@@ -60,16 +60,28 @@ class DebugContext {
     }
 }
 
+let currentDebugContext;
 const debugContextSymbol = Symbol("debugContext");
 export function createDebugContext(env, { categories = [] } = {}) {
     return { [debugContextSymbol]: new DebugContext(env, categories) };
 }
 
 export function useOwnDebugContext({ categories = [] } = {}) {
-    useSubEnv(createDebugContext(useEnv(), { categories }));
+    const oldDebugContext = currentDebugContext;
+    const newDebugContext = createDebugContext(useEnv(), { categories });
+    useSubEnv(newDebugContext);
+    useEffect(
+        () => {
+            currentDebugContext = newDebugContext[debugContextSymbol];
+            return () => {
+                currentDebugContext = oldDebugContext;
+            };
+        },
+        () => []
+    );
 }
 
-export function useCurrentDebugContext() {
+export function useEnvDebugContext() {
     const debugContext = useEnv()[debugContextSymbol];
     if (!debugContext) {
         throw new Error("There is no debug context available in the current environment.");
@@ -77,8 +89,12 @@ export function useCurrentDebugContext() {
     return debugContext;
 }
 
+export function getCurrentDebugContext() {
+    return currentDebugContext;
+}
+
 export function useDebugCategory(category, context = {}) {
-    const debugContext = useCurrentDebugContext();
+    const debugContext = useEnvDebugContext();
     useEffect(
         () => debugContext.activateCategory(category, context),
         () => []

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

@@ -1,12 +1,12 @@
 /** @odoo-module **/
 
-import { useCurrentDebugContext } from "./debug_context";
+import { useEnvDebugContext } from "./debug_context";
 
 const { Component } = owl;
 
 export class DebugMenu extends Component {
     setup() {
-        const debugContext = useCurrentDebugContext();
+        const debugContext = useEnvDebugContext();
         // Needs to be bound to this for use in template
         this.getElements = async () => {
             this.elements = await debugContext.getItems(this.env);

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

@@ -0,0 +1,55 @@
+/** @odoo-module */
+
+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) => {
+        const result = [];
+        if (env.services.user.isAdmin) {
+            if (env.debug) {
+                result.push({
+                    name: "Deactivate debug mode",
+                    category: "debug",
+                    action: () => {
+                        const route = env.services.router.current;
+                        route.search.debug = "";
+                        browser.location.href = browser.location.origin + routeToUrl(route);
+                    },
+                });
+                result.push({
+                    name: "Debug menu",
+                    category: "debug",
+                    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) => ({
+                                        name: item.description,
+                                        action: item.callback,
+                                    }));
+                            },
+                        };
+                    },
+                });
+            } else {
+                result.push({
+                    name: "Activate debug mode",
+                    category: "debug",
+                    action: () => {
+                        browser.location.search = "?debug=assets";
+                    },
+                });
+            }
+        }
+        return result;
+    },
+});

addons/web/static/src/webclient/commands/command_category.js

@@ -8,3 +8,4 @@ commandCategoryRegistry.add("app", { label: _lt("Current App Commands") }, { seq
 commandCategoryRegistry.add("actions", { label: _lt("More Actions") }, { sequence: 30 });
 commandCategoryRegistry.add("navbar", { label: _lt("NavBar") }, { sequence: 40 });
 commandCategoryRegistry.add("default", { label: _lt("Other commands") }, { sequence: 100 });
+commandCategoryRegistry.add("debug", { label: _lt("Debug") }, { sequence: 110 });

addons/web/static/src/webclient/commands/command_palette.js

@@ -52,7 +52,6 @@ export class CommandPalette extends Component {
 
         useAutofocus();
 
-        this.mouseSelectionActive = false;
         useHotkey("Enter", () => this.executeSelectedCommand());
         useHotkey("ArrowUp", () => this.selectCommandAndScrollTo("PREV"), { allowRepeat: true });
         useHotkey("ArrowDown", () => this.selectCommandAndScrollTo("NEXT"), { allowRepeat: true });
@@ -141,6 +140,7 @@ export class CommandPalette extends Component {
             keyId: this.keyId++,
         }));
         this.selectCommand(this.state.commands.length ? 0 : -1);
+        this.mouseSelectionActive = false;
     }
 
     selectCommand(index) {
@@ -166,7 +166,7 @@ export class CommandPalette extends Component {
 
         const listbox = this.el.querySelector(".o_command_palette_listbox");
         const command = listbox.querySelector(`#o_command_${nextIndex}`);
-        scrollTo(command, listbox);
+        scrollTo(command.children[0], listbox);
     }
 
     onCommandClicked(index) {
@@ -174,9 +174,9 @@ export class CommandPalette extends Component {
         this.executeSelectedCommand();
     }
 
-    executeSelectedCommand() {
+    async executeSelectedCommand() {
         if (this.state.selectedCommand) {
-            const result = this.state.selectedCommand.action();
+            const result = await this.state.selectedCommand.action();
             if (result) {
                 const { placeHolder, provide } = result;
                 this.providerStack.push({ __default__: [{ provide }] });

addons/web/static/src/webclient/commands/command_palette_dialog.js

@@ -29,6 +29,7 @@ export class CommandPaletteDialog extends Dialog {
 }
 CommandPaletteDialog.renderHeader = false;
 CommandPaletteDialog.renderFooter = false;
+CommandPaletteDialog.size = "modal-md";
 CommandPaletteDialog.contentClass = "o_command_palette";
 CommandPaletteDialog.bodyTemplate = "web.CommandPaletteDialogBody";
 CommandPaletteDialog.components = Object.assign({}, Dialog.components, { CommandPalette });

addons/web/static/src/webclient/commands/default_providers.js

@@ -5,7 +5,7 @@ import { useHotkey } from "@web/core/hotkeys/hotkey_hook";
 import { registry } from "@web/core/registry";
 import { capitalize } from "@web/core/utils/strings";
 import { getVisibleElements } from "@web/core/utils/ui";
-import { DefaultCommandItem } from "./command_service";
+import { DefaultCommandItem } from "./command_palette";
 
 const { Component } = owl;