Changeset 248204 in webkit

Timestamp:

Aug 3, 2019 4:14:15 PM (5 years ago)

Author:

Devin Rousso

Message:

Web Inspector: Elements: Styles: move psuedo-selector rules before inherited rules
​https://bugs.webkit.org/show_bug.cgi?id=199950

Reviewed by Joseph Pecoraro.

Since pseudo-selector rules (usually) affect the selected element, or are related to its
content, it's more useful to have them near that element's rules instead of after all of
it's inherited rules.

• UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js:

(WI.SpreadsheetRulesStyleDetailsPanel.prototype.layout):

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js (modified) (1 diff)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2019-08-03  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: Elements: Styles: move psuedo-selector rules before inherited rules
+        https://bugs.webkit.org/show_bug.cgi?id=199950
+
+        Reviewed by Joseph Pecoraro.
+
+        Since pseudo-selector rules (usually) affect the selected element, or are related to its
+        content, it's more useful to have them near that element's rules instead of after all of
+        it's inherited rules.
+
+        * UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js:
+        (WI.SpreadsheetRulesStyleDetailsPanel.prototype.layout):
+
 2019-08-03  Devin Rousso  <drousso@apple.com>
 

trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js

@@ -301 +301 @@
         };
 
-        for (let style of this.nodeStyles.uniqueOrderedStyles)
+        let addedPseudoStyles = false;
+        let addPseudoStyles = () => {
+            if (addedPseudoStyles)
+                return;
+
+            // Add all pseudo styles before any inherited rules.
+            let beforePseudoId = null;
+            let afterPseudoId = null;
+            if (InspectorBackend.domains.CSS.PseudoId) {
+                beforePseudoId = WI.CSSManager.PseudoSelectorNames.Before;
+                afterPseudoId = WI.CSSManager.PseudoSelectorNames.After;
+            } else {
+                // Compatibility (iOS 12.2): CSS.PseudoId did not exist.
+                beforePseudoId = 4;
+                afterPseudoId = 5;
+            }
+
+            for (let [pseudoId, pseudoElementInfo] of this.nodeStyles.pseudoElements) {
+                let pseudoElement = null;
+                if (pseudoId === beforePseudoId)
+                    pseudoElement = this.nodeStyles.node.beforePseudoElement();
+                else if (pseudoId === afterPseudoId)
+                    pseudoElement = this.nodeStyles.node.afterPseudoElement();
+                addHeader(WI.UIString("Pseudo-Element"), pseudoElement || pseudoId);
+
+                for (let style of WI.DOMNodeStyles.uniqueOrderedStyles(pseudoElementInfo.orderedStyles))
+                    createSection(style);
+            }
+
+            addedPseudoStyles = true;
+        };
+
+        for (let style of this.nodeStyles.uniqueOrderedStyles) {
+            if (style.inherited)
+                addPseudoStyles();
             createSection(style);
-
-        let beforePseudoId = null;
-        let afterPseudoId = null;
-        if (InspectorBackend.domains.CSS.PseudoId) {
-            beforePseudoId = WI.CSSManager.PseudoSelectorNames.Before;
-            afterPseudoId = WI.CSSManager.PseudoSelectorNames.After;
-        } else {
-            // Compatibility (iOS 12.2): CSS.PseudoId did not exist.
-            beforePseudoId = 4;
-            afterPseudoId = 5;
-        }
-
-        for (let [pseudoId, pseudoElementInfo] of this.nodeStyles.pseudoElements) {
-            let pseudoElement = null;
-            if (pseudoId === beforePseudoId)
-                pseudoElement = this.nodeStyles.node.beforePseudoElement();
-            else if (pseudoId === afterPseudoId)
-                pseudoElement = this.nodeStyles.node.afterPseudoElement();
-            addHeader(WI.UIString("Pseudo-Element"), pseudoElement || pseudoId);
-
-            for (let style of WI.DOMNodeStyles.uniqueOrderedStyles(pseudoElementInfo.orderedStyles))
-                createSection(style);
-        }
+        }
+
+        addPseudoStyles();
 
         this._newRuleSelector = null;