From bc0a0436574bad2a74222222f4d2e959f01d51d6 Mon Sep 17 00:00:00 2001
From: Tim Buckley <timothy.jas.buckley@hpe.com>
Date: Wed, 6 Jan 2016 12:53:50 -0700
Subject: [PATCH] Fix timeline rendering in Firefox.

Firefox appears to behave differently than Chrome when computing CSS
sizes for SVG elements, causing the timeline elements to have
incorrect widths. This modifies layout behavior to use only attribute
sizes instead of CSS sizes, which works around the issue.

Change-Id: I6af2d9502ba7881c630197494382c0bc7eec8283
---
 app/js/directives/timeline-dstat.js    |  6 ++----
 app/js/directives/timeline-overview.js | 21 +++++++++++----------
 app/js/directives/timeline-viewport.js |  7 ++-----
 3 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/app/js/directives/timeline-dstat.js b/app/js/directives/timeline-dstat.js
index e9ba6c8..5b8ef35 100644
--- a/app/js/directives/timeline-dstat.js
+++ b/app/js/directives/timeline-dstat.js
@@ -88,8 +88,7 @@ function timelineDstat() {
         .attr('height', height);
 
     var main = chart.append('g')
-        .attr('transform', 'translate(' + margin.left + ',0)')
-        .attr('width', timelineController.width);
+        .attr('transform', 'translate(' + margin.left + ',0)');
 
     var xSelected = timelineController.axes.selection;
     var y = d3.scale.linear();
@@ -181,8 +180,7 @@ function timelineDstat() {
     });
 
     scope.$on('update', function() {
-      chart.style('width', timelineController.width + margin.left + margin.right);
-      main.style('width', timelineController.width);
+      chart.attr('width', timelineController.width + margin.left + margin.right);
       update(timelineController.dstat);
     });
 
diff --git a/app/js/directives/timeline-overview.js b/app/js/directives/timeline-overview.js
index a4c8669..80af740 100644
--- a/app/js/directives/timeline-overview.js
+++ b/app/js/directives/timeline-overview.js
@@ -17,13 +17,14 @@ function timelineOverview() {
 
     var chart = d3.select(el[0])
         .append('svg')
-        .attr('height', height)
-        .style('position', 'relative')
-        .style('width', timelineController.width)
-        .style('left', margin.left)
-        .style('right', margin.right);
+        .attr('width', timelineController.width + margin.left + margin.right)
+        .attr('height', height);
 
-    var groups = chart.append('g');
+    var groups = chart.append('g')
+        .attr('transform', 'translate(' + margin.left + ',0)');
+
+    var brushGroup = chart.append('g')
+        .attr('transform', 'translate(' + margin.left + ',0)');
 
     var updateBrush = function() {
       timelineController.setViewExtents(brush.extent());
@@ -73,7 +74,7 @@ function timelineOverview() {
       var targetEnd = begin + extentSize;
 
       brush.extent([targetStart, targetEnd]);
-      chart.select('.brush').call(brush);
+      brushGroup.select('.brush').call(brush);
       updateBrush();
 
       return true;
@@ -113,7 +114,7 @@ function timelineOverview() {
       }
 
       brush.extent([targetStart, targetEnd]);
-      chart.select('.brush').call(brush);
+      brushGroup.select('.brush').call(brush);
       updateBrush();
 
       return true;
@@ -134,7 +135,7 @@ function timelineOverview() {
           .extent([start, reducedEnd])
           .on('brush', updateBrush);
 
-      var brushElement = chart.append('g')
+      var brushElement = brushGroup.append('g')
           .attr('class', 'brush')
           .call(brush)
           .selectAll('rect')
@@ -147,7 +148,7 @@ function timelineOverview() {
     });
 
     scope.$on('update', function() {
-      chart.style('width', timelineController.width);
+      chart.attr('width', timelineController.width + margin.left + margin.right);
       updateItems(timelineController.data);
     });
 
diff --git a/app/js/directives/timeline-viewport.js b/app/js/directives/timeline-viewport.js
index 67d86f1..846a0ce 100644
--- a/app/js/directives/timeline-viewport.js
+++ b/app/js/directives/timeline-viewport.js
@@ -30,8 +30,7 @@ function timelineViewport($document) {
         .attr('width', timelineController.width);
 
     var main = chart.append('g')
-        .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
-        .attr('width', timelineController.width);
+        .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
 
     var laneLines = main.append('g');
     var laneLabels = main.append('g');
@@ -247,7 +246,6 @@ function timelineViewport($document) {
       y.domain([0, data.length]).range([0, height]);
 
       defs.attr('height', height);
-      main.attr('height', height);
       cursor.attr('y1', y(-0.1));
 
       loaded = true;
@@ -258,9 +256,8 @@ function timelineViewport($document) {
         return;
       }
 
-      chart.style('width', timelineController.width + margin.left + margin.right);
+      chart.attr('width', timelineController.width + margin.left + margin.right);
       defs.attr('width', timelineController.width);
-      main.attr('width', timelineController.width);
 
       update(timelineController.data);
     });