merging addition of range selector secondary gradient color (formerly PR 314) with...

diff --combined auto_tests/tests/range_selector.js
index 67d76cc,ddabac4..575cced
--- 1/auto_tests/tests/range_selector.js
--- 2/auto_tests/tests/range_selector.js
+++ b/auto_tests/tests/range_selector.js
@@@ -115,6 -115,7 +115,7 @@@ RangeSelectorTestCase.prototype.testRan
      showRangeSelector: true,
      rangeSelectorHeight: 30,
      rangeSelectorPlotFillColor: 'lightyellow',
+     rangeSelectorPlotFillGradientColor: 'rgba(200, 200, 42, 10)',
      labels: ['X', 'Y']
    };
    var data = [
@@@ -133,36 -134,6 +134,36 @@@
    this.assertGraphExistence(g, graph);
  };
  
 +RangeSelectorTestCase.prototype.testAdditionalRangeSelectorOptions = function() {
 +  var opts = {
 +    width: 480,
 +    height: 320,
 +    showRangeSelector: true,
 +    rangeSelectorHeight: 30,
 +    rangeSelectorBGStrokeColor: 'blue',
 +    rangeSelectorBGLineWidth: 3,
 +    rangeSelectorPlotLineWidth: 0.5,
 +    rangeSelectorFGStrokeColor: 'red',
 +    rangeSelectorFGLineWidth: 2,
 +    rangeSelectorAlpha: 0.8,
 +    labels: ['X', 'Y']
 +  };
 +  var data = [
 +               [1, 10],
 +               [2, 15],
 +               [3, 10],
 +               [4, 15],
 +               [5, 10],
 +               [6, 15],
 +               [7, 10],
 +               [8, 15],
 +               [9, 10]
 +             ];
 +  var graph = document.getElementById("graph");
 +  var g = new Dygraph(graph, data, opts);
 +  this.assertGraphExistence(g, graph);
 +};
 +
  RangeSelectorTestCase.prototype.testRangeSelectorEnablingAfterCreation = function() {
    var opts = {
      width: 480,

diff --combined dygraph-options-reference.js
index 26bb22b,3e13d85..57fbb97
--- 1/dygraph-options-reference.js
--- 2/dygraph-options-reference.js
+++ b/dygraph-options-reference.js
@@@ -739,42 -739,12 +739,48 @@@ Dygraph.OPTIONS_REFERENCE =  // <JSON
      "type": "string",
      "description": "The range selector mini plot fill color. This can be of the form \"#AABBCC\" or \"rgb(255,100,200)\" or \"yellow\". You can also specify null or \"\" to turn off fill."
    },
+   "rangeSelectorPlotFillGradientColor": {
+     "default": "white",
+     "labels": ["Interactive Elements"],
+     "type": "string",
+     "description": "The top color for the range selector mini plot fill color gradient. This can be of the form \"#AABBCC\" or \"rgb(255,100,200)\" or \"rgba(255,100,200,42)\" or \"yellow\". You can also specify null or \"\" to disable the gradient and fill with one single color."
+   },
 +  "rangeSelectorBGStrokeColor": {
 +    "default": "gray",
 +    "labels": ["Interactive Elements"],
 +    "type": "string",
 +    "description": "The color of the lines below and on both sides of the range selector mini plot. This can be of the form \"#AABBCC\" or \"rgb(255,100,200)\" or \"yellow\"."
 +  },
 +  "rangeSelectorBGLineWidth": {
 +    "default": "1",
 +    "labels": ["Interactive Elements"],
 +    "type": "float",
 +    "description": "The width of the lines below and on both sides of the range selector mini plot."
 +  },
 +  "rangeSelectorPlotLineWidth": {
 +    "default": "1.5",
 +    "labels": ["Interactive Elements"],
 +    "type": "float",
 +    "description": "The width of the range selector mini plot line."
 +  },
 +  "rangeSelectorFGStrokeColor": {
 +    "default": "black",
 +    "labels": ["Interactive Elements"],
 +    "type": "string",
 +    "description": "The color of the lines in the interactive layer of the range selector. This can be of the form \"#AABBCC\" or \"rgb(255,100,200)\" or \"yellow\"."
 +  },
 +  "rangeSelectorFGLineWidth": {
 +    "default": "1",
 +    "labels": ["Interactive Elements"],
 +    "type": "float",
 +    "description": "The width the lines in the interactive layer of the range selector."
 +  },
 +  "rangeSelectorAlpha": {
 +    "default": "0.6",
 +    "labels": ["Interactive Elements"],
 +    "type": "float (0.0 - 1.0)",
 +    "description": "The transparency of the veil that is drawn over the unselected portions of the range selector mini plot. A value of 0 represents full transparency and the unselected portions of the mini plot will appear as normal. A value of 1 represents full opacity and the unselected portions of the mini plot will be hidden."
 +  },
    "showInRangeSelector": {
      "default": "null",
      "labels": ["Interactive Elements"],

diff --combined dygraph-utils.js
index 4f782b1,9634a8b..f712650
--- 1/dygraph-utils.js
--- 2/dygraph-utils.js
+++ b/dygraph-utils.js
@@@ -902,13 -902,8 +902,14 @@@ var pixelSafeOptions = 
    'pointClickCallback': true,
    'pointSize': true,
    'rangeSelectorPlotFillColor': true,
+   'rangeSelectorPlotFillGradientColor': true,
    'rangeSelectorPlotStrokeColor': true,
 +  'rangeSelectorBGStrokeColor': true,
 +  'rangeSelectorBGLineWidth': true,
 +  'rangeSelectorPlotLineWidth': true,
 +  'rangeSelectorFGStrokeColor': true,
 +  'rangeSelectorFGLineWidth': true,
 +  'rangeSelectorAlpha': true,
    'showLabelsOnHighlight': true,
    'showRoller': true,
    'strokeWidth': true,

diff --combined dygraph.js
index 35f2b5f,5b2b587..1e1a270
--- 1/dygraph.js
--- 2/dygraph.js
+++ b/dygraph.js
@@@ -336,13 -336,8 +336,14 @@@ Dygraph.DEFAULT_ATTRS = 
    showRangeSelector: false,
    rangeSelectorHeight: 40,
    rangeSelectorPlotStrokeColor: "#808FAB",
+   rangeSelectorPlotFillGradientColor: "white",
    rangeSelectorPlotFillColor: "#A7B1C4",
 +  rangeSelectorBGStrokeColor: "gray",
 +  rangeSelectorBGLineWidth: 1,
 +  rangeSelectorPlotLineWidth:1.5,
 +  rangeSelectorFGStrokeColor: "black",
 +  rangeSelectorFGLineWidth: 1,
 +  rangeSelectorAlpha: 0.6,
    showInRangeSelector: null,
  
    // The ordering here ensures that central lines always appear above any

diff --combined plugins/range-selector.js
index f9d4193,6819eea..2f5cdb7
--- 1/plugins/range-selector.js
--- 2/plugins/range-selector.js
+++ b/plugins/range-selector.js
@@@ -222,7 -222,7 +222,7 @@@ rangeSelector.prototype.createZoomHandl
    img.style.zIndex = 10;
    img.style.visibility = 'hidden'; // Initially hidden so they don't show up in the wrong place.
    img.style.cursor = 'col-resize';
 -
 +//TODO: change image to more options
    if (/MSIE 7/.test(navigator.userAgent)) { // IE7 doesn't support embedded src data.
      img.width = 7;
      img.height = 14;
@@@ -526,8 -526,8 +526,8 @@@ rangeSelector.prototype.drawStaticLayer
    }
  
    var margin = 0.5;
 -  this.bgcanvas_ctx_.lineWidth = 1;
 -  ctx.strokeStyle = 'gray';
 +  this.bgcanvas_ctx_.lineWidth = this.getOption_('rangeSelectorBGLineWidth');
 +  ctx.strokeStyle = this.getOption_('rangeSelectorBGStrokeColor');
    ctx.beginPath();
    ctx.moveTo(margin, margin);
    ctx.lineTo(margin, this.canvasRect_.h-margin);
@@@ -543,6 -543,7 +543,7 @@@
   */
  rangeSelector.prototype.drawMiniPlot_ = function() {
    var fillStyle = this.getOption_('rangeSelectorPlotFillColor');
+   var fillGradientStyle = this.getOption_('rangeSelectorPlotFillGradientColor');
    var strokeStyle = this.getOption_('rangeSelectorPlotStrokeColor');
    if (!fillStyle && !strokeStyle) {
      return;
@@@ -608,7 -609,9 +609,9 @@@
  
    if (fillStyle) {
      var lingrad = this.bgcanvas_ctx_.createLinearGradient(0, 0, 0, canvasHeight);
-     lingrad.addColorStop(0, 'white');
+     if (fillGradientStyle) {
+       lingrad.addColorStop(0, fillGradientStyle);
+     }
      lingrad.addColorStop(1, fillStyle);
      this.bgcanvas_ctx_.fillStyle = lingrad;
      ctx.fill();
@@@ -616,7 -619,7 +619,7 @@@
  
    if (strokeStyle) {
      this.bgcanvas_ctx_.strokeStyle = strokeStyle;
 -    this.bgcanvas_ctx_.lineWidth = 1.5;
 +    this.bgcanvas_ctx_.lineWidth = this.getOption_('rangeSelectorPlotLineWidth');
      ctx.stroke();
    }
  };
@@@ -746,8 -749,7 +749,8 @@@ rangeSelector.prototype.drawInteractive
    var height = this.canvasRect_.h - margin;
    var zoomHandleStatus = this.getZoomHandleStatus_();
  
 -  ctx.strokeStyle = 'black';
 +  ctx.strokeStyle = this.getOption_('rangeSelectorFGStrokeColor');
 +  ctx.lineWidth = this.getOption_('rangeSelectorFGLineWidth');
    if (!zoomHandleStatus.isZoomed) {
      ctx.beginPath();
      ctx.moveTo(margin, margin);
@@@ -759,7 -761,7 +762,7 @@@
      var leftHandleCanvasPos = Math.max(margin, zoomHandleStatus.leftHandlePos - this.canvasRect_.x);
      var rightHandleCanvasPos = Math.min(width, zoomHandleStatus.rightHandlePos - this.canvasRect_.x);
  
 -    ctx.fillStyle = 'rgba(240, 240, 240, 0.6)';
 +    ctx.fillStyle = 'rgba(240, 240, 240, ' + this.getOption_('rangeSelectorAlpha').toString() + ')';
      ctx.fillRect(0, 0, leftHandleCanvasPos, this.canvasRect_.h);
      ctx.fillRect(rightHandleCanvasPos, 0, this.canvasRect_.w - rightHandleCanvasPos, this.canvasRect_.h);