| Index: third_party/WebKit/Source/devtools/front_end/ui/Toolbar.js
|
| diff --git a/third_party/WebKit/Source/devtools/front_end/ui/Toolbar.js b/third_party/WebKit/Source/devtools/front_end/ui/Toolbar.js
|
| index 0ee7493ddbfcb8c5b55e4322fef9f0192d5dfce7..ab5e667cebceabe471b907eb050346805dcef26c 100644
|
| --- a/third_party/WebKit/Source/devtools/front_end/ui/Toolbar.js
|
| +++ b/third_party/WebKit/Source/devtools/front_end/ui/Toolbar.js
|
| @@ -27,970 +27,877 @@
|
| * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
|
| * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
| */
|
| -
|
| /**
|
| - * @constructor
|
| - * @param {string} className
|
| - * @param {!Element=} parentElement
|
| + * @unrestricted
|
| */
|
| -WebInspector.Toolbar = function(className, parentElement)
|
| -{
|
| +WebInspector.Toolbar = class {
|
| + /**
|
| + * @param {string} className
|
| + * @param {!Element=} parentElement
|
| + */
|
| + constructor(className, parentElement) {
|
| /** @type {!Array.<!WebInspector.ToolbarItem>} */
|
| this._items = [];
|
| this._reverse = false;
|
| - this.element = parentElement ? parentElement.createChild("div") : createElement("div");
|
| + this.element = parentElement ? parentElement.createChild('div') : createElement('div');
|
| this.element.className = className;
|
| - this.element.classList.add("toolbar");
|
| - this._shadowRoot = WebInspector.createShadowRootWithCoreStyles(this.element, "ui/toolbar.css");
|
| - this._contentElement = this._shadowRoot.createChild("div", "toolbar-shadow");
|
| - this._insertionPoint = this._contentElement.createChild("content");
|
| -};
|
| + this.element.classList.add('toolbar');
|
| + this._shadowRoot = WebInspector.createShadowRootWithCoreStyles(this.element, 'ui/toolbar.css');
|
| + this._contentElement = this._shadowRoot.createChild('div', 'toolbar-shadow');
|
| + this._insertionPoint = this._contentElement.createChild('content');
|
| + }
|
| +
|
| + /**
|
| + * @param {!WebInspector.Action} action
|
| + * @param {!Array<!WebInspector.ToolbarButton>=} toggledOptions
|
| + * @param {!Array<!WebInspector.ToolbarButton>=} untoggledOptions
|
| + * @return {!WebInspector.ToolbarItem}
|
| + */
|
| + static createActionButton(action, toggledOptions, untoggledOptions) {
|
| + var button = new WebInspector.ToolbarToggle(action.title(), action.icon());
|
| + button.addEventListener('click', action.execute, action);
|
| + action.addEventListener(WebInspector.Action.Events.Enabled, enabledChanged);
|
| + action.addEventListener(WebInspector.Action.Events.Toggled, toggled);
|
| + /** @type {?WebInspector.LongClickController} */
|
| + var longClickController = null;
|
| + /** @type {?Array<!WebInspector.ToolbarButton>} */
|
| + var longClickButtons = null;
|
| + /** @type {?Element} */
|
| + var longClickGlyph = null;
|
| + toggled();
|
| + return button;
|
|
|
| -WebInspector.Toolbar.prototype = {
|
| /**
|
| - * @param {boolean=} reverse
|
| + * @param {!WebInspector.Event} event
|
| */
|
| - makeWrappable: function(reverse)
|
| - {
|
| - this._contentElement.classList.add("wrappable");
|
| - this._reverse = !!reverse;
|
| - if (reverse)
|
| - this._contentElement.classList.add("wrappable-reverse");
|
| - },
|
| -
|
| - makeVertical: function()
|
| - {
|
| - this._contentElement.classList.add("vertical");
|
| - },
|
| -
|
| - makeBlueOnHover: function()
|
| - {
|
| - this._contentElement.classList.add("toolbar-blue-on-hover");
|
| - },
|
| -
|
| - makeToggledGray: function()
|
| - {
|
| - this._contentElement.classList.add("toolbar-toggled-gray");
|
| - },
|
| -
|
| - renderAsLinks: function()
|
| - {
|
| - this._contentElement.classList.add("toolbar-render-as-links");
|
| - },
|
| + function enabledChanged(event) {
|
| + button.setEnabled(/** @type {boolean} */ (event.data));
|
| + }
|
|
|
| - /**
|
| - * @param {boolean} enabled
|
| - */
|
| - setEnabled: function(enabled)
|
| - {
|
| - for (var item of this._items)
|
| - item.setEnabled(enabled);
|
| - },
|
| + function toggled() {
|
| + button.setToggled(action.toggled());
|
| + if (action.title())
|
| + WebInspector.Tooltip.install(button.element, action.title(), action.id());
|
| + updateOptions();
|
| + }
|
|
|
| - /**
|
| - * @param {!WebInspector.ToolbarItem} item
|
| - */
|
| - appendToolbarItem: function(item)
|
| - {
|
| - this._items.push(item);
|
| - item._toolbar = this;
|
| - if (this._reverse)
|
| - this._contentElement.insertBefore(item.element, this._insertionPoint.nextSibling);
|
| - else
|
| - this._contentElement.insertBefore(item.element, this._insertionPoint);
|
| - this._hideSeparatorDupes();
|
| - },
|
| -
|
| - appendSeparator: function()
|
| - {
|
| - this.appendToolbarItem(new WebInspector.ToolbarSeparator());
|
| - },
|
| -
|
| - appendSpacer: function()
|
| - {
|
| - this.appendToolbarItem(new WebInspector.ToolbarSeparator(true));
|
| - },
|
| + function updateOptions() {
|
| + var buttons = action.toggled() ? (toggledOptions || null) : (untoggledOptions || null);
|
|
|
| - /**
|
| - * @param {string} text
|
| - */
|
| - appendText: function(text)
|
| - {
|
| - this.appendToolbarItem(new WebInspector.ToolbarText(text));
|
| - },
|
| -
|
| - removeToolbarItems: function()
|
| - {
|
| - for (var item of this._items)
|
| - delete item._toolbar;
|
| - this._items = [];
|
| - this._contentElement.removeChildren();
|
| - this._insertionPoint = this._contentElement.createChild("content");
|
| - },
|
| + if (buttons && buttons.length) {
|
| + if (!longClickController) {
|
| + longClickController = new WebInspector.LongClickController(button.element, showOptions);
|
| + longClickGlyph = button.element.createChild('div', 'long-click-glyph toolbar-button-theme');
|
| + longClickButtons = buttons;
|
| + }
|
| + } else {
|
| + if (longClickController) {
|
| + longClickController.dispose();
|
| + longClickController = null;
|
| + longClickGlyph.remove();
|
| + longClickGlyph = null;
|
| + longClickButtons = null;
|
| + }
|
| + }
|
| + }
|
|
|
| - /**
|
| - * @param {string} color
|
| - */
|
| - setColor: function(color)
|
| - {
|
| - var style = createElement("style");
|
| - style.textContent = ".toolbar-glyph { background-color: " + color + " !important }";
|
| - this._shadowRoot.appendChild(style);
|
| - },
|
| + function showOptions() {
|
| + var buttons = longClickButtons.slice();
|
| + var mainButtonClone = new WebInspector.ToolbarToggle(action.title(), action.icon());
|
| + mainButtonClone.addEventListener('click', clicked);
|
| +
|
| + /**
|
| + * @param {!WebInspector.Event} event
|
| + */
|
| + function clicked(event) {
|
| + button._clicked(/** @type {!Event} */ (event.data));
|
| + }
|
| +
|
| + mainButtonClone.setToggled(action.toggled());
|
| + buttons.push(mainButtonClone);
|
| +
|
| + var document = button.element.ownerDocument;
|
| + document.documentElement.addEventListener('mouseup', mouseUp, false);
|
| +
|
| + var optionsGlassPane = new WebInspector.GlassPane(document);
|
| + var optionsBar = new WebInspector.Toolbar('fill', optionsGlassPane.element);
|
| + optionsBar._contentElement.classList.add('floating');
|
| + const buttonHeight = 26;
|
| +
|
| + var hostButtonPosition = button.element.totalOffset();
|
| +
|
| + var topNotBottom = hostButtonPosition.top + buttonHeight * buttons.length < document.documentElement.offsetHeight;
|
| +
|
| + if (topNotBottom)
|
| + buttons = buttons.reverse();
|
| +
|
| + optionsBar.element.style.height = (buttonHeight * buttons.length) + 'px';
|
| + if (topNotBottom)
|
| + optionsBar.element.style.top = (hostButtonPosition.top + 1) + 'px';
|
| + else
|
| + optionsBar.element.style.top = (hostButtonPosition.top - (buttonHeight * (buttons.length - 1))) + 'px';
|
| + optionsBar.element.style.left = (hostButtonPosition.left + 1) + 'px';
|
| +
|
| + for (var i = 0; i < buttons.length; ++i) {
|
| + buttons[i].element.addEventListener('mousemove', mouseOver, false);
|
| + buttons[i].element.addEventListener('mouseout', mouseOut, false);
|
| + optionsBar.appendToolbarItem(buttons[i]);
|
| + }
|
| + var hostButtonIndex = topNotBottom ? 0 : buttons.length - 1;
|
| + buttons[hostButtonIndex].element.classList.add('emulate-active');
|
| +
|
| + function mouseOver(e) {
|
| + if (e.which !== 1)
|
| + return;
|
| + var buttonElement = e.target.enclosingNodeOrSelfWithClass('toolbar-item');
|
| + buttonElement.classList.add('emulate-active');
|
| + }
|
| +
|
| + function mouseOut(e) {
|
| + if (e.which !== 1)
|
| + return;
|
| + var buttonElement = e.target.enclosingNodeOrSelfWithClass('toolbar-item');
|
| + buttonElement.classList.remove('emulate-active');
|
| + }
|
| +
|
| + function mouseUp(e) {
|
| + if (e.which !== 1)
|
| + return;
|
| + optionsGlassPane.dispose();
|
| + document.documentElement.removeEventListener('mouseup', mouseUp, false);
|
|
|
| - /**
|
| - * @param {string} color
|
| - */
|
| - setToggledColor: function(color)
|
| - {
|
| - var style = createElement("style");
|
| - style.textContent = ".toolbar-button.toolbar-state-on .toolbar-glyph { background-color: " + color + " !important }";
|
| - this._shadowRoot.appendChild(style);
|
| - },
|
| -
|
| - _hideSeparatorDupes: function()
|
| - {
|
| - if (!this._items.length)
|
| - return;
|
| - // Don't hide first and last separators if they were added explicitly.
|
| - var previousIsSeparator = false;
|
| - var lastSeparator;
|
| - var nonSeparatorVisible = false;
|
| - for (var i = 0; i < this._items.length; ++i) {
|
| - if (this._items[i] instanceof WebInspector.ToolbarSeparator) {
|
| - this._items[i].setVisible(!previousIsSeparator);
|
| - previousIsSeparator = true;
|
| - lastSeparator = this._items[i];
|
| - continue;
|
| - }
|
| - if (this._items[i].visible()) {
|
| - previousIsSeparator = false;
|
| - lastSeparator = null;
|
| - nonSeparatorVisible = true;
|
| - }
|
| + for (var i = 0; i < buttons.length; ++i) {
|
| + if (buttons[i].element.classList.contains('emulate-active')) {
|
| + buttons[i].element.classList.remove('emulate-active');
|
| + buttons[i]._clicked(e);
|
| + break;
|
| + }
|
| }
|
| - if (lastSeparator && lastSeparator !== this._items.peekLast())
|
| - lastSeparator.setVisible(false);
|
| + }
|
| + }
|
| + }
|
|
|
| - this.element.classList.toggle("hidden", !!lastSeparator && lastSeparator.visible() && !nonSeparatorVisible);
|
| - },
|
| + /**
|
| + * @param {string} actionId
|
| + * @return {?WebInspector.ToolbarItem}
|
| + */
|
| + static createActionButtonForId(actionId) {
|
| + var action = WebInspector.actionRegistry.action(actionId);
|
| + return /** @type {?WebInspector.ToolbarItem} */ (action ? WebInspector.Toolbar.createActionButton(action) : null);
|
| + }
|
| +
|
| + /**
|
| + * @param {boolean=} reverse
|
| + */
|
| + makeWrappable(reverse) {
|
| + this._contentElement.classList.add('wrappable');
|
| + this._reverse = !!reverse;
|
| + if (reverse)
|
| + this._contentElement.classList.add('wrappable-reverse');
|
| + }
|
| +
|
| + makeVertical() {
|
| + this._contentElement.classList.add('vertical');
|
| + }
|
| +
|
| + makeBlueOnHover() {
|
| + this._contentElement.classList.add('toolbar-blue-on-hover');
|
| + }
|
| +
|
| + makeToggledGray() {
|
| + this._contentElement.classList.add('toolbar-toggled-gray');
|
| + }
|
| +
|
| + renderAsLinks() {
|
| + this._contentElement.classList.add('toolbar-render-as-links');
|
| + }
|
| +
|
| + /**
|
| + * @param {boolean} enabled
|
| + */
|
| + setEnabled(enabled) {
|
| + for (var item of this._items)
|
| + item.setEnabled(enabled);
|
| + }
|
| +
|
| + /**
|
| + * @param {!WebInspector.ToolbarItem} item
|
| + */
|
| + appendToolbarItem(item) {
|
| + this._items.push(item);
|
| + item._toolbar = this;
|
| + if (this._reverse)
|
| + this._contentElement.insertBefore(item.element, this._insertionPoint.nextSibling);
|
| + else
|
| + this._contentElement.insertBefore(item.element, this._insertionPoint);
|
| + this._hideSeparatorDupes();
|
| + }
|
| +
|
| + appendSeparator() {
|
| + this.appendToolbarItem(new WebInspector.ToolbarSeparator());
|
| + }
|
| +
|
| + appendSpacer() {
|
| + this.appendToolbarItem(new WebInspector.ToolbarSeparator(true));
|
| + }
|
| +
|
| + /**
|
| + * @param {string} text
|
| + */
|
| + appendText(text) {
|
| + this.appendToolbarItem(new WebInspector.ToolbarText(text));
|
| + }
|
| +
|
| + removeToolbarItems() {
|
| + for (var item of this._items)
|
| + delete item._toolbar;
|
| + this._items = [];
|
| + this._contentElement.removeChildren();
|
| + this._insertionPoint = this._contentElement.createChild('content');
|
| + }
|
| +
|
| + /**
|
| + * @param {string} color
|
| + */
|
| + setColor(color) {
|
| + var style = createElement('style');
|
| + style.textContent = '.toolbar-glyph { background-color: ' + color + ' !important }';
|
| + this._shadowRoot.appendChild(style);
|
| + }
|
| +
|
| + /**
|
| + * @param {string} color
|
| + */
|
| + setToggledColor(color) {
|
| + var style = createElement('style');
|
| + style.textContent =
|
| + '.toolbar-button.toolbar-state-on .toolbar-glyph { background-color: ' + color + ' !important }';
|
| + this._shadowRoot.appendChild(style);
|
| + }
|
| +
|
| + _hideSeparatorDupes() {
|
| + if (!this._items.length)
|
| + return;
|
| + // Don't hide first and last separators if they were added explicitly.
|
| + var previousIsSeparator = false;
|
| + var lastSeparator;
|
| + var nonSeparatorVisible = false;
|
| + for (var i = 0; i < this._items.length; ++i) {
|
| + if (this._items[i] instanceof WebInspector.ToolbarSeparator) {
|
| + this._items[i].setVisible(!previousIsSeparator);
|
| + previousIsSeparator = true;
|
| + lastSeparator = this._items[i];
|
| + continue;
|
| + }
|
| + if (this._items[i].visible()) {
|
| + previousIsSeparator = false;
|
| + lastSeparator = null;
|
| + nonSeparatorVisible = true;
|
| + }
|
| + }
|
| + if (lastSeparator && lastSeparator !== this._items.peekLast())
|
| + lastSeparator.setVisible(false);
|
| +
|
| + this.element.classList.toggle('hidden', !!lastSeparator && lastSeparator.visible() && !nonSeparatorVisible);
|
| + }
|
| +
|
| + /**
|
| + * @param {string} location
|
| + */
|
| + appendLocationItems(location) {
|
| + var extensions = self.runtime.extensions(WebInspector.ToolbarItem.Provider);
|
| + var promises = [];
|
| + for (var i = 0; i < extensions.length; ++i) {
|
| + if (extensions[i].descriptor()['location'] === location)
|
| + promises.push(resolveItem(extensions[i]));
|
| + }
|
| + Promise.all(promises).then(appendItemsInOrder.bind(this));
|
| +
|
| + /**
|
| + * @param {!Runtime.Extension} extension
|
| + * @return {!Promise.<?WebInspector.ToolbarItem>}
|
| + */
|
| + function resolveItem(extension) {
|
| + var descriptor = extension.descriptor();
|
| + if (descriptor['separator'])
|
| + return Promise.resolve(/** @type {?WebInspector.ToolbarItem} */ (new WebInspector.ToolbarSeparator()));
|
| + if (descriptor['actionId'])
|
| + return Promise.resolve(WebInspector.Toolbar.createActionButtonForId(descriptor['actionId']));
|
| + return extension.instance().then(fetchItemFromProvider);
|
| +
|
| + /**
|
| + * @param {!Object} provider
|
| + */
|
| + function fetchItemFromProvider(provider) {
|
| + return /** @type {!WebInspector.ToolbarItem.Provider} */ (provider).item();
|
| + }
|
| + }
|
|
|
| /**
|
| - * @param {string} location
|
| + * @param {!Array.<?WebInspector.ToolbarItem>} items
|
| + * @this {WebInspector.Toolbar}
|
| */
|
| - appendLocationItems: function(location)
|
| - {
|
| - var extensions = self.runtime.extensions(WebInspector.ToolbarItem.Provider);
|
| - var promises = [];
|
| - for (var i = 0; i < extensions.length; ++i) {
|
| - if (extensions[i].descriptor()["location"] === location)
|
| - promises.push(resolveItem(extensions[i]));
|
| - }
|
| - Promise.all(promises).then(appendItemsInOrder.bind(this));
|
| -
|
| - /**
|
| - * @param {!Runtime.Extension} extension
|
| - * @return {!Promise.<?WebInspector.ToolbarItem>}
|
| - */
|
| - function resolveItem(extension)
|
| - {
|
| - var descriptor = extension.descriptor();
|
| - if (descriptor["separator"])
|
| - return Promise.resolve(/** @type {?WebInspector.ToolbarItem} */(new WebInspector.ToolbarSeparator()));
|
| - if (descriptor["actionId"])
|
| - return Promise.resolve(WebInspector.Toolbar.createActionButtonForId(descriptor["actionId"]));
|
| - return extension.instance().then(fetchItemFromProvider);
|
| -
|
| - /**
|
| - * @param {!Object} provider
|
| - */
|
| - function fetchItemFromProvider(provider)
|
| - {
|
| - return /** @type {!WebInspector.ToolbarItem.Provider} */ (provider).item();
|
| - }
|
| - }
|
| -
|
| - /**
|
| - * @param {!Array.<?WebInspector.ToolbarItem>} items
|
| - * @this {WebInspector.Toolbar}
|
| - */
|
| - function appendItemsInOrder(items)
|
| - {
|
| - for (var i = 0; i < items.length; ++i) {
|
| - var item = items[i];
|
| - if (item)
|
| - this.appendToolbarItem(item);
|
| - }
|
| - }
|
| + function appendItemsInOrder(items) {
|
| + for (var i = 0; i < items.length; ++i) {
|
| + var item = items[i];
|
| + if (item)
|
| + this.appendToolbarItem(item);
|
| + }
|
| }
|
| + }
|
| };
|
|
|
| /**
|
| - * @constructor
|
| - * @extends {WebInspector.Object}
|
| - * @param {!Element} element
|
| + * @unrestricted
|
| */
|
| -WebInspector.ToolbarItem = function(element)
|
| -{
|
| +WebInspector.ToolbarItem = class extends WebInspector.Object {
|
| + /**
|
| + * @param {!Element} element
|
| + */
|
| + constructor(element) {
|
| + super();
|
| this.element = element;
|
| - this.element.classList.add("toolbar-item");
|
| + this.element.classList.add('toolbar-item');
|
| this._visible = true;
|
| this._enabled = true;
|
| - this.element.addEventListener("mouseenter", this._mouseEnter.bind(this), false);
|
| - this.element.addEventListener("mouseleave", this._mouseLeave.bind(this), false);
|
| -};
|
| -
|
| -WebInspector.ToolbarItem.prototype = {
|
| - /**
|
| - * @param {string} title
|
| - */
|
| - setTitle: function(title)
|
| - {
|
| - if (this._title === title)
|
| - return;
|
| - this._title = title;
|
| - WebInspector.Tooltip.install(this.element, title);
|
| - },
|
| -
|
| - _mouseEnter: function()
|
| - {
|
| - this.element.classList.add("hover");
|
| - },
|
| -
|
| - _mouseLeave: function()
|
| - {
|
| - this.element.classList.remove("hover");
|
| - },
|
| -
|
| - /**
|
| - * @param {boolean} value
|
| - */
|
| - setEnabled: function(value)
|
| - {
|
| - if (this._enabled === value)
|
| - return;
|
| - this._enabled = value;
|
| - this._applyEnabledState();
|
| - },
|
| -
|
| - _applyEnabledState: function()
|
| - {
|
| - this.element.disabled = !this._enabled;
|
| - },
|
| -
|
| - /**
|
| - * @return {boolean} x
|
| - */
|
| - visible: function()
|
| - {
|
| - return this._visible;
|
| - },
|
| -
|
| - /**
|
| - * @param {boolean} x
|
| - */
|
| - setVisible: function(x)
|
| - {
|
| - if (this._visible === x)
|
| - return;
|
| - this.element.classList.toggle("hidden", !x);
|
| - this._visible = x;
|
| - if (this._toolbar && !(this instanceof WebInspector.ToolbarSeparator))
|
| - this._toolbar._hideSeparatorDupes();
|
| - },
|
| -
|
| - __proto__: WebInspector.Object.prototype
|
| + this.element.addEventListener('mouseenter', this._mouseEnter.bind(this), false);
|
| + this.element.addEventListener('mouseleave', this._mouseLeave.bind(this), false);
|
| + }
|
| +
|
| + /**
|
| + * @param {string} title
|
| + */
|
| + setTitle(title) {
|
| + if (this._title === title)
|
| + return;
|
| + this._title = title;
|
| + WebInspector.Tooltip.install(this.element, title);
|
| + }
|
| +
|
| + _mouseEnter() {
|
| + this.element.classList.add('hover');
|
| + }
|
| +
|
| + _mouseLeave() {
|
| + this.element.classList.remove('hover');
|
| + }
|
| +
|
| + /**
|
| + * @param {boolean} value
|
| + */
|
| + setEnabled(value) {
|
| + if (this._enabled === value)
|
| + return;
|
| + this._enabled = value;
|
| + this._applyEnabledState();
|
| + }
|
| +
|
| + _applyEnabledState() {
|
| + this.element.disabled = !this._enabled;
|
| + }
|
| +
|
| + /**
|
| + * @return {boolean} x
|
| + */
|
| + visible() {
|
| + return this._visible;
|
| + }
|
| +
|
| + /**
|
| + * @param {boolean} x
|
| + */
|
| + setVisible(x) {
|
| + if (this._visible === x)
|
| + return;
|
| + this.element.classList.toggle('hidden', !x);
|
| + this._visible = x;
|
| + if (this._toolbar && !(this instanceof WebInspector.ToolbarSeparator))
|
| + this._toolbar._hideSeparatorDupes();
|
| + }
|
| };
|
|
|
| /**
|
| - * @constructor
|
| - * @extends {WebInspector.ToolbarItem}
|
| - * @param {string=} text
|
| + * @unrestricted
|
| */
|
| -WebInspector.ToolbarText = function(text)
|
| -{
|
| - WebInspector.ToolbarItem.call(this, createElementWithClass("div", "toolbar-text"));
|
| - this.element.classList.add("toolbar-text");
|
| - this.setText(text || "");
|
| -};
|
| -
|
| -WebInspector.ToolbarText.prototype = {
|
| - /**
|
| - * @param {string} text
|
| - */
|
| - setText: function(text)
|
| - {
|
| - this.element.textContent = text;
|
| - },
|
| -
|
| - __proto__: WebInspector.ToolbarItem.prototype
|
| +WebInspector.ToolbarText = class extends WebInspector.ToolbarItem {
|
| + /**
|
| + * @param {string=} text
|
| + */
|
| + constructor(text) {
|
| + super(createElementWithClass('div', 'toolbar-text'));
|
| + this.element.classList.add('toolbar-text');
|
| + this.setText(text || '');
|
| + }
|
| +
|
| + /**
|
| + * @param {string} text
|
| + */
|
| + setText(text) {
|
| + this.element.textContent = text;
|
| + }
|
| };
|
|
|
| /**
|
| - * @constructor
|
| - * @extends {WebInspector.ToolbarItem}
|
| - * @param {string} title
|
| - * @param {string=} glyph
|
| - * @param {string=} text
|
| + * @unrestricted
|
| */
|
| -WebInspector.ToolbarButton = function(title, glyph, text)
|
| -{
|
| - WebInspector.ToolbarItem.call(this, createElementWithClass("button", "toolbar-button"));
|
| - this.element.addEventListener("click", this._clicked.bind(this), false);
|
| - this.element.addEventListener("mousedown", this._mouseDown.bind(this), false);
|
| - this.element.addEventListener("mouseup", this._mouseUp.bind(this), false);
|
| -
|
| - this._glyphElement = this.element.createChild("div", "toolbar-glyph hidden");
|
| - this._textElement = this.element.createChild("div", "toolbar-text hidden");
|
| +WebInspector.ToolbarButton = class extends WebInspector.ToolbarItem {
|
| + /**
|
| + * @param {string} title
|
| + * @param {string=} glyph
|
| + * @param {string=} text
|
| + */
|
| + constructor(title, glyph, text) {
|
| + super(createElementWithClass('button', 'toolbar-button'));
|
| + this.element.addEventListener('click', this._clicked.bind(this), false);
|
| + this.element.addEventListener('mousedown', this._mouseDown.bind(this), false);
|
| + this.element.addEventListener('mouseup', this._mouseUp.bind(this), false);
|
| +
|
| + this._glyphElement = this.element.createChild('div', 'toolbar-glyph hidden');
|
| + this._textElement = this.element.createChild('div', 'toolbar-text hidden');
|
|
|
| this.setTitle(title);
|
| if (glyph)
|
| - this.setGlyph(glyph);
|
| - this.setText(text || "");
|
| - this._state = "";
|
| - this._title = "";
|
| -};
|
| -
|
| -WebInspector.ToolbarButton.prototype = {
|
| - /**
|
| - * @param {string} text
|
| - */
|
| - setText: function(text)
|
| - {
|
| - if (this._text === text)
|
| - return;
|
| - this._textElement.textContent = text;
|
| - this._textElement.classList.toggle("hidden", !text);
|
| - this._text = text;
|
| - },
|
| -
|
| - /**
|
| - * @param {string} glyph
|
| - */
|
| - setGlyph: function(glyph)
|
| - {
|
| - if (this._glyph === glyph)
|
| - return;
|
| - if (this._glyph)
|
| - this._glyphElement.classList.remove(this._glyph);
|
| - if (glyph)
|
| - this._glyphElement.classList.add(glyph);
|
| - this._glyphElement.classList.toggle("hidden", !glyph);
|
| - this.element.classList.toggle("toolbar-has-glyph", !!glyph);
|
| - this._glyph = glyph;
|
| - },
|
| -
|
| - /**
|
| - * @param {string} iconURL
|
| - */
|
| - setBackgroundImage: function(iconURL)
|
| - {
|
| - this.element.style.backgroundImage = "url(" + iconURL + ")";
|
| - },
|
| -
|
| - /**
|
| - * @return {string}
|
| - */
|
| - state: function()
|
| - {
|
| - return this._state;
|
| - },
|
| -
|
| - /**
|
| - * @param {string} state
|
| - */
|
| - setState: function(state)
|
| - {
|
| - if (this._state === state)
|
| - return;
|
| - this.element.classList.remove("toolbar-state-" + this._state);
|
| - this.element.classList.add("toolbar-state-" + state);
|
| - this._state = state;
|
| - },
|
| -
|
| - /**
|
| - * @param {number=} width
|
| - */
|
| - turnIntoSelect: function(width)
|
| - {
|
| - this.element.classList.add("toolbar-has-dropdown");
|
| - this.element.createChild("div", "toolbar-dropdown-arrow");
|
| - if (width)
|
| - this.element.style.width = width + "px";
|
| - },
|
| -
|
| - /**
|
| - * @param {!Event} event
|
| - */
|
| - _clicked: function(event)
|
| - {
|
| - var defaultPrevented = this.dispatchEventToListeners("click", event);
|
| - event.consume(defaultPrevented);
|
| - },
|
| -
|
| - /**
|
| - * @param {!Event} event
|
| - */
|
| - _mouseDown: function(event)
|
| - {
|
| - this.dispatchEventToListeners("mousedown", event);
|
| - },
|
| -
|
| - /**
|
| - * @param {!Event} event
|
| - */
|
| - _mouseUp: function(event)
|
| - {
|
| - this.dispatchEventToListeners("mouseup", event);
|
| - },
|
| -
|
| - __proto__: WebInspector.ToolbarItem.prototype
|
| + this.setGlyph(glyph);
|
| + this.setText(text || '');
|
| + this._state = '';
|
| + this._title = '';
|
| + }
|
| +
|
| + /**
|
| + * @param {string} text
|
| + */
|
| + setText(text) {
|
| + if (this._text === text)
|
| + return;
|
| + this._textElement.textContent = text;
|
| + this._textElement.classList.toggle('hidden', !text);
|
| + this._text = text;
|
| + }
|
| +
|
| + /**
|
| + * @param {string} glyph
|
| + */
|
| + setGlyph(glyph) {
|
| + if (this._glyph === glyph)
|
| + return;
|
| + if (this._glyph)
|
| + this._glyphElement.classList.remove(this._glyph);
|
| + if (glyph)
|
| + this._glyphElement.classList.add(glyph);
|
| + this._glyphElement.classList.toggle('hidden', !glyph);
|
| + this.element.classList.toggle('toolbar-has-glyph', !!glyph);
|
| + this._glyph = glyph;
|
| + }
|
| +
|
| + /**
|
| + * @param {string} iconURL
|
| + */
|
| + setBackgroundImage(iconURL) {
|
| + this.element.style.backgroundImage = 'url(' + iconURL + ')';
|
| + }
|
| +
|
| + /**
|
| + * @return {string}
|
| + */
|
| + state() {
|
| + return this._state;
|
| + }
|
| +
|
| + /**
|
| + * @param {string} state
|
| + */
|
| + setState(state) {
|
| + if (this._state === state)
|
| + return;
|
| + this.element.classList.remove('toolbar-state-' + this._state);
|
| + this.element.classList.add('toolbar-state-' + state);
|
| + this._state = state;
|
| + }
|
| +
|
| + /**
|
| + * @param {number=} width
|
| + */
|
| + turnIntoSelect(width) {
|
| + this.element.classList.add('toolbar-has-dropdown');
|
| + this.element.createChild('div', 'toolbar-dropdown-arrow');
|
| + if (width)
|
| + this.element.style.width = width + 'px';
|
| + }
|
| +
|
| + /**
|
| + * @param {!Event} event
|
| + */
|
| + _clicked(event) {
|
| + var defaultPrevented = this.dispatchEventToListeners('click', event);
|
| + event.consume(defaultPrevented);
|
| + }
|
| +
|
| + /**
|
| + * @param {!Event} event
|
| + */
|
| + _mouseDown(event) {
|
| + this.dispatchEventToListeners('mousedown', event);
|
| + }
|
| +
|
| + /**
|
| + * @param {!Event} event
|
| + */
|
| + _mouseUp(event) {
|
| + this.dispatchEventToListeners('mouseup', event);
|
| + }
|
| };
|
|
|
| /**
|
| - * @constructor
|
| - * @extends {WebInspector.ToolbarItem}
|
| - * @param {string=} placeholder
|
| - * @param {number=} growFactor
|
| + * @unrestricted
|
| */
|
| -WebInspector.ToolbarInput = function(placeholder, growFactor)
|
| -{
|
| - WebInspector.ToolbarItem.call(this, createElementWithClass("input", "toolbar-item"));
|
| - this.element.addEventListener("input", this._onChangeCallback.bind(this), false);
|
| +WebInspector.ToolbarInput = class extends WebInspector.ToolbarItem {
|
| + /**
|
| + * @param {string=} placeholder
|
| + * @param {number=} growFactor
|
| + */
|
| + constructor(placeholder, growFactor) {
|
| + super(createElementWithClass('input', 'toolbar-item'));
|
| + this.element.addEventListener('input', this._onChangeCallback.bind(this), false);
|
| if (growFactor)
|
| - this.element.style.flexGrow = growFactor;
|
| + this.element.style.flexGrow = growFactor;
|
| if (placeholder)
|
| - this.element.setAttribute("placeholder", placeholder);
|
| - this._value = "";
|
| + this.element.setAttribute('placeholder', placeholder);
|
| + this._value = '';
|
| + }
|
| +
|
| + /**
|
| + * @param {string} value
|
| + */
|
| + setValue(value) {
|
| + this._value = value;
|
| + this.element.value = value;
|
| + }
|
| +
|
| + /**
|
| + * @return {string}
|
| + */
|
| + value() {
|
| + return this.element.value;
|
| + }
|
| +
|
| + _onChangeCallback() {
|
| + this.dispatchEventToListeners(WebInspector.ToolbarInput.Event.TextChanged, this.element.value);
|
| + }
|
| };
|
|
|
| WebInspector.ToolbarInput.Event = {
|
| - TextChanged: "TextChanged"
|
| -};
|
| -
|
| -WebInspector.ToolbarInput.prototype = {
|
| - /**
|
| - * @param {string} value
|
| - */
|
| - setValue: function(value)
|
| - {
|
| - this._value = value;
|
| - this.element.value = value;
|
| - },
|
| -
|
| - /**
|
| - * @return {string}
|
| - */
|
| - value: function()
|
| - {
|
| - return this.element.value;
|
| - },
|
| -
|
| - _onChangeCallback: function()
|
| - {
|
| - this.dispatchEventToListeners(WebInspector.ToolbarInput.Event.TextChanged, this.element.value);
|
| - },
|
| -
|
| - __proto__: WebInspector.ToolbarItem.prototype
|
| + TextChanged: 'TextChanged'
|
| };
|
|
|
| /**
|
| - * @constructor
|
| - * @extends {WebInspector.ToolbarButton}
|
| - * @param {string} title
|
| - * @param {string=} glyph
|
| - * @param {string=} text
|
| + * @unrestricted
|
| */
|
| -WebInspector.ToolbarToggle = function(title, glyph, text)
|
| -{
|
| - WebInspector.ToolbarButton.call(this, title, glyph, text);
|
| +WebInspector.ToolbarToggle = class extends WebInspector.ToolbarButton {
|
| + /**
|
| + * @param {string} title
|
| + * @param {string=} glyph
|
| + * @param {string=} text
|
| + */
|
| + constructor(title, glyph, text) {
|
| + super(title, glyph, text);
|
| this._toggled = false;
|
| - this.setState("off");
|
| + this.setState('off');
|
| + }
|
| +
|
| + /**
|
| + * @return {boolean}
|
| + */
|
| + toggled() {
|
| + return this._toggled;
|
| + }
|
| +
|
| + /**
|
| + * @param {boolean} toggled
|
| + */
|
| + setToggled(toggled) {
|
| + if (this._toggled === toggled)
|
| + return;
|
| + this._toggled = toggled;
|
| + this.setState(toggled ? 'on' : 'off');
|
| + }
|
| };
|
|
|
| -WebInspector.ToolbarToggle.prototype = {
|
| - /**
|
| - * @return {boolean}
|
| - */
|
| - toggled: function()
|
| - {
|
| - return this._toggled;
|
| - },
|
| -
|
| - /**
|
| - * @param {boolean} toggled
|
| - */
|
| - setToggled: function(toggled)
|
| - {
|
| - if (this._toggled === toggled)
|
| - return;
|
| - this._toggled = toggled;
|
| - this.setState(toggled ? "on" : "off");
|
| - },
|
| -
|
| - __proto__: WebInspector.ToolbarButton.prototype
|
| -};
|
|
|
| /**
|
| - * @param {!WebInspector.Action} action
|
| - * @param {!Array<!WebInspector.ToolbarButton>=} toggledOptions
|
| - * @param {!Array<!WebInspector.ToolbarButton>=} untoggledOptions
|
| - * @return {!WebInspector.ToolbarItem}
|
| + * @unrestricted
|
| */
|
| -WebInspector.Toolbar.createActionButton = function(action, toggledOptions, untoggledOptions)
|
| -{
|
| - var button = new WebInspector.ToolbarToggle(action.title(), action.icon());
|
| - button.addEventListener("click", action.execute, action);
|
| - action.addEventListener(WebInspector.Action.Events.Enabled, enabledChanged);
|
| - action.addEventListener(WebInspector.Action.Events.Toggled, toggled);
|
| - /** @type {?WebInspector.LongClickController} */
|
| - var longClickController = null;
|
| - /** @type {?Array<!WebInspector.ToolbarButton>} */
|
| - var longClickButtons = null;
|
| - /** @type {?Element} */
|
| - var longClickGlyph = null;
|
| - toggled();
|
| - return button;
|
| -
|
| - /**
|
| - * @param {!WebInspector.Event} event
|
| - */
|
| - function enabledChanged(event)
|
| - {
|
| - button.setEnabled(/** @type {boolean} */ (event.data));
|
| - }
|
| -
|
| - function toggled()
|
| - {
|
| - button.setToggled(action.toggled());
|
| - if (action.title())
|
| - WebInspector.Tooltip.install(button.element, action.title(), action.id());
|
| - updateOptions();
|
| - }
|
| -
|
| - function updateOptions()
|
| - {
|
| - var buttons = action.toggled() ? (toggledOptions || null) : (untoggledOptions || null);
|
| -
|
| - if (buttons && buttons.length) {
|
| - if (!longClickController) {
|
| - longClickController = new WebInspector.LongClickController(button.element, showOptions);
|
| - longClickGlyph = button.element.createChild("div", "long-click-glyph toolbar-button-theme");
|
| - longClickButtons = buttons;
|
| - }
|
| - } else {
|
| - if (longClickController) {
|
| - longClickController.dispose();
|
| - longClickController = null;
|
| - longClickGlyph.remove();
|
| - longClickGlyph = null;
|
| - longClickButtons = null;
|
| - }
|
| - }
|
| - }
|
| -
|
| - function showOptions()
|
| - {
|
| - var buttons = longClickButtons.slice();
|
| - var mainButtonClone = new WebInspector.ToolbarToggle(action.title(), action.icon());
|
| - mainButtonClone.addEventListener("click", clicked);
|
| -
|
| - /**
|
| - * @param {!WebInspector.Event} event
|
| - */
|
| - function clicked(event)
|
| - {
|
| - button._clicked(/** @type {!Event} */ (event.data));
|
| - }
|
| -
|
| - mainButtonClone.setToggled(action.toggled());
|
| - buttons.push(mainButtonClone);
|
| -
|
| - var document = button.element.ownerDocument;
|
| - document.documentElement.addEventListener("mouseup", mouseUp, false);
|
| -
|
| - var optionsGlassPane = new WebInspector.GlassPane(document);
|
| - var optionsBar = new WebInspector.Toolbar("fill", optionsGlassPane.element);
|
| - optionsBar._contentElement.classList.add("floating");
|
| - const buttonHeight = 26;
|
| -
|
| - var hostButtonPosition = button.element.totalOffset();
|
| -
|
| - var topNotBottom = hostButtonPosition.top + buttonHeight * buttons.length < document.documentElement.offsetHeight;
|
| -
|
| - if (topNotBottom)
|
| - buttons = buttons.reverse();
|
| -
|
| - optionsBar.element.style.height = (buttonHeight * buttons.length) + "px";
|
| - if (topNotBottom)
|
| - optionsBar.element.style.top = (hostButtonPosition.top + 1) + "px";
|
| - else
|
| - optionsBar.element.style.top = (hostButtonPosition.top - (buttonHeight * (buttons.length - 1))) + "px";
|
| - optionsBar.element.style.left = (hostButtonPosition.left + 1) + "px";
|
| -
|
| - for (var i = 0; i < buttons.length; ++i) {
|
| - buttons[i].element.addEventListener("mousemove", mouseOver, false);
|
| - buttons[i].element.addEventListener("mouseout", mouseOut, false);
|
| - optionsBar.appendToolbarItem(buttons[i]);
|
| - }
|
| - var hostButtonIndex = topNotBottom ? 0 : buttons.length - 1;
|
| - buttons[hostButtonIndex].element.classList.add("emulate-active");
|
| -
|
| - function mouseOver(e)
|
| - {
|
| - if (e.which !== 1)
|
| - return;
|
| - var buttonElement = e.target.enclosingNodeOrSelfWithClass("toolbar-item");
|
| - buttonElement.classList.add("emulate-active");
|
| - }
|
| -
|
| - function mouseOut(e)
|
| - {
|
| - if (e.which !== 1)
|
| - return;
|
| - var buttonElement = e.target.enclosingNodeOrSelfWithClass("toolbar-item");
|
| - buttonElement.classList.remove("emulate-active");
|
| - }
|
| -
|
| - function mouseUp(e)
|
| - {
|
| - if (e.which !== 1)
|
| - return;
|
| - optionsGlassPane.dispose();
|
| - document.documentElement.removeEventListener("mouseup", mouseUp, false);
|
| -
|
| - for (var i = 0; i < buttons.length; ++i) {
|
| - if (buttons[i].element.classList.contains("emulate-active")) {
|
| - buttons[i].element.classList.remove("emulate-active");
|
| - buttons[i]._clicked(e);
|
| - break;
|
| - }
|
| - }
|
| - }
|
| - }
|
| -};
|
| -
|
| -/**
|
| - * @param {string} actionId
|
| - * @return {?WebInspector.ToolbarItem}
|
| - */
|
| -WebInspector.Toolbar.createActionButtonForId = function(actionId)
|
| -{
|
| - var action = WebInspector.actionRegistry.action(actionId);
|
| - return /** @type {?WebInspector.ToolbarItem} */(action ? WebInspector.Toolbar.createActionButton(action) : null);
|
| -};
|
| -
|
| -/**
|
| - * @constructor
|
| - * @extends {WebInspector.ToolbarButton}
|
| - * @param {function(!WebInspector.ContextMenu)} contextMenuHandler
|
| - * @param {boolean=} useSoftMenu
|
| - */
|
| -WebInspector.ToolbarMenuButton = function(contextMenuHandler, useSoftMenu)
|
| -{
|
| - WebInspector.ToolbarButton.call(this, "", "menu-toolbar-item");
|
| +WebInspector.ToolbarMenuButton = class extends WebInspector.ToolbarButton {
|
| + /**
|
| + * @param {function(!WebInspector.ContextMenu)} contextMenuHandler
|
| + * @param {boolean=} useSoftMenu
|
| + */
|
| + constructor(contextMenuHandler, useSoftMenu) {
|
| + super('', 'menu-toolbar-item');
|
| this._contextMenuHandler = contextMenuHandler;
|
| this._useSoftMenu = !!useSoftMenu;
|
| -};
|
| -
|
| -WebInspector.ToolbarMenuButton.prototype = {
|
| - /**
|
| - * @override
|
| - * @param {!Event} event
|
| - */
|
| - _mouseDown: function(event)
|
| - {
|
| - if (event.buttons !== 1) {
|
| - WebInspector.ToolbarButton.prototype._mouseDown.call(this, event);
|
| - return;
|
| - }
|
| -
|
| - if (!this._triggerTimeout)
|
| - this._triggerTimeout = setTimeout(this._trigger.bind(this, event), 200);
|
| - },
|
| -
|
| - /**
|
| - * @param {!Event} event
|
| - */
|
| - _trigger: function(event)
|
| - {
|
| - delete this._triggerTimeout;
|
| - var contextMenu = new WebInspector.ContextMenu(event,
|
| - this._useSoftMenu,
|
| - this.element.totalOffsetLeft(),
|
| - this.element.totalOffsetTop() + this.element.offsetHeight);
|
| - this._contextMenuHandler(contextMenu);
|
| - contextMenu.show();
|
| - },
|
| + }
|
| +
|
| + /**
|
| + * @override
|
| + * @param {!Event} event
|
| + */
|
| + _mouseDown(event) {
|
| + if (event.buttons !== 1) {
|
| + super._mouseDown(event);
|
| + return;
|
| + }
|
|
|
| - /**
|
| - * @override
|
| - * @param {!Event} event
|
| - */
|
| - _clicked: function(event)
|
| - {
|
| - if (!this._triggerTimeout)
|
| - return;
|
| - clearTimeout(this._triggerTimeout);
|
| - this._trigger(event);
|
| - },
|
| -
|
| - __proto__: WebInspector.ToolbarButton.prototype
|
| + if (!this._triggerTimeout)
|
| + this._triggerTimeout = setTimeout(this._trigger.bind(this, event), 200);
|
| + }
|
| +
|
| + /**
|
| + * @param {!Event} event
|
| + */
|
| + _trigger(event) {
|
| + delete this._triggerTimeout;
|
| + var contextMenu = new WebInspector.ContextMenu(
|
| + event, this._useSoftMenu, this.element.totalOffsetLeft(),
|
| + this.element.totalOffsetTop() + this.element.offsetHeight);
|
| + this._contextMenuHandler(contextMenu);
|
| + contextMenu.show();
|
| + }
|
| +
|
| + /**
|
| + * @override
|
| + * @param {!Event} event
|
| + */
|
| + _clicked(event) {
|
| + if (!this._triggerTimeout)
|
| + return;
|
| + clearTimeout(this._triggerTimeout);
|
| + this._trigger(event);
|
| + }
|
| };
|
|
|
| /**
|
| - * @constructor
|
| - * @extends {WebInspector.ToolbarToggle}
|
| - * @param {!WebInspector.Setting} setting
|
| - * @param {string} glyph
|
| - * @param {string} title
|
| - * @param {string=} toggledTitle
|
| + * @unrestricted
|
| */
|
| -WebInspector.ToolbarSettingToggle = function(setting, glyph, title, toggledTitle)
|
| -{
|
| - WebInspector.ToolbarToggle.call(this, title, glyph);
|
| +WebInspector.ToolbarSettingToggle = class extends WebInspector.ToolbarToggle {
|
| + /**
|
| + * @param {!WebInspector.Setting} setting
|
| + * @param {string} glyph
|
| + * @param {string} title
|
| + * @param {string=} toggledTitle
|
| + */
|
| + constructor(setting, glyph, title, toggledTitle) {
|
| + super(title, glyph);
|
| this._defaultTitle = title;
|
| this._toggledTitle = toggledTitle || title;
|
| this._setting = setting;
|
| this._settingChanged();
|
| this._setting.addChangeListener(this._settingChanged, this);
|
| -};
|
| -
|
| -WebInspector.ToolbarSettingToggle.prototype = {
|
| - _settingChanged: function()
|
| - {
|
| - var toggled = this._setting.get();
|
| - this.setToggled(toggled);
|
| - this.setTitle(toggled ? this._toggledTitle : this._defaultTitle);
|
| - },
|
| -
|
| - /**
|
| - * @override
|
| - * @param {!Event} event
|
| - */
|
| - _clicked: function(event)
|
| - {
|
| - this._setting.set(!this.toggled());
|
| - WebInspector.ToolbarToggle.prototype._clicked.call(this, event);
|
| - },
|
| -
|
| - __proto__: WebInspector.ToolbarToggle.prototype
|
| + }
|
| +
|
| + _settingChanged() {
|
| + var toggled = this._setting.get();
|
| + this.setToggled(toggled);
|
| + this.setTitle(toggled ? this._toggledTitle : this._defaultTitle);
|
| + }
|
| +
|
| + /**
|
| + * @override
|
| + * @param {!Event} event
|
| + */
|
| + _clicked(event) {
|
| + this._setting.set(!this.toggled());
|
| + super._clicked(event);
|
| + }
|
| };
|
|
|
| /**
|
| - * @constructor
|
| - * @extends {WebInspector.ToolbarItem}
|
| - * @param {boolean=} spacer
|
| + * @unrestricted
|
| */
|
| -WebInspector.ToolbarSeparator = function(spacer)
|
| -{
|
| - WebInspector.ToolbarItem.call(this, createElementWithClass("div", spacer ? "toolbar-spacer" : "toolbar-divider"));
|
| -};
|
| -
|
| -WebInspector.ToolbarSeparator.prototype = {
|
| - __proto__: WebInspector.ToolbarItem.prototype
|
| +WebInspector.ToolbarSeparator = class extends WebInspector.ToolbarItem {
|
| + /**
|
| + * @param {boolean=} spacer
|
| + */
|
| + constructor(spacer) {
|
| + super(createElementWithClass('div', spacer ? 'toolbar-spacer' : 'toolbar-divider'));
|
| + }
|
| };
|
|
|
| /**
|
| * @interface
|
| */
|
| -WebInspector.ToolbarItem.Provider = function()
|
| -{
|
| -};
|
| +WebInspector.ToolbarItem.Provider = function() {};
|
|
|
| WebInspector.ToolbarItem.Provider.prototype = {
|
| - /**
|
| - * @return {?WebInspector.ToolbarItem}
|
| - */
|
| - item: function() {}
|
| + /**
|
| + * @return {?WebInspector.ToolbarItem}
|
| + */
|
| + item: function() {}
|
| };
|
|
|
| /**
|
| * @interface
|
| */
|
| -WebInspector.ToolbarItem.ItemsProvider = function()
|
| -{
|
| -};
|
| +WebInspector.ToolbarItem.ItemsProvider = function() {};
|
|
|
| WebInspector.ToolbarItem.ItemsProvider.prototype = {
|
| - /**
|
| - * @return {!Array<!WebInspector.ToolbarItem>}
|
| - */
|
| - toolbarItems: function() {}
|
| + /**
|
| + * @return {!Array<!WebInspector.ToolbarItem>}
|
| + */
|
| + toolbarItems: function() {}
|
| };
|
|
|
| /**
|
| - * @constructor
|
| - * @extends {WebInspector.ToolbarItem}
|
| - * @param {?function(!Event)} changeHandler
|
| - * @param {string=} className
|
| + * @unrestricted
|
| */
|
| -WebInspector.ToolbarComboBox = function(changeHandler, className)
|
| -{
|
| - WebInspector.ToolbarItem.call(this, createElementWithClass("span", "toolbar-select-container"));
|
| -
|
| - this._selectElement = this.element.createChild("select", "toolbar-item");
|
| - this.element.createChild("div", "toolbar-dropdown-arrow");
|
| +WebInspector.ToolbarComboBox = class extends WebInspector.ToolbarItem {
|
| + /**
|
| + * @param {?function(!Event)} changeHandler
|
| + * @param {string=} className
|
| + */
|
| + constructor(changeHandler, className) {
|
| + super(createElementWithClass('span', 'toolbar-select-container'));
|
| +
|
| + this._selectElement = this.element.createChild('select', 'toolbar-item');
|
| + this.element.createChild('div', 'toolbar-dropdown-arrow');
|
| if (changeHandler)
|
| - this._selectElement.addEventListener("change", changeHandler, false);
|
| + this._selectElement.addEventListener('change', changeHandler, false);
|
| if (className)
|
| - this._selectElement.classList.add(className);
|
| -};
|
| -
|
| -WebInspector.ToolbarComboBox.prototype = {
|
| - /**
|
| - * @return {!HTMLSelectElement}
|
| - */
|
| - selectElement: function()
|
| - {
|
| - return /** @type {!HTMLSelectElement} */ (this._selectElement);
|
| - },
|
| -
|
| - /**
|
| - * @return {number}
|
| - */
|
| - size: function()
|
| - {
|
| - return this._selectElement.childElementCount;
|
| - },
|
| -
|
| - /**
|
| - * @return {!Array.<!Element>}
|
| - */
|
| - options: function()
|
| - {
|
| - return Array.prototype.slice.call(this._selectElement.children, 0);
|
| - },
|
| -
|
| - /**
|
| - * @param {!Element} option
|
| - */
|
| - addOption: function(option)
|
| - {
|
| - this._selectElement.appendChild(option);
|
| - },
|
| -
|
| - /**
|
| - * @param {string} label
|
| - * @param {string=} title
|
| - * @param {string=} value
|
| - * @return {!Element}
|
| - */
|
| - createOption: function(label, title, value)
|
| - {
|
| - var option = this._selectElement.createChild("option");
|
| - option.text = label;
|
| - if (title)
|
| - option.title = title;
|
| - if (typeof value !== "undefined")
|
| - option.value = value;
|
| - return option;
|
| - },
|
| -
|
| - /**
|
| - * @override
|
| - */
|
| - _applyEnabledState: function()
|
| - {
|
| - this._selectElement.disabled = !this._enabled;
|
| - },
|
| -
|
| - /**
|
| - * @param {!Element} option
|
| - */
|
| - removeOption: function(option)
|
| - {
|
| - this._selectElement.removeChild(option);
|
| - },
|
| -
|
| - removeOptions: function()
|
| - {
|
| - this._selectElement.removeChildren();
|
| - },
|
| -
|
| - /**
|
| - * @return {?Element}
|
| - */
|
| - selectedOption: function()
|
| - {
|
| - if (this._selectElement.selectedIndex >= 0)
|
| - return this._selectElement[this._selectElement.selectedIndex];
|
| - return null;
|
| - },
|
| -
|
| - /**
|
| - * @param {!Element} option
|
| - */
|
| - select: function(option)
|
| - {
|
| - this._selectElement.selectedIndex = Array.prototype.indexOf.call(/** @type {?} */ (this._selectElement), option);
|
| - },
|
| -
|
| - /**
|
| - * @param {number} index
|
| - */
|
| - setSelectedIndex: function(index)
|
| - {
|
| - this._selectElement.selectedIndex = index;
|
| - },
|
| -
|
| - /**
|
| - * @return {number}
|
| - */
|
| - selectedIndex: function()
|
| - {
|
| - return this._selectElement.selectedIndex;
|
| - },
|
| -
|
| - /**
|
| - * @param {number} width
|
| - */
|
| - setMaxWidth: function(width)
|
| - {
|
| - this._selectElement.style.maxWidth = width + "px";
|
| - },
|
| -
|
| - __proto__: WebInspector.ToolbarItem.prototype
|
| + this._selectElement.classList.add(className);
|
| + }
|
| +
|
| + /**
|
| + * @return {!HTMLSelectElement}
|
| + */
|
| + selectElement() {
|
| + return /** @type {!HTMLSelectElement} */ (this._selectElement);
|
| + }
|
| +
|
| + /**
|
| + * @return {number}
|
| + */
|
| + size() {
|
| + return this._selectElement.childElementCount;
|
| + }
|
| +
|
| + /**
|
| + * @return {!Array.<!Element>}
|
| + */
|
| + options() {
|
| + return Array.prototype.slice.call(this._selectElement.children, 0);
|
| + }
|
| +
|
| + /**
|
| + * @param {!Element} option
|
| + */
|
| + addOption(option) {
|
| + this._selectElement.appendChild(option);
|
| + }
|
| +
|
| + /**
|
| + * @param {string} label
|
| + * @param {string=} title
|
| + * @param {string=} value
|
| + * @return {!Element}
|
| + */
|
| + createOption(label, title, value) {
|
| + var option = this._selectElement.createChild('option');
|
| + option.text = label;
|
| + if (title)
|
| + option.title = title;
|
| + if (typeof value !== 'undefined')
|
| + option.value = value;
|
| + return option;
|
| + }
|
| +
|
| + /**
|
| + * @override
|
| + */
|
| + _applyEnabledState() {
|
| + this._selectElement.disabled = !this._enabled;
|
| + }
|
| +
|
| + /**
|
| + * @param {!Element} option
|
| + */
|
| + removeOption(option) {
|
| + this._selectElement.removeChild(option);
|
| + }
|
| +
|
| + removeOptions() {
|
| + this._selectElement.removeChildren();
|
| + }
|
| +
|
| + /**
|
| + * @return {?Element}
|
| + */
|
| + selectedOption() {
|
| + if (this._selectElement.selectedIndex >= 0)
|
| + return this._selectElement[this._selectElement.selectedIndex];
|
| + return null;
|
| + }
|
| +
|
| + /**
|
| + * @param {!Element} option
|
| + */
|
| + select(option) {
|
| + this._selectElement.selectedIndex = Array.prototype.indexOf.call(/** @type {?} */ (this._selectElement), option);
|
| + }
|
| +
|
| + /**
|
| + * @param {number} index
|
| + */
|
| + setSelectedIndex(index) {
|
| + this._selectElement.selectedIndex = index;
|
| + }
|
| +
|
| + /**
|
| + * @return {number}
|
| + */
|
| + selectedIndex() {
|
| + return this._selectElement.selectedIndex;
|
| + }
|
| +
|
| + /**
|
| + * @param {number} width
|
| + */
|
| + setMaxWidth(width) {
|
| + this._selectElement.style.maxWidth = width + 'px';
|
| + }
|
| };
|
|
|
| /**
|
| - * @constructor
|
| - * @extends {WebInspector.ToolbarItem}
|
| - * @param {string} text
|
| - * @param {string=} title
|
| - * @param {!WebInspector.Setting=} setting
|
| - * @param {function()=} listener
|
| + * @unrestricted
|
| */
|
| -WebInspector.ToolbarCheckbox = function(text, title, setting, listener)
|
| -{
|
| - WebInspector.ToolbarItem.call(this, createCheckboxLabel(text));
|
| - this.element.classList.add("checkbox");
|
| +WebInspector.ToolbarCheckbox = class extends WebInspector.ToolbarItem {
|
| + /**
|
| + * @param {string} text
|
| + * @param {string=} title
|
| + * @param {!WebInspector.Setting=} setting
|
| + * @param {function()=} listener
|
| + */
|
| + constructor(text, title, setting, listener) {
|
| + super(createCheckboxLabel(text));
|
| + this.element.classList.add('checkbox');
|
| this.inputElement = this.element.checkboxElement;
|
| if (title)
|
| - this.element.title = title;
|
| + this.element.title = title;
|
| if (setting)
|
| - WebInspector.SettingsUI.bindCheckbox(this.inputElement, setting);
|
| + WebInspector.SettingsUI.bindCheckbox(this.inputElement, setting);
|
| if (listener)
|
| - this.inputElement.addEventListener("click", listener, false);
|
| -};
|
| -
|
| -WebInspector.ToolbarCheckbox.prototype = {
|
| - /**
|
| - * @return {boolean}
|
| - */
|
| - checked: function()
|
| - {
|
| - return this.inputElement.checked;
|
| - },
|
| -
|
| - /**
|
| - * @param {boolean} value
|
| - */
|
| - setChecked: function(value)
|
| - {
|
| - this.inputElement.checked = value;
|
| - },
|
| -
|
| - __proto__: WebInspector.ToolbarItem.prototype
|
| + this.inputElement.addEventListener('click', listener, false);
|
| + }
|
| +
|
| + /**
|
| + * @return {boolean}
|
| + */
|
| + checked() {
|
| + return this.inputElement.checked;
|
| + }
|
| +
|
| + /**
|
| + * @param {boolean} value
|
| + */
|
| + setChecked(value) {
|
| + this.inputElement.checked = value;
|
| + }
|
| };
|
| -
|
|
|