Closed Bug 1481192 Opened Last year Closed 11 months ago

Rules inspector does not show any styles for ::before and ::after pseudo elements with display: table

Categories

(DevTools :: Inspector: Rules, defect, P2)

defect

Tracking

(firefox64 fixed)

RESOLVED FIXED
Firefox 64
Tracking Status
firefox64 --- fixed

People

(Reporter: wc.smith, Assigned: bradwerth)

References

Details

(Whiteboard: [dt-q])

Attachments

(8 files)

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:62.0) Gecko/20100101 Firefox/62.0
Build ID: 20180802174131

Steps to reproduce:

::before and ::after not showing up in styles window in developer tools in firefox developer edition - see screen shot
Component: Untriaged → CSS Rules Inspector
Product: Firefox → DevTools
Hi Warren, thanks for filing the bug.

However, I am unable to reproduce this with a simple test case, here: https://codepen.io/yetanotheraccount/details/wxEMgB/

It works well both in Firefox Nightly and in Developer Edition. When I inspect the pseudo element, with the focus on it, I can see the specific style rules applied to the pseudo element.

It's hard to tell if the error is in our side or if the code you're inspecting in fact does not have style rules that apply to the pseudo element, so we're going to need some help from you to find out.

It looks like you are debugging a WordPress theme; is it a theme that is available to the general public or a private one? We need to try to reproduce your error, using the same code that you're inspecting.

Thanks
Flags: needinfo?(wc.smith)
Duplicate of this bug: 1481219
Summary: ::before and ::after pseudo elements not showing in CSS in developer tools for develooper edition → Rules inspector does not show any styles for ::before and ::after pseudo elements in developer edition
I can reproduce the error in both Nightly and Developer Edition for some pseudo elements, not all.

Example:
1. visit for example caniuse.com
2. search for any ".clearfix" element
(that was submitting my comment to fast 🙄)

I also adjusted your demo here: https://codepen.io/martinbalfanz/pen/zLJrbJ

I added an :after element which is somewhat like the clearfix example.  The :before works as expected, but the :after doesn't show styles.
Right, I think it's the 'display: table' that makes the pseudo elements "lose" their CSS styles. As soon as you change any of the :before or :after to display: table, the Rules tab gets blank.

I updated the example to use display table on both pseudo elements for easier debugging: https://codepen.io/yetanotheraccount/full/wxEGJq
Priority: -- → P3
Summary: Rules inspector does not show any styles for ::before and ::after pseudo elements in developer edition → Rules inspector does not show any styles for ::before and ::after pseudo elements with display: table
Version: 62 Branch → Trunk
Flags: needinfo?(wc.smith)
OK.  after reading all above here is what I did.  I have attached an html file that is the html I was testing (minus some stuff in the head that is not applicable).  I have also attached the css file that is used.  I still don't see the css for the ::before and ::after pseudo elements with this test file.

