Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fixes apply debug console font size setting to input field #91261

Merged
merged 4 commits into from
Apr 7, 2020
Merged

Fixes apply debug console font size setting to input field #91261

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
df312b1
Fixes #90714
jeanp413 Feb 24, 2020
240ba23
Merge branch 'master' into fix-90714
jeanp413 Apr 6, 2020
7c5b704
Merge branch 'master' into fix-90714
jeanp413 Apr 7, 2020
95e4e7a
Center repl input chevron
jeanp413 Apr 7, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
20 changes: 10 additions & 10 deletions src/vs/workbench/contrib/debug/browser/media/repl.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,8 @@
}

.repl .repl-input-wrapper {
padding-left: 20px;
display: flex;
align-items: center;
border-top: 1px solid rgba(128, 128, 128, 0.35);
}

Expand All @@ -92,15 +93,14 @@
border-top-color: #6FC3DF;
}

.repl .repl-input-wrapper:before {
left: 8px;
position: absolute;
content: '\276f';
line-height: 18px;
}

.monaco-workbench.linux .repl .repl-input-wrapper:before {
font-size: 9px;
.repl .repl-input-wrapper .repl-input-chevron {
padding: 0 6px 0 8px;
width: 16px;
height: 100%;
display: flex;
flex-shrink: 0;
justify-content: center;
font-weight: 600;
}

/* Output coloring and styling */
Expand Down
23 changes: 20 additions & 3 deletions src/vs/workbench/contrib/debug/browser/repl.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ import { IViewsService, IViewDescriptorService } from 'vs/workbench/common/views
import { IOpenerService } from 'vs/platform/opener/common/opener';
import { ReplGroup } from 'vs/workbench/contrib/debug/common/replModel';
import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
import { EDITOR_FONT_DEFAULTS, EditorOption } from 'vs/editor/common/config/editorOptions';

const $ = dom.$;

Expand All @@ -75,7 +76,6 @@ export class Repl extends ViewPane implements IHistoryNavigationWidget {
_serviceBrand: undefined;

private static readonly REFRESH_DELAY = 100; // delay in ms to refresh the repl for new elements to show
private static readonly REPL_INPUT_LINE_HEIGHT = 19;
private static readonly URI = uri.parse(`${DEBUG_SCHEME}:replinput`);

private history: HistoryNavigator<string>;
Expand Down Expand Up @@ -284,6 +284,14 @@ export class Repl extends ViewPane implements IHistoryNavigationWidget {
const lineHeight = debugConsole.lineHeight ? `${debugConsole.lineHeight}px` : '1.4em';
const backgroundColor = this.themeService.getColorTheme().getColor(this.getBackgroundColor());

this.replInput.updateOptions({
fontSize,
lineHeight: debugConsole.lineHeight,
fontFamily: debugConsole.fontFamily === 'default' ? EDITOR_FONT_DEFAULTS.fontFamily : debugConsole.fontFamily
});

const replInputLineHeight = this.replInput.getOption(EditorOption.lineHeight);

// Set the font size, font family, line height and align the twistie to be centered, and input theme color
this.styleElement.innerHTML = `
.repl .repl-tree .expression {
Expand All @@ -299,12 +307,20 @@ export class Repl extends ViewPane implements IHistoryNavigationWidget {
background-position-y: calc(100% - ${fontSize * 1.4 / 2 - 8}px);
}

.repl .repl-input-wrapper .repl-input-chevron {
line-height: ${replInputLineHeight}px
}

.repl .repl-input-wrapper .monaco-editor .lines-content {
background-color: ${backgroundColor};
}
`;

this.tree.rerender();

if (this.dimension) {
this.layoutBody(this.dimension.height, this.dimension.width);
}
}
}

Expand Down Expand Up @@ -396,7 +412,7 @@ export class Repl extends ViewPane implements IHistoryNavigationWidget {

protected layoutBody(height: number, width: number): void {
this.dimension = new dom.Dimension(width, height);
const replInputHeight = Repl.REPL_INPUT_LINE_HEIGHT * this.replInputLineCount;
const replInputHeight = Math.min(this.replInput.getContentHeight(), height);
if (this.tree) {
const lastElementVisible = this.tree.scrollTop + this.tree.renderHeight >= this.tree.scrollHeight;
const treeHeight = height - replInputHeight;
Expand All @@ -408,7 +424,7 @@ export class Repl extends ViewPane implements IHistoryNavigationWidget {
}
this.replInputContainer.style.height = `${replInputHeight}px`;

this.replInput.layout({ width: width - 20, height: replInputHeight });
this.replInput.layout({ width: width - 30, height: replInputHeight });
}

focus(): void {
Expand Down Expand Up @@ -543,6 +559,7 @@ export class Repl extends ViewPane implements IHistoryNavigationWidget {

private createReplInput(container: HTMLElement): void {
this.replInputContainer = dom.append(container, $('.repl-input-wrapper'));
dom.append(this.replInputContainer, $('.repl-input-chevron.codicon.codicon-chevron-right'));

const { scopedContextKeyService, historyNavigationEnablement } = createAndBindHistoryNavigationWidgetScopedContextKeyService(this.contextKeyService, { target: this.replInputContainer, historyNavigator: this });
this.historyNavigationEnablement = historyNavigationEnablement;
Expand Down