feat: css class code hints from html files

Author: abose

src/LiveDevelopment/LiveDevMultiBrowser.js

@@ -604,7 +604,7 @@ define(function (require, exports, module) {
      * @param {Document} doc
      */
     function _onDirtyFlagChange(event, doc) {
-        if (!isActive() || !_server || !_liveDocument) {
+        if (!isActive() || !_server || !_liveDocument || !_liveDocument.isRelated) {
             return;
         }
 

src/extensions/default/HTMLCodeHints/main.js

@@ -30,6 +30,8 @@ define(function (require, exports, module) {
         PreferencesManager  = brackets.getModule("preferences/PreferencesManager"),
         Strings             = brackets.getModule("strings"),
         NewFileContentManager = brackets.getModule("features/NewFileContentManager"),
+        CSSUtils            = brackets.getModule("language/CSSUtils"),
+        StringMatch         = brackets.getModule("utils/StringMatch"),
         HTMLTags            = require("text!HtmlTags.json"),
         HTMLAttributes      = require("text!HtmlAttributes.json"),
         HTMLTemplate        = require("text!template.html"),
@@ -219,6 +221,52 @@ define(function (require, exports, module) {
         });
     };
 
+    const MAX_CLASS_HINTS = 250;
+    function formatHints(hints) {
+        StringMatch.basicMatchSort(hints);
+        if(hints.length > MAX_CLASS_HINTS) {
+            hints = hints.splice(0, MAX_CLASS_HINTS);
+        }
+        return hints.map(function (token) {
+            let $hintObj = $("<span>").addClass("brackets-html-hints brackets-hints");
+
+            // highlight the matched portion of each hint
+            if (token.stringRanges) {
+                token.stringRanges.forEach(function (item) {
+                    if (item.matched) {
+                        $hintObj.append($("<span>")
+                            .text(item.text)
+                            .addClass("matched-hint"));
+                    } else {
+                        $hintObj.append(item.text);
+                    }
+                });
+            } else {
+                $hintObj.text(token.label);
+            }
+            $hintObj.attr("data-val", token.label);
+            return $hintObj;
+        });
+    }
+
+    function _getAllClassHints(query) {
+        let queryStr = query.queryStr;
+        // "class1 class2" have multiple classes. the last part is the query to hint
+        const segments = queryStr.split(" ");
+        queryStr = segments[segments.length-1];
+        const deferred = $.Deferred();
+        CSSUtils.getAllCssSelectorsInProject({includeClasses: true}).then(hints=>{
+            const result = $.map(hints, function (pvalue) {
+                pvalue = pvalue.slice(1); // remove.
+                return  StringMatch.stringMatch(pvalue, queryStr, { preferPrefixMatches: true });
+            });
+            const validHints = formatHints(result);
+            validHints.alreadyMatched = true;
+            deferred.resolve(validHints);
+        }).catch(console.error);
+        return deferred;
+    }
+
     /**
      * Helper function that determines the possible value hints for a given html tag/attribute name pair
      *
@@ -242,6 +290,10 @@ define(function (require, exports, module) {
         // "script/type", "link/type" and "button/type".
         var hints = [];
 
+        if(attrName === "class") {
+            return _getAllClassHints(query);
+        }
+
         var tagPlusAttr = tagName + "/" + attrName,
             attrInfo = attributes[tagPlusAttr] || attributes[attrName];
 
@@ -326,10 +378,10 @@ define(function (require, exports, module) {
                 }
 
                 // If we're at an attribute value, check if it's an attribute name that has hintable values.
-                if (this.tagInfo.attr.name) {
-                    var hints = this._getValueHintsForAttr({queryStr: query},
-                                                           this.tagInfo.tagName,
-                                                           this.tagInfo.attr.name);
+                const attrName = this.tagInfo.attr.name;
+                if (attrName && attrName !== "class") { // class hints are always computed later
+                    let hints = this._getValueHintsForAttr({queryStr: query},
+                        this.tagInfo.tagName, attrName);
                     if (hints instanceof Array) {
                         // If we got synchronous hints, check if we have something we'll actually use
                         var i, foundPrefix = false;
@@ -452,7 +504,7 @@ define(function (require, exports, module) {
                 hints.done(function (asyncHints) {
                     deferred.resolveWith(this, [{
                         hints: asyncHints,
-                        match: query.queryStr,
+                        match: asyncHints.alreadyMatched? null: query.queryStr,
                         selectInitial: true,
                         handleWideResults: false
                     }]);
@@ -487,6 +539,7 @@ define(function (require, exports, module) {
             replaceExistingOne = this.tagInfo.attr.valueAssigned,
             endQuote = "",
             shouldReplace = true,
+            positionWithinAttributeVal = false,
             textAfterCursor;
 
         if (tokenType === HTMLUtils.ATTR_NAME) {
@@ -518,6 +571,18 @@ define(function (require, exports, module) {
                 charCount = this.tagInfo.attr.value.length;
             }
 
+            if(this.tagInfo.attr.name === "class") {
+                // css class hints
+                completion = completion.data("val");
+                // "anotherClass class<cursor>name" . completion = classics , we have to match a prefix after space
+                const textBeforeCursor = this.tagInfo.attr.value.slice(0, offset);
+                let lastSegment = textBeforeCursor.split(" ");
+                lastSegment = lastSegment[lastSegment.length-1];
+                offset = lastSegment.length;
+                charCount = offset;
+                positionWithinAttributeVal = true;
+            }
+
             if (!this.tagInfo.attr.hasEndQuote) {
                 endQuote = this.tagInfo.attr.quoteChar;
                 if (endQuote) {
@@ -542,7 +607,10 @@ define(function (require, exports, module) {
             }
         }
 
-        if (insertedName) {
+        if(positionWithinAttributeVal){
+            this.editor.setCursorPos(start.line, start.ch + completion.length);
+            // we're now inside the double-quotes we just inserted
+        } else if (insertedName) {
             this.editor.setCursorPos(start.line, start.ch + completion.length - 1);
 
             // Since we're now inside the double-quotes we just inserted,

src/language/CSSUtils.js

@@ -20,6 +20,7 @@
  */
 
 /*jslint regexp: true */
+/*global jsPromise*/
 
 /**
  * Set of utilities for simple parsing of CSS text.
@@ -30,6 +31,7 @@ define(function (require, exports, module) {
     var CodeMirror          = require("thirdparty/CodeMirror/lib/codemirror"),
         Async               = require("utils/Async"),
         DocumentManager     = require("document/DocumentManager"),
+        AppInit             = require("utils/AppInit"),
         EditorManager       = require("editor/EditorManager"),
         HTMLUtils           = require("language/HTMLUtils"),
         LanguageManager     = require("language/LanguageManager"),
@@ -1807,6 +1809,131 @@ define(function (require, exports, module) {
         return (allSelectors.length ? allSelectors[0].selectorGroup || allSelectors[0].selector : "");
     }
 
+    function _extractSelectorSet(selectorList) {
+        const regex = /[{}!]/;
+        const selectors = new Set();
+        if(!selectorList){
+            return selectors;
+        }
+        for(let item of selectorList) {
+            if(regex.test(item.selector)){
+                // this happens for scss selectors like #${var}-something. we ignore that for now instead of resolving
+                continue;
+            }
+            selectors.add(extractSelectorBase(item.selector)); // x:hover or x::some -> x
+        }
+        return selectors;
+    }
+
+    const CSSSelectorCache = new Map();
+
+    function _projectFileChanged(_evt, entry) {
+        if(!entry){
+            return;
+        }
+        let changedPath = entry.fullPath;
+        if(entry.isFile) {
+            CSSSelectorCache.delete(changedPath);
+        } else if(entry.isDirectory) {
+            changedPath = Phoenix.VFS.ensureTrailingSlash(changedPath);
+            const cachedFilePaths = Array.from(CSSSelectorCache.keys());
+            for(let filePath of cachedFilePaths) {
+                if(filePath.startsWith(changedPath)){
+                    CSSSelectorCache.delete(filePath);
+                }
+            }
+        }
+    }
+
+    function _loadFileAndScanCSSSelectorCached(fullPath) {
+        return new Promise(resolve=>{
+            DocumentManager.getDocumentForPath(fullPath)
+                .done(function (doc) {
+                    // Find all matching rules for the given CSS file's content, and add them to the
+                    // overall search result
+                    let selectors;
+                    const cachedSelectors = CSSSelectorCache.get(fullPath);
+                    if(cachedSelectors){
+                        selectors = cachedSelectors;
+                    } else {
+                        selectors = extractAllSelectors(doc.getText(), doc.getLanguage().getMode());
+                        selectors = _extractSelectorSet(selectors);
+                        CSSSelectorCache.set(fullPath, selectors);
+                    }
+                    resolve(selectors);
+                })
+                .fail(function (error) {
+                    console.warn("Unable to read " + fullPath + " during CSS selector search:", error);
+                    resolve(new Set());  // still resolve, so the overall result doesn't reject
+                });
+        });
+    }
+
+    function extractSelectorBase(selector) {
+        // Use a regular expression to find the base part of the selector before any spaces, combinators,
+        // pseudo-classes, or attribute selectors
+        const match = selector.match(/^[^\s>+~:\[]+/);
+        // Return the match if found, otherwise return the original selector if no ':' or '::' is present
+        selector = match ? match[0] : selector;
+        if(selector.startsWith(".")) {
+            // Eg .class1.class2 type selector, we have to consider this too, so we always take the first segment only
+            selector = "." + selector.split(".")[1];
+        }
+        return selector;
+    }
+
+    function getAllCssSelectorsInProject(options = {
+        includeClasses: true,
+        includeIDs: true
+    }) {
+        return new Promise(resolve=>{
+            ProjectManager.getAllFiles(ProjectManager.getLanguageFilter(["css", "less", "scss"]))
+                .done(function (cssFiles) {
+                    // Create an array of promises from the array of cssFiles
+                    const promises = cssFiles.map(fileInfo => _loadFileAndScanCSSSelectorCached(fileInfo.fullPath));
+                    const mergedSets = new Set();
+                    // Use Promise.allSettled to handle all promises
+                    Promise.allSettled(promises)
+                        .then(results => {
+                            results.forEach((result, index) => {
+                                if (result.status === 'fulfilled') {
+                                    result.value.forEach(value => {
+                                        if((options.includeClasses && value.startsWith(".")) ||
+                                            (options.includeIDs && value.startsWith("#"))) {
+                                            mergedSets.add(value);
+                                        }
+                                    });
+                                } else {
+                                    console.error(`Error collect css selectors from file ${cssFiles[index].fullPath}:`,
+                                        result.reason);
+                                }
+                            });
+                            resolve(Array.from(mergedSets.keys()));
+                        });
+                });
+        });
+    }
+
+    async function _populateSelectorCache() {
+        const cssFiles = await jsPromise(ProjectManager.getAllFiles(
+            ProjectManager.getLanguageFilter(["css", "less", "scss"])));
+        for(let cssFile of cssFiles){
+            await _loadFileAndScanCSSSelectorCached(cssFile.fullPath); // this is serial to not hog processor
+        }
+    }
+
+    AppInit.appReady(function () {
+        ProjectManager.on(ProjectManager.EVENT_PROJECT_FILE_CHANGED, _projectFileChanged);
+        ProjectManager.on(ProjectManager.EVENT_PROJECT_OPEN, ()=>{
+            CSSSelectorCache.clear();
+            setTimeout(_populateSelectorCache, 2000);
+        });
+        setTimeout(_populateSelectorCache, 2000);
+        DocumentManager.on(DocumentManager.EVENT_DOCUMENT_CHANGE, function (event, doc, _changelist) {
+            CSSSelectorCache.delete(doc.file.fullPath);
+        });
+    });
+
     exports._findAllMatchingSelectorsInText = _findAllMatchingSelectorsInText; // For testing only
     exports.findMatchingRules = findMatchingRules;
     exports.extractAllSelectors = extractAllSelectors;
@@ -1817,6 +1944,7 @@ define(function (require, exports, module) {
     exports.getRangeSelectors = getRangeSelectors;
     exports.getCompleteSelectors = getCompleteSelectors;
     exports.isCSSPreprocessorFile = isCSSPreprocessorFile;
+    exports.getAllCssSelectorsInProject = getAllCssSelectorsInProject;
 
     exports.SELECTOR = SELECTOR;
     exports.PROP_NAME = PROP_NAME;