Added zoom scaling options with keyboard shortcuts in runtime. Fixes #6271

web/pgadmin/browser/__init__.py

@@ -10,6 +10,7 @@
 import json
 import logging
 import os
+import sys
 from abc import ABCMeta, abstractmethod, abstractproperty
 from smtplib import SMTPConnectError, SMTPResponseException, \
     SMTPServerDisconnected, SMTPDataError, SMTPHeloError, SMTPException, \
@@ -55,7 +56,6 @@ try:
     from flask_security.views import default_render_json
 except ImportError as e:
     # Support Flask-Security-Too == 3.2
-    import sys
     if sys.version_info < (3, 8):
         from flask_security.views import _render_json as default_render_json
 
@@ -272,6 +272,17 @@ class BrowserModule(PgAdminModule):
 
         # We need 'Configure...' and 'View log...' Menu only in runtime.
         if current_app.PGADMIN_RUNTIME:
+            full_screen_label = gettext('Enter Full Screen  (F10)')
+            actual_size_label = gettext('Actual Size (Ctrl 0)')
+            zoom_in_label = gettext('Zoom In (Ctrl +)')
+            zoom_out_label = gettext('Zoom Out (Ctrl -)')
+
+            if sys.platform == 'darwin':
+                full_screen_label = gettext('Enter Full Screen  (Cmd Ctrl F)')
+                actual_size_label = gettext('Actual Size (Cmd 0)')
+                zoom_in_label = gettext('Zoom In (Cmd +)')
+                zoom_out_label = gettext('Zoom Out (Cmd -)')
+
             menus['file_items'].append(
                 MenuItem(
                     name='mnu_runtime',
@@ -289,7 +300,32 @@ class BrowserModule(PgAdminModule):
                         module=PGADMIN_BROWSER,
                         callback='mnu_viewlog_runtime',
                         priority=1,
-                        label=gettext('View log...')
+                        label=gettext('View log...'),
+                        below=True,
+                    ), MenuItem(
+                        name='mnu_toggle_fullscreen_runtime',
+                        module=PGADMIN_BROWSER,
+                        callback='mnu_toggle_fullscreen_runtime',
+                        priority=2,
+                        label=full_screen_label
+                    ), MenuItem(
+                        name='mnu_actual_size_runtime',
+                        module=PGADMIN_BROWSER,
+                        callback='mnu_actual_size_runtime',
+                        priority=3,
+                        label=actual_size_label
+                    ), MenuItem(
+                        name='mnu_zoomin_runtime',
+                        module=PGADMIN_BROWSER,
+                        callback='mnu_zoomin_runtime',
+                        priority=4,
+                        label=zoom_in_label
+                    ), MenuItem(
+                        name='mnu_zoomout_runtime',
+                        module=PGADMIN_BROWSER,
+                        callback='mnu_zoomout_runtime',
+                        priority=5,
+                        label=zoom_out_label
                     )]
                 )
             )

web/pgadmin/browser/static/js/browser.js

@@ -836,7 +836,7 @@ define('pgadmin.browser', [
                 enable: (_m.enable == '' ? true : (_.isString(_m.enable) &&
                   _m.enable.toLowerCase() == 'false') ?
                   false : _m.enable),
-                node: _m.node, checked: _m.checked,
+                node: _m.node, checked: _m.checked, below: _m.below,
               });
             };
 

web/pgadmin/browser/static/js/menu.js

@@ -19,7 +19,7 @@ define([
     var menu_opts = [
         'name', 'label', 'priority', 'module', 'callback', 'data', 'enable',
         'category', 'target', 'url' /* Do not show icon in the menus, 'icon' */ , 'node',
-        'checked', 'menu_items',
+        'checked', 'below', 'menu_items',
       ],
       defaults = {
         url: '#',
@@ -101,7 +101,14 @@ define([
 
         url.append(textSpan);
 
-        this.$el = $('<li/>').append(url);
+        var mnu_element = $('<li/>').append(url);
+        // Check if below parameter is defined and true then we need to add
+        // separator.
+        if (!_.isUndefined(this.below) && this.below === true) {
+          mnu_element.append('<li class="dropdown-divider"></li>');
+        }
+
+        this.$el = mnu_element;
       }
 
     },

web/pgadmin/browser/static/js/runtime.js

@@ -39,6 +39,34 @@ _.extend(pgBrowser, {
   mnu_viewlog_runtime: function() {
     this.send_signal_to_runtime('Runtime Open View Log');
   },
+
+  // This function is callback function when 'Enter Full Screen' menu is clicked.
+  mnu_toggle_fullscreen_runtime: function() {
+    var menu_label = document.querySelector('#mnu_toggle_fullscreen_runtime span').innerHTML;
+
+    if (menu_label.indexOf('Enter Full Screen') > 0) {
+      document.querySelector('#mnu_toggle_fullscreen_runtime span').innerHTML = menu_label.replace('Enter', 'Exit');
+    } else if (menu_label.indexOf('Exit Full Screen') > 0) {
+      document.querySelector('#mnu_toggle_fullscreen_runtime span').innerHTML = menu_label.replace('Exit', 'Enter');
+    }
+
+    this.send_signal_to_runtime('Runtime Toggle Full Screen');
+  },
+
+  // This function is callback function when 'Actual Size' menu is clicked.
+  mnu_actual_size_runtime: function() {
+    this.send_signal_to_runtime('Runtime Actual Size');
+  },
+
+  // This function is callback function when 'Zoom In' menu is clicked.
+  mnu_zoomin_runtime: function() {
+    this.send_signal_to_runtime('Runtime Zoom In');
+  },
+
+  // This function is callback function when 'Zoom Out' menu is clicked.
+  mnu_zoomout_runtime: function() {
+    this.send_signal_to_runtime('Runtime Zoom Out');
+  }
 });
 
 export {pgBrowser};

web/pgadmin/browser/templates/browser/js/utils.js

@@ -22,6 +22,8 @@
   enable: "{{ item.enable }}",
   {% if item.checked is defined %}checked: {% if item.checked %}true{% else %}false{% endif %},
   {% endif %}
+  {% if item.below is defined %}below: {% if item.below %}true{% else %}false{% endif %},
+  {% endif %}
   {% if item.menu_items %}menu_items: {{MENU_ITEMS(key, item.menu_items)}}
   {% endif %}
 }