Highlight modified tabs

[javifm86]

Hi,

I would like to include a setting for highlighting modified tabs. Just the circle is not enough clear (for me). In Sublime Text for example there is a setting:

"highlight_modified_tabs": true

Just adding a CSS like this:

.tab.dirty .label-name {
    color: #ffcc66;
}

When the setting is true.

Thanks a lot.

[egamma]

// fyi @bpasero @aeschli

[javifm86]

Perhaps now this change would be easy to implement thanks to the setting "workbench.colorCustomizations".

Thanks a lot for your job.

[soldcoin]

@javifm86 excuse me, could you tell me which option you choose to change the color of modified files in "workbench.colorCustomizations". I searchd "highlight_modified_tabs" and found this issue.

[javifm86]

@Charon3coins this thread is a feature-request. The option to change color for modified tab does not exist yet.

[soldcoin]

@javifm86 thx (:D

[terryapodaca]

is this ever going to be implemented? I like the top of the tab to be colored, not just the little dot that changes to the "x" close button when you mouse of it.

[plamen-nikolov]

bump +1

[henderjon]

... May 9, 2017 ... Bueller?

[sumonto]

Is there a workaround currently to highlight modified tabs?

[jimpriest]

... April 2018 ... Bueller?

[jackyliang]

+1 please

[AlanJayWeiner]

+1 (or maybe +much more...)

I find it incredibly annoying modified tabs aren't highlighted.

I can hover over each tab and see if a dot or an x appears, but that requires extra work (and I might forget).
I can open the 'open editors' on the left (which I usually have hidden...) but that's also extra work (and I might forget...).
The editors icon on the left does show how many dirty files, but I open lots of temporary files for notes and terminal dumps and so on. So when I see '5' there I don't know if they're real source files or just temporary files - which I might actually want to keep, so I don't want to just save them as "temp1,..." - and that's extra work, too...

Please you do extra work (I'll say thank you! :) so I don't have to!

Mostly I like VSCode. It's become my everyday editor-of-choice. I'm tweaking it a lot, and numerous extensions (thank you extension writers!) - not highlighting dirty tabs is at the top of my "annoyances" list.

Btw, one of the absolutely critical features was having a Portable Apps version - I'm moving almost exclusively to portable apps. Thank you, Gareth Flowers!

[misterbridge]

+1 please

[jackyliang]

+1 again

[sudssm]

+1 again

[kogakenji]

+1, please! 👍

[sevelee]

+1, please! 👍 👍 👍 👍 👍 👍 👍

[bcolloran]

another vote here 👍

[vkovic]

... one more ...

[landoncope]

+1

[tomatau]

bump!

This is a really simple UX win that many developers have come to expect way back from even Sublime times.

Even atom has it easy to implement with custom stylesheet.

[qkdreyer]

+1

[qkdreyer]

Workaround :

• Install extension : extension/be5invis.vscode-custom-css

• Add to settings :

  "vscode_custom_css.imports": ["file:///Users/whoami/.vscode/custom.css"],

• Create file /Users/whoami/.vscode/custom.css :

.tab.dirty {
  border-top: 2px solid #79a5d9;
}

• Execute "Reload Custom CSS and JS" command
• Ignore VSCode Corruption Warning (Click Wheel Notification -> Don't show again)

[adobni]

The circle has little visibility.

+1

[bpasero]

Thanks to @usernamehw this is now in:

New colors for theme authors:

• tab.activeModifiedBorder
• tab.inactiveModifiedBorder
• tab.unfocusedActiveModifiedBorder
• tab.unfocusedInactiveModifiedBorder

Setting to enable this: workbench.editor.highlightModifiedTabs (off by default)

There is currently no way to change any other styling if the tab is dirty. The change is limited to draw a 2px border on top of the tab.

[MartinFalatic]

I'm curious why this is Closed when it's only partially implemented?

I currently use the same plugin @qkdreyer mentioned above to modify the CSS for tabs, thus:

/* Highlight tabs with unsaved work more visibly */
.tab.dirty {
    background-origin: border-box;
    background-image: repeating-linear-gradient(
      45deg,
      transparent,
      transparent 6px, /* 8px */
      #2036b4 9px /* #465298 9px */
    );
}

Why not simply allow custom CSS as originally requested?

[tomatau]

I kind of agree with @MartinFalatic. I prefer to change the colour of the circle inside the tab not a border colour.