Merge pull request #11235 from adobe/prashant/mac-anti-alias-fix

[MAC] Enabling back sub pixel antialiasing for code view
adobe · Jul 10, 2015 · c008571 · c008571
2 parents 6a20586 + faad138
commit c008571
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 18 deletions.
diff --git a/src/brackets.js b/src/brackets.js
@@ -359,8 +359,8 @@ define(function (require, exports, module) {
         }
 
         // Localize MainViewHTML and inject into <BODY> tag
-        $("body").html(Mustache.render(MainViewHTML, Strings));
-        
+        $("body").html(Mustache.render(MainViewHTML, { shouldAddAA: (brackets.platform === "mac"), Strings: Strings }));
+
         // Update title
         $("title").text(brackets.config.app_title);
 

diff --git a/src/htmlContent/main-view.html b/src/htmlContent/main-view.html
@@ -76,7 +76,7 @@
                 </div>
             </div>
 
-            <div id="editor-holder">
+            <div id="editor-holder" {{#shouldAddAA}}class="subpixel-aa"{{/shouldAddAA}}>
                 <!-- View Panes are programatically created here -->
             </div>
 
@@ -89,8 +89,8 @@
             <!-- Top-aligned buttons -->
             <div class="buttons">
                 <a id="toolbar-go-live" href="#"></a> <!-- tooltip for this is set in JS -->
-                <a id="toolbar-extension-manager" title="{{EXTENSION_MANAGER_TITLE}}" href="#"></a>
-                <a id="update-notification" title="{{UPDATE_NOTIFICATION_TOOLTIP}}" href="#" style="display: none"></a>
+                <a id="toolbar-extension-manager" title="{{Strings.EXTENSION_MANAGER_TITLE}}" href="#"></a>
+                <a id="update-notification" title="{{Strings.UPDATE_NOTIFICATION_TOOLTIP}}" href="#" style="display: none"></a>
             </div>
             <div class="bottom-buttons"></div>
         </div>

diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js
@@ -754,6 +754,7 @@ define({
     "DESCRIPTION_LINTING_COLLAPSED"                  : "True to collapse linting panel",
     "DESCRIPTION_FONT_FAMILY"                        : "Change font family",
     "DESCRIPTION_FONT_SIZE"                          : "Change font size; e.g, 13px",
+    "DESCRIPTION_FONT_SMOOTHING"                     : "Mac-only: \"subpixel-antialiased\" to enable sub-pixel antialiasing or \"antialiased\" for gray scale antialiasing",
     "DESCRIPTION_OPEN_PREFS_IN_SPLIT_VIEW"           : "False to disable opening preferences file in split view",
     "DESCRIPTION_OPEN_USER_PREFS_IN_SECOND_PANE"     : "False to open user preferences file in left/top pane",
     "DEFAULT_PREFERENCES_JSON_HEADER_COMMENT"        : "/*\n * This is a read-only file with the preferences supported \n * by Brackets. \n * Use this file as a reference to modify your preferences \n * file \"brackets.json\" opened in the other pane. \n * For more information on how to use preferences inside \n * Brackets, refer to the web page at https://github.com/adobe/brackets/wiki/How-to-Use-Brackets#preferences\n */",

diff --git a/src/styles/brackets.less b/src/styles/brackets.less
@@ -53,18 +53,15 @@ html, body {
 
     /* And make sure we get a pointer cursor even over text */
     cursor: default;
-
-    /* Turn off subpixel antialiasing on Mac since it flickers during animations. */
-    -webkit-font-smoothing: antialiased;
-
-    // This is a hack to avoid flicker when animations (like inline editors) that use the GPU complete.
-    // It seems that we have to put it here rather than on the animated element in order to prevent the
-    // entire window from flashing.
-    // See: http://stackoverflow.com/questions/3461441/prevent-flicker-on-webkit-transition-of-webkit-transform
-    // Mac-only though, since this would turn off subpixel antialiasing (ClearType) on Windows
+
     &.platform-mac {
-        -webkit-backface-visibility: hidden;
-        backface-visibility: hidden;
+        // Use gray scale antialiasing for UI. Code view editor-holder
+        // overrides this to use subpixel antialiasing on Mac, which then
+        // can be overridden by setting "fontSmoothing" preference to
+        // "antialiased". Gray scale AA is used for UI parts which use
+        // SourceSansPro font, which does't look good with subpixel AA,
+        // especially on low resolution monitors.
+        -webkit-font-smoothing: antialiased;
     }
 
     .dark,
@@ -73,7 +70,9 @@ html, body {
     }
 }
 
-
+.subpixel-aa{
+    -webkit-font-smoothing: subpixel-antialiased;
+}
 
 .resizing-container {
     position: absolute;

diff --git 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, $ */
+/*global define, brackets: false, $ */
 
 /**
  * The ViewCommandHandlers object dispatches the following event(s):
@@ -266,6 +266,23 @@ define(function (require, exports, module) {
         }
     }
 
+
+    /**
+     * Font smoothing setter to set the anti-aliasing type for the code area on Mac.
+     * @param {string} aaType The antialiasing type to be set. It can take either "subpixel-antialiased" or "antialiased"
+     */
+    function setMacFontSmoothingType(aaType) {
+        var $editor_holder  = $("#editor-holder");
+
+        // Add/Remove the class based on the preference. Also
+        // default to subpixel AA in case of invalid entries.
+        if (aaType === "antialiased") {
+            $editor_holder.removeClass("subpixel-aa");
+        } else {
+            $editor_holder.addClass("subpixel-aa");
+        }
+    }
+
     /**
      * Font family getter to get the currently configured font family for the document editor
      * @return {string} The font family for the document editor
@@ -515,6 +532,20 @@ define(function (require, exports, module) {
         setFontFamily(prefs.get("fontFamily"));
     });
 
+    // Define a preference for font smoothing mode on Mac.
+    // By default fontSmoothing is set to "subpixel-antialiased"
+    // for the text inside code editor. It can be overridden
+    // to "antialiased", that would set text rendering AA to use
+    // gray scale antialiasing.
+    if (brackets.platform === "mac") {
+        prefs.definePreference("fontSmoothing", "string", "subpixel-antialiased", {
+            description: Strings.DESCRIPTION_FONT_SMOOTHING,
+            values: ["subpixel-antialiased", "antialiased"]
+        }).on("change", function () {
+            setMacFontSmoothingType(prefs.get("fontSmoothing"));
+        });
+    }
+
     // Update UI when opening or closing a document
     MainViewManager.on("currentFileChange", _updateUI);