Styling

Author: kishikawakatsumi

Public/css/popover.css

@@ -22,12 +22,6 @@
   font-size: larger;
 }
 
-.popover-content .badge {
-  margin: 0 8px 0 8px;
-  color: #808080;
-  background-color: #f2f2f2;
-}
-
 .popover-content dl {
   margin-top: 0;
   margin-bottom: 0;
@@ -50,12 +44,26 @@
   white-space: pre-line;
 }
 
+.popover-content .badge {
+  margin: 0 8px 0 8px;
+  color: #696969;
+  background-color: #f2f2f2;
+}
+
+.popover-content .badge.ref {
+  margin: 0 0 0 -0.65em;
+  color: #696969;
+  background-color: #f2f2f2;
+  font-size: 100%;
+  font-weight: normal;
+}
+
 .popover-content .badge.annotation {
   width: 48px;
   text-align: end;
   font-size: 0.8rem;
   margin: 0 8px 0 0;
   padding: 0;
-  color: #808080;
+  color: #696969;
   background-color: transparent;
 }

Public/js/structure_view.js

@@ -128,7 +128,9 @@ function makeSourceRangePopoverContent(data, list) {
 function makePropertyPopoverContent(property, list) {
   const details = (() => {
     const value = property.value;
-    if (value && value.text && value.kind) {
+    if (property.ref) {
+      return `<span class="badge ref">${property.ref}</span>`;
+    } else if (value && value.text && value.kind) {
       const text = stripHTMLTag(value.text);
       const kind = stripHTMLTag(value.kind);
       return `${text}<span class="badge rounded-pill">${kind}</span>`;

Sources/App/Controllers/TokenVisitor.swift

@@ -102,7 +102,8 @@ final class TokenVisitor: SyntaxRewriter {
               )
             case let value?:
               if let value = value as? SyntaxProtocol {
-                treeNode.structure.append(StructureProperty(name: key, value: StructureValue(text: "\(value.syntaxNodeType)(...)")))
+                let type = "\(value.syntaxNodeType)"
+                treeNode.structure.append(StructureProperty(name: key, value: StructureValue(text: "\(type)"), ref: "\(type)"))
               } else {
                 treeNode.structure.append(StructureProperty(name: key, value: StructureValue(text: "\(value)")))
               }

Sources/App/Models/TreeNode.swift

@@ -28,10 +28,12 @@ struct Range: Codable {
 struct StructureProperty: Codable {
   let name: String
   let value: StructureValue?
+  let ref: String?
 
-  init(name: String, value: StructureValue? = nil) {
+  init(name: String, value: StructureValue? = nil, ref: String? = nil) {
     self.name = name
     self.value = value
+    self.ref = ref
   }
 }