Changeset 253348 in webkit

Timestamp:

Dec 10, 2019 3:01:47 PM (4 years ago)

Author:

Devin Rousso

Message:

Web Inspector: REGRESSION(r251038): Elements: Computed: implicit shorthands are not shown when "Prefer Shorthands" is enabled
​https://bugs.webkit.org/show_bug.cgi?id=205035
<rdar://problem/57773470>

Reviewed by Brian Burg.

The computed style treats most shorthand properties as "implicit", meaning that if "Prefer
Shorthands" is enabled, we won't show the shorthand properties unless "Show All" is also
enabled. The frontend can fix this by checking to see if there are any non-implicit longhand
values for each shorthand value, and therefore decide not to hide the "implicit" shorthand.

• UserInterface/Views/ComputedStyleSection.js:

(WI.ComputedStyleSection.prototype.get propertiesToRender):
(WI.ComputedStyleSection.prototype.get propertiesToRender.hasNonImplicitLonghand): Added.
Drive-by: filter the list of properties to render before sorting them for performance.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/ComputedStyleSection.js (modified) (2 diffs)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2019-12-10  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: REGRESSION(r251038): Elements: Computed: implicit shorthands are not shown when "Prefer Shorthands" is enabled
+        https://bugs.webkit.org/show_bug.cgi?id=205035
+        <rdar://problem/57773470>
+
+        Reviewed by Brian Burg.
+
+        The computed style treats most shorthand properties as "implicit", meaning that if "Prefer
+        Shorthands" is enabled, we won't show the shorthand properties unless "Show All" is also
+        enabled. The frontend can fix this by checking to see if there are any non-implicit longhand
+        values for each shorthand value, and therefore decide not to hide the "implicit" shorthand.
+
+        * UserInterface/Views/ComputedStyleSection.js:
+        (WI.ComputedStyleSection.prototype.get propertiesToRender):
+        (WI.ComputedStyleSection.prototype.get propertiesToRender.hasNonImplicitLonghand): Added.
+        Drive-by: filter the list of properties to render before sorting them for performance.
+
 2019-12-10  Devin Rousso  <drousso@apple.com>
 

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

@@ -141 +141 @@
             properties = this._style.properties;
 
-        properties.sort((a, b) => a.name.extendedLocaleCompare(b.name));
+        let propertyNameMap = new Map(properties.map((property) => [property.canonicalName, property]));
+
+        function hasNonImplicitLonghand(property) {
+            if (property.canonicalName === "all")
+                return false;
+
+            let longhandPropertyNames = WI.CSSKeywordCompletions.LonghandNamesForShorthandProperty.get(property.canonicalName);
+            if (!longhandPropertyNames)
+                return false;
+
+            for (let longhandPropertyName of longhandPropertyNames) {
+                let property = propertyNameMap.get(longhandPropertyName);
+                if (property && !property.implicit)
+                    return true;
+            }
+
+            return false;
+        }
 
         let hideVariables = this._propertyVisibilityMode === ComputedStyleSection.PropertyVisibilityMode.HideVariables;
         let hideNonVariables = this._propertyVisibilityMode === ComputedStyleSection.PropertyVisibilityMode.HideNonVariables;
 
-        return properties.filter((property) => {
+        properties = properties.filter((property) => {
             if (this._alwaysShowPropertyNames.has(property.canonicalName))
                 return true;
 
-            if (property.implicit && !this._showsImplicitProperties)
-                return false;
+            if (property.implicit && !this._showsImplicitProperties) {
+                if (!(this._showsShorthandsInsteadOfLonghands && property.isShorthand && hasNonImplicitLonghand(property)))
+                    return false;
+            }
 
             if (this._showsShorthandsInsteadOfLonghands) {
@@ -167 +186 @@
             return true;
         });
+
+        properties.sort((a, b) => a.name.extendedLocaleCompare(b.name));
+        return properties;
     }