Title: [260978] trunk/Source/WebInspectorUI
- Revision
- 260978
- Author
- nvasil...@apple.com
- Date
- 2020-04-30 19:20:44 -0700 (Thu, 30 Apr 2020)
Log Message
Web Inspector: Computed: shouldn't display focus outline on click
https://bugs.webkit.org/show_bug.cgi?id=211118
<rdar://problem/62491002>
Reviewed by Devin Rousso.
- CSS property view is no longer focusable.
- Disclosure triangle is now tabbable.
* UserInterface/Views/ComputedStyleSection.css:
(.computed-style-section .computed-property-item):
(.computed-style-section .computed-property-item.expanded):
(.computed-style-section .computed-property-item > .disclosure-button:focus):
* UserInterface/Views/ExpandableView.js:
(WI.ExpandableView):
(WI.ExpandableView.prototype._onDisclosureButtonClick):
(WI.ExpandableView.prototype._update):
Drive-by: add `ariaExpanded` so VoiceOver reads whether it's expanded or collapsed.
* UserInterface/Views/SpreadsheetStyleProperty.js:
Remove tabIndex so we don't show any focus outline around the entire CSS property view.
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (260977 => 260978)
--- trunk/Source/WebInspectorUI/ChangeLog 2020-05-01 01:47:47 UTC (rev 260977)
+++ trunk/Source/WebInspectorUI/ChangeLog 2020-05-01 02:20:44 UTC (rev 260978)
@@ -1,3 +1,27 @@
+2020-04-30 Nikita Vasilyev <nvasil...@apple.com>
+
+ Web Inspector: Computed: shouldn't display focus outline on click
+ https://bugs.webkit.org/show_bug.cgi?id=211118
+ <rdar://problem/62491002>
+
+ Reviewed by Devin Rousso.
+
+ - CSS property view is no longer focusable.
+ - Disclosure triangle is now tabbable.
+
+ * UserInterface/Views/ComputedStyleSection.css:
+ (.computed-style-section .computed-property-item):
+ (.computed-style-section .computed-property-item.expanded):
+ (.computed-style-section .computed-property-item > .disclosure-button:focus):
+ * UserInterface/Views/ExpandableView.js:
+ (WI.ExpandableView):
+ (WI.ExpandableView.prototype._onDisclosureButtonClick):
+ (WI.ExpandableView.prototype._update):
+ Drive-by: add `ariaExpanded` so VoiceOver reads whether it's expanded or collapsed.
+
+ * UserInterface/Views/SpreadsheetStyleProperty.js:
+ Remove tabIndex so we don't show any focus outline around the entire CSS property view.
+
2020-04-30 Devin Rousso <drou...@apple.com>
WebKit.WebContent process crashes when web developer tools are opened in Safari
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleSection.css (260977 => 260978)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleSection.css 2020-05-01 01:47:47 UTC (rev 260977)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleSection.css 2020-05-01 02:20:44 UTC (rev 260978)
@@ -32,10 +32,9 @@
.computed-style-section .computed-property-item {
box-sizing: border-box;
max-width: 100%;
- min-height: var(--disclosure-button-size);
+ min-height: calc(var(--disclosure-button-size));
padding-left: calc(var(--disclosure-button-size) + 6px);
padding-right: var(--css-declaration-horizontal-padding);
- border-top: 0.5px solid transparent;
overflow: hidden;
text-overflow: ellipsis;
}
@@ -43,13 +42,20 @@
.computed-style-section .computed-property-item.expanded {
padding-bottom: 2px;
background-color: hsl(0, 0%, 97%);
- border-top-color: var(--text-color-quaternary);
+ border-top: 0.5px solid var(--text-color-quaternary);
+ border-bottom: 0.5px solid var(--text-color-quaternary);
}
-.computed-style-section .computed-property-item.expanded + .computed-property-item {
- border-top-color: var(--text-color-quaternary);
+.computed-style-section .computed-property-item.expanded + .computed-property-item.expanded {
+ border-top: none;
}
+.computed-style-section .computed-property-item > .disclosure-button:focus {
+ outline: auto -webkit-focus-ring-color;
+ outline-offset: -3px; /* Make focus outline smaller than usual so it doesn't get clipped here. */
+ border-radius: calc((var(--disclosure-button-size) / 2) - 2px);
+}
+
.computed-style-section .computed-property-item .disclosure-button {
display: inline-block;
width: var(--disclosure-button-size);
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ExpandableView.js (260977 => 260978)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ExpandableView.js 2020-05-01 01:47:47 UTC (rev 260977)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ExpandableView.js 2020-05-01 02:20:44 UTC (rev 260978)
@@ -30,19 +30,17 @@
this._element = document.createElement("div");
if (childElement) {
- let disclosureButton = document.createElement("button");
- disclosureButton.classList.add("disclosure-button");
- disclosureButton.addEventListener("click", this._onDisclosureButtonClick.bind(this));
- this._element.append(disclosureButton);
+ this._disclosureButton = this._element.createChild("button", "disclosure-button");
+ this._disclosureButton.addEventListener("click", this._onDisclosureButtonClick.bind(this));
}
this._element.append(titleElement);
this._expandedSetting = new WI.Setting("expanded-" + key, false);
- if (childElement) {
+ if (childElement)
this._element.append(childElement);
- this._element.classList.toggle("expanded", this._expandedSetting.value);
- }
+
+ this._update();
}
// Public
@@ -56,13 +54,14 @@
_onDisclosureButtonClick(event)
{
- let shouldExpand = !this._expandedSetting.value;
- this._update(shouldExpand);
+ this._expandedSetting.value = !this._expandedSetting.value;
+ this._update();
}
- _update(shouldExpand)
+ _update()
{
- this._element.classList.toggle("expanded", shouldExpand);
- this._expandedSetting.value = shouldExpand;
+ let isExpanded = this._expandedSetting.value;
+ this._element.classList.toggle("expanded", isExpanded);
+ this._disclosureButton?.setAttribute("aria-expanded", isExpanded);
}
};
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js (260977 => 260978)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js 2020-05-01 01:47:47 UTC (rev 260977)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js 2020-05-01 02:20:44 UTC (rev 260978)
@@ -52,7 +52,6 @@
property.addEventListener(WI.CSSProperty.Event.Changed, this.updateStatus, this);
if (!this._readOnly) {
- this._element.tabIndex = -1;
property.addEventListener(WI.CSSProperty.Event.ModifiedChanged, this.updateStatus, this);
this._element.addEventListener("blur", (event) => {
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes
