A simple QuerySelectorAll command

lib/demo/index.js

@@ -24,6 +24,7 @@ define(function(require, exports, module) {
   require('gcli/commands/pref').startup();
   require('gcli/commands/pref_list').startup();
   require('gcli/commands/intro').startup();
+  require('gcli/commands/qsa').startup();
 
   require('demo/commands/basic').startup();
   require('demo/commands/bugs').startup();

lib/gcli/commands/qsa.css

@@ -0,0 +1,24 @@
+.qsa-node-list, .qsa-node-attr-list, .qsa-node-attr-list .qsa-node-attr {
+  margin: 0;
+  padding: 0;
+  display: inline;
+}
+.qsa-node-list {
+  color: #999;
+}
+
+.qsa-node-list .qsa-node {
+  display: inline-block; 
+  background: #F2F2F2;
+  border: 1px solid #D6D6D6;
+  border-radius: .2em;
+  margin: .2em;
+  padding: .5em;
+}
+
+.qsa-node-attr-name {
+  color: #F20505;
+}
+.qsa-node-attr-value {
+  color: #7ED3E8;
+}

lib/gcli/commands/qsa.html

@@ -0,0 +1,13 @@
+<div>
+  <p>${l10n.lookupFormat('qsaResultIntroText', [nodes.length])}<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}">
+      &lt;<span class="qsa-node-tag">${item.node.tagName.toLowerCase()}</span>
+      <ul class="qsa-node-attr-list">
+        <li class="qsa-node-attr" foreach="attr in ${item.attributes}">
+          <span class="qsa-node-attr-name">${attr.name}</span>="<span class="qsa-node-attr-value">${attr.value}</span>"
+        </li>
+      </ul>/&gt;
+    </li>
+  </ol>
+</div>

lib/gcli/commands/qsa.js

@@ -0,0 +1,54 @@
+define(function(require, exports, module) {
+
+'use strict';
+
+var util = require('util/util');
+var l10n = require('util/l10n');
+var canon = require('gcli/canon');
+
+var qsaCmdSpec = {
+  name: 'qsa',
+  description: l10n.lookup('qsaDesc'),
+  manual: l10n.lookup('qsaManual'),
+  params: [
+    {
+      name: 'query',
+      type: 'string',
+      defaultValue: '*',
+      description: l10n.lookup('qsaQueryDesc'),
+    }
+  ],
+  returnType: 'view',
+  exec: function(args, context) {
+    var nodeList = context.document.querySelectorAll(args.query);
+
+    var nodes = [];
+    for(var i = 0, list = Array.prototype.slice.call(nodeList), length = list.length; i < length; i ++) {
+      nodes.push({
+        node: list[i],
+        context: context,
+        attributes: Array.prototype.slice.call(list[i].attributes)
+      });
+    }
+
+    return context.createView({
+      html: require('text!gcli/commands/qsa.html'),
+      css: require('text!gcli/commands/qsa.css'),
+      options: {allowEval: true, stack: 'qsa.html'},
+      data: {
+        nodes: nodes,
+        maxDisplayedNodes: 100,
+        l10n: l10n
+      }
+    });
+  }
+};
+
+exports.startup = function() {
+  canon.addCommand(qsaCmdSpec);
+};
+exports.shutdown = function() {
+  canon.removeCommand(qsaCmdSpec);
+};
+
+});

lib/gcli/nls/strings.js

@@ -343,7 +343,22 @@ var i18n = {
 
     // Short description of the 'allowSetDesc' setting. Displayed when the user
     // asks for help on the settings.
-    allowSetDesc: 'Has the user enabled the \'pref set\' command?'
+    allowSetDesc: 'Has the user enabled the \'pref set\' command?',
+
+    // A very short description of the 'qsa' command.
+    qsaDesc: 'Execute querySelectorAll given a selector and show matches',
+
+    // A fuller description of the 'qsa' command.
+    qsaManual: 'Execute querySelectorAll on the current document and show the number of matched elements as well as the elements themselves (provided the selector returns less than 100 nodes)',
+
+    // A very short description of the 'query' parameter to the 'qsa' command.
+    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',
+
+    // 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.'
   }
 };
 exports.root = i18n.root;