Issue 250115 Highlight Parent Folders in Explorer Tree for Active File

[peterasorensen]

Highlight ancestor folders of selected file in Explorer

Issue: #250115

Summary

• Add visual highlighting to ancestor folders when a file is selected in the Explorer tree
• Uses light blue highlight when Explorer is focused, light grey when unfocused
• Improves navigation clarity in deeply nested folder structures

Desktop Explorer Focused

Desktop Explorer Unfocused

Code Server Web Explorer Focused

Code Server Web Explorer Unfocused

Problem

When a file is selected in the Explorer, only the file itself is highlighted. This makes it difficult to quickly identify the parent folder structure, especially in deeply nested trees:

app/
  routes/
    auth/
      login
      logout
      signup
    home/
      * index  ← only this file is highlighted

Solution

Highlight all ancestor folders to reflect the currently active file path:

* app/
  * routes/
      auth/
        login
        logout
        signup
    * home/
      * index

Implementation

• explorerViewer.ts: Added focusedItemAncestorUris Set to track ancestor folder URIs. Uses URI strings (not object references) to survive tree refreshes when VS Code regains focus.
• explorerView.ts:
  • Listen to onDidChangeSelection to update ancestors when selection changes
  • Listen to onDidFocus to re-render ancestors when tree regains DOM focus
  • Added updateAncestorHighlight() and rerenderAncestors() methods
• explorerviewlet.css: Added styles using :has() selector to highlight full row:
  • Light grey (rgba(128, 128, 128, 0.13)) when unfocused
  • Light blue (rgba(0, 120, 212, 0.13)) when focused (via :focus-within)

Test Plan

• Select a deeply nested file → all parent folders should highlight
• Change selection to different file → old ancestors unhighlight, new ancestors highlight
• Click in editor → ancestor highlight turns grey
• Click back in explorer → ancestor highlight turns blue
• Switch to another app and back → ancestor highlight persists
• Scroll the explorer tree → highlights remain on visible ancestors

Unit Tests confirmed passing.

---

[vs-code-engineering]

📬 CODENOTIFY

The following users are being notified based on files changed in this PR:

@bpasero

Matched files:

• src/vs/workbench/contrib/files/browser/media/explorerviewlet.css
• src/vs/workbench/contrib/files/browser/views/explorerView.ts
• src/vs/workbench/contrib/files/browser/views/explorerViewer.ts

[peterasorensen]

@peterasorensen please read the following Contributor License Agreement(CLA). If you agree with the CLA, please reply with the following information.

@microsoft-github-policy-service agree [company="{your company}"]

Options:

• (default - no company specified) I have sole ownership of intellectual property rights to my Submissions and I am not making Submissions in the course of work for my employer.

@microsoft-github-policy-service agree

• (when company given) I am making Submissions in the course of work for my employer (or my employer has intellectual property rights in my Submissions by contract or applicable law). I have permission from my employer to make Submissions and enter into this Agreement on behalf of my employer. By signing below, the defined term “You” includes me and my employer.

@microsoft-github-policy-service agree company="Microsoft"

Contributor License Agreement

@microsoft-github-policy-service agree