Skip to content

Commit 55ac491

Browse files
valtlaificristo
valtlai
authored and
ficristo
committed
Update CSS pseudo-selector hints (adobe#14012)
* Update pseudo-selectors Add pseudo-selectors * :any-link * :first * :last * :left * :right * ::backdrop * ::cue * ::cue(). Update * :lang() * :not(). Update descriptions being more correct. (Move opening braces to previous line.) * Use correct term “pseudo-class” + fix spelling error & tests Pseudo-selectors are divided into two categories: pseudo-classes and pseudo-elements. * Remove :last psudo-selector (which doesn’t exist) from CSS Selector Hints
1 parent 887eeae commit 55ac491

3 files changed

Lines changed: 57 additions & 52 deletions

File tree

‎src/extensions/default/CSSPseudoSelectorHints/PseudoSelectors.json‎

Lines changed: 37 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,57 @@
11
{
2-
"selectors":
3-
{
4-
"active": {"desc": "Selects the active link"},
5-
"checked": {"desc": "Selects every checked <input> element"},
2+
"classes": {
3+
"active": {"desc": "Selects the link being pressed"},
4+
"any-link": {"desc": "Selects every hyperlink, e.g., <a>, <area> and <link> with href attribute"},
5+
"checked": {"desc": "Selects every checked checkbox"},
66
"default": {"desc": "Selects every UI element that is the default among a group of similar elements"},
77
"dir(direction)": {"desc": "Selects every element whose text direction is 'direction'", "text": "dir()"},
8-
"disabled": {"desc": "Selects every disabled <input> element"},
9-
"empty": {"desc": "Selects every element that has no children/text (including text nodes)"},
10-
"enabled": {"desc": "Selects every enabled <input> element"},
8+
"disabled": {"desc": "Selects every disabled form element"},
9+
"empty": {"desc": "Selects every element that has no any child nodes"},
10+
"enabled": {"desc": "Selects every enabled form element"},
11+
"first": {"desc": "With @page, selects the first page of a printed document"},
1112
"first-child": {"desc": "Selects every element that is the first child of its parent"},
12-
"first-of-type": {"desc": "Selects every element that is the first element identified by 'type' of its parent"},
13+
"first-of-type": {"desc": "Selects every element that is the first element of the specific type of its parent"},
1314
"focus": {"desc": "Selects the input element which has focus"},
1415
"focus-within": {"desc": "Selects every element which or whose descendant has focus"},
15-
"fullscreen": {"desc": "Selects the element being in full-screen mode"},
16-
"hover": {"desc": "Selects elements on mouse over"},
16+
"fullscreen": {"desc": "Selects the element being in fullscreen mode"},
17+
"hover": {"desc": "Selects elements on pointer over"},
1718
"in-range": {"desc": "Selects input elements with a value within a specified range"},
18-
"indeterminate": {"desc": "Selects every indeterminate checkbox or radio button"},
19+
"indeterminate": {"desc": "Selects every indeterminate checkbox, radio button or progress bar"},
1920
"invalid": {"desc": "Selects all input elements with an invalid value"},
20-
"lang(language)": {"desc": "Selects every element with a lang attribute equal to 'language'", "text": "lang()"},
21+
"lang(languages)": {"desc": "Selects every element whose language is contained by the 'languages' list", "text": "lang()"},
2122
"last-child": {"desc": "Selects every element that is the last child of its parent"},
22-
"last-of-type": {"desc": "Selects every element that is the last element of its parent"},
23+
"last-of-type": {"desc": "Selects every element that is the last element of the specific type of its parent"},
24+
"left": {"desc": "With @page, selects every left-hand page of a printed document"},
2325
"link": {"desc": "Selects all unvisited links"},
2426
"matches(selectors)": {"desc": "Selects every element that is matched by one or more selectors in the 'selectors' list", "text": "matches()"},
25-
"not(selector)": {"desc": "Selects every element that is not an element identified by 'selector'", "text": "not()"},
26-
"nth-child(n)": {"desc": "Selects every element that is the second child of its parent", "text": "nth-child()"},
27-
"nth-last-child(n)": {"desc": "Selects every element that is the second child of its parent, counting from the last child", "text": "nth-last-child()"},
28-
"nth-last-of-type(n)": {"desc": "Selects every element that is the nth element of its parent, counting from the last child", "text": "nth-last-of-type()"},
29-
"nth-of-type(n)": {"desc": "Selects every element that is the nth element of its parent", "text": "nth-of-type(n)"},
27+
"not(selectors)": {"desc": "Selects every element that is not matched by any selector in the 'selectors' list", "text": "not()"},
28+
"nth-child(n)": {"desc": "Selects every element that is the nth child of its parent", "text": "nth-child()"},
29+
"nth-last-child(n)": {"desc": "Selects every element that is the nth child of its parent, counting from the last child", "text": "nth-last-child()"},
30+
"nth-last-of-type(n)": {"desc": "Selects every element that is the nth element of the specific type of its parent, counting from the last child", "text": "nth-last-of-type()"},
31+
"nth-of-type(n)": {"desc": "Selects every element that is the nth element of the specific type of its parent", "text": "nth-of-type(n)"},
3032
"only-child": {"desc": "Selects every element that is the only child of its parent"},
31-
"only-of-type": {"desc": "Selects every element that is the only element of this type of its parent"},
32-
"optional": {"desc": "Selects input elements with no 'required' attribute"},
33+
"only-of-type": {"desc": "Selects every element that is the only element of the specific type of its parent"},
34+
"optional": {"desc": "Selects non-required form elements"},
3335
"out-of-range": {"desc": "Selects input elements with a value outside a specified range"},
3436
"placeholder-shown": {"desc": "Selects all <input> and <textarea> elements currently showing placeholder text"},
35-
"read-only": {"desc": "Selects input elements with the 'readonly' attribute specified"},
36-
"read-write": {"desc": "Selects input elements with the 'readonly' attribute NOT specified"},
37-
"required": {"desc": "Selects input elements with the 'required' attribute specified"},
37+
"read-only": {"desc": "Selects form elements with the 'readonly' attribute specified"},
38+
"read-write": {"desc": "Selects form elements with the 'readonly' attribute NOT specified"},
39+
"required": {"desc": "Selects required form elements"},
40+
"right": {"desc": "With @page, selects every right-hand page of a printed document"},
3841
"root": {"desc": "Selects the document's root element"},
39-
"target": {"desc": "Selects the current active element (clicked on a URL containing that anchor name)"},
42+
"target": {"desc": "Selects the element whose ID matches with the URL hash"},
4043
"valid": {"desc": "Selects all input elements with a valid value"},
4144
"visited": {"desc": "Selects all visited links"}
4245
},
43-
"elements":
44-
{
45-
"after": {"desc": "Insert something after the content of each element identified by this selector"},
46-
"before": {"desc": "Insert something before the content of each element identified by this selector"},
47-
"first-letter": {"desc": "Selects the first letter of every element identified by this selector"},
48-
"first-line": {"desc": "Selects the first line of every element identified by this selector"},
49-
"placeholder": {"desc": "Selects the placeholder text of <input> and <textarea> elements"},
50-
"selection": {"desc": "Selects the portion of an element identified by this selector that is selected by a user"}
46+
"elements": {
47+
"after": {"desc": "Insert something after the content of each element matched by this selector"},
48+
"backdrop": {"desc": "Selects the box rendered immediately below a <dialog> or an element in fullscreen mode"},
49+
"before": {"desc": "Insert something before the content of each element matched by this selector"},
50+
"cue": {"desc": "Selects the cues of WebVTT subtitles"},
51+
"cue(selector)": {"desc": "Selects the cues of WebVTT subtitles, matched by 'selector'", "text": "cue()"},
52+
"first-letter": {"desc": "Selects the first letter of every element matched by this selector"},
53+
"first-line": {"desc": "Selects the first line of every element matched by this selector"},
54+
"placeholder": {"desc": "Selects the placeholder text of <input> and <textarea> elements"},
55+
"selection": {"desc": "Selects the portion of an element that is selected by a user"}
5156
}
5257
}

‎src/extensions/default/CSSPseudoSelectorHints/main.js‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -32,17 +32,17 @@ define(function (require, exports, module) {
3232
PseudoRules = JSON.parse(PseudoRulesText);
3333

3434

35-
var TOKEN_TYPE_PSEUDO_SELECTOR = 0,
36-
TOKEN_TYPE_PSEUDO_ELEMENT = 1,
37-
PUNCTUATION_CHAR = ':';
35+
var TOKEN_TYPE_PSEUDO_CLASS = 0,
36+
TOKEN_TYPE_PSEUDO_ELEMENT = 1,
37+
PUNCTUATION_CHAR = ':';
3838

3939
function _getPseudoContext(token, cursorText, ctx) {
4040
var slicedToken,
4141
contextType = -1;
4242

4343
// Magic code to get around CM's 'pseudo' identification logic
4444
// As per CSS3 spec :
45-
// -> ':' identifies pseudo slectors
45+
// -> ':' identifies pseudo classes
4646
// -> '::' identifies pseudo elements
4747
// We should strictly check for single or double occurance of ':' by slicing
4848
// the line text till the token start position
@@ -58,16 +58,16 @@ define(function (require, exports, module) {
5858
//Test the previous token first
5959
TokenUtils.movePrevToken(ctx);
6060
if (ctx.token.string === PUNCTUATION_CHAR) {
61-
//We are in pseudo elemnt context ('::')
61+
//We are in pseudo elemwnt context ('::')
6262
contextType = TOKEN_TYPE_PSEUDO_ELEMENT;
6363
} else {
64-
contextType = TOKEN_TYPE_PSEUDO_SELECTOR;
64+
contextType = TOKEN_TYPE_PSEUDO_CLASS;
6565
}
6666
} else {
6767
if (slicedToken.slice(-2) === "::") {
6868
contextType = TOKEN_TYPE_PSEUDO_ELEMENT;
6969
} else if (slicedToken.slice(-1) === ":") {
70-
contextType = TOKEN_TYPE_PSEUDO_SELECTOR;
70+
contextType = TOKEN_TYPE_PSEUDO_CLASS;
7171
}
7272
}
7373

@@ -77,7 +77,7 @@ define(function (require, exports, module) {
7777
/**
7878
* @constructor
7979
*/
80-
function PsudoSelectorHints() {
80+
function PseudoSelectorHints() {
8181
}
8282

8383
function _validatePseudoContext(token) {
@@ -86,7 +86,7 @@ define(function (require, exports, module) {
8686

8787
// As we are only going to provide :<pseudo> name hints
8888
// we should claim that we don't have hints for anything else
89-
PsudoSelectorHints.prototype.hasHints = function (editor, implicitChar) {
89+
PseudoSelectorHints.prototype.hasHints = function (editor, implicitChar) {
9090
var pos = editor.getCursorPos(),
9191
token = editor._codeMirror.getTokenAt(pos);
9292

@@ -96,7 +96,7 @@ define(function (require, exports, module) {
9696
return _validatePseudoContext(token);
9797
};
9898

99-
PsudoSelectorHints.prototype.getHints = function (implicitChar) {
99+
PseudoSelectorHints.prototype.getHints = function (implicitChar) {
100100
var pos = this.editor.getCursorPos(),
101101
token = this.editor._codeMirror.getTokenAt(pos),
102102
filter = token.type === "variable-3" ? token.string : "",
@@ -118,7 +118,7 @@ define(function (require, exports, module) {
118118
this.token = token;
119119

120120
// Filter the property list based on the token string
121-
var result = Object.keys(this.context === TOKEN_TYPE_PSEUDO_SELECTOR ? PseudoRules.selectors : PseudoRules.elements).filter(function (key) {
121+
var result = Object.keys(this.context === TOKEN_TYPE_PSEUDO_CLASS ? PseudoRules.classes : PseudoRules.elements).filter(function (key) {
122122
if (key.indexOf(filter) === 0) {
123123
return key;
124124
}
@@ -143,7 +143,7 @@ define(function (require, exports, module) {
143143
* Indicates whether the manager should follow hint insertion with an
144144
* additional explicit hint request.
145145
*/
146-
PsudoSelectorHints.prototype.insertHint = function (completion) {
146+
PseudoSelectorHints.prototype.insertHint = function (completion) {
147147
var cursor = this.editor.getCursorPos();
148148
var startPos = {line: cursor.line, ch: this.token.start},
149149
endPos = {line: cursor.line, ch: this.token.end};
@@ -154,10 +154,10 @@ define(function (require, exports, module) {
154154
endPos = startPos;
155155
}
156156

157-
if (this.context === TOKEN_TYPE_PSEUDO_SELECTOR) {
157+
if (this.context === TOKEN_TYPE_PSEUDO_CLASS) {
158158
// If the hint label contains annotated data for illustration, then we might have
159159
// different text to be inserted.
160-
completion = PseudoRules.selectors[completion].text || completion;
160+
completion = PseudoRules.classes[completion].text || completion;
161161
}
162162

163163
this.editor.document.replaceRange(completion, startPos, endPos);
@@ -172,7 +172,7 @@ define(function (require, exports, module) {
172172

173173
AppInit.appReady(function () {
174174
// Register code hint providers
175-
var pseudoSelectorHints = new PsudoSelectorHints();
175+
var pseudoSelectorHints = new PseudoSelectorHints();
176176
CodeHintManager.registerHintProvider(pseudoSelectorHints, ["css", "scss", "less"], 0);
177177

178178
// For test

‎src/extensions/default/CSSPseudoSelectorHints/unittests.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ define(function (require, exports, module) {
3131
PseudoStaticDataRaw = require("text!PseudoSelectors.json"),
3232
PseudoStaticData = JSON.parse(PseudoStaticDataRaw);
3333

34-
describe("CSS Pseudo selector/element Code Hinting", function () {
34+
describe("CSS Pseudo class/element Code Hinting", function () {
3535

3636
var defaultContent = ".selector1: { \n" +
3737
"} \n" +
@@ -126,7 +126,7 @@ define(function (require, exports, module) {
126126
return modesToTest[modeCounter];
127127
};
128128

129-
describe("Pseudo selectors in different style modes", function () {
129+
describe("Pseudo classes in different style modes", function () {
130130
beforeEach(function () {
131131
// create Editor instance (containing a CodeMirror instance)
132132
var mock = SpecRunnerUtils.createMockEditor(defaultContent, selectMode());
@@ -145,14 +145,14 @@ define(function (require, exports, module) {
145145
var hintList = expectHints(CSSPseudoSelectorCodeHints.pseudoSelectorHints);
146146
console.log(JSON.stringify(hintList));
147147
verifyFirstEntry(hintList, "active"); // filtered on "empty string"
148-
verifyListsAreIdentical(hintList, Object.keys(PseudoStaticData.selectors).sort());
148+
verifyListsAreIdentical(hintList, Object.keys(PseudoStaticData.classes).sort());
149149
},
150150
testFilteredHints = function () {
151151
testEditor.setCursorPos({ line: 4, ch: 12 }); // after :n
152152
var hintList = expectHints(CSSPseudoSelectorCodeHints.pseudoSelectorHints);
153153
console.log(JSON.stringify(hintList));
154-
verifyFirstEntry(hintList, "not(selector)"); // filtered on "n"
155-
verifyListsAreIdentical(hintList, ["not(selector)",
154+
verifyFirstEntry(hintList, "not(selectors)"); // filtered on "n"
155+
verifyListsAreIdentical(hintList, ["not(selectors)",
156156
"nth-child(n)",
157157
"nth-last-child(n)",
158158
"nth-last-of-type(n)",

0 commit comments

Comments
 (0)
⚡