CSS AtRules, Pseudo elements and Pseudo selector code hints

src/extensions/default/CSSAtRuleCodeHints/AtRulesDef.json

@@ -0,0 +1,10 @@
+{
+    "@charset":   "Defines the character set used by the style sheet.",
+    "@import":    "Tells the CSS engine to include an external style sheet.",
+    "@namespace": "Tells the CSS engine that all its content must be considered prefixed with an XML namespace.",
+    "@media":     "A conditional group rule which will apply its content if the device meets the criteria of the condition defined using a media query.",
+    "@supports":  "A conditional group rule which will apply its content if the browser meets the criteria of the given condition.",
+    "@page":      "Describes the aspect of layout changes which will be applied when printing the document.",
+    "@font-face": "Describes the aspect of an external font to be downloaded.",
+    "@keyframes": "Describes the aspect of intermediate steps in a CSS animation sequence."
+}

src/extensions/default/CSSAtRuleCodeHints/main.js

@@ -0,0 +1,118 @@
+/*
+ * Copyright (c) 2017 - present Adobe Systems Incorporated. All rights reserved.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a
+ * copy of this software and associated documentation files (the "Software"),
+ * to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the
+ * Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+ * DEALINGS IN THE SOFTWARE.
+ *
+ */
+
+define(function (require, exports, module) {
+    "use strict";
+
+    // Load dependent modules
+    var AppInit         = brackets.getModule("utils/AppInit"),
+        CodeHintManager = brackets.getModule("editor/CodeHintManager"),
+        AtRulesText     = require("text!AtRulesDef.json"),
+        AtRules         = JSON.parse(AtRulesText);
+
+
+    /**
+     * @constructor
+     */
+    function AtRuleHints() {
+    }
+
+    // As we are only going to provide @rules name hints
+    // we should claim that we don't have hints for anything else
+    AtRuleHints.prototype.hasHints = function (editor, implicitChar) {
+        var pos = editor.getCursorPos(),
+            token = editor._codeMirror.getTokenAt(pos),
+            cmState;
+
+        this.editor = editor;
+
+        if (token.state.base && token.state.base.localState) {
+            cmState = token.state.base.localState;
+        } else {
+            cmState = token.state;
+        }
+
+        // Check if we are at '@' rule 'def' context
+        if ((token.type === "def" && cmState.context.type === "at")
+                || (token.type === "variable-2" && (cmState.context.type === "top" || cmState.context.type === "block"))) {
+            this.filter = token.string;
+            return true;
+        } else {
+            this.filter = null;
+            return false;
+        }
+    };
+
+    AtRuleHints.prototype.getHints = function (implicitChar) {
+        var pos     = this.editor.getCursorPos(),
+            token   = this.editor._codeMirror.getTokenAt(pos);
+
+        this.filter = token.string;
+        this.token = token;
+
+        if (!this.filter) {
+            return null;
+        }
+
+        // Filter the property list based on the token string
+        var result = Object.keys(AtRules).filter(function (key) {
+            if (key.indexOf(token.string) === 0) {
+                return key;
+            }
+        }).sort();
+
+        return {
+            hints: result,
+            match: this.filter,
+            selectInitial: true,
+            defaultDescriptionWidth: true,
+            handleWideResults: false
+        };
+    };
+
+
+    /**
+     * Inserts a given @<rule> hint into the current editor context.
+     *
+     * @param {string} completion
+     * The hint to be inserted into the editor context.
+     *
+     * @return {boolean}
+     * Indicates whether the manager should follow hint insertion with an
+     * additional explicit hint request.
+     */
+    AtRuleHints.prototype.insertHint = function (completion) {
+        var cursor = this.editor.getCursorPos();
+        this.editor.document.replaceRange(completion, {line: cursor.line, ch: this.token.start}, {line: cursor.line, ch: this.token.end});
+        return false;
+    };
+
+    AppInit.appReady(function () {
+        // Register code hint providers
+        var restrictedBlockHints = new AtRuleHints();
+        CodeHintManager.registerHintProvider(restrictedBlockHints, ["css", "less", "scss"], 0);
+
+        // For unit testing
+        exports.restrictedBlockHints = restrictedBlockHints;
+    });
+});

src/extensions/default/CSSAtRuleCodeHints/unittests.js

