Introduced a mechanism to load required javascripts at runtime

(lazy loading) using the require.js. This allows us to load the
javascript required for any node, only when it was loaded in the browser
tree. Also, introduced the mechanism to show/edit/create of any node in
a tab panel (wcDocker.Panel).

web/pgadmin/about/__init__.py

@@ -20,21 +20,27 @@ import sys
 
 import config
 
-class AboutModule(PgAdminModule):
 
+class AboutModule(PgAdminModule):
     def get_own_menuitems(self):
         return {
             'help_items': [
                 MenuItem(name='mnu_about',
                          priority=999,
-                         url='#',
-                         onclick='about_show()',
-                         label=gettext('About %(appname)s', appname=config.APP_NAME))
+                         module="pgAdmin.About",
+                         callback='about_show',
+                         icon='fa fa-info-circle',
+                         label=gettext('About %(appname)s',
+                                       appname=config.APP_NAME))
             ]
         }
 
     def get_own_javascripts(self):
-        return [url_for('about.script')]
+        return [{
+            'name': 'pgadmin.about',
+            'path': url_for('about.index') + 'about',
+            'when': None
+        }]
 
 
 blueprint = AboutModule(MODULE_NAME, __name__,
@@ -47,10 +53,10 @@ blueprint = AboutModule(MODULE_NAME, __name__,
 @login_required
 def index():
     """Render the about box."""
-    info = { }
+    info = {}
     info['python_version'] = sys.version
     info['flask_version'] = __version__
-    if config.SERVER_MODE == True:
+    if config.SERVER_MODE is True:
         info['app_mode'] = gettext('Server')
     else:
         info['app_mode'] = gettext('Desktop')
@@ -58,10 +64,11 @@ def index():
 
     return render_template(MODULE_NAME + '/index.html', info=info)
 
+
 @blueprint.route("/about.js")
 @login_required
 def script():
-    """Render the required Javascript"""
+    """render the required javascript"""
     return Response(response=render_template("about/about.js"),
                     status=200,
                     mimetype="application/javascript")

web/pgadmin/about/templates/about/about.js

@@ -1,31 +1,42 @@
-function about_show() {
-    if (!alertify.aboutDialog) {
-        alertify.dialog('aboutDialog', function factory() {
+define(
+  ['jquery', 'alertify', 'pgadmin'],
+  function($, alertify, pgAdmin) {
+    pgAdmin = pgAdmin || window.pgAdmin || {};
+
+    /* Return back, this has been called more than once */
+    if (pgAdmin.About)
+        return;
+
+    pgAdmin.About = {
+      about_show: function() {
+        if (!alertify.aboutDialog) {
+          alertify.dialog('aboutDialog', function factory() {
             return {
-                main:function(title, message) {
-                    this.set('title', title);
-                    this.message = message;
-                },
-                setup:function() {
-                    return { 
-                        buttons:[{ text: "OK", key: 27, className: "btn btn-primary" }],
-                        options: { modal: 0, resizable: true }
-                    };
-                },
-                build:function() {
-
-                },
-                prepare:function() {
-                    this.setContent(this.message);
-                }
-            }
-        });
-    }
-
-    var content = '';
-    $.get("{{ url_for('about.index') }}", 
-        function(data) { 
-            alertify.aboutDialog('About {{ config.APP_NAME }}', data).resizeTo(800, 450);
+              main:function(title, message) {
+                this.set('title', title);
+                this.message = message;
+              },
+              setup:function() {
+                return {
+                  buttons:[{ text: "OK", key: 27, className: "btn btn-primary" }],
+                  options: { modal: 0, resizable: true }
+                };
+              },
+              build:function() {},
+              prepare:function() {
+                this.setContent(this.message);
+              }
+            };
+          });
         }
-    );
-}
+
+        var content = '';
+        $.get("{{ url_for('about.index') }}",
+            function(data) {
+              alertify.aboutDialog('About {{ config.APP_NAME }}', data).resizeTo(800, 450);
+            });
+      }
+    };
+
+    return pgAdmin.About;
+  });

web/pgadmin/about/templates/about/index.html

@@ -24,5 +24,7 @@
 </div>
 
 <div class="row">
-    <div class="col-sm-3 pull-right"><img src="{{ url_for('static', filename='img/logo-right-128.png') }}" alt="{{ config.APP_NAME }}"></div>
+    <div class="col-sm-3 pull-right"><img
+            src="{{ url_for('static', filename='img/logo-right-128.png') }}"
+            alt="{{ config.APP_NAME }}"></div>
 </div>