[FIX] runtime: do not crash when capturing context with getter

When attempting to capture a rendering context that contains an
enumerable getter, there is a crash because we attempt to write a value
on the getter. This commit fixes that by manually climbing the prototype
chain to copy the values instead, and ignoring getters.

doc/reference/slots.md

@@ -175,7 +175,7 @@ class Notebook extends Component {
     <div class="notebook">
       <div class="tabs">
         <t t-foreach="tabNames" t-as="tab" t-key="tab_index">
-          <span t-att-class="{active:tab_index === activeTab}" t-on-click="() => state.activeTab=tab">
+          <span t-att-class="{active:tab_index === activeTab}" t-on-click="() => state.activeTab=tab_index">
             <t t-esc="props.slots[tab].title"/>
           </span>
         </t>

docs/index.html

@@ -10,7 +10,7 @@
   <link rel="stylesheet" href="assets/milligram.css">
   <link rel="stylesheet" href="assets/highlight.tomorrow.css">
   <link rel="stylesheet" href="assets/main.css">
-  <script src="./owl.js"></script>
+  <script type="importmap">{ "imports": { "@odoo/owl": "./owl.js" } }</script>
 </head>
 <body>
   <header class="container">
@@ -68,7 +68,6 @@
     <p><a href=".">OWL</a> is licensed under LGPLv3.<br>Logo from <a href="https://github.com/googlefonts/noto-emoji">Google Noto Emoji Font</a>, licensed under Apache License 2.0</p>
   </footer>
   <script src="assets/highlight.pack.js"></script>
-  <script type="importmap">{ "imports": { "@odoo/owl": "./owl.js" } }</script>
   <script type="module" src="display_code.js"></script>
   <script type="module" src="counter.js"></script>
 </body>

docs/owl.js

@@ -3221,7 +3221,7 @@ class TemplateSet {
     }
     callTemplate(owner, subTemplate, ctx, parent, key) {
         const template = this.getTemplate(subTemplate);
-        return toggler(subTemplate, template.call(owner, ctx, parent, key));
+        return toggler(subTemplate, template.call(owner, ctx, parent, key + subTemplate));
     }
 }
 // -----------------------------------------------------------------------------
@@ -5506,7 +5506,7 @@ function compile(template, options = {}) {
 }
 
 // do not modify manually. This file is generated by the release script.
-const version = "2.1.1";
+const version = "2.1.2";
 
 // -----------------------------------------------------------------------------
 //  Scheduler
