Closed Bug 1529606 Opened 2 years ago Closed 2 years ago

Export Changes - add Copy Rule button

Categories

(DevTools :: Inspector: Changes, enhancement, P2)

enhancement

Tracking

(firefox67 fixed)

RESOLVED FIXED
Firefox 67
Tracking Status
firefox67 --- fixed

People

(Reporter: rcaliman, Assigned: rcaliman)

References

Details

Attachments

(1 file)

Add button that allows copying the full contents of the changed CSS rule.
Shows when hovering over the CSS rules in the Changes panel.

UI: https://mozilla.invisionapp.com/share/VFQC7MQSD9W#/screens

When CSS rules are nested (ex: style rule in @media, @supports), the button shows next to the innermost hovered rule. This defines the scope of the copy operation: if the innermost rule is hovered, only its contents get copied. If the outermost or intermediary rules are hovered, they get the Copy Rule button and define the scope.

The clipboard output is identical to the one implemented in Bug 1524547.

Adds a button that shows up when hovering selectors in the Changes panel.
When clicked, it invokes the same Copy Rule behavior implemented for the context menu: copies the full content of the rule with changes applied.

The added/changed CSS class names use BEM notation. I intend to refactor the Changes panel stylesheet to BEM in a follow-up patch.

Pushed by rcaliman@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/96e76fdfd8b2
Add Copy Rule button to Changes panel. r=pbro

Removed unused CSS custom properties which tripped a pedantic test and pushed again.

Flags: needinfo?(rcaliman)
Pushed by rcaliman@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/f5629bb3e671
Add Copy Rule button to Changes panel. r=pbro
Status: ASSIGNED → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 67
You need to log in before you can comment on or make changes to this bug.