Revision UI cleanup / improvements / corrections

[adamsilverstein]

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

[bpetty]

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

[bpetty]

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.

[bpetty]

Related: #23899

[ocean90]

Related: #24056

[ocean90]

bpetty's point is handled in #23903.

[jrbeilke]

Ran into an issue with the new Revisions UI where the post title is overlapping the compare two revisions checkbox:

[ocean90]

The patch from jrbeilke moves the compare 2 checkbox to the diff header: ​http://cl.ly/ON9R

Still need a better place for the loading status. Any suggestions?

[jrbeilke]

adamsilverstein suggested we could move the loading-status just below the slider, since the status and the slider are directly related:

diff incoming

[jrbeilke]

combined patch for slider tooltips, compare checkbox, and loading status

[jrbeilke]

Ok, this new patch should take care of points 1 and 4.

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.

[jrbeilke]

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.

[jrbeilke]

updating my earlier patch to include a fix for the revision column widths bug

[adamsilverstein]

Replying to jrbeilke:

Ok, this new patch should take care of points 1 and 4.

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?

[SergeyBiryukov]

A note on formatting: per our ​CSS Coding Standards, each selector should be on its own line.

[jrbeilke]

split css selectors to separate lines per the coding standards

[ocean90]

23935.patch​:

• Continues 23935.tooltips-checkbox-status.3.patch​
• Moves color declarations to classic/fresh styles
• Syncs classic with fresh stylesheet
• Fixes a bug in jrbeilke's patch on tooltip resetting
• Aligns the status message to the left
• Restores the color shades for scope of changes
• Styles diff header

[adamsilverstein]

looks good :)

i am working on moving the tooltips to the ticks instead of the slider handles as suggested in several places; will post a patch back here.

Replying to ocean90:

23935.patch​:

• Continues 23935.tooltips-checkbox-status.3.patch​
• Moves color declarations to classic/fresh styles
• Syncs classic with fresh stylesheet
• Fixes a bug in jrbeilke's patch on tooltip resetting
• Aligns the status message to the left
• Restores the color shades for scope of changes
• Styles diff header

[ocean90]

In 24119:

Revisions UI update:

• Style status loading as a regular update message like on the other screens
• Move compare two checkbox to diff header to avoid an overlap on long post titles
• Restore color shades for the scope of changes visualisation
• Show tooltips while moving the slider handle
• Diff header styling
• Move color declarations to classic/fresh stylesheets
• Sync admin color stylesheets

props jrbeilke for initial patch. see #23935.

[ocean90]

Okay, so let's use this ticket now for tooltip improvements.

[adamsilverstein]

23935-improved-tick-marks.diff​:

• change language 'Calculating revision diffs' => 'Calculating revision comparisons'
• move tooltips from slider handles to tick marks, hovering over the slider bar shows meta info from nearest tick mark
• 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)
• js variable name cleanup (consolidate var statements)
• css cleanup, remove tick mark margins, rework colors; add back scope-of-changes-none weight

[adamsilverstein]

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!

[adamsilverstein]

23935-improved-tick-marks.3.diff​​

• reposition loading spinner, remove wording - spinner conveys enough meaning;
• position absolute so display doesn't jump around when loading

[adamsilverstein]

add arrow below tooltips

[adamsilverstein]

23935-improved-tick-marks.4.diff​​
*adds arrow back for tooltips
*clean up alignment on tooltip text

[ocean90]

@adamsilverstein: The range background color is missing, is this by design?

[adamsilverstein]

Replying to ocean90:

@adamsilverstein: The range background color is missing, is this by design?

i think the range is now being hidden with the new border method for the ticks; wasn't intentional, but sort of prefer that way.

[adamsilverstein]

remove color for range

[adamsilverstein]

add color-classic.css

[ocean90]

23935-improved-tick-marks.7.diff​:

• Adds tooltip background color to classic style
• 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

[adamsilverstein]

Replying to ocean90:

23935-improved-tick-marks.7.diff​:

• Adds tooltip background color to classic style
• 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.

[adamsilverstein]

fixes last tick mark scope of changes not loaded correctly, fixes slider width calculation

[adamsilverstein]

Replying to ocean90:

23935-improved-tick-marks.7.diff​:

• Adds tooltip background color to classic style
• 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

23935-improved-tick-marks.8.diff​:

• fixes last tick mark scope of changes not loaded correctly
• fixes slider width calculation by including left, right tick widths in calculation

[ocean90]

Replying to adamsilverstein:

The calculation doesn't work pretty, see ​http://cl.ly/OjuG (in single mode too)

[adamsilverstein]

fix width calculation

[adamsilverstein]

Replying to ocean90:

Replying to adamsilverstein:

The calculation doesn't work pretty, see ​http://cl.ly/OjuG (in single mode too)

think it was odd/2 calculation issue; changed from floor to ceil, please try 23935-improved-tick-marks.9.diff​ see if problem goes away

[ocean90]

In 24174:

Revisions UI: Just another update - Now with improved tick marks and tooltips.

props adamsilverstein. see #23935.

[ocean90]

​We decided to not bring back the easter egg (Huh, which easter egg…?).