DevTools: cleanup presentation of user agent styles

In the Styles sidebar pane, user agent style sections:
- Properties within an inherited section that do not contribute to
  the cascade (not inheritable) are hidden.
- Non-matching selector pieces are hidden.

The goal is to reduce visual noise in the UI without affecting style
debugging.

Screenshot: https://imgur.com/a/2s5wIn8

Bug: 929536
Change-Id: Icaea2edcbb8560273469605f263449edd51bade2
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1500775Reviewed-by: Dmitry Gozman <dgozman@chromium.org>
Commit-Queue: Erik Luo <luoe@chromium.org>
Cr-Commit-Position: refs/heads/master@{#638731}

third_party/blink/renderer/devtools/front_end/elements/StylesSidebarPane.js

@@ -1394,6 +1394,8 @@ Elements.StylePropertiesSection = class {
       const isShorthand = !!style.longhandProperties(property.name).length;
       const inherited = this.isPropertyInherited(property.name);
       const overloaded = this._isPropertyOverloaded(property);
+      if (style.parentRule && style.parentRule.isUserAgent() && inherited)
+        continue;
       const item = new Elements.StylePropertyTreeElement(
           this._parentPane, this._matchedStyles, property, isShorthand, inherited, overloaded, false);
       this.propertiesTreeOutline.appendChild(item);

third_party/blink/renderer/devtools/front_end/sdk/CSSMatchedStyles.js

@@ -38,6 +38,14 @@ SDK.CSSMatchedStyles = class {
     this._nodeForStyle = new Map();
     /** @type {!Set<!SDK.CSSStyleDeclaration>} */
     this._inheritedStyles = new Set();
+
+    for (const result of matchedPayload)
+      cleanUserAgentSelectors(result);
+    for (const inheritedResult of inheritedPayload) {
+      for (const result of inheritedResult.matchedCSSRules)
+        cleanUserAgentSelectors(result);
+    }
+
     this._mainDOMCascade = this._buildMainCascade(inlinePayload, attributesPayload, matchedPayload, inheritedPayload);
     this._pseudoDOMCascades = this._buildPseudoCascades(pseudoPayload);
 
@@ -47,6 +55,18 @@ SDK.CSSMatchedStyles = class {
       for (const style of domCascade.styles())
         this._styleToDOMCascade.set(style, domCascade);
     }
+
+    /**
+     * @param {!Protocol.CSS.RuleMatch} ruleMatch
+     */
+    function cleanUserAgentSelectors(ruleMatch) {
+      const {matchingSelectors, rule} = ruleMatch;
+      if (rule.origin !== 'user-agent' || !matchingSelectors.length)
+        return;
+      rule.selectorList.selectors = rule.selectorList.selectors.filter((item, i) => matchingSelectors.includes(i));
+      rule.selectorList.text = rule.selectorList.selectors.map(item => item.text).join(', ');
+      ruleMatch.matchingSelectors = matchingSelectors.map((item, i) => i);
+    }
   }
 
   /**

third_party/blink/web_tests/http/tests/devtools/elements/styles-1/filter-matched-styles-expected.txt

@@ -65,7 +65,6 @@ div {
    display: block
 }
 html {
-   display: block
    color: -internal-root-color
 }
 

third_party/blink/web_tests/http/tests/devtools/elements/styles-2/filter-matched-styles-hides-separators-expected.txt

@@ -21,7 +21,6 @@ div {
    display: block
 }
 html {
-   display: block
    color: -internal-root-color
 }
 #third::before {
@@ -52,7 +51,7 @@ Running: testDisplayProperty
 Filtering styles by: display
 [ HIDDEN ]  Inherited from div#second
 [ VISIBLE ] Inherited from div#first
-[ VISIBLE ] Inherited from html
+[ HIDDEN ]  Inherited from html
 [ HIDDEN ]  Pseudo ::before element
 [ VISIBLE ] Pseudo ::after element
 

third_party/blink/web_tests/http/tests/devtools/elements/styles-4/styles-update-links-4-expected.txt

@@ -13,7 +13,7 @@ Running: testPseudoSectionPropertyEdit
 element.style { ()
 
 [expanded] 
-article, aside, footer, header, hgroup, main, nav, section { (user agent stylesheet)
+section { (user agent stylesheet)
     display: block;
 
 ======== Inherited from html ========

third_party/blink/web_tests/http/tests/devtools/elements/styles-4/svg-style-expected.txt

@@ -12,7 +12,7 @@ rect { (svg-style.xhtml:6 -> svg-style.xhtml:6:16)
 svg:rect[Attributes Style] { ()
 
 [expanded] 
-:not(svg), :not(foreignObject) > svg { (user agent stylesheet)
+:not(svg) { (user agent stylesheet)
     transform-origin: 0px 0px;
 
 ======== Inherited from html ========