Make sidebar scroll with page (bug 650288)

apps/editors/templates/editors/review.html

@@ -196,7 +196,8 @@
 
 </div> {# /#primary #}
 
-<div class="secondary">
+<div class="secondary scroll_sidebar_parent">
+  <div id="scroll_sidebar">
   {{ num }}
   {% if paging %}
   <div class="review-paging">
@@ -223,7 +224,9 @@
   <strong>{{ _('Review This Add-on') }}</strong>
   <ul>
     <li><a href="#more-about">{{ _('More Information') }}</a></li>
-    <li><a href="#review-files">{{ _('Add-on Files') }}</a></li>
+    <li><a href="#file-about">{{ _('Item History') }}</a></li>
+    <li><a href="#compatibility">{{ _('Compatibility') }}</a></li>
+    <li><a href="#validation">{{ _('Add-on Files') }}</a></li>
     <li><a href="#review-actions">{{ _('Editor Actions') }}</a></li>
   </ul>
 
@@ -251,5 +254,6 @@
   </ul>
   {% endif %}
 
+  </div>
 </div>
 {% endblock %}

media/css/zamboni/editors.css

@@ -482,6 +482,10 @@ div.editor-stats-table > div.editor-stats-dark {
     width: 13.49%;
 }
 
+.secondary.scroll_sidebar_parent {
+    position: relative;
+}
+
 #review-actions-form textarea,
 #review-actions-form input[type=text],
 #review-actions-form select {

media/js/zamboni/debouncer.js

@@ -0,0 +1,17 @@
+// debounce
+// args:
+//   function
+//   milliseconds
+//   context
+
+function debounce(fn, ms, ctxt) {
+    var ctx = ctxt || window;
+    var to, del = ms, fun = fn;
+    return function () {
+        var args = arguments;
+        clearTimeout(to);
+        to = setTimeout(function() {
+            fun.apply(ctx, args);
+        }, del);
+    };
+};

media/js/zamboni/discovery_addons.js

@@ -88,18 +88,6 @@ $(document).ready(function(){
 });
 
 
-function debounce(fn, ms, ctxt) {
-    var ctx = ctxt || window;
-    var to, del = ms, fun = fn;
-    return function () {
-        var args = arguments;
-        clearTimeout(to);
-        to = setTimeout(function() {
-            fun.apply(ctx, args);
-        }, del);
-    };
-}
-
 function initDetail() {
     $(".install-action a").attr("target", "_self");
 

media/js/zamboni/editors.js

@@ -34,6 +34,10 @@ $(function() {
     if($('#monthly').exists()) {
         initPerformanceStats();
     }
+
+    if($('#scroll_sidebar').exists()) {
+        initScrollingSidebar();
+    }
 });
 
 function initReviewActions() {
@@ -182,6 +186,48 @@ function initQueueSearch(doc) {
 }
 
 
+function initScrollingSidebar() {
+    var $sb = $('#scroll_sidebar'),
+        $sb_parent = $sb.parent(),
+        sb_top = $sb_parent.offset().top,
+        sb_height = $sb.height(),
+        $addon = $('#addon'),
+        addon_top = $addon.offset().top,
+        current_state = false,
+        addon_height_current = 0;
+
+    function updateState(state){
+        if(state == current_state) return;
+
+        if(state == "bottom") {
+            $sb.css({'position': 'absolute', 'top': addon_height_current - sb_height});
+        } else if(state == "middle") {
+            $sb.css({'position': 'fixed', 'top': 0});
+        } else if(state == "top") {
+            $sb.css({'position': 'absolute', 'top': 0});
+        }
+    }
+
+    $(window).scroll(debounce(function(){
+        var scroll_top = $(window).scrollTop(),
+            addon_height = $addon.height();
+
+        if(addon_height_current != addon_height) {
+            $sb_parent.css('height', addon_height);
+            addon_height_current = addon_height;
+        }
+
+        if(addon_top + addon_height < scroll_top + sb_height) {
+            updateState('bottom', addon_height);
+        } else if(scroll_top > sb_top) {
+            updateState('middle');
+        } else {
+            updateState('top');
+        }
+    }), 200);
+}
+
+
 function initPerformanceStats() {
     var container = $('#monthly'),
         groups = {'usercount': gettext('Your Reviews'),

settings.py

@@ -430,6 +430,7 @@ MINIFY_BUNDLES = {
             'js/lib/jquery-ui/jqModal.js',
             'js/amo2009/home.js',
             'js/zamboni/l10n.js',
+            'js/zamboni/debouncer.js',
             'js/zamboni/storage.js',
 
             # Homepage
@@ -524,6 +525,7 @@ MINIFY_BUNDLES = {
             'js/lib/jquery.hoverIntent.min.js',
             'js/zamboni/personas.js',
 
+            'js/zamboni/debouncer.js',
             'js/zamboni/truncation.js',
             'js/lib/jquery.cookie.js',
             'js/zamboni/storage.js',