Skip to content

Commit

Permalink
scm: fix theming colors for add, mod, del
Browse files Browse the repository at this point in the history 
Fixes #6839

This commit fixes the following problems:
- `overviewRuler` colors were not applied properly for the `scm` extension
- `minimap` colors were not applied properly for the `scm` extension
- colors (`overviewRuler`) are updated to align with vscode

Signed-off-by: Vincent Fugnitto <vincent.fugnitto@ericsson.com>
  • Loading branch information
@vince-fugnitto
vince-fugnitto committed Mar 12, 2020
1 parent a546178 commit d05df3a
Show file tree
Hide file tree
Showing 2 changed files with 87 additions and 51 deletions.
113 changes: 69 additions & 44 deletions packages/scm/src/browser/dirty-diff/dirty-diff-decorator.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
* SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
********************************************************************************/

import { injectable } from 'inversify';
import { inject, injectable } from 'inversify';
import {
Range,
Position,
Expand All @@ -26,64 +26,29 @@ import {
MinimapPosition
} from '@theia/editor/lib/browser';
import { DirtyDiff, LineRange } from './diff-computer';
import { ColorRegistry } from '@theia/core/lib/browser/color-registry';

export enum DirtyDiffDecorationType {
AddedLine = 'dirty-diff-added-line',
RemovedLine = 'dirty-diff-removed-line',
ModifiedLine = 'dirty-diff-modified-line',
}

const AddedLineDecoration = <EditorDecorationOptions>{
linesDecorationsClassName: 'dirty-diff-glyph dirty-diff-added-line',
overviewRuler: {
color: 'editorOverviewRuler.addedForeground',
position: OverviewRulerLane.Left,
},
minimap: {
color: 'minimapGutter.addedBackground',
position: MinimapPosition.Gutter
},
isWholeLine: true
};

const RemovedLineDecoration = <EditorDecorationOptions>{
linesDecorationsClassName: 'dirty-diff-glyph dirty-diff-removed-line',
overviewRuler: {
color: 'editorOverviewRuler.deletedForeground',
position: OverviewRulerLane.Left,
},
minimap: {
color: 'minimapGutter.deletedBackground',
position: MinimapPosition.Gutter
},
isWholeLine: false
};

const ModifiedLineDecoration = <EditorDecorationOptions>{
linesDecorationsClassName: 'dirty-diff-glyph dirty-diff-modified-line',
overviewRuler: {
color: 'editorOverviewRuler.modifiedForeground',
position: OverviewRulerLane.Left,
},
minimap: {
color: 'minimapGutter.modifiedBackground',
position: MinimapPosition.Gutter
},
isWholeLine: true
};

export interface DirtyDiffUpdate extends DirtyDiff {
readonly editor: TextEditor;
}

@injectable()
export class DirtyDiffDecorator extends EditorDecorator {

@inject(ColorRegistry)
protected readonly colorRegistry: ColorRegistry;

applyDecorations(update: DirtyDiffUpdate): void {
const modifications = update.modified.map(range => this.toDeltaDecoration(range, ModifiedLineDecoration));
const additions = update.added.map(range => this.toDeltaDecoration(range, AddedLineDecoration));
const removals = update.removed.map(line => this.toDeltaDecoration(line, RemovedLineDecoration));
const decorations = [...modifications, ...additions, ...removals];
const modifications = update.modified.map(range => this.toDeltaDecoration(range, this.getModifiedLineDecorationOptions()));
const additions = update.added.map(range => this.toDeltaDecoration(range, this.getAddedLineDecorationOptions()));
const deletions = update.removed.map(line => this.toDeltaDecoration(line, this.getDeletionLineDecorationOptions()));
const decorations = [...modifications, ...additions, ...deletions];
this.setDecorations(update.editor, decorations);
}

Expand All @@ -92,4 +57,64 @@ export class DirtyDiffDecorator extends EditorDecorator {
const range = Range.create(Position.create(start, 0), Position.create(end, 0));
return { range, options };
}

/**
* Get the modified line decoration.
*
* @returns the editor decoration options for modifications.
*/
protected getModifiedLineDecorationOptions(): EditorDecorationOptions {
return <EditorDecorationOptions>{
linesDecorationsClassName: 'dirty-diff-glyph dirty-diff-modified-line',
overviewRuler: {
color: this.colorRegistry.getCurrentColor('editorOverviewRuler.modifiedForeground'),
position: OverviewRulerLane.Left,
},
minimap: {
color: this.colorRegistry.getCurrentColor('minimapGutter.modifiedBackground'),
position: MinimapPosition.Gutter
},
isWholeLine: true
};
}

/**
* Get the added line decoration.
*
* @returns the editor decoration options for additions.
*/
protected getAddedLineDecorationOptions(): EditorDecorationOptions {
return <EditorDecorationOptions>{
linesDecorationsClassName: 'dirty-diff-glyph dirty-diff-added-line',
overviewRuler: {
color: this.colorRegistry.getCurrentColor('editorOverviewRuler.addedForeground'),
position: OverviewRulerLane.Left,
},
minimap: {
color: this.colorRegistry.getCurrentColor('minimapGutter.addedBackground'),
position: MinimapPosition.Gutter
},
isWholeLine: true
};
}

/**
* Get the deletion line decoration.
*
* @returns the editor decoration options for deletions.
*/
protected getDeletionLineDecorationOptions(): EditorDecorationOptions {
return <EditorDecorationOptions>{
linesDecorationsClassName: 'dirty-diff-glyph dirty-diff-removed-line',
overviewRuler: {
color: this.colorRegistry.getCurrentColor('editorOverviewRuler.deletedForeground'),
position: OverviewRulerLane.Left,
},
minimap: {
color: this.colorRegistry.getCurrentColor('minimapGutter.deletedBackground'),
position: MinimapPosition.Gutter
},
isWholeLine: false
};
}
}
25 changes: 18 additions & 7 deletions packages/scm/src/browser/scm-contribution.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,12 @@ export namespace SCM_COMMANDS {
};
}

