UI to select revisions to compare
authorJoachim Breitner <mail@joachim-breitner.de>
Sun, 14 Jun 2015 09:42:12 +0000 (11:42 +0200)
committerJoachim Breitner <mail@joachim-breitner.de>
Sun, 14 Jun 2015 09:42:12 +0000 (11:42 +0200)
install-jslibs.sh
site/index.html
site/js/gipeda.js

index 245f533..b9b3062 100755 (executable)
@@ -12,6 +12,12 @@ test -e handlebars-v2.0.0.js ||
        wget -c http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v2.0.0.js
 test -e jquery-1.11.2.min.js ||
        wget -c http://code.jquery.com/jquery-1.11.2.min.js
+test -d jquery-ui- || {
+        wget -c http://jqueryui.com/resources/download/jquery-ui-1.11.4.zip
+       unzip jquery-ui-1.11.4.zip
+       mv jquery-ui-1.11.4 jquery-ui
+       rm -f jquery-ui-1.11.4.zip
+       }
 test -e jquery.timeago.js ||
        wget -c http://timeago.yarp.com/jquery.timeago.js
 test -d flot || {
index b74e5ff..189d563 100644 (file)
@@ -11,6 +11,8 @@
 <script type="text/javascript" src="js/handlebars-v2.0.0.js"></script>
 <script src="js/jquery-1.11.2.min.js"></script>
 <script src="js/jquery.timeago.js"></script>
+<script src="js/jquery-ui/jquery-ui.min.js"></script>
+<link rel="stylesheet" href="js/jquery-ui/jquery-ui.min.css">
 
 <script src="js/flot/jquery.flot.min.js"></script>
 <script src="js/flot/jquery.flot.resize.min.js"></script>
@@ -110,18 +112,24 @@ html {
     <div class="navbar-header pull-right">
       <p class="navbar-text nav-loading pull-left">Loading data...</p>
 
+      <div class="navbar-text nav-compare" role="group">
+       <a id="go-to-compare" href="#" class="navbar-link">
+        <code>
+         <span title="Drop a revision id to compare two revisions" id="compare-from">???????</span>..<span title="Drop a revision id to compare two revisions" id="compare-to">???????</span>
+         </code>
+       </a>
+      </div>
+
       <ul class="nav pull-left">
        <li class="pull-left">
        <div class="btn-group" role="group">
         <button type="button" class="btn btn-default navbar-btn active benchSelector" id="show-improvements" title="Show improvements">
-         <!-- <span class="glyphicon glyphicon-plus text-success"></span> -->
          <span class="text-success" style="font-weight:bold">+</span>
         </button>
         <button type="button" class="btn btn-default navbar-btn benchSelector" id="show-boring" title="Show unchanged">
          <span style="font-weight:bold">=</span>
         </button>
         <button type="button" class="btn btn-default navbar-btn active benchSelector" id="show-regressions" title="Show regressions">
-         <!-- <span class="glyphicon glyphicon-minus text-warning"></span> -->
          <span class="text-warning" style="font-weight:bold">-</span>
         </button>
        </div>
@@ -147,6 +155,11 @@ html {
  </nav>
 </script>
 
+<script id="rev-id" type="text/x-handlebars-template">
+  <code data-rev="{{hash}}" class="rev-draggable">{{shortRev hash}}</code>
+</script>
+
+
 <script id="summary-icons"  type="text/x-handlebars-template">
   <span title="{{id summaryDesc}}">
   <span>
@@ -180,7 +193,7 @@ html {
      </td>
      <td class="col-md-1">
       <a href="{{revisionLink hash}}">
-        <code>{{shortRev hash}}</code>
+        {{> rev-id hash=hash}}
       </a>
      </td>
      <td class="col-md-7">
@@ -207,7 +220,7 @@ html {
        </td>
        <td class="col-md-1">
        <a href="{{revisionLink hash}}">
-         <code>{{shortRev hash}}</code>
+          {{> rev-id hash=hash}}
        </a>
        </td>
        <td class="col-md-1">
@@ -225,7 +238,7 @@ html {
        <td class="col-md-2 text-right">
        </td>
        <td class="col-md-1">
-         <code>{{shortRev this}}</code>
+          {{> rev-id hash=this}}
        </td>
        <td class="col-md-7">
         {{ @key }}
@@ -239,7 +252,9 @@ html {
 </script>
 
 <script id="revTooltip" type="text/x-handlebars-template">
- <a href="{{revisionLink hash}}"><code>{{shortRev hash}}</code></a>:
+ <a href="{{revisionLink hash}}">
+  {{> rev-id hash=this}}
+ </a>:
  {{ value }}<br/>
  {{ humanDate gitDate}}<br/>
  {{ gitSubject }}</br>
@@ -348,9 +363,11 @@ html {
     </h2>
     <p>
     {{#if rev.summary.parents}}
-    Displaying changes since:  
+    Displaying changes since:
     {{#with (lookup rev.summary.parents 0)}}
-      <a href="{{revisionLink this}}"><code>{{shortRev this}}</code></a> – 
+      <a href="{{revisionLink this}}">
+       {{> rev-id hash=this}}
+      </a> –
       <a href="{{diffLink this ../rev.summary.hash}}">View diff</a>
     {{/with}} –
     {{#logLink rev.summary.hash }}
@@ -441,14 +458,14 @@ html {
     {{#if rev1.summary}}{{#if rev2.summary}}
     <h2>
      Comparing
-      <code>{{shortRev rev1.summary.hash}}</code>..<code>{{shortRev rev2.summary.hash}}</code>
+      {{> rev-id hash=rev1.summary.hash}}..{{> rev-id hash=rev2.summary.hash}}
     </h2>
     <p>
      Parents:
      {{#each rev1.summary.parents}}
       <a href="{{compareLink this ../rev2.summary.hash}}">{{shortRev this}}</a>
      {{/each}}</br>
-      <a href="{{revisionLink rev1.summary.hash}}"><code>{{shortRev rev1.summary.hash}}</code></a> <abbrv class="timeago" title="{{ iso8601 gitDate }}">{{ humanDate rev1.summary.gitDate}}</abbrv>:<br/>
+      <a href="{{revisionLink rev1.summary.hash}}">{{> rev-id hash=rev1.summary.hash}}</a> <abbrv class="timeago" title="{{ iso8601 gitDate }}">{{ humanDate rev1.summary.gitDate}}</abbrv>:<br/>
      <strong>{{ rev1.summary.gitSubject }}</strong><br/>
      {{#logLink rev1.summary.hash }}
       <a href="{{link}}">buildlog</a>
@@ -464,7 +481,7 @@ html {
      {{#each rev2.summary.parents}}
       <a href="{{compareLink ../rev1.summary.hash this}}">{{shortRev this}}</a>
      {{/each}}</br>
-     <a href="{{revisionLink rev2.summary.hash}}"><code>{{shortRev rev2.summary.hash}}</code></a> <abbrv class="timeago" title="{{ iso8601 gitDate }}">{{ humanDate rev2.summary.gitDate}}</abbrv>:<br/>
+      <a href="{{revisionLink rev2.summary.hash}}">{{> rev-id hash=rev2.summary.hash}}</a> <abbrv class="timeago" title="{{ iso8601 gitDate }}">{{ humanDate rev2.summary.gitDate}}</abbrv>:<br/>
      <strong>{{ rev2.summary.gitSubject }}</strong><br/>
      {{#logLink rev2.summary.hash }}
       <a href="{{link}}">buildlog</a>
index d45ae47..5d96592 100644 (file)
@@ -146,7 +146,7 @@ $(function ()  {
     templates[id] = Handlebars.compile(source);
   });
 
-  var partials_ids =  ["nav", "summary-icons", "summary-list", "nothing", "tags"];
+  var partials_ids =  ["nav", "summary-icons", "summary-list", "rev-id", "nothing", "tags"];
   partials_ids.forEach(function(id) {
     var source = $("#" + id).html();
     Handlebars.registerPartial(id, source);
@@ -412,6 +412,16 @@ dataViewPrepare = {
   },
 }
 
+function current_compare_link () {
+    var rev1 = $('#compare-from').data('rev');
+    var rev2 = $('#compare-to').data('rev');
+    if (rev1 && rev2) {
+       return "#" + routes.compare.url(rev1, rev2);
+    } else {
+       return 'javascript:alert("Please drag two revisions here to compare them")';
+    }
+}
+
 function load_template () {
     console.log('Rebuilding page');
     var context = {};
@@ -427,15 +437,32 @@ function load_template () {
     updateCollapsedGroups();
     $('abbrv.timeago').timeago();
 
+    // Code to implement the compare-revision-drag'n'drop interface
+    $('.rev-draggable').draggable({
+        revert: true,
+       revertDuration: 0,
+    });
+    $('#compare-from, #compare-to').droppable({
+       accept: ".rev-draggable",
+        activeClass: "ui-state-highlight",
+        hoverClass: "ui-state-active",
+        drop: function( event, ui ) {
+          $( this ).text(ui.draggable.text());
+          $( this ).data('rev',ui.draggable.data('rev'));
+         $('#go-to-compare').attr('href',current_compare_link());
+      }
+    });
+    $('#go-to-compare').attr('href',current_compare_link());
+
     if ($('#benchChart').length) {
-       setupChart();
+       setupChart();
     }
 }
 viewChanged.add(load_template);
 dataChanged.add(load_template);
 
 function setupChart () {
-    
+
     var commits = commitsFrom(data.revisions, data.latest, data.settings.limitRecent);
     var benchName = viewData.benchName;