Skip to content

Commit

Permalink
Show cell row hover effects when hovering a cell's webview widget
Browse files Browse the repository at this point in the history 
Fix #94314
  • Loading branch information
@roblourens
roblourens committed Apr 22, 2020
1 parent 72e1d20 commit fc5709a
Show file tree
Hide file tree
Showing 6 changed files with 87 additions and 15 deletions.
15 changes: 11 additions & 4 deletions src/vs/workbench/contrib/notebook/browser/media/notebook.css
View file
Expand Up @@ -56,7 +56,8 @@
}

.monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.focused .cell-drag-handle,
.monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row:hover .cell-drag-handle {
.monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row:hover .cell-drag-handle,
.monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.cell-output-hover .cell-drag-handle {
visibility: visible;
}

Expand Down Expand Up @@ -152,11 +153,13 @@


.monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .menu.mouseover,
.monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row:hover .menu {
.monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row:hover .menu,
.monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.cell-output-hover .menu {
visibility: visible;
}

.monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row:hover {
.monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row:hover,
.monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.cell-output-hover {
outline: none !important;
}

Expand Down Expand Up @@ -253,7 +256,8 @@
}

.monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row:hover .cell.runnable .run-button-container .monaco-toolbar,
.monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.focused .cell.runnable .run-button-container .monaco-toolbar {
.monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.focused .cell.runnable .run-button-container .monaco-toolbar,
.monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.cell-output-hover .cell.runnable .run-button-container .monaco-toolbar {
visibility: visible;
}

Expand All @@ -270,6 +274,7 @@
}

.monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row:hover .cell .run-button-container .execution-count-label,
.monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.cell-output-hover .cell .run-button-container .execution-count-label,
.monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.focused .cell .run-button-container .execution-count-label {
visibility: hidden;
}
Expand All @@ -283,6 +288,7 @@
}

.monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.focused .monaco-toolbar,
.monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.cell-output-hover .monaco-toolbar,
.monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row:hover .monaco-toolbar {
visibility: visible;
}
Expand All @@ -307,6 +313,7 @@
}

.monaco-workbench .part.editor > .content .notebook-editor .monaco-list .monaco-list-row:hover .notebook-cell-focus-indicator,
.monaco-workbench .part.editor > .content .notebook-editor .monaco-list .monaco-list-row.cell-output-hover .notebook-cell-focus-indicator,
.monaco-workbench .part.editor > .content .notebook-editor .monaco-list .monaco-list-row.focused .notebook-cell-focus-indicator {
visibility: visible;
}
Expand Down
1 change: 1 addition & 0 deletions src/vs/workbench/contrib/notebook/browser/notebookBrowser.ts
View file
Expand Up @@ -463,6 +463,7 @@ export interface CellViewModelStateChangeEvent {
languageChanged?: boolean;
foldingStateChanged?: boolean;
contentChanged?: boolean;
outputIsHoveredChanged?: boolean;
}

