more focus indication styles improvements

src/vs/workbench/browser/parts/activitybar/media/activityaction.css

@@ -35,7 +35,19 @@
 	top: 4px;
 	height: 32px;
 	width: 0;
-	border-left: 2px solid #1E8AE5;
+	border-left: 2px solid;
+}
+
+.monaco-workbench.vs > .activitybar > .content .monaco-action-bar .action-item .action-label:focus:before {
+	border-left-color: #1E8AE5;
+}
+
+.monaco-workbench.vs-dark > .activitybar > .content .monaco-action-bar .action-item .action-label:focus:before {
+	border-left-color: #1E8AE5;
+}
+
+.monaco-workbench.hc-black > .activitybar > .content .monaco-action-bar .action-item .action-label:focus:before {
+	border-left-color: #DF740C;
 }
 
 .monaco-workbench > .activitybar.left > .content .monaco-action-bar .action-item .action-label:focus:before {
@@ -176,7 +188,6 @@
 /* High Contrast Theming */
 .monaco-workbench.hc-black > .activitybar > .content .monaco-action-bar .action-label,
 .monaco-workbench.hc-black > .activitybar > .content .monaco-action-bar .action-label.active {
-	background: none;
 	opacity: 1;
 }
 

src/vs/workbench/browser/parts/editor/iframeEditor.ts

@@ -51,7 +51,6 @@ 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
 
 		// IFrame
 		this.iframeBuilder = $(this.iframeContainer).element('iframe').addClass('iframe');

src/vs/workbench/electron-browser/media/shell.css

@@ -49,32 +49,63 @@
 
 /* START Keyboard Focus Indication Styles */
 
-.monaco-shell [tabindex="0"]:focus,
-.monaco-shell select:focus,
-.monaco-shell input[type="button"]:focus,
-.monaco-shell input[type="submit"]:focus,
-.monaco-shell input[type="checkbox"]:focus {
-	outline: 2px auto -webkit-focus-ring-color;
-	outline-offset: -2px;
+.monaco-shell.vs [tabindex="0"]:focus,
+.monaco-shell.vs select:focus,
+.monaco-shell.vs input[type="button"]:focus,
+.monaco-shell.vs input[type="submit"]:focus,
+.monaco-shell.vs input[type="checkbox"]:focus {
+	outline: 1px auto #1E8AE5;
+	outline-offset: -3px;
 	opacity: 1 !important; /* prevent components from dimming focus feedback */
 }
 
-.monaco-shell input[type="text"], .monaco-shell textarea {
-	outline: 0; /* do not show outline in input fields and textarea */
+.monaco-shell.vs-dark [tabindex="0"]:focus,
+.monaco-shell.vs-dark select:focus,
+.monaco-shell.vs-dark input[type="button"]:focus,
+.monaco-shell.vs-dark input[type="submit"]:focus,
+.monaco-shell.vs-dark input[type="checkbox"]:focus {
+	outline: 1px auto #1E8AE5;
+	outline-offset: -3px;
+	opacity: 1 !important; /* prevent components from dimming focus feedback */
 }
 
-.monaco-shell .monaco-tree:focus {
-	outline: 0; /* tree indicates focus not via outline but through the focussed item */
+.monaco-shell.hc-black [tabindex="0"]:focus,
+.monaco-shell.hc-black select:focus,
+.monaco-shell.hc-black input[type="button"]:focus,
+.monaco-shell.hc-black input[type="submit"]:focus,
+.monaco-shell.hc-black input[type="checkbox"]:focus {
+	outline: 2px auto #DF740C;
+	outline-offset: -2px;
+}
+
+.monaco-shell.vs .monaco-tree.focused .monaco-tree-rows:empty,
+.monaco-shell.vs .monaco-tree.focused.no-item-focus .monaco-tree-rows {
+	outline: 1px auto #1E8AE5; /* we still need to handle the empty tree or no focus item case */
+	outline-offset: -3px;
 }
 
-.monaco-shell .monaco-tree.focused .monaco-tree-rows:empty,
-.monaco-shell .monaco-tree.focused.no-item-focus .monaco-tree-rows {
-	outline: 2px auto -webkit-focus-ring-color; /* we still need to handle the empty tree or no focus item case */
+.monaco-shell.vs-dark .monaco-tree.focused .monaco-tree-rows:empty,
+.monaco-shell.vs-dark .monaco-tree.focused.no-item-focus .monaco-tree-rows {
+	outline: 1px auto #1E8AE5; /* we still need to handle the empty tree or no focus item case */
+	outline-offset: -3px;
+}
+
+.monaco-shell.hc-black .monaco-tree.focused .monaco-tree-rows:empty,
+.monaco-shell.hc-black .monaco-tree.focused.no-item-focus .monaco-tree-rows {
+	outline: 2px auto #DF740C; /* we still need to handle the empty tree or no focus item case */
 	outline-offset: -2px;
 }
 
+.monaco-shell input[type="text"], .monaco-shell textarea {
+	outline: 0; /* do not show outline in input fields and textarea */
+}
+
+.monaco-shell .monaco-tree:focus {
+	outline: 0 !important; /* tree indicates focus not via outline but through the focussed item */
+}
+
 .monaco-shell .activitybar [tabindex="0"]:focus {
-	outline: 0; /* activity bar indicates focus customly */
+	outline: 0 !important; /* activity bar indicates focus customly */
 }
 
 /* END Keyboard Focus Indication Styles */

src/vs/workbench/parts/html/browser/htmlPreviewPart.ts

@@ -71,7 +71,6 @@ 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;
 		iFrameContainerElement.appendChild(this._iFrameElement);
 
 		parent.getHTMLElement().appendChild(iFrameContainerElement);