Affected versions

• 66.0.3, 67.0b11,68.0a1 (2019-04-15)

Affected platforms

• all

Steps to reproduce

1. Launch Firefox, open the DevTools - Changes tab;
2. Perform any change in the Rules inspector for any element;
3. Hover on the changes in the Changes tab;
4. Click on the Copy Rule button;
5. Paste the content in any editor;
6. Copy the properties from the Rules tab for that class/selector;
7. Paste the content in any editor;

Enhancement suggestion

• pasted content can be of the same format from both the Changes tab as from the Rules Inspector;

Actual result

• the properties form the Changes tab are indented by 1 [Space], while the ones from the Rules inspector are at one [Tab]

Additional notes

• attached screenshot with the current differences;

The Copy Rule button from the Changes panel will copy the complete rule text from stylesheet as authored by the user. It preserves the indentation and any comments. This is intentional. The main use case for Copy Rule is to provide a drop-in replacement of the original CSS rule, therefore preserving the user's formatting style is important. (Notice also the space between the property name and value in the screenshot above).

The behaviour of copying text from the Rules panel is a what-you-see-is-what-you-get plaintext copy. The formatting style used for rendering CSS in the Rules panel is used, not the user's original formatting.

Given the minor issue and the intentional behavior in the Changes panel, it's unlikely we'll get around to add complexity to the Rules view to keep the two in sync. I'll close this now. Feel free to reopen if this is causing significant issues in some use case.