Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(852)

Unified Diff: third_party/WebKit/Source/devtools/front_end/ui/Toolbar.js

Issue 2466123002: DevTools: reformat front-end code to match chromium style. (Closed)
Patch Set: all done Created 4 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
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;
+ }
};
-

Powered by Google App Engine
This is Rietveld 408576698