[perf-web] Add hints box in the upper right of the screen

[Owen Taylor <otaylor src gnome org>]

commit d8858d1238f2a1e6a1f0b2da1178b32fdea6f970
Author: Owen W. Taylor <otaylor fishsoup net>
Date:   Wed Sep 17 21:23:25 2014 -0400

    Add hints box in the upper right of the screen
    
    The double-clicking and key shortcuts might be a bit hard to find out - go with
    the sledge-hammer approach which shows context-sensitive hints.

 static/main.js                |   26 ++++++++++++++++++++++----
 static/perf.css               |   14 ++++++++++++++
 templates/metrics/common.html |    9 +++++++++
 3 files changed, 45 insertions(+), 4 deletions(-)
---
diff --git a/static/main.js b/static/main.js
index ae27bf3..db595d7 100644
--- a/static/main.js
+++ b/static/main.js
@@ -112,7 +112,7 @@ Chart.prototype.y = function(value) {
     return this.bodyHeight * (1 - (value - this.bottom) / (this.top - this.bottom));
 }
 
-Chart.prototype.setHover = function(target, time) {
+Chart.prototype.setHover = function(target, time, isMouse) {
     var topY = this.y(this.topValue);
     var bottomY = this.y(this.bottomValue);
     var values = target.values;
@@ -132,6 +132,7 @@ Chart.prototype.setHover = function(target, time) {
                 time: time,
                 revision: theDisplay.allTargets[target.target].revisions[time],
                 value: values.data[j + 1] * this.multiplier,
+                isMouse: isMouse
             });
 
             return;
@@ -166,7 +167,7 @@ Chart.prototype.onMouseMove = function(event) {
     }
 
     if (closestTarget)
-        this.setHover(closestTarget, closestTime);
+        this.setHover(closestTarget, closestTime, true);
     else
         theDisplay.setHover(null);
 }
@@ -1235,8 +1236,10 @@ PerfDisplay.prototype.setPositionAndRange = function(centerTime, rangeType, clam
 
     this.load();
     this.queueRefresh();
-    if (rangeTypeChanged)
+    if (rangeTypeChanged) {
+        this.updateHints();
         history.replaceState(null, null, "?r=" + rangeType);
+    }
 }
 
 PerfDisplay.prototype.refresh = function() {
@@ -1623,6 +1626,8 @@ PerfDisplay.prototype.onWindowLoaded = function() {
         this.refresh();
     }.bind(this));
 
+    this.updateHints();
+
     if (!this.loadedRanges.isEmpty())
         this.refresh();
 }
@@ -1646,6 +1651,8 @@ PerfDisplay.prototype.setHover = function(hoverInfo)
     } else {
         $( hover ).hide();
     }
+
+    this.updateHints();
 }
 
 PerfDisplay.prototype.setDetails = function(detailsInfo)
@@ -1659,6 +1666,7 @@ PerfDisplay.prototype.setDetails = function(detailsInfo)
     }
 
     this.queueRefresh();
+    this.updateHints();
 }
 
 PerfDisplay.prototype.moveDetails = function(direction)
@@ -1719,7 +1727,7 @@ PerfDisplay.prototype.moveDetails = function(direction)
     }
 
     if (newTime != null) {
-        chart.setHover(newTarget, newTime);
+        chart.setHover(newTarget, newTime, false);
 
         this.detailsInfo.time = newTime;
         this.detailsInfo.revision = newRevision;
@@ -1840,6 +1848,16 @@ PerfDisplay.prototype.fetchRevisions = function(date) {
             }.bind(this)});
 }
 
+PerfDisplay.prototype.updateHints = function() {
+    $( "#hintPlus" ).toggleClass('hint-disabled', this.rangeType == 'day');
+    $( "#hintMinus" ).toggleClass('hint-disabled', this.rangeType == 'year');
+    $( "#hintDblClickZoom" ).toggle(this.rangeType != 'day');
+    $( "#hintDblClickDetails" ).toggle(this.rangeType == 'day');
+    $( "#hintEsc" ).toggle(this.detailsInfo != null);
+    $( "#hintLeft" ).toggle(this.detailsInfo != null);
+    $( "#hintRight" ).toggle(this.detailsInfo != null);
+}
+
 //////////////////////////////////////////////////////////////////////////////////
 
 function setRange(e, a, rangeType) {
diff --git a/static/perf.css b/static/perf.css
index e3f876c..f992b76 100644
--- a/static/perf.css
+++ b/static/perf.css
@@ -436,3 +436,17 @@ body.details-showing #details {
     margin-right: 3px;
     margin-bottom: 3px;
 }
+
+#hints {
+    position: fixed;
+    background: white;
+    border: 1px solid #aaaaaa;
+    padding: 3px;
+    top: 35px;
+    right: 10px;
+    font-size: 9px;
+}
+
+.hint-disabled {
+    color: #aaaaaa;
+}
\ No newline at end of file
diff --git a/templates/metrics/common.html b/templates/metrics/common.html
index 45e998e..4fe4691 100644
--- a/templates/metrics/common.html
+++ b/templates/metrics/common.html
@@ -10,3 +10,12 @@
       <div id="detailsClose"> </div>
     </div>
   </div>
+  <div id="hints">
+    <div id="hintDblClickZoom">double click: zoom in</div>
+    <div id="hintDblClickDetails">double click: details</div>
+    <div id="hintPlus">+: zoom in</div>
+    <div id="hintMinus">-: zoom out</div>
+    <div id="hintEsc">&lt;Esc&gt;: close details</div>
+    <div id="hintLeft">&lt;Left&gt;: previous build</div>
+    <div id="hintRight">&lt;Right&gt;: next build</div>
+  </div>