chore: css defined in html style block will appear in css class hints

Author: abose

src/extensions/default/HTMLCodeHints/main.js

@@ -255,7 +255,7 @@ define(function (require, exports, module) {
         const segments = queryStr.split(" ");
         queryStr = segments[segments.length-1];
         const deferred = $.Deferred();
-        CSSUtils.getAllCssSelectorsInProject({includeClasses: true}).then(hints=>{
+        CSSUtils.getAllCssSelectorsInProject({includeClasses: true, scanCurrentHtml: true}).then(hints=>{
             const result = $.map(hints, function (pvalue) {
                 pvalue = pvalue.slice(1); // remove.
                 if(!pvalue || pvalue.includes("#") || pvalue.includes("\\") || pvalue.includes("/")){

src/extensions/default/JavaScriptCodeHints/main.js

@@ -210,7 +210,7 @@ define(function (require, exports, module) {
          */
         function formatHints(hints, query) {
             return hints.map(function (token) {
-                var $hintObj    = $("<span>").addClass("brackets-js-hints");
+                var $hintObj    = $("<span>").addClass("brackets-js-hints brackets-hints");
 
                 // level indicates either variable scope or property confidence
                 if (!type.property && !token.builtin && token.depth !== undefined) {

src/language/CSSUtils.js

@@ -1903,17 +1903,60 @@ define(function (require, exports, module) {
         return selector;
     }
 
+    const _htmlLikeFileExts = ["htm", "html", "xhtml", "php"];
+    function _isHtmlLike(editor) {
+        if (!editor) {
+            return false;
+        }
+        const fullPath = editor.document.file.fullPath;
+        return (_htmlLikeFileExts.indexOf(LanguageManager.getLanguageForPath(fullPath).getId()) !== -1);
+    }
+
+    function _getAllSelectorsInCurrentHTMLEditor() {
+        return new Promise(resolve=>{
+            let selectors = new Set();
+            const htmlEditor = EditorManager.getCurrentFullEditor();
+            if (!htmlEditor || !_isHtmlLike(htmlEditor) ) {
+                resolve(selectors);
+                return;
+            }
+
+            // Find all <style> blocks in the HTML file
+            const styleBlocks = HTMLUtils.findStyleBlocks(htmlEditor);
+            let cssText = "";
+
+            styleBlocks.forEach(function (styleBlockInfo) {
+                // Search this one <style> block's content
+                cssText += styleBlockInfo.text;
+            });
+            const fullPath = htmlEditor.document.file.fullPath;
+            IndexingWorker.execPeer("css_getAllSymbols", {text: cssText, cssMode: "CSS", filePath: fullPath})
+                .then((selectorArray)=>{
+                    selectors = _extractSelectorSet(selectorArray);
+                    CSSSelectorCache.set(fullPath, selectors);
+                    resolve(selectors);
+                }).catch(err=>{
+                    console.warn("CSS language service unable to get selectors for" + fullPath, err);
+                    resolve(selectors);  // still resolve, so the overall result doesn't reject
+                });
+        });
+    }
+
     let globalPrecacheRun = 0;
     function getAllCssSelectorsInProject(options = {
         includeClasses: true,
-        includeIDs: true
+        includeIDs: true,
+        scanCurrentHtml: true
     }) {
         globalPrecacheRun ++; // we need to stop the pre cache logic from doing the same cache again
         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));
+                    if(options.scanCurrentHtml){
+                        promises.push(_getAllSelectorsInCurrentHTMLEditor());
+                    }
                     const mergedSets = new Set();
                     // Use Promise.allSettled to handle all promises
                     Promise.allSettled(promises)

src/languageTools/styles/default_provider_style.css

@@ -85,6 +85,10 @@ span.brackets-hints-with-type-details {
     color: #6495ed !important;
 }
 
+.codehint-menu {
+    font-family: SourceCodePro;
+}
+
 .brackets-hints .matched-hint {
     font-weight: 500;
     color: #437900;