[css-pseudo] Expose ::marker styles in devtools
If an element has some styles for its ::marker pseudo-element, expose
them in the Styles panel when the element is inspected.
Bug: 1876407
TEST=http/tests/devtools/elements/elements-panel-styles.js
Change-Id: I56ab2703925966535beb71e0e47ab814c7ee07a9
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1932447
Reviewed-by: Peter Marshall <petermarshall@chromium.org>
Reviewed-by: Yang Guo <yangguo@chromium.org>
Reviewed-by: Andrey Kosyakov <caseq@chromium.org>
Commit-Queue: Oriol Brufau <obrufau@igalia.com>
Cr-Commit-Position: refs/heads/master@{#724094}
diff --git a/third_party/blink/public/devtools_protocol/browser_protocol.pdl b/third_party/blink/public/devtools_protocol/browser_protocol.pdl
index 0091c32..5a74559cc 100644
--- a/third_party/blink/public/devtools_protocol/browser_protocol.pdl
+++ b/third_party/blink/public/devtools_protocol/browser_protocol.pdl
@@ -1469,6 +1469,7 @@
first-letter
before
after
+ marker
backdrop
selection
first-line-inherited
diff --git a/third_party/blink/renderer/core/inspector/inspector_dom_agent.cc b/third_party/blink/renderer/core/inspector/inspector_dom_agent.cc
index 793c275..ed4e07c 100644
--- a/third_party/blink/renderer/core/inspector/inspector_dom_agent.cc
+++ b/third_party/blink/renderer/core/inspector/inspector_dom_agent.cc
@@ -173,6 +173,9 @@
case kPseudoIdAfter:
*type = protocol::DOM::PseudoTypeEnum::After;
return true;
+ case kPseudoIdMarker:
+ *type = protocol::DOM::PseudoTypeEnum::Marker;
+ return RuntimeEnabledFeatures::CSSMarkerPseudoElementEnabled();
case kPseudoIdBackdrop:
*type = protocol::DOM::PseudoTypeEnum::Backdrop;
return true;
diff --git a/third_party/blink/web_tests/http/tests/devtools/elements/elements-panel-styles-expected.txt b/third_party/blink/web_tests/http/tests/devtools/elements/elements-panel-styles-expected.txt
index 470ddee..9f0daeb 100644
--- a/third_party/blink/web_tests/http/tests/devtools/elements/elements-panel-styles-expected.txt
+++ b/third_party/blink/web_tests/http/tests/devtools/elements/elements-panel-styles-expected.txt
@@ -9,16 +9,17 @@
border-top-right-radius: 5px;
5px - .foo elements-panel-styles.css:21 -> elements-panel-styles.css:21:7
color: rgb(0, 0, 255);
- blue - .foo, .foo::before elements-panel-styles.css:34 -> elements-panel-styles.css:34:21
+ blue - .foo, .foo::before elements-panel-styles.css:35 -> elements-panel-styles.css:35:21
OVERLOADED black - .foo elements-panel-styles.css:21 -> elements-panel-styles.css:21:7
OVERLOADED red - #container elements-panel-styles.css:10 -> elements-panel-styles.css:10:13
- OVERLOADED magenta !important - html elements-panel-styles.css:61 -> elements-panel-styles.css:61:7
+ OVERLOADED magenta !important - html elements-panel-styles.css:67 -> elements-panel-styles.css:67:7
OVERLOADED -internal-root-color - html user agent stylesheet
content: "[before Foo]";
- "[before Foo]" - .foo, .foo::before elements-panel-styles.css:34 -> elements-panel-styles.css:34:21
+ "[before Foo]" - .foo, .foo::before elements-panel-styles.css:35 -> elements-panel-styles.css:35:21
display: block;
OVERLOADED none - element.style
- block !important - .foo, .foo::before elements-panel-styles.css:34 -> elements-panel-styles.css:34:21
+ block !important - .foo, .foo::before elements-panel-styles.css:35 -> elements-panel-styles.css:35:21
+ OVERLOADED list-item - .foo elements-panel-styles.css:21 -> elements-panel-styles.css:21:7
OVERLOADED block - div user agent stylesheet
font-family: serif;
serif - #container elements-panel-styles.css:10 -> elements-panel-styles.css:10:13
@@ -68,16 +69,17 @@
/-- overloaded --/ text-indent: 10px;
[expanded]
-.foo { (elements-pa…yles.css:53 -> elements-panel-styles.css:53:7)
+.foo { (elements-pa…yles.css:59 -> elements-panel-styles.css:59:7)
[expanded]
-.foo, .foo::before { (elements-pa…yles.css:34 -> elements-panel-styles.css:34:21)
+.foo, .foo::before { (elements-pa…yles.css:35 -> elements-panel-styles.css:35:21)
content: "[before Foo]";
color: blue;
display: block !important;
[expanded]
.foo { (elements-pa…yles.css:21 -> elements-panel-styles.css:21:7)
+/-- overloaded --/ display: list-item;
/-- overloaded --/ color: black;
margin-left: 1px;
margin: 10px 0 2px;
@@ -124,7 +126,7 @@
======== Inherited from html ========
[expanded]
-html { (elements-pa…yles.css:61 -> elements-panel-styles.css:61:7)
+html { (elements-pa…yles.css:67 -> elements-panel-styles.css:67:7)
/-- overloaded --/ color: magenta !important;
[expanded]
@@ -133,27 +135,33 @@
======== Pseudo ::before element ========
[expanded]
-.foo::before { (elements-pa…yles.css:57 -> elements-panel-styles.css:57:15)
+.foo::before { (elements-pa…yles.css:63 -> elements-panel-styles.css:63:15)
[expanded]
-.foo::before { (elements-pa…yles.css:40 -> elements-panel-styles.css:40:15)
+.foo::before { (elements-pa…yles.css:41 -> elements-panel-styles.css:41:15)
color: red;
[expanded]
-.foo, .foo::before { (elements-pa…yles.css:34 -> elements-panel-styles.css:34:21)
+.foo, .foo::before { (elements-pa…yles.css:35 -> elements-panel-styles.css:35:21)
content: "[before Foo]";
/-- overloaded --/ color: blue;
display: block !important;
======== Pseudo ::after element ========
[expanded]
-.foo::after { (elements-pa…yles.css:48 -> elements-panel-styles.css:48:14)
+.foo::after { (elements-pa…yles.css:49 -> elements-panel-styles.css:49:14)
font-family: courier;
content: "[after Foo 2]";
[expanded]
-.foo::after { (elements-pa…yles.css:44 -> elements-panel-styles.css:44:14)
+.foo::after { (elements-pa…yles.css:45 -> elements-panel-styles.css:45:14)
/-- overloaded --/ content: "[after Foo]";
color: green;
+======== Pseudo ::marker element ========
+[expanded]
+.foo::marker { (elements-pa…yles.css:54 -> elements-panel-styles.css:54:15)
+ content: "[marker Foo]";
+ color: cyan;
+
diff --git a/third_party/blink/web_tests/http/tests/devtools/elements/resources/elements-panel-styles.css b/third_party/blink/web_tests/http/tests/devtools/elements/resources/elements-panel-styles.css
index dcbefad..4f8a5dedb 100644
--- a/third_party/blink/web_tests/http/tests/devtools/elements/resources/elements-panel-styles.css
+++ b/third_party/blink/web_tests/http/tests/devtools/elements/resources/elements-panel-styles.css
@@ -19,6 +19,7 @@
}
.foo {
+ display: list-item;
color: black;
margin-left: 1px;
margin: 10px 0 2px;
@@ -50,6 +51,11 @@
content: "[after Foo 2]";
}
+.foo::marker {
+ content: "[marker Foo]";
+ color: cyan;
+}
+
.foo {
/* Empty rule that should be reported in the Styles pane */
}
