diff --git a/src/vs/workbench/browser/parts/editor/binaryDiffEditor.ts b/src/vs/workbench/browser/parts/editor/binaryDiffEditor.ts index f6aefa006ca8..320352200a50 100644 --- a/src/vs/workbench/browser/parts/editor/binaryDiffEditor.ts +++ b/src/vs/workbench/browser/parts/editor/binaryDiffEditor.ts @@ -56,6 +56,7 @@ export class BinaryResourceDiffEditor extends BaseEditor implements IVerticalSas let leftBinaryContainerElement = document.createElement('div'); leftBinaryContainerElement.className = 'binary-container'; this.leftBinaryContainer = $(leftBinaryContainerElement); + this.leftBinaryContainer.tabindex(0); // enable focus support from the editor part (do not remove) // Left Custom Scrollbars this.leftScrollbar = new ScrollableElement(leftBinaryContainerElement, { horizontal: 'hidden', vertical: 'hidden' }); @@ -72,6 +73,7 @@ export class BinaryResourceDiffEditor extends BaseEditor implements IVerticalSas let rightBinaryContainerElement = document.createElement('div'); rightBinaryContainerElement.className = 'binary-container'; this.rightBinaryContainer = $(rightBinaryContainerElement); + this.rightBinaryContainer.tabindex(0); // enable focus support from the editor part (do not remove) // Right Custom Scrollbars this.rightScrollbar = new ScrollableElement(rightBinaryContainerElement, { horizontal: 'hidden', vertical: 'hidden' }); diff --git a/src/vs/workbench/browser/parts/editor/binaryEditor.ts b/src/vs/workbench/browser/parts/editor/binaryEditor.ts index ac52be2bf849..738d1e6134aa 100644 --- a/src/vs/workbench/browser/parts/editor/binaryEditor.ts +++ b/src/vs/workbench/browser/parts/editor/binaryEditor.ts @@ -40,6 +40,7 @@ export abstract class BaseBinaryResourceEditor extends BaseEditor { let binaryContainerElement = document.createElement('div'); binaryContainerElement.className = 'binary-container monaco-editor-background'; // Inherit the background color from selected theme' this.binaryContainer = $(binaryContainerElement); + this.binaryContainer.tabindex(0); // enable focus support from the editor part (do not remove) parent.getHTMLElement().appendChild(this.binaryContainer.getHTMLElement()); } diff --git a/src/vs/workbench/browser/parts/editor/iframeEditor.ts b/src/vs/workbench/browser/parts/editor/iframeEditor.ts index 9147675dc29b..85c60046a9ab 100644 --- a/src/vs/workbench/browser/parts/editor/iframeEditor.ts +++ b/src/vs/workbench/browser/parts/editor/iframeEditor.ts @@ -52,6 +52,7 @@ export class IFrameEditor extends BaseEditor { let iframeContainerElement = document.createElement('div'); iframeContainerElement.className = 'iframe-container monaco-editor-background'; // Inherit the background color from selected theme this.iframeContainer = $(iframeContainerElement); + this.iframeContainer.tabindex(0); // enable focus support from the editor part (do not remove) // IFrame this.iframeBuilder = $(this.iframeContainer).element('iframe').addClass('iframe'); diff --git a/src/vs/workbench/electron-browser/media/shell.css b/src/vs/workbench/electron-browser/media/shell.css index 5396492c2a50..162c1f4786ae 100644 --- a/src/vs/workbench/electron-browser/media/shell.css +++ b/src/vs/workbench/electron-browser/media/shell.css @@ -132,7 +132,7 @@ } .monaco-shell .monaco-tree.focused:focus { - outline: 0; /* tree indicates focus not via outline but through the focussed item */ + outline: 0 !important; /* tree indicates focus not via outline but through the focussed item */ } .monaco-shell [tabindex="0"]:active, @@ -145,7 +145,12 @@ } .monaco-shell .activitybar [tabindex="0"]:focus { - outline: 0; /* activity bar indicates focus custom */ + outline: 0 !important; /* activity bar indicates focus custom */ +} + +.monaco-shell .part.editor .iframe-container, +.monaco-shell .part.editor .binary-container { + outline: 0 !important; /* TODO@Ben we need focus indication for those too */ } /* END Keyboard Focus Indication Styles */ diff --git a/src/vs/workbench/parts/html/browser/htmlPreviewPart.ts b/src/vs/workbench/parts/html/browser/htmlPreviewPart.ts index 6a856340a17f..870a67eab3b1 100644 --- a/src/vs/workbench/parts/html/browser/htmlPreviewPart.ts +++ b/src/vs/workbench/parts/html/browser/htmlPreviewPart.ts @@ -72,6 +72,7 @@ export class HtmlPreviewPart extends BaseEditor { // Container for IFrame const iFrameContainerElement = document.createElement('div'); iFrameContainerElement.className = 'iframe-container monaco-editor-background'; // Inherit the background color from selected theme + iFrameContainerElement.tabIndex = 0; // enable focus support from the editor part (do not remove) iFrameContainerElement.appendChild(this._iFrameElement); parent.getHTMLElement().appendChild(iFrameContainerElement); @@ -113,7 +114,7 @@ export class HtmlPreviewPart extends BaseEditor { } else { this._modelChangeUnbind = cAll(this._modelChangeUnbind); } - }) + }); } public changePosition(position: Position): void { @@ -139,7 +140,7 @@ export class HtmlPreviewPart extends BaseEditor { return this._editorService.resolveEditorModel({ resource: (input).getResource() }).then(model => { if (model instanceof BaseTextEditorModel) { - this._model = model.textEditorModel + this._model = model.textEditorModel; } if (!this._model) { @@ -183,7 +184,7 @@ export class HtmlPreviewPart extends BaseEditor { if (newDocument.head.hasChildNodes()) { newDocument.head.insertBefore(styleElement, newDocument.head.firstChild); } else { - newDocument.head.appendChild(styleElement) + newDocument.head.appendChild(styleElement); } if (newDocument.head.innerHTML !== iFrameDocument.head.innerHTML) { @@ -296,7 +297,7 @@ namespace Integration { '::-webkit-scrollbar-thumb:active {', ' background-color: rgba(85, 85, 85, 0.8);', '}' - ].join('\n') + ].join('\n'); export function defaultStyle(element: HTMLElement, themeId: string): HTMLStyleElement { const styles = window.getComputedStyle(element);