I have tried several other css styles ( i have a style as div::before {content: " ";display:table;} in the attached css file.  All the div's in the html have ::before pseudo elements in the html markup, yet they are not visible in the css inspector.  However, the css is being applied to the html.  The reason I stumbled onto this issue to start with is that I was creating some <li> elements inside a <div> that had the ::before pseudo element (ie the display:table) and when I put a list-style-type: square on the <li> elements, the "square" came out as a block element before the <li> (ie the "square" was on one line and the <li> element was underneath it on another line).  So seeing that the <div> had a ::before pseudo element, I click on it and there was nothing in the style inspector, so I scratched my head trying to figure out why the bullet was displaying as a block element. So even though the pseudo element does not show up in the styles inspector, it is applied.

Warren
Assignee: nobody → rcaliman
Status: UNCONFIRMED → ASSIGNED
Ever confirmed: true
Priority: P3 → P2
Whiteboard: [dt-q]
Assignee: rcaliman → nobody
Status: ASSIGNED → NEW
I'll take a look.
Assignee: nobody → bwerth
Emilio, this simplified testcase shows the issue clearly. The ComputedStyle structures for display:table pseudo elements do not contain (or don't match) the rules that are used to style the pseudo elements. This can be verified using the devtools Inspector on the two pseudo elements in the attachment -- the first has rules and the second does not, though both are styled correctly.

How does the ComputedStyle structure generation work differently from the actual style traversal for these elements? All insights appreciated.
Attachment #9011621 - Flags: feedback?(emilio)
So what happens is that tables have a table wrapper frame, and we usually skip looking at it, but it seems we don't for pseudo-elements:

  https://searchfox.org/mozilla-central/rev/881a3c5664ede5e08ee986d76433bc5c4b5680e6/layout/style/nsComputedDOMStyle.cpp#587

I think the code above should be changed to do something like:

Element* element = nullptr;
if (aPseudo == before) {
  element = nsLayoutUtils::GetBeforePseudo(aElement);
} else if (aPseudo == after) {
  element = nsLayoutUtils::GetAfterPseudo(aElement);
} else if (!aPseudo) {
  element = aElement;
}

if (element) {
  if (nsIFrame* frame = element->GetPrimaryFrame()) {
    frame = nsLayoutUtils::GetStyleFrame(frame);
    // Do stuff..
  }
}

I think that should just fix it.
(In reply to Emilio Cobos Álvarez (:emilio) from comment #13)
> I think that should just fix it.

And it does, thank you.
In order to handle nsTableWrapperFrames correctly, this code is changed
to use the code in nsLayoutUtils::GetBeforePseudo and ::GetAfterPseudo,
and then finding the styling frames from those elements.
Comment on attachment 9011642 [details]
Bug 1481192 Part 1: Change computed style to use correct pseudo element selection.

Emilio Cobos Álvarez (:emilio) has approved the revision.
Attachment #9011642 - Flags: review+
Comment on attachment 9011643 [details]
Bug 1481192 Part 2: Add test of computedstyle for pseudo elements of varying display types.

Emilio Cobos Álvarez (:emilio) has approved the revision.
Attachment #9011643 - Flags: review+
Pushed by bwerth@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/2f0c8d5a75d6
Part 1: Change computed style to use correct pseudo element selection. r=emilio
https://hg.mozilla.org/integration/autoland/rev/7697665841ca
Part 2: Add test of computedstyle for pseudo elements of varying display types. r=emilio
Backed out 2 changesets (bug 1481192) for build bustages in workspace/build/src/layout/style/nsComputedDOMStyle CLOSED TREE

Backout link: https://hg.mozilla.org/integration/autoland/rev/e2c0039583fcd63d87540c4c8e31a7ef3446c025

Push with failures: https://treeherder.mozilla.org/#/jobs?repo=autoland&resultStatus=testfailed,busted,exception&revision=7697665841ca021ca5bced3ca3201d592aadf2b3

Log link: https://treeherder.mozilla.org/logviewer.html#?job_id=202281223&repo=autoland&lineNumber=26918

Log snippet: [task 2018-09-28T19:29:37.134Z] 19:29:37     INFO -  make[4]: Leaving directory '/builds/worker/workspace/build/src/obj-firefox/layout/painting'
[task 2018-09-28T19:29:37.135Z] 19:29:37     INFO -  make[4]: Entering directory '/builds/worker/workspace/build/src/obj-firefox/layout/painting'
[task 2018-09-28T19:29:37.136Z] 19:29:37     INFO -  layout/painting
[task 2018-09-28T19:29:37.137Z] 19:29:37     INFO -  make[4]: Leaving directory '/builds/worker/workspace/build/src/obj-firefox/layout/painting'
[task 2018-09-28T19:29:37.138Z] 19:29:37     INFO -  make[4]: Entering directory '/builds/worker/workspace/build/src/obj-firefox/layout/painting'
[task 2018-09-28T19:29:37.139Z] 19:29:37     INFO -  make[4]: Leaving directory '/builds/worker/workspace/build/src/obj-firefox/layout/painting'
[task 2018-09-28T19:29:37.694Z] 19:29:37     INFO -  make[4]: Entering directory '/builds/worker/workspace/build/src/obj-firefox/layout/style'
[task 2018-09-28T19:29:37.695Z] 19:29:37     INFO -  /builds/worker/workspace/build/src/sccache2/sccache /builds/worker/workspace/build/src/clang/bin/clang++ --target=i686-linux-gnu -o Unified_cpp_layout_style3.o -c  -I/builds/worker/workspace/build/src/obj-firefox/dist/stl_wrappers -I/builds/worker/workspace/build/src/obj-firefox/dist/system_wrappers -include /builds/worker/workspace/build/src/config/gcc_hidden.h -DDEBUG=1 -DOS_POSIX=1 -DOS_LINUX=1 -DSTATIC_EXPORTABLE_JS_API -DMOZ_HAS_MOZGLUE -DMOZILLA_INTERNAL_API -DIMPL_LIBXUL -I/builds/worker/workspace/build/src/layout/style -I/builds/worker/workspace/build/src/obj-firefox/layout/style -I/builds/worker/workspace/build/src/obj-firefox/ipc/ipdl/_ipdlheaders -I/builds/worker/workspace/build/src/ipc/chromium/src -I/builds/worker/workspace/build/src/ipc/glue -I/builds/worker/workspace/build/src/layout/base -I/builds/worker/workspace/build/src/layout/generic -I/builds/worker/workspace/build/src/layout/svg -I/builds/worker/workspace/build/src/layout/xul -I/builds/worker/workspace/build/src/dom/base -I/builds/worker/workspace/build/src/dom/html -I/builds/worker/workspace/build/src/dom/xbl -I/builds/worker/workspace/build/src/dom/xul -I/builds/worker/workspace/build/src/image -I/builds/worker/workspace/build/src/obj-firefox/dist/include -I/builds/worker/workspace/build/src/obj-firefox/dist/include/nspr -I/builds/worker/workspace/build/src/obj-firefox/dist/include/nss -fPIC -DMOZILLA_CLIENT -include /builds/worker/workspace/build/src/obj-firefox/mozilla-config.h -Qunused-arguments -U_FORTIFY_SOURCE -D_FORTIFY_SOURCE=2 -Qunused-arguments -Wall -Wempty-body -Wignored-qualifiers -Woverloaded-virtual -Wpointer-arith -Wshadow-field-in-constructor-modified -Wsign-compare -Wtype-limits -Wunreachable-code -Wunreachable-code-return -Wwrite-strings -Wno-invalid-offsetof -Wclass-varargs -Wfloat-overflow-conversion -Wfloat-zero-conversion -Wloop-analysis -Wc++1z-compat -Wc++2a-compat -Wcomma -Wimplicit-fallthrough -Werror=non-literal-null-conversion -Wstring-conversion -Wtautological-overlap-compare -Wno-inline-new-delete -Wno-error=deprecated-declarations -Wno-error=array-bounds -Wformat -Wformat-security -Wno-gnu-zero-variadic-macro-arguments -Wno-unknown-warning-option -Wno-return-type-c-linkage -D_GLIBCXX_USE_CXX11_ABI=0 -fno-sized-deallocation -march=pentium-m -msse -msse2 -mfpmath=sse -U_FORTIFY_SOURCE -D_FORTIFY_SOURCE=2 -fno-exceptions -fno-strict-aliasing -fno-rtti -ffunction-sections -fdata-sections -fno-exceptions -fno-math-errno -pthread -pipe -g -Xclang -load -Xclang /builds/worker/workspace/build/src/obj-firefox/build/clang-plugin/libclang-plugin.so -Xclang -add-plugin -Xclang moz-check -Os -fno-omit-frame-pointer -funwind-tables -Werror  -MD -MP -MF .deps/Unified_cpp_layout_style3.o.pp   /builds/worker/workspace/build/src/obj-firefox/layout/style/Unified_cpp_layout_style3.cpp
[task 2018-09-28T19:29:37.695Z] 19:29:37     INFO -  In file included from /builds/worker/workspace/build/src/obj-firefox/layout/style/Unified_cpp_layout_style3.cpp:11:
[task 2018-09-28T19:29:37.696Z] 19:29:37     INFO -  /builds/worker/workspace/build/src/layout/style/nsComputedDOMStyle.cpp:589:17: error: unused variable 'primaryFrame' [-Werror,-Wunused-variable]
[task 2018-09-28T19:29:37.696Z] 19:29:37     INFO -        nsIFrame* primaryFrame = element->GetPrimaryFrame();
[task 2018-09-28T19:29:37.696Z] 19:29:37     INFO -                  ^
[task 2018-09-28T19:29:37.696Z] 19:29:37     INFO -  1 error generated.
[task 2018-09-28T19:29:37.697Z] 19:29:37     INFO -  /builds/worker/workspace/build/src/config/rules.mk:1129: recipe for target 'Unified_cpp_layout_style3.o' failed
[task 2018-09-28T19:29:37.697Z] 19:29:37     INFO -  make[4]: *** [Unified_cpp_layout_style3.o] Error 1
[task 2018-09-28T19:29:37.698Z] 19:29:37     INFO -  make[4]: Leaving directory '/builds/worker/workspace/build/src/obj-firefox/layout/style'
[task 2018-09-28T19:29:37.698Z] 19:29:37     INFO -  make[4]: *** Waiting for unfinished jobs....
[task 2018-09-28T19:29:37.698Z] 19:29:37     INFO -  make[4]: Entering directory '/builds/worker/workspace/build/src/obj-firefox/layout/painting'
[task 2018-09-28T19:29:37.698Z] 19:29:37     INFO -  make[4]: Leaving directory '/builds/worker/workspace/build/src/obj-firefox/layout/painting'
[task 2018-09-28T19:29:37.702Z] 19:29:37     INFO -  make[4]: Entering directory '/builds/worker/workspace/build/src/obj-firefox/layout/painting'
Flags: needinfo?(bwerth)
These are C++ linting failures not caught in my local rebuild after making requested review changes. I'll fix and re-push soon.
Flags: needinfo?(bwerth)
Pushed by bwerth@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/2eec9b638d54
Part 1: Change computed style to use correct pseudo element selection. r=emilio
https://hg.mozilla.org/integration/autoland/rev/895b156fc23c
Part 2: Add test of computedstyle for pseudo elements of varying display types. r=emilio
https://hg.mozilla.org/mozilla-central/rev/2eec9b638d54
https://hg.mozilla.org/mozilla-central/rev/895b156fc23c
Status: NEW → RESOLVED
Closed: 11 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 64
This bug exists in v63.0.1
You need to log in before you can comment on or make changes to this bug.