Bump version number for release.

Ensure queries are no longer executed when dashboards are closed. Fixes #3576

README

@@ -27,7 +27,7 @@ Building the Runtime
 To build the runtime, the following packages must be installed:
 
 - QT 4.6 or above
-- Python 2.6, 2.7 or 3.3+ (2.7 only on Windows)
+- Python 2.6, 2.7 or 3.4+
 
 Assuming both qmake and python-config are in the path:
 

docs/en_US/getting_started.rst

@@ -74,6 +74,7 @@ Contents:
 
    browser
    pgadmin_menu_bar
+   pgadmin_toolbar
    pgadmin_tabbed_browser
    pgadmin_tree_control
    preferences

docs/en_US/pgadmin_toolbar.rst

@@ -0,0 +1,16 @@
+.. _pgadmin_toolbar:
+
+*************************
+`pgAdmin Toolbar`:index:
+*************************
+
+The pgAdmin toolbar provides shortcut buttons for frequently used features like View Data and the Query Tool
+which are most frequently used in pgAdmin.
+This toolbar is visible on the Browser panel. Buttons get enabled/disabled based on the selected browser node.
+
+.. image:: /images/pgadmin_toolbar.png
+    :alt: pgAdmin Toolbar
+
+* Use the :ref:`Query Tool <query_tool>` button to open the Query Tool in the current database context.
+* Use the :ref:`View Data <editgrid>` button to view/edit the data stored in a selected table.
+* Use the :ref:`Filtered Rows <editgrid>` button to access the Data Filter popup to apply a filter to a set of data for viewing/editing.

docs/en_US/preferences.rst

@@ -69,9 +69,13 @@ Use the fields on the *Graphs* panel to specify your display preferences for the
 .. image:: images/preferences_dashboard_display.png
     :alt: Preferences dialog dashboard display options
 
+* When the *Show activity?* switch is set to *True*, activity tables will be displayed on dashboards.
+
+* When the *Show graph data points?* switch is set to *True*, data points will be visible on graph lines.
+
 * When the *Show graphs?* switch is set to *True*, graphs will be displayed on dashboards.
 
-* When the *Show activity?* switch is set to *True*, activity tables will be displayed on dashboards.
+* When the *Show mouse hover tooltip?* switch is set to *True*, a tooltip will appear on mouse hover on the graph lines giving the data point details.
 
 
 **The Debugger Node**

docs/en_US/release_notes.rst

@@ -9,6 +9,7 @@ for it.
 
 .. toctree::
 
+   release_notes_3_4
    release_notes_3_3
    release_notes_3_2
    release_notes_3_1

docs/en_US/release_notes_3_4.rst

@@ -0,0 +1,28 @@
+***********
+Version 3.4
+***********
+
+Release date: 2018-10-04
+
+This release contains a number of features and fixes reported since the release of pgAdmin4 3.3
+
+
+Features
+********
+
+| `Feature #2927 <https://redmine.postgresql.org/issues/2927>`_ - Move all CSS into SCSS files for consistency and ease of colour maintenance etc.
+| `Feature #3514 <https://redmine.postgresql.org/issues/3514>`_ - Add optional data point markers and mouse-over tooltips to display values on graphs.
+| `Feature #3564 <https://redmine.postgresql.org/issues/3564>`_ - Add shortcuts for View Data and the Query tool to the Browser header bar.
+
+Bug fixes
+*********
+
+| `Bug #3464 <https://redmine.postgresql.org/issues/3464>`_ - Ensure the runtime can startup properly if there are wide characters in the logfile path on Windows.
+| `Bug #3551 <https://redmine.postgresql.org/issues/3551>`_ - Fix handling of backslashes in the edit grid.
+| `Bug #3576 <https://redmine.postgresql.org/issues/3576>`_ - Ensure queries are no longer executed when dashboards are closed.
+| `Bug #3596 <https://redmine.postgresql.org/issues/3596>`_ - Fix support for the CLOB datatype in EPAS.
+| `Bug #3607 <https://redmine.postgresql.org/issues/3607>`_ - Fix logic around validation and highlighting of Sort/Filter in the Query Tool.
+| `Bug #3630 <https://redmine.postgresql.org/issues/3630>`_ - Ensure auto-complete works for objects in schemas other than public and pg_catalog.
+| `Bug #3657 <https://redmine.postgresql.org/issues/3657>`_ - Ensure changes to Query Tool settings from the Preferences dialogue are applied before executing queries.
+| `Bug #3658 <https://redmine.postgresql.org/issues/3658>`_ - Swap the Schema and Schemas icons and Catalog and Catalogs icons that had been used the wrong way around.
+

pkg/docker/Dockerfile

@@ -8,8 +8,8 @@
 #########################################################################
 
 # First of all, build frontend with NodeJS in a separate builder container
-# Node-6 with ABI v48 is supported by all needed C++ packages
+# Node-8 is supported by all needed C++ packages
-FROM node:6 AS node-builder
+FROM node:8 AS node-builder
 
 COPY ./pgadmin4/web/ /pgadmin4/web/
 WORKDIR /pgadmin4/web

runtime/Info.plist

@@ -8,9 +8,9 @@
     <key>CFBundleName</key>
     <string>pgAdmin 4</string>
     <key>CFBundleShortVersionString</key>
-    <string>3.3.0</string>
+    <string>3.4.0</string>
     <key>CFBundleVersion</key>
-    <string>3.3.0</string>
+    <string>3.4.0</string>
     <key>LSMinimumSystemVersion</key>
     <string>10.10</string>
     <key>NSHumanReadableCopyright</key>

runtime/Logger.cpp

@@ -0,0 +1,59 @@
+//////////////////////////////////////////////////////////////////////////
+//
+// pgAdmin 4 - PostgreSQL Tools
+//
+// Copyright (C) 2013 - 2018, The pgAdmin Development Team
+// This software is released under the PostgreSQL Licence
+//
+// Logger.cpp - Logger Utility
+//
+//////////////////////////////////////////////////////////////////////////
+
+#include "pgAdmin4.h"
+#include "Logger.h"
+Logger* Logger::m_pThis = NULL;
+QString Logger::m_sFileName = "";
+QFile* Logger::m_Logfile = NULL;
+
+Logger::Logger()
+{
+}
+Logger::~Logger()
+{
+}
+
+Logger* Logger::GetLogger()
+{
+    if (m_pThis == NULL)
+    {
+        m_pThis = new Logger();
+        m_sFileName = QDir::homePath() + (QString("/.%1.startup.log").arg(PGA_APP_NAME)).remove(" ");
+        m_Logfile = new QFile;
+        m_Logfile->setFileName(m_sFileName);
+        m_Logfile->open(QIODevice::WriteOnly | QIODevice::Text);
+        m_Logfile->setPermissions(QFile::ReadOwner|QFile::WriteOwner);
+    }
+
+    return m_pThis;
+}
+
+void Logger::Log(const QString& sMessage)
+{
+    QString text = QDateTime::currentDateTime().toString("dd.MM.yyyy hh:mm:ss ") + sMessage + "\n";
+    if (m_Logfile != NULL)
+    {
+        QTextStream out(m_Logfile);
+        out << text;
+    }
+}
+
+void Logger::ReleaseLogger()
+{
+    if (m_pThis != NULL)
+    {
+        if(m_Logfile != NULL)
+            m_Logfile->close();
+        delete m_pThis;
+        m_pThis = NULL;
+    }
+}

runtime/Logger.h

@@ -0,0 +1,34 @@
+//////////////////////////////////////////////////////////////////////////
+//
+// pgAdmin 4 - PostgreSQL Tools
+//
+// Copyright (C) 2013 - 2018, The pgAdmin Development Team
+// This software is released under the PostgreSQL Licence
+//
+// Logger.h - Logger Utility
+//
+//////////////////////////////////////////////////////////////////////////
+
+#ifndef LOGGER_H
+#define LOGGER_H
+
+#include <QObject>
+
+class Logger : public QObject
+{
+public:
+    static Logger* GetLogger();
+    static void ReleaseLogger();
+    void Log(const QString& sMessage);
+
+private:
+    Logger();
+    virtual ~Logger();
+
+private:
+    static Logger* m_pThis;
+    static QString m_sFileName;
+    static QFile *m_Logfile;
+};
+
+#endif // LOGGER_H

runtime/Server.cpp

@@ -10,6 +10,7 @@
 //////////////////////////////////////////////////////////////////////////
 
 #include "pgAdmin4.h"
+#include "Logger.h"
 
 // Must be before QT
 #include <Python.h>
@@ -175,6 +176,10 @@ Server::Server(quint16 port, QString key, QString logFileName)
 
     qDebug() << "Python path: " << python_path
              << "\nPython Home: " << pythonHome;
+
+    Logger::GetLogger()->Log(QString("Python Path: %1").arg(python_path));
+    Logger::GetLogger()->Log(QString("Python Home: %1").arg(pythonHome));
+
     if (!pythonHome.isEmpty())
     {
         pythonHome_utf8 = pythonHome.toUtf8();
@@ -190,36 +195,80 @@ Server::Server(quint16 port, QString key, QString logFileName)
 #endif
     }
 
+    Logger::GetLogger()->Log("Initializing Python...");
     Py_Initialize();
+    Logger::GetLogger()->Log("Python initialized.");
 
     // Get the current path
     PyObject* sysPath = PySys_GetObject((char*)"path");
-
+    if (sysPath != NULL)
-    // Add new additional path elements
-    for (i = path_list.size() - 1; i >= 0 ; --i)
     {
+        // Add new additional path elements
+        Logger::GetLogger()->Log("Adding new additional path elements");
+        for (i = path_list.size() - 1; i >= 0 ; --i)
+        {
 #ifdef PYTHON2
-        PyList_Append(sysPath, PyString_FromString(path_list.at(i).toUtf8().data()));
+            PyList_Append(sysPath, PyString_FromString(path_list.at(i).toUtf8().data()));
 #else
 #if PY_MINOR_VERSION > 2
-        PyList_Append(sysPath, PyUnicode_DecodeFSDefault(path_list.at(i).toUtf8().data()));
+            PyList_Append(sysPath, PyUnicode_DecodeFSDefault(path_list.at(i).toUtf8().data()));
 #else
-        PyList_Append(sysPath, PyBytes_FromString(path_list.at(i).toUtf8().data()));
+            PyList_Append(sysPath, PyBytes_FromString(path_list.at(i).toUtf8().data()));
 #endif
 #endif
+        }
     }
+    else
+       Logger::GetLogger()->Log("Unable to get the current path.");
 
     // Redirect stderr
+    Logger::GetLogger()->Log("Redirecting stderr...");
     PyObject *sys = PyImport_ImportModule("sys");
+    if (sys != NULL)
+    {
+        PyObject *err = NULL;
 #ifdef PYTHON2
-    PyObject *err = PyFile_FromString(m_logFileName.toUtf8().data(), (char *)"w");
+        err = PyFile_FromString(m_logFileName.toUtf8().data(), (char *)"w");
 #else
-    FILE *log = fopen(m_logFileName.toUtf8().data(), (char *)"w");
+        FILE *log = NULL;
-    int fd = fileno(log);
+
-    PyObject *err = PyFile_FromFd(fd, NULL, (char *)"w", -1, NULL, NULL, NULL, 0);
+#if defined(Q_OS_WIN)
+        char *logFile = m_logFileName.toUtf8().data();
+        size_t fileSize = strlen(logFile) + 1;
+        wchar_t * wcLogFileName = new wchar_t[fileSize];
+        mbstowcs (wcLogFileName, logFile, fileSize);
+
+        log = _wfopen(wcLogFileName, (wchar_t *)"w");
+#else
+        log = fopen(m_logFileName.toUtf8().data(), (char *)"w");
 #endif
-    QFile(m_logFileName).setPermissions(QFile::ReadOwner|QFile::WriteOwner);
+        if (log != NULL)
-    PyObject_SetAttrString(sys, "stderr", err);
+        {
+            int fd = fileno(log);
+            err = PyFile_FromFd(fd, NULL, (char *)"w", -1, NULL, NULL, NULL, 0);
+        }
+        else
+            Logger::GetLogger()->Log(QString("Failed to open log file: %1").arg(m_logFileName));
+
+#if defined(Q_OS_WIN)
+        if (wcLogFileName != NULL)
+        {
+            delete wcLogFileName;
+            wcLogFileName = NULL;
+        }
+#endif
+#endif
+        QFile(m_logFileName).setPermissions(QFile::ReadOwner|QFile::WriteOwner);
+        if (err != NULL)
+        {
+            PyObject_SetAttrString(sys, "stderr", err);
+            Logger::GetLogger()->Log("stderr redirected successfully.");
+        }
+        else
+            Logger::GetLogger()->Log(QString("Failed to get the file pointer of: %1 ").arg(m_logFileName));
+    }
+    else
+      Logger::GetLogger()->Log("Failed to import 'sys' module.");
 }
 
 Server::~Server()
@@ -263,12 +312,14 @@ bool Server::Init()
         if (QFile::exists(m_appfile))
         {
             qDebug() << "Webapp path: " << m_appfile;
+            Logger::GetLogger()->Log(QString("Webapp Path: %1").arg(m_appfile));
             break;
         }
     }
 
     if (!QFile::exists(m_appfile))
     {
+        Logger::GetLogger()->Log("Failed to locate pgAdmin4.py, terminating server thread.");
         setError(tr("Failed to locate pgAdmin4.py, terminating server thread."));
         return false;
     }
