Bug 263733

Created attachment 468353 [details]
Screen recording of issue

The value of a CSS property in the Styles sidebar panel does not reflect changes made to it by the inspected page while an inline swatch popover is open for it.

Steps to reproduce:

1) Navigate to: https://interactive-examples.mdn.mozilla.net/pages/css/animation-timing-function.html 
2) Inspect the "circle" element `<div id="example-element" class="animating" style="animation-timing-function: linear;"></div>`
3) In the Styles sidebar, click the inline swatch next to the `animation-timing-function` property value top open the timing function editor
4) Without closing the popover, on the inspected page, click through the timing function samples to change the preview

Expected result:
The mutated `animation-timing-function` value updates in the Styles sidebar.

Actual result:
The value at the time of opening the popover is shown regardless of which value is set in the meantime from the page.

See attached screen recording.