1998704 - Allow to edit pseudo element rules selector

Status: RESOLVED FIXED

(DevTools :: Inspector, task, P3)

Description

[Nicolas Chevobbe [:nchevobbe]]

In https://searchfox.org/firefox-main/rev/88121de0ccd1a6e364645b9971f36c5eb00f4317/devtools/client/inspector/rules/views/rule-editor.js#143-152

get isSelectorEditable() {
  const trait =
    this.isEditable &&
    this.rule.domRule.type !== ELEMENT_STYLE &&
    this.rule.domRule.type !== CSSRule.KEYFRAME_RULE;

  // Do not allow editing anonymousselectors until we can
  // detect mutations on  pseudo elements in Bug 1034110.
  return trait && !this.rule.elementStyle.element.isAnonymous;
},

We prevent editing selectors for pseudo elements.
Bug 1034110 is resolved, and it doesn't seem like we need anything else to allow editing those selectors

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1998704 - [devtools] Allow to edit pseudo element rules selectors. r=#devtools.

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1998704 - [devtools] Turn modifySelector into an async function. r=#devtools.

Comment 3

[Phabricator Automation]

Comment on attachment 9526422 [details]
Bug 1998704 - [devtools] Turn modifySelector into an async function. r=#devtools.

Revision D272415 was moved to bug 2000876. Setting attachment 9526422 [details] to obsolete.

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/eeb0443b54ec
https://hg.mozilla.org/integration/autoland/rev/335459301aad
[devtools] Allow to edit pseudo element rules selectors. r=devtools-reviewers,jdescottes.

Comment 5

[Cristina Horotan [:chorotan]]

https://hg.mozilla.org/mozilla-central/rev/335459301aad

Comment 6

[Sebastian Zartner [:sebo]]

This feature should be mentioned in the Firefox 147 dev release notes.

Sebastian

Comment 7

[Chris Mills [:cmills]]

Hi there,

I'm working on adding this to the MDN Fx147 rel notes. I wrote a test case here: https://codepen.io/Chris-Mills/full/pvyqmzV.

In it, I've got a p::first-line { ... } rule. In Firefox 147, I can edit that to p::first-letter { ... }, li::first-line { ... }, etc., and it works fine.

However, I am also able to do that in Firefox 145.

Has the change been backported, or am I misunderstanding the nature of what has been changed?

Comment 8

[Nicolas Chevobbe [:nchevobbe]]

(In reply to Chris Mills [:cmills] from comment #7)

Hi there,

I'm working on adding this to the MDN Fx147 rel notes. I wrote a test case here: https://codepen.io/Chris-Mills/full/pvyqmzV.

In it, I've got a p::first-line { ... } rule. In Firefox 147, I can edit that to p::first-letter { ... }, li::first-line { ... }, etc., and it works fine.

However, I am also able to do that in Firefox 145.

Has the change been backported, or am I misunderstanding the nature of what has been changed?

Hello Chris, what was changed is the ability to edit selectors when the pseudo element "node" is selected in the markup view (this is different than editing selectors displayed under the "Pseudo elements" section).

0. So with this page https://codepen.io/nchevobbe/full/qEZLGob
1. Open the inspector
2. Select the ::before node under the <h1> node in the markup view

-> in 145, the h1.custom::before rule selector can't be edited
-> in 146, the h1.custom::before rule selector can be edited (e.g. we can remove the .custom part of the selector, or transform it into a ::after pseudo element)

Hope this makes sense

Comment 9

[Chris Mills [:cmills]]

(In reply to Nicolas Chevobbe [:nchevobbe] from comment #8)

Hope this makes sense

Perfect, that does make sense — thanks, Nicolas!

Setting this to dev-doc-complete, as I've added a rel note in https://github.com/mdn/content/pull/42316.