@@ -279,14 +330,17 @@ bool Server::Init()
 void Server::run()
 {
     // Open the application code and run it.
+    Logger::GetLogger()->Log("Open the application code and run it.");
     FILE *cp = fopen(m_appfile.toUtf8().data(), "r");
     if (!cp)
     {
+        Logger::GetLogger()->Log(QString(tr("Failed to open the application file: %1, server thread exiting.")).arg(m_appfile));
         setError(QString(tr("Failed to open the application file: %1, server thread exiting.")).arg(m_appfile));
         return;
     }
 
     // Set the port number and key, and force SERVER_MODE off.
+    Logger::GetLogger()->Log("Set the port number, key and force SERVER_MODE off");
     PyRun_SimpleString(QString("PGADMIN_PORT = %1").arg(m_port).toLatin1());
     PyRun_SimpleString(QString("PGADMIN_KEY = '%1'").arg(m_key).toLatin1());
     PyRun_SimpleString(QString("SERVER_MODE = False").toLatin1());
@@ -303,10 +357,14 @@ void Server::run()
     char* n_argv[] = { m_appfile_utf8.data() };
     PySys_SetArgv(1, n_argv);
 
+    Logger::GetLogger()->Log("PyRun_SimpleFile launching application server...");
     PyObject* PyFileObject = PyFile_FromString(m_appfile_utf8.data(), (char *)"r");
     int ret = PyRun_SimpleFile(PyFile_AsFile(PyFileObject), m_appfile_utf8.data());
     if (ret != 0)
+    {
+        Logger::GetLogger()->Log("Failed to launch the application server, server thread exiting.");
         setError(tr("Failed to launch the application server, server thread exiting."));
+    }
 #else
     /*
      * Untrusted search path vulnerability in the PySys_SetArgv API function in Python 2.6 and earlier, and possibly later
@@ -321,8 +379,12 @@ void Server::run()
     wchar_t* n_argv[] = { wcAppName };
     PySys_SetArgv(1, n_argv);
 
+    Logger::GetLogger()->Log("PyRun_SimpleFile launching application server...");
     if (PyRun_SimpleFile(cp, m_appfile_utf8.data()) != 0)
+    {
+        Logger::GetLogger()->Log("Failed to launch the application server, server thread exiting.");
         setError(tr("Failed to launch the application server, server thread exiting."));
+    }
 #endif
 
     fclose(cp);

runtime/pgAdmin4.cpp

@@ -36,6 +36,7 @@
 #include "TrayIcon.h"
 #include "MenuActions.h"
 #include "FloatingWindow.h"
+#include "Logger.h"
 
 #include <QTime>
 
@@ -217,6 +218,7 @@ int main(int argc, char * argv[])
         menuActions->setLogFile(logFileName);
 
     splash->showMessage(QString(QWidget::tr("Checking for system tray...")), Qt::AlignBottom | Qt::AlignCenter);
+    Logger::GetLogger()->Log("Checking for system tray...");
 
     // Check system tray is available or not. If not then create one floating window.
     FloatingWindow *floatingWindow = NULL;
@@ -235,13 +237,15 @@ int main(int argc, char * argv[])
     else
     {
         splash->showMessage(QString(QWidget::tr("System tray not found, creating floating window...")), Qt::AlignBottom | Qt::AlignCenter);
+        Logger::GetLogger()->Log("System tray not found, creating floating window...");
         // Unable to find tray icon, so creating floting window
         floatingWindow = new FloatingWindow();
         if (floatingWindow == NULL)
         {
             QString error = QString(QWidget::tr("Unable to initialize either a tray icon or control window."));
             QMessageBox::critical(NULL, QString(QWidget::tr("Fatal Error")), error);
-
+            Logger::GetLogger()->Log(error);
+            Logger::ReleaseLogger();
             exit(1);
         }
 
@@ -256,10 +260,14 @@ int main(int argc, char * argv[])
     bool done = false;
 
     splash->showMessage(QString(QWidget::tr("Starting pgAdmin4 server...")), Qt::AlignBottom | Qt::AlignCenter);
+    Logger::GetLogger()->Log("Starting pgAdmin4 server...");
     while (done != true)
     {
+        QString msg = QString(QWidget::tr("Creating server object, port:%1, key:%2, logfile:%3")).arg(port).arg(key).arg(logFileName);
+        Logger::GetLogger()->Log(msg);
         server = new Server(port, key, logFileName);
 
+        Logger::GetLogger()->Log("Initializing server...");
         if (!server->Init())
         {
             splash->finish(NULL);
@@ -269,9 +277,14 @@ int main(int argc, char * argv[])
             QString error = QString(QWidget::tr("An error occurred initialising the application server:\n\n%1")).arg(server->getError());
             QMessageBox::critical(NULL, QString(QWidget::tr("Fatal Error")), error);
 
+            Logger::GetLogger()->Log(error);
+            Logger::ReleaseLogger();
+
             exit(1);
         }
 
+        Logger::GetLogger()->Log("Server initialized.");
+        Logger::GetLogger()->Log("Starting Server Thread...");
         server->start();
 
         // This is a hack to give the server a chance to start and potentially fail. As
@@ -290,6 +303,7 @@ int main(int argc, char * argv[])
 
             QString error = QString(QWidget::tr("An error occurred initialising the application server:\n\n%1")).arg(server->getError());
             QMessageBox::critical(NULL, QString(QWidget::tr("Fatal Error")), error);
+            Logger::GetLogger()->Log(error);
 
             // Allow the user to tweak the Python Path if needed
             bool ok;
@@ -315,6 +329,7 @@ int main(int argc, char * argv[])
             }
             else
             {
+                Logger::ReleaseLogger();
                 exit(1);
             }
 
@@ -329,6 +344,7 @@ int main(int argc, char * argv[])
 
     // Generate the app server URL
     QString appServerUrl = QString("http://127.0.0.1:%1/?key=%2").arg(port).arg(key);
+    Logger::GetLogger()->Log(QString(QWidget::tr("Application Server URL: %1")).arg(appServerUrl));
 
     // Read the server connection timeout from the registry or set the default timeout.
     int timeout = settings.value("ConnectionTimeout", 30).toInt();
@@ -339,6 +355,7 @@ int main(int argc, char * argv[])
     QTime endTime = QTime::currentTime().addSecs(timeout);
     bool alive = false;
 
+    Logger::GetLogger()->Log("The server should be up, we'll attempt to connect and get a response. Ping the server");
     while(QTime::currentTime() <= endTime)
     {
         alive = PingServer(QUrl(appServerUrl));
@@ -352,12 +369,14 @@ int main(int argc, char * argv[])
     }
 
     // Attempt to connect one more time in case of a long network timeout while looping
+    Logger::GetLogger()->Log("Attempt to connect one more time in case of a long network timeout while looping");
     if (!alive && !PingServer(QUrl(appServerUrl)))
     {
         splash->finish(NULL);
         QString error(QWidget::tr("The application server could not be contacted."));
         QMessageBox::critical(NULL, QString(QWidget::tr("Fatal Error")), error);
 
+        Logger::ReleaseLogger();
         exit(1);
     }
 
@@ -392,6 +411,8 @@ int main(int argc, char * argv[])
             QString error(QWidget::tr("Failed to open the system default web browser. Is one installed?."));
             QMessageBox::critical(NULL, QString(QWidget::tr("Fatal Error")), error);
 
+            Logger::GetLogger()->Log(error);
+            Logger::ReleaseLogger();
             exit(1);
         }
     }
@@ -402,6 +423,8 @@ int main(int argc, char * argv[])
     if (floatingWindow != NULL)
         floatingWindow->show();
 
+    Logger::GetLogger()->Log("Everything works fine, successfully started pgAdmin4.");
+    Logger::ReleaseLogger();
     return app.exec();
 }
 

runtime/pgAdmin4.pro

@@ -1,4 +1,4 @@
-VERSION = 3.3.0.0
+VERSION = 3.4.0.0
 QMAKE_TARGET_COMPANY = "The pgAdmin Development Team"
 QMAKE_TARGET_PRODUCT = "pgAdmin 4"
 QMAKE_TARGET_DESCRIPTION = "pgAdmin 4 Desktop Runtime"
@@ -93,14 +93,16 @@ HEADERS     =   Server.h \
                 TrayIcon.h \
                 LogWindow.h \
                 MenuActions.h \
-                FloatingWindow.h
+                FloatingWindow.h \
+                Logger.h
 SOURCES     =   pgAdmin4.cpp \
                 Server.cpp \
                 ConfigWindow.cpp \
                 TrayIcon.cpp \
                 LogWindow.cpp \
                 MenuActions.cpp \
-                FloatingWindow.cpp
+                FloatingWindow.cpp \
+                Logger.cpp
 FORMS       =   ConfigWindow.ui \
                 LogWindow.ui \
                 FloatingWindow.ui

web/config.py

@@ -50,7 +50,7 @@ APP_ICON = 'pg-icon'
 
 # Application version number components
 APP_RELEASE = 3
-APP_REVISION = 3
+APP_REVISION = 4
 
 # Application version suffix, e.g. 'beta1', 'dev'. Usually an empty string
 # for GA releases.
@@ -59,7 +59,7 @@ APP_SUFFIX = ''
 # Numeric application version for upgrade checks. Should be in the format:
 # [X]XYYZZ, where X is the release version, Y is the revision, with a leading
 # zero if needed, and Z represents the suffix, with a leading zero if needed
-APP_VERSION_INT = 30300
+APP_VERSION_INT = 30400
 
 # DO NOT CHANGE!
 # The application version string, constructed from the components

web/package.json

@@ -4,6 +4,7 @@
     "axios-mock-adapter": "^1.14.1",
     "babel-core": "~6.24.0",
     "babel-loader": "~7.1.2",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-airbnb": "^2.4.0",
     "babel-preset-es2015": "~6.24.0",
     "babel-preset-react": "~6.23.0",
@@ -33,7 +34,8 @@
     "node-sass": "^4.5.3",
     "optimize-css-assets-webpack-plugin": "^2.0.0",
     "raw-loader": "^0.5.1",
-    "sass-loader": "^6.0.6",
+    "sass-loader": "^7.1.0",
+    "sass-resources-loader": "^1.3.3",
     "style-loader": "^0.18.2",
     "uglifyjs-webpack-plugin": "^0.4.6",
     "url-loader": "^0.5.9",
@@ -65,9 +67,9 @@
     "dropzone": "^5.1.1",
     "eonasdan-bootstrap-datetimepicker": "^4.17.47",
     "exports-loader": "~0.6.4",
-    "flotr2": "^0.1.0",
+    "flotr2": "git+https://github.com/EnterpriseDB/Flotr2.git",
     "font-awesome": "^4.7.0",
-    "hard-source-webpack-plugin": "^0.4.9",
+    "hard-source-webpack-plugin": "0.12.0",
     "immutability-helper": "^2.2.0",
     "imports-loader": "^0.7.1",
     "ip-address": "^5.8.9",
@@ -92,7 +94,7 @@
     "underscore": "^1.8.3",
     "underscore.string": "^3.3.4",
     "watchify": "~3.9.0",
-    "webcabin-docker": "git+https://github.com/EnterpriseDB/wcDocker",
+    "webcabin-docker": "git+https://github.com/EnterpriseDB/wcDocker/#5fbdf05a6757464d2fa2c2b017322c97688b2105",
     "wkx": "^0.4.5"
   },
   "scripts": {

web/pgadmin/browser/__init__.py

@@ -67,11 +67,9 @@ class BrowserModule(PgAdminModule):
             ('static', 'vendor/codemirror/addon/dialog/dialog.css'),
             ('static', context_menu_file),
             ('static', wcdocker_file),
-            ('browser.static', 'css/browser.css'),
             ('browser.static', 'vendor/aciTree/css/aciTree.css')
         ]:
             stylesheets.append(url_for(endpoint, filename=filename))
-        stylesheets.append(url_for('browser.browser_css'))
         return stylesheets
 
     def get_own_javascripts(self):

web/pgadmin/browser/server_groups/servers/databases/schemas/static/img/catalog.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#ede3ff;}.cls-2{fill:#7749bd;}</style></defs><title>catalog</title><g id="_2" data-name="2"><rect class="cls-1" x="2.87" y="3.41" width="4.25" height="4.25" transform="translate(-2.45 5.15) rotate(-45)"/><path class="cls-2" d="M5,3.06,7.47,5.53,5,8,2.52,5.53,5,3.06M5,2,1.46,5.53,5,9.07,8.53,5.53,5,2Z"/><rect class="cls-2" x="4.11" y="4.63" width="1.8" height="1.8" transform="translate(12.46 5.91) rotate(135)"/><rect class="cls-1" x="8.88" y="3.41" width="4.25" height="4.25" transform="translate(-0.69 9.4) rotate(-45)"/><path class="cls-2" d="M11,3.06l2.47,2.47L11,8,8.53,5.53,11,3.06M11,2,7.47,5.53,11,9.07l3.54-3.54L11,2Z"/><rect class="cls-2" x="10.12" y="4.63" width="1.8" height="1.8" transform="translate(22.72 1.66) rotate(135)"/><rect class="cls-1" x="5.87" y="8.34" width="4.25" height="4.25" transform="translate(-5.06 8.72) rotate(-45)"/><path class="cls-2" d="M8,8l2.47,2.47L8,12.94,5.52,10.47,8,8M8,6.93,4.46,10.47,8,14l3.54-3.54L8,6.93Z"/><rect class="cls-2" x="7.11" y="9.57" width="1.8" height="1.8" transform="translate(21.08 12.2) rotate(135)"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#ede3ff;}.cls-2{fill:#7749bd;}</style></defs><title>coll-catalog</title><g id="_2" data-name="2"><rect class="cls-1" x="4.05" y="4.05" width="7.89" height="7.89" transform="translate(-3.31 8) rotate(-45)"/><path class="cls-2" d="M8,3l5,5L8,13,3,8,8,3M8,1.89,1.89,8,8,14.11,14.11,8,8,1.89Z"/><rect class="cls-2" x="6.44" y="6.44" width="3.11" height="3.11" transform="translate(-3.31 8) rotate(-45)"/></g></svg>

web/pgadmin/browser/server_groups/servers/databases/schemas/static/img/coll-catalog.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#ede3ff;}.cls-2{fill:#7749bd;}</style></defs><title>coll-catalog</title><g id="_2" data-name="2"><rect class="cls-1" x="4.05" y="4.05" width="7.89" height="7.89" transform="translate(-3.31 8) rotate(-45)"/><path class="cls-2" d="M8,3l5,5L8,13,3,8,8,3M8,1.89,1.89,8,8,14.11,14.11,8,8,1.89Z"/><rect class="cls-2" x="6.44" y="6.44" width="3.11" height="3.11" transform="translate(-3.31 8) rotate(-45)"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#ede3ff;}.cls-2{fill:#7749bd;}</style></defs><title>catalog</title><g id="_2" data-name="2"><rect class="cls-1" x="2.87" y="3.41" width="4.25" height="4.25" transform="translate(-2.45 5.15) rotate(-45)"/><path class="cls-2" d="M5,3.06,7.47,5.53,5,8,2.52,5.53,5,3.06M5,2,1.46,5.53,5,9.07,8.53,5.53,5,2Z"/><rect class="cls-2" x="4.11" y="4.63" width="1.8" height="1.8" transform="translate(12.46 5.91) rotate(135)"/><rect class="cls-1" x="8.88" y="3.41" width="4.25" height="4.25" transform="translate(-0.69 9.4) rotate(-45)"/><path class="cls-2" d="M11,3.06l2.47,2.47L11,8,8.53,5.53,11,3.06M11,2,7.47,5.53,11,9.07l3.54-3.54L11,2Z"/><rect class="cls-2" x="10.12" y="4.63" width="1.8" height="1.8" transform="translate(22.72 1.66) rotate(135)"/><rect class="cls-1" x="5.87" y="8.34" width="4.25" height="4.25" transform="translate(-5.06 8.72) rotate(-45)"/><path class="cls-2" d="M8,8l2.47,2.47L8,12.94,5.52,10.47,8,8M8,6.93,4.46,10.47,8,14l3.54-3.54L8,6.93Z"/><rect class="cls-2" x="7.11" y="9.57" width="1.8" height="1.8" transform="translate(21.08 12.2) rotate(135)"/></g></svg>

web/pgadmin/browser/server_groups/servers/databases/schemas/static/img/coll-schema.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#fee;}.cls-2{fill:#bd4949;}</style></defs><title>coll-schema</title><g id="_2" data-name="2"><rect class="cls-1" x="4.05" y="4.05" width="7.89" height="7.89" transform="translate(-3.31 8) rotate(-45)"/><path class="cls-2" d="M8,3l5,5L8,13,3,8,8,3M8,1.89,1.89,8,8,14.11,14.11,8,8,1.89Z"/><rect class="cls-2" x="6.44" y="6.44" width="3.11" height="3.11" transform="translate(19.31 8) rotate(135)"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#fee;}.cls-2{fill:#bd4949;}</style></defs><title>schema</title><g id="_2" data-name="2"><rect class="cls-1" x="2.87" y="3.41" width="4.25" height="4.25" transform="translate(-2.45 5.15) rotate(-45)"/><path class="cls-2" d="M5,3.06,7.47,5.53,5,8,2.52,5.53,5,3.06M5,2,1.46,5.53,5,9.07,8.53,5.53,5,2Z"/><rect class="cls-2" x="4.11" y="4.63" width="1.8" height="1.8" transform="translate(12.46 5.91) rotate(135)"/><rect class="cls-1" x="8.88" y="3.41" width="4.25" height="4.25" transform="translate(-0.69 9.4) rotate(-45)"/><path class="cls-2" d="M11,3.06l2.47,2.47L11,8,8.53,5.53,11,3.06M11,2,7.47,5.53,11,9.07l3.54-3.54L11,2Z"/><rect class="cls-2" x="10.12" y="4.63" width="1.8" height="1.8" transform="translate(22.72 1.66) rotate(135)"/><rect class="cls-1" x="5.87" y="8.34" width="4.25" height="4.25" transform="translate(-5.06 8.72) rotate(-45)"/><path class="cls-2" d="M8,8l2.47,2.47L8,12.94,5.52,10.47,8,8M8,6.93,4.46,10.47,8,14l3.54-3.54L8,6.93Z"/><rect class="cls-2" x="7.11" y="9.57" width="1.8" height="1.8" transform="translate(21.08 12.2) rotate(135)"/></g></svg>

web/pgadmin/browser/server_groups/servers/databases/schemas/static/img/schema.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#fee;}.cls-2{fill:#bd4949;}</style></defs><title>schema</title><g id="_2" data-name="2"><rect class="cls-1" x="2.87" y="3.41" width="4.25" height="4.25" transform="translate(-2.45 5.15) rotate(-45)"/><path class="cls-2" d="M5,3.06,7.47,5.53,5,8,2.52,5.53,5,3.06M5,2,1.46,5.53,5,9.07,8.53,5.53,5,2Z"/><rect class="cls-2" x="4.11" y="4.63" width="1.8" height="1.8" transform="translate(12.46 5.91) rotate(135)"/><rect class="cls-1" x="8.88" y="3.41" width="4.25" height="4.25" transform="translate(-0.69 9.4) rotate(-45)"/><path class="cls-2" d="M11,3.06l2.47,2.47L11,8,8.53,5.53,11,3.06M11,2,7.47,5.53,11,9.07l3.54-3.54L11,2Z"/><rect class="cls-2" x="10.12" y="4.63" width="1.8" height="1.8" transform="translate(22.72 1.66) rotate(135)"/><rect class="cls-1" x="5.87" y="8.34" width="4.25" height="4.25" transform="translate(-5.06 8.72) rotate(-45)"/><path class="cls-2" d="M8,8l2.47,2.47L8,12.94,5.52,10.47,8,8M8,6.93,4.46,10.47,8,14l3.54-3.54L8,6.93Z"/><rect class="cls-2" x="7.11" y="9.57" width="1.8" height="1.8" transform="translate(21.08 12.2) rotate(135)"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#fee;}.cls-2{fill:#bd4949;}</style></defs><title>coll-schema</title><g id="_2" data-name="2"><rect class="cls-1" x="4.05" y="4.05" width="7.89" height="7.89" transform="translate(-3.31 8) rotate(-45)"/><path class="cls-2" d="M8,3l5,5L8,13,3,8,8,3M8,1.89,1.89,8,8,14.11,14.11,8,8,1.89Z"/><rect class="cls-2" x="6.44" y="6.44" width="3.11" height="3.11" transform="translate(19.31 8) rotate(135)"/></g></svg>

web/pgadmin/browser/server_groups/servers/databases/schemas/tables/column/__init__.py

@@ -26,6 +26,7 @@ from pgadmin.utils.ajax import make_json_response, internal_server_error, \
 from pgadmin.utils.driver import get_driver
 from config import PG_DEFAULT_DRIVER
 from pgadmin.utils import IS_PY2
+from pgadmin.utils.ajax import ColParamsJSONDecoder
 # If we are in Python3
 if not IS_PY2:
     unicode = str
@@ -427,7 +428,6 @@ class ColumnsView(PGChildNodeView, DataTypeReader):
 
         # we are receiving request when in edit mode
         # we will send filtered types related to current type
-        present_type = data['cltype']
         type_id = data['atttypid']
 
         SQL = render_template("/".join([self.template_path,
@@ -438,13 +438,7 @@ class ColumnsView(PGChildNodeView, DataTypeReader):
 
         edit_types_list = list()
         # We will need present type in edit mode
-        if data['typnspname'] == "pg_catalog" or \
+        edit_types_list.append(data['cltype'])
-                data['typnspname'] == "public":
-            edit_types_list.append(present_type)
-        else:
-            t = self.qtTypeIdent(self.conn, data['typnspname'], present_type)
-            edit_types_list.append(t)
-            data['cltype'] = t
 
         if int(is_reference) == 0:
             SQL = render_template(
@@ -455,8 +449,6 @@ class ColumnsView(PGChildNodeView, DataTypeReader):
 
             for row in rset['rows']:
                 edit_types_list.append(row['typname'])
-        else:
-            edit_types_list.append(present_type)
 
         data['edit_types'] = edit_types_list
 
@@ -517,14 +509,6 @@ class ColumnsView(PGChildNodeView, DataTypeReader):
             sql template
         """
 
-        # We need to add this exceptional case for manually adding " in type
-        # in json.loads('"char"') is valid json hence it
-        # converts '"char"' -> 'char' as string but if we
-        # send the same in collection json.loads() handles it properly in
-        # Table & Type nodes, This handling handling is Column node specific
-        if type == 'char':
-            type = '"char"'
-
         if '[]' in type:
             type = type.replace('[]', '')
             self.hasSqrBracket = True
@@ -568,10 +552,7 @@ class ColumnsView(PGChildNodeView, DataTypeReader):
         )
 
         for k, v in data.items():
-            try:
+            data[k] = json.loads(v, encoding='utf-8', cls=ColParamsJSONDecoder)
-                data[k] = json.loads(v, encoding='utf-8')
-            except (ValueError, TypeError, KeyError):
-                data[k] = v
 
         required_args = {
             'name': 'Name',
@@ -747,10 +728,7 @@ class ColumnsView(PGChildNodeView, DataTypeReader):
         """
         data = dict()
         for k, v in request.args.items():
-            try:
+            data[k] = json.loads(v, encoding='utf-8', cls=ColParamsJSONDecoder)
-                data[k] = json.loads(v, encoding='utf-8')
-            except (ValueError, TypeError, KeyError):
-                data[k] = v
 
         # Adding parent into data dict, will be using it while creating sql
         data['schema'] = self.schema

web/pgadmin/browser/server_groups/servers/databases/schemas/tables/constraints/foreign_key/templates/foreign_key/css/foreign_key.css

@@ -13,6 +13,6 @@
   background-size: 20px !important;
   align-content: center;
   vertical-align: middle;
-  border-radius: 10px
+  border-radius: 10px;
   height: 1.3em;
 }

web/pgadmin/browser/server_groups/servers/databases/schemas/tables/static/js/partition.utils.js

@@ -4,9 +4,7 @@ define('pgadmin.node.table_partition_utils', [
 ], function(gettext, $, _, Backbone, pgBrowser, Backform, Backgrid) {
 
   Backgrid.PartitionRow = Backgrid.Row.extend({
-    modelDuplicateColor: 'lightYellow',
+    modelDuplicateClass: 'bg-model-duplicate',
-
-    modelUniqueColor: '#fff',
 
     initialize: function () {
       Backgrid.Row.prototype.initialize.apply(this, arguments);
@@ -34,10 +32,10 @@ define('pgadmin.node.table_partition_utils', [
     },
     modelDuplicate: function() {
       $(this.el).removeClass('new');
-      this.el.style.backgroundColor = this.modelDuplicateColor;
+      $(this.el).addClass(this.modelDuplicateClass);
     },
     modelUnique: function() {
-      this.el.style.backgroundColor = this.modelUniqueColor;
+      $(this.el).removeClass(this.modelDuplicateClass);
     },
   });
 

web/pgadmin/browser/server_groups/servers/databases/schemas/tables/templates/column/sql/9.2_plus/edit_mode_types.sql

@@ -1,5 +0,0 @@
-SELECT tt.oid, format_type(tt.oid,NULL) AS typname
-FROM pg_cast
-    JOIN pg_type tt ON tt.oid=casttarget
-WHERE castsource={{type_id}}
-    AND castcontext IN ('i', 'a')

web/pgadmin/browser/server_groups/servers/databases/schemas/tables/templates/column/sql/9.2_plus/properties.sql

@@ -0,0 +1,44 @@
+SELECT att.attname as name, att.*, def.*, pg_catalog.pg_get_expr(def.adbin, def.adrelid) AS defval,
+        CASE WHEN att.attndims > 0 THEN 1 ELSE 0 END AS isarray,
+        format_type(ty.oid,NULL) AS typname,
+        format_type(ty.oid,att.atttypmod) AS displaytypname,
+        CASE WHEN ty.typelem > 0 THEN ty.typelem ELSE ty.oid END as elemoid,
+        tn.nspname as typnspname, et.typname as elemtypname,
+        ty.typstorage AS defaultstorage, cl.relname, na.nspname,
+        concat(quote_ident(na.nspname) ,'.', quote_ident(cl.relname)) AS parent_tbl,
+	att.attstattarget, description, cs.relname AS sername,
+	ns.nspname AS serschema,
+	(SELECT count(1) FROM pg_type t2 WHERE t2.typname=ty.typname) > 1 AS isdup,
+	indkey, coll.collname, nspc.nspname as collnspname , attoptions,
+	-- Start pgAdmin4, added to save time on client side parsing
+	CASE WHEN length(coll.collname) > 0 AND length(nspc.nspname) > 0  THEN
+	  concat(quote_ident(nspc.nspname),'.',quote_ident(coll.collname))
+	ELSE '' END AS collspcname,
+	format_type(ty.oid,att.atttypmod) AS cltype,
+	-- End pgAdmin4
+	EXISTS(SELECT 1 FROM pg_constraint WHERE conrelid=att.attrelid AND contype='f' AND att.attnum=ANY(conkey)) As is_fk,
+	(SELECT array_agg(provider || '=' || label) FROM pg_seclabels sl1 WHERE sl1.objoid=att.attrelid AND sl1.objsubid=att.attnum) AS seclabels,
+	(CASE WHEN (att.attnum < 1) THEN true ElSE false END) AS is_sys_column
+FROM pg_attribute att
+  JOIN pg_type ty ON ty.oid=atttypid
+  JOIN pg_namespace tn ON tn.oid=ty.typnamespace
+  JOIN pg_class cl ON cl.oid=att.attrelid
+  JOIN pg_namespace na ON na.oid=cl.relnamespace
+  LEFT OUTER JOIN pg_type et ON et.oid=ty.typelem
+  LEFT OUTER JOIN pg_attrdef def ON adrelid=att.attrelid AND adnum=att.attnum
+  LEFT OUTER JOIN pg_description des ON (des.objoid=att.attrelid AND des.objsubid=att.attnum AND des.classoid='pg_class'::regclass)
+  LEFT OUTER JOIN (pg_depend JOIN pg_class cs ON classid='pg_class'::regclass AND objid=cs.oid AND cs.relkind='S') ON refobjid=att.attrelid AND refobjsubid=att.attnum
+  LEFT OUTER JOIN pg_namespace ns ON ns.oid=cs.relnamespace
+  LEFT OUTER JOIN pg_index pi ON pi.indrelid=att.attrelid AND indisprimary
+  LEFT OUTER JOIN pg_collation coll ON att.attcollation=coll.oid
+  LEFT OUTER JOIN pg_namespace nspc ON coll.collnamespace=nspc.oid
+WHERE att.attrelid = {{tid}}::oid
+{% if clid %}
+    AND att.attnum = {{clid}}::int
+{% endif %}
+{### To show system objects ###}
+{% if not show_sys_objects %}
+    AND att.attnum > 0
+{% endif %}
+    AND att.attisdropped IS FALSE
+    ORDER BY att.attnum

web/pgadmin/browser/server_groups/servers/databases/schemas/tables/templates/column/sql/default/create.sql

@@ -7,7 +7,7 @@
 ALTER TABLE {{conn|qtIdent(data.schema, data.table)}}
     ADD COLUMN {{conn|qtIdent(data.name)}} {% if is_sql %}{{data.displaytypname}}{% else %}{{ GET_TYPE.CREATE_TYPE_SQL(conn, data.cltype, data.attlen, data.attprecision, data.hasSqrBracket) }}{% endif %}{% if data.collspcname %}
  COLLATE {{data.collspcname}}{% endif %}{% if data.attnotnull %}
- NOT NULL{% endif %}{% if data.defval is defined and data.defval is not none %}
+ NOT NULL{% endif %}{% if data.defval and data.defval is not none %}
  DEFAULT {{data.defval}}{% endif %};
 
 {% endif %}

web/pgadmin/browser/server_groups/servers/databases/schemas/tables/templates/column/sql/default/edit_mode_types.sql

@@ -1,5 +1,11 @@
 SELECT tt.oid, format_type(tt.oid,NULL) AS typname
-  FROM pg_cast
+FROM pg_type tt
-  JOIN pg_type tt ON tt.oid=casttarget
+WHERE tt.oid in (
-WHERE castsource={{type_id}}
+	SELECT casttarget from pg_cast
-   AND castcontext IN ('i', 'a')
+	WHERE castsource = {{type_id}}
+	AND castcontext IN ('i', 'a')
+	UNION
+	SELECT typbasetype from pg_type where oid = {{type_id}}
+	UNION
+	SELECT oid FROM pg_type WHERE typbasetype = {{type_id}}
+)

web/pgadmin/browser/server_groups/servers/databases/schemas/tables/utils.py

@@ -250,7 +250,6 @@ class BaseTableView(PGChildNodeView, BasePartitionTable):
 
                 # we are receiving request when in edit mode
                 # we will send filtered types related to current type
-                present_type = column['cltype']
 
                 type_id = column['atttypid']
 
@@ -290,15 +289,7 @@ class BaseTableView(PGChildNodeView, BasePartitionTable):
 
                 edit_types_list = list()
                 # We will need present type in edit mode
-
+                edit_types_list.append(column['cltype'])
-                if column['typnspname'] == "pg_catalog" \
-                        or column['typnspname'] == "public":
-                    edit_types_list.append(present_type)
-                else:
-                    t = self.qtTypeIdent(self.conn, column['typnspname'],
-                                         present_type)
-                    edit_types_list.append(t)
-                    column['cltype'] = t
 
                 if int(is_reference) == 0:
                     SQL = render_template("/".join([self.column_template_path,
@@ -308,8 +299,6 @@ class BaseTableView(PGChildNodeView, BasePartitionTable):
 
                     for row in rset['rows']:
                         edit_types_list.append(row['typname'])
-                else:
-                    edit_types_list.append(present_type)
 
                 column['edit_types'] = edit_types_list
                 column['cltype'] = DataTypeReader.parse_type_name(

web/pgadmin/browser/server_groups/servers/static/js/variable.js

@@ -69,9 +69,7 @@ define([
        * variable name.
        */
     var VariableRow = Backgrid.Row.extend({
-      modelDuplicateColor: 'lightYellow',
+      modelDuplicateClass: 'bg-model-duplicate',
-
-      modelUniqueColor: '#fff',
 
       initialize: function () {
         Backgrid.Row.prototype.initialize.apply(this, arguments);
@@ -101,10 +99,10 @@ define([
       },
       modelDuplicate: function() {
         $(this.el).removeClass('new');
-        this.el.style.backgroundColor = this.modelDuplicateColor;
+        $(this.el).addClass(this.modelDuplicateClass);
       },
       modelUnique: function() {
-        this.el.style.backgroundColor = this.modelUniqueColor;
+        $(this.el).removeClass(this.modelDuplicateClass);
       },
 
     });

web/pgadmin/browser/server_groups/servers/static/scss/_servers.scss

@@ -0,0 +1,3 @@
+.bg-model-duplicate {
+  @extend .bg-warning-light;
+}

web/pgadmin/browser/static/css/browser.css

@@ -23,12 +23,6 @@
     padding-bottom: 50px /* Offset the nav bar to ensure there's enough scroll space */
 }
 
-.browser-tab-bar {
-    padding-left: 5px;
-    padding-top: 5px;
-    background-color: #E6E6E6;
-}
-
 .browser-tab-panes {
     height: 100%;
 }
@@ -50,19 +44,6 @@
   display: table !important;
 }
 
-
-code,
-kbd,
-pre,
-samp,
-.CodeMirror pre {
-  font-family: 'Source Code Pro';
-}
-
-.sql-editor-grid-container {
-  font-family: 'Open Sans' !important;
-}
-
 .pg-login-icon {
   font-size: 16px;
 }
@@ -70,3 +51,12 @@ samp,
 .CodeMirror {
   font-size: 1em;
 }
+
+#pg-spinner .pg-sp-content {
+  position: absolute;
+  width: 100%;
+  top: 40%;
+}
+.pgadmin_header_logo {
+  cursor: default;
+}

web/pgadmin/browser/static/css/wizard.css

@@ -3,19 +3,6 @@
   padding: 0px !important;
 }
 
-.wizard-header {
-  padding: 6px 10px!important;
-  min-height: 35px;
-  max-height: 35px;
-  border-bottom: 2px solid darkgray;
-  background-color: #2C76B4;
-  font-weight: bold;
-  color: white;
-  font-size: 14px;
-  font-weight: bold;
-  border-radius: 0;
-}
-
 .wizard-header h3 {
   font-size: 14px;
   display: inline-block;
@@ -70,19 +57,6 @@
 }
 
 /* Wizard Footer CSS */
-.pgadmin-wizard .footer {
-  background-color: #D2D2D2;
-  border-width: 2px 0px 0px 0px;
-  border-style: solid;
-  border-color: rgb(85, 85, 85);
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  margin: 0;
-  padding: 0;
-}
-
 .pgadmin-wizard .footer .row {
   margin: 0 -6px 3px -6px;
 }
@@ -137,17 +111,6 @@ div.wizard-header.wizard-badge > div > div.col-sm-2 > button.ajs-maximized.ajs-m
   padding: 1.0em 0.1em;
 }
 
-/* Error message css */
-.pgadmin-wizard .error_msg_div {
-  background: #fff;
-  font-size: 13px;
-}
-
-.pgadmin-wizard .error_msg_div p {
-  background: #fff;
-  color: #b92c28;
-}
-
 /* In wizard select2 dropdown doesn't
  * popup because z-index of alertify
  * wizard is greater than the z-index

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

@@ -2,7 +2,7 @@ define('pgadmin.browser', [
   'sources/tree/tree',
   'sources/gettext', 'sources/url_for', 'require', 'jquery', 'underscore', 'underscore.string',
   'bootstrap', 'sources/pgadmin', 'pgadmin.alertifyjs', 'bundled_codemirror',
-  'sources/check_node_visibility', 'pgadmin.browser.utils', 'wcdocker',
+  'sources/check_node_visibility', './toolbar', 'pgadmin.browser.utils', 'wcdocker',
   'jquery.contextmenu', 'jquery.aciplugin', 'jquery.acitree', 'pgadmin.browser.preferences',
   'pgadmin.browser.messages',
   'pgadmin.browser.menu', 'pgadmin.browser.panel',
@@ -13,7 +13,7 @@ define('pgadmin.browser', [
 ], function(
   tree,
   gettext, url_for, require, $, _, S, Bootstrap, pgAdmin, Alertify,
-  codemirror, checkNodeVisibility
+  codemirror, checkNodeVisibility, toolBar
 ) {
   window.jQuery = window.$ = $;
   // Some scripts do export their object in the window only.
@@ -119,6 +119,9 @@ define('pgadmin.browser', [
         isPrivate: true,
         icon: 'fa fa-binoculars',
         content: '<div id="tree" class="aciTree"></div>',
+        onCreate: function(panel) {
+          toolBar.initializeToolbar(panel, wcDocker);
+        },
       }),
       // Properties of the object node
       'properties': new pgAdmin.Browser.Panel({
@@ -289,6 +292,9 @@ define('pgadmin.browser', [
           }
         };
 
+      toolBar.enable(gettext('View Data'), false);
+      toolBar.enable(gettext('Filtered Rows'), false);
+
       // All menus from the object menus (except the create drop-down
       // menu) needs to be removed.
       $obj_mnu.empty();
@@ -348,7 +354,7 @@ define('pgadmin.browser', [
         '#dockerContainer', {
           allowContextMenu: true,
           allowCollapse: false,
-          themePath: '../static/css/',
+          themePath: '../static/css',
           theme: 'webcabin.overrides.css',
         });
       if (obj.docker) {

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

@@ -80,26 +80,26 @@ define([
       var icon = this.$el.find('i');
 
 
-      span.addClass('font-gray-4');
+      span.addClass('text-gray');
-      span.removeClass('font-white');
+      span.removeClass('text-fg-inverse');
-      icon.addClass('font-gray-4');
+      icon.addClass('text-gray');
-      icon.removeClass('font-white');
+      icon.removeClass('text-fg-inverse');
     },
 
     applyEnabledStyle: function() {
       var element = this.$el;
       var span = this.$el.find('span');
 
-      span.addClass('font-white');
+      span.addClass('text-fg-inverse');
-      span.removeClass('font-gray-4');
+      span.removeClass('text-gray');
-      element.find('i').addClass('font-white');
+      element.find('i').addClass('text-fg-inverse');
-      element.find('i').removeClass('font-gray-4');
+      element.find('i').removeClass('text-gray');
 
       span.on('mouseover',() => {
-        element.addClass('bg-gray-5');
+        element.addClass('bg-gray-dark');
       });
       span.on('mouseout',() => {
-        element.removeClass('bg-gray-5');
+        element.removeClass('bg-gray-dark');
       });
     },
 

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

@@ -314,7 +314,7 @@ define('pgadmin.browser.node', [
 
           var onSessionInvalid = function(msg) {
             var alertMessage = '\
-              <div class="media error-in-footer bg-red-1 border-red-2 font-red-3 text-14">\
+              <div class="media error-in-footer bg-danger-lighter border-danger-light text-danger text-14">\
                 <div class="media-body media-middle">\
                   <div class="alert-icon error-icon">\
                     <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>\
@@ -1148,7 +1148,7 @@ define('pgadmin.browser.node', [
               },
             });
 
-            createButtons(buttons, 'header', 'pg-prop-btn-group-above bg-gray-2 border-gray-3');
+            createButtons(buttons, 'header', 'pg-prop-btn-group-above bg-gray-lighter border-gray-light');
           }
           j.append(content);
         }.bind(panel),
@@ -1404,7 +1404,7 @@ define('pgadmin.browser.node', [
                   }, 0);
                 });
               },
-            }], 'footer', 'pg-prop-btn-group-below bg-gray-2 border-gray-3');
+            }], 'footer', 'pg-prop-btn-group-below bg-gray-lighter border-gray-light');
           }
 
           // Create status bar.

web/pgadmin/browser/static/js/node.ui.js

@@ -38,7 +38,7 @@ define([
       ].join(''));
 
       let $btnContainer = $(
-        '<div style="padding: 3px 0px; background-color: #2C76B4; margin-bottom: 3px;">'
+        '<div style="">'
       ).append($selectAll).append($unselectAll);
 
       if (!this.$element.prop('multiple')) {

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

@@ -165,7 +165,8 @@ define(
 
         if (eventName == 'panelClosed') {
           pgBrowser.save_current_layout(pgBrowser);
-          pgAdmin.Dashboard.toggleVisibility(false);
+          /* Pass the closed flag also */
+          pgAdmin.Dashboard.toggleVisibility(false, true);
         } else if (eventName == 'panelVisibilityChanged') {
           if (pgBrowser.tree) {
             pgBrowser.save_current_layout(pgBrowser);
@@ -174,8 +175,10 @@ define(
               pgAdmin.Dashboard.toggleVisibility(pgBrowser.panels.dashboard.panel.isVisible());
             }
             // Explicitly trigger tree selected event when we add the tab.
-            pgBrowser.Events.trigger('pgadmin-browser:tree:selected', selectedNode,
+            if(selectedNode.length) {
-              pgBrowser.tree.itemData(selectedNode), pgBrowser.Node);
+              pgBrowser.Events.trigger('pgadmin-browser:tree:selected', selectedNode,
+                pgBrowser.tree.itemData(selectedNode), pgBrowser.Node);
+            }
           }
         }
       },

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

