From 29953b950f671a35dd7b01125e5d9756d7af3d86 Mon Sep 17 00:00:00 2001 From: Patrick Brosset Date: Tue, 23 Apr 2013 14:28:15 +0200 Subject: [PATCH 1/2] A simple QuerySelectorAll command --- lib/demo/index.js | 1 + lib/gcli/commands/qsa.css | 24 ++++++++++++++++++ lib/gcli/commands/qsa.html | 13 ++++++++++ lib/gcli/commands/qsa.js | 50 ++++++++++++++++++++++++++++++++++++++ 4 files changed, 88 insertions(+) create mode 100644 lib/gcli/commands/qsa.css create mode 100644 lib/gcli/commands/qsa.html create mode 100644 lib/gcli/commands/qsa.js 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..d64b5842 --- /dev/null +++ b/lib/gcli/commands/qsa.html @@ -0,0 +1,13 @@ +
+

${nodes.length} node(s) found, please refine your selector to display the resulting nodes.

+
    +
  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..8b46038d --- /dev/null +++ b/lib/gcli/commands/qsa.js @@ -0,0 +1,50 @@ +define(function(require, exports, module) { + +'use strict'; + +var util = require('util/util'); +var canon = require('gcli/canon'); + +var qsaCmdSpec = { + name: 'qsa', + description: 'Execute a querySelectorAll on the current document and show matches', + params: [ + { + name: 'query', + type: 'string', + defaultValue: '*', + description: 'CSS selectors seperated by comma', + } + ], + 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 + } + }); + } +}; + +exports.startup = function() { + canon.addCommand(qsaCmdSpec); +}; +exports.shutdown = function() { + canon.removeCommand(qsaCmdSpec); +}; + +}); \ No newline at end of file From 723ea684b477a84e36d9fc00df4c0c5fa36ea6f1 Mon Sep 17 00:00:00 2001 From: Patrick Brosset Date: Tue, 23 Apr 2013 15:12:50 +0200 Subject: [PATCH 2/2] Localizing the UI --- lib/gcli/commands/qsa.html | 4 ++-- lib/gcli/commands/qsa.js | 10 +++++++--- lib/gcli/nls/strings.js | 17 ++++++++++++++++- 3 files changed, 25 insertions(+), 6 deletions(-) diff --git a/lib/gcli/commands/qsa.html b/lib/gcli/commands/qsa.html index d64b5842..a3898012 100644 --- a/lib/gcli/commands/qsa.html +++ b/lib/gcli/commands/qsa.html @@ -1,6 +1,6 @@
-

${nodes.length} node(s) found, please refine your selector to display the resulting nodes.

-
    +

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

    +
    1. <${item.node.tagName.toLowerCase()}
        diff --git a/lib/gcli/commands/qsa.js b/lib/gcli/commands/qsa.js index 8b46038d..a82f547a 100644 --- a/lib/gcli/commands/qsa.js +++ b/lib/gcli/commands/qsa.js @@ -3,17 +3,19 @@ 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: 'Execute a querySelectorAll on the current document and show matches', + description: l10n.lookup('qsaDesc'), + manual: l10n.lookup('qsaManual'), params: [ { name: 'query', type: 'string', defaultValue: '*', - description: 'CSS selectors seperated by comma', + description: l10n.lookup('qsaQueryDesc'), } ], returnType: 'view', @@ -34,7 +36,9 @@ var qsaCmdSpec = { css: require('text!gcli/commands/qsa.css'), options: {allowEval: true, stack: 'qsa.html'}, data: { - nodes: nodes + nodes: nodes, + maxDisplayedNodes: 100, + l10n: l10n } }); } 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;