Add parsing shorthand when populating css properties in inspector

Design doc: https://docs.google.com/document/d/1Z5qA-w0yJojHMpI4ZGDuAS1sunFpLK7byIg68VzQfkU/edit

Bug: 471601
Change-Id: I7d72f42111b84ef5e78b3905df36f7555382ce37
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3825959
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
Commit-Queue: Changhao Han <changhaohan@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1034454}

third_party/blink/public/devtools_protocol/browser_protocol.pdl

@@ -1537,6 +1537,9 @@ experimental domain CSS
       optional boolean disabled
       # The entire property range in the enclosing style declaration (if available).
       optional SourceRange range
+      # Parsed longhand components of this property if it is a shorthand.
+      # This field will be empty if the given property is not a shorthand.
+      experimental optional array of CSSProperty longhandProperties
 
   # CSS media rule descriptor.
   type CSSMedia extends object

third_party/blink/renderer/core/inspector/inspector_style_sheet.cc

@@ -43,7 +43,10 @@
 #include "third_party/blink/renderer/core/css/css_style_sheet.h"
 #include "third_party/blink/renderer/core/css/css_supports_rule.h"
 #include "third_party/blink/renderer/core/css/parser/css_parser.h"
+#include "third_party/blink/renderer/core/css/parser/css_parser_local_context.h"
 #include "third_party/blink/renderer/core/css/parser/css_parser_observer.h"
+#include "third_party/blink/renderer/core/css/parser/css_tokenizer.h"
+#include "third_party/blink/renderer/core/css/properties/shorthand.h"
 #include "third_party/blink/renderer/core/css/style_engine.h"
 #include "third_party/blink/renderer/core/css/style_rule.h"
 #include "third_party/blink/renderer/core/css/style_sheet_contents.h"
@@ -71,7 +74,8 @@ namespace blink {
 
 namespace {
 
-static const CSSParserContext* ParserContextForDocument(Document* document) {
+static const CSSParserContext* ParserContextForDocument(
+    const Document* document) {
   // Fallback to an insecure context parser if no document is present.
   return document ? MakeGarbageCollected<CSSParserContext>(*document)
                   : StrictCSSParserContext(SecureContextMode::kInsecureContext);
@@ -989,6 +993,10 @@ std::unique_ptr<protocol::CSS::CSSStyle> InspectorStyle::StyleWithProperties() {
         }
       }
     }
+
+    if (auto longhandProperties = LonghandProperties(property_entry))
+      property->setLonghandProperties(std::move(longhandProperties));
+
     properties_object->emplace_back(std::move(property));
   }
 
@@ -1028,6 +1036,43 @@ String InspectorStyle::ShorthandValue(const String& shorthand_property) {
   return builder.ToString();
 }
 
+std::unique_ptr<protocol::Array<protocol::CSS::CSSProperty>>
+InspectorStyle::LonghandProperties(
+    const CSSPropertySourceData& property_entry) {
+  CSSTokenizer tokenizer(property_entry.value);
+  const auto tokens = tokenizer.TokenizeToEOF();
+  CSSParserTokenRange range(tokens);
+  CSSPropertyID property_id =
+      CssPropertyID(style_->GetExecutionContext(), property_entry.name);
+  if (property_id == CSSPropertyID::kInvalid ||
+      property_id == CSSPropertyID::kVariable)
+    return nullptr;
+  const CSSProperty& property =
+      CSSProperty::Get(ResolveCSSPropertyID(property_id));
+  if (!property.IsProperty() || !property.IsShorthand())
+    return nullptr;
+  const auto local_context =
+      CSSParserLocalContext().WithCurrentShorthand(property_id);
+  HeapVector<CSSPropertyValue, 64> longhand_properties;
+  if (To<Shorthand>(property).ParseShorthand(
+          property_entry.important, range,
+          *ParserContextForDocument(parent_style_sheet_->GetDocument()),
+          local_context, longhand_properties)) {
+    auto result =
+        std::make_unique<protocol::Array<protocol::CSS::CSSProperty>>();
+    for (auto longhand_property : longhand_properties) {
+      std::unique_ptr<protocol::CSS::CSSProperty> longhand =
+          protocol::CSS::CSSProperty::create()
+              .setName(longhand_property.Name().ToAtomicString())
+              .setValue(longhand_property.Value()->CssText())
+              .build();
+      result->emplace_back(std::move(longhand));
+    }
+    return result;
+  }
+  return nullptr;
+}
+
 void InspectorStyle::Trace(Visitor* visitor) const {
   visitor->Trace(style_);
   visitor->Trace(parent_style_sheet_);

third_party/blink/renderer/core/inspector/inspector_style_sheet.h

@@ -77,6 +77,8 @@ class InspectorStyle final : public GarbageCollected<InspectorStyle> {
   void PopulateAllProperties(Vector<CSSPropertySourceData>& result);
   std::unique_ptr<protocol::CSS::CSSStyle> StyleWithProperties();
   String ShorthandValue(const String& shorthand_property);
+  std::unique_ptr<protocol::Array<protocol::CSS::CSSProperty>>
+  LonghandProperties(const CSSPropertySourceData& property_entry);
 
   Member<CSSStyleDeclaration> style_;
   Member<CSSRuleSourceData> source_data_;

third_party/blink/web_tests/inspector-protocol/css/css-get-styles-for-node.js

@@ -4,7 +4,8 @@
       <div id='parent-div' style='padding-top: 20px;'>
           <div id='inspected' style='padding-top: 55px; margin-top: 33px !important;'></div>
           <div id='child-div'></div>
-      </div>`,
+      </div>
+      <div id='shorthand-div' style='margin: 0; margin-top: 5px; padding: var(--x); border: 1px solid black;'></div>`,
       'The test verifies functionality of protocol method CSS.getMatchedStylesForNode and CSS.getInlineStylesForNode.');
 
   await dp.DOM.enable();
@@ -24,6 +25,15 @@
 
   // Test on Element node
   await cssHelper.loadAndDumpInlineAndMatchingRules(documentNodeId, '#inspected');
+
+  const shorthandNodeId = await cssHelper.requestNodeId(documentNodeId, '#shorthand-div');
+  const shorthandResult = await dp.CSS.getInlineStylesForNode({'nodeId': shorthandNodeId});
+  testRunner.log('checking parsed longhand components from shorthand properties');
+  for (const property of shorthandResult.result.inlineStyle.cssProperties) {
+    if (property.longhandProperties) {
+      testRunner.log(property.longhandProperties);
+    }
+  }
   testRunner.completeTest();
 });
 

