diff --git a/src/vs/base/browser/dom.ts b/src/vs/base/browser/dom.ts index 6b05568414de1de5a7d5441d41e07f47ededd089..0f3c778b56ef4af7d30fe6d79a7ca99bba9bc379 100644 --- a/src/vs/base/browser/dom.ts +++ b/src/vs/base/browser/dom.ts @@ -178,95 +178,7 @@ export function toggleClass(node: HTMLElement, className: string, shouldHaveIt?: } } -export const StyleMutator = { - setMaxWidth: (domNode: HTMLElement, maxWidth: number) => { - let desiredValue = maxWidth + 'px'; - if (domNode.style.maxWidth !== desiredValue) { - domNode.style.maxWidth = desiredValue; - } - }, - setWidth: (domNode: HTMLElement, width: number) => { - let desiredValue = width + 'px'; - if (domNode.style.width !== desiredValue) { - domNode.style.width = desiredValue; - } - }, - setHeight: (domNode: HTMLElement, height: number) => { - let desiredValue = height + 'px'; - if (domNode.style.height !== desiredValue) { - domNode.style.height = desiredValue; - } - }, - setTop: (domNode: HTMLElement, top: number) => { - let desiredValue = top + 'px'; - if (domNode.style.top !== desiredValue) { - domNode.style.top = desiredValue; - } - }, - setLeft: (domNode: HTMLElement, left: number) => { - let desiredValue = left + 'px'; - if (domNode.style.left !== desiredValue) { - domNode.style.left = desiredValue; - } - }, - setBottom: (domNode: HTMLElement, bottom: number) => { - let desiredValue = bottom + 'px'; - if (domNode.style.bottom !== desiredValue) { - domNode.style.bottom = desiredValue; - } - }, - setRight: (domNode: HTMLElement, right: number) => { - let desiredValue = right + 'px'; - if (domNode.style.right !== desiredValue) { - domNode.style.right = desiredValue; - } - }, - setFontSize: (domNode: HTMLElement, fontSize: number) => { - let desiredValue = fontSize + 'px'; - if (domNode.style.fontSize !== desiredValue) { - domNode.style.fontSize = desiredValue; - } - }, - setLineHeight: (domNode: HTMLElement, lineHeight: number) => { - let desiredValue = lineHeight + 'px'; - if (domNode.style.lineHeight !== desiredValue) { - domNode.style.lineHeight = desiredValue; - } - }, - setTransform: null, - setDisplay: (domNode: HTMLElement, desiredValue: string) => { - if (domNode.style.display !== desiredValue) { - domNode.style.display = desiredValue; - } - }, - setVisibility: (domNode: HTMLElement, desiredValue: string) => { - if (domNode.style.visibility !== desiredValue) { - domNode.style.visibility = desiredValue; - } - }, -}; -// Define setTransform -function setWebkitTransform(domNode: HTMLElement, desiredValue: string): void { - if (domNode.getAttribute('data-transform') !== desiredValue) { - domNode.setAttribute('data-transform', desiredValue); - (domNode.style).webkitTransform = desiredValue; - } -} -function setTransform(domNode: HTMLElement, desiredValue: string): void { - if (domNode.getAttribute('data-transform') !== desiredValue) { - domNode.setAttribute('data-transform', desiredValue); - domNode.style.transform = desiredValue; - } -} -(function() { - let testDomNode = document.createElement('div'); - if (typeof (testDomNode.style).webkitTransform !== 'undefined') { - StyleMutator.setTransform = setWebkitTransform; - } else { - StyleMutator.setTransform = setTransform; - } -})(); function _addListener(node: Element, type: string, handler: (event: any) => void, useCapture?: boolean): () => void; function _addListener(node: Window, type: string, handler: (event: any) => void, useCapture?: boolean): () => void; diff --git a/src/vs/base/browser/styleMutator.ts b/src/vs/base/browser/styleMutator.ts new file mode 100644 index 0000000000000000000000000000000000000000..39d33e3d5e2d203c44bc70f45f1169108951d374 --- /dev/null +++ b/src/vs/base/browser/styleMutator.ts @@ -0,0 +1,95 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ +'use strict'; + +export const StyleMutator = { + setMaxWidth: (domNode: HTMLElement, maxWidth: number) => { + let desiredValue = maxWidth + 'px'; + if (domNode.style.maxWidth !== desiredValue) { + domNode.style.maxWidth = desiredValue; + } + }, + setWidth: (domNode: HTMLElement, width: number) => { + let desiredValue = width + 'px'; + if (domNode.style.width !== desiredValue) { + domNode.style.width = desiredValue; + } + }, + setHeight: (domNode: HTMLElement, height: number) => { + let desiredValue = height + 'px'; + if (domNode.style.height !== desiredValue) { + domNode.style.height = desiredValue; + } + }, + setTop: (domNode: HTMLElement, top: number) => { + let desiredValue = top + 'px'; + if (domNode.style.top !== desiredValue) { + domNode.style.top = desiredValue; + } + }, + setLeft: (domNode: HTMLElement, left: number) => { + let desiredValue = left + 'px'; + if (domNode.style.left !== desiredValue) { + domNode.style.left = desiredValue; + } + }, + setBottom: (domNode: HTMLElement, bottom: number) => { + let desiredValue = bottom + 'px'; + if (domNode.style.bottom !== desiredValue) { + domNode.style.bottom = desiredValue; + } + }, + setRight: (domNode: HTMLElement, right: number) => { + let desiredValue = right + 'px'; + if (domNode.style.right !== desiredValue) { + domNode.style.right = desiredValue; + } + }, + setFontSize: (domNode: HTMLElement, fontSize: number) => { + let desiredValue = fontSize + 'px'; + if (domNode.style.fontSize !== desiredValue) { + domNode.style.fontSize = desiredValue; + } + }, + setLineHeight: (domNode: HTMLElement, lineHeight: number) => { + let desiredValue = lineHeight + 'px'; + if (domNode.style.lineHeight !== desiredValue) { + domNode.style.lineHeight = desiredValue; + } + }, + setTransform: null, + setDisplay: (domNode: HTMLElement, desiredValue: string) => { + if (domNode.style.display !== desiredValue) { + domNode.style.display = desiredValue; + } + }, + setVisibility: (domNode: HTMLElement, desiredValue: string) => { + if (domNode.style.visibility !== desiredValue) { + domNode.style.visibility = desiredValue; + } + }, +}; + +// Define setTransform +function setWebkitTransform(domNode: HTMLElement, desiredValue: string): void { + if (domNode.getAttribute('data-transform') !== desiredValue) { + domNode.setAttribute('data-transform', desiredValue); + (domNode.style).webkitTransform = desiredValue; + } +} +function setTransform(domNode: HTMLElement, desiredValue: string): void { + if (domNode.getAttribute('data-transform') !== desiredValue) { + domNode.setAttribute('data-transform', desiredValue); + domNode.style.transform = desiredValue; + } +} +(function() { + let testDomNode = document.createElement('div'); + if (typeof (testDomNode.style).webkitTransform !== 'undefined') { + StyleMutator.setTransform = setWebkitTransform; + } else { + StyleMutator.setTransform = setTransform; + } +})(); \ No newline at end of file diff --git a/src/vs/base/browser/ui/scrollbar/horizontalScrollbar.ts b/src/vs/base/browser/ui/scrollbar/horizontalScrollbar.ts index 0244916c7a5a692d6992f3b4b67c0e707f7044c2..c49c596291c33681984ba10d10159834092eb902 100644 --- a/src/vs/base/browser/ui/scrollbar/horizontalScrollbar.ts +++ b/src/vs/base/browser/ui/scrollbar/horizontalScrollbar.ts @@ -7,9 +7,10 @@ import * as Browser from 'vs/base/browser/browser'; import {ARROW_IMG_SIZE, AbstractScrollbar, ScrollbarState, IMouseMoveEventData} from 'vs/base/browser/ui/scrollbar/abstractScrollbar'; import {StandardMouseEvent, StandardMouseWheelEvent} from 'vs/base/browser/mouseEvent'; -import {IDomNodePosition, StyleMutator} from 'vs/base/browser/dom'; +import {IDomNodePosition} from 'vs/base/browser/dom'; import {IParent, IScrollableElementOptions, Visibility} from 'vs/base/browser/ui/scrollbar/scrollableElement'; import {IScrollable} from 'vs/base/common/scrollable'; +import {StyleMutator} from 'vs/base/browser/styleMutator'; export class HorizontalScrollbar extends AbstractScrollbar { diff --git a/src/vs/base/browser/ui/scrollbar/verticalScrollbar.ts b/src/vs/base/browser/ui/scrollbar/verticalScrollbar.ts index 18edcb41d1c60a8a98b5c5bd8a0447e8c04a64cd..85cc4a1a70827b0075752b9908f45472b3b8f729 100644 --- a/src/vs/base/browser/ui/scrollbar/verticalScrollbar.ts +++ b/src/vs/base/browser/ui/scrollbar/verticalScrollbar.ts @@ -7,9 +7,10 @@ import * as Browser from 'vs/base/browser/browser'; import {ARROW_IMG_SIZE, AbstractScrollbar, ScrollbarState, IMouseMoveEventData} from 'vs/base/browser/ui/scrollbar/abstractScrollbar'; import {StandardMouseEvent, StandardMouseWheelEvent} from 'vs/base/browser/mouseEvent'; -import {IDomNodePosition, StyleMutator} from 'vs/base/browser/dom'; +import {IDomNodePosition} from 'vs/base/browser/dom'; import {IParent, IScrollableElementOptions, Visibility} from 'vs/base/browser/ui/scrollbar/scrollableElement'; import {IScrollable} from 'vs/base/common/scrollable'; +import {StyleMutator} from 'vs/base/browser/styleMutator'; export class VerticalScrollbar extends AbstractScrollbar { diff --git a/src/vs/editor/browser/controller/keyboardHandler.ts b/src/vs/editor/browser/controller/keyboardHandler.ts index 379405a86551bee0bce282309d2c18b33f05d6ec..b4aabe5eed2461430905fafad6ccb8078d6c770a 100644 --- a/src/vs/editor/browser/controller/keyboardHandler.ts +++ b/src/vs/editor/browser/controller/keyboardHandler.ts @@ -22,6 +22,7 @@ import Event, {Emitter} from 'vs/base/common/event'; import {TextAreaHandler} from 'vs/editor/common/controller/textAreaHandler'; import {ITextAreaWrapper, IClipboardEvent, IKeyboardEventWrapper, ISimpleModel, TextAreaStrategy} from 'vs/editor/common/controller/textAreaState'; import {GlobalScreenReaderNVDA} from 'vs/editor/common/config/commonEditorConfig'; +import {StyleMutator} from 'vs/base/browser/styleMutator'; class ClipboardEventWrapper implements IClipboardEvent { @@ -243,23 +244,23 @@ export class KeyboardHandler extends ViewEventHandler implements Lifecycle.IDisp let visibleRange = this.viewHelper.visibleRangeForPositionRelativeToEditor(lineNumber, column); if (visibleRange) { - DomUtils.StyleMutator.setTop(this.textArea.actual, visibleRange.top); - DomUtils.StyleMutator.setLeft(this.textArea.actual, this.contentLeft + visibleRange.left - this.scrollLeft); + StyleMutator.setTop(this.textArea.actual, visibleRange.top); + StyleMutator.setLeft(this.textArea.actual, this.contentLeft + visibleRange.left - this.scrollLeft); } if (Browser.isIE11orEarlier) { - DomUtils.StyleMutator.setWidth(this.textArea.actual, this.contentWidth); + StyleMutator.setWidth(this.textArea.actual, this.contentWidth); } // Show the textarea - DomUtils.StyleMutator.setHeight(this.textArea.actual, this.context.configuration.editor.lineHeight); + StyleMutator.setHeight(this.textArea.actual, this.context.configuration.editor.lineHeight); DomUtils.addClass(this.viewHelper.viewDomNode, 'ime-input'); })); this._toDispose.push(this.textAreaHandler.onCompositionEnd((e) => { this.textArea.actual.style.height = ''; this.textArea.actual.style.width = ''; - DomUtils.StyleMutator.setLeft(this.textArea.actual, 0); - DomUtils.StyleMutator.setTop(this.textArea.actual, 0); + StyleMutator.setLeft(this.textArea.actual, 0); + StyleMutator.setTop(this.textArea.actual, 0); DomUtils.removeClass(this.viewHelper.viewDomNode, 'ime-input'); })); this._toDispose.push(GlobalScreenReaderNVDA.onChange((value) => { @@ -293,8 +294,8 @@ export class KeyboardHandler extends ViewEventHandler implements Lifecycle.IDisp public onConfigurationChanged(e: EditorCommon.IConfigurationChangedEvent): boolean { // Give textarea same font size & line height as editor, for the IME case (when the textarea is visible) - DomUtils.StyleMutator.setFontSize(this.textArea.actual, this.context.configuration.editor.fontSize); - DomUtils.StyleMutator.setLineHeight(this.textArea.actual, this.context.configuration.editor.lineHeight); + StyleMutator.setFontSize(this.textArea.actual, this.context.configuration.editor.fontSize); + StyleMutator.setLineHeight(this.textArea.actual, this.context.configuration.editor.lineHeight); if (e.experimentalScreenReader) { this.textAreaHandler.setStrategy(this._getStrategy()); } diff --git a/src/vs/editor/browser/view/viewImpl.ts b/src/vs/editor/browser/view/viewImpl.ts index 58bd61dea1a1ff83ff4eb9de66fd96d17375a4f7..5497e3b9712786210a314bffd367935bd790416d 100644 --- a/src/vs/editor/browser/view/viewImpl.ts +++ b/src/vs/editor/browser/view/viewImpl.ts @@ -9,6 +9,7 @@ import DomUtils = require('vs/base/browser/dom'); import EventEmitter = require('vs/base/common/eventEmitter'); import Errors = require('vs/base/common/errors'); import Timer = require('vs/base/common/timer'); +import {StyleMutator} from 'vs/base/browser/styleMutator'; import {ViewEventHandler} from 'vs/editor/common/viewModel/viewEventHandler'; import {KeyboardHandler} from 'vs/editor/browser/controller/keyboardHandler'; @@ -176,11 +177,11 @@ export class View extends ViewEventHandler implements EditorBrowser.IView, Lifec this.textArea.setAttribute('aria-label', this.context.configuration.editor.ariaLabel); this.textArea.setAttribute('role', 'textbox'); this.textArea.setAttribute('aria-multiline', 'true'); - DomUtils.StyleMutator.setTop(this.textArea, 0); - DomUtils.StyleMutator.setLeft(this.textArea, 0); + StyleMutator.setTop(this.textArea, 0); + StyleMutator.setLeft(this.textArea, 0); // Give textarea same font size & line height as editor, for the IME case (when the textarea is visible) - DomUtils.StyleMutator.setFontSize(this.textArea, this.context.configuration.editor.fontSize); - DomUtils.StyleMutator.setLineHeight(this.textArea, this.context.configuration.editor.lineHeight); + StyleMutator.setFontSize(this.textArea, this.context.configuration.editor.fontSize); + StyleMutator.setLineHeight(this.textArea, this.context.configuration.editor.lineHeight); this.listenersToDispose.push(DomUtils.addDisposableListener(this.textArea, 'focus', () => this._setHasFocus(true))); this.listenersToDispose.push(DomUtils.addDisposableListener(this.textArea, 'blur', () => this._setHasFocus(false))); @@ -199,10 +200,10 @@ export class View extends ViewEventHandler implements EditorBrowser.IView, Lifec } } this.textAreaCover.style.position = 'absolute'; - DomUtils.StyleMutator.setWidth(this.textAreaCover, 1); - DomUtils.StyleMutator.setHeight(this.textAreaCover, 1); - DomUtils.StyleMutator.setTop(this.textAreaCover, 0); - DomUtils.StyleMutator.setLeft(this.textAreaCover, 0); + StyleMutator.setWidth(this.textAreaCover, 1); + StyleMutator.setHeight(this.textAreaCover, 1); + StyleMutator.setTop(this.textAreaCover, 0); + StyleMutator.setLeft(this.textAreaCover, 0); } private createViewParts(): void { @@ -414,18 +415,18 @@ export class View extends ViewEventHandler implements EditorBrowser.IView, Lifec // See Bug 19676: Editor misses a layout event var clientWidth = this.overflowGuardContainer.clientWidth + 'px'; } - DomUtils.StyleMutator.setWidth(this.domNode, layoutInfo.width); - DomUtils.StyleMutator.setHeight(this.domNode, layoutInfo.height); + StyleMutator.setWidth(this.domNode, layoutInfo.width); + StyleMutator.setHeight(this.domNode, layoutInfo.height); - DomUtils.StyleMutator.setWidth(this.overflowGuardContainer, layoutInfo.width); - DomUtils.StyleMutator.setHeight(this.overflowGuardContainer, layoutInfo.height); + StyleMutator.setWidth(this.overflowGuardContainer, layoutInfo.width); + StyleMutator.setHeight(this.overflowGuardContainer, layoutInfo.height); - DomUtils.StyleMutator.setWidth(this.linesContent, 1000000); - DomUtils.StyleMutator.setHeight(this.linesContent, 1000000); + StyleMutator.setWidth(this.linesContent, 1000000); + StyleMutator.setHeight(this.linesContent, 1000000); - DomUtils.StyleMutator.setLeft(this.linesContentContainer, layoutInfo.contentLeft); - DomUtils.StyleMutator.setWidth(this.linesContentContainer, layoutInfo.contentWidth); - DomUtils.StyleMutator.setHeight(this.linesContentContainer, layoutInfo.contentHeight); + StyleMutator.setLeft(this.linesContentContainer, layoutInfo.contentLeft); + StyleMutator.setWidth(this.linesContentContainer, layoutInfo.contentWidth); + StyleMutator.setHeight(this.linesContentContainer, layoutInfo.contentHeight); this.outgoingEventBus.emit(EditorCommon.EventType.ViewLayoutChanged, layoutInfo); return false; diff --git a/src/vs/editor/browser/view/viewOverlays.ts b/src/vs/editor/browser/view/viewOverlays.ts index e2e4a8131ef51d14d8d823fadfe8aa1640e905b3..a07acc0c0f38252ad879e5806c73daab26ef5e08 100644 --- a/src/vs/editor/browser/view/viewOverlays.ts +++ b/src/vs/editor/browser/view/viewOverlays.ts @@ -11,6 +11,7 @@ import Lifecycle = require('vs/base/common/lifecycle'); import {ViewLayer, IVisibleLineData} from 'vs/editor/browser/view/viewLayer'; import EditorBrowser = require('vs/editor/browser/editorBrowser'); import EditorCommon = require('vs/editor/common/editorCommon'); +import {StyleMutator} from 'vs/base/browser/styleMutator'; export class ViewOverlays extends ViewLayer { private _dynamicOverlays:EditorBrowser.IDynamicViewOverlay[]; @@ -178,8 +179,8 @@ class ViewOverlayLine implements IVisibleLineData { if (currentLineNumber !== lineNumber.toString()) { this._domNode.setAttribute('lineNumber', lineNumber.toString()); } - DomUtils.StyleMutator.setTop(this._domNode, deltaTop); - DomUtils.StyleMutator.setHeight(this._domNode, this._context.configuration.editor.lineHeight); + StyleMutator.setTop(this._domNode, deltaTop); + StyleMutator.setHeight(this._domNode, this._context.configuration.editor.lineHeight); } } @@ -188,8 +189,8 @@ export class ContentViewOverlays extends ViewOverlays { constructor(context:EditorBrowser.IViewContext, layoutProvider:EditorBrowser.ILayoutProvider) { super(context, layoutProvider); - DomUtils.StyleMutator.setWidth(this.domNode, 0); - DomUtils.StyleMutator.setHeight(this.domNode, 0); + StyleMutator.setWidth(this.domNode, 0); + StyleMutator.setHeight(this.domNode, 0); } public onScrollWidthChanged(scrollWidth:number): boolean { @@ -199,7 +200,7 @@ export class ContentViewOverlays extends ViewOverlays { _viewOverlaysRender(ctx:EditorBrowser.IRestrictedRenderingContext): void { super._viewOverlaysRender(ctx); - DomUtils.StyleMutator.setWidth(this.domNode, this._layoutProvider.getScrollWidth()); + StyleMutator.setWidth(this.domNode, this._layoutProvider.getScrollWidth()); } } @@ -217,7 +218,7 @@ export class MarginViewOverlays extends ViewOverlays { this._scrollHeight = layoutProvider.getScrollHeight(); this.domNode.className = EditorBrowser.ClassNames.MARGIN_VIEW_OVERLAYS + ' monaco-editor-background'; - DomUtils.StyleMutator.setWidth(this.domNode, 1); + StyleMutator.setWidth(this.domNode, 1); this._hasVerticalScroll = true; } @@ -244,7 +245,7 @@ export class MarginViewOverlays extends ViewOverlays { this._requestModificationFrame(() => { var glyphMargin = this._getGlyphMarginDomNode(); if (glyphMargin) { - DomUtils.StyleMutator.setHeight(glyphMargin, this._scrollHeight); + StyleMutator.setHeight(glyphMargin, this._scrollHeight); } }); return super.onScrollHeightChanged(scrollHeight) || true; @@ -256,12 +257,12 @@ export class MarginViewOverlays extends ViewOverlays { this._scrollHeight = this._layoutProvider.getScrollHeight(); this._requestModificationFrame(() => { - DomUtils.StyleMutator.setWidth(this.domNode, layoutInfo.contentLeft); + StyleMutator.setWidth(this.domNode, layoutInfo.contentLeft); var glyphMargin = this._getGlyphMarginDomNode(); if (glyphMargin) { - DomUtils.StyleMutator.setLeft(glyphMargin, layoutInfo.glyphMarginLeft); - DomUtils.StyleMutator.setWidth(glyphMargin, layoutInfo.glyphMarginWidth); + StyleMutator.setLeft(glyphMargin, layoutInfo.glyphMarginLeft); + StyleMutator.setWidth(glyphMargin, layoutInfo.glyphMarginWidth); } }); return super.onLayoutChanged(layoutInfo) || true; @@ -278,15 +279,15 @@ export class MarginViewOverlays extends ViewOverlays { if (this._hasVerticalScroll) { if (Browser.canUseTranslate3d) { var transform = 'translate3d(0px, ' + ctx.linesViewportData.visibleRangesDeltaTop + 'px, 0px)'; - DomUtils.StyleMutator.setTransform(this.domNode, transform); + StyleMutator.setTransform(this.domNode, transform); } else { if (this._hasVerticalScroll) { - DomUtils.StyleMutator.setTop(this.domNode, ctx.linesViewportData.visibleRangesDeltaTop); + StyleMutator.setTop(this.domNode, ctx.linesViewportData.visibleRangesDeltaTop); } } this._hasVerticalScroll = false; } var height = Math.min(this._layoutProvider.getTotalHeight(), 1000000); - DomUtils.StyleMutator.setHeight(this.domNode, height); + StyleMutator.setHeight(this.domNode, height); } } \ No newline at end of file diff --git a/src/vs/editor/browser/viewParts/contentWidgets/contentWidgets.ts b/src/vs/editor/browser/viewParts/contentWidgets/contentWidgets.ts index 3c2377d40e714b49bd8aafb797497eacb51f8e0c..99467e3e1096fc171193afea628fca14dfe24402 100644 --- a/src/vs/editor/browser/viewParts/contentWidgets/contentWidgets.ts +++ b/src/vs/editor/browser/viewParts/contentWidgets/contentWidgets.ts @@ -11,6 +11,7 @@ import * as DomUtils from 'vs/base/browser/dom'; import {ViewPart} from 'vs/editor/browser/view/viewPart'; import * as EditorBrowser from 'vs/editor/browser/editorBrowser'; import * as EditorCommon from 'vs/editor/common/editorCommon'; +import {StyleMutator} from 'vs/base/browser/styleMutator'; interface IWidgetData { allowEditorOverflow: boolean; @@ -112,7 +113,7 @@ export class ViewContentWidgets extends ViewPart { let widgetId:string; for (widgetId in this._widgets) { if (this._widgets.hasOwnProperty(widgetId)) { - DomUtils.StyleMutator.setMaxWidth(this._widgets[widgetId].widget.getDomNode(), this._contentWidth); + StyleMutator.setMaxWidth(this._widgets[widgetId].widget.getDomNode(), this._contentWidth); } } }); @@ -146,8 +147,8 @@ export class ViewContentWidgets extends ViewPart { let domNode = widget.getDomNode(); domNode.style.position = 'absolute'; - DomUtils.StyleMutator.setMaxWidth(domNode, this._contentWidth); - DomUtils.StyleMutator.setVisibility(domNode, 'hidden'); + StyleMutator.setMaxWidth(domNode, this._contentWidth); + StyleMutator.setVisibility(domNode, 'hidden'); domNode.setAttribute('widgetId', widget.getId()); if (widgetData.allowEditorOverflow) { @@ -378,14 +379,14 @@ export class ViewContentWidgets extends ViewPart { if (data.hasOwnProperty(widgetId)) { if (widget.allowEditorOverflow) { - DomUtils.StyleMutator.setTop(domNode, data[widgetId].top); - DomUtils.StyleMutator.setLeft(domNode, data[widgetId].left); + StyleMutator.setTop(domNode, data[widgetId].top); + StyleMutator.setLeft(domNode, data[widgetId].left); } else { - DomUtils.StyleMutator.setTop(domNode, data[widgetId].top + ctx.viewportTop - ctx.bigNumbersDelta); - DomUtils.StyleMutator.setLeft(domNode, data[widgetId].left); + StyleMutator.setTop(domNode, data[widgetId].top + ctx.viewportTop - ctx.bigNumbersDelta); + StyleMutator.setLeft(domNode, data[widgetId].left); } if (!widget.isVisible) { - DomUtils.StyleMutator.setVisibility(domNode, 'inherit'); + StyleMutator.setVisibility(domNode, 'inherit'); domNode.setAttribute('monaco-visible-content-widget', 'true'); widget.isVisible = true; } @@ -393,7 +394,7 @@ export class ViewContentWidgets extends ViewPart { if (widget.isVisible) { domNode.removeAttribute('monaco-visible-content-widget'); widget.isVisible = false; - DomUtils.StyleMutator.setVisibility(domNode, 'hidden'); + StyleMutator.setVisibility(domNode, 'hidden'); } } } diff --git a/src/vs/editor/browser/viewParts/lines/viewLine.ts b/src/vs/editor/browser/viewParts/lines/viewLine.ts index 645714dd16bf924bb3f5bd7c462866adeb5d26de..82191802fbe4df95e7db5c838b0fc6dd06f4ccc8 100644 --- a/src/vs/editor/browser/viewParts/lines/viewLine.ts +++ b/src/vs/editor/browser/viewParts/lines/viewLine.ts @@ -5,12 +5,12 @@ 'use strict'; import * as Browser from 'vs/base/browser/browser'; -import {StyleMutator} from 'vs/base/browser/dom'; import {IVisibleLineData} from 'vs/editor/browser/view/viewLayer'; import {ILineParts, createLineParts} from 'vs/editor/common/viewLayout/viewLineParts'; import {ClassNames, IViewContext} from 'vs/editor/browser/editorBrowser'; import {IModelDecoration, IConfigurationChangedEvent, HorizontalRange} from 'vs/editor/common/editorCommon'; import {renderLine} from 'vs/editor/common/viewLayout/viewLineRenderer'; +import {StyleMutator} from 'vs/base/browser/styleMutator'; export class ViewLine implements IVisibleLineData { diff --git a/src/vs/editor/browser/viewParts/lines/viewLines.ts b/src/vs/editor/browser/viewParts/lines/viewLines.ts index ae278808acee0794cf6e9a8c89b501bc0f3d802c..e9a0802630413bb4806c1124c17cda82b4a1a788 100644 --- a/src/vs/editor/browser/viewParts/lines/viewLines.ts +++ b/src/vs/editor/browser/viewParts/lines/viewLines.ts @@ -5,7 +5,6 @@ 'use strict'; import Browser = require('vs/base/browser/browser'); -import DomUtils = require('vs/base/browser/dom'); import Schedulers = require('vs/base/common/async'); import {createLine, ViewLine} from 'vs/editor/browser/viewParts/lines/viewLine'; @@ -13,6 +12,7 @@ import {IVisibleLineData, ViewLayer} from 'vs/editor/browser/view/viewLayer'; import EditorBrowser = require('vs/editor/browser/editorBrowser'); import EditorCommon = require('vs/editor/common/editorCommon'); import {Range} from 'vs/editor/common/core/range'; +import {StyleMutator} from 'vs/base/browser/styleMutator'; export class ViewLines extends ViewLayer { @@ -91,7 +91,7 @@ export class ViewLines extends ViewLayer { } public onScrollWidthChanged(scrollWidth:number): boolean { - DomUtils.StyleMutator.setWidth(this.domNode, scrollWidth); + StyleMutator.setWidth(this.domNode, scrollWidth); return false; } @@ -362,21 +362,21 @@ export class ViewLines extends ViewLayer { if (this._hasVerticalScroll || this._hasHorizontalScroll) { if (Browser.canUseTranslate3d) { var transform = 'translate3d(' + -this._layoutProvider.getScrollLeft() + 'px, ' + linesViewportData.visibleRangesDeltaTop + 'px, 0px)'; - DomUtils.StyleMutator.setTransform(this.domNode.parentNode, transform); + StyleMutator.setTransform(this.domNode.parentNode, transform); } else { if (this._hasVerticalScroll) { - DomUtils.StyleMutator.setTop(this.domNode.parentNode, linesViewportData.visibleRangesDeltaTop); + StyleMutator.setTop(this.domNode.parentNode, linesViewportData.visibleRangesDeltaTop); } if (this._hasHorizontalScroll) { - DomUtils.StyleMutator.setLeft(this.domNode.parentNode, -this._layoutProvider.getScrollLeft()); + StyleMutator.setLeft(this.domNode.parentNode, -this._layoutProvider.getScrollLeft()); } } this._hasVerticalScroll = false; this._hasHorizontalScroll = false; } - DomUtils.StyleMutator.setWidth(this.domNode, this._layoutProvider.getScrollWidth()); - DomUtils.StyleMutator.setHeight(this.domNode, Math.min(this._layoutProvider.getTotalHeight(), 1000000)); + StyleMutator.setWidth(this.domNode, this._layoutProvider.getScrollWidth()); + StyleMutator.setHeight(this.domNode, Math.min(this._layoutProvider.getTotalHeight(), 1000000)); linesViewportData.visibleRange = this._currentVisibleRange; diff --git a/src/vs/editor/browser/viewParts/overlayWidgets/overlayWidgets.ts b/src/vs/editor/browser/viewParts/overlayWidgets/overlayWidgets.ts index 8a74aacc4237cac7f8d70fd38ece78401f0759a4..ddc7600dd91394a94cfa752f35a7070b31355064 100644 --- a/src/vs/editor/browser/viewParts/overlayWidgets/overlayWidgets.ts +++ b/src/vs/editor/browser/viewParts/overlayWidgets/overlayWidgets.ts @@ -6,11 +6,11 @@ 'use strict'; import 'vs/css!./overlayWidgets'; -import DomUtils = require('vs/base/browser/dom'); import {ViewPart} from 'vs/editor/browser/view/viewPart'; import EditorBrowser = require('vs/editor/browser/editorBrowser'); import EditorCommon = require('vs/editor/common/editorCommon'); +import {StyleMutator} from 'vs/base/browser/styleMutator'; interface IWidgetData { widget: EditorBrowser.IOverlayWidget; @@ -55,7 +55,7 @@ export class ViewOverlayWidgets extends ViewPart { this._editorHeight = layoutInfo.height; this._requestModificationFrame(() => { - DomUtils.StyleMutator.setWidth(this.domNode, layoutInfo.width); + StyleMutator.setWidth(this.domNode, layoutInfo.width); }); return true; } @@ -114,20 +114,20 @@ export class ViewOverlayWidgets extends ViewPart { if (!domNode.hasAttribute(_RESTORE_STYLE_TOP)) { domNode.setAttribute(_RESTORE_STYLE_TOP, domNode.style.top); } - DomUtils.StyleMutator.setTop(domNode, 0); - DomUtils.StyleMutator.setRight(domNode, (2 * this._verticalScrollbarWidth)); + StyleMutator.setTop(domNode, 0); + StyleMutator.setRight(domNode, (2 * this._verticalScrollbarWidth)); } else if (widgetData.preference === EditorBrowser.OverlayWidgetPositionPreference.BOTTOM_RIGHT_CORNER) { if (!domNode.hasAttribute(_RESTORE_STYLE_TOP)) { domNode.setAttribute(_RESTORE_STYLE_TOP, domNode.style.top); } var widgetHeight = domNode.clientHeight; - DomUtils.StyleMutator.setTop(domNode, (this._editorHeight - widgetHeight - 2 * this._horizontalScrollbarHeight)); - DomUtils.StyleMutator.setRight(domNode, (2 * this._verticalScrollbarWidth)); + StyleMutator.setTop(domNode, (this._editorHeight - widgetHeight - 2 * this._horizontalScrollbarHeight)); + StyleMutator.setRight(domNode, (2 * this._verticalScrollbarWidth)); } else if (widgetData.preference === EditorBrowser.OverlayWidgetPositionPreference.TOP_CENTER) { if (!domNode.hasAttribute(_RESTORE_STYLE_TOP)) { domNode.setAttribute(_RESTORE_STYLE_TOP, domNode.style.top); } - DomUtils.StyleMutator.setTop(domNode, 0); + StyleMutator.setTop(domNode, 0); domNode.style.right = '50%'; } } diff --git a/src/vs/editor/browser/viewParts/overviewRuler/overviewRulerImpl.ts b/src/vs/editor/browser/viewParts/overviewRuler/overviewRulerImpl.ts index 9958fb7279a267cf7dddd6f6d6330eeeff74a0f9..c0b7947d88085a98a58886737e20187f20fe06cb 100644 --- a/src/vs/editor/browser/viewParts/overviewRuler/overviewRulerImpl.ts +++ b/src/vs/editor/browser/viewParts/overviewRuler/overviewRulerImpl.ts @@ -5,7 +5,7 @@ 'use strict'; import Browser = require('vs/base/browser/browser'); -import DomUtils = require('vs/base/browser/dom'); +import {StyleMutator} from 'vs/base/browser/styleMutator'; import EditorBrowser = require('vs/editor/browser/editorBrowser'); import EditorCommon = require('vs/editor/common/editorCommon'); @@ -93,8 +93,8 @@ export class OverviewRulerImpl { } public setLayout(position:EditorCommon.IOverviewRulerPosition, render:boolean): void { - DomUtils.StyleMutator.setTop(this._domNode, position.top); - DomUtils.StyleMutator.setRight(this._domNode, position.right); + StyleMutator.setTop(this._domNode, position.top); + StyleMutator.setRight(this._domNode, position.right); if (this._width !== position.width || this._height !== position.height) { this._width = position.width; diff --git a/src/vs/editor/browser/viewParts/rulers/rulers.ts b/src/vs/editor/browser/viewParts/rulers/rulers.ts index 8533b672ecddf657b61ee6fcc431bf4499d18305..7bed7b5de3347aad7c75f5e4c45827c95d75d958 100644 --- a/src/vs/editor/browser/viewParts/rulers/rulers.ts +++ b/src/vs/editor/browser/viewParts/rulers/rulers.ts @@ -10,7 +10,7 @@ import 'vs/css!./rulers'; import {ViewPart} from 'vs/editor/browser/view/viewPart'; import EditorBrowser = require('vs/editor/browser/editorBrowser'); import EditorCommon = require('vs/editor/common/editorCommon'); -import {StyleMutator} from 'vs/base/browser/dom'; +import {StyleMutator} from 'vs/base/browser/styleMutator'; export class Rulers extends ViewPart { diff --git a/src/vs/editor/browser/viewParts/scrollDecoration/scrollDecoration.ts b/src/vs/editor/browser/viewParts/scrollDecoration/scrollDecoration.ts index cc5bcf51d49bf2c719402b7f24695fa7f794b279..9ff7aa3bcc7d39c08d1e9bfa7ef14878fb020b8e 100644 --- a/src/vs/editor/browser/viewParts/scrollDecoration/scrollDecoration.ts +++ b/src/vs/editor/browser/viewParts/scrollDecoration/scrollDecoration.ts @@ -11,6 +11,7 @@ import DomUtils = require('vs/base/browser/dom'); import {ViewPart} from 'vs/editor/browser/view/viewPart'; import EditorBrowser = require('vs/editor/browser/editorBrowser'); import EditorCommon = require('vs/editor/common/editorCommon'); +import {StyleMutator} from 'vs/base/browser/styleMutator'; export class ScrollDecorationViewPart extends ViewPart { @@ -62,7 +63,7 @@ export class ScrollDecorationViewPart extends ViewPart { _render(ctx: EditorBrowser.IRenderingContext): void { this._requestModificationFrame(() => { - DomUtils.StyleMutator.setWidth(this._domNode, this._width); + StyleMutator.setWidth(this._domNode, this._width); DomUtils.toggleClass(this._domNode, EditorBrowser.ClassNames.SCROLL_DECORATION, this._shouldShow); }); } diff --git a/src/vs/editor/browser/viewParts/viewCursors/viewCursor.ts b/src/vs/editor/browser/viewParts/viewCursors/viewCursor.ts index 41ee487129609ba587c4358807463961926ef5ca..707e653a8987b94a2cace10a1f84ff9544d0c525 100644 --- a/src/vs/editor/browser/viewParts/viewCursors/viewCursor.ts +++ b/src/vs/editor/browser/viewParts/viewCursors/viewCursor.ts @@ -4,10 +4,9 @@ *--------------------------------------------------------------------------------------------*/ 'use strict'; -import DomUtils = require('vs/base/browser/dom'); - import EditorBrowser = require('vs/editor/browser/editorBrowser'); import EditorCommon = require('vs/editor/common/editorCommon'); +import {StyleMutator} from 'vs/base/browser/styleMutator'; export class ViewCursor { private _context:EditorBrowser.IViewContext; @@ -26,7 +25,7 @@ export class ViewCursor { this._domNode = this._createCursorDomNode(isSecondary); this._isVisible = true; - DomUtils.StyleMutator.setDisplay(this._domNode, 'none'); + StyleMutator.setDisplay(this._domNode, 'none'); this.updatePosition({ lineNumber: 1, column: 1 @@ -39,9 +38,9 @@ export class ViewCursor { if (isSecondary) { domNode.className += ' secondary'; } - DomUtils.StyleMutator.setHeight(domNode, this._context.configuration.editor.lineHeight); - DomUtils.StyleMutator.setTop(domNode, 0); - DomUtils.StyleMutator.setLeft(domNode, 0); + StyleMutator.setHeight(domNode, this._context.configuration.editor.lineHeight); + StyleMutator.setTop(domNode, 0); + StyleMutator.setLeft(domNode, 0); domNode.setAttribute('role', 'presentation'); domNode.setAttribute('aria-hidden', 'true'); return domNode; @@ -65,14 +64,14 @@ export class ViewCursor { public show(): void { if (!this._isVisible) { - DomUtils.StyleMutator.setVisibility(this._domNode, 'inherit'); + StyleMutator.setVisibility(this._domNode, 'inherit'); this._isVisible = true; } } public hide(): void { if (this._isVisible) { - DomUtils.StyleMutator.setVisibility(this._domNode, 'hidden'); + StyleMutator.setVisibility(this._domNode, 'hidden'); this._isVisible = false; } } @@ -94,7 +93,7 @@ export class ViewCursor { public onConfigurationChanged(e:EditorCommon.IConfigurationChangedEvent): boolean { if (e.lineHeight) { - DomUtils.StyleMutator.setHeight(this._domNode, this._context.configuration.editor.lineHeight); + StyleMutator.setHeight(this._domNode, this._context.configuration.editor.lineHeight); } return true; } @@ -112,11 +111,11 @@ export class ViewCursor { public render(ctx:EditorBrowser.IRestrictedRenderingContext): void { if (this._isInViewport) { - DomUtils.StyleMutator.setDisplay(this._domNode, 'block'); - DomUtils.StyleMutator.setLeft(this._domNode, this._positionLeft); - DomUtils.StyleMutator.setTop(this._domNode, this._positionTop + ctx.viewportTop - ctx.bigNumbersDelta); + StyleMutator.setDisplay(this._domNode, 'block'); + StyleMutator.setLeft(this._domNode, this._positionLeft); + StyleMutator.setTop(this._domNode, this._positionTop + ctx.viewportTop - ctx.bigNumbersDelta); } else { - DomUtils.StyleMutator.setDisplay(this._domNode, 'none'); + StyleMutator.setDisplay(this._domNode, 'none'); } } diff --git a/src/vs/editor/browser/viewParts/viewZones/viewZones.ts b/src/vs/editor/browser/viewParts/viewZones/viewZones.ts index 7a1318917757b06d268fbc458e193c3e1c702684..e5279cda3519e043d8dba5976fe4bdd924563cb9 100644 --- a/src/vs/editor/browser/viewParts/viewZones/viewZones.ts +++ b/src/vs/editor/browser/viewParts/viewZones/viewZones.ts @@ -5,11 +5,11 @@ 'use strict'; import errors = require('vs/base/common/errors'); -import DomUtils = require('vs/base/browser/dom'); import {ViewPart} from 'vs/editor/browser/view/viewPart'; import EditorBrowser = require('vs/editor/browser/editorBrowser'); import EditorCommon = require('vs/editor/common/editorCommon'); +import {StyleMutator} from 'vs/base/browser/styleMutator'; export interface IMyViewZone { whitespaceId: number; @@ -70,7 +70,7 @@ export class ViewZones extends ViewPart { if (this._zones.hasOwnProperty(id)) { if (zone2Height.hasOwnProperty(id)) { // TODO@Alex - edit dom node properties only in render() - DomUtils.StyleMutator.setHeight(this._zones[id].delegate.domNode, zone2Height[id]); + StyleMutator.setHeight(this._zones[id].delegate.domNode, zone2Height[id]); } } } @@ -180,9 +180,9 @@ export class ViewZones extends ViewPart { return; } myZone.delegate.domNode.style.position = 'absolute'; - DomUtils.StyleMutator.setHeight(myZone.delegate.domNode, computedHeight); + StyleMutator.setHeight(myZone.delegate.domNode, computedHeight); myZone.delegate.domNode.style.width = '100%'; - DomUtils.StyleMutator.setDisplay(myZone.delegate.domNode, 'none'); + StyleMutator.setDisplay(myZone.delegate.domNode, 'none'); }); this._zones[myZone.whitespaceId.toString()] = myZone; @@ -293,17 +293,17 @@ export class ViewZones extends ViewPart { if (visibleZones.hasOwnProperty(id)) { // zone is visible - DomUtils.StyleMutator.setTop(zone.delegate.domNode, (visibleZones[id].verticalOffset - ctx.bigNumbersDelta)); - DomUtils.StyleMutator.setHeight(zone.delegate.domNode, visibleZones[id].height); + StyleMutator.setTop(zone.delegate.domNode, (visibleZones[id].verticalOffset - ctx.bigNumbersDelta)); + StyleMutator.setHeight(zone.delegate.domNode, visibleZones[id].height); if (!zone.isVisible) { - DomUtils.StyleMutator.setDisplay(zone.delegate.domNode, 'block'); + StyleMutator.setDisplay(zone.delegate.domNode, 'block'); zone.delegate.domNode.setAttribute('monaco-visible-view-zone', 'true'); zone.isVisible = true; } this._safeCallOnDomNodeTop(zone.delegate, ctx.getScrolledTopFromAbsoluteTop(visibleZones[id].verticalOffset)); } else { if (zone.isVisible) { - DomUtils.StyleMutator.setDisplay(zone.delegate.domNode, 'none'); + StyleMutator.setDisplay(zone.delegate.domNode, 'none'); zone.delegate.domNode.removeAttribute('monaco-visible-view-zone'); zone.isVisible = false; } @@ -313,7 +313,7 @@ export class ViewZones extends ViewPart { } if (hasVisibleZone) { - DomUtils.StyleMutator.setWidth(this.domNode, ctx.scrollWidth); + StyleMutator.setWidth(this.domNode, ctx.scrollWidth); } }); } diff --git a/src/vs/editor/browser/widget/diffEditorWidget.ts b/src/vs/editor/browser/widget/diffEditorWidget.ts index 21e0dbcd80e195904a959636e1896cc68518ab36..87fb15f81d6c822759dc8ac857f13453eb12f523 100644 --- a/src/vs/editor/browser/widget/diffEditorWidget.ts +++ b/src/vs/editor/browser/widget/diffEditorWidget.ts @@ -21,6 +21,7 @@ import Schedulers = require('vs/base/common/async'); import {Range} from 'vs/editor/common/core/range'; import {IInstantiationService} from 'vs/platform/instantiation/common/instantiation'; import {renderLine} from 'vs/editor/common/viewLayout/viewLineRenderer'; +import {StyleMutator} from 'vs/base/browser/styleMutator'; interface IEditorScrollEvent { scrollLeft: number; @@ -844,11 +845,11 @@ export class DiffEditorWidget extends EventEmitter.EventEmitter implements Edito private _layoutOverviewViewport(): void { var layout = this._computeOverviewViewport(); if (!layout) { - DomUtils.StyleMutator.setTop(this._overviewViewportDomElement, 0); - DomUtils.StyleMutator.setHeight(this._overviewViewportDomElement, 0); + StyleMutator.setTop(this._overviewViewportDomElement, 0); + StyleMutator.setHeight(this._overviewViewportDomElement, 0); } else { - DomUtils.StyleMutator.setTop(this._overviewViewportDomElement, layout.top); - DomUtils.StyleMutator.setHeight(this._overviewViewportDomElement, layout.height); + StyleMutator.setTop(this._overviewViewportDomElement, layout.top); + StyleMutator.setHeight(this._overviewViewportDomElement, layout.height); } } diff --git a/src/vs/editor/contrib/accessibility/browser/accessibility.ts b/src/vs/editor/contrib/accessibility/browser/accessibility.ts index 0098f49bd53833fabb04e618d591c40004bcb66b..69d9acf584e484dab254ed2220b67d704d3885d6 100644 --- a/src/vs/editor/contrib/accessibility/browser/accessibility.ts +++ b/src/vs/editor/contrib/accessibility/browser/accessibility.ts @@ -18,13 +18,14 @@ import {KeyMod, KeyCode} from 'vs/base/common/keyCodes'; import EditorBrowser = require('vs/editor/browser/editorBrowser'); import {Disposable} from 'vs/base/common/lifecycle'; import {Widget} from 'vs/base/browser/ui/widget'; -import {clearNode, StyleMutator} from 'vs/base/browser/dom'; +import {clearNode} from 'vs/base/browser/dom'; import {IKeybindingService, IKeybindingContextKey} from 'vs/platform/keybinding/common/keybindingService'; import {ToggleTabFocusModeAction} from 'vs/editor/contrib/toggleTabFocusMode/common/toggleTabFocusMode'; import * as Strings from 'vs/base/common/strings'; import {renderHtml} from 'vs/base/browser/htmlContentRenderer'; import {GlobalScreenReaderNVDA} from 'vs/editor/common/config/commonEditorConfig'; import {KeybindingsRegistry} from 'vs/platform/keybinding/common/keybindingsRegistry'; +import {StyleMutator} from 'vs/base/browser/styleMutator'; const NLS_SHOW_ACCESSIBILITY_HELP_ACTION_LABEL = nls.localize('ShowAccessibilityHelpAction',"Show Accessibility Help"); const CONTEXT_ACCESSIBILITY_WIDGET_VISIBLE = 'accessibilityHelpWidgetVisible'; diff --git a/src/vs/editor/contrib/defineKeybinding/browser/defineKeybinding.ts b/src/vs/editor/contrib/defineKeybinding/browser/defineKeybinding.ts index 7e0d413bf194e306b9b103d6e17bd0de800d3fa7..98425c60871c672a5691a1df32a71d2501de1260 100644 --- a/src/vs/editor/contrib/defineKeybinding/browser/defineKeybinding.ts +++ b/src/vs/editor/contrib/defineKeybinding/browser/defineKeybinding.ts @@ -25,6 +25,7 @@ import {IOSupport} from 'vs/platform/keybinding/common/keybindingResolver'; import {IHTMLContentElement} from 'vs/base/common/htmlContent'; import {renderHtml} from 'vs/base/browser/htmlContentRenderer'; import {Range} from 'vs/editor/common/core/range'; +import {StyleMutator} from 'vs/base/browser/styleMutator'; const NLS_LAUNCH_MESSAGE = nls.localize('defineKeybinding.start', "Define Keybinding"); const NLS_DEFINE_MESSAGE = nls.localize('defineKeybinding.initial', "Press desired key combination and ENTER"); @@ -325,8 +326,8 @@ class DefineKeybindingWidget implements EditorBrowser.IOverlayWidget { this._domNode = document.createElement('div'); this._domNode.className = 'defineKeybindingWidget'; - DomUtils.StyleMutator.setWidth(this._domNode, DefineKeybindingWidget.WIDTH); - DomUtils.StyleMutator.setHeight(this._domNode, DefineKeybindingWidget.HEIGHT); + StyleMutator.setWidth(this._domNode, DefineKeybindingWidget.WIDTH); + StyleMutator.setHeight(this._domNode, DefineKeybindingWidget.HEIGHT); this._domNode.style.display = 'none'; this._isVisible = false; @@ -424,10 +425,10 @@ class DefineKeybindingWidget implements EditorBrowser.IOverlayWidget { let editorLayout = this._editor.getLayoutInfo(); let top = Math.round((editorLayout.height - DefineKeybindingWidget.HEIGHT) / 2); - DomUtils.StyleMutator.setTop(this._domNode, top); + StyleMutator.setTop(this._domNode, top); let left = Math.round((editorLayout.width - DefineKeybindingWidget.WIDTH) / 2); - DomUtils.StyleMutator.setLeft(this._domNode, left); + StyleMutator.setLeft(this._domNode, left); } public start(): void { diff --git a/src/vs/editor/contrib/hover/browser/hoverWidgets.ts b/src/vs/editor/contrib/hover/browser/hoverWidgets.ts index a935446e212f233b449e8807cbe590f650108296..712e381cf8309159bef8632a70e0daf73e00e293 100644 --- a/src/vs/editor/contrib/hover/browser/hoverWidgets.ts +++ b/src/vs/editor/contrib/hover/browser/hoverWidgets.ts @@ -6,8 +6,8 @@ import EditorBrowser = require('vs/editor/browser/editorBrowser'); import EditorCommon = require('vs/editor/common/editorCommon'); -import DomUtils = require('vs/base/browser/dom'); import {Position} from 'vs/editor/common/core/position'; +import {StyleMutator} from 'vs/base/browser/styleMutator'; export class ContentHoverWidget implements EditorBrowser.IContentWidget { @@ -53,15 +53,15 @@ export class ContentHoverWidget implements EditorBrowser.IContentWidget { var editorMaxWidth = Math.min(800, parseInt(this._containerDomNode.style.maxWidth, 10)); // When scrolled horizontally, the div does not want to occupy entire visible area. - DomUtils.StyleMutator.setWidth(this._containerDomNode, editorMaxWidth); - DomUtils.StyleMutator.setHeight(this._containerDomNode, 0); - DomUtils.StyleMutator.setLeft(this._containerDomNode, 0); + StyleMutator.setWidth(this._containerDomNode, editorMaxWidth); + StyleMutator.setHeight(this._containerDomNode, 0); + StyleMutator.setLeft(this._containerDomNode, 0); var renderedWidth = Math.min(editorMaxWidth, this._domNode.clientWidth + 5); var renderedHeight = this._domNode.clientHeight + 1; - DomUtils.StyleMutator.setWidth(this._containerDomNode, renderedWidth); - DomUtils.StyleMutator.setHeight(this._containerDomNode, renderedHeight); + StyleMutator.setWidth(this._containerDomNode, renderedWidth); + StyleMutator.setHeight(this._containerDomNode, renderedHeight); this._editor.layoutContentWidget(this); // Simply force a synchronous render on the editor