Which function does this jsaction call?

Question

I'm trying to figure the path google drive takes to load it's folder content, from when a folder name is double clicked till the point where that folders contents are loaded.

I've noticed that google use something like:

<div jsaction="click:cOuCgd; contextmenu:mg9Pef; dblclick:FNFY6c; focus:AHmuwe" jsname="LvFR7c" role="row" tabindex="0" aria-selected="false" aria-disabled="false">

What does dblclick:FNFY6c do? Is FNFY6c a function? How does this whole procedure work? I've been trying to figure how this works using Chromes DevTools, but cannot seem to find FNFY6c anywhere.

How do I find out what happens next when dblclick:FNFY6c is clicked?

Answer 1

JsAction isn't just an attribute, it's a whole google-d^ library for handling / dispatching events.

google/jsaction > README.md

JsAction is a tiny event delegation library that allows decoupling the DOM nodes on which the action occurs from the JavaScript code that handles the action.

The traditional way of adding an event handler is to obtain a reference to the node and add the event handler to it. JsAction allows us to map between events and names of handlers for these events via a custom HTML attribute called jsaction.

Separately, JavaScript code registers event handlers with given names which need not be exposed globally. When an event occurs the name of the action is mapped to the corresponding handler which is executed.

Finally, JsAction uncouples event handling from actual implementations. Thus one may late load the implementations, while the app is always able to respond to user actions marked up through JsAction. This can help in greatly reducing page load time, in particular for server side rendered apps.

A basic setup of jsaction is like,

HTML

<script src="https://www.gstatic.com/jsaction/contract.js"></script>
<script src="https://www.gstatic.com/jsaction/dispatcher.js" ></script>

<div id="foo" 
  jsaction="leftNav.clickAction;dblclick:leftNav.doubleClickAction"> 
some content here </div>

JavaScript

const eventContract = new jsaction.EventContract();

// Events will be handled for all elements under this container.
eventContract.addContainer(document.getElementById('container'));

// Register the event types we care about.
eventContract.addEvent('click');

const dispatcher = new jsaction.Dispatcher();
eventContract.dispatchTo(dispatcher.dispatch.bind(dispatcher));

// Register individual handlers

const click = function(flow) {
  // do stuff
  alert('click event dispatched!');
};

dispatcher.registerHandlers(
  'leftNav', // the namespace
  null, // handler object
  { // action map
    'clickAction': click
  });

---

Let's take some examples on jsaction:

• Example of click event,

// A BASIC SETUP --- JSACTION

const eventContract = new jsaction.EventContract();

// Events will be handled for all elements under this container.
eventContract.addContainer(document.getElementById('container'));

// Register the event types we care about.
eventContract.addEvent('click');

const dispatcher = new jsaction.Dispatcher();
eventContract.dispatchTo(dispatcher.dispatch.bind(dispatcher));

// Register individual handlers

const click = function(flow) {
  // do stuff
  alert('click event dispatched!');
};

dispatcher.registerHandlers(
  'leftNav', // the namespace
  null, // handler object
  { // action map
    'clickAction': click
  });

<script src="https://www.gstatic.com/jsaction/contract.js"></script>
<script src="https://www.gstatic.com/jsaction/dispatcher.js" ></script>

<div id="container">
  <div id="foo" jsaction="click:leftNav.clickAction">
    some content here
  </div>
</div>

• Example of double-click event,

// Set up

const eventContract = new jsaction.EventContract();

// Events will be handled for all elements under this container.
eventContract.addContainer(document.getElementById('container'));

// Register the event types we care about.
eventContract.addEvent('dblclick');

const dispatcher = new jsaction.Dispatcher();
eventContract.dispatchTo(dispatcher.dispatch.bind(dispatcher));

// Register individual handlers

const dbClick = function(flow) {
  // do stuff
  alert('double-click event dispatched!');
};

dispatcher.registerHandlers(
  'leftNav', // the namespace
  null, // handler object
  { // action map
    'doubleClickAction': dbClick
  });

<script src="https://www.gstatic.com/jsaction/contract.js"></script>
<script src="https://www.gstatic.com/jsaction/dispatcher.js" ></script>

<div id="container">
  <div id="foo" jsaction="dblclick:leftNav.doubleClickAction">
    some content here
  </div>
</div>

• Finally, let's see how we can attach multiple events,

// Set up

const eventContract = new jsaction.EventContract();

// Events will be handled for all elements under this container.
eventContract.addContainer(document.getElementById('container'));

// Register the event types we care about.
eventContract.addEvent('click');
eventContract.addEvent('mouseover');
eventContract.addEvent('mouseout');

const dispatcher = new jsaction.Dispatcher();
eventContract.dispatchTo(dispatcher.dispatch.bind(dispatcher));

// Register individual handlers

const click = function(flow) {
  // do stuff
  console.log('click called!');
};

const mouseOver = function(flow) {
  // do stuff
  console.log('mouseover called!');
};

const mouseOut = function(flow) {
  // do stuff
  console.log('mouseout called!');
};

dispatcher.registerHandlers(
  'leftNav', // the namespace
  null, // handler object
  { // action map
    'clickAction': click,
    'mouseOverAction': mouseOver,
    'mouseOutAction': mouseOut
  });

<script src="https://www.gstatic.com/jsaction/contract.js"></script>
<script src="https://www.gstatic.com/jsaction/dispatcher.js" ></script>

<div id="container">
  <div id="foo" jsaction="click:leftNav.clickAction;mouseover:leftNav.mouseOverAction;mouseout:leftNav.mouseOutAction">
    some content here
  </div>
</div>

Here is a complete list of events in jsaction, in which most of them are css-events.

_{^: short for "google-developed" ;)}

Answer 2

Press Ctrl+Shift+I to open up inspector, and then Ctrl+Shift+F, to search all source files used in the page. Search for "FNFY6c" or any of the other references. Click the little {} icon in the bottom left to pretty print the code. You should have a few good starting points to place breakpoints in the code and start tracing the function you are looking for now.

I guessed that they were using dblclick handlers on document.body, so I used getEventListeners(document.body) to find the event handler. I put a conditional breakpoint checking c.type == 'dblclick' to get a breakpoint. It goes on to go into listener and eventually dispatches an "activity" event and continues on.

I'm not sure what you are hoping to achieve, but even with high levels of reversing ability you will most likely have a hard time getting something meaningful out of it. The code output is using very aggressively obfuscated code through Google Closure Compiler that goes so far as to munge reference names within strings. You will be digging through very convoluted code with basically no identifiable names.

If you are interested in reversing and doing it for fun, good luck. Just I wouldn't expect too much without a lot of time and practice. Probably even after a lot of time and practice.