@@ -0,0 +1,236 @@
+/*
+ * Copyright (c) 2017 - present Adobe Systems Incorporated. All rights reserved.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a
+ * copy of this software and associated documentation files (the "Software"),
+ * to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the
+ * Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+ * DEALINGS IN THE SOFTWARE.
+ *
+ */
+
+/*global describe, it, xit, expect, beforeEach, afterEach */
+
+define(function (require, exports, module) {
+    "use strict";
+
+    var SpecRunnerUtils     = brackets.getModule("spec/SpecRunnerUtils"),
+        CSSAtRuleCodeHints  = require("main");
+
+    describe("CSS '@' rules Code Hinting", function () {
+
+        var defaultContent = "@ { \n" +
+                             "} \n" +
+                             " \n" +
+                             "@m ";
+
+
+        var testDocument, testEditor;
+
+        /*
+         * Create a mockup editor with the given content and language id.
+         *
+         * @param {string} content - content for test window
+         * @param {string} languageId
+         */
+        function setupTest(content, languageId) {
+            var mock = SpecRunnerUtils.createMockEditor(content, languageId);
+            testDocument = mock.doc;
+            testEditor = mock.editor;
+        }
+
+        function tearDownTest() {
+            SpecRunnerUtils.destroyMockEditor(testDocument);
+            testEditor = null;
+            testDocument = null;
+        }
+
+        // Ask provider for hints at current cursor position; expect it to return some
+        function expectHints(provider, implicitChar, returnWholeObj) {
+            expect(provider.hasHints(testEditor, implicitChar)).toBe(true);
+            var hintsObj = provider.getHints();
+            expect(hintsObj).toBeTruthy();
+            // return just the array of hints if returnWholeObj is falsy
+            return returnWholeObj ? hintsObj : hintsObj.hints;
+        }
+
+        // Ask provider for hints at current cursor position; expect it NOT to return any
+        function expectNoHints(provider, implicitChar) {
+            expect(provider.hasHints(testEditor, implicitChar)).toBe(false);
+        }
+
+        // compares lists to ensure they are the same
+        function verifyListsAreIdentical(hintList, values) {
+            var i;
+            expect(hintList.length).toBe(values.length);
+            for (i = 0; i < values.length; i++) {
+                expect(hintList[i]).toBe(values[i]);
+            }
+        }
+
+
+        function selectHint(provider, expectedHint, implicitChar) {
+            var hintList = expectHints(provider, implicitChar);
+            expect(hintList.indexOf(expectedHint)).not.toBe(-1);
+            return provider.insertHint(expectedHint);
+        }
+
+        // Helper function for testing cursor position
+        function fixPos(pos) {
+            if (!("sticky" in pos)) {
+                pos.sticky = null;
+            }
+            return pos;
+        }
+        function expectCursorAt(pos) {
+            var selection = testEditor.getSelection();
+            expect(fixPos(selection.start)).toEqual(fixPos(selection.end));
+            expect(fixPos(selection.start)).toEqual(fixPos(pos));
+        }
+
+        function verifyFirstEntry(hintList, expectedFirstHint) {
+            expect(hintList[0]).toBe(expectedFirstHint);
+        }
+
+        // Helper function to
+        // a) ensure the hintList and the list with the available values have the same size
+        // b) ensure that all possible values are mentioned in the hintList
+        function verifyAllValues(hintList, values) {
+            expect(hintList.length).toBe(values.length);
+            expect(hintList.sort().toString()).toBe(values.sort().toString());
+        }
+
+
+        var modesToTest = ['css', 'scss', 'less'],
+            modeCounter;
+
+
+        var selectMode = function () {
+            return modesToTest[modeCounter];
+        };
+
+        describe("'@' rules in styles mode (selection of correct restricted block based on input)", function () {
+
+            beforeEach(function () {
+                // create Editor instance (containing a CodeMirror instance)
+                var mock = SpecRunnerUtils.createMockEditor(defaultContent, selectMode());
+                testEditor = mock.editor;
+                testDocument = mock.doc;
+            });
+
+            afterEach(function () {
+                SpecRunnerUtils.destroyMockEditor(testDocument);
+                testEditor = null;
+                testDocument = null;
+            });
+
+            var testAllHints = function () {
+                    testEditor.setCursorPos({ line: 0, ch: 1 });    // after @
+                    var hintList = expectHints(CSSAtRuleCodeHints.restrictedBlockHints);
+                    verifyFirstEntry(hintList, "@charset");  // filtered on "empty string"
+                    verifyListsAreIdentical(hintList, ["@charset",
+                                                       "@font-face",
+                                                       "@import",
+                                                       "@keyframes",
+                                                       "@media",
+                                                       "@namespace",
+                                                       "@page",
+                                                       "@supports"]);
+                },
+                testFilteredHints = function () {
+                    testEditor.setCursorPos({ line: 3, ch: 2 });    // after @m
+                    var hintList = expectHints(CSSAtRuleCodeHints.restrictedBlockHints);
+                    verifyFirstEntry(hintList, "@media");  // filtered on "@m"
+                    verifyListsAreIdentical(hintList, ["@media"]);
+                },
+                testNoHintsOnSpace = function () {
+                    testEditor.setCursorPos({ line: 3, ch: 3 });    // after {
+                    expect(CSSAtRuleCodeHints.restrictedBlockHints.hasHints(testEditor, '')).toBe(false);
+                },
+                testNoHints = function () {
+                    testEditor.setCursorPos({ line: 0, ch: 0 });    // after {
+                    expect(CSSAtRuleCodeHints.restrictedBlockHints.hasHints(testEditor, 'c')).toBe(false);
+                };
+
+            for (modeCounter in modesToTest) {
+                it("should list all rule hints right after @", testAllHints);
+                it("should list filtered rule hints right after @m", testFilteredHints);
+                it("should not list rule hints on space", testNoHintsOnSpace);
+                it("should not list rule hints if the cursor is before @", testNoHints);
+            }
+        });
+
+        describe("'@' rules in LESS mode (selection of correct restricted block based on input)", function () {
+            defaultContent = "@ { \n" +
+                             "} \n" +
+                             " \n" +
+                             "@m \n" +
+                             "@green: green;\n" +
+                             ".div { \n" +
+                             "color: @" +
+                             "} \n";
+
+            beforeEach(function () {
+                // create Editor instance (containing a CodeMirror instance)
+                var mock = SpecRunnerUtils.createMockEditor(defaultContent, "less");
+                testEditor = mock.editor;
+                testDocument = mock.doc;
+            });
+
+            afterEach(function () {
+                SpecRunnerUtils.destroyMockEditor(testDocument);
+                testEditor = null;
+                testDocument = null;
+            });
+
+            it("should not list rule hints in less variable evaluation scope", function () {
+                testEditor.setCursorPos({ line: 3, ch: 3 });    // after {
+                expect(CSSAtRuleCodeHints.restrictedBlockHints.hasHints(testEditor, '')).toBe(false);
+            });
+
+        });
+
+        describe("'@' rule hint insertion", function () {
+            beforeEach(function () {
+                // create Editor instance (containing a CodeMirror instance)
+                var mock = SpecRunnerUtils.createMockEditor(defaultContent, "css");
+                testEditor = mock.editor;
+                testDocument = mock.doc;
+            });
+
+            afterEach(function () {
+                SpecRunnerUtils.destroyMockEditor(testDocument);
+                testEditor = null;
+                testDocument = null;
+            });
+
+            it("should insert @rule selected", function () {
+                testEditor.setCursorPos({ line: 0, ch: 1 });   // cursor after '@'
+                selectHint(CSSAtRuleCodeHints.restrictedBlockHints, "@charset");
+                expect(testDocument.getLine(0)).toBe("@charset { ");
+                expectCursorAt({ line: 0, ch: 8 });
+            });
+
+            it("should insert filtered selection by replacing the existing rule", function () {
+                testEditor.setCursorPos({ line: 3, ch: 2 });   // cursor after '@m'
+                selectHint(CSSAtRuleCodeHints.restrictedBlockHints, "@media");
+                expect(testDocument.getLine(3)).toBe("@media ");
+                expectCursorAt({ line: 3, ch: 6 });
+            });
+        });
+
+    });
+});
+

src/extensions/default/CSSCodeHints/main.js

@@ -468,7 +468,7 @@ define(function (require, exports, module) {
 
     AppInit.appReady(function () {
         var cssPropHints = new CssPropHints();
-        CodeHintManager.registerHintProvider(cssPropHints, ["css", "scss", "less"], 0);
+        CodeHintManager.registerHintProvider(cssPropHints, ["css", "scss", "less"], 1);
 
         ExtensionUtils.loadStyleSheet(module, "styles/brackets-css-hints.css");