Title: [261127] trunk/Source/WebInspectorUI
- Revision
- 261127
- Author
- nvasil...@apple.com
- Date
- 2020-05-04 17:03:54 -0700 (Mon, 04 May 2020)
Log Message
Web Inspector: Tabs jiggle on click
https://bugs.webkit.org/show_bug.cgi?id=211177
<rdar://problem/62590810>
Reviewed by Devin Rousso.
Currently, tab dragging starts immediately after mouse down. With this patch,
dragging starts only after the mouse cursor moving 12 pixels. This roughly matches
macOS Safari tabs.
* UserInterface/Views/TabBar.js:
(WI.TabBar):
(WI.TabBar.prototype._handleTabContainerMouseDown):
(WI.TabBar.prototype._handleMouseUp):
(WI.TabBar.prototype._handleTabContainerMouseLeave):
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (261126 => 261127)
--- trunk/Source/WebInspectorUI/ChangeLog 2020-05-04 23:55:06 UTC (rev 261126)
+++ trunk/Source/WebInspectorUI/ChangeLog 2020-05-05 00:03:54 UTC (rev 261127)
@@ -1,3 +1,21 @@
+2020-05-04 Nikita Vasilyev <nvasil...@apple.com>
+
+ Web Inspector: Tabs jiggle on click
+ https://bugs.webkit.org/show_bug.cgi?id=211177
+ <rdar://problem/62590810>
+
+ Reviewed by Devin Rousso.
+
+ Currently, tab dragging starts immediately after mouse down. With this patch,
+ dragging starts only after the mouse cursor moving 12 pixels. This roughly matches
+ macOS Safari tabs.
+
+ * UserInterface/Views/TabBar.js:
+ (WI.TabBar):
+ (WI.TabBar.prototype._handleTabContainerMouseDown):
+ (WI.TabBar.prototype._handleMouseUp):
+ (WI.TabBar.prototype._handleTabContainerMouseLeave):
+
2020-05-04 Devin Rousso <drou...@apple.com>
Web Inspector: drop support for iOS 9.*
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.js (261126 => 261127)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.js 2020-05-04 23:55:06 UTC (rev 261126)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.js 2020-05-05 00:03:54 UTC (rev 261127)
@@ -66,6 +66,9 @@
this._tabPickerTabBarItem.hidden = true;
this._tabPickerTabBarItem.element.classList.add("tab-picker");
this.addTabBarItem(this._tabPickerTabBarItem, {suppressAnimations: true});
+
+ this._mouseDownPageX = NaN;
+ this._isDragging = false;
}
// Static
@@ -732,7 +735,7 @@
break;
}
- this._mouseIsDown = true;
+ this._mouseDownPageX = event.pageX;
this._mouseMovedEventListener = this._handleMouseMoved.bind(this);
this._mouseUpEventListener = this._handleMouseUp.bind(this);
@@ -784,8 +787,8 @@
_handleMouseMoved(event)
{
console.assert(event.button === 0);
- console.assert(this._mouseIsDown);
- if (!this._mouseIsDown)
+ console.assert(typeof this._mouseDownPageX === "number" && !isNaN(this._mouseDownPageX));
+ if (isNaN(this._mouseDownPageX))
return;
console.assert(this._selectedTabBarItem);
@@ -792,6 +795,17 @@
if (!this._selectedTabBarItem)
return;
+ if (this._mouseOffset === undefined)
+ this._mouseOffset = event.pageX - this._selectedTabBarItem.element.totalOffsetLeft;
+
+ if (!this._isDragging) {
+ const dragThreshold = 12;
+ if (Math.abs(this._mouseDownPageX - event.pageX) < dragThreshold)
+ return;
+
+ this._isDragging = true;
+ }
+
const tabBarLeftPadding = WI.TabBar.horizontalPadding / 2;
const tabBarItemHorizontalMargin = WI.TabBarItem.horizontalMargin;
@@ -806,9 +820,6 @@
let containerOffset = this._tabContainer.totalOffsetLeft;
- if (this._mouseOffset === undefined)
- this._mouseOffset = event.pageX - this._selectedTabBarItem.element.totalOffsetLeft;
-
let tabBarMouseOffset = event.pageX - containerOffset;
var newLeft = tabBarMouseOffset - this._mouseOffset;
@@ -882,8 +893,8 @@
_handleMouseUp(event)
{
console.assert(event.button === 0);
- console.assert(this._mouseIsDown);
- if (!this._mouseIsDown)
+ console.assert(typeof this._mouseDownPageX === "number" && !isNaN(this._mouseDownPageX));
+ if (isNaN(this._mouseDownPageX))
return;
this._tabContainer.classList.remove("dragging-tab");
@@ -900,7 +911,8 @@
}
}
- this._mouseIsDown = false;
+ this._isDragging = false;
+ this._mouseDownPageX = NaN;
this._mouseOffset = undefined;
document.removeEventListener("mousemove", this._mouseMovedEventListener, true);
@@ -917,7 +929,7 @@
_handleTabContainerMouseLeave(event)
{
- if (this._mouseIsDown || !this._tabAnimatedClosedSinceMouseEnter || !this._tabContainer.classList.contains("static-layout") || this._tabContainer.classList.contains("animating"))
+ if (!isNaN(this._mouseDownPageX) || !this._tabAnimatedClosedSinceMouseEnter || !this._tabContainer.classList.contains("static-layout") || this._tabContainer.classList.contains("animating"))
return;
// This event can still fire when the mouse is inside the element if DOM nodes are added, removed or generally change inside.
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes
