[perf-web] Save the current range in the query string

[Owen Taylor <otaylor src gnome org>]

commit b1ed94e9e467daa71a115099a8f970bbf7e48e63
Author: Owen W. Taylor <otaylor fishsoup net>
Date:   Wed Jul 23 18:21:09 2014 -0400

    Save the current range in the query string
    
    When the user selects a range (Day/Week/Month/Year), modify the
    query string (without adding an item to the history), and read
    the query string on load.

 static/main.js                |   30 +++++++++++++++++++++++++++++-
 templates/metrics/home.html   |    8 ++++----
 templates/metrics/metric.html |    8 ++++----
 templates/metrics/target.html |    8 ++++----
 4 files changed, 41 insertions(+), 13 deletions(-)
---
diff --git a/static/main.js b/static/main.js
index d7db7c9..8f9f652 100644
--- a/static/main.js
+++ b/static/main.js
@@ -858,6 +858,7 @@ function PerfDisplay(target, metric, dataMinTime, dataMaxTime, centerTime, range
 }
 
 PerfDisplay.prototype.setPositionAndRange = function(centerTime, rangeType, clampCenter) {
+    var rangeTypeChanged = (this.rangeType != rangeType);
     this.rangeType = rangeType;
 
     switch (rangeType) {
@@ -891,6 +892,8 @@ PerfDisplay.prototype.setPositionAndRange = function(centerTime, rangeType, clam
 
     this.load();
     this.refresh();
+    if (rangeTypeChanged)
+        history.replaceState(null, null, "?r=" + rangeType);
 }
 
 PerfDisplay.prototype.refresh = function() {
@@ -1085,6 +1088,9 @@ PerfDisplay.prototype._loadRange = function(group, start, end) {
 }
 
 PerfDisplay.prototype.onWindowLoaded = function() {
+    $( "#aboveMainLeft a" ).removeClass('range-active');
+    $( "#" + this.rangeType + "Link" ).addClass('range-active');
+
     if (this.windowLoaded)
         return;
 
@@ -1131,6 +1137,28 @@ function setRange(e, a, rangeType) {
     theDisplay.setPositionAndRange(theDisplay.centerTime, rangeType, false);
 }
 
+function getQueryParams() {
+    var query = window.location.search.substring(1);
+    if (query == null || query == "")
+        return {};
+
+    var components = query.split(/&/);
+
+    var params = {};
+    var i;
+    for (i = 0; i < components.length; i++) {
+        var component = components[i];
+        var m = component.match(/([^=]+)=(.*)/);
+        if (m)
+            params[m[1]] = decodeURIComponent(m[2]);
+    }
+
+    return params;
+}
+
 function initialize(target, metric, dataMinTime, dataMaxTime) {
-    theDisplay = new PerfDisplay(target, metric, dataMinTime, dataMaxTime, Date.now() / 1000, 'week');
+    var params = getQueryParams();
+    var rangeType = ('r' in params) ? params['r'] : 'week';
+
+    theDisplay = new PerfDisplay(target, metric, dataMinTime, dataMaxTime, Date.now() / 1000, rangeType);
 }
diff --git a/templates/metrics/home.html b/templates/metrics/home.html
index ec84299..c44ba8f 100644
--- a/templates/metrics/home.html
+++ b/templates/metrics/home.html
@@ -18,10 +18,10 @@
   </div>
   <div id="aboveMainLeft">
     <span id="rangeLabels">
-      <a href="#" onclick="setRange(event, this, 'day');">Day</a>
-      <a href="#" onclick="setRange(event, this, 'week');" class="range-active">Week</a>
-      <a href="#" onclick="setRange(event, this, 'month');">Month</a>
-      <a href="#" onclick="setRange(event, this, 'year');">Year</a>
+      <a id="dayLink" href="#" onclick="setRange(event, this, 'day');">Day</a>
+      <a id="weekLink" href="#" onclick="setRange(event, this, 'week');" class="range-active">Week</a>
+      <a id="monthLink" href="#" onclick="setRange(event, this, 'month');">Month</a>
+      <a id="yearLink" href="#" onclick="setRange(event, this, 'year');">Year</a>
     </span>
   </div>
   <div id="mainLeft">
diff --git a/templates/metrics/metric.html b/templates/metrics/metric.html
index 2f61b3c..03ab43a 100644
--- a/templates/metrics/metric.html
+++ b/templates/metrics/metric.html
@@ -23,10 +23,10 @@
 
   <div id="aboveMainLeft">
     <span id="rangeLabels">
-      <a href="#" onclick="setRange(event, this, 'day');">Day</a>
-      <a href="#" onclick="setRange(event, this, 'week');" class="range-active">Week</a>
-      <a href="#" onclick="setRange(event, this, 'month');">Month</a>
-      <a href="#" onclick="setRange(event, this, 'year');">Year</a>
+      <a id="dayLink" href="#" onclick="setRange(event, this, 'day');">Day</a>
+      <a id="weekLink" href="#" onclick="setRange(event, this, 'week');" class="range-active">Week</a>
+      <a id="monthLink" href="#" onclick="setRange(event, this, 'month');">Month</a>
+      <a id="yearLink" href="#" onclick="setRange(event, this, 'year');">Year</a>
     </span>
   </div>
   <div id="mainLeft">
diff --git a/templates/metrics/target.html b/templates/metrics/target.html
index 402ee7e..1947dcf 100644
--- a/templates/metrics/target.html
+++ b/templates/metrics/target.html
@@ -40,10 +40,10 @@
 
   <div id="aboveMainLeft">
     <span id="rangeLabels">
-      <a href="#" onclick="setRange(event, this, 'day');">Day</a>
-      <a href="#" onclick="setRange(event, this, 'week');" class="range-active">Week</a>
-      <a href="#" onclick="setRange(event, this, 'month');">Month</a>
-      <a href="#" onclick="setRange(event, this, 'year');">Year</a>
+      <a id="dayLink" href="#" onclick="setRange(event, this, 'day');">Day</a>
+      <a id="weekLink" href="#" onclick="setRange(event, this, 'week');" class="range-active">Week</a>
+      <a id="monthLink" href="#" onclick="setRange(event, this, 'month');">Month</a>
+      <a id="yearLink" href="#" onclick="setRange(event, this, 'year');">Year</a>
     </span>
   </div>
   <div id="mainLeft">