Bug 1154363 - Assign the selected node from the inspector to a temp variable for use in the console. r=bgrins

--HG--
rename : browser/devtools/inspector/test/browser_inspector_menu-04-other.js => browser/devtools/inspector/test/browser_inspector_menu-05-other.js
extra : commitid : 2jKCUxugcOl

browser/devtools/inspector/inspector-panel.js

@@ -976,6 +976,36 @@ InspectorPanel.prototype = {
     });
   },
 
+  /**
+   * Use in Console.
+   *
+   * Takes the currently selected node in the inspector and assigns it to a
+   * temp variable on the content window.  Also opens the split console and
+   * autofills it with the temp variable.
+   */
+  useInConsole: function() {
+    this._toolbox.openSplitConsole().then(() => {
+      let panel = this._toolbox.getPanel("webconsole");
+      let jsterm = panel.hud.jsterm;
+
+      let evalString = `let i = 0;
+        while (window.hasOwnProperty("temp" + i) && i < 1000) {
+          i++;
+        }
+        window["temp" + i] = $0;
+        "temp" + i;
+      `;
+
+      let options = {
+        selectedNodeActor: this.selection.nodeFront.actorID,
+      };
+      jsterm.requestEvaluation(evalString, options).then((res) => {
+        jsterm.setInputValue(res.result);
+        this.emit("console-var-ready");
+      });
+    });
+  },
+
   /**
    * Clear any pseudo-class locks applied to the current hierarchy.
    */

browser/devtools/inspector/inspector.xul

@@ -55,6 +55,9 @@
       <menuitem id="node-menu-showdomproperties"
         label="&inspectorShowDOMProperties.label;"
         oncommand="inspector.showDOMProperties()"/>
+      <menuitem id="node-menu-useinconsole"
+        label="&inspectorUseInConsole.label;"
+        oncommand="inspector.useInConsole()"/>
       <menuitem id="node-menu-expand"
         label="&inspectorExpandNode.label;"
         oncommand="inspector.expandNode()"/>

browser/devtools/inspector/test/browser.ini

@@ -82,7 +82,8 @@ skip-if = e10s # GCLI isn't e10s compatible. See bug 1128988.
 [browser_inspector_menu-01-sensitivity.js]
 [browser_inspector_menu-02-copy-items.js]
 [browser_inspector_menu-03-paste-items.js]
-[browser_inspector_menu-04-other.js]
+[browser_inspector_menu-04-use-in-console.js]
+[browser_inspector_menu-05-other.js]
 [browser_inspector_navigation.js]
 [browser_inspector_pane-toggle-01.js]
 [browser_inspector_pane-toggle-02.js]

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

@@ -16,36 +16,40 @@ const PASTE_MENU_ITEMS = [
   "node-menu-pastelastchild",
 ];
 
+const ACTIVE_ON_DOCTYPE_ITEMS = [
+  "node-menu-showdomproperties",
+  "node-menu-useinconsole"
+];
+
 const ALL_MENU_ITEMS = [
   "node-menu-edithtml",
   "node-menu-copyinner",
   "node-menu-copyouter",
   "node-menu-copyuniqueselector",
   "node-menu-copyimagedatauri",
-  "node-menu-showdomproperties",
   "node-menu-delete",
   "node-menu-pseudo-hover",
   "node-menu-pseudo-active",
   "node-menu-pseudo-focus",
   "node-menu-scrollnodeintoview",
   "node-menu-screenshotnode"
-].concat(PASTE_MENU_ITEMS);
+].concat(PASTE_MENU_ITEMS, ACTIVE_ON_DOCTYPE_ITEMS);
 
-const ITEMS_WITHOUT_SHOWDOMPROPS =
-  ALL_MENU_ITEMS.filter(item => item != "node-menu-showdomproperties");
+const INACTIVE_ON_DOCTYPE_ITEMS =
+  ALL_MENU_ITEMS.filter(item => ACTIVE_ON_DOCTYPE_ITEMS.indexOf(item) === -1);
 
 const TEST_CASES = [
   {
     desc: "doctype node with empty clipboard",
     selector: null,
-    disabled: ITEMS_WITHOUT_SHOWDOMPROPS,
+    disabled: INACTIVE_ON_DOCTYPE_ITEMS,
   },
   {
     desc: "doctype node with html on clipboard",
     clipboardData: "<p>some text</p>",
     clipboardDataType: "html",
     selector: null,
-    disabled: ITEMS_WITHOUT_SHOWDOMPROPS,
+    disabled: INACTIVE_ON_DOCTYPE_ITEMS,
   },
   {
     desc: "element node HTML on the clipboard",

browser/devtools/inspector/test/browser_inspector_menu-04-use-in-console.js

@@ -0,0 +1,47 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Tests "Use in Console" menu item
+
+const TEST_URL = TEST_URL_ROOT + "doc_inspector_menu.html";
+
+registerCleanupFunction(() => {
+  Services.prefs.clearUserPref("devtools.toolbox.splitconsoleEnabled");
+});
+
+add_task(function* () {
+  let { inspector, toolbox } = yield openInspectorForURL(TEST_URL);
+
+  yield testUseInConsole();
+
+  function* testUseInConsole() {
+    info("Testing 'Use in Console' menu item.");
+    let useInConsoleNode = inspector.panelDoc.getElementById("node-menu-useinconsole");
+
+    yield selectNode("#console-var", inspector);
+    dispatchCommandEvent(useInConsoleNode);
+    yield inspector.once("console-var-ready");
+
+    let hud = toolbox.getPanel("webconsole").hud;
+    let jsterm = hud.jsterm;
+
+    let jstermInput = jsterm.hud.document.querySelector(".jsterm-input-node");
+    ok(jstermInput.value === "temp0", "first console variable is named temp0");
+
+    let result = yield jsterm.execute();
+    isnot(result.textContent.indexOf('<p id="console-var">'), -1, "variable temp0 references correct node");
+
+    yield selectNode("#console-var-multi", inspector);
+    dispatchCommandEvent(useInConsoleNode);
+    yield inspector.once("console-var-ready");
+
+    ok(jstermInput.value === "temp1", "second console variable is named temp1");
+
+    result = yield jsterm.execute();
+    isnot(result.textContent.indexOf('<p id="console-var-multi">'), -1, "variable temp1 references correct node");
+
+    jsterm.clearHistory();
+  }
+});

browser/devtools/inspector/test/browser_inspector_menu-05-other.js

@@ -71,12 +71,4 @@ add_task(function* () {
     // Follow up bug to add this test - https://bugzilla.mozilla.org/show_bug.cgi?id=1154107
     todo(false, "Verify that node is scrolled into the viewport.");
   }
-
-  function dispatchCommandEvent(node) {
-    info("Dispatching command event on " + node);
-    let commandEvent = document.createEvent("XULCommandEvent");
-    commandEvent.initCommandEvent("command", true, true, window, 0, false, false,
-                                  false, false, null);
-    node.dispatchEvent(commandEvent);
-  }
 });

browser/devtools/inspector/test/doc_inspector_menu.html

@@ -20,6 +20,8 @@
       <div id="hiddenElement" style="display: none;">
         <p id="nestedHiddenElement">Visible element nested inside a non-visible element</p>
       </div>
+      <p id="console-var">Paragraph for testing console variables</p>
+      <p id="console-var-multi">Paragraph for testing multiple console variables</p>
     </div>
   </body>
 </html>

browser/devtools/inspector/test/head.js

@@ -468,3 +468,15 @@ function redoChange(inspector) {
   inspector.markup.undo.redo();
   return mutated;
 }
+
+/**
+ * Dispatch a command event on a node (e.g. click on a contextual menu item).
+ * @param {DOMNode} node
+ */
+function dispatchCommandEvent(node) {
+  info("Dispatching command event on " + node);
+  let commandEvent = document.createEvent("XULCommandEvent");
+  commandEvent.initCommandEvent("command", true, true, window, 0, false, false,
+                                false, false, null);
+  node.dispatchEvent(commandEvent);
+}

browser/locales/en-US/chrome/browser/devtools/inspector.dtd

@@ -105,6 +105,12 @@
      opens the split Console and displays the properties in its side panel. -->
 <!ENTITY inspectorShowDOMProperties.label       "Show DOM Properties">
 
+<!-- LOCALIZATION NOTE (inspectorUseInConsole.label): This is the label
+     shown in the inspector contextual-menu for the item that outputs a
+     variable for the current node to the console. When triggered,
+     this item opens the split Console. -->
+<!ENTITY inspectorUseInConsole.label       "Use in Console">
+
 <!-- LOCALIZATION NOTE (inspectorExpandNode.label): This is the label
      shown in the inspector contextual-menu for recursively expanding
      mark-up elements -->