1960123 - Cannot enable/disable/edit CSS rules in nested media queries from devtools

Status: NEW

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

Description

[rchristian]

Attachment: reproduction.html

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:138.0) Gecko/20100101 Firefox/138.0

Steps to reproduce:

1. Open the provided HTML file
2. Using the browser's devtools, disable (or alter the value of) the justify-content CSS rule on div.container

As far as I can tell this is limited to nested media queries though I admittedly haven't been playing with this for very long.

Actual results:

Nothing happens; the rule remains active.

Additionally, if you disable it, click on another element, and then click back on div.container, you'll see the rule will be enabled once again. Seemingly the browser knows it's still enabled, the UI is disconnected from the actual style rules.

Expected results:

The rule should be disabled.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'DevTools::Inspector: Rules' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

Thanks for the report,

Going through the steps, I'm seeing the following error: Error in InspectorUtils.replaceBlockRuleBodyTextInStylesheet which comes from https://searchfox.org/mozilla-central/rev/6234fecd95661d39d5dce021740e02680f8c9abd/devtools/server/actors/style-rule.js#928-939

const cssText = InspectorUtils.replaceBlockRuleBodyTextInStylesheet(
  sheetText,
  this.line,
  this.column,
  newText
);

if (typeof cssText !== "string") {
  throw new Error(
    "Error in InspectorUtils.replaceBlockRuleBodyTextInStylesheet"
  );
}

It sounds similar to Bug 1946439