Bug 1231932 - Added copy attribute value context menu to elements in the DOM Inspector; r=gl

Added a new attributes submenu option to copy value of an attribute
to clipboard. Also updated the corresponding test files.

devtools/client/inspector/inspector.js

@@ -1283,6 +1283,14 @@ Inspector.prototype = {
       disabled: !isEditableElement,
       click: () => this.onAddAttribute(),
     }));
+    attributesSubmenu.append(new MenuItem({
+      id: "node-menu-copy-attribute",
+      label: INSPECTOR_L10N.getFormatStr("inspectorCopyAttributeValue.label",
+                                        isAttributeClicked ? `"${nodeInfo.value}"` : ""),
+      accesskey: INSPECTOR_L10N.getStr("inspectorCopyAttributeValue.accesskey"),
+      disabled: !isAttributeClicked,
+      click: () => this.onCopyAttributeValue(),
+    }));
     attributesSubmenu.append(new MenuItem({
       id: "node-menu-edit-attribute",
       label: INSPECTOR_L10N.getFormatStr("inspectorEditAttribute.label",
@@ -1291,13 +1299,11 @@ Inspector.prototype = {
       disabled: !isAttributeClicked,
       click: () => this.onEditAttribute(),
     }));
-
     attributesSubmenu.append(new MenuItem({
       id: "node-menu-remove-attribute",
       label: INSPECTOR_L10N.getFormatStr("inspectorRemoveAttribute.label",
                                         isAttributeClicked ? `"${nodeInfo.name}"` : ""),
-      accesskey:
-        INSPECTOR_L10N.getStr("inspectorRemoveAttribute.accesskey"),
+      accesskey: INSPECTOR_L10N.getStr("inspectorRemoveAttribute.accesskey"),
       disabled: !isAttributeClicked,
       click: () => this.onRemoveAttribute(),
     }));
@@ -1817,6 +1823,14 @@ Inspector.prototype = {
     container.addAttribute();
   },
 
+  /**
+   * Copy attribute value for node.
+   * Used for node context menu and shouldn't be called directly.
+   */
+  onCopyAttributeValue: function () {
+    clipboardHelper.copyString(this.nodeMenuTriggerInfo.value);
+  },
+
   /**
    * Edit attribute for node.
    * Used for node context menu and shouldn't be called directly.

devtools/client/inspector/test/browser_inspector_menu-01-sensitivity.js

@@ -35,6 +35,7 @@ const ALL_MENU_ITEMS = [
   "node-menu-scrollnodeintoview",
   "node-menu-screenshotnode",
   "node-menu-add-attribute",
+  "node-menu-copy-attribute",
   "node-menu-edit-attribute",
   "node-menu-remove-attribute"
 ].concat(PASTE_MENU_ITEMS, ACTIVE_ON_DOCTYPE_ITEMS);
@@ -70,6 +71,7 @@ const TEST_CASES = [
     clipboardDataType: "html",
     disabled: [
       "node-menu-copyimagedatauri",
+      "node-menu-copy-attribute",
       "node-menu-edit-attribute",
       "node-menu-remove-attribute"
     ],
@@ -86,6 +88,7 @@ const TEST_CASES = [
       "node-menu-pasteafter",
       "node-menu-pastefirstchild",
       "node-menu-pastelastchild",
+      "node-menu-copy-attribute",
       "node-menu-edit-attribute",
       "node-menu-remove-attribute"
     ],
@@ -99,6 +102,7 @@ const TEST_CASES = [
       "node-menu-copyimagedatauri",
       "node-menu-pastebefore",
       "node-menu-pasteafter",
+      "node-menu-copy-attribute",
       "node-menu-edit-attribute",
       "node-menu-remove-attribute"
     ]
@@ -109,6 +113,7 @@ const TEST_CASES = [
     clipboardDataType: "html",
     selector: "img",
     disabled: [
+      "node-menu-copy-attribute",
       "node-menu-edit-attribute",
       "node-menu-remove-attribute"
     ]
@@ -123,6 +128,7 @@ const TEST_CASES = [
       "node-menu-pastebefore",
       "node-menu-pasteafter",
       "node-menu-screenshotnode",
+      "node-menu-copy-attribute",
       "node-menu-edit-attribute",
       "node-menu-remove-attribute"
     ],
@@ -133,6 +139,7 @@ const TEST_CASES = [
     disabled: PASTE_MENU_ITEMS.concat([
       "node-menu-copyimagedatauri",
       "node-menu-screenshotnode",
+      "node-menu-copy-attribute",
       "node-menu-edit-attribute",
       "node-menu-remove-attribute"
     ]),
@@ -144,6 +151,7 @@ const TEST_CASES = [
     selector: "#paste-area",
     disabled: [
       "node-menu-copyimagedatauri",
+      "node-menu-copy-attribute",
       "node-menu-edit-attribute",
       "node-menu-remove-attribute"
     ]
@@ -157,6 +165,7 @@ const TEST_CASES = [
     selector: "#paste-area",
     disabled: PASTE_MENU_ITEMS.concat([
       "node-menu-copyimagedatauri",
+      "node-menu-copy-attribute",
       "node-menu-edit-attribute",
       "node-menu-remove-attribute"
     ]),
@@ -168,6 +177,7 @@ const TEST_CASES = [
     selector: "#paste-area",
     disabled: PASTE_MENU_ITEMS.concat([
       "node-menu-copyimagedatauri",
+      "node-menu-copy-attribute",
       "node-menu-edit-attribute",
       "node-menu-remove-attribute"
     ]),
@@ -179,6 +189,7 @@ const TEST_CASES = [
     selector: "#paste-area",
     disabled: PASTE_MENU_ITEMS.concat([
       "node-menu-copyimagedatauri",
+      "node-menu-copy-attribute",
       "node-menu-edit-attribute",
       "node-menu-remove-attribute"
     ]),
@@ -189,6 +200,7 @@ const TEST_CASES = [
     disabled: PASTE_MENU_ITEMS.concat([
       "node-menu-copyimagedatauri",
       "node-menu-screenshotnode",
+      "node-menu-copy-attribute",
       "node-menu-edit-attribute",
       "node-menu-remove-attribute"
     ]),
@@ -199,6 +211,7 @@ const TEST_CASES = [
     disabled: PASTE_MENU_ITEMS.concat([
       "node-menu-copyimagedatauri",
       "node-menu-screenshotnode",
+      "node-menu-copy-attribute",
       "node-menu-edit-attribute",
       "node-menu-remove-attribute"
     ]),

devtools/client/inspector/test/browser_inspector_menu-05-attribute-items.js

@@ -12,6 +12,7 @@ add_task(function* () {
   yield selectNode("#attributes", inspector);
 
   yield testAddAttribute();
+  yield testCopyAttributeValue();
   yield testEditAttribute();
   yield testRemoveAttribute();
 
@@ -29,6 +30,20 @@ add_task(function* () {
     ok(hasAttribute, "attribute was successfully added");
   }
 
+  function* testCopyAttributeValue() {
+    info("Testing 'Copy Attribute Value' and waiting for clipboard promise to resolve");
+    let copyAttributeValue = getMenuItem("node-menu-copy-attribute");
+
+    info("Triggering 'Copy Attribute Value' and waiting for clipboard to copy the value");
+    inspector.nodeMenuTriggerInfo = {
+      type: "attribute",
+      name: "data-edit",
+      value: "the"
+    };
+
+    yield waitForClipboardPromise(() => copyAttributeValue.click(), "the");
+  }
+
   function* testEditAttribute() {
     info("Testing 'Edit Attribute' menu item");
     let editAttribute = getMenuItem("node-menu-edit-attribute");

devtools/client/inspector/test/doc_inspector_menu.html

@@ -23,7 +23,7 @@
       </div>
       <p id="console-var">Paragraph for testing console variables</p>
       <p id="console-var-multi">Paragraph for testing multiple console variables</p>
-      <p id="attributes" data-edit="original" data-remove="thing">Attributes are going to be changed here</p>
+      <p id="attributes" data-copy="the" data-edit="original" data-remove="thing">Attributes are going to be changed here</p>
     </div>
   </body>
 </html>

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

@@ -117,6 +117,13 @@ inspectorEditAttribute.accesskey=E
 inspectorRemoveAttribute.label=Remove Attribute %S
 inspectorRemoveAttribute.accesskey=R
 
+# LOCALIZATION NOTE (inspectorCopyAttributeValue.label): This is the label of a
+# sub-menu "Attribute" in the inspector contextual-menu that appears
+# when the user right-clicks on the attribute of a node in the inspector,
+# and that allows to copy the attribute value to clipboard.
+inspectorCopyAttributeValue.label=Copy Attribute Value %S
+inspectorCopyAttributeValue.accesskey=V
+
 # LOCALIZATION NOTE (inspector.nodePreview.selectNodeLabel):
 # This string is displayed in a tooltip that is shown when hovering over a DOM
 # node preview (e.g. something like "div#foo.bar").