Indicate narrowing

(imported from commit 19682fc07393f0848481abf72339eefd56b30ab2)

templates/zephyr/index.html

@@ -26,9 +26,10 @@
 </div>
 </div>
 
-<div class="row-fluid">
+<div class="row-fluid" id="narrow_bar">
     <div class="span12">
-        <button id="unhide" class="btn" onclick="unhide()">Show all</button>
+        <button id="unhide" class="btn" disabled=disabled onclick="unhide()">Show all</button>
+        <span id="narrow_indicator"></span>
     </div>
 </div>
 

zephyr/static/js/zephyr.js

@@ -90,6 +90,9 @@ function narrow(class_name, target_zephyr) {
 
     // Try to keep the zephyr in the same place on the screen after narrowing.
     scroll_to_zephyr(target_zephyr, old_top);
+
+    $("#unhide").removeAttr("disabled");
+    $("#narrow_indicator").html("Showing <span class='label zephyr_class'>" + class_name + "</span>");
 }
 
 function narrow_instance(class_name, instance, target_zephyr) {
@@ -108,6 +111,10 @@ function narrow_instance(class_name, instance, target_zephyr) {
 
     // Try to keep the zephyr in the same place on the screen after narrowing.
     scroll_to_zephyr(target_zephyr, old_top);
+
+    $("#unhide").removeAttr("disabled");
+    $("#narrow_indicator").html("Showing <span class='label zephyr_class'>" + class_name
+      + "</span> <span class='label zephyr_instance'>" + instance + "</span>");
 }
 
 function prepare_personal(username) {
@@ -121,6 +128,9 @@ function unhide() {
     p = $("#selected");
     tr = $(p).closest("tr");
     scroll_to_zephyr(tr.attr("id"), 0);
+
+    $("#unhide").attr("disabled", "disabled");
+    $("#narrow_indicator").html("");
 }
 
 $(function() {

zephyr/static/styles/zephyr.css

@@ -21,10 +21,19 @@ form.zephyr textarea {
     width: 95%;
 }
 
-#unhide {
+#narrow_bar {
     margin-top: 5px;
 }
 
+#unhide {
+    vertical-align: middle;
+}
+
+#narrow_indicator {
+    vertical-align: middle;
+    margin-left: 5px;
+}
+
 .zephyr_class {
   background-color: #b94a48;
 }