Repositories schneller navigieren – dank Dateibaum-Ansicht

Du kennst das: Eine Datei im Repository-Browser gefunden, hineingeklickt, den Code gelesen – und jetzt musst du etwas in einem anderen Teil des Verzeichnisbaums prüfen. Also zurück. Wieder runternavigieren. Vielleicht noch eine Ebene tiefer. Nächste Datei gefunden, hineingeklickt – und von vorn.

Es funktioniert. Aber es nervt schnell.

Wer sich schon einmal gewünscht hat, der Repository-Browser würde sich mehr wie eine IDE anfühlen und weniger wie eine Abfolge von Breadcrumb-Pfaden: Der Dateibaum-Browser in GitLab 18.9 schafft genau das.

Was der Dateibaum-Browser bietet

Der Dateibaum-Browser ergänzt Datei- und Verzeichnisansichten um ein ein- und ausklappbares Panel mit anpassbarer Breite. Die Projektstruktur bleibt damit sichtbar, während du Code liest und navigierst – kein Kontextverlust, kein Zurückklicken mehr.

Dateien und Verzeichnisse werden im Baum neben der Dateiliste und dem Dateiinhalt angezeigt, sodass Struktur und Code gleichzeitig sichtbar sind.

Wer bereits mit einem Dateibaum in einer IDE oder einer Git-Plattform gearbeitet hat, wird sich sofort zurechtfinden:

Strukturbasierte Navigation

Verzeichnisse lassen sich auf- und zuklappen, Dateien wechseln – der Überblick über die aktuelle Position in der Repository-Hierarchie bleibt dabei erhalten. Beim direkten Aufruf einer verschachtelten Datei expandiert der Baum die übergeordneten Verzeichnisse und hebt die aktuelle Datei hervor. Der Baum synchronisiert sich außerdem mit der aktuellen Position: Wird eine Datei im Hauptinhaltsbereich ausgewählt, aktualisiert sich der Baum entsprechend.

Filtern nach Dateiname

Nach dem Öffnen des Baums lässt sich mit F der globale Suchdialog öffnen. Ein Teil des Dateinamens genügt, um direkt zu springen – die Ergebnisse zeigen jeweils das übergeordnete Verzeichnis an, damit klar ist, wo man landet.

Tastaturnavigation

Der Baum implementiert das W3C-ARIA-Treeview-Pattern: Navigation durch Dateien und Verzeichnisse ist vollständig per Tastatur möglich – mit Pfeiltasten sowie Enter, Leertaste, Pos1, Ende und Zeichentasten. Das verbessert die Zugänglichkeit für Screenreader-Nutzende und alle, die lieber ohne Maus arbeiten.

Responsives Verhalten

Auf dem Desktop liegt der Baum nebeneinander mit Dateiliste und Code. Auf kleineren Viewports wird er zur linken Seitenleiste, die sich bei Bedarf einblenden lässt. Auf Mobilgeräten ist der Baum ausgeblendet, damit die Code-Ansicht den gesamten Bildschirm nutzen kann.

Geeignet für große Repositories

Bei Repositories mit vielen Einträgen verwendet der Baum Paginierung: Weitere Einträge lassen sich bei Bedarf nachladen, ohne die Seite zu überlasten. Das Verhalten bleibt auch bei wachsenden Projekten stabil.

Der Dateibaum-Browser in Aktion

GitLab Principal Developer Advocate Michael Friedrich zeigt in einer Demo den neuen Dateibaum-Browser und wie er die Navigation in großen Repositories vereinfacht. Die Demo verwendet das Projekt GitLab project: Tanuki IoT Platform, das sich zum Ausprobieren in einem echten Repository anbietet.

Jetzt mit dem Dateibaum-Browser starten

Der Dateibaum-Browser ist auf GitLab.com verfügbar und wurde mit 18.9 für GitLab Self-Managed und GitLab Dedicated veröffentlicht.

So geht's:

1. Eine beliebige Datei- oder Verzeichnisansicht im Projekt öffnen (/<project>/-/tree/<branch>).
2. Links oben das Dateibaum-Symbol auswählen oder Shift+F drücken, um den Dateibaum-Browser ein- oder auszublenden.
3. F drücken, um Dateien nach Name oder Erweiterung zu filtern, den Suchbegriff eingeben und mit den Pfeiltasten sowie Enter direkt zur gewünschten Datei springen.

Ausblick

Das Source Code Team bei GitLab hat den Dateibaum-Browser mit Barrierefreiheit, Performance bei großen Repositories und konsistentem Verhalten über verschiedene Viewports hinweg als Kernanforderungen entwickelt. Diese Prinzipien werden auch die weitere Entwicklung leiten – Feedback aus der Community fließt dabei aktiv ein.

Feedback zum Dateibaum-Browser

Gedanken zum Dateibaum-Browser gerne im Feedback-Issue teilen.

Mehr zum Dateibaum-Browser: Dokumentation zum Dateibaum-Browser.