Oe property work

tools/online_editor/src/index.ts

@@ -337,6 +337,14 @@ function main() {
         editor.onNewPropertyData = (binding_text_provider, p) => {
           properties.set_properties(binding_text_provider, p);
         };
+
+        properties.on_goto_position = (
+          uri: string,
+          pos: TextPosition | TextRange,
+        ) => {
+          editor.goto_position(uri, pos);
+        };
+
         return properties;
       },
       { mode: "tab-after", ref: "Welcome" },

tools/online_editor/src/lsp_integration.ts

@@ -1,7 +1,7 @@
 // Copyright © SixtyFPS GmbH <info@slint-ui.com>
 // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial
 
-import { Position, Range } from 'vscode-languageserver-types'
+import { Position, Range } from "vscode-languageserver-types";
 
 export interface DeclarationPosition {
   uri: string;
@@ -15,6 +15,7 @@ export interface DefinitionPosition {
 
 export interface Property {
   name: string;
+  group: string;
   type_name: string;
   declared_at: DeclarationPosition | null;
   defined_at: DefinitionPosition | null;

tools/online_editor/src/properties_widget.ts

@@ -3,6 +3,8 @@
 
 // cSpell: ignore lumino
 
+import { GotoPositionCallback, TextRange } from "./text";
+
 import { Message } from "@lumino/messaging";
 import { Widget } from "@lumino/widgets";
 
@@ -13,7 +15,32 @@ import {
   PropertyQuery,
 } from "./lsp_integration";
 
+const TYPE_PATTERN = /^[a-z-]+$/i;
+
+function type_class_for_typename(name: string): string {
+  if (name === "callback" || name.slice(0, 9) === "callback(") {
+    return "type-callback";
+  }
+  if (name.slice(0, 5) === "enum ") {
+    return "type-enum";
+  }
+  if (name.slice(0, 9) === "function(") {
+    return "type-function";
+  }
+  if (name === "element ref") {
+    return "type-element-ref";
+  }
+  if (TYPE_PATTERN.test(name)) {
+    return "type-" + name;
+  }
+  return "type-unknown";
+}
+
 export class PropertiesWidget extends Widget {
+  #onGotoPosition: GotoPositionCallback = (_u, _p) => {
+    return;
+  };
+
   static createNode(): HTMLElement {
     const node = document.createElement("div");
     const content = document.createElement("div");
@@ -54,6 +81,10 @@ export class PropertiesWidget extends Widget {
     this.dispose();
   }
 
+  set on_goto_position(callback: GotoPositionCallback) {
+    this.#onGotoPosition = callback;
+  }
+
   protected get contentNode(): HTMLDivElement {
     return this.node.getElementsByTagName("div")[0] as HTMLDivElement;
   }
@@ -85,12 +116,27 @@ export class PropertiesWidget extends Widget {
   private populate_table(
     binding_text_provider: BindingTextProvider,
     properties: Property[],
+    uri: string,
   ) {
     const table = this.tableNode;
 
+    let current_group = "";
+
     table.innerHTML = "";
 
     for (const p of properties) {
+      if (p.group !== current_group) {
+        const group_header = document.createElement("tr");
+        group_header.className = "group-header";
+
+        const group_cell = document.createElement("td");
+        group_cell.innerText = p.group;
+        group_cell.setAttribute("colspan", "2");
+        current_group = p.group;
+
+        group_header.appendChild(group_cell);
+        table.appendChild(group_header);
+      }
       const row = document.createElement("tr");
       row.className = "property";
       if (p.declared_at == null) {
@@ -105,13 +151,10 @@ export class PropertiesWidget extends Widget {
       name_field.innerText = p.name;
       row.appendChild(name_field);
 
-      const type_field = document.createElement("td");
-      type_field.className = "type-column";
-      type_field.innerText = p.type_name;
-      row.appendChild(type_field);
-
       const value_field = document.createElement("td");
       value_field.className = "value-column";
+      value_field.classList.add(type_class_for_typename(p.type_name));
+      value_field.setAttribute("title", p.type_name);
       if (p.defined_at != null) {
         value_field.innerText = binding_text_provider.binding_text(
           p.defined_at,
@@ -120,6 +163,17 @@ export class PropertiesWidget extends Widget {
         value_field.innerText = "";
       }
       row.appendChild(value_field);
+      if (p.defined_at != null) {
+        const r = p.defined_at.expression_range;
+        row.addEventListener("click", () =>
+          this.#onGotoPosition(uri, {
+            startLineNumber: r.start.line + 1,
+            startColumn: r.start.character + 1,
+            endLineNumber: r.end.line + 1,
+            endColumn: r.end.character + 1,
+          } as TextRange),
+        );
+      }
 
       table.appendChild(row);
     }
@@ -130,6 +184,10 @@ export class PropertiesWidget extends Widget {
     properties: PropertyQuery,
   ) {
     this.set_header(properties.element);
-    this.populate_table(binding_text_provider, properties.properties);
+    this.populate_table(
+      binding_text_provider,
+      properties.properties,
+      properties.source_uri,
+    );
   }
 }

tools/online_editor/styles/content.css

@@ -124,10 +124,6 @@
   white-space: nowrap;
 }
 
-.properties-editor .type-column {
-  white-space: nowrap;
-}
-
 .properties-editor .value-column {
   width: 90%;
 }
@@ -136,10 +132,21 @@
   width: 100%;
 }
 
+.properties-editor .properties-table .group-header td {
+  background-color: #000000;
+  color: #ffffff;
+  font-weight: bold;
+}
+
 .properties-editor .properties-table .undefined {
   background-color: #b0b0b0;
 }
 
+.properties-editor .value-column.type-unknown:before {
+  content: "??? ";
+  padding: 2px;
+}
+
 .welcome > div {
   padding: 1ex
 }