Bug 1529606 - Add Copy Rule button to Changes panel. r=pbro

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.

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

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

devtools/client/inspector/changes/ChangesView.js

@@ -40,6 +40,7 @@ class ChangesView {
     this.onChangesFront = this.onChangesFront.bind(this);
     this.onContextMenu = this.onContextMenu.bind(this);
     this.onCopy = this.onCopy.bind(this);
+    this.onCopyRule = this.copyRule.bind(this);
     this.destroy = this.destroy.bind(this);
 
     this.init();
@@ -57,6 +58,7 @@ class ChangesView {
     const changesApp = ChangesApp({
       onContextMenu: this.onContextMenu,
       onCopy: this.onCopy,
+      onCopyRule: this.onCopyRule,
     });
 
     // listen to the front for initialization, add listeners

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

@@ -23,6 +23,8 @@ class ChangesApp extends PureComponent {
       onContextMenu: PropTypes.func.isRequired,
       // Event handler for "copy" event
       onCopy: PropTypes.func.isRequired,
+      // Event handler for click on "Copy Rule" button
+      onCopyRule: PropTypes.func.isRequired,
     };
   }
 
@@ -30,6 +32,19 @@ class ChangesApp extends PureComponent {
     super(props);
   }
 
+  renderCopyButton(ruleId) {
+    return dom.button(
+      {
+        className: "changes__copy-rule-button",
+        onClick: e => {
+          this.props.onCopyRule(ruleId);
+        },
+        title: getStr("changes.contextmenu.copyRuleDescription"),
+      },
+      getStr("changes.contextmenu.copyRule")
+    );
+  }
+
   renderDeclarations(remove = [], add = []) {
     const removals = remove
       // Sorting changed declarations in the order they appear in the Rules view.
@@ -64,13 +79,14 @@ class ChangesApp extends PureComponent {
     return dom.div(
       {
         key: ruleId,
-        className: "rule devtools-monospace",
+        className: "changes__rule devtools-monospace",
         "data-rule-id": ruleId,
         style: {
           "--diff-level": level,
         },
       },
       this.renderSelectors(rule.selectors),
+      this.renderCopyButton(ruleId),
       // Render any nested child rules if they exist.
       rule.children.map(childRule => {
         return this.renderRule(childRule.ruleId, childRule, level + 1);
@@ -107,7 +123,7 @@ class ChangesApp extends PureComponent {
       elements.push(dom.div(
         {
           key: selector,
-          className: `level selector ${diffClass}`,
+          className: `level changes__selector ${diffClass}`,
           title: selector,
         },
         getDiffMarker(diffClass),

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

@@ -40,10 +40,10 @@ add_task(async function() {
   info("Wait for the change to be tracked");
   await onTrackChange;
 
-  const rules = panel.querySelectorAll(".rule");
+  const rules = panel.querySelectorAll(".changes__rule");
   is(rules.length, 1, "One rule was tracked as changed");
 
-  const selectors = rules.item(0).querySelectorAll(".selector");
+  const selectors = rules.item(0).querySelectorAll(".changes__selector");
   is(selectors.length, 2, "Two selectors were tracked as changed");
 
   const firstSelector = selectors.item(0);

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

@@ -46,6 +46,10 @@ changes.contextmenu.copyAllChanges=Copy All Changes
 # Changes panel context menu which copies the complete contents of a CSS rule.
 changes.contextmenu.copyRule=Copy Rule
 
+# LOCALIZATION NOTE (changes.contextmenu.copyRuleDescription): Detailed explanation for
+# "Copy Rule" option in Changes panel. Used as title attribute on "Copy Rule" button.
+changes.contextmenu.copyRuleDescription=Copy contents of this CSS rule to clipboard.
+
 # LOCALIZATION NOTE (changes.contextmenu.selectAll): Label for "Select All" option in the
 # Changes panel context menu to select all text content.
 changes.contextmenu.selectAll=Select All

devtools/client/themes/changes.css

@@ -4,6 +4,9 @@
 
  /* CSS Variables specific to the Changes panel that aren't defined by the themes */
  :root {
+   --changes-button-background-color: var(--grey-90-a10);
+   --changes-button-background-color-hover: var(--grey-90-a15);
+   --changes-button-background-color-active: var(--grey-90-a20);
    --diff-add-background-color: #f1feec;
    --diff-add-text-color: #54983f;
    --diff-remove-background-color: #fbf2f5;
@@ -19,6 +22,7 @@
  }
 
 :root.theme-dark {
+  --changes-button-background-color: #252526;
   --diff-add-background-color: rgba(18, 188, 0, 0.15);
   --diff-add-text-color: #12BC00;
   --diff-remove-background-color: rgba(255, 0, 57, 0.15);
@@ -77,10 +81,42 @@
                      var(--diff-level-offset) * var(--diff-level));
 }
 
-#sidebar-panel-changes .selector {
+/* Hide the Copy Rule button by default. */
+.changes__copy-rule-button {
+  background-color: var(--changes-button-background-color);
+  border-radius: 5px;
+  border: none;
+  color: var(--theme-body-color);
+  display: none;
+  padding: 1px 5px;
+  position: absolute;
+  right: 5px;
+  top: 2px;
+}
+
+.changes__copy-rule-button:hover {
+  background-color: var(--changes-button-background-color-hover);
+}
+
+.changes__copy-rule-button:active {
+  background-color: var(--changes-button-background-color-active);
+}
+
+.changes__rule {
+  position: relative;
+}
+
+.changes__selector {
   word-wrap: break-word;
 }
 
+/* Show the Copy Rule button when hovering over the rule's selector elements */
+.changes__selector:hover + .changes__copy-rule-button,
+.changes__selector:hover + .changes__selector + .changes__copy-rule-button,
+.changes__copy-rule-button:hover {
+  display: block;
+}
+
 #sidebar-panel-changes .declaration-name {
   margin-left: 10px;
 }

devtools/client/themes/variables.css

@@ -255,4 +255,7 @@
   --grey-80: #2a2a2e;
   --grey-85: #1b1b1d;
   --grey-90: #0c0c0d;
+  --grey-90-a10: rgba(12, 12, 13, 0.1);
+  --grey-90-a15: rgba(12, 12, 13, 0.15);
+  --grey-90-a20: rgba(12, 12, 13, 0.2);
 }