Tag Archives: dom

Things I’ve Learned This Week (June 1 – June 5, 2015)

How to get an nsIGlobalObject* from a JSContext*

I’m working on a patch for bug 1116188 to make gathering profiles from subprocesses asynchronous. In order to do that, I’m exposing a new method on nsIProfiler called getProfileDataAsync that is returning a DOM Promise. What’s interesting about this is that I’m returning a DOM Promise from C++! 1

In order to construct a DOM Promise in C++, I need to hand it something that implements nsIGlobalObject. I suspect that this helps the Promise determine which memory region that it belongs to.

My new method gets a JSContext* because I’ve got the [implicit_jscontext] bit about the method definition in the nsIProfiler.idl file… so how do I go about turning that into an nsIGlobalObject?

Here’s the maneuver:

// Where aCX is your JSContext*:
nsIGlobalObject* go = xpc::NativeGlobal(JS::CurrentGlobalOrNull(aCx));

That will, as the name suggests, return either an nsIGlobalObject*, or a nullptr.

Resolving a DOM Promise from C++ with a JS Object

For my patch for bug 1116188, it’s all well and good to create a DOM Promise, but you have to resolve or reject that Promise for it to have any real value.

In my case, I wanted to take a string, parse it into a JS Object, and resolve with that.

Resolving or rejecting a DOM Promise in Javascript is pretty straight-forward – you’re given back resolve / reject function, and you just need to call those with your results and you’re done.

In C++, things get a little hairier. As I discovered in my most recent episode of The Joy of Coding, conditions need to be right in order for this to work out.

Here’s what I ended up doing (I’ve simplified the method somewhat to remove noise):

void
ProfileGatherer::Finish()
{
  AutoJSAPI jsapi;
  jsapi.Init();
  JSContext* cx = jsapi.cx();
  JSAutoCompartment ac(cx, mPromise->GlobalJSObject());

  // Now parse the JSON so that we resolve with a JS Object.
  JS::RootedValue val(cx);
  {
    UniquePtr<char[]> buf = mWriter.WriteFunc()->CopyData();
    NS_ConvertUTF8toUTF16 js_string(nsDependentCString(buf.get()));
    MOZ_ALWAYS_TRUE(JS_ParseJSON(cx, static_cast<const char16_t*>(js_string.get()),
                                 js_string.Length(), &val));
  }
  mPromise->MaybeResolve(val);
}

The key parts here are getting the AutoJSAPI on the stack, initting it, gettings its JSContext, and then putting the JSAutoCompartment on the stack. Note that I had to pass not only the JSContext, but the global JS Object for the Promise as well – I suspect that’s, again, to ensure that the right compartment is being entered. Otherwise, I start failing assertions like crazy.

Note that the code above is by no means perfect – I’m missing error handling functions for when the JSON parsing goes wrong. In that case, I should probably reject the Promise instead. bz pointed me to a good example of that going on here in Fetch.cpp:

      if (!JS_ParseJSON(cx, decoded.get(), decoded.Length(), &json)) {
        if (!JS_IsExceptionPending(cx)) {
          localPromise->MaybeReject(NS_ERROR_DOM_UNKNOWN_ERR);
          return;
        }

        JS::Rooted<JS::Value> exn(cx);
        DebugOnly<bool> gotException = JS_GetPendingException(cx, &exn);
        MOZ_ASSERT(gotException);

        JS_ClearPendingException(cx);
        localPromise->MaybeReject(cx, exn);
        return;
      }

      localPromise->MaybeResolve(cx, json);
      return;

I’ll probably end up doing something similar in the next iteration of my patch.


  1. I learned how to do that a few weeks back

Making my First Firefox Extension…in 90 Minutes

It’s a race.

I’m going to attempt to create a simple Firefox extension that will display the DOM ID of an element that my mouse cursor is hovering over in the status bar.

There are probably a ton of Firefox extensions that will do that already, but I want to give it a shot as a project.

It’s 3:30PM right now, and I want to try to get this done by 5:00PM.  I’m going to be using Ubuntu 8.04, gEdit, and Google to get me started.

And I’m going to record my progress here in this blog post.

Note: After I’m done, I’m going to edit my sporadic notes so that they make more sense.  So if you’re wondering just how I managed to stay so cool, calm, and collected in my prose under such time pressure, and why the publish date on this article is after 5PM, now you know.

3:35PM:

Gonna start with Google:  “building a firefox extension”

Ok, found an article about how to create a Firefox extension.

Apparently, the first thing I want to do is try setting up a development profile in Firefox.

3:41PM

Finished setting up my dev profile by opening up FF with this command:

firefox -no-remote -P

Then created a profile called “Development”.  After that, I typed “about:config” in the URL bar, and changed some settings as instructed on this site.

3:49PM

According to that last article, I can create a skeleton Extension project using this site.  Done – calling the project DOM ID Displayer

3:53PM

Installed this Extension – apparently, it’ll be some help.  Will let me reload Firefox’s chrome  shtuff without restarting the browser each time.  Useful.

3:55PM

Found this article on making a status bar extension in XUL.  Easy as pie.

4:05PM

Ok, I’ve coded something in XUL that should display a new panel in the status bar.

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="chrome://domiddisplayer/skin/overlay.css" type="text/css"?>
<!DOCTYPE overlay SYSTEM "chrome://domiddisplayer/locale/domiddisplayer.dtd">

<overlay id="domiddisplayer-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script src="overlay.js"/>

<!-- Firefox -->
<statusbar id="status-bar">
  <statusbarpanel id="domiddisplayer" label="Hello, World!" tooltiptext="Dom ID Displayer" />
</statusbar>
</overlay>

I put that in the “overlay.js” file in my ~/Experiments/Extensions/domidinspector/content folder that was created using that Wizard from 3:49.

Now, to get this thing to run in my Development profile, I create a symbolic link to it in the Development profile’s extensions directory

ln -s ~/Projects/Experiments/Extensions/domidinspector ~/.mozilla/firefox/nzuzbdpz.Development/extensions/domiddisplayer@mike.conley

Open Firefox with Development profile:

firefox -P Development &

4:16PM

Looks like I can access and relabel the XULElement that I’ve ID’d as “domiddisplayer” using this:

domiddisplayer.updateDisplay = function(event) {
var dom_element_id = event.relatedTarget.id;
document.getElementById('domiddisplayer').setAttribute('label', dom_element_id);
}

Cool – I can now change my text in the Firefox status window.  Now I just need to capture any time a mouse moves over a DOM element….yikes, that might be tricky.

4:33PM

Been tinkering with this as a way of putting a mouseover event listener on everything in the window:

window.addEventListener("mouseover", function(e) {
  domiddisplayer.updateDisplay(e);
}, false);

4:35PM

Seems to only be capturing mouseover/mouseout events on Chrome elements – so I can get the ID’s of the statusbar, etc.  These are XUL Elements, not the DOM elements of a web page…

So I’m close.

4:44PM

This page is super helpful…

Apparently, I need to wait for the content of the page to load before I can attach observers to all of its sub-elements.  Makes total sense.

So, in my domiddisplayer.onLoad function, I write this:

var appcontent = document.getElementById("appcontent");
if(appcontent)
  appcontent.addEventListener("DOMContentLoaded", domiddisplayer.onPageLoad, true);

And now, I create a function called onPageLoad, which looks like this:

domiddisplayer.onPageLoad = function(aEvent) {
//Runs when the page is loaded
  window.content.document.addEventListener("mouseover",
  function(e) {
    domiddisplayer.updateDisplay(e);
  }, false);
}

5:03PM

Done.  I’m over time, but I’ve finished a (relatively) working extension.

Here, it’s a mess, but you can download the whole thing right here if you want to tinker with what I did.

Download domiddisplayer.zip

Mouseover / Mouseout on Nested Elements

Did I mention I’m code-sprinting over the next three days?  Actually, next two days – I just finished my first day today.

What’s code-sprinting?  It’s a trendy term for sitting down with your team, and plowing through code en masse, trying to get as much done as possible.  8 hour days, cookies, coffee, whiteboards, pizza, crashes, bugs, tickets, fixes, etc.  We’re trying to cram 3 weeks of work into 3 days.  Cool.

In case you don’t remember, I’m working on a project called Checkmark (or OLM…still undecided on the name) – a tool for Professors/TAs to receive student code submissions, and to facilitate easy marking and annotating of the submitted code.

So here’s something I learned today while coding:

Say you have some nested DIV’s, and the parent DIV has a mouseout trigger.  Something like this:

<div id="parent" onMouseOut="alert('Mouseout triggered on parent');">
  <div id="child_1">This is some child</div>
  <div id="child_2">This is another child</div>
</div>

As you would expect, the mouseout event will get triggered if you move your mouse over the parent DIV, and then move the mouse back out again.

But it also gets triggered when you move your mouse OVER any of the child DIV’s.

Say what?  That’s right – even though you’re still inside the parent DIV, the mouseout event got triggered.  I found this out today when I was trying to code dropdown menus in Javascript/CSS using Prototype – I could get the dropdown menus to appear find when I clicked on the appropriate button, but they’d disappear again as soon as I put my mouse over any of the sub-elements of the DIV.

So how did I fix this?  I found this example code, and adapted it for my purposes.  This code assumes that you’re using the Prototype Javascript library.

$('some_dropdown').observe('mouseout',
  function(event) {
     //We could probably replace the following with Event.element(event), but oh well.
     var target = $('some_dropdown');
     var mouse_over_element;  //What the mouse is currently over...
     //So let's check to see what the mouse is now over, and assign it to mouse_over_element...
     if( event.toElement ) {
        mouse_over_element = event.toElement;
     }
     else if(event.relatedTarget) {
       mouse_over_element = event.relatedTarget;
     }
     //In the event that the mouse is over something outside the DOM (like an alert window)...
     if(mouse_over_element == null) {
        return;
     }
     //Now we just make sure that what the mouse is currently over is NOT a descendant of
     //the dropdown, and that the target is not the current mouse_over_element (I can't
     //remember which case this covers, but it's important)
     if(!mouse_over_element.descendantOf(target) && target != mouse_over_element) {
        target.hide();
     }
   }
 );

And it works.  Whew!  Just thought I’d share that little snippit.