@@ -0,0 +1,90 @@
+import gettext from 'sources/gettext';
+import _ from 'underscore';
+import pgAdmin from 'sources/pgadmin';
+
+let _toolbarButtons = {};
+let _browserPanel = null;
+
+// Default Tool Bar Buttons.
+let _defaultToolBarButtons = [
+  {
+    label: gettext('Filtered Rows'),
+    btnClass: 'fa fa-filter',
+    text: '',
+    toggled: false,
+    toggleClass: '',
+    parentClass: 'pg-toolbar-btn',
+    enabled: false,
+  },
+  {
+    label: gettext('View Data'),
+    btnClass: 'fa fa-table',
+    text: '',
+    toggled: false,
+    toggleClass: '',
+    parentClass: 'pg-toolbar-btn',
+    enabled: false,
+  },
+  {
+    label: gettext('Query Tool'),
+    btnClass: 'fa fa-bolt',
+    text: '',
+    toggled: false,
+    toggleClass: '',
+    parentClass: 'pg-toolbar-btn',
+    enabled: false,
+  },
+];
+
+// Place holder for non default tool bar buttons.
+let _otherToolbarButtons = [];
+
+// This function is used to add button into the browser panel.
+function registerToolBarButton(btn) {
+  if (!(btn.label in _toolbarButtons)) {
+    _browserPanel.addButton(
+      btn.label, btn.btnClass, btn.text, btn.label, btn.toggled,
+      btn.toggleClass, btn.parentClass, btn.enabled
+    );
+
+    _toolbarButtons[btn.label] = btn;
+  }
+}
+
+// This function is used to add tool bar button and
+// listen on the button event.
+export function initializeToolbar(panel, wcDocker) {
+  _browserPanel = panel;
+
+  // Iterate through default tool bar buttons and add them into the
+  // browser panel.
+  _.each(_defaultToolBarButtons, (btn) => {
+    registerToolBarButton(btn);
+  });
+
+  // Iterate through other tool bar buttons and add them into the
+  // browser panel.
+  _.each(_otherToolbarButtons, (btn) => {
+    registerToolBarButton(btn);
+  });
+
+  // Listen on button click event.
+  panel.on(wcDocker.EVENT.BUTTON, function(data) {
+    if ('name' in data && data.name === 'Query Tool')
+      pgAdmin.DataGrid.show_query_tool('', pgAdmin.Browser.tree.selected());
+    else if ('name' in data && data.name === 'View Data')
+      pgAdmin.DataGrid.show_data_grid({mnuid: 3}, pgAdmin.Browser.tree.selected());
+    else if ('name' in data && data.name === 'Filtered Rows')
+      pgAdmin.DataGrid.show_filtered_row({mnuid: 4}, pgAdmin.Browser.tree.selected());
+  });
+}
+
+// This function is used to enable/disable the specific button
+// based on their label.
+export function enable(label, enable) {
+  if (label in _toolbarButtons) {
+    _browserPanel.buttonEnable(label, enable);
+  } else {
+    console.warn('Developer warning: No tool button found with label: ' + label);
+  }
+}

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

@@ -106,7 +106,7 @@ define([
       '        </div>' +
       '      </div>' +
       '      <div class="col-sm-12 pg-prop-status-bar" style="visibility:hidden">' +
-      '        <div class="media error-in-footer bg-red-1 border-red-2 font-red-3 text-14">' +
+      '        <div class="media error-in-footer bg-danger-lighter border-danger-light text-danger text-14">' +
       '          <div class="media-body media-middle">' +
       '            <div class="alert-icon error-icon">' +
       '              <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>' +

web/pgadmin/browser/static/scss/_browser.scss

@@ -0,0 +1,59 @@
+.browser-tab-bar {
+    padding-left: 5px;
+    padding-top: 5px;
+    background-color: $color-gray-lighter;
+}
+
+code,
+kbd,
+pre,
+samp,
+.CodeMirror pre {
+  font-family: $font-family-editor;
+}
+
+.sql-editor-grid-container {
+  font-family: $font-family-primary !important;
+}
+
+.select2-btn-container {
+    padding: 3px 0px;
+    background-color: $color-primary;
+    margin-bottom: 3px;
+}
+
+#pg-spinner {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: $color-bg-inverse;
+  opacity: 0.6;
+  z-index: 1056;
+}
+
+#pg-spinner .pg-sp-icon {
+  font-size: 50px;
+  text-align: center;
+  color: $color-gray-light;
+}
+
+#pg-spinner .pg-sp-text {
+  font-size: 20px;
+  text-align: center;
+  color: $color-fg-inverse;
+}
+
+.pg-toolbar-btn:hover {
+  border: 1px solid $color-gray-light !important;
+  background-color: $color-gray-lighter !important;
+}
+
+.pg-toolbar-btn {
+  width: 25px !important;
+  height: 23px !important;
+  background-color: $color-bg !important;
+  font-size: 14px !important;
+  color: $color-gray-darker !important;
+  border: 1px solid $color-gray-light !important;
+}

web/pgadmin/browser/static/scss/_wizard.scss

@@ -0,0 +1,36 @@
+.wizard-header {
+  padding: 6px 10px!important;
+  min-height: 35px;
+  max-height: 35px;
+  border-bottom: 2px solid $color-gray-light;
+  background-color: $color-primary;
+  font-weight: bold;
+  color: $color-fg-inverse;
+  font-size: 14px;
+  font-weight: bold;
+  border-radius: 0;
+}
+
+.pgadmin-wizard .footer {
+  background-color: $color-gray-lighter;
+  border-width: 2px 0px 0px 0px;
+  border-style: solid;
+  border-color:  $color-gray-dark;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+  padding: 0;
+}
+
+/* Error message css */
+.pgadmin-wizard .error_msg_div {
+  background: $color-bg;
+  font-size: 13px;
+}
+
+.pgadmin-wizard .error_msg_div p {
+  background: $color-bg;
+  color: $color-danger;
+}

web/pgadmin/browser/templates/browser/index.html

@@ -91,35 +91,6 @@ window.onload = function(e){
 {% endblock %}
 
 {% block body %}
-<style>
-#pg-spinner {
-  position: absolute;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background: black;
-  opacity: 0.6;
-  z-index: 1056;
-}
-#pg-spinner .pg-sp-content {
-  position: absolute;
-  width: 100%;
-  top: 40%;
-}
-#pg-spinner .pg-sp-icon {
-  font-size: 50px;
-  text-align: center;
-  color: #ccc;
-}
-#pg-spinner .pg-sp-text {
-  font-size: 20px;
-  text-align: center;
-  color: #fff;
-}
-.pgadmin_header_logo {
-  cursor: default;
-}
-</style>
 <div id="pg-spinner">
   <div class="pg-sp-content">
     <div class="row"><div class="col-xs-12 pg-sp-icon fa fa-spinner fa-pulse"></div></div>

web/pgadmin/dashboard/__init__.py

@@ -44,9 +44,7 @@ class DashboardModule(PgAdminModule):
         Returns:
             list: the stylesheets used by this module.
         """
-        stylesheets = [
+        stylesheets = []
-            url_for('dashboard.static', filename='css/dashboard.css')
-        ]
         return stylesheets
 
     def get_panels(self):
@@ -83,7 +81,7 @@ class DashboardModule(PgAdminModule):
             help_str=gettext('The number of seconds between graph samples.')
         )
 
-        self.session_stats_refresh = self.dashboard_preference.register(
+        self.tps_stats_refresh = self.dashboard_preference.register(
             'dashboards', 'tps_stats_refresh',
             gettext("Transaction throughput refresh rate"), 'integer',
             1, min_val=1, max_val=999999,
@@ -91,7 +89,7 @@ class DashboardModule(PgAdminModule):
             help_str=gettext('The number of seconds between graph samples.')
         )
 
-        self.session_stats_refresh = self.dashboard_preference.register(
+        self.ti_stats_refresh = self.dashboard_preference.register(
             'dashboards', 'ti_stats_refresh',
             gettext("Tuples in refresh rate"), 'integer',
             1, min_val=1, max_val=999999,
@@ -99,7 +97,7 @@ class DashboardModule(PgAdminModule):
             help_str=gettext('The number of seconds between graph samples.')
         )
 
-        self.session_stats_refresh = self.dashboard_preference.register(
+        self.to_stats_refresh = self.dashboard_preference.register(
             'dashboards', 'to_stats_refresh',
             gettext("Tuples out refresh rate"), 'integer',
             1, min_val=1, max_val=999999,
@@ -107,7 +105,7 @@ class DashboardModule(PgAdminModule):
             help_str=gettext('The number of seconds between graph samples.')
         )
 
-        self.session_stats_refresh = self.dashboard_preference.register(
+        self.bio_stats_refresh = self.dashboard_preference.register(
             'dashboards', 'bio_stats_refresh',
             gettext("Block I/O statistics refresh rate"), 'integer',
             1, min_val=1, max_val=999999,
@@ -131,6 +129,23 @@ class DashboardModule(PgAdminModule):
                              'will be displayed on dashboards.')
         )
 
+        self.graph_data_points = self.dashboard_preference.register(
+            'display', 'graph_data_points',
+            gettext("Show graph data points?"), 'boolean', False,
+            category_label=gettext('Display'),
+            help_str=gettext('If set to True, data points will be '
+                             'visible on graph lines.')
+        )
+
+        self.graph_mouse_track = self.dashboard_preference.register(
+            'display', 'graph_mouse_track',
+            gettext("Show mouse hover tooltip?"), 'boolean', True,
+            category_label=gettext('Display'),
+            help_str=gettext('If set to True, tooltip will appear on mouse '
+                             'hover on the graph lines giving the data point '
+                             'details')
+        )
+
     def get_exposed_url_endpoints(self):
         """
         Returns:

web/pgadmin/dashboard/static/css/dashboard.css

@@ -14,16 +14,6 @@
     cursor: pointer;
 }
 
-.dashboard-icon {
-    color: black;
-}
-
-.dashboard-tab-container {
-    border-left: 1px solid #E2E2E2;
-    border-right: 1px solid #E2E2E2;
-    border-bottom: 1px solid #E2E2E2;
-}
-
 .dashboard-tab-panel > li > a {
     padding: 0px 15px !important;
 }
@@ -42,14 +32,6 @@
     line-height: 30px;
 }
 
-.dashboard-tab-btn-group {
-    background-color: #D2D2D2;
-    border: 2px solid #A9A9A9;
-    left: 0px;
-    right: 0px;
-    padding: 2px;
-}
-
 .dashboard-tab-btn-group button {
     padding: 5px;
 }
@@ -72,17 +54,6 @@
     height: 150px;
 }
 
-.graph-error {
-    background-color: #E2E2E2;
-    padding-top: 20px
-}
-
-.grid-error {
-    background-color: #E2E2E2;
-    padding-top: 20px;
-    padding-bottom: 40px;
-}
-
 .icon-postgres:before {
     height: 43px;
     margin-top: 13px;
@@ -114,47 +85,10 @@
   padding: 0px;
 }
 
-.dashboard-tab-container .subnode-dialog {
-  background-color: white;
-  border: 0px solid #e8e8e8;
-}
-
 .dashboard-tab-container .subnode-dialog .control-label {
   font-weight: inherit;
 }
 
-.dashboard-tab-container .sub-node-form {
-  padding: 0px 0px 0px 1px;
-  background-color: #f8f8f8;
-}
-
-.dashboard-tab-container .subnode-body {
-  background-color: #f8f8f8;
-}
-
-.dashboard-tab-container .sub-node-form > .nav-tabs {
-  background-color: #f8f8f8 !important;
-}
-
-.dashboard-tab-container .subnode-dialog .nav > li > a {
-  font-weight: bold;
-  border-color: #f8f8f8;
-}
-
-.dashboard-tab-container .subnode-dialog .nav-tabs > li.active > a,
-.dashboard-tab-container .subnode-dialog .nav-tabs > li.active > a:hover {
-  border-top: 1px solid #cccccc;
-  border-left: 1px solid #cccccc;
-  border-right: 1px solid #cccccc;
-  margin-bottom: -1px;
-  z-index: 10;
-}
-
-.dashboard-tab-container .backgrid .editor {
-  background-color: #f8f8f8 !important;
-  border-bottom-color: #f8f8f8;
-}
-
 .dashboard-tab-container .backgrid.presentation td.editable:not(.edit-cell) {
   padding-right: 25px
 }
@@ -163,10 +97,6 @@
   padding: 5px;
 }
 
-.dashboard-tab-container .subnode-dialog .tab-pane {
-  border: 1px solid #cccccc;
-}
-
 .dashboard-container .delete-cell .fa-times-circle:before {
   font-size: 14px;
 }

web/pgadmin/dashboard/static/js/charting.js

@@ -0,0 +1,99 @@
+import Flotr from 'flotr2';
+
+export class Chart {
+  constructor(container, options) {
+    this.chartApi = Flotr;
+    /* Html Node where the graph goes */
+    this._container = container;
+    /* Graph library options */
+    this._options = {};
+    this._defaultOptions = {
+      legend: {
+        position: 'nw',
+        backgroundColor: '#D2E8FF',
+      },
+      lines: {
+        show: true,
+        lineWidth: 2,
+      },
+      shadowSize: 0,
+      resolution : 3,
+    };
+
+    this._dataset = null;
+    this._tooltipFormatter = null;
+    /* Just to store other data related to charts. Used nowhere here in the module */
+    this._otherData = {};
+    this.setOptions(options);
+  }
+
+  getContainer() {
+    return this._container;
+  }
+
+  getContainerDimensions() {
+    return {
+      height: this._container.clientHeight,
+      width: this._container.clientWidth,
+    };
+  }
+
+  getOptions() {
+    return this._options;
+  }
+
+  /* This should be changed if library changed */
+  setOptions(options, mergeOptions=true) {
+    /* If mergeOptions then merge the options, else replace existing options */
+    if(mergeOptions) {
+      this._options = {...this._defaultOptions, ...this._options, ...options};
+    } else {
+      this._options = {...this._defaultOptions, ...options};
+    }
+  }
+
+  removeOptions(optionKey) {
+    if(this._options[optionKey]) {
+      delete this._options[optionKey];
+    }
+  }
+
+  getOtherData(key) {
+    return this._otherData[key];
+  }
+
+  setOtherData(key, value) {
+    this._otherData[key] = value;
+  }
+
+  isVisible() {
+    let dim = this.getContainerDimensions();
+    return (dim.height > 0 && dim.width > 0);
+  }
+
+  isInPage() {
+    return (this._container === document.body) ? false : document.body.contains(this._container);
+  }
+
+  setTooltipFormatter(tooltipFormatter) {
+    let opt = this.getOptions();
+
+    this._tooltipFormatter = tooltipFormatter;
+
+    if(this._tooltipFormatter) {
+      this.setOptions({
+        mouse: {
+          ...opt.mouse,
+          trackFormatter: this._tooltipFormatter,
+        },
+      });
+    }
+  }
+
+  draw(dataset) {
+    this._dataset = dataset;
+    if(this._container) {
+      Flotr.draw(this._container, this._dataset, this._options);
+    }
+  }
+}

web/pgadmin/dashboard/static/js/dashboard.js

