Svelte: clean up file tree (#63009)

After the changes to the file tree layout in #62981, we can clean up the styles and DOM a bit. These changes are partially in prep for experimenting with alternative "current path" representations. Comments inline.

client/web-sveltekit/src/lib/TreeNode.svelte

@@ -79,30 +79,25 @@
     data-node-id={nodeID}
     style="--tree-node-nested-level: {level}"
 >
-    <span bind:this={label} class="label" data-treeitem-label>
+    <span bind:this={label} class="label" data-treeitem-label class:expandable>
+        <Button variant="icon" on:click={handleScopeChange} data-scope-button>
+            <Icon svgPath={mdiImageFilterCenterFocusStrong} inline />
+        </Button>
         <!-- hide the open/close button to preserve alignment with expandable entries -->
         {#if expandable}
-            <span class="expandable-icon-container">
-                <span class="scope-container">
-                    <Button variant="icon" on:click={handleScopeChange}>
-                        <Icon svgPath={mdiImageFilterCenterFocusStrong} inline />
-                    </Button>
-                </span>
-
-                <!-- We have to stop even propagation because the tree root listens for click events for
+            <!-- We have to stop even propagation because the tree root listens for click events for
                  selecting items. We don't want the item to be selected when the open/close button is pressed.
              -->
-                <Button
-                    variant="icon"
-                    on:click={event => {
-                        event.stopPropagation()
-                        toggleOpen()
-                    }}
-                    tabindex={-1}
-                >
-                    <Icon svgPath={expanded ? mdiChevronDown : mdiChevronRight} inline />
-                </Button>
-            </span>
+            <Button
+                variant="icon"
+                on:click={event => {
+                    event.stopPropagation()
+                    toggleOpen()
+                }}
+                tabindex={-1}
+            >
+                <Icon svgPath={expanded ? mdiChevronDown : mdiChevronRight} inline />
+            </Button>
         {/if}
         <slot {entry} {expanded} toggle={toggleOpen} />
     </span>
@@ -126,9 +121,10 @@
 </li>
 
 <style lang="scss">
-    [role='treeitem'] {
-        --tree-node-left-padding: 1.25rem;
+    $shiftWidth: 1.25rem;
+    $gap: 0.25rem;
 
+    [role='treeitem'] {
         border-radius: var(--border-radius);
 
         &[tabindex='0']:focus {
@@ -142,17 +138,16 @@
 
     .loading {
         // Indent with two rem since loading represents next nested level
-        margin-left: calc(var(--tree-node-nested-level) * 1.25rem + 1.15rem + var(--tree-node-left-padding));
+        margin-left: calc(var(--tree-node-nested-level) * #{$shiftWidth} + 2 * var(--icon-inline-size) + 2 * #{$gap});
         margin-top: 0.25rem;
     }
 
     .label {
-        position: relative;
         display: flex;
-        gap: 0.25rem;
+        gap: $gap;
+        padding: 0.2rem $gap;
+        justify-content: space-between;
         align-items: center;
-        padding-right: 0.25rem;
-        padding-left: calc(var(--tree-node-nested-level) * 1.25rem + var(--tree-node-left-padding));
 
         // Change icon color based on selected item state
         --icon-fill-color: var(--tree-node-expand-icon-color);
@@ -162,31 +157,19 @@
             color: var(--tree-node-label-color, var(--body-bg));
         }
 
-        .scope-container {
-            display: none;
+        :global([data-scope-button]) {
+            visibility: hidden;
+            margin-right: calc(var(--tree-node-nested-level) * #{$shiftWidth});
         }
 
-        &:hover,
-        &:focus {
-            .scope-container {
-                display: flex;
+        &.expandable:hover,
+        &.expandable:focus {
+            :global([data-scope-button]) {
+                visibility: visible;
             }
         }
     }
 
-    .expandable-icon-container {
-        // in order to center/align expandable icon exactly by the item center
-        display: flex;
-        flex-shrink: 0;
-    }
-
-    .scope-container {
-        position: absolute;
-        left: 0.2rem;
-        height: min-content;
-        display: flex;
-    }
-
     ul {
         position: relative;
         isolation: isolate;
@@ -196,10 +179,7 @@
             border-left: 1px solid var(--border-color);
             height: 100%;
             transform: translateX(
-                calc(
-                    var(--tree-node-nested-level) * 1.25rem + var(--tree-node-left-padding) + var(--icon-inline-size) /
-                        2 - 1px
-                )
+                calc(var(--tree-node-nested-level) * #{$shiftWidth} + var(--icon-inline-size) * 1.5 + #{$gap} + 1px)
             );
             z-index: 1;
         }

client/web-sveltekit/src/lib/TreeView.svelte

@@ -1,8 +1,8 @@
 <svelte:options immutable />
 
 <script lang="ts" context="module">
-    import type { Writable } from 'svelte/store'
     import { setContext as setContextSvelte, getContext as getContextSvelte } from 'svelte'
+    import type { Writable } from 'svelte/store'
 
     import { updateTreeState, type TreeState, TreeStateUpdate } from './TreeView'
 
@@ -235,7 +235,6 @@
     }
 
     $: entries = treeProvider.getEntries() ?? []
-    $: isFlatList = entries.find(entry => treeProvider.isExpandable(entry)) === undefined
 
     // Make first tree item focusable if none is selected/focused
     $: if (!$treeState.focused && entries.length > 0) {
@@ -243,13 +242,7 @@
     }
 </script>
 
-<ul
-    role="tree"
-    bind:this={treeRoot}
-    on:keydown={handleKeydown}
-    on:click={handleClick}
-    data-tree-view-flat-list={isFlatList}
->
+<ul role="tree" bind:this={treeRoot} on:keydown={handleKeydown} on:click={handleClick}>
     {#each entries as entry (treeProvider.getNodeID(entry))}
         <TreeNode {entry} {treeProvider} on:scope-change>
             <svelte:fragment let:entry let:toggle let:expanded>

client/web-sveltekit/src/lib/wildcard/Button.svelte

@@ -15,6 +15,7 @@
         // but for some reason it's not recognized when using `svelte-check` and an error
         // is thrown instead.
         'data-testid'?: string
+        'data-scope-button'?: boolean
     } & HTMLButtonAttributes
 
     export let variant: $$Props['variant'] = 'primary'

client/web-sveltekit/src/routes/[...repo=reporev]/(validrev)/(code)/FileTree.svelte

@@ -178,13 +178,12 @@
     }
 
     a {
-        flex: 1;
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;
-        padding: 0.2rem 0.25rem 0.2rem 0;
         color: inherit;
         text-decoration: none;
+        width: 100%;
 
         &:hover {
             color: inherit;