Diff
Modified: trunk/LayoutTests/ChangeLog (103405 => 103406)
--- trunk/LayoutTests/ChangeLog 2011-12-21 13:52:11 UTC (rev 103405)
+++ trunk/LayoutTests/ChangeLog 2011-12-21 14:38:43 UTC (rev 103406)
@@ -1,3 +1,13 @@
+2011-12-21 Vsevolod Vlasov <[email protected]>
+
+ Web Inspector: TabbedPane should use tabElement width measuring to layout tab elements when width is too small to fit them.
+ https://bugs.webkit.org/show_bug.cgi?id=75005
+
+ Reviewed by Pavel Feldman.
+
+ * inspector/tabbed-pane-max-tab-width-calculation-expected.txt: Added.
+ * inspector/tabbed-pane-max-tab-width-calculation.html: Added.
+
2011-12-09 Pavel Podivilov <[email protected]>
Web Inspector: auto detect source map url.
Added: trunk/LayoutTests/inspector/tabbed-pane-max-tab-width-calculation-expected.txt (0 => 103406)
--- trunk/LayoutTests/inspector/tabbed-pane-max-tab-width-calculation-expected.txt (rev 0)
+++ trunk/LayoutTests/inspector/tabbed-pane-max-tab-width-calculation-expected.txt 2011-12-21 14:38:43 UTC (rev 103406)
@@ -0,0 +1,9 @@
+Tests tabbed pane max tab element width calculation.
+
+Bug 75005
+measuredWidths = [20,50,70], totalWidth = 150, maxWidth = 70.
+measuredWidths = [20,50,80], totalWidth = 150, maxWidth = 80.
+measuredWidths = [20,50,90], totalWidth = 150, maxWidth = 80.
+measuredWidths = [20,90,90], totalWidth = 150, maxWidth = 65.
+measuredWidths = [70,80,90], totalWidth = 150, maxWidth = 50.
+
Property changes on: trunk/LayoutTests/inspector/tabbed-pane-max-tab-width-calculation-expected.txt
___________________________________________________________________
Added: svn:eol-style
Added: trunk/LayoutTests/inspector/tabbed-pane-max-tab-width-calculation.html (0 => 103406)
--- trunk/LayoutTests/inspector/tabbed-pane-max-tab-width-calculation.html (rev 0)
+++ trunk/LayoutTests/inspector/tabbed-pane-max-tab-width-calculation.html 2011-12-21 14:38:43 UTC (rev 103406)
@@ -0,0 +1,27 @@
+<html>
+<head>
+<script src=""
+<script type="text/_javascript_">
+var test = function()
+{
+ function calculateAndDumpMaxWidth(measuredWidths, totalWidth)
+ {
+ var maxWidth = WebInspector.TabbedPane.prototype._calculateMaxWidth(measuredWidths, totalWidth);
+ InspectorTest.addResult("measuredWidths = [" + String(measuredWidths) + "], totalWidth = " + totalWidth + ", maxWidth = " + maxWidth + ".");
+ }
+
+ calculateAndDumpMaxWidth([50, 70, 20], 150);
+ calculateAndDumpMaxWidth([50, 80, 20], 150);
+ calculateAndDumpMaxWidth([50, 90, 20], 150);
+ calculateAndDumpMaxWidth([90, 90, 20], 150);
+ calculateAndDumpMaxWidth([90, 80, 70], 150);
+
+ InspectorTest.completeTest();
+}
+</script>
+</head>
+<body _onload_="runTest()">
+<p>Tests tabbed pane max tab element width calculation.</p>
+<a href="" 75005</a>
+</body>
+</html>
Property changes on: trunk/LayoutTests/inspector/tabbed-pane-max-tab-width-calculation.html
___________________________________________________________________
Added: svn:eol-style
Modified: trunk/Source/WebCore/ChangeLog (103405 => 103406)
--- trunk/Source/WebCore/ChangeLog 2011-12-21 13:52:11 UTC (rev 103405)
+++ trunk/Source/WebCore/ChangeLog 2011-12-21 14:38:43 UTC (rev 103406)
@@ -1,3 +1,33 @@
+2011-12-21 Vsevolod Vlasov <[email protected]>
+
+ Web Inspector: TabbedPane should use tabElement width measuring to layout tab elements when width is too small to fit them.
+ https://bugs.webkit.org/show_bug.cgi?id=75005
+
+ Reviewed by Pavel Feldman.
+
+ Test: inspector/tabbed-pane-max-tab-width-calculation.html
+
+ * inspector/front-end/NetworkItemView.js:
+ (WebInspector.NetworkItemView.prototype.wasShown):
+ * inspector/front-end/TabbedPane.js:
+ (WebInspector.TabbedPane):
+ (WebInspector.TabbedPane.prototype.appendTab):
+ (WebInspector.TabbedPane.prototype._createTabElement):
+ (WebInspector.TabbedPane.prototype.onResize):
+ (WebInspector.TabbedPane.prototype._maybeMeasureAndUpdate):
+ (WebInspector.TabbedPane.prototype._measureTab):
+ (WebInspector.TabbedPane.prototype._updateWidths):
+ (WebInspector.TabbedPane.prototype._calculateMaxWidth):
+ (WebInspector.TabbedPaneTab):
+ * inspector/front-end/inspector.css:
+ (.tabbed-pane-header):
+ (.tabbed-pane-header-tabs):
+ (.tabbed-pane-header-tab):
+ (.tabbed-pane-header-tab.measuring):
+ (.tabbed-pane-header-tab.selected):
+ * inspector/front-end/scriptsPanel.css:
+ (#scripts-navigator-tabbed-pane .tabbed-pane-header-tabs):
+
2011-12-09 Pavel Podivilov <[email protected]>
Web Inspector: auto detect source map url.
Modified: trunk/Source/WebCore/inspector/front-end/NetworkItemView.js (103405 => 103406)
--- trunk/Source/WebCore/inspector/front-end/NetworkItemView.js 2011-12-21 13:52:11 UTC (rev 103405)
+++ trunk/Source/WebCore/inspector/front-end/NetworkItemView.js 2011-12-21 14:38:43 UTC (rev 103406)
@@ -63,7 +63,7 @@
WebInspector.NetworkItemView.prototype = {
wasShown: function()
{
- WebInspector.TabbedPane.prototype.wasShown.call();
+ WebInspector.TabbedPane.prototype.wasShown.call(this);
this._selectTab();
},
Modified: trunk/Source/WebCore/inspector/front-end/TabbedPane.js (103405 => 103406)
--- trunk/Source/WebCore/inspector/front-end/TabbedPane.js 2011-12-21 13:52:11 UTC (rev 103405)
+++ trunk/Source/WebCore/inspector/front-end/TabbedPane.js 2011-12-21 14:38:43 UTC (rev 103406)
@@ -36,24 +36,125 @@
{
WebInspector.View.call(this);
this.element.addStyleClass("tabbed-pane");
- this._tabsElement = this.element.createChild("div", "tabbed-pane-header");
+ this._headerElement = this.element.createChild("div", "tabbed-pane-header");
+ this._tabsElement = this._headerElement.createChild("div", "tabbed-pane-header-tabs");
this._contentElement = this.element.createChild("div", "tabbed-pane-content");
this._tabs = {};
+
+ this._tabsThatNeedMeasuring = [];
}
WebInspector.TabbedPane.prototype = {
+ /**
+ * @param {string} id
+ * @param {string} tabTitle
+ * @param {WebInspector.View} view
+ */
appendTab: function(id, tabTitle, view)
{
- var tabElement = document.createElement("li");
- tabElement.textContent = tabTitle;
+ var tabElement = this._createTabElement(id, tabTitle, false);
tabElement.addEventListener("click", this.selectTab.bind(this, id, true), false);
-
this._tabsElement.appendChild(tabElement);
- this._tabs[id] = { id: id, tabElement: tabElement, view: view };
+ var tab = new WebInspector.TabbedPaneTab(id, tabTitle, tabElement, view);
+ this._tabs[id] = tab;
+
+ this._tabsThatNeedMeasuring.push(tab);
+ this._maybeMeasureAndUpdate();
},
/**
+ * @param {string} id
+ * @param {string} title
+ * @param {boolean} measuring
+ */
+ _createTabElement: function(id, title, measuring)
+ {
+ var tabElement = document.createElement("div");
+ tabElement.addStyleClass("tabbed-pane-header-tab");
+ if (measuring)
+ tabElement.addStyleClass("measuring");
+
+ tabElement.textContent = title;
+
+ return tabElement;
+ },
+
+ onResize: function()
+ {
+ this._maybeMeasureAndUpdate();
+ },
+
+ _maybeMeasureAndUpdate: function()
+ {
+ if (!this.isShowing())
+ return;
+
+ for (var i = 0; i < this._tabsThatNeedMeasuring.length; ++i)
+ this._measureTab(this._tabsThatNeedMeasuring[i]);
+ this._tabsThatNeedMeasuring = [];
+
+ this._updateWidths();
+ },
+
+ /**
+ * @param {WebInspector.TabbedPaneTab} tab
+ */
+ _measureTab: function(tab)
+ {
+ var measuredTabElement = this._createTabElement(tab.id, tab.title, true);
+
+ this._tabsElement.appendChild(measuredTabElement);
+ tab.measuredWidth = measuredTabElement.offsetWidth;
+ this._tabsElement.removeChild(measuredTabElement);
+ },
+
+ _updateWidths: function()
+ {
+ var measuredWidths = [];
+ for (var tabId in this._tabs)
+ measuredWidths.push(this._tabs[tabId].measuredWidth);
+
+ var maxWidth = this._calculateMaxWidth(measuredWidths, this._tabsElement.offsetWidth);
+ for (var tabId in this._tabs) {
+ var tab = this._tabs[tabId];
+ var width = Math.min(tab.measuredWidth, maxWidth);
+ tab.tabElement.style.width = width + "px";
+ }
+ },
+
+ /**
+ * @param {Array.<number>} measuredWidths
+ * @param {number} totalWidth
+ */
+ _calculateMaxWidth: function(measuredWidths, totalWidth)
+ {
+ if (!measuredWidths.length)
+ return 0;
+
+ measuredWidths.sort();
+
+ var totalMeasuredWidth = 0;
+ for (var i = 0; i < measuredWidths.length; ++i)
+ totalMeasuredWidth += measuredWidths[i];
+
+ if (totalWidth >= totalMeasuredWidth)
+ return measuredWidths[measuredWidths.length - 1];
+
+ var totalExtraWidth = 0;
+ for (var i = measuredWidths.length - 1; i > 0; --i) {
+ var extraWidth = measuredWidths[i] - measuredWidths[i - 1];
+ totalExtraWidth += (measuredWidths.length - i) * extraWidth;
+
+ if (totalWidth + totalExtraWidth >= totalMeasuredWidth)
+ return measuredWidths[i - 1] + (totalWidth + totalExtraWidth - totalMeasuredWidth) / (measuredWidths.length - i);
+ }
+
+ return totalWidth / measuredWidths.length;
+ },
+
+ /**
+ * @param {string} id
* @param {boolean=} userGesture
*/
selectTab: function(id, userGesture)
@@ -76,12 +177,18 @@
return true;
},
+ /**
+ * @param {WebInspector.TabbedPaneTab} tab
+ */
_showTab: function(tab)
{
tab.tabElement.addStyleClass("selected");
tab.view.show(this._contentElement);
},
+ /**
+ * @param {WebInspector.TabbedPaneTab} tab
+ */
_hideTab: function(tab)
{
tab.tabElement.removeStyleClass("selected");
@@ -109,3 +216,19 @@
}
WebInspector.TabbedPane.prototype.__proto__ = WebInspector.View.prototype;
+
+
+/**
+ * @constructor
+ * @param {string} id
+ * @param {string} title
+ * @param {Element} tabElement
+ * @param {WebInspector.View} view
+ */
+WebInspector.TabbedPaneTab = function(id, title, tabElement, view)
+{
+ this.title = title;
+ this.id = id;
+ this.tabElement = tabElement;
+ this.view = view;
+}
Modified: trunk/Source/WebCore/inspector/front-end/inspector.css (103405 => 103406)
--- trunk/Source/WebCore/inspector/front-end/inspector.css 2011-12-21 13:52:11 UTC (rev 103405)
+++ trunk/Source/WebCore/inspector/front-end/inspector.css 2011-12-21 14:38:43 UTC (rev 103406)
@@ -1689,11 +1689,14 @@
.tabbed-pane-header {
height: 23px;
- padding: 0 10px;
border-bottom: 1px solid rgb(163, 163, 163);
}
-.tabbed-pane-header li {
+.tabbed-pane-header-tabs {
+ margin: 0 10px;
+}
+
+.tabbed-pane-header-tab {
display: inline-block;
margin-top: 2px;
font-size: 11px;
@@ -1706,9 +1709,16 @@
height: 21px;
border: 1px solid transparent;
border-bottom: none;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
}
-.tabbed-pane-header li.selected {
+.tabbed-pane-header-tab.measuring {
+ visibility: hidden;
+}
+
+.tabbed-pane-header-tab.selected {
background-color: white;
border: 1px solid rgb(163, 163, 163);
border-bottom: none;
Modified: trunk/Source/WebCore/inspector/front-end/scriptsPanel.css (103405 => 103406)
--- trunk/Source/WebCore/inspector/front-end/scriptsPanel.css 2011-12-21 13:52:11 UTC (rev 103405)
+++ trunk/Source/WebCore/inspector/front-end/scriptsPanel.css 2011-12-21 14:38:43 UTC (rev 103406)
@@ -202,6 +202,11 @@
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F5F5F5), to(#E5E5E5));
}
+#scripts-navigator-tabbed-pane .tabbed-pane-header-tabs {
+ margin-left: 1px;
+ margin-right: 16px;
+}
+
#scripts-navigator-tabbed-pane .tabbed-pane-content {
margin-top: 1px;
}
