[ADD] tools: create owl-devtools extension

This commit adds the code of the owl devtools extension.
This extension can be added on chrome or on firefox for
developpers to be able to inspect the contents of all owl
applications that are present on any web page, see all the
components, interract with them and their content to some
extend and perform a bit of profiling with their renders.

tools/devtools/src/popup_app/popup.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <link rel="stylesheet" href="../assets/bootstrap.min.css">
+    <link rel="stylesheet" href="main.css" />
+  </head>
+  <body>
+    <script src="../assets/owl.js"></script>
+    <script src="popup.js"></script>
+  </body>
+</html>

tools/devtools/src/popup_app/popup.js

@@ -0,0 +1,23 @@
+import { templates } from "../../assets/templates.js";
+import { getOwlStatus } from "../utils";
+const { Component, useState, onWillStart, mount, App } = owl;
+
+class PopUpApp extends Component {
+  static template = "popup.PopUpApp";
+
+  setup() {
+    this.state = useState({ status: 0 });
+    onWillStart(async () => {
+      try {
+        this.state.status = await getOwlStatus();
+      } catch (e) {
+        this.state.status = -1;
+      }
+    });
+  }
+}
+
+for (const template in templates) {
+  App.registerTemplate(template, templates[template]);
+}
+mount(PopUpApp, document.body, { dev: true });

tools/devtools/src/popup_app/popup_app.xml

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+  <t t-name="popup.PopUpApp">
+    <div class="container m-0 p-4 text-white bg-dark" style="width: 370px">
+      <p t-if="state.status === 1">
+        Owl is detected on this page but the version seems to be outdated.
+        Please upgrade to a newer version in order to use the devtools.
+      </p>
+      <p t-elif="state.status === 2">
+        Owl is detected on this page.
+        Open DevTools and look for the Owl panel.
+      </p>
+      <p t-else="">
+        Owl is not detected on this page.
+      </p>
+    </div>
+  </t>
+</templates>