third_party/blink/web_tests/platform/generic/inspector-protocol/css/css-get-styles-for-node-expected.txt

@@ -84,4 +84,93 @@ Dumping inherited rules:
         background-color: green; @[42:12-42:36]
         background-color: green; @[undefined-undefined]
     }
+checking parsed longhand components from shorthand properties
+[
+    [0] : {
+        name : margin-top
+        value : 0px
+    }
+    [1] : {
+        name : margin-right
+        value : 0px
+    }
+    [2] : {
+        name : margin-bottom
+        value : 0px
+    }
+    [3] : {
+        name : margin-left
+        value : 0px
+    }
+]
+[
+    [0] : {
+        name : border-top-width
+        value : 1px
+    }
+    [1] : {
+        name : border-right-width
+        value : 1px
+    }
+    [2] : {
+        name : border-bottom-width
+        value : 1px
+    }
+    [3] : {
+        name : border-left-width
+        value : 1px
+    }
+    [4] : {
+        name : border-top-style
+        value : solid
+    }
+    [5] : {
+        name : border-right-style
+        value : solid
+    }
+    [6] : {
+        name : border-bottom-style
+        value : solid
+    }
+    [7] : {
+        name : border-left-style
+        value : solid
+    }
+    [8] : {
+        name : border-top-color
+        value : black
+    }
+    [9] : {
+        name : border-right-color
+        value : black
+    }
+    [10] : {
+        name : border-bottom-color
+        value : black
+    }
+    [11] : {
+        name : border-left-color
+        value : black
+    }
+    [12] : {
+        name : border-image-source
+        value : initial
+    }
+    [13] : {
+        name : border-image-slice
+        value : initial
+    }
+    [14] : {
+        name : border-image-width
+        value : initial
+    }
+    [15] : {
+        name : border-image-outset
+        value : initial
+    }
+    [16] : {
+        name : border-image-repeat
+        value : initial
+    }
+]