Open Bug 1598301 Opened 5 years ago Updated 2 years ago

Generated content that is hidden (display: none) should still be editable by devtools

Categories

(DevTools :: Inspector, enhancement, P3)

72 Branch
enhancement

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.

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?

Component: Untriaged → CSS Parsing and Computation
Flags: needinfo?(j.zuckerman)
Product: Firefox → Core

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.

Component: CSS Parsing and Computation → Inspector
Flags: needinfo?(j.zuckerman)
Product: Core → DevTools
Summary: Generated content that is hidden (display: none) should still be generated → Generated content that is hidden (display: none) should still be editable by devtools

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.

Status: UNCONFIRMED → NEW
Ever confirmed: true

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!

Priority: -- → P3
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.