diff --git a/src/command/DefaultMenus.js b/src/command/DefaultMenus.js index ab91189191..f7fd4831eb 100644 --- a/src/command/DefaultMenus.js +++ b/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); diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js index 256534e13e..32a2149fc5 100644 --- a/src/nls/root/strings.js +++ b/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", diff --git a/src/phoenix/shell.js b/src/phoenix/shell.js index 9836e7574b..a6dde2beaf 100644 --- a/src/phoenix/shell.js +++ b/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, diff --git a/src/view/ViewCommandHandlers.js b/src/view/ViewCommandHandlers.js index acacdd5867..e45be76418 100644 --- a/src/view/ViewCommandHandlers.js +++ b/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);