Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-05-02 22:41:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

improvements to cell output focus sinks

Browse Source 
Move focus off sinks when they are used so they are not triggered a second time when focus goes back into the webview later
This commit is contained in:
Rob Lourens
2020-05-11 18:26:28 -05:00
parent 2586069f4d
commit fedd448714
1 changed files with 21 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/vs/workbench/contrib/notebook/browser/view/renderers/backLayerWebView.ts
View File

@@ -304,16 +304,32 @@ ${loaderJs}
});
};
function createFocusSink(cellId, focusNext) {
function focusFirstFocusableInCell(cellId) {
const cellOutputContainer = document.getElementById(cellId);
if (cellOutputContainer) {
const focusableElement = cellOutputContainer.querySelector('[tabindex="0"], [href], button, input, option, select, textarea');
focusableElement && focusableElement.focus();
}
}
function createFocusSink(cellId, outputId, focusNext) {
const element = document.createElement('div');
element.tabIndex = 0;
element.addEventListener('focus', () => {
vscode.postMessage({
__vscode_notebook_message: true,
type: 'focus-editor',
id: cellId,
id: outputId,
focusNext
});
setTimeout(() => { // Wait a tick to prevent the focus indicator blinking before webview blurs
// Move focus off the focus sink - single use
focusFirstFocusableInCell(cellId);
}, 50);
console.log(cellId, outputId);
console.log(document.activeElement);
});
return element;
@@ -332,7 +348,7 @@ ${loaderJs}
if (!cellOutputContainer) {
const container = document.getElementById('container');
const upperWrapperElement = createFocusSink(outputId);
const upperWrapperElement = createFocusSink(id, outputId);
container.appendChild(upperWrapperElement);
let newElement = document.createElement('div');
@@ -358,7 +374,7 @@ ${loaderJs}
});
});
const lowerWrapperElement = createFocusSink(outputId, true);
const lowerWrapperElement = createFocusSink(id, outputId, true);
container.appendChild(lowerWrapperElement);
}
@@ -439,11 +455,7 @@ ${loaderJs}
break;
case 'focus-output':
{
let cellOutputContainer = document.getElementById(id);
if(cellOutputContainer){
const focusableElement = cellOutputContainer.querySelector('[tabindex="0"], [href], button, input, option, select, textarea');
focusableElement && focusableElement.focus();
}
focusFirstFocusableInCell(id);
break;
}
}