From fb013ccc725cbf9bb49c3e297b04ac1b534c0d90 Mon Sep 17 00:00:00 2001 From: "Julien Carion (juca)" Date: Wed, 18 Oct 2023 13:31:57 +0200 Subject: [PATCH] [FIX] devtools: fix display and message passing for firefox This commit fixes 2 issues specific to the firefox version of the extension: First issue concerns the computation the position of the border between the subwindows of the components tab which could go terribly wrong due to the fact that the innerwidth of the window is implicitly set to 10 when the owl devtools window is hidden. Second issue comes from changes in the runtime.onMessage method of browser which now requires to directly return the response instead of using the sendResponse method. Also perform a little cleanup on usage of browserInstance and in the manifest. --- tools/devtools/manifest-firefox.json | 2 +- tools/devtools/src/background.js | 14 +++++++------- tools/devtools/src/content.js | 4 ++-- tools/devtools/src/devtools_app/devtools.js | 3 +-- .../components_tab/components_tab.js | 4 +++- .../components_tab/tree_element/tree_element.js | 4 +--- tools/devtools/src/devtools_app/store/store.js | 11 ++++------- tools/devtools/src/utils.js | 2 +- 8 files changed, 20 insertions(+), 24 deletions(-) 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" });