/**
Expand Down
3 changes: 2 additions & 1 deletion src/vs/workbench/contrib/notebook/browser/notebookEditor.ts
View file
Expand Up @@ -1022,7 +1022,8 @@ registerThemingParticipant((theme, collector) => {
collector.addRule(`.monaco-workbench .part.editor > .content .notebook-editor .cell-bottom-toolbar-container .seperator { background-color: ${cellToolbarSeperator} }`);
collector.addRule(`.monaco-workbench .part.editor > .content .notebook-editor .cell-bottom-toolbar-container .seperator-short { background-color: ${cellToolbarSeperator} }`);
collector.addRule(`.monaco-workbench .part.editor > .content .notebook-editor .monaco-list-row > .monaco-toolbar { border: solid 1px ${cellToolbarSeperator}; }`);
collector.addRule(`.monaco-workbench .part.editor > .content .notebook-editor .monaco-list-row:hover .notebook-cell-focus-indicator { border-color: ${cellToolbarSeperator}; }`);
collector.addRule(`.monaco-workbench .part.editor > .content .notebook-editor .monaco-list-row:hover .notebook-cell-focus-indicator,
.monaco-workbench .part.editor > .content .notebook-editor .monaco-list-row.cell-output-hover .notebook-cell-focus-indicator { border-color: ${cellToolbarSeperator}; }`);
}

const focusedCellIndicatorColor = theme.getColor(focusedCellIndicator);
Expand Down
65 changes: 55 additions & 10 deletions src/vs/workbench/contrib/notebook/browser/view/renderers/backLayerWebView.ts
View file
Expand Up @@ -20,13 +20,25 @@ import { IOpenerService } from 'vs/platform/opener/common/opener';
import { getPathFromAmdModule } from 'vs/base/common/amd';
import { isWeb } from 'vs/base/common/platform';

export interface IDimentionMessage {
export interface IDimensionMessage {
__vscode_notebook_message: boolean;
type: 'dimension';
id: string;
data: DOM.Dimension;
}

export interface IMouseEnterMessage {
__vscode_notebook_message: boolean;
type: 'mouseenter';
id: string;
}

export interface IMouseLeaveMessage {
__vscode_notebook_message: boolean;
type: 'mouseleave';
id: string;
}

export interface IWheelMessage {
__vscode_notebook_message: boolean;
type: 'did-scroll-wheel';
Expand Down Expand Up @@ -80,7 +92,7 @@ export interface IUpdatePreloadResourceMessage {
resources: string[];
}

type IMessage = IDimentionMessage | IScrollAckMessage | IWheelMessage;
type IMessage = IDimensionMessage | IScrollAckMessage | IWheelMessage | IMouseEnterMessage | IMouseLeaveMessage;

let version = 0;
export class BackLayerWebView extends Disposable {
Expand Down Expand Up @@ -279,6 +291,23 @@ ${loaderJs}
newElement.id = id;
document.getElementById('container').appendChild(newElement);
cellOutputContainer = newElement;
cellOutputContainer.addEventListener('mouseenter', () => {
vscode.postMessage({
__vscode_notebook_message: true,
type: 'mouseenter',
id: outputId,
data: { }
});
});
cellOutputContainer.addEventListener('mouseleave', () => {
vscode.postMessage({
__vscode_notebook_message: true,
type: 'mouseleave',
id: outputId,
data: { }
});
});
}
let outputNode = document.createElement('div');
Expand Down Expand Up @@ -362,6 +391,15 @@ ${loaderJs}
`;
}

private resolveOutputId(id: string): { cell: CodeCellViewModel, output: IOutput } | undefined {
const output = this.reversedInsetMapping.get(id);
if (!output) {
return;
}

return { cell: this.insetMapping.get(output)!.cell, output };
}

initialize(content: string) {
this.webview = this._createInset(this.webviewService, content);
this.webview.mountTo(this.element);
Expand All @@ -373,21 +411,28 @@ ${loaderJs}
this._register(this.webview.onMessage((data: IMessage) => {
if (data.__vscode_notebook_message) {
if (data.type === 'dimension') {
let output = this.reversedInsetMapping.get(data.id);

if (!output) {
return;
}

let cell = this.insetMapping.get(output)!.cell;
let height = data.data.height;
let outputHeight = height;

if (cell) {
const info = this.resolveOutputId(data.id);
if (info) {
const { cell, output } = info;
let outputIndex = cell.outputs.indexOf(output);
cell.updateOutputHeight(outputIndex, outputHeight);
this.notebookEditor.layoutNotebookCell(cell, cell.layoutInfo.totalHeight);
}
} else if (data.type === 'mouseenter') {
const info = this.resolveOutputId(data.id);
if (info) {
const { cell } = info;
cell.outputIsHovered = true;
}
} else if (data.type === 'mouseleave') {
const info = this.resolveOutputId(data.id);
if (info) {
const { cell } = info;
cell.outputIsHovered = false;
}
} else if (data.type === 'scroll-ack') {
// const date = new Date();
// const top = data.data.top;
Expand Down
8 changes: 8 additions & 0 deletions src/vs/workbench/contrib/notebook/browser/view/renderers/cellRenderer.ts
View file
Expand Up @@ -722,6 +722,10 @@ export class CodeCellRenderer extends AbstractCellRenderer implements IListRende
}
}

private updateForHover(element: CodeCellViewModel, templateData: CodeCellRenderTemplate): void {
DOM.toggleClass(templateData.container, 'cell-output-hover', element.outputIsHovered);
}

renderElement(element: CodeCellViewModel, index: number, templateData: CodeCellRenderTemplate, height: number | undefined): void {
this.commonRenderElement(element, index, templateData);

Expand Down Expand Up @@ -762,6 +766,10 @@ export class CodeCellRenderer extends AbstractCellRenderer implements IListRende
if (e.metadataChanged) {
this.updateForMetadata(element, templateData, cellEditableKey);
}

if (e.outputIsHoveredChanged) {
this.updateForHover(element, templateData);
}
}));

this.setupCellToolbarActions(contextKeyService, templateData, elementDisposables);
Expand Down
10 changes: 10 additions & 0 deletions src/vs/workbench/contrib/notebook/browser/viewModel/codeCellViewModel.ts
View file
Expand Up @@ -49,6 +49,16 @@ export class CodeCellViewModel extends BaseCellViewModel implements ICellViewMod
return this._editorHeight;
}

private _hoveringOutput: boolean = false;
public get outputIsHovered(): boolean {
return this._hoveringOutput;
}

public set outputIsHovered(v: boolean) {
this._hoveringOutput = v;
this._onDidChangeState.fire({ outputIsHoveredChanged: true });
}

private _layoutInfo: CodeCellLayoutInfo;

get layoutInfo() {
Expand Down

0 comments on commit fc5709a

Please sign in to comment.