Bug 1025778 - Save value as global variable in console;r=jlongster

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

@@ -102,3 +102,5 @@
 <!ENTITY clearOutputCtrl.key  "L">
 <!ENTITY openInVarViewCmd.label "Open in Variables View">
 <!ENTITY openInVarViewCmd.accesskey "V">
+<!ENTITY storeAsGlobalVar.label "Store as global variable">
+<!ENTITY storeAsGlobalVar.accesskey "S">

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

@@ -28,7 +28,7 @@ add_task(function* () {
     let jsterm = hud.jsterm;
 
     let jstermInput = jsterm.hud.document.querySelector(".jsterm-input-node");
-    ok(jstermInput.value === "temp0", "first console variable is named temp0");
+    is(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");
@@ -37,7 +37,7 @@ add_task(function* () {
     dispatchCommandEvent(useInConsoleNode);
     yield inspector.once("console-var-ready");
 
-    ok(jstermInput.value === "temp1", "second console variable is named temp1");
+    is(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");

devtools/client/webconsole/console-output.js

@@ -2534,6 +2534,25 @@ Widgets.JSObject.prototype = Heritage.extend(Widgets.BaseWidget.prototype,
     });
   },
 
+  storeObjectInWindow: function()
+  {
+    let evalString = `{ let i = 0;
+      while (this.hasOwnProperty("temp" + i) && i < 1000) {
+        i++;
+      }
+      this["temp" + i] = _self;
+      "temp" + i;
+    }`;
+    let options = {
+      selectedObjectActor: this.objectActor.actor,
+    };
+
+    this.output.owner.jsterm.requestEvaluation(evalString, options).then((res) => {
+      this.output.owner.jsterm.focus();
+      this.output.owner.jsterm.setInputValue(res.result);
+    });
+  },
+
   /**
    * The click event handler for objects shown inline.
    * @private
@@ -2549,6 +2568,7 @@ Widgets.JSObject.prototype = Heritage.extend(Widgets.BaseWidget.prototype,
     // https://github.com/firebug/firebug/blob/master/extension/content/firebug/chrome/menu.js
     let doc = ev.target.ownerDocument;
     let cmPopup = doc.getElementById("output-contextmenu");
+
     let openInVarViewCmd = doc.getElementById("menu_openInVarView");
     let openVarView = this.openObjectInVariablesView.bind(this);
     openInVarViewCmd.addEventListener("command", openVarView);
@@ -2558,6 +2578,22 @@ Widgets.JSObject.prototype = Heritage.extend(Widgets.BaseWidget.prototype,
       openInVarViewCmd.removeEventListener("command", openVarView);
       openInVarViewCmd.setAttribute("disabled", "true");
     });
+
+    // 'Store as global variable' command isn't supported on pre-44 servers,
+    // so remove it from the menu in that case.
+    let storeInGlobalCmd = doc.getElementById("menu_storeAsGlobal");
+    if (!this.output.webConsoleClient.traits.selectedObjectActor) {
+      storeInGlobalCmd.remove();
+    } else if (storeInGlobalCmd) {
+      let storeObjectInWindow = this.storeObjectInWindow.bind(this);
+      storeInGlobalCmd.addEventListener("command", storeObjectInWindow);
+      storeInGlobalCmd.removeAttribute("disabled");
+      cmPopup.addEventListener("popuphiding", function onPopupHiding() {
+        cmPopup.removeEventListener("popuphiding", onPopupHiding);
+        storeInGlobalCmd.removeEventListener("command", storeObjectInWindow);
+        storeInGlobalCmd.setAttribute("disabled", "true");
+      });
+    }
   },
 
   /**

devtools/client/webconsole/panel.js

@@ -32,12 +32,7 @@ WebConsolePanel.prototype = {
    */
   focusInput: function WCP_focusInput()
   {
-    let inputNode = this.hud.jsterm.inputNode;
+    this.hud.jsterm.focus();
-
-    if (!inputNode.getAttribute("focused"))
-    {
-      inputNode.focus();
-    }
   },
 
   /**

devtools/client/webconsole/test/browser.ini

@@ -389,3 +389,4 @@ skip-if = e10s # Bug 1042253 - webconsole e10s tests (Linux debug timeout)
 [browser_netmonitor_shows_reqs_in_webconsole.js]
 [browser_webconsole_bug_1050691_click_function_to_source.js]
 [browser_webconsole_context_menu_open_in_var_view.js]
+[browser_webconsole_context_menu_store_as_global.js]

devtools/client/webconsole/test/browser_webconsole_context_menu_open_in_var_view.js

@@ -13,7 +13,7 @@ const TEST_URI = `data:text/html,<script>
   console.log("foo", window);
 </script>`;
 
-var test = asyncTest(function*() {
+add_task(function*() {
   yield loadTab(TEST_URI);
   let hud = yield openConsole();
 

devtools/client/webconsole/test/browser_webconsole_context_menu_store_as_global.js

@@ -0,0 +1,66 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// Tests the "Store as global variable" context menu item feature.
+// It should be work, and be enabled only for objects
+
+"use strict";
+
+const TEST_URI = `data:text/html,<script>
+  window.bar = { baz: 1 };
+  console.log("foo");
+  console.log("foo", window.bar);
+</script>`;
+
+add_task(function*() {
+  yield loadTab(TEST_URI);
+  let hud = yield openConsole();
+
+  let [result] = yield waitForMessages({
+    webconsole: hud,
+    messages: [{
+      category: CATEGORY_WEBDEV,
+      severity: SEVERITY_LOG,
+      count: 2,
+      text: /foo/
+    }],
+  });
+
+  let [msgWithText, msgWithObj] = [...result.matched];
+  ok(msgWithText && msgWithObj, "Two messages should have appeared");
+
+  let contextMenu = hud.iframeWindow.document
+                                    .getElementById("output-contextmenu");
+  let storeAsGlobalItem = contextMenu.querySelector("#menu_storeAsGlobal");
+  let obj = msgWithObj.querySelector(".cm-variable");
+  let text = msgWithText.querySelector(".console-string");
+  let onceInputSet = hud.jsterm.once("set-input-value");
+
+  info("Waiting for context menu on the object");
+  yield waitForContextMenu(contextMenu, obj, () => {
+    ok(storeAsGlobalItem.disabled === false, "The \"Store as global\" " +
+      "context menu item should be available for objects");
+    storeAsGlobalItem.click();
+  }, () => {
+    ok(storeAsGlobalItem.disabled === true, "The \"Store as global\" " +
+      "context menu item should be disabled on popup hiding");
+  });
+
+  info("Waiting for context menu on the text node");
+  yield waitForContextMenu(contextMenu, text, () => {
+    ok(storeAsGlobalItem.disabled === true, "The \"Store as global\" " +
+      "context menu item should be disabled for texts");
+  });
+
+  info("Waiting for input to be set");
+  yield onceInputSet;
+
+  is(hud.jsterm.inputNode.value, "temp0", "Input was set");
+  let executedResult = yield hud.jsterm.execute();
+
+  ok(executedResult.textContent.includes("{ baz: 1 }"),
+     "Correct variable assigned into console");
+
+});

devtools/client/webconsole/webconsole.js

@@ -3230,6 +3230,13 @@ JSTerm.prototype = {
     this.lastInputValue && this.setInputValue(this.lastInputValue);
   },
 
+  focus: function() {
+    let inputNode = this.inputNode;
+    if (!inputNode.getAttribute("focused")) {
+      inputNode.focus();
+    }
+  },
+
   /**
    * The JavaScript evaluation response handler.
    *
@@ -3444,6 +3451,7 @@ JSTerm.prototype = {
       bindObjectActor: aOptions.bindObjectActor,
       frameActor: frameActor,
       selectedNodeActor: aOptions.selectedNodeActor,
+      selectedObjectActor: aOptions.selectedObjectActor,
     };
 
     this.webConsoleClient.evaluateJSAsync(aString, onResult, evalOptions);
@@ -3945,6 +3953,7 @@ JSTerm.prototype = {
     this.completeNode.value = "";
     this.resizeInput();
     this._inputChanged = true;
+    this.emit("set-input-value");
   },
 
   /**

devtools/client/webconsole/webconsole.xul

@@ -82,6 +82,8 @@ function goUpdateConsoleCommands() {
                 selection="network" selectionType="single"/>
       <menuitem id="menu_openInVarView" label="&openInVarViewCmd.label;"
         accesskey="&openInVarViewCmd.accesskey;" disabled="true"/>
+      <menuitem id="menu_storeAsGlobal" label="&storeAsGlobalVar.label;"
+        accesskey="&storeAsGlobalVar.accesskey;"/>
       <menuitem id="cMenu_copy"/>
       <menuitem id="cMenu_selectAll"/>
     </menupopup>

devtools/server/actors/webconsole.js

@@ -91,7 +91,8 @@ function WebConsoleActor(aConnection, aParentActor)
   this.traits = {
     customNetworkRequest: !this._parentIsContentActor,
     evaluateJSAsync: true,
-    transferredResponseSize: true
+    transferredResponseSize: true,
+    selectedObjectActor: true, // 44+
   };
 }
 
@@ -832,6 +833,7 @@ WebConsoleActor.prototype =
       frameActor: aRequest.frameActor,
       url: aRequest.url,
       selectedNodeActor: aRequest.selectedNodeActor,
+      selectedObjectActor: aRequest.selectedObjectActor,
     };
 
     let evalInfo = this.evalWithDebugger(input, evalOptions);
@@ -1095,6 +1097,8 @@ WebConsoleActor.prototype =
    *          |evalWithBindings()| will be called with one additional binding:
    *          |_self| which will point to the Debugger.Object of the given
    *          ObjectActor.
+   *        - selectedObjectActor: Like bindObjectActor, but executes with the
+   *          top level window as the global.
    *        - frameActor: the FrameActor ID to use for evaluation. The given
    *        debugger frame is used for evaluation, instead of the global window.
    *        - selectedNodeActor: the NodeActor ID of the currently selected node
@@ -1151,8 +1155,9 @@ WebConsoleActor.prototype =
     // If we have an object to bind to |_self|, create a Debugger.Object
     // referring to that object, belonging to dbg.
     let bindSelf = null;
-    if (aOptions.bindObjectActor) {
+    if (aOptions.bindObjectActor || aOptions.selectedObjectActor) {
-      let objActor = this.getActorByID(aOptions.bindObjectActor);
+      let objActor = this.getActorByID(aOptions.bindObjectActor ||
+                                       aOptions.selectedObjectActor);
       if (objActor) {
         let jsObj = objActor.obj.unsafeDereference();
         // If we use the makeDebuggeeValue method of jsObj's own global, then
@@ -1160,8 +1165,12 @@ WebConsoleActor.prototype =
         // that is, without wrappers. The evalWithBindings call will then wrap
         // jsObj appropriately for the evaluation compartment.
         let global = Cu.getGlobalForObject(jsObj);
-        dbgWindow = dbg.makeGlobalObjectReference(global);
+        let _dbgWindow = dbg.makeGlobalObjectReference(global);
         bindSelf = dbgWindow.makeDebuggeeValue(jsObj);
+
+        if (aOptions.bindObjectActor) {
+          dbgWindow = _dbgWindow;
+        }
       }
     }
 

devtools/shared/webconsole/client.js

@@ -255,6 +255,7 @@ WebConsoleClient.prototype = {
       frameActor: aOptions.frameActor,
       url: aOptions.url,
       selectedNodeActor: aOptions.selectedNodeActor,
+      selectedObjectActor: aOptions.selectedObjectActor,
     };
     this._client.request(packet, aOnResponse);
   },
@@ -279,6 +280,7 @@ WebConsoleClient.prototype = {
       frameActor: aOptions.frameActor,
       url: aOptions.url,
       selectedNodeActor: aOptions.selectedNodeActor,
+      selectedObjectActor: aOptions.selectedObjectActor,
     };
 
     this._client.request(packet, response => {

devtools/shared/webconsole/test/test_jsterm.html

@@ -11,6 +11,8 @@
 <body>
 <p>Test for JavaScript terminal functionality</p>
 
+<iframe id="content-iframe" src="http://example.com/chrome/devtools/shared/webconsole/test/sandboxed_iframe.html"></iframe>
+
 <script class="testbody" type="text/javascript;version=1.8">
 SimpleTest.waitForExplicitFinish();
 
@@ -21,12 +23,14 @@ let {MAX_AUTOCOMPLETE_ATTEMPTS,MAX_AUTOCOMPLETIONS} = require("devtools/shared/w
 // This test runs all of its assertions twice - once with
 // evaluateJS and once with evaluateJSAsync.
 let evaluatingSync = true;
-function evaluateJS(input, callback) {
+function evaluateJS(input, options = {}) {
-  if (evaluatingSync) {
+  return new Promise((resolve, reject) => {
-    gState.client.evaluateJS(input, callback);
+    if (evaluatingSync) {
-  } else {
+      gState.client.evaluateJS(input, resolve, options);
-    gState.client.evaluateJSAsync(input, callback);
+    } else {
-  }
+      gState.client.evaluateJSAsync(input, resolve, options);
+    }
+  });
 }
 
 function startTest()
@@ -63,18 +67,20 @@ function onAttach(aState, aResponse)
   let tests = [doAutocomplete1, doAutocomplete2, doAutocomplete3,
                doAutocomplete4, doAutocompleteLarge1, doAutocompleteLarge2,
                doSimpleEval, doWindowEval, doEvalWithException,
-               doEvalWithHelper, doEvalString, doEvalLongString];
+               doEvalWithHelper, doEvalString, doEvalLongString,
+               doEvalWithBinding, doEvalWithBindingFrame].map(t => {
+                 return Task.async(t);
+               });
+
   runTests(tests, testEnd);
 }
 
-function doAutocomplete1()
+function doAutocomplete1() {
-{
   info("test autocomplete for 'window.foo'");
   gState.client.autocomplete("window.foo", 10, onAutocomplete1);
 }
 
-function onAutocomplete1(aResponse)
+function onAutocomplete1(aResponse) {
-{
   let matches = aResponse.matches;
 
   is(aResponse.matchProp, "foo", "matchProp");
@@ -84,14 +90,12 @@ function onAutocomplete1(aResponse)
   nextTest();
 }
 
-function doAutocomplete2()
+function doAutocomplete2() {
-{
   info("test autocomplete for 'window.foobarObject.'");
   gState.client.autocomplete("window.foobarObject.", 20, onAutocomplete2);
 }
 
-function onAutocomplete2(aResponse)
+function onAutocomplete2(aResponse) {
-{
   let matches = aResponse.matches;
 
   ok(!aResponse.matchProp, "matchProp");
@@ -102,15 +106,13 @@ function onAutocomplete2(aResponse)
   nextTest();
 }
 
-function doAutocomplete3()
+function doAutocomplete3() {
-{
   // Check that completion suggestions are offered inside the string.
   info("test autocomplete for 'dump(window.foobarObject.)'");
   gState.client.autocomplete("dump(window.foobarObject.)", 25, onAutocomplete3);
 }
 
-function onAutocomplete3(aResponse)
+function onAutocomplete3(aResponse) {
-{
   let matches = aResponse.matches;
 
   ok(!aResponse.matchProp, "matchProp");
@@ -121,31 +123,27 @@ function onAutocomplete3(aResponse)
   nextTest();
 }
 
-function doAutocomplete4()
+function doAutocomplete4() {
-{
   // Check that completion requests can have no suggestions.
   info("test autocomplete for 'dump(window.foobarObject.)'");
   gState.client.autocomplete("dump(window.foobarObject.)", 26, onAutocomplete4);
 }
 
-function onAutocomplete4(aResponse)
+function onAutocomplete4(aResponse) {
-{
   ok(!aResponse.matchProp, "matchProp");
   is(aResponse.matches.length, 0, "matches.length");
 
   nextTest();
 }
 
-function doAutocompleteLarge1()
+function doAutocompleteLarge1() {
-{
   // Check that completion requests with too large objects will
   // have no suggestions.
   info("test autocomplete for 'window.largeObject1.'");
   gState.client.autocomplete("window.largeObject1.", 20, onAutocompleteLarge1);
 }
 
-function onAutocompleteLarge1(aResponse)
+function onAutocompleteLarge1(aResponse) {
-{
   ok(!aResponse.matchProp, "matchProp");
   info (aResponse.matches.join("|"));
   is(aResponse.matches.length, 0, "Bailed out with too many properties");
@@ -153,51 +151,39 @@ function onAutocompleteLarge1(aResponse)
   nextTest();
 }
 
-function doAutocompleteLarge2()
+function doAutocompleteLarge2() {
-{
   // Check that completion requests with pretty large objects will
   // have MAX_AUTOCOMPLETIONS suggestions
   info("test autocomplete for 'window.largeObject2.'");
   gState.client.autocomplete("window.largeObject2.", 20, onAutocompleteLarge2);
 }
 
-function onAutocompleteLarge2(aResponse)
+function onAutocompleteLarge2(aResponse) {
-{
   ok(!aResponse.matchProp, "matchProp");
   is(aResponse.matches.length, MAX_AUTOCOMPLETIONS, "matches.length is MAX_AUTOCOMPLETIONS");
 
   nextTest();
 }
 
-function doSimpleEval()
+function* doSimpleEval() {
-{
   info("test eval '2+2'");
-  evaluateJS("2+2", onSimpleEval);
+  let response = yield evaluateJS("2+2");
-}
+  checkObject(response, {
-
-function onSimpleEval(aResponse)
-{
-  checkObject(aResponse, {
     from: gState.actor,
     input: "2+2",
     result: 4,
   });
 
-  ok(!aResponse.exception, "no eval exception");
+  ok(!response.exception, "no eval exception");
-  ok(!aResponse.helperResult, "no helper result");
+  ok(!response.helperResult, "no helper result");
 
   nextTest();
 }
 
-function doWindowEval()
+function* doWindowEval() {
-{
   info("test eval 'document'");
-  evaluateJS("document", onWindowEval);
+  let response = yield evaluateJS("document");
-}
+  checkObject(response, {
-
-function onWindowEval(aResponse)
-{
-  checkObject(aResponse, {
     from: gState.actor,
     input: "document",
     result: {
@@ -207,21 +193,16 @@ function onWindowEval(aResponse)
     },
   });
 
-  ok(!aResponse.exception, "no eval exception");
+  ok(!response.exception, "no eval exception");
-  ok(!aResponse.helperResult, "no helper result");
+  ok(!response.helperResult, "no helper result");
 
   nextTest();
 }
 
-function doEvalWithException()
+function* doEvalWithException() {
-{
   info("test eval with exception");
-  evaluateJS("window.doTheImpossible()", onEvalWithException);
+  let response = yield evaluateJS("window.doTheImpossible()");
-}
+  checkObject(response, {
-
-function onEvalWithException(aResponse)
-{
-  checkObject(aResponse, {
     from: gState.actor,
     input: "window.doTheImpossible()",
     result: {
@@ -230,21 +211,16 @@ function onEvalWithException(aResponse)
     exceptionMessage: /doTheImpossible/,
   });
 
-  ok(aResponse.exception, "js eval exception");
+  ok(response.exception, "js eval exception");
-  ok(!aResponse.helperResult, "no helper result");
+  ok(!response.helperResult, "no helper result");
 
   nextTest();
 }
 
-function doEvalWithHelper()
+function* doEvalWithHelper() {
-{
   info("test eval with helper");
-  evaluateJS("clear()", onEvalWithHelper);
+  let response = yield evaluateJS("clear()");
-}
+  checkObject(response, {
-
-function onEvalWithHelper(aResponse)
-{
-  checkObject(aResponse, {
     from: gState.actor,
     input: "clear()",
     result: {
@@ -253,19 +229,14 @@ function onEvalWithHelper(aResponse)
     helperResult: { type: "clearOutput" },
   });
 
-  ok(!aResponse.exception, "no eval exception");
+  ok(!response.exception, "no eval exception");
 
   nextTest();
 }
 
-function doEvalString()
+function* doEvalString() {
-{
+  let response = yield evaluateJS("window.foobarObject.strfoo");
-  evaluateJS("window.foobarObject.strfoo", onEvalString);
+  checkObject(response, {
-}
-
-function onEvalString(aResponse)
-{
-  checkObject(aResponse, {
     from: gState.actor,
     input: "window.foobarObject.strfoo",
     result: "foobarz",
@@ -274,17 +245,12 @@ function onEvalString(aResponse)
   nextTest();
 }
 
-function doEvalLongString()
+function* doEvalLongString() {
-{
+  let response = yield evaluateJS("window.foobarObject.omgstr");
-  evaluateJS("window.foobarObject.omgstr", onEvalLongString);
-}
-
-function onEvalLongString(aResponse)
-{
   let str = top.foobarObject.omgstr;
   let initial = str.substring(0, DebuggerServer.LONG_STRING_INITIAL_LENGTH);
 
-  checkObject(aResponse, {
+  checkObject(response, {
     from: gState.actor,
     input: "window.foobarObject.omgstr",
     result: {
@@ -297,6 +263,58 @@ function onEvalLongString(aResponse)
   nextTest();
 }
 
+function* doEvalWithBinding() {
+  let response = yield evaluateJS("document;");
+  let documentActor = response.result.actor;
+
+  info("running a command with _self as document using bindObjectActor");
+  let bindObjectSame = yield evaluateJS("_self === document", {
+    bindObjectActor: documentActor
+  });
+  checkObject(bindObjectSame, {
+    result: true
+  });
+
+  info("running a command with _self as document using selectedObjectActor");
+  let selectedObjectSame = yield evaluateJS("_self === document", {
+    selectedObjectActor: documentActor
+  });
+  checkObject(selectedObjectSame, {
+    result: true
+  });
+
+  nextTest();
+}
+
+function* doEvalWithBindingFrame() {
+  let frameWin = top.document.querySelector("iframe").contentWindow;
+  frameWin.fooFrame = { bar: 1 };
+
+  let response = yield evaluateJS(
+    "document.querySelector('iframe').contentWindow.fooFrame"
+  );
+  let iframeObjectActor = response.result.actor;
+  ok(iframeObjectActor, "There is an actor associated with the response");
+
+  let bindObjectGlobal = yield evaluateJS("this.temp0 = _self;", {
+    bindObjectActor: iframeObjectActor
+  });
+  ok(!top.temp0,
+    "Global doesn't match the top global with bindObjectActor");
+  ok(frameWin.temp0 && frameWin.temp0.bar === 1,
+    "Global matches the object's global with bindObjectActor");
+
+  let selectedObjectGlobal = yield evaluateJS("this.temp1 = _self;", {
+    selectedObjectActor: iframeObjectActor
+  });
+  ok(top.temp1 && top.temp1.bar === 1,
+    "Global matches the top global with bindObjectActor");
+  ok(!frameWin.temp1,
+    "Global doesn't match the object's global with bindObjectActor");
+
+  nextTest()
+}
+
 function testEnd()
 {
   // If this is the first run, reload the page and do it again.