Bug 1529599 - (Part 1) Add Copy Declaration to Changes panel context menu; r=gl

Adds a new option to the context menu which is visible only when it's invoked on a CSS declaration.
Builds a string with the property name and value and copies to the clipboard.
If the declaration is marked as removed, the string is wrapped in a comment block.

Differential Revision: https://phabricator.services.mozilla.com/D21526

--HG--
extra : moz-landing-system : lando

devtools/client/inspector/changes/ChangesContextMenu.js

@@ -28,6 +28,7 @@ class ChangesContextMenu {
     // Window object to which the Changes panel belongs to.
     this.window = this.document.defaultView;
 
+    this._onCopyDeclaration = this.view.copyDeclaration.bind(this.view);
     this._onCopyRule = this.view.copyRule.bind(this.view);
     this._onCopySelection = this.view.copySelection.bind(this.view);
     this._onSelectAll = this._onSelectAll.bind(this);
@@ -55,16 +56,24 @@ class ChangesContextMenu {
     });
     menu.append(menuitemCopy);
 
+    const declEl = target.closest(".changes__declaration");
     const ruleEl = target.closest("[data-rule-id]");
     const ruleId = ruleEl ? ruleEl.dataset.ruleId : null;
 
-    if (ruleId) {
+    if (ruleId || declEl) {
       // Copy Rule option
       menu.append(new MenuItem({
         label: getStr("changes.contextmenu.copyRule"),
         click: () => this._onCopyRule(ruleId),
       }));
 
+      // Copy Declaration option. Visible only if there is a declaration element target.
+      menu.append(new MenuItem({
+        label: getStr("changes.contextmenu.copyDeclaration"),
+        click: () => this._onCopyDeclaration(declEl),
+        visible: !!declEl,
+      }));
+
       menu.append(new MenuItem({
         type: "separator",
       }));

devtools/client/inspector/changes/ChangesView.js

@@ -146,6 +146,22 @@ class ChangesView {
     clipboardHelper.copyString(text);
   }
 
+  /**
+   * Handler for the "Copy Declaration" option from the context menu.
+   * Builds a CSS declaration string with the property name and value, and copies it
+   * to the clipboard. The declaration is commented out if it is marked as removed.
+   *
+   * @param {DOMElement} element
+   *        Host element of a CSS declaration rendered the Changes panel.
+   */
+  copyDeclaration(element) {
+    const name = element.querySelector(".changes__declaration-name").textContent;
+    const value = element.querySelector(".changes__declaration-value").textContent;
+    const isRemoved = element.classList.contains("diff-remove");
+    const text = isRemoved ? `/* ${name}: ${value}; */` : `${name}: ${value};`;
+    clipboardHelper.copyString(text);
+  }
+
   /**
    * Handler for the "Copy Rule" option from the context menu.
    * Gets the full content of the target CSS rule (including any changes applied)

devtools/client/inspector/changes/components/CSSDeclaration.js

@@ -28,11 +28,11 @@ class CSSDeclaration extends PureComponent {
   render() {
     const { className, marker, property, value } = this.props;
 
-    return dom.div({ className: `declaration ${className}` },
+    return dom.div({ className: `changes__declaration ${className}` },
       marker,
-      dom.span({ className: "declaration-name theme-fg-color3"}, property),
+      dom.span({ className: "changes__declaration-name theme-fg-color3"}, property),
       ": ",
-      dom.span({ className: "declaration-value theme-fg-color1"}, value),
+      dom.span({ className: "changes__declaration-value theme-fg-color1"}, value),
       ";"
     );
   }

devtools/client/inspector/changes/test/head.js

@@ -44,7 +44,7 @@ registerCleanupFunction(() => {
  * @return {Array}
  */
 function getDeclarations(panelDoc, selector = "", containerNode = null) {
-  const els = panelDoc.querySelectorAll(`#sidebar-panel-changes .declaration${selector}`);
+  const els = panelDoc.querySelectorAll(`.changes__declaration${selector}`);
 
   return [...els]
     .filter(el => {
@@ -52,8 +52,8 @@ function getDeclarations(panelDoc, selector = "", containerNode = null) {
     })
     .map(el => {
       return {
-        property: el.querySelector(".declaration-name").textContent,
-        value: el.querySelector(".declaration-value").textContent,
+        property: el.querySelector(".changes__declaration-name").textContent,
+        value: el.querySelector(".changes__declaration-value").textContent,
       };
     });
 }

devtools/client/locales/en-US/changes.properties

@@ -43,6 +43,10 @@ changes.contextmenu.copyAllChanges=Copy All Changes
 # Changes" button
 changes.contextmenu.copyAllChangesDescription=Copy a list of all CSS changes to clipboard.
 
+# LOCALIZATION NOTE (changes.contextmenu.copyDeclaration): Label for "Copy Declaration"
+# option in Changes panel context menu which copies the target CSS declaration.
+changes.contextmenu.copyDeclaration=Copy Declaration
+
 # LOCALIZATION NOTE (changes.contextmenu.copyRule): Label for "Copy Rule" option in
 # Changes panel context menu which copies the complete contents of a CSS rule.
 changes.contextmenu.copyRule=Copy Rule

devtools/client/themes/changes.css

@@ -157,7 +157,7 @@
   display: block;
 }
 
-#sidebar-panel-changes .declaration-name {
+.changes__declaration-name {
   margin-left: 10px;
 }