[IMP] devtools: sort object keys in alphabetical order

Some big objects are quite hard to read because keys are sorted by
order of definition inside the object. It is better to sort them in
alphabetical order as is done in the base devtools.

tools/devtools/src/page_scripts/owl_devtools_global_hook.js

@@ -1026,7 +1026,9 @@
           break;
         case "object":
         case "function":
-          Reflect.ownKeys(obj).forEach((key) => {
+          Reflect.ownKeys(obj)
+            .sort(compareKeys)
+            .forEach((key) => {
               if (
                 key !== "__proto__" &&
                 Object.getOwnPropertyDescriptor(obj, key).hasOwnProperty("get")
@@ -1053,7 +1055,9 @@
                 oldBranch?.children[index],
                 oldTree
               );
-            if (child) children.push(child);
+              if (child) {
+                children.push(child);
+              }
               index++;
             });
       }
@@ -1155,7 +1159,9 @@
       const propsPath = isApp
         ? [...path, { type: "item", value: "props" }]
         : [...path, { type: "item", value: "component" }, { type: "item", value: "props" }];
-      Reflect.ownKeys(props).forEach((key) => {
+      Reflect.ownKeys(props)
+        .sort(compareKeys)
+        .forEach((key) => {
           let oldBranch = oldTree?.props.children[component.props.children.length];
           const property = this.serializeObjectChild(
             props,
@@ -1176,7 +1182,9 @@
       const envPath = isApp
         ? [...path, { type: "item", value: "env" }]
         : [...path, { type: "item", value: "component" }, { type: "item", value: "env" }];
-      Reflect.ownKeys(env).forEach((key) => {
+      Reflect.ownKeys(env)
+        .sort(compareKeys)
+        .forEach((key) => {
           let oldBranch = oldTree?.env.children[component.env.children.length];
           const envElement = this.serializeObjectChild(
             env,
@@ -1229,7 +1237,9 @@
       const instance = isApp ? node : node.component;
       component.instance = { toggled: oldTree ? oldTree.instance.toggled : true, children: [] };
       const instancePath = isApp ? path : [...path, { type: "item", value: "component" }];
-      Reflect.ownKeys(instance).forEach((key) => {
+      Reflect.ownKeys(instance)
+        .sort(compareKeys)
+        .forEach((key) => {
           if (!["env", "props"].includes(key)) {
             let oldBranch = oldTree?.instance.children[component.instance.children.length];
             const instanceElement = this.serializeObjectChild(
@@ -1747,6 +1757,19 @@
     }
   }
 
+  function compareKeys(a, b) {
+    const isSymbolA = typeof a === "symbol";
+    const isSymbolB = typeof b === "symbol";
+
+    if (isSymbolA && !isSymbolB) {
+      return 1; // Place Symbols at the end
+    } else if (!isSymbolA && isSymbolB) {
+      return -1; // Place non-Symbols at the beginning
+    } else {
+      return String(a).localeCompare(String(b)); // Sort other keys alphabetically
+    }
+  }
+
   function checkOwlStatus() {
     let owlStatus = 2;
     if (!window.__OWL__DEVTOOLS_GLOBAL_HOOK__) {