[IMP] tools: Include the devtools into the release system

This commit adds the devtools as a zip file containing both chrome
and firefox versions of the extension in the release and also updates
the doc to install it easily.

README.md

@@ -122,8 +122,28 @@ Owl is available on `npm` and can be installed with the following command:
 ```
 npm install @odoo/owl
 ```
-
 If you want to use a simple `<script>` tag, the last release can be downloaded here:
 
 - [owl](https://github.com/odoo/owl/releases/latest)
 
+## Installing Owl devtools
+
+The Owl devtools browser extension is also available in the [release](https://github.com/odoo/owl/releases/latest):
+Unzip the owl-devtools.zip file and follow the instructions depending on your browser:
+
+### Chrome
+
+Go to your chrome extensions admin panel, activate developer mode and click on `Load unpacked`.
+Select the devtools-chrome folder and that's it, your extension is active! 
+There is a convenient refresh button on the extension card (still on the same admin page) to update your code. 
+Do note that if you got some problems, you may need to completly remove and reload the extension to completly refresh the extension.
+
+### Firefox 
+Go to the address about:debugging#/runtime/this-firefox and click on `Load temporary Add-on...`.
+Select any file in the devtools-firefox folder and that's it, your extension is active! 
+Here, you can use the reload button to refresh the extension.
+
+Note that you may have to open another window or reload your tab to see the extension working.
+Also note that the extension will only be active on pages that have a sufficient version of owl.
+
+

doc/tools/devtools.md

@@ -5,7 +5,7 @@ to the browser devtools in order to inspect all owl apps that are present on any
 and allows to interract with their data to a certain extend. There is also a profiler available to visualize
 the components' lifecycle and be able to trace their origin.
 
-## Install
+## Install the extension
 
 In the owl root folder:
 
@@ -19,33 +19,36 @@ For chrome:
 npm run build:devtools-chrome
 ```
 
-For firefox: 
+For firefox:
 
 ```bash
 npm run build:devtools-firefox
 ```
 
 You can also run:
+
 ```bash
 npm run dev:devtools-chrome
 ```
+
 or
+
 ```bash
 npm run dev:devtools-firefox
 ```
+
 to avoid recompiling owl and gain time if it has already been done.
 
 To run the extension:
 
 In google chrome: go to your chrome extensions admin panel, activate developer mode and click on `Load unpacked`.
-Select the output folder (dist/devtools) and that's it, your extension is active! 
-There is a convenient refresh button on the extension card (still on the same admin page) to update your code. 
+Select the output folder (dist/devtools) and that's it, your extension is active!
+There is a convenient refresh button on the extension card (still on the same admin page) to update your code.
 Do note that if you got some problems, you may need to completly remove and reload the extension to completly refresh the extension.
 
 In firefox: go to the address about:debugging#/runtime/this-firefox and click on `Load temporary Add-on...`.
-Select any file of the output folder (dist/devtools) and that's it, your extension is active! 
+Select any file of the output folder (dist/devtools) and that's it, your extension is active!
 Here, you can use the reload button to refresh the extension.
 
-Note you may have to open another window or reload your tab to see the extension working.
-Also note that the extension will run properly only on pages that have this branch's version of owl.
-
+Note that you may have to open another window or reload your tab to see the extension working.
+Also note that the extension will only be active on pages that have a sufficient version of owl.

tools/devtools/src/page_scripts/owl_devtools_global_hook.js

@@ -28,7 +28,7 @@
           mutation.addedNodes.forEach(function (addedNode) {
             if (addedNode.tagName == "IFRAME") {
               // Ensure it is not an empty iframe element
-              if(addedNode.contentDocument){
+              if (addedNode.contentDocument) {
                 /*
                  * This message is intercepted by the content script which relays it to the background script which relays it to the devtools app.
                  * This process may seem long and indirect but is necessary. This applies to all window.top.postMessage methods in this file.

tools/release.js

@@ -98,13 +98,27 @@ async function startRelease() {
   }
 
   // ----------------------------------------------------------------------------
-  log(`Step 5/${STEPS}: building owl...`);
+  log(`Step 5/${STEPS}: building owl and devtools...`);
   await execCommand("rm -rf dist/");
   const buildResult = await execCommand("npm run build");
   if (buildResult !== 0) {
     logError("Build failed. Aborting.");
     return;
   }
+  const chromeResult = await execCommand("npm run build:devtools-chrome");
+  if (chromeResult !== 0) {
+    logError("Build devtools chrome failed. Aborting.");
+    return;
+  }
+  await execCommand("mv dist/devtools dist/devtools-chrome");
+  const firefoxResult = await execCommand("npm run build:devtools-firefox");
+  if (firefoxResult !== 0) {
+    logError("Build devtools firefox failed. Aborting.");
+    return;
+  }
+  await execCommand("mv dist/devtools dist/devtools-firefox");
+  await execCommand("cd dist && zip -r owl-devtools.zip devtools-chrome devtools-firefox && cd ..");
+  await execCommand("rm -r dist/devtools-chrome dist/devtools-firefox && rm dist/compiler.js");
 
   // ---------------------------------------------------------------------------
   log(`Step 6/${STEPS}: pushing on github...`);
@@ -117,7 +131,7 @@ async function startRelease() {
   // ---------------------------------------------------------------------------
 
   log(`Step 7/${STEPS}: Creating the release...`);
-  const relaseResult = await execCommand(`gh release create v${next} dist/*.js ${draft} -F ${file}`);
+  const relaseResult = await execCommand(`gh release create v${next} dist/*.js dist/*.zip ${draft} -F ${file}`);
   if (relaseResult !== 0) {
     logError("github release failed. Aborting.");
     return;