QuerySelectorAll-770156: Refactor JSON cmd output

The command is now processing the node list into a plain object
so it can potentially be serialized if needed.
Also, the command does the util.findCssSelector bit as the converter
doesn't get nodes anymore but just objects.
This allowed to clean up the converter a bit (util and context are not
needed anymore in the data object).
Also, the context.exec was changed to avoid using the deprecated `typed`
Finally the node onclick logic was changed to rely only on one onclick function.
The required selector being passed as a data-attribute of the clicked node.

Signed-off-by: Patrick Brosset <patrickbrosset@gmail.com>

lib/gcli/commands/qsa.css

@@ -6,7 +6,6 @@
 .qsa-node-list {
   color: #999;
 }
-
 .qsa-node-list .qsa-node {
   display: inline-block; 
   background: #F2F2F2;
@@ -16,10 +15,9 @@
   padding: .5em;
   cursor: pointer;
 }
-
 .qsa-node-attr-name {
-  color: #F20505;
+  color: #7ED3E8;  
 }
 .qsa-node-attr-value {
-  color: #7ED3E8;
+  color: #F20505;
 }

lib/gcli/commands/qsa.html

@@ -1,10 +1,10 @@
 <div>
-  <p>${l10n.lookupFormat('qsaResultIntroText', [nodes.length])}<span if="${nodes.length>maxDisplayedNodes}">${l10n.lookup('qsaResultsTooMany')}</span></p>
+  <p>${l10n.lookupFormat('qsaResultIntroText', [nodes.length, selector])}<span if="${nodes.length>maxDisplayedNodes}">${l10n.lookup('qsaResultsTooMany')}</span></p>
   <ol class="qsa-node-list" if=${nodes.length<=maxDisplayedNodes}>
-    <li class="qsa-node" foreach="item in ${nodes}" onclick="${item.onclick}" title="${l10n.lookup('qsaNodeTooltip')}">
-      &lt;<span class="qsa-node-tag">${item.node.tagName.toLowerCase()}</span>
+    <li class="qsa-node" foreach="node in ${nodes}" onclick="${onclick}" data-selector="${node.selector}" title="${l10n.lookupFormat('qsaNodeTooltip', [node.selector])}">
+      &lt;<span class="qsa-node-tag">${node.tagName.toLowerCase()}</span>
       <ul class="qsa-node-attr-list">
-        <li class="qsa-node-attr" foreach="attr in ${item.attributes}">
+        <li class="qsa-node-attr" foreach="attr in ${node.attributes}">
           <span class="qsa-node-attr-name">${attr.name}</span>="<span class="qsa-node-attr-value">${attr.value}</span>"
         </li>
       </ul>/&gt;

lib/gcli/commands/qsa.js

@@ -9,6 +9,15 @@ var gcli = require('gcli/index');
 var qsaViewHtml = require('text!gcli/commands/qsa.html');
 var qsaViewCss = require('text!gcli/commands/qsa.css');
 
+/**
+ * Transform a nodeList into an array.
+ * Useful for forEach'ing for example.
+ * @param nodeList The nodeList as returned by querySelectorAll
+ * @return The transformed array
+ */
+function nodesToArray(nodeList) {
+  return Array.prototype.slice.call(nodeList);
+}
 
 /**
  * QuerySelectorAll (qsa) command spec
@@ -23,42 +32,60 @@ var qsaCmdSpec = {
     defaultValue: '*',
     description: l10n.lookup('qsaQueryDesc'),
   }],
-  returnType: 'qsaNodeList',
+  returnType: 'qsaCmdOutput',
   exec: function(args, context) {
-    return context.document.querySelectorAll(args.query);
+    var out = {
+      nodes: [],
+      selector: args.query
+    };
+
+    // An invalid selector may lead to a SyntaxError exception e.g. '3' or ''
+    try {
+      out.nodes = nodesToArray(context.document.querySelectorAll(args.query));
+    } catch(e) {}
+
+    // Converting the nodes and attributes to plain objects to allow JSONing
+    out.nodes.forEach(function(node, index, nodeList) {
+      var attributes = nodesToArray(node.attributes);
+      attributes.forEach(function(attr, index, attrList) {
+        attrList[index] = {
+          name: attr.name,
+          value: attr.value
+        };
+      });
+
+      nodeList[index] = {
+        tagName: node.tagName,
+        attributes: attributes,
+        selector: util.findCssSelector(node)
+      };
+    });
+
+    return out;
   }
 };
 
 /**
  * QuerySelectorAll (qsa) command output converter
- * qsaNodeList -> View
+ * qsaCmdOutput -> View
  */
 var qsaConverterSpec = {
-  from: 'qsaNodeList',
+  from: 'qsaCmdOutput',
   to: 'view',
-  exec: function(qsaNodeList, context) {
-    var nodes = [];
-    for(var i = 0, list = Array.prototype.slice.call(qsaNodeList), length = list.length; i < length; i ++) {
-      nodes.push({
-        node: list[i],
-        attributes: Array.prototype.slice.call(list[i].attributes),
-        context: context,
-        util: util,
-        onclick: function(ev) {
-          this.context.exec({
-            visible: true,
-            typed: 'qsa ' + this.util.findCssSelector(this.node)
-          });
-        }
-      });
-    }
-
+  exec: function(qsaCmdOutput, context) {
     return context.createView({
       html: qsaViewHtml,
       css: qsaViewCss,
       options: {allowEval: true, stack: 'qsa.html'},
       data: {
-        nodes: nodes,
+        onclick: function(ev) {
+          context.exec({
+            command: 'qsa',
+            args: {query: ev.currentTarget.dataset.selector}
+          });
+        },
+        selector: qsaCmdOutput.selector,
+        nodes: qsaCmdOutput.nodeList,
         maxDisplayedNodes: 100,
         l10n: l10n
       }

lib/gcli/nls/strings.js

@@ -355,13 +355,13 @@ var i18n = {
     qsaQueryDesc: 'The CSS selector to use, or several selectors seperated by commas',
 
     // The intro text to the 'qsa' command shows after the command has been run and gives the number of nodes matched
-    qsaResultIntroText: '%S node(s) found',
+    qsaResultIntroText: '%1$S node(s) found for selector %2$S',
 
     // The too many results message of the 'qsa' command shows when there are more than X nodes matched by the query, to request the user to refine it
     qsaResultsTooMany: ', please refine your selector to display the resulting nodes.',
 
     // The tooltip text is displayed on hovering over a matched node, to inform the user of the action executed on click
-    qsaNodeTooltip: 'Click to run qsa with a unique selector for this node'
+    qsaNodeTooltip: 'Click to run qsa with selector %S'
   }
 };
 exports.root = i18n.root;