Merge pull request microsoft#187511 from microsoft/merogge/accessible-view-style

clean up accessible view

Author: meganrogge

src/vs/workbench/contrib/accessibility/browser/accessibleView.ts

@@ -24,8 +24,7 @@ import { SelectionClipboardContributionID } from 'vs/workbench/contrib/codeEdito
 import { getSimpleEditorOptions } from 'vs/workbench/contrib/codeEditor/browser/simpleEditorOptions';
 
 const enum DIMENSION_DEFAULT {
-	WIDTH = .6,
-	HEIGHT = 200
+	WIDTH = 800
 }
 
 export interface IAccessibleContentProvider {
@@ -88,14 +87,15 @@ class AccessibleView extends Disposable {
 			quickSuggestions: false,
 			renderWhitespace: 'none',
 			dropIntoEditor: { enabled: true },
-			readOnly: true
+			readOnly: true,
+			fontFamily: 'var(--monaco-monospace-font)'
 		};
 		this._editorWidget = this._register(this._instantiationService.createInstance(CodeEditorWidget, this._editorContainer, editorOptions, codeEditorWidgetOptions));
 	}
 
 	show(provider: IAccessibleContentProvider): void {
 		const delegate: IContextViewDelegate = {
-			getAnchor: () => this._editorContainer,
+			getAnchor: () => { return { x: (window.innerWidth / 2) - (DIMENSION_DEFAULT.WIDTH / 2), y: (window.innerHeight / 2) - (this.editorWidget.getContentHeight() / 2) }; },
 			render: (container) => {
 				return this._render(provider, container);
 			},
@@ -161,11 +161,7 @@ class AccessibleView extends Disposable {
 	}
 
 	private _layout(): void {
-		const windowWidth = window.innerWidth;
-		const width = windowWidth * DIMENSION_DEFAULT.WIDTH;
-		this._editorWidget.layout({ width, height: this._editorWidget.getContentHeight() });
-		const left = Math.round((windowWidth - width) / 2);
-		this._editorContainer.style.left = `${left}px`;
+		this._editorWidget.layout({ width: DIMENSION_DEFAULT.WIDTH, height: this._editorWidget.getContentHeight() });
 	}
 
 	private async _getTextModel(resource: URI): Promise<ITextModel | null> {

src/vs/workbench/contrib/codeEditor/browser/accessibility/accessibility.css

@@ -4,9 +4,9 @@
  *--------------------------------------------------------------------------------------------*/
 
 .accessible-view {
-	position: relative;
+	position: absolute;
 	background-color: var(--vscode-editorWidget-background);
 	color: var(--vscode-editorWidget-foreground);
 	box-shadow: 0 2px 8px var(--vscode-widget-shadow);
-	border: 2px solid var(--vscode-contrastActiveBorder);
+	border: 2px solid var(--vscode-focusBorder);
 }