WebInspector.Toolbar = function()
{
this.element = document.getElementById("toolbar");
WebInspector.installDragHandle(this.element, this._toolbarDragStart.bind(this), this._toolbarDrag.bind(this), this._toolbarDragEnd.bind(this), "default");
this._dropdownButton = document.getElementById("toolbar-dropdown-arrow");
this._dropdownButton.addEventListener("click", this._toggleDropdown.bind(this), false);
this._panelsMenuButton = document.getElementById("toolbar-panels-menu");
if (this._isToolbarCustomizable())
this._panelsMenuButton.addEventListener("click", this._togglePanelsMenu.bind(this), false);
else
this._panelsMenuButton.addStyleClass("hidden");
document.getElementById("close-button-left").addEventListener("click", this._onClose, true);
document.getElementById("close-button-right").addEventListener("click", this._onClose, true);
this._isWindowMoveSupported = WebInspector.isMac() && !Preferences.showDockToRight;
this._panelDescriptors = [];
}
WebInspector.Toolbar.prototype = {
resize: function()
{
this._updateDropdownButtonAndHideDropdown();
},
addPanel: function(panelDescriptor)
{
this._panelDescriptors.push(panelDescriptor);
panelDescriptor._toolbarElement = this._createPanelToolbarItem(panelDescriptor);
if (this._isPanelVisible(panelDescriptor.name()))
panelDescriptor._toolbarElement.removeStyleClass("hidden");
else
panelDescriptor._toolbarElement.addStyleClass("hidden");
this.element.appendChild(panelDescriptor._toolbarElement);
this.resize();
},
_isPanelVisibleByDefault: function(name)
{
var visible = {
"elements": true,
"console": true,
"network": true,
"scripts": true,
"timeline": true,
"profiles": true,
"cpu-profiler": true,
"heap-profiler": true,
"audits": true,
"resources": true,
};
return !!visible[name];
},
_isToolbarCustomizable: function()
{
return false;
},
_isPanelVisible: function(name)
{
if (!this._isToolbarCustomizable())
return true;
var visiblePanels = WebInspector.settings.visiblePanels.get();
return visiblePanels.hasOwnProperty(name) ? visiblePanels[name] : this._isPanelVisibleByDefault(name);
},
_setPanelVisible: function(name, visible)
{
var visiblePanels = WebInspector.settings.visiblePanels.get();
visiblePanels[name] = visible;
WebInspector.settings.visiblePanels.set(visiblePanels);
},
_hidePanel: function(panelDescriptor)
{
if (!this._isPanelVisible(panelDescriptor.name()))
return;
var count = 0;
for (var i = 0; i < this._panelDescriptors.length; ++i) {
if (this._isPanelVisible(this._panelDescriptors[i].name()))
++count;
}
if (count === 1)
return;
this._setPanelVisible(panelDescriptor.name(), false);
panelDescriptor._toolbarElement.addStyleClass("hidden");
if (WebInspector.inspectorView.currentPanel().name === panelDescriptor.name()) {
for (var i = 0; i < this._panelDescriptors.length; ++i) {
if (this._isPanelVisible(this._panelDescriptors[i].name())) {
WebInspector.showPanel(this._panelDescriptors[i].name());
break;
}
}
}
this.resize();
},
_showPanel: function(panelDescriptor)
{
if (this._isPanelVisible(panelDescriptor.name()))
return;
panelDescriptor._toolbarElement.removeStyleClass("hidden");
this._setPanelVisible(panelDescriptor.name(), true);
this.resize();
},
_createPanelToolbarItem: function(panelDescriptor)
{
var toolbarItem = document.createElement("button");
toolbarItem.className = "toolbar-item toggleable";
toolbarItem.panelDescriptor = panelDescriptor;
toolbarItem.addStyleClass(panelDescriptor.name());
function onToolbarItemClicked()
{
this._updateDropdownButtonAndHideDropdown();
WebInspector.inspectorView.setCurrentPanel(panelDescriptor.panel());
}
toolbarItem.addEventListener("click", onToolbarItemClicked.bind(this), false);
function panelSelected()
{
if (WebInspector.inspectorView.currentPanel() && panelDescriptor.name() === WebInspector.inspectorView.currentPanel().name)
toolbarItem.addStyleClass("toggled-on");
else
toolbarItem.removeStyleClass("toggled-on");
}
WebInspector.inspectorView.addEventListener(WebInspector.InspectorView.Events.PanelSelected, panelSelected);
var iconElement = toolbarItem.createChild("div", "toolbar-icon");
toolbarItem.createChild("div", "toolbar-label").textContent = panelDescriptor.title();
if (panelDescriptor.iconURL()) {
iconElement.addStyleClass("custom-toolbar-icon");
iconElement.style.backgroundImage = "url(" + panelDescriptor.iconURL() + ")";
}
panelSelected();
return toolbarItem;
},
_isDockedToBottom: function()
{
return !!WebInspector.dockController && WebInspector.dockController.dockSide() == WebInspector.DockController.State.DockedToBottom;
},
_isUndocked: function()
{
return !!WebInspector.dockController && WebInspector.dockController.dockSide() == WebInspector.DockController.State.Undocked;
},
_toolbarDragStart: function(event)
{
if (this._isUndocked() && !this._isWindowMoveSupported)
return false;
var target = event.target;
if (target.hasStyleClass("toolbar-item") && target.hasStyleClass("toggleable"))
return false;
if (target !== this.element && !target.hasStyleClass("toolbar-item"))
return false;
this._lastScreenX = event.screenX;
this._lastScreenY = event.screenY;
this._lastHeightDuringDrag = window.innerHeight;
this._startDistanceToRight = window.innerWidth - event.clientX;
this._startDinstanceToBottom = window.innerHeight - event.clientY;
return true;
},
_toolbarDragEnd: function(event)
{
this._toolbarDrag(event);
delete this._lastScreenX;
delete this._lastScreenY;
delete this._lastHeightDuringDrag;
delete this._startDistanceToRight;
delete this._startDinstanceToBottom;
},
_toolbarDrag: function(event)
{
event.preventDefault();
if (this._isUndocked())
return this._toolbarDragMoveWindow(event);
if (Preferences.showDockToRight)
return this._toolbarDragChangeDocking(event);
return this._toolbarDragChangeHeight(event);
},
_toolbarDragMoveWindow: function(event)
{
var x = event.screenX - this._lastScreenX;
var y = event.screenY - this._lastScreenY;
this._lastScreenX = event.screenX;
this._lastScreenY = event.screenY;
InspectorFrontendHost.moveWindowBy(x, y);
},
_toolbarDragChangeDocking: function(event)
{
if (this._isDockedToBottom()) {
var distanceToRight = window.innerWidth - event.clientX;
if (distanceToRight < this._startDistanceToRight * 2 / 3) {
InspectorFrontendHost.requestSetDockSide(WebInspector.DockController.State.DockedToRight);
return true;
}
} else {
var distanceToBottom = window.innerHeight - event.clientY;
if (distanceToBottom < this._startDinstanceToBottom * 2 / 3) {
InspectorFrontendHost.requestSetDockSide(WebInspector.DockController.State.DockedToBottom);
return true;
}
}
},
_toolbarDragChangeHeight: function(event)
{
var height = this._lastHeightDuringDrag - (event.screenY - this._lastScreenY);
this._lastHeightDuringDrag = height;
this._lastScreenY = event.screenY;
InspectorFrontendHost.setAttachedWindowHeight(height);
},
_onClose: function()
{
WebInspector.close();
},
_setDropdownVisible: function(visible)
{
if (!this._dropdown) {
if (!visible)
return;
this._dropdown = new WebInspector.ToolbarDropdown(this);
}
if (visible)
this._dropdown.show();
else
this._dropdown.hide();
},
_toggleDropdown: function()
{
this._setDropdownVisible(!this._dropdown || !this._dropdown.visible);
},
_togglePanelsMenu: function(event)
{
function togglePanel(panelDescriptor)
{
if (this._isPanelVisible(panelDescriptor.name()))
this._hidePanel(panelDescriptor);
else
this._showPanel(panelDescriptor);
}
var contextMenu = new WebInspector.ContextMenu(event);
var numDefaultPanels = 4;
for (var i = 0; i < this._panelDescriptors.length; ++i) {
if (i === numDefaultPanels)
contextMenu.appendSeparator();
var descr = this._panelDescriptors[i];
contextMenu.appendCheckboxItem(descr.title(), togglePanel.bind(this, descr), this._isPanelVisible(descr.name()));
}
contextMenu.showSoftMenu();
},
_updateDropdownButtonAndHideDropdown: function()
{
WebInspector.invokeOnceAfterBatchUpdate(this, this._innerUpdateDropdownButtonAndHideDropdown);
},
_innerUpdateDropdownButtonAndHideDropdown: function()
{
this._setDropdownVisible(false);
if (this.element.scrollHeight > this.element.offsetHeight)
this._dropdownButton.removeStyleClass("hidden");
else
this._dropdownButton.addStyleClass("hidden");
}
}
WebInspector.ToolbarDropdown = function(toolbar)
{
this._toolbar = toolbar;
this._arrow = document.getElementById("toolbar-dropdown-arrow");
this.element = document.createElement("div");
this.element.id = "toolbar-dropdown";
this.element.className = "toolbar-small";
this._contentElement = this.element.createChild("div", "scrollable-content");
this._contentElement.tabIndex = 0;
this._contentElement.addEventListener("keydown", this._onKeyDown.bind(this), true);
}
WebInspector.ToolbarDropdown.prototype = {
show: function()
{
if (this.visible)
return;
var style = this.element.style;
this._populate();
var top = this._arrow.totalOffsetTop() + this._arrow.clientHeight;
this._arrow.addStyleClass("dropdown-visible");
this.element.style.top = top + "px";
this.element.style.right = window.innerWidth - this._arrow.totalOffsetLeft() - this._arrow.clientWidth + "px";
this._contentElement.style.maxHeight = window.innerHeight - top - 20 + "px";
this._toolbar.element.appendChild(this.element);
},
hide: function()
{
if (!this.visible)
return;
this._arrow.removeStyleClass("dropdown-visible");
this.element.parentNode.removeChild(this.element);
this._contentElement.removeChildren();
},
get visible()
{
return !!this.element.parentNode;
},
_populate: function()
{
var toolbarItems = this._toolbar.element.querySelectorAll(".toolbar-item.toggleable");
for (var i = 0; i < toolbarItems.length; ++i) {
if (toolbarItems[i].offsetTop > 1)
this._contentElement.appendChild(this._toolbar._createPanelToolbarItem(toolbarItems[i].panelDescriptor));
}
},
_onKeyDown: function(event)
{
if (event.keyCode !== WebInspector.KeyboardShortcut.Keys.Esc.code)
return;
event.consume();
this.hide();
}
}
WebInspector.toolbar = null;