From ad972a1d3ea04f539cc20250365cb53427358068 Mon Sep 17 00:00:00 2001 From: Benjamin Pasero Date: Fri, 24 Aug 2018 16:27:23 +0200 Subject: [PATCH] debt - deprecate builder and remove usage in some places --- src/vs/base/browser/builder.ts | 58 ++++++------- src/vs/base/browser/ui/button/button.ts | 86 +++++++++---------- .../browser/ui/progressbar/progressbar.ts | 60 +++++++------ src/vs/base/test/browser/builder.test.ts | 48 +++++------ .../contextview/browser/contextMenuHandler.ts | 13 +-- .../commentsEditorContribution.ts | 4 +- .../electron-browser/feedbackStatusbarItem.ts | 13 ++- .../files/electron-browser/views/emptyView.ts | 30 ++++--- .../parts/search/browser/searchView.ts | 2 +- .../parts/search/browser/searchWidget.ts | 9 +- 10 files changed, 166 insertions(+), 157 deletions(-) diff --git a/src/vs/base/browser/builder.ts b/src/vs/base/browser/builder.ts index 9c285274a99..6abfaece89d 100644 --- a/src/vs/base/browser/builder.ts +++ b/src/vs/base/browser/builder.ts @@ -12,23 +12,9 @@ import * as assert from 'vs/base/common/assert'; import * as DOM from 'vs/base/browser/dom'; /** - * Welcome to the monaco builder. The recommended way to use it is: + * !!! DO NOT USE. USE vs/base/browser/dom.$ INSTEAD !!! * - * import Builder = require('vs/base/browser/builder'); - * let $ = Builder.$; - * $(....).fn(...); - * - * See below for examples how to invoke the $(): - * - * $() - creates an offdom builder - * $(builder) - wraps the given builder - * $(builder[]) - wraps the given builders into a multibuilder - * $('div') - creates a div - * $('.big') - creates a div with class `big` - * $('#head') - creates a div with id `head` - * $('ul#head') - creates an unordered list with id `head` - * $('') - constructs a builder from the given HTML - * $('a', { href: 'back'}) - constructs a builder, similarly to the Builder#element() call + * @deprecated !!! DO NOT USE. USE vs/base/browser/dom.$ INSTEAD !!! */ export interface QuickBuilder { (): Builder; @@ -62,7 +48,9 @@ function hasData(element: any): boolean { } /** - * Wraps around the provided element to manipulate it and add more child elements. + * !!! DO NOT USE. USE vs/base/browser/dom.$ INSTEAD !!! + * + * @deprecated !!! DO NOT USE. USE vs/base/browser/dom.$ INSTEAD !!! */ export class Builder implements IDisposable { private currentElement: HTMLElement; @@ -199,7 +187,7 @@ export class Builder implements IDisposable { assert.ok(child, 'Need a child to append'); if (DOM.isHTMLElement(child)) { - child = withElement(child); + child = _withElement(child); } assert.ok(child instanceof Builder || child instanceof MultiBuilder, 'Need a child to append'); @@ -1018,7 +1006,7 @@ export class Builder implements IDisposable { * Allows to store arbritary data into the current element. */ setProperty(key: string, value: any): Builder { - setPropertyOnElement(this.currentElement, key, value); + _setPropertyOnElement(this.currentElement, key, value); return this; } @@ -1027,7 +1015,7 @@ export class Builder implements IDisposable { * Allows to get arbritary data from the current element. */ getProperty(key: string, fallback?: any): any { - return getPropertyFromElement(this.currentElement, key, fallback); + return _getPropertyFromElement(this.currentElement, key, fallback); } /** @@ -1047,7 +1035,7 @@ export class Builder implements IDisposable { child(index = 0): Builder { let children = this.currentElement.children; - return withElement(children.item(index)); + return _withElement(children.item(index)); } /** @@ -1191,8 +1179,9 @@ export class Builder implements IDisposable { } /** - * The multi builder provides the same methods as the builder, but allows to call - * them on an array of builders. + * !!! DO NOT USE. USE vs/base/browser/dom.$ INSTEAD !!! + * + * @deprecated !!! DO NOT USE. USE vs/base/browser/dom.$ INSTEAD !!! */ export class MultiBuilder extends Builder { @@ -1215,7 +1204,7 @@ export class MultiBuilder extends Builder { if (types.isArray(builders)) { for (let i = 0; i < builders.length; i++) { if (builders[i] instanceof HTMLElement) { - this.push(withElement(builders[i])); + this.push(_withElement(builders[i])); } else { this.push(builders[i]); } @@ -1302,7 +1291,7 @@ function withBuilder(builder: Builder, offdom?: boolean): Builder { return new Builder(builder.getHTMLElement(), offdom); } -export function withElement(element: HTMLElement, offdom?: boolean): Builder { +export function _withElement(element: HTMLElement, offdom?: boolean): Builder { return new Builder(element, offdom); } @@ -1315,14 +1304,14 @@ function offDOM(): Builder { /** * Allows to store arbritary data into element. */ -export function setPropertyOnElement(element: HTMLElement, key: string, value: any): void { +export function _setPropertyOnElement(element: HTMLElement, key: string, value: any): void { data(element)[key] = value; } /** * Allows to get arbritary data from element. */ -export function getPropertyFromElement(element: HTMLElement, key: string, fallback?: any): any { +export function _getPropertyFromElement(element: HTMLElement, key: string, fallback?: any): any { if (hasData(element)) { let value = data(element)[key]; if (!types.isUndefined(value)) { @@ -1337,12 +1326,17 @@ export function getPropertyFromElement(element: HTMLElement, key: string, fallba * Adds the provided object as property to the given element. Call getBinding() * to retrieve it again. */ -export function bindElement(element: HTMLElement, object: any): void { - setPropertyOnElement(element, DATA_BINDING_ID, object); +export function _bindElement(element: HTMLElement, object: any): void { + _setPropertyOnElement(element, DATA_BINDING_ID, object); } let SELECTOR_REGEX = /([\w\-]+)?(#([\w\-]+))?((.([\w\-]+))*)/; +/** + * !!! DO NOT USE. USE vs/base/browser/dom.$ INSTEAD !!! + * + * @deprecated !!! DO NOT USE. USE vs/base/browser/dom.$ INSTEAD !!! + */ export const $: QuickBuilder = function (arg?: any): Builder { // Off-DOM use @@ -1357,7 +1351,7 @@ export const $: QuickBuilder = function (arg?: any): Builder { // Wrap the given element if (DOM.isHTMLElement(arg) || arg === window) { - return withElement(arg); + return _withElement(arg); } // Wrap the given builders @@ -1386,14 +1380,14 @@ export const $: QuickBuilder = function (arg?: any): Builder { element = container.firstChild; container.removeChild(element); - return withElement(element); + return _withElement(element); } let builders: Builder[] = []; while (container.firstChild) { element = container.firstChild; container.removeChild(element); - builders.push(withElement(element)); + builders.push(_withElement(element)); } return new MultiBuilder(builders); diff --git a/src/vs/base/browser/ui/button/button.ts b/src/vs/base/browser/ui/button/button.ts index dec147c543d..0ac9201ce67 100644 --- a/src/vs/base/browser/ui/button/button.ts +++ b/src/vs/base/browser/ui/button/button.ts @@ -7,14 +7,13 @@ import 'vs/css!./button'; import * as DOM from 'vs/base/browser/dom'; -import { Builder, $ } from 'vs/base/browser/builder'; import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent'; import { KeyCode } from 'vs/base/common/keyCodes'; import { Color } from 'vs/base/common/color'; import { mixin } from 'vs/base/common/objects'; import { Event as BaseEvent, Emitter } from 'vs/base/common/event'; import { Disposable } from 'vs/base/common/lifecycle'; -import { Gesture, EventType } from 'vs/base/browser/touch'; +import { Gesture } from 'vs/base/browser/touch'; export interface IButtonOptions extends IButtonStyles { title?: boolean; @@ -35,7 +34,7 @@ const defaultOptions: IButtonStyles = { export class Button extends Disposable { - private $el: Builder; + private $el: HTMLElement; private options: IButtonOptions; private buttonBackground: Color; @@ -59,50 +58,52 @@ export class Button extends Disposable { this.buttonForeground = this.options.buttonForeground; this.buttonBorder = this.options.buttonBorder; - this.$el = this._register($('a.monaco-button').attr({ - 'tabIndex': '0', - 'role': 'button' - }).appendTo(container)); + this.$el = document.createElement('a'); + DOM.addClass(this.$el, 'monaco-button'); + this.$el.tabIndex = 0; + this.$el.setAttribute('role', 'button'); - Gesture.addTarget(this.$el.getHTMLElement()); + container.appendChild(this.$el); - this.$el.on([DOM.EventType.CLICK, EventType.Tap], e => { + Gesture.addTarget(this.$el); + + this._register(DOM.addDisposableListener(this.$el, DOM.EventType.CLICK, e => { if (!this.enabled) { DOM.EventHelper.stop(e); return; } this._onDidClick.fire(e); - }); + })); - this.$el.on(DOM.EventType.KEY_DOWN, e => { + this._register(DOM.addDisposableListener(this.$el, DOM.EventType.KEY_DOWN, e => { const event = new StandardKeyboardEvent(e as KeyboardEvent); let eventHandled = false; if (this.enabled && event.equals(KeyCode.Enter) || event.equals(KeyCode.Space)) { this._onDidClick.fire(e); eventHandled = true; } else if (event.equals(KeyCode.Escape)) { - this.$el.domBlur(); + this.$el.blur(); eventHandled = true; } if (eventHandled) { DOM.EventHelper.stop(event, true); } - }); + })); - this.$el.on(DOM.EventType.MOUSE_OVER, e => { - if (!this.$el.hasClass('disabled')) { + this._register(DOM.addDisposableListener(this.$el, DOM.EventType.MOUSE_OVER, e => { + if (!DOM.hasClass(this.$el, 'disabled')) { this.setHoverBackground(); } - }); + })); - this.$el.on(DOM.EventType.MOUSE_OUT, e => { + this._register(DOM.addDisposableListener(this.$el, DOM.EventType.MOUSE_OUT, e => { this.applyStyles(); // restore standard styles - }); + })); // Also set hover background when button is focused for feedback - this.focusTracker = this._register(DOM.trackFocus(this.$el.getHTMLElement())); + this.focusTracker = this._register(DOM.trackFocus(this.$el)); this._register(this.focusTracker.onDidFocus(() => this.setHoverBackground())); this._register(this.focusTracker.onDidBlur(() => this.applyStyles())); // restore standard styles @@ -112,7 +113,7 @@ export class Button extends Disposable { private setHoverBackground(): void { const hoverBackground = this.buttonHoverBackground ? this.buttonHoverBackground.toString() : null; if (hoverBackground) { - this.$el.style('background-color', hoverBackground); + this.$el.style.backgroundColor = hoverBackground; } } @@ -131,53 +132,51 @@ export class Button extends Disposable { const foreground = this.buttonForeground ? this.buttonForeground.toString() : null; const border = this.buttonBorder ? this.buttonBorder.toString() : null; - this.$el.style('color', foreground); - this.$el.style('background-color', background); + this.$el.style.color = foreground; + this.$el.style.backgroundColor = background; - this.$el.style('border-width', border ? '1px' : null); - this.$el.style('border-style', border ? 'solid' : null); - this.$el.style('border-color', border); + this.$el.style.borderWidth = border ? '1px' : null; + this.$el.style.borderStyle = border ? 'solid' : null; + this.$el.style.borderColor = border; } } get element(): HTMLElement { - return this.$el.getHTMLElement(); + return this.$el; } set label(value: string) { - if (!this.$el.hasClass('monaco-text-button')) { - this.$el.addClass('monaco-text-button'); + if (!DOM.hasClass(this.$el, 'monaco-text-button')) { + DOM.addClass(this.$el, 'monaco-text-button'); } - this.$el.text(value); + this.$el.innerText = value; if (this.options.title) { - this.$el.title(value); + this.$el.title = value; } } set icon(iconClassName: string) { - this.$el.addClass(iconClassName); + DOM.addClass(this.$el, iconClassName); } set enabled(value: boolean) { if (value) { - this.$el.removeClass('disabled'); - this.$el.attr({ - 'aria-disabled': 'false', - 'tabIndex': '0' - }); + DOM.removeClass(this.$el, 'disabled'); + this.$el.setAttribute('aria-disabled', String(false)); + this.$el.tabIndex = 0; } else { - this.$el.addClass('disabled'); - this.$el.attr('aria-disabled', String(true)); - DOM.removeTabIndexAndUpdateFocus(this.$el.getHTMLElement()); + DOM.addClass(this.$el, 'disabled'); + this.$el.setAttribute('aria-disabled', String(true)); + DOM.removeTabIndexAndUpdateFocus(this.$el); } } get enabled() { - return !this.$el.hasClass('disabled'); + return !DOM.hasClass(this.$el, 'disabled'); } focus(): void { - this.$el.domFocus(); + this.$el.focus(); } } @@ -201,7 +200,7 @@ export class ButtonGroup extends Disposable { // Implement keyboard access in buttons if there are multiple if (count > 1) { - $(button.element).on(DOM.EventType.KEY_DOWN, e => { + this._register(DOM.addDisposableListener(button.element, DOM.EventType.KEY_DOWN, e => { const event = new StandardKeyboardEvent(e as KeyboardEvent); let eventHandled = true; @@ -219,7 +218,8 @@ export class ButtonGroup extends Disposable { this._buttons[buttonIndexToFocus].focus(); DOM.EventHelper.stop(e, true); } - }, this.toDispose); + + })); } } } diff --git a/src/vs/base/browser/ui/progressbar/progressbar.ts b/src/vs/base/browser/ui/progressbar/progressbar.ts index 602b7d93dd9..5db9797a33a 100644 --- a/src/vs/base/browser/ui/progressbar/progressbar.ts +++ b/src/vs/base/browser/ui/progressbar/progressbar.ts @@ -7,10 +7,11 @@ import 'vs/css!./progressbar'; import * as assert from 'vs/base/common/assert'; -import { Builder, $ } from 'vs/base/browser/builder'; import { Disposable } from 'vs/base/common/lifecycle'; import { Color } from 'vs/base/common/color'; import { mixin } from 'vs/base/common/objects'; +import { removeClasses, addClass, hasClass, addClasses, removeClass, hide, show } from 'vs/base/browser/dom'; +import { RunOnceScheduler } from 'vs/base/common/async'; const css_done = 'done'; const css_active = 'active'; @@ -36,10 +37,11 @@ const defaultOpts = { export class ProgressBar extends Disposable { private options: IProgressBarOptions; private workedVal: number; - private element: Builder; + private element: HTMLElement; private bit: HTMLElement; private totalWork: number; private progressBarBackground: Color; + private showDelayedScheduler: RunOnceScheduler; constructor(container: HTMLElement, options?: IProgressBarOptions) { super(); @@ -51,14 +53,19 @@ export class ProgressBar extends Disposable { this.progressBarBackground = this.options.progressBarBackground; + this._register(this.showDelayedScheduler = new RunOnceScheduler(() => show(this.element), 0)); + this.create(container); } private create(container: HTMLElement): void { - $(container).div({ 'class': css_progress_container }, builder => { - this.element = builder.clone(); - this.bit = builder.div({ 'class': css_progress_bit }).getHTMLElement(); - }); + this.element = document.createElement('div'); + addClass(this.element, css_progress_container); + container.appendChild(this.element); + + this.bit = document.createElement('div'); + addClass(this.bit, css_progress_bit); + this.element.appendChild(this.bit); this.applyStyles(); } @@ -66,9 +73,7 @@ export class ProgressBar extends Disposable { private off(): void { this.bit.style.width = 'inherit'; this.bit.style.opacity = '1'; - this.element.removeClass(css_active); - this.element.removeClass(css_infinite); - this.element.removeClass(css_discrete); + removeClasses(this.element, css_active, css_infinite, css_discrete); this.workedVal = 0; this.totalWork = undefined; @@ -89,10 +94,10 @@ export class ProgressBar extends Disposable { } private doDone(delayed: boolean): ProgressBar { - this.element.addClass(css_done); + addClass(this.element, css_done); // let it grow to 100% width and hide afterwards - if (!this.element.hasClass(css_infinite)) { + if (!hasClass(this.element, css_infinite)) { this.bit.style.width = 'inherit'; if (delayed) { @@ -122,10 +127,8 @@ export class ProgressBar extends Disposable { this.bit.style.width = '2%'; this.bit.style.opacity = '1'; - this.element.removeClass(css_discrete); - this.element.removeClass(css_done); - this.element.addClass(css_active); - this.element.addClass(css_infinite); + removeClasses(this.element, css_discrete, css_done); + addClasses(this.element, css_active, css_infinite); return this; } @@ -176,20 +179,20 @@ export class ProgressBar extends Disposable { this.workedVal = value; this.workedVal = Math.min(this.totalWork, this.workedVal); - if (this.element.hasClass(css_infinite)) { - this.element.removeClass(css_infinite); + if (hasClass(this.element, css_infinite)) { + removeClass(this.element, css_infinite); } - if (this.element.hasClass(css_done)) { - this.element.removeClass(css_done); + if (hasClass(this.element, css_done)) { + removeClass(this.element, css_done); } - if (!this.element.hasClass(css_active)) { - this.element.addClass(css_active); + if (!hasClass(this.element, css_active)) { + addClass(this.element, css_active); } - if (!this.element.hasClass(css_discrete)) { - this.element.addClass(css_discrete); + if (!hasClass(this.element, css_discrete)) { + addClass(this.element, css_discrete); } this.bit.style.width = 100 * (this.workedVal / this.totalWork) + '%'; @@ -198,19 +201,22 @@ export class ProgressBar extends Disposable { } getContainer(): HTMLElement { - return this.element.getHTMLElement(); + return this.element; } show(delay?: number): void { + this.showDelayedScheduler.cancel(); + if (typeof delay === 'number') { - this.element.showDelayed(delay); + this.showDelayedScheduler.schedule(delay); } else { - this.element.show(); + show(this.element); } } hide(): void { - this.element.hide(); + hide(this.element); + this.showDelayedScheduler.cancel(); } style(styles: IProgressBarStyles): void { diff --git a/src/vs/base/test/browser/builder.test.ts b/src/vs/base/test/browser/builder.test.ts index d46dff04c97..f592174bd50 100644 --- a/src/vs/base/test/browser/builder.test.ts +++ b/src/vs/base/test/browser/builder.test.ts @@ -5,7 +5,7 @@ 'use strict'; import * as assert from 'assert'; -import { Builder, MultiBuilder, $, bindElement, withElement, setPropertyOnElement, getPropertyFromElement } from 'vs/base/browser/builder'; +import { Builder, MultiBuilder, $, _bindElement, _withElement, _setPropertyOnElement, _getPropertyFromElement } from 'vs/base/browser/builder'; import * as Types from 'vs/base/common/types'; import * as DomUtils from 'vs/base/browser/dom'; import { IDisposable } from 'vs/base/common/lifecycle'; @@ -48,7 +48,7 @@ function select(builder: Builder, selector: string, offdom?: boolean): MultiBuil let builders: Builder[] = []; for (let i = 0; i < elements.length; i++) { - builders.push(withElement(elements.item(i), offdom)); + builders.push(_withElement(elements.item(i), offdom)); } return new MultiBuilder(builders); @@ -75,17 +75,17 @@ suite('Builder', () => { assert(element); // Properties - setPropertyOnElement(element, 'foo', 'bar'); - assert.strictEqual(getPropertyFromElement(element, 'foo'), 'bar'); + _setPropertyOnElement(element, 'foo', 'bar'); + assert.strictEqual(_getPropertyFromElement(element, 'foo'), 'bar'); - setPropertyOnElement(element, 'foo', { foo: 'bar' }); - assert.deepEqual(getPropertyFromElement(element, 'foo'), { foo: 'bar' }); + _setPropertyOnElement(element, 'foo', { foo: 'bar' }); + assert.deepEqual(_getPropertyFromElement(element, 'foo'), { foo: 'bar' }); - setPropertyOnElement(element, 'bar', 'bar'); - assert.strictEqual(getPropertyFromElement(element, 'bar'), 'bar'); + _setPropertyOnElement(element, 'bar', 'bar'); + assert.strictEqual(_getPropertyFromElement(element, 'bar'), 'bar'); - setPropertyOnElement(element, 'bar', { foo: 'bar' }); - assert.deepEqual(getPropertyFromElement(element, 'bar'), { foo: 'bar' }); + _setPropertyOnElement(element, 'bar', { foo: 'bar' }); + assert.deepEqual(_getPropertyFromElement(element, 'bar'), { foo: 'bar' }); }); test('Select', function () { @@ -801,7 +801,7 @@ suite('Builder', () => { let counter7 = 0; b.div(function (div: Builder) { - bindElement(div.getHTMLElement(), 'Foo Bar'); + _bindElement(div.getHTMLElement(), 'Foo Bar'); div.setProperty('Foo', 'Bar'); bindings.push(div.clone()); @@ -814,7 +814,7 @@ suite('Builder', () => { inputs.push(div.clone()); div.p(function (p: Builder) { - bindElement(p.getHTMLElement(), 'Foo Bar'); + _bindElement(p.getHTMLElement(), 'Foo Bar'); p.setProperty('Foo', 'Bar'); bindings.push(p.clone()); @@ -827,7 +827,7 @@ suite('Builder', () => { inputs.push(p.clone()); p.ul(function (ul: Builder) { - bindElement(ul.getHTMLElement(), 'Foo Bar'); + _bindElement(ul.getHTMLElement(), 'Foo Bar'); ul.setProperty('Foo', 'Bar'); bindings.push(ul.clone()); @@ -840,7 +840,7 @@ suite('Builder', () => { inputs.push(ul.clone()); ul.li(function (li: Builder) { - bindElement(li.getHTMLElement(), 'Foo Bar'); + _bindElement(li.getHTMLElement(), 'Foo Bar'); li.setProperty('Foo', 'Bar'); bindings.push(li.clone()); @@ -856,7 +856,7 @@ suite('Builder', () => { id: 'builderspan', innerHtml: 'Foo Bar' }, function (span) { - bindElement(span.getHTMLElement(), 'Foo Bar'); + _bindElement(span.getHTMLElement(), 'Foo Bar'); span.setProperty('Foo', 'Bar'); bindings.push(span.clone()); @@ -873,7 +873,7 @@ suite('Builder', () => { id: 'builderimg', src: '#' }, function (img) { - bindElement(img.getHTMLElement(), 'Foo Bar'); + _bindElement(img.getHTMLElement(), 'Foo Bar'); img.setProperty('Foo', 'Bar'); bindings.push(img.clone()); @@ -891,7 +891,7 @@ suite('Builder', () => { href: '#', innerHtml: 'Link' }, function (a) { - bindElement(a.getHTMLElement(), 'Foo Bar'); + _bindElement(a.getHTMLElement(), 'Foo Bar'); a.setProperty('Foo', 'Bar'); bindings.push(a.clone()); @@ -986,7 +986,7 @@ suite('Builder', () => { let counter7 = 0; b.div(function (div: Builder) { - bindElement(div.getHTMLElement(), 'Foo Bar'); + _bindElement(div.getHTMLElement(), 'Foo Bar'); div.setProperty('Foo', 'Bar'); bindings.push(div.clone()); @@ -999,7 +999,7 @@ suite('Builder', () => { inputs.push(div.clone()); div.p(function (p: Builder) { - bindElement(p.getHTMLElement(), 'Foo Bar'); + _bindElement(p.getHTMLElement(), 'Foo Bar'); p.setProperty('Foo', 'Bar'); bindings.push(p.clone()); @@ -1012,7 +1012,7 @@ suite('Builder', () => { inputs.push(p.clone()); p.ul(function (ul: Builder) { - bindElement(ul.getHTMLElement(), 'Foo Bar'); + _bindElement(ul.getHTMLElement(), 'Foo Bar'); ul.setProperty('Foo', 'Bar'); bindings.push(ul.clone()); @@ -1025,7 +1025,7 @@ suite('Builder', () => { inputs.push(ul.clone()); ul.li(function (li: Builder) { - bindElement(li.getHTMLElement(), 'Foo Bar'); + _bindElement(li.getHTMLElement(), 'Foo Bar'); li.setProperty('Foo', 'Bar'); bindings.push(li.clone()); @@ -1041,7 +1041,7 @@ suite('Builder', () => { id: 'builderspan', innerHtml: 'Foo Bar' }, function (span) { - bindElement(span.getHTMLElement(), 'Foo Bar'); + _bindElement(span.getHTMLElement(), 'Foo Bar'); span.setProperty('Foo', 'Bar'); bindings.push(span.clone()); @@ -1058,7 +1058,7 @@ suite('Builder', () => { id: 'builderimg', src: '#' }, function (img) { - bindElement(img.getHTMLElement(), 'Foo Bar'); + _bindElement(img.getHTMLElement(), 'Foo Bar'); img.setProperty('Foo', 'Bar'); bindings.push(img.clone()); @@ -1076,7 +1076,7 @@ suite('Builder', () => { href: '#', innerHtml: 'Link' }, function (a) { - bindElement(a.getHTMLElement(), 'Foo Bar'); + _bindElement(a.getHTMLElement(), 'Foo Bar'); a.setProperty('Foo', 'Bar'); bindings.push(a.clone()); diff --git a/src/vs/platform/contextview/browser/contextMenuHandler.ts b/src/vs/platform/contextview/browser/contextMenuHandler.ts index 836a08a9935..d1db0a1a2d4 100644 --- a/src/vs/platform/contextview/browser/contextMenuHandler.ts +++ b/src/vs/platform/contextview/browser/contextMenuHandler.ts @@ -6,8 +6,7 @@ 'use strict'; import 'vs/css!./contextMenuHandler'; -import { $, Builder } from 'vs/base/browser/builder'; -import { combinedDisposable, IDisposable } from 'vs/base/common/lifecycle'; +import { combinedDisposable, IDisposable, dispose } from 'vs/base/common/lifecycle'; import { StandardMouseEvent } from 'vs/base/browser/mouseEvent'; import { ActionRunner, IAction, IRunEvent } from 'vs/base/common/actions'; import { Menu } from 'vs/base/browser/ui/menu/menu'; @@ -16,6 +15,7 @@ import { IContextViewService } from 'vs/platform/contextview/browser/contextView import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry'; import { INotificationService } from 'vs/platform/notification/common/notification'; import { IContextMenuDelegate } from 'vs/base/browser/contextmenu'; +import { addDisposableListener } from 'vs/base/browser/dom'; export class ContextMenuHandler { @@ -23,7 +23,8 @@ export class ContextMenuHandler { private notificationService: INotificationService; private telemetryService: ITelemetryService; - private $el: Builder; + private $el: HTMLElement; + private $elDisposable: IDisposable; private menuContainerElement: HTMLElement; private focusToReturn: HTMLElement; @@ -39,12 +40,12 @@ export class ContextMenuHandler { public setContainer(container: HTMLElement): void { if (this.$el) { - this.$el.off(['click', 'mousedown']); + this.$elDisposable = dispose(this.$elDisposable); this.$el = null; } if (container) { - this.$el = $(container); - this.$el.on('mousedown', (e: Event) => this.onMouseDown(e as MouseEvent)); + this.$el = container; + this.$elDisposable = addDisposableListener(this.$el, 'mousedown', (e) => this.onMouseDown(e as MouseEvent)); } } diff --git a/src/vs/workbench/parts/comments/electron-browser/commentsEditorContribution.ts b/src/vs/workbench/parts/comments/electron-browser/commentsEditorContribution.ts index 60b5c2f04d0..ffa0cbae652 100644 --- a/src/vs/workbench/parts/comments/electron-browser/commentsEditorContribution.ts +++ b/src/vs/workbench/parts/comments/electron-browser/commentsEditorContribution.ts @@ -6,7 +6,7 @@ import 'vs/css!./media/review'; import * as nls from 'vs/nls'; -import { $ } from 'vs/base/browser/builder'; +import { $ } from 'vs/base/browser/dom'; import { findFirstInSorted } from 'vs/base/common/arrays'; import { KeyCode, KeyMod } from 'vs/base/common/keyCodes'; import { IDisposable, dispose } from 'vs/base/common/lifecycle'; @@ -48,7 +48,7 @@ export class ReviewViewZone implements IViewZone { this.afterLineNumber = afterLineNumber; this.callback = onDomNodeTop; - this.domNode = $('.review-viewzone').getHTMLElement(); + this.domNode = $('.review-viewzone'); } onDomNodeTop(top: number): void { diff --git a/src/vs/workbench/parts/feedback/electron-browser/feedbackStatusbarItem.ts b/src/vs/workbench/parts/feedback/electron-browser/feedbackStatusbarItem.ts index 38b00d07f94..738ee925110 100644 --- a/src/vs/workbench/parts/feedback/electron-browser/feedbackStatusbarItem.ts +++ b/src/vs/workbench/parts/feedback/electron-browser/feedbackStatusbarItem.ts @@ -16,8 +16,7 @@ import { IThemeService, registerThemingParticipant, ITheme, ICssStyleCollector } import { IWorkspaceContextService, WorkbenchState } from 'vs/platform/workspace/common/workspace'; import { IWorkspaceConfigurationService } from 'vs/workbench/services/configuration/common/configuration'; import { IConfigurationChangeEvent } from 'vs/platform/configuration/common/configuration'; -import { clearNode, EventHelper, addClass, removeClass } from 'vs/base/browser/dom'; -import { $ } from 'vs/base/browser/builder'; +import { clearNode, EventHelper, addClass, removeClass, addDisposableListener } from 'vs/base/browser/dom'; import { localize } from 'vs/nls'; import { TPromise } from 'vs/base/common/winjs.base'; import { Action } from 'vs/base/common/actions'; @@ -94,7 +93,7 @@ export class FeedbackStatusbarItem extends Themable implements IStatusbarItem { super.updateStyles(); if (this.dropdown) { - $(this.dropdown.label).style('background-color', this.getColor(this.contextService.getWorkbenchState() !== WorkbenchState.EMPTY ? STATUS_BAR_FOREGROUND : STATUS_BAR_NO_FOLDER_FOREGROUND)); + this.dropdown.label.style.backgroundColor = (this.getColor(this.contextService.getWorkbenchState() !== WorkbenchState.EMPTY ? STATUS_BAR_FOREGROUND : STATUS_BAR_NO_FOLDER_FOREGROUND)); } } @@ -102,21 +101,21 @@ export class FeedbackStatusbarItem extends Themable implements IStatusbarItem { this.container = element; // Prevent showing dropdown on anything but left click - $(this.container).on('mousedown', (e: MouseEvent) => { + this.toDispose.push(addDisposableListener(this.container, 'mousedown', (e: MouseEvent) => { if (e.button !== 0) { EventHelper.stop(e, true); } - }, this.toDispose, true); + }, true)); // Offer context menu to hide status bar entry - $(this.container).on('contextmenu', e => { + this.toDispose.push(addDisposableListener(this.container, 'contextmenu', e => { EventHelper.stop(e, true); this.contextMenuService.showContextMenu({ getAnchor: () => this.container, getActions: () => TPromise.as([this.hideAction]) }); - }, this.toDispose); + })); return this.update(); } diff --git a/src/vs/workbench/parts/files/electron-browser/views/emptyView.ts b/src/vs/workbench/parts/files/electron-browser/views/emptyView.ts index 46326cd24ee..3eca44e9bfa 100644 --- a/src/vs/workbench/parts/files/electron-browser/views/emptyView.ts +++ b/src/vs/workbench/parts/files/electron-browser/views/emptyView.ts @@ -11,7 +11,6 @@ import * as DOM from 'vs/base/browser/dom'; import { TPromise } from 'vs/base/common/winjs.base'; import { IAction } from 'vs/base/common/actions'; import { Button } from 'vs/base/browser/ui/button/button'; -import { $, Builder } from 'vs/base/browser/builder'; import { IActionItem } from 'vs/base/browser/ui/actionbar/actionbar'; import { IViewletViewOptions } from 'vs/workbench/browser/parts/views/viewsViewlet'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; @@ -33,8 +32,8 @@ export class EmptyView extends ViewletPanel { public static readonly NAME = nls.localize('noWorkspace', "No Folder Opened"); private button: Button; - private messageDiv: Builder; - private titleDiv: Builder; + private messageElement: HTMLElement; + private titleElement: HTMLElement; constructor( options: IViewletViewOptions, @@ -50,17 +49,26 @@ export class EmptyView extends ViewletPanel { } public renderHeader(container: HTMLElement): void { - this.titleDiv = $('span').text(name).appendTo($('div.title').appendTo(container)); + const titleContainer = document.createElement('div'); + DOM.addClass(titleContainer, 'title'); + container.appendChild(titleContainer); + + this.titleElement = document.createElement('span'); + this.titleElement.textContent = name; + titleContainer.appendChild(this.titleElement); } protected renderBody(container: HTMLElement): void { DOM.addClass(container, 'explorer-empty-view'); - this.messageDiv = $('p').appendTo($('div.section').appendTo(container)); + const messageContainer = document.createElement('div'); + DOM.addClass(messageContainer, 'section'); + container.appendChild(messageContainer); - const section = $('div.section').appendTo(container); + this.messageElement = document.createElement('p'); + messageContainer.appendChild(this.messageElement); - this.button = new Button(section.getHTMLElement()); + this.button = new Button(messageContainer); attachButtonStyler(this.button, this.themeService); this.disposables.push(this.button.onDidClick(() => { @@ -99,17 +107,17 @@ export class EmptyView extends ViewletPanel { private setLabels(): void { if (this.contextService.getWorkbenchState() === WorkbenchState.WORKSPACE) { - this.messageDiv.text(nls.localize('noWorkspaceHelp', "You have not yet added a folder to the workspace.")); + this.messageElement.textContent = nls.localize('noWorkspaceHelp', "You have not yet added a folder to the workspace."); if (this.button) { this.button.label = nls.localize('addFolder', "Add Folder"); } - this.titleDiv.text(EmptyView.NAME); + this.titleElement.textContent = EmptyView.NAME; } else { - this.messageDiv.text(nls.localize('noFolderHelp', "You have not yet opened a folder.")); + this.messageElement.textContent = nls.localize('noFolderHelp', "You have not yet opened a folder."); if (this.button) { this.button.label = nls.localize('openFolder', "Open Folder"); } - this.titleDiv.text(this.title); + this.titleElement.textContent = this.title; } } diff --git a/src/vs/workbench/parts/search/browser/searchView.ts b/src/vs/workbench/parts/search/browser/searchView.ts index 89b830a0b79..301c4fc6f08 100644 --- a/src/vs/workbench/parts/search/browser/searchView.ts +++ b/src/vs/workbench/parts/search/browser/searchView.ts @@ -343,7 +343,7 @@ export class SearchView extends Viewlet implements IViewlet, IPanel { let searchHistory = history.search || this.viewletSettings['query.searchHistory'] || []; let replaceHistory = history.replace || this.viewletSettings['query.replaceHistory'] || []; - this.searchWidget = this._register(this.instantiationService.createInstance(SearchWidget, builder, { + this.searchWidget = this._register(this.instantiationService.createInstance(SearchWidget, builder.getHTMLElement(), { value: contentPattern, isRegex: isRegex, isCaseSensitive: isCaseSensitive, diff --git a/src/vs/workbench/parts/search/browser/searchWidget.ts b/src/vs/workbench/parts/search/browser/searchWidget.ts index 86bf8193435..5b96310a51d 100644 --- a/src/vs/workbench/parts/search/browser/searchWidget.ts +++ b/src/vs/workbench/parts/search/browser/searchWidget.ts @@ -20,7 +20,6 @@ import { ContextKeyExpr, IContextKeyService, IContextKey } from 'vs/platform/con import { IContextViewService } from 'vs/platform/contextview/browser/contextView'; import { KeyCode, KeyMod } from 'vs/base/common/keyCodes'; import { Event, Emitter } from 'vs/base/common/event'; -import { Builder } from 'vs/base/browser/builder'; import { IViewletService } from 'vs/workbench/services/viewlet/browser/viewlet'; import { isSearchViewFocused, appendKeyBindingLabel } from 'vs/workbench/parts/search/browser/searchActions'; import * as Constants from 'vs/workbench/parts/search/common/constants'; @@ -122,7 +121,7 @@ export class SearchWidget extends Widget { public readonly onBlur: Event = this._onBlur.event; constructor( - container: Builder, + container: HTMLElement, options: ISearchWidgetOptions, @IContextViewService private contextViewService: IContextViewService, @IThemeService private themeService: IThemeService, @@ -228,8 +227,10 @@ export class SearchWidget extends Widget { this.searchInput.focusOnRegex(); } - private render(container: Builder, options: ISearchWidgetOptions): void { - this.domNode = container.div({ 'class': 'search-widget' }).style({ position: 'relative' }).getHTMLElement(); + private render(container: HTMLElement, options: ISearchWidgetOptions): void { + this.domNode = dom.append(container, dom.$('.search-widget')); + this.domNode.style.position = 'relative'; + this.renderToggleReplaceButton(this.domNode); this.renderSearchInput(this.domNode, options); -- GitLab