Change Tab Header color depending on source


What’s the issue?

When working with multiple Projects - and sometimes identical files in these Projects - it can happen that you have an identically named file open twice, though from different sources. At the Moment there is no easy way of differentiating which is which. You can hover over the Header of the tab to reveal it’s source path in a pop-up box.


My idea is to color-code the headers of open files which aren’t located in any open Project.
Additionally if you have two identically named files in two different open Projects it would make sens to Color code these aswell.

Feedback is welcome. Do you think this is a missing Feature? Or is there another way of solving it?


One point of clarification: according to how Atom sees the world, all of the project folders you have added to a given window belong to one Project.

As you can see in the following screenshot, the tab contains no information about which project folder it’s associated with. It does contain the complete path for the file, however, and you could write a script to match that path to project folders. How much JavaScript experience do you have? What sort of color coding scheme do you want?


Ah, I see.
I do have very little knowledge about .js. Could be a challenge tough. I’d Keep it simple:

  • If there are >= 2 Project Folders open and >= 2 identically named Files open then make one Project Folder yellow and the corresponding File - it’s Tab Header - yellow aswell.

  • If there is only = 1 Project Folder open but >= 2 identically named Files open then make the Project Folder green and the corresponding File - it’s Tab Header - green aswell.


Anything I give you will be written in CoffeeScript and able to be easily pasted into Counting objects and changing the style of those objects according to specific rules is not a hard task, and once I’m satisfied that I understand your needs thoroughly, it shouldn’t take me much time at all.

Why yellow and green? It’s worth noting that the native git integration in Atom uses green to indicate a new file and yellow to indicate a changed one. A UI change using only two colors, where those two are yellow and green (or three with red), runs the risk of confusing users when there’s a similar UI element in close proximity that uses the same colors.


That would be awesome!

I see the point about yellow and green. It could be anything really. Maybe some different tints of blue?