Improved Script Inspector Attribute Parsing UX

package.json

@@ -89,6 +89,6 @@
     "typescript": "5.6.3"
   },
   "dependencies": {
-    "@playcanvas/attribute-parser": "^1.10.0"
+    "@playcanvas/attribute-parser": "^1.10.1"
   }
 }

sass/editor/_editor-asset-script-inspector.scss

@@ -1,3 +1,11 @@
+@use 'sass:color';
+
+$bright-red: #e74c3c;
+$bright-yellow: #f1c40f;
+$status-info: #b1b8ba;
+$status-error: $bright-red;
+$status-warn: $bright-yellow;
+
 .script-asset-inspector-container,
 .script-asset-inspector-error-container {
     display: flex;
@@ -6,6 +14,49 @@
     margin: 6px;
 }
 
+.script-asset-inspector-attribute-error-container {
+    display: flex;
+    flex-direction: column;
+    border: none;
+    margin: 0;
+    background-color: #2c393c;
+
+}
+
+.pcui-label {
+    &.clickable-error {
+        cursor: pointer;
+        font-size: 11px;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+
+    &.pcui-error { // For simple errors
+        font-size: 11px;
+    }
+}
+
+.script-asset-inspector-script.pcui-error.clickable-error {
+    cursor: pointer;
+
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+.script-asset-inspector-attribute-error-title, .script-asset-inspector-attribute-warning-title {
+    font-family: inconsolatamedium, Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace;
+    font-weight: normal;
+    font-size: 12px;
+    cursor: pointer;
+}
+
+.script-asset-inspector-attribute-error-title:hover, .script-asset-inspector-attribute-warning-title:hover {
+    text-decoration: underline;
+}
+
 .script-asset-inspector-error-container > .pcui-label {
     white-space: normal;
 }
@@ -28,6 +79,7 @@
     white-space: normal;
 }
 
+
 .script-asset-inspector-attribute {
     flex-grow: 1;
     color: #b1b8ba;
@@ -43,3 +95,48 @@
 .script-asset-inspector-attribute:hover {
     background-color: #313e41;
 }
+
+.script-asset-inspector-warning {
+    color: $status-warn;
+}
+
+.script-asset-inspector-attribute-warning {
+    &::before {
+        @extend .font-icon;
+
+        content: '\E218';
+        margin-right: 6px;
+    }
+}
+
+.script-asset-inspector-attribute-warning.clickable-warning {
+    cursor: pointer;
+
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+.script-asset-inspector-attribute-error {
+    &::before {
+        @extend .font-icon;
+
+        content: '\E368';
+        margin-right: 6px;
+    }
+}
+
+// Tooltip warnings styling
+.warnings-title.script-asset-inspector-warning {
+    // Normal text color for the header
+}
+
+.warning-item.script-asset-inspector-warning {
+    color: var(--pcui-warning-color);
+    font-size: 11px;
+}
+
+.open-console {
+    text-decoration: underline;
+    cursor: pointer;
+}

src/code-editor/editor.ts

@@ -13,9 +13,10 @@ class CodeEditor extends Editor {
         this.once('loaded', () => {
             this.emit('start');
 
-            // Send an event to the opener
-            const openerOrigin = new URL(document.referrer).origin;
-            window.opener.postMessage('start', openerOrigin);
+            if (window.opener) {
+                const openerOrigin = new URL(document.referrer).origin;
+                window.opener.postMessage('start', openerOrigin);
+            }
 
             // if there is a merge in progress for our branch
             if (config.self.branch.merge && !config.self.branch.merge.conflict) {

src/editor/assets/handle-script-parse.ts

@@ -64,9 +64,6 @@ editor.once('load', () => {
                 const errors = checkForErrors(res);
                 if (errors) {
                     editor.call('status:error', `There was an error while parsing script asset '${asset.get('name')}'`);
-                    errors.forEach((error) => {
-                        console.error('Error parsing script asset', error);
-                    });
                     callback?.(null, res);
                     return;
                 }

src/editor/console/console.ts

@@ -109,7 +109,6 @@ editor.on('load', () => {
             return;
         }
         await addLog('error', msg, verboseMsg, onclick);
-        editor.call('status:error', msg);
     });
     editor.method('console:history', () => {
         pendingHistory = true;