/**
* @constructor
- * @param {!WebInspector.InspectorView} inspectorView
+ * @extends {WebInspector.View}
+ * @param {!WebInspector.SplitView} splitView
*/
-WebInspector.Drawer = function(inspectorView)
+WebInspector.Drawer = function(splitView)
{
- this._inspectorView = inspectorView;
+ WebInspector.View.call(this);
+ this.element.id = "drawer-contents";
- this.element = this._inspectorView.devtoolsElement().createChild("div", "drawer");
- this.element.style.flexBasis = 0;
-
- this._savedHeight = 200; // Default.
-
- this._drawerContentsElement = this.element.createChild("div");
- this._drawerContentsElement.id = "drawer-contents";
+ this._splitView = splitView;
+ splitView.hideDefaultResizer();
+ this.show(splitView.sidebarElement());
+ splitView.hideSidebar();
this._toggleDrawerButton = new WebInspector.StatusBarButton(WebInspector.UIString("Show drawer."), "console-status-bar-item");
this._toggleDrawerButton.addEventListener("click", this.toggle, this);
this._tabbedPane = new WebInspector.TabbedPane();
this._tabbedPane.closeableTabs = false;
- this._tabbedPane.markAsRoot();
this._tabbedPane.setRetainTabOrder(true, WebInspector.moduleManager.orderComparator(WebInspector.Drawer.ViewFactory, "name", "order"));
- this._tabbedPane.addEventListener(WebInspector.TabbedPane.EventTypes.TabClosed, this._updateTabStrip, this);
this._tabbedPane.addEventListener(WebInspector.TabbedPane.EventTypes.TabSelected, this._tabSelected, this);
- WebInspector.installDragHandle(this._tabbedPane.headerElement(), this._startStatusBarDragging.bind(this), this._statusBarDragging.bind(this), this._endStatusBarDragging.bind(this), "ns-resize");
- this._tabbedPane.element.createChild("div", "drawer-resizer");
+ splitView.installResizer(this._tabbedPane.headerElement());
this._showDrawerOnLoadSetting = WebInspector.settings.createSetting("WebInspector.Drawer.showOnLoad", false);
this._lastSelectedViewSetting = WebInspector.settings.createSetting("WebInspector.Drawer.lastSelectedView", "console");
- this._initialize();
+ this._initializeViewFactories();
}
WebInspector.Drawer.prototype = {
- _initialize: function()
+ _initializeViewFactories: function()
{
this._viewFactories = {};
var extensions = WebInspector.moduleManager.extensions(WebInspector.Drawer.ViewFactory);
this._tabbedPane.appendTab(id, title, new WebInspector.View());
}
}
+ this._tabbedPane.show(this.element);
},
/**
return this._toggleDrawerButton.element;
},
- _constrainHeight: function(height)
- {
- return Number.constrain(height, Preferences.minConsoleHeight, this._inspectorView.devtoolsElement().offsetHeight - Preferences.minConsoleHeight);
- },
-
- /**
- * @return {boolean}
- */
- isHiding: function()
- {
- return this._isHiding;
- },
-
/**
* @param {string} tabId
* @param {string} title
/**
* @param {string} id
- * @param {boolean=} immediately
+ * @param {boolean=} immediate
*/
- showView: function(id, immediately)
+ showView: function(id, immediate)
{
if (!this._toggleDrawerButton.enabled())
return;
+ if (!this._tabbedPane.hasTab(id)) {
+ // Hidden tab.
+ this._innerShow(immediate);
+ return;
+ }
var viewFactory = this._viewFactory(id);
if (viewFactory)
this._tabbedPane.changeTabView(id, viewFactory.createView());
- this._innerShow(immediately);
+ this._innerShow(immediate);
this._tabbedPane.selectTab(id, true);
// In case this id is already selected, anyways persist it as the last saved value.
this._lastSelectedViewSetting.set(id);
- this._updateTabStrip();
},
/**
}
this._innerShow();
this._tabbedPane.selectTab(id, true);
- this._updateTabStrip();
},
- /**
- * @param {boolean=} immediately
- */
- show: function(immediately)
+ showDrawer: function()
{
- this.showView(this._lastSelectedViewSetting.get(), immediately);
+ this.showView(this._lastSelectedViewSetting.get());
},
showOnLoadIfNecessary: function()
},
/**
- * @param {boolean=} immediately
+ * @param {boolean=} immediate
*/
- _innerShow: function(immediately)
+ _innerShow: function(immediate)
{
- this._immediatelyFinishAnimation();
-
if (this._toggleDrawerButton.toggled)
return;
+
this._showDrawerOnLoadSetting.set(true);
this._toggleDrawerButton.toggled = true;
this._toggleDrawerButton.title = WebInspector.UIString("Hide drawer.");
- document.body.classList.add("drawer-visible");
- this._tabbedPane.show(this._drawerContentsElement);
-
- var height = this._constrainHeight(this._savedHeight);
- // While loading, window may be zero height. Do not corrupt desired drawer height in this case.
- // FIXME: making Drawer a view and placing it inside SplitView eliminates the need for this.
- if (window.innerHeight == 0)
- height = this._savedHeight;
- var animations = [
- {element: this.element, start: {"flex-basis": 23}, end: {"flex-basis": height}},
- ];
-
- /**
- * @param {boolean} finished
- * @this {WebInspector.Drawer}
- */
- function animationCallback(finished)
- {
- if (this._inspectorView.currentPanel())
- this._inspectorView.currentPanel().doResize();
- if (!finished)
- return;
- this._updateTabStrip();
- if (this._visibleView()) {
- // Get console content back
- this._tabbedPane.changeTabView(this._tabbedPane.selectedTabId, this._visibleView());
- this._visibleView().focus();
- }
- delete this._currentAnimation;
- }
-
- this._currentAnimation = WebInspector.animateStyle(animations, this._animationDuration(immediately), animationCallback.bind(this));
+ this._splitView.showBoth(!immediate);
- if (immediately)
- this._currentAnimation.forceComplete();
+ if (this._visibleView())
+ this._visibleView().focus();
},
- /**
- * @param {boolean=} immediately
- */
- hide: function(immediately)
+ closeDrawer: function()
{
- this._immediatelyFinishAnimation();
-
if (!this._toggleDrawerButton.toggled)
return;
this._showDrawerOnLoadSetting.set(false);
this._toggleDrawerButton.toggled = false;
this._toggleDrawerButton.title = WebInspector.UIString("Show console.");
- this._isHiding = true;
- this._savedHeight = this.element.offsetHeight;
-
WebInspector.restoreFocusFromElement(this.element);
-
- // Temporarily set properties and classes to mimic the post-animation values so panels
- // like Elements in their updateStatusBarItems call will size things to fit the final location.
- document.body.classList.remove("drawer-visible");
- this._inspectorView.currentPanel().statusBarResized();
- document.body.classList.add("drawer-visible");
-
- var animations = [
- {element: this.element, start: {"flex-basis": this.element.offsetHeight }, end: {"flex-basis": 23}},
- ];
-
- /**
- * @param {boolean} finished
- * @this {WebInspector.Drawer}
- */
- function animationCallback(finished)
- {
- var panel = this._inspectorView.currentPanel();
- if (!finished) {
- panel.doResize();
- return;
- }
- this._tabbedPane.detach();
- this._drawerContentsElement.removeChildren();
- document.body.classList.remove("drawer-visible");
- panel.doResize();
- delete this._currentAnimation;
- delete this._isHiding;
- }
-
- this._currentAnimation = WebInspector.animateStyle(animations, this._animationDuration(immediately), animationCallback.bind(this));
-
- if (immediately)
- this._currentAnimation.forceComplete();
- },
-
- resize: function()
- {
- if (!this._toggleDrawerButton.toggled)
- return;
-
- this._visibleView().storeScrollPositions();
- var height = this._constrainHeight(this.element.offsetHeight);
- this.element.style.flexBasis = height + "px";
- this._tabbedPane.doResize();
- },
-
- _immediatelyFinishAnimation: function()
- {
- if (this._currentAnimation)
- this._currentAnimation.forceComplete();
- },
-
- /**
- * @param {boolean=} immediately
- * @return {number}
- */
- _animationDuration: function(immediately)
- {
- return immediately ? 0 : 50;
- },
-
- /**
- * @return {boolean}
- */
- _startStatusBarDragging: function(event)
- {
- if (!this._toggleDrawerButton.toggled || event.target !== this._tabbedPane.headerElement())
- return false;
-
- this._visibleView().storeScrollPositions();
- this._statusBarDragOffset = event.pageY - this.element.totalOffsetTop();
- return true;
- },
-
- _statusBarDragging: function(event)
- {
- var height = window.innerHeight - event.pageY + this._statusBarDragOffset;
- height = Number.constrain(height, Preferences.minConsoleHeight, this._inspectorView.devtoolsElement().offsetHeight - Preferences.minConsoleHeight);
-
- this.element.style.flexBasis = height + "px";
- if (this._inspectorView.currentPanel())
- this._inspectorView.currentPanel().doResize();
- this._tabbedPane.doResize();
-
- event.consume(true);
- },
-
- _endStatusBarDragging: function(event)
- {
- this._savedHeight = this.element.offsetHeight;
- delete this._statusBarDragOffset;
-
- event.consume();
+ this._splitView.hideSidebar(true);
},
/**
return this._tabbedPane.visibleView;
},
- _updateTabStrip: function()
- {
- this._tabbedPane.onResize();
- this._tabbedPane.doResize();
- },
-
/**
* @param {!WebInspector.Event} event
*/
toggle: function()
{
if (this._toggleDrawerButton.toggled)
- this.hide();
+ this.closeDrawer();
else
- this.show();
+ this.showDrawer();
},
/**
_viewFactory: function(id)
{
return this._viewFactories[id] ? /** @type {!WebInspector.Drawer.ViewFactory} */ (this._viewFactories[id].instance()) : null;
- }
+ },
+
+ __proto__: WebInspector.View.prototype
}
/**