diff --git a/lib/demo/index.js b/lib/demo/index.js index 111f895d..a0da408a 100644 --- a/lib/demo/index.js +++ b/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(); diff --git a/lib/gcli/commands/qsa.css b/lib/gcli/commands/qsa.css new file mode 100644 index 00000000..7780deb5 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/lib/gcli/commands/qsa.html b/lib/gcli/commands/qsa.html new file mode 100644 index 00000000..a3898012 --- /dev/null +++ b/lib/gcli/commands/qsa.html @@ -0,0 +1,13 @@ +
+

${l10n.lookupFormat('qsaResultIntroText', [nodes.length])}${l10n.lookup('qsaResultsTooMany')}

+
    +
  1. + <${item.node.tagName.toLowerCase()} +
      +
    • + ${attr.name}="${attr.value}" +
    • +
    /> +
  2. +
+
\ No newline at end of file diff --git a/lib/gcli/commands/qsa.js b/lib/gcli/commands/qsa.js new file mode 100644 index 00000000..a82f547a --- /dev/null +++ b/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); +}; + +}); \ No newline at end of file diff --git a/lib/gcli/nls/strings.js b/lib/gcli/nls/strings.js index c8f63828..b1e0e334 100644 --- a/lib/gcli/nls/strings.js +++ b/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;