Query tool and debugger rendering issue in Linux

Issue : -

Whenever we open any alertify dialog inside the query tool and debugger panel then panel contents are not visible. Query tool panel display as blank.
This issue is only reproducible in Linux.

Solution:-

Animations and transitions are not automatically GPU accelerated and by default use browser's slow rendering engine.
We need to set 'translate3d' value of '-webkit-transform' property in order to use GPU.

After applying this property under linux, Webkit calculates wrong position of the elements so panel contents are not visible.

To make it work, we need to explicitly set '-webkit-transform' property to 'none' for .ajs-notifier, .ajs-message, .ajs-modal classes.

Fixes #1186

web/pgadmin/tools/datagrid/__init__.py

@@ -23,7 +23,7 @@ from pgadmin.utils.ajax import make_json_response, bad_request, \
     internal_server_error
 
 from config import PG_DEFAULT_DRIVER
-
+from flask import current_app as app
 
 class DataGridModule(PgAdminModule):
     """
@@ -153,9 +153,27 @@ def panel(trans_id, is_query_tool, editor_title):
     else:
         sURL = None
 
+    """
+    Animations and transitions are not automatically GPU accelerated and by default use browser's slow rendering engine.
+    We need to set 'translate3d' value of '-webkit-transform' property in order to use GPU.
+    After applying this property under linux, Webkit calculates wrong position of the elements so panel contents are not visible.
+    To make it work, we need to explicitly set '-webkit-transform' property to 'none' for .ajs-notifier, .ajs-message, .ajs-modal classes.
+
+    This issue is only with linux runtime application and observed in Query tool and debugger.
+    When we open 'Open File' dialog then whole Query-tool panel content is not visible though it contains HTML element in back end.
+
+    The port number should have already been set by the runtime if we're running in desktop mode.
+    """
+    is_linux_platform = False
+
+    from sys import platform as _platform
+    if "linux" in _platform:
+        is_linux_platform = True
+
     return render_template("datagrid/index.html", _=gettext, uniqueId=trans_id,
                            is_query_tool=is_query_tool, editor_title=editor_title,
-                           script_type_url=sURL)
+                           script_type_url=sURL,is_desktop_mode=app.PGADMIN_RUNTIME,
+                           is_linux=is_linux_platform)
 
 
 @blueprint.route(

web/pgadmin/tools/datagrid/templates/datagrid/index.html

@@ -5,9 +5,13 @@
 {% endblock %}
 {% block body %}
 <style>
-    body {
-    padding: 0px;
-    }
+body {padding: 0px;}
+{% if is_desktop_mode and is_linux %}
+.alertify .ajs-dimmer,.alertify .ajs-modal{-webkit-transform: none;}
+.alertify-notifier{-webkit-transform: none;}
+.alertify-notifier .ajs-message{-webkit-transform: none;}
+.alertify .ajs-dialog.ajs-shake{-webkit-animation-name: none;}
+{% endif %}
 </style>
 <div id="main-editor_panel">
     <div id="fetching_data" class="sql-editor-busy-fetching hide">

web/pgadmin/tools/debugger/__init__.py

@@ -268,12 +268,31 @@ def direct_new(trans_id):
     # if indirect debugging pass value 0 to client and for direct debugging pass it to 1
     debug_type = 0 if obj['debug_type'] == 'indirect' else 1
 
+    """
+    Animations and transitions are not automatically GPU accelerated and by default use browser's slow rendering engine.
+    We need to set 'translate3d' value of '-webkit-transform' property in order to use GPU.
+    After applying this property under linux, Webkit calculates wrong position of the elements so panel contents are not visible.
+    To make it work, we need to explicitly set '-webkit-transform' property to 'none' for .ajs-notifier, .ajs-message, .ajs-modal classes.
+
+    This issue is only with linux runtime application and observed in Query tool and debugger.
+    When we open 'Open File' dialog then whole Query-tool panel content is not visible though it contains HTML element in back end.
+
+    The port number should have already been set by the runtime if we're running in desktop mode.
+    """
+    is_linux_platform = False
+
+    from sys import platform as _platform
+    if "linux" in _platform:
+        is_linux_platform = True
+
     return render_template(
         "debugger/direct.html",
         _=gettext,
         function_name='test',
         uniqueId=trans_id,
         debug_type=debug_type,
+        is_desktop_mode=current_app.PGADMIN_RUNTIME,
+        is_linux=is_linux_platform,
         stylesheets=[url_for('debugger.static', filename='css/debugger.css')]
     )
 

web/pgadmin/tools/debugger/templates/debugger/direct.html

@@ -17,7 +17,15 @@ console.log(err);
 }
 {% endblock %}
 {% block body %}
-
+{% if is_desktop_mode and is_linux %}
+<style>
+body
+.alertify .ajs-dimmer,.alertify .ajs-modal{-webkit-transform: none;}
+.alertify-notifier{-webkit-transform: none;}
+.alertify-notifier .ajs-message{-webkit-transform: none;}
+.alertify .ajs-dialog.ajs-shake{-webkit-animation-name: none;}
+</style>
+{% endif %}
 <nav class="navbar-inverse navbar-fixed-top">
     <div id="btn-toolbar" class="btn-toolbar pg-prop-btn-group" role="toolbar" aria-label="">
         <div class="btn-group" role="group" aria-label="">