1580849 - Add a "copy styles" option to the inspector's contextual menu

Status: NEW

(DevTools :: Inspector, enhancement, P3)

Description

[Patrick Brosset <:pbro>]

This exists in Chrome (Canary at the time of writing) and is an interesting feature that helps extracting styles from a page that we might want to also support in Firefox.

Steps:

• open the inspector on any page
• inspect an element that has some styles applied
• right-click on the element
• go in the "copy" menu
  ==> there should be a "Copy Styles" item in there that puts a string in the clipboard corresponding to all of the applied declarations for this element.

For example, if the following rules are applied to an element:

/* applied to the element itself */

section {
    margin: 2rem;
}
* {
    box-sizing: border-box;
}

/* Inherited from parent rules */

body {
    font-family: Metropolis,Inter,X-LocaleSpecific,sans-serif;
    margin: 3rem;
    font-size: 24px;
}

Then copying the style should result in the following string placed in the user's clipboard:

font-family: Metropolis,Inter,X-LocaleSpecific,sans-serif;
font-size: 24px;
box-sizing: border-box;
margin: 2rem;