﻿id	summary	reporter	owner	description	type	status	priority	milestone	component	version	severity	resolution	keywords	cc
11232	UI improvements for 2.9 bulk plugin/theme updater (esp. success/fail msgs)	jeremyclarke	ryan	"I just tried the bulk plugin upgrades in WP 2.9 rare. It worked well but the experience of seeing so many copies of the upgrade message made me think that it could be much more effective visually at communicating the results without too much extra work. 

Here's how it looks now:

[[Image(http://simianuprising.com/wp-content/uploads/2009/11/wp-bulk-updater-ui-ticket-0.png)]]

== Problem ==
While this is informative it is obviously super-spartan in design while also taking up a ton of space on the screen. When it was just one plugin/theme at a time I was willing to ignore the simplicity, but with 11 in a row it gets pretty intolerable that it not only fails to communicate the relevance of the messages its outputting, but also forces me to scroll a ton to see all the output. 

I felt like I had to read through all 11 sets of messages because the success message had no special style. It looked just like all the others, so if there was a failure message I had to assume it would also look like the rest. Needless to say reading all that is a terrible user experience and WP could do a lot better. The output reads like a log of information that should be hidden by default, and maybe it should be. 

== Solution ==

=== EASY: Add .updated and .error to {{{<p>}}} tags ===
The simplest fix would be to add a css class to the success/fail messages so that they stick out. The obvious choice and one that would involve no new styling is to use the existing {{{.updated}}} and {{{.error}}} classes from the {{{/wp-admin/css/global.css}}} file. I tried them on my list and it works fine on the {{{<p>}}} tags the messages are wrapped in. The .updated ones look yellow, so after seeing one you could scan down the page to see that all messages are yellow. 

=== Make Success/Fail messages bigger === 
The final messages should be much bigger than the rest of the text for each plugin, and the other messages should probably not have so much margin on them. As it is each line is its own {{{<p>}}} and as such has 1em of margin on top and bottom. If they were instead seperated by {{{<br />}}} tags they would be just as readable (they currently have {{{line-height:140;}}} anyway) and I can't think of a ""semantic"" reason why this log output should be considered paragraphs that outweighs the need to conserve space.

=== Use the actual plugin's name ===
The success/fail message should state the name of the plugin, as in ""Contact Form 7 Successfully Upgraded"" instead of ""Plugin Upgraded Successfully"". 

When you are reading a list with many plugins it would help greatly to differentiate the messages. The current system feels very vague: nowhere in the message is the title of each plugin mentioned. If the actual plugin name would be complex/resource-intensive to determine then the filename of the core plugin file (i.e. {{{contact-form-7.php}}}) should be shown instead, most people would be able to figure out which plugin it was based on the filename.

=== Link back to Core Upgrade screen at end of list === 
This may already be planned, but at the end of the list, after the ""Disabling Maintenance mode."" message (which should also be removed, not really useful to users) there should be a link back to the {{{/wp-admin/update-core.php}}} file. As it is its very unclear what to do after upgrading your plugins, and giving the user a direct link to the next step just makes sense. 

=== Hide log output entirely with JQuery and only show upon request ===

I think this is the real killer solution. All messages but the final success/failure one should go in a div that is hidden by jquery by default, but can be shown by clicking a 'more info' link next to the success/failure message. 

For most people this would mean a string of messages informing them that each of their plugins was successfully upgraded. Easy to look at and look through to make sure there was no problems. If there is a problem they can find out what it is easily or actual error messages can be displayed by default.

I think this might be how it should always have been. The current system feels a bit by-developers, for-developers. Normal people just want to know that it was upgraded or if there were problems. 

== Implementation ==

I looked through the {{{/wp-admin/includes/class-wp-upgrader.php}}} file to see how this was accomplished but haven't actually written a patch yet. It seems like the messages themeselves are being generated by the {{{show_message()}}} function from {{{/wp-admin/includes/misc.php}}}. That function doesn't have options for adding classes to the {{{<p>}}} tags it produces nor does it allow for other formats. Maybe we could modify that function to do more? Add in {{{$before}}}, {{{$after}}}, {{{$css_class}}} and {{{$format}}} parameters? I think they would be useful in a lot of situations where you're showing messages. 

Otherwise I think it's reasonable to use a seperate display system for these upgrader messages that accounts for the importance of differentiating between log messages and success/fail messages. 

If someone would be willing to commit a patch if it was done a certain way please say so and I'll try to make a patch that satisfies your demands. IMHO there's a good chance that ryan or whoever did most of the work on the upgrader could hammer out these changes in no time though ;)

=== Screenshots ===

=== .updated and bigger font for success msg ===
Here's how it looks with just the addition of {{{.updated}}} to the success messages along with an increase in the font size of {{{.updated}}} and switching to {{{<br />}}} or removing the padding from the rest of the output. The font size increase would involve wrapping the whole upgrader output in a class or id like {{{#updater-output}}}, which IMHO is a very sensible choice that would match the rest of {{{wp-admin}}}. The CSS to increase the font size would then be 
{{{
#updater-output .updated {font-size: 16px;}	
}}}

[[Image(http://simianuprising.com/wp-content/uploads/2009/11/wp-bulk-updater-ui-ticket-1.png)]]


=== hide output with jquery, use plugin names and add button at bottom ===

This one is uglier but shows what I mean about hiding most of the log output and using the actual plugin names. Note how many more messages can fit on one screen and consider how useful the hidden messages are to 99% of users. Compared to the current design this one can show 8 plugins worth of messages instead of 3(!)

[[Image(http://simianuprising.com/wp-content/uploads/2009/11/wp-bulk-updater-ui-ticket-2.png)]]

	








"	defect (bug)	closed	normal	3.0	UI		normal	fixed	needs-patch ui-feedback	janeforshort jeremyclarke WordPress@…
