From 310730782cf5378a491103eeb8fa3bca1e0dfa81 Mon Sep 17 00:00:00 2001
From: "Julien Carion (juca)" <juca@odoo.com>
Date: Tue, 25 Apr 2023 09:49:05 +0200
Subject: [PATCH] [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                                 |  5 +++++
 tools/devtools/src/devtools_app/store/store.js     |  1 +
 .../src/page_scripts/owl_devtools_global_hook.js   | 14 +++++++++-----
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/runtime/app.ts b/src/runtime/app.ts
index 3fc6f5d7..d12bc624 100644
--- a/src/runtime/app.ts
+++ b/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<
diff --git a/tools/devtools/src/devtools_app/store/store.js b/tools/devtools/src/devtools_app/store/store.js
index d6389ee9..62b9d6be 100644
--- a/tools/devtools/src/devtools_app/store/store.js
+++ b/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
diff --git a/tools/devtools/src/page_scripts/owl_devtools_global_hook.js b/tools/devtools/src/page_scripts/owl_devtools_global_hook.js
index 787760d8..ff6a0a3e 100644
--- a/tools/devtools/src/page_scripts/owl_devtools_global_hook.js
+++ b/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") {