Tom [Mon, 17 Nov 2014 23:25:41 +0000 (00:25 +0100)]
Add a blink comparator and pixel difference to image diffs
Pixel difference uses CSS mix-blend-mode, which is supported currently
only on Firefox >= 32 and on Safari >= 7.1. Implementation is behind a
Javascript feature test.
For other browsers, there's a blink comparator.
Code changes:
* ImageDiffHandler now takes the page it's used on as argument. We need
that to get labels. DOM generated is a
little bit different (new controls).
* Diff pages adapted to new constructor of ImageDiffHandler.
* CSS and Javascript changes implementing the new controls, making use
of two new static image resources. Since I felt that the new controls
deserved tooltips, I also gave the opacity slider a tooltip: changed
to <a>, and slider handle changed from <div> to <span>. CSS ensures
everything still displays the same (basically display:inline-block).
* Supplied messages for English, French, and German for the new
tooltips.
Tom [Sat, 15 Nov 2014 00:09:47 +0000 (01:09 +0100)]
Minor corrections in Javascript
1. Stop running animation before starting a new one.
2. Fix ratio in animation
3. Fix div width
None of these change have any visible effect in the current use of
this script. (1) is just being safe, in (2) , the wrongly calculated
value was never used,and in (3), the div was a little too wide before.
Tom [Fri, 14 Nov 2014 21:14:28 +0000 (22:14 +0100)]
Javascript-based sliders styled with CSS
This works better for small images. The previous CSS-resize based
attempt worked reasonably well, but had two problems on WebKit
(Safari):
1. For very small images the red resize handle would overlap the image
itself. In that case, the image became un-draggable as soon as the
opacity was reduced below 1.0.
2. Safari apparently doesn't send mousemove events during a CSS
resize, so the opacity was changed only on mouseup.
Both observed on Safari 6.1.6 and 7.1. FF 33.1 had no problems.
Therefore I've switched to a Javascript slider. Since I didn't find
any that was simple, did not require HTML 5, appeared to be well
maintained, had a bug tracker and not too many outstanding bug reports,
didn't pull in umpteen other dependencies, didn't suffer from feature
bloat, was compatible with jQuery 1.7.1, and was freely licensed, I
ended up writing my own.
imgdiff.js contains a small Javascript slider (only horizontal) that is
styled completely in CSS. It reports ratios in the range [0..1] and
fires nice jQuery events 'slider:pos' on value changes. Base element
is a plain div that is positioned. It's not a general-purpose do-it-all
slider, but it's small, simple, and works for what we need it.
(imgdiff.js also sets up the ese sliders on the diff pages.)
Tom [Thu, 13 Nov 2014 20:57:50 +0000 (21:57 +0100)]
Fix that opacity slider
Using the browser's built-in slider doesn't work if the browser hides
scrollbars (like Firefox on Mac). So,construct our own slider with
three divs and some CSS. Event-handling Javascript changed to match
this new implementation.
Tom [Wed, 12 Nov 2014 19:31:12 +0000 (20:31 +0100)]
Opacity adjustments for image diffs
* ImageDiffHandler adds the slider; styled in gitblit.css
* imgdiff.js is a little bottom-loaded Javascript that adjusts the
opacity on sliders' scroll events.
* The three diff pages add this bottom script to the page if needed
* GitBlitDiffFormatter: center image diffs.
Tom [Wed, 12 Nov 2014 19:27:17 +0000 (20:27 +0100)]
HTML bug fix on the blob page
That blob page sent *two* body tags. Now that we have bottom scripts,
we can fix that easily: don't try to set body.onload, but run the
prettyprinting through a bottom script on jQuery's document.ready.
Tom [Wed, 12 Nov 2014 19:19:29 +0000 (20:19 +0100)]
Support for adding bottom scripts
Needed if we want to have opacity changes in image diffs because
jQuery is bottom-loaded, so we must ensure that any scripts using
jQuery are run later.
I'm not a Wicket expert; maybe there's a cleverer or cleaner way to do
this. There is a JavascriptUtils class in Wicket, but that writes to
the response -- I don't quite see how that would give me control over
the precise placement of the scripts to ensure they come after that
bottom-loaded jQuery.
Based on Lea Verou's pure CSS slider:
http://lea.verou.me/2014/07/image-comparison-slider-with-pure-css/
* Add a callback interface, pass it through DiffUtils to the
GitBlitDiffFormatter. Is needed because the rendering needs access
to the repositoryName and other things that are known only at higher
levels.
* New class ImageDiffHandler responsible for rendering an image diff.
Called for all binary diffs, doesn't do anything if it's not an
image. HTML is generated via JSoup: no worries about forgetting to
close a tag, not about HTML escaping, nor about XSS.
* The 3 diff pages set up such an ImageDIffHandler and pass it along.
* CSS changes: from Lea Verou, with some minor improvements.
I think in the long run there'll be no way around rewriting the
HTML diff formatter from scratch, not using the standard JGit
DiffFormatter at all.
Tom [Wed, 29 Oct 2014 13:50:52 +0000 (14:50 +0100)]
CSS changes.
- As discussed:
- gutter a little lighter, context lines nearly but not quite
white.
- 2px left (and right) padding in the code column.
- I also noticed that somehow all lines were spaced vertically a little
wider than on dev.gitblit. Added cellpadding='0' to get the old line
height again.
Tom [Tue, 28 Oct 2014 20:55:21 +0000 (21:55 +0100)]
More diff page improvements
- Use git object ids as fragments and HTML element ids
- Simplify generation: don't parse the diff line, instead generate
the table header from the DiffEntry when we process it, and just
skip the diff lines.
Tom [Sun, 26 Oct 2014 17:10:13 +0000 (18:10 +0100)]
Improve the commitdiff.
* Optimize CSS: simplify selectors. That alone cuts rendering time in
half!
* Adapt HTML generation accordingly.
* Change line number generation so that one can select only code lines.
Also move the +/- out of the code column; it also gets in the way
when selecting.
* Omit long diffs altogether.
* Omit diff lines for deleted files, they're not particularly
interesting.
* Introduce a global limit on the maximum number of diff lines to show.
* Supply translations for the languages I speak for the new messages.
https://code.google.com/p/gitblit/issues/detail?id=450 was about a diff
with nearly 300k changed lines (with more then 3000 files deleted). But
one doesn't have to have such a monster commit to run into problems. My
FF 32 become unresponsive for the 30+ seconds it takes it to render a
commitdiff with some 30000 changed lines. (90% of which are in two
generated files; the whole commit has just 20 files.) GitHub has no
problems showing a commitdiff for this commit, but omits the two large
generated files, which makes sense.
This change implements a similar thing. Files with too many diff lines
get omitted from the output, only the header and a message that the
diff is too large remains. Additionally, there's a global limit on
the length of a commitdiff; if we exceed that, the whole diff is
truncated and the files not shown are listed.
The CSS change improves performance by not using descendant selectors
for all these table cells. Instead, we assign them precise classes and
just use that in the CSS.
The line number generation thing using data attributes and a :before
selector in the CSS, which enables text selections only in the code
column, is not strictly XHTML 1.0. (Data attributes are a feature of
HTML 5.) However, reasonably modern browsers also handle this correctly
if the page claims to be XHTML 1.0. Besides, the commitdiff page isn't
XHTML compliant anyway; I don't think a pre-element may contain divs
or even tables.
(Note that this technique could be used on other diff pages, too. For
instance on the blame page.)
James Moger [Tue, 21 Oct 2014 13:33:29 +0000 (09:33 -0400)]
Adjust priority & severity CSS
- Severity: more severe are ROY, less severe are GB
- Replaced first-letter of severity with S# and show # dots
- Priority: higher priorityare RO, lower priority is B
I really like the 'C, 'CA' idea but that will definitely lead to translation questions. The S# approach will still generate the same complaints, but at least it is more generic.
Paul Martin [Mon, 29 Sep 2014 21:10:20 +0000 (22:10 +0100)]
Tickets - Priority, Severity options
+ Severity indicated via new character indicator and color of ticket icon on ticket list
+ Priority indicated via new priority icon and color on ticket list
+ Indexed as integers to provide sorting and maintain language neutral
index
+ Colours and indicator text controlled through CSS classes priority-<x> & severity-<x>
+ UITicketTest created to generate tickets of all types to ease debugging
Bug in the rawservlet in extracting the repository out of the path. The
offset for finding the next slash should be the current slash + 1, not
the last offset + the offset of the current slash.
projects / gitblit.git / log