From c29bc6aa61207b0350e2560a7dc5955b397b973a Mon Sep 17 00:00:00 2001
From: Vova Perebykivskyi <vova@libreplan-enterprise.com>
Date: Mon, 21 Nov 2016 19:06:05 +0200
Subject: [PATCH] Rows alignment for Firefox.

---
 .../web/ganttz/zul/leftTasksTreeRow.zul       |   2 +-
 .../web/ganttz/zul/leftTasksTreeRowLabels.zul |   2 +-
 .../web/js/ganttz/DependencyComponent.js      | 682 ++++++++++--------
 .../main/resources/web/js/ganttz/TaskList.js  |  90 ++-
 .../src/main/webapp/planner/css/ganttzk.css   |  26 +-
 5 files changed, 439 insertions(+), 363 deletions(-)

diff --git a/ganttzk/src/main/resources/web/ganttz/zul/leftTasksTreeRow.zul b/ganttzk/src/main/resources/web/ganttz/zul/leftTasksTreeRow.zul
index 57430706e..223107c70 100644
--- a/ganttzk/src/main/resources/web/ganttz/zul/leftTasksTreeRow.zul
+++ b/ganttzk/src/main/resources/web/ganttz/zul/leftTasksTreeRow.zul
@@ -19,7 +19,7 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
-<treerow sclass="taskdetail_grid">
+<treerow sclass="taskdetail-grid">
     <treecell hflex="min">
         <textbox ctrlKeys="#down#up" hflex="1" sclass="task-name" />
     </treecell>
diff --git a/ganttzk/src/main/resources/web/ganttz/zul/leftTasksTreeRowLabels.zul b/ganttzk/src/main/resources/web/ganttz/zul/leftTasksTreeRowLabels.zul
index 7cee61311..3d3be1151 100644
--- a/ganttzk/src/main/resources/web/ganttz/zul/leftTasksTreeRowLabels.zul
+++ b/ganttzk/src/main/resources/web/ganttz/zul/leftTasksTreeRowLabels.zul
@@ -19,7 +19,7 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
-<treerow sclass="taskdetail_grid taskdetail-company-view">
+<treerow sclass="taskdetail-grid taskdetail-company-view">
 
     <treecell>
         <label sclass="task_title"/>
diff --git a/ganttzk/src/main/resources/web/js/ganttz/DependencyComponent.js b/ganttzk/src/main/resources/web/js/ganttz/DependencyComponent.js
index e9bbc3f08..27d978b93 100644
--- a/ganttzk/src/main/resources/web/js/ganttz/DependencyComponent.js
+++ b/ganttzk/src/main/resources/web/js/ganttz/DependencyComponent.js
@@ -1,340 +1,388 @@
 zk.$package("ganttz");
 
