chore(Storybok): Inspection tool - more readable component names

storybook/src/Storybook/InspectionItemsList.qml

@@ -9,9 +9,9 @@ ListView {
     readonly property color nonVisualItemColor: "black"
     readonly property color selectionColor: "red"
 
-    delegate: Text {
+    delegate: Label {
         width: ListView.view.width
-        height: 30
+        height: implicitHeight * 1.5
 
         text: " ".repeat(model.level * 4) + " " + model.name
 

storybook/src/Storybook/InspectionUtils.qml

@@ -2,6 +2,7 @@ pragma Singleton
 
 import QtQml 2.15
 import QtQuick 2.15
+import QtQuick.Controls 2.15
 
 QtObject {
     function isVisual(item) {
@@ -28,7 +29,7 @@ QtObject {
         return fullName
     }
 
-    function simpleName(item) {
+    function baseTypeName(item) {
         if (item instanceof Text)
             return "Text"
         if (item instanceof Rectangle)
@@ -42,14 +43,29 @@ QtObject {
         if (item instanceof SpriteSequence)
             return "SpriteSequence"
 
-        const name = baseName(item)
+        if (item instanceof Control)
+            return "Control"
 
+        return ""
+    }
+
+    function trimQQuickPrefix(name) {
         if (name.startsWith("QQuick"))
             return name.substring(6)
 
         return name
     }
 
+    function simpleName(item) {
+        const name = trimQQuickPrefix(baseName(item))
+        const base = baseTypeName(item)
+
+        if (base)
+            return `${name} [${base}]`
+
+        return name
+    }
+
     function findItemsByTypeName(root, typeName) {
         const items = []
         const stack = [root]