Revision UI cleanup / improvements / corrections

The new revisions UI still needs some UI polish. Now that we have addressed code/functionality issues i thought i would open a ticket to note the outstanding visual issues not addressed elsewhere:

the tooltips need work: their placement varies by browser, also it would be ideal if the tooltip stayed open while a user dragged the handle - currently the tooltip only stays open and updates if you keep your mouse confined to the slider handle; the slider on the other hand works fine if you drag and keep dragging but don't stay in the handle with your mouse; the result is that if you move off the handle while dragging, the slider moves, but the tooltip disappears.[24174]

the weighted tick marks get off to the left of center when they get thicker because of the way they are implemented; should fix so they are more accurately centered under the slider handle; last tick mark missing in compare two mode? #24056

the slider handle graphics are currently encoded as base 64 in the css, not certain thats the best way to implement them#23899

the 'compare two mode' option placement in the upper right seems haphazard, its just floating out there[24119]

Also we lost the 'single column' option for the diff view - not sure if we still want it, but i liked it.

with just a few revisions the slider/next/previous seem disconnected; with over a certain number of revisions the slider will grow wider than the screen;#24056

Maybe I'm the only one that thinks this, but it just seems like a terrible idea for the title and excerpt content to be prepended and appended (respectively) right inline with the actual post content in the diff. The diff currently makes you think the new title and excerpt was accidentally included right in the post content.

I understand that it's nice to be able to see those changes along with the post content, but I really think those need to be in their own sections if they are going to be included.

So currently it looks like this:

But it should probably look more like this:

Title:
old title => new title
Content:
first post => second post
Excerpt:
old excerpt => new excerpt

I should note that it's actually even worse when you go from no title/excerpt to a new one since there isn't even a "removed" line for it, so it definitely looks like it was just added to the main post content.

I've modified the slider tooltips based on an upcoming jQuery UI 1.11 feature (​3071) for slider labels. This allows the tooltip/label to follow the slider and should take care of the positioning issues.

That leaves point 2 for adamsilverstein to wrap up, and I've left out point 3 for now.

ahoereth on IRC reported an issue with the two revision columns being slightly different sizes and causing words to wrap differently (​http://d.pr/i/1hdk).

This issue appears to be related to the percentage widths used for the revisions table, including the middle spacer column (48% / 4% / 48%), where the browser is rounding things differently. By setting the middle spacer column to width: auto we can maintain the width of the left and right column, and let the browser use the middle column to fill in the remaining space.

I've modified the slider tooltips based on an upcoming jQuery UI 1.11 feature (​3071) for slider labels. This allows the tooltip/label to follow the slider and should take care of the positioning issues.

That leaves point 2 for adamsilverstein to wrap up, and I've left out point 3 for now.

thanks for the patch... wanted to clarify the tooltip issue:

i think we want to attack the tooltips to the actual tickmarks, sorry if my original comment was confusing. i thought the tooltips went with the handle and thats how i originally coded it, but it makes more sense if they are over the ticks, then you can hover over the ticks to see which revision they represent even before moving the handle there. do you want to take a shot at that?

add click action - clicking in slider bar moves handle to that position; clicking to the left of the left handle in the two handle mode moves the left handle, clicking between the handles or to the right of the right handle moves the right handle (reversed in RTL mode)

re-work spacing technique for tick marks using borders instead of margins (required so hover action works), even borders left/right so handle centered on tick marks (previously handle was off on wider ticks)

i've been feeling a bit like the ​guy who killed pluto since i removed the revisions easter egg someone worked so hard on. restore-eater-egg.diff​ restores the possibility of running that code, but won't be reachable accidentally (i'm guessing you can see how to activate it), a previous complaint. i've been hunting for an acceptable way to re-enable, this is the 1st that actually made sense; enjoy!

Adds for the first and the last tick border-radius 3px since the slider has it too. Otherwise it will overlap the slider

I have increased the width of the ticks by 1px. scope-of-changes-none has 1px, scope-of-changes-vsmall has 2px and so on.

Issues:

Because we have now scope-of-changes-none with 1px which will be extended to 2px+ we should remove the style declarations for completed-false and completed-true since it's not visible anymore and the width increase seems good enough for a loading animation. But we can leave the classes.

In single mode the last tick gets always the .scope-of-changes-none class

Adds for the first and the last tick border-radius 3px since the slider has it too. Otherwise it will overlap the slider

good catch

I have increased the width of the ticks by 1px. scope-of-changes-none has 1px, scope-of-changes-vsmall has 2px and so on.

great.

Issues:

Because we have now scope-of-changes-none with 1px which will be extended to 2px+ we should remove the style declarations for completed-false and completed-true since it's not visible anymore and the width increase seems good enough for a loading animation. But we can leave the classes.

the 'completed' class adds an animation to the tick mark while the underlying revision diff is loaded, don't think changing width really works as well may be enough though.

In single mode the last tick gets always the .scope-of-changes-none class

this is usually the 'current' revision, is the scope still 'none' even if there are several changes in the current version? if so this is a bug and i will dig deeper.

Adds for the first and the last tick border-radius 3px since the slider has it too. Otherwise it will overlap the slider

I have increased the width of the ticks by 1px. scope-of-changes-none has 1px, scope-of-changes-vsmall has 2px and so on.

Issues:

Because we have now scope-of-changes-none with 1px which will be extended to 2px+ we should remove the style declarations for completed-false and completed-true since it's not visible anymore and the width increase seems good enough for a loading animation. But we can leave the classes.

In single mode the last tick gets always the .scope-of-changes-none class