chore: add emmet icon at the side of emmet hint

Author: devvaannsh

src/extensions/default/CSSCodeHints/main.js

@@ -384,40 +384,54 @@ define(function (require, exports, module) {
             }
 
             // pushedHints stores all the hints that will be displayed to the user
-            // up until this much is the normal working of css code hints
             let pushedHints = formatHints(result);
 
             // needle gives the current word before cursor, make sure that it exists
             // also needle shouldn't contain `-`, because for example if user typed:
             // `box-siz` then in that case it is very obvious that user wants to type `box-sizing`
             // but emmet expands it `box: siz;`. So we prevent calling emmet when needle has `-`.
             if(needle && !needle.includes('-')) {
-                let expandedAbbr = EXPAND_ABBR(needle, { syntax: "css", type: "stylesheet" });
-                if(expandedAbbr && isEmmetExpandable(needle, expandedAbbr)) {
-
-                    // if the expandedAbbr doesn't have any numbers, we should split the expandedAbbr to,
-                    // get its first word before `:`.
-                    // For instance, `m` expands to `margin: ;`. Here the `: ;` is unnecessary.
-                    // Also, `bgc` expands to `background-color: #fff;`. Here we don't need the `: #fff;`
-                    // as we have cssIntelligence to display hints based on the property
-                    if(!isEmmetAbbrNumeric(expandedAbbr)) {
-                        expandedAbbr = expandedAbbr.split(':')[0];
-                    }
 
-                    if(pushedHints) {
+                // wrapped in try catch block because EXPAND_ABBR might throw error when it gets unexpected
+                // characters such as `, =, etc
+                try {
+                    let expandedAbbr = EXPAND_ABBR(needle, { syntax: "css", type: "stylesheet" });
+                    if(expandedAbbr && isEmmetExpandable(needle, expandedAbbr)) {
+
+                        // if the expandedAbbr doesn't have any numbers, we should split the expandedAbbr to,
+                        // get its first word before `:`.
+                        // For instance, `m` expands to `margin: ;`. Here the `: ;` is unnecessary.
+                        // Also, `bgc` expands to `background-color: #fff;`. Here we don't need the `: #fff;`
+                        // as we have cssIntelligence to display hints based on the property
+                        if(!isEmmetAbbrNumeric(expandedAbbr)) {
+                            expandedAbbr = expandedAbbr.split(':')[0];
+                        }
+
+                        // this displays an emmet icon at the side of the hint
+                        // this gives an idea to the user that the hint is coming from Emmet
+                        let $icon = $(`<span class="emmet-css-code-hint">Emmet</span>`);
 
-                        // to remove duplicate hints. one comes from emmet and other from default css hints.
-                        // we remove the default css hints and push emmet hint at the beginning.
-                        for(let i = 0; i < pushedHints.length; i++) {
-                            if(pushedHints[i][0].getAttribute('data-val') === expandedAbbr) {
-                                pushedHints.splice(i, 1);
-                                break;
+                        const $emmetHintObj = $(`<span data-val='${expandedAbbr}'></span>`).addClass("brackets-css-hints brackets-hints");
+                        $emmetHintObj.text(expandedAbbr);
+                        $emmetHintObj.append($icon);
+
+                        if(pushedHints) {
+
+                            // to remove duplicate hints. one comes from emmet and other from default css hints.
+                            // we remove the default css hints and push emmet hint at the beginning.
+                            for(let i = 0; i < pushedHints.length; i++) {
+                                if(pushedHints[i][0].getAttribute('data-val') === expandedAbbr) {
+                                    pushedHints.splice(i, 1);
+                                    break;
+                                }
                             }
+                            pushedHints.unshift($emmetHintObj);
+                        } else {
+                            pushedHints = $emmetHintObj;
                         }
-                        pushedHints.unshift(expandedAbbr);
-                    } else {
-                        pushedHints = expandedAbbr;
                     }
+                } catch (e) {
+                    // pass
                 }
             }
 

src/styles/brackets_patterns_override.less

@@ -709,6 +709,24 @@ a:focus {
     }
 }
 
+.emmet-css-code-hint {
+  visibility: hidden;
+}
+
+.highlight .emmet-css-code-hint {
+  visibility: visible;
+  position: absolute;
+  right: 8px;
+  font-size: 0.7em;
+  font-weight: bold;
+  margin-top: 2px;
+  letter-spacing: 0.3px;
+  color: #2ea56c !important;
+  .dark& {
+    color: #146a41 !important;
+  }
+}
+
 #codehint-desc {
 	background: @bc-codehint-desc;
 	position: absolute;