WebKit Bugzilla
Attachment 339369 Details for
Bug 181973
: Web Inspector: Styles Redesign: ensure that tabbing through the last section wraps back to the first
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Requests
|
Help
|
New Account
|
Log In
Remember
[x]
|
Forgot Password
Login:
[x]
[patch]
Patch
bug-181973-20180502172227.patch (text/plain), 18.89 KB, created by
Devin Rousso
on 2018-05-02 17:22:28 PDT
(
hide
)
Description:
Patch
Filename:
MIME Type:
Creator:
Devin Rousso
Created:
2018-05-02 17:22:28 PDT
Size:
18.89 KB
patch
obsolete
>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog >index 475f11d135abd9c4ad227e1822121292bfaacfd1..046ecc717a8555c70babd443cbca64b67f1490c6 100644 >--- a/Source/WebInspectorUI/ChangeLog >+++ b/Source/WebInspectorUI/ChangeLog >@@ -1,3 +1,48 @@ >+2018-05-02 Devin Rousso <webkit@devinrousso.com> >+ >+ Web Inspector: Styles Redesign: ensure that tabbing through the last section wraps back to the first >+ https://bugs.webkit.org/show_bug.cgi?id=181973 >+ >+ Reviewed by NOBODY (OOPS!). >+ >+ Unified delegate functions to start editing previous/next rules into a single function for >+ simplicity. >+ >+ * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js: >+ (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.spreadsheetCSSStyleDeclarationEditorFocusMoved): >+ >+ * UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js: >+ (WI.SpreadsheetCSSStyleDeclarationSection.prototype.startEditingRuleSelector): >+ (WI.SpreadsheetCSSStyleDeclarationSection.prototype.spreadsheetSelectorFieldDidChange): >+ (WI.SpreadsheetCSSStyleDeclarationSection.prototype.spreadsheetCSSStyleDeclarationEditorStartEditingAdjacentRule): >+ (WI.SpreadsheetCSSStyleDeclarationSection.prototype.cssStyleDeclarationEditorStartEditingAdjacentRule): Deleted. >+ >+ * UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js: >+ (WI.SpreadsheetRulesStyleDetailsPanel.prototype.focusFirstSection): >+ (WI.SpreadsheetRulesStyleDetailsPanel.prototype.focusLastSection): >+ (WI.SpreadsheetRulesStyleDetailsPanel.prototype.spreadsheetCSSStyleDeclarationSectionStartEditingAdjacentRule): >+ (WI.SpreadsheetRulesStyleDetailsPanel.prototype.cssStyleDeclarationSectionStartEditingNextRule): Deleted. >+ (WI.SpreadsheetRulesStyleDetailsPanel.prototype.cssStyleDeclarationSectionStartEditingPreviousRule): Deleted. >+ >+ * UserInterface/Views/GeneralStyleDetailsSidebarPanel.js: >+ (WI.GeneralStyleDetailsSidebarPanel.prototype.styleDetailsPanelFocusLastPseudoClassCheckbox): >+ (WI.GeneralStyleDetailsSidebarPanel.prototype.styleDetailsPanelFocusFilterBar): >+ (WI.GeneralStyleDetailsSidebarPanel.prototype.initialLayout): >+ (WI.GeneralStyleDetailsSidebarPanel.prototype._handleForcedPseudoClassCheckboxKeydown): >+ (WI.GeneralStyleDetailsSidebarPanel.prototype._forcedPseudoClassCheckboxChanged): >+ (WI.GeneralStyleDetailsSidebarPanel.prototype._handleFilterBarInputFieldKeyDown): >+ >+ Drive-by fix: provide tabbing support for the Computed styles panel. >+ >+ * UserInterface/Views/CSSStyleDeclarationTextEditor.js: >+ (WI.CSSStyleDeclarationTextEditor.prototype._handleShiftTabKey.switchRule): >+ (WI.CSSStyleDeclarationTextEditor.prototype._handleTabKey.switchRule): >+ >+ * UserInterface/Views/ComputedStyleDetailsPanel.js: >+ (WI.ComputedStyleDetailsPanel.prototype.focusFirstSection): >+ (WI.ComputedStyleDetailsPanel.prototype.focusLastSection): >+ (WI.ComputedStyleDetailsPanel.prototype.cssStyleDeclarationTextEditorStartEditingAdjacentRule): >+ > 2018-05-01 Devin Rousso <webkit@devinrousso.com> > > Web Inspector: Canvas tab: determine hasVisibleEffect for all actions immediately after recording is added >diff --git a/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js b/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js >index ca9a9f8fe770d28082068c43761301ce54709391..75b4dd9d7bf58f137afb2b20d2af26ef8126bf1b 100644 >--- a/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js >+++ b/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js >@@ -581,8 +581,9 @@ WI.CSSStyleDeclarationTextEditor = class CSSStyleDeclarationTextEditor extends W > { > function switchRule() > { >- if (this._delegate && typeof this._delegate.cssStyleDeclarationEditorStartEditingAdjacentRule === "function") { >- this._delegate.cssStyleDeclarationEditorStartEditingAdjacentRule(true); >+ if (this._delegate && typeof this._delegate.cssStyleDeclarationTextEditorStartEditingAdjacentRule === "function") { >+ const backward = true; >+ this._delegate.cssStyleDeclarationTextEditorStartEditingAdjacentRule(this, backward); > return; > } > >@@ -637,8 +638,8 @@ WI.CSSStyleDeclarationTextEditor = class CSSStyleDeclarationTextEditor extends W > _handleTabKey(codeMirror) > { > function switchRule() { >- if (this._delegate && typeof this._delegate.cssStyleDeclarationEditorStartEditingAdjacentRule === "function") { >- this._delegate.cssStyleDeclarationEditorStartEditingAdjacentRule(); >+ if (this._delegate && typeof this._delegate.cssStyleDeclarationTextEditorStartEditingAdjacentRule === "function") { >+ this._delegate.cssStyleDeclarationTextEditorStartEditingAdjacentRule(this); > return; > } > >diff --git a/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js b/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js >index ff964769a996cb5c1962214b408eb9a6e8594ed2..b24504d4af06c34272e96c61793ae74e4719f957 100644 >--- a/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js >+++ b/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js >@@ -98,6 +98,37 @@ WI.ComputedStyleDetailsPanel = class ComputedStyleDetailsPanel extends WI.StyleD > this._variablesTextEditor.removeNonMatchingProperties(filterText); > } > >+ focusFirstSection() >+ { >+ this._propertiesTextEditor.focus(); >+ } >+ >+ focusLastSection() >+ { >+ this._variablesTextEditor.focus(); >+ } >+ >+ // CSSStyleDeclarationTextEditor delegate >+ >+ cssStyleDeclarationTextEditorStartEditingAdjacentRule(cssStyleDeclarationTextEditor, backward) >+ { >+ if (cssStyleDeclarationTextEditor === this._propertiesTextEditor) { >+ if (backward && this._delegate && this._delegate.styleDetailsPanelFocusLastPseudoClassCheckbox) { >+ this._delegate.styleDetailsPanelFocusLastPseudoClassCheckbox(this); >+ return; >+ } >+ >+ this._variablesTextEditor.focus(); >+ } else if (cssStyleDeclarationTextEditor === this._variablesTextEditor) { >+ if (!backward && this._delegate && this._delegate.styleDetailsPanelFocusFilterBar) { >+ this._delegate.styleDetailsPanelFocusFilterBar(this); >+ return; >+ } >+ >+ this._propertiesTextEditor.focus(); >+ } >+ } >+ > // Protected > > initialLayout() >diff --git a/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.js b/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.js >index 5b0f454b272dd7b174611cc7d1d224aacdf68554..c8b44da36f5d55fb8076d5d90837ae733cab0a6f 100644 >--- a/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.js >+++ b/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.js >@@ -80,6 +80,18 @@ WI.GeneralStyleDetailsSidebarPanel = class GeneralStyleDetailsSidebarPanel exten > styleRulesPanel.panel.scrollToSectionAndHighlightProperty(property); > } > >+ // StyleDetailsPanel delegate >+ >+ styleDetailsPanelFocusLastPseudoClassCheckbox(styleDetailsPanel) >+ { >+ this._forcedPseudoClassCheckboxes[WI.CSSStyleManager.ForceablePseudoClasses.lastValue].focus(); >+ } >+ >+ styleDetailsPanelFocusFilterBar(styleDetailsPanel) >+ { >+ this._filterBar.inputField.focus(); >+ } >+ > // Protected > > layout() >@@ -132,6 +144,7 @@ WI.GeneralStyleDetailsSidebarPanel = class GeneralStyleDetailsSidebarPanel exten > let labelElement = document.createElement("label"); > > let checkboxElement = document.createElement("input"); >+ checkboxElement.addEventListener("keydown", this._handleForcedPseudoClassCheckboxKeydown.bind(this, pseudoClass)); > checkboxElement.addEventListener("change", this._forcedPseudoClassCheckboxChanged.bind(this, pseudoClass)); > checkboxElement.type = "checkbox"; > >@@ -165,6 +178,7 @@ WI.GeneralStyleDetailsSidebarPanel = class GeneralStyleDetailsSidebarPanel exten > > this._filterBar = new WI.FilterBar; > this._filterBar.addEventListener(WI.FilterBar.Event.FilterDidChange, this._filterDidChange, this); >+ this._filterBar.inputField.addEventListener("keydown", this._handleFilterBarInputFieldKeyDown.bind(this)); > optionsContainer.appendChild(this._filterBar.element); > > this._classToggleButton = optionsContainer.createChild("button", "toggle-class-toggle"); >@@ -229,6 +243,32 @@ WI.GeneralStyleDetailsSidebarPanel = class GeneralStyleDetailsSidebarPanel exten > this._panel.shown(); > } > >+ _handleForcedPseudoClassCheckboxKeydown(pseudoClass, event) >+ { >+ if (event.key !== "Tab") >+ return; >+ >+ let pseudoClasses = WI.CSSStyleManager.ForceablePseudoClasses; >+ let index = pseudoClasses.indexOf(pseudoClass); >+ if (event.shiftKey) { >+ if (index > 0) { >+ this._forcedPseudoClassCheckboxes[pseudoClasses[index - 1]].focus(); >+ event.preventDefault(); >+ } else { >+ this._filterBar.inputField.focus(); >+ event.preventDefault(); >+ } >+ } else { >+ if (index < pseudoClasses.length - 1) { >+ this._forcedPseudoClassCheckboxes[pseudoClasses[index + 1]].focus(); >+ event.preventDefault(); >+ } else if (this._panel.focusFirstSection) { >+ this._panel.focusFirstSection(); >+ event.preventDefault(); >+ } >+ } >+ } >+ > _forcedPseudoClassCheckboxChanged(pseudoClass, event) > { > if (!this.domNode) >@@ -237,6 +277,8 @@ WI.GeneralStyleDetailsSidebarPanel = class GeneralStyleDetailsSidebarPanel exten > let effectiveDOMNode = this.domNode.isPseudoElement() ? this.domNode.parentNode : this.domNode; > > effectiveDOMNode.setPseudoClassEnabled(pseudoClass, event.target.checked); >+ >+ this._forcedPseudoClassCheckboxes[pseudoClass].focus(); > } > > _updatePseudoClassCheckboxes() >@@ -386,6 +428,22 @@ WI.GeneralStyleDetailsSidebarPanel = class GeneralStyleDetailsSidebarPanel exten > this._panel.filterDidChange(this._filterBar); > } > >+ _handleFilterBarInputFieldKeyDown(event) >+ { >+ if (event.key !== "Tab") >+ return; >+ >+ if (event.shiftKey) { >+ if (this._panel.focusLastSection) { >+ this._panel.focusLastSection(); >+ event.preventDefault(); >+ } >+ } else { >+ this._forcedPseudoClassCheckboxes[WI.CSSStyleManager.ForceablePseudoClasses[0]].focus(); >+ event.preventDefault(); >+ } >+ } >+ > _styleSheetAddedOrRemoved() > { > this.needsLayout(); >diff --git a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js >index 1eb022b1579a0765d6d04ddc97e4b6f4dd47970c..db68db83656689a3857ed94395e7b7d7bd937c4a 100644 >--- a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js >+++ b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js >@@ -248,9 +248,8 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd > propertyView.nameTextField.startEditing(); > else { > if (willRemoveProperty) { >- // Move from the last value in the rule to the next rule's selector. >- let reverse = false; >- this._delegate.cssStyleDeclarationEditorStartEditingAdjacentRule(reverse); >+ const delta = 1; >+ this._delegate.spreadsheetCSSStyleDeclarationEditorStartEditingAdjacentRule(this, delta); > } else { > const appendAfterLast = -1; > this.addBlankProperty(appendAfterLast); >@@ -260,11 +259,15 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd > let propertyView = this._editablePropertyBefore(movedFromIndex); > if (propertyView) { > // Move from the property's name to the previous enabled property's value. >- propertyView.valueTextField.startEditing() >+ propertyView.valueTextField.startEditing(); > } else { > // Move from the first property's name to the rule's selector. > if (this._style.selectorEditable) > this._delegate.cssStyleDeclarationTextEditorStartEditingRuleSelector(); >+ else { >+ const delta = -1; >+ this._delegate.spreadsheetCSSStyleDeclarationEditorStartEditingAdjacentRule(this, delta); >+ } > } > } > } >diff --git a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js >index 623ac23d880166fdc614b233e5fec146463411b2..7e9be5ae1baefb027d789d86cfe00b2a03dfa19f 100644 >--- a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js >+++ b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js >@@ -131,8 +131,12 @@ WI.SpreadsheetCSSStyleDeclarationSection = class SpreadsheetCSSStyleDeclarationS > return; > } > >- this._selectorElement.focus(); > this._shouldFocusSelectorElement = false; >+ >+ if (this._style.selectorEditable) >+ this._selectorElement.focus(); >+ else >+ this._propertiesEditor.startEditingFirstProperty(); > } > > highlightProperty(property) >@@ -176,8 +180,11 @@ WI.SpreadsheetCSSStyleDeclarationSection = class SpreadsheetCSSStyleDeclarationS > if (direction === "forward") > this._propertiesEditor.startEditingFirstProperty(); > else if (direction === "backward") { >- if (typeof this._delegate.cssStyleDeclarationSectionStartEditingPreviousRule === "function") >- this._delegate.cssStyleDeclarationSectionStartEditingPreviousRule(this); >+ if (this._delegate.spreadsheetCSSStyleDeclarationSectionStartEditingAdjacentRule) { >+ const delta = -1; >+ this._delegate.spreadsheetCSSStyleDeclarationSectionStartEditingAdjacentRule(this, delta); >+ } else >+ this._propertiesEditor.startEditingLastProperty(); > } > } > >@@ -188,15 +195,13 @@ WI.SpreadsheetCSSStyleDeclarationSection = class SpreadsheetCSSStyleDeclarationS > > // SpreadsheetCSSStyleDeclarationEditor delegate > >- cssStyleDeclarationEditorStartEditingAdjacentRule(toPreviousRule) >+ spreadsheetCSSStyleDeclarationEditorStartEditingAdjacentRule(propertiesEditor, delta) > { > if (!this._delegate) > return; > >- if (toPreviousRule && typeof this._delegate.cssStyleDeclarationSectionStartEditingPreviousRule === "function") >- this._delegate.cssStyleDeclarationSectionStartEditingPreviousRule(this); >- else if (!toPreviousRule && typeof this._delegate.cssStyleDeclarationSectionStartEditingNextRule === "function") >- this._delegate.cssStyleDeclarationSectionStartEditingNextRule(this); >+ if (this._delegate.spreadsheetCSSStyleDeclarationSectionStartEditingAdjacentRule) >+ this._delegate.spreadsheetCSSStyleDeclarationSectionStartEditingAdjacentRule(this, delta); > } > > applyFilter(filterText) >diff --git a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js >index 64424a334a9ecf6abfac2976ea80eea02f578649..6683613da649deaedd8ca7628378451b62356fe2 100644 >--- a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js >+++ b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js >@@ -130,31 +130,6 @@ WI.SpreadsheetRulesStyleDetailsPanel = class SpreadsheetRulesStyleDetailsPanel e > } > } > >- cssStyleDeclarationSectionStartEditingNextRule(currentSection) >- { >- let currentIndex = this._sections.indexOf(currentSection); >- let index = currentIndex < this._sections.length - 1 ? currentIndex + 1 : 0; >- this._sections[index].startEditingRuleSelector(); >- } >- >- cssStyleDeclarationSectionStartEditingPreviousRule(currentSection) >- { >- let index = this._sections.indexOf(currentSection); >- console.assert(index > -1); >- >- while (true) { >- index--; >- if (index < 0) >- break; >- >- let section = this._sections[index]; >- if (section.editable) { >- section._propertiesEditor.startEditingLastProperty(); >- break; >- } >- } >- } >- > applyFilter(filterText) > { > this._filterText = filterText; >@@ -172,6 +147,61 @@ WI.SpreadsheetRulesStyleDetailsPanel = class SpreadsheetRulesStyleDetailsPanel e > section.applyFilter(this._filterText); > } > >+ focusFirstSection() >+ { >+ this.spreadsheetCSSStyleDeclarationSectionStartEditingAdjacentRule(null, 1); >+ } >+ >+ focusLastSection() >+ { >+ this.spreadsheetCSSStyleDeclarationSectionStartEditingAdjacentRule(null, -1); >+ } >+ >+ // SpreadsheetCSSStyleDeclarationSection delegate >+ >+ spreadsheetCSSStyleDeclarationSectionStartEditingAdjacentRule(currentSection, delta) >+ { >+ console.assert(delta !== 0); >+ >+ let index = this._sections.indexOf(currentSection); >+ if (index < 0) { >+ if (delta < 0) >+ index = this._sections.length; >+ else if (delta > 0) >+ index = -1; >+ } >+ index += delta; >+ >+ while (this._sections[index] !== currentSection) { >+ if (index < 0) { >+ if (this._delegate && this._delegate.styleDetailsPanelFocusLastPseudoClassCheckbox) { >+ this._delegate.styleDetailsPanelFocusLastPseudoClassCheckbox(this); >+ break; >+ } >+ >+ index = this._sections.length - 1; >+ } else if (index >= this._sections.length) { >+ if (this._delegate && this._delegate.styleDetailsPanelFocusFilterBar) { >+ this._delegate.styleDetailsPanelFocusFilterBar(this); >+ break; >+ } >+ >+ index = 0; >+ } >+ >+ let section = this._sections[index]; >+ if (section.editable) { >+ if (delta < 0) >+ section._propertiesEditor.startEditingLastProperty(); >+ else >+ section.startEditingRuleSelector(); >+ break; >+ } >+ >+ index += delta; >+ } >+ } >+ > // Protected > > layout()
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Formatted Diff
|
Diff
Attachments on
bug 181973
:
332001
|
332944
|
334330
|
335760
|
335794
|
339232
| 339369