Title: [261962] trunk/Source/WebInspectorUI
- Revision
- 261962
- Author
- nvasil...@apple.com
- Date
- 2020-05-20 15:08:13 -0700 (Wed, 20 May 2020)
Log Message
Web Inspector: Left/Right arrow keys should collapse/expand details sections
https://bugs.webkit.org/show_bug.cgi?id=212064
<rdar://problem/63384091>
Reviewed by Devin Rousso.
* UserInterface/Views/DetailsSection.js:
(WI.DetailsSection):
(WI.DetailsSection.prototype._headerElementClicked):
(WI.DetailsSection.prototype._handleHeaderElementKeyDown):
Use keydown event instead of keypress because the latter doesn't fire for arrow keys.
Drive-by: remove unused `expandedByUser`.
* UserInterface/Views/ExpandableView.js:
(WI.ExpandableView):
(WI.ExpandableView.prototype._handleDisclosureButtonKeyDown):
Computed panel items should also collapse/expand by pressing Left/Right keys.
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (261961 => 261962)
--- trunk/Source/WebInspectorUI/ChangeLog 2020-05-20 21:51:57 UTC (rev 261961)
+++ trunk/Source/WebInspectorUI/ChangeLog 2020-05-20 22:08:13 UTC (rev 261962)
@@ -1,5 +1,25 @@
2020-05-20 Nikita Vasilyev <nvasil...@apple.com>
+ Web Inspector: Left/Right arrow keys should collapse/expand details sections
+ https://bugs.webkit.org/show_bug.cgi?id=212064
+ <rdar://problem/63384091>
+
+ Reviewed by Devin Rousso.
+
+ * UserInterface/Views/DetailsSection.js:
+ (WI.DetailsSection):
+ (WI.DetailsSection.prototype._headerElementClicked):
+ (WI.DetailsSection.prototype._handleHeaderElementKeyDown):
+ Use keydown event instead of keypress because the latter doesn't fire for arrow keys.
+ Drive-by: remove unused `expandedByUser`.
+
+ * UserInterface/Views/ExpandableView.js:
+ (WI.ExpandableView):
+ (WI.ExpandableView.prototype._handleDisclosureButtonKeyDown):
+ Computed panel items should also collapse/expand by pressing Left/Right keys.
+
+2020-05-20 Nikita Vasilyev <nvasil...@apple.com>
+
REGRESSION(r260978): Web Inspector: Styles: Pressing Space no longer toggles selected properties
https://bugs.webkit.org/show_bug.cgi?id=212121
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSection.js (261961 => 261962)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSection.js 2020-05-20 21:51:57 UTC (rev 261961)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSection.js 2020-05-20 22:08:13 UTC (rev 261962)
@@ -37,7 +37,7 @@
this._headerElement = document.createElement("div");
this._headerElement.addEventListener("mousedown", this._headerElementMouseDown.bind(this));
this._headerElement.addEventListener("click", this._headerElementClicked.bind(this));
- this._headerElement.addEventListener("keypress", this._headerElementKeyPress.bind(this));
+ this._headerElement.addEventListener("keydown", this._handleHeaderElementKeyDown.bind(this));
this._headerElement.className = "header";
this._headerElement.tabIndex = 0;
this._element.appendChild(this._headerElement);
@@ -63,7 +63,6 @@
this._collapsedSetting = new WI.Setting(identifier + "-details-section-collapsed", !!defaultCollapsedSettingValue);
this.collapsed = this._collapsedSetting.value;
- this._expandedByUser = false;
}
// Public
@@ -127,11 +126,6 @@
this._contentElement.appendChild(this._groups[i].element);
}
- get expandedByUser()
- {
- return this._expandedByUser;
- }
-
// Private
_headerElementMouseDown(event)
@@ -153,21 +147,32 @@
let collapsed = this.collapsed;
this.collapsed = !collapsed;
- this._expandedByUser = collapsed;
this._element.scrollIntoViewIfNeeded(false);
}
- _headerElementKeyPress(event)
+ _handleHeaderElementKeyDown(event)
{
- if (event.code === "Space" || event.code === "Enter") {
- if (this._optionsElement?.contains(event.target))
- return;
+ let isSpaceOrEnterKey = event.code === "Space" || event.code === "Enter";
+ if (!isSpaceOrEnterKey && event.code !== "ArrowLeft" && event.code !== "ArrowRight")
+ return;
- let collapsed = this.collapsed;
- this.collapsed = !collapsed;
- this._expandedByUser = collapsed;
+ if (this._optionsElement?.contains(event.target))
+ return;
+
+ event.preventDefault();
+
+ if (isSpaceOrEnterKey) {
+ this.collapsed = !this.collapsed;
+ return;
}
+
+ let collapsed = event.code === "ArrowLeft";
+
+ if (WI.resolveLayoutDirectionForElement(this._headerElement) === WI.LayoutDirection.RTL)
+ collapsed = !collapsed;
+
+ this.collapsed = collapsed;
}
_optionsElementMouseDown(event)
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ExpandableView.js (261961 => 261962)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ExpandableView.js 2020-05-20 21:51:57 UTC (rev 261961)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ExpandableView.js 2020-05-20 22:08:13 UTC (rev 261962)
@@ -32,6 +32,7 @@
if (childElement) {
this._disclosureButton = this._element.createChild("button", "disclosure-button");
this._disclosureButton.addEventListener("click", this._onDisclosureButtonClick.bind(this));
+ this._disclosureButton.addEventListener("keydown", this._handleDisclosureButtonKeyDown.bind(this));
}
this._element.append(titleElement);
@@ -58,6 +59,21 @@
this._update();
}
+ _handleDisclosureButtonKeyDown(event)
+ {
+ if (event.code !== "ArrowRight" && event.code !== "ArrowLeft")
+ return;
+
+ event.preventDefault();
+
+ let collapsed = event.code === "ArrowLeft";
+ if (WI.resolveLayoutDirectionForElement(this._disclosureButton) === WI.LayoutDirection.RTL)
+ collapsed = !collapsed;
+
+ this._expandedSetting.value = !collapsed;
+ this._update();
+ }
+
_update()
{
let isExpanded = this._expandedSetting.value;
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes
