Diff
Modified: trunk/Source/WebCore/ChangeLog (140332 => 140333)
--- trunk/Source/WebCore/ChangeLog 2013-01-21 15:30:26 UTC (rev 140332)
+++ trunk/Source/WebCore/ChangeLog 2013-01-21 15:32:47 UTC (rev 140333)
@@ -1,3 +1,48 @@
+2013-01-21 Vladislav Kaznacheev <[email protected]>
+
+ [Inspector] Layout Elements panel in a single column when docked right.
+ https://bugs.webkit.org/show_bug.cgi?id=107129
+
+ Reviewed by Pavel Feldman.
+
+ If the Inspector is docked right, the style panes in the Elements panel
+ are put below the DOM tree pane, not to the right. This behavior
+ is experimental (hidden behind a new flag "elementsPanelSingleColumn").
+
+ No new tests.
+
+ * inspector/front-end/DockController.js:
+ (WebInspector.DockController.prototype.dockSide):
+ (WebInspector.DockController.prototype._updateUI):
+ (WebInspector.DockController.prototype._toggleDockState):
+ * inspector/front-end/ElementsPanel.js:
+ (WebInspector.ElementsPanel.prototype.onResize):
+ (WebInspector.ElementsPanel.prototype._onDockStateChanged):
+ (WebInspector.ElementsPanel.prototype._sidebarPosition):
+ * inspector/front-end/Panel.js:
+ (WebInspector.Panel.prototype.createSidebarView):
+ * inspector/front-end/Settings.js:
+ (WebInspector.ExperimentsSettings):
+ * inspector/front-end/SidebarView.js:
+ (WebInspector.SidebarView):
+ (WebInspector.SidebarView.prototype.get mainElement):
+ (WebInspector.SidebarView.prototype.get sidebarElement):
+ (WebInspector.SidebarView.prototype._setSidebarElementStyle):
+ (WebInspector.SidebarView.prototype.setSidebarPosition):
+ (WebInspector.SidebarView.prototype._innerSetSidebarPosition):
+ (WebInspector.SidebarView.prototype.setMinimumSidebarHeight):
+ (WebInspector.SidebarView.prototype.setMinimumMainHeightPercent):
+ (WebInspector.SidebarView.prototype.applyConstraints):
+ (WebInspector.SidebarView.prototype.hideMainElement):
+ (WebInspector.SidebarView.prototype.hideSidebarElement):
+ * inspector/front-end/SplitView.js:
+ (WebInspector.SplitView):
+ * inspector/front-end/splitView.css:
+ (.split-view-sidebar-top):
+ (.split-view-sidebar-top.maximized):
+ (.split-view-sidebar-bottom):
+ (.split-view-sidebar-bottom.maximized):
+
2013-01-21 Yury Semikhatsky <[email protected]>
Web Inspector: do not serialize native heap graph when collecting information about memory distribution
Modified: trunk/Source/WebCore/inspector/front-end/DockController.js (140332 => 140333)
--- trunk/Source/WebCore/inspector/front-end/DockController.js 2013-01-21 15:30:26 UTC (rev 140332)
+++ trunk/Source/WebCore/inspector/front-end/DockController.js 2013-01-21 15:32:47 UTC (rev 140333)
@@ -30,6 +30,7 @@
/**
* @constructor
+ * @extends {WebInspector.Object}
*/
WebInspector.DockController = function()
{
@@ -50,6 +51,10 @@
Undocked: "undocked"
}
+WebInspector.DockController.EventTypes = {
+ StateChanged: "StateChanged"
+}
+
WebInspector.DockController.prototype = {
/**
* @return {Element}
@@ -60,6 +65,14 @@
},
/**
+ * @return {string}
+ */
+ dockSide: function()
+ {
+ return this._dockSide;
+ },
+
+ /**
* @param {string} dockSide
*/
setDockSide: function(dockSide)
@@ -135,6 +148,8 @@
}
this._decorateButtonForTargetState(this._dockToggleButton, lastState);
this._decorateButtonForTargetState(this._dockToggleButtonOption, sides[0]);
+
+ this.dispatchEventToListeners(WebInspector.DockController.EventTypes.StateChanged, this._dockSide);
},
/**
@@ -176,5 +191,12 @@
case "undock": action = "" break;
}
InspectorFrontendHost.requestSetDockSide(action);
- }
+ },
+
+ __proto__: WebInspector.Object.prototype
}
+
+/**
+ * @type {?WebInspector.DockController}
+ */
+WebInspector.dockController = null;
\ No newline at end of file
Modified: trunk/Source/WebCore/inspector/front-end/ElementsPanel.js (140332 => 140333)
--- trunk/Source/WebCore/inspector/front-end/ElementsPanel.js 2013-01-21 15:30:26 UTC (rev 140332)
+++ trunk/Source/WebCore/inspector/front-end/ElementsPanel.js 2013-01-21 15:32:47 UTC (rev 140333)
@@ -47,11 +47,17 @@
this.registerRequiredCSS("textPrompt.css");
this.setHideOnDetach();
+ WebInspector.dockController.addEventListener(WebInspector.DockController.EventTypes.StateChanged, this._onDockStateChanged.bind(this));
+
const initialSidebarWidth = 325;
const minimumContentWidthPercent = 34;
- this.createSidebarView(this.element, WebInspector.SidebarView.SidebarPosition.Right, initialSidebarWidth);
+ const initialSidebarHeight = 325;
+ const minimumContentHeightPercent = 34;
+ this.createSidebarView(this.element, this._sidebarPosition(), initialSidebarWidth, initialSidebarHeight);
this.splitView.setMinimumSidebarWidth(Preferences.minElementsSidebarWidth);
this.splitView.setMinimumMainWidthPercent(minimumContentWidthPercent);
+ this.splitView.setMinimumSidebarHeight(Preferences.minElementsSidebarHeight);
+ this.splitView.setMinimumMainHeightPercent(minimumContentHeightPercent);
this.contentElement = this.splitView.mainElement;
this.contentElement.id = "elements-content";
@@ -166,9 +172,29 @@
{
this.treeOutline.updateSelection();
this.updateBreadcrumbSizes();
+ if (WebInspector.dockController.dockSide() !== WebInspector.DockController.State.Undocked)
+ this.splitView.setSidebarPosition(this._sidebarPosition());
},
+ _onDockStateChanged: function()
+ {
+ if (WebInspector.dockController.dockSide() === WebInspector.DockController.State.Undocked)
+ this.splitView.setSidebarPosition(this._sidebarPosition());
+ },
+
/**
+ * @return {string}
+ */
+ _sidebarPosition: function()
+ {
+ if (WebInspector.experimentsSettings.elementsPanelSingleColumn.isEnabled() &&
+ WebInspector.dockController.dockSide() === WebInspector.DockController.State.DockedToRight)
+ return WebInspector.SidebarView.SidebarPosition.Bottom;
+
+ return WebInspector.SidebarView.SidebarPosition.Right;
+ },
+
+ /**
* @param {DOMAgent.NodeId} nodeId
* @param {string} pseudoClass
* @param {boolean} enable
Modified: trunk/Source/WebCore/inspector/front-end/Panel.js (140332 => 140333)
--- trunk/Source/WebCore/inspector/front-end/Panel.js 2013-01-21 15:30:26 UTC (rev 140332)
+++ trunk/Source/WebCore/inspector/front-end/Panel.js 2013-01-21 15:32:47 UTC (rev 140333)
@@ -152,8 +152,9 @@
* @param {Element=} parentElement
* @param {string=} position
* @param {number=} defaultWidth
+ * @param {number=} defaultHeight
*/
- createSidebarView: function(parentElement, position, defaultWidth)
+ createSidebarView: function(parentElement, position, defaultWidth, defaultHeight)
{
if (this.splitView)
return;
@@ -161,7 +162,7 @@
if (!parentElement)
parentElement = this.element;
- this.splitView = new WebInspector.SidebarView(position || WebInspector.SidebarView.SidebarPosition.Left, this._sidebarWidthSettingName(), defaultWidth);
+ this.splitView = new WebInspector.SidebarView(position || WebInspector.SidebarView.SidebarPosition.Left, this._sidebarWidthSettingName(), defaultWidth, defaultHeight);
this.splitView.show(parentElement);
this.splitView.addEventListener(WebInspector.SidebarView.EventTypes.Resized, this.sidebarResized.bind(this));
Modified: trunk/Source/WebCore/inspector/front-end/Settings.js (140332 => 140333)
--- trunk/Source/WebCore/inspector/front-end/Settings.js 2013-01-21 15:30:26 UTC (rev 140332)
+++ trunk/Source/WebCore/inspector/front-end/Settings.js 2013-01-21 15:32:47 UTC (rev 140333)
@@ -33,7 +33,9 @@
maxInlineTextChildLength: 80,
minConsoleHeight: 75,
minSidebarWidth: 100,
+ minSidebarHeight: 75,
minElementsSidebarWidth: 200,
+ minElementsSidebarHeight: 200,
minScriptsSidebarWidth: 200,
styleRulesExpandedState: {},
showMissingLocalizedStrings: false,
@@ -210,6 +212,7 @@
this.cssRegions = this._createExperiment("cssRegions", "CSS Regions Support");
this.showOverridesInDrawer = this._createExperiment("showOverridesInDrawer", "Show Overrides in drawer");
this.fileSystemProject = this._createExperiment("fileSystemProject", "File system folders in Sources Panel");
+ this.elementsPanelSingleColumn = this._createExperiment("elementsPanelSingleColumn", "Single-column elements panel layout when docked to right");
this._cleanUpSetting();
}
Modified: trunk/Source/WebCore/inspector/front-end/SidebarView.js (140332 => 140333)
--- trunk/Source/WebCore/inspector/front-end/SidebarView.js 2013-01-21 15:30:26 UTC (rev 140332)
+++ trunk/Source/WebCore/inspector/front-end/SidebarView.js 2013-01-21 15:32:47 UTC (rev 140333)
@@ -32,10 +32,11 @@
* @param {string=} sidebarPosition
* @param {string=} sidebarWidthSettingName
* @param {number=} defaultSidebarWidth
+ * @param {number=} defaultSidebarHeight
*/
-WebInspector.SidebarView = function(sidebarPosition, sidebarWidthSettingName, defaultSidebarWidth)
+WebInspector.SidebarView = function(sidebarPosition, sidebarWidthSettingName, defaultSidebarWidth, defaultSidebarHeight)
{
- WebInspector.SplitView.call(this, true, sidebarWidthSettingName, defaultSidebarWidth || 200);
+ WebInspector.SplitView.call(this, true, sidebarWidthSettingName, defaultSidebarWidth, defaultSidebarHeight);
this._leftElement = this.firstElement();
this._rightElement = this.secondElement();
@@ -43,11 +44,10 @@
this._minimumSidebarWidth = Preferences.minSidebarWidth;
this._minimumMainWidthPercent = 50;
- this._mainElementHidden = false;
- this._sidebarElementHidden = false;
+ this._minimumSidebarHeight = Preferences.minSidebarHeight;
+ this._minimumMainHeightPercent = 50;
this._innerSetSidebarPosition(sidebarPosition || WebInspector.SidebarView.SidebarPosition.Left);
- this.setSecondIsSidebar(sidebarPosition !== WebInspector.SidebarView.SidebarPosition.Left);
}
WebInspector.SidebarView.EventTypes = {
@@ -59,47 +59,80 @@
*/
WebInspector.SidebarView.SidebarPosition = {
Left: "Left",
- Right: "Right"
+ Right: "Right",
+ Top: "Top",
+ Bottom: "Bottom"
}
WebInspector.SidebarView.prototype = {
/**
- * @return {boolean}
+ * @return {Element}
*/
- _hasLeftSidebar: function()
+ get mainElement()
{
- return this._sidebarPosition === WebInspector.SidebarView.SidebarPosition.Left;
+ return this.isSidebarSecond() ? this.firstElement() : this.secondElement();
},
/**
* @return {Element}
*/
- get mainElement()
+ get sidebarElement()
{
- return this._hasLeftSidebar() ? this._rightElement : this._leftElement;
+ return this.isSidebarSecond() ? this.secondElement() : this.firstElement();
},
/**
- * @return {Element}
+ * @param {string} styleClass
*/
- get sidebarElement()
+ _setSidebarElementStyle: function(styleClass)
{
- return this._hasLeftSidebar() ? this._leftElement : this._rightElement;
+ this.sidebarElement.removeStyleClass("split-view-sidebar-left");
+ this.sidebarElement.removeStyleClass("split-view-sidebar-right");
+ this.sidebarElement.removeStyleClass("split-view-sidebar-top");
+ this.sidebarElement.removeStyleClass("split-view-sidebar-bottom");
+
+ this.sidebarElement.addStyleClass(styleClass);
},
/**
* @param {string} sidebarPosition
*/
+ setSidebarPosition: function(sidebarPosition)
+ {
+ if (this.sidebarPosition_ === sidebarPosition)
+ return;
+
+ this._innerSetSidebarPosition(sidebarPosition);
+ },
+
+ /**
+ * @param {string} sidebarPosition
+ */
_innerSetSidebarPosition: function(sidebarPosition)
{
- this._sidebarPosition = sidebarPosition;
+ this.sidebarPosition_ = sidebarPosition;
- if (this._hasLeftSidebar()) {
- this._leftElement.addStyleClass("split-view-sidebar-left");
- this._rightElement.removeStyleClass("split-view-sidebar-right");
- } else {
- this._rightElement.addStyleClass("split-view-sidebar-right");
- this._leftElement.removeStyleClass("split-view-sidebar-left");
+ switch (sidebarPosition) {
+ case WebInspector.SidebarView.SidebarPosition.Left:
+ this.setSecondIsSidebar(false);
+ this._setSidebarElementStyle("split-view-sidebar-left");
+ this.setVertical(true);
+ break;
+ case WebInspector.SidebarView.SidebarPosition.Right:
+ this.setSecondIsSidebar(true);
+ this._setSidebarElementStyle("split-view-sidebar-right");
+ this.setVertical(true);
+ break;
+ case WebInspector.SidebarView.SidebarPosition.Top:
+ this.setSecondIsSidebar(false);
+ this._setSidebarElementStyle("split-view-sidebar-top");
+ this.setVertical(false);
+ break;
+ case WebInspector.SidebarView.SidebarPosition.Bottom:
+ this.setSecondIsSidebar(true);
+ this._setSidebarElementStyle("split-view-sidebar-bottom");
+ this.setVertical(false);
+ break;
}
},
@@ -112,6 +145,14 @@
},
/**
+ * @param {number} height
+ */
+ setMinimumSidebarHeight: function(height)
+ {
+ this._minimumSidebarHeight = height;
+ },
+
+ /**
* @param {number} widthPercent
*/
setMinimumMainWidthPercent: function(widthPercent)
@@ -120,6 +161,14 @@
},
/**
+ * @param {number} heightPercent
+ */
+ setMinimumMainHeightPercent: function(heightPercent)
+ {
+ this._minimumMainHeightPercent = heightPercent;
+ },
+
+ /**
* @param {number} width
*/
setSidebarWidth: function(width)
@@ -146,16 +195,17 @@
*/
applyConstraints: function(size)
{
- var offsetWidth = this.element.offsetWidth;
- return offsetWidth ? Number.constrain(size, this._minimumSidebarWidth, offsetWidth * (100 - this._minimumMainWidthPercent) / 100) : size;
+ var minSidebarSize = this.isVertical() ? this._minimumSidebarWidth : this._minimumSidebarHeight;
+ var minMainSizePercent = this.isVertical() ? this._minimumMainWidthPercent : this._minimumMainHeightPercent;
+ return Number.constrain(size, minSidebarSize, this.totalSize() * (100 - minMainSizePercent) / 100);
},
hideMainElement: function()
{
- if (this._hasLeftSidebar())
+ if (this.isSidebarSecond())
+ this.showOnlySecond();
+ else
this.showOnlyFirst();
- else
- this.showOnlySecond();
},
showMainElement: function()
@@ -165,10 +215,10 @@
hideSidebarElement: function()
{
- if (this._hasLeftSidebar())
+ if (this.isSidebarSecond())
+ this.showOnlyFirst();
+ else
this.showOnlySecond();
- else
- this.showOnlyFirst();
},
showSidebarElement: function()
Modified: trunk/Source/WebCore/inspector/front-end/SplitView.js (140332 => 140333)
--- trunk/Source/WebCore/inspector/front-end/SplitView.js 2013-01-21 15:30:26 UTC (rev 140332)
+++ trunk/Source/WebCore/inspector/front-end/SplitView.js 2013-01-21 15:32:47 UTC (rev 140333)
@@ -43,7 +43,6 @@
this.element.className = "split-view";
this._firstElement = this.element.createChild("div", "split-view-contents");
-
this._secondElement = this.element.createChild("div", "split-view-contents");
this._resizerElement = this.element.createChild("div", "split-view-resizer");
Modified: trunk/Source/WebCore/inspector/front-end/splitView.css (140332 => 140333)
--- trunk/Source/WebCore/inspector/front-end/splitView.css 2013-01-21 15:30:26 UTC (rev 140332)
+++ trunk/Source/WebCore/inspector/front-end/splitView.css 2013-01-21 15:32:47 UTC (rev 140333)
@@ -67,6 +67,22 @@
border-right: none;
}
+.split-view-sidebar-top {
+ border-bottom: 1px solid rgb(64%, 64%, 64%);
+}
+
+.split-view-sidebar-top.maximized {
+ border-bottom: none;
+}
+
+.split-view-sidebar-bottom {
+ border-top: 1px solid rgb(64%, 64%, 64%);
+}
+
+.split-view-sidebar-bottom.maximized {
+ border-top: none;
+}
+
.split-view-resizer.split-view-resizer-vertical {
position: absolute;
top: 0;