@@ -1,11 +1,11 @@
 define('pgadmin.dashboard', [
   'sources/url_for', 'sources/gettext', 'require', 'jquery', 'underscore',
-  'sources/pgadmin', 'backbone', 'backgrid', 'flotr2',
+  'sources/pgadmin', 'backbone', 'backgrid', './charting',
   'pgadmin.alertifyjs', 'pgadmin.backform',
   'sources/nodes/dashboard', 'backgrid.filter',
   'pgadmin.browser', 'bootstrap', 'wcdocker',
 ], function(
-  url_for, gettext, r, $, _, pgAdmin, Backbone, Backgrid, Flotr,
+  url_for, gettext, r, $, _, pgAdmin, Backbone, Backgrid, charting,
   Alertify, Backform, NodesDashboard
 ) {
 
@@ -210,10 +210,8 @@ define('pgadmin.dashboard', [
       // Load the default welcome dashboard
       var url = url_for('dashboard.index');
 
-      /* Store the interval ids of the graph interval functions so that we can clear
+      /* Store the chart objects and there interval ids in this store */
-       * them when graphs are disabled
+      this.chartStore = {};
-       */
-      this.intervalIds = {};
 
       var dashboardPanel = pgBrowser.panels['dashboard'].panel;
       if (dashboardPanel) {
@@ -266,7 +264,7 @@ define('pgadmin.dashboard', [
           !_.isUndefined(itemData.connected) &&
             itemData.connected !== true
         ) {
-          self.clearIntervalId();
+          self.clearChartFromStore();
         }
       } else if (itemData && itemData._type) {
         var treeHierarchy = node.getTreeNodeHierarchy(item),
@@ -331,8 +329,8 @@ define('pgadmin.dashboard', [
               ) {
                 $(div).empty();
 
-                /* Clear all the interval functions of previous dashboards */
+                /* Clear all the charts previous dashboards */
-                self.clearIntervalId();
+                self.clearChartFromStore();
 
                 $.ajax({
                   url: url,
@@ -356,8 +354,8 @@ define('pgadmin.dashboard', [
                 !_.isUndefined(itemData.connected) &&
                   itemData.connected !== true
               ) {
-                /* Clear all the interval functions of previous dashboards */
+                /* Clear all the charts previous dashboards */
-                self.clearIntervalId();
+                self.clearChartFromStore();
               }
               $(div).html(
                 '<div class="alert alert-info pg-panel-message" role="alert">' + gettext('Please connect to the selected server to view the dashboard.') + '</div>'
@@ -371,7 +369,7 @@ define('pgadmin.dashboard', [
       }
     },
 
-    renderChartLoop: function(container, sid, did, url, options, counter, refresh) {
+    renderChartLoop: function(chartObj, sid, did, url, counter, refresh) {
       var data = [],
         dataset = [];
 
@@ -386,24 +384,22 @@ define('pgadmin.dashboard', [
           dataType: 'html',
         })
         .done(function(resp) {
-          $(container).removeClass('graph-error');
+          $(chartObj.getContainer()).removeClass('graph-error');
           data = JSON.parse(resp);
-          if (!dashboardVisible)
-            return;
 
           var y = 0,
             x;
           if (dataset.length == 0) {
             if (counter == true) {
               // Have we stashed initial values?
-              if (_.isUndefined($(container).data('counter_previous_vals'))) {
+              if (_.isUndefined(chartObj.getOtherData('counter_previous_vals'))) {
-                $(container).data('counter_previous_vals', data[0]);
+                chartObj.setOtherData('counter_previous_vals', data[0]);
               } else {
                 // Create the initial data structure
                 for (x in data[0]) {
                   dataset.push({
                     'data': [
-                      [0, data[0][x] - $(container).data('counter_previous_vals')[x]],
+                      [0, data[0][x] - chartObj.getOtherData('counter_previous_vals')[x]],
                     ],
                     'label': x,
                   });
@@ -429,10 +425,10 @@ define('pgadmin.dashboard', [
               } else {
                 // Store the current value, minus the previous one we stashed.
                 // It's possible the tab has been reloaded, in which case out previous values are gone
-                if (_.isUndefined($(container).data('counter_previous_vals')))
+                if (_.isUndefined(chartObj.getOtherData('counter_previous_vals')))
                   return;
 
-                dataset[y]['data'].unshift([0, data[0][x] - $(container).data('counter_previous_vals')[x]]);
+                dataset[y]['data'].unshift([0, data[0][x] - chartObj.getOtherData('counter_previous_vals')[x]]);
               }
 
               // Reset the time index to get a proper scrolling display
@@ -442,7 +438,7 @@ define('pgadmin.dashboard', [
 
               y++;
             }
-            $(container).data('counter_previous_vals', data[0]);
+            chartObj.setOtherData('counter_previous_vals', data[0]);
           }
 
           // Remove uneeded elements
@@ -453,12 +449,9 @@ define('pgadmin.dashboard', [
             }
           }
 
-          // Draw Graph, if the container still exists and has a size
+          if (chartObj.isInPage()) {
-          var dashboardPanel = pgBrowser.panels['dashboard'].panel;
+            if (chartObj.isVisible()) {
-          var div = dashboardPanel.layout().scene().find('.pg-panel-content');
+              chartObj.draw(dataset);
-          if ($(div).find(container).length) { // Exists?
-            if (container.clientHeight > 0 && container.clientWidth > 0) { // Not hidden?
-              Flotr.draw(container, dataset, options);
             }
           } else {
             return;
@@ -487,8 +480,8 @@ define('pgadmin.dashboard', [
             }
           }
 
-          $(container).addClass('graph-error');
+          $(chartObj.getContainer()).addClass('graph-error');
-          $(container).html(
+          $(chartObj.getContainer()).html(
             '<div class="alert alert-' + cls + ' pg-panel-message" role="alert">' + msg + '</div>'
           );
         });
@@ -510,15 +503,41 @@ define('pgadmin.dashboard', [
       //     { data: [[0, y0], [1, y1]...], label: 'Label 3', [options] }
       // ]
 
-      let self = this;
+      let self = this,
-      if(self.intervalIds[chartName]
+        tooltipFormatter = function(refresh, currVal) {
+          return(`Seconds ago: ${parseInt(currVal.x * refresh)}</br>
+                  Value: ${currVal.y}`);
+        };
+
+      if(self.chartStore[chartName]
         && self.old_preferences[prefName] != self.preferences[prefName]) {
-        self.clearIntervalId(chartName);
+        self.clearChartFromStore(chartName);
       }
-      if(!self.intervalIds[chartName]) {
+
-        self.intervalIds[chartName] = self.renderChartLoop(
+      if(self.chartStore[chartName]) {
-          container, self.sid, self.did, url,
+        let chartObj = self.chartStore[chartName].chartObj;
-          options, counter, self.preferences[prefName]
+        chartObj.setOptions(options, false);
+        chartObj.setTooltipFormatter(
+          tooltipFormatter.bind(null, self.preferences[prefName])
+        );
+      }
+
+      if(!self.chartStore[chartName]) {
+
+        let chartObj = new charting.Chart(container, options);
+
+        chartObj.setTooltipFormatter(
+          tooltipFormatter.bind(null, self.preferences[prefName])
+        );
+
+        self.chartStore[chartName] = {
+          'chartObj' : chartObj,
+          'intervalId' : undefined,
+        };
+
+        self.chartStore[chartName]['intervalId'] = self.renderChartLoop(
+          self.chartStore[chartName]['chartObj'], self.sid, self.did, url,
+          counter, self.preferences[prefName]
         );
       }
     },
@@ -666,17 +685,17 @@ define('pgadmin.dashboard', [
       });
     },
 
-    clearIntervalId: function(intervalId) {
+    clearChartFromStore: function(chartName) {
       var self = this;
-      if(!intervalId){
+      if(!chartName){
-        _.each(self.intervalIds, function(id, key) {
+        _.each(self.chartStore, function(chart, key) {
-          clearInterval(id);
+          clearInterval(chart.intervalId);
-          delete self.intervalIds[key];
+          delete self.chartStore[key];
         });
       }
       else {
-        clearInterval(self.intervalIds[intervalId]);
+        clearInterval(self.chartStore[chartName].intervalId);
-        delete self.intervalIds[intervalId];
+        delete self.chartStore[chartName];
       }
     },
 
@@ -737,20 +756,41 @@ define('pgadmin.dashboard', [
           yaxis: {
             autoscale: 1,
           },
-          legend: {
-            position: 'nw',
-            backgroundColor: '#D2E8FF',
-          },
-          shadowSize: 0,
-          resolution : 5,
         };
 
+        if(self.preferences.graph_data_points) {
+          /* Merge data points related options */
+          options_line = {
+            ...options_line,
+            ...{
+              points: {
+                show:true,
+                radius: 1,
+                hitRadius: 3,
+              },
+            },
+          };
+        }
+
+        if(self.preferences.graph_mouse_track) {
+          /* Merge mouse track related options */
+          options_line = {
+            ...options_line,
+            ...{
+              mouse: {
+                track:true,
+                position: 'sw',
+              },
+            },
+          };
+        }
+
         if(self.preferences.show_graphs && $('#dashboard-graphs').hasClass('dashboard-hidden')) {
           $('#dashboard-graphs').removeClass('dashboard-hidden');
         }
         else if(!self.preferences.show_graphs) {
           $('#dashboard-graphs').addClass('dashboard-hidden');
-          self.clearIntervalId();
+          self.clearChartFromStore();
         }
 
         if (self.preferences.show_activity && $('#dashboard-activity').hasClass('dashboard-hidden')) {
@@ -1344,8 +1384,11 @@ define('pgadmin.dashboard', [
         });
       }
     },
-    toggleVisibility: function(flag) {
+    toggleVisibility: function(visible, closed=false) {
-      dashboardVisible = flag;
+      dashboardVisible = visible;
+      if(closed) {
+        this.clearChartFromStore();
+      }
     },
     can_take_action: function(m) {
       // We will validate if user is allowed to cancel the active query

web/pgadmin/dashboard/static/scss/_dashboard.scss

@@ -0,0 +1,69 @@
+.dashboard-icon {
+    color: $color-fg;
+}
+
+.dashboard-tab-container {
+    border-left: 1px solid $color-gray-lighter;
+    border-right: 1px solid $color-gray-lighter;
+    border-bottom: 1px solid $color-gray-lighter;
+}
+
+.dashboard-tab-btn-group {
+    background-color: $color-gray-light;
+    border: 2px solid  $color-gray;
+    left: 0px;
+    right: 0px;
+    padding: 2px;
+}
+
+.graph-error {
+    background-color: $color-gray-lighter;
+    padding-top: 20px
+}
+
+.grid-error {
+    background-color: $color-gray-lighter;
+    padding-top: 20px;
+    padding-bottom: 40px;
+}
+
+.dashboard-tab-container .subnode-dialog {
+  background-color: $color-bg;
+  border: 0px solid $color-gray-lighter;
+}
+
+.dashboard-tab-container .sub-node-form {
+  padding: 0px 0px 0px 1px;
+  background-color: $color-gray-lighter;
+}
+
+.dashboard-tab-container .subnode-body {
+  background-color: $color-gray-lighter;
+}
+
+.dashboard-tab-container .sub-node-form > .nav-tabs {
+  background-color: $color-gray-lighter !important;
+}
+
+.dashboard-tab-container .subnode-dialog .nav > li > a {
+  font-weight: bold;
+  border-color: $color-gray-lighter;
+}
+
+.dashboard-tab-container .subnode-dialog .nav-tabs > li.active > a,
+.dashboard-tab-container .subnode-dialog .nav-tabs > li.active > a:hover {
+  border-top: 1px solid $color-gray-lighter;
+  border-left: 1px solid $color-gray-lighter;
+  border-right: 1px solid $color-gray-lighter;
+  margin-bottom: -1px;
+  z-index: 10;
+}
+
+.dashboard-tab-container .backgrid .editor {
+  background-color: $color-gray-lighter !important;
+  border-bottom-color: $color-gray-lighter;
+}
+
+.dashboard-tab-container .subnode-dialog .tab-pane {
+  border: 1px solid $color-gray-lighter;
+}

web/pgadmin/feature_tests/browser_tool_bar_test.py

@@ -0,0 +1,115 @@
+##########################################################################
+#
+# pgAdmin 4 - PostgreSQL Tools
+#
+# Copyright (C) 2013 - 2018, The pgAdmin Development Team
+# This software is released under the PostgreSQL Licence
+#
+##########################################################################
+
+from __future__ import print_function
+import sys
+import random
+import time
+
+from regression.python_test_utils import test_utils
+from regression.feature_utils.base_feature_test import BaseFeatureTest
+from selenium.common.exceptions import TimeoutException, \
+    StaleElementReferenceException
+
+
+class BrowserToolBarFeatureTest(BaseFeatureTest):
+    """
+        This feature test will test the tool bar on Browser panel.
+    """
+
+    scenarios = [
+        ("Browser tool bar feature test", dict())
+    ]
+
+    test_table_name = ""
+
+    def before(self):
+        self.page.wait_for_spinner_to_disappear()
+        self.page.add_server(self.server)
+        self.test_table_name = "test_table" + str(random.randint(1000, 3000))
+        test_utils.create_table(self.server, self.test_db,
+                                self.test_table_name)
+
+    def runTest(self):
+        # Check for query tool button
+        print("\nQuery Tool ToolBar Button ",
+              file=sys.stderr, end="")
+        self.test_query_tool_button()
+        print("OK.", file=sys.stderr)
+
+        # Check for view data button
+        print("\nView Data ToolBar Button ",
+              file=sys.stderr, end="")
+        self.test_view_data_tool_button()
+        print("OK.", file=sys.stderr)
+
+        # Check for filtered rows button
+        print("\nFiltered Rows ToolBar Button ",
+              file=sys.stderr, end="")
+        self.test_filtered_rows_tool_button()
+        print("OK.", file=sys.stderr)
+
+    def after(self):
+        self.page.remove_server(self.server)
+
+    def _locate_database_tree_node(self):
+        self.page.toggle_open_tree_item(self.server['name'])
+        self.page.toggle_open_tree_item('Databases')
+        self.page.toggle_open_tree_item(self.test_db)
+
+    def test_query_tool_button(self):
+        self._locate_database_tree_node()
+
+        retry_count = 0
+        while retry_count < 5:
+            try:
+                self.page.find_by_xpath(
+                    "//*[contains(@class,'pg-toolbar-btn') and "
+                    "contains(@title, 'Query Tool')]").click()
+                break
+            except StaleElementReferenceException:
+                retry_count += 1
+
+        time.sleep(0.5)
+        self.page.find_by_xpath("//*[contains(@class,'wcTabIcon fa fa-bolt')]")
+
+    def test_view_data_tool_button(self):
+        self.page.toggle_open_tree_item('Schemas')
+        self.page.toggle_open_tree_item('public')
+        self.page.toggle_open_tree_item('Tables')
+        self.page.select_tree_item(self.test_table_name)
+
+        retry_count = 0
+        while retry_count < 5:
+            try:
+                self.page.find_by_xpath(
+                    "//*[contains(@class,'pg-toolbar-btn') and "
+                    "contains(@title, 'View Data')]").click()
+                break
+            except StaleElementReferenceException:
+                retry_count += 1
+
+        time.sleep(0.5)
+        self.page.find_by_xpath("//*[contains(@class,'wcTabIcon fa fa-bolt')]")
+
+    def test_filtered_rows_tool_button(self):
+        retry_count = 0
+        while retry_count < 5:
+            try:
+                self.page.find_by_xpath(
+                    "//*[contains(@class,'pg-toolbar-btn') and "
+                    "contains(@title, 'Filtered Rows')]").click()
+                break
+            except StaleElementReferenceException:
+                retry_count += 1
+
+        time.sleep(0.5)
+        self.page.find_by_xpath("//*[contains(@class, 'ajs-header') and "
+                                "contains(., 'Data Filter')]")
+        self.page.click_modal('Cancel')

web/pgadmin/feature_tests/query_tool_auto_complete_tests.py

@@ -13,8 +13,6 @@ import random
 
 from selenium.webdriver import ActionChains
 from selenium.webdriver.common.keys import Keys
-from selenium.webdriver.support.ui import WebDriverWait
-from selenium.webdriver.support import expected_conditions as EC
 from regression.python_test_utils import test_utils
 from regression.feature_utils.base_feature_test import BaseFeatureTest
 
@@ -24,6 +22,8 @@ class QueryToolAutoCompleteFeatureTest(BaseFeatureTest):
         This feature test will test the query tool auto complete feature.
     """
 
+    first_schema_name = ""
+    second_schema_name = ""
     first_table_name = ""
     second_table_name = ""
 
@@ -35,6 +35,17 @@ class QueryToolAutoCompleteFeatureTest(BaseFeatureTest):
         self.page.wait_for_spinner_to_disappear()
 
         self.page.add_server(self.server)
+
+        self.first_schema_name = "test_schema" + \
+                                 str(random.randint(1000, 3000))
+        test_utils.create_schema(self.server, self.test_db,
+                                 self.first_schema_name)
+
+        self.second_schema_name = "comp_schema" + \
+                                  str(random.randint(1000, 3000))
+        test_utils.create_schema(self.server, self.test_db,
+                                 self.second_schema_name)
+
         self.first_table_name = "auto_comp_" + \
                                 str(random.randint(1000, 3000))
         test_utils.create_table(self.server, self.test_db,
@@ -89,6 +100,18 @@ class QueryToolAutoCompleteFeatureTest(BaseFeatureTest):
         print("OK.", file=sys.stderr)
         self._clear_query_tool()
 
+        print("Auto complete schema other than default start with test_ ... ",
+              file=sys.stderr, end="")
+        self._auto_complete("SELECT * FROM te", self.first_schema_name)
+        print("OK.", file=sys.stderr)
+        self._clear_query_tool()
+
+        print("Auto complete schema other than default starts with comp_ ... ",
+              file=sys.stderr, end="")
+        self._auto_complete("SELECT * FROM co", self.second_schema_name)
+        print("OK.", file=sys.stderr)
+        self._clear_query_tool()
+
         print("Auto complete first table in public schema ... ",
               file=sys.stderr, end="")
         self._auto_complete("SELECT * FROM public.", self.first_table_name)

web/pgadmin/feature_tests/query_tool_tests.py

@@ -136,7 +136,7 @@ class QueryToolFeatureTest(BaseFeatureTest):
             btn.click()
 
         # close menu
-        query_op.click()
+        self.page.find_by_xpath("//li[contains(.,'Explain Options')]").click()
 
     def _locate_database_tree_node(self):
         self.page.toggle_open_tree_item(self.server['name'])
@@ -339,7 +339,14 @@ CREATE TABLE public.{}();""".format(table_name)
 
         self.page.find_by_id("btn-auto-commit").click()
 
+        # Close the Explain Options drop down, getting error while clicking
+        # flash button on jenkins windows platform
+        self.page.find_by_xpath("//li[contains(.,'Explain Options')]").click()
+        wait.until(EC.invisibility_of_element_located(
+            (By.XPATH, "//li[contains(.,'Explain Options')]")))
+
         self.page.find_by_id("btn-flash").click()
+
         self.page.wait_for_query_tool_loading_indicator_to_disappear()
         self.page.click_tab('Messages')
         self.page.find_by_xpath(
@@ -355,6 +362,7 @@ CREATE TABLE public.{}();""".format(table_name)
 ROLLBACK;"""
         self.page.fill_codemirror_area_with(query)
         self.page.find_by_id("btn-flash").click()
+
         self.page.wait_for_query_tool_loading_indicator_to_disappear()
         self.page.click_tab('Messages')
         self.page.find_by_xpath(
@@ -371,6 +379,7 @@ SELECT relname FROM pg_class
     WHERE relkind IN ('r','s','t') and relnamespace = 2200::oid;"""
         self.page.fill_codemirror_area_with(query)
         self.page.find_by_id("btn-flash").click()
+
         self.page.wait_for_query_tool_loading_indicator_to_disappear()
         self.page.click_tab('Data Output')
         canvas = wait.until(EC.presence_of_element_located(
@@ -405,6 +414,12 @@ END;"""
 
         self.page.find_by_id("btn-auto-commit").click()
 
+        # Close the Explain Options drop down, getting error while clicking
+        # flash button on jenkins windows platform
+        self.page.find_by_xpath("//li[contains(.,'Explain Options')]").click()
+        wait.until(EC.invisibility_of_element_located(
+            (By.XPATH, "//li[contains(.,'Explain Options')]")))
+
         self.page.find_by_id("btn-flash").click()
 
         self.page.wait_for_query_tool_loading_indicator_to_disappear()
@@ -439,6 +454,7 @@ CREATE TABLE public.{}();""".format(table_name)
 ROLLBACK;"""
         self.page.fill_codemirror_area_with(query)
         self.page.find_by_id("btn-flash").click()
+
         self.page.wait_for_query_tool_loading_indicator_to_disappear()
         self.page.click_tab('Messages')
         self.page.find_by_xpath(
@@ -456,6 +472,7 @@ SELECT relname FROM pg_class
     WHERE relkind IN ('r','s','t') and relnamespace = 2200::oid;"""
         self.page.fill_codemirror_area_with(query)
         self.page.find_by_id("btn-flash").click()
+
         self.page.click_tab('Data Output')
         self.page.wait_for_query_tool_loading_indicator_to_disappear()
 
@@ -478,6 +495,8 @@ SELECT relname FROM pg_class
 -- 5. END transaction.
 -- 6. Check if table is *NOT* created after ending transaction.
 END;"""
+        wait = WebDriverWait(self.page.driver, 10)
+
         self.page.fill_codemirror_area_with(query)
 
         self.page.find_by_id("btn-query-dropdown").click()
@@ -486,7 +505,13 @@ END;"""
 
         self.page.find_by_id("btn-auto-commit").click()
 
+        # Close the Explain Options drop down, getting error while clicking
+        # flash button on jenkins windows platform
+        self.page.find_by_xpath("//li[contains(.,'Explain Options')]").click()
+        wait.until(EC.invisibility_of_element_located(
+            (By.XPATH, "//li[contains(.,'Explain Options')]")))
         self.page.find_by_id("btn-flash").click()
+
         self.page.wait_for_query_tool_loading_indicator_to_disappear()
         self._clear_query_tool()
 
@@ -502,6 +527,7 @@ CREATE TABLE public.{}();""".format(table_name)
         self.page.fill_codemirror_area_with(query)
 
         self.page.find_by_id("btn-flash").click()
+
         self.page.wait_for_query_tool_loading_indicator_to_disappear()
         self.page.click_tab('Messages')
         self.page.find_by_xpath(
@@ -519,6 +545,7 @@ CREATE TABLE public.{}();""".format(table_name)
 SELECT 1/0;"""
         self.page.fill_codemirror_area_with(query)
         self.page.find_by_id("btn-flash").click()
+
         self.page.wait_for_query_tool_loading_indicator_to_disappear()
         self.page.click_tab('Messages')
         self.page.find_by_xpath(
@@ -537,6 +564,7 @@ END;"""
 
         self.page.fill_codemirror_area_with(query)
         self.page.find_by_id("btn-flash").click()
+
         self.page.wait_for_query_tool_loading_indicator_to_disappear()
         self.page.click_tab('Messages')
         self.page.find_by_xpath(
@@ -555,6 +583,7 @@ SELECT relname FROM pg_class
     WHERE relkind IN ('r','s','t') and relnamespace = 2200::oid;"""
         self.page.fill_codemirror_area_with(query)
         self.page.find_by_id("btn-flash").click()
+
         self.page.wait_for_query_tool_loading_indicator_to_disappear()
         self.page.click_tab('Data Output')
         canvas = wait.until(EC.presence_of_element_located(
@@ -574,6 +603,7 @@ SELECT relname FROM pg_class
 -- 4. Cancel long running query execution.
 END;
 SELECT 1, pg_sleep(300)"""
+
         self.page.fill_codemirror_area_with(query)
 
         self.page.find_by_id("btn-query-dropdown").click()
@@ -604,7 +634,15 @@ SELECT 1, pg_sleep(300)"""
            auto_commit_check.get_attribute('class')):
             auto_commit_btn.click()
 
+        # Close the Explain Options drop down, getting error while clicking
+        # flash button on jenkins windows platform
+        wait = WebDriverWait(self.page.driver, 10)
+        self.page.find_by_xpath("//li[contains(.,'Explain Options')]").click()
+        wait.until(EC.invisibility_of_element_located(
+            (By.XPATH, "//li[contains(.,'Explain Options')]")))
+
         self.page.find_by_id("btn-flash").click()
+
         self.page.find_by_xpath("//*[@id='fetching_data']")
         self.page.find_by_id("btn-cancel-query").click()
         self.page.wait_for_query_tool_loading_indicator_to_disappear()
@@ -631,6 +669,7 @@ SELECT 1, pg_sleep(300)"""
         print("\n\tListen on an event... ", file=sys.stderr, end="")
         self.page.fill_codemirror_area_with("LISTEN foo;")
         self.page.find_by_id("btn-flash").click()
+
         self.page.wait_for_query_tool_loading_indicator_to_disappear()
         self.page.click_tab('Messages')
 
@@ -643,6 +682,7 @@ SELECT 1, pg_sleep(300)"""
         print("\tNotify event without data... ", file=sys.stderr, end="")
         self.page.fill_codemirror_area_with("NOTIFY foo;")
         self.page.find_by_id("btn-flash").click()
+
         self.page.wait_for_query_tool_loading_indicator_to_disappear()
         self.page.click_tab('Notifications')
         wait.until(EC.text_to_be_present_in_element(
@@ -656,11 +696,13 @@ SELECT 1, pg_sleep(300)"""
             self.page.fill_codemirror_area_with("SELECT pg_notify('foo', "
                                                 "'Hello')")
             self.page.find_by_id("btn-flash").click()
+
             self.page.wait_for_query_tool_loading_indicator_to_disappear()
             self.page.click_tab('Notifications')
             wait.until(WaitForAnyElementWithText(
                 (By.CSS_SELECTOR, 'td.payload'), "Hello"))
             print("OK.", file=sys.stderr)
+            self._clear_query_tool()
         else:
             print("Skipped.", file=sys.stderr)
 

web/pgadmin/misc/__init__.py

@@ -39,9 +39,6 @@ class MiscModule(PgAdminModule):
 
     def get_own_stylesheets(self):
         stylesheets = []
-        stylesheets.append(
-            url_for('misc.static', filename='explain/css/explain.css')
-        )
         return stylesheets
 
     def register_preferences(self):

web/pgadmin/misc/bgprocess/__init__.py

@@ -34,9 +34,7 @@ class BGProcessModule(PgAdminModule):
         Returns:
             list: the stylesheets used by this module.
         """
-        stylesheets = [
+        stylesheets = []
-            url_for('bgprocess.static', filename='css/bgprocess.css')
-        ]
         return stylesheets
 
     def get_exposed_url_endpoints(self):

web/pgadmin/misc/bgprocess/static/css/bgprocess.css

@@ -2,36 +2,11 @@
   padding: 0px !important;
 }
 
-.ajs-bg-bgprocess > .pg-bg-bgprocess {
-  background-color: #2C76B4;
-  color: #FFFFFF;
-  padding: 0px;
-  border-radius: 5px;
-  text-align: left;
-}
-
 .ajs-bg-bgprocess .col-xs-12 {
   padding-right: 5px;
   padding-left: 5px;
 }
 
-.ajs-bg-bgprocess > .pg-bg-bgprocess > .pg-bg-notify-header {
-  background-color: #333;
-  margin-top: 0px;
-  margin-bottom: 5px;
-  padding: 5px;
-  padding-right: 20px;
-  white-space: pre-wrap;
-  text-align: center;
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
-}
-
-.ajs-bg-bgprocess > .pg-bg-bgprocess > .pg-bg-notify-body {
-  font-family: "Source Code Pro";
-  white-space: nowrap;
-}
-
 .ajs-bg-bgprocess > .pg-bg-bgprocess > .pg-bg-status {
   padding: 2px;
   margin: 5px;
@@ -50,61 +25,11 @@
   user-select: text;
 }
 
-.pg-bg-etime {
-  width: 100%;
-  display: block;
-  font-size: 95%;
-  padding: 5px;
-  font-weight: bold;
-  color: #000;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: baseline;
-  border-radius: .25em;
-  background-color: #E2E2E2;
-  margin-top: 10px;
-  margin-bottom: 5px;
-}
-
-.pg-bg-click {
-  color: #E2E2E2;
-  text-decoration: underline;
-  cursor: pointer;
-}
-
-.pg-bg-click:hover {
-  color: #333;
-}
-
-.ajs-bg-bgprocess > .pg-bg-bgprocess > .pg-bg-status.bg-success,
-.bg-process-status .bg-bgprocess-success {
-  color: green;
-  font-weight: bold;
-}
-
-.bg-process-status .bg-bgprocess-failed {
-  color: red;
-  font-weight: bold;
-}
-
-.ajs-bg-bgprocess > .pg-bg-bgprocess > .pg-bg-status.bg-failed {
-  color: black;
-  background-color: #E99595;
-}
-
 .pg-bg-cmd {
   color: #4156CC;
   font-style: italic;
 }
 
-.pg-panel-content div.bg-process-watcher.col-xs-12 {
-  height: 100%;
-  padding: 0px 0px 0px 0px;
-  WebkitTransition: all 1s;
-  transition: all 1s;
-  background-color: #D9EDF7;
-}
-
 ol.pg-bg-process-logs {
   padding: 5px 10px 5px 60px;
   height: 100%;
@@ -119,21 +44,6 @@ ol.pg-bg-process-logs {
   white-space: pre-wrap;
 }
 
-.pg-bg-res-out {
-  color: #337AB7;
-}
-
-.pg-bg-res-err {
-  color: rgba(212, 27, 57, 0.81);
-}
-
-.pg-panel-content .bg-process-details {
-  padding: 10px 15px;
-  min-height: 70px;
-  color: #000;
-  background-color: #E2E2E2;
-}
-
 .pg-panel-content .bg-process-stats p{
   display: inline;
   padding-left: 5px;
@@ -141,24 +51,12 @@ ol.pg-bg-process-logs {
   font-size: 13px;
 }
 
-.pg-panel-content .bg-process-footer {
-  border-top: 1px solid #ccc;
-  padding: 10px 15px;
-  position: absolute;
-  bottom: 0;
-  background-color: #E2E2E2;
-}
-
 .pg-panel-content .bg-process-footer p {
   display: inline;
   padding-left: 5px;
   font-size: 13px;
 }
 
-.pg-panel-content .bg-process-footer b, .bg-process-stats span b {
-  color: #333;
-}
-
 .bg-process-footer .bg-process-status {
   padding-left: 0;
 }
@@ -173,21 +71,6 @@ ol.pg-bg-process-logs {
   opacity: 0.5;
 }
 
-.pg-bg-bgprocess .bg-close {
-  display: inline-block;
-  position: absolute;
-  height: 25px;
-  width: 25px;
-  right: -12px;
-  top: 3px;
-  padding: 2px;
-  border: 2px solid #1f5fa6;
-  border-radius: 4px;
-  opacity: 0.5;
-  background-color: white;
-  color: red;
-}
-
 .pg-bg-bgprocess:hover .bg-close {
   opacity: 0.95;
 }

web/pgadmin/misc/bgprocess/static/scss/_bgprocess.scss

@@ -0,0 +1,117 @@
+.ajs-bg-bgprocess > .pg-bg-bgprocess {
+  background-color: $color-primary;
+  color: $color-fg-inverse;
+  padding: 0px;
+  border-radius: 5px;
+  text-align: left;
+}
+
+.ajs-bg-bgprocess > .pg-bg-bgprocess > .pg-bg-notify-header {
+  background-color:  $color-gray-dark;
+  margin-top: 0px;
+  margin-bottom: 5px;
+  padding: 5px;
+  padding-right: 20px;
+  white-space: pre-wrap;
+  text-align: center;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+
+.ajs-bg-bgprocess > .pg-bg-bgprocess > .pg-bg-notify-body {
+  font-family: $font-family-editor;
+  white-space: nowrap;
+}
+
+.pg-bg-etime {
+  width: 100%;
+  display: block;
+  font-size: 95%;
+  padding: 5px;
+  font-weight: bold;
+  color: $color-fg;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: .25em;
+  background-color: $color-gray-lighter;
+  margin-top: 10px;
+  margin-bottom: 5px;
+}
+
+.pg-bg-click {
+  color: $color-gray-lighter;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.pg-bg-click:hover {
+  color:  $color-gray-dark;
+}
+
+.ajs-bg-bgprocess > .pg-bg-bgprocess > .pg-bg-status.bg-success,
+.bg-process-status .bg-bgprocess-success {
+  color: $color-success-light;
+  font-weight: bold;
+}
+
+.bg-process-status .bg-bgprocess-failed {
+  color: $color-danger;
+  font-weight: bold;
+}
+
+.ajs-bg-bgprocess > .pg-bg-bgprocess > .pg-bg-status.bg-failed {
+  color: $color-fg;
+  background-color: $color-danger-light;
+}
+
+.pg-panel-content div.bg-process-watcher.col-xs-12 {
+  height: 100%;
+  padding: 0px 0px 0px 0px;
+  WebkitTransition: all 1s;
+  transition: all 1s;
+  background-color: $color-primary-lighter;
+}
+
+.pg-bg-res-out {
+  color: $color-primary;
+}
+
+.pg-bg-res-err {
+  color: rgba($color-danger, 0.81);
+}
+
+.pg-panel-content .bg-process-details {
+  padding: 10px 15px;
+  min-height: 70px;
+  color: $color-fg;
+  background-color: $color-gray-lighter;
+}
+
+
+.pg-panel-content .bg-process-footer {
+  border-top: 1px solid $color-gray-light;
+  padding: 10px 15px;
+  position: absolute;
+  bottom: 0;
+  background-color: $color-gray-lighter;
+}
+
+.pg-panel-content .bg-process-footer b, .bg-process-stats span b {
+  color:  $color-gray-dark;
+}
+
+.pg-bg-bgprocess .bg-close {
+  display: inline-block;
+  position: absolute;
+  height: 25px;
+  width: 25px;
+  right: -12px;
+  top: 3px;
+  padding: 2px;
+  border: 2px solid $color-primary;
+  border-radius: 4px;
+  opacity: 0.5;
+  background-color: $color-bg;
+  color: $color-danger;
+}

web/pgadmin/misc/file_manager/__init__.py

@@ -137,8 +137,7 @@ class FileManagerModule(PgAdminModule):
 
     def get_own_stylesheets(self):
         return [
-            url_for('static', filename='vendor/jquery.dropzone/dropzone.css'),
+            url_for('static', filename='vendor/jquery.dropzone/dropzone.css')
-            url_for('file_manager.static', filename='css/file_manager.css')
         ]
 
     def get_own_menuitems(self):

web/pgadmin/misc/file_manager/static/css/file_manager.css

@@ -28,11 +28,6 @@
   overflow: hidden;
 }
 
-#uploader h1 b {
-  font-weight: normal;
-  color: #999;
-}
-
 .uploadresponse {
   display: none;
 }
@@ -42,13 +37,6 @@
   overflow: auto;
   /* no margin or border allowed */
 }
-.file_listing #contents.grid li.selected {
-  border: 1px solid #D9EDF7;
-}
-
-.file_listing #contents.grid li.selected, .fileinfo #contents tbody tr.selected {
-  background: #D9EDF7 !important;
-}
 
 .fileinfo #contents li .fm_file_rename,
 .fileinfo table#contents tr td:first-child input.fm_file_rename {
@@ -75,10 +63,6 @@
   margin-bottom: 0;
 }
 
-.fileinfo table#contents tr td p {
-  font-family: "Open Sans";
-}
-
 .fileinfo > h1 {
   font-size: 16px;
   margin: 100px auto;
@@ -90,24 +74,10 @@
   margin: 50px auto;
 }
 
-.fm_folder {
-  font-size: xx-large !important;
-  color: rgb(255, 204, 0);
-}
-
-.fm_drive {
-  font-size: xx-large !important;
-  color: darkgray;
-}
-
 .fm_file {
   font-size: xx-large !important;
 }
 
-.file_manager button {
-  background-color: #C0C0C0;
-}
-
 .file_manager h1 {
   font-size: medium;
 }
@@ -133,37 +103,6 @@
 /** Opera hack */
 x:-o-prefocus, .file-input-container {top:16px;width:198px;}
 
-.newfile {
-  position: absolute;
-  top:0;
-  left: 3px;
-  right:0;
-  width: 152px;
-  height:23px;
-  opacity:0;  filter: alpha(opacity=0);
-  cursor: pointer;
-  border:1px solid blue;
-}
-
-.alt-fileinput {
-  display: inline;
-  wrap: no-wrap;
-}
-
-.filepath {
-  background-color: #F4F1ED;
-  border: 1px solid #dcdcdc;
-  margin: 0;
-  padding: 0.1em 0.3em;
-  line-height: 1.7em;
-  -webkit-border-top-left-radius: 6px;
-  -webkit-border-bottom-left-radius: 6px;
-  -moz-border-radius-topleft: 6px;
-  -moz-border-radius-bottomleft: 6px;
-  border-top-left-radius: 6px;
-  border-bottom-left-radius: 6px;
-}
-
 @-moz-document url-prefix() {
   .filepath {
     padding:0.2em 0.3em;
@@ -176,20 +115,6 @@ x:-o-prefocus, .file-input-container {top:16px;width:198px;}
   text-align: left;
 }
 
-.file_listing #contents.grid li {
-  display: block;
-  float: left;
-  width: 100px;
-  height: 80px;
-  text-align: center;
-  overflow: hidden;
-  margin-bottom: 10px;
-  -webkit-border-radius: 2px;
-  -moz-border-radius: 2px;
-  border-radius: 2px;
-  border: 1px solid #fff;
-}
-
 div.clip {
   width: 30px;
   height: 30px;
@@ -214,25 +139,6 @@ div.clip {
   white-space: nowrap;
 }
 
-.file_listing #contents.list thead {
-  background: rgb(244,241,237); /* Old browsers */
-  background: -moz-linear-gradient(top, rgba(44, 118, 180, 0.71) 0%, rgba(44, 118, 180, 0.98) 100%); /* FF3.6+ */
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(44, 118, 180, 0.71)), color-stop(100%,rgba(44, 118, 180, 0.98))); /* Chrome,Safari4+ */
-  background: -webkit-linear-gradient(top, rgba(44, 118, 180, 0.71) 0%,rgba(44, 118, 180, 0.98) 100%); /* Chrome10+,Safari5.1+ */
-  background: -o-linear-gradient(top, rgba(44, 118, 180, 0.71) 0%,rgba(44, 118, 180, 0.98) 100%); /* Opera 11.10+ */
-  background: -ms-linear-gradient(top, rgba(44, 118, 180, 0.71) 0%,rgba(44, 118, 180, 0.98) 100%); /* IE10+ */
-  background: linear-gradient(to bottom, rgba(44, 118, 180, 0.71) 0%,rgba(44, 118, 180, 0.98) 100%);
-  border-bottom: 1px solid #ccc;
-  display: inline-block;
-  width: 100%;
-}
-
-.file_listing #contents.list th {
-  font-weight: bold;
-  cursor: pointer;
-  color: #fff;
-}
-
 .file_listing #contents.list td:first-child {
   display: table-cell;
   padding-left: 0;
@@ -242,31 +148,10 @@ div.clip {
   background-position: 3px center;
 }
 
-.file_listing #contents.list td.tbl_folder:first-child:before {
-  margin-right: 5px;
-  color: rgb(255, 204, 0);
-}
-
 .file_listing #contents.list td.tbl_file:first-child:before {
   margin-right: 5px;
 }
 
-.file_listing #contents.list td.tbl_drive:first-child:before {
-  color: darkgray;
-  margin-right: 5px;
-}
-
-.file_listing #contents.list tbody tr:nth-child(even):hover {
-  background-color: #f5f5f5 !important;
-}
-
-.file_listing #contents.grid li:hover {
-  border: 1px solid #E5E5E5;
-  background-color: #F7F7F7;
-  cursor: pointer;
-  height: 80px;
-}
-
 .meta {
   display: none;
 }
@@ -322,39 +207,6 @@ button.list span {
   top: 0;
 }
 
-.btn-group.filemanager-btn-group .btn:not(:first-child):not(:last-child),
-.btn-group.filemanager-path-group .btn:not(:first-child):not(:last-child) {
-  border-left: 1px solid #A9A9A9;
-}
-
-.file_manager #uploader .filemanager-path-group {
-  padding: 0;
-  display: block;
-  border: 1px solid darkgrey;
-  height: 30px;
-  border-radius: 5px;
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
-  float: left;
-  margin-right: 10px;
-  background: #EEE;
-}
-
-.file_manager #uploader .btn-group .btn[disabled] {
-  color: #888;
-  background-color: #ccc;
-}
-
-.file_manager #uploader .filemanager-btn-group {
-  border: 1px solid darkgrey;
-  border-radius: 5px;
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
-  width: auto;
-  float: left;
-  overflow: hidden;
-}
-
 .file_manager .btn-group {
   margin: 2px 3px;
 }
@@ -381,14 +233,6 @@ button.list span {
   width: 100%;
 }
 
-.file_manager .fileinfo #contents tbody tr:nth-child(even) {
-  background: #eee;
-}
-
-.file_manager .fileinfo #contents thead tr th:not(:first-child) {
-  border-left: 1px solid #fff;
-}
-
 .file_manager .fileinfo #contents thead tr th:nth-child(1),
 .file_manager .fileinfo #contents tbody tr td:nth-child(1) {
   position: relative;
@@ -437,45 +281,14 @@ button.list span {
   cursor: pointer;
 }
 
-.file_manager .upload_file {
-  display: none;
-  z-index: 1;
-  margin-bottom: auto;
-  top: 0;
-  margin-top: 0;
-  height: calc(100% - 5px);
-  width: 100%;
-  border: none;
-  position: absolute;
-  bottom: 0;
-  background-color: black;
-  padding: 0px;
-  padding-top: 22px;
-  padding-left: 10px;
-}
-
 .file_manager .upload_file #dropzone-container {
   height: 100%;
 }
 
-.file_manager .upload_file #multiple-uploads {
-  height: calc(100% - 20px);
-  background: #000;
-  color: #fff;
-  padding: 0px !important;
-  overflow: auto;
-  width: 100%;
-}
-
 .file_manager .upload_file #multiple-uploads .dz-message {
   text-align: center;
 }
 
-.fileinfo .prompt-info {
-  text-align: center;
-  color: #fff;
-}
-
 .file_manager #uploader .btn-group .show_selected_file {
   vertical-align: middle;
   text-align: left;
@@ -487,27 +300,6 @@ button.list span {
   white-space: nowrap;
 }
 
-.fileinfo .file_listing {
-  display: block;
-  height: calc(100% - 35px);
-  border: 1px solid #ccc;
-  border-bottom: none;
-  font-size: 12px;
-}
-
-.fileinfo .allowed_file_types {
-  display: block;
-  height: 25px;
-  position: absolute;
-  right: 0;
-  border-top: 1px solid #ccc;
-  padding-top: 4px;
-  bottom: 4px;
-  width: 100%;
-  background: #fff;
-  white-space: nowrap;
-}
-
 .allowed_file_types .create_input {
   position: absolute;
   left: 5px;
@@ -546,27 +338,6 @@ button.list span {
   float: right;
 }
 
-.upload_file .file_upload_main {
-  position: relative;
-  height: 127px;;
-  width: 120px;
-  display: inline-block;
-  margin: 0 15px 15px 0 !important;
-  border: 1px solid white;
-  position: relative;
-  border-radius: 5px;
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
-  background: #fff;
-  margin: 2px;
-  opacity: 1;
-}
-
-.upload_file .file_upload_main .show_error {
-  padding: 10px 0 0 10px;
-  color: #000;
-}
-
 .upload_file .file_upload_main .show_error p.size {
   text-align: center;
 }
@@ -582,112 +353,10 @@ button.list span {
   margin: 0;
 }
 
-.file_upload_main .dz-progress {
-  float: left;
-  width: 100%;
-  height: 21px !important;
-  border: 1px solid #8a6d3b;
-  border-radius: 0 !important;
-  -moz-border-radius: 0 !important;
-  -webkit-border-radius: 0 !important;
-}
-
-.file_upload_main .dz-progress .dz-upload {
-  background: #d9edf7 !important;
-  text-align: center;
-}
-
-.file_upload_main .dz-progress .dz-upload.success {
-  background: green !important;
-  float: left;
-  width: 100%;
-}
-
 a.dz-remove {
   display: none !important;
 }
 
-.upload_file .file_upload_main a.dz_file_remove {
-  position: absolute;
-  top: 0;
-  right: 0;
-  color: #FF0000;
-  cursor: pointer;
-  border-radius: 5px;
-  -moz-border-radius: 5px;
-  -webkit-border-radius: 5px;
-  font-size: large;
-}
-
-.upload_file .file_upload_main a.dz_file_remove:hover {
-  border: 1px solid black;
-}
-
-.fileinfo .fm_dimmer {
-  height: calc(100% - 32px);
-  display: none;
-  top: 0px;
-  background: black;
-  opacity: 0.5;
-  width: 100%;
-  position: absolute;
-  z-index: 3;
-}
-
-.fileinfo .delete_item, .fileinfo .replace_file {
-  display: none;
-  padding: 15px 15px;
-  opacity: 0.8;
-  color: #fff;
-  border: 1px solid darkgrey;
-  border-left: 0;
-  border-right: 0;
-  background: #000;
-  box-shadow: 1px 0px 3px 1px white;
-  font-weight: bold;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 4;
-}
-
-.fileinfo .delete_item span.pull-right .btn,
-.fileinfo .replace_file span.pull-right .btn {
-  padding: 0px 5px;
-  color: #000;
-  background: #fff;
-  font-size: 12px;
-  margin-right: 4px;
-}
-
-.upload_file .dz_cross_btn {
-  color: #fff;
-  font-size: x-large;
-  right: -4px;
-  position: absolute;
-  top: -1px;
-  background: transparent;
-  border: none;
-}
-
-.file_manager .fileinfo #contents .fm_lock_icon {
-  color: red;
-  position: absolute;
-  top: 6px;
-  right: 0;
-  left: 19px;
-  font-size: 16px;
-}
-
-.file_manager .fileinfo #contents .fa-lock.tbl_lock_icon {
-  color: red;
-  position: absolute;
-  left: 19px;
-  top: 5px;
-  font-size: 10px;
-}
-
 .fileinfo .activity {
   position: absolute;
   left: 50%;
@@ -696,11 +365,6 @@ a.dz-remove {
   z-index: 1;
 }
 
-.file_manager button.ON {
-  background: #F9F8F7;
-  border: 1px inset #ccc;
-}
-
 .file_listing .no_folder_found {
   text-align: center;
   position: absolute;
@@ -709,12 +373,6 @@ a.dz-remove {
   font-size: 14px;
 }
 
-.fileinfo .is_file_replace {
-  width: 100%;
-  height: 100%;
-  background: #ccc;
-}
-
 div.change_file_types span {
   padding-left:10px;
 }
@@ -722,39 +380,38 @@ div.change_file_types span {
 /* overall */
 .tablesorter .header,
 .tablesorter .tablesorter-header {
-	/* black (unsorted) double arrow */
+    /* black (unsorted) double arrow */
-	background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
+    background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
-	background-repeat: no-repeat;
+    background-repeat: no-repeat;
-	background-position: center right;
+    background-position: center right;
-	padding: 4px 18px 4px 4px;
+    padding: 4px 18px 4px 4px;
-	white-space: normal;
+    white-space: normal;
-	cursor: pointer;
+    cursor: pointer;
 }
 
 .tablesorter .headerSortUp,
 .tablesorter .tablesorter-headerSortUp,
 .tablesorter .tablesorter-headerAsc {
-	/* black asc arrow */
+    /* black asc arrow */
-	background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
+    background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
 }
 
 .tablesorter .headerSortDown,
 .tablesorter .tablesorter-headerSortDown,
 .tablesorter .tablesorter-headerDesc {
-	/* black desc arrow */
+    /* black desc arrow */
-	background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
+    background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
 }
 
 .tablesorter thead .sorter-false {
-	background-image: none;
+    background-image: none;
-	cursor: default;
+    cursor: default;
-	padding: 4px;
+    padding: 4px;
 }
 
 /* table processing indicator */
 .tablesorter .tablesorter-processing {
-	background-position: center center !important;
+    background-position: center center !important;
-	background-repeat: no-repeat !important;
+    background-repeat: no-repeat !important;
-	background-image: url('data:image/gif;base64,R0lGODlhFAAUAKEAAO7u7lpaWgAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgACACwAAAAAFAAUAAACQZRvoIDtu1wLQUAlqKTVxqwhXIiBnDg6Y4eyx4lKW5XK7wrLeK3vbq8J2W4T4e1nMhpWrZCTt3xKZ8kgsggdJmUFACH5BAEKAAIALAcAAAALAAcAAAIUVB6ii7jajgCAuUmtovxtXnmdUAAAIfkEAQoAAgAsDQACAAcACwAAAhRUIpmHy/3gUVQAQO9NetuugCFWAAAh+QQBCgACACwNAAcABwALAAACE5QVcZjKbVo6ck2AF95m5/6BSwEAIfkEAQoAAgAsBwANAAsABwAAAhOUH3kr6QaAcSrGWe1VQl+mMUIBACH5BAEKAAIALAIADQALAAcAAAIUlICmh7ncTAgqijkruDiv7n2YUAAAIfkEAQoAAgAsAAAHAAcACwAAAhQUIGmHyedehIoqFXLKfPOAaZdWAAAh+QQFCgACACwAAAIABwALAAACFJQFcJiXb15zLYRl7cla8OtlGGgUADs=') !important;
+    background-image: url('data:image/gif;base64,R0lGODlhFAAUAKEAAO7u7lpaWgAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgACACwAAAAAFAAUAAACQZRvoIDtu1wLQUAlqKTVxqwhXIiBnDg6Y4eyx4lKW5XK7wrLeK3vbq8J2W4T4e1nMhpWrZCTt3xKZ8kgsggdJmUFACH5BAEKAAIALAcAAAALAAcAAAIUVB6ii7jajgCAuUmtovxtXnmdUAAAIfkEAQoAAgAsDQACAAcACwAAAhRUIpmHy/3gUVQAQO9NetuugCFWAAAh+QQBCgACACwNAAcABwALAAACE5QVcZjKbVo6ck2AF95m5/6BSwEAIfkEAQoAAgAsBwANAAsABwAAAhOUH3kr6QaAcSrGWe1VQl+mMUIBACH5BAEKAAIALAIADQALAAcAAAIUlICmh7ncTAgqijkruDiv7n2YUAAAIfkEAQoAAgAsAAAHAAcACwAAAhQUIGmHyedehIoqFXLKfPOAaZdWAAAh+QQFCgACACwAAAIABwALAAACFJQFcJiXb15zLYRl7cla8OtlGGgUADs=') !important;
 }
-

web/pgadmin/misc/file_manager/static/scss/_file_manager.scss

@@ -0,0 +1,345 @@
+  #uploader h1 b {
+    font-weight: normal;
+    color:  $color-gray;
+  }
+
+  .file_listing #contents.grid li.selected {
+    border: 1px solid $color-primary-lighter;
+  }
+
+  .file_listing #contents.grid li.selected, .fileinfo #contents tbody tr.selected {
+    background: $color-primary-lighter !important;
+  }
+
+  .fileinfo table#contents tr td p {
+    font-family: $font-family-primary;
+  }
+
+  .fm_folder {
+    font-size: xx-large !important;
+    color: $color-warning;
+  }
+
+  .fm_drive {
+    font-size: xx-large !important;
+    color:  $color-gray;
+  }
+
+  .file_manager button {
+    background-color: $color-gray-light;
+  }
+
+  .newfile {
+    position: absolute;
+    top:0;
+    left: 3px;
+    right:0;
+    width: 152px;
+    height:23px;
+    opacity:0;  filter: alpha(opacity=0);
+    cursor: pointer;
+    border:1px solid $color-primary;
+  }
+
+  .alt-fileinput {
+    display: inline;
+    wrap: no-wrap;
+  }
+
+  .filepath {
+    background-color: $color-gray-lighter;
+    border: 1px solid $color-gray-lighter;
+    margin: 0;
+    padding: 0.1em 0.3em;
+    line-height: 1.7em;
+    -webkit-border-top-left-radius: 6px;
+    -webkit-border-bottom-left-radius: 6px;
+    -moz-border-radius-topleft: 6px;
+    -moz-border-radius-bottomleft: 6px;
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+
+  .file_listing #contents.grid li {
+    display: block;
+    float: left;
+    width: 100px;
+    height: 80px;
+    text-align: center;
+    overflow: hidden;
+    margin-bottom: 10px;
+    -webkit-border-radius: 2px;
+    -moz-border-radius: 2px;
+    border-radius: 2px;
+    border: 1px solid $color-bg;
+  }
+
+  .file_listing #contents.list thead {
+    background: $color-gray-lighter; /* Old browsers */
+    background: -moz-linear-gradient(top, rgba($color-primary, 0.71) 0%, rgba($color-primary, 0.98) 100%); /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba($color-primary, 0.71)), color-stop(100%,rgba($color-primary, 0.98))); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(top, rgba($color-primary, 0.71) 0%,rgba($color-primary, 0.98) 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(top, rgba($color-primary, 0.71) 0%,rgba($color-primary, 0.98) 100%); /* Opera 11.10+ */
+    background: -ms-linear-gradient(top, rgba($color-primary, 0.71) 0%,rgba($color-primary, 0.98) 100%); /* IE10+ */
+    background: linear-gradient(to bottom, rgba($color-primary, 0.71) 0%,rgba($color-primary, 0.98) 100%);
+    border-bottom: 1px solid $color-gray-lighter;
+    display: inline-block;
+    width: 100%;
+  }
+
+  .file_listing #contents.list th {
+    font-weight: bold;
+    cursor: pointer;
+    color: $color-fg-inverse;
+  }
+
+
+  .file_listing #contents.list td.tbl_folder:first-child:before {
+    margin-right: 5px;
+    color: $color-warning;
+  }
+
+  .file_listing #contents.list td.tbl_drive:first-child:before {
+    color: $color-gray-light;
+    margin-right: 5px;
+  }
+
+  .file_listing #contents.list tbody tr:nth-child(even):hover {
+    background-color: $color-gray-lighter !important;
+  }
+
+  .file_listing #contents.grid li:hover {
+    border: 1px solid $color-gray-lighter;
+    background-color: $color-gray-lighter;
+    cursor: pointer;
+    height: 80px;
+  }
+
+
+  .btn-group.filemanager-btn-group .btn:not(:first-child):not(:last-child),
+  .btn-group.filemanager-path-group .btn:not(:first-child):not(:last-child) {
+    border-left: 1px solid $color-gray-light;
+  }
+
+  .file_manager #uploader .filemanager-path-group {
+    padding: 0;
+    display: block;
+    border: 1px solid  $color-gray;
+    height: 30px;
+    border-radius: 5px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    float: left;
+    margin-right: 10px;
+    background: $color-gray-lighter;
+  }
+
+  .file_manager #uploader .btn-group .btn[disabled] {
+    color:  $color-gray-light;
+    background-color: $color-gray-lighter;
+  }
+
+  .file_manager #uploader .filemanager-btn-group {
+    border: 1px solid  $color-gray;
+    border-radius: 5px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    width: auto;
+    float: left;
+    overflow: hidden;
+  }
+
+  .file_manager .fileinfo #contents tbody tr:nth-child(even) {
+    background: $color-gray-lighter;
+  }
+
+  .file_manager .fileinfo #contents thead tr th:not(:first-child) {
+    border-left: 1px solid $color-bg;
+  }
+
+  .file_manager .upload_file {
+    display: none;
+    z-index: 1;
+    margin-bottom: auto;
+    top: 0;
+    margin-top: 0;
+    height: calc(100% - 5px);
+    width: 100%;
+    border: none;
+    position: absolute;
+    bottom: 0;
+    background-color: $color-bg-inverse;
+    padding: 0px;
+    padding-top: 22px;
+    padding-left: 10px;
+  }
+
+
+  .file_manager .upload_file #multiple-uploads {
+    height: calc(100% - 20px);
+    background: $color-fg-inverse;
+    color: $color-fg-inverse;
+    padding: 0px !important;
+    overflow: auto;
+    width: 100%;
+  }
+
+  .fileinfo .prompt-info {
+    text-align: center;
+    color: $color-fg-inverse;
+  }
+
+  .fileinfo .file_listing {
+    display: block;
+    height: calc(100% - 35px);
+    border: 1px solid $color-gray-lighter;
+    border-bottom: none;
+    font-size: 12px;
+  }
+
+  .fileinfo .allowed_file_types {
+    display: block;
+    height: 25px;
+    position: absolute;
+    right: 0;
+    border-top: 1px solid $color-gray-lighter;
+    padding-top: 4px;
+    bottom: 4px;
+    width: 100%;
+    background: $color-bg;
+    white-space: nowrap;
+  }
+
+  .upload_file .file_upload_main {
+    position: relative;
+    height: 127px;;
+    width: 120px;
+    display: inline-block;
+    margin: 0 15px 15px 0 !important;
+    border: 1px solid $color-bg;
+    position: relative;
+    border-radius: 5px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    background: $color-bg;
+    margin: 2px;
+    opacity: 1;
+  }
+
+  .upload_file .file_upload_main .show_error {
+    padding: 10px 0 0 10px;
+    color: $color-fg;
+  }
+
+  .file_upload_main .dz-progress {
+    float: left;
+    width: 100%;
+    height: 21px !important;
+    border: 1px solid  $color-gray-dark;
+    border-radius: 0 !important;
+    -moz-border-radius: 0 !important;
+    -webkit-border-radius: 0 !important;
+  }
+
+  .file_upload_main .dz-progress .dz-upload {
+    background: $color-primary-lighter !important;
+    text-align: center;
+  }
+
+  .file_upload_main .dz-progress .dz-upload.success {
+    background: $color-success-light !important;
+    float: left;
+    width: 100%;
+  }
+
+  .upload_file .file_upload_main a.dz_file_remove {
+    position: absolute;
+    top: 0;
+    right: 0;
+    color: $color-danger;
+    cursor: pointer;
+    border-radius: 5px;
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    font-size: large;
+  }
+
+  .upload_file .file_upload_main a.dz_file_remove:hover {
+    border: 1px solid $color-fg;
+  }
+
+  .fileinfo .fm_dimmer {
+    height: calc(100% - 32px);
+    display: none;
+    top: 0px;
+    background:$color-fg;
+    opacity: 0.5;
+    width: 100%;
+    position: absolute;
+    z-index: 3;
+  }
+
+  .fileinfo .delete_item, .fileinfo .replace_file {
+    display: none;
+    padding: 15px 15px;
+    opacity: 0.8;
+    color: $color-fg-inverse;
+    border: 1px solid $color-gray-light;
+    border-left: 0;
+    border-right: 0;
+    background: $color-fg-inverse;
+    box-shadow: 1px 0px 3px 1px $color-bg;
+    font-weight: bold;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 4;
+  }
+
+  .fileinfo .delete_item span.pull-right .btn,
+  .fileinfo .replace_file span.pull-right .btn {
+    padding: 0px 5px;
+    color: $color-fg;
+    background: $color-bg;
+    font-size: 12px;
+    margin-right: 4px;
+  }
+
+  .upload_file .dz_cross_btn {
+    color: $color-fg-inverse;
+    font-size: x-large;
+    right: -4px;
+    position: absolute;
+    top: -1px;
+    background: transparent;
+    border: none;
+  }
+
+  .file_manager .fileinfo #contents .fm_lock_icon {
+    color: $color-danger-lighter;
+    position: absolute;
+    top: 6px;
+    right: 0;
+    left: 19px;
+    font-size: 16px;
+  }
+
+  .file_manager .fileinfo #contents .fa-lock.tbl_lock_icon {
+    color: $color-danger-lighter;
+    position: absolute;
+    left: 19px;
+    top: 5px;
+    font-size: 10px;
+  }
+
+  .file_manager button.ON {
+    background: $color-gray-lighter;
+    border: 1px inset $color-gray-lighter;
+  }
+
+  .fileinfo .is_file_replace {
+    width: 100%;
+    height: 100%;
+    background: $color-gray-lighter;
+  }

web/pgadmin/misc/static/explain/css/explain.css

@@ -53,13 +53,6 @@ td.explain-tooltip-val {
 
 }
 
-.pgadmin-explain-tooltip {
-  position: absolute;
-  opacity:0;
-  color: cornsilk;
-  background-color: #010125;
-}
-
 .pgadmin-tooltip-table {
   border-collapse: collapse;
   border-spacing: 1px;

web/pgadmin/misc/static/explain/scss/_explain.scss

@@ -0,0 +1,6 @@
+.pgadmin-explain-tooltip {
+  position: absolute;
+  opacity:0;
+  color: $color-gray-lighter;
+  background-color:  $color-gray-dark;
+}

web/pgadmin/preferences/__init__.py

@@ -42,7 +42,7 @@ class PreferencesModule(PgAdminModule):
         }]
 
     def get_own_stylesheets(self):
-        return [url_for('preferences.static', filename='css/preferences.css')]
+        return []
 
     def get_own_menuitems(self):
         return {

web/pgadmin/preferences/static/css/preferences.css

@@ -5,15 +5,6 @@
   padding-bottom: 39px;
 }
 
-.preferences_tree{
-  padding: 0px;
-  padding-top: 2px;
-  height: 100%;
-  overflow: auto;
-  border-right: 2px solid #999999;
-  background-image: #FAFAFA;
-}
-
 .preferences_content {
   padding-top: 10px;
   height: 100%;

web/pgadmin/preferences/static/scss/_preferences.scss

@@ -0,0 +1,8 @@
+.preferences_tree{
+  padding: 0px;
+  padding-top: 2px;
+  height: 100%;
+  overflow: auto;
+  border-right: 2px solid $color-gray-light;
+  background-image: $color-gray-lighter;
+}

web/pgadmin/static/css/pgadmin.style.css

@@ -1,110 +0,0 @@
-.alert-box {
-  padding: 15px; }
-
-.alert-icon {
-  display: table-cell; }
-
-.alert-text {
-  display: table-cell;
-  padding-left: 10px; }
-
-.alert-info {
-  border-color: #84acdd; }
-
-.color-chip {
-  align-items: center;
-  border-radius: 3px;
-  box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.15);
-  color: rgba(0, 0, 0, 0.65);
-  display: flex;
-  font-size: 1.25em;
-  height: 100px;
-  justify-content: center;
-  margin: 0 0 1em;
-  width: 100%; }
-
-.bg-gray-1 {
-  background-color: #f9f9f9; }
-
-.bg-gray-2 {
-  background-color: #e8e8e8; }
-
-.bg-gray-3 {
-  background-color: #cccccc; }
-
-.bg-gray-4 {
-  background-color: #888888; }
-
-.bg-gray-5 {
-  background-color: #555555; }
-
-.bg-gray-6 {
-  background-color: #333333; }
-
-.font-white {
-  color: #FFFFFF; }
-
-.font-gray-3 {
-  color: #cccccc; }
-
-.font-gray-4 {
-  color: #888888; }
-
-.border-gray-3 {
-  border: 2px solid #cccccc; }
-
-.text-bold {
-  font-weight: bold; }
-
-.text-14 {
-  font-family: 'Open Sans';
-  font-size: 14px; }
-
-.text-13 {
-  font-family: 'Open Sans';
-  font-size: 13px; }
-
-.text-12 {
-  font-family: 'Open Sans';
-  font-size: 12px; }
-
-.text-11 {
-  font-family: 'Open Sans';
-  font-size: 11px; }
-
-.bg-primary-blue {
-  background-color: #2c76b4; }
-
-.bg-highlight {
-  background-color: #e7f2ff; }
-
-.bg-border {
-  background-color: #84acdd; }
-
-.bg-red-1 {
-  background-color: #f2dede; }
-
-.bg-red-2 {
-  background-color: #ecccd1; }
-
-.bg-red-3 {
-  background-color: #d0021b; }
-
-.bg-green-1 {
-  background-color: #dff0d7; }
-
-.bg-green-2 {
-  background-color: #d6eac5; }
-
-.bg-green-3 {
-  background-color: #3a773a; }
-
-.font-white {
-  color: #FFFFFF; }
-
-.opacity-5 {
-  opacity: 0.5;  }
-
-.alertify .ajs-header,
-.alertify .ajs-body {
-  font-family: 'Open Sans'; }

web/pgadmin/static/css/style.css

@@ -1,7 +1,6 @@
 @import '~bootstrap/dist/css/bootstrap.css';
 @import '~alertifyjs/build/css/alertify.css';
 @import '~alertifyjs/build/css/themes/bootstrap.css';
-@import '~bootstrap/dist/css/bootstrap-theme.css';
 @import '~font-awesome/css/font-awesome.css';
 @import '~bootstrap-datepicker/dist/css/bootstrap-datepicker3.css';
 @import '~eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css';
@@ -23,16 +22,3 @@
 @import '~slickgrid/slick.grid.css';
 @import '~slickgrid/slick-default-theme.css';
 @import '~slickgrid/css/smoothness/jquery-ui-1.11.3.custom.css';
-
-@import '../../preferences/static/css/preferences.css';
-@import '../../browser/static/css/browser.css';
-@import '../../dashboard/static/css/dashboard.css';
-@import '../../browser/static/css/wizard.css';
-@import '../../tools/debugger/static/css/debugger.css';
-
-@import '../../tools/grant_wizard/static/css/grant_wizard.css';
-@import '../../tools/maintenance/static/css/maintenance.css';
-@import '../../tools/sqleditor/static/css/sqleditor.css';
-@import '../../misc/static/explain/css/explain.css';
-@import '../../misc/bgprocess/static/css/bgprocess.css';
-@import '../../misc/static/explain/css/explain.css';

web/pgadmin/static/css/webcabin.overrides.css

@@ -1,401 +0,0 @@
-.wcDocker {
-  background-color: #ffffff;
-}
-
-.wcPanelBackground {
-  background-color: #ffffff;
-}
-
-.wcPanelBackground .wcCenter {
-  background-color: #cccccc;
-}
-
-.wcFrameFlasher {
-  background-color: red;
-}
-
-.wcFrameShadower {
-  background-color: #dddddd;
-}
-
-.wcFrameTitle {
-  font-size: 13px;
-  padding-left: 8px;
-  vertical-align: middle;
-  text-align: left;
-  border-bottom: 1px none;
-  height: 100%;
-  padding-top: 10px;
-  background-color: #e8e8e8;
-}
-
-.wcFrameCenter {
-  top: 35px;
-}
-
-.wcFrameButton {
-  width: 20px;
-  height: 20px;
-  border: 2px solid #9E9E9E;
-  background-color: #ddd;
-  font-size: 12px;
-  border-radius: 5px 5px 5px 5px;
-  margin-right: 2px;
-}
-
-.wcFrameMiniButton {
-  width: 8px;
-}
-
-.wcFrameButton.wcFrameButtonLeft {
-  right: 10px;
-}
-.wcFrameButton.wcFrameButtonRight {
-  right: 10px;
-}
-
-.wcFrameButton:hover {
-  border: 2px solid #CCCCCC;
-}
-
-.wcFrameButton:active {
-  border: 2px solid #DDDDDD;
-}
-
-.wcFrameButtonToggled, .wcFrameButtonToggled:hover {
-  border-style: inset;
-}
-
-.wcLayoutGrid, .wcLayoutGrid tr, .wcLayoutGrid td {
-  border: 1px solid #555555;
-}
-
-.wcLayoutGridAlternate tr:nth-child(even), .wcLayoutGridAltColor {
-  background-color: rgba(200, 150, 150, 0.2) !important;
-}
-
-.wcFrameEdge {
-  border: 1px solid #dddddd;
-  background-color: #dddddd;
-}
-.wcFrame > .wcFrameEdgeV ~ .wcFrameEdgeV {
-  box-shadow: 3px 6px 3px 1px #888888 !important;
-}
-
-.wcFrame > .wcFrameEdge ~ .wcFrameEdgeV {
-  box-shadow: 1px 0px 0px 0px #888888;
-}
-
-.wcFrame > .wcFrameEdgeH ~ .wcFrameEdgeH {
-  box-shadow: 2px 3px 3px 2px #888888 !important;
-}
-
-.wcFrame > .wcFrameEdgeH {
-  box-shadow: 1px 0px 0px 0px #888888;
-}
-
-.wcFrameEdgeH {
-  height: 6px;
-}
-
-.wcFrameEdgeV {
-  width: 6px;
-}
-.wcFrameCornerNW,
-.wcFrameCornerNE {
-  height: 6px;
-  width: 6px;
-}
-
-.wcSplitterBar {
-  border: 1px solid #aaaaaa;
-  background-color: #dddddd;
-}
-
-.wcSplitterBarV {
-  border-left: 3px solid #dddddd;
-  height: 100% !important;
-}
-
-.wcSplitterBarH {
-  border-top: 3px solid #dddddd;
-  width: 100% !important;
-}
-
-.wcPanelTab {
-  color: #337ab7;
-  background-color: #e6e6e6;
-  border: 0px;
-  border-radius: 4px 4px 0px 0px;
-  border-bottom: 0px;
-  margin-right: 1px;
-  margin-top: 10px;
-  font-size: 13px;
-  padding-left: 8px;
-  padding-right: 8px;
-  padding-top: 4px;
-  padding-bottom: 4px;
-}
-
-.wcPanelTab:hover {
-  background-color: #eeeeee;
-  padding-bottom: 10px;
-}
-
-.wcPanelTabActive {
-  background-color: #ffffff;
-  color: #000000;
-  margin-top: 5px;
-  line-height: 30px;
-  font-weight: normal;
-}
-
-.wcFloating .wcPanelTabActive {
-  background-color: #2C76B4;
-  margin-top: -2px;
-  font-weight: bold;
-  color: white;
-}
-
-.wcFloating .wcPanelTabActive:hover {
-  background-color: #74B5ED;
-}
-
-.wcGhost {
-  background-color: #74B5ED;
-  border-radius: 6px;
-}
-
-/*
-::-webkit-scrollbar {
-  width: 12px;
-  height: 12px;
-}
-
-::-webkit-scrollbar-corner {
-}
-
-::-webkit-scrollbar-track {
-  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
-  border-radius: 10px;
-}
-
-::-webkit-scrollbar-thumb {
-  border-radius: 10px;
-  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.7);
-}
-*/
-
-.wcMenuList, .context-menu-list {
-  border: 1px solid #dddddd;
-  z-index: 999 !important;
-  background: #dddddd;
-}
-
-.wcMenuItem, .context-menu-item {
-  background-color: #dddddd;
-}
-
-.wcMenuItemHover, .wcMenuItem:hover, .context-menu-item.hover {
-  background-color: #bbbbbb;
-}
-
-.wcMenuItem.disabled, .context-menu-item.disabled {
-  color: #311;
-  background-color: #aaaaaa;
-}
-
-.wcMenuSeparator, .context-menu-separator {
-  border: 2px solid #dddddd;
-  background-color: #eeeeee;
-}
-
-.wcInput, input {
-  background-color: transparent;
-}
-
-.wcSelect, select {
-  background-color: transparent;
-}
-
-.wcButton, button {
-  border: 1px outset #A44;
-  background-color: #A44;
-}
-
-.wcButtonHover, .wcButton:hover {
-  border: 1px outset #B66;
-  background-color: #B66;
-}
-
-.wcButtonActive, .wcButton:active {
-  border: 1px inset #B66;
-  background-color: #B66;
-}
-
-.wcButtonActive.wcButtonHover, .wcButton:hover.wcButtonActive, .wcButton:active.wcButtonHover, .wcButton:active:hover {
-  border: 1px inset #C88;
-  background-color: #C88;
-}
-
-.wcButtonDisabled, .wcButton.disabled {
-  border: 1px outset #933 !important;
-  background-color: #933 !important;
-  color: #533 !important;
-}
-
-.wcLayout, .wcLayout tr, .wcLayout td {
-  vertical-align: top;
-}
-
-.wcPanelTab > div > .wcTabIcon {
-  display: inline-block;
-  text-align: center;
-  padding-left: 20px;
-  margin-top: -5px;
-  margin-right: 5px;
-}
-
-.wcPanelTab > div .wcTabIcon.fa {
-  padding-left: 0px !important;
-  color: black;
-}
-
-.wcTabIcon.fa {
-  margin-right: 5px;
-}
-
-.wcFrameTitleBar {
-  background-color: #e8e8e8;
-  height: 35px;
-  border-bottom: #cccccc;
-}
-
-.wcFloating .wcFrameTitleBar {
-  border-bottom: 2px solid darkgray;
-  background-color: #2C76B4;
-}
-
-.wcFloating .wcFrameTitleBar > div .wcTabIcon.fa {
-  color: white;
-}
-
-.wcFrameButtonBar {
-  top: 5px;
-  right: 5px;
-}
-.context-menu-list {
-font-family: 'Open Sans';;
-font-size: 13px;
-}
-
-.context-menu-icon:before {
-  color: #222;
-  font-size: 13px;
-}
-
-.context-menu-icon-fa:before {
-  font-family: 'FontAwesome'
-}
-
-.context-menu-item {
-  display:block;
-  font-family: 'Open Sans';
-  font-size: 13px;
-  font-weight: normal;
-}
-
-.context-menu-list {
-    padding: 2px 0;
-    width: initial !important;
-}
-
-.context-menu-list > .context-menu-item {
-    display:block !important;
-}
-
-.context-menu-list > .context-menu-separator {
-    margin: 0;
-    border: 1px solid #fff;
-}
-
-.context-menu-icon-wcTabIcon {
-  text-align: left;
-  padding: 3px 28px;
-  height: auto;
-  background-position: 5px 50%;
-}
-
-ul.dropdown-menu > li.menu-item > a > i.wcTabIcon {
-  width: 14px;
-}
-
-.wcFrameButton .fa.fa-close {
-  margin-top: 3.5px;
-  padding-left: 1px;
-}
-
-span.fa.fa-arrow-left, .fa-arrow-right {
-  margin-top: 4px;
-  width: 14px;
-}
-
-.wcMenuSubMenu {
-  visibility: hidden;
-}
-
-i.wcTabIcon {
-  min-width: 20px;
-}
-
-.wcLoadingBackground {
-  background: black;
-  opacity: 0.6 !important;
-}
-
-.wcLoadingIcon.fa-spinner {
-  position: absolute;
-  top: 34%;
-  left: 48%;
-  font-size: 50px;
-  color: #ccc;
-  height: 49px !important;
-}
-
-.wcLoadingLabel {
-  top: 40%;
-  left: 0;
-  color: #fff;
-  width: 100%;
-  font-size: 20px;
-  position: absolute;
-  text-align: center;
-}
-
-.wcPanelTab > div {
-  display: inline-block;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  max-width: 125px;
-}
-
-.wcPanelTabActive > div {
-  width: auto !important;
-  max-width: 100%;
-}
-
-.wcFrameTitleBar.wcTabTop .wcFrameButtonBar {
-  right: 30px !important;
-}
-
-.wcFloating .wcPanelTab .wcTabIcon {
-  display: block;
-  float: left;
-  margin-top: 8px;
-  border-radius: 2px;
-  padding: 0px 13px 5px 5px;
-  background-color: white;
-  background-size: 18px !important;
-  height: 18px;
-}

web/pgadmin/static/js/alertify.pgadmin.defaults.js

@@ -108,7 +108,7 @@ define([
             var alertMessage = promptmsg;
             if (type === 'error') {
               alertMessage = '\
-                  <div class="media font-red-3 text-14">\
+                  <div class="media text-danger text-14">\
                     <div class="media-body media-middle">\
                       <div class="alert-text">' + promptmsg + '</div><br/>\
                       <div class="alert-text">' + gettext('Click for details.') + '</div>\
@@ -153,7 +153,7 @@ define([
         }
         if (contentType.indexOf('text/html') >= 0) {
           var alertMessage = '\
-                <div class="media font-red-3 text-14">\
+                <div class="media text-danger text-14">\
                   <div class="media-body media-middle">\
                     <div class="alert-text">' + gettext('INTERNAL SERVER ERROR') + '</div><br/>\
                     <div class="alert-text">' + gettext('Click for details.') + '</div>\
@@ -377,7 +377,7 @@ define([
   _.extend(alertify, {
     success: function(message, timeout, callback) {
       var alertMessage = '\
-      <div class="media font-green-3 text-14">\
+      <div class="media text-success text-14">\
         <div class="media-body media-middle">\
           <div class="alert-icon success-icon">\
             <i class="fa fa-check" aria-hidden="true"></i>\
@@ -389,7 +389,7 @@ define([
     },
     error: function(message, timeout, callback) {
       var alertMessage = '\
-      <div class="media font-red-3 text-14">\
+      <div class="media text-danger text-14">\
         <div class="media-body media-middle">\
           <div class="alert-icon error-icon">\
             <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>\

web/pgadmin/static/js/sqleditor/filter_dialog.js

@@ -113,7 +113,7 @@ let FilterDialog = {
 
             // Status bar
             this.statusBar = $('<div class=\'pg-prop-status-bar pg-el-xs-12 hide\'>' +
-              '  <div class=\'media error-in-footer bg-red-1 border-red-2 font-red-3 text-14\'>' +
+              '  <div class=\'media error-in-footer bg-danger-lighter border-danger-light text-danger text-14\'>' +
               '    <div class=\'media-body media-middle\'>' +
               '      <div class=\'alert-icon error-icon\'>' +
               '        <i class=\'fa fa-exclamation-triangle\' aria-hidden=\'true\'></i>' +
@@ -215,18 +215,28 @@ let FilterDialog = {
                   'trans_id': handler.transId,
                 }),
                 filterCollectionModel
-              ).then(function () {
+              ).then(function (result) {
                 // Hide Progress ...
                 $(
                   self.showFilterProgress[0]
                 ).addClass('hidden');
-                setTimeout(
+
-                  function() {
+                let response = result.data.data;
-                    self.close(); // Close the dialog now
+
-                    Alertify.success(gettext('Filter updated successfully'));
+                if (response.status) {
-                    queryToolActions.executeQuery(handler);
+                  setTimeout(
-                  }, 10
+                    function() {
-                );
+                      self.close(); // Close the dialog now
+                      Alertify.success(gettext('Filter updated successfully'));
+                      queryToolActions.executeQuery(handler);
+                    }, 10
+                  );
+                } else {
+                  Alertify.alert(
+                      gettext('Validation Error'),
+                      response.result
+                  );
+                }
 
               }).catch(function (error) {
                 // Hide Progress ...

web/pgadmin/static/scss/_aci_tree.overrides.scss

@@ -1,31 +1,31 @@
 .aciTree .aciTreeText {
-    font-family: 'Open Sans';
+    font-family: $font-family-primary;
     font-size: 12px;
 }
 
 /* Hover over an element */
 .aciTree .aciTreeLine.aciTreeHover .aciTreeItem  {
-    background-color: #e7f2ff;
+    background-color: $color-primary-lighter;
-    border-color: #84acdd;
+    border-color: $color-primary-light;
 }
 
 .aciTree .aciTreeLine.aciTreeHover .aciTreeText  {
-    color: black;
+    color: $color-fg;
 }
 
 /* Selected element and in focus*/
 .aciTree.aciTreeFocus .aciTreeFocus > .aciTreeLine .aciTreeItem {
-    background-color: #e7f2ff;
+    background-color: $color-primary-lighter;
 }
 
 .aciTree.aciTreeFocus .aciTreeFocus > .aciTreeLine .aciTreeText {
-    color: black;
+    color: $color-fg;
 }
 
 /* Selected element but not in focus */
 .aciTree .aciTreeSelected > .aciTreeLine .aciTreeItem {
-    background-color: #e7f2ff;
+    background-color: $color-primary-lighter;
-    border-color: #84acdd;
+    border-color: $color-primary-light;
 }
 
 .aciTree .aciTreeItem {

web/pgadmin/static/scss/_alert.scss

@@ -1,7 +1,7 @@
 .alert-icon {
   display: flex;
   align-items: center;
-  color: white;
+  color: $color-fg-inverse;
   padding: 15px 15px 15px 17px;
   width: 50px;
   min-height: 50px;
@@ -26,15 +26,15 @@
 }
 
 .success-icon {
-  background: $color-green-3;
+  background: $color-success;
 }
 
 .error-icon {
-  background: $color-red-3;
+  background: $color-danger;
 }
 
 .info-icon {
-  background: #2c76b4;
+  background: $color-primary;
 }
 
 .alert-text {
@@ -42,11 +42,13 @@
   padding: 0 12px 0 10px;
   align-self: center;
   // To make sure IE picks up the correct font
-  font-family: 'Open Sans';
+  font-family: $font-family-primary;
 }
 
 .alert-info {
-  border-color: $color-blue-2;
+  border-color: $color-primary-light;
+  background-color: $color-primary-lighter;
+  color : $color-primary;
   background-image: none;
 }
 
@@ -103,7 +105,7 @@
 
   .alert-text {
     flex-grow: 1;
-    border: 1px solid $color-red-2;
+    border: 1px solid $color-danger-light;
     padding: 7px 12px 6px 10px;
     border-left: none;
     -moz-user-select: text;
@@ -117,7 +119,7 @@
     border-radius: 4px;
 
     .alert-text {
-      border-color: $color-red-2;
+      border-color: $color-danger-light;
     }
   }
 
@@ -125,12 +127,12 @@
     border-radius: 4px;
 
     .alert-text {
-      border-color: $color-green-2;
+      border-color: $color-success-light;
     }
   }
 
   .info-in-footer {
-    border: 1px solid $primary-blue;
+    border: 1px solid $color-primary;
     border-radius: 4px;
     height: 35px;
 

web/pgadmin/static/scss/_alertify.overrides.scss

@@ -4,10 +4,10 @@
     padding: 6px 10px !important;
     min-height: 35px;
     max-height: 35px;
-    border-bottom: 2px solid darkgray;
+    border-bottom: 2px solid $color-gray-lighter;
-    background-color: #2C76B4;
+    background-color: $color-primary;
     font-weight: bold;
-    color: white;
+    color: $color-fg-inverse;
     font-size: 14px;
     font-weight: bold;
     border-radius: 0;
@@ -17,7 +17,7 @@
 
   /* Overrides alertify js headers hovering behaviour*/
   .ajs-header:hover {
-    background-color: #2C76B4;
+    background-color: $color-primary;
   }
 
   /* Removes padding from alertify footer */
@@ -28,10 +28,10 @@
 
   /* Restyling alertify buttons */
   .ajs-footer .ajs-buttons {
-    background-color: #D2D2D2;
+    background-color: $color-gray-light;
     border-width: 2px 0px 0px 0px;
     border-style: solid;
-    border-color: rgb(85, 85, 85);
+    border-color:  $color-gray-dark;
   }
 
   .ajs-footer .ajs-buttons.ajs-auxiliary .ajs-button,
@@ -73,7 +73,7 @@
 
   /* Restyling alertify dialogue panel boundaries */
   .ajs-dialog {
-    border: 3px solid #DDDDDD;
+    border: 3px solid $color-gray-lighter;
     border-radius: 0;
   }
   .ajs-content {
@@ -100,8 +100,8 @@
 .ajs-pin, .ajs-maximize, .ajs-close {
   width: 20px;
   height: 20px;
-  border: 2px solid #9E9E9E !important;
+  border: 2px solid $color-gray-light !important;
-  background-color: #ddd !important;
+  background-color: $color-gray-lighter !important;
   font-size: 12px;
   border-radius: 5px 5px 5px 5px;
   position: relative;
@@ -113,7 +113,7 @@
 }
 
 .ajs-pin:hover, .ajs-maximize:hover, .ajs-close:hover {
-  border: 2px solid #CCCCCC !important;
+  border: 2px solid $color-gray-lighter !important;
 }
 
 .alertify.ajs-modeless.ajs-pinnable .ajs-commands button.ajs-pin {
@@ -145,7 +145,7 @@
 }
 
 button.pg-alertify-button {
-  font-family: 'Open Sans';
+  font-family: $font-family-primary;
   font-size: 14px;
   -webkit-font-smoothing: auto;
 }
@@ -161,20 +161,20 @@ button.pg-alertify-button {
 }
 
 .ajs-message.ajs-error.ajs-visible {
-  @extend .bg-red-1;
+  @extend .bg-danger-lighter;
-  @extend .border-red-2;
+  @extend .border-danger;
   @extend .ajs-text-smoothing;
 }
 
 .ajs-message.ajs-success.ajs-visible {
-  @extend .bg-green-1;
+  @extend .bg-success-lighter;
-  @extend .border-green-2;
+  @extend .border-success;
   @extend .ajs-text-smoothing;
 }
 
 .ajs-message.ajs-visible {
-  @extend .bg-blue-1;
+  @extend .bg-primary-lighter;
-  @extend .border-blue-2;
+  @extend .border-primary;
   @extend .ajs-text-smoothing;
 }
 

web/pgadmin/static/scss/_backform.overrides.scss

@@ -1,11 +1,11 @@
 .has-error {
   .pgadmin-controls > .form-control {
-    border-color: #d0021b;
+    border-color: $color-danger;
     position: relative;
   }
 
   .control-label {
-    color: #d0021b;
+    color: $color-danger;
   }
 
   .control-label:before {
@@ -13,7 +13,7 @@
     content: "\f071";
     text-decoration: inherit;
     position: absolute;
-    color: #d0021b;
+    color: $color-danger;
     right: 6px;
     padding-top: 6px;
     z-index: 1;

web/pgadmin/static/scss/_bootstrap.overrides.scss

@@ -2,7 +2,7 @@
 
 /* Ensure simple forms don't hit the top of the screen */
 body {
-    font-family: 'Open Sans';
+    font-family: $font-family-primary;
     padding-top: 50px;
     padding-bottom: 20px;
 }
@@ -70,7 +70,7 @@ iframe {
 
 /* Disabled menu items */
 .mnu-disabled {
-    color: #999999 !important;
+    color:  $color-gray !important;
 }
 
 /*
@@ -105,13 +105,13 @@ iframe {
     border-color: transparent;
     border-style: solid;
     border-width: 5px 0 5px 5px;
-    border-left-color: #cccccc;
+    border-left-color: $color-gray-light;
     margin-top: 5px;
     margin-right: -10px;
 }
 
 .dropdown-submenu:hover>a:after {
-    border-left-color: #ffffff;
+    border-left-color: $color-bg;
 }
 
 .dropdown-submenu.pull-left {
@@ -128,26 +128,26 @@ iframe {
 
 .navbar-inverse > li > a,
 .navbar-inverse .navbar-nav > li > a {
-    color: #FFF;
+    color: $color-fg-inverse;
 }
 
 .navbar-inverse .navbar-brand {
-    color: #009DCF;
+    color: $color-brand;
 }
 
 .navbar-inverse .navbar-brand:hover {
-    color: #009DCF;
+    color: $color-brand;
 }
 
 .navbar-inverse .navbar-brand:focus {
-    color: #009DCF;
+    color: $color-brand;
 }
 
 .navbar-inverse .navbar-nav > .open > a,
 .navbar-inverse .navbar-nav > .active > a,
 .navbar-inverse .navbar-nav > .open > a:hover,
 .navbar-inverse .navbar-nav > .open > a:focus {
-    background: #555 none;
+    background:  $color-gray-dark none;
 }
 
 .dropdown-menu > hr {
@@ -171,18 +171,18 @@ iframe {
 
 .dropdown-menu > li > a:hover,
 .dropdown-menu > li > a:focus {
-    color: #FFFFFF;
+    color: $color-fg-inverse;
-    background: #555 none;
+    background:  $color-gray-dark none;
 }
 
 .form-group fieldset {
-    background-color: #F2F2F2;
+    background-color: $color-gray-lighter;
     padding: 0px 0px 0px 5px;
     border-width: 1px;
     margin-left: 2px;
     margin-right: 2px;
     margin-bottom: 2px;
-    border-color: #DDD;
+    border-color: $color-gray-lighter;
 }
 
 .form-group legend {
@@ -270,10 +270,6 @@ iframe {
     padding: 2px 0px;
 }
 
-.fieldset-content .pgadmin-control-group:nth-child(even): {
-    background-color: #FF0000;
-}
-
 .control-label {
     margin: 0px;
     padding: 5px 25px 5px 5px;
@@ -320,7 +316,7 @@ iframe {
 .obj_properties fieldset > .fieldset-content {
   border-radius:5px;
   padding: 5px 10px;
-  border-color: #92AFC8;
+  border-color: $color-primary-lighter;
   border-width: 2px;
   border-style: ridge;
 }
@@ -330,7 +326,7 @@ iframe {
   text-align: left;
   cursor: pointer;
   margin-bottom: 1px;
-  background-color: #2C76B4;
+  background-color: $color-primary;
   border-radius:5px;
   padding: 5px 7px;
 }
@@ -362,12 +358,12 @@ iframe {
 }
 
 .obj_properties table tr {
-    border: 0px white solid;
+    border: 0px $color-bg solid;
     margin: 1em;
 }
 
 .obj_properties .pgadmin-properties {
-    border: 1px rgb(105, 78, 72) solid;
+    border: 1px  $color-gray-dark solid;
     border-radius: 6px;
     padding: 5px;
     margin: 0.2px 2px 2px 2px;
@@ -381,11 +377,6 @@ iframe {
     vertical-align: middle;
 }
 
-button.btn:disabled {
-    pointer-events: auto;
-    cursor: default;
-}
-
 .pg-prop-btn-group {
   left: 0px;
   right: 0px;
@@ -398,7 +389,7 @@ button.btn:disabled {
 
 .pg-prop-btn-group-below {
     text-align: right;
-    border-color: #A9A9A9;
+    border-color: $color-gray-light;
     border-width: 2px 1px 0px;
     border-style: inset;
     border-left-style: solid
@@ -490,21 +481,21 @@ button.btn:disabled {
 }
 
 .form-control {
-    color: #333333;
+    color:  $color-gray-dark;
     padding: 3px 6px;
 }
 
 .form-control[disabled],
 .form-control[readonly],
 fieldset[disabled] .form-control {
-    color: #666666;
+    color:  $color-gray-dark;
 }
 
 .highlight {
     padding: 5px;
     margin-bottom: 5px;
-    background-color: #F7F7F9;
+    background-color: $color-gray-lighter;
-    border: 1px solid #E1E1E8;
+    border: 1px solid $color-gray-lighter;
     border-radius: 3px;
 }
 
@@ -535,7 +526,7 @@ fieldset[disabled] .form-control {
 }
 
 .backgrid > thead th{
-    background-color: #2C76B4;
+    background-color: $color-primary;
 }
 
 .backgrid > thead > th, .backgrid > tbody > td {
@@ -554,7 +545,7 @@ fieldset[disabled] .form-control {
 }
 
 .backgrid > thead th a {
-    color: white;
+    color: $color-fg-inverse;
     font-size: 12px;
 }
 
@@ -569,7 +560,7 @@ fieldset[disabled] .form-control {
 }
 
 .backgrid.presentation {
-    background-color: #EEEEEE;
+    background-color: $color-gray-lighter;
 }
 
 .backgrid.presentation td.renderable {
@@ -578,11 +569,11 @@ fieldset[disabled] .form-control {
 }
 
 .backgrid:not(.presentation) td.renderable:not(.editable):not(.delete-cell) {
-    background-color: #F1F1F1;
+    background-color: $color-gray-lighter;
 }
 
 .backgrid tr.header td.renderable:not(.editable):not(.delete-cell) {
-    background-color: #AAA;
+    background-color: $color-gray-light;
 }
 
 .sql-editor-grid-container .backgrid > thead > th.renderable,
@@ -591,9 +582,9 @@ fieldset[disabled] .form-control {
 }
 
 .subnode-header {
-    background-color: #2C76B4;
+    background-color: $color-primary;
     height: 35px;
-    color: #FFFFFF;
+    color: $color-fg-inverse;
     border-radius: 3px 3px 0px 0px;
     padding-top: 3px;
 }
@@ -622,9 +613,9 @@ fieldset[disabled] .form-control {
     right: 0;
     height: auto;
     margin-left: 23px;
-    background-color: #dadada;
+    background-color: $color-gray-lighter;
     margin-top: 0px;
-    border: 1px solid #a9a9a9;
+    border: 1px solid $color-gray-light;
 }
 .subnode-body {
     height: auto;
@@ -644,19 +635,19 @@ fieldset[disabled] .form-control {
 }
 
 .sub-node-form > .nav-tabs {
-    background-color: #DADADA;
+    background-color: $color-gray-lighter;
 }
 
 .sub-node-form > ul.tab-content{
-    background-color: #FFFFFF;
+    background-color: $color-bg;
     padding-left: 15px;
     left: 1px;
 }
 
 table.backgrid tr.new {
-    background-color: rgba(82, 168, 236, 0.1) !important;
+    background-color: rgba($color-primary, 0.1) !important;
     box-sizing: border-box;
-    outline: 1px solid rgba(82, 168, 236, 0.8);
+    outline: 1px solid rgba($color-primary, 0.8);
     outline-offset: -1px;
   }
 
@@ -675,7 +666,7 @@ table.backgrid tr.new {
     width: 0px;
     margin: 0px;
     padding: 0px;
-    border: 0px solid black;
+    border: 0px solid $color-fg;
 }
 
 .switch-cell {
@@ -725,10 +716,10 @@ td.switch-cell > div.bootstrap-switch {
     z-index: 4;
 }
 .subnode-header-form {
-    background-color: #EEEEEE;
+    background-color: $color-gray-lighter;
     color: black;
     padding: 3px 0 10px 0;
-    border-top: solid 1.5px white;
+    border-top: solid 1.5px $color-bg;
     font-size: 12px;
 }
 
@@ -738,7 +729,7 @@ td.switch-cell > div.bootstrap-switch {
 }
 
 .subnode-error .help-block {
-    color: #a94442;
+    color: $color-danger;
 }
 
 .select2-container--default .select2-search--inline .select2-search__field {
@@ -761,7 +752,7 @@ fieldset.inline-fieldset {
     margin: 0px; margin-left: 2px; margin-right: 2px;
     padding-right: 10px; padding-left: 10px; padding-top: 6px; padding-bottom: 12px;
     border: 1px solid; border-radius: 5px;
-    border-color: #C3C3C3; box-shadow: 0.1px 0.1px 0.1px #C3C3C3;
+    border-color: $color-gray-lighter; box-shadow: 0.1px 0.1px 0.1px $color-gray-lighter;
 }
 
 fieldset.inline-fieldset-without-border {
@@ -771,7 +762,7 @@ fieldset.inline-fieldset-without-border {
 }
 
 fieldset.inline-fieldset > legend {
-    display: block; border: 0px solid black; box-shadow: none;
+    display: block; border: 0px solid $color-fg; box-shadow: none;
     box-sizing: content-box; top: auto; bottom: auto; left: auto;
     font-size: 14px; font-style: normal; font-weight: 600;
     height: 20px; line-height: 20px; margin: 0px; padding-bottom: 0px;
@@ -818,7 +809,7 @@ div.inline-tab-panel > ul.nav-tabs > li:first-child > a:focus {
 }
 
 div.inline-tab-panel > ul.tab-content {
-  padding-left: 5px; padding-right: 5px; border-color: #DDD;
+  padding-left: 5px; padding-right: 5px; border-color: $color-gray-lighter;
   border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;
   border-width: 0px 1px 1px 1px; border-bottom-right-radius: 5px;
   border-bottom-left-radius: 5px; border-style: solid solid;
@@ -854,11 +845,11 @@ td.edit-cell.editable.sortable.renderable.editor {
 }
 
 .subnode > table.backgrid > thead > tr > th:first-child{
-  border-left-color: #2C76B4;
+  border-left-color: $color-primary;
 }
 
 .subnode > table.backgrid > thead > tr > th:last-child{
-  border-right-color: #2C76B4;
+  border-right-color: $color-primary;
 }
 
 .select2-container .select2-selection--single .select2-selection__rendered{
@@ -885,20 +876,20 @@ td.edit-cell.editable.sortable.renderable.editor {
 
 .select2-container--default.select2-container--focus
 .select2-selection--multiple {
-  border: 1px solid #aaa !important;
+  border: 1px solid $color-gray-light !important;
   outline: 0 none;
 }
 
 .select2-container--default.select2-container--focus {
-  border-color: #66afe9;
+  border-color: $color-primary-light;
   outline: 0;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
+  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba($color-primary, .6);
-  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba($color-primary, .6);
 }
 
 /* CSS for SqlField control */
 .sql_field_layout {
-    border: 1px solid rgba(184, 184, 184, 1) !important;
+    border: 1px solid rgba($color-gray-light, 1) !important;
     border-radius: 4px;
     padding: 0px;
 }
@@ -923,20 +914,22 @@ td.edit-cell.editable.sortable.renderable.editor {
 }
 
 .nav-tabs>li>a{
-    border-radius: 5px 5px 0 0;
+  border-radius: 5px 5px 0 0;
 	margin-right:1px;
 	border:0px;
+	color: $color-primary;
 }
 
 .nav-tabs>li > a:hover , .nav-tabs>li > a:focus{
 	border:0px;
 	margin-bottom:0px;
-	color:black;
+	color:$color-fg;
 	padding-bottom: 4px!important;
+	background-color: $color-gray-white;
 }
 .nav-tabs>li.active>a ,.nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover ,.nav-tabs>li.active>a:active{
 	border:0px;
-	color:black;
+	color:$color-fg;
 	margin-top: 0px;
 	padding-top: 7px!important;
 	padding-bottom: 4px!important;
@@ -948,26 +941,27 @@ td.edit-cell.editable.sortable.renderable.editor {
     padding-left: 8px;
     padding-right: 8px;
     padding-top: 4px;
-	padding-bottom:0px;
+    padding-bottom:0px;
-	margin-top:3px;
+    margin-top:3px;
 }
 
 .obj_properties .backform-tab > .nav-tabs {
-	background-color: #E2E2E2;
+	background-color: $color-gray-lighter;
 }
 
 ul.nav.nav-tabs {
-    background-color: #E2E2E2;
+  background-color: $color-gray-lighter;
 	padding-top: 4px;
 }
 
+
 .pg-panel-depends-container >table.backgrid.table-bordered {
   border: 0px;
 }
 
 .pg-panel-depends-container > table > thead > tr > th {
   padding: 2px;
-  border: 1px solid #ddd;
+  border: 1px $color-gray-lighter solid;
 }
 
 .pg-panel-depends-container > table > thead > tr > th:first-child {
@@ -994,27 +988,27 @@ ul.nav.nav-tabs {
 
 /* Alert info panel */
 .alert-info-panel {
-  border: 2px solid #a1a1a1;
+  border: 2px solid $color-gray-light;
   margin-top: 2em;
   padding: 5px 5px;
-  background: #dddddd;
+  background: $color-gray-lighter;
   border-radius: 5px;
   height: 8em;
   overflow: scroll;
 }
 
 span.button-label {
-  font-family: 'Open Sans';
+  font-family: $font-family-primary;
   font-size: initial;
 }
 
 .backform_control_notes {
-  background-color: #f5f5f5;
+  background-color: $color-gray-lighter;
-  border: 1px solid #ccc;
+  border: 1px solid $color-gray-light;
   border-radius: 3px;
-  color: #333;
+  color:  $color-gray-dark;
   display: block;
-  font-family: 'Source Code Pro';
+  font-family: $font-family-editor;
   font-size: 12px;
   line-height: 1.42857;
   margin: 0 0 10px;
@@ -1028,7 +1022,7 @@ div.backform_control_notes label.control-label {
 }
 
 form[name="change_password_form"] .help-block {
-    color: #A94442 !important;
+    color: $color-danger !important;
 }
 
 .file_selection_ctrl .create_input span {
@@ -1051,12 +1045,12 @@ form[name="change_password_form"] .help-block {
 
 .file_selection_ctrl button.select_item {
   display: inline;
-  background: #777;
+  background:  $color-gray;
-  background: -webkit-linear-gradient(#777, #999999);
+  background: -webkit-linear-gradient( $color-gray,  $color-gray);
-  background: -o-linear-gradient(#777, #999);
+  background: -o-linear-gradient( $color-gray, $color-gray-light);
-  background: -moz-linear-gradient(#777, #999);
+  background: -moz-linear-gradient( $color-gray, $color-gray-light);
-  background: linear-gradient(#777, #999);
+  background: linear-gradient( $color-gray, $color-gray-light);
-  color: #fff;
+  color: $color-fg-inverse;
   padding: 9px 0px 9px 0px;
   margin-left: 0px;
   margin-right: -7px;
@@ -1166,7 +1160,7 @@ form[name="change_password_form"] .help-block {
 
 .subnode-footer {
   text-align: right;
-  border-color: #a9a9a9;
+  border-color: $color-gray-light;
   border-style: inset inset inset solid;
   border-width: 2px 1px 0;
   margin-top: -10px;
@@ -1184,12 +1178,12 @@ form[name="change_password_form"] .help-block {
 }
 
 .close-error-bar {
-  background: #d0021b;
+  background: $color-danger;
   padding: 5px;
 }
 
 .close-error-bar a {
-  color: #FFFFFF;
+  color: $color-fg-inverse;
   cursor: pointer;
 }
 
@@ -1241,7 +1235,7 @@ height: calc(100% - 35px);
 
 .pg-panel-statistics-container > table > thead > tr > th {
   padding: 2px;
-  border: 1px solid #ddd;
+  border: 1px solid $color-gray-lighter;
 }
 
 .pg-panel-statistics-container > table > thead > tr > th:first-child {
@@ -1274,10 +1268,10 @@ table.backgrid {
 }
 
 .pgadmin-controls.focused {
-  border-color: #66afe9;
+  border-color: $color-primary-light;
   outline: 0;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
+  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba($color-primary, .6);
-  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba($color-primary, .6);
 }
 
 .bootstrap-datetimepicker-widget td,
@@ -1338,13 +1332,13 @@ body {
 .backgrid tr th button {
   background: none;
   border: none;
-  color: #fff;
+  color: $color-fg-inverse;
   padding: 0;
 }
 
 /* Latest backgrid adds column name like `label` to td element, override color*/
 .backgrid td.label {
-  color: #333;
+  color:  $color-gray-dark;
   font-size: 14px;
   font-weight: normal;
 }
@@ -1361,17 +1355,17 @@ body {
 
 /* Override CSS for Colour Picker to match it with pgAdmin4 style */
 .sp-replacer {
-  background: #fff;
+  background: $color-bg;
-  border: solid 1px #ccc;
+  border: solid 1px $color-gray-light;
   border-radius: 3px;
 }
 
 .sp-replacer:hover {
-  border-color: #ccc;
+  border-color: $color-gray-light;
 }
 
 .sp-replacer.sp-active {
-  border-color: #66afe9;
+  border-color: $color-primary-light;
   border-radius: 4px;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
@@ -1381,40 +1375,40 @@ body {
 }
 
 .sp-replacer.sp-disabled {
-    background-color: #eee;
+    background-color: $color-gray-lighter;
 }
 
 .sp-container {
-  background-color: #fff;
+  background-color: $color-bg;
-  border: solid 1px #ccc;
+  border: solid 1px $color-gray-light;
   border-radius: 3px !important;
 }
 
 .sp-palette-button-container button,
 .sp-palette-button-container button:hover {
   padding: 5px;
-  background-color: #2c76b4;
+  background-color: $color-primary;
   background-image: none;
-  font-family: 'Open Sans';
+  font-family: $font-family-primary;
   font-size: 12px;
-  color: #fff;
+  color: $color-fg-inverse;
   text-shadow: none;
   -webkit-font-smoothing: auto;
 }
 
 .sp-container button:active {
-    border: 1px solid #84acdd;
+    border: 1px solid $color-primary;
     border-bottom: none;
-    -webkit-box-shadow: inset 0 0 5px 2px #84acdd, 0 1px 0 0 #84acdd;
+    -webkit-box-shadow: inset 0 0 5px 2px $color-primary, 0 1px 0 0 $color-primary-light;
-    -moz-box-shadow: inset 0 0 5px 2px #84acdd, 0 1px 0 0 #84acdd;
+    -moz-box-shadow: inset 0 0 5px 2px $color-primary, 0 1px 0 0 $color-primary-light;
-    -ms-box-shadow: inset 0 0 5px 2px #84acdd, 0 1px 0 0 #84acdd;
+    -ms-box-shadow: inset 0 0 5px 2px $color-primary, 0 1px 0 0 $color-primary-light;
-    -o-box-shadow: inset 0 0 5px 2px #84acdd, 0 1px 0 0 #84acdd;
+    -o-box-shadow: inset 0 0 5px 2px $color-primary, 0 1px 0 0 $color-primary-light;
-    box-shadow: inset 0 0 5px 2px #84acdd, 0 1px 0 0 #84acdd;
+    box-shadow: inset 0 0 5px 2px $color-primary, 0 1px 0 0 $color-primary-light;
 }
 
 .sp-dd {
   font-size: 8px;
-  color: #888888;
+  color:  $color-gray;
 }
 
 /* CSS for custom checkbox editor in SlickGrid */
@@ -1423,7 +1417,7 @@ body {
   vertical-align: top;
   width: 16px;
   height: 16px;
-  border: 1px solid #333;
+  border: 1px solid  $color-gray-dark;
   margin: 3px;
   text-align: center;
   line-height: 16px;
@@ -1431,11 +1425,11 @@ body {
 
 .multi-checkbox .check.checked,
 .multi-checkbox .check.unchecked {
-  background: #fff;
+  background: $color-bg;
 }
 
 .multi-checkbox .check.partial {
-  background: #e8e8e8;
+  background: $color-gray-lighter;
 }
 
 .multi-checkbox .check.checked:after {
@@ -1448,6 +1442,11 @@ body {
 
 /* Override default bootstrap popover fonts & size */
 .popover-content {
-  font-family: 'Open Sans';
+  font-family: $font-family-primary;
   font-size: 13px;
 }
+
+
+.btn.btn-default[disabled] {
+  color: $color-gray;
+}

web/pgadmin/static/scss/_codemirror.overrides.scss

@@ -1,7 +1,10 @@
+.cm-s-default .CodeMirror {
+  background: $color-editor-bg;
+}
 /* To override inbuilt Green color for matchingbracket */
 .cm-s-default .CodeMirror-matchingbracket {
-    color: #333333 !important;
+    color:  $color-gray-dark !important;
-    background-color: #e8e8e8 !important;
+    background-color: $color-gray-lighter !important;
 }
 
 /* Ensure the codemirror editor displays full height gutters when resized */
@@ -12,7 +15,7 @@
 
 /*
  * Remove border right from "CodeMirror-gutters"
- * class becuase its height doesn't increase
+ * class because its height doesn't increase
  * with every new line added, instead add border
  * right to ".CodeMirror-linenumber" class which
  * adds a new div for every new line added
@@ -22,45 +25,45 @@
 }
 
 .sql_field_layout .CodeMirror-linenumber {
-    border-right: 1px solid #ddd;
+    border-right: 1px solid $color-gray-lighter;
-    background-color: #f7f7f7;
+    background-color: $color-gray-lighter;
 }
 
 /* class to disable Codemirror editor */
 .cm_disabled {
-  background: #EEEEEE;
+  background: $color-gray-lighter;
 }
 
 /* make syntax-highlighting bold */
 .cm-s-default .cm-keyword {
   font-weight: 600;
-  color: #908;
+  color: $color-editor-keyword;
 }
 
 .cm-s-default .cm-number {
   font-weight: 600;
-  color: #964;
+  color: $color-editor-number;
 }
 
 /* Codemirror buttons */
 .CodeMirror-dialog button {
-    font-family: 'Open Sans';
+    font-family: $font-family-primary;
-    color: white;
+    color: $color-fg-inverse;
     font-size: 70%;
-    background-image: -webkit-linear-gradient(top, #337ab7 0%, #265a88 100%);
+    background-image: -webkit-linear-gradient(top, $color-primary-light 0%, $color-primary 100%);
-    background-image: -o-linear-gradient(top, #337ab7 0%, #265a88 100%);
+    background-image: -o-linear-gradient(top, $color-primary-light 0%, $color-primary 100%);
-    background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#265a88));
+    background-image: -webkit-gradient(linear, left top, left bottom, from($color-primary-light), to($color-primary));
-    background-image: linear-gradient(to bottom, #337ab7 0%, #265a88 100%);
+    background-image: linear-gradient(to bottom, $color-primary-light 0%, $color-primary 100%);
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff265a88', GradientType=0);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$color-primary-light}', endColorstr='#{$color-primary}', GradientType=0);
     filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
     background-repeat: repeat-x;
-    border-color: #245580;
+    border-color: $color-primary;
     border-radius: 4px;
 }
 
 #history-detail-query .CodeMirror {
-  border: 1px solid #CCCCCC;
+  border: 1px solid $color-gray-light;
-  background-color: #F7F7F7;
+  background-color: $color-gray-lighter;
   width: 100%;
   padding-left: 5px;
   position: absolute;

web/pgadmin/static/scss/_colorsgrey.scss

@@ -1,62 +0,0 @@
-$color-gray-1: #f9f9f9;
-$color-gray-2: #e8e8e8;
-$color-gray-3: #cccccc;
-$color-gray-4: #888888;
-$color-gray-5: #555555;
-$color-gray-6: #333333;
-
-.bg-gray-1 {
-  background-color: $color-gray-1;
-}
-
-.bg-gray-2 {
-  background-color: $color-gray-2;
-}
-
-.bg-gray-3 {
-  background-color: $color-gray-3;
-}
-
-.bg-gray-4 {
-  background-color: $color-gray-4;
-}
-
-.bg-gray-5 {
-  background-color: $color-gray-5;
-}
-
-.bg-gray-6 {
-  background-color: $color-gray-6;
-}
-
-.border-gray-1 {
-  border-color: $color-gray-1;
-}
-
-.border-gray-2 {
-  border-color: $color-gray-2;
-}
-
-.border-gray-3 {
-  border-color: $color-gray-3;
-}
-
-.border-gray-4 {
-  border-color: $color-gray-4;
-}
-
-.border-gray-5 {
-  border-color: $color-gray-5;
-}
-
-.border-gray-6 {
-  border-color: $color-gray-6;
-}
-
-.font-gray-4 {
-  color: $color-gray-4;
-}
-
-.font-gray-6 {
-  color: $color-gray-6;
-}

web/pgadmin/static/scss/_othercolors.scss

@@ -1,84 +0,0 @@
-$color-blue-1: #e7f2ff;
-$color-blue-2: #84acdd;
-$color-red-1: #f2dede;
-$color-red-2: #de8585;
-$color-red-3: #d0021b;
-$color-green-1: #dff0d7;
-$color-green-2: #a2c189;
-$color-green-3: #3a773a;
-
-.bg-white-1 {
-  background-color: #ffffff;
-}
-
-.bg-blue-1 {
-  background-color: $color-blue-1;
-}
-
-.bg-blue-2 {
-  background-color: $color-blue-2;
-}
-
-.bg-red-1 {
-  background-color: $color-red-1;
-}
-
-.bg-red-2 {
-  background-color: $color-red-2;
-}
-
-.bg-red-3 {
-  background-color: $color-red-3;
-}
-
-.bg-green-1 {
-  background-color: $color-green-1;
-}
-
-.bg-green-2 {
-  background-color: $color-green-2;
-}
-
-.bg-green-3 {
-  background-color: $color-green-3;
-}
-
-.border-blue-1 {
-  border-color: $color-blue-1;
-}
-
-.border-blue-2 {
-  border-color: $color-blue-2;
-}
-
-.border-red-1 {
-  border-color: $color-red-1;
-}
-
-.border-red-2 {
-  border-color: $color-red-2;
-}
-
-.border-red-3 {
-  border-color: $color-red-3;
-}
-
-.border-green-1 {
-  border-color: $color-green-1;
-}
-
-.border-green-2 {
-  border-color: $color-green-2;
-}
-
-.border-green-3 {
-  border-color: $color-green-3;
-}
-
-.font-red-3 {
-  color: $color-red-3;
-}
-
-.font-green-3 {
-  color: $color-green-3;
-}

web/pgadmin/static/scss/_primaryblue.scss

@@ -1,13 +0,0 @@
-$primary-blue: #2c76b4;
-
-.bg-primary-blue {
-  background-color: $primary-blue;
-}
-
-.border-primary-blue {
-  border-color: $primary-blue;
-}
-
-.font-primary-blue {
-  color: $primary-blue;
-}

web/pgadmin/static/scss/_select2.overrides.scss

@@ -1,4 +1,4 @@
 .select2-container--default .select2-results__option--highlighted[aria-selected] {
-  background-color: #e7f2ff;
+  background-color: $color-primary-lighter;
-  color: #333333;
+  color:  $color-gray-dark;
-}
+}

web/pgadmin/static/scss/_typography.scss

@@ -1,25 +0,0 @@
-$font-family-1: "Open Sans";
-
-.text-bold {
-  font-weight: bold;
-}
-
-.text-14 {
-  font-family: $font-family-1;
-  font-size: 14px;
-}
-
-.text-13 {
-  font-family: $font-family-1;
-  font-size: 13px;
-}
-
-.text-12 {
-  font-family: $font-family-1;
-  font-size: 12px;
-}
-
-.text-11 {
-  font-family: $font-family-1;
-  font-size: 11px;
-}

web/pgadmin/static/scss/_webcabin.overrides.scss

@@ -0,0 +1,368 @@
+.wcDocker {
+  background-color: $color-bg;
+}
+
+.wcPanelBackground {
+  background-color: $color-bg;
+}
+
+.wcPanelBackground .wcCenter {
+  background-color: $color-gray-lighter;
+}
+
+.wcFrameFlasher {
+  background-color: $color-danger;
+}
+
+.wcFrameShadower {
+  background-color: $color-gray-light;
+}
+
+.wcFrameTitle {
+  font-size: 13px;
+  padding-left: 8px;
+  vertical-align: middle;
+  text-align: left;
+  border-bottom: 1px none;
+  height: 100%;
+  padding-top: 10px;
+  background-color: $color-gray-lighter;
+}
+
+.wcFrameCenter {
+  top: 35px;
+}
+
+.wcFrameButton {
+  width: 20px;
+  height: 20px;
+  border: 2px solid $color-gray;
+  background-color: $color-gray-lighter;
+  font-size: 12px;
+  border-radius: 5px 5px 5px 5px;
+  margin-right: 2px;
+}
+
+.wcFrameButton.disabled {
+  pointer-events: none;
+  opacity: 0.4;
+}
+
+.wcFrameMiniButton {
+  width: 8px;
+}
+
+.wcFrameButton.wcFrameButtonLeft {
+  right: 10px;
+}
+.wcFrameButton.wcFrameButtonRight {
+  right: 10px;
+}
+
+.wcFrameButton:hover {
+  border: 2px solid $color-gray-light;
+}
+
+.wcFrameButton:active {
+  border: 2px solid $color-gray-lighter;
+}
+
+.wcFrameButtonToggled, .wcFrameButtonToggled:hover {
+  border-style: inset;
+}
+
+.wcLayoutGrid, .wcLayoutGrid tr, .wcLayoutGrid td {
+  border: 1px solid  $color-gray;
+}
+
+.wcLayoutGridAlternate tr:nth-child(even), .wcLayoutGridAltColor {
+  background-color: rgba($color-danger-light, 0.2) !important;
+}
+
+.wcFrameEdge {
+  border: 1px solid $color-gray-lighter;
+  background-color: $color-gray-lighter;
+}
+
+.wcFrame > .wcFrameEdgeV ~ .wcFrameEdgeV {
+  box-shadow: 3px 6px 3px 1px  $color-gray !important;
+}
+
+.wcFrame > .wcFrameEdge ~ .wcFrameEdgeV {
+  box-shadow: 1px 0px 0px 0px  $color-gray;
+}
+
+.wcFrame > .wcFrameEdgeH ~ .wcFrameEdgeH {
+  box-shadow: 2px 3px 3px 2px  $color-gray !important;
+}
+
+.wcFrame > .wcFrameEdgeH {
+  box-shadow: 1px 0px 0px 0px  $color-gray;
+}
+
+.wcFrameEdgeH {
+  height: 6px;
+}
+
+.wcFrameEdgeV {
+  width: 6px;
+}
+.wcFrameCornerNW,
+.wcFrameCornerNE {
+  height: 6px;
+  width: 6px;
+}
+
+.wcSplitterBar {
+  border: 1px solid  $color-gray;
+  background-color: $color-gray-light;
+}
+
+.wcSplitterBarV {
+  border-left: 3px solid $color-gray-light;
+  height: 100% !important;
+}
+
+.wcSplitterBarH {
+  border-top: 3px solid $color-gray-light;
+  width: 100% !important;
+}
+
+.wcPanelTab {
+  color: $color-primary;
+  background-color: $color-gray-lighter;
+  border: 0px;
+  border-radius: 4px 4px 0px 0px;
+  border-bottom: 0px;
+  margin-right: 1px;
+  margin-top: 10px;
+  font-size: 13px;
+  padding-left: 8px;
+  padding-right: 8px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+
+.wcPanelTab:hover {
+  background-color: $color-gray-white;
+  padding-bottom: 10px;
+}
+
+.wcPanelTabActive {
+  background-color: $color-bg;
+  color: $color-fg;
+  margin-top: 5px;
+  line-height: 30px;
+  font-weight: normal;
+}
+
+.wcFloating .wcPanelTabActive {
+  background-color: $color-primary;
+  margin-top: -2px;
+  font-weight: bold;
+  color: $color-fg-inverse;
+}
+
+.wcFloating .wcPanelTabActive:hover {
+  background-color: $color-primary-light;
+}
+
+.wcGhost {
+  background-color: $color-primary-light;
+  border-radius: 6px;
+}
+
+.wcMenuList, .context-menu-list {
+  border: 1px solid $color-gray-lighter;
+  z-index: 999 !important;
+  background: $color-gray-lighter;
+}
+
+.wcMenuItem, .context-menu-item {
+  background-color: $color-gray-lighter;
+}
+
+.wcMenuItemHover, .wcMenuItem:hover, .context-menu-item.hover, .context-menu-item:hover {
+  background-color: $color-primary !important;
+}
+
+.wcMenuItem.disabled, .context-menu-item.disabled {
+  color: $color-gray-dark;
+  background-color:  $color-gray;
+}
+
+.wcMenuSeparator, .context-menu-separator {
+  border: 2px solid $color-gray-light;
+  background-color: $color-gray-lighter;
+}
+
+.wcInput, input {
+  background-color: transparent;
+}
+
+.wcSelect, select {
+  background-color: transparent;
+}
+
+.wcLayout, .wcLayout tr, .wcLayout td {
+  vertical-align: top;
+}
+
+.wcPanelTab > div > .wcTabIcon {
+  display: inline-block;
+  text-align: center;
+  padding-left: 20px;
+  margin-top: -5px;
+  margin-right: 5px;
+}
+
+.wcPanelTab > div .wcTabIcon.fa {
+  padding-left: 0px !important;
+  color: $color-fg;
+}
+
+.wcTabIcon.fa {
+  margin-right: 5px;
+}
+
+.wcFrameTitleBar {
+  background-color: $color-gray-lighter;
+  height: 35px;
+  border-bottom: $color-gray;
+}
+
+.wcFloating .wcFrameTitleBar {
+  border-bottom: 2px solid  $color-gray;
+  background-color: $color-primary;
+}
+
+.wcFloating .wcFrameTitleBar > div .wcTabIcon.fa {
+  color: $color-fg-inverse;
+}
+
+.wcFrame .wcFrameTitleBar a:hover {
+  color: $color-primary-dark;
+}
+
+.wcFrameButtonBar {
+  top: 5px;
+  right: 5px;
+}
+.context-menu-list {
+font-family: $font-family-primary;
+font-size: 13px;
+}
+
+.context-menu-icon:before {
+  color:  $color-gray-darker;
+  font-size: 13px;
+}
+
+.context-menu-icon-fa:before {
+  font-family: 'FontAwesome'
+}
+
+.context-menu-item {
+  display:block;
+  font-family: $font-family-primary;
+  font-size: 13px;
+  font-weight: normal;
+}
+
+.context-menu-list {
+    padding: 2px 0;
+    width: initial !important;
+}
+
+.context-menu-list > .context-menu-item {
+    display:block !important;
+}
+
+.context-menu-list > .context-menu-separator {
+    margin: 0;
+    border: 1px solid $color-bg;
+}
+
+.context-menu-icon-wcTabIcon {
+  text-align: left;
+  padding: 3px 28px;
+  height: auto;
+  background-position: 5px 50%;
+}
+
+ul.dropdown-menu > li.menu-item > a > i.wcTabIcon {
+  width: 14px;
+}
+
+.wcFrameButton .fa.fa-close,
+.wcFrameButton .fa.fa-filter,
+.wcFrameButton .fa.fa-table,
+.wcFrameButton .fa.fa-bolt {
+  margin-top: 3.5px;
+  padding-left: 1px;
+}
+
+span.fa.fa-arrow-left, .fa-arrow-right {
+  margin-top: 4px;
+  width: 14px;
+}
+
+.wcMenuSubMenu {
+  visibility: hidden;
+}
+
+i.wcTabIcon {
+  min-width: 20px;
+}
+
+.wcLoadingBackground {
+  background: $color-bg-inverse;
+  opacity: 0.6 !important;
+}
+
+.wcLoadingIcon.fa-spinner {
+  position: absolute;
+  top: 34%;
+  left: 48%;
+  font-size: 50px;
+  color: $color-gray-light;
+  height: 49px !important;
+}
+
+.wcLoadingLabel {
+  top: 40%;
+  left: 0;
+  color: $color-fg-inverse;
+  width: 100%;
+  font-size: 20px;
+  position: absolute;
+  text-align: center;
+}
+
+.wcPanelTab > div {
+  display: inline-block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  max-width: 125px;
+}
+
+.wcPanelTabActive > div {
+  width: auto !important;
+  max-width: 100%;
+}
+
+.wcFrameTitleBar.wcTabTop .wcFrameButtonBar {
+  right: 30px !important;
+}
+
+.wcFloating .wcPanelTab .wcTabIcon {
+  display: block;
+  float: left;
+  margin-top: 8px;
+  border-radius: 2px;
+  padding: 0px 13px 5px 5px;
+  background-color: $color-bg;
+  background-size: 18px !important;
+  height: 18px;
+}

web/pgadmin/static/scss/pgadmin.scss

@@ -1,20 +1,9 @@
-$enable-flex: true;
+@import 'webcabin.overrides';
-@import '../css/webcabin.overrides.css';
+@import 'bootstrap.overrides';
-@import '../css/bootstrap.overrides.css';
+@import 'aci_tree.overrides';
-@import '../css/aci_tree.overrides.css';
+@import 'select2.overrides';
-@import '../css/select2.overrides.css';
+@import 'codemirror.overrides';
-@import '../css/pgadmin.css';
-@import '../css/pgadmin.style.css';
-@import '../css/codemirror.overrides.css';
-
-@import 'primaryblue';
-@import 'colorsgrey';
-@import 'othercolors';
-@import 'typography';
-
-@import 'utils';
 
 @import 'alert';
 @import 'alertify.overrides';
 @import 'backform.overrides';
-@import 'sqleditor/history';

web/pgadmin/static/scss/resources/_default.style.scss

@@ -0,0 +1,243 @@
+/* Background color */
+
+.bg-white {
+  background-color: $color-bg;
+}
+
+.bg-primary {
+  background-color: $color-primary;
+
+  &-lighter {
+    background-color: $color-primary-lighter;
+  }
+
+  &-light{
+    background-color: $color-primary-light;
+  }
+
+  &-dark{
+    background-color: $color-primary-dark;
+  }
+
+  &-darker{
+    background-color: $color-primary-darker;
+  }
+}
+
+.bg-danger {
+  background-color: $color-danger;
+
+  &-lighter {
+    background-color: $color-danger-lighter;
+  }
+
+  &-light {
+    background-color: $color-danger-light;
+  }
+
+  &-dark{
+    background-color: $color-danger-dark;
+  }
+
+  &-darker{
+    background-color: $color-danger-darker;
+  }
+}
+
+.bg-success {
+  background-color: $color-success;
+
+  &-lighter {
+    background-color: $color-success-lighter;
+  }
+
+  &-light {
+    background-color: $color-success-light;
+  }
+
+  &-dark{
+    background-color: $color-success-dark;
+  }
+
+  &-darker{
+    background-color: $color-success-darker;
+  }
+}
+
+
+.bg-warning {
+  background-color: $color-warning;
+
+  &-lighter {
+    background-color: $color-warning-lighter;
+  }
+
+  &-light {
+    background-color: $color-warning-light;
+  }
+
+  &-dark{
+    background-color: $color-warning-dark;
+  }
+
+  &-darker{
+    background-color: $color-warning-darker;
+  }
+}
+
+
+.bg-gray {
+  background-color:  $color-gray;
+
+  &-lighter {
+    background-color: $color-gray-lighter;
+  }
+
+  &-light {
+    background-color: $color-gray-light;
+  }
+
+  &-dark {
+    background-color:  $color-gray-dark;
+  }
+
+  &-darker {
+    background-color:  $color-gray-darker;
+  }
+}
+
+/* Borders */
+.border-primary {
+  border-color: $color-primary;
+
+  &-lighter {
+    border-color: $color-primary-lighter;
+  }
+
+  &-light {
+    border-color: $color-primary-light;
+  }
+
+  &-dark {
+    border-color: $color-primary-dark;
+  }
+
+  &-darker {
+    border-color: $color-primary-darker;
+  }
+}
+
+.border-danger {
+  border-color: $color-danger;
+
+  &-lighter{
+    border-color: $color-danger-lighter;
+  }
+
+  &-light {
+    border-color: $color-danger-light;
+  }
+
+  &-dark {
+    border-color: $color-danger-dark;
+  }
+
+  &-darker {
+    border-color: $color-danger-darker;
+  }
+}
+
+.border-success {
+  border-color: $color-success-light;
+
+  &-lighter {
+    border-color: $color-success-lighter;
+  }
+
+  &-light {
+    border-color: $color-success-light;
+  }
+
+  &-dark {
+    border-color: $color-success-dark;
+  }
+
+  &-darker {
+    border-color: $color-success-darker;
+  }
+}
+
+.border-gray {
+  border: 2px solid $color-gray;
+
+  &-lighter {
+    border: 2px solid $color-gray-lighter;
+  }
+
+  &-light {
+    border: 2px solid $color-gray-light;
+  }
+
+  &-dark {
+    border: 2px solid $color-gray-dark;
+  }
+
+  &-darker {
+    border: 2px solid $color-gray-darker;
+  }
+
+  &-white {
+    border: 2px solid $color-gray-white;
+  }
+}
+
+/* Typography */
+
+
+.text-fg-inverse {
+  color: $color-fg-inverse;
+}
+
+.text-gray {
+  color:  $color-gray;
+
+  &-dark {
+    color:  $color-gray-dark;
+  }
+}
+
+.text-danger {
+  color: $color-danger;
+}
+
+.text-primary {
+  color: $color-primary;
+}
+
+.text-success {
+  color: $color-success;
+}
+
+.text-bold {
+  font-weight: bold;
+}
+
+.text-14 {
+  font-family: $font-family-primary;
+  font-size: 14px;
+}
+
+.text-13 {
+  font-family: $font-family-primary;
+  font-size: 13px;
+}
+
+.text-12 {
+  font-family: $font-family-primary;
+  font-size: 12px;
+}
+
+.text-11 {
+  font-family: $font-family-primary;
+  font-size: 11px;
+}

web/pgadmin/static/scss/resources/_default.variables.scss

@@ -0,0 +1,63 @@
+$enable-flex: true !default;
+
+$color-bg: #fff !default;
+$color-fg: #000 !default;
+
+$color-bg-inverse: $color-fg;
+$color-fg-inverse: $color-bg;
+
+$color-primary: #2c76b4 !default;
+$color-primary-fg: $color-fg !default;
+
+$color-danger: #d63a35 !default;
+$color-danger-fg: $color-fg !default;
+
+$color-success: #3a773a !default;
+$color-success-fg: $color-fg !default;
+
+$color-warning: #eea236 !default;
+$color-warning-fg: $color-fg !default;
+
+$color-brand: #009dcf !default;
+$color-editor-bg: $color-bg !default;
+$color-editor-keyword: #908 !default;
+$color-editor-number: #964 !default;
+$color-editor-foldmarker: #0000FF !default;
+$color-editor-activeline: #50B0F0 !default;
+
+$gray-base: #000 !default;
+
+$color-gray-darker: #333333;
+$color-gray-dark: #555555;
+$color-gray: #888888;
+$color-gray-light: #cccccc;
+$color-gray-lighter: #e8e8e8;
+$color-gray-white: #f9f9f9;
+
+$color-primary-light: lighten($color-primary, 25%);
+$color-primary-lighter: lighten($color-primary, 50%);
+$color-primary-dark: darken($color-primary, 10%);
+$color-primary-darker: darken($color-primary, 25%);
+
+$color-danger-light: lighten($color-danger, 25%);
+$color-danger-lighter: lighten($color-danger, 40%);
+$color-danger-dark: darken($color-danger, 10%);
+$color-danger-darker: darken($color-danger, 25%);
+
+$color-success-light: lighten($color-success, 30%);
+$color-success-lighter: lighten($color-success, 50%);
+$color-success-dark: darken($color-success, 10%);
+$color-success-darker: darken($color-success, 25%);
+
+$color-warning-light: lighten($color-warning, 25%);
+$color-warning-lighter: lighten($color-warning, 40%);
+$color-warning-dark: darken($color-warning, 25%);
+$color-warning-darker: darken($color-warning, 40%);
+
+/* Typography */
+/* Use absolute path as this will be used in different directories */
+$font-family-primary: "Open Sans" !default;
+$font-url-primary: '~top/static/fonts/OpenSans-Regular.ttf' !default;
+
+$font-family-editor: 'Source Code Pro' !default;
+$font-url-editor: '~top/static/fonts/SourceCodePro-Regular.ttf' !default;

web/pgadmin/static/scss/resources/_pgadmin.style.scss

@@ -786,7 +786,7 @@ lgg-el-container[el=md] .pg-el-lg-8,
 }
 
 .Resizer {
-  background: #dddddd;
+  background: $color-gray-lighter;
   z-index: 1;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -800,13 +800,14 @@ lgg-el-container[el=md] .pg-el-lg-8,
   width: 100%;
   height: 4px;
   cursor: ew-resize;
-  border-bottom: 1px solid #aaaaaa;
+  border-bottom: 1px solid $color-gray-light;
 }
 
+
 .Resizer.vertical {
   width: 4px;
   cursor: ew-resize;
-  border-right: 1px solid #aaaaaa;
+  border-right: 1px solid $color-gray-light;
 }
 
 .Resizer.disabled {
@@ -818,15 +819,15 @@ lgg-el-container[el=md] .pg-el-lg-8,
 }
 
 @font-face {
-  font-family: 'Open Sans';
+  font-family: $font-family-primary;
-  src: url('../fonts/OpenSans-Regular.ttf');
+  src: url($font-url-primary);
   font-weight: normal;
   font-style: normal;
 }
 
 @font-face {
-  font-family: 'Source Code Pro';
+  font-family: $font-family-editor;
-  src: url('../fonts/SourceCodePro-Regular.ttf');
+  src: url($font-url-editor);
   font-weight: normal;
   font-style: normal;
 }
@@ -869,3 +870,42 @@ lgg-el-container[el=md] .pg-el-lg-8,
 .nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
   background-color: initial !important;
 }
+
+
+.alert-box {
+  padding: 15px; }
+
+.alert-icon {
+  display: table-cell; }
+
+.alert-text {
+  display: table-cell;
+  padding-left: 10px; }
+
+.alert-info {
+  border-color: $color-primary-light; }
+
+.color-chip {
+  align-items: center;
+  border-radius: 3px;
+  box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.15);
+  color: rgba(0, 0, 0, 0.65);
+  display: flex;
+  font-size: 1.25em;
+  height: 70px;
+  justify-content: center;
+  margin: 0 0 0.5em;
+  width: 100%; }
+
+.bg-highlight {
+  background-color: $color-primary-lighter; }
+
+.bg-border {
+  background-color: $color-primary-light; }
+
+.opacity-5 {
+  opacity: 0.5;  }
+
+.alertify .ajs-header,
+.alertify .ajs-body {
+  font-family: $font-family-primary; }

web/pgadmin/static/scss/resources/pgadmin.resources.scss

@@ -0,0 +1,6 @@
+/* All the global variables, mixins goes here */
+@import 'pgadmin.variables.scss';
+@import 'default.variables.scss';
+@import 'default.style.scss';
+@import 'pgadmin.style.scss';
+@import 'utils.scss';

web/pgadmin/tools/datagrid/static/js/datagrid.js

@@ -4,11 +4,11 @@ define('pgadmin.datagrid', [
   'sources/sqleditor_utils', 'backbone',
   'tools/datagrid/static/js/show_data',
   'tools/datagrid/static/js/get_panel_title',
-  'tools/datagrid/static/js/show_query_tool',
+  'tools/datagrid/static/js/show_query_tool', 'pgadmin.browser.toolbar',
   'wcdocker',
 ], function(
   gettext, url_for, $, _, alertify, pgAdmin, codemirror, sqlEditorUtils,
-  Backbone, showData, panelTitle, showQueryTool
+  Backbone, showData, panelTitle, showQueryTool, toolBar
 ) {
   // Some scripts do export their object in the window only.
   // Generally the one, which do no have AMD support.
@@ -64,10 +64,16 @@ define('pgadmin.datagrid', [
          * otherwise disabled.
          */
           view_menu_enabled = function(obj) {
-            if (!_.isUndefined(obj) && !_.isNull(obj))
+            var isEnabled = (() => {
-              return (_.indexOf(supported_nodes, obj._type) !== -1 ? true : false);
+              if (!_.isUndefined(obj) && !_.isNull(obj))
-            else
+                return (_.indexOf(supported_nodes, obj._type) !== -1 ? true : false);
-              return false;
+              else
+                return false;
+            })();
+
+            toolBar.enable(gettext('View Data'), isEnabled);
+            toolBar.enable(gettext('Filtered Rows'), isEnabled);
+            return isEnabled;
           },
 
         /* Enable/disable Query tool menu in tools based
@@ -76,20 +82,26 @@ define('pgadmin.datagrid', [
          * otherwise enabled.
          */
           query_tool_menu_enabled = function(obj) {
-            if (!_.isUndefined(obj) && !_.isNull(obj)) {
+            var isEnabled = (() => {
-              if (_.indexOf(pgAdmin.unsupported_nodes, obj._type) == -1) {
+              if (!_.isUndefined(obj) && !_.isNull(obj)) {
-                if (obj._type == 'database' && obj.allowConn)
+                if (_.indexOf(pgAdmin.unsupported_nodes, obj._type) == -1) {
-                  return true;
+                  if (obj._type == 'database' && obj.allowConn) {
-                else if (obj._type != 'database')
+                    return true;
-                  return true;
+                  } else if (obj._type != 'database') {
-                else
+                    return true;
+                  } else {
+                    return false;
+                  }
+                } else {
                   return false;
+                }
               } else {
                 return false;
               }
-            } else {
+            })();
-              return false;
+
-            }
+            toolBar.enable(gettext('Query Tool'), isEnabled);
+            return isEnabled;
           };
 
         // Define the nodes on which the menus to be appear
@@ -290,6 +302,8 @@ define('pgadmin.datagrid', [
                 );
 
                 this.setContent($content.get(0));
+                // Disable OK button
+                that.__internal.buttons[0].element.disabled = true;
 
                 // Apply CodeMirror to filter text area.
                 this.filter_obj = CodeMirror.fromTextArea($sql_filter.get(0), {
@@ -312,6 +326,14 @@ define('pgadmin.datagrid', [
                   that.filter_obj.refresh();
                   that.filter_obj.focus();
                 }, 500);
+
+                that.filter_obj.on('change', function() {
+                  if (that.filter_obj.getValue() !== '') {
+                    that.__internal.buttons[0].element.disabled = false;
+                  } else {
+                    that.__internal.buttons[0].element.disabled = true;
+                  }
+                });
               },
 
               callback: function(closeEvent) {
@@ -319,6 +341,7 @@ define('pgadmin.datagrid', [
                 if (closeEvent.button.text == gettext('OK')) {
                   var sql = this.filter_obj.getValue();
                   var that = this;
+                  closeEvent.cancel = true; // Do not close dialog
 
                   // Make ajax call to include the filter by selection
                   $.ajax({
@@ -332,6 +355,7 @@ define('pgadmin.datagrid', [
                     if (res.data.status) {
                       // Initialize the data grid.
                       self.create_transaction(that.baseUrl, null, 'false', parentData.server.server_type, '', grid_title, sql, false);
+                      that.close(); // Close the dialog
                     }
                     else {
                       alertify.alert(

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

@@ -18,7 +18,7 @@
         <span class="sql-editor-busy-text wcLoadingLabel"></span>
     </div>
     <div class="sql-editor">
-        <div id="btn-toolbar" class="pg-prop-btn-group bg-gray-2 border-gray-3" role="toolbar" aria-label="">
+        <div id="btn-toolbar" class="pg-prop-btn-group bg-gray-lighter border-gray-light" role="toolbar" aria-label="">
             <div class="btn-group" role="group" aria-label="">
                 <button id="btn-load-file" type="button" class="btn btn-default btn-load-file"
                         title=""
@@ -338,7 +338,7 @@
                 </i>
             </div>
             <div class="editor-title"
-                 style="background-color: {% if fgcolor %}{{ bgcolor or '#FFFFFF' }}{% else %}{{ bgcolor or '#2C76B4' }}{% endif %}; color: {{ fgcolor or 'white' }};"></div>
+                 style="background-color: {% if fgcolor %}{{ bgcolor or '#FFFFFF' }}{% endif %}; color: {% if fgcolor %}{{ fgcolor }}{% endif %};"></div>
         </div>
         <div id="editor-panel" tabindex="0"></div>
         <iframe id="download-csv" style="display:none"></iframe>

web/pgadmin/tools/debugger/__init__.py

@@ -561,7 +561,6 @@ def direct_new(trans_id):
         is_desktop_mode=current_app.PGADMIN_RUNTIME,
         is_linux=is_linux_platform,
         client_platform=user_agent.platform,
-        stylesheets=[url_for('debugger.static', filename='css/debugger.css')],
     )
 
 

web/pgadmin/tools/debugger/static/css/debugger.css

@@ -35,18 +35,6 @@
   width: 0.9em;
 }
 
-.debugger-container .CodeMirror-activeline-background {
-  background: #50B0F0;
-}
-
-.CodeMirror-foldmarker {
-  color: blue;
-  text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px;
-  font-family: "Open Sans";
-  line-height: .3;
-  cursor: pointer;
-}
-
 .CodeMirror, .CodeMirror-gutters {
   min-height: 100%;
 }
@@ -67,18 +55,3 @@
 .CodeMirror-foldgutter-folded:after {
   content: "\25B6";
 }
-
-/* To make font same as Query tool in messages tab */
-.messages {
-    white-space: pre-wrap;
-    font-family: "Source Code Pro";
-    padding-top: 5px;
-    padding-left: 10px;
-    overflow: auto;
-    height: 100%;
-    font-size: 0.925em;
-    -webkit-user-select: text;
-    -moz-user-select: text;
-    -ms-user-select: text;
-    user-select: text;
-}

web/pgadmin/tools/debugger/static/js/direct.js

@@ -1061,8 +1061,6 @@ define([
         var stack_grid = this.stack_grid = new Backgrid.Grid({
           columns: stackGridCols,
           row: Backgrid.Row.extend({
-            highlightColor: '#D9EDF7',
-            disabledColor: '#F1F1F1',
             events: {
               click: 'rowClick',
             },

web/pgadmin/tools/debugger/static/scss/_debugger.scss

@@ -0,0 +1,26 @@
+.debugger-container .CodeMirror-activeline-background {
+  background: $color-editor-activeline;
+}
+
+.CodeMirror-foldmarker {
+  color: $color-editor-foldmarker;
+  text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px;
+  font-family: $font-family-primary;
+  line-height: .3;
+  cursor: pointer;
+}
+
+/* To make font same as Query tool in messages tab */
+.messages {
+    white-space: pre-wrap;
+    font-family: $font-family-editor;
+    padding-top: 5px;
+    padding-left: 10px;
+    overflow: auto;
+    height: 100%;
+    font-size: 0.925em;
+    -webkit-user-select: text;
+    -moz-user-select: text;
+    -ms-user-select: text;
+    user-select: text;
+}

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

@@ -37,7 +37,7 @@ try {
 {% endif %}
 <div class="debugger_main_container" tabindex="0">
     <nav class="navbar-inverse navbar-fixed-top">
-        <div id="btn-toolbar" class="btn-toolbar pg-prop-btn-group bg-gray-2 border-gray-3" role="toolbar" aria-label="">
+        <div id="btn-toolbar" class="btn-toolbar pg-prop-btn-group bg-gray-lighter border-gray-light" role="toolbar" aria-label="">
             <div class="btn-group" role="group" aria-label="">
                 <button type="button" class="btn btn-default btn-step-into" id="btn-step-into"
                         title=""

web/pgadmin/tools/grant_wizard/__init__.py

@@ -51,10 +51,7 @@ class GrantWizardModule(PgAdminModule):
         Returns:
             list: the stylesheets used by this module.
         """
-        stylesheets = [
+        stylesheets = []
-            url_for('browser.static', filename='css/wizard.css'),
-            url_for('grant_wizard.static', filename='css/grant_wizard.css')
-        ]
         return stylesheets
 
     def get_own_javascripts(self):