Bug 1034670 - The canvas graphs should draw the background separately from the plotted data, r=pbrosset

browser/devtools/shared/widgets/Graphs.jsm

@@ -233,6 +233,7 @@ AbstractCanvasGraph.prototype = {
 
     this._data = null;
     this._regions = null;
+    this._cachedBackgroundImage = null;
     this._cachedGraphImage = null;
     this._renderTargets.clear();
     gCachedStripePattern.clear();
@@ -257,6 +258,14 @@ AbstractCanvasGraph.prototype = {
   fixedWidth: null,
   fixedHeight: null,
 
+  /**
+   * Optionally builds and caches a background image for this graph.
+   * Inheriting classes may override this method.
+   */
+  buildBackgroundImage: function() {
+    return null;
+  },
+
   /**
    * Builds and caches a graph image, based on the data source supplied
    * in `setData`. The graph image is not rebuilt on each frame, but
@@ -281,6 +290,7 @@ AbstractCanvasGraph.prototype = {
    */
   setData: function(data) {
     this._data = data;
+    this._cachedBackgroundImage = this.buildBackgroundImage();
     this._cachedGraphImage = this.buildGraphImage();
     this._shouldRedraw = true;
   },
@@ -568,10 +578,11 @@ AbstractCanvasGraph.prototype = {
     this._width = this._canvas.width = bounds.width * this._pixelRatio;
     this._height = this._canvas.height = bounds.height * this._pixelRatio;
 
-    if (this._data) {
+    if (this.hasData()) {
+      this._cachedBackgroundImage = this.buildBackgroundImage();
       this._cachedGraphImage = this.buildGraphImage();
     }
-    if (this._regions) {
+    if (this.hasRegions()) {
       this._bakeRegions(this._regions, this._cachedGraphImage);
     }
 
@@ -634,14 +645,16 @@ AbstractCanvasGraph.prototype = {
     if (!this._shouldRedraw) {
       return;
     }
-
     let ctx = this._ctx;
     ctx.clearRect(0, 0, this._width, this._height);
 
-    // Draw the graph underneath the cursor and selection.
+    if (this._cachedBackgroundImage) {
-    if (this.hasData()) {
+      ctx.drawImage(this._cachedBackgroundImage, 0, 0, this._width, this._height);
+    }
+    if (this._cachedGraphImage) {
       ctx.drawImage(this._cachedGraphImage, 0, 0, this._width, this._height);
     }
+
     if (this.hasCursor()) {
       this._drawCliphead();
     }
@@ -1045,7 +1058,7 @@ AbstractCanvasGraph.prototype = {
    * Listener for the "resize" event on the graph's parent node.
    */
   _onResize: function() {
-    if (this._cachedGraphImage) {
+    if (this.hasData()) {
       setNamedTimeout(this._uid, GRAPH_RESIZE_EVENTS_DRAIN, this.refresh);
     }
   }
@@ -1369,6 +1382,24 @@ BarGraphWidget.prototype = Heritage.extend(AbstractCanvasGraph.prototype, {
    */
   minBlocksHeight: BAR_GRAPH_MIN_BLOCKS_HEIGHT,
 
+  /**
+   * Renders the graph's background.
+   * @see AbstractCanvasGraph.prototype.buildBackgroundImage
+   */
+  buildBackgroundImage: function() {
+    let { canvas, ctx } = this._getNamedCanvas("bar-graph-background");
+    let width = this._width;
+    let height = this._height;
+
+    let gradient = ctx.createLinearGradient(0, 0, 0, height);
+    gradient.addColorStop(0, BAR_GRAPH_BACKGROUND_GRADIENT_START);
+    gradient.addColorStop(1, BAR_GRAPH_BACKGROUND_GRADIENT_END);
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, 0, width, height);
+
+    return canvas;
+  },
+
   /**
    * Renders the graph on a canvas.
    * @see AbstractCanvasGraph.prototype.buildGraphImage
@@ -1397,14 +1428,6 @@ BarGraphWidget.prototype = Heritage.extend(AbstractCanvasGraph.prototype, {
       minBarsWidth: minBarsWidth
     }) * BAR_GRAPH_DAMPEN_VALUES;
 
-    // Draw the background.
-
-    let gradient = ctx.createLinearGradient(0, 0, 0, height);
-    gradient.addColorStop(0, BAR_GRAPH_BACKGROUND_GRADIENT_START);
-    gradient.addColorStop(1, BAR_GRAPH_BACKGROUND_GRADIENT_END);
-    ctx.fillStyle = gradient;
-    ctx.fillRect(0, 0, width, height);
-
     // Draw the graph.
 
     // Iterate over the blocks, then the bars, to draw all rectangles of