export namespace SCM_COLORS {
export const editorGutterModifiedBackground = 'editorGutter.modifiedBackground';
export const editorGutterAddedBackground = 'editorGutter.addedBackground';
export const editorGutterDeletedBackground = 'editorGutter.deletedBackground';
}

@injectable()
export class ScmContribution extends AbstractViewContribution<ScmWidget> implements FrontendApplicationContribution, ColorContribution {

Expand Down Expand Up @@ -186,24 +192,23 @@ export class ScmContribution extends AbstractViewContribution<ScmWidget> impleme
* It should be aligned with https://github.com/microsoft/vscode/blob/0dfa355b3ad185a6289ba28a99c141ab9e72d2be/src/vs/workbench/contrib/scm/browser/dirtydiffDecorator.ts#L808
*/
registerColors(colors: ColorRegistry): void {
const overviewRulerDefault = Color.rgba(0, 122, 204, 0.6);
colors.register(
{
id: 'editorGutter.modifiedBackground', defaults: {
id: SCM_COLORS.editorGutterModifiedBackground, defaults: {
dark: Color.rgba(12, 125, 157),
light: Color.rgba(102, 175, 224),
hc: Color.rgba(0, 155, 249)
}, description: 'Editor gutter background color for lines that are modified.'
},
{
id: 'editorGutter.addedBackground', defaults: {
id: SCM_COLORS.editorGutterAddedBackground, defaults: {
dark: Color.rgba(88, 124, 12),
light: Color.rgba(129, 184, 139),
hc: Color.rgba(51, 171, 78)
}, description: 'Editor gutter background color for lines that are added.'
},
{
id: 'editorGutter.deletedBackground', defaults: {
id: SCM_COLORS.editorGutterDeletedBackground, defaults: {
dark: Color.rgba(148, 21, 27),
light: Color.rgba(202, 75, 81),
hc: Color.rgba(252, 93, 109)
Expand Down Expand Up @@ -233,17 +238,23 @@ export class ScmContribution extends AbstractViewContribution<ScmWidget> impleme
},
{
id: 'editorOverviewRuler.modifiedForeground', defaults: {
dark: overviewRulerDefault, light: overviewRulerDefault, hc: overviewRulerDefault
dark: Color.transparent(SCM_COLORS.editorGutterModifiedBackground, 0.6),
light: Color.transparent(SCM_COLORS.editorGutterModifiedBackground, 0.6),
hc: Color.transparent(SCM_COLORS.editorGutterModifiedBackground, 0.6)
}, description: 'Overview ruler marker color for modified content.'
},
{
id: 'editorOverviewRuler.addedForeground', defaults: {
dark: overviewRulerDefault, light: overviewRulerDefault, hc: overviewRulerDefault
dark: Color.transparent(SCM_COLORS.editorGutterAddedBackground, 0.6),
light: Color.transparent(SCM_COLORS.editorGutterAddedBackground, 0.6),
hc: Color.transparent(SCM_COLORS.editorGutterAddedBackground, 0.6)
}, description: 'Overview ruler marker color for added content.'
},
{
id: 'editorOverviewRuler.deletedForeground', defaults: {
dark: overviewRulerDefault, light: overviewRulerDefault, hc: overviewRulerDefault
dark: Color.transparent(SCM_COLORS.editorGutterDeletedBackground, 0.6),
light: Color.transparent(SCM_COLORS.editorGutterDeletedBackground, 0.6),
hc: Color.transparent(SCM_COLORS.editorGutterDeletedBackground, 0.6)
}, description: 'Overview ruler marker color for deleted content.'
}
);
Expand Down

0 comments on commit d05df3a

Please sign in to comment.