Title: [183565] trunk/Source/WebInspectorUI
- Revision
- 183565
- Author
- [email protected]
- Date
- 2015-04-29 12:19:26 -0700 (Wed, 29 Apr 2015)
Log Message
Web Inspector: Navigation bar often looses last button when full
https://bugs.webkit.org/show_bug.cgi?id=144385
Added helpers to get the subpixel width and height of an element.
Adopt them in the NavigationBar layout methods to get precise widths
that don't accumulate rounding errors which lead to items overflowing.
Reviewed by Joseph Pecoraro.
* UserInterface/Base/Utilities.js:
(Element.prototype.realOffsetWidth): Added.
(Element.prototype.realOffsetHeight): Added.
* UserInterface/Views/HierarchicalPathNavigationItem.js:
(WebInspector.HierarchicalPathNavigationItem.prototype.updateLayout):
* UserInterface/Views/NavigationBar.js:
(WebInspector.NavigationBar.prototype.updateLayout):
(WebInspector.NavigationBar.prototype._calculateMinimumWidth):
* UserInterface/Views/TabBar.js:
(WebInspector.TabBar.prototype._handleMouseMoved):
* UserInterface/Views/Toolbar.js:
(WebInspector.Toolbar.prototype.customUpdateLayout.isOverflowingToolbar):
(WebInspector.Toolbar.prototype.customUpdateLayout):
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (183564 => 183565)
--- trunk/Source/WebInspectorUI/ChangeLog 2015-04-29 19:00:12 UTC (rev 183564)
+++ trunk/Source/WebInspectorUI/ChangeLog 2015-04-29 19:19:26 UTC (rev 183565)
@@ -1,3 +1,28 @@
+2015-04-29 Timothy Hatcher <[email protected]>
+
+ Web Inspector: Navigation bar often looses last button when full
+ https://bugs.webkit.org/show_bug.cgi?id=144385
+
+ Added helpers to get the subpixel width and height of an element.
+ Adopt them in the NavigationBar layout methods to get precise widths
+ that don't accumulate rounding errors which lead to items overflowing.
+
+ Reviewed by Joseph Pecoraro.
+
+ * UserInterface/Base/Utilities.js:
+ (Element.prototype.realOffsetWidth): Added.
+ (Element.prototype.realOffsetHeight): Added.
+ * UserInterface/Views/HierarchicalPathNavigationItem.js:
+ (WebInspector.HierarchicalPathNavigationItem.prototype.updateLayout):
+ * UserInterface/Views/NavigationBar.js:
+ (WebInspector.NavigationBar.prototype.updateLayout):
+ (WebInspector.NavigationBar.prototype._calculateMinimumWidth):
+ * UserInterface/Views/TabBar.js:
+ (WebInspector.TabBar.prototype._handleMouseMoved):
+ * UserInterface/Views/Toolbar.js:
+ (WebInspector.Toolbar.prototype.customUpdateLayout.isOverflowingToolbar):
+ (WebInspector.Toolbar.prototype.customUpdateLayout):
+
2015-04-28 Matt Baker <[email protected]>
Web Inspector: add a separate overview for the Rendering Frames timeline
Modified: trunk/Source/WebInspectorUI/UserInterface/Base/Utilities.js (183564 => 183565)
--- trunk/Source/WebInspectorUI/UserInterface/Base/Utilities.js 2015-04-29 19:00:12 UTC (rev 183564)
+++ trunk/Source/WebInspectorUI/UserInterface/Base/Utilities.js 2015-04-29 19:19:26 UTC (rev 183565)
@@ -311,6 +311,22 @@
}
});
+Object.defineProperty(Element.prototype, "realOffsetWidth",
+{
+ get: function()
+ {
+ return this.getBoundingClientRect().width;
+ }
+});
+
+Object.defineProperty(Element.prototype, "realOffsetHeight",
+{
+ get: function()
+ {
+ return this.getBoundingClientRect().height;
+ }
+});
+
Object.defineProperty(Element.prototype, "totalOffsetLeft",
{
get: function()
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/HierarchicalPathNavigationItem.js (183564 => 183565)
--- trunk/Source/WebInspectorUI/UserInterface/Views/HierarchicalPathNavigationItem.js 2015-04-29 19:00:12 UTC (rev 183564)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/HierarchicalPathNavigationItem.js 2015-04-29 19:19:26 UTC (rev 183565)
@@ -116,21 +116,21 @@
if (navigationBar.navigationItems[i] instanceof WebInspector.FlexibleSpaceNavigationItem)
continue;
- totalOtherItemsWidth += navigationBar.navigationItems[i].element.offsetWidth;
+ totalOtherItemsWidth += navigationBar.navigationItems[i].element.realOffsetWidth;
}
// Calculate the width for all the components.
var thisItemWidth = 0;
var componentWidths = [];
for (var i = 0; i < this._components.length; ++i) {
- var componentWidth = this._components[i].element.offsetWidth;
+ var componentWidth = this._components[i].element.realOffsetWidth;
componentWidths.push(componentWidth);
thisItemWidth += componentWidth;
}
// If all our components fit with the other navigation items in the width of the bar,
// then we don't need to collapse any components.
- var barWidth = navigationBar.element.offsetWidth;
+ var barWidth = navigationBar.element.realOffsetWidth;
if (totalOtherItemsWidth + thisItemWidth <= barWidth)
return;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NavigationBar.js (183564 => 183565)
--- trunk/Source/WebInspectorUI/UserInterface/Views/NavigationBar.js 2015-04-29 19:00:12 UTC (rev 183564)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NavigationBar.js 2015-04-29 19:19:26 UTC (rev 183565)
@@ -179,10 +179,10 @@
if (this._navigationItems[i] instanceof WebInspector.FlexibleSpaceNavigationItem)
continue;
- totalItemWidth += this._navigationItems[i].element.offsetWidth;
+ totalItemWidth += this._navigationItems[i].element.realOffsetWidth;
}
- var barWidth = this._element.offsetWidth;
+ var barWidth = this._element.realOffsetWidth;
// Add the collapsed class back if the items are wider than the bar.
if (totalItemWidth > barWidth)
@@ -439,7 +439,7 @@
// Skip flexible space items since they can take up no space at the minimum width.
if (this._navigationItems[i] instanceof WebInspector.FlexibleSpaceNavigationItem)
continue;
- totalItemWidth += this._navigationItems[i].element.offsetWidth;
+ totalItemWidth += this._navigationItems[i].element.realOffsetWidth;
}
// Remove the collapsed style class if we were not collapsed before.
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.js (183564 => 183565)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.js 2015-04-29 19:00:12 UTC (rev 183564)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.js 2015-04-29 19:19:26 UTC (rev 183565)
@@ -571,7 +571,7 @@
this._selectedTabBarItem.element.style.left = newLeft + "px";
- var selectedTabMidX = newLeft + (this._selectedTabBarItem.element.getBoundingClientRect().width / 2);
+ var selectedTabMidX = newLeft + (this._selectedTabBarItem.element.realOffsetWidth / 2);
var currentIndex = this._tabBarItems.indexOf(this._selectedTabBarItem);
var newIndex = currentIndex;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Toolbar.js (183564 => 183565)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Toolbar.js 2015-04-29 19:00:12 UTC (rev 183564)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Toolbar.js 2015-04-29 19:19:26 UTC (rev 183565)
@@ -171,14 +171,14 @@
function isOverflowingToolbar()
{
- var controlSectionWidth = this._controlSectionElement.getBoundingClientRect().width;
- var leftSectionWidth = this._leftSectionElement.getBoundingClientRect().width;
- var centerLeftSectionWidth = this._centerLeftSectionElement.getBoundingClientRect().width;
- var centerSectionWidth = this._centerSectionElement.getBoundingClientRect().width;
- var centerRightSectionWidth = this._centerRightSectionElement.getBoundingClientRect().width;
- var rightSectionWidth = this._rightSectionElement.getBoundingClientRect().width;
+ var controlSectionWidth = this._controlSectionElement.realOffsetWidth;
+ var leftSectionWidth = this._leftSectionElement.realOffsetWidth;
+ var centerLeftSectionWidth = this._centerLeftSectionElement.realOffsetWidth;
+ var centerSectionWidth = this._centerSectionElement.realOffsetWidth;
+ var centerRightSectionWidth = this._centerRightSectionElement.realOffsetWidth;
+ var rightSectionWidth = this._rightSectionElement.realOffsetWidth;
- var toolbarWidth = Math.round(this.element.getBoundingClientRect().width);
+ var toolbarWidth = Math.round(this.element.realOffsetWidth);
return Math.round(controlSectionWidth + leftSectionWidth + centerLeftSectionWidth + centerSectionWidth + centerRightSectionWidth + rightSectionWidth) > toolbarWidth;
}
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