-ganttz.DependencyComponentBase = zk.$extends(zul.Widget,{
-    $define : {
-        idTaskOrig : null,
-        idTaskEnd : null,
-        dependencyType : null
-    },
-    bind_ : function(){
-        this.$supers('bind_', arguments);
-        this.setupArrow_();
-    },
-    setCSSClass: function(newClass) {
-        this.$n().setAttribute("class", newClass);
-    },
-    draw : function(){throw "draw method must be overwriten by extending classes"},
-    drawArrow_ : function(coordOrig, coordDest){
-        switch(this.getDependencyType())
-        {
-            case this.$class.START_START:
-                this._drawArrowStartStart(coordOrig, coordDest);
-                break;
-            case this.$class.END_END:
-                this._drawArrowEndEnd(coordOrig, coordDest);
-                break;
-            case this.$class.END_START:
-            default:
-                this._drawArrowEndStart(coordOrig, coordDest);
-        }
-    },
-    _drawArrowStartStart : function(coordOrig, coordDest){
-        var yorig = coordOrig.top -
-                    ganttz.TaskComponent.CORNER_WIDTH/2 +
-                    this.$class.HALF_DEPENDENCY_PADDING;
-        var xorig = coordOrig.left - this.$class.HALF_DEPENDENCY_PADDING;
-        var xend = coordDest.left + this.$class.HALF_DEPENDENCY_PADDING;
-        var yend = coordDest.top - this.$class.HALF_DEPENDENCY_PADDING;
-        if (yend < yorig) yorig = coordOrig.top + this.$class.DEPENDENCY_PADDING;
+ganttz.DependencyComponentBase = zk.$extends(
+    zul.Widget,
+    {
+        $define : {
+            idTaskOrig : null,
+            idTaskEnd : null,
+            dependencyType : null
+        },
 
-        var width1 = ganttz.TaskComponent.CORNER_WIDTH;
-        var width2 = Math.abs(xend - xorig) + ganttz.TaskComponent.CORNER_WIDTH;
-        var height = Math.abs(yend - yorig);
+        bind_ : function(){
+            this.$supers('bind_', arguments);
+            this.setupArrow_();
+        },
 
-        if (xorig > xend) {
-            width1 = width2;
-            width2 = ganttz.TaskComponent.CORNER_WIDTH;
-        }
+        setCSSClass: function(newClass) {
+            this.$n().setAttribute("class", newClass);
+        },
 
-        // First segment
-        var depstart = this._findImageElement('start');
-        depstart.css({    top : yorig,
-                        left : (xorig - width1),
-                        width : width1 ,
-                        display : 'inline'})
+        draw : function() {
+            throw "draw method must be overwriten by extending classes"
+        },
 
-        // Second segment
-        var depmid = this._findImageElement('mid');
-        var depmidcss = {left : depstart.css('left'), height : height};
+        drawArrow_ : function(coordOrig, coordDest) {
+            switch(this.getDependencyType()) {
+                case this.$class.START_START:
+                    this._drawArrowStartStart(coordOrig, coordDest);
+                    break;
 
-        if (yend > yorig) {
-          depmidcss.top = yorig;
-        } else {
-          depmidcss.top = yend;
-        }
+                case this.$class.END_END:
+                    this._drawArrowEndEnd(coordOrig, coordDest);
+                    break;
 
-        depmid.css(depmidcss);
-
-        // Third segment
-        var depend = this._findImageElement('end');
-        depend.css({    top : yend,
-                        left : depstart.css('left'),
-                        width : width2 - ganttz.TaskComponent.HALF_HEIGHT});
-
-        var deparrow = this._findImageElement('arrow');
-        deparrow.removeClass("point-north point-south point-west");
-        deparrow.addClass("point-east");
-        deparrow.css({top : (yend - ganttz.TaskComponent.HALF_HEIGHT),left : xend - 15});
-    },
-    _drawArrowEndEnd : function(coordOrig, coordDest){
-        var xorig = coordOrig.left - this.$class.DEPENDENCY_PADDING;
-        var yorig = coordOrig.top - ganttz.TaskComponent.CORNER_WIDTH/2 + this.$class.HALF_DEPENDENCY_PADDING;
-        var xend = coordDest.left + this.$class.HALF_DEPENDENCY_PADDING;
-        var yend = coordDest.top - this.$class.DEPENDENCY_PADDING;
-
-        var width1 = Math.abs(xend - xorig) + ganttz.TaskComponent.CORNER_WIDTH;
-        var width2 = ganttz.TaskComponent.CORNER_WIDTH;
-        var height = Math.abs(yend - yorig);
-
-        if (xorig > xend) {
-            width2 = width1;
-            width1 = ganttz.TaskComponent.CORNER_WIDTH;
-        }
-
-        // First segment
-        var depstart = this._findImageElement('start');
-        var depstartcss = {left : xorig, width : width1, display : 'inline'}
-        if (yend > yorig)
-            depstartcss.top = yorig ;
-        else
-            depstartcss.top = yorig + ganttz.TaskComponent.HEIGHT;
-
-        depstart.css(depstartcss);
-
-        // Second segment
-        var depmid = this._findImageElement('mid');
-        var depmidcss = {left : (xorig + width1), height : height};
-        if (yend > yorig) {
-          depmidcss.top = yorig;
-        } else {
-          depmidcss.top = yend;
-          depmidcss.height = height + 10;
-        }
-        depmid.css(depmidcss);
-
-        // Third segment
-        var depend = this._findImageElement('end');
-        depend.css({    left : (xorig + width1 - width2),
-                        top:yend,
-                        width:width2 });
-
-
-        var deparrow = this._findImageElement('arrow');
-        deparrow.removeClass("point-north point-south point-east");
-        deparrow.addClass("point-west");
-        deparrow.css({top : yend - 5, left : xend - 8});
-    },
-    _drawArrowEndStart : function(coordOrig, coordDest){
-        var xorig = coordOrig.left - this.$class.DEPENDENCY_PADDING;
-        var yorig = coordOrig.top - this.$class.HALF_DEPENDENCY_PADDING;
-        var xend = coordDest.left - this.$class.DEPENDENCY_PADDING;
-        var yend = coordDest.top - this.$class.HALF_DEPENDENCY_PADDING;
-
-        var width = (xend - xorig);
-        var xmid = xorig + width;
-
-        // First segment not used
-        var depstart = this._findImageElement('start');
-        depstart.hide();
-
-        // Second segment not used
-        var depmid = this._findImageElement('mid');
-        var depmidcss;
-
-        if (yend > yorig)
-            depmidcss = {top : yorig, height : yend - yorig};
-        else
-            depmidcss = {top : yend, height : (yorig - yend)};
-
-        depmidcss.left = xorig;
-        depmid.css(depmidcss);
-
-        var depend = this._findImageElement('end');
-        var dependcss = {top : yend, left : xorig, width : width};
-        if(width < 0) {
-            dependcss.left = xend;
-            dependcss.width = Math.abs(width);
-        }
-        depend.css(dependcss);
-
-        var deparrow = this._findImageElement('arrow');
-        var deparrowcss;
-        if ( width == 0 ) {
-            deparrow.removeClass("point-north point-west point-east");
-            deparrow.addClass("point-south");
-            deparrowcss = {top : (yend - 10) , left : (xend - 5)};
-            if ( yorig > yend ) {
-                deparrow.removeClass("point-west point-south point-east");
-                deparrow.addClass("point-north");
-                deparrowcss = {top : yend};
+                case this.$class.END_START:
+                default:
+                    this._drawArrowEndStart(coordOrig, coordDest);
             }
-        } else {
-            deparrowcss = {top : (yend -5), left : (xend - 10)};
+        },
+
+        _drawArrowStartStart : function(coordOrig, coordDest) {
+            var yorig = coordOrig.top - ganttz.TaskComponent.CORNER_WIDTH/2 + this.$class.HALF_DEPENDENCY_PADDING;
+            var xorig = coordOrig.left - this.$class.HALF_DEPENDENCY_PADDING;
+            var xend = coordDest.left + this.$class.HALF_DEPENDENCY_PADDING;
+            var yend = coordDest.top - this.$class.HALF_DEPENDENCY_PADDING;
+
+            if (yend < yorig) {
+                yorig = coordOrig.top + this.$class.DEPENDENCY_PADDING;
+            }
+
+
+            var width1 = ganttz.TaskComponent.CORNER_WIDTH;
+            var width2 = Math.abs(xend - xorig) + ganttz.TaskComponent.CORNER_WIDTH;
+            var height = Math.abs(yend - yorig);
+
+            if (xorig > xend) {
+                width1 = width2;
+                width2 = ganttz.TaskComponent.CORNER_WIDTH;
+            }
+
+            // First segment
+            var depstart = this._findImageElement('start');
+            depstart.css({
+                top : yorig,
+                left : (xorig - width1),
+                width : width1 ,
+                display : 'inline'
+            });
+
+            // Second segment
+            var depmid = this._findImageElement('mid');
+            var depmidcss = { left : depstart.css('left'), height : height };
+
+            if (yend > yorig) {
+                depmidcss.top = yorig;
+            } else {
+                depmidcss.top = yend;
+            }
+
+            depmid.css(depmidcss);
+
+            // Third segment
+            var depend = this._findImageElement('end');
+            depend.css({
+                top : yend,
+                left : depstart.css('left'),
+                width : width2 - ganttz.TaskComponent.HALF_HEIGHT
+            });
+
+            var deparrow = this._findImageElement('arrow');
             deparrow.removeClass("point-north point-south point-west");
             deparrow.addClass("point-east");
-            if (width < 0) {
-                deparrow.removeClass("point-north point-south point-east");
-                deparrow.addClass("point-west");
-                deparrowcss = {top : (yend - 5), left : xend}
+            deparrow.css({top : (yend - ganttz.TaskComponent.HALF_HEIGHT),left : xend - 15});
+        },
+
+        _drawArrowEndEnd : function(coordOrig, coordDest) {
+            var xorig = coordOrig.left - this.$class.DEPENDENCY_PADDING;
+            var yorig = coordOrig.top - ganttz.TaskComponent.CORNER_WIDTH/2 + this.$class.HALF_DEPENDENCY_PADDING;
+            var xend = coordDest.left + this.$class.HALF_DEPENDENCY_PADDING;
+            var yend = coordDest.top - this.$class.DEPENDENCY_PADDING;
+
+            var width1 = Math.abs(xend - xorig) + ganttz.TaskComponent.CORNER_WIDTH;
+            var width2 = ganttz.TaskComponent.CORNER_WIDTH;
+            var height = Math.abs(yend - yorig);
+
+            if (xorig > xend) {
+                width2 = width1;
+                width1 = ganttz.TaskComponent.CORNER_WIDTH;
             }
-        }
-        deparrow.css(deparrowcss);
-    },
-    findPos_ : function(element){
-        var pos1 = jq('#listdependencies').offset();
-        var pos2 = element.offset();
-        return {left : (pos2.left - pos1.left), top : (pos2.top - pos1.top)};
-    },
-    _findImageElement : function(name) {
-        return jq('.' + name + '', this.$n());
-    },
-    setupArrow_ : function(){
-        var image_data = [ "start" , "mid" , "end", "arrow" ] ;
-        var imgDiv;
-        var insertPoint = jq(this.$n());
-        for ( var i = 0; i < image_data.length; i++) {
+
+            // First segment
+            var depstart = this._findImageElement('start');
+            var depstartcss = { left : xorig, width : width1, display : 'inline' };
+
+            if (yend > yorig)
+                depstartcss.top = yorig ;
+            else
+                depstartcss.top = yorig + ganttz.TaskComponent.HEIGHT;
+
+            depstart.css(depstartcss);
+
+            // Second segment
+            var depmid = this._findImageElement('mid');
+            var depmidcss = { left : (xorig + width1), height : height };
+
+            if (yend > yorig) {
+                depmidcss.top = yorig;
+            } else {
+                depmidcss.top = yend;
+                depmidcss.height = height + 10;
+            }
+            depmid.css(depmidcss);
+
+            // Third segment
+            var depend = this._findImageElement('end');
+            depend.css({
+                left : (xorig + width1 - width2),
+                top:yend,
+                width:width2
+            });
+
+
+            var deparrow = this._findImageElement('arrow');
+            deparrow.removeClass("point-north point-south point-east");
+            deparrow.addClass("point-west");
+            deparrow.css({top : yend - 5, left : xend - 8});
+        },
+
+        _drawArrowEndStart : function(coordOrig, coordDest) {
+            var xorig = coordOrig.left - this.$class.DEPENDENCY_PADDING;
+            var yorig = coordOrig.top - this.$class.HALF_DEPENDENCY_PADDING;
+            var xend = coordDest.left - this.$class.DEPENDENCY_PADDING;
+            var yend = coordDest.top - this.$class.HALF_DEPENDENCY_PADDING;
+
+            var width = (xend - xorig);
+            var xmid = xorig + width;
+
+            // First segment not used
+            var depstart = this._findImageElement('start');
+            depstart.hide();
+
+            // Second segment not used
+            var depmid = this._findImageElement('mid');
+            var depmidcss;
+
+            if (yend > yorig) {
+                depmidcss = { top : yorig, height : yend - yorig };
+            }
+            else {
+                depmidcss = { top : yend, height : (yorig - yend) };
+            }
+
+
+            depmidcss.left = xorig;
+            depmid.css(depmidcss);
+
+            var depend = this._findImageElement('end');
+            var dependcss = { top : yend, left : xorig, width : width };
+
+            if (width < 0) {
+                dependcss.left = xend;
+                dependcss.width = Math.abs(width);
+            }
+            depend.css(dependcss);
+
+            var deparrow = this._findImageElement('arrow');
+            var deparrowcss;
+
+            if ( width == 0 ) {
+                deparrow.removeClass("point-north point-west point-east");
+                deparrow.addClass("point-south");
+                deparrowcss = { top : (yend - 10) , left : (xend - 5) };
+
+                if ( yorig > yend ) {
+                    deparrow.removeClass("point-west point-south point-east");
+                    deparrow.addClass("point-north");
+                    deparrowcss = {top : yend};
+                }
+            } else {
+                deparrowcss = {top : (yend -5), left : (xend - 10)};
+                deparrow.removeClass("point-north point-south point-west");
+                deparrow.addClass("point-east");
+                if (width < 0) {
+                    deparrow.removeClass("point-north point-south point-east");
+                    deparrow.addClass("point-west");
+                    deparrowcss = {top : (yend - 5), left : xend}
+                }
+            }
+            deparrow.css(deparrowcss);
+        },
+
+        findPos_ : function(element) {
+            var pos1 = jq('#listdependencies').offset();
+            var pos2 = element.offset();
+            return { left : (pos2.left - pos1.left), top : (pos2.top - pos1.top) };
+        },
+
+        _findImageElement : function(name) {
+            return jq('.' + name + '', this.$n());
+        },
+
+        setupArrow_ : function() {
+            var image_data = [ "start" , "mid" , "end", "arrow" ] ;
+            var imgDiv;
+            var insertPoint = jq(this.$n());
+
+            for ( var i = 0; i < image_data.length; i++) {
                 imgDiv = jq(document.createElement('div'));
                 imgDiv.attr('class', image_data[i]);
-
                 insertPoint.append(imgDiv);
-        }
-    }
-},{
-    END_END        : "END_END",
-    END_START    : "END_START",
-    START_START    : "START_START",
-    HALF_DEPENDENCY_PADDING : 2,
-    DEPENDENCY_PADDING : 4,
-    DRAGABLE_PADDING : 20, // Drag padding for dependency creation
-    getImagesDir : function(){
-        return "/" + common.Common.webAppContextPath() + "/zkau/web/ganttz/img/";
-    }
-})
-
-ganttz.DependencyComponent = zk.$extends(ganttz.DependencyComponentBase,{
-    $define : {
-        idTaskOrig : null,
-        idTaskEnd : null,
-        dependencyType : null
-    },
-    bind_ : function(){
-        this.$supers('bind_', arguments);
-        //this.setupArrow_();
-        /*maybe move this listener to the $init method*/
-        YAHOO.util.Event.onDOMReady(this.proxy(function() {
-            this.draw();
-        }));
-    },
-    draw : function() {
-        this._withOriginAndDestination(function(origin, destination) {
-            var orig = this.findPos_(origin);
-            var dest = this.findPos_(destination);
-            // This corner case may depend on dependence type
-            var offsetX = origin.outerWidth() - ganttz.TaskComponent.CORNER_WIDTH;
-            var separation = orig.left + origin.outerWidth() - dest.left;
-
-            if (separation > 0) {
-                offsetX = offsetX - separation;
             }
-            if (this.getDependencyType() == this.$class.END_START
-                    || this.getDependencyType() == null) {
-                orig.left = orig.left + Math.max(0, offsetX);
-            } else if (this.getDependencyType() == this.$class.END_END) {
-                orig.left = orig.left + origin.outerWidth();
-                dest.left = dest.left + destination.outerWidth();
+        }
+    },
+
+    {
+        END_END : "END_END",
+        END_START : "END_START",
+        START_START : "START_START",
+        HALF_DEPENDENCY_PADDING : 2,
+        DEPENDENCY_PADDING : 4,
+        DRAGABLE_PADDING : 20, // Drag padding for dependency creation
+        getImagesDir : function() {
+            return "/" + common.Common.webAppContextPath() + "/zkau/web/ganttz/img/";
+        }
+    });
+
+ganttz.DependencyComponent = zk.$extends(
+    ganttz.DependencyComponentBase,
+    {
+        $define : {
+            idTaskOrig : null,
+            idTaskEnd : null,
+            dependencyType : null
+        },
+
+        bind_ : function() {
+            this.$supers('bind_', arguments);
+
+            /* TODO Maybe move this listener to the $init method */
+            YAHOO.util.Event.onDOMReady(this.proxy(function() {
+                this.draw();
+            }));
+        },
+
+        draw : function() {
+            this._withOriginAndDestination(function(origin, destination) {
+                var orig = this.findPos_(origin);
+                var dest = this.findPos_(destination);
+
+                // This corner case may depend on dependence type
+                var offsetX = origin.outerWidth() - ganttz.TaskComponent.CORNER_WIDTH;
+                var separation = orig.left + origin.outerWidth() - dest.left;
+
+                if (separation > 0) {
+                    offsetX = offsetX - separation;
+                }
+                if (this.getDependencyType() == this.$class.END_START || this.getDependencyType() == null) {
+                    orig.left = orig.left + Math.max(0, offsetX);
+                } else if (this.getDependencyType() == this.$class.END_END) {
+                    orig.left = orig.left + origin.outerWidth();
+                    dest.left = dest.left + destination.outerWidth();
+                }
+
+                orig.top = orig.top + ganttz.TaskComponent.HEIGHT;
+                dest.top = dest.top + ganttz.TaskComponent.HALF_HEIGHT;
+
+                if (orig.top > dest.top) {
+                    orig.top = orig.top - ganttz.TaskComponent.HEIGHT;
+                }
+
+                this.drawArrow_(orig, dest);
+            });
+        },
+
+        _withOriginAndDestination : function(f) {
+            f.call(this, jq('#' + this.getIdTaskOrig()), jq('#' + this.getIdTaskEnd()));
+        }
+    },
+    {
+
+    });
+
+ganttz.UnlinkedDependencyComponent = zk.$extends(
+    ganttz.DependencyComponentBase,
+    {
+        $init : function() {
+            this.$supers('$init', arguments);
+            this._DOMlisttasks = jq('#listtasks');
+            this._DOMlistdependencies = jq('#listdependencies');
+            this._WGTganttpanel = ganttz.GanttPanel.getInstance();
+        },
+
+        bind_ : function() {
+            this.$supers('bind_', arguments);
+            /*
+             * We use document.documentElement as the DOM element to attach this listener
+             * because document.documentElement always gets the key events (in all browsers)
+             */
+            this.domListen_(document.documentElement,'onKeyup','_handleKeyUp');
+            this._updateArrow();
+        },
+
+        unbind_ : function() {
+            this.domUnlisten_(document.documentElement,'onKeyup','_handleKeyUp');
+            this.domUnlisten_(this._WGTganttpanel.$n(), 'onMousemove', '_updateArrow');
+            this.domUnlisten_(this._WGTganttpanel.$n(), 'onClick', '_consolidateDependency');
+            this.$supers('unbind_', arguments);
+        },
+
+        draw : function() {
+            this.domListen_(this._WGTganttpanel.$n(), 'onMousemove', '_updateArrow');
+            this.domListen_(this._WGTganttpanel.$n(), 'onClick', '_consolidateDependency');
+        },
+
+        setOrigin : function(origin) {
+            this._DOMorigin = jq(origin);
+            this._WGTorigin = ganttz.TaskComponent.$(origin.id);
+        },
+
+        _consolidateDependency : function() {
+            var dependency =  null;
+            if ((dependency = this._isOverTask()) != null) {
+                this._WGTorigin.consolidateNewDependency(dependency);
+            }
+            /* We remove the dependency line. If the user clicked over a task, a new dependecy line will be created. */
+            ganttz.DependencyList.getInstance().removeChild(this);
+        },
+
+        _isOverTask : function() {
+            var tasksOver = jq.grep(ganttz.TaskComponent.allTaskComponents(), function(task) {
+                return task.mouseOverTask;
+            });
+            return tasksOver.length > 0 ? tasksOver[0] : null;
+        },
+
+        _getCoordOrigin: function() {
+            if (this._coordOrigin) {
+                return this._coordOrigin;
             }
 
-            orig.top = orig.top + ganttz.TaskComponent.HEIGHT;
-            dest.top = dest.top + ganttz.TaskComponent.HALF_HEIGHT;
+            var coordOrigin = this.findPos_(this._DOMorigin);
+            coordOrigin.left = coordOrigin.left + Math.max(0, this._DOMorigin.outerWidth() - ganttz.TaskComponent.CORNER_WIDTH);
+            coordOrigin.top = coordOrigin.top + ganttz.TaskComponent.HEIGHT;
 
-            if (orig.top > dest.top) {
-                orig.top = orig.top - ganttz.TaskComponent.HEIGHT;
+            return this._coordOrigin = coordOrigin;
+        },
+
+        _updateArrow: function () {
+            this.drawArrow_(this._getCoordOrigin(), this._findCoordsForMouse());
+        },
+
+        _findCoordsForMouse: function() {
+            var reference =  jq('#listdependencies').offset();
+            return { left : this._WGTganttpanel.getXMouse() - reference.left, top: this._WGTganttpanel.getYMouse() - reference.top };
+        },
+
+        _handleKeyUp: function(event) {
+            if ( event.keyCode != 27 ) {
+                return;
             }
-
-            this.drawArrow_(orig, dest);
-        });
-    },
-    _withOriginAndDestination : function(f) {
-        f.call(this, jq('#' + this.getIdTaskOrig()), jq('#' + this.getIdTaskEnd()));
-    }
-},{});
-
-ganttz.UnlinkedDependencyComponent = zk.$extends(ganttz.DependencyComponentBase,{
-    $init : function(){
-        this.$supers('$init', arguments);
-        this._DOMlisttasks = jq('#listtasks');
-        this._DOMlistdependencies = jq('#listdependencies');
-        this._WGTganttpanel = ganttz.GanttPanel.getInstance();
-    },
-    bind_ : function(){
-        this.$supers('bind_', arguments);
-        /*We use document.documentElement as the DOM element to attach this listener
-         * because document.documentElement always gets the key events (in all browsers)*/
-        this.domListen_(document.documentElement,'onKeyup','_handleKeyUp');
-        this._updateArrow();
-    },
-    unbind_ : function(){
-        this.domUnlisten_(document.documentElement,'onKeyup','_handleKeyUp');
-        this.domUnlisten_(this._WGTganttpanel.$n(), 'onMousemove', '_updateArrow');
-        this.domUnlisten_(this._WGTganttpanel.$n(), 'onClick', '_consolidateDependency');
-        this.$supers('unbind_', arguments);
-    },
-    draw : function(){
-        this.domListen_(this._WGTganttpanel.$n(), 'onMousemove', '_updateArrow');
-        this.domListen_(this._WGTganttpanel.$n(), 'onClick', '_consolidateDependency');
-    },
-    setOrigin : function(origin){
-        this._DOMorigin = jq(origin);
-        this._WGTorigin = ganttz.TaskComponent.$(origin.id);
-    },
-    _consolidateDependency : function(){
-        var dependency =  null;
-        if ((dependency = this._isOverTask()) != null){
-            this._WGTorigin.consolidateNewDependency(dependency);
-        }
-        /* We remove the dependency line. If the user clicked over a
-         * task, a new dependecy line will be created */
-        ganttz.DependencyList.getInstance().removeChild(this);
-    },
-    _isOverTask : function() {
-        var tasksOver = jq.grep(ganttz.TaskComponent.allTaskComponents(), function(task) {
-            return task.mouseOverTask;
-        });
-        if (tasksOver.length > 0) {
-            return tasksOver[0];
-        }
-        return null;
-    },
-    _getCoordOrigin: function() {
-        if (this._coordOrigin) {
-            return this._coordOrigin;
+            event.stop();
+            ganttz.DependencyList.getInstance().removeChild(this);
         }
+    });
 
-        var coordOrigin = this.findPos_(this._DOMorigin);
-        coordOrigin.left = coordOrigin.left
-                + Math.max(0, this._DOMorigin.outerWidth()
-                              - ganttz.TaskComponent.CORNER_WIDTH);
-        coordOrigin.top = coordOrigin.top + ganttz.TaskComponent.HEIGHT;
-
-        return this._coordOrigin = coordOrigin;
-    },
-    _updateArrow : function(event){
-        this.drawArrow_(this._getCoordOrigin(), this._findCoordsForMouse());
-    },
-    _findCoordsForMouse: function() {
-        var reference =  jq('#listdependencies').offset();
-        return {left : this._WGTganttpanel.getXMouse() - reference.left,
-            top: this._WGTganttpanel.getYMouse() - reference.top};
-    },
-    _handleKeyUp: function(event){
-        if ( event.keyCode != 27 )
-            return;
-
-        event.stop();
-        ganttz.DependencyList.getInstance().removeChild(this);
-    }
-})
-
-zk.afterLoad('ganttz',function(){
+zk.afterLoad('ganttz',function() {
     ganttz.UnlinkedDependencyComponent.molds = ganttz.DependencyComponent.molds;
-})
+});
diff --git a/ganttzk/src/main/resources/web/js/ganttz/TaskList.js b/ganttzk/src/main/resources/web/js/ganttz/TaskList.js
index 307902894..ae934ec5d 100644
--- a/ganttzk/src/main/resources/web/js/ganttz/TaskList.js
+++ b/ganttzk/src/main/resources/web/js/ganttz/TaskList.js
@@ -1,44 +1,54 @@
 zk.$package("ganttz");
 
-ganttz.TaskList = zk.$extends(zk.Widget, {
-    $init : function(){
-        this.$supers('$init', arguments);
-        this.$class.setInstance(this);
-    },
-    showAllTaskLabels : function(){
-        for(var child = this.firstChild; child; child = child.nextSibling)
-            child.showLabels();
-    },
-    hideAllTaskLabels : function(){
-        for(var child = this.firstChild; child; child = child.nextSibling)
-            child.hideLabels();
-    },
-    showResourceTooltips : function(){
-        for(var child = this.firstChild; child; child = child.nextSibling)
-            child.showResourceTooltip();
-    },
-    hideResourceTooltips : function(){
-        for(var child = this.firstChild; child; child = child.nextSibling)
-            child.hideResourceTooltip();
-    },
-    legendResize : function() {
-        var taskdetailsContainer = jq('.taskdetailsContainer')[0];
-        jq('.legend-container').width(taskdetailsContainer.clientWidth-75);
-    },
-    refreshTooltips : function() {
-        if (jq('.show-resources').hasClass('clicked')) {
-            this.showResourceTooltips();
-        }
-        if (jq('.show-labels').hasClass('clicked')) {
-            this.showAllTaskLabels();
-        }
-    }
+ganttz.TaskList = zk.$extends(
+    zk.Widget,
+    {
+        $init : function() {
+            this.$supers('$init', arguments);
+            this.$class.setInstance(this);
+        },
 
-},{//Class stuff
-    setInstance : function(instance){
-        this.instance = instance;
+        showAllTaskLabels : function() {
+            for (var child = this.firstChild; child; child = child.nextSibling)
+                child.showLabels();
+        },
+
+        hideAllTaskLabels : function() {
+            for (var child = this.firstChild; child; child = child.nextSibling)
+                child.hideLabels();
+        },
+
+        showResourceTooltips : function() {
+            for (var child = this.firstChild; child; child = child.nextSibling)
+                child.showResourceTooltip();
+        },
+
+        hideResourceTooltips : function() {
+            for(var child = this.firstChild; child; child = child.nextSibling)
+                child.hideResourceTooltip();
+        },
+
+        legendResize : function() {
+            var taskdetailsContainer = jq('.taskdetailsContainer')[0];
+            jq('.legend-container').width(taskdetailsContainer.clientWidth - 75);
+        },
+
+        refreshTooltips : function() {
+            if (jq('.show-resources').hasClass('clicked')) {
+                this.showResourceTooltips();
+            }
+            if (jq('.show-labels').hasClass('clicked')) {
+                this.showAllTaskLabels();
+            }
+        }
     },
-    getInstance    : function(){
-        return this.instance;
-    }
-});
+    {
+        // Class stuff
+        setInstance : function(instance) {
+            this.instance = instance;
+        },
+
+        getInstance    : function(){
+            return this.instance;
+        }
+    });
diff --git a/libreplan-webapp/src/main/webapp/planner/css/ganttzk.css b/libreplan-webapp/src/main/webapp/planner/css/ganttzk.css
index e0979832e..079a33829 100644
--- a/libreplan-webapp/src/main/webapp/planner/css/ganttzk.css
+++ b/libreplan-webapp/src/main/webapp/planner/css/ganttzk.css
@@ -96,7 +96,7 @@
     overflow:visible;
 }
 
-.listdetails .taskdetail_grid {
+.listdetails .taskdetail-grid {
     height: 23px;
 }
 
@@ -111,7 +111,7 @@
 }
 
 
-.taskdetail_grid table {
+.taskdetail-grid table {
     height: 30px;
     width: 285px; /* Ganntz.ListdetailsWidth */
 }
@@ -1444,17 +1444,35 @@ div.z-grid-header .second_level_ tr {
     font-size: 12px;
 }
 
+/* Workaround for Chrome */
+@supports (-webkit-appearance: none) {
+    .z-treerow.z-treerow-selected > .z-treecell > .z-treecell-content,
+    .z-treerow.z-treerow > .z-treecell > .z-treecell-content {
+        color: black;
+    }
+}
+
+/* Workaround for FireFox */
+_:-moz-tree-row(hover),
 .z-treerow.z-treerow-selected > .z-treecell > .z-treecell-content,
 .z-treerow.z-treerow > .z-treecell > .z-treecell-content {
     color: black;
 }
 
-.taskdetail_grid .z-treecell .z-treecell-content {
+/* Workaround for FireFox */
+_:-moz-tree-row(hover),
+.z-treerow.z-treerow-selected > .z-treecell > .z-treecell-content,
+.parentProjectScheduling .z-treerow.z-treerow > .z-treecell > .z-treecell-content {
+    height: 21px;
+    padding-top: 3px;
+}
+
+.taskdetail-grid .z-treecell .z-treecell-content {
     display: inline-flex;
     width: 100%;
 }
 
-.taskdetail_grid.taskdetail-company-view .z-treecell .z-treecell-content {
+.taskdetail-grid.taskdetail-company-view .z-treecell .z-treecell-content {
     display: inline-table;
     width: 100%;
 }