Changeset 260978 in webkit
- Timestamp:
- Apr 30, 2020 7:20:44 PM (4 years ago)
- Location:
- trunk/Source/WebInspectorUI
- Files:
-
- 4 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/Source/WebInspectorUI/ChangeLog
r260963 r260978 1 2020-04-30 Nikita Vasilyev <nvasilyev@apple.com> 2 3 Web Inspector: Computed: shouldn't display focus outline on click 4 https://bugs.webkit.org/show_bug.cgi?id=211118 5 <rdar://problem/62491002> 6 7 Reviewed by Devin Rousso. 8 9 - CSS property view is no longer focusable. 10 - Disclosure triangle is now tabbable. 11 12 * UserInterface/Views/ComputedStyleSection.css: 13 (.computed-style-section .computed-property-item): 14 (.computed-style-section .computed-property-item.expanded): 15 (.computed-style-section .computed-property-item > .disclosure-button:focus): 16 * UserInterface/Views/ExpandableView.js: 17 (WI.ExpandableView): 18 (WI.ExpandableView.prototype._onDisclosureButtonClick): 19 (WI.ExpandableView.prototype._update): 20 Drive-by: add `ariaExpanded` so VoiceOver reads whether it's expanded or collapsed. 21 22 * UserInterface/Views/SpreadsheetStyleProperty.js: 23 Remove tabIndex so we don't show any focus outline around the entire CSS property view. 24 1 25 2020-04-30 Devin Rousso <drousso@apple.com> 2 26 -
trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleSection.css
r248681 r260978 33 33 box-sizing: border-box; 34 34 max-width: 100%; 35 min-height: var(--disclosure-button-size);35 min-height: calc(var(--disclosure-button-size)); 36 36 padding-left: calc(var(--disclosure-button-size) + 6px); 37 37 padding-right: var(--css-declaration-horizontal-padding); 38 border-top: 0.5px solid transparent;39 38 overflow: hidden; 40 39 text-overflow: ellipsis; … … 44 43 padding-bottom: 2px; 45 44 background-color: hsl(0, 0%, 97%); 46 border-top-color: var(--text-color-quaternary); 45 border-top: 0.5px solid var(--text-color-quaternary); 46 border-bottom: 0.5px solid var(--text-color-quaternary); 47 47 } 48 48 49 .computed-style-section .computed-property-item.expanded + .computed-property-item { 50 border-top-color: var(--text-color-quaternary); 49 .computed-style-section .computed-property-item.expanded + .computed-property-item.expanded { 50 border-top: none; 51 } 52 53 .computed-style-section .computed-property-item > .disclosure-button:focus { 54 outline: auto -webkit-focus-ring-color; 55 outline-offset: -3px; /* Make focus outline smaller than usual so it doesn't get clipped here. */ 56 border-radius: calc((var(--disclosure-button-size) / 2) - 2px); 51 57 } 52 58 -
trunk/Source/WebInspectorUI/UserInterface/Views/ExpandableView.js
r238589 r260978 31 31 32 32 if (childElement) { 33 let disclosureButton = document.createElement("button"); 34 disclosureButton.classList.add("disclosure-button"); 35 disclosureButton.addEventListener("click", this._onDisclosureButtonClick.bind(this)); 36 this._element.append(disclosureButton); 33 this._disclosureButton = this._element.createChild("button", "disclosure-button"); 34 this._disclosureButton.addEventListener("click", this._onDisclosureButtonClick.bind(this)); 37 35 } 38 36 … … 40 38 this._expandedSetting = new WI.Setting("expanded-" + key, false); 41 39 42 if (childElement) {40 if (childElement) 43 41 this._element.append(childElement); 44 this._element.classList.toggle("expanded", this._expandedSetting.value); 45 }42 43 this._update(); 46 44 } 47 45 … … 57 55 _onDisclosureButtonClick(event) 58 56 { 59 let shouldExpand= !this._expandedSetting.value;60 this._update( shouldExpand);57 this._expandedSetting.value = !this._expandedSetting.value; 58 this._update(); 61 59 } 62 60 63 _update( shouldExpand)61 _update() 64 62 { 65 this._element.classList.toggle("expanded", shouldExpand); 66 this._expandedSetting.value = shouldExpand; 63 let isExpanded = this._expandedSetting.value; 64 this._element.classList.toggle("expanded", isExpanded); 65 this._disclosureButton?.setAttribute("aria-expanded", isExpanded); 67 66 } 68 67 }; -
trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js
r260590 r260978 53 53 54 54 if (!this._readOnly) { 55 this._element.tabIndex = -1;56 55 property.addEventListener(WI.CSSProperty.Event.ModifiedChanged, this.updateStatus, this); 57 56
Note: See TracChangeset
for help on using the changeset viewer.