diff --git a/tools/devtools/manifest-firefox.json b/tools/devtools/manifest-firefox.json index 4482da99..2e1303c7 100644 --- a/tools/devtools/manifest-firefox.json +++ b/tools/devtools/manifest-firefox.json @@ -29,7 +29,7 @@ "scripts": ["background.js"] }, "devtools_page": "devtools_app/devtools.html", - "content_security_policy": "script-src 'self' 'unsafe-eval' blob:; object-src 'self'", + "content_security_policy": "script-src 'self'; object-src 'self'", "content_scripts": [ { "matches": [""], diff --git a/tools/devtools/src/background.js b/tools/devtools/src/background.js index b06214e6..da923291 100644 --- a/tools/devtools/src/background.js +++ b/tools/devtools/src/background.js @@ -1,9 +1,7 @@ -import { IS_FIREFOX, getActiveTabURL } from "./utils"; +import { IS_FIREFOX, getActiveTabURL, browserInstance } from "./utils"; let owlStatus = 0; -const browserInstance = IS_FIREFOX ? browser : chrome; - // Used to keep track of the tabs where the owl devtools have been opened const activePanels = new Map(); @@ -71,6 +69,9 @@ function checkOwlStatus(tabId) { browserInstance.runtime.onMessage.addListener(async (message, sender, sendResponse) => { // Send back the owl status to the sender if (message.type === "getOwlStatus") { + if (IS_FIREFOX) { + return { result: owlStatus }; + } sendResponse({ result: owlStatus }); return true; } else if (message.type === "owlStatus") { @@ -112,11 +113,10 @@ browserInstance.runtime.onMessage.addListener(async (message, sender, sendRespon }, 750); activePanels.set(message.id, { port: port, expirationTimeout: expirationTimeout }); // This is solely for firefox which doesnt allow access to the chrome.tabs api inside devtools + // We therefore only use the firefox syntax to send the response here } else if (message.type === "getActiveTabURL") { - getActiveTabURL().then((tab) => { - sendResponse({ result: tab }); - }); - return true; + const tab = await getActiveTabURL(); + return { result: tab }; } else { const destinationPanel = activePanels.get(sender.tab.id); if (destinationPanel) { diff --git a/tools/devtools/src/content.js b/tools/devtools/src/content.js index 2e238260..ab7e54e9 100644 --- a/tools/devtools/src/content.js +++ b/tools/devtools/src/content.js @@ -1,5 +1,5 @@ import globalHook from "./page_scripts/owl_devtools_global_hook"; -import { IS_FIREFOX } from "./utils"; +import { IS_FIREFOX, browserInstance } from "./utils"; // Relays the owlDevtools__... type top window messages to the background script so that it can relay it to the devtools app window.addEventListener( @@ -7,7 +7,7 @@ window.addEventListener( function (event) { if (event.data.type && event.data.source === "owl-devtools") { try { - chrome.runtime.sendMessage( + browserInstance.runtime.sendMessage( event.data.data ? { type: event.data.type, data: event.data.data, origin: event.data.origin } : { type: event.data.type, origin: event.data.origin } diff --git a/tools/devtools/src/devtools_app/devtools.js b/tools/devtools/src/devtools_app/devtools.js index 10f4c099..abe98c32 100644 --- a/tools/devtools/src/devtools_app/devtools.js +++ b/tools/devtools/src/devtools_app/devtools.js @@ -1,7 +1,6 @@ -import { IS_FIREFOX } from "../utils"; +import { IS_FIREFOX, browserInstance } from "../utils"; let created = false; -let browserInstance = IS_FIREFOX ? browser : chrome; // Try to load the owl panel each 1000 ms in case it (re)appears on the page later on const checkInterval = setInterval(createPanelsIfOwl, 1000); diff --git a/tools/devtools/src/devtools_app/devtools_window/components_tab/components_tab.js b/tools/devtools/src/devtools_app/devtools_window/components_tab/components_tab.js index 568ebe38..31d0c44e 100644 --- a/tools/devtools/src/devtools_app/devtools_window/components_tab/components_tab.js +++ b/tools/devtools/src/devtools_app/devtools_window/components_tab/components_tab.js @@ -70,6 +70,8 @@ export class ComponentsTab extends Component { onWindowResize = () => { const minWidth = (147 / window.innerWidth) * 100; - this.store.splitPosition = Math.max(this.store.splitPosition, minWidth); + if (minWidth <= 100) { + this.store.splitPosition = Math.max(this.store.splitPosition, minWidth); + } }; } 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 baf9a267..88ae721b 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,11 +1,9 @@ /** @odoo-module **/ -import { isElementInCenterViewport, minimizeKey, IS_FIREFOX } from "../../../../utils"; +import { isElementInCenterViewport, minimizeKey, browserInstance } 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 { diff --git a/tools/devtools/src/devtools_app/store/store.js b/tools/devtools/src/devtools_app/store/store.js index cd56f113..8837771f 100644 --- a/tools/devtools/src/devtools_app/store/store.js +++ b/tools/devtools/src/devtools_app/store/store.js @@ -1,9 +1,7 @@ const { reactive, useState, toRaw } = owl; -import { fuzzySearch, IS_FIREFOX, getActiveTabURL } from "../../utils"; +import { fuzzySearch, IS_FIREFOX, getActiveTabURL, browserInstance } from "../../utils"; import globalHook from "../../page_scripts/owl_devtools_global_hook"; -const browserInstance = IS_FIREFOX ? browser : chrome; - // Main store which contains all states that needs to be maintained throughout all components in the devtools app export const store = reactive({ devtoolsId: 0, @@ -943,10 +941,9 @@ function arraysEqual(arr1, arr2) { async function getTabURL() { if (IS_FIREFOX) { - // This happens in firefox when the method is called inside devtools so we ask the background to execute it instead - browserInstance.runtime.sendMessage({ type: "getActiveTabURL" }).then((response) => { - return response.result; - }); + // It is not possible to run getActiveTabURL inside the devtools when using firefox so we ask the background to execute it instead + const response = await browserInstance.runtime.sendMessage({ type: "getActiveTabURL" }); + return response.result; } else { return await getActiveTabURL(); } diff --git a/tools/devtools/src/utils.js b/tools/devtools/src/utils.js index 99b0250c..17c18957 100644 --- a/tools/devtools/src/utils.js +++ b/tools/devtools/src/utils.js @@ -1,6 +1,6 @@ export const IS_FIREFOX = navigator.userAgent.indexOf("Firefox") !== -1; -const browserInstance = IS_FIREFOX ? browser : chrome; +export const browserInstance = IS_FIREFOX ? browser : chrome; export async function getOwlStatus() { const response = await browserInstance.runtime.sendMessage({ type: "getOwlStatus" });