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.

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

Restore and fix macOS dark text selection cursor #96947

Merged
merged 5 commits into from May 12, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
14 changes: 14 additions & 0 deletions src/vs/base/browser/ui/mouseCursor/mouseCursor.css
@@ -0,0 +1,14 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/

.monaco-mouse-cursor-text {
cursor: text;
}

/* The following selector looks a bit funny, but that is needed to cover all the workbench and the editor!! */
.vs-dark .mac .monaco-mouse-cursor-text, .hc-black .mac .monaco-mouse-cursor-text,
.vs-dark.mac .monaco-mouse-cursor-text, .hc-black.mac .monaco-mouse-cursor-text {
cursor: -webkit-image-set(url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAL0lEQVQoz2NgCD3x//9/BhBYBWdhgFVAiVW4JBFKGIa4AqD0//9D3pt4I4tAdAMAHTQ/j5Zom30AAAAASUVORK5CYII=') 1x, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAAz0lEQVRIx2NgYGBY/R8I/vx5eelX3n82IJ9FxGf6tksvf/8FiTMQAcAGQMDvSwu09abffY8QYSAScNk45G198eX//yev73/4///701eh//kZSARckrNBRvz//+8+6ZohwCzjGNjdgQxkAg7B9WADeBjIBqtJCbhRA0YNoIkBSNmaPEMoNmA0FkYNoFKhapJ6FGyAH3nauaSmPfwI0v/3OukVi0CIZ+F25KrtYcx/CTIy0e+rC7R1Z4KMICVTQQ14feVXIbR695u14+Ir4gwAAD49E54wc1kWAAAAAElFTkSuQmCC') 2x) 5 8, text;
}
8 changes: 8 additions & 0 deletions src/vs/base/browser/ui/mouseCursor/mouseCursor.ts
@@ -0,0 +1,8 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/

import 'vs/css!./mouseCursor';

export const MOUSE_CURSOR_TEXT_CSS_CLASS_NAME = `monaco-mouse-cursor-text`;
7 changes: 4 additions & 3 deletions src/vs/editor/browser/controller/textAreaHandler.ts
Expand Up @@ -30,6 +30,7 @@ import { ViewContext } from 'vs/editor/common/view/viewContext';
import * as viewEvents from 'vs/editor/common/view/viewEvents';
import { AccessibilitySupport } from 'vs/platform/accessibility/common/accessibility';
import { IEditorAriaOptions } from 'vs/editor/browser/editorBrowser';
import { MOUSE_CURSOR_TEXT_CSS_CLASS_NAME } from 'vs/base/browser/ui/mouseCursor/mouseCursor';

export interface ITextAreaHandlerHelper {
visibleRangeForPositionRelativeToEditor(lineNumber: number, column: number): HorizontalPosition | null;
Expand Down Expand Up @@ -117,7 +118,7 @@ export class TextAreaHandler extends ViewPart {
// Text Area (The focus will always be in the textarea when the cursor is blinking)
this.textArea = createFastDomNode(document.createElement('textarea'));
PartFingerprints.write(this.textArea, PartFingerprint.TextArea);
this.textArea.setClassName('inputarea');
this.textArea.setClassName(`inputarea ${MOUSE_CURSOR_TEXT_CSS_CLASS_NAME}`);
this.textArea.setAttribute('wrap', 'off');
this.textArea.setAttribute('autocorrect', 'off');
this.textArea.setAttribute('autocapitalize', 'off');
Expand Down Expand Up @@ -279,7 +280,7 @@ export class TextAreaHandler extends ViewPart {
}

// Show the textarea
this.textArea.setClassName('inputarea ime-input');
this.textArea.setClassName(`inputarea ${MOUSE_CURSOR_TEXT_CSS_CLASS_NAME} ime-input`);

this._viewController.compositionStart('keyboard');
}));
Expand All @@ -301,7 +302,7 @@ export class TextAreaHandler extends ViewPart {
this._visibleTextArea = null;
this._render();

this.textArea.setClassName('inputarea');
this.textArea.setClassName(`inputarea ${MOUSE_CURSOR_TEXT_CSS_CLASS_NAME}`);
this._viewController.compositionEnd('keyboard');
}));

Expand Down
1 change: 0 additions & 1 deletion src/vs/editor/browser/viewParts/lines/viewLines.css
Expand Up @@ -23,7 +23,6 @@
}

.monaco-editor .view-lines {
cursor: text;
white-space: nowrap;
}

