Implement jQuerify command

Author: janodvarko

chrome.manifest

@@ -1,5 +1,5 @@
 content firequery               chrome/content/
-content firequery-resources     chrome/resources/
+content firequery-resources     chrome/resources/ contentaccessible=yes
 skin    firequery classic/1.0   chrome/skin/classic/shared/
 
 locale  firequery en-US         chrome/locale/en-US/

lib/console-overlay.js

@@ -6,11 +6,11 @@ module.metadata = {
   "stability": "stable"
 };
 
+// Add-on SDK
 const options = require("@loader/options");
-
 const { Cu, Ci } = require("chrome");
 const { on, off, emit } = require("sdk/event/core");
-const { defer } = require("sdk/core/promise");
+const { defer, resolve } = require("sdk/core/promise");
 const { Class } = require("sdk/core/heritage");
 const { loadSheet, removeSheet } = require("sdk/stylesheet/utils");
 
@@ -20,14 +20,15 @@ const { PanelOverlay } = require("firebug.sdk/lib/panel-overlay.js");
 const { ToolbarButton } = require("firebug.sdk/lib/toolbar-button.js");
 const { Rdp } = require("firebug.sdk/lib/core/rdp.js");
 
-// FireQuery
-const { FireQueryFront } = require("./firequery-front.js");
-const { JQueryRenderer } = require("./jquery-renderer");
-
 // DevTools
 const { devtools } = Cu.import("resource://gre/modules/devtools/Loader.jsm", {});
 const { makeInfallible } = devtools["require"]("devtools/toolkit/DevToolsUtils.js");
 
+// FireQuery
+const { FireQueryFront } = require("./firequery-front");
+const { JQueryRenderer } = require("./jquery-renderer");
+const { getJQuerifyScript } = require("./jquerify-code");
+
 // URL of the {@FireQueryActor} module. This module will be
 // installed and loaded on the backend.
 const actorModuleUrl = options.prefixURI + "lib/firequery-actor.js";
@@ -107,14 +108,18 @@ const ConsoleOverlay = Class(
   attach: makeInfallible(function() {
     Trace.sysout("ConsoleOverlay.attach;");
 
+    if (this.deferredAttach) {
+      return this.deferredAttach.promise;
+    }
+
     let config = {
       prefix: FireQueryFront.prototype.typeName,
       actorClass: "FireQueryActor",
       frontClass: FireQueryFront,
       moduleUrl: actorModuleUrl
     };
 
-    let deferred = defer();
+    this.deferredAttach = defer();
     let client = this.toolbox.target.client;
 
     // Register as tab actor.
@@ -129,10 +134,12 @@ const ConsoleOverlay = Class(
       // Emit an event indicating that the attach process is done. This
       // can be used e.g. by tests.
       emit(this, "attached", front);
-      deferred.resolve(front);
+
+      // Resolve the 'attach promise'.
+      this.deferredAttach.resolve(front);
     });
 
-    return deferred.promise;
+    return this.deferredAttach.promise;
   }),
 
   detach: function() {
@@ -141,12 +148,44 @@ const ConsoleOverlay = Class(
     // xxxHonza: TODO
   },
 
+  getJQueryFront: function() {
+    return this.attach();
+  },
+
   // Commands
 
   onJQuerify: function() {
-    // xxxHonza: TODO
+    // xxxHonza: webConsoleClient should be available at this point,
+    // but safer would be to call attachConsole.
+    let webConsoleClient = getConsoleClient(this.panel);
+    if (!webConsoleClient) {
+      return;
+    }
+
+    let script = getJQuerifyScript();
+    webConsoleClient.evaluateJSAsync(script, response => {
+      if (response.error) {
+        TraceError.sysout("ConsoleOverlay.onJQuerify; ERROR " +
+          response.error, response);
+      }
+      else if (response.exception !== null) {
+        TraceError.sysout("ConsoleOverlay.onJQuerify; EXCEPTION " +
+          response.exception, response);
+      }
+      else {
+        Trace.sysout("ConsoleOverlay.onJQuerify; DONE " +
+          response.result, response);
+      }
+    });
   }
 });
 
+// Helpers
+
+function getConsoleClient(panel) {
+  return panel && panel.hud && panel.hud.ui ?
+    panel.hud.ui.webConsoleClient : null;
+}
+
 // Exports from this module
 exports.ConsoleOverlay = ConsoleOverlay;

lib/firequery-actor.js

