Bug 271402 – Web Inspector: Reopening inspector loses style edits in style details panel

• Component: Web Inspector
• Status: NEW

[Qianlang Chen]

Created attachment 470465 [details]
Video demo: After changing 50px to 11px and reopening inspector, it's shown as 50px again

In our inspector, editing an element's style originated from a .css file is supported, and the edits are normally persistent even if you close and reopen the inspector.

However, edits to a style that came from an imported style sheet (via `@import ...`) disappear after you close and reopen the inspector. (They are still applied, just not displayed.)

---

To reproduce:
   1. Go to https://nytimes.com/wordle
   2. Inspect the "Wordle" title (it's an <h1> element)
   3. In the style details panel, change the font-size to some other valeu
      - This style rule probably belongs to a style sheet that's been @import-ed
   4. Close and reopen the inspector; ensure that it's still inspecting the Wordle title <h1> element
   5. Observe that in the details panel, font-size shows up reverted to the old valeu (but the edit persisted on the actual webpage as expected)

See attached video demo.

[Radar WebKit Bug Importer]

<rdar://problem/125184282>

[Qianlang Chen]

Created attachment 470467 [details]
Reduced test case: host this; instructions included in webpage

Here is a reduced test case.

There's a different bug reproduceable from this test case, filed at https://webkit.org/b/271403

[Qianlang Chen]

Created attachment 470728 [details]
Video demo: navy got reverted back to olive after reopening inspector

UPDATE: This issue seems to not only apply to imported rules, but just any rule.

Even just this rule:
    body {
        color: olive;
    }

Change olive to navy. Reopen the inspector and it's olive again (but still shown up as navy in the webpage; that part's expected)