[TASK] Optimize the tree of the form editor

- remove linebreak in root node
  -> instead use text-overflow: ellipsis
- fix indentation of tree elements
  -> move triangles indicating subtrees to the left
- changed tooltip message to only show "id = <element-id>"

Resolves: #85042
Releases: master
Change-Id: I2621974c2688ac5e03a7e39e8c4f6ad94e15e9a4
Reviewed-on: https://review.typo3.org/57007


Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Susanne Moog <susanne.moog@typo3.org>
Tested-by: Susanne Moog <susanne.moog@typo3.org>
Reviewed-by: Ralf Zimmermann <ralf.zimmermann@tritum.de>
Tested-by: Ralf Zimmermann <ralf.zimmermann@tritum.de>

Build/Resources/Public/Sass/form.scss

@@ -213,6 +213,13 @@ body {
         }
     }
 
+    #t3-form-navigation-component-tree-root {
+        width: 90%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
     .tree li > div:hover,
     .t3-form-form-element-selected,
     #t3-form-navigation-component-tree-root-container:hover,
@@ -250,6 +257,18 @@ body {
             opacity: 0;
         }
     }
+
+    .mjs-nestedSortable-branch {
+        span[data-identifier="treeExpander"] {
+            margin-left: -1.7em;
+        }
+    }
+
+    .mjs-nestedSortable-leaf {
+        span.t3-form-icon {
+            margin-left: initial;
+        }
+    }
 }
 
 //

typo3/sysext/form/Resources/Public/JavaScript/Backend/FormEditor/TreeComponent.js

@@ -67,7 +67,7 @@ define(['jquery',
           vertical: 'M0 0 V20 H0',
           hidden: 'M0 0 V0 H0'
         },
-        width: 15
+        width: 20
       }
     };
 
@@ -242,7 +242,7 @@ define(['jquery',
         expanderItem.after(
           $(icon).addClass(getHelper().getDomElementClassName('icon'))
             .tooltip({
-              title: 'identifier: ' + formElement.get('identifier'),
+              title: 'id = ' + formElement.get('identifier'),
               placement: 'right'
             })
         );