Bug 1146777: use lightbox for images

extensions/BugModal/lib/MonkeyPatches.pm

@@ -36,3 +36,14 @@ sub moz_nick {
 }
 
 1;
+
+package Bugzilla::Attachment;
+use strict;
+use warnings;
+
+sub is_image {
+    my ($self) = @_;
+    return substr($self->contenttype, 0, 6) eq 'image/';
+}
+
+1;

extensions/BugModal/template/en/default/bug_modal/activity_stream.html.tmpl

@@ -164,7 +164,14 @@
 [% BLOCK comment_body %]
   <pre class="comment-text [%= "bz_private" IF comment.is_private %]" id="ct-[% comment.count FILTER none %]"
     [% IF comment.collapsed +%] style="display:none"[% END ~%]
-  >[% comment.body_full FILTER quoteUrls(bug, comment) %]</pre>
+  >[% FILTER collapse %]
+    [% IF comment.is_about_attachment && comment.attachment.is_image ~%]
+      <a href="attachment.cgi?id=[% comment.attachment.id FILTER none %]"
+        title="[% comment.attachment.description FILTER html %]"
+        class="lightbox"><img src="extensions/BugModal/web/image.png" width="16" height="16"></a>
+    [% END %]
+  [% END %]
+  [%~ comment.body_full FILTER quoteUrls(bug, comment) ~%]</pre>
 [% END %]
 
 [%

extensions/BugModal/template/en/default/bug_modal/attachments.html.tmpl

@@ -20,8 +20,17 @@
     " [% IF attachment.isobsolete %]style="display:none"[% END %]>
       <td class="attach-desc-td">
         <div class="attach-desc">
-          <a href="attachment.cgi?id=[% attachment.id FILTER none %]">
-            [%~ attachment.description FILTER html %]</a>
+          [% IF attachment.is_image %]
+            <a href="attachment.cgi?id=[% attachment.id FILTER none %]"
+              title="[% attachment.description FILTER html %]"
+              class="lightbox">
+              <img src="extensions/BugModal/web/image.png" width="16" height="16">
+              [%~ attachment.description FILTER html %]
+            </a>
+          [% ELSE %]
+            <a href="attachment.cgi?id=[% attachment.id FILTER none %]">
+              [%~ attachment.description FILTER html %]</a>
+          [% END %]
         </div>
         <div>
           <span class="attach-time">[% INCLUDE bug_modal/rel_time.html.tmpl ts=attachment.attached %]</span>

extensions/BugModal/web/bug_modal.css

@@ -650,3 +650,57 @@ div.ui-tooltip {
     width: 100%;
 }
 
+/* lightbox */
+
+.lightbox img {
+    margin-right: 4px;
+    vertical-align: sub;
+}
+
+#lb_img {
+    background-color: #fff;
+    border: 1px solid #666;
+    -webkit-box-shadow: 0 0 10px #555;
+    -moz-box-shadow: 0 0 10px #555;
+    box-shadow: 0 0 10px #555;
+    padding: 10px;
+    max-width: 90%;
+    margin: 20px auto;
+    cursor: pointer;
+}
+
+#lb_overlay {
+    position: fixed;
+    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
+    width: 100%;
+    height: 100%;
+    top: 0px;
+    left: 0px;
+    text-align: center;
+    z-index: 2;
+}
+
+#lb_overlay2 {
+    position: absolute;
+    left: 0px;
+    width: 100%;
+    text-align: center;
+    z-index: 2;
+}
+
+#lb_text {
+    color: #fff;
+    font-weight: bold;
+    text-shadow: 1px 1px 1px #000;
+    position: fixed;
+    top: 4px;
+    left: 8px;
+    z-index: 3;
+    cursor: default;
+}
+
+#lb_close_btn {
+    position: fixed;
+    top: 8px;
+    right: 8px;
+}

extensions/BugModal/web/bug_modal.js

@@ -200,6 +200,15 @@ $(function() {
         });
     }
 
+    // lightboxes
+    $('.lightbox, .comment-text .lightbox + span:first-of-type a:first-of-type')
+        .click(function(event) {
+            if (event.metaKey)
+                return;
+            event.preventDefault();
+            lb_show(this);
+        });
+
     //
     // anything after this point is only executed for logged in users
     //
@@ -725,6 +734,53 @@ function bugzilla_ajax(request, done_fn, error_fn) {
         });
 }
 
+// lightbox
+
+function lb_show(el) {
+    $(window).trigger('close');
+    $(document).bind('keyup.lb', function(event) {
+        if (event.keyCode == 27) {
+            lb_close(event);
+        }
+    });
+    var overlay = $('<div>')
+        .prop('id', 'lb_overlay')
+        .css({ opacity: 0 })
+        .appendTo('body');
+    var overlay2 = $('<div>')
+        .prop('id', 'lb_overlay2')
+        .css({ top: $(window).scrollTop() + 5 })
+        .appendTo('body');
+    var title = $('<div>')
+        .prop('id', 'lb_text')
+        .appendTo(overlay2);
+    var img = $('<img>')
+        .prop('id', 'lb_img')
+        .prop('src', el.href)
+        .prop('alt', 'Loading...')
+        .css({ opacity: 0 })
+        .appendTo(overlay2)
+        .click(function(event) {
+            event.stopPropagation();
+            window.location.href = el.href;
+        });
+    var close_btn = $('<button>')
+        .prop('id', 'lb_close_btn')
+        .prop('type', 'button')
+        .addClass('minor')
+        .text('Close')
+        .appendTo(overlay2);
+    title.append(el.title);
+    overlay.add(overlay2).click(lb_close);
+    img.add(overlay).animate({ opacity: 1 }, 200);
+}
+
+function lb_close(event) {
+    event.preventDefault();
+    $(document).unbind('keyup.lb');
+    $('#lb_overlay, #lb_overlay2, #lb_close_btn, #lb_img, #lb_text').remove();
+}
+
 // no-ops
 function initHidingOptionsForIE() {}
 function showFieldWhen() {}