development/vscode
development/vscode
1
0
Fork 0
mirror of https://github.com/Microsoft/vscode synced 2024-09-13 21:55:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #197857 from microsoft/tyriar/dev_mode_improvement

Browse source 
Add command sequence decorations to dev mode
This commit is contained in:
Daniel Imms 2023-11-09 12:07:21 -08:00 committed by GitHub
parent 6b697c2135 a3377f6351
commit dd076d0998
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 119 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/vs/workbench/contrib/terminal/browser/media/terminal.css
View file

@ -53,28 +53,6 @@
outline: 0 !important;
}
.monaco-workbench .xterm.dev-mode .xterm-helper-textarea {
z-index: 36 !important;
opacity: 0.8 !important;
right: 0 !important;
left: initial !important;
width: 50% !important;
background-color: var(--vscode-terminal-background, var(--vscode-panel-background));
color: var(--vscode-terminal-foreground);
transform: translateY(-100%);
}
.monaco-workbench .xterm.dev-mode .xterm-helper-textarea:focus {
opacity: 0.8 !important;
}
.monaco-workbench .xterm.dev-mode .xterm-helpers {
/* This could maybe be done outside of .dev-mode, but I'm scared to break something */
left: 0;
right: 0;
}
.monaco-workbench .xterm.dev-mode .xterm-helper-textarea:hover {
opacity: 0.25 !important;
}
.monaco-workbench .xterm .xterm-helper-textarea:focus {
/* Override the general vscode style applies `opacity:1!important` to textareas */
opacity: 0 !important;

45
src/vs/workbench/contrib/terminalContrib/developer/browser/media/developer.css Normal file
View file

@ -0,0 +1,45 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
.monaco-workbench .xterm.dev-mode .xterm-helper-textarea {
z-index: 36 !important;
opacity: 0.8 !important;
right: 0 !important;
left: initial !important;
width: 50% !important;
background-color: var(--vscode-terminal-background, var(--vscode-panel-background));
color: var(--vscode-terminal-foreground);
transform: translateY(-100%);
}
.monaco-workbench .xterm.dev-mode .xterm-helper-textarea:focus {
opacity: 0.8 !important;
}
.monaco-workbench .xterm.dev-mode .xterm-helpers {
/* This could maybe be done outside of .dev-mode, but I'm scared to break something */
left: 0;
right: 0;
}
.monaco-workbench .xterm.dev-mode .xterm-helper-textarea:hover {
opacity: 0.25 !important;
}
.monaco-workbench .xterm.dev-mode .xterm-sequence-decoration {
background-color: var(--vscode-terminal-background, var(--vscode-panel-background));
}
.monaco-workbench .xterm.dev-mode .xterm-sequence-decoration.left {
direction: rtl;
}
.monaco-workbench .xterm.dev-mode .xterm-sequence-decoration.top.left {
transform: scale(.5) translate(-50%, -50%);
}
.monaco-workbench .xterm.dev-mode .xterm-sequence-decoration.top.right {
transform: scale(.5) translate(50%, -50%);
}
.monaco-workbench .xterm.dev-mode .xterm-sequence-decoration.bottom.left {
transform: scale(.5) translate(-50%, 50%);
}
.monaco-workbench .xterm.dev-mode .xterm-sequence-decoration.bottom.right {
transform: scale(.5) translate(50%, 50%);
}

81
src/vs/workbench/contrib/terminalContrib/developer/browser/terminal.developer.contribution.ts
View file

@ -3,8 +3,9 @@
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import 'vs/css!./media/developer';
import { VSBuffer } from 'vs/base/common/buffer';
import { DisposableStore } from 'vs/base/common/lifecycle';
import { Disposable, MutableDisposable } from 'vs/base/common/lifecycle';
import { URI } from 'vs/base/common/uri';
import { localize } from 'vs/nls';
import { Categories } from 'vs/platform/action/common/actionCommonCategories';
@ -22,6 +23,7 @@ import { TerminalWidgetManager } from 'vs/workbench/contrib/terminal/browser/wid
import { ITerminalProcessManager, TerminalCommandId } from 'vs/workbench/contrib/terminal/common/terminal';
import { TerminalContextKeys } from 'vs/workbench/contrib/terminal/common/terminalContextKey';
import type { Terminal } from '@xterm/xterm';
import { TerminalCapability } from 'vs/platform/terminal/common/capabilities/capabilities';
registerTerminalAction({
id: TerminalCommandId.ShowTextureAtlas,
@ -108,38 +110,103 @@ registerTerminalAction({
}
});
class DevModeContribution extends DisposableStore implements ITerminalContribution {
class DevModeContribution extends Disposable implements ITerminalContribution {
static readonly ID = 'terminal.devMode';
private _xterm: IXtermTerminal & { raw: Terminal } | undefined;
static get(instance: ITerminalInstance): DevModeContribution | null {
return instance.getContribution<DevModeContribution>(DevModeContribution.ID);
}
private _xterm: IXtermTerminal & { raw: Terminal } | undefined;
private _activeDevModeDisposables = new MutableDisposable();
constructor(
instance: ITerminalInstance,
private readonly _instance: ITerminalInstance,
processManager: ITerminalProcessManager,
widgetManager: TerminalWidgetManager,
@IConfigurationService private readonly _configurationService: IConfigurationService,
@ITerminalService private readonly _terminalService: ITerminalService) {
@ITerminalService private readonly _terminalService: ITerminalService
) {
super();
this.add(this._configurationService.onDidChangeConfiguration(e => {
this._register(this._configurationService.onDidChangeConfiguration(e => {
if (e.affectsConfiguration(TerminalSettingId.DevMode)) {
this._updateDevMode();
}
}));
}
xtermReady(xterm: IXtermTerminal & { raw: Terminal }): void {
this._xterm = xterm;
this._updateDevMode();
}
private _updateDevMode() {
const devMode: boolean = this._configurationService.getValue(TerminalSettingId.DevMode) || false;
const devMode: boolean = this._isEnabled();
this._xterm?.raw.element?.classList.toggle('dev-mode', devMode);
// Text area syncing
if (this._xterm?.raw.textarea) {
const font = this._terminalService.configHelper.getFont();
this._xterm.raw.textarea.style.fontFamily = font.fontFamily;
this._xterm.raw.textarea.style.fontSize = `${font.fontSize}px`;
}
// Sequence markers
const commandDetection = this._instance.capabilities.get(TerminalCapability.CommandDetection);
if (devMode) {
if (commandDetection) {
this._activeDevModeDisposables.value = commandDetection.onCommandFinished(command => {
if (command.promptStartMarker) {
const d = this._instance.xterm!.raw?.registerDecoration({
marker: command.promptStartMarker
});
d?.onRender(e => {
e.textContent = 'A';
e.classList.add('xterm-sequence-decoration', 'top', 'left');
});
}
if (command.marker) {
const d = this._instance.xterm!.raw?.registerDecoration({
marker: command.marker
});
d?.onRender(e => {
e.textContent = 'B';
e.classList.add('xterm-sequence-decoration', 'top', 'right');
});
}
if (command.executedMarker) {
const d = this._instance.xterm!.raw?.registerDecoration({
marker: command.executedMarker
});
d?.onRender(e => {
e.textContent = 'C';
e.classList.add('xterm-sequence-decoration', 'bottom', 'left');
});
}
if (command.endMarker) {
const d = this._instance.xterm!.raw?.registerDecoration({
marker: command.endMarker
});
d?.onRender(e => {
e.textContent = 'D';
e.classList.add('xterm-sequence-decoration', 'bottom', 'right');
});
}
});
} else {
this._activeDevModeDisposables.value = this._instance.capabilities.onDidAddCapabilityType(e => {
if (e === TerminalCapability.CommandDetection) {
this._updateDevMode();
}
});
}
} else {
this._activeDevModeDisposables.clear();
}
}
private _isEnabled(): boolean {
return this._configurationService.getValue(TerminalSettingId.DevMode) || false;
}
}
registerTerminalContribution(DevModeContribution.ID, DevModeContribution);