Attachment 339369 Details for Bug 181973 – Patch

[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:

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()

Actions: View | Formatted Diff | Diff

Attachments on bug 181973: 332001 | 332944 | 334330 | 335760 | 335794 | 339232 | 339369