[FIX] devtools: Missing global owl

This commit adapts the behavior of the devtools global hook to get
the toRaw and reactive functions from the __OWL_DEVTOOLS__ variable
instead of the global owl when it is missing. Also adds the functions
to the __OWL_DEVTOOLS__ variable for the former to work.
This allows the devtools to work in environments where owl is loaded
through ES modules.
Also quickly fixes iframes detection update on page reload.

src/runtime/app.ts

@@ -7,6 +7,7 @@ import { Scheduler } from "./scheduler";
 import { validateProps } from "./template_helpers";
 import { TemplateSet, TemplateSetConfig } from "./template_set";
 import { validateTarget } from "./utils";
+import { toRaw, reactive } from "./reactivity";
 
 // reimplement dev mode stuff see last change in 0f7a8289a6fb8387c3c1af41c6664b2a8448758f
 
@@ -39,6 +40,8 @@ declare global {
       apps: Set<App>;
       Fiber: typeof Fiber;
       RootFiber: typeof RootFiber;
+      toRaw: typeof toRaw;
+      reactive: typeof reactive;
     };
   }
 }
@@ -47,6 +50,8 @@ window.__OWL_DEVTOOLS__ ||= {
   apps: new Set<App>(),
   Fiber: Fiber,
   RootFiber: RootFiber,
+  toRaw: toRaw,
+  reactive: reactive,
 };
 
 export class App<

tools/devtools/src/devtools_app/store/store.js

@@ -513,6 +513,7 @@ export const store = reactive({
     evalFunctionInWindow("toggleTracing", [false]);
     this.traceSubscriptions = false;
     evalFunctionInWindow("toggleSubscriptionTracing", [false]);
+    this.updateIFrameList();
   },
 
   // Triggers manually the rendering of the selected component

tools/devtools/src/page_scripts/owl_devtools_global_hook.js

@@ -11,6 +11,10 @@
       this.Fiber = window.__OWL_DEVTOOLS__.Fiber;
       // Same but for RootFiber
       this.RootFiber = window.__OWL_DEVTOOLS__.RootFiber;
+      // This is for retrocompatibility purposes since new versions of owl should always expose toRaw and reactive
+      // in __OWL_DEVTOOLS__
+      this.toRaw = window.__OWL_DEVTOOLS__.toRaw ?? window.owl?.toRaw;
+      this.reactive = window.__OWL_DEVTOOLS__.reactive ?? window.owl?.reactive;
       // Set to keep track of the fibers that are in the flush queue
       this.queuedFibers = new WeakSet();
       // Set to keep track of the HTML elements we added to the page
@@ -400,7 +404,7 @@
       let targetToKeysToCallbacks;
 
       // Step 1: extract internal values from owl
-      const obj = owl.reactive({}, () => {});
+      const obj = self.reactive({}, () => {});
       let count = 0;
       WeakMap.prototype.get = function () {
         count++;
@@ -728,7 +732,7 @@
             }
         }
         if (obj) {
-          obj = owl.toRaw(obj);
+          obj = this.toRaw(obj);
         }
       }
       return obj;
@@ -836,7 +840,7 @@
         child.contentType = "undefined";
         child.hasChildren = false;
       } else {
-        obj = owl.toRaw(obj);
+        obj = this.toRaw(obj);
         switch (true) {
           case obj instanceof Map:
             child.contentType = "map";
@@ -1388,7 +1392,7 @@
         }
         getter.hasChildren = false;
       } else {
-        obj = owl.toRaw(obj);
+        obj = this.toRaw(obj);
         switch (true) {
           case obj instanceof Map:
             getter.contentType = "map";
@@ -1483,7 +1487,7 @@
         return;
       }
       if (objectType === "subscription") {
-        owl.reactive(obj)[key] = value;
+        this.reactive(obj)[key] = value;
       } else {
         obj[key] = value;
         if (objectType === "props" || objectType === "instance") {