Bug 1027755 - Add a method that gets the canvas graphs selection mapped to the source data range, r=pbrosset

browser/devtools/shared/test/browser_graphs-06.js

@@ -38,11 +38,40 @@ function testGraph(graph) {
   is(graph.getSelection().end, graph._regions[0].end,
     "The first region is now selected (2).");
 
+  let min = map(graph.getSelection().start, 0, graph.width, 112, 4180);
+  let max = map(graph.getSelection().end, 0, graph.width, 112, 4180);
+  is(graph.getMappedSelection().min, min,
+    "The mapped selection's min value is correct (1).");
+  is(graph.getMappedSelection().max, max,
+    "The mapped selection's max value is correct (2).");
+
   click(graph, (graph._regions[1].start + graph._regions[1].end) / 2);
   is(graph.getSelection().start, graph._regions[1].start,
     "The second region is now selected (1).");
   is(graph.getSelection().end, graph._regions[1].end,
     "The second region is now selected (2).");
+
+  min = map(graph.getSelection().start, 0, graph.width, 112, 4180);
+  max = map(graph.getSelection().end, 0, graph.width, 112, 4180);
+  is(graph.getMappedSelection().min, min,
+    "The mapped selection's min value is correct (3).");
+  is(graph.getMappedSelection().max, max,
+    "The mapped selection's max value is correct (4).");
+
+  graph.setSelection({ start: graph.width, end: 0 });
+  min = map(0, 0, graph.width, 112, 4180);
+  max = map(graph.width, 0, graph.width, 112, 4180);
+  is(graph.getMappedSelection().min, min,
+    "The mapped selection's min value is correct (5).");
+  is(graph.getMappedSelection().max, max,
+    "The mapped selection's max value is correct (6).");
+}
+
+/**
+ * Maps a value from one range to another.
+ */
+function map(value, istart, istop, ostart, ostop) {
+  return ostart + (ostop - ostart) * ((value - istart) / (istop - istart));
 }
 
 // EventUtils just doesn't work!

browser/devtools/shared/widgets/Graphs.jsm

@@ -377,6 +377,38 @@ AbstractCanvasGraph.prototype = {
     return { start: null, end: null };
   },
 
+  /**
+   * Gets the selection bounds, scaled to correlate with the data source ranges,
+   * such that a [0, max width] selection maps to [first value, last value].
+   *
+   * @param function unpack [optional]
+   *        Invoked when retrieving the numbers in the data source representing
+   *        the first and last values, on the X axis. Currently, all graphs
+   *        store this in a "delta" property for all entries, but in the future
+   *        this may change as new graphs with different data source format
+   *        requirements are implemented.
+   * @return object
+   *         The mapped selection's { min, max } values.
+   */
+  getMappedSelection: function(unpack = e => e.delta) {
+    if (!this.hasData() || !this.hasSelection()) {
+      return { start: null, end: null };
+    }
+    let selection = this.getSelection();
+    let totalTicks = this._data.length;
+    let firstTick = unpack(this._data[0]);
+    let lastTick = unpack(this._data[totalTicks - 1]);
+
+    // The selection's start and end values are not guaranteed to be ascending.
+    // This can happen, for example, when click & dragging from right to left.
+    let min = Math.min(selection.start, selection.end);
+    let max = Math.max(selection.start, selection.end);
+    min = map(min, 0, this._width, firstTick, lastTick);
+    max = map(max, 0, this._width, firstTick, lastTick);
+
+    return { min: min, max: max };
+  },
+
   /**
    * Removes the selection.
    */
@@ -1150,13 +1182,6 @@ LineGraphWidget.prototype = Heritage.extend(AbstractCanvasGraph.prototype, {
     this._avgTooltip.querySelector("[text=value]").textContent = avgValue|0;
     this._minTooltip.querySelector("[text=value]").textContent = minValue|0;
 
-    /**
-     * Maps a value from one range to another.
-     */
-    function map(value, istart, istop, ostart, ostop) {
-      return ostart + (ostop - ostart) * ((value - istart) / (istop - istart));
-    }
-
     /**
      * Constrains a value to a range.
      */
@@ -1603,3 +1628,10 @@ this.CanvasGraphUtils = {
     });
   }
 };
+
+/**
+ * Maps a value from one range to another.
+ */
+function map(value, istart, istop, ostart, ostop) {
+  return ostart + (ostop - ostart) * ((value - istart) / (istop - istart));
+}