add audio cues for reviewing a diff editor (microsoft#166413)

Author: meganrogge

src/vs/editor/browser/widget/diffEditorWidget.ts

@@ -1878,6 +1878,11 @@ function createDecoration(startLineNumber: number, startColumn: number, endLineN
 	};
 }
 
+const enum DiffEditorLineClasses {
+	Insert = 'line-insert',
+	Delete = 'line-delete'
+}
+
 const DECORATIONS = {
 
 	arrowRevertChange: ModelDecorationOptions.register({
@@ -1907,27 +1912,27 @@ const DECORATIONS = {
 
 	lineInsert: ModelDecorationOptions.register({
 		description: 'diff-editor-line-insert',
-		className: 'line-insert',
+		className: DiffEditorLineClasses.Insert,
 		marginClassName: 'gutter-insert',
 		isWholeLine: true
 	}),
 	lineInsertWithSign: ModelDecorationOptions.register({
 		description: 'diff-editor-line-insert-with-sign',
-		className: 'line-insert',
+		className: DiffEditorLineClasses.Insert,
 		linesDecorationsClassName: 'insert-sign ' + ThemeIcon.asClassName(diffInsertIcon),
 		marginClassName: 'gutter-insert',
 		isWholeLine: true
 	}),
 
 	lineDelete: ModelDecorationOptions.register({
 		description: 'diff-editor-line-delete',
-		className: 'line-delete',
+		className: DiffEditorLineClasses.Delete,
 		marginClassName: 'gutter-delete',
 		isWholeLine: true
 	}),
 	lineDeleteWithSign: ModelDecorationOptions.register({
 		description: 'diff-editor-line-delete-with-sign',
-		className: 'line-delete',
+		className: DiffEditorLineClasses.Delete,
 		linesDecorationsClassName: 'delete-sign ' + ThemeIcon.asClassName(diffRemoveIcon),
 		marginClassName: 'gutter-delete',
 		isWholeLine: true

src/vs/editor/browser/widget/diffReview.ts

@@ -33,6 +33,7 @@ import { registerIcon } from 'vs/platform/theme/common/iconRegistry';
 import { ILanguageIdCodec } from 'vs/editor/common/languages';
 import { ILanguageService } from 'vs/editor/common/languages/language';
 import { ILineChange } from 'vs/editor/common/diff/smartLinesDiffComputer';
+import { AudioCue, IAudioCueService } from 'vs/platform/audioCues/browser/audioCueService';
 
 const DIFF_LINES_PADDING = 3;
 
@@ -66,6 +67,11 @@ class DiffEntry {
 	}
 }
 
+const enum DiffEditorLineClasses {
+	Insert = 'line-insert',
+	Delete = 'line-delete'
+}
+
 class Diff {
 	readonly entries: DiffEntry[];
 
@@ -95,7 +101,8 @@ export class DiffReview extends Disposable {
 
 	constructor(
 		diffEditor: DiffEditorWidget,
-		@ILanguageService private readonly _languageService: ILanguageService
+		@ILanguageService private readonly _languageService: ILanguageService,
+		@IAudioCueService private readonly _audioCueService: IAudioCueService
 	) {
 		super();
 		this._diffEditor = diffEditor;
@@ -149,7 +156,7 @@ export class DiffReview extends Disposable {
 				|| e.equals(KeyMod.Alt | KeyCode.DownArrow)
 			) {
 				e.preventDefault();
-				this._goToRow(this._getNextRow());
+				this._goToRow(this._getNextRow(), 'next');
 			}
 
 			if (
@@ -158,7 +165,7 @@ export class DiffReview extends Disposable {
 				|| e.equals(KeyMod.Alt | KeyCode.UpArrow)
 			) {
 				e.preventDefault();
-				this._goToRow(this._getPrevRow());
+				this._goToRow(this._getPrevRow(), 'previous');
 			}
 
 			if (
@@ -215,7 +222,7 @@ export class DiffReview extends Disposable {
 		this._isVisible = true;
 		this._diffEditor.doLayout();
 		this._render();
-		this._goToRow(this._getNextRow());
+		this._goToRow(this._getPrevRow(), 'previous');
 	}
 
 	public next(): void {
@@ -250,7 +257,7 @@ export class DiffReview extends Disposable {
 		this._isVisible = true;
 		this._diffEditor.doLayout();
 		this._render();
-		this._goToRow(this._getNextRow());
+		this._goToRow(this._getNextRow(), 'next');
 	}
 
 	private accept(): void {
@@ -312,12 +319,18 @@ export class DiffReview extends Disposable {
 		return null;
 	}
 
-	private _goToRow(row: HTMLElement): void {
-		const prev = this._getCurrentFocusedRow();
+	private _goToRow(row: HTMLElement, type?: 'next' | 'previous'): void {
+		const current = this._getCurrentFocusedRow();
 		row.tabIndex = 0;
 		row.focus();
-		if (prev && prev !== row) {
-			prev.tabIndex = -1;
+		if (current && current !== row) {
+			current.tabIndex = -1;
+		}
+		const element = !type ? current : type === 'next' ? current?.nextElementSibling : current?.previousElementSibling;
+		if (element?.classList.contains(DiffEditorLineClasses.Insert)) {
+			this._audioCueService.playAudioCue(AudioCue.diffLineInserted, true);
+		} else if (element?.classList.contains(DiffEditorLineClasses.Delete)) {
+			this._audioCueService.playAudioCue(AudioCue.diffLineDeleted, true);
 		}
 		this.scrollbar.scanDomNode();
 	}

src/vs/editor/standalone/browser/standaloneCodeEditor.ts

@@ -495,7 +495,7 @@ export class StandaloneDiffEditor extends DiffEditorWidget implements IStandalon
 		@IConfigurationService configurationService: IConfigurationService,
 		@IContextMenuService contextMenuService: IContextMenuService,
 		@IEditorProgressService editorProgressService: IEditorProgressService,
-		@IClipboardService clipboardService: IClipboardService,
+		@IClipboardService clipboardService: IClipboardService
 	) {
 		const options = { ..._options };
 		updateConfigurationService(configurationService, options, true);

src/vs/workbench/contrib/audioCues/browser/audioCueService.ts renamed to src/vs/platform/audioCues/browser/audioCueService.ts

@@ -17,7 +17,7 @@ export const IAudioCueService = createDecorator<IAudioCueService>('audioCue');
 
 export interface IAudioCueService {
 	readonly _serviceBrand: undefined;
-	playAudioCue(cue: AudioCue): Promise<void>;
+	playAudioCue(cue: AudioCue, allowManyInParallel?: boolean): Promise<void>;
 	playAudioCues(cues: AudioCue[]): Promise<void>;
 	isEnabled(cue: AudioCue): IObservable<boolean>;
 
@@ -39,9 +39,9 @@ export class AudioCueService extends Disposable implements IAudioCueService {
 		super();
 	}
 
-	public async playAudioCue(cue: AudioCue): Promise<void> {
+	public async playAudioCue(cue: AudioCue, allowManyInParallel = false): Promise<void> {
 		if (this.isEnabled(cue).get()) {
-			await this.playSound(cue.sound);
+			await this.playSound(cue.sound, allowManyInParallel);
 		}
 	}
 
@@ -70,7 +70,7 @@ export class AudioCueService extends Disposable implements IAudioCueService {
 		this.playingSounds.add(sound);
 
 		const url = FileAccess.asBrowserUri(
-			`vs/workbench/contrib/audioCues/browser/media/${sound.fileName}`
+			`vs/platform/audioCues/common/media/${sound.fileName}`
 		).toString();
 		const audio = new Audio(url);
 		audio.volume = this.getVolumeInPercent() / 100;
@@ -164,6 +164,8 @@ export class Sound {
 	public static readonly taskCompleted = Sound.register({ fileName: 'taskCompleted.mp3' });
 	public static readonly taskFailed = Sound.register({ fileName: 'taskFailed.mp3' });
 	public static readonly terminalBell = Sound.register({ fileName: 'terminalBell.mp3' });
+	public static readonly diffLineInserted = Sound.register({ fileName: 'diffLineInserted.mp3' });
+	public static readonly diffLineDeleted = Sound.register({ fileName: 'diffLineDeleted.mp3' });
 
 	private constructor(public readonly fileName: string) { }
 }
@@ -247,6 +249,18 @@ export class AudioCue {
 		settingsKey: 'audioCues.terminalBell'
 	});
 
+	public static readonly diffLineInserted = AudioCue.register({
+		name: localize('audioCues.diffLineInserted', 'Diff Line Inserted'),
+		sound: Sound.diffLineInserted,
+		settingsKey: 'audioCues.diffLineInserted'
+	});
+
+	public static readonly diffLineDeleted = AudioCue.register({
+		name: localize('audioCues.diffLineDeleted', 'Diff Line Deleted'),
+		sound: Sound.diffLineDeleted,
+		settingsKey: 'audioCues.diffLineDeleted'
+	});
+
 	private constructor(
 		public readonly sound: Sound,
 		public readonly name: string,