Explorer: added styling for nodes at root

of workspace

Added a tabbing for the child nodes of a root, to have a visual
difference and avoid confusion

packages/core/src/browser/tree/tree-widget.tsx

@@ -862,7 +862,7 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
             } else {
                 classNames.push(renderIndentGuides === 'onHover' ? 'hover' : 'always');
             }
-            const paddingLeft = this.props.leftPadding * depth;
+            const paddingLeft = this.getDepthPadding(depth);
             indentDivs.unshift(<div key={depth} className={classNames.join(' ')} style={{
                 paddingLeft: `${paddingLeft}px`
             }} />);
@@ -969,7 +969,7 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
     }
 
     protected getPaddingLeft(node: TreeNode, props: NodeProps): number {
-        return props.depth * this.props.leftPadding + (this.needsExpansionTogglePadding(node) ? this.props.expansionTogglePadding : 0);
+        return this.getDepthPadding(props.depth) + (this.needsExpansionTogglePadding(node) ? this.props.expansionTogglePadding : 0);
     }
 
     /**
@@ -1419,7 +1419,9 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
     protected toNodeDescription(node: TreeNode): string {
         return this.labelProvider.getLongName(node);
     }
-
+    protected getDepthPadding(depth: number): number {
+        return depth * this.props.leftPadding;
+    }
 }
 export namespace TreeWidget {
     /**

packages/filesystem/src/browser/file-tree/file-tree-widget.tsx

@@ -315,4 +315,8 @@ export class FileTreeWidget extends CompressedTreeWidget {
         return inflated;
     }
 
+    protected override getDepthPadding(depth: number): number {
+        // add additional depth so file nodes are rendered with padding in relation to the top level root node.
+        return super.getDepthPadding(depth + 1);
+    }
 }