Arborescence des fichiers : naviguez plus rapidement dans les dépôts

Imaginez le scénario suivant : vous repérez un fichier dans le navigateur de dépôt. Vous cliquez dessus, parcourez le code, puis vous vérifiez un élément dans une autre partie de l'arborescence. Vous cliquez donc sur le bouton retour. Vous redescendez dans l'arborescence, et accédez peut-être à niveau inférieur. Vous trouvez le fichier suivant, vous cliquez dessus et recommencez.

Cette approche fonctionne, mais devient vite fastidieuse. Si vous avez déjà souhaité que le navigateur de dépôt ressemble davantage à votre IDE qu'à une série de fils d'Ariane, l'arborescence de fichiers de GitLab 18.9 est faite pour vous.

Fonctionnement de l'arborescence de fichiers

L'arborescence de fichiers ajoute un panneau repliable et redimensionnable à côté de vos vues de fichiers et de répertoires, de sorte que la structure de votre projet reste visible pendant que vous lisez et naviguez dans le code. Ainsi, vous n'avez plus besoin de cliquer sur retour pour savoir où vous vous trouvez.

Cette fonctionnalité affiche les fichiers et répertoires de votre projet dans une arborescence à côté de la liste des fichiers et du contenu des fichiers, ce qui vous permet de voir la structure et le code en même temps.

Si vous avez déjà utilisé une arborescence de fichiers dans un IDE ou une plateforme Git, elle devrait vous sembler familière :

Navigation avec une vue structurée

Développez et repliez les répertoires et basculez entre les fichiers tout en gardant une vue claire de votre position dans la hiérarchie du dépôt. Lorsque vous accédez directement à un fichier imbriqué, l'arborescence développe les répertoires parents et met en surbrillance le fichier actuel afin que vous ne perdiez pas le contexte. L'arborescence se synchronise également avec votre position actuelle : lorsque vous sélectionnez un fichier dans la zone de contenu principale, l'arborescence se met à jour en conséquence.

Filtrage par nom de fichier

Après avoir ouvert l'arborescence, appuyez sur F pour ouvrir la boîte de dialogue de recherche globale. Saisissez une partie d'un nom de fichier pour y accéder directement depuis la liste de résultats, chaque résultat affichant ses répertoires parents afin que vous sachiez où vous vous trouvez.

Navigation axée sur le clavier

L'arborescence implémente le modèle de vue arborescente ARIA du W3C, ce qui vous permet de naviguer parmi les fichiers et répertoires à l'aide du clavier et des touches fléchées, ainsi que des touches Entrée, Espace, Début, Fin et des touches de caractères. Ce type de navigation est plus accessible pour les utilisateurs de lecteurs d'écran et pour toute personne qui préfère utiliser un clavier.

Réactivité sur tous les écrans

Sur un ordinateur, l'arborescence s'affiche côte à côte avec votre liste de fichiers et votre code. Sur les écrans plus petits, elle se transforme en panneau latéral gauche que vous pouvez ouvrir lorsque vous en avez besoin. Sur mobile, l'arborescence est masquée afin que la vue du code puisse occuper tout l'écran.

Conception pour les dépôts volumineux

Pour les dépôts avec de nombreuses entrées, l'arborescence utilise la pagination afin que vous puissiez charger davantage d'éléments selon vos besoins sans surcharger la page. L'expérience reste fluide à mesure que votre projet se développe.

Découvrez l'arborescence de fichiers en action

Michael Friedrich, Principal Developer Advocate chez GitLab, présente la nouvelle arborescence de fichiers dans GitLab. Découvrez comment cette fonctionnalité facilite la navigation dans les dépôts volumineux, comme si vous travailliez dans votre IDE. La démonstration utilise le projet GitLab Tanuki IoT Platform, que vous pouvez explorer vous-même pour tester l'arborescence de fichiers dans un véritable dépôt.

Essayez l'arborescence de fichiers dès aujourd'hui

L'arborescence de fichiers est disponible dès maintenant sur GitLab.com et a été publiée dans la version 18.9 pour GitLab Self-Managed et GitLab Dedicated.

Voici comment y accéder :

1. Ouvrez n'importe quelle vue de fichier ou de répertoire de dépôt dans votre projet (/<project>/-/tree/<branch>).
2. Dans le coin supérieur gauche, sélectionnez l'icône d'arborescence de fichiers ou appuyez sur Shift+F pour activer/désactiver l'arborescence de fichiers.
3. Appuyez sur F pour filtrer les fichiers par nom ou extension, commencez à saisir du texte, puis utilisez les touches fléchées et Entrée pour accéder directement au fichier souhaité.

Perspectives

L'équipe Source Code de GitLab a conçu l'arborescence de fichiers en plaçant l'accessibilité, les performances à grande échelle et la cohérence entre les différents écrans au cœur de ses exigences. Ces principes continueront de guider nos prochains développements, et vos retours nous aideront à façonner les futures itérations.

Aidez-nous à améliorer l'arborescence de fichiers

Partagez vos retours sur l'arborescence de fichiers dans notre ticket.

Vous souhaitez en savoir plus sur l'arborescence de fichiers ? Consultez la documentation.