Sync code hint font size with code view font size #13091

wants to merge 1 commit into


None yet

4 participants

swmitra commented Feb 10, 2017 edited

This PR enhances Brackets user experience by syncing the code hint font-size with code view font size. This was a problem in high dpi monitors ( WQHD and above ), where code hints were not readable with the current font-size. With this PR , when user changes code view font size, code hint font size also gets changed accordingly.

Without this PR, code hints are rendered as -


With the changes in PR -


@swmitra swmitra requested review from abose, petetnt, and ficristo Feb 10, 2017

In case of JS hints the icon doesn't look good.


I would like to see at least the documentation fixed.

@@ -122,10 +128,10 @@ define(function (require, exports, module) {
* @param {string} value Is the value of the style
* @param {boolean} important Is a flag to make the style property !important
ficristo Feb 10, 2017 Member

cssRule and cssText aren't documented.

cssRule = cssRule || ".CodeMirror";
var $style = $("<style type='text/css'></style>").attr("id", propertyID);
- var styleStr = StringUtils.format("{0}: {1}{2}", name, value, important ? " !important" : "");
+ var styleStr = cssText || StringUtils.format("{0}: {1} {2}", name, value, important ? " !important" : "");
ficristo Feb 10, 2017 Member

I believe you can remove the space between this two parameters {1} {2}.

+ /**
+ * @private
+ * Adds a new embeded style top sync code-hint font size with codeview font size
ficristo Feb 10, 2017 Member

fontSize is not documented

+ var styleStr = "";
+ styleStr = styleStr + StringUtils.format("{0}: {1} {2};", "font-size", fontSize, " !important");
+ styleStr = styleStr + StringUtils.format("{0}: {1} {2};", "line-height", (parseInt(fontSize, 10) + 2) + fontSize.replace(parseInt(fontSize, 10), ""), " !important");
+ _addDynamicProperty(DYNAMIC_CODEHINT_FONT_STYLE_ID, "font-size", fontSize, true, ".codehint-menu .dropdown-menu li a", styleStr);
ficristo Feb 10, 2017 Member

You need to pass the values font-size, fontSize and true but they aren't actually used.
Perhaps it's personal style but it doesn't seems good.

petetnt Feb 12, 2017 Member

I think function _addDynamicProperty(propertyID, options) would make more sense (where options would be an object of { name, value, important, cssRule, cssText } etc.)

swmitra commented Feb 13, 2017

Thanks a lot @ficristo for the quick review ๐Ÿ‘ I will update the PR soon.


Question around the approach. Adding the a method specific for code hints seems reasonable, but I am not sure how that will scale if we had to add more methods for different parts of the UI. Is there a way we can leverage CSS for the fonts size/type?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment