JavaFX and Firebug Lite in web page inspector mode

Question

I created a simple browser with JavaFX using WebView . I have also added Firebug Lite to inspect the website. To enable Firebug Lite I used a WebEngine and the method executeScript() :

engine.executeScript("if (!document.getElementById('FirebugLite')){E = document['createElement' + 'NS'] && document.documentElement.namespaceURI;E = E ? document['createElement' + 'NS'](E, 'script') : document['createElement']('script');E['setAttribute']('id', 'FirebugLite');E['setAttribute']('src', 'https://getfirebug.com/' + 'firebug-lite.js' + '#startOpened');E['setAttribute']('FirebugLite', '4');(document['getElementsByTagName']('head')[0] || document['getElementsByTagName']('body')[0]).appendChild(E);E = new Image;E['setAttribute']('src', 'https://getfirebug.com/' + '#startOpened');}");

How can I intercept the return value (a string I suppose) of the function of Firebug Lite's inspector in JavaFX?

Answer 1

Just put it in a variable:

Object result = engine.executeScript("if (!document.getElementById('FirebugLite')){"+
    "E = document['createElement' + 'NS'] && document.documentElement.namespaceURI;"+
    "E = E ? document['createElement' + 'NS'](E, 'script') :"+
    "document['createElement']('script');"+
    "E['setAttribute']('id', 'FirebugLite');"+
    "E['setAttribute']('src', 'https://getfirebug.com/' + 'firebug-lite.js' + '#startOpened');"+
    "E['setAttribute']('FirebugLite', '4');"+
    "(document['getElementsByTagName']('head')[0] || document['getElementsByTagName']('body')[0]).appendChild(E);"+
    "E = new Image;E['setAttribute']('src', 'https://getfirebug.com/' + '#startOpened');}"
);

The actual type of the returned value depends on the result of executing the Javascript, and you can just downcast to the appropriate type. For exapmle, if you know it's a String , you can do

String result = (String) engine.executeScript(...);

The documentation explicitly lists how different Javascript types are mapped to the Java type that is returned.

Answer 2

I don't have any experience with JavaFX, though I know that Firebug Lite does not expose the element you inspected with it nor does it trigger any events related to that by itself. So you can't access that information directly. See the related source code .

What Firebug Lite basically does is to create a <div> as overlay for the highlighter and to set two event handlers for mousemove and mousedown for it to process the mouse clicks, which you can also listen to for your purposes.

To get the element inspected via Firebug Lite via JavaScript you can use this code:

document.addEventListener("mousedown", function(e) {
  if (e.target.id === "fbInspectFrame") {
    var inspectedElement = Firebug.browser.getElementFromPoint(e.clientX, e.clientY);

    // Here goes the code, which processes the inspected element
  }
});

Explanation:

To get the inspected element, you have to listen to the mousedown event. But the action should only happen when the inspector is enabled, which is true when the inspected element is actually the overlay <div> called 'fbInspectFrame' Firebug Lite injects while inspecting.

To get the actual inspected element (note that it's an object, not a string) Firebug Lite offers a function called Firebug.browser.getElementFromPoint() , which is called with the mouse coordinates from the event.

This JavaScript element then needs to be accessed by your JavaFX code.