feat: zoom in and zoom out working in desktop builds

src/command/DefaultMenus.js

@@ -160,13 +160,8 @@ define(function (require, exports, module) {
         let subMenu = menu.addSubMenu(Strings.CMD_ZOOM_UI, Commands.VIEW_ZOOM_SUBMENU);
         subMenu.addMenuItem(Commands.VIEW_ZOOM_IN);
         subMenu.addMenuItem(Commands.VIEW_ZOOM_OUT);
-        if(!Phoenix.browser.isTauri) {
-            // tauri doesnt support zoomin/out and the document.body.style.zoom = 1.5 trick didnt work
-            // as code mirror doesnt support css transform styles. so we just show increase and decrease
-            // font size as zoom. so we wont register redundant VIEW_INCREASE_FONT_SIZE commands in tauri
-            subMenu.addMenuItem(Commands.VIEW_INCREASE_FONT_SIZE);
-            subMenu.addMenuItem(Commands.VIEW_DECREASE_FONT_SIZE);
-        }
+        subMenu.addMenuItem(Commands.VIEW_INCREASE_FONT_SIZE);
+        subMenu.addMenuItem(Commands.VIEW_DECREASE_FONT_SIZE);
         subMenu.addMenuItem(Commands.VIEW_RESTORE_FONT_SIZE);
         menu.addMenuDivider();
         menu.addMenuItem(Commands.TOGGLE_ACTIVE_LINE);

src/nls/root/strings.js

@@ -441,6 +441,7 @@ define({
     "CMD_TOGGLE_FULLSCREEN": "Fullscreen",
     "CMD_ZOOM_UI": "Zoom UI and Fonts",
     "CMD_ZOOM_IN": "Zoom In",
+    "CMD_ZOOM_IN_SCALE": "Zoom In (Current: {0}%)",
     "CMD_ZOOM_OUT": "Zoom Out",
     "CMD_INCREASE_FONT_SIZE": "Increase Font Size",
     "CMD_DECREASE_FONT_SIZE": "Decrease Font Size",
@@ -881,6 +882,7 @@ define({
     "DESCRIPTION_USE_THEME_SCROLLBARS": "true to allow custom scroll bars",
     "DESCRIPTION_LINTING_COLLAPSED": "true to collapse linting panel",
     "DESCRIPTION_FONT_FAMILY": "Change font family",
+    "DESCRIPTION_DESKTOP_ZOOM_SCALE": "Choose a zoom scale factor ranging from 0.1 (for a more compact view) to 2 (for a larger, more magnified view). Available in desktop apps only",
     "DESCRIPTION_FONT_SIZE": "Change font size; e.g. 13px",
     "DESCRIPTION_FIND_IN_FILES_NODE": "true to enable node based search",
     "DESCRIPTION_FIND_IN_FILES_INSTANT": "true to enable instant search",

src/phoenix/shell.js

@@ -197,6 +197,15 @@ Phoenix.app = {
         nativeWindow.isTauriWindow = false;
         return nativeWindow;
     },
+    zoomWebView: async function (scaleFactor = 1) {
+        if(!Phoenix.browser.isTauri){
+            throw new Error("zoomWebView is not supported in browsers");
+        }
+        if(scaleFactor < .1 || scaleFactor > 2) {
+            throw new Error("zoomWebView scale factor should be between .1 and 2");
+        }
+        return window.__TAURI__.tauri.invoke("zoom_window", {scaleFactor: scaleFactor});
+    },
     getApplicationSupportDirectory: Phoenix.VFS.getAppSupportDir,
     getExtensionsDirectory: Phoenix.VFS.getExtensionDir,
     getUserDocumentsDirectory: Phoenix.VFS.getUserDocumentsDirectory,

src/view/ViewCommandHandlers.js

@@ -116,6 +116,10 @@ define(function (require, exports, module) {
      */
     var DEFAULT_FONT_FAMILY = "'SourceCodePro-Medium', ＭＳ ゴシック, 'MS Gothic', monospace";
 
+
+    const PREF_DESKTOP_ZOOM_SCALE = "desktopZoomScale";
+    const DEFAULT_ZOOM_SCALE = 1, MIN_ZOOM_SCALE = .5, MAX_ZOOM_SCALE = 2;
+
     /**
      * @private
      * Removes style property from the DOM
@@ -341,7 +345,7 @@ define(function (require, exports, module) {
         _adjustFontSize(1);
     }
 
-    function _handleZoom(event) {
+    function _handleBrowserZoom(event) {
         // if we do set document.body.style=zoom = something, then the new project window or generally any iframes based
         // ui with in phcode will not be affected by zoom resulting in widely inconsistent ux on zoom.
         // Further, in Firefox, we cannot programmatically zoom, but user can zoom with Ctrl-+ or - shortcut. So
@@ -359,6 +363,26 @@ define(function (require, exports, module) {
         }
     }
 
+    function _handleZoomIn(event) {
+        if(!Phoenix.browser.isTauri) {
+            return _handleBrowserZoom(event);
+        }
+        const currentZoom = prefs.get(PREF_DESKTOP_ZOOM_SCALE);
+        if(currentZoom < MAX_ZOOM_SCALE){
+            prefs.set(PREF_DESKTOP_ZOOM_SCALE, currentZoom + 0.1);
+        }
+    }
+
+    function _handleZoomOut(event) {
+        if(!Phoenix.browser.isTauri) {
+            return _handleBrowserZoom(event);
+        }
+        const currentZoom = prefs.get(PREF_DESKTOP_ZOOM_SCALE);
+        if(currentZoom > MIN_ZOOM_SCALE){
+            prefs.set(PREF_DESKTOP_ZOOM_SCALE, currentZoom - 0.1);
+        }
+    }
+
     /** Decreases the font size by 1 */
     function _handleDecreaseFontSize() {
         _adjustFontSize(-1);
@@ -529,16 +553,8 @@ define(function (require, exports, module) {
     // 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);
-    if(Phoenix.browser.isTauri){
-        // tauri doesnt support zoomin/out and the document.body.style.zoom = 1.5 trick didnt work
-        // as code mirror doesnt support css transform styles. so we just show increase and decrease
-        // font size as zoom.
-        CommandManager.register(Strings.CMD_ZOOM_IN, Commands.VIEW_ZOOM_IN,  _handleIncreaseFontSize, {eventSource: true});
-        CommandManager.register(Strings.CMD_ZOOM_OUT, Commands.VIEW_ZOOM_OUT,  _handleDecreaseFontSize, {eventSource: true});
-    } else {
-        CommandManager.register(Strings.CMD_ZOOM_IN, Commands.VIEW_ZOOM_IN,  _handleZoom, {eventSource: true});
-        CommandManager.register(Strings.CMD_ZOOM_OUT, Commands.VIEW_ZOOM_OUT,  _handleZoom, {eventSource: true});
-    }
+    CommandManager.register(Strings.CMD_ZOOM_IN, Commands.VIEW_ZOOM_IN,  _handleZoomIn, {eventSource: true});
+    CommandManager.register(Strings.CMD_ZOOM_OUT, Commands.VIEW_ZOOM_OUT,  _handleZoomOut, {eventSource: true});
     CommandManager.register(Strings.CMD_RESTORE_FONT_SIZE,  Commands.VIEW_RESTORE_FONT_SIZE,   _handleRestoreFontSize);
     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);
@@ -555,6 +571,23 @@ define(function (require, exports, module) {
         setFontFamily(prefs.get("fontFamily"));
     });
 
+    prefs.definePreference(PREF_DESKTOP_ZOOM_SCALE, "number", DEFAULT_ZOOM_SCALE, {
+        description: Strings.DESCRIPTION_DESKTOP_ZOOM_SCALE
+    }).on("change", function () {
+        if(Phoenix.browser.isTauri) {
+            const zoomFactor = prefs.get(PREF_DESKTOP_ZOOM_SCALE);
+            if(zoomFactor < MIN_ZOOM_SCALE || zoomFactor > MAX_ZOOM_SCALE) {
+                console.error(
+                    `Zoom scale should be between ${MIN_ZOOM_SCALE} and ${MAX_ZOOM_SCALE} but got ${zoomFactor}!`);
+                return;
+            }
+            brackets.app.zoomWebView(zoomFactor);
+            const zoomIn = CommandManager.get(Commands.VIEW_ZOOM_IN);
+            const zoomString = StringUtils.format(Strings.CMD_ZOOM_IN_SCALE, Math.round(zoomFactor*100));
+            zoomIn.setName(zoomString);
+        }
+    });
+
     // Update UI when opening or closing a document
     MainViewManager.on("currentFileChange", _updateUI);