diff --git a/src/sql/parts/query/editor/charting/insights/insight.ts b/src/sql/parts/query/editor/charting/insights/insight.ts index 215354ac4f..e19c39788e 100644 --- a/src/sql/parts/query/editor/charting/insights/insight.ts +++ b/src/sql/parts/query/editor/charting/insights/insight.ts @@ -7,15 +7,14 @@ import { Graph } from './graphInsight'; import { IInsightData } from 'sql/parts/dashboard/widgets/insights/interfaces'; -import { DataDirection, ChartType, DataType } from 'sql/parts/dashboard/widgets/insights/views/charts/interfaces'; +import { DataDirection, ChartType } from 'sql/parts/dashboard/widgets/insights/views/charts/interfaces'; import { ImageInsight } from './imageInsight'; import { TableInsight } from './tableInsight'; import { IInsightOptions, IInsight, InsightType, IInsightCtor } from './interfaces'; import { CountInsight } from './countInsight'; -import { Builder } from 'sql/base/browser/builder'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; -import { Dimension } from 'vs/base/browser/dom'; +import { Dimension, clearNode } from 'vs/base/browser/dom'; import { deepClone } from 'vs/base/common/objects'; const defaultOptions: IInsightOptions = { @@ -75,7 +74,7 @@ export class Insight { this.insight.dispose(); } - new Builder(this.container).empty(); + clearNode(this.container); let ctor = this.findctor(this.options.type); diff --git a/src/sql/parts/query/execution/queryActions.ts b/src/sql/parts/query/execution/queryActions.ts index 15fbce7288..a045431c01 100644 --- a/src/sql/parts/query/execution/queryActions.ts +++ b/src/sql/parts/query/execution/queryActions.ts @@ -5,14 +5,14 @@ import 'vs/css!sql/parts/query/editor/media/queryActions'; import * as nls from 'vs/nls'; -import { Builder, $ } from 'sql/base/browser/builder'; -import { Dropdown } from 'sql/base/browser/ui/editableDropdown/dropdown'; import { Action, IActionItem, IActionRunner } from 'vs/base/common/actions'; -import { EventEmitter } from 'sql/base/common/eventEmitter'; import { IDisposable, dispose } from 'vs/base/common/lifecycle'; import { IContextViewService } from 'vs/platform/contextview/browser/contextView'; +import { IConfigurationService } from 'vs/platform/configuration/common/configuration'; import { IThemeService } from 'vs/platform/theme/common/themeService'; -import { attachEditableDropdownStyler, attachSelectBoxStyler } from 'sql/platform/theme/common/styler'; +import { INotificationService } from 'vs/platform/notification/common/notification'; +import Severity from 'vs/base/common/severity'; +import { append, $ } from 'vs/base/browser/dom'; import { ISelectionData } from 'azdata'; import { @@ -24,10 +24,10 @@ import { } from 'sql/platform/connection/common/connectionManagement'; import { QueryEditor } from 'sql/parts/query/editor/queryEditor'; import { IQueryModelService } from 'sql/platform/query/common/queryModel'; -import { INotificationService } from 'vs/platform/notification/common/notification'; -import Severity from 'vs/base/common/severity'; import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox'; -import { IConfigurationService } from 'vs/platform/configuration/common/configuration'; +import { attachEditableDropdownStyler, attachSelectBoxStyler } from 'sql/platform/theme/common/styler'; +import { EventEmitter } from 'sql/base/common/eventEmitter'; +import { Dropdown } from 'sql/base/browser/ui/editableDropdown/dropdown'; /** * Action class that query-based Actions will extend. This base class automatically handles activating and @@ -436,7 +436,7 @@ export class ListDatabasesActionItem extends EventEmitter implements IActionItem private _context: any; private _currentDatabaseName: string; private _isConnected: boolean; - private $databaseListDropdown: Builder; + private _databaseListDropdown: HTMLElement; private _dropdown: Dropdown; private _databaseSelectBox: SelectBox; private _isInAccessibilityMode: boolean; @@ -452,17 +452,17 @@ export class ListDatabasesActionItem extends EventEmitter implements IActionItem ) { super(); this._toDispose = []; - this.$databaseListDropdown = $('.databaseListDropdown'); + this._databaseListDropdown = $('.databaseListDropdown'); this._isInAccessibilityMode = this._configurationService.getValue('editor.accessibilitySupport') === 'on'; if (this._isInAccessibilityMode) { this._databaseSelectBox = new SelectBox([this._selectDatabaseString], this._selectDatabaseString, contextViewProvider, undefined, { ariaLabel: this._selectDatabaseString }); - this._databaseSelectBox.render(this.$databaseListDropdown.getHTMLElement()); + this._databaseSelectBox.render(this._databaseListDropdown); this._databaseSelectBox.onDidSelect(e => { this.databaseSelected(e.selected); }); this._databaseSelectBox.disable(); } else { - this._dropdown = new Dropdown(this.$databaseListDropdown.getHTMLElement(), contextViewProvider, { + this._dropdown = new Dropdown(this._databaseListDropdown, contextViewProvider, { strictSelection: true, placeholder: this._selectDatabaseString, ariaLabel: this._selectDatabaseString, @@ -479,7 +479,7 @@ export class ListDatabasesActionItem extends EventEmitter implements IActionItem // PUBLIC METHODS ////////////////////////////////////////////////////// public render(container: HTMLElement): void { - this.$databaseListDropdown.appendTo(container); + append(container, this._databaseListDropdown); } public style(styles) { diff --git a/src/sql/parts/queryPlan/queryPlan.ts b/src/sql/parts/queryPlan/queryPlan.ts index 0143806ebb..cdeb1fa8f1 100644 --- a/src/sql/parts/queryPlan/queryPlan.ts +++ b/src/sql/parts/queryPlan/queryPlan.ts @@ -8,9 +8,8 @@ import * as QP from 'html-query-plan'; import { IPanelView, IPanelTab } from 'sql/base/browser/ui/panel/panel'; -import { Dimension } from 'vs/base/browser/dom'; +import { Dimension, clearNode } from 'vs/base/browser/dom'; import { localize } from 'vs/nls'; -import { Builder } from 'sql/base/browser/builder'; import { dispose, Disposable } from 'vs/base/common/lifecycle'; export class QueryPlanState { @@ -102,7 +101,7 @@ export class QueryPlan { public set xml(xml: string) { this._xml = xml; - new Builder(this.container).empty(); + clearNode(this.container); if (this.xml) { QP.showPlan(this.container, this._xml, { jsTooltips: false diff --git a/src/sql/parts/taskHistory/viewlet/taskHistoryView.ts b/src/sql/parts/taskHistory/viewlet/taskHistoryView.ts index b99e820575..c9422090d0 100644 --- a/src/sql/parts/taskHistory/viewlet/taskHistoryView.ts +++ b/src/sql/parts/taskHistory/viewlet/taskHistoryView.ts @@ -8,7 +8,6 @@ import errors = require('vs/base/common/errors'); import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; import Severity from 'vs/base/common/severity'; import { Tree } from 'vs/base/parts/tree/browser/treeImpl'; -import * as builder from 'sql/base/browser/builder'; import { IThemeService } from 'vs/platform/theme/common/themeService'; import { attachListStyler } from 'vs/platform/theme/common/styler'; import { ITree } from 'vs/base/parts/tree/browser/tree'; @@ -23,14 +22,13 @@ import { TaskHistoryActionProvider } from 'sql/parts/taskHistory/viewlet/taskHis import { ITaskService } from 'sql/platform/taskHistory/common/taskService'; import { TaskNode, TaskStatus } from 'sql/parts/taskHistory/common/taskNode'; import { IErrorMessageService } from 'sql/platform/errorMessage/common/errorMessageService'; - -const $ = builder.$; +import { hide, $, append } from 'vs/base/browser/dom'; /** * TaskHistoryView implements the dynamic tree view. */ export class TaskHistoryView { - private _messages: builder.Builder; + private _messages: HTMLElement; private _tree: ITree; private _toDispose: IDisposable[] = []; @@ -50,13 +48,13 @@ export class TaskHistoryView { let taskNode = this._taskService.getAllTasks(); // Add div to display no task executed message - this._messages = $('div.empty-task-message').appendTo(container); + this._messages = append(container, $('div.empty-task-message')); if (taskNode && taskNode.hasChildren) { - this._messages.hide(); + hide(this._messages); } let noTaskMessage = localize('noTaskMessage', 'No task history to display. Try backup or restore task to view its execution status.'); - $('span').text(noTaskMessage).appendTo(this._messages); + append(this._messages, $('span')).innerText = noTaskMessage; this._tree = this.createTaskHistoryTree(container, this._instantiationService); this._toDispose.push(this._tree.onDidChangeSelection((event) => this.onSelected(event))); @@ -65,7 +63,7 @@ export class TaskHistoryView { this._toDispose.push(attachListStyler(this._tree, this._themeService)); this._toDispose.push(this._taskService.onAddNewTask(args => { - this._messages.hide(); + hide(this._messages); this.refreshTree(); })); this._toDispose.push(this._taskService.onTaskComplete(task => { @@ -174,4 +172,4 @@ export class TaskHistoryView { this._tree.dispose(); this._toDispose = dispose(this._toDispose); } -} \ No newline at end of file +} diff --git a/src/sql/platform/accountManagement/browser/accountPicker.ts b/src/sql/platform/accountManagement/browser/accountPicker.ts index 12dba9b2a0..1a7fbec55a 100644 --- a/src/sql/platform/accountManagement/browser/accountPicker.ts +++ b/src/sql/platform/accountManagement/browser/accountPicker.ts @@ -5,7 +5,6 @@ 'use strict'; import 'vs/css!./media/accountPicker'; -import { Builder } from 'sql/base/browser/builder'; import * as DOM from 'vs/base/browser/dom'; import { Event, Emitter } from 'vs/base/common/event'; import { List } from 'vs/base/browser/ui/list/listWidget'; @@ -126,7 +125,7 @@ export class AccountPicker extends Disposable { this._accountList.setSelection([0]); this.onAccountSelectionChange(this._accountList.getSelectedElements()[0]); } else { - new Builder(this._refreshContainer).hide(); + DOM.hide(this._refreshContainer); } this._register(this._themeService.onThemeChange(e => this.updateTheme(e))); @@ -151,9 +150,9 @@ export class AccountPicker extends Disposable { this.viewModel.selectedAccount = account; if (account && account.isStale) { this._refreshAccountAction.account = account; - new Builder(this._refreshContainer).show(); + DOM.show(this._refreshContainer); } else { - new Builder(this._refreshContainer).hide(); + DOM.hide(this._refreshContainer); } this._onAccountSelectionChangeEvent.fire(account); diff --git a/src/sql/platform/dialog/dialogModal.ts b/src/sql/platform/dialog/dialogModal.ts index ae08523537..f0fe3a2390 100644 --- a/src/sql/platform/dialog/dialogModal.ts +++ b/src/sql/platform/dialog/dialogModal.ts @@ -11,21 +11,19 @@ import { attachModalDialogStyler } from 'sql/platform/theme/common/styler'; import { Dialog, DialogButton } from 'sql/platform/dialog/dialogTypes'; import { DialogPane } from 'sql/platform/dialog/dialogPane'; -import { Builder } from 'sql/base/browser/builder'; import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService'; -import { IContextViewService } from 'vs/platform/contextview/browser/contextView'; import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry'; import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey'; import { attachButtonStyler } from 'vs/platform/theme/common/styler'; import { Button } from 'vs/base/browser/ui/button/button'; import { SIDE_BAR_BACKGROUND } from 'vs/workbench/common/theme'; -import { localize } from 'vs/nls'; import { Emitter } from 'vs/base/common/event'; import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; -import { DialogMessage, MessageLevel } from '../../workbench/api/common/sqlExtHostTypes'; +import { DialogMessage } from '../../workbench/api/common/sqlExtHostTypes'; import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService'; import { IWorkbenchLayoutService } from 'vs/workbench/services/layout/browser/layoutService'; +import { append, $ } from 'vs/base/browser/dom'; export class DialogModal extends Modal { private _dialogPane: DialogPane; @@ -111,10 +109,7 @@ export class DialogModal extends Modal { } protected renderBody(container: HTMLElement): void { - let body: HTMLElement; - new Builder(container).div({ class: 'dialogModal-body' }, (bodyBuilder) => { - body = bodyBuilder.getHTMLElement(); - }); + const body = append(container, $('div.dialogModal-body')); this._dialogPane = new DialogPane(this._dialog.title, this._dialog.content, valid => this._dialog.notifyValidityChanged(valid), this._instantiationService, false); diff --git a/src/sql/platform/dialog/dialogPane.ts b/src/sql/platform/dialog/dialogPane.ts index 68a3ed5ad4..dac6968484 100644 --- a/src/sql/platform/dialog/dialogPane.ts +++ b/src/sql/platform/dialog/dialogPane.ts @@ -17,7 +17,6 @@ import { DialogModule } from 'sql/platform/dialog/dialog.module'; import { DialogComponentParams, LayoutRequestParams } from 'sql/platform/dialog/dialogContainer.component'; import * as DOM from 'vs/base/browser/dom'; -import { Builder } from 'sql/base/browser/builder'; import { IThemable } from 'vs/platform/theme/common/styler'; import { Disposable } from 'vs/base/common/lifecycle'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; @@ -48,42 +47,40 @@ export class DialogPane extends Disposable implements IThemable { } public createBody(container: HTMLElement): HTMLElement { - new Builder(container).div({ class: 'dialogModal-pane' }, (bodyBuilder) => { - this._body = bodyBuilder.getHTMLElement(); - if (typeof this._content === 'string' || this._content.length < 2) { - let modelViewId = typeof this._content === 'string' ? this._content : this._content[0].content; - this.initializeModelViewContainer(this._body, modelViewId); - } else { - this._tabbedPanel = new TabbedPanel(this._body); - this._content.forEach((tab, tabIndex) => { - if (this._selectedTabIndex === tabIndex) { - this._selectedTabContent = tab.content; - } - let tabContainer = document.createElement('div'); - tabContainer.style.display = 'none'; - this._body.appendChild(tabContainer); - this.initializeModelViewContainer(tabContainer, tab.content, tab); - this._tabbedPanel.onTabChange(e => { - tabContainer.style.height = (this.getTabDimension().height - this._tabbedPanel.headersize) + 'px'; - this._onLayoutChange.fire({ modelViewId: tab.content }); - }); - this._tabbedPanel.pushTab({ - title: tab.title, - identifier: 'dialogPane.' + this.title + '.' + tabIndex, - view: { - render: (container) => { - if (tabContainer.parentElement === this._body) { - this._body.removeChild(tabContainer); - } - container.appendChild(tabContainer); - tabContainer.style.display = 'block'; - }, - layout: (dimension) => { this.getTabDimension(); } - } as IPanelView - } as IPanelTab); + this._body = DOM.append(container, DOM.$('div.dialogModal-pane')); + if (typeof this._content === 'string' || this._content.length < 2) { + let modelViewId = typeof this._content === 'string' ? this._content : this._content[0].content; + this.initializeModelViewContainer(this._body, modelViewId); + } else { + this._tabbedPanel = new TabbedPanel(this._body); + this._content.forEach((tab, tabIndex) => { + if (this._selectedTabIndex === tabIndex) { + this._selectedTabContent = tab.content; + } + let tabContainer = document.createElement('div'); + tabContainer.style.display = 'none'; + this._body.appendChild(tabContainer); + this.initializeModelViewContainer(tabContainer, tab.content, tab); + this._tabbedPanel.onTabChange(e => { + tabContainer.style.height = (this.getTabDimension().height - this._tabbedPanel.headersize) + 'px'; + this._onLayoutChange.fire({ modelViewId: tab.content }); }); - } - }); + this._tabbedPanel.pushTab({ + title: tab.title, + identifier: 'dialogPane.' + this.title + '.' + tabIndex, + view: { + render: (container) => { + if (tabContainer.parentElement === this._body) { + this._body.removeChild(tabContainer); + } + container.appendChild(tabContainer); + tabContainer.style.display = 'block'; + }, + layout: (dimension) => { this.getTabDimension(); } + } as IPanelView + } as IPanelTab); + }); + } return this._body; } diff --git a/src/sql/platform/dialog/wizardModal.ts b/src/sql/platform/dialog/wizardModal.ts index a252fa814d..b79e406afa 100644 --- a/src/sql/platform/dialog/wizardModal.ts +++ b/src/sql/platform/dialog/wizardModal.ts @@ -15,7 +15,6 @@ import { DialogMessage } from 'sql/workbench/api/common/sqlExtHostTypes'; import { DialogModule } from 'sql/platform/dialog/dialog.module'; import { Button } from 'vs/base/browser/ui/button/button'; import { SIDE_BAR_BACKGROUND } from 'vs/workbench/common/theme'; -import { Builder } from 'sql/base/browser/builder'; import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService'; import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry'; import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey'; @@ -25,6 +24,7 @@ import { Emitter } from 'vs/base/common/event'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService'; import { IWorkbenchLayoutService } from 'vs/workbench/services/layout/browser/layoutService'; +import { append, $ } from 'vs/base/browser/dom'; export class WizardModal extends Modal { private _dialogPanes = new Map(); @@ -121,20 +121,14 @@ export class WizardModal extends Modal { } protected renderBody(container: HTMLElement): void { - let bodyBuilderObj; - new Builder(container).div({ class: 'dialogModal-body' }, (bodyBuilder) => { - bodyBuilderObj = bodyBuilder; - this._body = bodyBuilder.getHTMLElement(); - }); + this._body = append(container, $('div.dialogModal-body')); this.initializeNavigation(this._body); - bodyBuilderObj.div({ class: 'dialog-message-and-page-container' }, (mpContainer) => { - this._messageAndPageContainer = mpContainer.getHTMLElement(); - mpContainer.append(this._messageElement); - this._pageContainer = mpContainer.div({ class: 'dialogModal-page-container' }).getHTMLElement(); - }); - + const mpContainer = append(this._body, $('div.dialog-message-and-page-container')); + this._messageAndPageContainer = mpContainer; + mpContainer.append(this._messageElement); + this._pageContainer = append(mpContainer, $('div.dialogModal-page-container')); this._wizard.pages.forEach(page => { this.registerPage(page); diff --git a/src/sql/workbench/parts/connection/electron-browser/connectionViewlet.ts b/src/sql/workbench/parts/connection/electron-browser/connectionViewlet.ts index 5b2e0b5bbb..33e87bf3ef 100644 --- a/src/sql/workbench/parts/connection/electron-browser/connectionViewlet.ts +++ b/src/sql/workbench/parts/connection/electron-browser/connectionViewlet.ts @@ -7,7 +7,6 @@ import 'vs/css!./media/connectionViewlet'; import * as DOM from 'vs/base/browser/dom'; -import { Builder } from 'sql/base/browser/builder'; import { Viewlet } from 'vs/workbench/browser/viewlet'; import { IAction } from 'vs/base/common/actions'; import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry'; @@ -76,41 +75,31 @@ export class ConnectionViewlet extends Viewlet implements IConnectionsViewlet { }); } - public create(parent: HTMLElement): Promise { - return new Promise((resolve) => { - super.create(parent); - this._root = parent; - let parentBuilder = new Builder(parent); - parentBuilder.div({ class: 'server-explorer-viewlet' }, (viewletContainer) => { - viewletContainer.div({ class: 'search-box' }, (searchBoxContainer) => { - let searchServerString = localize('Search server names', 'Search server names'); - this._searchBox = new InputBox( - searchBoxContainer.getHTMLElement(), - null, - { - placeholder: searchServerString, - actions: [this._clearSearchAction], - ariaLabel: searchServerString - } - ); + public create(parent: HTMLElement): void { + super.create(parent); + this._root = parent; + const viewletContainer = DOM.append(parent, DOM.$('div.server-explorer-viewlet')); + const searchBoxContainer = DOM.append(viewletContainer, DOM.$('div.search-box')); + this._searchBox = new InputBox( + searchBoxContainer, + null, + { + placeholder: localize('Search server names', 'Search server names'), + actions: [this._clearSearchAction], + ariaLabel: localize('Search server names', 'Search server names') + } + ); - this._searchBox.onDidChange(() => { - this.search(this._searchBox.value); - }); + this._searchBox.onDidChange(() => { + this.search(this._searchBox.value); + }); - // Theme styler - this._toDisposeViewlet.push(attachInputBoxStyler(this._searchBox, this._themeService)); + // Theme styler + this._toDisposeViewlet.push(attachInputBoxStyler(this._searchBox, this._themeService)); - }); - viewletContainer.div({ Class: 'object-explorer-view' }, (viewContainer) => { - this._serverTreeView.renderBody(viewContainer.getHTMLElement()).then(() => { - resolve(null); - }, error => { - warn('render registered servers: ' + error); - resolve(null); - }); - }); - }); + const viewContainer = DOM.append(viewletContainer, DOM.$('div.object-explorer-view')); + this._serverTreeView.renderBody(viewContainer).then(undefined, error => { + warn('render registered servers: ' + error); }); } diff --git a/src/sql/workbench/parts/dataExplorer/browser/connectionViewletPanel.ts b/src/sql/workbench/parts/dataExplorer/browser/connectionViewletPanel.ts index abfb5cfc11..60ecf1451d 100644 --- a/src/sql/workbench/parts/dataExplorer/browser/connectionViewletPanel.ts +++ b/src/sql/workbench/parts/dataExplorer/browser/connectionViewletPanel.ts @@ -18,12 +18,13 @@ import { IConfigurationService } from 'vs/platform/configuration/common/configur import { INotificationService } from 'vs/platform/notification/common/notification'; import { ViewletPanel, IViewletPanelOptions } from 'vs/workbench/browser/parts/views/panelViewlet'; import { IWorkspaceContextService } from 'vs/platform/workspace/common/workspace'; -import { Builder } from 'sql/base/browser/builder'; import { InputBox } from 'vs/base/browser/ui/inputbox/inputBox'; import { IAction } from 'vs/base/common/actions'; import { ServerTreeView } from 'sql/parts/objectExplorer/viewlet/serverTreeView'; -import { ClearSearchAction, ActiveConnectionsFilterAction, - AddServerAction, AddServerGroupAction } from 'sql/parts/objectExplorer/viewlet/connectionTreeAction'; +import { + ClearSearchAction, ActiveConnectionsFilterAction, + AddServerAction, AddServerGroupAction +} from 'sql/parts/objectExplorer/viewlet/connectionTreeAction'; import { IObjectExplorerService } from 'sql/workbench/services/objectExplorer/common/objectExplorerService'; import { IExtensionsWorkbenchService } from 'vs/workbench/contrib/extensions/common/extensions'; @@ -75,36 +76,28 @@ export class ConnectionViewletPanel extends ViewletPanel { } renderBody(container: HTMLElement): void { - let parentBuilder = new Builder(container); - parentBuilder.div({ class: 'server-explorer-viewlet' }, (viewletContainer) => { - viewletContainer.div({ class: 'search-box' }, (searchBoxContainer) => { - let searchServerString = localize('Search server names', 'Search server names'); - this._searchBox = new InputBox( - searchBoxContainer.getHTMLElement(), - null, - { - placeholder: searchServerString, - actions: [this._clearSearchAction], - ariaLabel: searchServerString - } - ); + const viewletContainer = DOM.append(container, DOM.$('div.server-explorer-viewlet')); + const searchBoxContainer = DOM.append(viewletContainer, DOM.$('div.search-box')); + this._searchBox = new InputBox( + searchBoxContainer, + null, + { + placeholder: localize('Search server names', 'Search server names'), + actions: [this._clearSearchAction], + ariaLabel: localize('Search server names', 'Search server names') + } + ); - this._searchBox.onDidChange(() => { - this.search(this._searchBox.value); - }); + this._searchBox.onDidChange(() => { + this.search(this._searchBox.value); + }); - // Theme styler - this._toDisposeViewlet.push(attachInputBoxStyler(this._searchBox, this.themeService)); + // Theme styler + this._toDisposeViewlet.push(attachInputBoxStyler(this._searchBox, this.themeService)); - }); - viewletContainer.div({ Class: 'object-explorer-view' }, (viewContainer) => { - this._serverTreeView.renderBody(viewContainer.getHTMLElement()).then(() => { - Promise.resolve(null); - }, error => { - console.warn('render registered servers: ' + error); - Promise.resolve(null); - }); - }); + const viewContainer = DOM.append(viewletContainer, DOM.$('div.object-explorer-view')); + this._serverTreeView.renderBody(viewContainer).then(undefined, error => { + console.warn('render registered servers: ' + error); }); this._root = container; } diff --git a/src/sql/workbench/parts/webview/electron-browser/webViewDialog.ts b/src/sql/workbench/parts/webview/electron-browser/webViewDialog.ts index 6a639ac328..25387c5164 100644 --- a/src/sql/workbench/parts/webview/electron-browser/webViewDialog.ts +++ b/src/sql/workbench/parts/webview/electron-browser/webViewDialog.ts @@ -10,17 +10,17 @@ import { Button } from 'sql/base/browser/ui/button/button'; import { Modal } from 'sql/workbench/browser/modal/modal'; import * as TelemetryKeys from 'sql/common/telemetryKeys'; import { attachButtonStyler, attachModalDialogStyler } from 'sql/platform/theme/common/styler'; -import { Builder } from 'sql/base/browser/builder'; import { IThemeService } from 'vs/platform/theme/common/themeService'; import { Event, Emitter } from 'vs/base/common/event'; import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry'; -import { IContextKeyService, IContextKey } from 'vs/platform/contextkey/common/contextkey'; +import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey'; import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService'; import { localize } from 'vs/nls'; import { IDisposable, toDisposable } from 'vs/base/common/lifecycle'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; import { WebviewElement } from 'vs/workbench/contrib/webview/electron-browser/webviewElement'; import { IWorkbenchLayoutService, Parts } from 'vs/workbench/services/layout/browser/layoutService'; +import * as DOM from 'vs/base/browser/dom'; export class WebViewDialog extends Modal { @@ -85,29 +85,27 @@ export class WebViewDialog extends Modal { } protected renderBody(container: HTMLElement) { - new Builder(container).div({ 'class': 'webview-dialog' }, (bodyBuilder) => { - this._body = bodyBuilder.getHTMLElement(); + this._body = DOM.append(container, DOM.$('div.webview-dialog')); - this._webview = this._instantiationService.createInstance(WebviewElement, - this.layoutService.getContainer(Parts.EDITOR_PART), - {}, - { - allowScripts: true - }); + this._webview = this._instantiationService.createInstance(WebviewElement, + this.layoutService.getContainer(Parts.EDITOR_PART), + {}, + { + allowScripts: true + }); - this._webview.mountTo(this._body); + this._webview.mountTo(this._body); - this._webview.style(this._themeService.getTheme()); + this._webview.style(this._themeService.getTheme()); - this._webview.onMessage(message => { - this._onMessage.fire(message); - }, null, this.contentDisposables); + this._webview.onMessage(message => { + this._onMessage.fire(message); + }, null, this.contentDisposables); - this._themeService.onThemeChange(theme => this._webview.style(theme), null, this.contentDisposables); + this._themeService.onThemeChange(theme => this._webview.style(theme), null, this.contentDisposables); - this.contentDisposables.push(this._webview); - this.contentDisposables.push(toDisposable(() => this._webview = null)); - }); + this.contentDisposables.push(this._webview); + this.contentDisposables.push(toDisposable(() => this._webview = null)); } get onMessage(): Event { diff --git a/src/sql/workbench/services/errorMessage/browser/errorMessageDialog.ts b/src/sql/workbench/services/errorMessage/browser/errorMessageDialog.ts index 7b1588adfb..27e983cc9d 100644 --- a/src/sql/workbench/services/errorMessage/browser/errorMessageDialog.ts +++ b/src/sql/workbench/services/errorMessage/browser/errorMessageDialog.ts @@ -11,7 +11,6 @@ import { Modal } from 'sql/workbench/browser/modal/modal'; import * as TelemetryKeys from 'sql/common/telemetryKeys'; import { attachButtonStyler, attachModalDialogStyler } from 'sql/platform/theme/common/styler'; -import { Builder } from 'sql/base/browser/builder'; import Severity from 'vs/base/common/severity'; import { IThemeService } from 'vs/platform/theme/common/themeService'; import { SIDE_BAR_BACKGROUND, SIDE_BAR_FOREGROUND } from 'vs/workbench/common/theme'; @@ -22,6 +21,7 @@ import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService import { localize } from 'vs/nls'; import { IAction } from 'vs/base/common/actions'; import { IWorkbenchLayoutService } from 'vs/workbench/services/layout/browser/layoutService'; +import * as DOM from 'vs/base/browser/dom'; const maxActions = 1; @@ -54,9 +54,7 @@ export class ErrorMessageDialog extends Modal { } protected renderBody(container: HTMLElement) { - new Builder(container).div({ 'class': 'error-dialog' }, (bodyBuilder) => { - this._body = bodyBuilder.getHTMLElement(); - }); + this._body = DOM.append(container, DOM.$('div.error-dialog')); } public render() { @@ -99,10 +97,8 @@ export class ErrorMessageDialog extends Modal { } private updateDialogBody(): void { - let builder = new Builder(this._body).empty(); - builder.div({ class: 'error-message' }, (errorContainer) => { - errorContainer.getHTMLElement().innerText = this._message; - }); + DOM.clearNode(this._body); + DOM.append(this._body, DOM.$('div.error-message')).innerText = this._message; } private updateIconTitle(): void {