Expand Down
3 changes: 2 additions & 1 deletion src/vs/editor/browser/viewParts/lines/viewLines.ts
Expand Up @@ -22,6 +22,7 @@ import { ViewportData } from 'vs/editor/common/viewLayout/viewLinesViewportData'
import { Viewport } from 'vs/editor/common/viewModel/viewModel';
import { EditorOption } from 'vs/editor/common/config/editorOptions';
import { Constants } from 'vs/base/common/uint';
import { MOUSE_CURSOR_TEXT_CSS_CLASS_NAME } from 'vs/base/browser/ui/mouseCursor/mouseCursor';

class LastRenderedData {

Expand Down Expand Up @@ -134,7 +135,7 @@ export class ViewLines extends ViewPart implements IVisibleLinesHost<ViewLine>,
this._viewLineOptions = new ViewLineOptions(conf, this._context.theme.type);

PartFingerprints.write(this.domNode, PartFingerprint.ViewLines);
this.domNode.setClassName('view-lines');
this.domNode.setClassName(`view-lines ${MOUSE_CURSOR_TEXT_CSS_CLASS_NAME}`);
Configuration.applyFontInfo(this.domNode, fontInfo);

// --- width & height
Expand Down
5 changes: 3 additions & 2 deletions src/vs/editor/browser/viewParts/viewCursors/viewCursor.ts
Expand Up @@ -13,6 +13,7 @@ import { Range } from 'vs/editor/common/core/range';
import { RenderingContext, RestrictedRenderingContext } from 'vs/editor/common/view/renderingContext';
import { ViewContext } from 'vs/editor/common/view/viewContext';
import * as viewEvents from 'vs/editor/common/view/viewEvents';
import { MOUSE_CURSOR_TEXT_CSS_CLASS_NAME } from 'vs/base/browser/ui/mouseCursor/mouseCursor';

export interface IViewCursorRenderData {
domNode: HTMLElement;
Expand Down Expand Up @@ -63,7 +64,7 @@ export class ViewCursor {

// Create the dom node
this._domNode = createFastDomNode(document.createElement('div'));
this._domNode.setClassName('cursor');
this._domNode.setClassName(`cursor ${MOUSE_CURSOR_TEXT_CSS_CLASS_NAME}`);
this._domNode.setHeight(this._lineHeight);
this._domNode.setTop(0);
this._domNode.setLeft(0);
Expand Down Expand Up @@ -200,7 +201,7 @@ export class ViewCursor {
this._domNode.domNode.textContent = this._lastRenderedContent;
}

this._domNode.setClassName('cursor ' + this._renderData.textContentClassName);
this._domNode.setClassName(`cursor ${MOUSE_CURSOR_TEXT_CSS_CLASS_NAME} ${this._renderData.textContentClassName}`);

this._domNode.setDisplay('block');
this._domNode.setTop(this._renderData.top);
Expand Down
Expand Up @@ -9,7 +9,6 @@

.monaco-editor .cursors-layer > .cursor {
position: absolute;
cursor: text;
overflow: hidden;
}

Expand Down
3 changes: 2 additions & 1 deletion src/vs/editor/browser/widget/diffEditorWidget.ts
Expand Up @@ -49,6 +49,7 @@ import { onUnexpectedError } from 'vs/base/common/errors';
import { IEditorProgressService, IProgressRunner } from 'vs/platform/progress/common/progress';
import { ElementSizeObserver } from 'vs/editor/browser/config/elementSizeObserver';
import { Codicon, registerIcon } from 'vs/base/common/codicons';
import { MOUSE_CURSOR_TEXT_CSS_CLASS_NAME } from 'vs/base/browser/ui/mouseCursor/mouseCursor';

interface IEditorDiffDecorations {
decorations: IModelDeltaDecoration[];
Expand Down Expand Up @@ -2095,7 +2096,7 @@ class InlineViewZonesComputer extends ViewZonesComputer {
maxCharsPerLine += this.modifiedEditorOptions.get(EditorOption.scrollBeyondLastColumn);

let domNode = document.createElement('div');
domNode.className = 'view-lines line-delete';
domNode.className = `view-lines line-delete ${MOUSE_CURSOR_TEXT_CSS_CLASS_NAME}`;
domNode.innerHTML = sb.build();
Configuration.applyFontInfoSlow(domNode, fontInfo);

Expand Down
5 changes: 3 additions & 2 deletions src/vs/workbench/contrib/comments/browser/commentNode.ts
Expand Up @@ -33,6 +33,7 @@ import { ContextAwareMenuEntryActionViewItem } from 'vs/platform/actions/browser
import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
import { IContextKeyService, IContextKey } from 'vs/platform/contextkey/common/contextkey';
import { CommentFormActions } from 'vs/workbench/contrib/comments/browser/commentFormActions';
import { MOUSE_CURSOR_TEXT_CSS_CLASS_NAME } from 'vs/base/browser/ui/mouseCursor/mouseCursor';

export class CommentNode extends Disposable {
private _domNode: HTMLElement;
Expand Down Expand Up @@ -100,7 +101,7 @@ export class CommentNode extends Disposable {

this.createHeader(this._commentDetailsContainer);

this._body = dom.append(this._commentDetailsContainer, dom.$('div.comment-body'));
this._body = dom.append(this._commentDetailsContainer, dom.$(`div.comment-body.${MOUSE_CURSOR_TEXT_CSS_CLASS_NAME}`));
this._md = this.markdownRenderer.render(comment.body).element;
this._body.appendChild(this._md);

Expand All @@ -120,7 +121,7 @@ export class CommentNode extends Disposable {
}

private createHeader(commentDetailsContainer: HTMLElement): void {
const header = dom.append(commentDetailsContainer, dom.$('div.comment-title'));
const header = dom.append(commentDetailsContainer, dom.$(`div.comment-title.${MOUSE_CURSOR_TEXT_CSS_CLASS_NAME}`));
const author = dom.append(header, dom.$('strong.author'));
author.innerText = this.comment.userName;

Expand Down
Expand Up @@ -48,6 +48,7 @@ import { EditorOption } from 'vs/editor/common/config/editorOptions';
import { ServiceCollection } from 'vs/platform/instantiation/common/serviceCollection';
import { KeyCode } from 'vs/base/common/keyCodes';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { MOUSE_CURSOR_TEXT_CSS_CLASS_NAME } from 'vs/base/browser/ui/mouseCursor/mouseCursor';

export const COMMENTEDITOR_DECORATION_KEY = 'commenteditordecoration';
const COLLAPSE_ACTION_CLASS = 'expand-review-action codicon-chevron-up';
Expand Down Expand Up @@ -720,7 +721,7 @@ export class ReviewZoneWidget extends ZoneWidget implements ICommentThreadWidget
}

private createReplyButton() {
this._reviewThreadReplyButton = <HTMLButtonElement>dom.append(this._commentForm, dom.$('button.review-thread-reply-button'));
this._reviewThreadReplyButton = <HTMLButtonElement>dom.append(this._commentForm, dom.$(`button.review-thread-reply-button.${MOUSE_CURSOR_TEXT_CSS_CLASS_NAME}`));
this._reviewThreadReplyButton.title = this._commentOptions?.prompt || nls.localize('reply', "Reply...");

this._reviewThreadReplyButton.textContent = this._commentOptions?.prompt || nls.localize('reply', "Reply...");
Expand Down
1 change: 0 additions & 1 deletion src/vs/workbench/contrib/comments/browser/media/review.css
Expand Up @@ -257,7 +257,6 @@
line-height: 20px;
white-space: nowrap;
border: 0px;
cursor: text;
outline: 1px solid transparent;
}

Expand Down
4 changes: 0 additions & 4 deletions src/vs/workbench/contrib/debug/browser/media/repl.css
Expand Up @@ -59,10 +59,6 @@
max-width: 150px;
}

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This line should not be removed. This controls the looks of the cursor inside the debug console tree and is unrelated to this PR.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@isidorn That is the entire point of this PR, to change how the mouse cursor looks like on mac, but it goes even outside of the editor and adopts the custom cursor that the editor had also in the repl and in the comments thread.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Aha, I see that the class is set on the repl-tree.
I misunderstood the PR that it changes cursor only in the editor and all the editor instances like the repl input.
So I take my original comment back.

.repl .repl-tree .monaco-list-row {
cursor: text;
}

.repl .repl-tree .output.expression > .value,
.repl .repl-tree .evaluation-result.expression > .value {
margin-left: 0px;
Expand Down
3 changes: 2 additions & 1 deletion src/vs/workbench/contrib/debug/browser/repl.ts
Expand Up @@ -60,6 +60,7 @@ 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';
import { MOUSE_CURSOR_TEXT_CSS_CLASS_NAME } from 'vs/base/browser/ui/mouseCursor/mouseCursor';

const $ = dom.$;

Expand Down Expand Up @@ -510,7 +511,7 @@ export class Repl extends ViewPane implements IHistoryNavigationWidget {
super.renderBody(parent);

this.container = dom.append(parent, $('.repl'));
const treeContainer = dom.append(this.container, $('.repl-tree'));
const treeContainer = dom.append(this.container, $(`.repl-tree.${MOUSE_CURSOR_TEXT_CSS_CLASS_NAME}`));
this.createReplInput(this.container);

this.replDelegate = new ReplDelegate(this.configurationService);
Expand Down