From 97d00ef677d4a81564f3ba2291b850a28c92e834 Mon Sep 17 00:00:00 2001 From: Miguel Castillo Date: Thu, 3 Jul 2014 14:09:03 -0400 Subject: [PATCH 01/12] Adding interfaces to change font size, font family, and line height. https://github.com/adobe/brackets/issues/7800 --- src/styles/brackets_codemirror_override.less | 4 + src/view/ViewCommandHandlers.js | 232 +++++++++++++++++-- 2 files changed, 212 insertions(+), 24 deletions(-) diff --git a/src/styles/brackets_codemirror_override.less b/src/styles/brackets_codemirror_override.less index 8b83445b33e..a8c738f86d1 100644 --- a/src/styles/brackets_codemirror_override.less +++ b/src/styles/brackets_codemirror_override.less @@ -130,6 +130,10 @@ pointer-events: none; } + .CodeMirror-searching { + display: inline-block; + } + .CodeMirror-linewidget { /* Re-enable pointer events for line widget. Pointer events are disabled for "CodeMirror-lines", which is the * parent of line widgets, so they need to be explicitly re-enabled here in order for selection to work. */ diff --git a/src/view/ViewCommandHandlers.js b/src/view/ViewCommandHandlers.js index c2fa5eda1eb..22e5218f5b9 100644 --- a/src/view/ViewCommandHandlers.js +++ b/src/view/ViewCommandHandlers.js @@ -38,19 +38,32 @@ define(function (require, exports, module) { CommandManager = require("command/CommandManager"), KeyBindingManager = require("command/KeyBindingManager"), Strings = require("strings"), + StringUtils = require("utils/StringUtils"), ProjectManager = require("project/ProjectManager"), EditorManager = require("editor/EditorManager"), PreferencesManager = require("preferences/PreferencesManager"), DocumentManager = require("document/DocumentManager"), AppInit = require("utils/AppInit"); - - + + var prefs = PreferencesManager.getExtensionPrefs("brackets-fonts"); /** * @const * @type {string} */ var DYNAMIC_FONT_STYLE_ID = "codemirror-dynamic-fonts"; + /** + * @const + * @type {string} + */ + var DYNAMIC_FONT_FAMILY_ID = "codemirror-dynamic-font-family"; + + /** + * @const + * @type {string} + */ + var DYNAMIC_LINE_HEIGHT_ID = "codemirror-dynamic-line-height"; + /** * @const * @private @@ -74,14 +87,54 @@ define(function (require, exports, module) { * @type {number} */ var DEFAULT_FONT_SIZE = 12; - - + + /** + * @const + * @private + * The default line height + * @type {number} + */ + var DEFAULT_LINE_HEIGHT = 1.3; + + /** + * @const + * @private + * The default font family + * @type {string} + */ + var DEFAULT_FONT_FAMILY = "'SourceCodePro-Medium', ＭＳ ゴシック, 'MS Gothic', monospace"; + + + /** + * @private + * Removes style property from the DOM + * @param {string} propertyID is the id of the property to be removed + */ + function _removeDynamicProperty(propertyID) { + $("#" + propertyID).remove(); + } + + /** + * @private + * Add the style property to the DOM + * @param {string} propertyID Is the property ID to be added + * @param {string} name Is the name of the style property + * @param {string} value Is the value of the style + * @param {boolean} important Is a flag to make the style property !important + */ + function _addDynamicProperty(propertyID, name, value, important) { + var $style = $("").attr("id", propertyID); + var styleStr = StringUtils.format("{0}: {1}{2}", name, value, important ? " !important" : ""); + $style.html(".CodeMirror { " + styleStr + " }"); + $("head").append($style); + } + /** * @private * Removes the styles used to update the font size */ function _removeDynamicFontSize() { - $("#" + DYNAMIC_FONT_STYLE_ID).remove(); + _removeDynamicProperty(DYNAMIC_FONT_STYLE_ID); } /** @@ -90,11 +143,43 @@ define(function (require, exports, module) { * @param {string} fontSizeStyle A string with the font size and the size unit */ function _addDynamicFontSize(fontSizeStyle) { - var style = $("").attr("id", DYNAMIC_FONT_STYLE_ID); - style.html(".CodeMirror { font-size: " + fontSizeStyle + " !important; }"); - $("head").append(style); + _addDynamicProperty(DYNAMIC_FONT_STYLE_ID, "font-size", fontSizeStyle, true); } - + + /** + * @private + * Removes the styles used to update the font family + */ + function _removeDynamicFontFamily() { + _removeDynamicProperty(DYNAMIC_FONT_FAMILY_ID); + } + /** + * @private + * Add the styles used to update the font family + * @param {string} fontFamily A string with the font family + */ + function _addDynamicFontFamily(fontFamily) { + _addDynamicProperty(DYNAMIC_FONT_FAMILY_ID, "font-family", fontFamily); + } + + /** + * @private + * Removes the styles used to update the font family + */ + function _removeDynamicLineHeight() { + _removeDynamicProperty(DYNAMIC_LINE_HEIGHT_ID); + } + + /** + * @private + * Add the styles used to update the line height + * @param {string} lineHeight A string with the line height with size unit + */ + function _addDynamicLineHeight(lineHeight) { + _addDynamicProperty(DYNAMIC_LINE_HEIGHT_ID, "line-height", lineHeight, true); + } + + /** * @private * Sets the font size and restores the scroll position as best as possible. @@ -103,8 +188,8 @@ define(function (require, exports, module) { function _setSizeAndRestoreScroll(fontSizeStyle) { var editor = EditorManager.getCurrentFullEditor(), oldWidth = editor._codeMirror.defaultCharWidth(), - oldFontSize = $(".CodeMirror").css("font-size"), - newFontSize = "", + oldFontSize = prefs.get("fontSizeStyle"), + newFontSize = fontSizeStyle, delta = 0, adjustment = 0, scrollPos = editor.getScrollPos(), @@ -117,7 +202,6 @@ define(function (require, exports, module) { editor.refreshAll(); delta = /em$/.test(oldFontSize) ? 10 : 1; - newFontSize = $(".CodeMirror").css("font-size"); adjustment = parseInt((parseFloat(newFontSize) - parseFloat(oldFontSize)) * delta, 10); if (adjustment) { @@ -140,7 +224,7 @@ define(function (require, exports, module) { * @return {boolean} true if adjustment occurred, false if it did not occur */ function _adjustFontSize(adjustment) { - var fsStyle = $(".CodeMirror").css("font-size"), + var fsStyle = prefs.get("fontSizeStyle"), validFont = /^[\d\.]+(px|em)$/; // Make sure that the font size is expressed in terms we can handle (px or em). If not, simply bail. @@ -162,8 +246,8 @@ define(function (require, exports, module) { } _setSizeAndRestoreScroll(fsStr); - PreferencesManager.setViewState("fontSizeStyle", fsStr); - + prefs.set("fontSizeStyle", fsStr); + return true; } @@ -180,7 +264,7 @@ define(function (require, exports, module) { /** Restores the font size to the original size */ function _handleRestoreFontSize() { _setSizeAndRestoreScroll(); - PreferencesManager.setViewState("fontSizeStyle"); + prefs.set("fontSizeStyle", DEFAULT_FONT_SIZE + "px"); } @@ -203,6 +287,10 @@ define(function (require, exports, module) { CommandManager.get(Commands.VIEW_DECREASE_FONT_SIZE).setEnabled(false); CommandManager.get(Commands.VIEW_RESTORE_FONT_SIZE).setEnabled(false); } + + setFontFamily(prefs.get("fontFamily")); + setFontSize(prefs.get("fontSizeStyle")); + setLineHeight(prefs.get("lineHeight")); } /** @@ -210,7 +298,7 @@ define(function (require, exports, module) { * view state to the new fontSizeStyle, when required */ function restoreFontSize() { - var fsStyle = PreferencesManager.getViewState("fontSizeStyle"), + var fsStyle = prefs.get("fontSizeStyle"), fsAdjustment = PreferencesManager.getViewState("fontSizeAdjustment"); if (fsAdjustment) { @@ -220,7 +308,7 @@ define(function (require, exports, module) { if (!fsStyle) { // Migrate the old view state to the new one. fsStyle = (DEFAULT_FONT_SIZE + fsAdjustment) + "px"; - PreferencesManager.setViewState("fontSizeStyle", fsStyle); + prefs.set("fontSizeStyle", fsStyle); } } @@ -232,6 +320,16 @@ define(function (require, exports, module) { + /** + * Restores the font size, font family, and line height back to factory settings. + */ + function restoreFonts() { + setFontFamily(DEFAULT_FONT_FAMILY); + setFontSize(DEFAULT_FONT_SIZE + "px"); + setLineHeight(DEFAULT_LINE_HEIGHT + "em"); + } + + /** * @private * Calculates the first and last visible lines of the focused editor @@ -317,7 +415,80 @@ define(function (require, exports, module) { function _handleScrollLineDown() { _scrollLine(1); } - + + /** + * Font size setter to set the font size for the document editor + * @param {string} fontSize The font size with size unit as 'px' or 'em' + */ + function setFontSize(fontSize) { + var editor = EditorManager.getCurrentFullEditor(); + _setSizeAndRestoreScroll(fontSize); + prefs.set("fontSizeStyle", fontSize); + editor.refreshAll(); + } + + /** + * Font size getter to get the current font size for the document editor + * @return {string} Font size with size unit as 'px' or 'em' + */ + function getFontSize() { + return prefs.get("fontSizeStyle"); + } + + + /** + * Font family setter to set the font family for the document editor + * @param {string} fontFamily The font family to be set. It can be a string with multiple comma separated fonts + */ + function setFontFamily(fontFamily) { + var editor = EditorManager.getCurrentFullEditor(); + + _removeDynamicFontFamily(); + if (fontFamily) { + _addDynamicFontFamily(fontFamily); + $(exports).triggerHandler("fontFamilyChange", [fontFamily, prefs.get("fontFamily")]); + } + + prefs.set("fontFamily", fontFamily); + editor.refreshAll(); + } + + /** + * Font family getter to get the currently configured font family for the document editor + * @return {string} The font family for the document editor + */ + function getFontFamily() { + return prefs.get("fontFamily"); + } + + + /** + * Line height setter to set the line height of the document editor + * @param {string} lineHeight The line height with size unit as 'em' to be set. + */ + function setLineHeight(lineHeight) { + var editor = EditorManager.getCurrentFullEditor(); + + _removeDynamicLineHeight(); + if (lineHeight) { + _addDynamicLineHeight(lineHeight); + $(exports).triggerHandler("lineHeightChange", [lineHeight, prefs.get("lineHeight")]); + } + + prefs.set("lineHeight", lineHeight); + editor.refreshAll(); + } + + /** + * Line height getter to get the line height for the document editor + * @return {string} The line height with size unit as 'em' for the document editor + */ + function getLineHeight() { + return prefs.get("lineHeight"); + } + + + // TODO: remove /** * @private * Convert the old "fontSizeAdjustment" preference to the new view state. @@ -328,10 +499,10 @@ define(function (require, exports, module) { * @return {Object} JSON object for the new view state equivalent to * the old "fontSizeAdjustment" preference. */ - function _convertToNewViewState(key, value) { - return { "fontSizeStyle": (DEFAULT_FONT_SIZE + value) + "px" }; - } - + //function _convertToNewViewState(key, value) { + // return { "fontSizeStyle": (DEFAULT_FONT_SIZE + value) + "px" }; + //} + // Register command handlers CommandManager.register(Strings.CMD_INCREASE_FONT_SIZE, Commands.VIEW_INCREASE_FONT_SIZE, _handleIncreaseFontSize); CommandManager.register(Strings.CMD_DECREASE_FONT_SIZE, Commands.VIEW_DECREASE_FONT_SIZE, _handleDecreaseFontSize); @@ -339,7 +510,13 @@ define(function (require, exports, module) { CommandManager.register(Strings.CMD_SCROLL_LINE_UP, Commands.VIEW_SCROLL_LINE_UP, _handleScrollLineUp); CommandManager.register(Strings.CMD_SCROLL_LINE_DOWN, Commands.VIEW_SCROLL_LINE_DOWN, _handleScrollLineDown); - PreferencesManager.convertPreferences(module, {"fontSizeAdjustment": "user"}, true, _convertToNewViewState); + // TODO: remove + //PreferencesManager.convertPreferences(module, {"fontSizeAdjustment": "user"}, true, _convertToNewViewState); + + + prefs.definePreference("fontSizeStyle", "string", DEFAULT_FONT_SIZE + "px"); + prefs.definePreference("lineHeight", "string", DEFAULT_LINE_HEIGHT + "em"); + prefs.definePreference("fontFamily", "string", DEFAULT_FONT_FAMILY); // Update UI when opening or closing a document $(DocumentManager).on("currentDocumentChange", _updateUI); @@ -348,4 +525,11 @@ define(function (require, exports, module) { AppInit.appReady(_updateUI); exports.restoreFontSize = restoreFontSize; + exports.restoreFonts = restoreFonts; + exports.getFontSize = getFontSize; + exports.setFontSize = setFontSize; + exports.getFontFamily = getFontFamily; + exports.setFontFamily = setFontFamily; + exports.getLineHeight = getLineHeight; + exports.setLineHeight = setLineHeight; }); From 2e72136d6ab88ef538fe85332820a44d4580b8ff Mon Sep 17 00:00:00 2001 From: Miguel Castillo Date: Thu, 3 Jul 2014 15:59:18 -0400 Subject: [PATCH 02/12] Adding more display inline blocks so that line height renders correctly --- src/styles/brackets_codemirror_override.less | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/styles/brackets_codemirror_override.less b/src/styles/brackets_codemirror_override.less index a8c738f86d1..f420d6147b9 100644 --- a/src/styles/brackets_codemirror_override.less +++ b/src/styles/brackets_codemirror_override.less @@ -129,11 +129,17 @@ */ pointer-events: none; } - - .CodeMirror-searching { + + /** + * These classes are set to inline-block because they are spans and they need block dimension properties when + * when calculation height and width. + */ + .CodeMirror-searching, + .CodeMirror-matchingtag, + .CodeMirror-matchingbracket { display: inline-block; } - + .CodeMirror-linewidget { /* Re-enable pointer events for line widget. Pointer events are disabled for "CodeMirror-lines", which is the * parent of line widgets, so they need to be explicitly re-enabled here in order for selection to work. */ From 57e33ad9e6510b79b9ebaf1e98c8432289143dc2 Mon Sep 17 00:00:00 2001 From: Miguel Castillo Date: Thu, 3 Jul 2014 16:25:20 -0400 Subject: [PATCH 03/12] Renamed fontSizeStyle preference to fontSize --- src/view/ViewCommandHandlers.js | 40 ++++++++++++++++----------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/src/view/ViewCommandHandlers.js b/src/view/ViewCommandHandlers.js index 22e5218f5b9..3e67d8a2cb2 100644 --- a/src/view/ViewCommandHandlers.js +++ b/src/view/ViewCommandHandlers.js @@ -83,7 +83,7 @@ define(function (require, exports, module) { /** * @const * @private - * The default font size used only to convert the old fontSizeAdjustment view state to the new fontSizeStyle + * The default font size used only to convert the old fontSizeAdjustment view state to the new fontSize * @type {number} */ var DEFAULT_FONT_SIZE = 12; @@ -140,10 +140,10 @@ define(function (require, exports, module) { /** * @private * Add the styles used to update the font size - * @param {string} fontSizeStyle A string with the font size and the size unit + * @param {string} fontSize A string with the font size and the size unit */ - function _addDynamicFontSize(fontSizeStyle) { - _addDynamicProperty(DYNAMIC_FONT_STYLE_ID, "font-size", fontSizeStyle, true); + function _addDynamicFontSize(fontSize) { + _addDynamicProperty(DYNAMIC_FONT_STYLE_ID, "font-size", fontSize, true); } /** @@ -183,21 +183,21 @@ define(function (require, exports, module) { /** * @private * Sets the font size and restores the scroll position as best as possible. - * @param {string=} fontSizeStyle A string with the font size and the size unit + * @param {string=} fontSize A string with the font size and the size unit */ - function _setSizeAndRestoreScroll(fontSizeStyle) { + function _setSizeAndRestoreScroll(fontSize) { var editor = EditorManager.getCurrentFullEditor(), oldWidth = editor._codeMirror.defaultCharWidth(), - oldFontSize = prefs.get("fontSizeStyle"), - newFontSize = fontSizeStyle, + oldFontSize = prefs.get("fontSize"), + newFontSize = fontSize, delta = 0, adjustment = 0, scrollPos = editor.getScrollPos(), line = editor._codeMirror.lineAtHeight(scrollPos.y, "local"); _removeDynamicFontSize(); - if (fontSizeStyle) { - _addDynamicFontSize(fontSizeStyle); + if (fontSize) { + _addDynamicFontSize(fontSize); } editor.refreshAll(); @@ -224,7 +224,7 @@ define(function (require, exports, module) { * @return {boolean} true if adjustment occurred, false if it did not occur */ function _adjustFontSize(adjustment) { - var fsStyle = prefs.get("fontSizeStyle"), + var fsStyle = prefs.get("fontSize"), validFont = /^[\d\.]+(px|em)$/; // Make sure that the font size is expressed in terms we can handle (px or em). If not, simply bail. @@ -246,7 +246,7 @@ define(function (require, exports, module) { } _setSizeAndRestoreScroll(fsStr); - prefs.set("fontSizeStyle", fsStr); + prefs.set("fontSize", fsStr); return true; } @@ -264,7 +264,7 @@ define(function (require, exports, module) { /** Restores the font size to the original size */ function _handleRestoreFontSize() { _setSizeAndRestoreScroll(); - prefs.set("fontSizeStyle", DEFAULT_FONT_SIZE + "px"); + prefs.set("fontSize", DEFAULT_FONT_SIZE + "px"); } @@ -289,16 +289,16 @@ define(function (require, exports, module) { } setFontFamily(prefs.get("fontFamily")); - setFontSize(prefs.get("fontSizeStyle")); + setFontSize(prefs.get("fontSize")); setLineHeight(prefs.get("lineHeight")); } /** * Restores the font size using the saved style and migrates the old fontSizeAdjustment - * view state to the new fontSizeStyle, when required + * view state to the new fontSize, when required */ function restoreFontSize() { - var fsStyle = prefs.get("fontSizeStyle"), + var fsStyle = prefs.get("fontSize"), fsAdjustment = PreferencesManager.getViewState("fontSizeAdjustment"); if (fsAdjustment) { @@ -308,7 +308,7 @@ define(function (require, exports, module) { if (!fsStyle) { // Migrate the old view state to the new one. fsStyle = (DEFAULT_FONT_SIZE + fsAdjustment) + "px"; - prefs.set("fontSizeStyle", fsStyle); + prefs.set("fontSize", fsStyle); } } @@ -423,7 +423,7 @@ define(function (require, exports, module) { function setFontSize(fontSize) { var editor = EditorManager.getCurrentFullEditor(); _setSizeAndRestoreScroll(fontSize); - prefs.set("fontSizeStyle", fontSize); + prefs.set("fontSize", fontSize); editor.refreshAll(); } @@ -432,7 +432,7 @@ define(function (require, exports, module) { * @return {string} Font size with size unit as 'px' or 'em' */ function getFontSize() { - return prefs.get("fontSizeStyle"); + return prefs.get("fontSize"); } @@ -514,7 +514,7 @@ define(function (require, exports, module) { //PreferencesManager.convertPreferences(module, {"fontSizeAdjustment": "user"}, true, _convertToNewViewState); - prefs.definePreference("fontSizeStyle", "string", DEFAULT_FONT_SIZE + "px"); + prefs.definePreference("fontSize", "string", DEFAULT_FONT_SIZE + "px"); prefs.definePreference("lineHeight", "string", DEFAULT_LINE_HEIGHT + "em"); prefs.definePreference("fontFamily", "string", DEFAULT_FONT_FAMILY); From 4e463ec3143afb671355a1562fb1024c945b73f9 Mon Sep 17 00:00:00 2001 From: Miguel Castillo Date: Thu, 3 Jul 2014 16:49:20 -0400 Subject: [PATCH 04/12] Changed line height values to be floats instead of strings with units. The float value is treated as ems internally still --- src/view/ViewCommandHandlers.js | 25 ++++++++++++++++++++----- 1 file changed, 20 insertions(+), 5 deletions(-) diff --git a/src/view/ViewCommandHandlers.js b/src/view/ViewCommandHandlers.js index 3e67d8a2cb2..3b9f0b22084 100644 --- a/src/view/ViewCommandHandlers.js +++ b/src/view/ViewCommandHandlers.js @@ -94,7 +94,7 @@ define(function (require, exports, module) { * The default line height * @type {number} */ - var DEFAULT_LINE_HEIGHT = 1.3; + var DEFAULT_LINE_HEIGHT = 1.4; /** * @const @@ -176,7 +176,7 @@ define(function (require, exports, module) { * @param {string} lineHeight A string with the line height with size unit */ function _addDynamicLineHeight(lineHeight) { - _addDynamicProperty(DYNAMIC_LINE_HEIGHT_ID, "line-height", lineHeight, true); + _addDynamicProperty(DYNAMIC_LINE_HEIGHT_ID, "line-height", lineHeight + "em", true); } @@ -326,7 +326,7 @@ define(function (require, exports, module) { function restoreFonts() { setFontFamily(DEFAULT_FONT_FAMILY); setFontSize(DEFAULT_FONT_SIZE + "px"); - setLineHeight(DEFAULT_LINE_HEIGHT + "em"); + setLineHeight(DEFAULT_LINE_HEIGHT); } @@ -464,11 +464,14 @@ define(function (require, exports, module) { /** * Line height setter to set the line height of the document editor - * @param {string} lineHeight The line height with size unit as 'em' to be set. + * @param {string} lineHeight The line height. The value is in 'em'. */ function setLineHeight(lineHeight) { var editor = EditorManager.getCurrentFullEditor(); + // Make sure the incoming value is a number... Strip off any size units + lineHeight = parseFloat(lineHeight); + _removeDynamicLineHeight(); if (lineHeight) { _addDynamicLineHeight(lineHeight); @@ -515,9 +518,21 @@ define(function (require, exports, module) { prefs.definePreference("fontSize", "string", DEFAULT_FONT_SIZE + "px"); - prefs.definePreference("lineHeight", "string", DEFAULT_LINE_HEIGHT + "em"); + prefs.definePreference("lineHeight", "number", DEFAULT_LINE_HEIGHT); prefs.definePreference("fontFamily", "string", DEFAULT_FONT_FAMILY); + prefs.on("change", "fontSize", function() { + setFontSize(prefs.get("fontSize")); + }); + + prefs.on("change", "fontFamily", function() { + setFontFamily(prefs.get("fontFamily")); + }); + + prefs.on("change", "lineHeight", function() { + setLineHeight(prefs.get("lineHeight")); + }); + // Update UI when opening or closing a document $(DocumentManager).on("currentDocumentChange", _updateUI); From 1b358c99b72d1724a15dd1c3186f954fb15c17da Mon Sep 17 00:00:00 2001 From: Miguel Castillo Date: Thu, 3 Jul 2014 22:30:50 -0400 Subject: [PATCH 05/12] Refactored fonts manager to handle different permutations of opening/closing documents and changing font settings --- src/view/ViewCommandHandlers.js | 94 +++++++++++++++++++++------------ 1 file changed, 59 insertions(+), 35 deletions(-) diff --git a/src/view/ViewCommandHandlers.js b/src/view/ViewCommandHandlers.js index 3b9f0b22084..75f76be2eaa 100644 --- a/src/view/ViewCommandHandlers.js +++ b/src/view/ViewCommandHandlers.js @@ -185,7 +185,7 @@ define(function (require, exports, module) { * Sets the font size and restores the scroll position as best as possible. * @param {string=} fontSize A string with the font size and the size unit */ - function _setSizeAndRestoreScroll(fontSize) { + function _updateScroll(fontSize) { var editor = EditorManager.getCurrentFullEditor(), oldWidth = editor._codeMirror.defaultCharWidth(), oldFontSize = prefs.get("fontSize"), @@ -195,26 +195,23 @@ define(function (require, exports, module) { scrollPos = editor.getScrollPos(), line = editor._codeMirror.lineAtHeight(scrollPos.y, "local"); - _removeDynamicFontSize(); - if (fontSize) { - _addDynamicFontSize(fontSize); - } - editor.refreshAll(); - delta = /em$/.test(oldFontSize) ? 10 : 1; adjustment = parseInt((parseFloat(newFontSize) - parseFloat(oldFontSize)) * delta, 10); - + + // Only adjust the scroll position if there was any adjustments to the font size. + // Otherwise there will be unintended scrolling. + // if (adjustment) { - $(exports).triggerHandler("fontSizeChange", [adjustment, newFontSize]); + editor.refreshAll(); + + // Calculate the new scroll based on the old font sizes and scroll position + var newWidth = editor._codeMirror.defaultCharWidth(), + deltaX = scrollPos.x / oldWidth, + scrollPosX = scrollPos.x + Math.round(deltaX * (newWidth - oldWidth)), + scrollPosY = editor._codeMirror.heightAtLine(line, "local"); + + editor.setScrollPos(scrollPosX, scrollPosY); } - - // Calculate the new scroll based on the old font sizes and scroll position - var newWidth = editor._codeMirror.defaultCharWidth(), - deltaX = scrollPos.x / oldWidth, - scrollPosX = scrollPos.x + Math.round(deltaX * (newWidth - oldWidth)), - scrollPosY = editor._codeMirror.heightAtLine(line, "local"); - - editor.setScrollPos(scrollPosX, scrollPosY); } /** @@ -244,10 +241,8 @@ define(function (require, exports, module) { if (fsNew < MIN_FONT_SIZE * delta || fsNew > MAX_FONT_SIZE * delta) { return false; } - - _setSizeAndRestoreScroll(fsStr); - prefs.set("fontSize", fsStr); + setFontSize(fsStr); return true; } @@ -263,8 +258,7 @@ define(function (require, exports, module) { /** Restores the font size to the original size */ function _handleRestoreFontSize() { - _setSizeAndRestoreScroll(); - prefs.set("fontSize", DEFAULT_FONT_SIZE + "px"); + setFontSize(DEFAULT_FONT_SIZE); } @@ -281,16 +275,17 @@ define(function (require, exports, module) { CommandManager.get(Commands.VIEW_DECREASE_FONT_SIZE).setEnabled(true); CommandManager.get(Commands.VIEW_RESTORE_FONT_SIZE).setEnabled(true); } + + setFontFamily(prefs.get("fontFamily")); + setFontSize(prefs.get("fontSize")); + setLineHeight(prefs.get("lineHeight")); + } else { // No current document so disable all of the Font Size commands CommandManager.get(Commands.VIEW_INCREASE_FONT_SIZE).setEnabled(false); CommandManager.get(Commands.VIEW_DECREASE_FONT_SIZE).setEnabled(false); CommandManager.get(Commands.VIEW_RESTORE_FONT_SIZE).setEnabled(false); } - - setFontFamily(prefs.get("fontFamily")); - setFontSize(prefs.get("fontSize")); - setLineHeight(prefs.get("lineHeight")); } /** @@ -421,10 +416,23 @@ define(function (require, exports, module) { * @param {string} fontSize The font size with size unit as 'px' or 'em' */ function setFontSize(fontSize) { - var editor = EditorManager.getCurrentFullEditor(); - _setSizeAndRestoreScroll(fontSize); + var oldValue = prefs.get("fontSize"); + + if (oldValue === fontSize) { + return; + } + + _removeDynamicFontSize(); + if (fontSize) { + _addDynamicFontSize(fontSize); + } + + if (EditorManager.getCurrentFullEditor()) { + _updateScroll(fontSize); + } + + $(exports).triggerHandler("fontSizeChange", [fontSize, oldValue]); prefs.set("fontSize", fontSize); - editor.refreshAll(); } /** @@ -441,16 +449,24 @@ define(function (require, exports, module) { * @param {string} fontFamily The font family to be set. It can be a string with multiple comma separated fonts */ function setFontFamily(fontFamily) { - var editor = EditorManager.getCurrentFullEditor(); + var editor = EditorManager.getCurrentFullEditor(), + oldValue = prefs.get("fontFamily"); + + if (oldValue === fontFamily) { + return; + } _removeDynamicFontFamily(); if (fontFamily) { _addDynamicFontFamily(fontFamily); - $(exports).triggerHandler("fontFamilyChange", [fontFamily, prefs.get("fontFamily")]); } + $(exports).triggerHandler("fontFamilyChange", [fontFamily, oldValue]); prefs.set("fontFamily", fontFamily); - editor.refreshAll(); + + if (editor) { + editor.refreshAll(); + } } /** @@ -467,19 +483,27 @@ define(function (require, exports, module) { * @param {string} lineHeight The line height. The value is in 'em'. */ function setLineHeight(lineHeight) { - var editor = EditorManager.getCurrentFullEditor(); + var editor = EditorManager.getCurrentFullEditor(), + oldValue = prefs.get("lineHeight"); // Make sure the incoming value is a number... Strip off any size units lineHeight = parseFloat(lineHeight); + if (oldValue === lineHeight) { + return; + } + _removeDynamicLineHeight(); if (lineHeight) { _addDynamicLineHeight(lineHeight); - $(exports).triggerHandler("lineHeightChange", [lineHeight, prefs.get("lineHeight")]); } + $(exports).triggerHandler("lineHeightChange", [lineHeight, oldValue]); prefs.set("lineHeight", lineHeight); - editor.refreshAll(); + + if (editor) { + editor.refreshAll(); + } } /** From a84f934e47ab294f0f9eb4cad3a99973d94da4a8 Mon Sep 17 00:00:00 2001 From: Miguel Castillo Date: Thu, 3 Jul 2014 22:37:07 -0400 Subject: [PATCH 06/12] added/removed a few empty lines to give the code a little breathing room --- src/view/ViewCommandHandlers.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/view/ViewCommandHandlers.js b/src/view/ViewCommandHandlers.js index 75f76be2eaa..7ba8e16b244 100644 --- a/src/view/ViewCommandHandlers.js +++ b/src/view/ViewCommandHandlers.js @@ -46,6 +46,7 @@ define(function (require, exports, module) { AppInit = require("utils/AppInit"); var prefs = PreferencesManager.getExtensionPrefs("brackets-fonts"); + /** * @const * @type {string} @@ -153,6 +154,7 @@ define(function (require, exports, module) { function _removeDynamicFontFamily() { _removeDynamicProperty(DYNAMIC_FONT_FAMILY_ID); } + /** * @private * Add the styles used to update the font family @@ -179,7 +181,6 @@ define(function (require, exports, module) { _addDynamicProperty(DYNAMIC_LINE_HEIGHT_ID, "line-height", lineHeight + "em", true); } - /** * @private * Sets the font size and restores the scroll position as best as possible. @@ -312,9 +313,7 @@ define(function (require, exports, module) { _addDynamicFontSize(fsStyle); } } - - - + /** * Restores the font size, font family, and line height back to factory settings. */ From 395dd1e471087646960d6e2da4d8c466362aa579 Mon Sep 17 00:00:00 2001 From: Miguel Castillo Date: Fri, 4 Jul 2014 09:44:33 -0400 Subject: [PATCH 07/12] Removed preference change listeners. We should be using the API --- src/view/ViewCommandHandlers.js | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/src/view/ViewCommandHandlers.js b/src/view/ViewCommandHandlers.js index 7ba8e16b244..93c06236c4e 100644 --- a/src/view/ViewCommandHandlers.js +++ b/src/view/ViewCommandHandlers.js @@ -544,18 +544,6 @@ define(function (require, exports, module) { prefs.definePreference("lineHeight", "number", DEFAULT_LINE_HEIGHT); prefs.definePreference("fontFamily", "string", DEFAULT_FONT_FAMILY); - prefs.on("change", "fontSize", function() { - setFontSize(prefs.get("fontSize")); - }); - - prefs.on("change", "fontFamily", function() { - setFontFamily(prefs.get("fontFamily")); - }); - - prefs.on("change", "lineHeight", function() { - setLineHeight(prefs.get("lineHeight")); - }); - // Update UI when opening or closing a document $(DocumentManager).on("currentDocumentChange", _updateUI); From 0650b83807f9713e0aa42e35de3ae1e39edfe0ad Mon Sep 17 00:00:00 2001 From: Miguel Castillo Date: Mon, 7 Jul 2014 21:55:59 -0400 Subject: [PATCH 08/12] Adding init function to ensure values are loaded when appReady is called --- src/view/ViewCommandHandlers.js | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/src/view/ViewCommandHandlers.js b/src/view/ViewCommandHandlers.js index 93c06236c4e..9e6b662f580 100644 --- a/src/view/ViewCommandHandlers.js +++ b/src/view/ViewCommandHandlers.js @@ -124,9 +124,12 @@ define(function (require, exports, module) { * @param {boolean} important Is a flag to make the style property !important */ function _addDynamicProperty(propertyID, name, value, important) { - var $style = $("").attr("id", propertyID); + var $style = $("").attr("id", propertyID); var styleStr = StringUtils.format("{0}: {1}{2}", name, value, important ? " !important" : ""); $style.html(".CodeMirror { " + styleStr + " }"); + + // Let's make sure we remove the already existing item from the DOM. + _removeDynamicProperty(propertyID); $("head").append($style); } @@ -262,6 +265,15 @@ define(function (require, exports, module) { setFontSize(DEFAULT_FONT_SIZE); } + /** + * Initializes the different settings that need to loaded + */ + function init() { + _addDynamicFontFamily(prefs.get("fontFamily")); + _addDynamicFontSize(prefs.get("fontSize")); + _addDynamicLineHeight(prefs.get("lineHeight")); + _updateUI(); + } /** * @private @@ -548,7 +560,7 @@ define(function (require, exports, module) { $(DocumentManager).on("currentDocumentChange", _updateUI); // Update UI when Brackets finishes loading - AppInit.appReady(_updateUI); + AppInit.appReady(init); exports.restoreFontSize = restoreFontSize; exports.restoreFonts = restoreFonts; From 09650b2d0e0ef4100effd15335fc1b995bfc4e41 Mon Sep 17 00:00:00 2001 From: Miguel Castillo Date: Mon, 7 Jul 2014 21:59:41 -0400 Subject: [PATCH 09/12] Added a more specific css rule for line height settings to avoid conflicts where line height should not be applied. --- src/view/ViewCommandHandlers.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/view/ViewCommandHandlers.js b/src/view/ViewCommandHandlers.js index 9e6b662f580..25854646500 100644 --- a/src/view/ViewCommandHandlers.js +++ b/src/view/ViewCommandHandlers.js @@ -123,10 +123,11 @@ 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 */ - function _addDynamicProperty(propertyID, name, value, important) { + function _addDynamicProperty(propertyID, name, value, important, cssRule) { + cssRule = cssRule || ".CodeMirror"; var $style = $("").attr("id", propertyID); var styleStr = StringUtils.format("{0}: {1}{2}", name, value, important ? " !important" : ""); - $style.html(".CodeMirror { " + styleStr + " }"); + $style.html(cssRule + "{ " + styleStr + " }"); // Let's make sure we remove the already existing item from the DOM. _removeDynamicProperty(propertyID); @@ -181,7 +182,7 @@ define(function (require, exports, module) { * @param {string} lineHeight A string with the line height with size unit */ function _addDynamicLineHeight(lineHeight) { - _addDynamicProperty(DYNAMIC_LINE_HEIGHT_ID, "line-height", lineHeight + "em", true); + _addDynamicProperty(DYNAMIC_LINE_HEIGHT_ID, "line-height", lineHeight + "em", true, ".CodeMirror-lines > div"); } /** From 24177a049dd787c6c169efb87196bc25ff9eeb4d Mon Sep 17 00:00:00 2001 From: Miguel Castillo Date: Mon, 7 Jul 2014 22:01:24 -0400 Subject: [PATCH 10/12] Removed stale variables and jslint definitions --- src/view/ViewCommandHandlers.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/view/ViewCommandHandlers.js b/src/view/ViewCommandHandlers.js index 25854646500..39abd452be7 100644 --- a/src/view/ViewCommandHandlers.js +++ b/src/view/ViewCommandHandlers.js @@ -22,7 +22,7 @@ */ /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */ -/*global define, window, $ */ +/*global define, $ */ /** * The ViewCommandHandlers object dispatches the following event(s): @@ -36,10 +36,8 @@ define(function (require, exports, module) { var Commands = require("command/Commands"), CommandManager = require("command/CommandManager"), - KeyBindingManager = require("command/KeyBindingManager"), Strings = require("strings"), StringUtils = require("utils/StringUtils"), - ProjectManager = require("project/ProjectManager"), EditorManager = require("editor/EditorManager"), PreferencesManager = require("preferences/PreferencesManager"), DocumentManager = require("document/DocumentManager"), From bad33953fba62a7286d8d2b866142ec910c18d8a Mon Sep 17 00:00:00 2001 From: Miguel Castillo Date: Tue, 8 Jul 2014 09:22:30 -0400 Subject: [PATCH 11/12] Removed stale code in favor of initializing the font when the app is ready --- src/view/ViewCommandHandlers.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/view/ViewCommandHandlers.js b/src/view/ViewCommandHandlers.js index 39abd452be7..de155e131d8 100644 --- a/src/view/ViewCommandHandlers.js +++ b/src/view/ViewCommandHandlers.js @@ -287,11 +287,6 @@ define(function (require, exports, module) { CommandManager.get(Commands.VIEW_DECREASE_FONT_SIZE).setEnabled(true); CommandManager.get(Commands.VIEW_RESTORE_FONT_SIZE).setEnabled(true); } - - setFontFamily(prefs.get("fontFamily")); - setFontSize(prefs.get("fontSize")); - setLineHeight(prefs.get("lineHeight")); - } else { // No current document so disable all of the Font Size commands CommandManager.get(Commands.VIEW_INCREASE_FONT_SIZE).setEnabled(false); From c464845894ccbfb632bcddcbb1fb36791f29f020 Mon Sep 17 00:00:00 2001 From: Miguel Castillo Date: Tue, 8 Jul 2014 10:10:13 -0400 Subject: [PATCH 12/12] Removing em unit from line height DOM element --- src/view/ViewCommandHandlers.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/view/ViewCommandHandlers.js b/src/view/ViewCommandHandlers.js index de155e131d8..689176c16da 100644 --- a/src/view/ViewCommandHandlers.js +++ b/src/view/ViewCommandHandlers.js @@ -180,7 +180,7 @@ define(function (require, exports, module) { * @param {string} lineHeight A string with the line height with size unit */ function _addDynamicLineHeight(lineHeight) { - _addDynamicProperty(DYNAMIC_LINE_HEIGHT_ID, "line-height", lineHeight + "em", true, ".CodeMirror-lines > div"); + _addDynamicProperty(DYNAMIC_LINE_HEIGHT_ID, "line-height", lineHeight, true, ".CodeMirror-lines > div"); } /**