{
WebInspector.View.call(this);
this.markAsRoot();
- this.element.classList.add("fill", "vbox");
+ this.element.classList.add("fill", "inspector-view");
this.element.setAttribute("spellcheck", false);
+ window.addEventListener("resize", this._onWindowResize.bind(this), true);
+ WebInspector.zoomManager.addEventListener(WebInspector.ZoomManager.Events.ZoomChanged, this._onZoomChanged, this);
+
+ // We can use split view either for docking or screencast, but not together.
+ var settingName = WebInspector.queryParamsObject["can_dock"] ? "InspectorView.splitView" : "InspectorView.screencastSplitView";
+ this._splitView = new WebInspector.SplitView(false, true, settingName, 300, 300);
+ this._updateConstraints();
+ WebInspector.dockController.addEventListener(WebInspector.DockController.Events.DockSideChanged, this._updateSplitView.bind(this));
+
+ this._splitView.element.id = "inspector-split-view";
+ this._splitView.show(this.element);
+
+ // Main part of main split is overlay view.
+ this._overlayView = new WebInspector.InspectorView.OverlayView(this._splitView);
+ this._overlayView.show(this._splitView.mainElement());
+
+ // Sidebar of main split is artificial element used for positioning.
+ this._devtoolsView = new WebInspector.ViewWithResizeCallback(this._onDevToolsViewResized.bind(this));
+ this._devtoolsView.show(this._splitView.sidebarElement());
+ WebInspector.Dialog.setModalHostView(this._devtoolsView);
+
+ // DevTools sidebar is a vertical split of panels tabbed pane and a drawer.
+ this._drawerSplitView = new WebInspector.SplitView(false, true, "Inspector.drawerSplitView", 200, 200);
+ this._drawerSplitView.setSidebarElementConstraints(Preferences.minDrawerHeight, Preferences.minDrawerHeight);
+ this._drawerSplitView.setMainElementConstraints(25, 25);
+ this._drawerSplitView.show(this._devtoolsView.element);
+
this._tabbedPane = new WebInspector.TabbedPane();
- this._tabbedPane.setRetainTabsOrder(true);
- this._tabbedPane.show(this.element);
+ this._tabbedPane.setRetainTabOrder(true, WebInspector.moduleManager.orderComparator(WebInspector.Panel, "name", "order"));
+ this._tabbedPane.show(this._drawerSplitView.mainElement());
+ this._drawer = new WebInspector.Drawer(this._drawerSplitView);
- var toolbarElement = document.createElement("div");
- toolbarElement.className = "toolbar toolbar-background";
+ // Patch tabbed pane header with toolbar actions.
+ this._toolbarElement = document.createElement("div");
+ this._toolbarElement.className = "toolbar toolbar-background";
var headerElement = this._tabbedPane.headerElement();
- headerElement.parentElement.insertBefore(toolbarElement, headerElement);
+ headerElement.parentElement.insertBefore(this._toolbarElement, headerElement);
- this._leftToolbarElement = toolbarElement.createChild("div", "toolbar-controls-left");
- toolbarElement.appendChild(headerElement);
- this._rightToolbarElement = toolbarElement.createChild("div", "toolbar-controls-right");
+ this._leftToolbarElement = this._toolbarElement.createChild("div", "toolbar-controls-left");
+ this._toolbarElement.appendChild(headerElement);
+ this._rightToolbarElement = this._toolbarElement.createChild("div", "toolbar-controls-right");
this._errorWarningCountElement = this._rightToolbarElement.createChild("div", "hidden");
this._errorWarningCountElement.id = "error-warning-count";
- this._footerElementContainer = this.element.createChild("div", "inspector-footer status-bar hidden");
+ this._closeButtonToolbarItem = document.createElementWithClass("div", "toolbar-close-button-item");
+ var closeButtonElement = this._closeButtonToolbarItem.createChild("div", "close-button");
+ closeButtonElement.addEventListener("click", WebInspector.close.bind(WebInspector), true);
+ this._rightToolbarElement.appendChild(this._closeButtonToolbarItem);
- this._drawer = new WebInspector.Drawer(this);
this.appendToRightToolbar(this._drawer.toggleButtonElement());
this._history = [];
this._openBracketIdentifiers = ["U+005B", "U+00DB"].keySet();
this._closeBracketIdentifiers = ["U+005D", "U+00DD"].keySet();
this._lastActivePanelSetting = WebInspector.settings.createSetting("lastActivePanel", "elements");
+
+ this._updateSplitView();
+
+ this._loadPanelDesciptors();
}
+WebInspector.InspectorView.Constraints = {
+ OverlayWidth: 50,
+ OverlayHeight: 50,
+ DevToolsWidth: 180,
+ DevToolsHeight: 50
+};
+
WebInspector.InspectorView.prototype = {
+ _loadPanelDesciptors: function()
+ {
+ WebInspector.startBatchUpdate();
+ WebInspector.moduleManager.extensions(WebInspector.Panel).forEach(processPanelExtensions.bind(this));
+ /**
+ * @param {!WebInspector.ModuleManager.Extension} extension
+ * @this {!WebInspector.InspectorView}
+ */
+ function processPanelExtensions(extension)
+ {
+ this.addPanel(new WebInspector.ModuleManagerExtensionPanelDescriptor(extension));
+ }
+ WebInspector.endBatchUpdate();
+ },
+
/**
- * @param {Element} element
+ * @param {!Element} element
*/
appendToLeftToolbar: function(element)
{
},
/**
- * @param {Element} element
+ * @param {!Element} element
*/
appendToRightToolbar: function(element)
{
- this._rightToolbarElement.appendChild(element);
+ this._rightToolbarElement.insertBefore(element, this._closeButtonToolbarItem);
},
/**
- * @return {WebInspector.Drawer}
+ * @return {!Element}
*/
- drawer: function()
+ devtoolsElement: function()
{
- return this._drawer;
+ return this._devtoolsView.element;
},
/**
- * @param {WebInspector.PanelDescriptor} panelDescriptor
+ * @param {!WebInspector.PanelDescriptor} panelDescriptor
*/
addPanel: function(panelDescriptor)
{
},
/**
- * @return {WebInspector.Panel}
+ * @return {!WebInspector.Panel}
*/
currentPanel: function()
{
return this._currentPanel;
},
- /**
- * @return {WebInspector.Searchable}
- */
- getSearchProvider: function()
- {
- return this._currentPanel && this._currentPanel.canSearch() ? this._currentPanel : null;
- },
-
showInitialPanel: function()
{
this._tabbedPane.addEventListener(WebInspector.TabbedPane.EventTypes.TabSelected, this._tabSelected, this);
this._tabSelected();
+ this._drawer.showOnLoadIfNecessary();
},
_tabSelected: function()
{
- // FIXME: remove search controller.
- WebInspector.searchController.cancelSearch();
-
var panelName = this._tabbedPane.selectedTabId;
var panel = this._panelDescriptors[this._tabbedPane.selectedTabId].panel();
this._tabbedPane.changeTabView(panelName, panel);
- this._drawer.panelSelected(panel);
this._currentPanel = panel;
this._lastActivePanelSetting.set(panel.name);
this._pushToHistory(panel.name);
},
/**
- * @param {WebInspector.Panel} x
+ * @param {!WebInspector.Panel} x
*/
setCurrentPanel: function(x)
{
*/
closeViewInDrawer: function(id)
{
- return this._drawer.closeView(id);
+ this._drawer.closeView(id);
},
/**
* @param {string} id
* @param {string} title
- * @param {WebInspector.View} view
+ * @param {!WebInspector.View} view
*/
showCloseableViewInDrawer: function(id, title, view)
{
this._drawer.showCloseableView(id, title, view);
},
+ showDrawer: function()
+ {
+ this._drawer.showDrawer();
+ },
+
/**
- * @param {string} id
- * @param {string} title
- * @param {WebInspector.ViewFactory} factory
+ * @return {boolean}
*/
- registerViewInDrawer: function(id, title, factory)
+ drawerVisible: function()
{
- this._drawer.registerView(id, title, factory);
+ return this._drawer.isShowing();
},
/**
* @param {string} id
+ * @param {boolean=} immediate
*/
- unregisterViewInDrawer: function(id)
+ showViewInDrawer: function(id, immediate)
{
- this._drawer.unregisterView(id);
+ this._drawer.showView(id, immediate);
},
/**
- * @param {string} id
+ * @return {string}
*/
- showViewInDrawer: function(id)
+ selectedViewInDrawer: function()
{
- this._drawer.showView(id);
+ return this._drawer.selectedViewId();
},
closeDrawer: function()
{
- this._drawer.hide();
+ this._drawer.closeDrawer();
},
/**
- * @return {Element}
+ * @return {!Element}
*/
defaultFocusedElement: function()
{
if (!WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(event))
return;
+ var keyboardEvent = /** @type {!KeyboardEvent} */ (event);
// Ctrl/Cmd + 1-9 should show corresponding panel.
var panelShortcutEnabled = WebInspector.settings.shortcutPanelSwitch.get();
- if (panelShortcutEnabled && !event.shiftKey && !event.altKey && event.keyCode > 0x30 && event.keyCode < 0x3A) {
- var panelName = this._tabbedPane.allTabs()[event.keyCode - 0x31];
- if (panelName) {
- this.showPanel(panelName);
- event.consume(true);
+ if (panelShortcutEnabled && !event.shiftKey && !event.altKey) {
+ var panelIndex = -1;
+ if (event.keyCode > 0x30 && event.keyCode < 0x3A)
+ panelIndex = event.keyCode - 0x31;
+ else if (event.keyCode > 0x60 && event.keyCode < 0x6A && keyboardEvent.location === KeyboardEvent.DOM_KEY_LOCATION_NUMPAD)
+ panelIndex = event.keyCode - 0x61;
+ if (panelIndex !== -1) {
+ var panelName = this._tabbedPane.allTabs()[panelIndex];
+ if (panelName) {
+ this.showPanel(panelName);
+ event.consume(true);
+ }
+ return;
}
- return;
}
// BUG85312: On French AZERTY keyboards, AltGr-]/[ combinations (synonymous to Ctrl-Alt-]/[ on Windows) are used to enter ]/[,
this._historyIterator = this._history.length - 1;
},
+ _onDevToolsViewResized: function()
+ {
+ WebInspector.Dialog.modalHostRepositioned();
+ },
+
+ _onWindowResize: function()
+ {
+ this.doResize();
+ },
+
+ _updateSplitView: function()
+ {
+ var dockSide = WebInspector.dockController.dockSide();
+ if (dockSide !== WebInspector.DockController.State.Undocked) {
+ var vertical = WebInspector.dockController.isVertical();
+ this._splitView.setVertical(vertical);
+ if (vertical) {
+ // Docked to side.
+ if (dockSide === WebInspector.DockController.State.DockedToRight)
+ this._overlayView.setMargins(false, true, false, false);
+ else
+ this._overlayView.setMargins(false, false, false, true);
+ this._splitView.setSecondIsSidebar(dockSide === WebInspector.DockController.State.DockedToRight);
+ this._splitView.uninstallResizer(this._tabbedPane.headerElement());
+ this._splitView.installResizer(this._splitView.resizerElement());
+ } else {
+ // Docked to bottom.
+ this._overlayView.setMargins(false, false, false, false);
+ this._splitView.setSecondIsSidebar(true);
+ this._splitView.installResizer(this._splitView.resizerElement());
+ this._splitView.installResizer(this._tabbedPane.headerElement());
+ }
+ this._splitView.showBoth();
+ } else {
+ this._overlayView.setMargins(false, false, false, false);
+ this._splitView.hideMain();
+ this._splitView.uninstallResizer(this._tabbedPane.headerElement());
+ this._splitView.uninstallResizer(this._splitView.resizerElement());
+ }
+ },
+
+ _onZoomChanged: function(event)
+ {
+ this._updateConstraints();
+ var data = /** @type {{from: number, to: number}} */ (event.data);
+ this._splitView.setSidebarSize(this._splitView.sidebarSize() * data.from / data.to, true);
+ this._overlayView.updateMargins();
+ },
+
+ _updateConstraints: function()
+ {
+ var zoomFactor = WebInspector.zoomManager.zoomFactor();
+ this._splitView.setSidebarElementConstraints(WebInspector.InspectorView.Constraints.DevToolsWidth / zoomFactor,
+ WebInspector.InspectorView.Constraints.DevToolsHeight / zoomFactor);
+ this._splitView.setMainElementConstraints(WebInspector.InspectorView.Constraints.OverlayWidth / zoomFactor,
+ WebInspector.InspectorView.Constraints.OverlayHeight / zoomFactor);
+ },
+
+ /**
+ * @param {!WebInspector.View} view
+ * @param {boolean} vertical
+ */
+ showScreencastView: function(view, vertical)
+ {
+ if (view.parentView() !== this._overlayView)
+ view.show(this._overlayView.element);
+ this._splitView.setVertical(vertical);
+ this._splitView.installResizer(this._splitView.resizerElement());
+ this._splitView.showBoth();
+ },
+
+ hideScreencastView: function()
+ {
+ this._splitView.hideMain();
+ },
+
/**
- * @param {?Element} element
+ * @param {number} errors
+ * @param {number} warnings
*/
- setFooterElement: function(element)
+ setErrorAndWarningCounts: function(errors, warnings)
{
- if (this._currentPanel && this._currentPanel.canSetFooterElement()) {
- this._currentPanel.setFooterElement(element);
+ if (!errors && !warnings) {
+ this._errorWarningCountElement.classList.add("hidden");
+ this._tabbedPane.headerResized();
return;
}
- if (element) {
- this._footerElementContainer.removeStyleClass("hidden");
- this._footerElementContainer.appendChild(element);
- } else {
- this._footerElementContainer.addStyleClass("hidden");
- this._footerElementContainer.removeChildren();
+
+ this._errorWarningCountElement.classList.remove("hidden");
+ this._errorWarningCountElement.removeChildren();
+
+ if (errors) {
+ var errorImageElement = this._errorWarningCountElement.createChild("div", "error-icon-small");
+ var errorElement = this._errorWarningCountElement.createChild("span");
+ errorElement.id = "error-count";
+ errorElement.textContent = errors;
}
- this.doResize();
+
+ if (warnings) {
+ var warningsImageElement = this._errorWarningCountElement.createChild("div", "warning-icon-small");
+ var warningsElement = this._errorWarningCountElement.createChild("span");
+ warningsElement.id = "warning-count";
+ warningsElement.textContent = warnings;
+ }
+
+ if (errors) {
+ if (warnings) {
+ if (errors == 1) {
+ if (warnings == 1)
+ this._errorWarningCountElement.title = WebInspector.UIString("%d error, %d warning", errors, warnings);
+ else
+ this._errorWarningCountElement.title = WebInspector.UIString("%d error, %d warnings", errors, warnings);
+ } else if (warnings == 1)
+ this._errorWarningCountElement.title = WebInspector.UIString("%d errors, %d warning", errors, warnings);
+ else
+ this._errorWarningCountElement.title = WebInspector.UIString("%d errors, %d warnings", errors, warnings);
+ } else if (errors == 1)
+ this._errorWarningCountElement.title = WebInspector.UIString("%d error", errors);
+ else
+ this._errorWarningCountElement.title = WebInspector.UIString("%d errors", errors);
+ } else if (warnings == 1)
+ this._errorWarningCountElement.title = WebInspector.UIString("%d warning", warnings);
+ else if (warnings)
+ this._errorWarningCountElement.title = WebInspector.UIString("%d warnings", warnings);
+ else
+ this._errorWarningCountElement.title = null;
+
+ this._tabbedPane.headerResized();
+ },
+
+ __proto__: WebInspector.View.prototype
+};
+
+/**
+ * @constructor
+ * @param {!WebInspector.SplitView} splitView
+ * @extends {WebInspector.View}
+ */
+WebInspector.InspectorView.OverlayView = function(splitView)
+{
+ WebInspector.View.call(this);
+ this._margins = {top: 0, left: 0, right: 0, bottom: 0};
+ this._splitView = splitView;
+}
+
+WebInspector.InspectorView.OverlayView.prototype = {
+ /**
+ * @param {boolean} top
+ * @param {boolean} right
+ * @param {boolean} bottom
+ * @param {boolean} left
+ */
+ setMargins: function(top, right, bottom, left)
+ {
+ this._margins = { top: top, right: right, bottom: bottom, left: left };
+ this.updateMargins();
+ },
+
+ updateMargins: function()
+ {
+ var marginValue = Math.round(3 / WebInspector.zoomManager.zoomFactor()) + "px ";
+ var margins = this._margins.top ? marginValue : "0 ";
+ margins += this._margins.right ? marginValue : "0 ";
+ margins += this._margins.bottom ? marginValue : "0 ";
+ margins += this._margins.left ? marginValue : "0 ";
+ this.element.style.margin = margins;
},
onResize: function()
{
- // FIXME: make drawer a view.
- this.doResize();
- this._drawer.resize();
+ var dockSide = WebInspector.dockController.dockSide();
+ if (dockSide !== WebInspector.DockController.State.Undocked) {
+ if (this._setContentsInsetsId)
+ window.cancelAnimationFrame(this._setContentsInsetsId);
+ this._setContentsInsetsId = window.requestAnimationFrame(this._setContentsInsets.bind(this));
+ }
+ },
+
+ _setContentsInsets: function()
+ {
+ delete this._setContentsInsetsId;
+
+ var zoomFactor = WebInspector.zoomManager.zoomFactor();
+ var marginValue = Math.round(3 / zoomFactor);
+ var insets = {
+ top: this._margins.top ? marginValue : 0,
+ left: this._margins.left ? marginValue : 0,
+ right: this._margins.right ? marginValue : 0,
+ bottom: this._margins.bottom ? marginValue : 0};
+
+ var minSize = {
+ width: WebInspector.InspectorView.Constraints.OverlayWidth - Math.round(insets.left * zoomFactor) - Math.round(insets.right * zoomFactor),
+ height: WebInspector.InspectorView.Constraints.OverlayHeight - Math.round(insets.top * zoomFactor) - Math.round(insets.bottom * zoomFactor)};
+
+ insets[this._splitView.sidebarSide()] += this._splitView.desiredSidebarSize();
+
+ var zoomedInsets = {
+ top: Math.round(insets.top * zoomFactor),
+ left: Math.round(insets.left * zoomFactor),
+ bottom: Math.round(insets.bottom * zoomFactor),
+ right: Math.round(insets.right * zoomFactor)};
+
+ InspectorFrontendHost.setContentsResizingStrategy(zoomedInsets, minSize);
},
__proto__: WebInspector.View.prototype
}
/**
- * @type {WebInspector.InspectorView}
+ * @type {!WebInspector.InspectorView}
*/
-WebInspector.inspectorView = null;
+WebInspector.inspectorView;
projects / platform / framework / web / crosswalk.git / blobdiff