From 3c9f4a8ae9410bd6f040c70406b9a16762323a0f Mon Sep 17 00:00:00 2001 From: "Julien Carion (juca)" Date: Wed, 24 May 2023 13:56:41 +0200 Subject: [PATCH] [IMP] devtools: Add blacklist to components toggle This commit adds the functionnality to add components to the toggle blacklist so that it won't be expanded by default when launching or reloading the devtools components tree. --- .../tree_element/tree_element.js | 30 +++++++++++++- .../tree_element/tree_element.xml | 4 ++ .../devtools/src/devtools_app/store/store.js | 39 ++++++++++++------- 3 files changed, 59 insertions(+), 14 deletions(-) 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 @@
  • Store as global variable
    •  +
  • + Don't fold component by default + Fold component by default +
    • 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); } }