From aaed3a73d4c9c42c2808e7e6f7e1d0de07f795f0 Mon Sep 17 00:00:00 2001 From: "Francois (fge)" Date: Wed, 4 Aug 2021 11:49:01 +0000 Subject: [PATCH] [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) --- .../static/src/core/debug/debug_context.js | 22 +++++++- .../web/static/src/core/debug/debug_menu.js | 4 +- .../static/src/core/debug/debug_providers.js | 55 +++++++++++++++++++ .../webclient/commands/command_category.js | 1 + .../src/webclient/commands/command_palette.js | 8 +-- .../commands/command_palette_dialog.js | 1 + .../webclient/commands/default_providers.js | 2 +- 7 files changed, 83 insertions(+), 10 deletions(-) create mode 100644 addons/web/static/src/core/debug/debug_providers.js diff --git a/addons/web/static/src/core/debug/debug_context.js b/addons/web/static/src/core/debug/debug_context.js index a77ba98ac2a..6221155b20e 100644 --- a/addons/web/static/src/core/debug/debug_context.js +++ b/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), () => [] diff --git a/addons/web/static/src/core/debug/debug_menu.js b/addons/web/static/src/core/debug/debug_menu.js index 21b796956ba..7302d8eebc2 100644 --- a/addons/web/static/src/core/debug/debug_menu.js +++ b/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); diff --git a/addons/web/static/src/core/debug/debug_providers.js b/addons/web/static/src/core/debug/debug_providers.js new file mode 100644 index 00000000000..24e839fbf50 --- /dev/null +++ b/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; + }, +}); diff --git a/addons/web/static/src/webclient/commands/command_category.js b/addons/web/static/src/webclient/commands/command_category.js index b9c8826ca20..40e630d8c40 100644 --- a/addons/web/static/src/webclient/commands/command_category.js +++ b/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 }); diff --git a/addons/web/static/src/webclient/commands/command_palette.js b/addons/web/static/src/webclient/commands/command_palette.js index 0db99be24a3..906395c775e 100644 --- a/addons/web/static/src/webclient/commands/command_palette.js +++ b/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 }] }); diff --git a/addons/web/static/src/webclient/commands/command_palette_dialog.js b/addons/web/static/src/webclient/commands/command_palette_dialog.js index 99450f478b9..848941d2bd9 100644 --- a/addons/web/static/src/webclient/commands/command_palette_dialog.js +++ b/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 }); diff --git a/addons/web/static/src/webclient/commands/default_providers.js b/addons/web/static/src/webclient/commands/default_providers.js index 9fb14f3e614..ab2b942aa8e 100644 --- a/addons/web/static/src/webclient/commands/default_providers.js +++ b/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;