Attachment 340634 Details for Bug 178489 – Patch

[patch] Patch

bug-178489-20180517135532.patch (text/plain), 11.65 KB, created by Devin Rousso on 2018-05-17 13:55:33 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Devin Rousso

Created: 2018-05-17 13:55:33 PDT

Size: 11.65 KB

patch

obsolete

>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
>index c736e200fd8d994892a46a4435c676a854fbd5cb..4fb5f4b1bf1f6db145baaaba8bbd329cfb3fd186 100644
>--- a/Source/WebInspectorUI/ChangeLog
>+++ b/Source/WebInspectorUI/ChangeLog
>@@ -1,3 +1,36 @@
>+2018-05-17  Devin Rousso  <webkit@devinrousso.com>
>+
>+        Web Inspector: Styles Redesign: Editing selector should not hide the rule
>+        https://bugs.webkit.org/show_bug.cgi?id=178489
>+        <rdar://problem/35062434>
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        Whenever a SpreadsheetCSSStyleDeclarationSection is focused, we notify it's delegate
>+        (`WI.SpreadsheetRulesStyleDetailsPanel`), which keeps track of the focused section. When a
>+        refresh is triggered, only reset the content if the focused section is one of the currently
>+        matched styles. If not, we will remove that section once another section is focused.
>+
>+        * UserInterface/Models/CSSRule.js:
>+        (WI.CSSRule.prototype._selectorResolved):
>+        Pass along the new selector list.
>+
>+        * UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js:
>+        (WI.SpreadsheetRulesStyleDetailsPanel):
>+        (WI.SpreadsheetRulesStyleDetailsPanel.prototype.layout):
>+        (WI.SpreadsheetRulesStyleDetailsPanel.prototype._focusedSectionDoesNotRelateToNode): Added.
>+        (WI.SpreadsheetRulesStyleDetailsPanel.prototype._handleSectionFocused): Added.
>+
>+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js:
>+        (WI.SpreadsheetCSSStyleDeclarationSection.prototype.initialLayout):
>+        (WI.SpreadsheetCSSStyleDeclarationSection.prototype.layout.createSection):
>+        (WI.SpreadsheetCSSStyleDeclarationSection.prototype.spreadsheetSelectorFieldDidChange):
>+        (WI.SpreadsheetCSSStyleDeclarationSection.prototype._discardSelectorChange):
>+        (WI.SpreadsheetCSSStyleDeclarationSection.prototype._renderSelectors): Added.
>+        (WI.SpreadsheetCSSStyleDeclarationSection.prototype._handleFocus): ADded.
>+        (WI.SpreadsheetCSSStyleDeclarationSection.prototype._handleSelectorChanged): ADded.
>+        (WI.SpreadsheetCSSStyleDeclarationSection.prototype._renderSelector): Deleted.
>+
> 2018-05-16  Devin Rousso  <webkit@devinrousso.com>
> 
>         Web Inspector: create a navigation item for toggling the overlay rulers/guides
>diff --git a/Source/WebInspectorUI/UserInterface/Models/CSSRule.js b/Source/WebInspectorUI/UserInterface/Models/CSSRule.js
>index a327b14449801efafd364b6f2e3f129bc4dd8769..4121730b7485d76e146322200501e056ee939803 100644
>--- a/Source/WebInspectorUI/UserInterface/Models/CSSRule.js
>+++ b/Source/WebInspectorUI/UserInterface/Models/CSSRule.js
>@@ -247,7 +247,10 @@ WI.CSSRule = class CSSRule extends WI.Object
> 
>     _selectorResolved(rulePayload)
>     {
>-        this.dispatchEventToListeners(WI.CSSRule.Event.SelectorChanged, {valid: !!rulePayload});
>+        this.dispatchEventToListeners(WI.CSSRule.Event.SelectorChanged, {
>+            valid: !!rulePayload,
>+            selectors: rulePayload ? rulePayload.selectorList.selectors : this._selectors,
>+        });
>     }
> };
> 
>diff --git a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js
>index 7e9be5ae1baefb027d789d86cfe00b2a03dfa19f..e9ddf7dbb4a2f334c60c6bec36b36e427ffb7131 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js
>@@ -101,6 +101,7 @@ WI.SpreadsheetCSSStyleDeclarationSection = class SpreadsheetCSSStyleDeclarationS
> 
>         if (this._style.editable) {
>             this.element.addEventListener("click", this._handleClick.bind(this));
>+            this.element.addEventListener("focus", this._handleFocus.bind(this), {capture: true});
>             this.element.addEventListener("mousedown", this._handleMouseDown.bind(this));
> 
>             new WI.KeyboardShortcut(WI.KeyboardShortcut.Modifier.CommandOrControl, "S", this._save.bind(this), this._element);
>@@ -113,7 +114,7 @@ WI.SpreadsheetCSSStyleDeclarationSection = class SpreadsheetCSSStyleDeclarationS
>         super.layout();
> 
>         this._renderOrigin();
>-        this._renderSelector();
>+        this._renderSelectors();
> 
>         if (this._shouldFocusSelectorElement)
>             this.startEditingRuleSelector();
>@@ -168,7 +169,7 @@ WI.SpreadsheetCSSStyleDeclarationSection = class SpreadsheetCSSStyleDeclarationS
>         if (!selectorText || selectorText === this._style.ownerRule.selectorText)
>             this._discardSelectorChange();
>         else {
>-            this._style.ownerRule.singleFireEventListener(WI.CSSRule.Event.SelectorChanged, this._renderSelector, this);
>+            this._style.ownerRule.singleFireEventListener(WI.CSSRule.Event.SelectorChanged, this._handleSelectorChanged, this);
>             this._style.ownerRule.selectorText = selectorText;
>         }
> 
>@@ -220,18 +221,16 @@ WI.SpreadsheetCSSStyleDeclarationSection = class SpreadsheetCSSStyleDeclarationS
> 
>     _discardSelectorChange()
>     {
>-        // Re-render selector for syntax highlighting.
>-        this._renderSelector();
>+        // Re-render selectors for syntax highlighting.
>+        this._renderSelectors();
>     }
> 
>-    _renderSelector()
>+    _renderSelectors(selectors)
>     {
>         this._selectorElement.removeChildren();
>         this._selectorElements = [];
> 
>         let appendSelector = (selector, matched) => {
>-            console.assert(selector instanceof WI.CSSSelector);
>-
>             let selectorElement = this._selectorElement.appendChild(document.createElement("span"));
>             selectorElement.textContent = selector.text;
> 
>@@ -269,20 +268,19 @@ WI.SpreadsheetCSSStyleDeclarationSection = class SpreadsheetCSSStyleDeclarationS
>         case WI.CSSStyleDeclaration.Type.Rule:
>             console.assert(this._style.ownerRule);
> 
>-            var selectors = this._style.ownerRule.selectors;
>+            if (!selectors)
>+                selectors = this._style.ownerRule.selectors;
>+
>             var matchedSelectorIndices = this._style.ownerRule.matchedSelectorIndices;
>             var alwaysMatch = !matchedSelectorIndices.length;
>             if (selectors.length) {
>-                let hasMatchingPseudoElementSelector = false;
>                 for (let i = 0; i < selectors.length; ++i) {
>-                    appendSelector(selectors[i], alwaysMatch || matchedSelectorIndices.includes(i));
>+                    let usingCustomSelectors = selectors !== this._style.ownerRule.selectors;
>+                    let matched = !usingCustomSelectors && (alwaysMatch || matchedSelectorIndices.includes(i));
>+                    appendSelector(selectors[i], matched);
>                     if (i < selectors.length - 1)
>                         this._selectorElement.append(", ");
>-
>-                    if (matchedSelectorIndices.includes(i) && selectors[i].isPseudoElementSelector())
>-                        hasMatchingPseudoElementSelector = true;
>                 }
>-                this._element.classList.toggle("pseudo-element-selector", hasMatchingPseudoElementSelector);
>             } else
>                 appendSelectorTextKnownToMatch(this._style.ownerRule.selectorText);
> 
>@@ -428,6 +426,11 @@ WI.SpreadsheetCSSStyleDeclarationSection = class SpreadsheetCSSStyleDeclarationS
>         WI.saveDataToFile({url: url, content: sourceCode.content}, saveAs);
>     }
> 
>+    _handleFocus(event)
>+    {
>+        this.dispatchEventToListeners(WI.SpreadsheetCSSStyleDeclarationSection.Event.Focused);
>+    }
>+
>     _handleMouseDown(event)
>     {
>         this._wasEditing = this._propertiesEditor.editing || document.activeElement === this._selectorElement;
>@@ -460,6 +463,11 @@ WI.SpreadsheetCSSStyleDeclarationSection = class SpreadsheetCSSStyleDeclarationS
>         }
>     }
> 
>+    _handleSelectorChanged(event)
>+    {
>+        this._renderSelectors(event.data.selectors);
>+    }
>+
>     _highlightNodesWithSelector()
>     {
>         if (!this._style.ownerRule) {
>@@ -507,6 +515,7 @@ WI.SpreadsheetCSSStyleDeclarationSection = class SpreadsheetCSSStyleDeclarationS
> };
> 
> WI.SpreadsheetCSSStyleDeclarationSection.Event = {
>+    Focused: "spreadsheet-css-style-declaration-section-focused",
>     FilterApplied: "spreadsheet-css-style-declaration-section-filter-applied",
> };
> 
>diff --git a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js
>index 6683613da649deaedd8ca7628378451b62356fe2..00aa36f2cbed5abb770dafcb14237ca918dfef2f 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js
>@@ -39,6 +39,7 @@ WI.SpreadsheetRulesStyleDetailsPanel = class SpreadsheetRulesStyleDetailsPanel e
> 
>         this._headerMap = new Map;
>         this._sections = [];
>+        this._focusedSection = null;
>         this._newRuleSelector = null;
>         this._ruleMediaAndInherticanceList = [];
>         this._propertyToSelectAndHighlight = null;
>@@ -211,6 +212,9 @@ WI.SpreadsheetRulesStyleDetailsPanel = class SpreadsheetRulesStyleDetailsPanel e
> 
>         this._shouldRefreshSubviews = false;
> 
>+        if (this._focusedSectionDoesNotRelateToNode())
>+            return;
>+
>         this.removeAllSubviews();
> 
>         let previousStyle = null;
>@@ -260,6 +264,7 @@ WI.SpreadsheetRulesStyleDetailsPanel = class SpreadsheetRulesStyleDetailsPanel e
>                 style[WI.SpreadsheetRulesStyleDetailsPanel.RuleSection] = section;
>             }
> 
>+            section.addEventListener(WI.SpreadsheetCSSStyleDeclarationSection.Event.Focused, this._handleSectionFocused, this);
>             section.addEventListener(WI.SpreadsheetCSSStyleDeclarationSection.Event.FilterApplied, this._handleSectionFilterApplied, this);
> 
>             if (this._newRuleSelector === style.selectorText && !style.hasProperties())
>@@ -290,6 +295,7 @@ WI.SpreadsheetRulesStyleDetailsPanel = class SpreadsheetRulesStyleDetailsPanel e
>             }
>         });
> 
>+        this._focusedSection = null;
>         this._newRuleSelector = null;
> 
>         this.element.append(this._emptyFilterResultsElement);
>@@ -307,6 +313,38 @@ WI.SpreadsheetRulesStyleDetailsPanel = class SpreadsheetRulesStyleDetailsPanel e
> 
>     // Private
> 
>+    _focusedSectionDoesNotRelateToNode()
>+    {
>+        if (!this._focusedSection)
>+            return false;
>+
>+        let style = this._focusedSection.style;
>+        if (!style.inherited && style.node !== this.nodeStyles.node && !this.nodeStyles.node.pseudoElements().has(style.node))
>+            return false;
>+
>+        return !this.nodeStyles.orderedStyles.includes(style);
>+    }
>+
>+    _handleSectionFocused(event)
>+    {
>+        if (this._focusedSection === event.target)
>+            return;
>+
>+        if (this._focusedSectionDoesNotRelateToNode()) {
>+            this._sections.remove(this._focusedSection);
>+            this.removeSubview(this._focusedSection);
>+
>+            let node = this._focusedSection.style.node;
>+            let header = this._headerMap.get(node);
>+            if (header && this._sections.every((section) => section.style.node !== node)) {
>+                this._headerMap.delete(node);
>+                header.remove();
>+            }
>+        }
>+
>+        this._focusedSection = event.target;
>+    }
>+
>     _handleSectionFilterApplied(event)
>     {
>         if (!event.data.matches)
>@@ -319,8 +357,6 @@ WI.SpreadsheetRulesStyleDetailsPanel = class SpreadsheetRulesStyleDetailsPanel e
>             header.classList.remove(WI.GeneralStyleDetailsSidebarPanel.NoFilterMatchInSectionClassName);
>     }
> 
>-    // Private
>-
>     _addNewRule(stylesheetId)
>     {
>         const justSelector = true;

Actions: View | Formatted Diff | Diff

Attachments on bug 178489: 329468 | 335759 | 335764 | 340634 | 340679 | 356749 | 357995 | 358002 | 358003 | 360915 | 365415 | 365434 | 365436