Generated content that is hidden (display: none) should still be editable by devtools
Categories
(DevTools :: Inspector, enhancement, P3)
Tracking
(Not tracked)
People
(Reporter: j.zuckerman+mozilla, Unassigned)
Details
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:72.0) Gecko/20100101 Firefox/72.0
Steps to reproduce:
I put "display: none" on a "::before" element
Actual results:
it was removed from the inspector
Expected results:
I think it should still appear in the inspector, with its styles intact, so I can continue to manipulate it and potentially show it again later.
I'm not certain I'm reading the correct spec, but in the draft here
https://drafts.csswg.org/css2/generate.html#before-after-content
it states:
The 'display' property controls whether the content is placed in a block or inline box.
and
The 'content' property ... is used with the :before and :after pseudo-elements to generate content in a document. Values have the following meanings:
none
The pseudo-element is not generated.
This implies to me that editing the "display" property should not control whether the pseudo-element is generated - the "content" property controls this - but only what type of box it should be placed in.
Comment 1•5 years ago
|
||
Hi JZ!!
There is an enhancement that is already reported, https://bugzilla.mozilla.org/show_bug.cgi?id=1418138
Do you think it is similar? We can mark this one as duplicate?
Comment 2•5 years ago
|
||
Not the same. But display: none
should not generate a box for the pseudo-element. From the point of view of the engine, content: none
and display: none
are equivalent, we just avoid creating the pseudo as an optimization.
Maybe we could make devtools could still poke at it, but all browsers honor the display
property in pseudo-elements.
Comment 3•5 years ago
|
||
I see how useful that would be indeed. I don't know how easy it would be knowing that the engine does not generate a box at all.
There is one work around here though:
if, instead of selecting the ::before pseudo itself in the inspector, you select its parent, then you can work on the styles all you want.
Indeed, pseudo-element styles are displayed on parent elements in a collapsible section at the top of the Rules panel. If you expand that, you will see the ::before rule, and will be able to toggle the display on the pseudo-element.
Ya, the workaround is ok, I've been doing something similar, but I'm sure you can understand that developers have enough to keep in their heads that this extra quirk in the mental model is undesirable. As pointed out in the other ticket, Chrome has a more developer friendly behavior in this regard.
I know this seems like a small issue, but for developers the HTML/CSS inspector is the main feature that makes Firefox preferable to Chrome, we use Firefox even though Chrome has generally better developer tooling, especially when it comes to javascript, profiling, etc.. so giving even an inch to Chrome in the one department where you have the edge could be a slippery slope.
From a performance standpoint, it's clear that that not generating the block is preferable during regular usage, but with the developer tools open and the element selected, the user experience equation is different - the preference should be for providing maximum information, control, and ease of use for the developer.
Thanks for your consideration!
Updated•5 years ago
|
Updated•2 years ago
|
Description
•