[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,36 +1026,40 @@
           break;
         case "object":
         case "function":
-          Reflect.ownKeys(obj).forEach((key) => {
+          Reflect.ownKeys(obj)
-            if (
+            .sort(compareKeys)
-              key !== "__proto__" &&
+            .forEach((key) => {
-              Object.getOwnPropertyDescriptor(obj, key).hasOwnProperty("get")
+              if (
-            ) {
+                key !== "__proto__" &&
-              let child = {
+                Object.getOwnPropertyDescriptor(obj, key).hasOwnProperty("get")
-                name: key,
+              ) {
-                depth: depth,
+                let child = {
-                toggled: false,
+                  name: key,
-                objectType: objType,
+                  depth: depth,
-                path: [...path, { type: "getter", value: key, childIndex: children.length }],
+                  toggled: false,
-                contentType: "getter",
+                  objectType: objType,
-                content: "(...)",
+                  path: [...path, { type: "getter", value: key, childIndex: children.length }],
-                hasChildren: false,
+                  contentType: "getter",
-                children: [],
+                  content: "(...)",
-              };
+                  hasChildren: false,
-              children.push(child);
+                  children: [],
-            }
+                };
-            const child = this.serializeObjectChild(
+                children.push(child);
-              obj,
+              }
-              { type: "item", value: key, childIndex: children.length },
+              const child = this.serializeObjectChild(
-              depth,
+                obj,
-              objType,
+                { type: "item", value: key, childIndex: children.length },
-              path,
+                depth,
-              oldBranch?.children[index],
+                objType,
-              oldTree
+                path,
-            );
+                oldBranch?.children[index],
-            if (child) children.push(child);
+                oldTree
-            index++;
+              );
-          });
+              if (child) {
+                children.push(child);
+              }
+              index++;
+            });
       }
       let proto = Object.getPrototypeOf(obj);
       while (proto) {
@@ -1155,42 +1159,46 @@
       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)
-        let oldBranch = oldTree?.props.children[component.props.children.length];
+        .sort(compareKeys)
-        const property = this.serializeObjectChild(
+        .forEach((key) => {
-          props,
+          let oldBranch = oldTree?.props.children[component.props.children.length];
-          { type: "item", value: key, childIndex: component.props.children.length },
+          const property = this.serializeObjectChild(
-          0,
+            props,
-          "props",
+            { type: "item", value: key, childIndex: component.props.children.length },
-          propsPath,
+            0,
-          oldBranch,
+            "props",
-          oldTree
+            propsPath,
-        );
+            oldBranch,
-        if (property) {
+            oldTree
-          component.props.children.push(property);
+          );
-        }
+          if (property) {
-      });
+            component.props.children.push(property);
+          }
+        });
       // Load env of the component
       const env = isApp ? node.env : node.component.env;
       component.env = { toggled: oldTree ? oldTree.env.toggled : false, children: [] };
       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)
-        let oldBranch = oldTree?.env.children[component.env.children.length];
+        .sort(compareKeys)
-        const envElement = this.serializeObjectChild(
+        .forEach((key) => {
-          env,
+          let oldBranch = oldTree?.env.children[component.env.children.length];
-          { type: "item", value: key, childIndex: component.env.children.length },
+          const envElement = this.serializeObjectChild(
-          0,
+            env,
-          "env",
+            { type: "item", value: key, childIndex: component.env.children.length },
-          envPath,
+            0,
-          oldBranch,
+            "env",
-          oldTree
+            envPath,
-        );
+            oldBranch,
-        if (envElement) {
+            oldTree
-          component.env.children.push(envElement);
+          );
-        }
+          if (envElement) {
-      });
+            component.env.children.push(envElement);
+          }
+        });
       // Load env getters
       let obj = Object.getPrototypeOf(env);
       Reflect.ownKeys(obj).forEach((key) => {
@@ -1229,23 +1237,25 @@
       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)
-        if (!["env", "props"].includes(key)) {
+        .sort(compareKeys)
-          let oldBranch = oldTree?.instance.children[component.instance.children.length];
+        .forEach((key) => {
-          const instanceElement = this.serializeObjectChild(
+          if (!["env", "props"].includes(key)) {
-            instance,
+            let oldBranch = oldTree?.instance.children[component.instance.children.length];
-            { type: "item", value: key, childIndex: component.instance.children.length },
+            const instanceElement = this.serializeObjectChild(
-            0,
+              instance,
-            "instance",
+              { type: "item", value: key, childIndex: component.instance.children.length },
-            instancePath,
+              0,
-            oldBranch,
+              "instance",
-            oldTree
+              instancePath,
-          );
+              oldBranch,
-          if (instanceElement) {
+              oldTree
-            component.instance.children.push(instanceElement);
+            );
+            if (instanceElement) {
+              component.instance.children.push(instanceElement);
+            }
           }
-        }
+        });
-      });
       // Load instance getters
       obj = Object.getPrototypeOf(instance);
       while (obj) {
@@ -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__) {