deco - show badge in scm viewlet when no icons are provided

extensions/git/package.json

@@ -842,6 +842,15 @@
           "highContrast": "#E2C08D"
         }
       },
+      {
+        "id": "git.color.deleted",
+        "description": "Color for deleted resources",
+        "defaults": {
+          "light": "#c02e11",
+          "dark": "#c74e39",
+          "highContrast": "#c74e39"
+        }
+      },
       {
         "id": "git.color.untracked",
         "description": "Color for untracked resources",
@@ -859,6 +868,15 @@
           "dark": "#A7A8A9",
           "highContrast": "#A7A8A9"
         }
+      },
+      {
+        "id": "git.color.conflict",
+        "description": "Color for resources with conflicts",
+        "defaults": {
+          "light": "#6c6cc4",
+          "dark": "#6c6cc4",
+          "highContrast": "#6c6cc4"
+        }
       }
     ]
   },

extensions/git/src/repository.ts

@@ -171,8 +171,9 @@ export class Resource implements SourceControlResourceState {
 	}
 
 	get decorations(): SourceControlResourceDecorations {
-		const light = { iconPath: this.getIconPath('light') };
-		const dark = { iconPath: this.getIconPath('dark') };
+		// TODO@joh
+		const light = { iconPath: this.getIconPath('light') } && undefined;
+		const dark = { iconPath: this.getIconPath('dark') } && undefined;
 		const tooltip = this.tooltip;
 		const strikeThrough = this.strikeThrough;
 		const faded = this.faded;
@@ -180,19 +181,71 @@ export class Resource implements SourceControlResourceState {
 		return { strikeThrough, faded, tooltip, light, dark };
 	}
 
-	get resourceDecoration(): DecorationData | undefined {
-		const title = this.tooltip;
+	get letter(): string | undefined {
 		switch (this.type) {
+			case Status.INDEX_MODIFIED:
+			case Status.MODIFIED:
+				return 'M';
+			case Status.INDEX_ADDED:
+				return 'A';
+			case Status.INDEX_DELETED:
+			case Status.DELETED:
+				return 'D';
+			case Status.INDEX_RENAMED:
+				return 'R';
 			case Status.UNTRACKED:
-				return { priority: 1, title, abbreviation: localize('untracked, short', "U"), bubble: true, color: new ThemeColor('git.color.untracked') };
+				return 'U';
+			case Status.IGNORED:
+				return 'I';
+			case Status.INDEX_COPIED:
+			case Status.BOTH_DELETED:
+			case Status.ADDED_BY_US:
+			case Status.DELETED_BY_THEM:
+			case Status.ADDED_BY_THEM:
+			case Status.DELETED_BY_US:
+			case Status.BOTH_ADDED:
+			case Status.BOTH_MODIFIED:
+				return 'C';
+			default:
+				return undefined;
+		}
+	}
+
+	get color(): ThemeColor | undefined {
+		switch (this.type) {
 			case Status.INDEX_MODIFIED:
 			case Status.MODIFIED:
-				return { priority: 2, title, abbreviation: localize('modified, short', "M"), bubble: true, color: new ThemeColor('git.color.modified') };
+				return new ThemeColor('git.color.modified');
+			case Status.INDEX_DELETED:
+			case Status.DELETED:
+				return new ThemeColor('git.color.deleted');
+			case Status.INDEX_ADDED: // todo@joh - special color?
+			case Status.INDEX_RENAMED: // todo@joh - special color?
+			case Status.UNTRACKED:
+				return new ThemeColor('git.color.untracked');
+			case Status.IGNORED:
+				return new ThemeColor('git.color.ignored');
+			case Status.INDEX_COPIED:
+			case Status.BOTH_DELETED:
+			case Status.ADDED_BY_US:
+			case Status.DELETED_BY_THEM:
+			case Status.ADDED_BY_THEM:
+			case Status.DELETED_BY_US:
+			case Status.BOTH_ADDED:
+			case Status.BOTH_MODIFIED:
+				return new ThemeColor('git.color.conflict');
 			default:
 				return undefined;
 		}
 	}
 
+	get resourceDecoration(): DecorationData | undefined {
+		const title = this.tooltip;
+		const abbreviation = this.letter;
+		const color = this.color;
+		return { bubble: true, title, abbreviation, color };
+	}
+
 	constructor(
 		private _resourceGroupType: ResourceGroupType,
 		private _resourceUri: Uri,

src/vs/workbench/parts/scm/electron-browser/media/scmViewlet.css

@@ -84,9 +84,7 @@
 	overflow: hidden;
 }
 
-.scm-viewlet .monaco-list-row > .resource > .name > .monaco-icon-label {
-	width: 100%;
-	height: 100%;
+.scm-viewlet .monaco-list-row > .resource > .name > .monaco-icon-label > a.label-name {
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
@@ -95,6 +93,10 @@
 	text-decoration: line-through;
 }
 
+.scm-viewlet .monaco-list-row > .resource > .name > .monaco-icon-label::after {
+	padding: 0 4px;
+}
+
 .scm-viewlet .monaco-list-row > .resource > .decoration-icon {
 	width: 16px;
 	height: 100%;
@@ -102,23 +104,26 @@
 	background-position: 50% 50%;
 }
 
+.scm-viewlet .monaco-list .monaco-list-row > .resource > .name > .monaco-icon-label > .actions {
+	flex-grow: 100;
+}
 
 .scm-viewlet .monaco-list .monaco-list-row > .resource-group > .actions,
-.scm-viewlet .monaco-list .monaco-list-row > .resource > .actions {
+.scm-viewlet .monaco-list .monaco-list-row > .resource > .name > .monaco-icon-label > .actions {
 	display: none;
 }
 
 .scm-viewlet .monaco-list .monaco-list-row:hover > .resource-group > .actions,
-.scm-viewlet .monaco-list .monaco-list-row:hover > .resource > .actions,
+.scm-viewlet .monaco-list .monaco-list-row:hover > .resource > .name > .monaco-icon-label > .actions,
 .scm-viewlet .monaco-list .monaco-list-row.selected > .resource-group > .actions,
 .scm-viewlet .monaco-list .monaco-list-row.focused > .resource-group > .actions,
-.scm-viewlet .monaco-list .monaco-list-row.selected > .resource > .actions,
-.scm-viewlet .monaco-list .monaco-list-row.focused > .resource > .actions,
+.scm-viewlet .monaco-list .monaco-list-row.selected > .resource > .name > .monaco-icon-label > .actions,
+.scm-viewlet .monaco-list .monaco-list-row.focused > .resource > .name > .monaco-icon-label > .actions,
 .scm-viewlet .monaco-list:not(.selection-multiple) .monaco-list-row > .resource:hover > .actions {
 	display: block;
 }
 
-.scm-viewlet .monaco-list-row > .resource > .actions .action-label,
+.scm-viewlet .monaco-list-row > .resource > .name > .monaco-icon-label > .actions .action-label,
 .scm-viewlet .monaco-list-row > .resource-group > .actions .action-label {
 	width: 16px;
 	height: 100%;
@@ -153,4 +158,4 @@
 
 .scm-viewlet .spacer {
 	flex: 1;
-}
\ No newline at end of file
+}

src/vs/workbench/parts/scm/electron-browser/scmViewlet.ts

@@ -429,7 +429,7 @@ class ResourceRenderer implements IRenderer<ISCMResource, ResourceTemplate> {
 		const element = append(container, $('.resource'));
 		const name = append(element, $('.name'));
 		const fileLabel = this.instantiationService.createInstance(FileLabel, name, void 0);
-		const actionsContainer = append(element, $('.actions'));
+		const actionsContainer = append(fileLabel.element, $('.actions'));
 		const actionBar = new ActionBar(actionsContainer, {
 			actionItemProvider: this.actionItemProvider,
 			actionRunner: new MultipleSelectionActionRunner(this.getSelectedResources)
@@ -446,20 +446,23 @@ class ResourceRenderer implements IRenderer<ISCMResource, ResourceTemplate> {
 	}
 
 	renderElement(resource: ISCMResource, index: number, template: ResourceTemplate): void {
-		template.fileLabel.setFile(resource.sourceUri);
+
+		const theme = this.themeService.getTheme();
+		const icon = theme.type === LIGHT ? resource.decorations.icon : resource.decorations.iconDark;
+
+		template.fileLabel.setFile(resource.sourceUri, { fileDecorations: { colors: false, badges: !icon } });
 		template.actionBar.clear();
 		template.actionBar.context = resource;
 		template.actionBar.push(this.scmMenus.getResourceActions(resource), { icon: true, label: false });
 		toggleClass(template.name, 'strike-through', resource.decorations.strikeThrough);
 		toggleClass(template.element, 'faded', resource.decorations.faded);
 
-		const theme = this.themeService.getTheme();
-		const icon = theme.type === LIGHT ? resource.decorations.icon : resource.decorations.iconDark;
-
 		if (icon) {
+			template.decorationIcon.style.display = '';
 			template.decorationIcon.style.backgroundImage = `url('${icon}')`;
 			template.decorationIcon.title = resource.decorations.tooltip;
 		} else {
+			template.decorationIcon.style.display = 'none';
 			template.decorationIcon.style.backgroundImage = '';
 		}
 	}