@@ -5920,6 +5920,6 @@ TemplateSet.prototype._compileTemplate = function _compileTemplate(name, templat
 export { App, Component, EventBus, OwlError, __info__, blockDom, loadFile, markRaw, markup, mount, onError, onMounted, onPatched, onRendered, onWillDestroy, onWillPatch, onWillRender, onWillStart, onWillUnmount, onWillUpdateProps, reactive, status, toRaw, useChildSubEnv, useComponent, useEffect, useEnv, useExternalListener, useRef, useState, useSubEnv, validate, validateType, whenReady, xml };
 
 
-__info__.date = '2023-04-24T14:29:32.376Z';
-__info__.hash = 'f9d810a';
+__info__.date = '2023-04-29T07:45:54.333Z';
+__info__.hash = 'aabb755';
 __info__.url = 'https://github.com/odoo/owl';

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@odoo/owl",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odoo/owl",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "Odoo Web Library (OWL)",
   "main": "dist/owl.cjs.js",
   "module": "dist/owl.es.js",

src/compiler/code_generator.ts

@@ -447,6 +447,11 @@ export class CodeGenerator {
       .join("");
   }
 
+  translate(str: string): string {
+    const match = translationRE.exec(str) as any;
+    return match[1] + this.translateFn(match[2]) + match[3];
+  }
+
   /**
    * @returns the newly created block name, if any
    */
@@ -527,8 +532,7 @@ export class CodeGenerator {
 
     let value = ast.value;
     if (value && ctx.translate !== false) {
-      const match = translationRE.exec(value) as any;
-      value = match[1] + this.translateFn(match[2]) + match[3];
+      value = this.translate(value);
     }
     if (!ctx.inPreTag) {
       value = value.replace(whitespaceRE, " ");
@@ -1095,10 +1099,11 @@ export class CodeGenerator {
     } else {
       let value: string;
       if (ast.defaultValue) {
+        const defaultValue = ctx.translate ? this.translate(ast.defaultValue) : ast.defaultValue;
         if (ast.value) {
-          value = `withDefault(${expr}, \`${ast.defaultValue}\`)`;
+          value = `withDefault(${expr}, \`${defaultValue}\`)`;
         } else {
-          value = `\`${ast.defaultValue}\``;
+          value = `\`${defaultValue}\``;
         }
       } else {
         value = expr;

src/compiler/parser.ts

@@ -336,10 +336,10 @@ function parseDOMNode(node: Element, ctx: ParsingContext): AST | null {
 
   for (let attr of nodeAttrsNames) {
     const value = node.getAttribute(attr)!;
-    if (attr.startsWith("t-on")) {
-      if (attr === "t-on") {
-        throw new OwlError("Missing event name with t-on directive");
-      }
+    if (attr === "t-on" || attr === "t-on-") {
+      throw new OwlError("Missing event name with t-on directive");
+    }
+    if (attr.startsWith("t-on-")) {
       on = on || {};
       on[attr.slice(5)] = value;
     } else if (attr.startsWith("t-model")) {

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<

src/runtime/hooks.ts

@@ -59,28 +59,35 @@ export function useChildSubEnv(envExtension: Env) {
 // useEffect
 // -----------------------------------------------------------------------------
 
+type EffectDeps<T extends any[]> = T | (T extends [...infer H, never] ? EffectDeps<H> : never);
+
 /**
- * @param {...any} dependencies the dependencies computed by computeDependencies
+ * @template T
+ * @param {...T} dependencies the dependencies computed by computeDependencies
  * @returns {void|(()=>void)} a cleanup function that reverses the side
  *      effects of the effect callback.
  */
-type Effect = (...dependencies: any[]) => void | (() => void);
+type Effect<T extends [...T]> = (...dependencies: EffectDeps<T>) => void | (() => void);
 
 /**
  * This hook will run a callback when a component is mounted and patched, and
  * will run a cleanup function before patching and before unmounting the
  * the component.
  *
- * @param {Effect} effect the effect to run on component mount and/or patch
- * @param {()=>any[]} [computeDependencies=()=>[NaN]] a callback to compute
+ * @template T
+ * @param {Effect<T>} effect the effect to run on component mount and/or patch
+ * @param {()=>T} [computeDependencies=()=>[NaN]] a callback to compute
  *      dependencies that will decide if the effect needs to be cleaned up and
  *      run again. If the dependencies did not change, the effect will not run
  *      again. The default value returns an array containing only NaN because
  *      NaN !== NaN, which will cause the effect to rerun on every patch.
  */
-export function useEffect(effect: Effect, computeDependencies: () => any[] = () => [NaN]) {
+export function useEffect<T extends [...T]>(
+  effect: Effect<T>,
+  computeDependencies: () => T = () => [NaN] as never
+) {
   let cleanup: (() => void) | void;
-  let dependencies: any[];
+  let dependencies: T;
   onMounted(() => {
     dependencies = computeDependencies();
     cleanup = effect(...dependencies);

src/runtime/template_helpers.ts

@@ -8,6 +8,12 @@ import { OwlError } from "./error_handling";
 import type { ComponentNode } from "./component_node";
 
 const ObjectCreate = Object.create;
+const ObjectGetPrototypeOf = Object.getPrototypeOf;
+const ObjectGetOwnPropertyDescriptors = Object.getOwnPropertyDescriptors;
+const ObjectDefineProperty = Object.defineProperty;
+const ObjectEntries = Object.entries;
+const hasOwnProperty = (obj: Object, prop: PropertyKey) =>
+  Object.prototype.hasOwnProperty.call(obj, prop);
 /**
  * This file contains utility functions that will be injected in each template,
  * to perform various useful tasks in the compiled code.
@@ -49,8 +55,14 @@ function callSlot(
 
 function capture(ctx: any): any {
   const result = ObjectCreate(ctx);
-  for (let k in ctx) {
-    result[k] = ctx[k];
+  let current = ctx;
+  while (current && current !== Object.prototype) {
+    for (const [key, descriptor] of ObjectEntries(ObjectGetOwnPropertyDescriptors(current))) {
+      if (!hasOwnProperty(result, key) && "value" in descriptor) {
+        ObjectDefineProperty(result, key, descriptor);
+      }
+    }
+    current = ObjectGetPrototypeOf(current);
   }
   return result;
 }

src/runtime/template_set.ts

@@ -125,7 +125,7 @@ export class TemplateSet {
 
   callTemplate(owner: any, subTemplate: string, ctx: any, parent: any, key: any): any {
     const template = this.getTemplate(subTemplate);
-    return toggler(subTemplate, template.call(owner, ctx, parent, key));
+    return toggler(subTemplate, template.call(owner, ctx, parent, key + subTemplate));
   }
 }
 

src/version.ts

@@ -1,2 +1,2 @@
 // do not modify manually. This file is generated by the release script.
-export const version = "2.1.2";
+export const version = "2.1.3";

tests/compiler/__snapshots__/translation.test.ts.snap

@@ -1,5 +1,79 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`translation support body of t-sets are translated 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, withDefault, setContextValue } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    setContextValue(ctx, \\"label\\", \`translated\`);
+    return text(ctx['label']);
+  }
+}"
+`;
+
+exports[`translation support body of t-sets inside translation=off are not translated 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, withDefault, setContextValue } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    setContextValue(ctx, \\"label\\", \`untranslated\`);
+    return text(ctx['label']);
+  }
+}"
+`;
+
+exports[`translation support body of t-sets with html content are translated 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, withDefault, LazyValue, safeOutput } = helpers;
+  
+  let block1 = createBlock(\`<div>translated</div>\`);
+  
+  function value1(ctx, node, key = \\"\\") {
+    return block1();
+  }
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    ctx[\`label\`] = new LazyValue(value1, ctx, this, node, key);
+    return safeOutput(ctx['label']);
+  }
+}"
+`;
+
+exports[`translation support body of t-sets with text and html content are translated 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, withDefault, LazyValue, safeOutput } = helpers;
+  
+  let block3 = createBlock(\`<div>translated</div>\`);
+  
+  function value1(ctx, node, key = \\"\\") {
+    const b2 = text(\` translated \`);
+    const b3 = block3();
+    return multi([b2, b3]);
+  }
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    ctx[\`label\`] = new LazyValue(value1, ctx, this, node, key);
+    return safeOutput(ctx['label']);
+  }
+}"
+`;
+
 exports[`translation support can set and remove translatable attributes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -52,6 +126,21 @@ exports[`translation support some attributes are translated 1`] = `
 }"
 `;
 
+exports[`translation support t-set and falsy t-value: t-body are translated 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, withDefault, setContextValue } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    setContextValue(ctx, \\"label\\", withDefault(false, \`translated\`));
+    return text(ctx['label']);
+  }
+}"
+`;
+
 exports[`translation support translation is done on the trimmed text, with extra spaces readded after 1`] = `
 "function anonymous(app, bdom, helpers
 ) {

tests/compiler/parser.test.ts

@@ -1147,6 +1147,24 @@ describe("qweb parser", () => {
     });
   });
 
+  test("t-onclick without dash", async () => {
+    expect(() => parse(`<button t-onclick="add">Click</button>`)).toThrowError(
+      "Unknown QWeb directive: 't-onclick'"
+    );
+  });
+
+  test("t-on without event", async () => {
+    expect(() => parse(`<button t-on="add">Click</button>`)).toThrowError(
+      "Missing event name with t-on directive"
+    );
+  });
+
+  test("t-on- without event", async () => {
+    expect(() => parse(`<button t-on-="add">Click</button>`)).toThrowError(
+      "Missing event name with t-on directive"
+    );
+  });
+
   // ---------------------------------------------------------------------------
   // t-model
   // ---------------------------------------------------------------------------
@@ -1275,6 +1293,12 @@ describe("qweb parser", () => {
     });
   });
 
+  test("component with event handler", async () => {
+    expect(() => parse(`<MyComponent t-onclick="someMethod"/>`)).toThrowError(
+      "unsupported directive on Component: t-onclick"
+    );
+  });
+
   test("component with t-ref", async () => {
     expect(() => parse(`<MyComponent t-ref="something"/>`)).toThrow(
       "t-ref is no longer supported on components. Consider exposing only the public part of the component's API through a callback prop."

tests/compiler/translation.test.ts

@@ -100,4 +100,74 @@ describe("translation support", () => {
     expect(translateFn).toHaveBeenCalledWith("some  word");
     expect(fixture.innerHTML).toBe("<div>un mot</div>");
   });
+
+  test("body of t-sets are translated", async () => {
+    class SomeComponent extends Component {
+      static template = xml`
+        <t t-set="label">untranslated</t>
+        <t t-esc="label"/>`;
+    }
+
+    const translateFn = () => "translated";
+
+    await mount(SomeComponent, fixture, { translateFn });
+    expect(fixture.innerHTML).toBe("translated");
+  });
+
+  test("body of t-sets inside translation=off are not translated", async () => {
+    class SomeComponent extends Component {
+      static template = xml`
+        <t t-translation="off">
+          <t t-set="label">untranslated</t>
+          <t t-esc="label"/>
+        </t>`;
+    }
+
+    const translateFn = () => "translated";
+
+    await mount(SomeComponent, fixture, { translateFn });
+    expect(fixture.innerHTML).toBe("untranslated");
+  });
+
+  test("body of t-sets with html content are translated", async () => {
+    class SomeComponent extends Component {
+      static template = xml`
+        <t t-set="label"><div>untranslated</div></t>
+        <t t-out="label"/>`;
+    }
+
+    const translateFn = () => "translated";
+
+    await mount(SomeComponent, fixture, { translateFn });
+    expect(fixture.innerHTML).toBe("<div>translated</div>");
+  });
+
+  test("body of t-sets with text and html content are translated", async () => {
+    class SomeComponent extends Component {
+      static template = xml`
+        <t t-set="label">
+          some text
+          <div>untranslated</div>
+        </t>
+        <t t-out="label"/>`;
+    }
+
+    const translateFn = () => "translated";
+
+    await mount(SomeComponent, fixture, { translateFn });
+    expect(fixture.innerHTML).toBe(" translated <div>translated</div>");
+  });
+
+  test("t-set and falsy t-value: t-body are translated", async () => {
+    class SomeComponent extends Component {
+      static template = xml`
+          <t t-set="label" t-value="false">untranslated</t>
+          <t t-esc="label"/>`;
+    }
+
+    const translateFn = () => "translated";
+
+    await mount(SomeComponent, fixture, { translateFn });
+    expect(fixture.innerHTML).toBe("translated");
+  });
 });

tests/components/__snapshots__/t_call.test.ts.snap

@@ -1,5 +1,50 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`t-call component with an enumerable getter, t-call inside slot 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { capture, markRaw } = helpers;
+  const callTemplate_1 = app.getTemplate(\`sub\`);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, []);
+  
+  function slot1(ctx, node, key = \\"\\") {
+    return callTemplate_1.call(this, ctx, node, key + \`__1\`);
+  }
+  
+  return function template(ctx, node, key = \\"\\") {
+    const ctx1 = capture(ctx);
+    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+  }
+}"
+`;
+
+exports[`t-call component with an enumerable getter, t-call inside slot 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let txt1 = ctx['foo'];
+    return block1([txt1]);
+  }
+}"
+`;
+
+exports[`t-call component with an enumerable getter, t-call inside slot 3`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { callSlot } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return callSlot(ctx, node, key, 'default', false, {});
+  }
+}"
+`;
+
 exports[`t-call dynamic t-call 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -42,6 +87,56 @@ exports[`t-call dynamic t-call 3`] = `
 }"
 `;
 
+exports[`t-call dynamic t-call with same sub component 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const call = app.callTemplate.bind(app);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = text(ctx['current'].template);
+    const template1 = (ctx['current'].template);
+    const b3 = call(this, template1, ctx, node, key + \`__1\`);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`t-call dynamic t-call with same sub component 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return comp1({}, key + \`__1\`, node, this, null);
+  }
+}"
+`;
+
+exports[`t-call dynamic t-call with same sub component 3`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(\`child\`);
+  }
+}"
+`;
+
+exports[`t-call dynamic t-call with same sub component 4`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return comp1({}, key + \`__1\`, node, this, null);
+  }
+}"
+`;
+
 exports[`t-call dynamic t-call: key is propagated 1`] = `
 "function anonymous(app, bdom, helpers
 ) {

tests/components/t_call.test.ts

@@ -398,4 +398,53 @@ describe("t-call", () => {
     });
     expect(fixture.innerHTML).toBe("");
   });
+
+  test("dynamic t-call with same sub component", async () => {
+    class Child extends Component {
+      static template = xml`child`;
+    }
+
+    class Root extends Component {
+      static template = xml`
+        <t t-esc="current.template"/>
+        <t t-call="{{current.template}}"/>`;
+      static components = { Child };
+      current = useState({ template: "A" });
+    }
+
+    const root = await mount(Root, fixture, {
+      templates: `
+        <templates>
+          <t t-name="A"><Child/></t>
+          <t t-name="B"><Child/></t>
+        </templates>`,
+    });
+    expect(fixture.innerHTML).toBe("Achild");
+
+    root.current.template = "B";
+    await nextTick();
+    expect(fixture.innerHTML).toBe("Bchild");
+  });
+
+  test("component with an enumerable getter, t-call inside slot", async () => {
+    class Child extends Component {
+      static template = xml`<t t-slot="default"/>`;
+    }
+    class Parent extends Component {
+      static components = { Child };
+      static template = xml`<Child><t t-call="sub"/></Child>`;
+    }
+    // simulate adding a getter with patch in odoo: getter will be enumarable
+    Object.defineProperty(Parent.prototype, "foo", {
+      get() {
+        return 1;
+      },
+      enumerable: true,
+    });
+    const app = new App(Parent);
+    app.addTemplate("sub", `<div t-esc="foo"/>`);
+
+    await app.mount(fixture);
+    expect(fixture.innerHTML).toBe("<div>1</div>");
+  });
 });

tools/devtools/manifest-chrome.json

@@ -1,6 +1,6 @@
 {
   "name": "Owl devtools",
-  "version": "1.0",
+  "version": "1.1.1",
   "manifest_version": 3,
   "description": "Chrome devtools extension for Odoo Owl framework",
   "icons": {

tools/devtools/src/background.js

@@ -5,7 +5,7 @@ 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 Set();
+const activePanels = new Map();
 
 // Load the devtools global hook this way when running on manifest v3 chrome
 if (!IS_FIREFOX) {
@@ -75,8 +75,23 @@ browserInstance.runtime.onMessage.addListener(async (message, sender, sendRespon
     return true;
   } else if (message.type === "owlStatus") {
     setOwlStatus(message.data);
-    // Dummy message to test if the extension context is still valid
+    // Refresh panel connection timeout
   } else if (message.type === "keepAlive") {
+    const panel = activePanels.get(message.id);
+    if (panel) {
+      clearTimeout(panel.expirationTimeout);
+      panel.expirationTimeout = setTimeout(() => {
+        activePanels.delete(message.id);
+        panel.port.disconnect();
+      }, 750);
+    } else {
+      const port = browserInstance.runtime.connect({ name: "OwlDevtoolsPort_" + message.id });
+      const expirationTimeout = setTimeout(() => {
+        activePanels.delete(message.id);
+        port.disconnect();
+      }, 750);
+      activePanels.set(message.id, { port: port, expirationTimeout: expirationTimeout });
+    }
     return;
     // Open the devtools documentation in a new tab
   } else if (message.type === "openDoc") {
@@ -87,10 +102,15 @@ browserInstance.runtime.onMessage.addListener(async (message, sender, sendRespon
       }
     );
     return;
-    // Relay the received message to the devtools app
+    // Register a new port for the devtools panel
   } else if (message.type === "newDevtoolsPanel") {
-    const tab = await getActiveTabURL();
-    activePanels.add(tab);
+    const id = message.id;
+    const port = browserInstance.runtime.connect({ name: "OwlDevtoolsPort_" + id });
+    const expirationTimeout = setTimeout(() => {
+      activePanels.delete(id);
+      port.disconnect();
+    }, 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
   } else if (message.type === "getActiveTabURL") {
     getActiveTabURL().then((tab) => {
@@ -98,15 +118,13 @@ browserInstance.runtime.onMessage.addListener(async (message, sender, sendRespon
     });
     return true;
   } else {
-    const tab = await getActiveTabURL();
-    if (!activePanels.has(tab)) {
-      return;
+    const destinationPanel = activePanels.get(sender.tab.id);
+    if (destinationPanel) {
+      destinationPanel.port.postMessage(
+        message.data
+          ? { type: message.type, data: message.data, origin: message.origin }
+          : { type: message.type, origin: message.origin }
+      );
     }
-    const port = browserInstance.runtime.connect({ name: "OwlDevtoolsPort" });
-    port.postMessage(
-      message.data
-        ? { type: message.type, data: message.data, origin: message.origin }
-        : { type: message.type, origin: message.origin }
-    );
   }
 });

tools/devtools/src/devtools_app/devtools.js

@@ -27,7 +27,6 @@ function createPanelsIfOwl() {
         "../../assets/icon128.png",
         IS_FIREFOX ? "devtools_panel.html" : "devtools_app/devtools_panel.html"
       );
-      browserInstance.runtime.sendMessage({ type: "newDevtoolsPanel" });
     }
   );
 }

tools/devtools/src/devtools_app/devtools_window/components_tab/details_window/details_window.xml

@@ -72,7 +72,7 @@
         </t>
       </div>
     </div>
-    <div t-if="store.contextMenu.activeMenu === contextMenuId" class="custom-menu" t-attf-style="top: {{store.contextMenu.top}}; left: {{store.contextMenu.left}}" t-ref="contextmenu">
+    <div t-if="store.contextMenu.activeMenu === contextMenuId" class="custom-menu" t-ref="contextmenu">
       <ul class="my-1">
         <li t-on-click.stop="() => this.store.inspectComponent('source', store.activeComponent.path)" class="custom-menu-item py-1 px-4">Inspect source code</li>
         <t t-if="store.activeComponent.path.length !== 1">

tools/devtools/src/devtools_app/devtools_window/components_tab/details_window/object_tree_element/object_tree_element.xml

@@ -30,7 +30,7 @@
         </t>
       </div>
     </div>
-    <div t-if="store.contextMenu.activeMenu === contextMenuId" class="custom-menu" t-attf-style="top: {{store.contextMenu.top}}; left: {{store.contextMenu.left}}" t-ref="contextmenu">
+    <div t-if="store.contextMenu.activeMenu === contextMenuId" class="custom-menu" t-ref="contextmenu">
       <ul class="my-1">
         <li t-on-click="() => this.store.logObjectInConsole(this.props.object.path)" class="custom-menu-item py-1 px-4 text-nowrap">Store as global variable</li>
         <t t-if='props.object.contentType == "function"'>
@@ -38,8 +38,8 @@
         </t>
       </ul>
     </div>
-    <t t-if="props.object.toggled">
-      <t t-foreach="props.object.children" t-as="child" t-key="child.name">
+    <t t-if="props.object.toggled" t-key="contextMenuId">
+      <t t-foreach="props.object.children" t-as="child" t-key="child_index">
         <ObjectTreeElement t-if="props.object.objectType === 'subscription'" object="child" keys="props.keys"/>
         <ObjectTreeElement t-else="" object="child"/>
       </t>

tools/devtools/src/devtools_app/devtools_window/components_tab/tree_element/tree_element.js

@@ -1,9 +1,11 @@
 /** @odoo-module **/
 
-import { isElementInCenterViewport, minimizeKey } from "../../../../utils";
+import { isElementInCenterViewport, minimizeKey, IS_FIREFOX } 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 {
@@ -105,4 +107,30 @@ export class TreeElement extends Component {
       this.store.selectComponent(this.props.component.path);
     }
   }
+
+  // Adds the component name to the components toggle blacklist if not already present
+  // Else, remove it from the blacklist
+  toggleComponentToBlacklist() {
+    if (this.store.settings.componentsToggleBlacklist.has(this.props.component.name)) {
+      if (!this.props.component.toggled) {
+        this.props.component.toggled = !this.props.component.toggled;
+      }
+      this.store.settings.componentsToggleBlacklist.delete(this.props.component.name);
+      browserInstance.storage.local.set({
+        owlDevtoolsComponentsToggleBlacklist: Array.from(
+          this.store.settings.componentsToggleBlacklist
+        ),
+      });
+    } else {
+      if (this.props.component.toggled) {
+        this.props.component.toggled = !this.props.component.toggled;
+      }
+      this.store.settings.componentsToggleBlacklist.add(this.props.component.name);
+      browserInstance.storage.local.set({
+        owlDevtoolsComponentsToggleBlacklist: Array.from(
+          this.store.settings.componentsToggleBlacklist
+        ),
+      });
+    }
+  }
 }

tools/devtools/src/devtools_app/devtools_window/components_tab/tree_element/tree_element.xml

@@ -26,7 +26,7 @@
         <span t-if="props.component.depth">&gt;</span>
         <span class="version" t-else="">owl=<t t-esc="props.component.version"/></span>
       </div>
-      <div t-if="store.contextMenu.activeMenu === contextMenuId" class="custom-menu" t-attf-style="top: {{store.contextMenu.top}}; left: {{store.contextMenu.left}}" t-ref="contextmenu">
+      <div t-if="store.contextMenu.activeMenu === contextMenuId" class="custom-menu" t-ref="contextmenu">
         <ul class="my-1">
           <li t-on-click.stop="() => this.store.toggleComponentAndChildren(props.component, true)" class="custom-menu-item py-1 px-4">Expand children</li>
           <li t-on-click.stop="() => this.store.toggleComponentAndChildren(props.component, false)" class="custom-menu-item py-1 px-4">Fold all children</li>
@@ -43,6 +43,10 @@
           <t t-else="">
             <li t-on-click.stop="() => this.store.logObjectInConsole([...props.component.path])" class="custom-menu-item py-1 px-4">Store as global variable</li>
           </t>
+          <li t-on-click.stop="() => this.toggleComponentToBlacklist()" class="custom-menu-item py-1 px-4">
+            <t t-if="store.settings.componentsToggleBlacklist.has(props.component.name)">Don't fold component by default</t>
+            <t t-else="">Fold component by default</t>
+          </li>
         </ul>
       </div>
     </div>

tools/devtools/src/devtools_app/devtools_window/profiler_tab/event/event.xml

@@ -43,7 +43,7 @@
           </span>
         </div>
       </t>
-      <div t-if="store.contextMenu.activeMenu === componentContextMenuId" class="custom-menu" t-attf-style="top: {{store.contextMenu.top}}; left: {{store.contextMenu.left}}" t-ref="componentContextmenu">
+      <div t-if="store.contextMenu.activeMenu === componentContextMenuId" class="custom-menu" t-ref="componentContextmenu">
         <ul class="my-1">
           <li t-on-click.stop="() => this.store.inspectComponent('source', props.event.path)" class="custom-menu-item py-1 px-4">Inspect source code</li>
           <t t-if="props.event.path.length !== 1">

tools/devtools/src/devtools_app/devtools_window/profiler_tab/event_node/event_node.xml

@@ -28,14 +28,14 @@
         </span>
       </div>
     </div>
-    <div t-if="store.contextMenu.activeMenu === nodeContextMenuId" class="custom-menu" t-attf-style="top: {{store.contextMenu.top}}; left: {{store.contextMenu.left}}" t-ref="nodeContextMenu">
+    <div t-if="store.contextMenu.activeMenu === nodeContextMenuId" class="custom-menu" t-ref="nodeContextMenu">
       <ul class="my-1">
         <li t-on-click.stop="() => this.store.toggleEventAndChildren(props.event, true)" class="custom-menu-item py-1 px-4">Expand children</li>
         <li t-on-click.stop="() => this.store.toggleEventAndChildren(props.event, false)" class="custom-menu-item py-1 px-4">Fold all children</li>
         <li t-on-click.stop="() => this.store.foldDirectChildren(props.event)" class="custom-menu-item py-1 px-4">Fold direct children</li>
       </ul>
     </div>
-    <div t-if="store.contextMenu.activeMenu === componentContextMenuId" class="custom-menu" t-attf-style="top: {{store.contextMenu.top}}; left: {{store.contextMenu.left}}" t-ref="componentContextmenu">
+    <div t-if="store.contextMenu.activeMenu === componentContextMenuId" class="custom-menu" t-ref="componentContextmenu">
       <ul class="my-1">
         <li t-on-click.stop="() => this.store.inspectComponent('source', props.event.path)" class="custom-menu-item py-1 px-4">Inspect source code</li>
         <t t-if="props.event.path.length !== 1">

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

@@ -11,10 +11,9 @@ export const store = reactive({
     expandByDefault: true,
     toggleOnSelected: false,
     darkmode: false,
+    componentsToggleBlacklist: new Set(),
   },
   contextMenu: {
-    top: 0,
-    left: 0,
     id: 0,
     activeMenu: -1,
     // Opens the context menu corresponding with the given menu html element
@@ -29,9 +28,9 @@ export const store = reactive({
       if (y + menuHeight > window.innerHeight) {
         y = window.innerHeight - menuHeight;
       }
-      this.left = x + "px";
+      menu.style.left = x + "px";
       // Need 25px offset because of the main navbar from the browser devtools
-      this.top = y - 25 + "px";
+      menu.style.top = y - 25 + "px";
     },
     // Close the currently displayed context menu
     close() {
@@ -110,7 +109,7 @@ export const store = reactive({
     );
     this.apps = apps ? apps : [];
     if (!fromOld && this.settings.expandByDefault) {
-      this.apps.forEach((tree) => expandNodes(tree));
+      this.apps.forEach((tree) => expandNodes(tree, true));
     }
     const component = await evalFunctionInWindow(
       "getComponentDetails",
@@ -503,13 +502,18 @@ export const store = reactive({
   },
 
   // Reset all the relevant data about the page currently stored
-  resetData() {
+  async resetData() {
+    await loadSettings();
     this.loadComponentsTree(false);
     this.events = [];
     this.eventsTree = [];
     this.activeRecorder = false;
     evalFunctionInWindow("toggleEventsRecording", [false, 0]);
+    this.traceRenderings = false;
     evalFunctionInWindow("toggleTracing", [false]);
+    this.traceSubscriptions = false;
+    evalFunctionInWindow("toggleSubscriptionTracing", [false]);
+    this.updateIFrameList();
   },
 
   // Triggers manually the rendering of the selected component
@@ -605,7 +609,7 @@ export const store = reactive({
   // Refresh the whole extension
   async refreshExtension() {
     await loadScripts();
-    this.resetData();
+    await this.resetData();
   },
 
   // Toggle dark mode in the extension and store result in the storage
@@ -616,7 +620,7 @@ export const store = reactive({
     } else {
       document.querySelector("html").classList.remove("dark-mode");
     }
-    browserInstance.storage.local.set({ owl_devtools_dark_mode: this.settings.darkMode });
+    browserInstance.storage.local.set({ owlDevtoolsDarkMode: this.settings.darkMode });
   },
 
   openDocumentation() {
@@ -636,6 +640,8 @@ async function init() {
 
   evalInWindow("__OWL__DEVTOOLS_GLOBAL_HOOK__.devtoolsId = " + store.devtoolsId + ";");
 
+  await loadSettings();
+
   // We want to load the base components tree when the devtools tab is first opened
   store.loadComponentsTree(false);
 
@@ -651,114 +657,99 @@ async function init() {
     evalFunctionInWindow("toggleEventsRecording", [false, 0], frame);
   }
 
-  loadSettings();
-}
+  browserInstance.runtime.sendMessage({ type: "newDevtoolsPanel", id: store.devtoolsId });
 
-// Heartbeat message to test whether the extension context is still valid or not
-setInterval(() => {
-  if (store.extensionContextStatus) {
-    try {
-      browserInstance.runtime.sendMessage({ type: "keepAlive" });
-    } catch (e) {
-      store.extensionContextStatus = false;
+  // Heartbeat message to test whether the extension context is still valid or not
+  setInterval(() => {
+    if (store.extensionContextStatus) {
+      try {
+        browserInstance.runtime.sendMessage({ type: "keepAlive", id: store.devtoolsId });
+      } catch (e) {
+        store.extensionContextStatus = false;
+      }
     }
-  }
-}, 1000);
+  }, 500);
+}
 
 let flushRendersTimeout = false;
 // Connect to the port to communicate to the background script
 browserInstance.runtime.onConnect.addListener((port) => {
-  if (!port.name === "OwlDevtoolsPort") {
-    return;
-  }
-  port.onMessage.addListener(async (msg) => {
-    // Reload the tree after checking if the scripts are loaded when this message is received
-    if (msg.type === "Reload") {
-      const tab = await getTabURL();
-      // Since this message is sent to all devtools windows, only take it into account when this is the active tab
-      if (tab !== store.devtoolsId) {
-        return;
+  if (port.name === "OwlDevtoolsPort_" + store.devtoolsId) {
+    port.onMessage.addListener(async (msg) => {
+      // Reload the tree after checking if the scripts are loaded when this message is received
+      if (msg.type === "Reload") {
+        store.owlStatus = await evalInWindow("window.__OWL__DEVTOOLS_GLOBAL_HOOK__ !== undefined;");
+        if (store.owlStatus) {
+          evalInWindow("__OWL__DEVTOOLS_GLOBAL_HOOK__.devtoolsId = " + store.devtoolsId + ";");
+          await store.resetData();
+        }
       }
-      store.owlStatus = await evalInWindow("window.__OWL__DEVTOOLS_GLOBAL_HOOK__ !== undefined;");
-      if (store.owlStatus) {
-        evalInWindow("__OWL__DEVTOOLS_GLOBAL_HOOK__.devtoolsId = " + store.devtoolsId + ";");
-        store.resetData();
-      }
-    }
-    // Received when a frame has been delayed when loading the scripts due to owl being lazy loaded
-    if (msg.type === "FrameReady") {
-      const tab = await getTabURL();
-      // Same as for the reload message
-      if (tab !== store.devtoolsId) {
-        return;
-      }
-      store.updateIFrameList();
-      store.owlStatus = true;
-      store.resetData();
-    }
-    // We need to reload the components tree when the set of apps in the page is modified
-    if (msg.type === "RefreshApps") {
-      store.loadComponentsTree(true);
-    }
-    // Filter out the messages that are not destined to this devtools tab. The messages above may be sent before
-    // the devtoolsId is set
-    if (msg.origin.id !== store.devtoolsId) {
-      return;
-    }
-    // When message of type Flush is received, overwrite the component tree with the new one from page
-    // A flush message is sent everytime a component is rendered on the page
-    if (msg.type === "Flush") {
-      if (msg.origin.frame !== store.activeFrame) {
-        return;
-      }
-      if (!(Array.isArray(msg.data) && msg.data.every((val) => typeof val === "string"))) {
-        return;
-      }
-      // This determines which components will have a short highlight effect in the tree to indicate they have been rendered
-      store.renderPaths.add(JSON.stringify(msg.data));
-      clearTimeout(flushRendersTimeout);
-      flushRendersTimeout = setTimeout(() => {
-        store.renderPaths.clear();
-      }, 100);
-      store.loadComponentsTree(true);
-    }
-    // Select the component based on the path received with the SelectElement message
-    if (msg.type === "SelectElement") {
-      if (!(Array.isArray(msg.data) && msg.data.every((val) => typeof val === "string"))) {
-        return;
-      }
-      store.selectComponent(msg.data);
-    }
-    // Stop the DOM element selector tool upon receiving the StopSelector message
-    if (msg.type === "StopSelector") {
-      store.componentSearch.activeSelector = false;
-    }
-
-    // Logic for recording an event when the event message is received
-    if (msg.type === "Event") {
-      let events = msg.data;
-      loadEvents(events);
-    }
-
-    // If we know a new iframe has been added to the page, load scripts into it and update the
-    // frames list if it has been directly loaded.
-    if (msg.type === "NewIFrame") {
-      const isLoaded = await loadScripts(msg.data);
-      if (isLoaded) {
+      // Received when a frame has been delayed when loading the scripts due to owl being lazy loaded
+      if (msg.type === "FrameReady") {
         store.updateIFrameList();
+        store.owlStatus = true;
+        await store.resetData();
       }
-    }
-  });
+      // We need to reload the components tree when the set of apps in the page is modified
+      if (msg.type === "RefreshApps") {
+        store.loadComponentsTree(true);
+      }
+      // When message of type Flush is received, overwrite the component tree with the new one from page
+      // A flush message is sent everytime a component is rendered on the page
+      if (msg.type === "Flush") {
+        if (msg.origin.frame !== store.activeFrame) {
+          return;
+        }
+        if (!(Array.isArray(msg.data) && msg.data.every((val) => typeof val === "string"))) {
+          return;
+        }
+        // This determines which components will have a short highlight effect in the tree to indicate they have been rendered
+        store.renderPaths.add(JSON.stringify(msg.data));
+        clearTimeout(flushRendersTimeout);
+        flushRendersTimeout = setTimeout(() => {
+          store.renderPaths.clear();
+        }, 100);
+        store.loadComponentsTree(true);
+      }
+      // Select the component based on the path received with the SelectElement message
+      if (msg.type === "SelectElement") {
+        if (!(Array.isArray(msg.data) && msg.data.every((val) => typeof val === "string"))) {
+          return;
+        }
+        store.selectComponent(msg.data);
+      }
+      // Stop the DOM element selector tool upon receiving the StopSelector message
+      if (msg.type === "StopSelector") {
+        store.componentSearch.activeSelector = false;
+      }
+
+      // Logic for recording an event when the event message is received
+      if (msg.type === "Event") {
+        let events = msg.data;
+        loadEvents(events);
+      }
+
+      // If we know a new iframe has been added to the page, load scripts into it and update the
+      // frames list if it has been directly loaded.
+      if (msg.type === "NewIFrame") {
+        const isLoaded = await loadScripts(msg.data);
+        if (isLoaded) {
+          store.updateIFrameList();
+        }
+      }
+    });
+  }
 });
 
 // Load all settings from the chrome sync storage
 async function loadSettings() {
   let storage = await browserInstance.storage.local.get();
-  if (storage.owl_devtools_dark_mode === undefined) {
+  // Darkmode
+  if (storage.owlDevtoolsDarkMode === undefined) {
     // Load dark mode based on the global settings of the chrome devtools
     darkMode = browserInstance.devtools.panels.themeName === "dark";
   } else {
-    darkMode = storage.owl_devtools_dark_mode;
+    darkMode = storage.owlDevtoolsDarkMode;
   }
   store.settings.darkMode = darkMode;
   if (darkMode) {
@@ -766,6 +757,12 @@ async function loadSettings() {
   } else {
     document.querySelector("html").classList.remove("dark-mode");
   }
+  // Components toggle blacklist
+  if (storage.owlDevtoolsComponentsToggleBlacklist !== undefined) {
+    store.settings.componentsToggleBlacklist = new Set(
+      storage.owlDevtoolsComponentsToggleBlacklist
+    );
+  }
 }
 
 // Function to handle and store a batch of events coming from the page
@@ -885,10 +882,14 @@ function highlightChildren(component) {
 }
 
 // Expand the node given in entry and all of its children
-function expandNodes(node) {
-  node.toggled = true;
+function expandNodes(node, blacklist = false) {
+  if (blacklist && store.settings.componentsToggleBlacklist.has(node.name)) {
+    node.toggled = false;
+  } else {
+    node.toggled = true;
+  }
   for (const child of node.children) {
-    expandNodes(child);
+    expandNodes(child, blacklist);
   }
 }
 

tools/devtools/src/page_scripts/owl_devtools_global_hook.js

@@ -11,14 +11,16 @@
       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
       this.addedElements = [];
       // To keep track of the succession order of the render events
       this.eventId = 0;
-      // Will be reset as soon as a new devtools owl tab is opened. Allows to avoid sending messages to the wrong devtools tab later on
-      this.devtoolsId = 0;
       // Set to keep track of the frame on which this script is loaded
       this.frame = "top";
       // Allows to launch a message each time an iframe html element is added to the page
@@ -38,7 +40,6 @@
                   source: "owl-devtools",
                   type: "NewIFrame",
                   data: addedNode.contentDocument.location.href,
-                  origin: { id: self.devtoolsId },
                 });
               }
             }
@@ -47,10 +48,11 @@
       });
       iFrameObserver.observe(document.body, { subtree: true, childList: true });
       this.appsPatched = false;
+      this.destroyPatched = false;
       this.patchAppsSetMethods();
-      setTimeout(() => {
+      if (this.apps.size > 0) {
         this.patchAppMethods();
-      }, 200);
+      }
       this.recordEvents = false;
       this.traceRenderings = false;
       this.traceSubscriptions = false;
@@ -177,6 +179,26 @@
       const self = this;
       this.apps.add = function () {
         originalAdd.call(this, ...arguments);
+        if (!self.destroyPatched) {
+          const newApp = arguments[0];
+          // It is not a given that apps have a root node at creation so we need to wait
+          if (newApp.root) {
+            self.patchDestroyMethod(newApp.root);
+          } else {
+            let root = null;
+            Object.defineProperty(newApp, "root", {
+              get() {
+                return root;
+              },
+              set(value) {
+                root = value;
+                if (!self.destroyPatched) {
+                  self.patchDestroyMethod(root);
+                }
+              },
+            });
+          }
+        }
         self.patchAppMethods();
         window.top.postMessage({
           source: "owl-devtools",
@@ -192,25 +214,56 @@
       };
     }
 
+    patchDestroyMethod(root) {
+      if (!this.destroyPatched) {
+        // Signals when a component is destroyed
+        const originalDestroy = root.constructor.prototype._destroy;
+        const self = this;
+        root.constructor.prototype._destroy = function () {
+          if (self.recordEvents) {
+            const path = self.getComponentPath(this);
+            const event = {
+              type: "destroy",
+              component: this.name,
+              key: this.parentKey,
+              path: path,
+              time: 0,
+              id: self.eventId++,
+            };
+            self.eventsBatch.push(event);
+            const before = performance.now();
+            originalDestroy.call(this, ...arguments);
+            event.time = performance.now() - before;
+          } else {
+            originalDestroy.call(this, ...arguments);
+          }
+        };
+        this.destroyPatched = true;
+      }
+    }
+
     // Modify methods of each app so that it triggers messages on each flush and component render
     patchAppMethods() {
       if (this.appsPatched) {
         return;
       }
-      let app;
-      for (const appItem of this.apps) {
-        if (appItem.root) {
-          app = appItem;
-        }
-      }
-      // We don't want to bother patching the apps methods if none have components inside
-      if (!app) {
-        return;
+      let app = this.apps.values().next().value;
+      const self = this;
+      if (app.root) {
+        this.patchDestroyMethod(app.root);
+      } else {
+        const originalMount = app.constructor.prototype.mount;
+        app.constructor.prototype.mount = async function (...args) {
+          const result = await originalMount.call(this, ...args);
+          const root = this.root;
+          self.patchDestroyMethod(root);
+          app.constructor.prototype.mount = originalMount;
+          return result;
+        };
       }
       const originalFlush = app.scheduler.constructor.prototype.flush;
       let inFlush = false;
       let _render = false;
-      const self = this;
       app.scheduler.constructor.prototype.flush = function () {
         // Used to know when a render is triggered inside the flush method or not
         inFlush = true;
@@ -223,7 +276,7 @@
               source: "owl-devtools",
               type: "Flush",
               data: path,
-              origin: { id: self.devtoolsId, frame: self.frame },
+              origin: { frame: self.frame },
             });
           }
         });
@@ -332,32 +385,10 @@
             source: "owl-devtools",
             type: "Event",
             data: self.eventsBatch,
-            origin: { id: self.devtoolsId },
           });
           self.eventsBatch = [];
         }
       };
-      // Signals when a component is destroyed
-      const originalDestroy = app.root.constructor.prototype._destroy;
-      app.root.constructor.prototype._destroy = function () {
-        if (self.recordEvents) {
-          const path = self.getComponentPath(this);
-          const event = {
-            type: "destroy",
-            component: this.name,
-            key: this.parentKey,
-            path: path,
-            time: 0,
-            id: self.eventId++,
-          };
-          self.eventsBatch.push(event);
-          const before = performance.now();
-          originalDestroy.call(this, ...arguments);
-          event.time = performance.now() - before;
-        } else {
-          originalDestroy.call(this, ...arguments);
-        }
-      };
       this.appsPatched = true;
     }
 
@@ -373,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++;
@@ -609,7 +640,6 @@
           source: "owl-devtools",
           type: "SelectElement",
           data: path,
-          origin: { id: this.devtoolsId },
         });
       }
     };
@@ -637,7 +667,6 @@
       window.top.postMessage({
         source: "owl-devtools",
         type: "StopSelector",
-        origin: { id: this.devtoolsId },
       });
     };
 
@@ -703,7 +732,7 @@
             }
         }
         if (obj) {
-          obj = owl.toRaw(obj);
+          obj = this.toRaw(obj);
         }
       }
       return obj;
@@ -811,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";
@@ -987,19 +1016,6 @@
             children.push(entries);
             index++;
           }
-          const size = this.serializeObjectChild(
-            obj,
-            { type: "item", value: "size", childIndex: children.length },
-            depth,
-            objType,
-            path,
-            oldBranch.children[index],
-            oldTree
-          );
-          if (size) {
-            children.push(size);
-            index++;
-          }
           Reflect.ownKeys(obj).forEach((key) => {
             const child = this.serializeObjectChild(
               obj,
@@ -1376,7 +1392,7 @@
         }
         getter.hasChildren = false;
       } else {
-        obj = owl.toRaw(obj);
+        obj = this.toRaw(obj);
         switch (true) {
           case obj instanceof Map:
             getter.contentType = "map";
@@ -1471,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") {
@@ -1748,6 +1764,6 @@
     false
   );
   checkOwlStatus();
-  // Indicates whether the scripts loaded successfully or not (useful when loaded with eval in iframes only)
+  // Indicates whether the scripts loaded successfully or not (only useful when loaded with eval in iframes)
   return window.__OWL__DEVTOOLS_GLOBAL_HOOK__ !== undefined;
 })();