Skip to content

Commit c99593f

Browse files
devvaannshabose
devvaannsh
authored and
abose
committed
fix: live server tests failing issue
1 parent 3ec7a3f commit c99593f

File tree

2 files changed

+215
-191
lines changed

2 files changed

+215
-191
lines changed

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

Lines changed: 79 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -24,21 +24,21 @@
2424
define(function (require, exports, module) {
2525

2626

27-
var AppInit = brackets.getModule("utils/AppInit"),
28-
CodeHintManager = brackets.getModule("editor/CodeHintManager"),
29-
EditorManager = brackets.getModule("editor/EditorManager"),
30-
CSSUtils = brackets.getModule("language/CSSUtils"),
31-
PreferencesManager = brackets.getModule("preferences/PreferencesManager"),
32-
TokenUtils = brackets.getModule("utils/TokenUtils"),
33-
StringMatch = brackets.getModule("utils/StringMatch"),
34-
ColorUtils = brackets.getModule("utils/ColorUtils"),
35-
Strings = brackets.getModule("strings"),
36-
KeyEvent = brackets.getModule("utils/KeyEvent"),
37-
LiveDevelopment = brackets.getModule("LiveDevelopment/main"),
38-
Metrics = brackets.getModule("utils/Metrics"),
39-
AllPreferences = brackets.getModule("preferences/AllPreferences"),
40-
CSSProperties = require("text!CSSProperties.json"),
41-
properties = JSON.parse(CSSProperties);
27+
var AppInit = brackets.getModule("utils/AppInit"),
28+
CodeHintManager = brackets.getModule("editor/CodeHintManager"),
29+
EditorManager = brackets.getModule("editor/EditorManager"),
30+
CSSUtils = brackets.getModule("language/CSSUtils"),
31+
PreferencesManager = brackets.getModule("preferences/PreferencesManager"),
32+
TokenUtils = brackets.getModule("utils/TokenUtils"),
33+
StringMatch = brackets.getModule("utils/StringMatch"),
34+
ColorUtils = brackets.getModule("utils/ColorUtils"),
35+
Strings = brackets.getModule("strings"),
36+
KeyEvent = brackets.getModule("utils/KeyEvent"),
37+
LiveDevelopment = brackets.getModule("LiveDevelopment/main"),
38+
Metrics = brackets.getModule("utils/Metrics"),
39+
AllPreferences = brackets.getModule("preferences/AllPreferences"),
40+
CSSProperties = require("text!CSSProperties.json"),
41+
properties = JSON.parse(CSSProperties);
4242

4343
/**
4444
* Emmet API:
@@ -139,7 +139,20 @@ define(function (require, exports, module) {
139139
for (const match of matches) {
140140
if (isValidColor(lineText, match)) {
141141
const token = editor.getToken({ line: i, ch: match.index });
142-
if (token && token.type !== "comment") {
142+
143+
// this check is added to filter out non-required colors. For ex:
144+
// the color should not be inside a commented line
145+
// the color should not be written as a plain text (in html files)
146+
// like <p>Red is bad.</p>, we need to ignore this Red
147+
if (
148+
token &&
149+
(
150+
// If we're in an HTML file (token.state.htmlState exists),
151+
// then only process if inside a <style> tag.
152+
(token.state && token.state.htmlState ? token.state.htmlState.context.tagName === "style" : true)
153+
) &&
154+
token.type !== "comment"
155+
) {
143156
updateColorList(colorList, match[0], i);
144157
}
145158
}
@@ -209,7 +222,7 @@ define(function (require, exports, module) {
209222
}
210223

211224
return (this.primaryTriggerKeys.indexOf(implicitChar) !== -1) ||
212-
(this.secondaryTriggerKeys.indexOf(implicitChar) !== -1);
225+
(this.secondaryTriggerKeys.indexOf(implicitChar) !== -1);
213226
} else if (this.info.context === CSSUtils.PROP_NAME) {
214227
if (this.info.offset === 0) {
215228
this.exclusion = this.info.name;
@@ -250,7 +263,7 @@ define(function (require, exports, module) {
250263
*/
251264
function formatHints(hints, isColorSwatch) {
252265
hints = vendorPrefixesAndGenericToEnd(hints);
253-
if(hints.length > MAX_CSS_HINTS) {
266+
if (hints.length > MAX_CSS_HINTS) {
254267
hints = hints.splice(0, MAX_CSS_HINTS);
255268
}
256269
return hints.map(function (token) {
@@ -274,7 +287,7 @@ define(function (require, exports, module) {
274287
if (isColorSwatch) {
275288
$hintObj = ColorUtils.formatColorHint($hintObj, token.color || token.label || token.value);
276289
}
277-
if(token.MDN_URL) {
290+
if (token.MDN_URL) {
278291
const $mdn = $(`<a class="css-code-hint-info" style="text-decoration: none;"
279292
href="${token.MDN_URL}" title="${Strings.DOCS_MORE_LINK_MDN_TITLE}">
280293
<i class="fa-solid fa-circle-info"></i></a>`);
@@ -302,16 +315,16 @@ define(function (require, exports, module) {
302315
auto: true
303316
};
304317
computedProperties = {};
305-
for(let propertyKey of Object.keys(properties)) {
318+
for (let propertyKey of Object.keys(properties)) {
306319
const property = properties[propertyKey];
307-
if(property.type === "color" || !property.values || !property.values.length
320+
if (property.type === "color" || !property.values || !property.values.length
308321
|| propertyKey === "font-family") {
309322
computedProperties[propertyKey] = propertyKey;
310323
continue;
311324
}
312325
computedProperties[propertyKey] = propertyKey;
313-
for(let value of property.values) {
314-
if(!blacklistedValues[value]){
326+
for (let value of property.values) {
327+
if (!blacklistedValues[value]) {
315328
computedProperties[`${propertyKey}: ${value};`] = propertyKey;
316329
}
317330
}
@@ -391,7 +404,7 @@ define(function (require, exports, module) {
391404
valueNeedle = valueNeedle.substr(0, this.info.offset);
392405
}
393406

394-
if(!properties[needle].injectedCSSDefaults){
407+
if (!properties[needle].injectedCSSDefaults) {
395408
uniqueMerge(properties[needle].values, cssWideKeywords);
396409
properties[needle].injectedCSSDefaults = true;
397410
}
@@ -450,7 +463,7 @@ define(function (require, exports, module) {
450463

451464
lastContext = CSSUtils.PROP_NAME;
452465
needle = needle.substr(0, this.info.offset);
453-
if(!computedProperties){
466+
if (!computedProperties) {
454467
_computeProperties();
455468
}
456469

@@ -460,9 +473,9 @@ define(function (require, exports, module) {
460473
boostPrefixList: BOOSTED_PROPERTIES
461474
});
462475

463-
for(let resultItem of result) {
476+
for (let resultItem of result) {
464477
const propertyKey = computedPropertyKeys[resultItem.sourceIndex];
465-
if(properties[propertyKey] && properties[propertyKey].MDN_URL){
478+
if (properties[propertyKey] && properties[propertyKey].MDN_URL) {
466479
resultItem.MDN_URL = properties[propertyKey].MDN_URL;
467480
MDN_PROPERTIES_URLS[propertyKey] = resultItem.MDN_URL;
468481
}
@@ -472,26 +485,26 @@ define(function (require, exports, module) {
472485
let pushedHints = formatHints(result);
473486

474487
// make sure that emmet feature is on in preferences
475-
if(enabled) {
488+
if (enabled) {
476489

477490
// needle gives the current word before cursor, make sure that it exists
478491
// also needle shouldn't contain `-`, because for example if user typed:
479492
// `box-siz` then in that case it is very obvious that user wants to type `box-sizing`
480493
// but emmet expands it `box: siz;`. So we prevent calling emmet when needle has `-`.
481-
if(needle && !needle.includes('-')) {
494+
if (needle && !needle.includes('-')) {
482495

483496
// wrapped in try catch block because EXPAND_ABBR might throw error when it gets unexpected
484497
// characters such as `, =, etc
485498
try {
486499
let expandedAbbr = expandAbbr(needle, { syntax: "css", type: "stylesheet" });
487-
if(expandedAbbr && _isEmmetExpandable(needle, expandedAbbr)) {
500+
if (expandedAbbr && _isEmmetExpandable(needle, expandedAbbr)) {
488501

489502
// if the expandedAbbr doesn't have any numbers, we should split the expandedAbbr to,
490503
// get its first word before `:`.
491504
// For instance, `m` expands to `margin: ;`. Here the `: ;` is unnecessary.
492505
// Also, `bgc` expands to `background-color: #fff;`. Here we don't need the `: #fff;`
493506
// as we have cssIntelligence to display hints based on the property
494-
if(!_isEmmetAbbrNumeric(expandedAbbr)) {
507+
if (!_isEmmetAbbrNumeric(expandedAbbr)) {
495508
expandedAbbr = expandedAbbr.split(':')[0];
496509
}
497510

@@ -504,7 +517,7 @@ define(function (require, exports, module) {
504517
let $icon = $(`<a class="emmet-css-code-hint" style="text-decoration: none">Emmet</a>`);
505518

506519
// if MDN_URL is available for the property, add the href attribute to redirect to mdn
507-
if(MDN_PROPERTIES_URLS[expandedAbbr]) {
520+
if (MDN_PROPERTIES_URLS[expandedAbbr]) {
508521
$icon.attr("href", MDN_PROPERTIES_URLS[expandedAbbr]);
509522
$icon.attr("title", Strings.DOCS_MORE_LINK_MDN_TITLE);
510523
}
@@ -533,12 +546,12 @@ define(function (require, exports, module) {
533546
// add the emmet icon to the final hint object
534547
$emmetHintObj.append($icon);
535548

536-
if(pushedHints) {
549+
if (pushedHints) {
537550

538551
// to remove duplicate hints. one comes from emmet and other from default css hints.
539552
// we remove the default css hints and push emmet hint at the beginning.
540-
for(let i = 0; i < pushedHints.length; i++) {
541-
if(pushedHints[i][0].getAttribute('data-val') === expandedAbbr) {
553+
for (let i = 0; i < pushedHints.length; i++) {
554+
if (pushedHints[i][0].getAttribute('data-val') === expandedAbbr) {
542555
pushedHints.splice(i, 1);
543556
break;
544557
}
@@ -597,54 +610,54 @@ define(function (require, exports, module) {
597610
let hintSessionId = 0, isInLiveHighlightSession = false;
598611

599612
CssPropHints.prototype.onClose = function () {
600-
if(isInLiveHighlightSession) {
613+
if (isInLiveHighlightSession) {
601614
this.editor.restoreHistoryPoint(`${HISTORY_PREFIX}${hintSessionId}`);
602615
isInLiveHighlightSession = false;
603616
}
604617
hintSessionId++;
605618
};
606619

607620
CssPropHints.prototype.onHighlight = function ($highlightedEl, _$descriptionElem, reason) {
608-
if(!reason){
621+
if (!reason) {
609622
console.error("OnHighlight called without reason, should never happen!");
610623
hintSessionId++;
611624
return;
612625
}
613626
const currentLivePreviewDetails = LiveDevelopment.getLivePreviewDetails();
614-
if(!(currentLivePreviewDetails && currentLivePreviewDetails.liveDocument)) {
627+
if (!(currentLivePreviewDetails && currentLivePreviewDetails.liveDocument)) {
615628
// css live hints only for live previewed page and related files
616629
return;
617630
}
618631
const currentlyEditedFile = this.editor.document.file.fullPath;
619632
const livePreviewedFile = currentLivePreviewDetails.liveDocument.doc.file.fullPath;
620-
if(currentlyEditedFile !== livePreviewedFile) {
633+
if (currentlyEditedFile !== livePreviewedFile) {
621634
const isRelatedFile = currentLivePreviewDetails.liveDocument.isRelated &&
622635
currentLivePreviewDetails.liveDocument.isRelated(currentlyEditedFile);
623-
if(!isRelatedFile) {
636+
if (!isRelatedFile) {
624637
// file is neither current html file being live previewed, or any of its
625638
// related file. we dont show hints in the case
626639
return;
627640
}
628641
}
629-
if(reason.source === CodeHintManager.SELECTION_REASON.SESSION_START){
642+
if (reason.source === CodeHintManager.SELECTION_REASON.SESSION_START) {
630643
hintSessionId++;
631644
this.editor.createHistoryRestorePoint(`${HISTORY_PREFIX}${hintSessionId}`);
632645
return;
633646
}
634-
if(reason.source !== CodeHintManager.SELECTION_REASON.KEYBOARD_NAV){
647+
if (reason.source !== CodeHintManager.SELECTION_REASON.KEYBOARD_NAV) {
635648
return;
636649
}
637650
const event = reason.event;
638-
if(!(event.keyCode === KeyEvent.DOM_VK_UP ||
651+
if (!(event.keyCode === KeyEvent.DOM_VK_UP ||
639652
event.keyCode === KeyEvent.DOM_VK_DOWN ||
640653
event.keyCode === KeyEvent.DOM_VK_PAGE_UP ||
641-
event.keyCode === KeyEvent.DOM_VK_PAGE_DOWN)){
654+
event.keyCode === KeyEvent.DOM_VK_PAGE_DOWN)) {
642655
return;
643656
}
644657
Metrics.countEvent(Metrics.EVENT_TYPE.LIVE_PREVIEW, "cssHint", "preview");
645658
const $hintItem = $highlightedEl.find(".brackets-css-hints");
646659
const highligtedValue = $highlightedEl.find(".brackets-css-hints").data("val");
647-
if(!highligtedValue || !$hintItem.is(":visible")){
660+
if (!highligtedValue || !$hintItem.is(":visible")) {
648661
return;
649662
}
650663
isInLiveHighlightSession = true;
@@ -666,8 +679,8 @@ define(function (require, exports, module) {
666679
CssPropHints.prototype.insertHint = function (hint, isLiveHighlight) {
667680
var offset = this.info.offset,
668681
cursor = this.editor.getCursorPos(),
669-
start = {line: -1, ch: -1},
670-
end = {line: -1, ch: -1},
682+
start = { line: -1, ch: -1 },
683+
end = { line: -1, ch: -1 },
671684
keepHints = false,
672685
adjustCursor = false,
673686
newCursor,
@@ -700,8 +713,10 @@ define(function (require, exports, module) {
700713
// the cursor before that space.
701714
hint += " ";
702715
adjustCursor = true;
703-
newCursor = { line: cursor.line,
704-
ch: start.ch + hint.length - 1 };
716+
newCursor = {
717+
line: cursor.line,
718+
ch: start.ch + hint.length - 1
719+
};
705720
this.exclusion = null;
706721
}
707722
} else {
@@ -718,13 +733,15 @@ define(function (require, exports, module) {
718733
}
719734
if (TokenUtils.moveSkippingWhitespace(TokenUtils.moveNextToken, ctx) && ctx.token.string === ":") {
720735
adjustCursor = true;
721-
newCursor = { line: cursor.line,
722-
ch: cursor.ch + (hint.length - this.info.name.length) };
736+
newCursor = {
737+
line: cursor.line,
738+
ch: cursor.ch + (hint.length - this.info.name.length)
739+
};
723740
// Adjust cursor to the position after any whitespace that follows the colon, if there is any.
724741
if (TokenUtils.moveNextToken(ctx) && ctx.token.string.length > 0 && !/\S/.test(ctx.token.string)) {
725742
newCursor.ch += ctx.token.string.length;
726743
}
727-
} else if(!hint.endsWith(";")){
744+
} else if (!hint.endsWith(";")) {
728745
hint += ": ";
729746
}
730747
}
@@ -747,35 +764,37 @@ define(function (require, exports, module) {
747764
// value has (...), so place cursor inside opening paren
748765
// and keep hints open
749766
adjustCursor = true;
750-
newCursor = { line: cursor.line,
751-
ch: start.ch + parenMatch.index + 1 };
767+
newCursor = {
768+
line: cursor.line,
769+
ch: start.ch + parenMatch.index + 1
770+
};
752771
keepHints = true;
753772
}
754773
}
755774
}
756775

757-
if(isLiveHighlight) {
776+
if (isLiveHighlight) {
758777
// this is via user press up and down arrows when code hints is visible
759-
if(this.info.context !== CSSUtils.PROP_VALUE && !hint.endsWith(";")) {
778+
if (this.info.context !== CSSUtils.PROP_VALUE && !hint.endsWith(";")) {
760779
// we only do live hints for css property values. else UX is jarring.
761780
// property full statements hints like "display: flex;" will be live previewed tho
762781
return keepHints;
763782
}
764-
if(!this.editor.hasSelection()){
783+
if (!this.editor.hasSelection()) {
765784
this.editor.setSelection(start, end);
766785
}
767786
this.editor.replaceSelection(hint, 'around', "liveHints");
768787
return keepHints;
769788
}
770789

771790
// this is commit flow
772-
if(isInLiveHighlightSession) {
791+
if (isInLiveHighlightSession) {
773792
// end previous highlight session.
774793
isInLiveHighlightSession = false;
775794
hintSessionId++;
776795
}
777796

778-
if(this.editor.hasSelection()){
797+
if (this.editor.hasSelection()) {
779798
// this is when user commits
780799
this.editor.replaceSelection(hint, 'end');
781800
return keepHints;
@@ -795,7 +814,7 @@ define(function (require, exports, module) {
795814
// the CSS property is fully specified,
796815
// so we don't need to continue showing hints for its value.
797816
const cursorPos = this.editor.getCursorPos();
798-
if(this.editor.getCharacterAtPosition({line: cursorPos.line, ch: cursorPos.ch - 1}) === ';') {
817+
if (this.editor.getCharacterAtPosition({ line: cursorPos.line, ch: cursorPos.ch - 1 }) === ';') {
799818
keepHints = false;
800819
}
801820

0 commit comments

Comments
 (0)