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; |
+ } |
}; |
- |