Web Inspector: Elements: Computed: prefixed properties should be sort…

…ed below non-prefixed

https://bugs.webkit.org/show_bug.cgi?id=244343

Reviewed by Patrick Angle.

It's odd that the first property is `-apple-pay-button-style` instead of something like `appearance`.
We should be showing standardized/nonprefixed properties first, with all other properties last.

* Source/WebInspectorUI/UserInterface/Models/CSSProperty.js:
(WI.CSSProperty.sortPreferringNonPrefixed): Added.
* Source/WebInspectorUI/UserInterface/Controllers/CSSQueryController.js:
(WI.CSSQueryController.prototype.executeQuery):
* Source/WebInspectorUI/UserInterface/Views/ComputedStyleSection.js:
(WI.ComputedStyleSection.prototype.get propertiesToRender):
* Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js:
(WI.SpreadsheetCSSStyleDeclarationEditor.prototype.get propertiesToRender):

Canonical link: https://commits.webkit.org/253789@main

Source/WebInspectorUI/UserInterface/Controllers/CSSQueryController.js

@@ -72,7 +72,7 @@ WI.CSSQueryController = class CSSQueryController extends WI.QueryController
 
         return results.sort((a, b) => {
             if (a.rank === b.rank)
-                return a.value.extendedLocaleCompare(b.value);
+                return WI.CSSProperty.sortPreferringNonPrefixed(a.value, b.value);
             return b.rank - a.rank;
         });
     }

Source/WebInspectorUI/UserInterface/Models/CSSProperty.js

@@ -90,6 +90,18 @@ WI.CSSProperty = class CSSProperty extends WI.Object
         return names;
     }
 
+    static sortPreferringNonPrefixed(a, b)
+    {
+        let aIsPrefixed = a[0] === "-" && a[1] !== "-";
+        let bIsPrefixed = b[0] === "-" && b[1] !== "-";
+        if (!aIsPrefixed && bIsPrefixed)
+            return -1;
+        if (aIsPrefixed && !bIsPrefixed)
+            return 1;
+
+        return a.extendedLocaleCompare(b);
+    }
+
     static sortByPropertyNameUsageCount(propertyNameA, propertyNameB)
     {
         let countA = WI.CSSProperty._cachedNameCounts[propertyNameA];

Source/WebInspectorUI/UserInterface/Views/ComputedStyleSection.js

@@ -206,7 +206,7 @@ WI.ComputedStyleSection = class ComputedStyleSection extends WI.View
             return true;
         });
 
-        properties.sort((a, b) => a.name.extendedLocaleCompare(b.name));
+        properties.sort((a, b) => WI.CSSProperty.sortPreferringNonPrefixed(a.name, b.name));
         return properties;
     }
 

Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js

@@ -256,7 +256,7 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd
             properties = properties.filter((property) => property.inherited || property.isNewProperty);
 
         if (this._sortPropertiesByName)
-            properties.sort((a, b) => a.name.extendedLocaleCompare(b.name));
+            properties.sort((a, b) => WI.CSSProperty.sortPreferringNonPrefixed(a.name, b.name));
 
         let hideVariables = this._propertyVisibilityMode === SpreadsheetCSSStyleDeclarationEditor.PropertyVisibilityMode.HideVariables;
         let hideNonVariables = this._propertyVisibilityMode === SpreadsheetCSSStyleDeclarationEditor.PropertyVisibilityMode.HideNonVariables;