@@ -205,18 +205,23 @@ function makeDebuggeeValueIfNeeded(obj, value) {
 
 function evalJQueryCache(object) {
   try {
-    var forceInternals = true;//Firebug.FireQuery.getPref("showInternalData") ? true : undefined;
+    var forceInternals = true;
     var win = object.ownerDocument.defaultView;
     var wrapper = win.wrappedJSObject || win;
     var jQuery = wrapper.jQuery;
     // jQuery 1.4 breaking changes (http://jquery14.com/day-01/jquery-14):
-    // jQuery.data(elem) no longer returns an id, it returns the element’s object cache instead.
-    var idOrCache = jQuery.data(object.wrappedJSObject || object, undefined, undefined, forceInternals);
+    // jQuery.data(elem) no longer returns an id, it returns the
+    // element's object cache instead.
+    var idOrCache = jQuery.data(object.wrappedJSObject || object,
+      undefined, undefined, forceInternals);
+
     if (typeof idOrCache == "object") {
-      return idOrCache; // jQuery 1.4+ path
+      // jQuery 1.4+ path
+      return idOrCache;
     }
 
-    return jQuery.cache[idOrCache]; // jQuery 1.3- path
+    // jQuery 1.3- path
+    return jQuery.cache[idOrCache];
   } catch (ex) {
   }
 };

lib/jquerify-code.js

@@ -0,0 +1,114 @@
+/* See license.txt for terms of usage */
+
+"use strict";
+
+module.metadata = {
+  "stability": "stable"
+};
+
+// Add-on SDK
+const { prefs } = require("sdk/simple-prefs");
+
+/**
+ * jQuerify by Karl Swedberg, taken from:
+ * http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet
+ * and slightly modified styles
+ */
+const jQuerifyCode = "\
+(function() {\
+  var el = document.createElement('div');\
+  var b = document.getElementsByTagName('body')[0];\
+  var otherlib = false;\
+  var msg = '';\
+  el.style.fontFamily = 'Arial, Verdana';\
+  el.style.position = 'fixed';\
+  el.style.padding = '5px 10px 5px 10px';\
+  el.style.margin = '0';\
+  el.style.zIndex = 1001;\
+  el.style.lineHeight = '46px';\
+  el.style.fontSize = '40px';\
+  el.style.fontWeight = 'bold';\
+  el.style.color = '#444';\
+  el.style.backgroundColor = '#FFFB00';\
+  el.style.MozBorderRadius = '8px';\
+  el.style.opacity = '0.8';\
+  el.style.textAlign = 'center';\
+  if (typeof jQuery != 'undefined') {\
+    msg = 'This page already using jQuery v' + jQuery.fn.jquery;\
+    if (typeof $jq == 'function') {\
+      msg += ' and noConflict().<br/>Use $jq(), not $().';\
+    }\
+    return showMsg();\
+  } else if (typeof $ == 'function') {\
+    otherlib = true;\
+  }\
+  function getScript(url, success, failure) {\
+    var script = document.createElement('script');\
+    script.src = url;\
+    var head = document.getElementsByTagName('head')[0],\
+    done = false;\
+    var timeout = setTimeout(function() { failure(); }, {{jQueryURLTimeout}});\
+    script.onload = script.onreadystatechange = function() {\
+      if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {\
+        done = true;\
+        clearTimeout(timeout);\
+        success();\
+      }\
+    };\
+    head.appendChild(script);\
+  }\
+  getScript('{{jQueryURL}}', \
+  function() {\
+    if (typeof jQuery == 'undefined') {\
+      msg = 'Sorry, but jQuery wasn\\'t able to load';\
+      return showMsg(true);\
+    } else {\
+      msg = 'This page is now jQuerified with v' + jQuery.fn.jquery;\
+      if (otherlib) {\
+        msg += ' and noConflict().<br/>Use $jq(), not $().';\
+      }\
+    }\
+    return showMsg();\
+  }, function() {\
+    msg = 'Unable to load jQuery from:<br/>{{jQueryURL}}';\
+    return showMsg(true);\
+  });\
+  function showMsg(isError) {\
+    el.innerHTML = msg;\
+    if (isError) el.style.backgroundColor = '#FF4444';\
+    b.appendChild(el);\
+    el.style.left = Math.floor((window.innerWidth - el.clientWidth) / 2) + 'px';\
+    el.style.top = Math.floor((window.innerHeight - el.clientHeight) / 2) + 'px';\
+    window.setTimeout(function() {\
+      if (typeof jQuery == 'undefined') {\
+        b.removeChild(el);\
+      } else {\
+        b.removeChild(el);\
+        if (otherlib) {\
+          $jq = jQuery.noConflict();\
+        }\
+      }\
+    },\
+    2500);\
+  }\
+})();\
+";
+
+/**
+ * xxxHonza TODO docs
+ *
+ * @returns
+ */
+function getJQuerifyScript() {
+  let defaultUrl = "chrome://firequery-resources/content/jquery.js";
+  let jQueryUrl = prefs.jQueryURL || defaultUrl;
+  let jQueryUrlTimeout = prefs.jQueryURLTimeout || 5000;
+
+  var code = jQuerifyCode;
+  code = code.replace(/\{\{jQueryURL\}\}/g, jQueryUrl.replace("'", "\\'"));
+  code = code.replace(/\{\{jQueryURLTimeout\}\}/g, jQueryUrlTimeout + "");
+  return code;
+}
+
+// Exports from this module
+exports.getJQuerifyScript = getJQuerifyScript;