diff --git a/tools/devtools/src/devtools_app/devtools_window/components_tab/tree_element/tree_element.js b/tools/devtools/src/devtools_app/devtools_window/components_tab/tree_element/tree_element.js
index c54360ff..baf9a267 100644
--- a/tools/devtools/src/devtools_app/devtools_window/components_tab/tree_element/tree_element.js
+++ b/tools/devtools/src/devtools_app/devtools_window/components_tab/tree_element/tree_element.js
@@ -1,9 +1,11 @@
/** @odoo-module **/
-import { isElementInCenterViewport, minimizeKey } from "../../../../utils";
+import { isElementInCenterViewport, minimizeKey, IS_FIREFOX } from "../../../../utils";
import { useStore } from "../../../store/store";
import { HighlightText } from "./highlight_text/highlight_text";
+const browserInstance = IS_FIREFOX ? browser : chrome;
+
const { Component, useRef, useState, useEffect, onMounted } = owl;
export class TreeElement extends Component {
@@ -105,4 +107,30 @@ export class TreeElement extends Component {
this.store.selectComponent(this.props.component.path);
}
}
+
+ // Adds the component name to the components toggle blacklist if not already present
+ // Else, remove it from the blacklist
+ toggleComponentToBlacklist() {
+ if (this.store.settings.componentsToggleBlacklist.has(this.props.component.name)) {
+ if (!this.props.component.toggled) {
+ this.props.component.toggled = !this.props.component.toggled;
+ }
+ this.store.settings.componentsToggleBlacklist.delete(this.props.component.name);
+ browserInstance.storage.local.set({
+ owlDevtoolsComponentsToggleBlacklist: Array.from(
+ this.store.settings.componentsToggleBlacklist
+ ),
+ });
+ } else {
+ if (this.props.component.toggled) {
+ this.props.component.toggled = !this.props.component.toggled;
+ }
+ this.store.settings.componentsToggleBlacklist.add(this.props.component.name);
+ browserInstance.storage.local.set({
+ owlDevtoolsComponentsToggleBlacklist: Array.from(
+ this.store.settings.componentsToggleBlacklist
+ ),
+ });
+ }
+ }
}
diff --git a/tools/devtools/src/devtools_app/devtools_window/components_tab/tree_element/tree_element.xml b/tools/devtools/src/devtools_app/devtools_window/components_tab/tree_element/tree_element.xml
index 9c3baa3b..5ffdfff7 100644
--- a/tools/devtools/src/devtools_app/devtools_window/components_tab/tree_element/tree_element.xml
+++ b/tools/devtools/src/devtools_app/devtools_window/components_tab/tree_element/tree_element.xml
@@ -43,6 +43,10 @@
+
diff --git a/tools/devtools/src/devtools_app/store/store.js b/tools/devtools/src/devtools_app/store/store.js
index 62b9d6be..8523b0ce 100644
--- a/tools/devtools/src/devtools_app/store/store.js
+++ b/tools/devtools/src/devtools_app/store/store.js
@@ -11,6 +11,7 @@ export const store = reactive({
expandByDefault: true,
toggleOnSelected: false,
darkmode: false,
+ componentsToggleBlacklist: new Set(),
},
contextMenu: {
top: 0,
@@ -110,7 +111,7 @@ export const store = reactive({
);
this.apps = apps ? apps : [];
if (!fromOld && this.settings.expandByDefault) {
- this.apps.forEach((tree) => expandNodes(tree));
+ this.apps.forEach((tree) => expandNodes(tree, true));
}
const component = await evalFunctionInWindow(
"getComponentDetails",
@@ -503,7 +504,8 @@ export const store = reactive({
},
// Reset all the relevant data about the page currently stored
- resetData() {
+ async resetData() {
+ await loadSettings();
this.loadComponentsTree(false);
this.events = [];
this.eventsTree = [];
@@ -609,7 +611,7 @@ export const store = reactive({
// Refresh the whole extension
async refreshExtension() {
await loadScripts();
- this.resetData();
+ await this.resetData();
},
// Toggle dark mode in the extension and store result in the storage
@@ -620,7 +622,7 @@ export const store = reactive({
} else {
document.querySelector("html").classList.remove("dark-mode");
}
- browserInstance.storage.local.set({ owl_devtools_dark_mode: this.settings.darkMode });
+ browserInstance.storage.local.set({ owlDevtoolsDarkMode: this.settings.darkMode });
},
openDocumentation() {
@@ -640,6 +642,8 @@ async function init() {
evalInWindow("__OWL__DEVTOOLS_GLOBAL_HOOK__.devtoolsId = " + store.devtoolsId + ";");
+ await loadSettings();
+
// We want to load the base components tree when the devtools tab is first opened
store.loadComponentsTree(false);
@@ -655,8 +659,6 @@ async function init() {
evalFunctionInWindow("toggleEventsRecording", [false, 0], frame);
}
- loadSettings();
-
browserInstance.runtime.sendMessage({ type: "newDevtoolsPanel", id: store.devtoolsId });
// Heartbeat message to test whether the extension context is still valid or not
@@ -681,14 +683,14 @@ browserInstance.runtime.onConnect.addListener((port) => {
store.owlStatus = await evalInWindow("window.__OWL__DEVTOOLS_GLOBAL_HOOK__ !== undefined;");
if (store.owlStatus) {
evalInWindow("__OWL__DEVTOOLS_GLOBAL_HOOK__.devtoolsId = " + store.devtoolsId + ";");
- store.resetData();
+ await store.resetData();
}
}
// Received when a frame has been delayed when loading the scripts due to owl being lazy loaded
if (msg.type === "FrameReady") {
store.updateIFrameList();
store.owlStatus = true;
- store.resetData();
+ await store.resetData();
}
// We need to reload the components tree when the set of apps in the page is modified
if (msg.type === "RefreshApps") {
@@ -744,11 +746,12 @@ browserInstance.runtime.onConnect.addListener((port) => {
// Load all settings from the chrome sync storage
async function loadSettings() {
let storage = await browserInstance.storage.local.get();
- if (storage.owl_devtools_dark_mode === undefined) {
+ // Darkmode
+ if (storage.owlDevtoolsDarkMode === undefined) {
// Load dark mode based on the global settings of the chrome devtools
darkMode = browserInstance.devtools.panels.themeName === "dark";
} else {
- darkMode = storage.owl_devtools_dark_mode;
+ darkMode = storage.owlDevtoolsDarkMode;
}
store.settings.darkMode = darkMode;
if (darkMode) {
@@ -756,6 +759,12 @@ async function loadSettings() {
} else {
document.querySelector("html").classList.remove("dark-mode");
}
+ // Components toggle blacklist
+ if (storage.owlDevtoolsComponentsToggleBlacklist !== undefined) {
+ store.settings.componentsToggleBlacklist = new Set(
+ storage.owlDevtoolsComponentsToggleBlacklist
+ );
+ }
}
// Function to handle and store a batch of events coming from the page
@@ -875,10 +884,14 @@ function highlightChildren(component) {
}
// Expand the node given in entry and all of its children
-function expandNodes(node) {
- node.toggled = true;
+function expandNodes(node, blacklist = false) {
+ if (blacklist && store.settings.componentsToggleBlacklist.has(node.name)) {
+ node.toggled = false;
+ } else {
+ node.toggled = true;
+ }
for (const child of node.children) {
- expandNodes(child);
+ expandNodes(child, blacklist);
}
}