[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

@@ -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": ["<all_urls>"],

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) => {
+    const tab = await getActiveTabURL();
-      sendResponse({ result: tab });
+    return { result: tab };
-    });
-    return true;
   } else {
     const destinationPanel = activePanels.get(sender.tab.id);
     if (destinationPanel) {

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 }

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);

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);
+    }
   };
 }

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 {

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
+    // It is not possible to run getActiveTabURL inside the devtools when using firefox so we ask the background to execute it instead
-    browserInstance.runtime.sendMessage({ type: "getActiveTabURL" }).then((response) => {
+    const response = await browserInstance.runtime.sendMessage({ type: "getActiveTabURL" });
-      return response.result;
+    return response.result;
-    });
   } else {
     return await getActiveTabURL();
   }

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" });