LESS integration for development and production evironments

Change-Id: I22a6d9c1ef5d228ebd07385bed51ecacea249149

.gitignore

@@ -24,6 +24,8 @@ lock
 node_modules
 nailgun/static/js/libs/bower
 
+nailgun/static/css/styles.css
+
 .idea
 .DS_Store
 

nailgun/Gruntfile.js

@@ -26,6 +26,10 @@ module.exports = function(grunt) {
                     modules: [{name: "js/main"}],
                     waitSeconds: 60,
                     optimize: "uglify2",
+                    optimizeCss: "standard",
+                    pragmas: {
+                        compressed: true
+                    },
                 }
             }
         },
@@ -48,6 +52,12 @@ module.exports = function(grunt) {
                 }
             }
         },
+        less: {
+            all: {
+                src: 'static/css/styles.less',
+                dest: 'static/css/styles.css',
+            }
+        },
         bower: {
             install: {
                 options: {
@@ -68,8 +78,9 @@ module.exports = function(grunt) {
     });
 
     grunt.loadNpmTasks('grunt-contrib-requirejs');
+    grunt.loadNpmTasks('grunt-contrib-less');
     grunt.loadNpmTasks('grunt-jslint');
     grunt.loadNpmTasks('grunt-bower-task');
-    grunt.registerTask('build', ['bower', 'requirejs']);
+    grunt.registerTask('build', ['bower', 'less', 'requirejs']);
     grunt.registerTask('default', ['build']);
 };

nailgun/bower.json

@@ -10,7 +10,8 @@
         "jquery.timeout": "http://jquery-timeout.googlecode.com/files/jquery.timeout-1.1.0.js",
         "backbone.stickit": "https://raw.github.com/NYTimes/backbone.stickit/b450a07b2cecb3ad0343096f29e0332d5f9508b0/backbone.stickit.js",
         "i18next": "1.7.1",
-        "backbone-deep-model": "0.10.4"
+        "backbone-deep-model": "0.10.4",
+        "less": "1.5.1"
     },
     "exportsOverride": {
         "jquery": {
@@ -42,6 +43,9 @@
         },
         "backbone-deep-model": {
             "js": "distribution/deep-model.js"
+        },
+        "less": {
+            "js": "dist/less-1.5.1.js"
         }
     },
     "ignore": [

nailgun/nailgun/webui/handlers.py

@@ -14,28 +14,32 @@
 #    License for the specific language governing permissions and limitations
 #    under the License.
 
+import jinja2
 import mimetypes
-import posixpath
+import os.path
 import web
 
 from nailgun.settings import settings
 
-render = web.template.render(settings.TEMPLATE_DIR)
-
 
 class IndexHandler(object):
     def GET(self):
-        return render.index()
+        tpl_path = os.path.join(settings.TEMPLATE_DIR, 'index.html')
+        with open(tpl_path, 'r') as f:
+            tpl = jinja2.Template(f.read())
+            return tpl.render(**{
+                'use_less': bool(settings.DEVELOPMENT)
+            })
 
 
 class StaticHandler(object):
     def GET(self, fl):
-        fl_path = posixpath.join(settings.STATIC_DIR, fl)
+        fl_path = os.path.join(settings.STATIC_DIR, fl)
         mimetype = mimetypes.guess_type(fl_path)[0]
         if mimetype:
             web.header("Content-Type", mimetype)
-        try:
-            f = open(fl_path, 'r')
-            return f.read()
-        except Exception:
+        if os.path.exists(fl_path):
+            with open(fl_path, 'r') as f:
+                return f.read()
+        else:
             raise web.notfound()

nailgun/static/css/styles.less

@@ -0,0 +1 @@
+@import 'main.css';

nailgun/static/index.html

@@ -8,14 +8,13 @@
     <meta name="description" content="">
     <meta name="author" content="">
     <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon">
-    <link href="/static/css/main.css" rel="stylesheet">
-    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
-    <!--[if lt IE 9]>
-      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
-    <![endif]-->
+    {% if use_less %}
+      <link href="/static/css/styles.less" rel="stylesheet/less">
+    {% else %}
+      <link href="/static/css/styles.css" rel="stylesheet">
+    {% endif %}
     <script data-main="/static/js/main" src="/static/js/libs/bower/requirejs/js/require.js"></script>
   </head>
-
   <body>
     <div id="wrap">
       <div class="container">

nailgun/static/js/main.js

@@ -34,6 +34,7 @@ requirejs.config({
         i18next: 'js/libs/bower/i18next/js/i18next-1.7.1',
         underscore: 'js/libs/bower/lodash/js/lodash',
         deepModel: 'js/libs/bower/backbone-deep-model/js/deep-model',
+        less: 'js/libs/bower/less/js/less-1.5.1',
         app: 'js/app',
         models: 'js/models',
         collections: 'js/collections',
@@ -83,7 +84,22 @@ requirejs.config({
 });
 
 require([
-    'jquery', 'underscore', 'backbone', 'stickit', 'deepModel', 'coccyx', 'i18next', 'bootstrap', 'retina', 'jquery-checkbox', 'jquery-timeout', 'jquery-ui', 'jquery-autoNumeric',
+    'jquery',
+    'underscore',
+    'backbone',
+    'stickit',
+    'deepModel',
+    'coccyx',
+    'i18next',
+    'bootstrap',
+    'retina',
+    'jquery-checkbox',
+    'jquery-timeout',
+    'jquery-ui',
+    'jquery-autoNumeric',
+//>>excludeStart("compressed", pragmas.compressed);
+    'less',
+//>>excludeEnd("compressed");
     'app'
 ], function() {
     'use strict';

run_tests.sh

@@ -154,7 +154,7 @@ function run_ui_tests {
     fi
     echo "Done"
     test_server_config=$compressed_static_dir/settings.yaml
-    echo -e "DEVELOPMENT: 0\nSTATIC_DIR: '$compressed_static_dir'" > $compressed_static_dir/settings.yaml
+    echo -e "DEVELOPMENT: 0\nSTATIC_DIR: '$compressed_static_dir'\nTEMPLATE_DIR: '$compressed_static_dir'" > $compressed_static_dir/settings.yaml
     test_server_port=5544
     test_server_cmd="./manage.py run --port=$test_server_port --config=$test_server_config --fake-tasks --fake-tasks-tick-count=80 --fake-tasks-tick-interval=1"
     old_server_pid=`ps aux | grep "$test_server_cmd" | grep -v grep | awk '{ print $2 }'`